/* =========================================================
   Sketch Theme — hand-drawn notebook look
   Ink outlines, hard offset shadows, highlighter titles,
   sticky notes, and "cable" colours (blue / yellow / green / red).
   Loaded after app.css. Remove this file's <link> to go back to the plain theme.
   All text uses Sarabun (SIL OFL 1.1); headings keep the sketch style through borders, highlights and weight.
   ========================================================= */


:root {
  --hand: 'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', Tahoma, sans-serif;
  --bg: #FBF6EA;            /* paper */
  --surface: #FFFFFF;
  --surface-2: #FFF9EC;
  --ink: #1C1B1A;
  --muted: #55524D;
  --line: #1C1B1A;          /* ink outlines */
  --line-soft: #E7E0D0;
  --accent: #1E62D0;        /* blue cable */
  --accent-ink: #FFFFFF;
  --accent-soft: #DCE8FB;
  --accent-strong: #154A9E;
  --ok: #23803A;            /* green cable */
  --ok-soft: #DDF3D4;
  --warn: #C2361F;          /* red cable */
  --warn-soft: #FDE2DC;
  --warn-line: #1C1B1A;
  --info: #154A9E;
  --info-soft: #DCE8FB;
  --neutral-soft: #EFEAE0;
  --sticky: #FFE55C;        /* sticky note */
  --pill-pink: #F8C3CD;
  --pill-green: #BDECA6;
  --pill-yellow: #FFE98A;
  --pill-blue: #C6DCFB;
  --side-bg: #2E3136;       /* server rack */
  --side-ink: #E6E1D6;
  --side-active: #FFE55C;
  --shadow-ink: #1C1B1A;
  --shadow: 4px 4px 0 var(--shadow-ink);
  --shadow-sm: 3px 3px 0 var(--shadow-ink);
  --radius: 16px;
}

[data-theme="dark"] {
  --bg: #1D1F23;
  --surface: #26292E;
  --surface-2: #2C3036;
  --ink: #F1ECE2;
  --muted: #B9B3A8;
  --line: #E9E3D7;
  --line-soft: #3A3F46;
  --accent: #6FA4F5;
  --accent-ink: #10213D;
  --accent-soft: #233656;
  --accent-strong: #A9C8FA;
  --ok: #7FD38F;
  --ok-soft: #1F3A26;
  --warn: #FF8E78;
  --warn-soft: #43241F;
  --warn-line: #E9E3D7;
  --info: #A9C8FA;
  --info-soft: #233656;
  --neutral-soft: #33373E;
  --sticky: #E6CC4A;
  --pill-pink: #6E3A45;
  --pill-green: #335A2A;
  --pill-yellow: #5C5120;
  --pill-blue: #26406A;
  --side-bg: #141518;
  --side-ink: #D9D4C9;
  --side-active: #E6CC4A;
  --shadow-ink: #000000;
}

/* ---------- Paper ---------- */
body {
  background-color: var(--bg);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
@media (min-width: 901px) {
  .shell { background: linear-gradient(to right, var(--side-bg) 0 var(--side-w), transparent var(--side-w)); }
  html.side-collapsed .shell { background: linear-gradient(to right, var(--side-bg) 0 var(--side-w-collapsed), transparent var(--side-w-collapsed)); }
  .main-col { background: transparent; }
}

/* ---------- Hand-lettered headings with highlighter ---------- */
h1, h2, h3, .topbar-title, .brand-text strong, .stat .value, .btn, .nav-item, .collapse-btn, .chip, .verdict, .kicker, .score-ring {
  font-family: var(--hand);
}
.page-head h1, .auth-brand h1, .exam .scenario h1 {
  display: inline;
  background: linear-gradient(transparent 12%, var(--pill-pink) 12%, var(--pill-pink) 92%, transparent 92%);
  padding: 0 10px;
  border-radius: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: 1.55;
}
.exam .scenario h1 { background: linear-gradient(transparent 14%, var(--pill-green) 14%, var(--pill-green) 92%, transparent 92%); }
.page-head p { margin-top: 10px; }
h2 { font-weight: 700; }

/* ---------- Ink cards with comic shadow ---------- */
.card, .stat, .qpreview, .auth-card {
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.stat { position: relative; }
.stat .value { font-weight: 700; }
.stats > .stat:nth-child(4n+1) { border-top: 8px solid var(--accent); }
.stats > .stat:nth-child(4n+2) { border-top: 8px solid #E5B800; }
.stats > .stat:nth-child(4n+3) { border-top: 8px solid var(--ok); }
.stats > .stat:nth-child(4n+4) { border-top: 8px solid var(--warn); }

/* ---------- Buttons ---------- */
.btn {
  border: 2px solid var(--line);
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
  font-weight: 700;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { filter: none; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow-ink); }
.btn-outline { background: var(--surface); color: var(--ink); }
.btn-outline:hover { background: var(--pill-yellow); color: var(--ink); }
.btn-ghost { background: var(--surface); border-color: var(--line); }
.btn[disabled], .btn[aria-disabled="true"] { box-shadow: none; transform: none; }
.icon-btn { border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--shadow-ink); border-radius: 12px; }
.icon-btn:active { transform: translate(1px, 1px); box-shadow: none; }

/* ---------- Chips like little labels ---------- */
.chip { border: 1.5px solid var(--line); font-weight: 600; }
.chip-warn { background: var(--sticky); color: #1C1B1A; }
.chip-ok { background: var(--pill-green); color: var(--ink); }
.chip-info { background: var(--pill-blue); color: var(--ink); }
.chip-neutral { background: var(--neutral-soft); color: var(--ink); }
[data-theme="dark"] .chip-warn { color: #1C1B1A; }

/* ---------- Sticky-note alerts ---------- */
.alert { border: 2px solid var(--line); box-shadow: var(--shadow-sm); border-radius: 6px; }
.alert-warn, .alert-error {
  background: var(--sticky); color: #1C1B1A; border-color: #1C1B1A;
  transform: rotate(-.4deg);
}
.alert-warn .ico, .alert-error .ico { color: #1C1B1A; }
.alert-warn a, .alert-error a { color: #1C1B1A; }
.alert-success, .alert-ok { background: var(--pill-green); color: var(--ink); }
.alert-info { background: var(--pill-blue); color: var(--ink); }

/* Queue items on the dashboard read like pinned notes */
.side .list-item { border-top: 2px dashed var(--line-soft); }

/* ---------- Sidebar = server rack ---------- */
.sidebar { border-right: 2px solid #1C1B1A; }
.brand-mark {
  position: relative; border: 2px solid #1C1B1A; border-radius: 12px; background: #FFFFFF; color: #1C1B1A;
  font-family: var(--hand); box-shadow: 2px 2px 0 #000; padding-top: 6px;
}
.brand-mark::before {
  content: ""; position: absolute; top: 4px; left: 6px; width: 22px; height: 6px;
  background: radial-gradient(circle at 3px 3px, #E5484D 2.6px, transparent 3px),
              radial-gradient(circle at 11px 3px, #F5B700 2.6px, transparent 3px),
              radial-gradient(circle at 19px 3px, #2FA84F 2.6px, transparent 3px);
}
.nav-item { border-radius: 10px; font-weight: 600; }
.nav-item .ico { stroke-width: 2.2; }
.sidebar nav a.nav-item:nth-of-type(5n+1) .ico { color: #6FA4F5; }
.sidebar nav a.nav-item:nth-of-type(5n+2) .ico { color: #F5C842; }
.sidebar nav a.nav-item:nth-of-type(5n+3) .ico { color: #7FD38F; }
.sidebar nav a.nav-item:nth-of-type(5n+4) .ico { color: #FF8E78; }
.sidebar nav a.nav-item:nth-of-type(5n+5) .ico { color: #F8A8C0; }
.nav-item.active { background: var(--side-active); color: #1C1B1A; box-shadow: 2px 2px 0 #000; }
.nav-item.active .ico { color: #1C1B1A !important; }
.collapse-btn { border: 2px dashed rgba(255, 255, 255, .25); font-weight: 600; }

/* ---------- Top bar ---------- */
.topbar { background: var(--surface); border-bottom: 2px solid var(--line); }
.avatar { border: 2px solid var(--line); background: var(--pill-yellow); color: #1C1B1A; font-family: var(--hand); }

/* ---------- Forms ---------- */
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=datetime-local], input[type=search], select, textarea {
  border: 2px solid var(--line); border-radius: 10px;
}
input:focus, select:focus, textarea:focus { box-shadow: 3px 3px 0 var(--accent); border-color: var(--line); }
.check input { accent-color: var(--accent); }

/* ---------- Tables ---------- */
.tbl thead th { font-family: var(--hand); color: var(--ink); font-size: 14px; border-bottom: 2px solid var(--line); }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--pill-yellow) 35%, transparent); }

/* ---------- Progress = cables ---------- */
.progress, .bar { border: 1.5px solid var(--line); height: 12px; border-radius: 8px; background: var(--surface); }
.progress > span {
  background: repeating-linear-gradient(90deg, var(--accent) 0 18px, color-mix(in srgb, var(--accent) 80%, #fff) 18px 22px);
}
.bar > span { background: var(--ok); }
.bar.warn > span { background: var(--warn); }

/* ---------- Exam options ---------- */
.opt { border: 2px solid var(--line); box-shadow: var(--shadow-sm); border-radius: 14px; }
.opt .letter { border: 2px solid var(--line); font-family: var(--hand); background: var(--surface); }
.opt:has(input:checked) { background: var(--pill-blue); border-color: var(--line); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-ink); }
.opt:has(input:checked) .letter { background: var(--accent); color: #fff; }
.opt.is-right { background: var(--pill-green); border-color: var(--line); }
.opt.is-right .letter { background: var(--ok); color: #fff; }
.opt.is-mine-wrong { background: var(--warn-soft); border-color: var(--line); }
.opt.is-mine-wrong .letter { background: var(--warn); color: #fff; }
[data-theme="dark"] .opt.is-right .letter, [data-theme="dark"] .opt.is-mine-wrong .letter, [data-theme="dark"] .opt:has(input:checked) .letter { color: #1C1B1A; }
.opt.is-right .mark, .opt.is-mine-wrong .mark { color: var(--ink); }
.feedback .verdict { border-bottom: 2px solid var(--line); font-size: 20px; }
.feedback .verdict.ok { background: var(--pill-green); color: var(--ink); }
.feedback .verdict.no { background: var(--sticky); color: #1C1B1A; }
.key-learning {
  background: var(--sticky); color: #1C1B1A; border: 2px solid #1C1B1A; border-radius: 4px;
  box-shadow: var(--shadow-sm); transform: rotate(-.6deg);
}
.key-learning .k, .key-learning strong { color: #1C1B1A !important; font-family: var(--hand); }
.key-learning strong { font-size: 18px; }
.scenario .kicker { color: var(--ink); background: var(--pill-yellow); align-self: flex-start; padding: 0 8px; border-radius: 6px; }

/* ---------- Login ---------- */
.bare .auth-card { position: relative; }
.bare .auth-card::after {
  content: "✦"; position: absolute; top: -18px; right: -12px; font-size: 30px; color: #F5B700;
  text-shadow: 1px 1px 0 #1C1B1A;
}
.auth-brand .brand-mark { background: #FFFFFF; color: #1C1B1A; }

/* ---------- Mobile cards ---------- */
@media (max-width: 640px) {
  .tbl-cards tr { border: 2px solid var(--line); box-shadow: var(--shadow-sm); }
  .page-head h1 { font-size: 23px; }
}

/* ---------- Respect reduced motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .opt { transition: none; }
  .alert-warn, .alert-error, .key-learning { transform: none; }
}
@media print {
  body { background: #FFFFFF; }
  .card, .stat, .alert, .opt, .key-learning, .qpreview { box-shadow: none !important; transform: none !important; border-width: 1px; }
  .page-head h1 { background: none; padding: 0; }
  .stats > .stat { border-top-width: 1px !important; }
}

/* Sketch additions for nav groups, pill, ISO cards and checklist */
.nav-group { font-family: var(--hand); text-transform: none; letter-spacing: .02em; font-size: 12.5px; color: #F5C842; opacity: .9; }
.cycle-pill { border: 2px solid var(--line); background: var(--pill-green); color: var(--ink); font-family: var(--hand); box-shadow: 2px 2px 0 var(--shadow-ink); }
.eyebrow { font-family: var(--hand); color: var(--ink); background: var(--pill-yellow); display: table; padding: 0 8px; border-radius: 6px; letter-spacing: .02em; }
.iso-card .std { font-family: var(--hand); color: var(--ink); }
.check-mark { border: 2px solid var(--line); font-family: var(--hand); }
.check-mark.ok { background: var(--pill-green); color: var(--ink); }
.check-mark.partial { background: var(--sticky); color: #1C1B1A; }
.check-mark.missing { background: var(--surface); color: var(--muted); }
.check-mark.manual { background: var(--pill-blue); color: var(--ink); }
.bar.mid > span { background: #E5B800; }

/* Sketch: clip cards */
.video-card { border: 2px solid var(--line); box-shadow: var(--shadow); transition: transform .08s ease, box-shadow .08s ease; }
.video-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-ink); }
.video-card .thumb { border-bottom: 2px solid var(--line); }
.video-card .play { background: var(--sticky); color: #1C1B1A; border: 2px solid #1C1B1A; box-shadow: 2px 2px 0 #1C1B1A; }
.video-card .done-badge { background: var(--pill-green); color: #1C1B1A; border: 2px solid #1C1B1A; font-family: var(--hand); }
.video-frame { border: 2px solid var(--line); box-shadow: var(--shadow); }

.btn-google { border-color: var(--line); }
.btn-line, .btn-facebook { border-color: #1C1B1A; }

/* Wrong answers are red (correct answers stay green) */
.feedback .verdict.no { background: #E03131; color: #FFFFFF; }
.opt.is-mine-wrong { background: #FFE3E3; border-color: #E03131; }
.opt.is-mine-wrong .letter { background: #E03131; color: #FFFFFF; border-color: #1C1B1A; }
.opt.is-mine-wrong .mark { color: #E03131; }
.chip-bad { background: #E03131; color: #FFFFFF; }
[data-theme="dark"] .opt.is-mine-wrong { background: #4A1A1A; border-color: #FF6B6B; }
[data-theme="dark"] .opt.is-mine-wrong .mark { color: #FF8787; }