/* enaxon apps. Style of the apps pages (D29, D40). It uses the design tokens of the active theme (--bg, --text, --accent and the others).
   The first block holds the same tokens with zero specificity, so a theme that has no tokens still gets a look, and the tokens of the enaxon theme always win.
   The base block holds the few shared parts (wrap, grid, button, form) the same way. Right to left text mirrors through logical properties.
   Maintained by hand in src/apps/assets/apps.css. */

/* ---------- Token fallbacks (zero specificity) ---------- */
:where(:root) { --header-h: 68px; --ease-out: cubic-bezier(.23, 1, .32, 1); }
:where(:root) {
  --bg: #F7F8F9;
  --bg2: #FFFFFF;
  --line: #E1E5E9;
  --line2: #CBD2D9;
  --field-line: #7F8A95;
  --seg: #FFFFFF;
  --text: #0E1216;
  --muted: #4A545E;
  --accent: #077A50;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(7, 122, 80, .09);
  --cipher: #5B4BC4;
  --danger: #B42318;
  --chip: #EEF1F3;
  --grid: rgba(14, 18, 22, .06);
  --glow: rgba(7, 122, 80, .08);
  --panel: #FFFFFF;
  --panel2: #F2F4F6;
  --panel-line: #E1E5E9;
  --panel-text: #0E1216;
  --panel-muted: #55606B;
  --panel-accent: #077A50;
  --panel-cipher: #5B4BC4;
  --panel-shadow: 0 30px 60px -30px rgba(14, 18, 22, .22), 0 1px 3px rgba(14, 18, 22, .06);
  --menu-shadow: 0 16px 32px -16px rgba(14, 18, 22, .28);
  /* Light uses bg2 as the base, so secondary text stays at 7:1 on the hover tint. */
  --ext-hover: color-mix(in srgb, var(--accent) 5%, var(--bg2));
  --header-h: 68px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) {
    --bg: #0A0C0F; --bg2: #11151A; --line: #1F262E; --line2: #2C353F; --field-line: #64707C; --seg: #252D37; --text: #E6EAEE; --muted: #9AA4AE;
    --accent: #5EE6B0; --accent-ink: #062A1C; --accent-soft: rgba(94, 230, 176, .08); --cipher: #A99BFF;
    --danger: #FF8A80; --chip: #151B21; --grid: rgba(230, 234, 238, .10); --glow: rgba(94, 230, 176, .12);
    --panel: #0E1217; --panel2: #141A21; --panel-line: #222B34; --panel-text: #E6EAEE; --panel-muted: #8E98A2; --panel-accent: #5EE6B0; --panel-cipher: #B3A6FF;
    --panel-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .02);
    --menu-shadow: 0 24px 40px -16px rgba(0, 0, 0, .95); --ext-hover: color-mix(in srgb, var(--accent) 5%, var(--bg));
    color-scheme: dark;
  }
}
:where(:root[data-theme="dark"]) {
  --bg: #0A0C0F; --bg2: #11151A; --line: #1F262E; --line2: #2C353F; --field-line: #64707C; --seg: #252D37; --text: #E6EAEE; --muted: #9AA4AE;
  --accent: #5EE6B0; --accent-ink: #062A1C; --accent-soft: rgba(94, 230, 176, .08); --cipher: #A99BFF;
  --danger: #FF8A80; --chip: #151B21; --grid: rgba(230, 234, 238, .10); --glow: rgba(94, 230, 176, .12);
  --panel: #0E1217; --panel2: #141A21; --panel-line: #222B34; --panel-text: #E6EAEE; --panel-muted: #8E98A2; --panel-accent: #5EE6B0; --panel-cipher: #B3A6FF;
  --panel-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .02);
  --menu-shadow: 0 24px 40px -16px rgba(0, 0, 0, .95); --ext-hover: color-mix(in srgb, var(--accent) 5%, var(--bg));
  color-scheme: dark;
}

/* ---------- Base parts, zero specificity (the theme wins when it has the same class) ---------- */
:where(.ea-root) { color: var(--text); }
:where(.ea-root) :where(h1, h2, h3) { text-wrap: balance; }
:where(.ea-root) .sr-only, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(.ea-root .wrap) { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
:where(.ea-root .sec-grid) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 3vw, 32px); }
:where(.ea-root .big) { margin: 0; font: 600 clamp(46px, 6.4vw, 80px)/1 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.038em; }
:where(.ea-root .btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 10px; font: 600 1rem/1 'IBM Plex Sans', system-ui, sans-serif; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
:where(.ea-root .btn:active) { transform: translateY(1px); }
:where(.ea-root .btn-primary) { background: var(--accent); color: var(--accent-ink); border: 0; }
:where(.ea-root .btn-primary:hover) { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
:where(.ea-root .btn-ghost) { border: 1px solid var(--line2); color: var(--text); font-weight: 500; background: color-mix(in srgb, var(--bg2) 55%, transparent); }
:where(.ea-root .btn-ghost:hover) { border-color: var(--text); }
:where(.ea-root .form, .ea-root .form-done) { display: grid; gap: 18px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--bg2); }
:where(.ea-root .field) { display: grid; gap: 8px; }
:where(.ea-root .field label) { font-size: 0.9375rem; font-weight: 500; }
:where(.ea-root .input) {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--field-line);
  background: var(--bg); color: var(--text); font: inherit; font-size: 1rem; line-height: 1.4; box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:where(.ea-root .input:hover) { border-color: color-mix(in srgb, var(--text) 40%, var(--field-line)); }
:where(.ea-root .input:focus) { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
:where(.ea-root .input[aria-invalid="true"]) { border-color: var(--danger); }
:where(.ea-root textarea.input) { min-height: 150px; resize: vertical; }
:where(.ea-root .field-error) { margin: 0; color: var(--danger); font-size: 0.875rem; }
:where(.ea-root .form-note) { margin: 0; color: var(--muted); font-size: 0.875rem; }
:where(.ea-root .hp) { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
:where(.ea-root .form-done) { place-items: start; }
:where(.ea-root .form-done h3) { margin: 4px 0 0; font: 600 1.5rem/1.2 'Space Grotesk', system-ui, sans-serif; }
:where(.ea-root .form-done p) { margin: 0; color: var(--muted); }
:where(.ea-root .done-icon) { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
:where(.ea-root :focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
:where(.ea-root svg) { flex: none; }
.ea-root { font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.0625rem; line-height: 1.6; }
.ea-root :lang(fa), .ea-root :lang(ar), .ea-root :lang(ur), .ea-root :lang(he), .ea-root [lang="fa"], .ea-root [lang="ar"], .ea-root [lang="ur"], .ea-root [lang="he"] {
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Noto Sans Hebrew', system-ui, sans-serif;
}
.ea-root [dir="rtl"] .code-frame, .ea-root [dir="rtl"] .token { direction: ltr; text-align: left; }


/* Blog tokens: kept out of the editor palette, like --panel-*. Code tokens reach 7:1 on the code background. */
:root {
  --measure: 31em; /* 558px at 18px: 62 to 74 characters a line, 67 on average (measured) */
  /* Accent as text: 7:1 or more on --bg and --bg2 in both themes (AAA). The plain accent stays for lines, dots and borders. */
  --accent-text: color-mix(in srgb, var(--accent) 70%, var(--text));
  --tok-comment: #4A545E; --tok-keyword: #4B3BB0; --tok-string: #04633E; --tok-number: #8A3A0C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tok-comment: #9AA4AE; --tok-keyword: #B3A6FF; --tok-string: #5EE6B0; --tok-number: #F2B37A; }
}
:root[data-theme="dark"] { --tok-comment: #9AA4AE; --tok-keyword: #B3A6FF; --tok-string: #5EE6B0; --tok-number: #F2B37A; }

/* ---------- Single post (single.html) ----------
   article.post: the post-template li elements also carry the class "post" (core post classes), so the tag is part of the selector. */
article.post { padding-top: clamp(20px, 3vw, 36px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font: 400 .8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted); }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin: 0 10px; color: var(--muted); }
.crumbs a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px;
}
.crumbs a:hover { color: var(--text); text-decoration-color: currentColor; }
/* Touch: 44 by 44. The padding and the equal negative margin widen the target without moving the text or the "/". */
@media (pointer: coarse) { .crumbs a { min-width: 44px; justify-content: center; padding-inline: 8px; margin-inline: -8px; } }

.post-opener { row-gap: 0; margin-top: clamp(12px, 2.4vw, 32px); }
.post-intro { grid-column: 4 / -1; grid-row: 1; min-width: 0; }
.post-title { margin: 0; max-width: 18ch; font: 600 clamp(2.5rem, 5.6vw, 4.5rem)/1.02 'Space Grotesk', sans-serif; letter-spacing: -.035em; overflow-wrap: anywhere; }
/* core/post-excerpt {className: "standfirst is-manual-only"}: prints nothing when the post has no hand written excerpt (plugin filter). */
.standfirst { margin: 24px 0 0; max-width: 40ch; font-size: clamp(1.25rem, 2vw, 1.4375rem); font-weight: 300; line-height: 1.5; }
/* Meta list in the inspector detail style: a label column and a value column. The label column is at least 76px and
   grows with the text (WCAG 1.4.12 text spacing); the rows share it through subgrid, so the values stay aligned. */
.post-meta {
  grid-column: 1 / span 3; grid-row: 1; align-self: end; display: grid; grid-template-columns: minmax(76px, max-content) minmax(0, 1fr);
  gap: 8px 10px; margin: 0; font: 400 .8125rem/1.5 'IBM Plex Mono', ui-monospace, monospace;
}
.post-meta > div {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(76px, max-content) minmax(0, 1fr); grid-template-columns: subgrid;
  gap: 10px; align-items: baseline;
}
.post-meta dt { color: var(--muted); }
.post-meta dd { margin: 0; min-width: 0; color: var(--text); }
.post-meta a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.post-meta a:hover { text-decoration-thickness: 2px; }
/* Touch: the topic link is 44px high. The negative margin keeps the row height, so the list looks the same. */
@media (pointer: coarse) { .post-meta a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; } }
.post-plate { grid-column: 4 / -1; grid-row: 2; margin-top: clamp(28px, 4vw, 48px); }
.post-plate .cover { border-radius: 20px; border: 1px solid var(--line); }
@media (max-width: 1179px) {
  .post-intro, .post-meta, .post-plate { grid-column: 1 / -1; }
  .post-meta { grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin-top: 24px; }
  .post-meta > div { display: flex; gap: 10px; }
  .post-plate { grid-row: 3; margin-top: 28px; }
}

.post-body { margin-top: clamp(40px, 6vw, 72px); row-gap: 0; }

/* Table of contents (enaloo/toc): a sticky rail at 1180px and up (like the sticky section titles), a details box below. */
.toc-rail { grid-column: 1 / span 3; grid-row: 1; position: sticky; top: calc(var(--header-h) + 40px); align-self: start; max-height: calc(100vh - var(--header-h) - 80px); overflow-y: auto; padding-block: 4px; padding-inline: 8px; margin-inline: -8px; }
.toc-label { margin: 0 0 14px; font: 400 .8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted); }
.toc-list { position: relative; margin: 0; padding: 0; list-style: none; }
.toc-list ol { margin: 0; padding: 0; list-style: none; }
.toc-track { position: relative; padding-inline-start: 16px; border-inline-start: 1px solid var(--line2); }
.toc-list a {
  display: flex; align-items: center; min-height: 32px; padding: 5px 0; color: var(--muted); font-size: .9375rem; line-height: 1.35;
  text-decoration: none; overflow-wrap: anywhere; transition: color .15s ease;
}
.toc-list ol a { padding-inline-start: 14px; font-size: .875rem; }
@media (pointer: coarse) { .toc-list a { min-height: 44px; } }
.toc-list a:hover { color: var(--text); }
.toc-list a[aria-current="true"] { color: var(--text); font-weight: 500; }
.toc-marker {
  position: absolute; inset-inline-start: -2px; top: 0; width: 3px; height: 20px; border-radius: 2px; background: var(--accent);
  opacity: 0; transform: translateY(0); transition: transform .22s ease-out, height .22s ease-out, opacity .15s ease;
}
.toc-rail.has-current .toc-marker { opacity: 1; }
.toc-box { grid-column: 1 / -1; margin: 0 0 36px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg2); }
.toc-box summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 18px; cursor: pointer;
  border-radius: 16px; list-style: none; font: 500 .8125rem/1.2 'IBM Plex Mono', ui-monospace, monospace;
}
.toc-box summary::-webkit-details-marker { display: none; }
.toc-box summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s ease; }
.toc-box[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.toc-box .toc-list { padding: 0 18px 14px; }
.toc-box .toc-list a { min-height: 44px; border-top: 1px solid var(--line); }
@media (min-width: 1180px) { .toc-box { display: none; } }
@media (max-width: 1179px) { .toc-rail { display: none; } }
/* While the consent banner is open, the sticky rail ends 16px above it, so the banner never covers a focused TOC link (2.4.11).
   Page scroll padding cannot move a sticky element. The rail scrolls inside, and focus scrolls a link into view in it.
   Short screens are left out: there the banner joins the page flow (shared consent CSS, max-height: 500px). */
@media (min-height: 501px) {
  html.consent-open .doc-tree { max-height: calc(100dvh - var(--header-h) - 24px - var(--consent-h, 0px) - 32px); }
  html.consent-open .toc-rail { max-height: calc(100dvh - var(--header-h) - 40px - var(--consent-h, 0px) - clamp(16px, 3vw, 24px) - 16px); }
}

/* Prose (core/post-content {className: "prose"}, a flow layout): about 67 characters a line at 18px (--measure).
   Code, figures and tables use the wide area (columns 4 to 12). These rules come after core's block gap, so they win. */
.prose { grid-column: 1 / -1; min-width: 0; font-size: 1.125rem; line-height: 1.7; overflow-wrap: break-word; }
.prose > * { max-width: var(--measure); margin-block: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose > .code-frame, .prose > figure { max-width: none; margin: 1.8em 0; }
.prose :is(img, video) { max-width: 100%; height: auto; }
.prose h2 { margin-top: 2.2em; font: 600 clamp(1.625rem, 2.6vw, 2rem)/1.15 'Space Grotesk', sans-serif; letter-spacing: -.02em; }
.prose h3 { margin-top: 1.7em; font: 600 1.375rem/1.25 'Space Grotesk', sans-serif; letter-spacing: -.012em; }
.prose > h2:first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-inline-start: 1.6em; }
.prose ol { padding-inline-start: 1.9em; } /* the mono "01." marker is wider than the square: this keeps it inside the column */
.prose li + li { margin-top: .4em; }
.prose li { padding-inline-start: .3em; }
.prose ul { list-style: square; }
.prose ul > li::marker { color: var(--accent); }
.prose ol { list-style: decimal-leading-zero; }
.prose ol > li::marker { color: var(--accent); font: 500 .8em 'IBM Plex Mono', ui-monospace, monospace; }
.prose :not(pre) > code {
  padding: .1em .36em; border: 1px solid var(--line); border-radius: 6px; background: var(--chip);
  font: 400 .85em/1 'IBM Plex Mono', ui-monospace, monospace; overflow-wrap: anywhere;
}
/* Quote (core/quote: blockquote.wp-block-quote > p + cite): a rule with the timeline node on top. */
.prose blockquote { position: relative; margin: 1.8em 0; padding: 2px 0; padding-inline-start: 28px; border-inline-start: 1px solid var(--line2); }
.prose blockquote::before { content: ""; position: absolute; inset-inline-start: -4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.prose blockquote p { margin: 0; font-size: clamp(1.25rem, 2vw, 1.4375rem); font-weight: 300; line-height: 1.45; }
.prose blockquote cite { display: block; margin-top: 12px; font: 400 .8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; font-style: normal; color: var(--muted); }
/* End mark: the pipeline packet after the last block. */
.prose::after { content: ""; display: block; width: 20px; height: 7px; margin-top: 40px; border-radius: 4px; background: var(--accent); }

/* Code: the inspector panel. Markup from the enaxon-core render_block_core/code filter:
   div.code-frame > div.code-bar (span.code-lang + button.code-copy) + pre[data-scroll-region] > code[translate="no"].
   The pre may keep the core class wp-block-code; core then wraps the code (white-space: break-spaces), so the frame
   sets white-space back: long lines scroll inside the frame. Token colors use the Prism class names. */
.code-frame { overflow: hidden; border: 1px solid var(--panel-line); border-radius: 16px; background: var(--panel); color: var(--panel-text); }
.code-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 6px 6px 18px;
  border-bottom: 1px solid var(--panel-line); font: 400 .78125rem/1.2 'IBM Plex Mono', ui-monospace, monospace; color: var(--tok-comment);
}
.code-copy {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--panel-line); background: var(--panel2); color: var(--panel-text);
  font: 500 .78125rem/1 'IBM Plex Mono', ui-monospace, monospace; transition: border-color .15s ease;
}
.code-copy:hover { border-color: var(--panel-muted); }
@media (pointer: coarse) { .code-copy { min-height: 44px; } }
.code-frame pre {
  margin: 0; padding: 18px 20px 20px; overflow-x: auto; font: 400 .875rem/1.7 'IBM Plex Mono', ui-monospace, monospace; tab-size: 4;
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  max-width: none; border: 0; border-radius: 0; background: none; color: inherit; white-space: pre;
}
.code-frame pre:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 0 0 15px 15px; }
.code-frame code { display: inline; font: inherit; white-space: inherit; overflow-wrap: normal; word-break: normal; direction: ltr; text-align: start; background: none; border: 0; padding: 0; }
.token.comment, .token.prolog, .token.cdata { color: var(--tok-comment); }
.token.keyword, .token.boolean, .token.builtin, .token.important, .token.property { color: var(--tok-keyword); }
.token.string, .token.char, .token.template-string, .token.regex { color: var(--tok-string); }
.token.number, .token.variable { color: var(--tok-number); }
.token.function, .token.class-name { color: var(--panel-text); font-weight: 500; }
.token.punctuation, .token.operator { color: var(--tok-comment); }

/* Figures: diagram (enaloo/diagram) and table (core/table with the enaxon-core scroll region filter). */
.prose figcaption { margin: 12px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
/* The label is followed by a real space in the HTML, so names and copied text read "Figure 1 The parts...". */
.fig-n { margin-inline-end: 6px; font: 500 .8125rem/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--text); }
.diagram-scroll { overflow-x: auto; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line); border-radius: 16px; background: var(--bg2); scrollbar-width: thin; }
/* Minimum width 724px: the 14px labels in the 880 wide viewBox never render under 11.5px (the mono minimum).
   Only the drawing: the editor shows a spinner svg in the same figure while the preview loads. */
.diagram-scroll svg { display: block; width: 100%; min-width: 724px; height: auto; }
.diagram-scroll:focus-visible, .table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dg-box { fill: none; stroke: var(--muted); stroke-width: 1; }
.dg-opt { stroke-dasharray: 5 4; }
.dg-acc { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.dg-tick { fill: none; stroke: var(--line2); stroke-width: 1; } /* decorative brackets only */
.dg-div { fill: none; stroke: var(--field-line); stroke-width: 1; } /* field dividers: 3.1:1 on the accent fill, 3.5:1 on --bg2 */
.dg-label { fill: var(--text); font: 500 15px 'IBM Plex Mono', ui-monospace, monospace; }
.dg-sub { fill: var(--muted); font: 400 14px 'IBM Plex Mono', ui-monospace, monospace; }
/* Core table CSS: the figure scrolls and every cell has a full border. With the plugin wrapper the inner .table-scroll
   scrolls instead (so its focus ring is not clipped), and only the row rules show. */
.wp-block-table:has(> .table-scroll) { overflow: visible; }
.table-scroll { overflow-x: auto; scrollbar-width: thin; }
.wp-block-table table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.wp-block-table thead, .wp-block-table tfoot, .wp-block-table th, .wp-block-table td { border: 0; }
.wp-block-table th {
  padding: 0 0 10px; padding-inline-end: 20px; border-bottom: 1px solid var(--line2); text-align: start; vertical-align: bottom;
  font: 400 .8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted);
}
.wp-block-table td { padding: 12px 0; padding-inline-end: 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wp-block-table td:first-child { white-space: nowrap; }
/* The core "Stripes" style uses fixed light grays: use the theme chip color instead, so dark mode keeps its contrast. */
.wp-block-table.is-style-stripes { border-bottom: 0; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--chip); }


/* ---------- Apps page masthead ---------- */
.apps-head { position: relative; isolation: isolate; }
.apps-head::before {
  content: ""; position: absolute; inset: 0 0 -120px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center -1px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 120px), radial-gradient(ellipse 70% 90% at 72% 30%, #000 20%, transparent 75%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 120px), radial-gradient(ellipse 70% 90% at 72% 30%, #000 20%, transparent 75%);
  mask-composite: intersect;
}
.apps-head-grid { align-items: end; padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4.5vw, 56px); }
.apps-title { grid-column: 1 / span 4; }
.apps-intro { grid-column: 5 / -1; min-width: 0; }
.apps-lead { margin: 0; max-width: 34ch; text-wrap: balance; font-size: clamp(20px, 2vw, 23px); font-weight: 300; line-height: 1.5; }
@media (max-width: 960px) { .apps-title, .apps-intro { grid-column: 1 / -1; } .apps-intro { margin-top: 18px; } }

/* ---------- App cards: one real link (the title), stretched over the card ---------- */
.apps-list-wrap { padding-bottom: clamp(48px, 7vw, 88px); }
.app-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); margin: 0; padding: 0; list-style: none; }
.app-list > li { display: flex; min-width: 0; }
@media (max-width: 960px) { .app-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .app-list { grid-template-columns: minmax(0, 1fr); } }
.app-card {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line); border-radius: 20px; background: var(--bg2);
  transition: border-color .2s ease, background-color .2s ease;
}
.app-card:hover { border-color: var(--accent); background: var(--ext-hover); }
.app-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-icon {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 13px; background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.app-tag { font: 400 0.8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted); }
.app-card-title { margin: 36px 0 0; font: 600 1.5rem/1.18 'Space Grotesk', sans-serif; letter-spacing: -.018em; overflow-wrap: anywhere; }
.app-card-title a { color: var(--text); text-decoration: none; }
.app-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.app-card-title a:focus-visible { outline: none; }
.app-card-title a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.app-card:hover .app-card-title a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.app-card-line { margin: 8px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.app-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 0 0; padding-top: 26px;
  font: 400 0.8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted);
}
.app-go { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); }
.app-go svg { transition: transform .2s ease; }
.app-card:hover .app-go svg { transform: translate(2px, -2px); }

/* ---------- Help strip on the apps page ---------- */
.help-strip { padding-bottom: clamp(84px, 11vw, 144px); }
.help-strip-grid { row-gap: 28px; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.help-strip h2 { grid-column: 1 / span 4; margin: 0; font: 600 clamp(26px, 2.6vw, 32px)/1.15 'Space Grotesk', sans-serif; letter-spacing: -.02em; }
.help-list { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); margin: 0; padding: 0; list-style: none; }
.help-list a { display: block; color: var(--text); text-decoration: none; }
.help-list strong { display: block; font: 600 1.1875rem/1.25 'Space Grotesk', sans-serif; letter-spacing: -.01em; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.help-list a:hover strong { text-decoration-thickness: 2px; }
.help-list span { display: block; margin-top: 8px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
@media (max-width: 960px) { .help-strip h2, .help-list { grid-column: 1 / -1; } }
@media (max-width: 640px) { .help-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- App page ---------- */
.app-lead-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 26px; }
.app-lead-row .app-icon { width: 64px; height: 64px; border-radius: 17px; }
.app-lead-row .app-tag { font-size: 0.875rem; }
.app-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.app-actions .btn svg { margin-inline-end: 0; }
.app-note { margin: 16px 0 0; max-width: 46ch; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
/* App page plate (class shot; "frame" is taken by the home inspector): a browser frame with an illustration of the app. Real screenshots go in the same frame. */
.shot { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--panel-shadow); overflow: hidden; }
.shot-bar { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--panel-line); background: var(--panel2); }
.shot-dots { display: flex; gap: 6px; }
.shot-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.shot-url { flex: 1; min-width: 0; padding: 5px 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--panel-line); color: var(--panel-muted); font: 400 0.75rem/1.4 'IBM Plex Mono', ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-body { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 3fr); min-height: 300px; color: var(--panel-text); }
.shot-side { padding: 18px 16px; border-inline-end: 1px solid var(--panel-line); display: grid; align-content: start; gap: 10px; }
.shot-main { padding: 18px 20px; display: grid; align-content: start; gap: 10px; }
.fx { display: block; height: 10px; border-radius: 5px; background: var(--panel-line); }
.fx.w1 { width: 55%; } .fx.w2 { width: 80%; } .fx.w3 { width: 40%; } .fx.w4 { width: 68%; } .fx.w5 { width: 90%; }
.fx.hot { background: var(--panel-accent); }
.shot-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) 54px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel2); }
.shot-row .tick { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--panel-muted); }
.shot-row.is-on { border-color: var(--panel-accent); }
.shot-row.is-on .tick { background: var(--panel-accent); border-color: var(--panel-accent); }
.shot-cap { margin: 12px 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
@media (max-width: 640px) { .shot-body { grid-template-columns: minmax(0, 1fr); } .shot-side { display: none; } }

.app-section { scroll-margin-top: calc(var(--header-h) + 24px); }
.app-section + .app-section { margin-top: clamp(48px, 7vw, 88px); }
.app-section > h2 { margin: 0; font: 600 clamp(26px, 2.6vw, 32px)/1.15 'Space Grotesk', sans-serif; letter-spacing: -.02em; }
.app-section > .section-lead { margin: 12px 0 0; max-width: var(--measure); color: var(--muted); font-size: 1.125rem; line-height: 1.6; }
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); margin: 28px 0 0; padding: 0; list-style: none; }
.feat-grid li { padding: 20px 0 22px; border-top: 1px solid var(--line); }
.feat-grid h3 { margin: 0; font: 600 1.1875rem/1.25 'Space Grotesk', sans-serif; letter-spacing: -.01em; }
.feat-grid p { margin: 6px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
@media (max-width: 640px) { .feat-grid { grid-template-columns: minmax(0, 1fr); } }

/* Privacy note: the data the app uses, as a label and value list (inspector style). */
.data-list { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 0 28px; margin: 28px 0 0; padding: 4px 0 0; border-top: 1px solid var(--line); }
.data-list > div { display: contents; }
.data-list dt, .data-list dd { padding: 14px 0; border-bottom: 1px solid var(--line); }
.data-list dt { font: 400 0.8125rem/1.7 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted); }
.data-list dd { margin: 0; font-size: 1rem; line-height: 1.6; }
.text-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text-link:hover { text-decoration-thickness: 2px; }
@media (max-width: 640px) { .data-list { grid-template-columns: minmax(0, 1fr); } .data-list dt { padding-bottom: 0; border-bottom: 0; } .data-list dd { padding-top: 4px; } }

/* Callout: tip, note and warning boxes, in guides and on app pages. The label is text, so color is never the only signal. */
.callout { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; max-width: var(--measure); margin: 1.6em 0; padding: 16px 18px; border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: 12px; background: var(--bg2); }
.prose > .callout { max-width: var(--measure); }
.callout svg { grid-row: 1 / span 2; margin-top: 2px; color: var(--accent); }
.callout-label { font: 500 0.8125rem/1.5 'IBM Plex Mono', ui-monospace, monospace; color: var(--text); }
.callout p { margin: 0; font-size: 1rem; line-height: 1.6; }
.callout--warning, .callout--caution { border-inline-start-color: var(--danger); }
.callout--warning svg { color: var(--danger); }
.callout--note, .callout--important { border-inline-start-color: var(--cipher); }
.callout--note svg { color: var(--cipher); }

/* Docs link panel and in-page actions */
.panel-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 28px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--panel-line); border-radius: 20px; background: var(--panel); box-shadow: var(--panel-shadow); }
.panel-link h3 { margin: 0; font: 600 1.3125rem/1.25 'Space Grotesk', sans-serif; letter-spacing: -.012em; }
.panel-link p { margin: 6px 0 0; max-width: 40ch; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.link-row a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; }
.link-row a:hover { text-decoration-color: currentColor; }

/* ---------- Feedback form (bug report and feature request) ---------- */
.fb-form { max-width: 640px; margin-top: 28px; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 500; }
.choice label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 999px; color: var(--muted); cursor: pointer; font: 400 0.875rem/1.2 'IBM Plex Mono', ui-monospace, monospace; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.choice label:hover { color: var(--text); border-color: var(--text); }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice label:has(input:checked) { color: var(--text); border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.choice label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.fb-bug-only[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.ts-box { display: flex; align-items: center; gap: 12px; min-height: 65px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg); color: var(--muted); font-size: 0.875rem; }
.ts-box svg { color: var(--accent); }
.signed-in-hint { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); font-size: 0.9375rem; line-height: 1.5; }
.signed-in-hint a { color: var(--text); }
.fb-done[hidden] { display: none; }

/* ---------- Guides: side tree, text, table of contents ---------- */
.doc-layout { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) minmax(170px, 220px); column-gap: clamp(24px, 4vw, 56px); margin-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(64px, 9vw, 120px); align-items: start; }
.doc-tree { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding-block: 4px; padding-inline: 8px; margin-inline: -8px; scrollbar-width: thin; }
.doc-app { display: flex; min-height: 44px; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--text); text-decoration: none; font: 600 1.125rem/1.2 'Space Grotesk', sans-serif; letter-spacing: -.01em; }
.doc-app .app-icon { width: 36px; height: 36px; border-radius: 10px; }
.doc-app .app-icon svg { width: 20px; height: 20px; }
.doc-search { position: relative; margin-bottom: 18px; }
.doc-search .input { min-height: 44px; padding-inline-start: 38px; font-size: 0.9375rem; }
.doc-search svg { position: absolute; inset-inline-start: 12px; top: 50%; margin-top: -8px; color: var(--muted); pointer-events: none; }
.doc-search-none { margin: 0 0 12px; color: var(--muted); font-size: 0.875rem; }
.doc-group + .doc-group { margin-top: 18px; }
.doc-group-name { margin: 0 0 6px; font: 400 0.8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted); }
.doc-group ul { margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--line2); }
.doc-group a { position: relative; display: flex; align-items: center; min-height: 36px; padding-block: 5px; padding-inline: 14px 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; transition: color .15s ease; }
.doc-group a:hover { color: var(--text); }
.doc-group a[aria-current="page"] { color: var(--text); font-weight: 500; }
.doc-group a[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -2px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--accent); }
@media (pointer: coarse) { .doc-group a { min-height: 44px; } }
.doc-tree-box { display: none; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg2); }
.doc-tree-box summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 18px; cursor: pointer; border-radius: 16px; list-style: none; font: 500 0.8125rem/1.2 'IBM Plex Mono', ui-monospace, monospace; }
.doc-tree-box summary::-webkit-details-marker { display: none; }
.doc-tree-box summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s ease; }
.doc-tree-box[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.doc-tree-box .doc-tree { position: static; max-height: none; margin-inline: 0; padding-block: 0 16px; padding-inline: 18px; }
.doc-main { min-width: 0; }
.doc-main .crumbs { margin-bottom: 4px; }
.doc-title { margin: 0; font: 600 clamp(34px, 4.4vw, 52px)/1.06 'Space Grotesk', sans-serif; letter-spacing: -.03em; overflow-wrap: anywhere; }
.doc-lead { margin: 18px 0 0; max-width: var(--measure); font-size: clamp(19px, 1.8vw, 22px); font-weight: 300; line-height: 1.5; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 20px 0 0; font: 400 0.8125rem/1.5 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted); }
.doc-meta span { display: inline-flex; gap: 8px; }
.doc-meta b { font-weight: 400; color: var(--text); }
.doc-layout .prose { margin-top: clamp(28px, 4vw, 44px); }
.doc-layout .prose::after { display: none; }
.doc-layout .toc-rail { grid-column: auto; grid-row: auto; top: calc(var(--header-h) + 24px); }
.doc-layout .toc-box { grid-column: auto; margin: 28px 0 0; }
@media (max-width: 1179px) {
  .doc-layout { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); }
  .doc-layout .toc-rail { display: none; }
}
@media (max-width: 860px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-layout > .doc-tree { display: none; }
  .doc-tree-box { display: block; }
}
@media (min-width: 861px) { .doc-tree-box { display: none; } }
@media (min-width: 1180px) { .doc-layout .toc-box { display: none; } }

/* Helpful? and previous / next */
.helpful { max-width: var(--measure); margin-top: 56px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.helpful-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.helpful-q { margin: 0; font-weight: 500; }
.helpful-btns { display: flex; gap: 8px; }
.helpful-btns .btn { min-height: 44px; padding: 0 20px; }
.helpful-after { margin: 12px 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.helpful-after[hidden], .helpful-row[hidden] { display: none; }
.doc-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.doc-pager a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); color: var(--text); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.doc-pager a:hover { border-color: var(--accent); background: var(--ext-hover); }
.doc-pager small { display: block; font: 400 0.8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted); }
.doc-pager strong { display: block; margin-top: 4px; font: 600 1.0625rem/1.3 'Space Grotesk', sans-serif; }
.doc-pager .next { grid-column: 2; text-align: end; }
.doc-pager .prev { grid-column: 1; }
@media (max-width: 640px) { .doc-pager { grid-template-columns: minmax(0, 1fr); } .doc-pager .next, .doc-pager .prev { grid-column: 1; text-align: start; } }

/* ---------- Sign in and account ---------- */
.auth-wrap { padding-block: clamp(40px, 7vw, 96px) clamp(84px, 11vw, 144px); }
.auth-grid { align-items: start; row-gap: 40px; }
.auth-intro { grid-column: 1 / span 5; }
.auth-intro .big { font-size: clamp(40px, 5.4vw, 68px); }
.auth-text { margin: 22px 0 0; max-width: 36ch; color: var(--muted); font-size: 1.125rem; line-height: 1.6; }
.auth-points { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 40ch; }
.auth-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.auth-points svg { margin-top: 3px; color: var(--accent); }
.auth-card { grid-column: 7 / -1; min-width: 0; padding: clamp(24px, 3.4vw, 36px); border: 1px solid var(--panel-line); border-radius: 20px; background: var(--panel); box-shadow: var(--panel-shadow); }
.auth-card h2 { margin: 0; font: 600 1.5rem/1.2 'Space Grotesk', sans-serif; letter-spacing: -.012em; }
.auth-card .auth-sub { margin: 8px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.auth-form { display: grid; gap: 16px; margin-top: 22px; }
.auth-form .btn { justify-self: stretch; justify-content: center; min-height: 48px; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 26px 0 4px; color: var(--muted); font: 400 0.8125rem/1 'IBM Plex Mono', ui-monospace, monospace; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-switch { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.auth-step[hidden] { display: none; }
.auth-sent { display: grid; gap: 12px; justify-items: start; }
.auth-sent .done-icon { margin-bottom: 4px; }
.auth-sent h2 { margin-top: 4px; }
.auth-sent p { margin: 0; color: var(--muted); line-height: 1.55; }
.link-btn { padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; min-height: 44px; }
.link-btn:hover { text-decoration-thickness: 2px; }
@media (max-width: 960px) { .auth-intro, .auth-card { grid-column: 1 / -1; } }

.acct-head { padding-block: clamp(40px, 6vw, 80px) clamp(24px, 3vw, 36px); }
.acct-head .big { font-size: clamp(40px, 5.4vw, 68px); }
.acct-head p { margin: 14px 0 0; color: var(--muted); font-size: 1.125rem; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 32px); align-items: start; padding-bottom: clamp(84px, 11vw, 144px); }
.acct-card { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--bg2); }
.acct-card + .acct-card { margin-top: clamp(20px, 3vw, 32px); }
.acct-card h2 { margin: 0; font: 600 1.3125rem/1.25 'Space Grotesk', sans-serif; letter-spacing: -.012em; }
.acct-card > p { margin: 8px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.acct-card .auth-form { margin-top: 18px; }
.acct-card .auth-form .btn { justify-self: start; }
.reports { margin: 18px 0 0; padding: 0; list-style: none; }
.reports li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.reports a { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.reports a:hover { text-decoration-color: var(--accent); }
.reports small { grid-column: 1; font: 400 0.8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted); }
.status { grid-row: 1; grid-column: 2; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--line2); border-radius: 999px; font: 400 0.7812rem/1.3 'IBM Plex Mono', ui-monospace, monospace; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.status--planned::before { background: var(--cipher); }
.status--progress::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.status--done { border-color: var(--accent); background: var(--accent-soft); }
.status--done::before { background: var(--accent); }
.status--declined { color: var(--muted); }
.status--declined::before { background: transparent; border: 1.5px solid var(--muted); }
.methods { margin: 18px 0 0; padding: 0; list-style: none; }
.methods li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 1rem; }
.methods span { color: var(--muted); font: 400 0.8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.btn-danger { border: 1px solid var(--danger); color: var(--danger); background: transparent; font-weight: 500; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
@media (max-width: 960px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Page load moment (D7): masthead, or the app opener ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .apps-head-grid > *, .js .auth-intro, .js .auth-card, .js .acct-head { opacity: 0; transform: translateY(14px); animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards; }
  .js .apps-head-grid > :nth-child(2), .js .auth-card { animation-delay: .12s; }
  .js .app-list > li { opacity: 0; transform: translateY(16px); animation: rise .8s cubic-bezier(.2, .7, .2, 1) .25s forwards; }
  .js .app-list > li:nth-child(2) { animation-delay: .33s; }
  .js .app-list > li:nth-child(3) { animation-delay: .41s; }
}

/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .apps-head::before { display: none; }
  .app-card-title a:focus-visible::after { outline-color: Highlight; }
  .app-icon, .done-icon { border: 1px solid CanvasText; }
  .callout { border-left-color: CanvasText; border-left-width: 4px; }
  .choice label:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; box-shadow: none; }
  .doc-group a[aria-current="page"]::before { forced-color-adjust: none; background: Highlight; }
  .status::before { forced-color-adjust: none; background: CanvasText; }
  .status--declined::before { background: transparent; border-color: CanvasText; }
  .fx.hot, .shot-row.is-on .tick { forced-color-adjust: none; background: Highlight; }
  .fx { forced-color-adjust: none; background: GrayText; }
  .shot-dots i { background: GrayText; }
}

/* App page body: the table of contents rail on the left (1180px and up), the sections on the right. */
.app-content { grid-column: 1 / -1; min-width: 0; padding-bottom: clamp(64px, 9vw, 120px); }
@media (min-width: 1180px) { .app-content { grid-column: 4 / -1; grid-row: 1; } }
.app-content .callout { margin-top: 28px; }
/* A block that waits for the owner's facts. Prototype only: it never ships. */
.todo { max-width: var(--measure); margin: 20px 0 0; padding: 14px 16px; border: 1px dashed var(--field-line); border-radius: 12px; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }

/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .blog-head::before { display: none; }
  .nav-links a[aria-current="page"]::before { forced-color-adjust: none; background: Highlight; }
  .chips a[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; box-shadow: none; }
  .card-topic::before, .prose::after, .prose blockquote::before, .toc-marker { forced-color-adjust: none; background: CanvasText; }
  .toc-marker { background: Highlight; }
  .card-title a:focus-visible::after { outline-color: Highlight; }
  .wp-block-query-pagination .page-numbers.current { outline: 2px solid Highlight; }
  .monogram { border-color: CanvasText; }
  .cover { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; }
  .cv .ln, .cv .ld, .cv .t-soft, .cv .t-c1, .cv .t-c2 { stroke: GrayText; }
  .cv .t-ink, .cv .t-c3 { stroke: CanvasText; }
  .cv .t-acc, .cv .la { stroke: Highlight; }
  .cv .f-c1, .cv .f-hot { fill: none; }
  .cv .f-acc { fill: Highlight; }
  .cv .f-bg { fill: Canvas; }
  .diagram svg { forced-color-adjust: none; }
  .dg-box, .dg-tick, .dg-div { stroke: CanvasText; }
  .dg-acc { fill: Canvas; stroke: Highlight; stroke-width: 2; }
  .dg-label, .dg-sub { fill: CanvasText; }
  .read-progress { forced-color-adjust: none; background: Highlight; }
}


/* ---------- Additions in the plugin ---------- */
.app-link { gap: 10px; }
.app-link svg { width: 18px; height: 18px; }
.btn-quiet { border: 1px dashed var(--line2); color: var(--muted); font-weight: 500; background: transparent; }
.btn-quiet:hover { color: var(--text); border-color: var(--text); border-style: solid; }
.app-icon--image { overflow: hidden; padding: 0; background: transparent; }
.app-icon-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-lead-row .app-icon--image { width: 64px; height: 64px; }
.shot { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--panel-shadow); overflow: hidden; }
.shot-img { display: block; width: 100%; height: auto; }
.apps-empty { color: var(--muted); }
.app-text { max-width: none; }
.app-text > * + * { margin-top: 1.1em; }
.app-text > :is(p, ul, ol) { max-width: var(--measure); }
.app-text h2 { margin: 0; font: 600 clamp(26px, 2.6vw, 32px)/1.15 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.02em; scroll-margin-top: calc(var(--header-h) + 24px); }
.app-text h2:not(:first-child) { margin-top: clamp(48px, 7vw, 88px); }
.app-text h3 { margin: 1.6em 0 0; font: 600 1.375rem/1.25 'Space Grotesk', system-ui, sans-serif; }
.app-text > h2 + * { margin-top: .8em; }
.app-text a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
/* Style hint "features": a list whose items have a bold name followed by the text. */
.app-text .is-style-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); margin: 28px 0 0; padding: 0; list-style: none; max-width: none; }
.app-text .is-style-features > li { padding: 20px 0 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 1rem; line-height: 1.55; }
.app-text .is-style-features > li strong { display: block; margin-bottom: 4px; color: var(--text); font: 600 1.1875rem/1.25 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.01em; }
@media (max-width: 640px) { .app-text .is-style-features { grid-template-columns: minmax(0, 1fr); } }
/* Style hint "facts": a two column table shown as a label and value list. */
.app-text .is-style-facts { max-width: none; margin: 28px 0 0; }
.app-text .is-style-facts table { width: 100%; min-width: 0; border-collapse: collapse; }
.app-text .is-style-facts thead { display: none; }
.app-text .is-style-facts td { padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 1rem; line-height: 1.6; }
.app-text .is-style-facts tr:first-child td { border-top: 1px solid var(--line); }
.app-text .is-style-facts td:first-child { width: 28%; padding-inline-end: 24px; color: var(--muted); font: 400 0.8125rem/1.7 'IBM Plex Mono', ui-monospace, monospace; white-space: normal; }
.table-scroll { overflow-x: auto; }
/* Notes made by the importer: a group with a label paragraph. The icon is drawn with a mask, so it follows the text color. */
.callout { position: relative; display: block; padding-inline-start: 52px; }
.callout::before { content: ""; position: absolute; inset-inline-start: 16px; top: 17px; width: 22px; height: 22px; background: currentColor; color: var(--accent); -webkit-mask: var(--ea-icon) center / contain no-repeat; mask: var(--ea-icon) center / contain no-repeat; }
.callout > * + * { margin-top: .6em; }
.callout--note, .callout--important { --ea-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5.5M12 7.5v.01'/></svg>"); }
.callout--note::before, .callout--important::before { color: var(--cipher); }
.callout--tip { --ea-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/></svg>"); }
.callout--warning, .callout--caution { --ea-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 2.5 20h19z'/><path d='M12 10v4.5M12 17.5v.01'/></svg>"); }
.callout--warning::before, .callout--caution::before { color: var(--danger); }
.callout .callout-label { margin: 0; font: 500 0.8125rem/1.5 'IBM Plex Mono', ui-monospace, monospace; color: var(--text); }
.callout p { margin: 0; font-size: 1rem; line-height: 1.6; }
.callout ul, .callout ol { margin: .4em 0 0; padding-inline-start: 1.4em; font-size: 1rem; }
/* Pictures: one picture, or a light and a dark one (only the one of the active theme shows). */
.prose .wp-block-image { max-width: none; margin: 1.8em 0; }
.prose .wp-block-image img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.prose .wp-block-image figcaption, .prose .shot-caption { margin-top: 12px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.prose .shot { border: 0; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; max-width: none; margin: 1.8em 0; }
.prose .shot .wp-block-image { margin: 0; }
.prose .shot .for-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prose .shot .for-light { display: none; }
  :root:not([data-theme="light"]) .prose .shot .for-dark { display: block; }
}
:root[data-theme="dark"] .prose .shot .for-light { display: none; }
:root[data-theme="dark"] .prose .shot .for-dark { display: block; }
:root[data-theme="light"] .prose .shot .for-light { display: block; }
:root[data-theme="light"] .prose .shot .for-dark { display: none; }
/* Language switch */
.lang-switch { margin: 14px 0 0; }
.lang-switch ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); text-decoration: none; font: 400 0.8125rem/1.2 'IBM Plex Mono', ui-monospace, monospace; }
.lang-switch a:hover { color: var(--text); border-color: var(--text); }
.lang-switch a[aria-current] { color: var(--text); border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
@media (pointer: coarse) { .lang-switch a { min-height: 44px; } }
/* Guide index */
.index-group { margin-top: clamp(28px, 4vw, 44px); }
.index-group h2 { margin: 0 0 12px; font: 400 0.8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted); }
.index-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.index-list li { border-bottom: 1px solid var(--line); }
.index-list a { display: block; padding: 16px 0; color: var(--text); text-decoration: none; }
.index-list a:hover strong { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.index-list strong { display: block; font: 600 1.1875rem/1.3 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.01em; }
.index-list span { display: block; margin-top: 4px; color: var(--muted); font-size: 1rem; line-height: 1.5; }
/* Search results in the side tree */
.doc-results[hidden], .doc-search-none[hidden] { display: none; }
.doc-results ul { margin: 0 0 18px; padding: 0; list-style: none; }
.doc-results a { display: block; padding: 8px 0; color: var(--text); text-decoration: none; }
.doc-results a:hover strong { text-decoration: underline; text-decoration-color: var(--accent); }
.doc-results strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.doc-results span { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.4; }
.helpful[hidden], .helpful-after[hidden], .helpful-row[hidden] { display: none; }
/* Right to left guides: the grid and the logical properties mirror the layout. The text gets room, and code stays left to right. */
.doc-layout[dir="rtl"] .doc-title { letter-spacing: 0; }
.doc-layout[dir="rtl"] .doc-meta, .doc-layout[dir="rtl"] .toc-label, .doc-layout[dir="rtl"] .doc-group-name { font-family: inherit; }
.doc-layout[dir="rtl"] .prose { line-height: 1.9; }
.doc-layout[dir="rtl"] .prose ol > li::marker { font-family: inherit; }
.doc-layout[dir="rtl"] code, .doc-layout[dir="rtl"] kbd { direction: ltr; unicode-bidi: isolate; }
.prose kbd, .app-text kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px; background: var(--bg2); font: 500 .85em 'IBM Plex Mono', ui-monospace, monospace; }
@media (forced-colors: active) {
  .toc-marker { forced-color-adjust: none; background: Highlight; }
  .callout::before { forced-color-adjust: none; background: CanvasText; }
  .lang-switch a[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; box-shadow: none; }
  .code-frame, .shot { border: 1px solid CanvasText; }
}
/* Right to left text in the small mono labels: a mono font made for Latin letters breaks the joined letters of Persian and Arabic. */
.doc-layout[dir="rtl"] .callout .callout-label, .doc-layout[dir="rtl"] .crumbs ol, .doc-layout[dir="rtl"] .wp-block-table th, .doc-layout[dir="rtl"] .lang-switch a, .doc-layout[dir="rtl"] .toc-box summary { font-family: inherit; letter-spacing: 0; }
.doc-layout[dir="rtl"] .doc-meta time { unicode-bidi: isolate; direction: ltr; }

/* ---------- Added after the reviews ---------- */
/* The page background and text colour stay right when a theme does not paint the body in the same tokens. */
.ea-root { background: var(--bg); color: var(--text); }
/* Skip link to the guide text: hidden until it has focus. */
.ea-skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: .9375rem; text-decoration: none; }
.ea-skip:focus { inset-inline-start: 12px; top: 12px; }
/* A required field says so in words, not by colour. */
.ea-root .req { color: var(--muted); font-size: .875rem; font-weight: 400; }
.help-static { display: block; padding: 20px 0; }
.help-static strong { display: block; }
.help-static span { display: block; margin-top: 8px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.toc-rail, .doc-tree { overflow-wrap: anywhere; }
.doc-layout[dir="rtl"] bdi, .prose bdi { unicode-bidi: isolate; }
[aria-disabled="true"].btn, button[aria-disabled="true"] { opacity: .6; cursor: progress; }

/* ---------- Code tabs and more token colours ---------- */
.code-tabs { margin: 1.8em 0; }
.prose > .code-tabs { max-width: none; }
.code-tabs > .code-tabpanel > .code-frame { margin: 0; }
.code-tabcap { margin: 1.2em 0 .4em; color: var(--muted); font: 500 .8125rem/1.4 'IBM Plex Mono', ui-monospace, monospace; }
.code-tabs.is-tabs .code-tabcap { display: none; }
.code-tabs.is-tabs > .code-tabpanel > .code-frame { border-start-start-radius: 0; }
.code-tablist { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.code-tablist [role="tab"] { min-height: 40px; padding: 0 16px; border: 1px solid var(--panel-line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--panel2); color: var(--panel-muted); font: 500 .875rem/1 'IBM Plex Mono', ui-monospace, monospace; cursor: pointer; }
.code-tablist [role="tab"]:hover { color: var(--panel-text); }
.code-tablist [role="tab"][aria-selected="true"] { background: var(--panel); color: var(--panel-text); box-shadow: inset 0 2px 0 var(--accent); }
.code-tablist [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (pointer: coarse) { .code-tablist [role="tab"] { min-height: 44px; } }
.token.tag, .token.atrule, .token.selector { color: var(--tok-keyword); }
.token.attr-name { color: var(--tok-number); }
.token.inserted { color: var(--tok-string); background: color-mix(in srgb, var(--tok-string) 12%, transparent); display: inline-block; min-width: 100%; }
.token.deleted { color: var(--danger, #B42318); background: color-mix(in srgb, var(--danger, #B42318) 10%, transparent); display: inline-block; min-width: 100%; }
@media (forced-colors: active) { .code-tablist [role="tab"][aria-selected="true"] { border-color: Highlight; } }