/* The reading page (spec/reading-mode.md, spec/desktop.md) and the screens of signing in. Built from
   public/tokens.css. One column at a capped measure; body 19px at 1.7; generous space between blocks. */

/* ---- the article ------------------------------------------------------------------------------- */
.reading {
  /* The measure (68ch) is counted in the article's own type, so it is 68 of its characters. */
  font-family: var(--serif); font-size: var(--text-body); line-height: var(--leading-body);
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding: 22px var(--gutter) 72px;
  overflow-anchor: auto;
  /* A long link or handle breaks where it must rather than run past the measure. */
  overflow-wrap: anywhere;
}
/* The page being read is at least a screen tall before its article arrives, so the footer below never
   shows and is then pushed away (spec/motion.md, Loading). Not the PDF's copy of it. */
.reading[data-reading] { min-height: 100dvh; }
.reading :is(h1, h2, h3, h4) { font-weight: 650; line-height: 1.3; letter-spacing: -.005em; }

/* The top, in the original's order: author, then handle · date · Read on X; the cover; the title. */
.top { font-family: var(--sans); font-size: var(--text-label); line-height: 1.35; }
.top__author { display: flex; align-items: center; gap: 10px; }
.top__avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: var(--tint); }
.top__avatar--initial { display: grid; place-items: center; font-weight: 600; color: var(--muted); }
.top__name { font-weight: 600; }
.top__meta { font-size: var(--text-meta); color: var(--faint); margin-block-start: 1px; }
.top__on-x { color: inherit; }
.top__on-x:hover { color: var(--ink); }
.top__cover { margin-block-start: 16px; }
/* An X Article's cover is 5:2, as the preview sets it; its place is held before the picture arrives, so the
   article below never moves when it does (spec/motion.md, Loading). */
.top__cover img { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; border-radius: var(--radius-m); background: var(--tint); }
/* The original is set in its own language's serif (a Japanese Article read in English, R60): the family is
   declared again where the language is named, or it would be the page's, inherited already resolved. */
.pair__o[lang], .pair__t[lang], .reading__title[lang] { font-family: var(--serif); }
.reading__title, .pair--title h1 { font-size: 1.55em; line-height: 1.25; margin-block: 18px 6px; }
@media (min-width: 720px) { .reading__title, .pair--title h1 { font-size: 1.85em; } }

/* Blocks: generous space between them, for reading rather than scanning. */
.reading__body { display: flow-root; }
.pair { margin-block-start: 1.15em; }
.pair--title { margin-block-start: 0; }
.pair :is(p, ul, ol, blockquote, figure, .code) + :is(p, ul, ol, blockquote, figure, .code) { margin-block-start: 1.15em; }
.pair h2 { font-size: 1.32em; margin-block-start: .6em; }
.pair h3 { font-size: 1.14em; margin-block-start: .5em; }
.pair h4 { font-size: 1em; margin-block-start: .4em; }
/* Lists: hanging markers outside the measure, so the text stays aligned. */
.pair :is(ul, ol) { padding-inline-start: 0; list-style-position: outside; }
.pair li + li { margin-block-start: .35em; }
@media (max-width: 719px) { .pair :is(ul, ol) { padding-inline-start: 1.1em; } }
/* Blockquotes: indented, a rule on the leading edge, slightly smaller. */
.pair blockquote { padding-inline-start: 1em; border-inline-start: 3px solid var(--rule); font-size: .94em; color: var(--muted); }
.pair blockquote :is(p) + p { margin-block-start: .7em; }
/* An embedded post: a quote carrying its author, its text and the link to it. */
.pair .embed { color: var(--ink); }
.embed__author { font-family: var(--sans); font-size: var(--text-label); }
.embed__link { font-family: var(--sans); font-size: var(--text-meta); color: var(--faint); }
.embed__link a:hover { color: var(--ink); }
/* Images: the full measure; no alt text is invented. */
.pair figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-s); }
/* Inline code: monospace on a subtle background. */
.pair :not(pre) > code { font-family: var(--mono); font-size: .84em; padding: .08em .3em; border-radius: 4px; background: var(--tint); }
/* Code: its own background, a bar above with the copy control, sideways scrolling with no scroll bar. */
.code { background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius-m); overflow: hidden; font-size: 14px; line-height: 1.6; }
.code__bar { display: flex; justify-content: flex-end; padding: 5px 6px; border-block-end: 1px solid var(--code-rule); }
.code-body pre { padding: 12px 14px; width: max-content; min-width: 100%; }
.code-body code { font-family: var(--mono); }
.code-body { --fade: 28px; }
/* Links: the text's own colour, underlined; on hover the underline thickens and dims (components.css). */
.pair a { color: inherit; }

/* A block that never placed: in the original, in its normal ink, set apart (design/preview/screens.html). */
/* A paragraph that never placed: in the body's own style, nothing that reads as a quotation, and one faint
   line under it at the meta size (spec/reading-mode.md; design/preview/reading.html, scene stayed). */
.pair__stayed { font-family: var(--sans); font-size: var(--text-meta); color: var(--faint); margin-block: 6px 22px; }
/* Three left: a line in the article where the reader is, sliding in and moving what is below it down. */

/* ---- how a translation arrives (spec/motion.md) -------------------------------------------------- */
/* Until its translation is checked into place, a block shows its original in pale ink; what a
   translation never touches is at full strength from the start. */
.pair[data-state=arriving] .pair__t { color: var(--ghost); }
.pair[data-state=arriving] .pair__t :is(a, code, img, [data-fixed]) { color: var(--ink); }
.pair[data-state=arriving] .pair__t blockquote { color: var(--ghost); }
/* Signed in at the gate, the rest is written in below from nothing. */
.pair[data-from-nothing][data-state=arriving] .pair__t { visibility: hidden; }
/* The stroke: the logo's accent stroke in the margin beside the block being translated, breathing. */
.reading__body { position: relative; }
.reading__stroke {
  position: absolute; inset-inline-start: -22px; top: 0; width: 11px; height: 11px; opacity: 0; pointer-events: none;
  transition: transform .6s cubic-bezier(.3, .8, .25, 1), opacity .4s;
}
.reading__stroke[data-on] { opacity: 1; }
.reading__stroke svg { display: block; width: 100%; height: 100%; overflow: visible; animation: breathe 1.6s ease-in-out infinite; }
.reading__stroke path { fill: none; stroke: var(--accent); stroke-width: 17; stroke-linecap: round; }
@keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: none; } }
@media (max-width: 719px) { .reading__stroke { inset-inline-start: -14px; width: 9px; height: 9px; } }
@media (prefers-reduced-motion: reduce) { .reading__stroke svg { animation: none; } }

/* ---- the three views: one set of pairs, a different side of each shown -------------------------- */
.reading[data-view=translation] .pair__o,
.reading[data-view=original] .pair__t { display: none; }

/* Bilingual (spec/system.md, The words): one column on every device, each block of the translation with
   its original right beneath it, about 85% of its size and in the faint ink, 6 px between; images and
   code once. The eye reads the translation and glances down to check (design/preview/reading.html). */
.reading[data-view=aligned] .pair__o {
  display: grid; grid-template-rows: 1fr; margin-block-start: 6px;
  font-size: .85em; line-height: 1.62; color: var(--faint);
}
.reading[data-view=aligned] .pair__o > * { min-height: 0; }
.reading[data-view=aligned] .pair__o :is(h1, h2, h3, h4) { margin-block-start: 0; font-size: 1.05em; }
.reading[data-view=aligned] .pair__o blockquote { color: inherit; }
.reading[data-view=aligned] .pair__o :is(a, code, [data-fixed]) { color: inherit; }
.reading[data-view=aligned] .pair--title .pair__o h1 { font-size: 1.2em; margin-block: 0; }

/* While it arrives, a block not yet translated is its original in pale ink in the translation's place,
   with nothing beneath (spec/motion.md, How a translation arrives). When it is written, its original
   settles in beneath it halfway through the sweep, fading down 4 px, the block's height easing with it. */
.reading[data-view=aligned] .pair[data-state=arriving] .pair__o {
  grid-template-rows: 0fr; margin-block-start: 0; opacity: 0; translate: 0 -4px;
}
/* Clipped only top to bottom, so a list's markers still hang outside the measure. */
.reading[data-view=aligned] .pair__o > * { overflow-y: clip; }
.reading[data-view=aligned] .pair[data-state=placed] .pair__o {
  transition: grid-template-rows .45s var(--ease-arrive), margin-block-start .45s var(--ease-arrive), opacity .45s, translate .45s var(--ease-arrive);
  transition-delay: var(--settle-after, 0s);
}

/* Choosing Bilingual: each original settles in beneath its block. */
.reading.stepping-in .pair__o { animation: step-in var(--t-move) var(--ease-arrive); }
@keyframes step-in { from { opacity: 0; translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) {
  .reading[data-view=aligned] .pair__o { transition: none !important; }
}

/* ---- the gate: the next heading dimmed, a fade over blank lines, then the offer ----------------- */
.pair { transition: opacity .5s; }
.pair[data-role=dim] { opacity: .4; }
/* Three blank lines the width of body text, ruled where the text would sit, fading out. Nothing of the
   article is under them: it was never sent. */
.reading__veil {
  font-family: var(--serif); font-size: var(--text-body); line-height: var(--leading-body); margin-block-start: 16px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}
.reading__veil i { display: block; height: 1lh; border-block-end: 1px solid var(--rule); }
.reading__veil i:nth-child(1) { inline-size: 96%; }
.reading__veil i:nth-child(3) { inline-size: 70%; }
.reading__gate { font-family: var(--sans); margin-block-start: 8px; }
.reading > .reading__gate:not(:first-child) { margin-block-start: 22px; }

/* ---- states ------------------------------------------------------------------------------------ */
.reading__state { font-family: var(--sans); display: flex; flex-direction: column; gap: 17px; margin-block-start: 28px; }
.reading .packs { font-family: var(--sans); margin-block-start: 20px; padding-block-start: 19px; border-block-start: 1px solid var(--rule); }
/* None left: the article waits by name above the packs. */
/* None left (spec/account.md, Running out): the packs in place under the Article wanted. */
.reading__packs-title { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-block: 26px 4px; }
.reading__packs-after { font-family: var(--sans); font-size: 13px; color: var(--faint); text-align: center; margin-block-start: 12px; }
.reading__packs .packs__never { display: none; }
/* Back from buying: how it went, one line above the article, over the same measure. */
.reading__purchase { font-family: var(--sans); max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding: 18px var(--gutter) 0; }

/* ---- signing in ------------------------------------------------------------------------------- */
.sign-in { max-width: 420px; margin: 0 auto; padding: var(--space-8) var(--gutter); }
.sign-in__title { font-size: var(--text-screen); line-height: 1.3; margin: 0; }
.sign-in__line { display: flex; align-items: center; gap: 9px; font-size: var(--text-label); line-height: var(--leading-ui); margin-block-end: 19px; }
.sign-in__line .tick { color: var(--accent); flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .reading * { transition: none !important; animation: none !important; }
}

/* ---- a copy is kept by exporting (spec/reading-mode.md) ----------------------------------------- */
/* The article's text cannot be selected, by mouse or by a long press; it stays real text, so a screen
   reader reads it all. Links and controls work as before; a field inside the article can still be typed in. */
/* The bar above it too, so select-all copies nothing at all. */
.reading, .reading-bar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.reading :is(input, textarea) { -webkit-user-select: text; user-select: text; }
/* Printing prints one line and no article. */
.reading__print-line { display: none; }
@media print {
  body > :not(.reading__print-line) { display: none !important; }
  .reading__print-line { display: block; margin: 0; padding: 24px; font: 16px/1.5 var(--sans); color: #000; }
}

/* ---- the Share sheet (src/ui/share.ts; design/preview/reading.html, Share, Exporting, Export didn't
   finish, Before buying a pack) ------------------------------------------------------------------- */
.share { font-family: var(--sans); padding-block-end: 22px; }
/* Copy link and Share… are the sheet's first row (R64). */
/* Side by side, in equal halves; where a language's words don't fit a half on one line, one above the other. */
.share__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 2px; }
.share__buttons .btn { flex: 1 1 0; min-width: max-content; white-space: nowrap; padding-block: 11px; font-size: 14.5px; }
.share__meta { font-size: 13px; color: var(--muted); line-height: 1.5; margin-block-start: 10px; }
/* A posts limit reached, in the writing button's place. */
.posts__limit { font-size: 13px; color: var(--muted); line-height: 1.5; margin-block-start: 10px; text-align: center; }
.share__label { font-size: 12.5px; color: var(--faint); margin: 18px 0 8px; }
.share__line { font-size: var(--text-label); line-height: var(--leading-ui); margin-block: 10px 12px; }
.share__note { margin-block-start: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.share__rule { height: 1px; background: var(--rule); margin: 14px 0 4px; }
.share__heading { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-block-start: 18px; }
.share__export .packs { margin-block-start: 12px; }
.share__export .switch { width: 100%; }
.share__cost { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 10px; font-size: 14px; }
.share__cost b { font-weight: 600; }
.share__cost span { color: var(--faint); font-size: 13px; }
.share__cost--free b { color: var(--accent); }
.share__after { font-size: 13px; color: var(--faint); text-align: center; margin-block-start: 10px; line-height: 1.45; }
.share__msg {
  display: flex; gap: 9px; align-items: flex-start; margin-block-start: 12px; padding: 11px 12px; border-radius: 11px;
  font-size: 13.5px; line-height: 1.45; background: var(--warn-bg); color: var(--warn);
}
.share__msg svg { flex: 0 0 auto; margin-block-start: 1px; }
.share__msg[hidden], .share__after[hidden] { display: none; }
.share__text {
  margin-block-start: 12px; max-height: 120px; overflow: hidden; padding: 12px; border-radius: var(--radius-l); background: var(--tint);
  font-size: var(--text-meta); line-height: 1.55; white-space: pre-wrap; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent);
}
.share__risk {
  display: flex; gap: 8px; align-items: flex-start; margin-block-start: 10px; padding: 9px 11px; border-radius: var(--radius-m);
  background: var(--warn-bg); color: var(--ink); font-size: 12px; line-height: 1.45;
}
.share__risk svg { flex: 0 0 auto; margin-block-start: 1px; color: var(--warn); }

/* A control's own working state keeps its place and size: the mark drawing itself before the words for
   what is happening; its end is a drawn tick and the result in words (spec/motion.md, Waiting). */
.btn [data-go], .btn [data-word], .btn [data-copy-word], .btn [data-copied-word] { display: inline-flex; align-items: center; gap: 9px; }
.btn [hidden] { display: none; }
.btn[data-state="working"] { pointer-events: none; }
.btn__working { display: inline-flex; align-items: center; gap: 9px; }
.btn__working .brand__mark { width: 20px; height: 20px; transform: none; margin: 0; }
/* On the accent, the blue stroke would vanish: it is the button's ink, lighter, over the ink stroke. */
.btn--primary .btn__working .brand__edge { stroke: none; }
.btn--primary .btn__working .brand__translation { stroke: currentColor; opacity: .55; }

/* ---- articles for sharing (R38): the bar's dot, and what sharing earns in the sheet -------------- */
.share-button { position: relative; }
.share-button__dot { position: absolute; inset-inline-end: 5px; inset-block-start: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* The sharing panel, smaller (R64; design/preview/reading.html, Share): its line in the muted ink, the two meters side by side. */
.share__earn { margin-block-start: 14px; padding: 11px 12px 10px; border-radius: 12px; border: 1px solid var(--rule); }
.share__earn > p:first-child { font-size: 13px; line-height: 1.45; color: var(--muted); }
.share__meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block-start: 9px; }
.share__meters .meter i { height: 4px; }
.share__meters small { display: block; font-size: 11.5px; color: var(--faint); margin-block-start: 5px; }
.share__earn-full { font-size: 13px; font-weight: 600; margin-block-start: 8px; }
.share__earn-small { font-size: 11.5px; color: var(--faint); margin-block-start: 8px; line-height: 1.5; }
/* Signed out: one line and Continue with X in the earning panel's place. */
.share__earn--out > .btn { margin-block-start: 10px; }
a.share__posts { color: inherit; text-decoration: none; }
.share__posts {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; margin-block-start: 10px; padding: 0 4px;
  border-radius: 12px; text-align: start; font-size: 15px; transition: background var(--t-hover);
}
.share__posts:hover { background: var(--tint); }
.share__posts > span { flex: 1; }
.share__posts small { display: block; font-size: 12.5px; color: var(--faint); margin-block-start: 1px; }
.share__posts-icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tint); color: var(--accent); }
.share__posts .row__chevron { color: var(--faint); }
.share__posts .row__chevron:dir(rtl) { transform: scaleX(-1); }

/* ---- Write a post (src/ui/share.ts, postsSheet; design/preview/reading.html, Write a post, Post before
   it's translated) --------------------------------------------------------------------------------- */
.posts__optional { color: var(--faint); }
.posts .share__label:first-child { margin-block-start: 6px; }
.posts__line {
  display: block; width: 100%; min-height: 72px; resize: none; font: 15px/1.5 var(--sans); color: var(--ink);
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper); transition: border-color var(--t-hover);
}
.posts__line:hover { border-color: var(--faint); }
.posts__line:is(:focus, :focus-visible) { outline: none; border-color: var(--accent); background: var(--paper); }
.posts__wait { display: flex; align-items: center; gap: 10px; margin-block-start: 12px; font-size: 13.5px; color: var(--muted); }
.posts__wait[hidden] { display: none; }
.posts__mini { flex: 1; height: 3px; border-radius: 2px; background: var(--tint); overflow: hidden; }
.posts__mini i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width .6s var(--ease-arrive); }
.posts__drafts { display: grid; gap: 10px; margin-block-start: 4px; }
.posts__draft {
  position: relative; border: 1px solid var(--rule); border-radius: 16px; padding: 13px 14px 12px; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.posts__draft:hover { border-color: color-mix(in srgb, var(--rule) 40%, var(--ink) 30%); }
.posts__draft[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.posts__angle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); }
.posts__radio { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--rule); transition: border-color .2s; }
.posts__draft[aria-checked="true"] .posts__radio { border-color: var(--accent); }
.posts__draft[aria-checked="true"] .posts__radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.posts__text {
  font-family: var(--serif); font-size: 16px; line-height: 1.55; margin-block-start: 8px; min-height: 74px; white-space: pre-wrap;
  overflow-wrap: anywhere; outline: none; border-radius: 6px; user-select: text; -webkit-user-select: text;
}
.posts__text[contenteditable] { cursor: text; }
.posts__text[contenteditable]:is(:focus, :focus-visible) { outline: none; background: var(--paper); box-shadow: 0 0 0 1px var(--accent); }
.posts__ink { animation: posts-ink 1.4s var(--ease-arrive) both; }
@keyframes posts-ink { 0% { color: var(--accent); opacity: 0; } 25% { opacity: 1; color: var(--accent); } 55% { color: var(--accent); } 100% { color: var(--ink); } }
.posts__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-block-start: 6px; height: 20px; font-size: 12px; color: var(--faint); }
.posts__draft[data-length="near"] .posts__foot { color: var(--warn); }
.posts__draft[data-length="over"] .posts__foot { color: var(--danger); }
/* The ring only near X's limit or over it (R63); its place is kept, so nothing moves when it comes. */
.posts__draft:not([data-length="near"], [data-length="over"]) .posts__ring { visibility: hidden; }
.posts__ring circle { fill: none; stroke-width: 2; }
.posts__ring circle:first-child { stroke: var(--rule); }
.posts__ring-fill { stroke: var(--accent); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .3s, stroke .3s; }
.posts__draft[data-length="near"] .posts__ring-fill { stroke: var(--warn); }
.posts__draft[data-length="over"] .posts__ring-fill { stroke: var(--danger); }
.posts__pen { position: absolute; inset-inline-end: 14px; inset-block-start: 14px; width: 11px; height: 11px; pointer-events: none; }
.posts__pen svg { display: block; width: 100%; height: 100%; overflow: visible; animation: breathe 1.6s ease-in-out infinite; }
.posts__pen path { fill: none; stroke: var(--accent); stroke-width: 17; stroke-linecap: round; }
.posts [data-posts-post] { margin-block-start: 14px; }
.posts [data-posts-again] { margin-block-start: 4px; color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .posts__ink, .posts__pen svg { animation: none; }
  .posts__mini i, .posts__ring-fill { transition: none; }
}

/* ---- arriving with nothing to read (src/ui/arrive.ts; design/preview/screens.html) ------------------ */
.nothing { max-width: 460px; margin: 0 auto; padding: 34px var(--gutter) var(--space-8); }
.nothing__chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0; padding: 6px 11px 6px 6px;
  border-radius: var(--radius-pill); background: var(--tint); font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden;
}
.nothing__address { overflow: hidden; text-overflow: ellipsis; }
.nothing__shared {
  flex: 0 0 auto; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--paper); border: 1px solid var(--rule);
  font-size: 11px; font-weight: 600;
}
.nothing__title { font-family: var(--serif); font-size: 25px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; margin: 16px 0 0; }
.nothing__line { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 8px 0 0; }
.nothing .paste { margin-block-start: 18px; }
.nothing__how { margin-block-start: 26px; padding-block-start: 16px; border-block-start: 1px solid var(--rule); }
.nothing__how-title { font-size: 12.5px; font-weight: 400; color: var(--faint); margin: 0 0 8px; }
.nothing__steps { list-style: none; padding: 0; margin: 0; }
.nothing__step { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 6px 0; }
.nothing__step b {
  flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tint);
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.nothing__key {
  font-style: normal; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; margin-inline: 2px; direction: ltr;
  border-radius: 7px; border: 1px solid var(--rule); font-weight: 600; vertical-align: -3px;
}
.nothing__mark { fill: none; stroke-linecap: round; stroke-width: 16; }
.nothing__back {
  display: inline-block; margin-block-start: 22px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.nothing__back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- the page as a whole (spec/reading-mode.md; design/preview/reading.html) ----------------------- */
/* Under the title, one quiet line: the mark, where it was translated from, the reading time. While the
   translation arrives the mark's blue stroke breathes. */
.reading__seal { display: flex; align-items: center; gap: 8px; min-height: 18px; margin-block: 2px 22px; font-family: var(--sans); font-size: 13px; color: var(--faint); }
.reading__seal .brand__mark { width: 14px; height: 14px; transform: none; margin: 0; }
.reading__seal [data-seal-from]:not(:empty) + [data-seal-time]:not(:empty)::before { content: '·'; margin-inline-end: 8px; }
.reading[aria-busy=true] .reading__seal .brand__translation { animation: breathe 1.6s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
@media (prefers-reduced-motion: reduce) { .reading[aria-busy=true] .reading__seal .brand__translation { animation: none; } }

/* Opening: the mark drawing itself in the middle, over one line, until the article is known. */
.reading__opening { display: flex; flex-direction: column; align-items: center; padding-block-start: 18vh; text-align: center; font-family: var(--sans); }
.reading__opening .brand__mark { width: 64px; height: 64px; margin: 0; transform: none; }
.reading__opening p { margin-block-start: 20px; font-size: 15px; color: var(--muted); }

/* Can't be opened: never a bare error. The bar holds only the name. */
.reading__cannot { max-width: 440px; margin: 0 auto; padding-block-start: 12vh; text-align: center; font-family: var(--sans); }
.reading__cannot-mark .brand__mark { width: 44px; height: 44px; margin: 0; transform: none; }
.reading__cannot h1 { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.012em; margin-block-start: 18px; }
.reading__cannot p { font-size: 15px; line-height: 1.55; color: var(--muted); margin-block-start: 8px; }
.reading__cannot-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); transition: color var(--t-hover), text-decoration-color var(--t-hover); }
.reading__cannot-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.reading__cannot > .btn { width: 100%; margin-block-start: 22px; }
.reading__cannot > .btn + .btn { margin-block-start: 10px; }
.reading__cannot[data-waiting] [data-busy-line="out"], .reading__cannot:not([data-waiting]) [data-busy-line="waiting"] { display: none; }
.reading__cannot .reading-paste { margin-block-start: 12px; }
/* Already in your language: under the author line, the cover and the title, centred (design/preview/reading.html). */
.reading__already { max-width: 440px; margin: 0 auto; padding-block-start: 34px; text-align: center; font-family: var(--sans); }
.reading__already .reading__cannot-mark .brand__mark { width: 36px; height: 36px; margin: 0; transform: none; }
.reading__already h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-block-start: 14px; }
.reading__already p { font-size: 15px; line-height: 1.55; color: var(--muted); margin-block-start: 8px; }
.reading__already > .btn { width: 100%; margin-block-start: 22px; }
.reading__already > .btn + .btn { margin-block-start: 8px; }
/* Already in your language and Can't be opened: the name, the language button and the menu (spec/reading-mode.md). */
.reading-bar[data-no-article] .reading-bar__in > :not(.brand, [data-sheet-open="reading-language"], .menu-wrap) { display: none; }

/* A paste field and Translate. */
.reading-paste { display: flex; gap: 8px; font-family: var(--sans); }
.reading-paste input {
  flex: 1; min-width: 0; height: 40px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  font: 14px var(--sans); padding: 0 12px; transition: border-color var(--t-hover);
}
.reading-paste input:hover { border-color: var(--faint); }
.reading-paste input:is(:focus, :focus-visible) { outline: none; border-color: var(--accent); background: var(--paper); }
.reading-paste .btn { width: auto; height: 40px; padding: 0 14px; font-size: 14px; }

/* The gate: the mark, the line, the button straight to X, and the way to the article on X. */
.gate-wall { text-align: center; padding: 4px 8px 30px; font-family: var(--sans); transition: opacity .4s, transform .5s var(--ease-arrive); }
.gate-wall .brand__mark { width: 30px; height: 30px; margin: 0 0 14px; transform: none; }
.gate-wall__title { font-family: var(--serif); font-weight: 600; font-size: 23px; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; max-width: 24ch; margin: 0 auto; }
@media (max-width: 719px) { .gate-wall__title { font-size: 21px; } }
.gate-wall__small { font-size: 13.5px; color: var(--faint); margin-block-start: 8px; }
/* Terms and Privacy, which signing in agrees to (spec/system.md, the gate), under the small line. */
.gate-wall__legal { font-size: 13px; color: var(--faint); margin-block-start: 4px; }
.gate-wall__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); transition: color var(--t-hover), text-decoration-color var(--t-hover); }
.gate-wall__legal a:hover { color: var(--ink); text-decoration-color: currentColor; }
.gate-wall .btn { max-width: 320px; margin: 20px auto 0; gap: 9px; }
.gate-wall__failed { margin-block-start: 12px; font-size: 13.5px; color: var(--warn); }
.gate-wall__failed[hidden] { display: none; }
.gate-wall__alt { display: inline-block; margin-block-start: 14px; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); transition: color var(--t-hover), text-decoration-color var(--t-hover); }
.gate-wall__alt:hover { color: var(--ink); text-decoration-color: currentColor; }
.reading__gate[data-lifting] .gate-wall { opacity: 0; transform: translateY(-14px); }
.reading__gate[data-lifting] ~ .reading__veil, .reading__veil[data-lifting] { opacity: 0; transition: opacity .35s; }

/* The end of the article: the rule with the mark, the credits, then where to go next. */
.reading-end { margin-block-start: 56px; font-family: var(--sans); }
.reading-end__rule { display: flex; align-items: center; gap: 14px; color: var(--faint); }
.reading-end__rule::before, .reading-end__rule::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.reading-end__rule .brand__mark { width: 18px; height: 18px; margin: 0; transform: none; }
.reading-end__credit { text-align: center; margin-block-start: 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.reading-end__credit a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); transition: text-decoration-color var(--t-hover); }
.reading-end__credit a:hover { text-decoration-color: currentColor; }
.reading-end__next { display: grid; gap: 12px; margin-block-start: 34px; }
@media (min-width: 720px) { .reading-end__next:has(> .reading-end__tile:not([hidden]) + .reading-end__tile) { grid-template-columns: 1fr 1fr; } }
.reading-end__next > * { min-width: 0; }
.reading-end__tile { border: 1px solid var(--rule); border-radius: 16px; padding: 18px 18px 16px; transition: border-color var(--t-hover); }
.reading-end__tile:hover { border-color: color-mix(in srgb, var(--rule) 40%, var(--ink) 30%); }
.reading-end__tile h2 { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -.006em; }
.reading-end__tile > p { font-size: 14px; line-height: 1.55; color: var(--muted); margin-block-start: 5px; }
.reading-end__tile .meter { margin-block-start: 12px; }
.reading-end__count { font-size: 12.5px; color: var(--faint); margin-block-start: 6px; min-height: 1.4em; }
/* Share and Write a post share the panel's width, two equal columns, their words never wrapping (R62). */
.reading-end__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-block-start: 16px; }
.reading-end__acts .btn { width: 100%; min-width: 0; height: 44px; padding: 0 10px; font-size: 14.5px; gap: 7px; white-space: nowrap; }
.reading-end__tile .reading-paste { margin-block-start: 14px; }

/* A meter in segments (this article's people, of ten). */
.meter { display: flex; gap: 4px; }
.meter i { flex: 1; height: 5px; border-radius: 3px; background: var(--tint); }
.meter i[data-on] { background: var(--accent); }
/* Nothing to read: to every step of setting up the share sheet (R85). */
.nothing__every { display: inline-block; margin-block-start: 12px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.nothing__every:hover { text-decoration: underline; text-underline-offset: 3px; }