/* Inkslate PWA — green editorial design (see plans/2026-06-15-pwa-ui-design.md).
   Three-layer depth: canvas (green) -> panel (cream) -> tan (code). */
:root {
  --canvas: #33402e;
  --canvas-deep: #2a3325;
  --hairline: rgba(242, 236, 221, 0.14);
  --grid-line: rgba(242, 236, 221, 0.07);

  --panel: #ece4d2;
  --panel-soft: #f5f0e4;
  --panel-edge: rgba(44, 53, 40, 0.1);

  --ink: #2c3528;
  --ink-soft: #5e6654;
  --cream: #f2ecdd;
  --sage: #a4ab94;

  --tan: #e3d9be;
  --tan-soft: #e8dfc6;
  --tan-edge: rgba(44, 53, 40, 0.08);
  --code: #5e5a46;
  --chip-bg: #e3d8bb;

  --gold: #c49a3e;
  --gold-bright: #d9b255;
  --clay: #b0553c;

  --font-serif: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", Georgia, "Times New Roman", serif;
  --font-sans: "PingFang SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  color: var(--cream);
  background: var(--canvas-deep);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-font-smoothing: antialiased;
}

/* Posture sections: shown by [data-posture] on body. */
.posture { display: none; min-height: 100vh; padding: 20px; }
body[data-posture="folded"]   #folded   { display: flex; }
body[data-posture="unfolded"] #unfolded { display: block; }
body[data-posture="refine"]   #refine   { display: flex; }

/* --- brand --- */
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand h1 { font-family: var(--font-serif); font-size: 26px; margin: 0; letter-spacing: 0.5px; }
.brand .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--sage); text-transform: uppercase; }
.lang { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--sage);
  background: none; border: 1px solid var(--hairline); border-radius: 6px; padding: 4px 9px; }

/* --- buttons --- */
.btn { font-family: var(--font-sans); font-size: 15px; border-radius: 10px; padding: 11px 16px; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--canvas); color: var(--cream); border-color: var(--hairline); }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--hairline); }
.btn-ink { background: var(--canvas); color: var(--cream); }
.btn-ghost-ink { background: transparent; color: var(--ink); border-color: var(--panel-edge); }
.btn-reject { background: transparent; color: var(--clay); border: 1px solid var(--clay); }
.btn:disabled { opacity: 0.4; }
.btn .note { font-family: var(--font-mono); font-size: 11px; color: var(--sage); margin-left: 6px; }

/* --- folded · capture --- */
#folded { flex-direction: column; gap: 18px; align-items: center; justify-content: center; text-align: center; }
#folded .hint { color: var(--sage); font-size: 13px; max-width: 24ch; }
#folded .viewfinder { width: 84%; max-width: 320px; aspect-ratio: 3/4; border: 1px solid var(--gold);
  border-radius: 14px; background: rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#folded video { width: 100%; height: 100%; object-fit: cover; }
#folded .thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 320px; }
#folded .thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gold); }
#folded .cap-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cap-actions label.btn { display: inline-flex; align-items: center; }
#folded .meta { font-family: var(--font-mono); font-size: 12px; color: var(--sage); }
#folded .rec-on { color: var(--gold-bright); }

/* --- unfolded · verify (left material, right swimlanes) --- */
#unfolded .verify { display: grid; grid-template-columns: minmax(200px, 1fr) 1.8fr; gap: 16px; margin-top: 18px; }
/* The unfolded inner screen reports ~711 CSS px (high DPR), so keep the
   left-material + right-swimlanes layout down to ~520px; only truly narrow
   windows (desktop testing) collapse to a single column. */
@media (max-width: 520px) { #unfolded .verify { grid-template-columns: 1fr; } }

.panel { background: var(--panel); color: var(--ink); border: 1px solid var(--panel-edge); border-radius: 14px; padding: 16px; }
.panel h2 { font-family: var(--font-serif); font-size: 18px; margin: 0 0 12px; }
.material .thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.material .thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--panel-edge); }
.material .audio { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); margin-top: 10px; }

.lanes { display: flex; flex-direction: column; gap: 12px; }

/* section-header motif: [01] role · CODE · state */
.lane { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px; padding: 14px 16px; color: var(--ink); }
.lane .head { display: flex; align-items: baseline; gap: 10px; }
.lane .num { font-family: var(--font-mono); color: var(--gold); font-size: 13px; }
.lane .role { font-family: var(--font-serif); font-size: 17px; }
.lane .role small { font-family: var(--font-sans); font-size: 12px; color: var(--ink-soft); margin-left: 6px; }
.lane .meta { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.lane .bar { height: 3px; background: var(--tan); border-radius: 2px; margin: 10px 0; overflow: hidden; }
.lane .bar > i { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.4s ease; }
/* code/note block — used in lanes and in the refine preview, so keep it general */
.out { font-family: var(--font-mono); font-size: 12px; color: var(--code); background: var(--tan);
  border: 1px solid var(--tan-edge); border-radius: 8px; padding: 10px; margin-top: 8px; white-space: pre-wrap;
  max-height: 160px; overflow: auto; }
.lane .items { margin: 8px 0 0; padding-left: 18px; }
.lane .items li { font-size: 14px; margin: 3px 0; }

/* state visuals */
.lane[data-state="idle"] { border-style: dashed; opacity: 0.8; }
.lane[data-state="idle"] .meta { color: var(--sage); }
.lane[data-state="running"] .num { color: var(--gold); }
.lane[data-state="running"] .bar > i { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.lane[data-state="done"] .meta::before { content: "✓ "; color: var(--gold); }
.lane[data-state="failed"] { border-color: var(--clay); }
.lane[data-state="failed"] .meta { color: var(--clay); }

/* awaiting_approval — the gold-bar callout, the decisive moment */
.lane[data-state="awaiting_approval"] { border-left: 3px solid var(--gold-bright); background: var(--panel-soft);
  animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(217,178,85,0); } 50% { box-shadow: 0 0 0 4px rgba(217,178,85,0.18); } }
@media (prefers-reduced-motion: reduce) { .lane[data-state="awaiting_approval"] { animation: none; } .lane .bar > i { transition: none; } }

/* --- refine · precision (top note, bottom edit + approval) --- */
#refine { flex-direction: column; gap: 14px; }
#refine .note-view { flex: 1; overflow: auto; }
#refine .note-view .out { max-height: none; }
#refine .edit label { display: block; font-size: 12px; color: var(--ink-soft); margin: 8px 0 4px; }
#refine input, #refine textarea { width: 100%; font-family: var(--font-sans); font-size: 14px; color: var(--ink);
  background: var(--panel-soft); border: 1px solid var(--panel-edge); border-radius: 8px; padding: 9px; }
#refine textarea { min-height: 90px; resize: vertical; }
.approval { border-left: 3px solid var(--gold-bright); background: var(--panel-soft); }
.approval .ap-actions { display: flex; gap: 10px; margin-top: 10px; }

/* footer */
footer { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); text-align: center; padding: 14px; }

/* posture switch hint chip */
.posture-tag { position: fixed; top: 10px; right: 12px; font-family: var(--font-mono); font-size: 11px;
  color: var(--sage); background: rgba(0,0,0,0.2); border: 1px solid var(--hairline); border-radius: 6px; padding: 3px 8px; }