/* ───────────── fonts (self-hosted, Latin + Thai) ───────────── */
@font-face {
  font-family: "Pacifico"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/pacifico-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2019, U+2026;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/fraunces-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/fonts/fraunces-latin-500-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Serif Thai"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/noto-serif-thai-thai-500-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-sans-thai-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/ibm-plex-sans-thai-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-sans-thai-thai-400-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/ibm-plex-sans-thai-thai-600-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* ───────────── tokens ───────────── */
:root {
  color-scheme: light;
  --bg: #F4F0E2;          /* background */
  --surface: #FBF8EF;     /* cards, lighter tint of the background */
  --ink: #D46743;         /* primary text */
  --muted: #A24E2E;       /* small secondary text: darker shade of the primary for legibility */
  --line: #BFE7EA;        /* support colour 2 */
  --sacral: #A6C8E2;      /* support colour 1 */

  --yes: #3A9BA3;      --yes-ink: #1F6E75;   --yes-tint: #BFE7EA;
  --no: #D46743;       --no-ink: #A24E2E;    --no-tint: #F9D3C0;
  --maybe: #E89B5B;    --maybe-ink: #9A5A1C; --maybe-tint: #FAD9B8;

  --serif: "Fraunces", "Noto Serif Thai", Georgia, serif;
  --sans: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 1.25rem;
}

/* ───────────── base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
}
html[lang="th"] body { line-height: 1.7; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.shell { max-width: 44rem; margin: 0 auto; padding: 1rem 1.25rem 4rem; }

/* ───────────── header ───────────── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0 1rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font: italic 500 1.6rem/1 var(--serif); color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand svg { width: 1.6rem; height: 1.6rem; color: var(--sacral); }
.top-tools { display: flex; align-items: center; gap: 0.75rem; }

.lang {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--line); border-radius: 999px; background-color: var(--surface); color: var(--muted);
  font: 400 0.75rem/1 var(--sans); padding: 0.3rem 1.4rem 0.3rem 0.65rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A24E2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 0.55rem;
}

.tabs { display: flex; gap: 1.75rem; border-bottom: 1.5px solid var(--line); margin-bottom: 2rem; }
.tabs a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0 0.7rem; color: var(--muted); text-decoration: none; font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -1.5px;
}
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--sacral); }
.badge { min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: var(--maybe-tint); color: var(--maybe-ink); font-size: 0.8rem; text-align: center; font-weight: 600; }

/* ───────────── buttons ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.9rem; padding: 0.55rem 1.4rem; border-radius: 999px;
  border: 2px solid var(--ink); background: transparent; font-weight: 600;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:disabled { opacity: 0.55; cursor: progress; }
.btn-quiet { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; padding-inline: 0.5rem; }
.btn-danger { border-color: #b3261e; color: #b3261e; }
.btn-danger.confirm { background: #b3261e; color: #fff; }
.btn-sm { min-height: 2.4rem; padding: 0.3rem 1rem; font-size: 0.9rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* ───────────── ask: compose ───────────── */
.compose-stage { min-height: min(46svh, 22rem); display: flex; flex-direction: column; justify-content: center; }
.compose-card {
  background: var(--surface); border: 2px solid var(--line); border-radius: 1.75rem;
  padding: 1.1rem 1.25rem 1.25rem; text-align: center;
  animation: card-glow 3.6s ease-in-out infinite;
  transition: border-color 0.25s;
}
.compose-card:focus-within { border-color: var(--ink); animation: none; box-shadow: 0 0 0 5px rgba(212, 103, 67, 0.14); }
@keyframes card-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166, 200, 226, 0), 0 2px 10px rgba(166, 200, 226, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(166, 200, 226, 0.3), 0 4px 22px rgba(166, 200, 226, 0.55); }
}
@media (prefers-reduced-motion: reduce) { .compose-card { animation: none; box-shadow: 0 2px 12px rgba(166, 200, 226, 0.4); } }
.when { color: var(--muted); font-size: 0.95rem; text-align: center; margin-bottom: 0.75rem; }
.question-input {
  display: block; width: 100%; resize: none; overflow: hidden; text-align: center;
  border: 0; border-radius: 0; background: transparent; padding: 0.4rem 0 0.75rem;
  font: 500 clamp(1.4rem, 5vw, 2rem)/1.3 var(--serif);
}
html[lang="th"] .question-input { line-height: 1.5; }
.question-input::placeholder { color: var(--muted); opacity: 0.65; }
.question-input:focus-visible { outline: none; box-shadow: none; }
.compose-card .btn-primary { width: 100%; }
.compose-card .error { margin: 0 0 0.75rem; }
.ideas-toggle { display: flex; align-items: center; gap: 0.4rem; margin: 0.9rem auto 0; padding: 0.4rem 0.8rem; background: transparent; border: 0; color: var(--muted); font-size: 0.9rem; }
.ideas-toggle:hover { color: var(--ink); }
.ideas-toggle .chev { width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.ideas-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg) translateY(-2px); }
.suggest-panel { margin-top: 0.5rem; }
.maybe-link { margin-top: 0.75rem; text-align: center; font-size: 0.95rem; }
.maybe-link a { color: var(--maybe-ink); font-weight: 600; text-underline-offset: 4px; }

.suggest { margin-top: 0; }
.suggest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; }
.suggest-head h2 { font: 600 0.85rem/1.4 var(--sans); color: var(--muted); }
.suggest ul { list-style: none; margin: 0; padding: 0; }
.suggest li { border-top: 1.5px solid var(--line); }
.suggest li:last-child { border-bottom: 1.5px solid var(--line); }
.suggest-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 0.6rem 0.1rem; }
.suggest-item:hover .suggest-text { text-decoration: underline; text-underline-offset: 4px; }
.suggest-text { display: block; font: 500 1rem/1.4 var(--serif); }
html[lang="th"] .suggest-text { line-height: 1.55; }
.suggest-why { display: block; font-size: 0.85rem; color: var(--maybe-ink); margin-top: 0.15rem; }

/* ───────────── ask: asking ───────────── */
.asking { text-align: center; }
.asking:focus { outline: none; }
.orb-btn { display: block; margin: 0 auto; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.orb-btn:hover .core { filter: brightness(0.95); }
.orb-btn:active .orb { transform: scale(0.96); }
.orb { display: block; width: min(84vw, 19rem, 38svh); height: auto; margin: 0.25rem auto 0.75rem; overflow: visible; }
.orb .ring { fill: none; stroke: var(--sacral); stroke-width: 1.5; opacity: 0.28; transform-box: fill-box; transform-origin: center; }
.orb .orb-label { font: 600 14px/1 var(--sans); fill: #5E2C18; pointer-events: none; }
html:not([lang="th"]) .orb-label { font: 400 17px/1 "Pacifico", var(--sans); }
.orb .core { fill: #E89B5B; transform-box: fill-box; transform-origin: center; }
.asking.is-speaking .ring { animation: ripple 1.9s ease-out infinite; }
.asking.is-speaking .ring:nth-child(2) { animation-delay: 0.35s; }
.asking.is-speaking .ring:nth-child(1) { animation-delay: 0.7s; }
.asking.is-waiting .core { animation: breathe 4.5s ease-in-out infinite; }
@keyframes ripple { from { transform: scale(0.4); opacity: 0.6; } to { transform: scale(1); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .orb * { animation: none !important; } }

.status { color: var(--muted); min-height: 1.6em; }
.asked { margin: 0.25rem 0 1.25rem; font: 500 clamp(1.5rem, 5.5vw, 2.2rem)/1.25 var(--serif); text-wrap: balance; overflow-wrap: anywhere; }
html[lang="th"] .asked { line-height: 1.5; }

.answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.answer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  min-height: 5.25rem; padding: 0.5rem 0.4rem; border-radius: var(--radius);
  border: 2px solid currentColor; background: var(--tint); color: var(--c);
}
.answer:disabled { opacity: 0.6; cursor: progress; }
.answer .glyph { width: 1.9rem; height: 1.9rem; }
.answer .label { font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.answer .sound { font-size: 0.85rem; color: var(--muted); }
.answer:not(:disabled):hover { background: var(--c); }
.answer:not(:disabled):hover .glyph { color: var(--surface); }
.answer:not(:disabled):hover .label, .answer:not(:disabled):hover .sound { color: var(--surface); }
.is-yes { --c: var(--yes); --tint: var(--yes-tint); }
.is-no { --c: var(--no); --tint: var(--no-tint); }
.is-maybe { --c: var(--maybe); --tint: var(--maybe-tint); }

.asking-actions { margin-top: 0.75rem; justify-content: center; }
.hint { margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted); }
.error { margin-top: 1rem; color: #b3261e; font-weight: 600; }
.note-small { margin-top: 0.75rem; color: var(--muted); font-size: 0.9rem; }

/* ───────────── saved ───────────── */
h1.page { font: 500 clamp(1.7rem, 5vw, 2.2rem)/1.2 var(--serif); margin-bottom: 1.25rem; }
html[lang="th"] h1.page { line-height: 1.45; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filter {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.5rem; padding: 0.25rem 0.9rem; border-radius: 999px;
  border: 2px solid var(--line); background: transparent; font-weight: 600;
}
.filter .glyph { width: 1.1rem; height: 1.1rem; color: var(--c, var(--muted)); }
.filter .count { color: var(--muted); font-weight: 400; }
.filter[aria-pressed="true"] { border-color: var(--c, var(--ink)); background: var(--tint, var(--surface)); }
.search { width: 100%; max-width: 24rem; min-height: 2.6rem; padding: 0.4rem 1rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); margin-bottom: 1.25rem; }
.intro { color: var(--muted); margin-bottom: 1rem; max-width: 36rem; }

.entries { list-style: none; margin: 0; padding: 0; }
.entry { border-top: 1.5px solid var(--line); }
.entry:last-child { border-bottom: 1.5px solid var(--line); }
.entry-head { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.9rem; align-items: start; width: 100%; text-align: left; background: transparent; border: 0; padding: 1rem 0.1rem; }
.entry-head .glyph { width: 1.6rem; height: 1.6rem; margin-top: 0.2rem; color: var(--c); }
.entry-q { display: block; font: 500 1.2rem/1.4 var(--serif); overflow-wrap: anywhere; }
html[lang="th"] .entry-q { line-height: 1.55; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.entry-note-preview { margin-top: 0.35rem; color: var(--muted); font-size: 0.95rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.entry-panel { padding: 0 0.1rem 1.25rem 2.5rem; }
.entry-panel label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.entry-panel textarea { width: 100%; min-height: 5.5rem; padding: 0.7rem 0.9rem; border-radius: 0.9rem; border: 2px solid var(--line); background: var(--surface); resize: vertical; }
.entry-panel .row { margin-top: 0.75rem; }
.panel-group + .panel-group { margin-top: 1.1rem; }
.empty { padding: 2rem 0; max-width: 30rem; }
.empty p { margin-bottom: 1rem; color: var(--muted); }

/* ───────────── settings ───────────── */
.section { padding: 1.5rem 0; border-top: 1.5px solid var(--line); }
.section h2 { font: 600 1.1rem/1.4 var(--sans); margin-bottom: 0.9rem; }
.field { margin-bottom: 1.25rem; max-width: 28rem; }
.field label, .field .label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.field select, .field input[type="text"], .field input[type="password"] {
  width: 100%; min-height: 2.8rem; padding: 0.4rem 0.9rem; border-radius: 0.9rem; border: 2px solid var(--line); background: var(--surface);
}
.field .help { font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }
.slider { display: grid; grid-template-columns: 1fr 3.5rem; gap: 0.75rem; align-items: center; }
.slider input[type="range"] { width: 100%; accent-color: var(--sacral); min-height: 2rem; }
.slider output { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.status-line { min-height: 1.5em; color: var(--muted); font-size: 0.9rem; }

/* ───────────── auth ───────────── */
.auth { max-width: 26rem; margin: 0 auto; padding-top: 1rem; }
.auth .brand { font-size: 2.2rem; margin-bottom: 0.5rem; }
.auth .brand svg { width: 2.2rem; height: 2.2rem; }
.tagline { color: var(--muted); margin-bottom: 2rem; }
.auth h1 { font: 500 1.7rem/1.3 var(--serif); margin-bottom: 1.25rem; }
html[lang="th"] .auth h1 { line-height: 1.5; }
.auth .field { max-width: none; }
.auth-switch { margin-top: 1.25rem; }
.auth-switch button { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.auth-lang { display: flex; justify-content: flex-end; }

/* ───────────── toast ───────────── */
.toast { position: fixed; left: 0; right: 0; bottom: 1.25rem; z-index: 10; display: flex; justify-content: center; padding: 0 1rem; pointer-events: none; }
.toast-inner { pointer-events: auto; display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1.1rem; border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: 0 6px 24px rgb(0 0 0 / 0.25); }
.toast-inner button { background: transparent; border: 0; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; padding: 0.2rem 0.3rem; }
.toast-inner button:focus-visible { outline-color: var(--bg); }
.noscript { padding: 2rem; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 26rem) {
  .answer { min-height: 5rem; }
  .answer .label { font-size: 1rem; }
  .tabs { gap: 1.1rem; }
}

/* touch devices have no keyboard shortcuts: drop the hint so the ask screen fits without scrolling */
@media (pointer: coarse) { .hint { display: none; } }
@media (max-width: 40rem) {
  .shell { padding-top: 0.5rem; padding-bottom: 1rem; }
  .top { padding: 0.25rem 0 0.5rem; }
  .tabs { margin-bottom: 1rem; }
}
@media (max-height: 640px) {
  .orb { width: min(76vw, 17rem, 28svh); margin-bottom: 0.25rem; }
  .asked { margin-bottom: 0.75rem; font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .answer { min-height: 4.2rem; }
  .answer .glyph { width: 1.5rem; height: 1.5rem; }
  .asking-actions { margin-top: 0.25rem; }
  .tabs { margin-bottom: 0.5rem; }
}
@media (max-width: 40rem) {
  .top { flex-wrap: nowrap; gap: 0.5rem; }
  .top .brand { font-size: 1.35rem; gap: 0.45rem; }
  .top .brand svg { width: 1.35rem; height: 1.35rem; }
  .top-tools { gap: 0.6rem; }
  .top-tools .btn { padding-inline: 0.4rem; font-size: 0.85rem; }
}