/* Readin / 교실 운영판 — frontend-design readability revision, 2026-11-14.
   Earlier Hallmark Dose palette is superseded by the user's readability feedback.
   White working surface, blue actions, explicit attendance colors; local SUIT. */
@import url("./tokens.css");
@import url("./base.css");
body { min-width:320px; font-weight:500; }
button,a,input,select,textarea { -webkit-tap-highlight-color:var(--color-transparent); }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--color-focus); outline-offset:3px; }
.skip-link { position:fixed; z-index:50; inset:var(--space-xs) auto auto var(--space-md); padding:var(--space-sm); background:var(--color-surface); transform:translateY(-160%); }
.skip-link:focus-visible { transform:translateY(0); }
.site-header { position:fixed; z-index:var(--z-sticky); inset:0 auto 0 0; width:var(--rail-width); background:var(--color-surface); border-right:1px solid var(--color-rule); display:flex; flex-direction:column; overflow-y:auto; }
.site-header > * { flex-shrink:0; }
.site-header { scroll-padding-block:var(--space-md); }
.brand-row { padding:var(--space-xl) var(--space-lg) 40px; }
.brand { display:flex; align-items:center; gap:var(--space-sm); text-decoration:none; font-size:25px; letter-spacing:-.04em; font-weight:700; color:var(--color-ink); white-space:nowrap; }
.brand > svg { flex:none; width:36px; height:36px; color:var(--color-accent); }
.brand-sub { display:block; margin-top:var(--space-2xs); color:var(--color-muted); font-size:13px; font-weight:600; letter-spacing:0; }
.main-nav { display:flex; flex-direction:column; gap:var(--space-xs); padding:0 var(--space-sm); }
.main-nav a { display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-md); min-height:48px; white-space:nowrap; border-radius:var(--radius-input); color:var(--color-muted); text-decoration:none; font-size:16px; font-weight:650; }
.main-nav a > svg { width:21px; height:21px; flex:none; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.main-nav a:hover { background:var(--color-paper); color:var(--color-accent); }
.main-nav a[aria-current="page"] { background:var(--color-accent); color:var(--color-accent-ink); }
.main-nav a:last-child { margin-top:var(--space-lg); border-top:1px solid var(--color-rule); border-radius:0 0 var(--radius-input) var(--radius-input); }
.nav-admin { font-size:11px; font-weight:650; margin-left:auto; border:1px solid currentColor; border-radius:4px; padding:0 var(--space-2xs); }
.header-tools { display:flex; flex-direction:column; align-items:stretch; gap:var(--space-sm); margin-top:auto; padding:var(--space-lg); font-size:var(--text-xs); color:var(--color-muted); }
#connection-label { display:flex; align-items:center; gap:var(--space-xs); }
#connection-label::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.main-content { margin-left:var(--rail-width); width:calc(100% - var(--rail-width)); max-width:none; padding-block:var(--space-xl) var(--space-lg); min-height:calc(100dvh - 46px); }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-lg); margin-bottom:var(--space-lg); }
.page-heading h1 { max-width:none; line-height:1.25; }
.page-heading p { color:var(--color-muted); margin-top:var(--space-xs); font-size:var(--text-sm); line-height:1.6; max-width:65ch; }
.actions { display:flex; flex-wrap:wrap; gap:var(--space-xs); align-items:center; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:var(--space-xs); min-height:44px; border:1px solid var(--color-transparent); border-radius:var(--radius-input); padding:var(--space-xs) var(--space-md); background:var(--color-transparent); color:var(--color-ink-2); font-weight:650; font-size:var(--text-sm); line-height:1.4; text-decoration:none; white-space:nowrap; transition:background-color var(--dur-micro) var(--ease-out); }
.btn.primary { background:var(--color-accent); color:var(--color-accent-ink); }
.btn.primary:hover { background:var(--color-accent-deep); }
.btn.quiet { background:var(--color-surface); border-color:var(--color-field); }
.btn.quiet:hover,.btn.text:hover { background:var(--color-paper-2); color:var(--color-accent-deep); }
.btn.text { color:var(--color-accent); }
.btn:active { background:var(--color-paper-3); }
.btn.primary:active { background:var(--color-accent-deep); }
.btn.small { padding:var(--space-xs) var(--space-sm); }
.btn.danger { color:var(--color-error); }
.btn[aria-busy="true"] { cursor:progress; }
.muted { color:var(--color-muted); }
.small-text { font-size:var(--text-sm); }
.summary-strip { display:flex; flex-wrap:wrap; gap:var(--space-lg) var(--space-xl); padding:var(--space-md) var(--space-lg); margin:0 0 var(--space-lg); border:1px solid var(--color-rule); background:var(--color-surface); border-radius:var(--radius-input); }
.summary-strip div { display:flex; align-items:baseline; gap:var(--space-sm); }
.summary-strip div + div { border-left:1px solid var(--color-rule); padding-left:var(--space-xl); }
.summary-strip dt { font-size:var(--text-sm); color:var(--color-muted); }
.summary-strip dd { margin:0; font-size:var(--text-2xl); font-weight:650; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.summary-strip .accent dd { color:var(--color-success); }
.monthly-list { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-sm); }
.monthly-card { padding:var(--space-lg); background:var(--color-surface); border:1px solid var(--color-rule); border-radius:var(--radius-card); }
.monthly-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-md); }
.monthly-card-head > div { min-width:0; }
.monthly-card h2 { font-size:var(--text-lg); line-height:1.4; overflow-wrap:anywhere; }
.monthly-grade { margin-left:var(--space-xs); color:var(--color-muted); font-size:var(--text-sm); font-weight:500; }
.monthly-meta,.monthly-note { margin-top:var(--space-2xs); color:var(--color-muted); font-size:var(--text-sm); }
.monthly-note { color:var(--color-error); }
.monthly-counts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-xs); margin:var(--space-md) 0; }
.monthly-counts > div { padding:var(--space-sm) var(--space-md); background:var(--color-paper); border-radius:var(--radius-input); }
.monthly-counts dt { color:var(--color-muted); font-size:var(--text-sm); }
.monthly-counts dd { margin:var(--space-2xs) 0 0; font-size:var(--text-xl); font-weight:700; line-height:1.3; font-variant-numeric:tabular-nums; }
.monthly-counts dd span { margin-left:2px; font-size:var(--text-xs); font-weight:500; }
.monthly-counts .present dd { color:var(--color-success); }
.monthly-counts .absent dd { color:var(--color-error); }
.monthly-counts .late dd { color:var(--color-pending); }
.monthly-counts .early dd { color:var(--color-accent-deep); }
.monthly-progress-heading { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-sm); margin-bottom:var(--space-xs); font-size:var(--text-sm); font-weight:650; }
.monthly-progress-heading small { color:var(--color-muted); font-size:var(--text-xs); font-weight:500; }
.monthly-progress-heading strong { color:var(--color-accent); font-size:var(--text-lg); font-variant-numeric:tabular-nums; }
.monthly-progress progress { display:block; width:100%; height:10px; border:0; border-radius:10px; overflow:hidden; appearance:none; background:var(--color-paper-2); }
.monthly-progress progress::-webkit-progress-bar { background:var(--color-paper-2); border-radius:10px; }
.monthly-progress progress::-webkit-progress-value { background:var(--color-accent); border-radius:10px; }
.monthly-progress progress::-moz-progress-bar { background:var(--color-accent); border-radius:10px; }
.today-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-lg); align-items:start; }
.today-layout.has-sidebar { grid-template-columns:minmax(0,1fr) 264px; }
.sheet { background:var(--color-surface); border:1px solid var(--color-rule); border-radius:var(--radius-card); overflow:clip; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); padding:20px var(--space-lg); border-bottom:1px solid var(--color-rule); }
.section-heading h2 { line-height:1.4; }
.section-heading .meta { color:var(--color-muted); font-size:var(--text-xs); }
.lesson-group { display:grid; grid-template-columns:88px minmax(0,1fr); }
.lesson-group + .lesson-group { border-top:1px solid var(--color-rule); }
.lesson-time { padding:20px var(--space-md); font-size:13px; font-variant-numeric:tabular-nums; color:var(--color-muted); background:var(--color-paper); border-right:1px solid var(--color-rule); }
.lesson-time strong { display:block; color:var(--color-ink); font-size:var(--text-lg); font-weight:650; line-height:1.5; }
.lesson-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding:var(--space-md) var(--space-lg); min-height:84px; }
.lesson-row + .lesson-row { border-top:1px solid var(--color-rule); }
.student-name { display:inline-flex; flex-wrap:wrap; gap:var(--space-xs); align-items:center; font-size:var(--text-md); font-weight:650; }
.student-link { border:0; padding:0; background:var(--color-transparent); color:var(--color-ink); font:inherit; text-align:left; text-decoration:underline; text-decoration-color:var(--color-field); text-underline-offset:4px; min-height:32px; }
.student-link:hover { color:var(--color-accent); text-decoration-color:var(--color-accent); }
.lesson-sub { display:flex; gap:var(--space-sm); flex-wrap:wrap; margin-top:var(--space-2xs); color:var(--color-muted); font-size:var(--text-xs); }
.tag { display:inline-flex; align-items:center; padding:var(--space-3xs) var(--space-xs); border-radius:4px; background:var(--color-paper-2); color:var(--color-muted); font-size:12px; font-weight:650; white-space:nowrap; }
.tag.makeup { background:var(--color-success-soft); color:var(--color-success); }
.status-label { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-xs); padding:4px var(--space-sm); min-width:65px; border-radius:var(--radius-input); font-size:var(--text-xs); font-weight:700; color:var(--color-pending); background:var(--color-pending-soft); white-space:nowrap; }
.status-label::before { content:""; height:6px; width:6px; border-radius:50%; background:currentColor; flex:none; }
.status-label.present { color:var(--color-success); background:var(--color-success-soft); }
.status-label.absent { color:var(--color-absent); background:var(--color-absent-soft); }
.status-label.late { color:var(--color-pending); background:var(--color-pending-soft); }
.status-label.early { color:var(--color-accent-deep); background:var(--color-accent-soft); }
.status-label.other { color:var(--color-ink-2); background:var(--color-paper-2); }
.today-sidebar { display:flex; flex-direction:column; gap:var(--space-lg); }
.side-section { padding:var(--space-lg) 0; border-top:1px solid var(--color-rule); }
.side-section h2 { margin-bottom:var(--space-xs); line-height:1.5; }
.side-section p { color:var(--color-muted); font-size:var(--text-xs); }
.pending-panel { padding:20px; background:var(--color-pending-soft); border:1px solid var(--color-rule); border-radius:var(--radius-card); }
.pending-panel h2 { display:flex; justify-content:space-between; align-items:center; gap:var(--space-xs); }
.pending-count { font-size:var(--text-xl); color:var(--color-pending); font-variant-numeric:tabular-nums; }
.pending-panel .btn { width:100%; }
.capacity-chart { display:flex; align-items:flex-end; gap:var(--space-2xs); height:96px; margin-top:var(--space-lg); padding-bottom:1px; border-bottom:1px solid var(--color-field); }
.capacity-bar { flex:1; height:max(2px,var(--bar)); background:var(--color-field); }
.capacity-bar.peak { background:var(--color-accent); }
.chart-axis { display:flex; justify-content:space-between; margin-top:var(--space-xs); color:var(--color-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.pending-list { list-style:none; margin:var(--space-sm) 0 0; padding:0; }
.pending-list li { display:flex; justify-content:space-between; gap:var(--space-sm); padding:var(--space-sm) 0; border-bottom:1px solid var(--color-rule); font-size:var(--text-sm); }
.pending-list time { color:var(--color-muted); font-variant-numeric:tabular-nums; }
.pending-panel .pending-list li { padding:0; border-color:color-mix(in srgb,var(--color-pending) 20%,var(--color-transparent)); }
.pending-student { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); width:100%; padding:var(--space-sm) 0; text-decoration:none; }
.pending-student:hover { color:var(--color-accent); }
.pending-student strong { font-weight:700; }
.side-action { margin-top:var(--space-md); }
.toolbar { display:flex; gap:var(--space-sm) var(--space-md); align-items:flex-end; flex-wrap:wrap; margin-bottom:var(--space-lg); padding:var(--space-md) var(--space-lg); background:var(--color-surface); border:1px solid var(--color-rule); border-radius:var(--radius-input); }
.field { display:flex; flex-direction:column; gap:var(--space-xs); font-size:var(--text-sm); min-width:140px; }
.field.grow { flex:1; }
.field label { color:var(--color-ink-2); font-weight:650; }
.date-control { display:flex; align-items:stretch; min-width:0; }
.date-control input[data-iso-kind] { width:150px; border-radius:var(--radius-input) 0 0 var(--radius-input); font-variant-numeric:tabular-nums; }
.date-control input.native-date-picker { width:44px; min-width:44px; padding:0 8px; border-left:0; border-radius:0 var(--radius-input) var(--radius-input) 0; cursor:pointer; }
.native-date-picker::-webkit-datetime-edit { display:none; }
.native-date-picker::-webkit-calendar-picker-indicator { margin:0; padding:0; cursor:pointer; }
input,select,textarea { min-height:44px; border:1px solid var(--color-field); border-radius:var(--radius-input); padding:var(--space-xs) var(--space-sm); background:var(--color-surface); color:var(--color-ink); max-width:100%; min-width:0; }
input::placeholder,textarea::placeholder { color:var(--color-muted); opacity:1; }
input:disabled,select:disabled,textarea:disabled { background:var(--color-paper-2); color:var(--color-muted); cursor:not-allowed; }
input[type="checkbox"] { min-height:20px; width:20px; accent-color:var(--color-accent); }
textarea { resize:vertical; line-height:1.8; min-height:100px; }
.checkbox-field { display:inline-flex; align-items:center; gap:var(--space-xs); font-size:var(--text-sm); min-height:44px; }
.tabs { display:flex; flex-wrap:wrap; gap:var(--space-lg); border-bottom:1px solid var(--color-rule); margin-bottom:var(--space-lg); }
.tabs .btn { border-radius:0; padding-inline:var(--space-2xs); border-bottom:3px solid var(--color-transparent); color:var(--color-muted); }
.tabs .btn[aria-current="page"] { border-bottom-color:var(--color-accent); color:var(--color-accent); font-weight:650; }
.table-wrap { position:relative; overflow:auto; max-width:100%; scrollbar-color:var(--color-field) var(--color-paper-2); }
.table-scroll-hint { display:none; }
table { font-variant-numeric:tabular-nums; border-collapse:collapse; width:100%; font-size:var(--text-sm); text-align:left; }
caption { text-align:left; padding:var(--space-md) var(--space-lg); color:var(--color-muted); font-size:var(--text-sm); }
th { font-weight:700; color:var(--color-ink-2); background:var(--color-paper-2); padding:var(--space-md) 20px; white-space:nowrap; border-bottom:1px solid var(--color-rule); }
td { padding:var(--space-md) 20px; border-bottom:1px solid var(--color-rule); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--color-paper); }
td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.row-actions { display:flex; gap:var(--space-2xs); white-space:nowrap; }
.table-footnote { font-variant-numeric:tabular-nums; padding:var(--space-md) 0 0; color:var(--color-muted); font-size:var(--text-xs); line-height:1.65; }
.empty { padding:var(--space-2xl) var(--space-lg); text-align:center; color:var(--color-muted); }
.empty h2 { color:var(--color-ink); margin:0 auto var(--space-sm); }
.empty p { margin-inline:auto; }
.empty .btn { margin-top:20px; }
.attendance-select { min-width:120px; font-weight:700; border-color:var(--color-pending); color:var(--color-pending); background:var(--color-pending-soft); }
.attendance-select[data-status="출석"] { color:var(--color-success); background:var(--color-success-soft); border-color:var(--color-success); }
.attendance-select[data-status="결석"] { color:var(--color-absent); background:var(--color-absent-soft); border-color:var(--color-absent); }
.attendance-select[data-status="지각"],.attendance-select[data-status="조퇴"] { color:var(--color-ink-2); background:var(--color-paper-2); border-color:var(--color-field); }
.attendance-row.is-absent { background:var(--color-absent-soft); }
.attendance-row.is-target { box-shadow:inset 4px 0 var(--color-accent); }
.attendance-notes { color:var(--color-muted); font-size:13px; display:block; margin-top:var(--space-2xs); }
.grid-wrap { max-height:70dvh; position:relative; }
.mobile-day-picker { display:none; }
.weekly-grid { display:table; table-layout:fixed; border-collapse:separate; border-spacing:0; min-width:840px; font-size:13px; }
.weekly-grid th,.weekly-grid td { border-right:1px solid var(--color-rule); border-bottom:1px solid var(--color-rule); }
.weekly-grid thead th { position:sticky; top:0; z-index:4; padding:var(--space-sm) var(--space-xs); text-align:center; background:var(--color-paper-2); }
.weekly-grid thead th:first-child { left:0; z-index:6; width:64px; }
.weekly-grid thead th span { display:block; font-size:12px; font-weight:500; color:var(--color-muted); }
.weekly-grid thead th.current-day { color:var(--color-accent-deep); background:var(--color-accent-soft); }
.weekly-grid tbody th.slot-time { position:sticky; left:0; z-index:3; background:var(--color-surface); text-align:right; padding:var(--space-xs); font-size:13px; font-weight:600; vertical-align:top; font-variant-numeric:tabular-nums; }
.weekly-grid td.occupancy { position:relative; padding:var(--space-xs); vertical-align:top; }
.weekly-grid td.current-day { box-shadow:inset 2px 0 var(--color-accent); }
.weekly-grid tr.current-time-row td,.weekly-grid tr.current-time-row th { border-top:2px solid var(--color-error); }
.occupancy-0 { background:var(--color-surface); }
.occupancy-1,.occupancy-2 { background:var(--color-success-soft); }
.occupancy-3,.occupancy-4 { background:var(--color-paper-3); }
.occupancy-5,.occupancy-6 { background:var(--color-pending-soft); }
.occupancy-7,.occupancy-8 { background:var(--color-absent-soft); }
.occupancy-count { display:block; text-align:right; color:var(--color-ink-2); font-size:12px; font-weight:700; line-height:1.2; margin-left:auto; align-self:center; }
.slot-names { display:flex; flex-wrap:wrap; gap:4px; }
.slot-student { display:inline-block; padding:2px 4px; border:1px solid var(--color-rule); border-radius:4px; background:var(--color-surface); color:var(--color-ink); text-align:left; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.slot-student.starts { border-color:var(--color-accent); color:var(--color-accent-deep); font-weight:700; }
.slot-student.makeup { border-color:var(--color-success); color:var(--color-success); }
.slot-student.absent { border-color:var(--color-error); color:var(--color-error); }
.slot-student:hover { text-decoration:underline; }
.grid-description { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-xs); color:var(--color-muted); font-size:var(--text-xs); margin-bottom:var(--space-sm); }
.grid-description > span:first-child { color:var(--color-ink); font-weight:700; font-size:var(--text-lg); }
.grid-key { display:flex; flex-wrap:wrap; gap:var(--space-md); margin-bottom:var(--space-sm); color:var(--color-muted); font-size:13px; }
.grid-key span { display:inline-flex; gap:6px; align-items:center; }
.grid-key i { width:14px; height:14px; border:1px solid var(--color-field); border-radius:3px; }
.grid-key .key-light { background:var(--color-success-soft); }.grid-key .key-busy { background:var(--color-pending-soft); }.grid-key .key-start { border-color:var(--color-accent); background:var(--color-surface); }.grid-key .key-makeup { border-color:var(--color-success); background:var(--color-surface); }
.week-controls { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-xs); }
.week-controls input[data-iso-kind] { width:150px; }
.workarea { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-lg); align-items:start; }
.editor { width:min(640px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:var(--radius-card); background:var(--color-surface); color:var(--color-ink); box-shadow:0 16px 50px #17243b44; overflow:hidden; }
.editor[open] { display:flex; flex-direction:column; }
.editor::backdrop { background:#17243b99; }
html:has(dialog[open]) { overflow:hidden; }
.editor-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); flex-shrink:0; padding:var(--space-md) var(--space-lg); border-bottom:1px solid var(--color-rule); }
.editor h2 { font-size:var(--text-xl); line-height:1.4; }
.dialog-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:var(--space-md) var(--space-lg) var(--space-lg); }
.detail-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:sticky; top:0; z-index:1; gap:4px; padding:4px; margin-bottom:var(--space-md); background:var(--color-paper); border-radius:var(--radius-input); }
.detail-tabs .btn { padding-inline:4px; }
.detail-tabs .btn[aria-pressed="true"] { color:var(--color-accent-deep); background:var(--color-surface); box-shadow:0 1px 3px var(--color-shadow); }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-md); margin:0; }
.detail-grid dt { margin-bottom:var(--space-2xs); color:var(--color-muted); font-size:var(--text-sm); }
.detail-grid dd { margin:0; font-weight:650; overflow-wrap:anywhere; }
.detail-note { margin-top:var(--space-lg); }
.detail-note:first-child { margin-top:0; }
.detail-note h3 { font-size:var(--text-sm); color:var(--color-muted); margin-bottom:var(--space-xs); }
.detail-note p { max-width:none; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.detail-help { color:var(--color-muted); font-size:var(--text-sm); }
.editor .field { margin-bottom:var(--space-md); }
.editor .field textarea.record-input { min-height:280px; }
.editor .form-help { font-size:var(--text-xs); color:var(--color-muted); margin-top:calc(-1 * var(--space-2xs)); margin-bottom:var(--space-md); }
.editor-actions { display:flex; gap:var(--space-xs); margin-top:var(--space-lg); }
.editor-actions .primary { flex:1; }
.editor-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--space-md); }
.editor-fields .field { min-width:0; }
.editor-fields .field:has(textarea),.editor-fields details { grid-column:1 / -1; }
.editor-fields input,.editor-fields select,.editor-fields textarea { width:100%; }
.editor-fields .date-control input.native-date-picker { width:44px; }
.editor-actions { position:sticky; bottom:0; padding-top:var(--space-sm); background:var(--color-surface); border-top:1px solid var(--color-rule); }
.editor .field textarea.record-input { min-height:200px; }
.history-dialog { width:min(560px,calc(100% - 32px)); max-height:min(760px,calc(100dvh - 32px)); padding:0; border:0; border-radius:var(--radius-card); background:var(--color-surface); color:var(--color-ink); box-shadow:0 16px 50px #17243b44; overflow:hidden; }
.history-dialog::backdrop { background:#17243b99; }
.history-dialog[open] { display:flex; flex-direction:column; }
.history-header { display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); padding:var(--space-lg); border-bottom:1px solid var(--color-rule); }
.history-header { flex-shrink:0; }
.history-header > div { min-width:0; }
.history-header p { color:var(--color-muted); font-size:var(--text-sm); }
.history-header h2 { margin-top:var(--space-2xs); font-size:var(--text-xl); line-height:1.4; }
.history-body { overflow:auto; overscroll-behavior:contain; padding:var(--space-sm) var(--space-lg) var(--space-lg); }
.history-list { list-style:none; padding:0; margin:0; }
.history-item { padding:var(--space-md) 0; border-bottom:1px solid var(--color-rule); }
.history-item:last-child { border-bottom:0; }
.history-date { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-xs); font-variant-numeric:tabular-nums; }
.history-date strong { font-size:var(--text-lg); }
.history-day { padding:2px var(--space-xs); border-radius:var(--radius-input); color:var(--color-accent-deep); background:var(--color-accent-soft); font-size:var(--text-sm); font-weight:700; }
.history-detail { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-xs); margin-top:var(--space-xs); color:var(--color-ink-2); font-size:var(--text-sm); }
.history-detail .status-label { margin-left:auto; }
.history-note { margin-top:var(--space-xs); color:var(--color-muted); font-size:var(--text-sm); overflow-wrap:anywhere; }
.history-empty { padding:var(--space-xl) 0; color:var(--color-muted); text-align:center; }
.message { padding:var(--space-md) 20px; margin-bottom:var(--space-lg); background:var(--color-error-soft); color:var(--color-error); border:1px solid var(--color-error); border-radius:var(--radius-input); font-size:var(--text-sm); }
.message p + p { margin-top:var(--space-xs); }
.message pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; max-height:200px; overflow:auto; }
.inline-note { color:var(--color-muted); font-size:var(--text-xs); margin:var(--space-sm) 0 20px; max-width:75ch; }
.start-screen { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--space-3xl); align-items:center; max-width:1100px; margin-inline:auto; padding:var(--space-3xl) 0; min-height:75dvh; }
.start-screen h1 { font-size:40px; max-width:none; line-height:1.35; letter-spacing:-.045em; }
.start-screen .lead { color:var(--color-muted); margin:var(--space-lg) 0 var(--space-xl); line-height:1.7; }
#pin-form { max-width:360px; }
#pin-form .actions { margin-top:var(--space-md); }
#pin-form .message { margin:var(--space-md) 0 0; }
.start-mark { width:64px; height:64px; padding:var(--space-sm); border-radius:var(--radius-card); background:var(--color-accent); color:var(--color-accent-ink); margin-bottom:var(--space-lg); }
.start-note { color:var(--color-muted); font-size:var(--text-xs); margin-top:var(--space-md); }
.start-ledger { background:var(--color-surface); border:1px solid var(--color-rule); border-radius:var(--radius-card); padding:var(--space-xl); }
.start-ledger h2 { margin-bottom:var(--space-lg); line-height:1.6; }
.start-ledger dl { margin:0; }
.start-ledger dl div { padding:20px 0; border-top:1px solid var(--color-rule); }
.start-ledger dl div:last-child { padding-bottom:0; }
.start-ledger dt { font-size:var(--text-md); font-weight:650; color:var(--color-accent); margin-bottom:var(--space-2xs); }
.start-ledger dd { color:var(--color-muted); margin:0; font-size:var(--text-sm); }
.connection-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-lg); }
.connection-layout > div { display:flex; flex-direction:column; gap:var(--space-lg); }
.connection-section { padding:var(--space-lg); border:1px solid var(--color-rule); border-radius:var(--radius-card); background:var(--color-surface); }
.connection-section h2 { margin-bottom:var(--space-sm); line-height:1.5; }
.connection-section p { color:var(--color-muted); font-size:var(--text-sm); margin-bottom:20px; }
.connection-section p:last-child { margin-bottom:0; }
.connection-section ol { color:var(--color-muted); font-size:var(--text-sm); line-height:2; padding-left:20px; }
.data-details { margin:20px 0 0; border-top:1px solid var(--color-rule); }
.data-details div { display:flex; gap:var(--space-lg); padding:var(--space-sm) 0; border-bottom:1px solid var(--color-rule); font-size:var(--text-sm); }
.data-details div:last-child { border-bottom:0; padding-bottom:0; }
.data-details dt { color:var(--color-muted); width:80px; flex-shrink:0; }
.data-details dd { margin:0; overflow-wrap:anywhere; }
.bar-list { list-style:none; padding:var(--space-sm) 0; margin:0; }
.bar-list li { display:grid; grid-template-columns:76px minmax(0,1fr) 120px; gap:var(--space-md); align-items:center; padding:var(--space-sm) var(--space-lg); font-size:var(--text-sm); }
.bar-track { height:10px; background:var(--color-paper-2); border-radius:4px; }
.bar-fill { height:100%; width:var(--bar); background:var(--color-accent); border-radius:4px; }
.payments-split { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:var(--space-lg); align-items:start; }
.app-footer { border-top:1px solid var(--color-rule); display:flex; justify-content:space-between; gap:var(--space-md); flex-wrap:wrap; color:var(--color-muted); font-size:13px; margin-top:var(--space-xl); padding-top:20px; }
@media (max-width:1250px) {
  :root { --rail-width:192px; --gutter:24px; }
  .main-nav a { padding-inline:var(--space-sm); }
  .brand-row { padding-inline:var(--space-lg); }
  .nav-admin { display:none; }
  .today-layout.has-sidebar { grid-template-columns:minmax(0,1fr) 240px; gap:var(--space-md); }
  .payments-split { grid-template-columns:minmax(0,1fr); }
  .summary-strip { gap:var(--space-md); }
  .summary-strip div + div { padding-left:var(--space-md); }
}
@media (max-width:1000px) {
  .today-layout.has-sidebar { grid-template-columns:minmax(0,1fr); }
  .today-sidebar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .connection-layout,.start-screen { grid-template-columns:minmax(0,1fr); }
  .start-screen { gap:var(--space-xl); padding:var(--space-xl) 0; }
}
@media (max-width:800px) {
  :root { --gutter:20px; }
  .site-header { position:relative; width:100%; border-right:0; border-bottom:1px solid var(--color-rule); display:grid; grid-template-columns:minmax(0,1fr) auto; overflow:visible; }
  .brand-row { padding:var(--space-md) var(--gutter); }
  .brand { font-size:22px; gap:var(--space-xs); }
  .brand-sub { display:none; }
  .brand > svg { width:30px; height:30px; }
  .header-tools { grid-column:2; grid-row:1; flex-direction:row; align-items:center; gap:var(--space-xs); margin:0; padding:var(--space-xs) var(--gutter) var(--space-xs) 0; font-size:12px; }
  #current-user { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #connection-label::before { display:none; }
  .header-tools .btn { font-size:13px; min-height:40px; }
  .main-nav { grid-column:span 2; flex-direction:row; gap:var(--space-2xs); overflow-x:auto; padding:0 var(--gutter) var(--space-xs); scrollbar-width:thin; }
  .main-nav a { min-height:44px; padding:var(--space-xs) var(--space-sm); font-size:14px; gap:6px; }
  .main-nav a > svg { width:18px; height:18px; }
  .main-nav a:last-child { margin-top:0; border:0; border-radius:var(--radius-input); }
  .main-content { margin-left:0; width:100%; padding-top:var(--space-lg); }
  .page-heading { gap:var(--space-md); }
  .page-heading h1 { font-size:28px; }
  .today-layout.has-sidebar { grid-template-columns:minmax(0,1fr); }
  .summary-strip { padding:var(--space-md); }
  .grid-wrap { max-height:600px; }
  .connection-layout { grid-template-columns:minmax(0,1fr); }
  input,select,textarea { font-size:16px; }
}
@media (max-width:600px) {
  .editor-heading { padding:var(--space-sm) var(--space-md); }
  .dialog-body { padding:var(--space-sm) var(--space-md) var(--space-md); }
  .editor-fields .field:has(.date-control),.editor-fields .field:has(input[type="time"]) { grid-column:1 / -1; }
  .detail-tabs .btn { font-size:14px; }
  .monthly-card { padding:var(--space-md); }
  .monthly-counts { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
  .monthly-counts > div { padding:var(--space-xs) 4px; text-align:center; }
  .monthly-counts dt { min-height:2.8em; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1.4; }
  .monthly-counts dd { font-size:20px; }
  .history-header { padding:var(--space-md); }
  .history-body { padding:var(--space-xs) var(--space-md) var(--space-md); }
  :root { --gutter:16px; }
  #current-user { display:none; }
  .header-tools { gap:4px; }
  .header-tools .btn { padding-inline:8px; }
  .main-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; gap:var(--space-2xs); }
  .main-nav a { justify-content:center; font-size:14px; padding:var(--space-xs) var(--space-2xs); }
  .page-heading { flex-direction:column; gap:var(--space-xs); margin-bottom:var(--space-md); }
  .page-heading .actions:empty { display:none; }
  .page-heading .actions { width:100%; }
  .page-heading .actions .primary { flex:1; }
  .summary-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm) var(--space-lg); }
  .summary-strip div { justify-content:space-between; gap:var(--space-xs); }
  .summary-strip div + div { border-left:0; padding-left:0; }
  .summary-strip dd { font-size:22px; }
  .today-sidebar { display:contents; }
  .today-layout > .sheet { order:2; }
  .today-sidebar .pending-panel { order:1; }
  .today-sidebar .side-section:not(.pending-panel) { order:3; }
  .pending-panel { padding:var(--space-md); }
  .pending-panel p,.pending-panel .pending-list { display:none; }
  .pending-panel .pending-list li { flex:none; border:0; }
  .pending-student { flex-direction:column; align-items:flex-start; gap:var(--space-3xs); padding:var(--space-xs) 0; min-width:68px; }
  .pending-panel .side-action { margin-top:var(--space-xs); }
  .lesson-group { grid-template-columns:72px minmax(0,1fr); }
  .lesson-time { padding:var(--space-md) var(--space-sm); }
  .lesson-time strong { font-size:var(--text-md); }
  .lesson-row { padding:var(--space-sm); gap:var(--space-xs); }
  .lesson-sub { font-size:13px; gap:var(--space-2xs); flex-direction:column; }
  .status-label { min-width:52px; padding:var(--space-2xs) var(--space-xs); font-size:13px; gap:4px; }
  .status-label::before { display:none; }
  .student-link { min-height:44px; }
  .section-heading { padding:var(--space-md); flex-wrap:wrap; gap:var(--space-xs); }
  .section-heading .meta { font-size:13px; }
  .toolbar { padding:var(--space-sm); gap:var(--space-xs); margin-bottom:var(--space-md); }
  .toolbar > .field:has(> .date-control) { flex-direction:row; align-items:center; gap:var(--space-sm); }
  [data-view="students"] .toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  [data-view="students"] .toolbar .grow { grid-column:1; grid-row:1; min-width:0; }
  [data-view="students"] .toolbar .grow label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  [data-view="students"] .toolbar > button { grid-column:2; grid-row:1; }
  [data-view="students"] .toolbar > .field:not(.grow) { grid-column:1 / -1; flex-direction:row; align-items:center; }
  [data-view="students"] .toolbar select { flex:1; }
  [data-view="payments"] .toolbar:has(#paid-filter) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  [data-view="payments"] .toolbar:has(#paid-filter) > .field { min-width:0; }
  [data-view="payments"] .toolbar:has(#paid-filter) > .field:first-child { grid-column:1 / -1; }
  [data-view="payments"] .toolbar:has(#paid-filter) select { width:100%; }
  .field { min-width:120px; }
  .toolbar .grow { flex-basis:100%; }
  .toolbar input[type="search"] { width:100%; }
  .week-controls { gap:var(--space-2xs); }
  .week-controls input[data-iso-kind] { width:128px; padding-inline:var(--space-xs); }
  .week-controls .btn { padding-inline:var(--space-xs); font-size:14px; }
  .tabs { gap:var(--space-md); margin-bottom:20px; }
  th,td { padding:var(--space-sm) var(--space-md); }
  table { min-width:640px; }
  .table-scroll-hint { display:block; padding:var(--space-sm) var(--space-md); color:var(--color-muted); font-size:13px; border-bottom:1px solid var(--color-rule); }
  .sheet:has(.attendance-row) .table-scroll-hint { display:none; }
  [data-view="payments"] .summary-strip > div:first-child { grid-column:1 / -1; padding-bottom:var(--space-sm); border-bottom:1px solid var(--color-rule); }
  .summary-strip dd { white-space:nowrap; }
  .attendance-select { min-width:112px; }
  .mobile-day-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; margin-bottom:var(--space-sm); }
  .mobile-day-picker button { min-height:44px; padding:4px 2px; border:1px solid var(--color-rule); border-radius:var(--radius-input); background:var(--color-surface); color:var(--color-ink-2); font-weight:650; }
  .mobile-day-picker button[aria-pressed="true"] { color:var(--color-accent-ink); background:var(--color-accent); border-color:var(--color-accent); }
  .mobile-day-picker button span { display:block; font-size:12px; font-weight:500; }
  .weekly-grid { min-width:0; }
  .weekly-grid [data-grid-day] { display:none; }
  .weekly-grid [data-grid-day].mobile-day { display:table-cell; }
  .slot-student { min-height:36px; padding:4px 8px; font-size:14px; }
  .sheet:has(.attendance-row) table { min-width:0; }
  .sheet:has(.attendance-row) thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .sheet:has(.attendance-row) tbody { display:block; }
  .attendance-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2xs) var(--space-sm); padding:var(--space-md); border-bottom:1px solid var(--color-rule); }
  .attendance-row:last-child { border-bottom:0; }
  .attendance-row td { display:block; padding:0; border:0; }
  .attendance-row td:nth-child(1) { grid-column:1; grid-row:2; text-align:left; color:var(--color-muted); font-size:14px; }
  .attendance-row td:nth-child(2) { grid-column:1; grid-row:1; }
  .attendance-row td:nth-child(2) .attendance-notes { display:inline; margin-left:var(--space-xs); }
  .attendance-row td:nth-child(3) { grid-column:1; grid-row:3; font-size:14px; color:var(--color-muted); }
  .attendance-row td:nth-child(4) { grid-column:1; grid-row:4; font-size:13px; color:var(--color-muted); }
  .attendance-row td:nth-child(4) .attendance-notes { display:inline; margin-left:var(--space-xs); }
  .attendance-row td:nth-child(5) { grid-column:2; grid-row:1 / 5; align-self:center; }
  .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) table { min-width:0; }
  .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) tbody { display:block; }
  .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) tr { display:block; padding:var(--space-md); border-bottom:1px solid var(--color-rule); }
  .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) tr:last-child { border-bottom:0; }
  .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td { display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); padding:var(--space-2xs) 0; border:0; text-align:right; overflow-wrap:anywhere; }
  .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td::before { content:attr(data-label); flex:none; color:var(--color-muted); font-size:var(--text-sm); text-align:left; }
  .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td:first-child { padding-bottom:var(--space-xs); margin-bottom:var(--space-xs); border-bottom:1px solid var(--color-rule); font-weight:700; }
  .sheet .table-wrap:not(.grid-wrap) tr.ledger-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-xs) var(--space-md); padding:var(--space-sm) var(--space-md); }
  .sheet .table-wrap:not(.grid-wrap) tr.ledger-row td { display:block; text-align:left; padding:0; white-space:normal; min-width:0; }
  .sheet .table-wrap:not(.grid-wrap) tr.ledger-row td::before { display:block; margin-bottom:2px; font-size:13px; }
  .sheet .table-wrap:not(.grid-wrap) tr.ledger-row td:first-child { grid-column:1; grid-row:1; align-self:center; margin:0; padding:0; border:0; }
  .sheet .table-wrap:not(.grid-wrap) tr.ledger-row td:first-child::before { display:none; }
  .sheet .table-wrap:not(.grid-wrap) tr.ledger-row td:last-child { grid-column:2; grid-row:1; justify-self:end; }
  .sheet .table-wrap:not(.grid-wrap) tr.ledger-row td:last-child::before { display:none; }
  [data-view="students"] .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) tr { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px var(--space-xs); padding:var(--space-sm) var(--space-md); }
  [data-view="students"] .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td { display:block; padding:0; text-align:left; }
  [data-view="students"] .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td::before { display:none; }
  [data-view="students"] .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td:first-child { grid-column:1 / 3; grid-row:1; margin:0; padding:0; border:0; }
  [data-view="students"] .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td:nth-child(2) { grid-column:1; grid-row:2; color:var(--color-muted); font-size:14px; }
  [data-view="students"] .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td:nth-child(3) { grid-column:2; grid-row:2; color:var(--color-muted); font-size:14px; }
  [data-view="students"] .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td:nth-child(4) { grid-column:1 / 3; grid-row:3; color:var(--color-success); font-size:13px; }
  [data-view="students"] .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td:nth-child(5) { grid-column:3; grid-row:1 / 4; align-self:center; }
  [data-view="students"] .sheet:not(:has(.attendance-row)) .table-wrap:not(.grid-wrap) td:nth-child(5) .btn { background:var(--color-accent-soft); padding-inline:var(--space-xs); }
  .start-screen { padding:var(--space-lg) 0; }
  .start-screen h1 { font-size:32px; }
  .start-ledger { padding:var(--space-lg); }
  .start-note { font-size:13px; }
  .connection-section { padding:var(--space-lg) var(--space-md); }
  .grid-description { align-items:flex-start; }
  .grid-legend { gap:var(--space-sm); font-size:13px; }
  .app-footer { flex-direction:column; gap:var(--space-xs); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }