/* opnote — phone-first. Dark by default because this gets opened in theatre
   corridors at 2am; light mode follows the OS. */

:root {
  --bg:        #0b111a;
  --card:      #131c28;
  --card-2:    #0f1720;
  --line:      #253243;
  --ink:       #e6edf6;
  --ink-dim:   #93a3b8;
  --ink-faint: #64748b;
  --accent:    #35c9b0;
  --accent-in: #04241f;
  --warn:      #eab308;
  --bad:       #f87171;
  --good:      #4ade80;
  --radius:    14px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f5f9; --card: #ffffff; --card-2: #f7f9fc; --line: #dbe3ec;
    --ink: #0f1b2a; --ink-dim: #4a5a6d; --ink-faint: #8496a8;
    --accent: #0d9488; --accent-in: #ffffff;
  }
}

* { box-sizing: border-box; }

/* The step cards are display:grid, which outranks the UA sheet's
   [hidden] { display: none } — without this every step shows at once. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 0 max(28px, env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai",
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body.center {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* ── chrome ─────────────────────────────────────────────────── */

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brand b { letter-spacing: .3px; }
.brand .sub { color: var(--ink-faint); font-size: 12px; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint); align-self: center; flex: none;
  transition: background .3s;
}
.dot.ok  { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent); }
.dot.bad { background: var(--bad);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent); }
nav { display: flex; gap: 14px; flex: none; }
nav a { color: var(--ink-dim); text-decoration: none; font-size: 14px; }
nav a:active { color: var(--accent); }

main { max-width: 640px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }

/* ── cards ──────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  gap: 14px;
}
.card h1 { margin: 0; font-size: 24px; letter-spacing: .4px; }
.card h2 { margin: 0; font-size: 17px; font-weight: 650; }
.card.ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.card.gate { width: min(380px, 100%); }

h3 { margin: 0 0 8px; font-size: 14px; color: var(--ink-dim); font-weight: 600; }
.hint { margin: 0; color: var(--ink-faint); font-size: 13px; }
.good { margin: 0; color: var(--good); font-size: 14px; }
.err {
  margin: 0; color: var(--bad); font-size: 14px;
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  border-radius: 10px; padding: 10px 12px; white-space: pre-wrap;
}
.note-ai {
  margin: 0; font-size: 13px; color: var(--ink-dim);
  background: var(--card-2); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: 8px 12px;
}

/* ── fields ─────────────────────────────────────────────────── */

.fld { display: grid; gap: 6px; }
.fld > span { font-size: 13px; color: var(--ink-dim); }

input[type=text], input[type=password], input[type=date], textarea, select {
  width: 100%;
  font: inherit;
  font-size: 16px;                 /* keeps iOS from zooming on focus */
  color: var(--ink);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  -webkit-appearance: none;
  appearance: none;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.gate input { margin: 0; }

.flag input, .flag textarea {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--card-2));
}
/* Covers both failure modes the model reports: unreadable on the page, and
   simply not written on it. */
.fld.flag > span::after { content: " · ต้องตรวจ"; color: var(--warn); }

/* ── buttons ────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font: inherit; font-weight: 600; font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 16px;
  min-height: 46px;
  background: var(--card-2);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.btn.big { min-height: 52px; font-size: 16px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-in); }
.btn.ghost { background: transparent; color: var(--ink-dim); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:active:not(:disabled) { transform: translateY(1px); }

.pickrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions { display: grid; gap: 10px; }

/* ── role chips ─────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: 14px;
  padding: 9px 14px; min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--ink-dim);
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
  color: var(--ink);
}

/* ── thumbnails ─────────────────────────────────────────────── */

.shots { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.shots:empty { display: none; }
.shot { position: relative; flex: none; }
.shot img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); display: block;
}
.shot button {
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: 700 14px/1 system-ui; cursor: pointer;
}

/* ── progress ───────────────────────────────────────────────── */

.work h2 { display: flex; align-items: baseline; justify-content: space-between; }
.clock { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-weight: 500; font-size: 14px; }
.trace { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.trace li { display: flex; gap: 8px; align-items: baseline; }
.trace li::before { content: "›"; color: var(--accent); }
.trace li:last-child { color: var(--ink); }

/* ── session log ────────────────────────────────────────────── */

.log { max-width: 640px; margin: 0 auto; padding: 0 16px 8px; }
.log ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.log li { font-size: 13px; color: var(--ink-dim); }

@media (min-width: 560px) {
  .actions { grid-auto-flow: column; grid-auto-columns: 1fr; }
}