/* ==========================================================================
   Scribe — site-wide stylesheet. "Ancient scribe" theme: parchment, sepia
   ink, aged paper. No build chain, no frameworks, no external assets —
   texture is CSS gradients only.
   ========================================================================== */

/* 0. Self-hosted fonts (SIL OFL, see fonts/OFL-NOTICE.txt) ----------------
   Cardo: Old Style body face for classicists/medievalists.
   Almendra: literature accent face after 10th-century European scripts.
   (The sidebar wordmark is a static SVG, not a webfont — see the note in
   fonts/OFL-NOTICE.txt for why: its source is a commercial font that
   can't be redistributed as an embeddable @font-face on this app's
   unauthenticated /static/.)                                          */
@font-face { font-family: 'Cardo'; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/cardo-400.woff2") format("woff2"); }
@font-face { font-family: 'Cardo'; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/cardo-700.woff2") format("woff2"); }
@font-face { font-family: 'Cardo'; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/cardo-400italic.woff2") format("woff2"); }
@font-face { font-family: 'Almendra'; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/almendra-400.woff2") format("woff2"); }
@font-face { font-family: 'Almendra'; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/almendra-700.woff2") format("woff2"); }
@font-face { font-family: 'Almendra'; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/almendra-400italic.woff2") format("woff2"); }
@font-face { font-family: 'Almendra'; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/almendra-700italic.woff2") format("woff2"); }

/* 1. Palette, type, spacing, radii — every knob lives here ---------------- */
:root {
  /* parchment surfaces — sampled from the reference (warm saturated tan) */
  --parchment:       #d8bd97;  /* page background */
  --parchment-deep:  #cbad7e;  /* sidebar, recessed panels */
  --parchment-sheet: #e7d3ad;  /* cards: a shade lighter than the page */
  --parchment-white: #f0e4c6;  /* inputs, textareas */

  /* ink & sepia */
  --ink:         #3b2a1a;  /* primary text */
  --ink-soft:    #6b5439;  /* secondary / muted text */
  --sepia:       #8a6d4b;  /* borders, mid-tone rules */
  --sepia-light: #cdb98f;  /* faint borders, hairlines */
  --sepia-deep:  #4a3320;  /* strong borders, headings on light */

  /* accents & semantic colors */
  --accent:      #7a3b2e;  /* wax-seal brown-red: links, primary actions, focus */
  --accent-dark: #5e2c22;
  --red:         #7c2d20;  --red-deep:   #5c1f16;  /* danger / error */
  --amber:       #b9852f;  --amber-deep: #8a611c;  /* active / in-progress / warn */
  --green:       #5c6e3f;  --green-deep: #46512f;  /* done / muted success */
  --blue:        #3d5a73;                          /* needs-attention chip */

  /* login desk backdrop */
  --desk-dark: #241708;
  --desk-mid:  #3a2513;

  /* leather sidebar & gilt lettering — sampled from the reference */
  --leather:      #362618;  /* sidebar base (warm dark brown) */
  --leather-deep: #241811;  /* sidebar shadow tone */
  --leather-hi:   #48351f;  /* sidebar raised tone */
  --gold:         #d3a950;  /* gilt wordmark / active nav */
  --gold-soft:    #c4a266;  /* gilt body text on leather */
  --gold-dim:     #9a8150;  /* muted gilt: meta, rules */
  --parch-on-dark:#ead9b1;  /* readable parchment text on leather */

  /* procedural grain (img-src 'self' data: — self-contained, no files) */
  --parchment-grain:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.7%27%20numOctaves%3D%274%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.29%200%200%200%200%200.20%200%200%200%200%200.11%200.42%200.36%200.26%200%20-0.14%27%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%27m%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.013%27%20numOctaves%3D%272%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.29%200%200%200%200%200.20%200%200%200%200%200.11%200.55%200.45%200.32%200%20-0.33%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27%20opacity%3D%270.55%27%2F%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23m%29%27%20opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E");
  --leather-grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55 0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)' opacity='0.09'/%3E%3C/svg%3E");

  /* type */
  --font-serif: 'Almendra', Georgia, 'Times New Roman', Times, serif;
  --font-body:  'Cardo', Georgia, 'Times New Roman', Times, serif;
  --font-mono:  'Courier New', Courier, monospace;

  /* spacing scale */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2.25rem;

  /* radii, shadows, motion */
  --radius-sm: 4px; --radius: 6px; --radius-lg: 10px;
  --shadow-card:  0 1px 2px rgba(59,42,26,.10), 0 4px 12px rgba(59,42,26,.10);
  --shadow-sheet: 0 12px 40px rgba(15,9,4,.45);
  --shadow-inset: inset 0 1px 4px rgba(59,42,26,.25);
  --transition: 150ms ease;
}

/* 2. Reset & base elements ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* html only, NOT body: html,body{height:100%} caps body's box at the
   viewport, which leaves aside.sidebar's position:sticky no room to stick
   once main.content (a long transcript) grows taller than 100vh — it just
   scrolls away with the page. Both body variants already set their own
   min-height:100vh, which is the right property for this (floor, not cap). */
html { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--sepia-deep);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}
h1 { font-size: 1.75rem; letter-spacing: .01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p { margin: 0 0 var(--space-3); }

a { color: var(--accent); text-decoration-color: rgba(122,59,46,.4); text-underline-offset: 2px; transition: color var(--transition); }
a:hover { color: var(--accent-dark); }
hr { border: none; border-top: 1px solid var(--sepia-light); margin: var(--space-4) 0; }

::selection { background: var(--amber); color: #2a1c0d; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--parchment-deep); }
::-webkit-scrollbar-thumb { background: var(--sepia-light); border-radius: 6px; border: 2px solid var(--parchment-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--sepia); }

mark { background: var(--amber); color: #2a1c0d; padding: 0 .15em; border-radius: 2px; }
mark.current { background: var(--amber-deep); color: var(--parchment); box-shadow: 0 0 0 2px var(--accent); }
.hidden { display: none !important; }
.hint { font-size: .85rem; color: var(--ink-soft); font-style: italic; }

/* 3. App shell — fixed sidebar + main content grid ------------------------ */
body.app-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  background-color: var(--parchment);
  /* one calculated, non-tiling paper sheet stretched over the viewport */
  background-image: url("/static/paper-tex.avif");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
main.content {
  position: relative; padding: var(--space-6) var(--space-5); width: 100%;
  /* the leather rail casts a soft brown shadow across the sheet (no hard edge —
     the parchment flows continuously from the nav), and the sheet darkens
     gently toward its edges (aged vignette) */
  box-shadow: inset 22px 0 26px -18px rgba(40,24,10,.55),
              inset 0 18px 30px -22px rgba(74,51,32,.4),
              inset 0 -60px 80px -60px rgba(74,51,32,.35);
}
/* engraved corner flourishes at the four corners of the content sheet */
main.content::before {
  content: ""; position: absolute; inset: 14px; pointer-events: none; z-index: 0;
  background-image:
    url("/static/corner-tl.svg"), url("/static/corner-tr.svg"),
    url("/static/corner-bl.svg"), url("/static/corner-br.svg");
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: 42px 42px; opacity: .6;
}
main.content > * { max-width: 1160px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
main.content > h1 { position: relative; z-index: 1; margin-bottom: var(--space-3); }
/* compact flourish tucked under the page title */
main.content > h1::after {
  content: ""; display: block; width: 188px; height: 15px; margin-top: 9px;
  background: url("/static/divider-flourish.svg") no-repeat left center / contain;
  opacity: .8;
}
/* wax seal pressed onto the bottom-right corner of a content block */
.page-seal {
  max-width: 900px; margin: 0 auto; height: 0; position: relative;
}
.page-seal::after,
#summaryCard::after {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  right: -22px; bottom: -44px; width: 134px; height: 125px;
  background: url("/static/wax-seal.avif") no-repeat center / contain;
  filter: drop-shadow(0 6px 11px rgba(20,10,4,.5));
}
/* on the recording page the seal presses onto the summary itself, not the
   page's last (discard) card — so suppress the page-bottom seal when present */
.content:has(#summaryCard) .page-seal { display: none; }
/* The seal overhangs into the next card; lift the summary card's whole
   stacking context above sibling cards (all .card have z-index:1) so the
   seal paints on top of the following card instead of being clipped by it. */
#summaryCard { z-index: 5; }

/* 4. Sidebar --------------------------------------------------------------- */
aside.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  background-color: var(--leather);
  background-image:
    var(--leather-grain),
    radial-gradient(ellipse at 50% 40%, rgba(90,58,30,.30), transparent 70%),
    linear-gradient(160deg, var(--leather-hi), var(--leather) 45%, var(--leather-deep));
  border-right: 1px solid #000;
  box-shadow:
    inset 0 0 44px rgba(255,220,160,.05),
    inset 0 0 70px rgba(0,0,0,.55),
    inset -6px 0 14px rgba(0,0,0,.5);
  overflow: hidden;
}
.brand {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5) var(--space-3);
  flex: 0 0 auto;
  /* gilt flourish beneath the wordmark instead of a hard rule */
  background: url("/static/divider-flourish-gold.svg") no-repeat center bottom 8px / 132px auto;
}
/* feather.svg already has its own gilt gradient baked in — no CSS recolor
   filter needed (or wanted: it would muddy the gradient's own colors). */
.brand .mark { display: block; width: 46px; height: 76px; flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
/* "Scribe", traced from Aquitania Script (Alan Meeks) to static SVG paths
   (solid #bb9767 fill + faint dark outline baked into the path, matching
   the reference art) — see fonts/OFL-NOTICE.txt for why this is a vector
   image rather than a @font-face. Pulled in over the feather's tip per
   the reference composition, instead of sitting a flex-gap away from it. */
.brand .wordmark { display: block; width: 202px; height: auto; flex: 0 0 auto;
  margin-left: -18px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

nav.menu { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: var(--space-3) var(--space-3) var(--space-4); margin: var(--space-2) var(--space-2) var(--space-1); flex: 0 0 auto; }
/* the nav sits inside its own engraved frame, echoing the section cards */
nav.menu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border: 1px solid rgba(201,164,78,.20); border-radius: 4px;
  background-image:
    url("/static/corner-tl-gold.svg"), url("/static/corner-tr-gold.svg"),
    url("/static/corner-bl-gold.svg"), url("/static/corner-br-gold.svg");
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: 24px 24px; opacity: .85;
}
nav.menu a {
  position: relative;
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .8rem; border-radius: var(--radius-sm);
  color: var(--gold-soft); text-decoration: none; font-size: 1rem;
  font-family: var(--font-serif); letter-spacing: .01em;
  border-left: 3px solid transparent;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
/* engraved gilt nav icons — masked so they inherit the link's text colour
   (gold-soft → gold on hover/active) with no per-state icon files */
nav.menu a::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--nav-ic) center / contain no-repeat;
          mask: var(--nav-ic) center / contain no-repeat;
}
nav.menu a[href="/capture"]    { --nav-ic: url("/static/feather.svg"); }
nav.menu a[href="/recordings"] { --nav-ic: url("/static/icon-recordings.svg"); }
nav.menu a[href="/projects"]   { --nav-ic: url("/static/icon-projects.svg"); }
nav.menu a[href="/emails"]     { --nav-ic: url("/static/icon-emails.svg"); }
nav.menu a[href="/tasks"]      { --nav-ic: url("/static/icon-tasks.svg"); }
nav.menu a[href="/ask"]        { --nav-ic: url("/static/icon-ask.svg"); }
nav.menu a[href="/status"]     { --nav-ic: url("/static/icon-status.svg"); }
nav.menu a[href="/settings"]   { --nav-ic: url("/static/icon-settings.svg"); }
nav.menu a:hover { background: rgba(201,164,78,.10); color: var(--gold); }
/* active item = a torn parchment label with soft feathered edges pinned to
   the leather; dark ink text + icon read on the light surface */
nav.menu a.active { color: var(--sepia-deep); border-left-color: transparent; font-weight: 700; text-shadow: none; }
nav.menu a.active::after {
  content: ""; position: absolute; inset: -2px -4px; z-index: -1;
  border-radius: 9px;
  background:
    radial-gradient(125% 135% at 50% 45%, #f2e6ca 44%, #e7d3ad 66%, rgba(231,211,173,.5) 84%, rgba(231,211,173,0) 100%);
  box-shadow: 0 1px 5px rgba(0,0,0,.32);
}

.sidebar-title {
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .10em;
  color: var(--gold-dim); font-variant: small-caps; flex: 0 0 auto;
  border-top: 1px solid rgba(201,164,78,.18);
  /* gilt flourish divider echoing the reference section rule (dark leather
     needs the gold variant — the sepia one would be invisible here) */
  background:
    url("/static/divider-flourish-gold.svg") no-repeat center bottom 2px / 150px auto;
  padding-bottom: var(--space-4);
}
ul.rec-list { list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-3); flex: 1 1 auto; overflow-y: auto; min-height: 0; }
ul.rec-list li.rec-empty { padding: var(--space-3); color: var(--gold-dim); font-style: italic; font-size: .88rem; }
a.rec-item {
  display: flex; flex-direction: column; gap: .2rem;
  padding: var(--space-2) var(--space-3); margin-bottom: 2px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--parch-on-dark);
  border: 1px solid transparent;
  transition: background-color var(--transition), border-color var(--transition);
}
a.rec-item:hover { background: rgba(201,164,78,.08); border-color: rgba(201,164,78,.22); }
a.rec-item.active { background: rgba(201,164,78,.12); border-color: rgba(201,164,78,.35); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
a.rec-item .rec-title { font-family: var(--font-serif); font-size: .95rem; font-weight: 700; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.rec-item .rec-meta { font-size: .74rem; color: var(--gold-dim); }
a.rec-item .chip { align-self: flex-start; margin-top: .15rem; }

.sidebar-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-top: 1px solid rgba(201,164,78,.20);
  background: rgba(0,0,0,.28); flex: 0 0 auto;
}
.sidebar-footer .user-name { font-family: var(--font-serif); font-weight: 700; color: var(--gold); font-size: .95rem; }
.sidebar-footer form { margin: 0; }
.sidebar-footer .linklike { color: var(--gold-soft); }
.sidebar-footer .linklike:hover { color: var(--gold); }

/* quill-in-inkwell illustration resting in the lower sidebar (behind the
   recording list via negative z-index, so it never blocks interaction).
   170x253 matches the reference art's own proportions (~61% of the rail
   width — measured from reference.png, not eyeballed); the source AVIF is
   tightly cropped already (under 2.5% padding on every edge), so the old
   128px box was just an undersized box, not a cropping problem. */
aside.sidebar::after {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: 58px; transform: translateX(-50%);
  width: 170px; height: 253px;
  background: url("/static/featherandquill.avif") no-repeat center bottom / contain;
  opacity: .82;
}

/* 5. Status chips ----------------------------------------------------------*/
.chip {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .18em .65em; border-radius: 999px;
  font-size: .73rem; font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; line-height: 1.7;
  /* readable body by default — variant classes override; a bare .chip
     (task deadline/status) must not render as borderless floating caps */
  background: var(--parchment-white); color: var(--ink-soft);
  border: 1px solid var(--sepia-light); white-space: nowrap;
}
.chip.active { background: #ecd9ab; color: var(--amber-deep); border-color: rgba(185,133,47,.5); animation: chipPulse 1.8s ease-in-out infinite; }
@keyframes chipPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(185,133,47,.45); } 50% { box-shadow: 0 0 0 4px rgba(185,133,47,0); } }
.chip.review { background: var(--blue); color: var(--parchment); border-color: #2b4356; }
.chip.done { background: #dbe0c8; color: var(--green-deep); border-color: rgba(92,110,63,.4); }
.chip.failed { background: var(--red-deep); color: var(--parchment); border-color: #3e120b; }
@media (prefers-reduced-motion: reduce) { .chip.active { animation: none; } }

/* 6. Cards ------------------------------------------------------------------*/
.card {
  position: relative;
  background-color: var(--parchment-sheet);
  background-image: url("/static/paper-tex-card.avif");
  background-size: cover; background-position: center;
  /* irregular hand-inked deckle edge, like the torn edge of old paper */
  border: 9px solid transparent;
  border-image: url("/static/deckle.svg") 22 stretch;
  box-shadow: 0 2px 9px rgba(20,10,4,.16);
  padding: var(--space-4) var(--space-5) var(--space-5); margin-bottom: var(--space-5);
}
/* engraved corner flourishes tucked into the four corners (no straight frame) */
.card::before {
  content: "";
  position: absolute; inset: -4px;
  pointer-events: none; z-index: 0;
  background-image:
    url("/static/corner-tl.svg"), url("/static/corner-tr.svg"),
    url("/static/corner-bl.svg"), url("/static/corner-br.svg");
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: 30px 30px;
  opacity: .8;
}
.card > * { position: relative; z-index: 1; }
/* left-anchored flourish rule under card section titles (direct children) —
   fleuron sits at the left, the rule extends to the right like a divider */
.card > h2 {
  padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
  border-bottom: none;
  background: url("/static/divider-left.svg") no-repeat left bottom / 340px auto;
}
.card > *:last-child { margin-bottom: 0; }
.status-block { margin-bottom: var(--space-4); }
.status-block .banner { margin-top: var(--space-3); }

/* 7. Login page --------------------------------------------------------------*/
body.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5);
  background-color: var(--desk-dark);
  background-image:
    var(--leather-grain),
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(90,60,30,.55), transparent 70%),
    linear-gradient(180deg, var(--desk-mid), var(--desk-dark) 70%);
}
.login-sheet {
  position: relative; width: 100%; max-width: 360px;
  background-color: var(--parchment-sheet);
  background-image: url("/static/paper-tex-card.avif");
  background-size: cover; background-position: center;
  border: 1px solid var(--sepia); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet), inset 0 0 0 1px rgba(253,249,239,.5);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
}
/* engraved corner flourishes on the sealed sheet */
.login-sheet::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  background-image:
    url("/static/corner-tl.svg"), url("/static/corner-tr.svg"),
    url("/static/corner-bl.svg"), url("/static/corner-br.svg");
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: 38px 38px; opacity: .7;
}
.login-sheet::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 3px; background: linear-gradient(90deg, transparent, var(--sepia), transparent); opacity: .6; }
.login-sheet img { display: block; width: 96px; height: 96px; margin: 0 auto var(--space-4); position: relative; }
.login-sheet h1 { font-size: 1.9rem; margin-bottom: var(--space-4); letter-spacing: .03em; position: relative; }
.login-sheet form { display: flex; flex-direction: column; gap: var(--space-3); text-align: left; position: relative; }
.login-sheet .banner { text-align: left; margin-bottom: 0; }
.login-sheet button { margin-top: var(--space-2); justify-content: center; }
/* wax seal pressing the lower-right of the sealed sheet */
.login-sheet .seal {
  position: absolute; right: -34px; bottom: -34px; width: 104px; height: 97px;
  background: url("/static/wax-seal.avif") no-repeat center / contain;
  filter: drop-shadow(0 6px 10px rgba(10,5,2,.55)); pointer-events: none;
}

/* 8. Forms ---------------------------------------------------------------- */
label { display: block; font-size: .78rem; font-variant: small-caps; letter-spacing: .04em; font-weight: 700; color: var(--sepia-deep); margin: var(--space-3) 0 var(--space-1); }
label:first-child { margin-top: 0; }

input[type="text"], input[type="password"], input[type="search"], input[type="date"], select, textarea {
  display: block; width: 100%; font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  background-color: var(--parchment-white); border: 1px solid var(--sepia); border-radius: var(--radius-sm);
  padding: .5em .7em; margin-bottom: var(--space-3);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122,59,46,.18);
}
/* native date inputs: match the manuscript inputs instead of UA chrome;
   the popup calendar itself is browser chrome and only follows color-scheme */
input[type="date"] { width: auto; color-scheme: light; }
input[type="date"]::-webkit-datetime-edit { color: var(--ink); font-family: var(--font-body); }
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .7;
  filter: sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.62);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
textarea.mono-edit { font-family: var(--font-mono); font-size: .88rem; min-height: 300px; width: 100%; white-space: pre; line-height: 1.6; }

fieldset { border: 1px solid var(--sepia-light); border-radius: var(--radius); padding: var(--space-4); margin: 0 0 var(--space-4); }
legend { padding: 0 var(--space-2); font-family: var(--font-serif); font-weight: 700; color: var(--sepia-deep); font-variant: small-caps; letter-spacing: .03em; }

label.radio { display: flex; align-items: flex-start; gap: var(--space-2); font-variant: normal; font-size: .92rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); margin: 0 0 var(--space-2); cursor: pointer; }
label.radio:last-child { margin-bottom: 0; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); margin-top: .25em; flex: 0 0 auto; }

/* buttons — pressed wooden/wax stamps: dark grain, gilt lettering,
   raised highlight on top edge, seated shadow below */
button, .btn {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-serif); font-size: .92rem; font-weight: 700; color: var(--parch-on-dark);
  background-image: linear-gradient(180deg, var(--leather-hi), #2f1e10);
  background-color: var(--leather-hi);
  border: 1px solid #17100a; border-radius: var(--radius-sm);
  padding: .5em 1.05em; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,225,170,.18), 0 2px 5px rgba(20,10,4,.30);
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform 80ms ease, box-shadow var(--transition);
}
button:hover, .btn:hover { color: var(--gold); background-image: linear-gradient(180deg, #4a3018, #35220f); border-color: #000; }
button:active, .btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.45); }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary { background-image: linear-gradient(180deg, #9a4b3a, var(--accent-dark)); background-color: var(--accent); border-color: #3e1a13; color: #f6ead4; }
.btn-primary:hover { background-image: linear-gradient(180deg, var(--accent), var(--accent-dark)); color: #fff4e2; border-color: #2c120c; }
.btn-danger { background-image: linear-gradient(180deg, #9a3626, var(--red-deep)); background-color: var(--red); border-color: #2f0e08; color: #f6ead4; }
.btn-danger:hover { background-image: linear-gradient(180deg, var(--red), var(--red-deep)); color: #fff4e2; }

button.linklike, .linklike { background: none; border: none; color: var(--accent); padding: 0; font-family: var(--font-body); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; border-radius: 0; }
button.linklike:hover, .linklike:hover { background: none; border: none; color: var(--accent-dark); }
.dl { display: inline-block; font-size: .82rem; color: var(--accent); margin-top: var(--space-1); }

/* a form wrapping one button inside a flex row of controls shouldn't itself become a flex item */
.confirm-form { display: contents; }

/* 9. Banners ---------------------------------------------------------------*/
.banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid transparent; margin-bottom: var(--space-4); font-size: .92rem; }
.banner.info { background: rgba(139,111,71,.14); border-color: var(--sepia-light); color: var(--ink); }
.banner.warn { background: #f2e2c2; border-color: rgba(185,133,47,.55); color: var(--amber-deep); }
.banner.error { background: #f2ddd6; border-color: rgba(124,45,32,.5); color: var(--red-deep); }

/* 10. Capture page ---------------------------------------------------------*/
.rec-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.rec-controls:last-child { margin-bottom: 0; }

.pill { display: inline-flex; align-items: center; gap: .4em; padding: .25em .75em; border-radius: 999px; font-family: var(--font-mono); font-size: .8rem; border: 1px solid var(--sepia); background: var(--parchment-white); color: var(--ink-soft); }
.pill.idle { color: var(--ink-soft); }
.pill.recording { color: var(--red-deep); border-color: var(--red); background: #f6e2dc; }
.pill.recording::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: recPulse 1.1s ease-in-out infinite; }
@keyframes recPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.3); } }
.pill.stopped { color: var(--green-deep); border-color: var(--green); background: #e6ead9; }
.pill.error { color: var(--red-deep); border-color: var(--red); background: #f6e2dc; }

.timer { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--sepia-deep); letter-spacing: .02em; }

.meters { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.meter-row { display: flex; align-items: center; gap: var(--space-3); }
.meter-label { flex: 0 0 auto; min-width: 8.5em; font-size: .82rem; color: var(--ink-soft); font-variant: small-caps; }
.meter-row canvas, .meters canvas { border: 1px solid var(--sepia); border-radius: 2px; background: var(--parchment-white); display: block; }

.instruction { border-left: 3px solid var(--sepia); background: rgba(139,111,71,.08); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.instruction ol { margin: var(--space-2) 0; padding-left: 1.3em; }
.instruction li { margin-bottom: .25em; }

.log { font-family: var(--font-mono); font-size: .82rem; max-height: 200px; overflow-y: auto; background: var(--parchment-deep); box-shadow: var(--shadow-inset); border: 1px solid var(--sepia-light); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); line-height: 1.5; }
.log-error { color: var(--red-deep); }
.log-warn  { color: var(--amber-deep); }
.log-ok    { color: var(--green-deep); }
.log-info  { color: var(--ink); }

.track, .track-row { margin-bottom: var(--space-4); }
.track:last-child, .track-row:last-child { margin-bottom: 0; }
.track h3 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }

progress {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px;
  border: 1px solid var(--sepia); border-radius: 6px; overflow: hidden;
  background: var(--parchment-white); margin: var(--space-1) 0 var(--space-3);
}
progress::-webkit-progress-bar { background: var(--parchment-white); }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--sepia), var(--sepia-deep)); border-radius: 6px; transition: width var(--transition); }
progress::-moz-progress-bar { background: linear-gradient(90deg, var(--sepia), var(--sepia-deep)); border-radius: 6px; }

audio { width: 100%; display: block; filter: sepia(.15); }

details { margin-top: var(--space-2); }
details summary { cursor: pointer; font-family: var(--font-serif); font-weight: 700; color: var(--accent); padding: .2em 0; }
details summary:hover { color: var(--accent-dark); }
details[open] summary { margin-bottom: var(--space-3); }

/* 11. Detail page ----------------------------------------------------------*/
.detail-header { margin-bottom: var(--space-4); }
.detail-header h1 { margin-bottom: var(--space-1); }
.detail-meta { font-size: .88rem; color: var(--ink-soft); margin-bottom: 0; }

.countdown { display: inline-block; font-size: .82rem; color: var(--amber-deep); background: #f2e2c2; border: 1px solid rgba(185,133,47,.45); border-radius: var(--radius-sm); padding: .25em .6em; margin-bottom: var(--space-3); }

/* rendered markdown: summaries & chat answers */
.summary-body h1, .summary-body h2, .summary-body h3, .summary-body h4 { color: var(--sepia-deep); margin-top: var(--space-4); }
.summary-body h1:first-child, .summary-body h2:first-child, .summary-body h3:first-child, .summary-body h4:first-child { margin-top: 0; }
.summary-body ul, .summary-body ol { padding-left: 1.4em; margin: 0 0 var(--space-3); }
.summary-body li { margin-bottom: .3em; }
.summary-body blockquote {
  margin: var(--space-3) 0; padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--sepia); background: rgba(139,111,71,.07);
  font-style: italic; color: var(--ink-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.summary-body code { font-family: var(--font-mono); font-size: .88em; background: var(--parchment-deep); padding: .1em .35em; border-radius: 3px; }
.summary-body pre { background: var(--parchment-deep); padding: var(--space-3); border-radius: var(--radius-sm); overflow-x: auto; }
.summary-body pre code { background: none; padding: 0; }

pre#transcriptText {
  font-family: var(--font-body); font-size: .95rem; white-space: pre-wrap; word-wrap: break-word;
  line-height: 1.8; background: var(--parchment-deep); border: 1px solid var(--sepia-light);
  border-radius: var(--radius-sm); padding: var(--space-4); margin: var(--space-3) 0;
}
button.ts-link { font-family: var(--font-mono); font-size: .85rem; color: var(--accent); background: none; border: none; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 400; }
button.ts-link:hover { color: var(--accent-dark); background: none; }

/* pipeline timeline */
ul.timeline { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.timeline-step {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  padding: .4em .7em; border-left: 3px solid var(--sepia-light);
  background: rgba(139,111,71,.05); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.timeline-step::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sepia-light); flex: 0 0 auto; }
.timeline-step .step-name { font-family: var(--font-serif); font-weight: 700; color: var(--sepia-deep); text-transform: capitalize; }
.timeline-step .step-dur { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-soft); }
.step-err { font-size: .85rem; color: var(--red-deep); }
.timeline-step .step-err { flex-basis: 100%; }
.timeline-step.ok { border-left-color: var(--green); }
.timeline-step.ok::before { content: "\2713"; background: var(--green); color: var(--parchment); font-size: 7px; line-height: 9px; text-align: center; width: 9px; height: 9px; }
.timeline-step.running { border-left-color: var(--amber); background: rgba(185,133,47,.08); }
.timeline-step.running::before { background: var(--amber); animation: chipPulse 1.4s ease-in-out infinite; }
.timeline-step.err { border-left-color: var(--red); background: rgba(124,45,32,.06); }
.timeline-step.err::before { background: var(--red); }

/* confirm dialog: replaces window.confirm() for form.confirm-form submits */
dialog.confirm-dialog {
  padding: 0; margin: auto; max-width: 26rem; width: calc(100% - var(--space-5));
  border: 9px solid transparent; border-image: url("/static/deckle.svg") 22 stretch;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet);
  background-color: var(--parchment-sheet); background-image: url("/static/paper-tex-card.avif");
  background-size: cover; background-position: center; color: var(--ink);
}
dialog.confirm-dialog::backdrop { background: rgba(15,9,4,.55); }
dialog.confirm-dialog .confirm-box { padding: var(--space-5); }
dialog.confirm-dialog p { margin: 0 0 var(--space-4); }
dialog.confirm-dialog .rec-controls { margin-bottom: 0; justify-content: flex-end; }

/* 12. Ask / chat page --------------------------------------------------------*/
#chat { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }
.chat-entry { display: flex; flex-direction: column; gap: var(--space-2); }

.chat-q {
  align-self: flex-end; max-width: 80%; background: var(--parchment-deep);
  border: 1px solid var(--sepia-light); border-radius: var(--radius) var(--radius) var(--space-1) var(--radius);
  padding: var(--space-2) var(--space-3); font-weight: 700; color: var(--sepia-deep);
  display: flex; align-items: flex-start; gap: var(--space-2);
}
.chat-q-text { flex: 1 1 auto; min-width: 0; }
.chat-a {
  align-self: flex-start; max-width: 100%; width: 100%; background: var(--parchment-sheet);
  border: 1px solid var(--sepia); border-radius: var(--radius) var(--radius) var(--radius) var(--space-1);
  box-shadow: var(--shadow-card); padding: var(--space-4);
}
.chat-wait { display: flex; align-items: center; gap: var(--space-2); font-style: italic; color: var(--ink-soft); padding: var(--space-2) 0; }
.chat-wait::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--sepia) 45%, transparent 46%);
  clip-path: polygon(15% 0%, 100% 85%, 85% 100%, 0% 15%);
  transform-origin: 75% 75%; animation: quillWrite 1.2s ease-in-out infinite; flex: 0 0 auto;
}
@keyframes quillWrite { 0%, 100% { transform: rotate(-10deg) translate(0, 0); } 50% { transform: rotate(8deg) translate(-2px, -2px); } }

.chat-err { color: var(--red-deep); background: #f2ddd6; border: 1px solid rgba(124,45,32,.4); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }

.citations { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.citation { border: 1px solid var(--sepia-light); border-left: 3px solid var(--sepia); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(139,111,71,.06); padding: var(--space-2) var(--space-3); }
.citation-src { font-size: .78rem; color: var(--ink-soft); margin-bottom: .3em; }
.citation-src a { font-weight: 700; }
.citation-text { font-style: italic; color: var(--ink); }
.citation-text::before { content: "\201C"; }
.citation-text::after  { content: "\201D"; }

/* sits at the top of .ask-main since the UI rework (question = primary action),
   so no sticky-to-bottom pinning; the border moved below the form accordingly */
.chat-form { display: flex; flex-direction: column; gap: var(--space-2); background: var(--parchment); padding: var(--space-3) 0; border-bottom: 1px solid var(--sepia-light); margin-bottom: var(--space-3); }
.chat-input-row { display: flex; gap: var(--space-2); }
.chat-input-row input[type="text"] { flex: 1; margin-bottom: 0; }
.chat-input-row button { flex: 0 0 auto; }

/* mode pills [Aktiv|Alle|Archiv] (D16) — plain radios, :has() drives the
   checked look so no JS is needed to keep it in sync. */
.mode-pills { display: inline-flex; gap: var(--space-2); }
.mode-pill {
  display: inline-flex; align-items: center; gap: .35em; padding: .3em .8em;
  border-radius: 999px; border: 1px solid var(--sepia); background: var(--parchment-white);
  color: var(--ink-soft); font-size: .82rem; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.mode-pill input { accent-color: var(--accent); margin: 0; }
.mode-pill:has(input:checked) { background: var(--accent); border-color: var(--accent-dark); color: #f6ead4; }

/* 12b. Ask threads: left rail (v2 D20) ---------------------------------------*/
.ask-layout { display: flex; align-items: flex-start; gap: var(--space-4); }
.ask-main { flex: 1 1 auto; min-width: 0; }
.thread-rail {
  flex: 0 0 240px; background-color: var(--parchment-sheet); border: 1px solid var(--sepia);
  border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-3);
}
.thread-rail-toggle > summary { font-family: var(--font-serif); font-weight: 700; color: var(--sepia-deep); font-variant: small-caps; cursor: pointer; margin-bottom: var(--space-3); list-style: none; }
.thread-rail-toggle > summary::-webkit-details-marker { display: none; }
.new-thread-btn { display: block; text-align: center; text-decoration: none; margin-bottom: var(--space-3); }
ul.thread-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
ul.thread-list li { display: flex; align-items: flex-start; gap: var(--space-1); }
ul.thread-list li.thread-empty { color: var(--ink-soft); font-style: italic; font-size: .85rem; padding: var(--space-2) 0; }
a.thread-item {
  flex: 1 1 auto; min-width: 0; padding: var(--space-2); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); border: 1px solid transparent;
}
a.thread-item:hover { background: rgba(122,59,46,.08); border-color: rgba(122,59,46,.18); }
a.thread-item.active { background: rgba(122,59,46,.12); border-color: rgba(122,59,46,.3); font-weight: 700; }
a.thread-item .thread-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.thread-item .thread-meta { display: block; font-size: .72rem; color: var(--ink-soft); }
.thread-delete-btn, .chat-delete-btn {
  flex: 0 0 auto; padding: .15em .4em; font-size: .85rem; line-height: 1.6;
  text-decoration: none;
}
.thread-delete-btn:hover, .chat-delete-btn:hover { color: var(--red-deep); }

@media (min-width: 901px) {
  /* the rail is always expanded on desktop — the toggle only matters on narrow viewports */
  .thread-rail-toggle > summary { pointer-events: none; }
}
@media (max-width: 900px) {
  .ask-layout { flex-direction: column; }
  .thread-rail { flex: 0 0 auto; width: 100%; }
}

/* 13. Status page ------------------------------------------------------------*/
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.stat { background-color: var(--parchment-sheet); border: 1px solid var(--sepia); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-4); margin-bottom: 0; }
.stat-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-variant: small-caps; margin-bottom: .3em; }
.stat-value { display: block; font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--sepia-deep); }
.stat-value.small { font-size: 1.15rem; word-break: break-word; }

table.plain { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.plain th { text-align: left; font-family: var(--font-serif); color: var(--sepia-deep); font-weight: 700; padding: .5em .75em; border-bottom: 2px solid var(--sepia); }
table.plain td { padding: .5em .75em; border-bottom: 1px solid var(--sepia-light); }
table.plain tbody tr:hover { background: rgba(139,111,71,.08); }

/* 14. Responsive: sidebar collapses to a top bar below 900px -----------------*/
@media (max-width: 900px) {
  body.app-shell { grid-template-columns: 1fr; }
  aside.sidebar { flex-direction: row; align-items: center; height: auto; width: 100%; position: sticky; top: 0; z-index: 10; border-right: none; border-bottom: 1px solid var(--sepia); overflow-x: auto; }
  .brand { border-bottom: none; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
  nav.menu { flex-direction: row; padding: 0 var(--space-3) 0 0; margin: 0; gap: .25rem; }
  nav.menu::before { display: none; }
  nav.menu a { border-left: none; border-bottom: 3px solid transparent; padding: .55rem .6rem; white-space: nowrap; }
  nav.menu a.active { border-left-color: transparent; border-bottom-color: var(--accent); }
  nav.menu a.active::after { display: none; }
  .sidebar-title, ul.rec-list, .sidebar-footer { display: none; }
  aside.sidebar::after { display: none; }
  .page-seal::after,
  #summaryCard::after { right: var(--space-4); bottom: -36px; width: 104px; height: 97px; }
  main.content { padding: var(--space-4); box-shadow: none; }
}

/* 15. v2: Projects & proposals (S2-frontend) ---------------------------------*/
.chip.addition { background: #dbe0c8; color: var(--green-deep); border-color: rgba(92,110,63,.4); }
.chip.shift { background: #f2e2c2; color: var(--amber-deep); border-color: rgba(185,133,47,.55); }
.chip.degraded { background: #f2ddd6; color: var(--red-deep); border-color: rgba(124,45,32,.5); }
.chip.newtask { background: var(--blue); color: var(--parchment); border-color: #2b4356; }
.chip.updatetask { background: var(--parchment-white); color: var(--sepia-deep); border-color: var(--sepia); }

.proposal-card {
  border: 1px solid var(--sepia-light); border-left: 3px solid var(--sepia);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(139,111,71,.06);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
}
.proposal-card:last-child { margin-bottom: 0; }
.proposal-card.accepted { border-left-color: var(--green); opacity: .75; }
.proposal-card.discarded { border-left-color: var(--sepia-light); opacity: .55; }
.proposal-statement { font-family: var(--font-serif); color: var(--sepia-deep); margin-bottom: var(--space-2); }
.proposal-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.proposal-toggle { display: flex; align-items: center; gap: .4em; font-size: .85rem; }
.proposal-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-2) 0; }
.proposal-diff-old, .proposal-diff-new { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: .88rem; white-space: pre-wrap; }
.proposal-diff-old { background: #f2ddd6; text-decoration: line-through; text-decoration-color: rgba(124,45,32,.5); }
.proposal-diff-new { background: #dbe0c8; }
.proposal-diff textarea.mono-edit { min-height: 140px; }
@media (max-width: 700px) { .proposal-diff { grid-template-columns: 1fr; } }

.project-list-desc { color: var(--ink-soft); font-size: .88rem; }
.project-empty { color: var(--ink-soft); font-style: italic; }
.revision-item { border-left: 2px solid var(--sepia-light); padding-left: var(--space-3); margin-bottom: var(--space-3); }
.revision-item:last-child { margin-bottom: 0; }
.revision-meta { font-size: .82rem; color: var(--ink-soft); margin-bottom: .3em; }

/* 16. v2: Task tracker (S3) --------------------------------------------------*/
.task-filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.task-filter-form label { display: inline-flex; align-items: center; gap: .3em; font-weight: 400; }

.task-card {
  border: 1px solid var(--sepia-light); border-left: 3px solid var(--sepia);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(139,111,71,.06);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
}
.task-card:last-child { margin-bottom: 0; }
.task-card.task-inwork { border-left-color: var(--amber); border-left-width: 5px; }
.task-card.task-done { border-left-color: var(--green); opacity: .75; }
.task-card.task-dropped { border-left-color: var(--sepia-light); opacity: .55; }

.task-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.task-title { font-family: var(--font-serif); font-weight: 700; color: var(--sepia-deep); }

.task-row-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-2); }
.task-inline-form { display: flex; flex-direction: column; gap: .2em; }
.task-inline-form label { font-size: .78rem; color: var(--ink-soft); }
.task-status-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.task-notes { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.task-notes li { padding: .3em 0; border-bottom: 1px solid var(--sepia-light); }
.task-notes li:last-child { border-bottom: none; }
.task-note-date { font-size: .78rem; color: var(--ink-soft); margin-right: .5em; }

/* 18. UI-Feinschliff: Wichtigkeit, Projekt-Chips, wachsende Textfelder ------*/

/* Wichtigkeit chips — 1 Dringend … 4 Niedrig. Farbgewicht = Dringlichkeit. */
.prio {
  display: inline-flex; align-items: center; gap: .34em;
  padding: .16em .62em; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .04em;
  font-variant: small-caps; white-space: nowrap;
  border: 1px solid var(--sepia); background: var(--parchment-white); color: var(--ink-soft);
}
.prio .prio-ic { width: .78em; height: .78em; flex: 0 0 auto; }
.prio-1 { color: #f6ead4; background: linear-gradient(180deg, #8a3123, var(--red-deep)); border-color: #3e120b; }
.prio-2 { color: var(--amber-deep); background: #f2e2c2; border-color: rgba(185,133,47,.55); }
.prio-3 { color: var(--ink-soft); }
.prio-4 { color: var(--sepia); background: transparent; opacity: .78; }

/* Radio-Chip-Auswahl (ersetzt das P1–P4-Dropdown) */
.prio-radios { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.prio-radios .prio { position: relative; cursor: pointer; opacity: .78; transition: opacity var(--transition), box-shadow var(--transition); }
.prio-radios .prio input { position: absolute; opacity: 0; pointer-events: none; }
.prio-radios .prio:hover { opacity: 1; }
.prio-radios .prio:has(input:checked) { opacity: 1; box-shadow: 0 0 0 2px rgba(122,59,46,.55); }
.prio-radios .prio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
/* unchecked Dringend must not wear its full seal-red fill — outline only,
   so the filled chip unambiguously means "selected" inside a radio group */
.prio-radios .prio-1:not(:has(input:checked)) { background: var(--parchment-white); color: var(--red-deep); border-color: var(--red); }
/* inline-edit block inside the task disclosure */
.task-row-inline-edits { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin: var(--space-2) 0 var(--space-3); }
.task-inline-label { display: block; font-size: .78rem; color: var(--ink-soft); margin-bottom: .2em; }

/* Projekt-Chips: verlinkte Zugehörigkeit auf E-Mails/Aufnahmen/Aufgaben */
a.chip.proj { background: #eadfbe; color: var(--sepia-deep); border-color: rgba(211,169,80,.6); text-decoration: none; text-transform: none; letter-spacing: .02em; }
a.chip.proj:hover { background: #e2d1a2; border-color: var(--gold-dim); color: var(--ink); }

/* Textfelder wachsen mit dem Inhalt — Text bleibt immer vollständig sichtbar */
textarea { field-sizing: content; max-height: 70vh; overflow-y: auto; }
textarea.mono-edit { min-height: 140px; }