/* ---------- dialogs ---------- */
/* No display rule on the dialog itself: that would defeat dialog:not([open]){display:none}.
   Padding lives on .sheetbody so a click on the dialog element proper is a backdrop click. */
.sheet{
  width:min(680px,calc(100vw - 32px));max-width:none;max-height:min(760px,calc(100vh - 32px));max-height:min(760px,calc(100dvh - 32px));
  padding:0;border:0;border-radius:8px;overflow-y:auto;
  background:var(--surface);color:var(--ink);
  box-shadow:0 2px 4px rgba(0,0,0,.08),0 24px 60px -16px rgba(0,0,0,.45);
}
.sheet::backdrop{background:rgba(14,18,22,.6)}
.sheetbody{padding:34px 38px 30px;display:flex;flex-direction:column;gap:16px}
@media (max-width:519.98px){.sheetbody{padding:24px 20px 22px}}
.sheet .eyebrow{margin:0}
.sheet h2{
  font-stretch:125%;
  font-size:clamp(1.5rem,1.1rem + 1.9vw,2rem);
  line-height:1.12;font-weight:750;margin:0;letter-spacing:-.015em;text-wrap:balance;
}
.sheet .standfirst{font-size:1.125rem}
.sheet .byline{margin:4px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.themerow{display:flex;align-items:center;gap:12px;font-size:0.9375rem;color:var(--ink-2)}
.tested summary{font-size:0.9375rem;font-weight:600;cursor:pointer}
.tested p{margin:8px 0 0;font-size:0.9375rem;color:var(--ink-2);line-height:1.55}
.fine{margin:0;font-size:0.875rem;color:var(--muted)}
.sheet.wide{width:min(840px,calc(100vw - 32px))}
.sheethead{display:flex;align-items:center;justify-content:space-between;gap:16px}
.keysnote{margin:0;font-size:0.9375rem;color:var(--ink-2);max-width:60ch}
.keys{margin:0;display:flex;flex-direction:column}
.keys > div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
.keys dt{margin:0;white-space:nowrap}
.keys dd{margin:0;font-size:0.9375rem;color:var(--ink-2)}
@media (max-width:519.98px){.keys > div{grid-template-columns:96px minmax(0,1fr)}}

/* ---------- design decisions: list + one note ---------- */
/* The list is ruled, not boxed: a hairline above each item and one under the last.
   The selected item is not filled; it is set in the wordmark's wide heavy cut, the
   same voice as the dialog's title, so selection is a change of type, not of colour. */
.dsplit{display:grid;grid-template-columns:210px minmax(0,1fr);gap:8px 30px;align-items:start}
.dtabs{display:flex;flex-direction:column;border-bottom:1px solid var(--line-2)}
.dtab{
  appearance:none;border:0;border-top:1px solid var(--line-2);border-radius:0;background:transparent;color:var(--ink);cursor:pointer;
  font:inherit;font-size:0.9375rem;font-weight:600;text-align:left;padding:9px 0;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
@media (hover:hover){.dtab[aria-selected="false"]:hover{color:var(--accent)}}
.dtab[aria-selected="true"]{font-stretch:125%;font-weight:750;letter-spacing:-.01em}
.dtab .newcount{margin:0;flex:none;font-stretch:100%;letter-spacing:0}
/* All five notes share one grid cell, so the cell is always as tall as the longest of
   them at the current width and the dialog never changes height when the selection
   does. The four that are not selected keep their space but are invisible, which also
   takes them out of the tab order and away from screen readers. */
.dpanels{display:grid}
.dpanel{grid-area:1/1;display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding-top:6px}
.dpanel[hidden]{display:flex;visibility:hidden}
.dpanel h3{margin:0;font-size:1.125rem;font-weight:600;line-height:1.3;text-wrap:balance}
.dpanel p{margin:0;font-size:0.9375rem;line-height:1.65;color:var(--ink);max-width:56ch}
.dpanel .seenin{color:var(--ink-2)}
.dpanel .seenin b{font-weight:600;color:var(--ink)}
.dpanel .actions{margin-top:4px}
/* A round 360 with the sidebar layout. A floor, not a fixed height: the notes need
   about 348 at the default text size, and enlarged text must be able to grow past it. */
@media (min-width:720px){#decisions{min-height:360px}}
/* Narrow: the list lies across the top as chips and wraps, so nothing scrolls sideways.
   There is no room for rules there, so a chip is filled and the selected one is solid. */
@media (max-width:719.98px){
  .dsplit{grid-template-columns:minmax(0,1fr);gap:16px;min-height:0}
  .dtabs{flex-direction:row;flex-wrap:wrap;gap:6px;border-bottom:0}
  .dtab{border-top:0;border-radius:5px;background:var(--fill);padding:8px 10px;font-weight:500}
  .dtab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);font-stretch:100%;font-weight:600;letter-spacing:0}
  .dpanel{padding-top:0}
}