/* The Signal deck: a stack of tiles, with the radar among them.

   The deck used to be thirty-three reports stacked down the page. A reader who
   wanted to know what happened this week had to scroll past everything they
   did not want in order to reach what they did, and the week had no shape
   until they had read all of it.

   Every tile carries four things and no others: how strong the signal is,
   whether the action is confirmed in a primary source or only reported, what
   happened, and when. The actor's name is not among them on purpose. "OpenAI"
   and "the US Court of Appeals for the Ninth Circuit" are not the same kind of
   fact, and a column of them reads as noise. Size carries weight, so the
   strongest card of the week takes three columns. */

/* The dimension colours live on the page, not on the grid.
   
   They were declared on .deck, and the radar opens as a sibling of it at the
   top of the body, so inside the opened radar every `var(--dim-...)` resolved
   to nothing and every dot came out black on grey. A token that two things
   need belongs above both of them. */
body.page-signal {
  --dim-safety: #d7a58c; --dim-policy: #9caed0; --dim-chips: #8fbcd0; --dim-capital: #b7c98f;
  --dim-courts: #c6a0a6; --dim-models: #b7add0; --dim-infrastructure: #d1bc7d;
  --dim-governance: #8fb3a0; --dim-corporate: #cfa9c4; --dim-research: #a9c2d8;
  --dim-markets: #c9c07d; --dim-energy: #d8b48c; --dim-economy: #9fc2a8; --dim-labor: #c6a0a6;
  --dim-other: #9aa79b;
}

.page-signal .deck {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; grid-auto-flow: row dense;
  margin-bottom: 60px;
}

.deck-tile {
  --dc: var(--dim-other);
  display: flex; flex-direction: column; gap: 12px; min-height: 136px; padding: 15px;
  border: 1px solid #e6e6e2; border-radius: 12px; background: #fbfbfa;
  cursor: pointer; text-align: left; color: inherit; font: inherit;
  overflow: hidden; container-type: inline-size;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.deck-tile[data-dim="safety"] { --dc: var(--dim-safety); }
.deck-tile[data-dim="policy"] { --dc: var(--dim-policy); }
.deck-tile[data-dim="chips"] { --dc: var(--dim-chips); }
.deck-tile[data-dim="capital"] { --dc: var(--dim-capital); }
.deck-tile[data-dim="courts"] { --dc: var(--dim-courts); }
.deck-tile[data-dim="models"] { --dc: var(--dim-models); }
.deck-tile[data-dim="infrastructure"] { --dc: var(--dim-infrastructure); }
.deck-tile[data-dim="governance"] { --dc: var(--dim-governance); }
.deck-tile:hover, .deck-tile:focus-visible { background: #f5f5f1; border-color: var(--dc); transform: translateY(-2px); }

.deck-tile.s3 { grid-column: span 3; min-height: 200px; }
.deck-tile.s2 { grid-column: span 2; min-height: 160px; }
.deck-tile.s1 { grid-column: span 1; }

.deck-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.deck-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.deck-bars i { width: 3px; border-radius: 1px; background: #dededa; }
.deck-bars i:nth-child(1) { height: 5px; } .deck-bars i:nth-child(2) { height: 7.5px; }
.deck-bars i:nth-child(3) { height: 10px; } .deck-bars i:nth-child(4) { height: 12px; } .deck-bars i:nth-child(5) { height: 14px; }
.deck-bars i.on { background: var(--dc); }
.deck-flags { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 0 1 auto; }
/* The flag and date ink is dark enough to read. It was #8b8f8a, which is 3.17
   against the tile and fails at 4.5: a label nobody can read is the same as no
   label, and these two are the tile's only words apart from the hook. */
.deck-flag { display: flex; align-items: center; gap: 4px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6a6e67; white-space: nowrap; }
.deck-flag i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--dc); }
.deck-flag.rep i { background: none; border: 1px solid #a2a6a1; }
.deck-flag.called { color: var(--dc); }
/* A one-column tile has no room for two words at the top. The lamps stay and
   keep their meaning in their titles; the words go. */
@container (max-width: 210px) { .deck-flag span { display: none; } .deck-flags { gap: 5px; } }

.deck-hook { flex: 1 1 auto; min-height: 0; margin: 0; font-size: 13.5px; line-height: 1.38; color: #191919;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.deck-tile.s3 .deck-hook { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.24; -webkit-line-clamp: 5; }
.deck-tile.s2 .deck-hook { font-size: 15px; }
.deck-date { font-size: 11.5px; letter-spacing: .06em; color: #6a6e67; }

/* The radar, living in the grid rather than on a page of its own, so a reader
   meets it while they are already reading the week. */
.deck-radar { background: #16171a; border-color: #ffffff1a; color: #f2f2ef; gap: 8px; }
.deck-radar:hover, .deck-radar:focus-visible { background: #1d1e1d; border-color: #ffffff30; }
.deck-radar .deck-flag { color: #ffffff8c; }
.deck-radar svg { flex: 1 1 auto; width: 100%; min-height: 0; }
.deck-radar .deck-hook { flex: none; color: #f2f2ef; -webkit-line-clamp: 2; }
.deck-radar .deck-date { color: #ffffff8c; }
.deck-ring { fill: none; stroke: #ffffff1f; }

@media (max-width: 760px) {
  /* Nine-pixel uppercase is a label nobody reads, whatever it says. */
  .deck-flag { font-size: 11px; }
  .deck-date { font-size: 12px; }
  .page-signal .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .deck-tile.s3, .deck-tile.s2 { grid-column: span 2; }
  .deck-tile.s3 { min-height: 156px; }
  .deck-tile.s2 { min-height: 120px; }
  .deck-tile.s1 { min-height: 110px; }
  .deck-tile.s3 .deck-hook { font-size: 16px; }
  .deck-hook { font-size: 12.5px; -webkit-line-clamp: 3; }
}

/* ------------------------------------------------------------ one card open

   The page blurs behind and the card sits on top of it. Clicking the blur
   goes back to the week. */
.deck-veil {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: #f2f2efa3; backdrop-filter: blur(16px) saturate(.75); -webkit-backdrop-filter: blur(16px) saturate(.75);
}
.deck-veil[hidden] { display: none; }
.deck-card { position: relative; width: min(940px, 100%); max-height: 88vh; overflow: auto; border-radius: 18px; box-shadow: 0 30px 80px #0000002e; }
.deck-card > .story-card { margin: 0; height: auto; border-radius: 18px; }
.deck-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; padding: 0;
  border: 1px solid #00000021; border-radius: 50%; background: #fffffff0; color: #444; font-size: 17px; line-height: 1; cursor: pointer; }
.deck-hint { margin: 14px 0 0; text-align: center; font-size: 12px; color: #6d726d; }
.deck-loading { padding: 40px 24px; text-align: center; font-size: 14px; color: #6d726d; background: #fff; border-radius: 18px; }
.deck-loading a { color: #246ac5; }
body.deck-open { overflow: hidden; }

/* -------------------------------------------------------------- the radar

   The light follows the pointer. It used to be an arm going round on a timer,
   which told a reader nothing: someone looking at policy should get light on
   policy, not light on whatever the clock has reached. */
.deck-sky {
  position: fixed; inset: 0; z-index: 58; display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
  padding: 20px 20px 24px; color: #f2f2ef;
  /* Opaque. At 98% the deck behind it came through as a grey smear and the
     dots lost their ground. */
  background: radial-gradient(120% 90% at 50% 45%, #1b1c1f 0%, #101113 70%, #0b0c0d 100%);
}
.deck-sky[hidden] { display: none; }
.deck-sky-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.deck-sky-head .eyebrow { font-size: 11px; letter-spacing: 2.2px; color: #ffffff8c; }
.deck-sky .deck-x { position: static; border-color: #ffffff2e; background: transparent; color: #f2f2ef; }
.deck-sky-stage { display: grid; place-items: center; min-height: 0; }
/* The drawing fits the box it is given. Sizing it by height with a max-width
   let the dial grow taller than the stage and cut off the labels underneath. */
.deck-sky-stage svg { width: 100%; height: 100%; }
.deck-sky-foot { min-height: 54px; display: grid; place-items: center; text-align: center; }
.deck-sky-name { margin: 0; font-size: clamp(18px, 3vw, 28px); font-weight: 500; letter-spacing: -.01em; text-transform: capitalize; }
.deck-sky-sub { margin: 5px 0 0; max-width: 60ch; font-size: 13px; line-height: 1.5; color: #ffffff8c; }

.sky-ring { fill: none; stroke: #ffffff1f; }
.sky-hub { fill: #ffffff14; }
.sky-spoke { stroke: #ffffff14; }
.sky-label { font-size: 9px; fill: #ffffff8c; letter-spacing: .12em; text-transform: uppercase; transition: fill .2s; }
.sky-label.lit { fill: #f2f2ef; }
.sky-beam { transition: transform .18s ease-out; }
.sky-dot circle { transition: opacity .22s, r .18s; cursor: pointer; }
/* Still a colour, just not the one being asked about. At .16 the unlit
   dots read as grey smudges and the dial looked broken rather than focused. */
.sky-dot.dim circle { opacity: .3; }
.sky-dot.lit circle { opacity: 1; }
.sky-dot:focus-visible circle { stroke: #fff; stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  .deck-tile, .sky-beam, .sky-dot circle, .sky-label { transition: none; }
}

/* ------------------------------------------------- a Signal card, opened

   A card used to be the same two-pane object as a Constitution question: the
   report on a white half, a permanent black half holding the call. That shape
   is right for a question, which is answered at a glance, and wrong for a
   report, which is read. Half a screen of column beside half a screen of
   standing question is a hard read and a nagging poll at the same time.

   One column, one measure, and the question at the end, after everything has
   actually been read. */

.sg-read-card {
  display: block; height: auto; min-height: 0; padding: 0;
  background: #fff; border-radius: 18px; overflow: hidden;
}
.sg-read-card > * { max-width: 68ch; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }

.sgr-head { padding-top: clamp(32px, 5vw, 56px); }
.sgr-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6a6e67; }
.sgr-bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.sgr-bars i { width: 3px; border-radius: 1px; background: #dededa; }
.sgr-bars i:nth-child(1) { height: 5px; } .sgr-bars i:nth-child(2) { height: 7px; }
.sgr-bars i:nth-child(3) { height: 9px; } .sgr-bars i:nth-child(4) { height: 11px; } .sgr-bars i:nth-child(5) { height: 13px; }
.sgr-bars i.on { background: #3f7fd6; }
.sgr-flag { display: flex; align-items: center; gap: 5px; }
.sgr-flag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #1f7a3a; }
.sgr-flag.is-reported::before { background: none; border: 1px solid #8a5a12; }
.sgr-flag.is-reported { color: #7a5a12; }
.sgr-dim { padding: 2px 8px; border-radius: 999px; background: #f1f1ed; }

.sgr-hook { margin: 20px 0 0; font-size: clamp(25px, 3.4vw, 38px); line-height: 1.16;
  letter-spacing: -.02em; font-weight: 500; color: #16171a; text-wrap: balance; }
.sgr-lead { margin: 18px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.62; color: #33373a; }

.sgr-body { padding-top: 6px; padding-bottom: 10px; font-size: 16px; line-height: 1.75; color: #3d4146; }
.sgr-body > p { margin: 18px 0 0; }
.sgr-story p { margin: 18px 0 0; }
.sgr-h { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6a6e67; }
.sgr-h em { font-style: normal; text-transform: none; letter-spacing: 0; color: #8a8e88; }
.sgr-sec, .sg-read-card .sg-evidence, .sg-read-card .sg-read { margin-top: 34px; padding-top: 26px; border-top: 1px solid #ececE8; max-width: none; padding-inline: 0; }

.sgr-shift { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.sgr-shift > div { padding: 16px 18px; border-radius: 12px; background: #f6f6f3; }
.sgr-shift > div + div { background: #edf4ff; }
.sgr-shift span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6a6e67; }
.sgr-shift p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: #33373a; }
@media (max-width: 620px) { .sgr-shift { grid-template-columns: 1fr; } }

/* The call, at the end, on its own ground so it reads as a change of mode
   rather than as another paragraph. */
.sgr-call { margin-top: 40px; padding-top: clamp(28px, 4vw, 40px); padding-bottom: clamp(28px, 4vw, 40px);
  background: #16171a; color: #f2f2ef; max-width: none; }
.sgr-call > * { max-width: 68ch; margin-inline: auto; }
.sgr-call-k { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #ffffff8c; }
.sgr-prompt { margin: 12px 0 22px; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.sg-read-card .sg-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .sg-read-card .sg-options { grid-template-columns: 1fr; } }
.sg-read-card .sg-options .choice { display: block; padding: 14px 16px; text-align: left; }
.sg-read-card .guide { margin-top: 16px; font-size: 13px; line-height: 1.55; color: #b9bdb6; }

.sgr-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  padding-top: 18px; padding-bottom: 22px; font-size: 12px; color: #6a6e67; background: #fbfbfa; max-width: none; }
.sgr-foot > span { max-width: 68ch; }
.sgr-foot a { color: #246ac5; }

/* The card's own page gives it room; in the overlay it already has some. */
.page-card .sg-read-card { border: 1px solid #e6e6e2; }

/* The chips: three ways a reader narrows a week, then the dimensions. */
.deck-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.deck-chip { --dc: #9aa79b; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid #e3e3df; border-radius: 999px; background: #fff;
  font: inherit; font-size: 12px; letter-spacing: .01em; color: #4b4f4a; cursor: pointer; text-transform: capitalize;
  transition: border-color .15s, background .15s, color .15s; }
.deck-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dc); }
.deck-chip[data-k="all"]::before { background: #4b4f4a; }
.deck-chip:hover { border-color: var(--dc); }
.deck-chip.on { background: #16171a; border-color: #16171a; color: #fff; }
.deck-empty { grid-column: 1 / -1; padding: 40px 10px; text-align: center; font-size: 14px; color: #6a6e67; }

.deck-sky-show { margin-top: 14px; padding: 10px 18px; border: 1px solid #ffffff2e; border-radius: 999px;
  background: transparent; color: #f2f2ef; font: inherit; font-size: 13px; cursor: pointer; }
.deck-sky-show:hover { background: #ffffff14; border-color: var(--dc, #ffffff5c); }

/* ==================================================================
   Three across, and type you can read
   ==================================================================

   The deck was a six column grid with tiles spanning one, two or three, so a
   single-span tile was a sixth of the page: about 150 pixels, holding a hook
   at 13.5px clamped to four lines. Five things across a row, none of them
   readable, which is what "the font is too small" was, and the reason the big
   tile's hook looked like a different typeface was that it was the only one at
   a real size.

   Three columns now, so the smallest tile is a third of the page. The sizes
   still vary, because varying them is what stops a deck looking like a
   spreadsheet, but every size is wide enough for the hook to be set at 15px or
   more and for a date and a mark to sit beside it. */
.page-signal .deck { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.deck-tile { min-height: 158px; padding: 18px; gap: 14px; }
.deck-tile.s3 { grid-column: span 3; min-height: 212px; }
.deck-tile.s2 { grid-column: span 2; min-height: 182px; }
.deck-tile.s1 { grid-column: span 1; }
.deck-hook { font-size: 15.5px; line-height: 1.4; -webkit-line-clamp: 4; }
.deck-tile.s2 .deck-hook { font-size: 17px; line-height: 1.34; }
.deck-tile.s3 .deck-hook { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.22; -webkit-line-clamp: 4; }
.deck-date { font-size: 12.5px; }

/* The mark, without the word.
   
   "Confirmed" and "Reported" took a third of the top of every tile to say one
   of two things. Filled is confirmed in a primary source, hollow is reported
   and not yet confirmed, and the key above the deck says so once. Both still
   carry the full sentence on hover and to a screen reader. */
.deck-flag i { width: 8px; height: 8px; }
.deck-flag.rep i { border-width: 1.5px; }
.deck-flag.called i { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); }

.deck-key { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 14px; font-size: 12.5px; color: #6a6e67; }
.deck-key span { display: inline-flex; align-items: center; gap: 7px; }
.deck-key i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6a6e67; }
.deck-key i.hollow { background: none; border: 1.5px solid #a2a6a1; }

/* One control instead of seventeen pills. */
.deck-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.deck-pick { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 13px;
  border: 1px solid #e3e3df; border-radius: 999px; background: #fff; color: #4b4f4a; }
.deck-pick:focus-within { border-color: #16171a; }
.deck-pick-icon { flex: none; width: 15px; height: 15px; }
.deck-pick select { min-height: 38px; padding: 0 4px 0 0; border: 0; background: transparent;
  font: inherit; font-size: 13px; color: inherit; cursor: pointer; }
.deck-pick select:focus-visible { outline: 2px solid #16171a; outline-offset: 3px; border-radius: 6px; }
.deck-only { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px;
  border: 1px solid #e3e3df; border-radius: 999px; background: #fff; font-size: 13px; color: #4b4f4a; cursor: pointer; }
.deck-only:has(input:checked) { background: #16171a; border-color: #16171a; color: #fff; }
.deck-only input { width: 15px; height: 15px; accent-color: #4868c8; cursor: pointer; }
.deck-all { text-transform: none; }

/* The radar's dimensions are controls now, so they have to look like it. */
.sky-label { cursor: pointer; }
.sky-label:hover, .sky-label:focus-visible { fill: #fff; }
.deck-sky-stage { cursor: pointer; }

@media (max-width: 900px) {
  .page-signal .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck-tile.s3, .deck-tile.s2 { grid-column: span 2; }
  .deck-tile.s3 .deck-hook { font-size: 18px; }
  .deck-tile.s2 .deck-hook { font-size: 16px; }
}
@media (max-width: 560px) {
  .page-signal .deck { grid-template-columns: 1fr; }
  .deck-tile, .deck-tile.s3, .deck-tile.s2, .deck-tile.s1 { grid-column: span 1; min-height: 132px; }
  .deck-hook, .deck-tile.s2 .deck-hook { font-size: 16px; }
  .deck-tile.s3 .deck-hook { font-size: 19px; }
  .deck-pick select, .deck-only { min-height: 44px; font-size: 13px; }
}

/* The explainer says what Signal is, so it needs room to say it.
   
   Written first in light ink, because the three steps it replaced are written
   for the black pane of a card. This panel is #fbfbfa. The file already
   carries a note about that exact mistake being made once for those steps; it
   was made again here, and measured at 1.4 to 1 before it was caught. Dark ink
   on light paper. */
.signal-how-lead { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: #4b4f4a; max-width: 62ch; }
.signal-how-lead b { color: #191919; font-weight: 500; }
.signal-eg { margin: 0 0 18px; padding: 16px 18px; border-left: 2px solid #2368c2; border-radius: 0 10px 10px 0; background: #f2f2ee; }
.signal-eg-head { margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #5d6159; }
.signal-eg dl { margin: 0; display: grid; gap: 10px; }
.signal-eg dt { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #5d6159; }
.signal-eg dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.6; color: #2f322e; max-width: 62ch; }

/* ==================================================================
   Four weeks, then the archive
   ==================================================================

   Ruled on 22 September: the deck keeps scrolling for four weeks, the newest
   is free, and going further back asks for an account. Each earlier week sits
   under its own dates, set quieter than this week, because this week is what
   the page is for and the three before it are what it is standing on. */

.deck-earlier { margin: 0 0 64px; }
.deck-week + .deck-week { margin-top: 40px; }
.deck-week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding-top: 18px; border-top: 1px solid #e3e3df; }
.deck-week-head h2 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.005em; color: #191919; }
.deck-week-head span { font-size: 13px; color: #6a6e67; font-variant-numeric: tabular-nums; }
.page-signal .deck.deck-week-grid { margin-bottom: 0; }

/* The gate. It says how much is behind it, what it costs (nothing), and what
   it does not cover, so nobody has to find out by hitting it. */
.deck-gate { padding: clamp(24px, 3vw, 34px); border: 1px solid #e3e3df; border-radius: 16px; background: #f6f6f3; }
.deck-gate-count { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; font-weight: 500; color: #191919; }
.deck-gate-copy { margin: 10px 0 0; font-size: 15px; line-height: 1.62; color: #4b4f4a; max-width: 60ch; }
.deck-gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 20px; }
.deck-gate-login { font-size: 15px; color: #2368c2; }

.deck-archive-link { margin: 28px 0 0; font-size: 15px; }
.deck-archive-link a { color: #2368c2; }

@media (max-width: 700px) {
  .deck-gate-login, .deck-archive-link a { display: inline-block; padding-block: 11px; }
}

/* ==================================================================
   One size, one type (MC, 23 September)
   ==================================================================

   Every tile is the same width, the same height and the same type. The rows
   are as tall as their tallest tile, so a short hook does not leave its
   neighbour hanging. Four lines of hook at 16px holds every hook in the week
   without a fifth line being cut. */
.page-signal .deck { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.page-signal .deck .deck-tile,
.page-signal .deck .deck-tile.s1 { grid-column: span 1; min-height: 172px; }
.page-signal .deck .deck-hook,
.page-signal .deck .deck-tile .deck-hook { font-size: 16px; line-height: 1.42; -webkit-line-clamp: 4; }

/* The radar is a control in the filter row, like its neighbours. */
.deck-bar .deck-radar {
  display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 14px 0 8px;
  border: 1px solid #e3e3df; border-radius: 999px; background: #fff; color: #4b4f4a;
  font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.deck-bar .deck-radar:hover, .deck-bar .deck-radar:focus-visible { border-color: #16171a; background: #fff; color: #16171a; }
.deck-bar .deck-radar span { white-space: nowrap; }
.deck-bar .deck-radar svg.deck-radar-icon { flex: none; width: 26px; height: 26px; min-height: 0; border-radius: 50%; background: #16171a; }
.deck-radar-icon .deck-ring { fill: none; stroke: #ffffff33; stroke-width: 6; }

@media (max-width: 900px) {
  .page-signal .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .page-signal .deck { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .page-signal .deck .deck-tile, .page-signal .deck .deck-tile.s1 { min-height: 132px; }
  .deck-bar .deck-radar { min-height: 44px; }
}

/* The key to the dots, behind an info mark. */
.page-signal .deck-key { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.deck-info {
  display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 1.5px solid #9a9e98; border-radius: 50%; background: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: #4b4f4a; cursor: pointer;
}
.deck-info:hover, .deck-info:focus-visible, .deck-key.is-open .deck-info { border-color: #191919; color: #191919; }
.deck-key-label { font-size: 12.5px; color: #6a6e67; }
.deck-key-text {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; margin: 0;
  display: none; gap: 8px; padding: 12px 14px; min-width: 260px;
  border: 1px solid #e3e3df; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
  font-size: 13px; color: #3b3f3a;
}
.deck-key-text span { display: flex; align-items: center; gap: 8px; }
.deck-key:hover .deck-key-text, .deck-key:focus-within .deck-key-text, .deck-key.is-open .deck-key-text { display: grid; }
@media (max-width: 700px) {
  .deck-info { width: 30px; height: 30px; }
  .deck-key { min-height: 44px; }
}

/* ==================================================================
   The week, after the meeting of 23 September (second pass)
   ==================================================================

   MC: the first story should be the radar, the grid needs variation rather
   than three identical columns, and colour means one thing across the site:
   red very weak, yellow weak, green good, blue full strength. */

.page-signal #the-week.deck {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(178px, auto);
  grid-auto-flow: row dense;
  gap: 14px;
}
.page-signal .deck .deck-tile {
  min-height: 0; padding: 17px 17px 15px;
  border: 1px solid #e3e1da; border-radius: 16px; background: #fcfcfa;
  box-shadow: 0 1px 0 #ecebe5, 0 2px 0 #e4e2da, 0 12px 24px -16px rgba(33, 28, 14, .28);
}
.page-signal .deck .deck-tile:hover, .page-signal .deck .deck-tile:focus-visible {
  border-color: var(--tone, var(--dc)); transform: translateY(-3px);
  box-shadow: 0 1px 0 #ecebe5, 0 2px 0 #e4e2da, 0 22px 34px -18px rgba(33, 28, 14, .38);
}
.page-signal .deck .deck-tile.wide { grid-column: span 2; }
.page-signal .deck .deck-tile.tall { grid-row: span 2; }
.deck-more { margin: 0; font-size: 13px; line-height: 1.5; color: #5b5f59; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.deck-tile.tall .deck-more { -webkit-line-clamp: 9; }
/* Strength in the site's colours, on the bars every tile carries. */
.page-signal .deck .deck-bars i.on { background: var(--tone); }
.page-signal .deck .deck-tile { border-top: 3px solid var(--tone, #ddd); }

/* The radar, first. */
.page-signal .deck .deck-radar-tile {
  grid-column: span 2; grid-row: span 2; cursor: default;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px;
  background: #151618 radial-gradient(90% 70% at 50% 40%, #1e2024, #141517 70%);
  border: 1px solid #ffffff14; border-top: 1px solid #ffffff14; color: #f2f2ef;
  box-shadow: 0 1px 0 #2a2b2e, 0 2px 0 #222326, 0 26px 40px -18px rgba(0, 0, 0, .45);
}
.page-signal .deck .deck-radar-tile:hover { transform: none; border-color: #ffffff24; }
.drt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drt-title { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #ffffffb3; }
.drt-key { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 11px; color: #ffffff99; }
.drt-key i { width: 14px; height: 6px; border-radius: 3px; }
.drt-key span { margin: 0 4px; }
.drt-stage { display: grid; place-items: center; min-height: 300px; }
.drt-stage svg { width: 100%; height: 100%; max-height: 440px; }
.drt-foot { display: grid; justify-items: center; text-align: center; min-height: 64px; }
.drt-name { margin: 0; font-size: 18px; font-weight: 500; text-transform: capitalize; }
.drt-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #ffffff99; max-width: 46ch; }
.deck-radar-tile .deck-sky-show { margin-top: 8px; }
.deck-radar-tile .sky-label { font-size: 11px; }

@media (max-width: 1150px) {
  .page-signal #the-week.deck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page-signal #the-week.deck { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 10px; }
  .page-signal .deck .deck-tile.tall { grid-row: span 1; }
  .page-signal .deck .deck-tile.tall .deck-more { -webkit-line-clamp: 4; }
}
@media (max-width: 520px) {
  .page-signal #the-week.deck { grid-template-columns: 1fr; }
  .page-signal .deck .deck-tile.wide, .page-signal .deck .deck-radar-tile { grid-column: span 1; }
  .page-signal .deck .deck-radar-tile { grid-row: span 1; }
  .drt-stage { min-height: 280px; }
}
.page-signal .deck .deck-tile.wide .deck-hook, .page-signal .deck .deck-tile.tall .deck-hook { flex: none; }
.page-signal .deck .deck-tile .deck-date { margin-top: auto; }
.drt-name { text-transform: none; }
.drt-name::first-letter { text-transform: uppercase; }
.sgr-bars i.on { background: var(--tone, #191919); }
/* One colour system on the page: the four strength colours. The mark for
   confirmed or reported is ink, filled or hollow, not a fifth palette. */
.page-signal .deck .deck-flag i { background: #4f544e; }
.page-signal .deck .deck-flag.rep i { background: none; border-color: #8a8e87; }
.page-signal .deck .deck-flag.called { color: #1f6a3f; }