/* ============================================================
   editorial.css — the reading system for the editorial pages.

   Thirteen pages carried a hundred and sixty-three classes between
   them: journal-option-grid, calendar-week, message-fragment,
   reading-note, flow-table, prompt-card. Styling a hundred and
   sixty-three names one at a time would only move the problem, so this
   denies by default exactly as article.css does: everything inside the
   reading column is raw text, and an element becomes an object only by
   being named here.

   The class names are kept. `editorial-main`, `editorial-hero`,
   `editorial-lede` and `editorial-copy` are good names and the suite
   asserts these pages share them — which is the same thing this file is
   for. What changed is what they are made of.

   Load order is tokens, chrome, editorial, then whatever one page needs.
   ============================================================ */

/* ------------------------------------------------------------------
   Deny by default
   ------------------------------------------------------------------ */

/* :not() carries the specificity of its argument, so writing the demo
   exclusion as :not([data-demo] *) raised this rule from 0,1,0 to 0,3,0 and
   it began overriding the demos' own styling -- the grid's axis dots lost
   their fill and their glow. :where() always contributes zero, which is the
   whole point of a deny-by-default layer: it must lose every argument. */
.editorial-main :where(div, section, article, header, aside, p, ol, ul, li, dl, dt, dd,
                       blockquote, figure, figcaption, h2, h3, h4, h5, span, em, strong, small,
                       fieldset, legend):where(:not([data-demo], [data-demo] *)) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  padding: 0;
}

/* A grid was how a page used to make a passage look like a thing. */
.editorial-main :where(.story-grid, .split, .journal-option-grid, .journal-options,
                       .message-fragment, .method ol, .prompt-set, .feelings-grid,
                       .example-set, .entry-set) {
  display: block;
}

/* ------------------------------------------------------------------
   The page
   ------------------------------------------------------------------ */

.editorial-main {
  /* The site's body size is 17px for the homepage's poster copy. Inside a
     reading column everything inherits 16 unless a rule says otherwise, so an
     unstyled link does not come out a pixel larger than the text around it. */
  font-size: var(--t-text);
  line-height: 1.8;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 9vh, 88px) 28px clamp(72px, 12vh, 112px);
}

.editorial-shell { max-width: none; margin: 0; padding: 0; }

.editorial-hero { margin-bottom: 44px; }

.editorial-main h1,
.editorial-main .page-title {
  font-size: var(--t-head);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--lum-1);
  margin: 0 0 28px;
  text-wrap: balance;
}

/* ------------------------------------------------------------------
   One size for everything else
   ------------------------------------------------------------------ */

.editorial-main small,
.editorial-main caption,
.editorial-main summary,
.editorial-main p,
.editorial-main li,
.editorial-main dd,
.editorial-main blockquote,
.editorial-main figcaption {
  font-size: var(--t-text);
  line-height: 1.8;
  color: var(--lum-3);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.editorial-main .editorial-lede,
.editorial-main .page-intro { color: var(--lum-2); }

.editorial-main h2,
.editorial-main h3,
.editorial-main h4,
.editorial-main dt,
.editorial-main .label,
.editorial-main .story-label {
  font-size: var(--t-text);
  line-height: 1.8;
  font-weight: 600;
  color: var(--lum-1);
  margin: 56px 0 20px;
}

.editorial-main h3,
.editorial-main h4,
.editorial-main dt { margin-top: 36px; }

.editorial-main section > :first-child,
.editorial-main .editorial-hero > :first-child { margin-top: 0; }

/* The quiet register: provenance, limits, the aside that says a thing is
   optional. Dimmer, never smaller. */
.editorial-main .sources,
.editorial-main .print-note,
.editorial-main .privacy-note,
.editorial-main .publisher-disclosure,
.editorial-main .caption,
.editorial-main .reading-note,
.editorial-main small { color: var(--lum-4); }

/* A worked example runs in the flow: closer together because the lines
   belong to each other, a shade brighter because they are the evidence.
   This replaces every callout these pages used to draw around one. */
.editorial-main blockquote,
.editorial-main .example-entry p,
.editorial-main .journal-start p,
.editorial-main .prompt-example,
.editorial-main .word-example,
.editorial-main .entry-fragment,
.editorial-main .entry-reading,
.editorial-main .message-fragment p {
  color: var(--lum-e);
  margin-bottom: 4px;
}

.editorial-main ol,
.editorial-main ul { padding-left: 1.1em; }
.editorial-main :where(.article-nav, .related, .journal-options, .prompt-set) {
  list-style: none;
  padding-left: 0;
}

.editorial-main strong { color: var(--lum-1); font-weight: 600; }

.editorial-main a {
  color: var(--lum-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: text-decoration-color 0.18s var(--ease-soft);
}

.editorial-main a:hover,
.editorial-main a:focus-visible { text-decoration-color: var(--lum-1); }

/* The download button is an object, not a link in the prose. It carries the
   one inverted surface on this site — a white face with a dark label — and
   the rule above weighs 0,1,1 against .pill's 0,1,0, so without naming it
   here the label is painted white on white and the button goes blank. */
.editorial-main a.pill {
  color: var(--btn-label);
  text-decoration: none;
}


.editorial-main section { margin-top: 56px; }

/* ------------------------------------------------------------------
   Objects — where the product is being shown
   ------------------------------------------------------------------ */

/* An object is something you operate: a tool, a card you pick, a sheet you
   open. An entry you simply read is not one, however card-shaped it was. */
.editorial-main :is(.tool, .download-sheet, .journal-option, .prompt-card, .clue-card) {
  border: 1px solid var(--card-line);
  border-radius: 22px;
  padding: 20px;
  margin: 20px 0;
  transition: border-color 0.22s var(--ease-soft);
}

.editorial-main :is(.tool, .journal-option, .prompt-card, .clue-card):hover,
.editorial-main :is(.tool, .journal-option, .prompt-card, .clue-card):focus-within {
  border-color: var(--card-line-hi);
}

.editorial-main label {
  display: block;
  font-size: var(--t-text);
  line-height: 1.8;
  font-weight: 600;
  color: var(--lum-1);
  margin: 4px 0 10px;
}

.editorial-main :is(textarea, select),
/* Several of these inputs carry no type attribute, so a selector written
   for [type="text"] misses them and the browser paints them white. */
.editorial-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  width: 100%;
  font-family: inherit;
  font-size: var(--t-text);
  line-height: 1.8;
  color: var(--lum-1);
  background: none;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 24px;
  transition: border-color 0.22s var(--ease-soft);
}

.editorial-main textarea { min-height: 140px; resize: vertical; }
.editorial-main :is(textarea, input, select)::placeholder { color: #555; }
.editorial-main :is(textarea, input, select):focus-visible {
  outline: none;
  border-color: var(--card-line-hi);
}

/* A product demonstration owns its own controls. The grid's 49 cells are
   <button>s carrying AppColors.cellInactive and the app's corner ratio, and
   this rule turned every one of them into an outlined pill. Anything inside
   [data-demo] is the product, and the reading system does not reach in. */
.editorial-main button:not([data-demo], [data-demo] *),
.editorial-main .jump,
.editorial-main .action {
  display: inline-block;
  font-family: inherit;
  font-size: var(--t-text);
  line-height: 1.8;
  color: var(--lum-1);
  background: none;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 8px 18px;
  margin-top: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.22s var(--ease-soft);
}

.editorial-main :is(button, .jump, .action):not([data-demo], [data-demo] *):hover,
.editorial-main :is(button, .jump, .action):not([data-demo], [data-demo] *):focus-visible { border-color: var(--card-line-hi); }

.editorial-main .result {
  margin-top: 24px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.editorial-main .result:empty { display: none; }

/* The download pill keeps its own shape — it is chrome, not an article
   control — and stands alone and centred, as it does on the homepage. */
.editorial-cta {
  margin-top: clamp(56px, 9vh, 88px);
  display: grid;
  place-items: center;
}
.editorial-cta .pill { margin-top: 0; }

/* ------------------------------------------------------------------
   Figures and tables
   ------------------------------------------------------------------ */

.editorial-main figure { margin: 36px 0; }
/* A figure fills the column, but never past the file's own pixels. The phone
   on /choose-a-journal-app/ is 415px wide and was being drawn at the column's
   width on a 2x screen — about three times its pixels, with the stair-stepping
   that costs on a rounded corner. `max-content` is a replaced element's
   intrinsic width, so the wide figures still fill and a small one stops at its
   own size and sits in the middle of the column. */
.editorial-main figure img {
  display: block;
  width: 100%;
  max-width: max-content;
  height: auto;
  margin-inline: auto;
  border-radius: 16px;
}
.editorial-main figcaption { margin: 14px 0 0; color: var(--lum-4); }

/* Data keeps its hairlines: without them the rows stop being rows. A wide
   table scrolls inside its own box rather than widening the page. */
.editorial-main .table-wrap,
.editorial-main .flow-table-wrap { overflow-x: auto; }
.editorial-main table { width: 100%; border-collapse: collapse; }
.editorial-main :is(th, td) {
  font-size: var(--t-text);
  line-height: 1.8;
  font-weight: 400;
  color: var(--lum-3);
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--hair);
}
.editorial-main th { color: var(--lum-1); font-weight: 600; }

/* ------------------------------------------------------------------
   Carried over because they do work, not decoration
   ------------------------------------------------------------------ */

[hidden] { display: none !important; }

.editorial-main :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--lum-1);
  outline-offset: 4px;
  border-radius: 6px;
}

@media (max-width: 480px) {
  .editorial-main { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-main a,
  .editorial-main button,
  .editorial-main :is(.tool, .journal-option, .prompt-card, .clue-card),
  .editorial-main :is(textarea, input, select) { transition: none; }
}

/* ------------------------------------------------------------------
   The printable plate

   The page is black and nothing on it is a white surface, so a
   printable's preview is not a sheet of paper: it is a thin metal plate
   with the same marks struck into it. The file you download is
   unchanged and still white, because it is printed on paper.

   The plate is inline SVG, built by scripts/draw-plates.mjs from the
   printable itself, so its words stay real text — selectable,
   translatable, indexed and read aloud. It carries its own edge, so it
   needs no card line around it; what it needs from CSS is a size and a
   way to answer the pointer. Metal answers light, so that is what hover
   does.
   ------------------------------------------------------------------ */

.editorial-main .sheet-mount { max-width: 280px; margin: 20px 0; }

/* button.sheet-open, not .sheet-open: the generic button rule above carries
   a :not() about [data-demo], which lends it 0,2,1 — one more than this rule
   had, so it won and wrapped every printable sheet in a 999px pill. Matching
   its weight and sitting later in the file is enough. */
.editorial-main button.sheet-open {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  border-radius: 12px;
  cursor: zoom-in;
}

.editorial-main .sheet {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  transition: filter 0.22s var(--ease-soft);
}

.editorial-main button.sheet-open:hover .sheet,
.editorial-main button.sheet-open:focus-visible .sheet { filter: brightness(1.08); }

.sheet-dialog {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  max-width: 100vw;
  max-height: 100svh;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.sheet-dialog::backdrop {
  background: rgba(0, 0, 0, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.sheet-stage { display: contents; }

.sheet-dialog .sheet {
  display: block;
  width: auto;
  height: auto;
  max-width: 94vw;
  max-height: 92svh;
  border-radius: 12px;
}

.sheet-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--card-line);
  border-radius: 50%;
  background: #000;
  color: var(--lum-1);
  font-size: var(--t-text);
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.22s var(--ease-soft);
}

.sheet-close:hover,
.sheet-close:focus-visible { border-color: var(--card-line-hi); }

@media (prefers-reduced-motion: reduce) {
  .editorial-main .sheet,
  .sheet-close { transition: none; }
}

/* ------------------------------------------------------------------
   Print

   Several of these pages exist to be printed, and the rules that made
   that work lived in the per-page stylesheets this file replaced. They
   belong here once rather than thirteen times.

   Two things matter beyond ink. The chooser hides a prompt card with the
   hidden attribute, so printing has to bring the whole library back —
   and that needs !important to beat the [hidden] rule above, which is
   itself there so a no-JS visitor never sees a dead control. And the
   page turns black-on-white, because a black page prints as a black
   page.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   A comparison table on a phone

   A table is a grid on a desk and a list on a phone — there is no width
   at which five columns of prose fit across 320px. Both comparison
   tables on this site stacked this way, each through its own stylesheet
   and its own spelling; when those stylesheets were retired the rules
   went with them and the tables simply painted off the right edge, with
   html { overflow-x: clip } hiding the evidence.

   One rule now, and one spelling: the head goes to screen readers, the
   row header becomes the heading, and each cell names the column it
   came from in data-label.
   ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .table-scroll { overflow: visible; }

  :is(.flow-table, #format-table) { min-width: 0; border-spacing: 0; }

  /* Taken out of the flow for assistive technology rather than hidden:
     the column names still belong to the cells below them. */
  :is(.flow-table, #format-table) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  :is(.flow-table, #format-table),
  :is(.flow-table, #format-table) tbody,
  :is(.flow-table, #format-table) tr,
  :is(.flow-table, #format-table) th,
  :is(.flow-table, #format-table) td { display: block; width: 100%; }

  :is(.flow-table, #format-table) caption { display: block; }

  :is(.flow-table, #format-table) tbody th {
    padding: 0 0 12px;
    border: 0;
    font-weight: 600;
    color: var(--lum-1);
  }

  :is(.flow-table, #format-table) td {
    padding: 0;
    border: 0;
  }

  :is(.flow-table, #format-table) td + td { margin-top: 14px; }

  :is(.flow-table, #format-table) tr + tr { margin-top: 28px; }

  /* The column name, in the quietest luminance, above the cell it
     belongs to — the header row said once per cell instead of once per
     table. */
  :is(.flow-table, #format-table) td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--lum-4);
  }
}


@media print {
  /* The shared rules live in chrome.css. These are the editorial pages'
     own objects: the chooser that selects a card, and the sheet a reader
     mounts on screen. */
  #prompt-chooser,
  .prompt-actions,
  .editorial-cta,
  .sheet-mount,
  /* The plate, wrapped by js/sheet.js or bare without it. A printed page
     should spend its ink on the words, not on a picture of metal. */
  .sheet { display: none !important; }

  .editorial-main :is(.prompt-card, .example-entry, .journal-start, .feeling-entry) {
    break-inside: avoid;
    border-color: #000;
  }

  .editorial-main section + section { margin-top: 18pt; }
}

/* ------------------------------------------------------------------
   Choosers — a row of options you pick from

   The rhythm here was accidental: the option container was a block, each
   button carried its own 16px top margin, and the rows came out 62px and
   90px apart. One flex container with one gap, and the buttons stop
   deciding their own spacing. The legend is the body size, like every
   other heading on the site.
   ------------------------------------------------------------------ */

.editorial-main fieldset { margin: 0; }
.editorial-main fieldset + fieldset { margin-top: 32px; }

.editorial-main legend {
  float: left;          /* a legend ignores margins unless it is taken out */
  width: 100%;
  padding: 0;
  font-size: var(--t-text);
  line-height: 1.8;
  font-weight: 600;
  color: var(--lum-1);
  margin: 0 0 14px;
}

.editorial-main :is(.prompt-options, .option-row, .choice-row) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  clear: both;
}

.editorial-main :is(.prompt-options, .option-row, .choice-row) button { margin: 0; }

/* The chosen one is brighter, the way a selected cell is in the app. */
.editorial-main button[aria-pressed="true"] {
  border-color: var(--lum-1);
  color: var(--lum-1);
}