/* ============================================================================
   QCC Coach — "Hairline" design framework  (hand-built · vanilla · no build)
   Single source of truth: design tokens + reusable components.
   Point of view: structure is a HAIRLINE, never a side stripe. Hierarchy from
   type + space, not color + shadow. One accent (blue); grays carry the rest.
   ทุกหน้าลิงก์ไฟล์นี้ (<link rel="stylesheet" href="/ui.css">) ก่อน <style> ของหน้า
   ============================================================================ */

:root{
  /* ---- surfaces ---- */
  --page:#f6f6f8; --card:#ffffff; --raised:#f1f1f4; --sunken:#fbfbfd;

  /* ---- ink (neutral, zero blue tint) — body is GRAY by default, black is earned ---- */
  --ink:#1d1d1f; --ink-2:#565a60; --ink-3:#83868c;

  /* ---- hairlines (the load-bearing element) ---- */
  --line:#dcdce1; --line-2:#e9e9ee; --line-3:#c9c9d0;

  /* ---- the ONE decorative accent ---- */
  --blue:#0071e3; --blue-hover:#0a63cc; --blue-ink:#0062c4; --blue-tint:#eaf3fd;

  /* ---- semantic (SQUARE BADGES ONLY — never page decoration) ---- */
  --ok:#178a45;   --ok-tint:#e9f7ef;
  --warn:#9a7208; --warn-tint:#fbf1d9;
  --bad:#c0392e;  --bad-tint:#fbecea;
  --dia:#0a7183;  --dia-tint:#e4f4f6;
  --ta:#6e46ad;   --ta-tint:#f1eafb;

  /* ---- award levels (badge fills only) ---- */
  --lv-diamond:#0a7183; --lv-diamond-bg:#e4f4f6;
  --lv-golden:#9a7208;  --lv-golden-bg:#fbf1d9;
  --lv-silver:#565a60;  --lv-silver-bg:#eef0f2;
  --lv-bronze:#9a5a2a;  --lv-bronze-bg:#f6ece1;
  --lv-none:#b3271e;    --lv-none-bg:#fbecea;

  /* ---- typography ---- */
  --font:"Anuphan",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  --font-num:"Anuphan",ui-monospace,"SF Mono",monospace;
  --t-display:clamp(30px,5vw,42px); --t-h1:26px; --t-h2:19px; --t-h3:16px;
  --t-body:14.5px; --t-sm:13px; --t-xs:11.5px; --t-kicker:11px;
  --w-reg:400; --w-med:500; --w-semi:600; --w-bold:700;
  --lh-tight:1.15; --lh-snug:1.4; --lh-body:1.7;
  --ls-display:-0.03em; --ls-h:-0.014em; --ls-body:0; --ls-kicker:0.08em;

  /* ---- spacing (hand-tuned) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:22px; --s-6:28px; --s-7:40px; --s-8:56px;
  --gutter:28px; --maxw:1120px;

  /* ---- radii (TIGHT — house style) ---- */
  --r-xs:5px; --r-sm:8px; --r-md:10px; --r-lg:12px;

  /* ---- elevation (minimal — one shadow, floating UI only) ---- */
  --shadow:0 4px 16px rgba(24,26,32,.08);
  --focus:0 0 0 3px rgba(0,113,227,.28);

  /* ---- motion ---- */
  --ease:cubic-bezier(.25,.46,.45,.94); --t-fast:.15s var(--ease); --t-med:.22s var(--ease);

  /* back-compat aliases (old markup keeps working, retuned values) */
  --line-hair:var(--line); --r-lg-old:var(--r-md);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--page);color:var(--ink-2);
  font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--blue-tint)}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---- section header: kicker number + title + hairline rule ---- */
.sec-head{display:flex;align-items:baseline;gap:var(--s-3);margin:0 2px var(--s-4)}
.sec-head .num{font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:var(--ls-kicker)}
.sec-head h2{font-size:var(--t-h2);font-weight:var(--w-semi);letter-spacing:var(--ls-h);color:var(--ink)}
.sec-head .rule,.sec-head .line{flex:1;height:1px;background:var(--line-2)}

/* ---- kicker (the crafted micro-label — replaces side bars as the organizing device) ---- */
.kicker{font-size:var(--t-kicker);font-weight:var(--w-semi);letter-spacing:var(--ls-kicker);
  text-transform:uppercase;color:var(--ink-3)}
.kicker.is-accent{color:var(--blue-ink)}

/* ---- card / panel — full hairline, NO side bar, led by a kicker ---- */
.uicard{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5) var(--s-5) var(--s-4);transition:border-color var(--t-fast);cursor:pointer}
.uicard:hover{border-color:var(--line-3)}
.uicard-kicker{font-size:var(--t-kicker);font-weight:var(--w-semi);letter-spacing:var(--ls-kicker);
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-2)}
.uicard-kicker.is-accent{color:var(--blue-ink)}
.uicard-title{font-size:var(--t-h3);font-weight:var(--w-semi);letter-spacing:var(--ls-h);
  line-height:var(--lh-snug);color:var(--ink);margin-bottom:var(--s-2)}
.uicard-desc{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink-2);flex:1}
.uicard-go{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-4);
  font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--blue-ink)}
.uicard-go svg{transition:transform var(--t-fast)}
.uicard:hover .uicard-go svg{transform:translateX(3px)}

.uicard-ic{width:38px;height:38px;flex-shrink:0;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;background:var(--raised);color:var(--ink-2)}
.uicard-ic.is-accent{background:var(--blue-tint);color:var(--blue-ink)}
.uicard-ic svg{width:20px;height:20px}

.panel-feature{background:var(--card);border:1px solid var(--line-3);
  border-radius:var(--r-lg);padding:var(--s-6)}

/* ---- badge / tag — square, tinted or outline, NEVER a pill ---- */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:var(--w-semi);
  padding:2px 8px;border-radius:var(--r-xs);line-height:1.5;white-space:nowrap}
.tag-free{background:var(--ok-tint);color:var(--ok)}
.tag-sell{background:var(--warn-tint);color:var(--warn)}
.tag-ai{background:var(--dia-tint);color:var(--dia)}
.tag-core{background:var(--blue-tint);color:var(--blue-ink)}
.tag-ta{background:var(--ta-tint);color:var(--ta)}
.tag-outline{background:transparent;border:1px solid var(--line);color:var(--ink-2)}

.sev{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:var(--w-semi);
  padding:2px 8px;border-radius:var(--r-xs)}
.sev-high{background:var(--bad-tint);color:var(--bad)}
.sev-med{background:var(--warn-tint);color:var(--warn)}
.sev-low{background:var(--raised);color:var(--ink-3)}

/* ---- button — sentence-case, weight 500, tight radius, flat (no glow/lift/pill) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;
  font-size:var(--t-sm);font-weight:var(--w-med);letter-spacing:-0.005em;padding:9px 18px;
  border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover:not(:disabled){background:var(--blue-hover);border-color:var(--blue-hover)}
.btn-primary:disabled{background:#bcd8f6;border-color:#bcd8f6;color:#eef5fd;cursor:not-allowed}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--raised);border-color:var(--line-3)}
.btn-lg{font-size:var(--t-body);padding:12px 24px}

/* ---- tabs — underline active (the ONE allowed ::after; horizontal, not a side bar) ---- */
.tabs{display:flex;gap:var(--s-5);border-bottom:1px solid var(--line);margin-bottom:var(--s-5)}
.tab{position:relative;padding:10px 2px;background:none;border:none;font-family:inherit;
  font-size:var(--t-sm);font-weight:var(--w-med);color:var(--ink-3);cursor:pointer;transition:color var(--t-fast)}
.tab:hover{color:var(--ink-2)}
.tab.active{color:var(--ink);font-weight:var(--w-semi)}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);border-radius:2px}

/* ---- insight / benchmark row — dot + kicker label, NO side bar ---- */
.insight-list{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.insight{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s-3);align-items:start;padding:var(--s-4) var(--s-5)}
.insight+.insight{border-top:1px solid var(--line-2)}
.insight-dot{width:6px;height:6px;border-radius:50%;margin-top:8px;flex-shrink:0;background:var(--ink-3)}
.insight.is-ok .insight-dot{background:var(--ok)}
.insight.is-warn .insight-dot{background:var(--warn)}
.insight.is-tip .insight-dot{background:var(--blue)}
.insight.is-info .insight-dot{background:var(--ink-3)}
.insight-label{font-size:var(--t-kicker);font-weight:var(--w-semi);letter-spacing:var(--ls-kicker);
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.insight.is-ok .insight-label{color:var(--ok)}
.insight.is-warn .insight-label{color:var(--warn)}
.insight.is-tip .insight-label{color:var(--blue-ink)}
.insight-text{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink-2)}
.insight-text strong{color:var(--ink);font-weight:var(--w-semi)}

/* ---- sticky top bar — solid + hairline (no frosted glass) ---- */
.topbar{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line)}
.brand-mark{width:26px;height:26px;border-radius:var(--r-sm);display:flex;align-items:center;
  justify-content:center;background:var(--blue);color:#fff;font-weight:var(--w-bold);font-size:14px}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .uicard,.uicard-go svg,.btn,.tab{transition:none}
}