/* letterpress-app.css — Letterpress, carried through the whole application.

   Ben, 2026-08-22: "I think it's a complete mix of design. You have some stuff that
   looks like Windows XP, but when I click on other things it looks completely
   different." He was right, and this file is the cause being removed. letterpress.css
   restyled about thirty-five classes; the Lunar skin restyles roughly two thousand six
   hundred lines across five files. Any screen Letterpress had not reached fell through
   to the base Yarnball look, so moving between screens changed design language. A skin
   that covers the shell and not the screens is not a design, it is a tint.

   THE DESIGN, stated so it can be checked rather than guessed at:

   - A page is a SHEET, not a stack of floating cards. One paper ground, content held to
     a measure, sections divided by hairline rules. Cards only where a thing is genuinely
     a separate object (a dialog, a document).
   - RULES, NOT BOXES. A horizontal hairline separates; a border that wraps every row is
     noise. Nothing casts a shadow. Nothing has a radius.
   - MEASURE. Reading and form surfaces are held to --lp-measure and centred. A settings
     row stretched across 1280px is unreadable and was the specific defect Ben hit.
   - TYPE CARRIES THE HIERARCHY. Serif for anything read; the mono face, small and
     tracked, for labels, counts, times and status — the things scanned, not read.
   - DENSITY. Rows in the high twenties of pixels, not forty. Section gaps in single
     figures. Whitespace is the margin of the sheet, not padding inside every element.
   - RED IS SCARCE. The brand mark, the primary action, and the one live thing on screen.
     Selection is ink-on-paper inverted, never a colour wash.

   Contract identical to xp.css: every selector carries [data-theme="letterpress"], no app
   file gains a style attribute or a theme-specific class, and only classes that exist in
   this codebase are named here. */

/* ------------------------------------------------------------------ */
/* the sheet                                                           */
[data-theme="letterpress"]{
  --lp-measure:860px;      /* reading + form surfaces */
  --lp-wide:1180px;        /* list/grid surfaces that earn the width */
  --lp-rule:1px solid var(--line);
  --lp-rule-soft:1px solid var(--line-soft);
  --lp-row:30px;           /* the standard line height of a list row */
}

[data-theme="letterpress"] .yarnball-app{background:var(--bg)}
[data-theme="letterpress"] .yarnball-main{padding:18px 0 8px}

/* the top bar is a masthead: a rule under it, nothing else */
[data-theme="letterpress"] .top{
  max-width:var(--lp-wide); padding:14px 20px 12px; border-bottom:var(--lp-rule);
  margin-bottom:0; gap:16px;
}
[data-theme="letterpress"] .word{font-size:20px;letter-spacing:-.02em}
[data-theme="letterpress"] .tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); border-left:var(--lp-rule-soft);
}
[data-theme="letterpress"] .whoami{font-family:var(--mono);font-size: 11px;letter-spacing:.1em}

/* ------------------------------------------------------------------ */
/* page titles — a rule, a serif line, a mono eyebrow                  */
[data-theme="letterpress"] .ptitle{
  max-width:var(--lp-measure); margin:0 auto 14px; padding:0 0 8px;
  border-bottom:var(--lp-rule); gap:10px;
}
[data-theme="letterpress"] .ptitle h2{
  font-family:var(--display); font-size:23px; font-weight:600; letter-spacing:-.015em;
  color:var(--ink);
}
[data-theme="letterpress"] .ptitle .pt-sub,
[data-theme="letterpress"] .mhead .mh-t{
  font-family:var(--mono); font-size: 11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute);
}
[data-theme="letterpress"] .ptitle .icbtn{
  border:var(--lp-rule); border-radius:0; background:transparent; box-shadow:none;
  width:26px; height:26px; color:var(--ink-2);
}
[data-theme="letterpress"] .ptitle .icbtn:hover{background:var(--surface);color:var(--accent)}

/* ------------------------------------------------------------------ */
/* SETTINGS — the screen Ben called out.                               */
/* It was full-bleed: rows ran the entire window width with 12px text at
   one end and a control at the other, which no one can read across. Held
   to the measure, ruled instead of boxed, and dense.                   */
[data-theme="letterpress"] .settings-wrap{
  max-width:var(--lp-measure); margin:0 auto; padding:0 20px;
}
[data-theme="letterpress"] .setgroup{
  border:0; border-top:var(--lp-rule); border-radius:0; background:transparent;
  box-shadow:none; overflow:visible;
}
[data-theme="letterpress"] .setgh{
  font-family:var(--mono); font-size: 11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); margin:16px 0 6px; padding:0;
}
[data-theme="letterpress"] .setlink{
  border-bottom:var(--lp-rule-soft); padding:7px 2px; gap:12px; min-height:var(--lp-row);
  background:transparent;
}
[data-theme="letterpress"] .setlink:hover{background:var(--surface)}
[data-theme="letterpress"] .setlink:last-child{border-bottom:0}
[data-theme="letterpress"] .setlink .sl-ic{
  width:22px; height:22px; border:0; border-radius:0; background:transparent;
  color:var(--mute);
}
[data-theme="letterpress"] .setlink .sl-l{
  font-family:var(--display); font-size:14px; font-weight:600; color:var(--ink); line-height:1.3;
}
[data-theme="letterpress"] .setlink .sl-v{
  font-family:var(--mono); font-size: 11px; letter-spacing:.08em; color:var(--mute);
  text-transform:uppercase; margin-top:2px;
}
[data-theme="letterpress"] .setlink .sl-ch{color:var(--faint)}
[data-theme="letterpress"] .setrow{
  margin:0; padding:7px 2px; gap:16px; min-height:var(--lp-row);
  border-bottom:var(--lp-rule-soft);
}
[data-theme="letterpress"] .setrow:last-child{border-bottom:0}
[data-theme="letterpress"] .setrow label{
  font-family:var(--display); font-size:13.5px; font-weight:500; color:var(--ink-2);
}
[data-theme="letterpress"] .section-gap-18{margin-top:14px}
[data-theme="letterpress"] .yb-winlayer .yb-win{resize:none}
[data-theme="letterpress"] .yarnball-shell:has(.yb-winlayer) > .top{z-index:5}
[data-theme="letterpress"] .modal .mcard:has(.sec-panel),
[data-theme="letterpress"] .modal .mcard:has(.secfact-detail){border-top:0}
[data-theme="letterpress"] .yb-f-tabwrap{touch-action:pan-y}
[data-theme="letterpress"] .yb-f-tab:not(.yb-is-on):hover,
[data-theme="letterpress"] .yb-f-tab:not(.yb-is-on):focus-visible{background:color-mix(in srgb,var(--accent) 12%,var(--surface))}

/* the segmented controls (theme, density, agent results) read as a line of
   set type, with the chosen one inked rather than filled */
[data-theme="letterpress"] .atabs{
  background:transparent; border:0; border-bottom:var(--lp-rule-soft); border-radius:0;
  gap:0; padding:0;
}
[data-theme="letterpress"] .atab{
  border:0; border-radius:0; background:transparent; box-shadow:none;
  font-family:var(--display); font-size:13px; color:var(--mute);
  padding:4px 11px; letter-spacing:0;
}
[data-theme="letterpress"] .atab:hover{color:var(--ink);background:transparent}
/* the chosen tab's ink fill is declared once, with !important, further down
   in the SEGMENTED CONTROLS section — a plain rule here was silently beaten
   by an !important rule in shared app-extensions.css and rendered brick red
   instead (see that section for the full story). Not repeated here so there
   is only one place to look. */

/* account + usage: a ledger, not a dashboard */
[data-theme="letterpress"] .account-card,
[data-theme="letterpress"] .conntile,
[data-theme="letterpress"] .mcard{
  border:0; border-top:var(--lp-rule); border-radius:0; background:transparent;
  box-shadow:none; padding:10px 0;
}
[data-theme="letterpress"] .account-card-header,
[data-theme="letterpress"] .mhead{
  background:transparent; border-bottom:0; padding:0 0 4px;
}
[data-theme="letterpress"] .account-card-title{
  font-family:var(--mono); font-size: 11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
}
[data-theme="letterpress"] .account-email-row{
  border:0; border-bottom:var(--lp-rule-soft); border-radius:0; background:transparent;
  padding:6px 2px;
}
[data-theme="letterpress"] .account-email-text{font-family:var(--mono);font-size:12px;color:var(--ink)}
[data-theme="letterpress"] .account-email-icon{color:var(--faint)}
[data-theme="letterpress"] .picker-row-btn{
  border:0; border-bottom:var(--lp-rule-soft); border-radius:0; background:transparent;
  box-shadow:none; font-family:var(--display); font-size:13.5px; color:var(--ink);
  padding:8px 2px; text-align:left; min-height:var(--lp-row);
}
[data-theme="letterpress"] .picker-row-btn:hover{background:var(--surface);color:var(--ink)}
[data-theme="letterpress"] .section-gap-18 .picker-row-btn{
  background:var(--accent); border:0; color:var(--on-accent); font-weight:600;
  padding:8px 14px; text-align:center; margin-top:10px;
}
[data-theme="letterpress"] .section-gap-18 .picker-row-btn:hover{background:var(--ink);color:var(--on-ink)}

/* connections directory: a specimen sheet of names, not a grid of tiles */
[data-theme="letterpress"] .conn-provider-glyph,
[data-theme="letterpress"] .profile-loc-glyph{
  border-radius:0; background:transparent; border:0;
}
[data-theme="letterpress"] .conn-row-head{
  font-family:var(--mono); font-size: 11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
}
[data-theme="letterpress"] .conn-icon-btn{
  border:var(--lp-rule); border-radius:0; background:transparent; box-shadow:none;
}
[data-theme="letterpress"] .conn-icon-btn:hover:not(:disabled){background:var(--surface);border-color:var(--ink)}

/* ------------------------------------------------------------------ */
/* CHAT — a transcript on a sheet                                      */
[data-theme="letterpress"] .greet{
  font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.02em;
  margin:6px 0 14px;
}
[data-theme="letterpress"] .row{margin:14px 0;gap:12px}
[data-theme="letterpress"] .who{
  font-family:var(--mono); font-size: 11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
}
[data-theme="letterpress"] .row.me .bub{
  background:transparent; color:var(--ink); border:0; border-left:2px solid var(--ink);
  padding:2px 0 2px 12px; font-family:var(--display); font-size:14px;
}
[data-theme="letterpress"] .row.yarnball .bub{
  font-family:var(--display); font-size:14.5px; line-height:1.6; color:var(--ink-2);
}
/* 2026-08-22 sweep: .bub pre and .bub code were one combined selector, so the SAME
   1px border landed on the nested inline <code> inside <pre><code>. code is inline by
   default, and a border on an inline box that wraps across several lines draws a
   fragment under EVERY visual line — it read as a stray underline on each code line.
   pre carries the block; the nested pre code resets to nothing; a standalone inline
   code (in prose, not inside pre) keeps a small bordered chip of its own. */
[data-theme="letterpress"] .row.yarnball .bub pre{
  background:var(--surface); border:var(--lp-rule-soft); border-radius:0;
  font-family:var(--mono); font-size:12px;
}
[data-theme="letterpress"] .row.yarnball .bub pre code{
  background:transparent; border:0; padding:0;
}
[data-theme="letterpress"] .row.yarnball .bub code{
  background:var(--surface-2); border:0; border-radius:0;
  font-family:var(--mono); font-size:12px; padding:1px 5px;
}
[data-theme="letterpress"] .row.yarnball .bub h1,
[data-theme="letterpress"] .row.yarnball .bub h2,
[data-theme="letterpress"] .row.yarnball .bub h3{
  font-family:var(--display); font-weight:600; color:var(--ink);
}
[data-theme="letterpress"] .row.yarnball .bub table{border-collapse:collapse;font-size:12.5px}
[data-theme="letterpress"] .row.yarnball .bub th{
  font-family:var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); text-align:left; border-bottom:var(--lp-rule); padding:4px 8px 4px 0;
  background:transparent; font-weight:500;
}
[data-theme="letterpress"] .row.yarnball .bub td{
  border-bottom:var(--lp-rule-soft); padding:4px 8px 4px 0;
}
[data-theme="letterpress"] .starter-chip{
  border:0; border-bottom:var(--lp-rule); border-radius:0; background:transparent;
  font-family:var(--display); font-size:13.5px; color:var(--ink-2); padding:4px 2px;
}
[data-theme="letterpress"] .starter-chip:hover{color:var(--accent);border-color:var(--accent);background:transparent}
[data-theme="letterpress"] .yarnball-main-compact .chat-hello{margin:0 auto;padding:0 20px;text-align:center}
[data-theme="letterpress"] .yarnball-main-compact .chat-hello-line{font-size:34px;line-height:1.15;letter-spacing:-0.015em}
[data-theme="letterpress"] .yarnball-main-compact .chat-hello-clock{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
[data-theme="letterpress"] .yarnball-main-compact > .card:has(.chat-hello){min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
[data-theme="letterpress"] .ctx-chip,
[data-theme="letterpress"] .memchip{
  font-family:var(--mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase;
  border:var(--lp-rule-soft); border-radius:0; background:transparent; color:var(--mute);
  padding:1px 5px;
}
[data-theme="letterpress"] .meta-icon-btn,
[data-theme="letterpress"] .clip,
[data-theme="letterpress"] .composer-icon-red{
  border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--mute);
}
[data-theme="letterpress"] .meta-icon-btn:hover,
[data-theme="letterpress"] .clip:hover,
[data-theme="letterpress"] .composer-icon-red:hover{color:var(--accent);background:transparent}

/* ------------------------------------------------------------------ */
/* POPUPS / FLOATING SURFACES — solid, never glass (Ben, 2026-08-22:      */
/* "make the popups like chat history or browser windows etc not          */
/* transparent, but solid").                                              */

/* .chat-nav-panel is the anchored "Chats" dropdown (New chat / recent
   threads) — position:absolute, floats OVER the page. letterpress.css
   (line ~159) styled it as if it were a docked left rail — background:
   transparent, border-right only — so the page text underneath showed
   straight through the open menu (confirmed on screen: the user's last
   message text visibly overlapped "New chat in project"). Every other
   anchored popover in the app (.attach-menu, .profile-dropdown-menu,
   .work-lang-menu, .canvas-menu, .link-context-menu, .link-hover-preview,
   .plan-strip) already inherits a solid var(--surface) card from the base
   bundle and needed only the letterpress card treatment; this one alone
   had been made transparent by mistake.
   Design review 2026-10-07: the 1px ink frame read as harsher than the
   rest of the app's popovers, so the Chats dropdown takes the standard
   popover card from app-extensions.css (line border, small radius, soft
   shadow). Its search field had a double red ring on focus: the theme's
   global :focus-visible outline drawn around the already-red focus
   border. The field keeps the single accent border, like .fld inputs. */
[data-theme="letterpress"] .chat-nav-panel,
[data-theme="letterpress"] .attach-menu{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--shadow);
}
[data-theme="letterpress"] .chat-nav-search:focus,
[data-theme="letterpress"] .chat-nav-search:focus-visible{
  outline:none; box-shadow:none; border-color:var(--accent);
}
[data-theme="letterpress"] .profile-dropdown-menu,
[data-theme="letterpress"] .work-lang-menu,
[data-theme="letterpress"] .canvas-menu,
[data-theme="letterpress"] .link-context-menu,
[data-theme="letterpress"] .link-hover-preview{
  background:var(--surface); border:1px solid var(--ink); border-radius:0;
  box-shadow:none; font-family:var(--ui);
}
[data-theme="letterpress"] .attach-menu-item:hover,
[data-theme="letterpress"] .profile-dropdown-item:hover,
[data-theme="letterpress"] .work-lang-item:hover,
[data-theme="letterpress"] .canvas-menu-item:hover,
[data-theme="letterpress"] .link-context-menu-item:hover{
  background:var(--surface-2); color:var(--ink);
}

/* The document-editor popup (.canvas-popup-*) is a second, separate modal
   implementation from .modal/.mcard, added later (YUM-458/canvas.css) and
   never themed: a real frosted-glass scrim (backdrop-filter:blur(4px) over
   rgba(0,0,0,.65)). Letterpress has no glass anywhere — the scrim becomes a
   flat, fully opaque panel; the dialog itself already sat on var(--surface)
   and only needed corners/shadow removed. Same fix for the two other
   full-screen scrims in canvas.css (.docpv the file print-preview, .pdfed
   the PDF editor) which used the same translucent-black pattern without
   blur, and for the app-wide .modal backdrop in letterpress.css, which was
   still a 28%-alpha see-through rgba rather than solid. One shared solid
   scrim colour so all four match. */
/* 2026-09-25 (SB: "don't make the background this ugly green color ... darken the
   surrounding"): the scrim is neutral black at 60%, so the app shows through, dimmed. */
[data-theme="letterpress"]{ --lp-scrim:rgba(0,0,0,.6); }
[data-theme="letterpress"] .modal{ background:var(--lp-scrim); }
[data-theme="letterpress"] .canvas-popup-backdrop,
[data-theme="letterpress"] .docpv,
[data-theme="letterpress"] .pdfed{
  background:var(--lp-scrim); backdrop-filter:none; -webkit-backdrop-filter:none;
}
[data-theme="letterpress"] .canvas-popup-dialog{
  background:var(--surface); border:1px solid var(--ink); border-radius:0; box-shadow:none;
}
[data-theme="letterpress"] .canvas-popup-badge{
  background:var(--accent-soft); color:var(--accent); border-radius:0;
}

/* Floating, non-modal cards: .memory-space-card is a corner-anchored card
   (position fixed bottom-left) that used color-mix + backdrop-filter:
   blur(12px) — glass again. Made solid paper with an ink hairline, matching
   every other card in this theme. */
[data-theme="letterpress"] .memory-space-card{
  background:var(--surface); border:1px solid var(--ink); border-radius:0;
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}

/* Plain text fields: Field/.fld renders <div class="fld"><input/></div> with
   NO .box wrapper in most forms (New automation's Name field, Custom Skill
   creation, Edit Profile, webhook fields, ...) — only the chat composer
   happens to wrap .fld in .box. The base rule .fld input{border:1px solid
   var(--line);box-shadow:inset ...} and its focus halo
   (box-shadow:0 0 0 3px color-mix(accent 12%)) are keyed to that bare
   <input>, not to .box, so letterpress's .box treatment never reached these
   fields — they kept the full boxed-input look this theme rejects
   everywhere else. Same underline-only rule as .box, applied to every plain
   field and textarea. */
[data-theme="letterpress"] .fld input,
[data-theme="letterpress"] .fld textarea,
[data-theme="letterpress"] .form-textarea{
  background:transparent; border:0; border-bottom:1.5px solid var(--ink);
  border-radius:0; box-shadow:none; padding:6px 2px;
  font-family:var(--ui); font-size:14px; color:var(--ink);
}
[data-theme="letterpress"] .fld input:focus,
[data-theme="letterpress"] .fld textarea:focus,
[data-theme="letterpress"] .form-textarea:focus{
  border-bottom-color:var(--accent); box-shadow:none; outline:none;
}

/* The Observable Agent Browser (YUM-508) — the live view shown in a chat's
   tool trail when Yarnball drives a web page itself, opened via "Open the
   browser". It is styled with its own permanent --ds-* fallback tokens
   (#141416 surface, #09090a viewport) that no Yarnball theme reaches at
   all, so it renders as a fixed dark console glued onto the paper page in
   every skin, not just this one. Given the letterpress ink/paper palette. */
[data-theme="letterpress"] .agent-browser-panel{
  background:var(--surface); border:1px solid var(--ink); border-radius:0;
  color:var(--ink); font-family:var(--ui);
}
[data-theme="letterpress"] .agent-browser-header{
  background:var(--bg-2); border-bottom:1px solid var(--ink);
}
[data-theme="letterpress"] .agent-browser-url-bar{
  background:var(--surface); border:1px solid var(--line); border-radius:0;
}
[data-theme="letterpress"] .agent-browser-url-input{ color:var(--ink); font-family:var(--mono); }
[data-theme="letterpress"] .agent-browser-viewport{ background:var(--surface-2); }
[data-theme="letterpress"] .agent-browser-ticker{
  background:var(--bg-2); border-top:1px solid var(--line); color:var(--mute);
  font-family:var(--mono);
}

/* ------------------------------------------------------------------ */
/* SEGMENTED CONTROLS — the chosen tab is INKED, not a red block.         */
/* app-extensions.css carries three separate !important rulesets (line
   ~1640ish, keyed on .atab.on/.is-active/.is-selected across .srow,
   .profile-field-control, .form-srow, .scheduled-task-controls and the
   bare class) that force background:var(--accent) !important and
   color:#fff !important on every "selected" segmented control in the
   ENTIRE app, in every theme. letterpress.css's own .atab.on{background:
   var(--ink)} (no !important) can never win against that — so Theme,
   Density, Agent-results in Appearance, and Reasoning/Benchmarking On/Off
   in Models all rendered as solid brick-red pills, three or more at once
   on a single screen. That is a colour wash, not the "one live thing"
   red is supposed to be, and it silently defeated this file's own stated
   intent ("the chosen one inked rather than filled"). !important is the
   only way to reach it from here, since app-extensions.css is shared
   across every theme and is not this file's to edit. */
[data-theme="letterpress"] .atab.on,
[data-theme="letterpress"] .atab.is-active,
[data-theme="letterpress"] .atab.is-selected,
[data-theme="letterpress"] .atab[aria-selected="true"]{
  background:var(--ink) !important; color:var(--on-ink) !important;
  font-weight:600 !important; box-shadow:none !important;
}

/* ------------------------------------------------------------------ */
/* CARDS — radius 0 everywhere, including the ones this theme never       */
/* named. .conn-account-card (Connections' per-service frame) hardcodes    */
/* border-radius:12px directly (not a token) and an accent-tinted border — */
/* confirmed on screen with a visibly rounded corner. .custom-skill-card   */
/* and any future user of --r-card fall back to a hardcoded 10px when the  */
/* token is undefined, which it was. Defining --r-card here fixes every    */
/* current and future consumer of that token in one place; the two named   */
/* classes get the same hairline-not-wash treatment as every other card    */
/* in this file. */
[data-theme="letterpress"]{ --r-card:0px; }
[data-theme="letterpress"] .conn-account-card{
  border:1px solid var(--ink); border-radius:0; padding:8px 14px; margin-bottom:12px;
  background:var(--surface);
}
[data-theme="letterpress"] .conn-account-card .conn-row-head b{ color:var(--ink); }
[data-theme="letterpress"] .conn-account-card .conn-icon-btn{ border-color:var(--ink); color:var(--ink); }
[data-theme="letterpress"] .conn-account-card .conn-icon-btn:hover:not(:disabled){
  background:var(--ink); color:var(--on-ink);
}
[data-theme="letterpress"] .custom-skill-card{
  border:0; border-bottom:var(--lp-rule-soft); border-radius:0; background:transparent;
  padding:10px 2px;
}
[data-theme="letterpress"] .secfact-detail-card{
  border:1px solid var(--line); border-radius:0; background:var(--surface-2);
}

/* "+ Connect another account" (.section-gap-18 .picker-row-btn) is the one
   deliberately-solid CTA in this file, but .picker-row-btn is a full-width
   ROW style everywhere else, and that width:100% carried through into the
   solid-fill variant — so the "one live accent" became a ~790px, ~35px-tall
   red bar spanning the whole measure, a decorative wash rather than a
   scarce mark. Sized to its own content instead. */
[data-theme="letterpress"] .section-gap-18 .picker-row-btn{
  display:inline-flex; width:auto;
}

/* ------------------------------------------------------------------ */
/* Security modal — --trust-green is still literally green (#4A6B45),      */
/* used for every "verified" state (the five path-check circles, the       */
/* padlock icon, .sl-ic). Green is banned outside the enclave theme;       */
/* "verified" reads the same way this theme already reads "selected" —     */
/* ink, not colour. */
[data-theme="letterpress"]{ --trust-green:var(--ink); }

/* ------------------------------------------------------------------ */
/* WORK — the connected surface                                        */
/* app-extensions.css keeps the rail's colours as literal hexes that no
   token reaches, so they are redeclared here or the rail stays brick. */
[data-theme="letterpress"]{
  --work-rail-bg:#EDE6D9; --work-rail-line:#CDBFA8; --work-rail-ink:#14110E;
  --work-rail-mute:#6B5F51; --work-rail-label:#66594C; --work-rail-hover:#E3D9C6;
  /* YUM-1446: the selected row is a light brick tint with a thin accent bar, not a black
     slab. Ink on tint 11.9:1. */
  --work-rail-active-bg:#F0E2DF; --work-rail-active-ink:#5C1F1B; --work-rail-active-bar:var(--accent);
  --work-dim:#6B5F51;
}
[data-theme="letterpress"] .mail-rail{border-right:var(--lp-rule)}
[data-theme="letterpress"] .work-chat-tab{width:44px;height:44px;border:1px solid var(--line);border-radius:50%}
[data-theme="letterpress"] .yb-tab-right.yb-is-open{right:var(--yb-edge-w-right,296px);box-shadow:none}
[data-theme="letterpress"] .yb-tab-left.yb-is-open{left:var(--yb-edge-w-left,296px);box-shadow:none}
[data-theme="letterpress"] .mail-rail-label{
  /* YUM-1130: rail labels were 9px, below the critique's 12px legibility bar. */
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--work-rail-label);
}
[data-theme="letterpress"] .mail-folder,
[data-theme="letterpress"] .work-source{
  border-radius:0; font-family:var(--display); font-size:13.5px; min-height:30px;
}
[data-theme="letterpress"] .mail-folder-count{font-family:var(--mono);font-size:12px}
[data-theme="letterpress"] .mail-flag{
  /* YUM-1130: status flags reached 8.5px; the bar is 12px at default text size. */
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  border:0; border-radius:0; background:transparent; color:var(--mute); padding:0;
  margin-right:12px;
}
[data-theme="letterpress"] .mail-flag.is-waiting{color:var(--accent)}
[data-theme="letterpress"] .mail-flag.is-translated{color:var(--mute)}
[data-theme="letterpress"] .mail-reader-subject{
  font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.015em;
  color:var(--ink);
}
[data-theme="letterpress"] .mail-reader-head{border-bottom:var(--lp-rule);padding-bottom:8px}
/* YUM-1397 H1: no monospace anywhere in the mail header, this theme included. */
[data-theme="letterpress"] .mail-reader-meta,
[data-theme="letterpress"] .mail-reader-meta-addr,
[data-theme="letterpress"] .mail-reader-from-name,
[data-theme="letterpress"] .mail-reader-from-addr,
[data-theme="letterpress"] .mail-reader-to,
[data-theme="letterpress"] .mail-reader-date{
  font-family:var(--ui); font-size:12px; letter-spacing:normal; color:var(--mute);
}
/* YUM-1130: the 12px above must not shrink the phone reader. Under 600px the mobile layout sizes
   `.mail-reader-meta` at 13.5px and `.mail-reader-date` at 12.5px, and those rules win over the
   raise, so the phone reader keeps them under Letterpress too. */
@media (max-width: 600px) {
  [data-theme="letterpress"] .mail-reader:has(.mail-phone-bar) .mail-reader-meta{font-size:13.5px}
  [data-theme="letterpress"] .mail-reader:has(.mail-phone-bar) .mail-reader-date{font-size:12.5px}
}
[data-theme="letterpress"] .mail-reader-from-name{color:var(--ink); font-weight:700}
[data-theme="letterpress"] .mail-list-status{font-family:var(--display);font-size:13px;color:var(--mute)}
[data-theme="letterpress"] .mail-connect-text{font-family:var(--display);font-size:14px;max-width:52ch}
/* YUM-1130. Work metadata that a linked sheet sets below 12px is raised to the Letterpress 12px
   bar here. The list is DERIVED from the stylesheets: a selector is raised when a sheet sizes its
   element below 12px, unless a larger declaration sizes that same element at a width where both
   apply. A raise never lowers text a larger rule sets, so such elements keep that larger size.

   An ancestor is never raised. Raising a container changes the size its children inherit, so
   `.mail-item-top`, `.mail-keys-key`, `.work-browser-filters` and `.work-tg-ev` stay as they are;
   their small children are raised instead (`.mail-keys-key kbd`, `.work-browser-filter`).
   the rig case that derived this list was removed with the test rig, so no test checks it now.
   Until one does, check by hand that no Work element is sized below 12px with no Letterpress
   rule reaching it.

   Only font-size is set. Each selector keeps the family, colour and layout its own rule declares. */
[data-theme="letterpress"] .ds-tree-count,
[data-theme="letterpress"] .file-tree-count,
[data-theme="letterpress"] .file-tree-group,
[data-theme="letterpress"] .file-tree-meta,
[data-theme="letterpress"] .mail-action-hint-status,
[data-theme="letterpress"] .mail-action-tag,
[data-theme="letterpress"] .mail-actionbar-chip,
[data-theme="letterpress"] .mail-attach-card-size,
[data-theme="letterpress"] .mail-attach-chip,
[data-theme="letterpress"] .mail-automation-state,
[data-theme="letterpress"] .mail-automation-toggle,
[data-theme="letterpress"] .mail-bulk-count,
[data-theme="letterpress"] .mail-col,
[data-theme="letterpress"] .mail-compose-bcc-link,
[data-theme="letterpress"] .mail-compose-more,
[data-theme="letterpress"] .mail-compose-title,
[data-theme="letterpress"] .mail-draft-status,
[data-theme="letterpress"] .mail-filter-chip,
[data-theme="letterpress"] .mail-flag,
[data-theme="letterpress"] .mail-folder-count,
[data-theme="letterpress"] .mail-item-invite-when,
[data-theme="letterpress"] .mail-item-summary,
[data-theme="letterpress"] .mail-item-time,
[data-theme="letterpress"] .mail-keys-key kbd,
[data-theme="letterpress"] .mail-list-group-count,
[data-theme="letterpress"] .mail-outgoing-label,
[data-theme="letterpress"] .mail-rail-label,
[data-theme="letterpress"] .mail-rail-more,
[data-theme="letterpress"] .mail-rail-newfolder,
[data-theme="letterpress"] .mail-reader-meta,
[data-theme="letterpress"] .mail-recipient-chip,
[data-theme="letterpress"] .mail-sendat,
[data-theme="letterpress"] .mail-shared-warn,
[data-theme="letterpress"] .mail-thread-message-time,
[data-theme="letterpress"] .work-action-label,
[data-theme="letterpress"] .work-assist-tab-label,
[data-theme="letterpress"] .work-briefing-label,
[data-theme="letterpress"] .work-browser-cell.is-kind,
[data-theme="letterpress"] .work-browser-cell.is-modified,
[data-theme="letterpress"] .work-browser-cell.is-modifiedBy,
[data-theme="letterpress"] .work-browser-cell.is-size,
[data-theme="letterpress"] .work-browser-filters .work-browser-filter,
[data-theme="letterpress"] .work-browser-head,
[data-theme="letterpress"] .work-browser-toggle-count,
[data-theme="letterpress"] .work-cal-chip-time,
[data-theme="letterpress"] .work-cal-col-day,
[data-theme="letterpress"] .work-cal-col-empty,
[data-theme="letterpress"] .work-cal-picker-day,
[data-theme="letterpress"] .work-cal-picker-dow,
[data-theme="letterpress"] .work-compose-file,
[data-theme="letterpress"] .work-compose-label,
[data-theme="letterpress"] .work-day,
[data-theme="letterpress"] .work-details-title,
[data-theme="letterpress"] .work-ev-field,
[data-theme="letterpress"] .work-evidence-quote,
[data-theme="letterpress"] .work-evidence-row,
[data-theme="letterpress"] .work-file-chip,
[data-theme="letterpress"] .work-files-strip-label,
[data-theme="letterpress"] .work-group-flag,
[data-theme="letterpress"] .work-group-meta,
[data-theme="letterpress"] .work-group-time,
[data-theme="letterpress"] .work-lang-code,
[data-theme="letterpress"] .work-lang-title,
[data-theme="letterpress"] .work-lens-note,
[data-theme="letterpress"] .work-more-count,
[data-theme="letterpress"] .work-people-head,
[data-theme="letterpress"] .work-permission-result,
[data-theme="letterpress"] .work-permission-scopes,
[data-theme="letterpress"] .work-pill,
[data-theme="letterpress"] .work-plan-step-act,
[data-theme="letterpress"] .work-plan-step-result,
[data-theme="letterpress"] .work-plan-step::before,
[data-theme="letterpress"] .work-popup-act,
[data-theme="letterpress"] .work-popup-keep,
[data-theme="letterpress"] .work-popup-sub,
[data-theme="letterpress"] .work-popup-thread-meta,
[data-theme="letterpress"] .work-post-flag,
[data-theme="letterpress"] .work-post-time,
[data-theme="letterpress"] .work-rte-font,
[data-theme="letterpress"] .work-rte-size,
[data-theme="letterpress"] .work-stream-addr,
[data-theme="letterpress"] .work-stream-time,
[data-theme="letterpress"] .work-tg-alldaylabel,
[data-theme="letterpress"] .work-tg-dayname,
[data-theme="letterpress"] .work-tg-ev-time,
[data-theme="letterpress"] .work-tg-ev-where,
[data-theme="letterpress"] .work-tg-hourlabel{
  font-size:12px;
}

@media (max-width: 600px) {
  [data-theme="letterpress"] .work-cal-chip-when{font-size:12px}
}


/* ------------------------------------------------------------------ */
/* FILES, DIALOGS, TABLES                                              */
/* .modal backdrop is set once, solid, in the POPUPS section above
   (--lp-scrim) — this used to be a second, LATER rule re-setting it back to
   a 28%-alpha see-through rgba, which silently won the cascade and was the
   actual live backdrop (confirmed on screen: the page behind a modal read
   clearly through the dimmed overlay). Removed rather than duplicated. */
[data-theme="letterpress"] .modal .mcard{
  background:var(--surface); border:var(--lp-rule); border-top:3px solid var(--ink);
  border-radius:0; box-shadow:none; padding:0;
}
[data-theme="letterpress"] .modal .mcard > h3{
  font-family:var(--display); font-size:19px; font-weight:600; color:var(--ink);
  padding:14px 18px 8px; margin:0; border-bottom:var(--lp-rule-soft);
}
/* YUM-1130: the keyboard-shortcuts sheet renders this subtitle inside `.mail-shell`, so it is Work
   metadata and the 12px bar applies to it. The rendered case opens that sheet and measures it. */
[data-theme="letterpress"] .modal .mcard > p.s{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); padding:8px 18px 0; margin:0;
}
[data-theme="letterpress"] .modal .mcard > *:not(h3):not(p.s){padding-left:18px;padding-right:18px}
[data-theme="letterpress"] .modal .mcard > *:last-child{padding-bottom:16px}
/* The first settings list directly under a modal title, with no group heading of its own: the
   title's rule already separates them, so the list's top rule would draw a second line.
   Only that first group; later groups keep their rule. */
[data-theme="letterpress"] .modal .mcard > h3 + div > :first-child > .setgroup:first-child{border-top:0}
[data-theme="letterpress"] .modal .mcard > .modal-close-btn,
[data-theme="letterpress"] .modal .mcard > .modal-maximize-btn{
  border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--mute);
  top:12px; width:26px; height:26px; min-width:26px;
}
[data-theme="letterpress"] .modal .mcard > .modal-close-btn{right:14px}
[data-theme="letterpress"] .modal .mcard > .modal-maximize-btn{right:44px}
[data-theme="letterpress"] .modal .mcard > .modal-close-btn:hover,
[data-theme="letterpress"] .modal .mcard > .modal-maximize-btn:hover{color:var(--accent);background:transparent}

[data-theme="letterpress"] .files-row,
[data-theme="letterpress"] .attachment-file-row{
  border:0; border-bottom:var(--lp-rule-soft); border-radius:0; background:transparent;
  min-height:var(--lp-row); padding:5px 2px;
}
[data-theme="letterpress"] .files-row:hover,
[data-theme="letterpress"] .attachment-file-row:hover{background:var(--surface-2)}
[data-theme="letterpress"] .files-row-name,
[data-theme="letterpress"] .attachment-file-name{font-family:var(--display);font-size:13.5px;color:var(--ink)}
[data-theme="letterpress"] .files-row-meta,
[data-theme="letterpress"] .attachment-file-info{
  /* YUM-1130: file metadata was 9.5px. */
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--mute);
}
[data-theme="letterpress"] .attachment-browser-folder{
  border:0; border-bottom:var(--lp-rule-soft); border-radius:0; background:transparent;
  font-family:var(--display); font-size:13.5px; min-height:26px;
}
[data-theme="letterpress"] .attachment-browser-folder.is-active{background:var(--ink);color:var(--on-ink)}
[data-theme="letterpress"] .attachment-browser-folder-count{font-family:var(--mono);font-size:12px}
[data-theme="letterpress"] .attach-upload-btn,
[data-theme="letterpress"] .attach-create-btn,
[data-theme="letterpress"] .attach-action-btn,
[data-theme="letterpress"] .canvas-action{
  border:var(--lp-rule); border-radius:0; background:transparent; box-shadow:none;
  font-family:var(--display); font-size:12.5px; color:var(--ink-2); padding:3px 10px;
}
[data-theme="letterpress"] .attach-upload-btn:hover:not(:disabled),
[data-theme="letterpress"] .attach-create-btn:hover:not(:disabled),
[data-theme="letterpress"] .attach-action-btn:hover,
[data-theme="letterpress"] .canvas-action:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
[data-theme="letterpress"] .attachment-search-input{
  border:0; border-bottom:var(--lp-rule); border-radius:0; background:transparent;
}

[data-theme="letterpress"] table{border-collapse:collapse}
[data-theme="letterpress"] th{
  font-family:var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); font-weight:500; text-align:left; background:transparent;
  border:0; border-bottom:var(--lp-rule); padding:5px 10px 5px 0;
}
[data-theme="letterpress"] td{
  border:0; border-bottom:var(--lp-rule-soft); padding:5px 10px 5px 0;
  font-family:var(--display); font-size:13px;
}
[data-theme="letterpress"] tbody tr:hover td{background:var(--surface)}

/* ------------------------------------------------------------------ */
/* the document window                                                 */
[data-theme="letterpress"] .canvas-pane,
[data-theme="letterpress"] .viewer-pane,
[data-theme="letterpress"] .docpv-card{
  border:var(--lp-rule); border-radius:0; background:var(--surface); box-shadow:none;
}
[data-theme="letterpress"] .canvas-head,
[data-theme="letterpress"] .viewer-head,
[data-theme="letterpress"] .docpv-head{
  background:transparent; border-bottom:var(--lp-rule); padding:8px 12px;
}
[data-theme="letterpress"] .canvas-title strong{
  font-family:var(--display); font-size:14px; font-weight:600; color:var(--ink);
}
[data-theme="letterpress"] .canvas-title small,
[data-theme="letterpress"] .docpv-sub{
  font-family:var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute);
}
[data-theme="letterpress"] .canvas-icon-btn{
  border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--mute);
  width:26px; height:26px;
}
[data-theme="letterpress"] .canvas-icon-btn:hover{color:var(--accent);background:transparent}

/* ------------------------------------------------------------------ */
/* apps                                                                */
[data-theme="letterpress"] .apps-row{
  border:0; border-bottom:var(--lp-rule-soft); border-radius:0; background:transparent;
  padding:8px 2px;
}
/* YUM-1120, reported 2026-09-09 at 390x844: the Apps sheet began at x=-53 and
   its row text at x=-31, clipping names and descriptions although the document
   was 390 wide. `.apps-view` (app-extensions.css) is a flex COLUMN item and this
   rule centres it with `margin:0 auto`; an auto margin on the cross axis cancels
   the stretch, so the sheet sized itself to its widest row and ran past the
   viewport, taking the Open/Install controls with it. `width:100%` takes the
   column's width back, `min-width:0` lets it shrink, and the measure, the
   centring and the gutter are unchanged; a long unbreakable token breaks. */
[data-theme="letterpress"] .apps-row-name{font-family:var(--display);font-size:14px;font-weight:600;overflow-wrap:anywhere}
[data-theme="letterpress"] .apps-row-sub,
[data-theme="letterpress"] .apps-row-hint{
  /* YUM-1130: app descriptions/subtitles were 9.5px. */
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--mute); overflow-wrap:anywhere;
}
[data-theme="letterpress"] .apps-view{width:100%;min-width:0;max-width:var(--lp-measure);margin:0 auto;padding:0 20px;box-sizing:border-box}

/* ------------------------------------------------------------------ */
/* two things the first pass got wrong, seen on screen 2026-08-22:      */
/* the composer drew a red RECTANGLE around the field when focused,    */
/* which reads as an error state — focus is a single inked rule; and   */
/* the assistant's reply carried both an outer box and an accent rule, */
/* which is the boxes-instead-of-rules habit this design rejects.      */
[data-theme="letterpress"] .box{
  border:0; border-radius:var(--r-pill); box-shadow:none;
  background:color-mix(in srgb,var(--ink) 5%,var(--surface)); padding:6px 2px;
}
[data-theme="letterpress"] .yb-b-input{background:color-mix(in srgb,var(--ink) 5%,var(--surface))}
[data-theme="letterpress"] .box:focus-within{
  border-bottom-color:var(--ink); box-shadow:none; outline:none;
}
[data-theme="letterpress"] .box textarea,
[data-theme="letterpress"] .box textarea:focus{
  outline:none; box-shadow:none; border:0; background:transparent;
  font-family:var(--display); font-size:14px;
}
[data-theme="letterpress"] .compwrap{
  border:0; background:transparent; padding:10px 20px 14px;
  max-width:var(--lp-wide); margin:0 auto;
}
[data-theme="letterpress"] .hint{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin-top:6px;
}
[data-theme="letterpress"] .send{
  background:var(--ink); color:var(--on-ink); border:0; border-radius:0;
  width:30px; height:30px;
}
[data-theme="letterpress"] .send:hover{background:var(--accent);color:var(--on-accent)}
[data-theme="letterpress"] .send:disabled{background:transparent;color:var(--faint);border:var(--lp-rule)}

/* the reply is a column of type with one accent rule at its edge — no outer box */
[data-theme="letterpress"] .row.yarnball .bub{
  background:transparent; border:0; border-left:2px solid var(--accent);
  padding:0 0 0 14px; box-shadow:none;
}
[data-theme="letterpress"] .row .bub{max-width:min(72ch,100%)}

/* ================================================================== */
/* UI polish 2026-10-13: settings, modals, workspace picker            */
/* ================================================================== */

/* ---- modal shell: paper card, hairline frame, no shadows ---- */
[data-theme="letterpress"] .modal .mcard{
  border:var(--lp-rule-hard); border-top:3px solid var(--ink);
  padding:0; background:var(--surface);
}
[data-theme="letterpress"] .modal .mcard > h3{
  padding:16px 22px 10px; margin:0; border-bottom:var(--lp-rule);
  font-family:var(--display); font-size:20px; font-weight:600;
}
[data-theme="letterpress"] .modal .mcard > p.s{
  padding:10px 22px 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin:0;
}
[data-theme="letterpress"] .modal .mcard > *:not(h3):not(p.s){padding-left:22px;padding-right:22px}
[data-theme="letterpress"] .modal .mcard > *:last-child{padding-bottom:20px}

/* ---- settings: group cards with quiet rules ---- */
[data-theme="letterpress"] .settings-home .setgh,
[data-theme="letterpress"] .settings-wrap .setgh{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute); padding:18px 2px 8px;
  border-bottom:var(--lp-rule-soft); margin-bottom:2px;
}
[data-theme="letterpress"] .setlink{
  border-bottom:var(--lp-rule-soft); border-radius:0; background:transparent;
  box-shadow:none; min-height:52px; padding:10px 2px;
  /* Background only — no layout shift on hover. A moving row is the kind of
     motion prefers-reduced-motion asks to avoid, so it does not get one. */
  transition:background 0.12s ease;
}
[data-theme="letterpress"] .setlink:hover{
  background:var(--surface-2);
}
[data-theme="letterpress"] .setlink .sl-l{
  font-family:var(--display); font-size:15px; font-weight:600; color:var(--ink);
}
[data-theme="letterpress"] .setlink .sl-v{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--mute); margin-top:2px;
}
[data-theme="letterpress"] .setlink .sl-ic{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:var(--lp-rule); border-radius:0; background:transparent; color:var(--ink-2);
}
[data-theme="letterpress"] .setlink .sl-ch{color:var(--faint)}
[data-theme="letterpress"] .setlink.is-disabled{opacity:.5}

/* ---- workspace picker: kind cards, not a button row ---- */
/* Theme-scoped like the rest of this file; tokens are the shared ones so the
   picker stays legible if the app ever renders under another skin. */
[data-theme="letterpress"] .mcard:has(.yb-ws-picker){max-width:440px}
[data-theme="letterpress"] .yb-ws-picker{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:6px 0 4px}
[data-theme="letterpress"] .yb-ws-kind{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 10px 14px; border:1px solid var(--line); border-radius:0;
  background:transparent; cursor:pointer; text-align:center;
  font-family:var(--ui); font-size:13px; font-weight:600; color:var(--ink);
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
[data-theme="letterpress"] .yb-ws-kind:hover{
  background:var(--accent-soft); border-color:var(--accent);
}
@media (prefers-reduced-motion: no-preference){
  [data-theme="letterpress"] .yb-ws-kind:hover{transform:translateY(-2px)}
}
[data-theme="letterpress"] .yb-ws-kind-ic{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ink); border-radius:0; color:var(--accent);
}
[data-theme="letterpress"] .yb-ws-kind-about{
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  color:var(--mute); line-height:1.4;
}

@media (prefers-reduced-motion: reduce){
  [data-theme="letterpress"] .yb-ws-kind{transition:none}
}

/* ---- feedback modal: drop the shouty mono, make it a real form ---- */
[data-theme="letterpress"] .mcard:has(.feedback-preview-box){max-width:520px}
[data-theme="letterpress"] .feedback-status{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin:6px 0 10px;
}
[data-theme="letterpress"] .feedback-preview-box{
  border:var(--lp-rule); border-radius:0; background:var(--surface-2);
  padding:10px 14px; margin-bottom:12px;
}
[data-theme="letterpress"] .feedback-kicker{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); margin:0 0 6px;
}
[data-theme="letterpress"] .feedback-console-tail{
  font-family:var(--mono); font-size:11px; color:var(--mute); background:transparent;
  border:0; border-left:2px solid var(--line); padding:4px 0 4px 10px;
}
[data-theme="letterpress"] .feedback-consent-row{
  font-family:var(--ui); font-size:13px; color:var(--ink-2); margin-bottom:12px;
}
[data-theme="letterpress"] .submit{
  border:0; border-radius:0; background:var(--accent); color:var(--on-accent);
  font-family:var(--display); font-weight:600; letter-spacing:.02em;
}
[data-theme="letterpress"] .submit:hover{background:var(--ink); color:var(--on-ink)}

/* ---- automations modal: tidy list rows and run history cards ---- */
[data-theme="letterpress"] .automations-modal-body .setgh{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute); padding:14px 2px 6px;
  border-bottom:var(--lp-rule-soft); margin-bottom:4px;
}
[data-theme="letterpress"] .automations-modal-body .srv{
  border:var(--lp-rule-soft); border-radius:0; background:var(--surface);
  padding:10px 12px; margin-bottom:6px;
}
[data-theme="letterpress"] .automations-modal-body .srv.action-row{
  border:0; border-bottom:var(--lp-rule-soft); border-radius:0;
}
[data-theme="letterpress"] .automation-form-card{
  border:var(--lp-rule); border-radius:0; background:var(--surface-2); padding:12px 14px;
}
[data-theme="letterpress"] .automations-modal-body .automation-select{
  border:var(--lp-rule); border-radius:0; background:var(--surface);
}
[data-theme="letterpress"] .automations-modal-body .x{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:color 0.12s ease;
}
[data-theme="letterpress"] .automations-modal-body .x:hover{color:var(--accent)}
[data-theme="letterpress"] .mcard:has(.automations-modal-body){max-width:600px}

/* ---- connections: icon-first grid, custom MCP tile ---- */
[data-theme="letterpress"] .mcp-directory-grid{
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px;
}
[data-theme="letterpress"] .mcp-symbol-card{
  border:var(--lp-rule); border-radius:0; background:transparent;
  padding:14px 6px 10px; gap:8px;
}
[data-theme="letterpress"] .mcp-symbol-card:hover{
  border-color:var(--accent); background:var(--accent-soft);
}
@media (prefers-reduced-motion: no-preference){
  [data-theme="letterpress"] .mcp-symbol-card:hover{transform:translateY(-2px)}
}
[data-theme="letterpress"] .mcp-symbol-icon{
  width:28px; height:28px;
}
[data-theme="letterpress"] .mcp-symbol-icon svg{width:24px; height:24px}
[data-theme="letterpress"] .mcp-symbol-name{
  font-family:var(--display); font-size:11px; font-weight:600; color:var(--ink);
}
[data-theme="letterpress"] .mcp-symbol-note{
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute);
}
/* the custom MCP "add" tile */
[data-theme="letterpress"] .mcp-symbol-card.mcp-add-tile{
  border-style:dashed; border-color:var(--line);
}
[data-theme="letterpress"] .mcp-symbol-card.mcp-add-tile:hover{
  border-color:var(--accent); background:var(--accent-soft);
}
[data-theme="letterpress"] .mcp-symbol-card.mcp-add-tile .mcp-symbol-icon{
  color:var(--accent); font-family:var(--mono); font-size:22px; font-weight:300;
}

/* ---- account / security / skills / help: consistent section rhythm ---- */
[data-theme="letterpress"] .settings-home .account-card,
[data-theme="letterpress"] .account-card{
  border:0; border-top:var(--lp-rule); border-radius:0; background:transparent;
  padding:14px 0;
}
[data-theme="letterpress"] .setlink-danger{
  border:var(--lp-rule); border-radius:0; padding:10px 12px; margin-top:8px;
}
[data-theme="letterpress"] .setlink-danger .setlink{border-bottom:0}
[data-theme="letterpress"] .ds-notice{
  border:var(--lp-rule-soft); border-left:2px solid var(--accent);
  border-radius:0; background:transparent; padding:10px 14px;
  font-family:var(--ui); font-size:13px; color:var(--ink-2);
}
/* Notification center (2026-10-16): the bell's panel takes the same popover card as the Chats
   menu, not the theme's 1px ink frame. */
[data-theme="letterpress"] .yb-bell-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--shadow);
}