/* Look: apple. Meteoro dressed after iOS / macOS (docs/decisions.md,
   2026-10-29). A look is CSS only: the same DOM and JS as the base look,
   with tokens swapped and existing classes restyled. It never adds markup.
   Everything here is scoped to html[data-look="apple"], so loading this file
   changes nothing until the look is chosen, and the scope's extra
   specificity always beats the base rule it overrides.

   Fonts: the system face (SF Pro / New York) on Apple devices. Its licence
   doesn't let us bundle it; everywhere else the look keeps the bundled
   DM Sans and Lora, never another system font. */

/* ---------------------------------------------------------- tokens */

/* iOS system colours. Where a colour is also used as small text, the light
   values take Apple's accessible variants (green, orange) so they stay
   readable on white. */
:root[data-look="apple"] {
  color-scheme: light;
  --surface-1: #ffffff;            /* secondarySystemGroupedBackground */
  --plane: #f2f2f7;                /* systemGroupedBackground */
  --text-primary: #000000;
  --text-secondary: #6c6c70;
  --text-muted: #8e8e93;
  --grid: rgba(60, 60, 67, 0.18);  /* separator */
  --baseline: rgba(60, 60, 67, 0.29);
  --border: rgba(60, 60, 67, 0.14);
  --series-1: #007aff;             /* systemBlue */
  --series-1-soft: #ddebff;
  --good: #248a3d;
  --warning: #ff9500;
  --serious: #c93400;
  --critical: #ff3b30;
  --ghost: rgba(116, 116, 128, 0.08);
  --fill: rgba(118, 118, 128, 0.12); /* tertiarySystemFill: controls */
  --bubble: #e9e9eb;
  --thumb: #ffffff;
  --glass: rgba(249, 249, 249, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.8);
  --glass-rim: rgba(0, 0, 0, 0.06);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.04);
  --font-round: ui-rounded, var(--font-ui);
}
/* The system face only on Apple devices (html.apple-device, set by the
   page's JS): elsewhere -apple-system can resolve to the OS's own font
   (Segoe, Roboto), and this look keeps the bundled ones there instead. */
:root[data-look="apple"].apple-device {
  --font-ui: -apple-system, BlinkMacSystemFont, system-ui, "DM Sans", sans-serif;
  --font-read: ui-serif, "New York", "Lora", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="apple"]:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #1c1c1e;
    --plane: #000000;
    --text-primary: #ffffff;
    --text-secondary: #aeaeb2;
    --text-muted: #8e8e93;
    --grid: rgba(84, 84, 88, 0.5);
    --baseline: rgba(84, 84, 88, 0.65);
    --border: rgba(84, 84, 88, 0.4);
    --series-1: #0a84ff;
    --series-1-soft: #0b3466;
    --good: #30d158;
    --warning: #ffd60a;
    --serious: #ff9f0a;
    --critical: #ff453a;
    --ghost: rgba(120, 120, 128, 0.14);
    --fill: rgba(118, 118, 128, 0.24);
    --bubble: #26252a;
  --thumb: #636366;
    --glass: rgba(30, 30, 30, 0.72);
    --glass-edge: rgba(255, 255, 255, 0.14);
    --glass-rim: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
    --lift: none;
  }
}
:root[data-look="apple"][data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1c1c1e;
  --plane: #000000;
  --text-primary: #ffffff;
  --text-secondary: #aeaeb2;
  --text-muted: #8e8e93;
  --grid: rgba(84, 84, 88, 0.5);
  --baseline: rgba(84, 84, 88, 0.65);
  --border: rgba(84, 84, 88, 0.4);
  --series-1: #0a84ff;
  --series-1-soft: #0b3466;
  --good: #30d158;
  --warning: #ffd60a;
  --serious: #ff9f0a;
  --critical: #ff453a;
  --ghost: rgba(120, 120, 128, 0.14);
  --fill: rgba(118, 118, 128, 0.24);
  --bubble: #26252a;
  --thumb: #636366;
  --glass: rgba(30, 30, 30, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-rim: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
  --lift: none;
}

/* ------------------------------------------------------- components */

/* Buttons: capsules. Secondary ones are grey-filled with a blue label, like
   iOS; the press answers on touch-down. :where() keeps these at a bare
   element's weight, so buttons the base styles by class (course list, tabs,
   Halo items, the segmented control) keep their own shape. */
:where(:root[data-look="apple"]) {
  & button {
    border: none; border-radius: 999px; background: var(--fill);
    color: var(--series-1); font-weight: 500; padding: 7px 15px;
    transition: transform 0.1s ease-out, filter 0.15s ease, background-color 0.15s ease;
  }
  & button:hover:not(:disabled) { background: color-mix(in srgb, var(--fill), var(--text-primary) 6%); }
  & button:active:not(:disabled) { transform: scale(0.97); }
  & button.primary { background: var(--series-1); color: #fff; font-weight: 600; }
  & button.primary:hover:not(:disabled) { background: var(--series-1); filter: brightness(1.08); }
  & button.danger { color: var(--critical); }
  & button.danger:hover:not(:disabled) { border-color: transparent; }
  /* Buttons that are list rows read as text, not as actions. */
  & .course-list button, & .connitem { color: var(--text-primary); }
}


:root[data-look="apple"] {
  & body {
    font-size: 14px; letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }

  /* Tracking tightens as type grows (SF's own tables do the same). */
  & .brand h1, & .authbrand h1 { font-weight: 700; letter-spacing: -0.022em; }
  & .chat-empty h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.024em; }

  /* Chrome: one grouped-grey surface, hairlines instead of borders. */
  & .topbar, & .sidebar { background: var(--plane); }
  & .topbar { border-bottom: 0.5px solid var(--baseline); }
  & .sidebar { border-right: 0.5px solid var(--baseline); }
  & .sidenav .tab { border-radius: 8px; padding: 7px 10px; }
  & .sidenav .tab svg { color: var(--series-1); }
  & .sidenav .tab:hover { background: var(--ghost); }
  & .sidenav .tab[aria-selected="true"] {
    background: var(--fill); box-shadow: none; font-weight: 600;
  }

  & .add-btn { border-radius: 999px; }
  & .chatopen button { border-radius: 999px 0 0 999px; }

  /* Segmented control: a grey track, the chosen segment a raised white
     thumb (not a blue fill). */
  & .viewtoggle {
    border: none; border-radius: 9px; padding: 2px; gap: 2px; background: var(--fill);
  }
  & .viewtoggle button {
    border-radius: 7px; padding: 4px 12px; color: var(--text-primary); background: none;
  }
  & .viewtoggle button + button { border-left: none; }
  & .viewtoggle button:hover:not(.active) { background: var(--ghost); }
  & .viewtoggle button.active {
    background: var(--thumb); color: var(--text-primary); font-weight: 600;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
  }

  /* Fields: filled, borderless, a soft focus ring. */
  & input[type="search"], & .field input[type="text"], & .field input[type="url"],
  & .field input[type="password"], & .setting-row select, & #lang-select, & .hint select,
  & .chatopen select {
    border: none; background: var(--fill); border-radius: 10px; color: var(--text-primary);
  }
  & input[type="search"]:focus, & .field input:focus {
    outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--series-1) 35%, transparent);
  }
  & .chatopen select { border-radius: 0 999px 999px 0; border-left: 1px solid var(--border); }

  /* Cards: white on grey, no outline, larger radius. */
  & .card, & .tile, & .authcard {
    border: none; border-radius: 14px; box-shadow: var(--lift);
  }
  & .authcard { border-radius: 20px; padding: 28px; }
  & .card > h2 {
    font-size: 15px; font-weight: 600; letter-spacing: -0.012em;
    border-bottom: 0.5px solid var(--grid);
  }
  & .tile .label {
    text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500;
  }
  & .tile .value { font-family: var(--font-round); font-weight: 700; font-size: 28px; }

  /* Banners and results: a tint, not a coloured stripe. */
  & .banner, & .result { border: none; border-radius: 12px; }
  & .banner.warn { background: color-mix(in srgb, var(--warning) 14%, var(--surface-1)); }
  & .banner.err, & .result.bad { background: color-mix(in srgb, var(--critical) 12%, var(--surface-1)); }
  & .result.ok { background: color-mix(in srgb, var(--good) 12%, var(--surface-1)); }
  & .result.busy { background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1)); }
  & .codebox { border: none; border-radius: 12px; background: var(--fill); }

  /* Pills, tags and states: tinted capsules. */
  & .pill, & .state, & .tag, & .hits .page {
    border: none; background: var(--fill); border-radius: 999px;
  }
  & .state.done { background: color-mix(in srgb, var(--good) 14%, transparent); }
  & .state.todo { background: color-mix(in srgb, var(--serious) 14%, transparent); }
  & .state.graded { background: color-mix(in srgb, var(--series-1) 14%, transparent); }
  & .tag { padding: 1px 8px; }
  & .tag.missing { background: color-mix(in srgb, var(--critical) 14%, transparent); }
  & .tag.away { border: none; }
  & .duelist .go {
    border: none; background: var(--fill); border-radius: 999px; font-weight: 500;
  }

  /* Lists: inset separators, a press highlight. */
  & .duelist li, & .hits li, & tbody td { border-bottom-width: 0.5px; }
  & thead th { border-bottom-width: 0.5px; }
  & .course-list button { border-radius: 10px; }
  & .connitem { border-radius: 12px; }
  & .connitem.active { border-color: transparent; background: var(--fill); }
  & .connitem .avatar { border-radius: 10px; }
  & .filecard { border: none; border-radius: 12px; background: var(--fill); }
  & .filecard:hover, & .filecard.picked {
    background: var(--ghost); box-shadow: inset 0 0 0 2px var(--series-1);
  }
  & .filecard .ext { border-radius: 6px; }
  & .progress-track, & .progress-fill { border-radius: 999px; }
  & .progress-track { background: var(--fill); }

  /* Chat: Messages-style bubbles and a capsule composer. */
  & .bubble { border-radius: 20px; padding: 9px 15px; }
  & .bubble.user { border-bottom-right-radius: 6px; }
  & .bubble.assistant { border: none; background: var(--bubble); border-bottom-left-radius: 6px; }
  & .bubble.note { border: 1px dashed var(--baseline); background: none; }
  & .chatbox { border-radius: 22px; border: 0.5px solid var(--baseline); padding: 5px 5px 5px 8px; }
  & .chatbox button.primary { padding: 7px 14px; }
  & .chat-suggest button { border: none; background: var(--fill); color: var(--text-primary); }

  /* Floating material: toasts, the Halo menu, the viewer's bar. */
  & .toast, & .halo, & .demo-menu {
    border: 0.5px solid var(--glass-rim); background: var(--glass);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);
  }
  & .toast { border-radius: 16px; padding: 11px 14px 11px 16px; }
  & .toast::before {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
    background: var(--series-1);
  }
  & .toast.bad::before { background: var(--critical); }
  & .halo { border-radius: 12px; }
  & .halo-item { border-radius: 6px; }
  /* macOS menus: the hovered item takes the accent, label turns white. */
  & .halo-item:hover, & .halo-item:focus-visible { background: var(--series-1); color: #fff; }
  & .halo-item:hover .halo-ic, & .halo-item:hover .halo-k,
  & .halo-item:focus-visible .halo-ic, & .halo-item:focus-visible .halo-k { color: rgba(255, 255, 255, 0.85); }
  & .halo-h { text-transform: none; letter-spacing: 0; font-size: 12px; }
  & .viewer-bar {
    background: var(--glass); border-bottom: 0.5px solid var(--baseline);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  }
  /* The reader: tinted capsule tools, a glass edit menu over a selection,
     a glass card for Until here, an inset-grouped Marks sheet. */
  & .rd-tool { border: none; border-radius: 999px; background: var(--fill); color: var(--series-1); font-weight: 600; }
  & .rd-bar, & .rd-guide-card, & .rd-chip {
    border: 0.5px solid var(--glass-rim); background: var(--glass);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);
  }
  & .rd-bar { padding: 7px 9px; gap: 8px; }
  & .rd-act { border: none; background: none; color: var(--series-1); font-weight: 600; }
  & .rd-act.bad { color: var(--critical); }
  & .rd-dot { border: 0.5px solid rgba(0, 0, 0, 0.12); }
  & .rd-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--series-1); }
  & .rd-guide-card { border-radius: 18px; color: var(--text-secondary); }
  & .rd-chip { color: var(--text-primary); }
  & .rd-chip b { color: var(--series-1); }
  & .rd-until span, & .rd-guide-tag { font-weight: 600; letter-spacing: -0.01em; }
  & .rd-panel { background: var(--plane); border-left: 0.5px solid var(--baseline); box-shadow: none; }
  & .rd-panel-h, & .rd-panel-acts { background: var(--plane); }
  & .rd-panel h4 { text-transform: none; letter-spacing: 0; font-size: 13px; margin: 16px 4px 6px; }
  & .rd-row { background: var(--surface-1); border-radius: 0; padding: 11px 12px; }
  & .rd-row + .rd-row { box-shadow: inset 0 0.5px 0 var(--grid); }
  & h4 + .rd-row { border-top-left-radius: 10px; border-top-right-radius: 10px; }
  & .rd-row:has(+ :not(.rd-row)) { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
  & .rd-row:hover { background: var(--surface-1); filter: brightness(0.97); }
  & .rd-tool.rd-tool-live { background: rgba(255, 149, 0, 0.14); color: #c93400; }
  & .rd-here, & .rd-transit::after { border-top-color: #ff9500; }
  & .rd-here span { background: #ff9500; }
  & .rd-transit span { color: #c93400; border-color: #ff9500; }
  & .rd-chip.rd-callback { background: rgba(255, 149, 0, 0.92); color: #fff; }
  & .rd-band span { font-weight: 600; letter-spacing: -0.01em; }
  & .rd-class-acts button { border: none; border-radius: 10px; background: var(--fill); color: var(--series-1); font-weight: 600; }
  & .course-list .group { text-transform: none; letter-spacing: 0; font-size: 12px; }
  & .setting-row + .setting-row { border-top-width: 0.5px; }
}

/* Phones: the tab bar is the iOS glass one on every phone in this look,
   Android included (app.js keeps html.os-ios while the look is on). */
@media (max-width: 760px) {
  :root[data-look="apple"] {
    & .sidebar { background: var(--glass); border: 0.5px solid var(--glass-rim); }
    & .sidenav .tab { border-radius: 999px; padding: 0; }
    & .sidenav .tab svg { color: inherit; }
    & .sidenav .tab:hover { background: none; }
    & .sidenav .tab[aria-selected="true"] {
      color: var(--series-1); font-weight: inherit;
      background: color-mix(in srgb, var(--series-1) 14%, transparent);
    }
    & .topbar { background: var(--plane); }
    & .pull { border: none; box-shadow: var(--glass-shadow); }
  }
}

/* Less transparency or more contrast: the materials go solid. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root[data-look="apple"] :is(.toast, .halo, .demo-menu, .viewer-bar, .rd-bar, .rd-guide-card, .rd-chip) {
    background: var(--surface-1); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  :root[data-look="apple"] :is(.card, .tile, .authcard, button, .viewtoggle, .filecard) {
    box-shadow: inset 0 0 0 1px var(--text-muted);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-look="apple"] button:active:not(:disabled) { transform: none; }
}

/* ---------------------------------------------------------- nebula */
/* Nebula's screen (web/nebula/): a macOS-style file manager. Translucent
   toolbar with content under it, a source-list sidebar, a segmented look
   control, capsule filters, an inset-grouped table and an inspector pane. */
html[data-look="apple"] .nb-head {
  background: color-mix(in srgb, var(--surface-1) 72%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0;
  box-shadow: 0 0.5px 0 var(--grid);
}
html[data-look="apple"] .nb-brand strong { letter-spacing: -0.02em; font-weight: 600; }
html[data-look="apple"] .nb-main h2 { font-size: 22px; letter-spacing: -0.02em; font-weight: 700; }
html[data-look="apple"] .nb-bar { height: 6px; border: 0; border-radius: 3px; }
html[data-look="apple"] .nb-fill { border-radius: 3px; }
html[data-look="apple"] .nb-seg {
  border: 0; border-radius: 9px; padding: 2px; background: var(--ghost);
}
html[data-look="apple"] .nb-seg button { border-radius: 7px; padding: 3px 12px; font-weight: 500; }
html[data-look="apple"] .nb-seg button.active {
  background: var(--surface-1); color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px var(--border);
}
html[data-look="apple"] .nb-side { background: color-mix(in srgb, var(--plane) 85%, var(--grid)); border-right: 0;
  box-shadow: 0.5px 0 0 var(--grid); }
html[data-look="apple"] .nb-view, html[data-look="apple"] .nb-course { border-radius: 8px; }
html[data-look="apple"] .nb-view.active, html[data-look="apple"] .nb-course.active {
  background: var(--series-1); color: #fff;
}
html[data-look="apple"] .nb-course.active .nb-cmeta { color: rgba(255, 255, 255, 0.8); }
html[data-look="apple"] .nb-school h3 { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; }
html[data-look="apple"] .nb-gchip, html[data-look="apple"] .nb-chip { border: 0; background: var(--ghost); }
html[data-look="apple"] .nb-gchip { padding: 5px 14px; font-weight: 500; }
html[data-look="apple"] .nb-gchip.active { background: var(--series-1); color: #fff; }
html[data-look="apple"] .nb-gchip:active, html[data-look="apple"] .nb-seg button:active,
html[data-look="apple"] .nb-view:active, html[data-look="apple"] .nb-course:active {
  transform: scale(0.97); transition: transform 100ms ease-out;
}
html[data-look="apple"] .nb-search { border: 0; border-radius: 9px; background: var(--ghost); padding: 7px 12px; }
html[data-look="apple"] .nb-table { border: 0; border-radius: 10px; box-shadow: 0 0 0 0.5px var(--border); }
html[data-look="apple"] .nb-table th { text-transform: none; font-weight: 600; }
html[data-look="apple"] .nb-table td { border-bottom: 0.5px solid var(--grid); }
html[data-look="apple"] .nb-folder td { background: transparent; color: var(--text-muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 12px; }
html[data-look="apple"] .nb-row.active { background: var(--series-1); color: #fff; }
html[data-look="apple"] .nb-row.active td { color: #fff; }
html[data-look="apple"] .nb-badge { border-radius: 999px; padding: 1px 8px; }
html[data-look="apple"] .nb-inspect { border-left: 0; box-shadow: -0.5px 0 0 var(--grid); }
html[data-look="apple"] .nb-inspect h4 { text-transform: none; letter-spacing: 0; font-weight: 600; }
html[data-look="apple"] .nb-note { border-radius: 10px; }
html[data-look="apple"] .nb-actions button { border: 0; border-radius: 999px; background: var(--ghost);
  padding: 6px 14px; font-weight: 500; }
@media (prefers-reduced-transparency: reduce) {
  html[data-look="apple"] .nb-head { background: var(--surface-1); backdrop-filter: none;
    -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-look="apple"] .nb-gchip:active, html[data-look="apple"] .nb-seg button:active,
  html[data-look="apple"] .nb-view:active, html[data-look="apple"] .nb-course:active { transform: none; }
}