/* Kelas app — layout for the real website. Component styles come from kelas.css (the design system). */

:root, [data-theme="space"], [data-theme="dark"] { color-scheme: dark; }
[data-theme="lunar"], [data-theme="light"] { color-scheme: light; }
html, body { height: 100%; }
body { overflow: hidden; }

/* Full-window app instead of the 1280 × 800 showcase frame */
.k-app { width: 100%; height: 100%; margin: 0; border-radius: 0; box-shadow: none; }
.k-side { overflow-y: auto; }
.k-nav__item[aria-current="page"] .k-kbd { background: transparent; }
.k-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.k-panes { min-height: 0; }
.k-panes--single { grid-template-columns: minmax(0, 1fr); }
.k-pane { overflow-y: auto; scrollbar-width: thin; }
.k-pane > * { flex: none; }
.k-pane--clip { overflow: hidden; }
.k-topbar__spacer { flex: 1; }
.k-greeting { margin: 0; font: 700 40px/46px var(--font-display); letter-spacing: -0.8px; color: var(--ink); }
.k-pane__head { margin-top: var(--space-3); }
.k-pane__head:first-child { margin-top: 0; }
.k-section-label { margin-top: var(--space-4); }

/* Empty states */
.k-empty { padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); border: 1px dashed var(--outline-strong); color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.k-empty strong { color: var(--ink); font-weight: 600; }

/* Small delete / edit buttons inside rows and cards */
.k-mini { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); cursor: pointer; opacity: 0; transition: opacity 120ms ease-out; }
.k-mini .k-icon { font-size: 20px; }
.k-task:hover .k-mini, .k-class:hover .k-mini, .k-mini:focus-visible { opacity: 1; }
.k-mini:hover { background: var(--hover-layer); color: var(--ink); }
.k-mini:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.k-class { position: relative; }

/* Schedule: days */
.k-day { display: flex; flex-direction: column; gap: var(--space-3); }
.k-day__name { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); }
.k-day__name h3 { margin: 0; font: 600 18px/24px var(--font-display); color: var(--ink); }
.k-subjects { display: flex; flex-direction: column; gap: var(--space-2); }
.k-subject-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.k-subject-row span:nth-child(2) { flex: 1; }
.k-subject-row small { color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }

/* Focus page */
.k-launch { width: 100%; flex: 1 1 auto; min-height: 280px; display: flex; justify-content: center; }
.k-launch__craft { height: 100%; aspect-ratio: 600 / 720; max-width: 100%; }
.k-launch__craft svg { width: 100%; height: 100%; }
.k-controls { display: flex; gap: var(--space-3); align-items: center; justify-content: center; flex-wrap: wrap; }
.k-stat { display: flex; gap: var(--space-6); }
.k-stat div { display: flex; flex-direction: column; gap: var(--space-1); }
.k-stat b { font: 600 24px/30px var(--font-display); color: var(--ink); }
.is-fullscreen .k-side, .is-fullscreen .k-pane--raised { display: none; }
.is-fullscreen .k-panes { grid-template-columns: minmax(0, 1fr); }

/* Toasts */
.k-toasts { position: fixed; right: var(--space-8); bottom: var(--space-8); z-index: 20; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-end; pointer-events: none; }
.k-toasts .k-toast { pointer-events: auto; animation: k-toast-in 200ms ease-out; }
.k-toast__close { width: 32px; height: 32px; flex: none; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.k-toast__close:hover { background: var(--hover-layer); color: var(--ink); }
@keyframes k-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .k-toasts .k-toast { animation: none; } }

/* Dialogs and forms */
.k-dialog { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: calc(100vw - 32px); }
.k-dialog::backdrop { background: var(--scrim); }
.k-form { width: 460px; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--depth-float); }
.k-form h2 { margin: 0; font: 600 24px/30px var(--font-display); letter-spacing: -0.2px; }
.k-form p { margin: 0; }
.k-field { display: flex; flex-direction: column; gap: var(--space-2); font: 600 12px/16px var(--font-sans); letter-spacing: 0.2px; color: var(--ink-muted); }
.k-input { height: 44px; box-sizing: border-box; width: 100%; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--well); color: var(--ink); font: 400 14px/20px var(--font-sans); }
.k-input::placeholder { color: var(--ink-muted); }
.k-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.k-row { display: flex; gap: var(--space-3); }
.k-row > * { flex: 1; min-width: 0; }
.k-form__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.k-form__actions--split { justify-content: space-between; flex-direction: row-reverse; }

/* Break game (js/game.js) */
.k-game { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--depth-float); }
.k-game__head { display: flex; align-items: center; gap: var(--space-4); }
.k-game__head > div { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.k-game__head h2 { margin: 0; font: 600 24px/30px var(--font-display); letter-spacing: -0.2px; color: var(--ink); }
.k-game canvas { display: block; width: min(800px, 82vw); max-width: 100%; aspect-ratio: 800 / 460; border-radius: var(--radius-lg); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--outline); cursor: crosshair; }
.k-game canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.k-game__foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.k-game__foot .k-note { margin-right: var(--space-3); }

/* Phones and narrow windows */
.k-small { display: none; }
@media (max-width: 1023px) {
  .k-panes { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .k-pane { overflow: visible; }
  .k-launch { min-height: 420px; }
}
@media (max-width: 767px) {
  .k-app { display: none; }
  .k-small { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8); box-sizing: border-box; text-align: center; color: var(--ink-muted); font: 400 16px/24px var(--font-sans); }
  .k-small strong { color: var(--ink); }
  .k-small .k-patch { width: 64px; height: 64px; }
}