/* 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:9px; 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:9.5px;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:9.5px; 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:9.5px; 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:9.5px; 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}

/* 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:9.5px; 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:9.5px; 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:9px; 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:9.5px; 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"] .ctx-chip,
[data-theme="letterpress"] .memchip{
  font-family:var(--mono); font-size:9px; 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. */
[data-theme="letterpress"] .chat-nav-panel{
  background:var(--surface); border:1px solid var(--ink); border-radius:0;
  box-shadow:none;
}
[data-theme="letterpress"] .attach-menu,
[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. */
[data-theme="letterpress"]{ --lp-scrim:#2A241C; }
[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:#8C8072; --work-rail-hover:#E3D9C6;
  --work-rail-active-bg:#14110E; --work-rail-active-ink:#F2EDE4; --work-dim:#6B5F51;
}
[data-theme="letterpress"] .mail-rail{border-right:var(--lp-rule)}
[data-theme="letterpress"] .mail-rail-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint);
}
[data-theme="letterpress"] .mail-folder,
[data-theme="letterpress"] .work-source{
  border-radius:0; font-family:var(--display); font-size:13.5px; min-height:26px;
}
[data-theme="letterpress"] .mail-folder-count{font-family:var(--mono);font-size:9.5px}
[data-theme="letterpress"] .mail-flag{
  font-family:var(--mono); font-size:8.5px; 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}
[data-theme="letterpress"] .mail-reader-meta,
[data-theme="letterpress"] .mail-reader-meta-addr{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--mute);
}
[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}

/* ------------------------------------------------------------------ */
/* 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);
}
[data-theme="letterpress"] .modal .mcard > p.s{
  font-family:var(--mono); font-size:9.5px; 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}
[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{
  font-family:var(--mono); font-size:9.5px; 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:9.5px}
[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:9.5px; 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:9px; 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;
}
[data-theme="letterpress"] .apps-row-name{font-family:var(--display);font-size:14px;font-weight:600}
[data-theme="letterpress"] .apps-row-sub,
[data-theme="letterpress"] .apps-row-hint{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--mute);
}
[data-theme="letterpress"] .apps-view{max-width:var(--lp-measure);margin:0 auto;padding:0 20px}

/* ------------------------------------------------------------------ */
/* 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-bottom:1.5px solid var(--line); border-radius:0; box-shadow:none;
  background:transparent; padding:6px 2px;
}
[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; border-top:var(--lp-rule); 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%)}