/* Palette: stone + blueprint (tasteskill "stone-blueprint"), type: Host Grotesk + JetBrains Mono */
:root {
  --bg: #dfdedb; --surface: #d3d2ce; --ink: #26251e; --muted: #5a5850;
  --accent: #2456d6; --accent-ink: #ffffff;
  --card: #ebeae7; --line: rgba(38, 37, 30, .14);
  --ok: #1f6b3b; --ok-bg: #cfe3d3; --err: #9b2c1f; --err-bg: #ecd2cc;
  --font: "Host Grotesk", "Noto Sans Thai", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--font); }
h1, h2 { font-weight: 500; letter-spacing: -.03em; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: 1.15rem; letter-spacing: -.02em; }
p { margin: 0; }
a { color: inherit; }
code, .mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.sub { color: var(--muted); margin-top: .6rem; max-width: 46ch; }

/* buttons */
.btn { appearance: none; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font: 500 15px/1 var(--font); padding: 13px 18px; border-radius: var(--r); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .15s, background .15s, box-shadow .15s; }
.btn:hover { background: #1b45b3; box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface); border-color: rgba(38,37,30,.3); }
.btn.sm { padding: 8px 11px; font-size: 13px; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* forms */
.stack { display: grid; gap: 16px; margin-top: 24px; }
.f { display: grid; gap: 6px; }
.f span { font-size: 13px; color: var(--muted); }
input, select { font: 400 16px var(--font); color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 13px; width: 100%; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36, 86, 214, .18); }
.alert { padding: 12px 14px; border-radius: var(--r); font-size: 14px; margin-top: 20px; }
.alert.err { background: var(--err-bg); color: var(--err); }
.alert.ok { background: var(--ok-bg); color: var(--ok); }
.alert code { background: rgba(255,255,255,.55); padding: 2px 6px; border-radius: 6px; }
.secret { font-size: 1.05em; letter-spacing: .04em; user-select: all; }

/* auth */
body.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-wrap { width: min(420px, 100%); }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; margin-top: 28px; }
.auth-foot { margin-top: 20px; font-size: 13px; color: var(--muted); text-align: center; }
.qr { width: 196px; margin: 22px 0 8px; background: #fff; padding: 10px; border-radius: var(--r); border: 1px solid var(--line); }
.qr svg { display: block; width: 100%; height: auto; }
.manual { margin-top: 10px; font-size: 14px; color: var(--muted); }
.manual summary { cursor: pointer; }
.manual code { display: block; margin-top: 8px; word-break: break-all; color: var(--ink); user-select: all; }

/* brand */
.mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 500; letter-spacing: -.02em; font-size: 17px; }
.mark b { font-weight: 500; color: var(--muted); }
.mark-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

/* app shell */
.top { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 5; }
.top-in { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.top nav { display: flex; gap: 4px; flex: 1; }
.top nav a { text-decoration: none; padding: 7px 12px; border-radius: 8px; color: var(--muted); font-size: 15px; transition: color .15s, background .15s; }
.top nav a:hover { color: var(--ink); background: var(--surface); }
.top nav a.on { color: var(--ink); background: var(--surface); }
.who { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.page { max-width: 1120px; margin: 0 auto; padding: 56px 24px 96px; }
.head { margin-bottom: 36px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.card { display: flex; flex-direction: column; gap: 12px; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(38,37,30,.08); }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.card p { color: var(--muted); font-size: 15px; }
dl { margin: 6px 0 0; display: grid; gap: 8px; }
dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
dt { color: var(--muted); } dd { margin: 0; }
.tag { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface); color: var(--muted); white-space: nowrap; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.off { background: var(--err-bg); color: var(--err); }

.panel { margin-top: 20px; }
.panel h2 { margin-bottom: 16px; }
.row-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: end; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 8px 12px; border-bottom: 1px solid var(--line); }
td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.acts form { margin: 0; }

@media (max-width: 640px) {
  .top-in { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .page { padding: 36px 16px 72px; }
  .auth-card { padding: 26px 20px; }
  .who span { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Step ---- */
.page.wide { max-width: 1400px; }
.stretch { text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.card.live { position: relative; cursor: pointer; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); padding-bottom: 12px; }
.check input { width: auto; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.clickrow { position: relative; }
.rowlink { text-decoration: none; } .rowlink::after { content: ""; position: absolute; inset: 0; }
.clickrow:hover td { background: rgba(255,255,255,.35); }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.titles { flex: 1; min-width: 280px; display: grid; gap: 6px; }
.h1-input, .sub-input { background: transparent; border: 1px solid transparent; padding: 4px 8px; margin-left: -8px; border-radius: 8px; width: calc(100% + 8px); }
.h1-input { font: 500 clamp(1.7rem, 3.4vw, 2.3rem)/1.15 var(--font); letter-spacing: -.03em; }
.sub-input { font-size: 16px; color: var(--muted); }
.h1-input:hover, .sub-input:hover { border-color: var(--line); }
.h1-input:focus, .sub-input:focus { background: var(--card); }
.head-act { display: flex; align-items: center; gap: 14px; }
.saved { font-size: 13px; color: var(--ok); min-width: 70px; text-align: right; }
.saved.bad { color: var(--err); }
.btn.danger, .ico.danger:hover { color: var(--err); }

.sheet { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; }
table.steps { min-width: 980px; table-layout: fixed; }
table.steps th { background: var(--surface); padding: 11px 10px; border-bottom: 1px solid var(--line); text-transform: none; font-size: 13px; letter-spacing: 0; color: var(--ink); }
table.steps th small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
table.steps td { padding: 5px 6px; }
.idx { width: 38px; text-align: center; color: var(--muted); font-size: 12px; font-family: var(--mono); }
.c-srv { width: 130px; } .c-dur { width: 96px; text-align: center; } .c-act { width: 170px; }
.c-rem { width: 26%; } .c-step { width: 30%; }
table.steps input:not([type=checkbox]) { border-color: transparent; background: transparent; padding: 8px; border-radius: 8px; font-size: 14.5px; }
table.steps input:not([type=checkbox]):hover:not(:disabled) { border-color: var(--line); }
table.steps input:not([type=checkbox]):focus { background: #fff; border-color: var(--accent); }
.dur input { text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.dur input::-webkit-outer-spin-button, .dur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
tr.na .dur { background: repeating-linear-gradient(135deg, var(--surface) 0 6px, #cbcac6 6px 7px); }
tr.na .dur input { opacity: 0; }
.c-act { white-space: nowrap; text-align: right; }
.na-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-right: 6px; cursor: pointer; }
.na-toggle input { width: auto; }
.ico { background: none; border: 0; width: 28px; height: 28px; border-radius: 7px; color: var(--muted); cursor: pointer; font-size: 14px; transition: background .15s, color .15s; }
.ico:hover { background: var(--surface); color: var(--ink); }
tr:not(:hover):not(:focus-within) .c-act .ico { opacity: .35; }
tfoot td { border-top: 1px solid var(--line); border-bottom: 0; padding: 12px 10px; font-weight: 500; }
.tot-label { text-align: right; color: var(--muted); font-weight: 400; }
.tot { text-align: center; font-variant-numeric: tabular-nums; }
.sheet-foot { margin-top: 12px; }

.pill, select.pill { appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; padding: 6px 28px 6px 12px; font: 500 13px/1.2 var(--font); width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
span.pill { display: inline-block; width: auto; padding: 5px 12px; background-image: none; cursor: default; }
.pill.c-green { background-color: #cfe3d3; color: #1f6b3b; }
.pill.c-blue { background-color: #cddcf5; color: #1b45b3; }
.pill.c-navy { background-color: #1f2a63; color: #fff; }
.pill.c-amber { background-color: #f0dfb4; color: #7a5200; }
.pill.c-rose { background-color: #ecd2cc; color: #9b2c1f; }
.pill.c-grey { background-color: #cfcdc8; color: #4a4840; }
.pill.c-none { background-color: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
select.pill option { background: #fff; color: var(--ink); }

.servers summary { display: flex; align-items: baseline; gap: 14px; cursor: pointer; list-style: none; }
.servers summary::-webkit-details-marker { display: none; }
.servers[open] summary { margin-bottom: 16px; }
.srv-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.srv-list li { display: grid; grid-template-columns: 120px 1fr 120px 32px; gap: 10px; align-items: center; }
.srv-add { display: grid; grid-template-columns: 1fr 120px auto; gap: 10px; }
@media (max-width: 640px) { .srv-list li { grid-template-columns: 1fr 100px 32px; } .srv-list li .pill { display: none; } .srv-add { grid-template-columns: 1fr; } }

/* Step: typed server + computed #3 */
table.steps input.pill { background-image: none; padding: 6px 12px; text-align: center; border: 0; }
table.steps input.pill.c-none:hover { box-shadow: inset 0 0 0 1px rgba(38,37,30,.3); }
table.steps input.pill:focus { box-shadow: 0 0 0 2px var(--accent); }
table.steps input.pill::placeholder { color: var(--muted); opacity: .7; }
td.calc { text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); background: rgba(36,86,214,.06); }
tr.na td.calc { background: repeating-linear-gradient(135deg, var(--surface) 0 6px, #cbcac6 6px 7px); }
table.steps input.invalid { box-shadow: 0 0 0 2px var(--err) !important; }
table.steps input.pill.c-green { background-color: #cfe3d3; color: #1f6b3b; }
table.steps input.pill.c-blue { background-color: #cddcf5; color: #1b45b3; }
table.steps input.pill.c-navy { background-color: #1f2a63; color: #fff; }
table.steps input.pill.c-amber { background-color: #f0dfb4; color: #7a5200; }
table.steps input.pill.c-rose { background-color: #ecd2cc; color: #9b2c1f; }
table.steps input.pill.c-grey { background-color: #cfcdc8; color: #4a4840; }
table.steps input.pill.c-none { background-color: transparent; color: var(--ink); }
table.steps input.pill:focus { background-color: #fff; color: var(--ink); }

/* ---- Tele (admin) ---- */
.linkbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.linkbar > div:first-child { display: grid; gap: 2px; min-width: 0; }
.linkbar code { word-break: break-all; }
.linkbar-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin-left: 6px; }
.switch input { width: auto; }
.slot-add { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.slots { margin-top: 20px; display: grid; gap: 12px; }
.empty { padding: 24px 4px; }
.slot-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.slot-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.slot-head input, .bookings input, .book-add input { padding: 8px 10px; font-size: 14.5px; border-radius: 8px; background: transparent; border-color: transparent; }
.slot-head input:hover, .bookings input:hover, .book-add input:hover { border-color: var(--line); }
.slot-head input:focus, .bookings input:focus, .book-add input:focus { background: #fff; }
.slot-head input[type=date] { width: 150px; } .slot-head input[type=time] { width: 106px; }
.slot-head input[data-sfield=label] { flex: 1; min-width: 120px; }
.slot-head .dash { color: var(--muted); }
.cap { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cap input { width: 64px; text-align: center; }
.bookings { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bookings li, .book-add { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: 8px; align-items: center; }
.bookings li { background: rgba(255,255,255,.4); border-radius: 10px; padding: 2px 6px; }
.book-add { padding: 0 6px; }
input.invalid { box-shadow: 0 0 0 2px var(--err) !important; }
@media (max-width: 720px) { .bookings li, .book-add { grid-template-columns: 1fr; } }

/* ---- Tele (public, Thai) ---- */
body.pub { min-height: 100vh; display: flex; flex-direction: column; }
.pub-wrap { width: min(640px, 100%); margin: 0 auto; padding: 56px 20px 40px; flex: 1; }
.pub-foot { text-align: center; font-size: 13px; color: var(--muted); padding: 24px; }
.pub-head { margin-bottom: 32px; }
.pub-kicker { font-size: 14px; color: var(--accent); font-weight: 500; margin-bottom: 10px; }
.pub-desc { color: var(--muted); margin-top: 12px; white-space: pre-line; }
.pub-empty { padding: 32px 0; }
.pub-day { margin-top: 28px; display: grid; gap: 8px; }
.pub-day h2 { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-bottom: 4px; }
.pub-slot { background: var(--card); border: 1px solid var(--line); border-radius: 14px; transition: box-shadow .2s, transform .2s; }
.pub-slot:not(.full):hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(38,37,30,.08); }
.pub-slot[open] { transform: none; box-shadow: 0 0 0 2px var(--accent); }
.slot-sum { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.pub-slot.full .slot-sum { cursor: default; opacity: .55; }
.slot-sum::-webkit-details-marker { display: none; }
.slot-time { font-weight: 500; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.slot-label { color: var(--muted); flex: 1; }
.slot-left { font-size: 13px; color: var(--ok); background: var(--ok-bg); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pub-slot.full .slot-left { color: var(--err); background: var(--err-bg); }
.slot-pick { font-size: 14px; font-weight: 500; color: var(--accent); }
.pub-form { display: grid; gap: 14px; padding: 4px 18px 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pub-sum { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 18px; margin: 0; }
.pub-sum div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.pub-sum div:first-child { border-top: 0; }
.pub-sum dd { text-align: right; }
.pub-hint { margin-top: 18px; font-size: 14px; }
.pub-actions { margin-top: 20px; }
.pub-cancel { margin-top: 32px; font-size: 14px; color: var(--muted); }
.pub-cancel summary { cursor: pointer; }
.pub-cancel form { margin-top: 12px; display: grid; gap: 10px; justify-items: start; }
@media (max-width: 480px) { .slot-sum { flex-wrap: wrap; } .slot-label { order: 3; flex-basis: 100%; } }

/* ---- Dashboard ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 2px; }
.tile-l { font-size: 13px; color: var(--muted); }
.tile-v { font-size: 2rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile-n { font-size: 13px; color: var(--muted); }
.tile.warn { border-color: rgba(122, 82, 0, .35); background: #f0e6c9; }
.tile.warn .tile-v { color: #7a5200; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 520px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-grid .panel { margin-top: 0; }
.mod-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.mod-head h2 { margin-bottom: 2px; }
.mod-head h2 a { text-decoration: none; }
.mod-head h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mod-head p { font-size: 14px; }
.mod-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.tag.warn { background: #f0dfb4; color: #7a5200; }
.above { position: relative; z-index: 1; font-size: 12px; }
.bar-cell { white-space: nowrap; }
.bar-cell .muted { margin-left: 8px; font-size: 13px; }
meter { width: 90px; height: 8px; vertical-align: middle; appearance: none; -webkit-appearance: none; border-radius: 99px; background: var(--surface); border: 0; overflow: hidden; }
meter::-webkit-meter-bar { background: var(--surface); border: 0; border-radius: 99px; height: 8px; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--accent); border-radius: 99px; }
meter::-moz-meter-bar { background: var(--accent); border-radius: 99px; }
.mark-icon { border-radius: 6px; display: block; }