/* letterpress.css — Yarnball CDS theme "Letterpress". THE DEFAULT (Ben, 2026-08-22).
   Yarnball's own serif and brick red taken seriously: paper, ink, hairline rules, and
   not one shadow anywhere. Rules instead of boxes, weight instead of colour. Dense and
   quiet — a document you work in rather than an app that performs at you.

   Same contract as xp.css and USELESS TO BREAK IT: this is a THEME, not app styling.
   Every selector carries [data-theme="letterpress"]; Unison, Night, Enclave, XP and the
   other skins are untouched. It restyles DS classes that already exist — no app file
   gains a style attribute, a utility class, or a theme-specific class name.

   Tokens alone do not move the shell far enough (the Unison layer hardcodes pill radii
   and soft shadows in several components), so this file owns the element layer below the
   token block too, exactly as xp.css does.

   On the red: Yarnball's --accent is #B23A34 and it is SCARCE by brand rule — it marks
   the brand, the primary action, and the one thing on a screen that is live. It is never
   a decorative wash. Nothing here uses green; green is reserved for the enclave theme. */

/* ------------------------------------------------------------------ */
/* tokens                                                              */
[data-theme="letterpress"]{
  --bg:#F2EDE4; --bg-2:#E6DCC9; --surface:#FBF8F2; --surface-2:#F2EDE4;
  --ink:#14110E; --ink-2:#2E271F; --mute:#6B5F51; --faint:#8C8072;
  --line:#CDBFA8; --line-soft:#DFD5C3;
  --accent:#B23A34; --accent-soft:#F0E2DF; --teal:#B23A34; --trust-green:#4A6B45;
  --on-accent:#FBF8F2; --on-ink:#F2EDE4;
  --paper:#FBF8F2; --paper-2:#F2EDE4; --ink-soft:#2E271F;

  /* Yarnball's real faces. --ui and --display are both the serif; the mono is for
     labels, figures and anything the reader scans rather than reads. */
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --ui:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-body-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Print has corners, not radii. */
  --r:0px; --r-sm:0px; --r-xs:0px; --r-pill:0px;
  --shadow:none; --shadow-sm:none;

  /* theme-private recipes */
  --lp-rule:1px solid var(--line);
  --lp-rule-hard:1px solid var(--ink);
  --lp-label:.72rem/1.2 var(--mono);
}

/* ------------------------------------------------------------------ */
/* ground                                                              */
/* The height chain must be carried explicitly or a full-height window design
   collapses to its own content height (xp.css hit this; noted by the XP lane
   2026-08-22). Root, body and #root all need it. */
[data-theme="letterpress"]{ height:100%; }
[data-theme="letterpress"] #root{ height:100%; display:flex; flex-direction:column; min-height:0; }
[data-theme="letterpress"] body{
  height:100%; min-height:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ui);
  /* Paper has a grain. One hairline repeat, almost subliminal — it stops the flat
     cream reading as a default off-white. */
  background-image:repeating-linear-gradient(0deg,rgba(20,17,14,.016) 0 1px,transparent 1px 3px);
}

/* ------------------------------------------------------------------ */
/* brand + headings                                                    */
[data-theme="letterpress"] .brand,
[data-theme="letterpress"] .mark{
  font-family:var(--display); font-weight:700; letter-spacing:-.012em; color:var(--ink);
}
[data-theme="letterpress"] .greet{
  font-family:var(--display); font-weight:400; letter-spacing:-.015em; color:var(--ink);
}

/* ------------------------------------------------------------------ */
/* buttons — outlined by default, the primary one solid in the brick   */
[data-theme="letterpress"] .btn{
  background:transparent; color:var(--ink);
  border:1px solid var(--ink); border-radius:0;
  font-family:var(--ui); box-shadow:none;
  transition:background .12s ease,color .12s ease;
}
[data-theme="letterpress"] .btn:hover{ background:var(--bg-2); }
[data-theme="letterpress"] .btn:active{ background:var(--ink); color:var(--on-ink); }
[data-theme="letterpress"] .btn.active{ background:var(--ink); color:var(--on-ink); }
[data-theme="letterpress"] .btn.solid{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
[data-theme="letterpress"] .btn.solid:hover{ background:#9B302B; border-color:#9B302B; }
[data-theme="letterpress"] .btn-danger{
  background:transparent; border-color:var(--accent); color:var(--accent);
}
[data-theme="letterpress"] .btn-link{
  background:transparent; border:0; color:var(--accent);
  text-decoration:underline; text-underline-offset:2px;
}
[data-theme="letterpress"] .icbtn,
[data-theme="letterpress"] .gbtn{
  background:transparent; border:1px solid var(--line); border-radius:0; color:var(--ink);
  box-shadow:none;
}
[data-theme="letterpress"] .icbtn:hover,
[data-theme="letterpress"] .gbtn:hover{ background:var(--bg-2); border-color:var(--ink); }

/* ------------------------------------------------------------------ */
/* fields — a rule under the text, the way a form is printed.
   .fld is the label+input WRAPPER, not the input: giving it a border too would
   draw a second box around every field (XP lane, 2026-08-22). The rule belongs
   on .box alone; .fld only carries type. */
[data-theme="letterpress"] .fld{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  font-family:var(--ui); color:var(--mute);
}
[data-theme="letterpress"] .box{
  background:transparent; border:0; border-bottom:1.5px solid var(--ink);
  border-radius:0; box-shadow:none; color:var(--ink);
}
[data-theme="letterpress"] .box:focus-within{
  border-bottom-color:var(--accent); box-shadow:none; outline:none;
}

/* ------------------------------------------------------------------ */
/* cards, tiles, modals — hairline boxes, never shadowed               */
[data-theme="letterpress"] .mcard,
[data-theme="letterpress"] .conntile,
[data-theme="letterpress"] .account-card{
  background:var(--surface); border:1px solid var(--ink); border-radius:0; box-shadow:none;
}
[data-theme="letterpress"] .modal{
  background:var(--surface); border:1px solid var(--ink); border-radius:0; box-shadow:none;
}
[data-theme="letterpress"] .modal-head{
  background:var(--surface); border-bottom:1px solid var(--ink); border-radius:0;
}
[data-theme="letterpress"] .modal-title{
  font-family:var(--display); font-weight:700; color:var(--ink);
}
[data-theme="letterpress"] .mclosebtn{ background:transparent; border:0; color:var(--mute); }
[data-theme="letterpress"] .mclosebtn:hover{ color:var(--accent); }

/* ------------------------------------------------------------------ */
/* chat — the reader's own words sit in the margin, tinted; the        */
/* assistant's sit on the page itself. No bubbles.                     */
[data-theme="letterpress"] .row,
[data-theme="letterpress"] .bub{
  background:transparent; border-radius:0; box-shadow:none;
  font-family:var(--ui); color:var(--ink);
}
[data-theme="letterpress"] .row.me .bub{
  background:var(--bg-2); border-left:2.5px solid var(--ink); padding-left:10px;
}
[data-theme="letterpress"] .row.yarnball .bub{
  background:transparent; border-left:2.5px solid var(--accent); padding-left:10px;
}
[data-theme="letterpress"] .compwrap{
  background:var(--surface); border:1px solid var(--ink); border-radius:0; box-shadow:none;
}

/* ------------------------------------------------------------------ */
/* left rail                                                           */
[data-theme="letterpress"] .chat-nav-panel{
  background:transparent; border-right:1px solid var(--line); border-radius:0; box-shadow:none;
}
[data-theme="letterpress"] .chat-nav-panel-label{
  font:var(--lp-label); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); border-bottom:1px solid var(--line-soft); padding-bottom:4px;
}
[data-theme="letterpress"] .chat-nav-panel-item{
  background:transparent; border-radius:0; color:var(--ink);
  border-left:2.5px solid transparent;
}
[data-theme="letterpress"] .chat-nav-panel-item:hover{
  background:var(--bg-2); border-left-color:var(--line);
}
[data-theme="letterpress"] .chat-nav-panel-item-title{ font-family:var(--ui); color:var(--ink); }
[data-theme="letterpress"] .chat-nav-panel-item-time{
  font-family:var(--mono); font-size:.72rem; color:var(--mute);
}

/* ------------------------------------------------------------------ */
/* tabs — a rule under the set, the live one carrying the brick        */
[data-theme="letterpress"] .atabs{
  background:transparent; border-bottom:1px solid var(--line); border-radius:0; gap:0;
}
[data-theme="letterpress"] .atab{
  background:transparent; border:0; border-radius:0; color:var(--mute);
  font-family:var(--ui); border-bottom:2px solid transparent; margin-bottom:-1px;
}
[data-theme="letterpress"] .atab.active{ color:var(--ink); border-bottom-color:var(--accent); }

/* ------------------------------------------------------------------ */
/* the model switch — a printed toggle, not a glossy pill              */
[data-theme="letterpress"] .model-toggle-track{
  background:var(--bg-2); border:1px solid var(--ink); border-radius:0; box-shadow:none;
}
[data-theme="letterpress"] .model-toggle-knob{
  background:var(--ink); border-radius:0; box-shadow:none;
}
[data-theme="letterpress"] .model-toggle-pill{
  border-radius:0; border:1px solid var(--line); background:transparent;
  font:var(--lp-label); letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
}
[data-theme="letterpress"] .model-toggle-side{
  font:var(--lp-label); letter-spacing:.08em; text-transform:uppercase; color:var(--mute);
}
[data-theme="letterpress"] .model-toggle-side.is-current{ color:var(--ink); }
[data-theme="letterpress"] .model-lock-standalone{
  background:transparent; border:1px solid var(--line); border-radius:0;
  font:var(--lp-label); letter-spacing:.08em; text-transform:uppercase; color:var(--mute);
}
[data-theme="letterpress"] .model-lock-standalone.is-ok{
  border-color:var(--accent); color:var(--accent);
}

/* ------------------------------------------------------------------ */
/* small print                                                         */
[data-theme="letterpress"] .hint{ color:var(--mute); font-family:var(--ui); }
[data-theme="letterpress"] .app-footer{
  background:transparent; border-top:1px solid var(--line);
}
[data-theme="letterpress"] .app-footer-text{
  font:var(--lp-label); letter-spacing:.08em; color:var(--mute);
}

/* Keyboard focus has to survive a theme with no shadows and no fills. */
[data-theme="letterpress"] :focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ------------------------------------------------------------------ */
/* Work's chat column is 348px wide, and this skin's serif runs wider than
   the base UI face: the composer placeholder wrapped to a second line that the
   single-line textarea then clipped mid-glyph (seen on the ben lane with a real
   mailbox, 2026-08-22). Reserve the second line in that column only — the
   textarea still grows normally once someone types. */
[data-theme="letterpress"] .work-chat .box{
  align-items:flex-start; padding-top:6px; padding-bottom:6px;
}
[data-theme="letterpress"] .work-chat .box textarea{
  font-size:13px; line-height:1.35; min-height:2.8em; padding:2px 0;
}
[data-theme="letterpress"] .work-chat .send{align-self:flex-start}