/* School Apps v2: layout on top of Ferri UI (/assets/ui/ferri-ui.css). Tokens only.
   Pages: home (/school/), schedule, duty, radio admin. The radio widget lives in radio-v2.css. */

/* ---------- Thai typography ---------- */
/* Thai stacks vowels and tone marks above and below the line, so it needs more leading than Latin. */
html:lang(th) body.fx { line-height: 1.6; }
html:lang(th) .fx :where(h1, h2, h3, h4) { line-height: 1.35; letter-spacing: 0; }
html:lang(th) .fx-item__title, html:lang(th) .fx-item__meta { line-height: 1.55; }
html:lang(th) .fx-pagehead h1 { letter-spacing: 0; }

/* ---------- Shared bits ---------- */
.sc-lang > button { min-width: 44px; justify-content: center; }
.sc-lang { flex: none; }
.sc-foot { margin-top: var(--fx-10); padding-top: var(--fx-5); border-top: 1px solid var(--fx-line); display: flex; flex-wrap: wrap; gap: var(--fx-3); align-items: center; justify-content: space-between; color: var(--fx-fg-3); font-size: var(--fx-t-sm); }
.sc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--fx-3) var(--fx-6); margin-bottom: var(--fx-6); }
.sc-head__title { display: flex; flex-direction: column; gap: var(--fx-1); min-width: 0; }
.sc-head__title h1 { font-size: var(--fx-t-xl); }
.sc-head__title p { color: var(--fx-fg-2); }
@media (min-width: 768px) { .sc-head__title h1 { font-size: var(--fx-t-2xl); } }
.sc-clock { font-family: var(--fx-font); font-variant-numeric: tabular-nums; font-size: var(--fx-t-xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--fx-fg); white-space: nowrap; }
.sc-clock__s { color: var(--fx-fg-3); }
@media (min-width: 768px) { .sc-clock { font-size: var(--fx-t-2xl); } }
.sc-section-gap { margin-top: var(--fx-8); }
.sc-muted-note { color: var(--fx-fg-3); font-size: var(--fx-t-sm); }

/* ---------- Home: the "now" card ---------- */
.now { padding: var(--fx-5); display: grid; gap: var(--fx-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .now { padding: var(--fx-8); } }
@media (min-width: 960px) { .now { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--fx-8); align-items: end; } }
.now__main { display: flex; flex-direction: column; gap: var(--fx-3); min-width: 0; }
.now__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-2); }
.now__kicker { font-size: var(--fx-t-sm); font-weight: 550; color: var(--fx-fg-2); }
.now__subject { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
html:lang(th) .now__subject { line-height: 1.35; letter-spacing: 0; }
.now__meta { color: var(--fx-fg-2); font-size: var(--fx-t-base); }
.now__count { display: flex; flex-direction: column; gap: var(--fx-2); min-width: 0; }
.now__count-label { font-size: var(--fx-t-sm); color: var(--fx-fg-2); font-weight: 550; }
.now__count-value { font-family: var(--fx-font); font-variant-numeric: tabular-nums; font-size: clamp(3rem, 1.8rem + 5.6vw, 6rem); font-weight: 650; letter-spacing: -0.05em; line-height: 1; color: var(--fx-fg); white-space: nowrap; }
.now__count-value .is-unit { font-family: var(--fx-font); font-size: .42em; letter-spacing: 0; font-weight: 550; color: var(--fx-fg-2); margin: 0 .18em 0 .06em; }
.now__bar { height: 8px; }
.now__bar-meta { display: flex; justify-content: space-between; gap: var(--fx-3); font-size: var(--fx-t-xs); color: var(--fx-fg-3); font-family: var(--fx-mono); }
.now__next { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--fx-3); padding-top: var(--fx-4); border-top: 1px solid var(--fx-line); min-width: 0; }
.now__next-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--fx-surface-2); color: var(--fx-fg-2); font-size: 18px; }
.now__next-body { display: flex; flex-direction: column; min-width: 0; }
.now__next-label { font-size: var(--fx-t-xs); color: var(--fx-fg-3); font-weight: 500; }
.now__next-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now__next-time { margin-left: auto; flex: none; font-family: var(--fx-mono); font-size: var(--fx-t-sm); color: var(--fx-fg-2); }

.home-stats { margin-top: var(--fx-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-stats .fx-stat__value { font-size: var(--fx-t-lg); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .home-stats .fx-stat__value { font-size: var(--fx-t-xl); } }
.home-cols > .fx-section { margin-top: 0; }
.home-cols { display: grid; gap: var(--fx-8); grid-template-columns: minmax(0, 1fr); margin-top: var(--fx-8); }
@media (min-width: 960px) { .home-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--fx-6); align-items: start; } }

/* ---------- Period rows (home + schedule day view) ---------- */
.sc-period { display: flex; align-items: center; gap: var(--fx-3); padding: var(--fx-3) var(--fx-4); min-height: 60px; position: relative; }
.sc-period__time { flex: none; width: 52px; display: flex; flex-direction: column; font-family: var(--fx-mono); font-size: var(--fx-t-sm); line-height: 1.35; color: var(--fx-fg); }
.sc-period__time span + span { color: var(--fx-fg-3); }
.sc-period__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sc-period__subject { font-weight: 550; overflow-wrap: anywhere; }
.sc-period__meta { font-size: var(--fx-t-sm); color: var(--fx-fg-2); overflow-wrap: anywhere; }
.sc-period__trail { flex: none; display: flex; align-items: center; gap: var(--fx-2); font-size: var(--fx-t-sm); color: var(--fx-fg-3); }
.sc-period.is-free .sc-period__subject { color: var(--fx-fg-3); font-weight: 500; }
.sc-period.is-elective { background: color-mix(in srgb, var(--fx-surface-2) 55%, transparent); }
.sc-period.is-past .sc-period__subject, .sc-period.is-past .sc-period__time span { color: var(--fx-fg-3); }
.sc-period.is-past .sc-period__meta { color: var(--fx-fg-3); }
.sc-period.is-break { min-height: 40px; padding-block: var(--fx-2); background: var(--fx-surface-2); color: var(--fx-fg-2); font-size: var(--fx-t-sm); }
.sc-period.is-break .sc-period__time { font-size: var(--fx-t-xs); color: var(--fx-fg-3); }
.sc-period.is-break .sc-period__subject { font-weight: 500; color: var(--fx-fg-2); }
.sc-period.is-now { background: var(--fx-accent-soft); box-shadow: inset 3px 0 0 var(--fx-accent); }
.sc-period.is-now .sc-period__subject { color: var(--fx-fg); font-weight: 650; }
.sc-period.is-match { background: color-mix(in srgb, var(--fx-accent-soft) 70%, transparent); }
.sc-period__left { font-family: var(--fx-mono); font-size: var(--fx-t-xs); color: var(--fx-accent-ink); white-space: nowrap; }

/* ---------- Duty rows ---------- */
.sc-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fx-surface-2); color: var(--fx-fg-2); font-family: var(--fx-mono); font-size: var(--fx-t-sm); font-weight: 600; }
.sc-duty-row { display: flex; align-items: center; gap: var(--fx-3); padding: var(--fx-3) var(--fx-4); min-height: 56px; }
.sc-duty-row__name { font-weight: 600; overflow-wrap: anywhere; }
.sc-duty-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-duty-row__duty { font-size: var(--fx-t-sm); color: var(--fx-fg-2); }
.sc-duty-row__trail { flex: none; font-size: var(--fx-t-sm); color: var(--fx-fg-3); text-align: right; }
.sc-duty-row.is-match { background: var(--fx-accent-soft); }

/* ---------- Schedule page ---------- */
.sc-live { display: flex; align-items: center; gap: var(--fx-3); padding: var(--fx-4) var(--fx-5); margin-bottom: var(--fx-5); flex-wrap: wrap; }
.sc-live__body { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.sc-live__label { font-size: var(--fx-t-xs); color: var(--fx-fg-3); font-weight: 500; }
.sc-live__title { font-weight: 650; font-size: var(--fx-t-md); overflow-wrap: anywhere; }
.sc-live__meta { font-size: var(--fx-t-sm); color: var(--fx-fg-2); }
.sc-live__count { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.sc-live__count-value { font-variant-numeric: tabular-nums; font-size: var(--fx-t-xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
.sc-live__count-label { font-size: var(--fx-t-xs); color: var(--fx-fg-3); }
.sc-toolbar { display: flex; flex-wrap: wrap; gap: var(--fx-3); align-items: center; margin-bottom: var(--fx-5); }
.sc-toolbar .sc-search { flex: 1 1 260px; min-width: 0; }
.sc-search .fx-input { padding-right: 40px; }
.sc-search__clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--fx-fg-3); display: grid; place-items: center; cursor: pointer; }
.sc-search__clear:hover { background: var(--fx-surface-2); color: var(--fx-fg); }
.sc-daysel { max-width: 100%; }
.sc-daysel > button { position: relative; }
.sc-daysel .is-today-dot::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--fx-accent); }
.sc-daysel .sc-full { display: none; }
@media (min-width: 900px) { .sc-daysel .sc-full { display: inline; } .sc-daysel .sc-short { display: none; } }
.sc-results { margin-bottom: var(--fx-6); }
.sc-dayhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fx-3); margin-bottom: var(--fx-3); }
.sc-dayhead h2 { font-size: var(--fx-t-md); }
.sc-stack { display: flex; flex-direction: column; gap: var(--fx-6); }

.sc-week { table-layout: fixed; }
.sc-week th, .sc-week td { vertical-align: top; }
.sc-week thead th { font-size: var(--fx-t-sm); color: var(--fx-fg-2); font-weight: 600; }
.sc-week thead th.is-today { color: var(--fx-accent-ink); }
.sc-week col.sc-week__timecol { width: 112px; }
.sc-week tbody th { text-align: left; font-weight: 550; font-size: var(--fx-t-sm); color: var(--fx-fg); padding: 12px var(--fx-4); border-bottom: 1px solid var(--fx-line); background: color-mix(in srgb, var(--fx-surface-2) 35%, var(--fx-surface)); }
.sc-week tbody th span { display: block; font-family: var(--fx-mono); font-size: var(--fx-t-xs); color: var(--fx-fg-3); font-weight: 400; }
.sc-week td { font-size: var(--fx-t-sm); line-height: 1.45; }
.sc-week td.is-today { background: color-mix(in srgb, var(--fx-accent-soft) 45%, transparent); }
.sc-week td .sc-cell__subject { font-weight: 600; color: var(--fx-fg); overflow-wrap: anywhere; }
.sc-week td .sc-cell__teacher { color: var(--fx-fg-2); font-size: var(--fx-t-xs); overflow-wrap: anywhere; }
.sc-week td.is-free .sc-cell__subject { color: var(--fx-fg-3); font-weight: 500; }
.sc-week td.is-elective { background: color-mix(in srgb, var(--fx-surface-2) 60%, transparent); }
.sc-week td.is-now { background: var(--fx-accent-soft); box-shadow: inset 0 0 0 2px var(--fx-accent); }
.sc-week td.is-match { background: color-mix(in srgb, var(--fx-accent-soft) 80%, transparent); box-shadow: inset 0 0 0 1px var(--fx-accent-line); }
.sc-week.has-query td:not(.is-match):not(.sc-week__break) .sc-cell__subject { color: var(--fx-fg-3); }
.sc-week tr.sc-week__break th, .sc-week tr.sc-week__break td { padding-block: 6px; background: var(--fx-surface-2); color: var(--fx-fg-2); font-size: var(--fx-t-xs); }
.sc-week tbody tr:hover { background: none; }
.sc-week-mobile { display: none; }
@media (max-width: 767px) { .sc-week-desktop { display: none; } .sc-week-mobile { display: flex; } }

/* ---------- Duty page ---------- */
.duty-stats { margin-bottom: var(--fx-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .duty-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.duty-stats .fx-stat__value { font-size: var(--fx-t-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .duty-stats .fx-stat__value { font-size: var(--fx-t-xl); } }
.duty-table { table-layout: fixed; }
.duty-table col.duty-table__day { width: 104px; }
.duty-table thead th { white-space: normal; line-height: 1.4; font-size: var(--fx-t-xs); vertical-align: bottom; }
.duty-table td, .duty-table tbody th { font-size: var(--fx-t-sm); overflow-wrap: anywhere; }
.duty-table tbody th { text-align: left; font-weight: 600; padding: 12px var(--fx-4); border-bottom: 1px solid var(--fx-line); }
.duty-table td span { display: block; font-family: var(--fx-mono); font-size: var(--fx-t-xs); color: var(--fx-fg-3); }
.duty-table tr.is-today th, .duty-table tr.is-today td { background: var(--fx-accent-soft); }
.duty-table tr.is-today th { color: var(--fx-accent-ink); }
.duty-table td.is-match { box-shadow: inset 0 0 0 2px var(--fx-accent); }
.duty-week-mobile { display: none; gap: var(--fx-2); }
.duty-table tbody tr:last-child th { border-bottom: 0; }
.sc-fold { border: 1px solid var(--fx-line); border-radius: var(--fx-r-surface); background: var(--fx-surface); overflow: hidden; }
.sc-fold > summary { display: flex; align-items: center; gap: var(--fx-2); min-height: 52px; padding: 0 var(--fx-4); cursor: pointer; list-style: none; font-weight: 600; }
.sc-fold > summary::-webkit-details-marker { display: none; }
.sc-fold > summary .ph { margin-left: auto; color: var(--fx-fg-3); transition: transform var(--fx-fast) var(--fx-ease); }
.sc-fold[open] > summary { border-bottom: 1px solid var(--fx-line); }
.sc-fold[open] > summary .ph { transform: rotate(180deg); }
.sc-fold > .fx-list > * + * { border-top: 1px solid var(--fx-line); }
@media (max-width: 899px) { .duty-week-desktop { display: none; } .duty-week-mobile { display: flex; } }

.tui { background: var(--fx-sunken); border: 1px solid var(--fx-line); border-radius: var(--fx-r-surface); padding: var(--fx-4); font-family: var(--fx-mono); font-size: var(--fx-t-sm); color: var(--fx-fg); cursor: text; }
.tui__top { display: flex; justify-content: space-between; gap: var(--fx-3); padding-bottom: var(--fx-3); margin-bottom: var(--fx-3); border-bottom: 1px solid var(--fx-line); color: var(--fx-fg-3); font-size: var(--fx-t-xs); }
.tui__screen { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; min-height: 360px; max-height: 60vh; overflow: auto; margin: 0 0 var(--fx-2); font: inherit; }
.tui__line { display: flex; align-items: center; gap: var(--fx-2); }
.tui__prompt { color: var(--fx-accent-ink); font-weight: 600; white-space: nowrap; }
.tui__input { flex: 1; min-width: 0; height: 32px; border: 0; outline: 0; background: transparent; color: var(--fx-fg); font: inherit; caret-color: var(--fx-accent); }
@media (max-width: 767px) { .tui__input { font-size: 16px; } }

.duty-admin-list { display: flex; flex-direction: column; }
.duty-admin-list .sc-duty-row { min-height: 48px; padding: var(--fx-2) var(--fx-3); }

/* ---------- Radio admin ---------- */
.ra-target { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fx-3); }
.ra-target .fx-field { flex: 1 1 240px; }
.ra-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-4); border: 0; border-radius: 0; background: none; overflow: visible; }
.ra-readout .fx-stat { padding: 0; background: none; }
@media (min-width: 1100px) { .ra-readout { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ra-readout .fx-stat__value { font-size: var(--fx-t-md); line-height: 1.35; overflow-wrap: anywhere; }
.ra-readout .fx-stat__value.is-muted { color: var(--fx-fg-3); font-weight: 500; }
.ra-block { display: flex; flex-direction: column; gap: var(--fx-3); padding: var(--fx-5); }
.ra-block + .ra-block { border-top: 1px solid var(--fx-line); }
.ra-block h3 { font-size: var(--fx-t-base); }
.ra-block__row { display: flex; flex-wrap: wrap; gap: var(--fx-2); align-items: center; }
.ra-block__row > .fx-btn { flex: 1 1 auto; }
.ra-transport { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fx-2); }
.ra-slider { display: flex; align-items: center; gap: var(--fx-3); }
.ra-slider input[type="range"] { flex: 1; accent-color: var(--fx-accent); min-width: 0; }
.ra-slider output { font-family: var(--fx-mono); min-width: 4ch; text-align: right; }
.ra-devices .fx-item { cursor: pointer; }
.ra-devices .fx-item[aria-current="true"] { background: var(--fx-accent-soft); box-shadow: inset 3px 0 0 var(--fx-accent); }
.ra-devices .fx-item__meta { white-space: normal; }
.ra-devices .ra-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ra-device-dot { width: 36px; height: 36px; }