/* ============================================================================
   GSB.STORYLINES — the executive storyline board (#storylines-screen).
   Token-based, and EVERY rule is scoped to #storylines-screen so nothing here
   can leak into another tab. Classes are namespaced .sl-.

   Deliberately NOT set anywhere in this file: `display` on #storylines-screen
   itself. An ID selector (1,0,0) beats .screen{display:none} / .screen.active,
   which is how a previous tab ended up permanently visible. If a future rule
   ever needs to set display on the screen id, it must also re-assert
   #storylines-screen.screen:not(.active){display:none}.

   Layout: command bar, coverage strip, four attention modules, the weighted
   bento board, then the vault. Tile SIZE is the ranking. Because size carries
   meaning, a small tile must never mean lost information — tapping any tile
   expands a full-width panel directly below its row with the complete state,
   facts, blockers and timeline.
   ============================================================================ */

#storylines-screen {
  padding: 0 16px 40px;
  color: var(--gsb-soil-ink);
  font-family: var(--font-body);
}

#storylines-screen .nav-bar { padding: 10px 0 0; }

/* Same class of trap as the unscoped table/td/th rules: style.css AND
   gsb-chrome.css both style the bare `header` tag (gsb-chrome with !important)
   for the app's top nav, so any <header> inside injected markup silently picks
   up a paper fill, a 1.5px ink underline and 8px/24px padding. The rendered
   markup therefore uses <div>, not <header>. This neutralizer is the seatbelt if
   a future edit reintroduces the tag. */
#storylines-screen header {
  position: static !important;
  z-index: auto !important;
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

#storylines-screen #storylines-freshness {
  font-size: 11px;
  color: var(--gsb-stone);
  font-family: var(--font-body);
}

#storylines-screen .sl-loading {
  padding: 48px 0;
  text-align: center;
  color: var(--gsb-stone);
  font-size: 13px;
}

/* ---- Command bar --------------------------------------------------------- */
#storylines-screen .sl-cmdbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--gsb-oat);
  margin-bottom: 8px;
}

#storylines-screen .sl-cmd-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

#storylines-screen .sl-cmd-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gsb-stone);
  white-space: nowrap;
}

#storylines-screen .sl-cmd-divider {
  width: 1px;
  align-self: stretch;
  background: var(--gsb-oat);
  margin: 2px 2px;
}

#storylines-screen .sl-cmd-spacer { flex: 1 1 auto; }

/* Segmented status control: oat track, solid ink pill for the active segment —
   the shared pattern used by every other main-bar tab. */
#storylines-screen .sl-seg {
  display: inline-flex;
  gap: 2px;
  background: var(--gsb-oat);
  border-radius: var(--radius-md);
  padding: 3px;
}

#storylines-screen .sl-segbtn {
  border: 0;
  background: transparent;
  color: var(--gsb-stone);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

#storylines-screen .sl-segbtn:hover { color: var(--gsb-soil-ink); }

#storylines-screen .sl-segbtn.on {
  background: var(--gsb-soil-ink);
  color: var(--gsb-paper);
}

#storylines-screen .sl-chiprow {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

#storylines-screen .sl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--gsb-oat);
  background: var(--color-surface);
  color: var(--gsb-stone);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

#storylines-screen .sl-chip:hover { background: var(--gsb-paper); border-color: var(--gsb-oat-dk); }
#storylines-screen .sl-chip.on { background: var(--gsb-soil-ink); border-color: var(--gsb-soil-ink); color: var(--gsb-paper); }
#storylines-screen .sl-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

#storylines-screen .sl-btn {
  border: 1px solid var(--gsb-oat);
  background: var(--color-surface);
  color: var(--gsb-stone);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

#storylines-screen .sl-btn:hover { background: var(--gsb-paper); color: var(--gsb-soil-ink); }
#storylines-screen .sl-btn.on { background: var(--gsb-soil-ink); border-color: var(--gsb-soil-ink); color: var(--gsb-paper); }
#storylines-screen .sl-btn-reset { color: var(--gsb-clay); border-color: rgba(181, 83, 46, 0.35); }
#storylines-screen .sl-btn-x { padding: 2px 7px; font-size: 11px; line-height: 1.2; }

/* ---- Coverage strip ------------------------------------------------------
   Spec 2.4: a thread that looks quiet because nobody recorded the meeting is a
   different fact from one that is actually stalled. State the capture age. */
#storylines-screen .sl-coverage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 12px;
  font-size: 11px;
}

#storylines-screen .sl-cov-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gsb-stone);
}

#storylines-screen .sl-cov {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gsb-stone);
  background: var(--gsb-paper);
  border: 1px solid var(--gsb-oat);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}

#storylines-screen .sl-cov b { font-weight: 500; color: var(--gsb-soil-ink); }
#storylines-screen .sl-cov-watch { border-color: rgba(185, 139, 50, 0.45); }
#storylines-screen .sl-cov-watch b { color: var(--gsb-ochre); }
#storylines-screen .sl-cov-late { border-color: rgba(181, 83, 46, 0.45); }
#storylines-screen .sl-cov-late b { color: var(--gsb-clay); }
#storylines-screen .sl-cov-none b { color: var(--gsb-stone); }

#storylines-screen .sl-cov-note {
  font-size: 10px;
  color: var(--gsb-stone);
  font-style: italic;
  font-family: var(--font-display);
  max-width: 46ch;
  text-align: right;
}

/* ---- Attention modules --------------------------------------------------- */
#storylines-screen .sl-attention {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

#storylines-screen .sl-att {
  background: var(--color-surface);
  border: 1px solid var(--gsb-oat);
  border-top: 2px solid var(--gsb-stone);
  border-radius: var(--radius-md);
  padding: 10px 12px 8px;
  min-width: 0;
}

#storylines-screen .sl-att-late { border-top-color: var(--gsb-clay); }
#storylines-screen .sl-att-watch { border-top-color: var(--gsb-ochre); }

#storylines-screen .sl-att-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#storylines-screen .sl-att-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: var(--tracking-tight);
  color: var(--gsb-soil-ink);
}

#storylines-screen .sl-att-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gsb-stone);
}

#storylines-screen .sl-att-sub {
  margin: 3px 0 8px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--gsb-stone);
}

#storylines-screen .sl-att-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 190px;
  overflow-y: auto;
}

#storylines-screen .sl-att-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--gsb-oat);
  cursor: pointer;
}

#storylines-screen .sl-att-row:hover { background: var(--gsb-paper); }
#storylines-screen .sl-att-main { flex: 1 1 auto; min-width: 0; }

#storylines-screen .sl-att-what {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--gsb-soil-ink);
}

#storylines-screen .sl-att-thread {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  color: var(--gsb-stone);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

#storylines-screen .sl-att-side {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

#storylines-screen .sl-att-who { font-size: 10px; color: var(--gsb-stone); white-space: nowrap; }
#storylines-screen .sl-att-money { font-family: var(--font-mono); font-size: 10px; color: var(--gsb-soil-ink); }
#storylines-screen .sl-att-empty { margin: 4px 0 2px; font-size: 11px; color: var(--gsb-stone); font-style: italic; font-family: var(--font-display); }

/* ---- Shared figure chips ------------------------------------------------- */
#storylines-screen .sl-due,
#storylines-screen .sl-silent,
#storylines-screen .sl-figure,
#storylines-screen .sl-stage {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* A date chip renders ONLY for a stated waiting_on.due. Nothing on this board
   ever infers a date from prose and draws it as a chip. */
#storylines-screen .sl-due { color: var(--gsb-shoot-green); background: rgba(47, 107, 69, 0.09); }
#storylines-screen .sl-due-late { color: var(--gsb-clay); background: rgba(181, 83, 46, 0.10); }
#storylines-screen .sl-silent { color: var(--gsb-stone); background: var(--gsb-paper); }
#storylines-screen .sl-figure { color: var(--gsb-soil-ink); background: var(--gsb-paper); }
#storylines-screen .sl-stage { color: var(--gsb-stone); background: var(--gsb-paper); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- The weighted bento board -------------------------------------------- */
#storylines-screen .sl-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

#storylines-screen .sl-tile {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--gsb-oat);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  min-width: 0;
  text-align: left;
  transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}

#storylines-screen .sl-tile:hover { border-color: var(--gsb-oat-dk); background: #FFFDF9; }
#storylines-screen .sl-tile:focus-visible { outline: 2px solid var(--gsb-shoot-green); outline-offset: 1px; }
#storylines-screen .sl-tile.is-open { border-color: var(--gsb-soil-ink); }

#storylines-screen .sl-t-hero { grid-column: span 6; }
#storylines-screen .sl-t-feature { grid-column: span 4; }
#storylines-screen .sl-t-chip { grid-column: span 3; }
#storylines-screen .sl-t-micro { grid-column: span 2; padding: 8px 10px; }

#storylines-screen .sl-tile-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#storylines-screen .sl-kind {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

#storylines-screen .sl-bu {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gsb-stone);
  background: var(--gsb-paper);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

#storylines-screen .sl-flag { font-size: 10px; line-height: 1; }

#storylines-screen .sl-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;          /* the display serif is never bold */
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
  color: var(--gsb-soil-ink);
  font-size: 15px;
}

#storylines-screen .sl-t-hero .sl-name { font-size: 24px; }
#storylines-screen .sl-t-feature .sl-name { font-size: 18px; }
#storylines-screen .sl-t-micro .sl-name { font-size: 13px; }

#storylines-screen .sl-headline {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--gsb-stone);
  flex: 1 1 auto;
}

#storylines-screen .sl-t-hero .sl-headline { font-size: 13.5px; color: #4A4438; }

#storylines-screen .sl-clamp2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#storylines-screen .sl-tile-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 2px;
}

/* Heat: momentum x 10 + recency + boost. The bar is the sort key made visible. */
#storylines-screen .sl-heat { display: inline-flex; align-items: center; gap: 5px; }

#storylines-screen .sl-heat-track {
  width: 34px;
  height: 3px;
  background: var(--gsb-oat);
  border-radius: 2px;
  overflow: hidden;
}

#storylines-screen .sl-heat-fill { display: block; height: 100%; background: var(--gsb-shoot-green); }
#storylines-screen .sl-heat-num { font-family: var(--font-mono); font-size: 9px; color: var(--gsb-stone); }
#storylines-screen .sl-trend { font-size: 8px; }
#storylines-screen .sl-trend.sl-up { color: var(--gsb-shoot-green); }
#storylines-screen .sl-trend.sl-down { color: var(--gsb-clay); }

/* ---- The in-place expansion ---------------------------------------------- */
#storylines-screen .sl-panel-wrap { grid-column: 1 / -1; min-width: 0; }

#storylines-screen .sl-panel {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--gsb-soil-ink);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  animation: slPanelIn var(--motion-base) var(--ease-out);
}

@keyframes slPanelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #storylines-screen .sl-panel { animation: none; } }

#storylines-screen .sl-panel-x {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  color: var(--gsb-stone);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}

#storylines-screen .sl-panel-x:hover { color: var(--gsb-soil-ink); }

#storylines-screen .sl-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
}

#storylines-screen .sl-sec {
  margin: 14px 0 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gsb-stone);
}

#storylines-screen .sl-panel-main > .sl-sec:first-child,
#storylines-screen .sl-panel-side > .sl-sec:first-child { margin-top: 0; }

#storylines-screen .sl-state {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  line-height: var(--lh-prose);
  color: var(--gsb-soil-ink);
  max-width: 68ch;
}

#storylines-screen .sl-blockers,
#storylines-screen .sl-qs,
#storylines-screen .sl-guidance { list-style: none; margin: 0; padding: 0; }

#storylines-screen .sl-blockers li {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 5px 0;
  border-top: 1px solid var(--gsb-oat);
  font-size: 12px;
}

#storylines-screen .sl-bl-what { flex: 1 1 220px; min-width: 0; color: var(--gsb-soil-ink); }
#storylines-screen .sl-bl-who { font-size: 11px; color: var(--gsb-stone); }

#storylines-screen .sl-bl-side {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gsb-stone);
}

#storylines-screen .sl-qs li,
#storylines-screen .sl-guidance li {
  padding: 4px 0 4px 14px;
  position: relative;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gsb-stone);
}

#storylines-screen .sl-qs li::before,
#storylines-screen .sl-guidance li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gsb-oat-dk);
}

#storylines-screen .sl-guidance li { color: var(--gsb-shoot-green); }

#storylines-screen .sl-timeline { list-style: none; margin: 0; padding: 0; }

#storylines-screen .sl-timeline li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--gsb-oat);
}

#storylines-screen .sl-ev-date {
  flex: 0 0 46px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gsb-stone);
  padding-top: 2px;
}

#storylines-screen .sl-ev-body { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--gsb-soil-ink); }

#storylines-screen .sl-cite {
  display: inline-block;
  margin-left: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gsb-shoot-green);
  cursor: pointer;
  border-bottom: 1px dotted var(--gsb-shoot-green);
}

#storylines-screen .sl-cite:hover { color: var(--gsb-soil-ink); border-bottom-color: var(--gsb-soil-ink); }

#storylines-screen .sl-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; }

#storylines-screen .sl-facts dt {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gsb-stone);
  white-space: nowrap;
}

#storylines-screen .sl-facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gsb-soil-ink);
  overflow-wrap: anywhere;
}

#storylines-screen .sl-muted { font-size: 11px; color: var(--gsb-stone); font-style: italic; font-family: var(--font-display); margin: 4px 0; }

#storylines-screen .sl-brief {
  position: relative;
  margin-top: 12px;
  background: var(--gsb-paper);
  border: 1px solid var(--gsb-oat);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

#storylines-screen .sl-brief-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
#storylines-screen .sl-brief-head strong { font-family: var(--font-display); font-weight: 400; font-size: 14px; }
#storylines-screen .sl-brief-head span { font-family: var(--font-mono); font-size: 10px; color: var(--gsb-stone); }

#storylines-screen .sl-brief-flag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gsb-clay);
  border: 1px solid rgba(181, 83, 46, 0.4);
  border-radius: var(--radius-sm);
  padding: 0 4px;
}

#storylines-screen .sl-brief-people { margin: 0 0 6px; font-size: 10px; color: var(--gsb-stone); font-family: var(--font-mono); }

#storylines-screen .sl-brief-body {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--gsb-soil-ink);
  max-height: 320px;
  overflow-y: auto;
}

#storylines-screen .sl-brief-sec {
  margin: 9px 0 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gsb-stone);
}

#storylines-screen .sl-brief-list { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.45; color: var(--gsb-soil-ink); }
#storylines-screen .sl-brief-err { font-size: 12px; color: var(--gsb-stone); }

#storylines-screen .sl-owner {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--gsb-oat);
}

#storylines-screen .sl-owner-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gsb-stone);
  width: 100%;
}

/* ---- Vault --------------------------------------------------------------- */
#storylines-screen .sl-vault { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--gsb-oat); }
#storylines-screen .sl-vault-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

#storylines-screen .sl-vault-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--gsb-soil-ink);
}

#storylines-screen .sl-vault-sub { font-size: 10px; color: var(--gsb-stone); font-style: italic; font-family: var(--font-display); }
#storylines-screen .sl-vault-strip { display: flex; flex-wrap: wrap; gap: 6px; }

#storylines-screen .sl-vchip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  border: 1px dashed var(--gsb-oat-dk);
  background: transparent;
  border-radius: var(--radius-md);
  padding: 5px 9px;
  cursor: pointer;
  text-align: left;
}

#storylines-screen .sl-vchip:hover { background: var(--color-surface); border-style: solid; }
#storylines-screen .sl-vchip-name { font-size: 12px; color: var(--gsb-stone); }
#storylines-screen .sl-vchip-why { font-family: var(--font-mono); font-size: 9px; color: var(--gsb-oat-dk); }

#storylines-screen .sl-empty {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed var(--gsb-oat-dk);
  border-radius: var(--radius-md);
}

#storylines-screen .sl-empty h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--gsb-soil-ink);
}

#storylines-screen .sl-empty p { margin: 0; font-size: 12px; color: var(--gsb-stone); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  #storylines-screen .sl-attention { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #storylines-screen .sl-panel-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #storylines-screen .sl-cov-note { display: none; }
}

@media (max-width: 900px) {
  #storylines-screen .sl-board { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  #storylines-screen .sl-t-hero { grid-column: span 8; }
  #storylines-screen .sl-t-feature { grid-column: span 4; }
  #storylines-screen .sl-t-chip { grid-column: span 4; }
  #storylines-screen .sl-t-micro { grid-column: span 2; }
}

@media (max-width: 640px) {
  #storylines-screen { padding: 0 10px 32px; }
  #storylines-screen .sl-attention { grid-template-columns: minmax(0, 1fr); }
  #storylines-screen .sl-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #storylines-screen .sl-t-hero,
  #storylines-screen .sl-t-feature { grid-column: span 2; }
  #storylines-screen .sl-t-chip,
  #storylines-screen .sl-t-micro { grid-column: span 1; }
  #storylines-screen .sl-t-hero .sl-name { font-size: 19px; }
  #storylines-screen .sl-cmd-divider { display: none; }
  #storylines-screen .sl-att-list { max-height: 150px; }
}