/* The look of the pages, after Apple's Human Interface Guidelines: the
   system font (SF Pro and SF Hebrew on Apple devices, Segoe UI on Windows),
   grouped lists on light grey (black in dark mode), the iOS system colours,
   switches, segmented controls, a sidebar as in macOS System Settings and
   translucent bars. The same file is static/style.css in lesson-recorder
   (Study/Generic) and in screen-watch (Apps/Generic). */

:root {
  color-scheme: light;
  --bg: #f2f2f7;                 /* systemGroupedBackground */
  --card: #ffffff;               /* secondarySystemGroupedBackground */
  --card-2: #f2f2f7;             /* a field or a box inside a card */
  --side: #e8e8ed;               /* the sidebar */
  --text: #1d1d1f;
  --muted: #6e6e73;              /* secondary text, readable on white */
  --faint: #aeaeb2;
  --line: rgba(60, 60, 67, .17); /* separators */
  --fill: rgba(118, 118, 128, .12);
  --fill-2: rgba(118, 118, 128, .2);
  --switch-off: #e9e9eb;
  --accent: #007aff;
  --accent-text: #ffffff;
  --accent-ink: #0068da;         /* blue text on white */
  --red: #ff3b30;    --red-ink: #d70015;
  --green: #34c759;  --green-ink: #248a3d;
  --orange: #ff9500; --orange-ink: #c93400;
  --yellow: #ffcc00;
  --indigo: #5856d6; --purple: #af52de; --pink: #ff2d55; --teal: #30b0c7; --gray: #8e8e93;
  --bar: rgba(242, 242, 247, .78);
  --alert: rgba(250, 250, 252, .9);
  --shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .05);
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Hebrew", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* the names the scripts use */
  --live: var(--red-ink);
  --ok: var(--green-ink);
  --warn: var(--orange-ink);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --card: #1c1c1e;
    --card-2: #2c2c2e;
    --side: #161618;
    --text: #f5f5f7;
    --muted: #98989f;
    --faint: #636366;
    --line: rgba(84, 84, 88, .62);
    --fill: rgba(118, 118, 128, .24);
    --fill-2: rgba(118, 118, 128, .34);
    --switch-off: #39393d;
    --accent: #0a84ff;
    --accent-ink: #409cff;
    --red: #ff453a;    --red-ink: #ff6961;
    --green: #30d158;  --green-ink: #30d158;
    --orange: #ff9f0a; --orange-ink: #ffb340;
    --yellow: #ffd60a;
    --indigo: #5e5ce6; --purple: #bf5af2; --pink: #ff375f; --teal: #40c8e0; --gray: #8e8e93;
    --bar: rgba(22, 22, 24, .78);
    --alert: rgba(44, 44, 46, .92);
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: .88em; }
bdi { unicode-bidi: isolate; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }

h1 { font-size: 28px; line-height: 1.2; font-weight: 700; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
h3 { font-size: 15px; font-weight: 600; margin: 0; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.lead { font-size: 15px; color: var(--muted); max-width: 720px; margin: 4px 0 0; }

/* --- layout: a sidebar as in macOS System Settings, a bar on top on narrow screens --- */

.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--side); border-inline-end: .5px solid var(--line);
  padding: 18px 12px 16px; display: flex; flex-direction: column; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 6px; }
.brand b { display: block; font-size: 15px; }
.brand .muted { font-size: 12px; font-variant-numeric: tabular-nums; }
.app-icon {
  width: 38px; height: 38px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 0 0 .5px rgba(255, 255, 255, .15);
}
.app-icon svg { width: 22px; height: 22px; }
.nav { display: grid; gap: 2px; }
.nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 8px;
  background: none; color: var(--text); font-size: 14px; font-weight: 400; text-align: start;
}
.nav button:hover { background: var(--fill); }
.nav button[aria-selected="true"] { background: var(--accent); color: #fff; }
.nav button[aria-selected="true"] .badge { background: rgba(255, 255, 255, .25); color: #fff; }
.nav .label { flex: 1; }
.ico {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; flex: none; color: #fff;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .06);
}
.ico svg { width: 15px; height: 15px; }
.ico.red { background: linear-gradient(#ff6a60, #ff3b30); }
.ico.orange { background: linear-gradient(#ffad33, #ff9500); }
.ico.yellow { background: linear-gradient(#ffd84d, #ffc300); }
.ico.green { background: linear-gradient(#5ad87a, #30c552); }
.ico.teal { background: linear-gradient(#55c8dc, #2aa7bd); }
.ico.blue { background: linear-gradient(#3d9bff, #007aff); }
.ico.indigo { background: linear-gradient(#7c7aea, #5856d6); }
.ico.purple { background: linear-gradient(#c77ef0, #a645dc); }
.ico.pink { background: linear-gradient(#ff5c7c, #ff2d55); }
.ico.gray { background: linear-gradient(#a2a2a8, #8e8e93); }
.side-status { margin-top: auto; display: grid; gap: 8px; }
.side-card { background: var(--card); border-radius: 10px; padding: 10px 12px; font-size: 13px; box-shadow: var(--shadow); }
.side-card b { display: block; font-size: 13px; }

main { padding: 26px 32px 64px; min-width: 0; }
.page { max-width: 1000px; margin: 0 auto; display: grid; gap: 16px; }
.page > *, .grid2 > * { min-width: 0; }
.page-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 2px; }
.page-head h1 { flex: 1; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

@media (max-width: 860px) {
  .app { display: block; }
  .sidebar {
    height: auto; position: sticky; top: 0; z-index: 10; padding: 10px 16px 8px; gap: 8px;
    border-inline-end: 0; border-bottom: .5px solid var(--line);
    background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  }
  .nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav button { width: auto; white-space: nowrap; padding: 5px 10px 5px 8px; border-radius: 999px; font-size: 13px; }
  .nav .ico { width: 20px; height: 20px; border-radius: 5px; }
  .nav .ico svg { width: 13px; height: 13px; }
  .side-status { margin: 0; }
  .side-card { padding: 7px 10px; }
  main { padding: 18px 16px 56px; }
  h1 { font-size: 26px; }
}

/* --- grouped boxes and lists --- */

.card { background: var(--card); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.list { padding: 0; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 16px; position: relative; }
.list > .row + .row::before, .list > .row-sep + .row::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 16px; inset-inline-end: 0;
  border-top: .5px solid var(--line);
}
.list > .row.with-ico + .row::before, .list > .row + .row.with-ico::before { inset-inline-start: 52px; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-size: 15px; }
.row .sub { font-size: 13px; color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; }
.row .end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.row .value { color: var(--muted); text-align: end; }
label.row { cursor: pointer; }
.row.tappable { cursor: pointer; }
.row.tappable:hover { background: var(--fill); }
.section-title { font-size: 13px; color: var(--muted); font-weight: 400; margin: 10px 16px -10px; }
.section-foot { font-size: 13px; color: var(--muted); margin: -8px 16px 0; }
.section-foot p { margin: 0 0 4px; }

/* --- controls --- */

button, select, input, textarea { font: inherit; color: inherit; }
button {
  border: 0; border-radius: 8px; background: var(--fill); color: var(--accent-ink);
  padding: 7px 14px; font-size: 14px; font-weight: 500; cursor: pointer; line-height: 1.3;
  transition: background .15s, opacity .15s, transform .1s;
}
button:hover { background: var(--fill-2); }
button:active { transform: scale(.98); opacity: .8; }
button.primary { background: var(--accent); color: var(--accent-text); }
button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
button.danger { color: var(--red-ink); }
button.plain { background: none; padding-inline: 6px; }
button.plain:hover { background: var(--fill); }
button.small { padding: 4px 10px; font-size: 13px; border-radius: 7px; }
button.pill { border-radius: 999px; padding: 8px 18px; }
button:disabled { opacity: .38; cursor: default; transform: none; }
button.on { background: var(--red); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.actions:first-child { margin-top: 0; }

select, input[type=text], input[type=number], input[type=time], input[type=date], input[type=tel],
input[type=password], input[type=search], textarea {
  border: 0; border-radius: 8px; background: var(--fill); color: var(--text);
  padding: 7px 10px; min-width: 0; font-size: 14px;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
select:focus, input:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-inline-end: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M2 5.2l3-3 3 3M2 8.8l3 3 3-3' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
[dir="rtl"] select { background-position: left 10px center; }
select option { background: var(--card); color: var(--text); }
input[type=number] { width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
input[type=time], input[type=date] { font-variant-numeric: tabular-nums; }
/* Times, dates and numbers read left to right in a Hebrew page too: laid out right to left,
   the browser puts a time's minutes before its hours (08:00 shown as 00:08) and a date's
   year first. In their place on the right side of a row. */
input[type=time], input[type=date], input[type=number], input[type=tel] { direction: ltr; }
[dir="rtl"] input[type=time], [dir="rtl"] input[type=date] { text-align: right; }
textarea { width: 100%; font: 13px/1.45 var(--mono); padding: 10px 12px; resize: vertical; }
.unit { color: var(--muted); font-size: 13px; }

/* switches, drawn with backgrounds so every browser shows them */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 44px; height: 26px; border-radius: 13px; vertical-align: middle;
  background-color: var(--switch-off);
  background-image: radial-gradient(circle closest-side, #fff 92%, rgba(255, 255, 255, 0) 100%),
                    radial-gradient(circle closest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
  background-size: 22px 22px, 26px 26px;
  background-repeat: no-repeat;
  background-position: 2px 2px, 0 1px;
  transition: background-position .22s cubic-bezier(.3, .7, .4, 1), background-color .22s;
}
input[type=checkbox]:checked { background-color: var(--green); background-position: calc(100% - 2px) 2px, 100% 1px; }
[dir="rtl"] input[type=checkbox] { background-position: calc(100% - 2px) 2px, 100% 1px; }
[dir="rtl"] input[type=checkbox]:checked { background-position: 2px 2px, 0 1px; }
input[type=checkbox]:disabled { opacity: .4; cursor: default; }
/* a round tick for choosing items in a list, as in iOS */
input[type=checkbox].pick, [dir="rtl"] input[type=checkbox].pick {
  width: 22px; height: 22px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--faint);
}
input[type=checkbox].pick:checked, [dir="rtl"] input[type=checkbox].pick:checked {
  box-shadow: none; background: var(--accent) no-repeat center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type=radio] {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); background: var(--card);
}
input[type=radio]:checked { box-shadow: none; background: radial-gradient(circle, #fff 0 3.5px, var(--accent) 4.5px); }

/* a segmented control */
.segmented { display: inline-flex; background: var(--fill); border-radius: 9px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.segmented button {
  background: none; color: var(--text); font-weight: 500; font-size: 13px; padding: 5px 12px; border-radius: 7px;
}
.segmented button:hover { background: var(--fill); }
.segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] {
  background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
}
@media (prefers-color-scheme: dark) {
  .segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: #636366; }
}

/* --- status --- */

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); vertical-align: middle; flex: none; }
.dot.live { background: var(--red); animation: pulse 1.6s infinite; }
.dot.ok { background: var(--green); }
.dot.warn { background: var(--orange); }
@keyframes pulse { 50% { opacity: .3; } }
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange-ink);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: var(--fill); color: var(--muted); white-space: nowrap;
}
.pill.red { background: var(--red); color: #fff; }
.pill.red::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
.pill.orange { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange-ink); }
.pill.green { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green-ink); }
.pill.blue { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); }
.banner {
  display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 10px 12px; font-size: 14px;
  background: color-mix(in srgb, var(--orange) 14%, var(--card)); margin-top: 10px;
}
.banner svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--orange); }
.banner.err { background: color-mix(in srgb, var(--red) 12%, var(--card)); }
.banner.err svg { color: var(--red); }
.banner.ok { background: color-mix(in srgb, var(--green) 13%, var(--card)); }
.banner.ok svg { color: var(--green); }
.meter { width: 120px; height: 6px; background: var(--fill-2); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; }
.meter > i { display: block; height: 100%; background: var(--green); width: 0; border-radius: 3px; transition: width .2s; }
.bar { height: 6px; background: var(--fill-2); border-radius: 3px; overflow: hidden; margin: 6px 0 4px; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s; }
.bar.busy i { width: 30% !important; animation: busy 1.4s ease-in-out infinite; }
@keyframes busy { from { margin-inline-start: -30%; } to { margin-inline-start: 100%; } }
.error { color: var(--red-ink); white-space: pre-wrap; }
.okmsg { color: var(--green-ink); }
.empty { color: var(--muted); padding: 14px 16px; font-size: 14px; }

/* --- tables --- */

.table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: start; padding: 6px 6px; border-bottom: .5px solid var(--line); vertical-align: middle; }
th { font-weight: 500; font-size: 12px; color: var(--muted); white-space: nowrap; padding-top: 0; }
tbody tr:last-child td { border-bottom: 0; }
td input[type=text], td select { width: 100%; }

/* --- a translucent bar at the bottom, for saving --- */

.savebar {
  position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px; border-radius: 14px; background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 0 .5px var(--line), 0 6px 24px rgba(0, 0, 0, .1);
}

/* --- an alert, as on iOS --- */

dialog.alert {
  border: 0; padding: 0; width: min(300px, calc(100vw - 48px)); border-radius: 14px; color: var(--text);
  background: var(--alert); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
dialog.alert::backdrop { background: rgba(0, 0, 0, .28); }
dialog.alert[open] { animation: pop .18s ease-out; }
@keyframes pop { from { transform: scale(1.08); opacity: 0; } }
dialog.alert .body { padding: 18px 16px 16px; }
dialog.alert h3 { font-size: 16px; margin-bottom: 4px; }
dialog.alert p { font-size: 13px; margin: 0; }
dialog.alert .buttons { display: flex; border-top: .5px solid var(--line); }
dialog.alert .buttons button { flex: 1; border-radius: 0; background: none; padding: 11px 8px; font-size: 16px; color: var(--accent-ink); }
dialog.alert .buttons button:hover { background: var(--fill); }
dialog.alert .buttons button + button { border-inline-start: .5px solid var(--line); }
dialog.alert .buttons .default { font-weight: 600; }
dialog.alert .buttons .danger { color: var(--red-ink); }

/* a short note at the bottom, as macOS shows one */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px); z-index: 50;
  background: var(--alert); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 0 .5px var(--line), 0 8px 28px rgba(0, 0, 0, .18); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.bad { color: var(--red-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* the transcript lines a roll call alarm rests on */
.evidence { background: var(--fill); border-radius: 10px; padding: 8px 12px; display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.evidence b { color: var(--text); }