/* ============================================================
   Report Tool — Saha Crane · Design System
   Premium-industrial: deep ink-navy + warm amber on warm paper.
   Tuned for a 62yo reader: large type, high contrast, 44px targets.
   ============================================================ */

:root {
  --canvas:      #F2F4EF;   /* clean light, faint green-grey paper */
  --canvas-2:    #E7EAE2;   /* slightly deeper                     */
  --card:        #FFFFFF;
  --ink:         #16271C;   /* deep green-charcoal — text / nav    */
  --ink-2:       #44554A;   /* secondary text                      */
  --ink-3:       #7B887E;   /* muted / meta                        */
  --line:        #E2E6DD;   /* hairline border                     */
  --line-2:      #CDD4C8;   /* stronger border                     */

  --accent:      #0E6A38;   /* SAHA CRANE forest green — primary   */
  --accent-d:    #0A5630;   /* hover                               */
  --accent-tint: #E5F1E9;   /* soft green fill                     */
  --accent-tint2:#CBE4D4;
  --accent-ink:  #0A4E2B;   /* green text on tint                  */

  --yellow:      #ECD400;   /* SAHA CRANE banner yellow            */
  --yellow-soft: #FBF4BE;   /* soft yellow fill                    */
  --yellow-line: #ECDD7A;
  --gold:        #C8A21F;

  --success:     #1E7A4B;
  --success-tint:#E4F1E9;
  --alert:       #B0303E;   /* issues / external                   */
  --alert-tint:  #FBE7E8;

  --radius:      16px;
  --radius-sm:   11px;
  --shadow:      0 1px 2px rgba(22,32,58,.05), 0 8px 24px -12px rgba(22,32,58,.18);
  --shadow-lg:   0 2px 6px rgba(22,32,58,.06), 0 20px 50px -20px rgba(22,32,58,.30);
  --font: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-tint2); }

/* clean, flat warm-paper canvas — calm and easy to read */
body.app-bg {
  background: var(--canvas);
}

/* ---------- Typography helpers ---------- */
.font-display { font-weight: 700; letter-spacing: -.01em; }
.tracking-label { letter-spacing: .08em; }

h1, h2, h3 { color: var(--ink); }

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; stroke-width: 1.75; fill: none;
        stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-sm { width: 1.05em; height: 1.05em; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.25rem;
  border-radius: 12px; font-weight: 600; font-size: 1.0625rem;
  border: 1.5px solid transparent; cursor: pointer; user-select: none;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 18px -10px var(--accent); }
.btn-primary:hover { background: var(--accent-d); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #0E1731; }

.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }

.btn-danger { background: var(--card); color: var(--alert); border-color: #E7B9bf; }
.btn-danger:hover { background: var(--alert-tint); }

.btn-block { width: 100%; }
.btn-lg { min-height: 56px; font-size: 1.1875rem; padding: 0 1.6rem; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 1.5rem; }
@media (min-width: 768px){ .card-pad { padding: 1.75rem; } }

.card-link { transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.card-link:hover { border-color: var(--line-2); box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ============================================================
   Pills, chips, badges
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
}
.badge-cat { font-size: .95rem; font-weight: 600; padding: .35rem .85rem; border-radius: 999px; white-space: nowrap; }
.badge-neutral { background: var(--canvas-2); color: var(--ink-2); }
.badge-alert   { background: var(--alert-tint); color: var(--alert); }
.badge-owner   { background: var(--alert-tint); color: var(--alert); border: 1px solid #E7B9bf; }

/* ---------- The prominent audio "listen" jump ---------- */
.listen {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .35rem .75rem .35rem .6rem;
  border-radius: 999px; font-weight: 700; font-size: .95rem;
  background: var(--yellow-soft); color: var(--accent-ink);
  border: 1.5px solid var(--yellow-line);
  font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.listen:hover { background: #F6EC9E; border-color: var(--yellow); }
.listen:active { transform: translateY(1px); }
.listen .play {
  width: 22px; height: 22px; border-radius: 999px; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.listen .play svg { width: 11px; height: 11px; fill: #fff; stroke: none; margin-left: 1px; }

/* ============================================================
   Inputs
   ============================================================ */
.field {
  width: 100%; min-height: 50px; padding: .7rem 1rem;
  font-size: 1.0625rem; font-family: var(--font); color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: var(--ink-3); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }

.label { display:block; font-weight: 600; font-size: 1.0625rem; margin-bottom: .5rem; color: var(--ink); }

/* ============================================================
   Scope / filter tabs
   ============================================================ */
.segment { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 5px; gap: 4px; box-shadow: var(--shadow); }
.segment a { padding: .55rem 1.15rem; border-radius: 10px; font-weight: 600; font-size: 1.0625rem; color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; }
.segment a:hover { background: var(--canvas); color: var(--ink); }
.segment a.is-active { background: var(--ink); color: #fff; }

.chip { padding: .5rem 1rem; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink-2); text-decoration: none; transition: all .15s ease; display: inline-flex; align-items:center; gap:.4rem; }
.chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================================================
   Navigation
   ============================================================ */
.nav { background: rgba(255,255,255,.85); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.nav-link { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .7rem; border-radius: 10px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; min-height: 44px; white-space: nowrap; }
.nav-link:hover { background: var(--canvas); color: var(--ink); }
.nav-link.is-active { color: var(--ink); background: var(--canvas-2); }
.nav-cta { color: var(--accent-ink); background: var(--accent-tint); }
.nav-cta:hover { background: var(--accent-tint2); color: var(--accent-ink); }

/* logo mark */
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand .mark { width: 38px; height: 38px; flex: none; }
.brand .word { display: flex; flex-direction: column; line-height: 1; }
.brand .word b { font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; }
.brand .word span { font-size: .72rem; letter-spacing: .22em; color: var(--ink-3); font-weight: 600; text-transform: uppercase; }

/* ============================================================
   Thai prose (report bodies) — generous for reading
   ============================================================ */
.prose-th { color: var(--ink-2); font-size: 1.125rem; line-height: 1.95; }
.prose-th > :first-child { margin-top: 0; }
.prose-th h1, .prose-th h2, .prose-th h3 { font-weight: 700; color: var(--ink); margin: 1.5rem 0 .65rem; line-height: 1.35; }
.prose-th h2 { font-size: 1.45rem; padding-bottom: .45rem; border-bottom: 2px solid var(--accent-tint2); }
.prose-th h3 { font-size: 1.2rem; }
.prose-th p { margin-bottom: .9rem; }
.prose-th ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.prose-th ul li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; }
.prose-th ul li::before { content: ""; position: absolute; left: .25rem; top: .72em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.prose-th strong { color: var(--ink); font-weight: 700; }
.prose-th code { background: var(--canvas-2); padding: 2px 7px; border-radius: 5px; font-size: .92em; }

/* keypoint / action bullet rows (highlights) */
.bullet-row { display: flex; gap: .65rem; align-items: flex-start; }
.bullet-dot { margin-top: .55em; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); flex: none; }

/* collapsible sections */
details.acc { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
details.acc + details.acc { margin-top: .6rem; }
details.acc > summary { cursor: pointer; padding: 1rem 1.15rem; font-weight: 700; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary .chev { transition: transform .2s ease; color: var(--ink-3); }
details.acc[open] > summary .chev { transform: rotate(90deg); }
details.acc[open] > summary { border-bottom: 1px solid var(--line); }
.acc-body { padding: 1.15rem; }

/* section label */
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* divider */
.hr { height: 1px; background: var(--line); border: 0; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
}