/* OxOnOS OS layer — palette, Control Centre, notifications, banners, badges,
   the shortcut sheet. Everything is scoped to .os-* so it cannot re-skin a
   screen. Tokens only (RULEBOOK R-C4): no literal colour, no off-scale size,
   no uppercase, no letter-spacing. Linked AFTER v2.css (one line in
   ui/index.html, the shell's file). Motion uses --dur-* / --ease, which
   tokens.css already zeroes under prefers-reduced-motion. */

/* ── topbar buttons ─────────────────────────────────────────────────────── */
.os-topbar { display: inline-flex; align-items: center; gap: var(--s-1); }
.os-iconbtn {
  position: relative; display: inline-grid; place-items: center;
  width: var(--hit); height: var(--hit); flex: 0 0 auto; padding: 0;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2);
  cursor: pointer; font: inherit;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.os-iconbtn:hover, .os-iconbtn[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.os-iconbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.os-iconbtn[hidden] { display: none; }
.os-iconbtn svg { width: 22px; height: 22px; }
.os-bell.is-dnd svg { opacity: .55; }
.os-count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 var(--s-1);
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font-size: var(--t-caption); font-weight: var(--w-medium); line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.os-count[hidden] { display: none; }

/* ── rail and tab-bar badges ────────────────────────────────────────────── */
.nav a:has(> .os-badge), .tabbar a:has(> .os-badge) { position: relative; }
.os-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 var(--s-1);
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font-size: var(--t-caption); font-weight: var(--w-medium); line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.tabbar .os-badge { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; }

/* ── the sheet ──────────────────────────────────────────────────────────── */
.os-scrim { position: fixed; inset: 0; z-index: 60; background: transparent; pointer-events: none; }
.os-scrim--modal { background: color-mix(in srgb, var(--text) 28%, transparent); pointer-events: auto; }
.os-scrim[hidden] { display: none; }
.os-sheet {
  position: fixed; z-index: 61;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  padding: var(--s-6); overflow: auto; overscroll-behavior: contain;
  animation: os-rise var(--motion-sheet);
}
.os-sheet[hidden] { display: none; }
.os-sheet:focus-visible, .os-sheet *:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.os-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: calc(-1 * var(--s-2)) 0 var(--s-4); }
.os-sheet__title { margin: 0; font-size: var(--t-title-3); font-weight: var(--w-bold); line-height: var(--lh-snug); }
.os-sheet__close { margin-right: calc(-1 * var(--s-2)); }
.os-sheet--side {
  top: calc(64px + var(--s-2)); right: var(--s-4);
  width: min(420px, calc(100vw - 2 * var(--s-4))); max-height: calc(100vh - 64px - 2 * var(--s-4));
}
.os-sheet--keys { top: 14vh; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 2 * var(--s-4))); animation: none; }
@keyframes os-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── the palette ────────────────────────────────────────────────────────── */
.os-sheet--palette {
  top: 12vh; left: 50%; transform: translateX(-50%); animation: none;
  width: min(640px, calc(100vw - 2 * var(--s-4))); max-height: 72vh;
  padding: 0; display: flex; flex-direction: column; overflow: hidden;
}
.os-sheet--palette .os-sheet__body { display: flex; flex-direction: column; min-height: 0; }
.os-pal { display: flex; flex-direction: column; min-height: 0; }
.os-pal__field {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--hairline);
}
.os-pal__ico { flex: none; color: var(--text-3); }
.os-pal__input {
  flex: 1; min-width: 0; min-height: var(--hit); border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: var(--t-lead); outline: none;
}
.os-pal__input:focus, .os-pal__input:focus-visible { outline: none; }
.os-pal__input::placeholder { color: var(--text-3); }
.os-pal__list { overflow: auto; padding: var(--s-2); min-height: 0; flex: 1; }
.os-pal__ghead { padding: var(--s-3) var(--s-3) var(--s-1); font-size: var(--t-caption); font-weight: var(--w-medium); color: var(--text-3); }
.os-pal__row {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--hit);
  padding: 0 var(--s-3); border-radius: var(--r-md); cursor: pointer;
}
.os-pal__row[aria-selected="true"] { background: var(--surface-2); }
.os-pal__t { font-size: var(--t-body); font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.os-pal__h { margin-left: auto; flex: none; max-width: 45%; font-size: var(--t-small); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-pal__h + .os-pal__h { margin-left: var(--s-2); }
.os-pal__row--ask .os-pal__t { color: var(--accent); }
.os-pal__status { padding: var(--s-2) var(--s-3); font-size: var(--t-small); color: var(--text-2); }
.os-pal__foot { margin: 0; padding: var(--s-2) var(--s-5); border-top: 1px solid var(--hairline); font-size: var(--t-caption); color: var(--text-3); }
.os-kbd {
  display: inline-block; min-width: 22px; padding: 0 var(--s-1); margin: 0 2px;
  border: 1px solid var(--control-border); border-radius: var(--r-sm); background: var(--surface);
  font: inherit; font-size: var(--t-caption); line-height: 20px; text-align: center; color: var(--text-2);
}

/* ── Control Centre ─────────────────────────────────────────────────────── */
.os-cc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.os-tile { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--s-4); min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.os-tile--wide { grid-column: 1 / -1; }
.os-tile__t { margin: 0; font-size: var(--t-body); font-weight: var(--w-medium); display: flex; justify-content: space-between; gap: var(--s-2); }
.os-tile__v { font-weight: var(--w-regular); color: var(--text-2); font-variant-numeric: tabular-nums; }
.os-tile__d { margin: 0; font-size: var(--t-small); color: var(--text-2); }
.os-tile__d:empty { display: none; }
.os-tile__more { margin: auto 0 0; font-size: var(--t-small); }
.os-tile__more a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; min-height: var(--hit); align-items: center; }
.os-tile__more a:hover { color: var(--text); }
/* ⛔ No segmented control of its own: Appearance and View are ui.js
   segmented({ fill: true }) — the .seg / .seg--fill rules in v2.css. The old
   .os-seg (44 px segments, 3 px track, width:100% of a HALF tile) is what put
   "Dark" off the end of its track (founder, 2026-10-05 02:04). On the tile's
   --surface-2 the track takes --surface so it reads as a well, not a hole. */
.os-tile .seg { background: var(--surface); }
.os-tile .seg button[aria-checked="true"] { background: var(--surface-2); }
.os-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.os-row + .os-row { padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
.os-row--action { padding-top: var(--s-3); border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.os-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.os-cc .switch { margin: 6px 0; }
.os-cc .switch::before { content: ""; position: absolute; inset: -6px -2px; }
/* flex: none — .oxo-range (app.css) is `flex: 0 1 200px` for a ROW; in this
   column tile that basis became a 200 px tall slider box (2026-10-05). */
.os-range { margin: 0; width: 100%; max-width: none; flex: none; min-height: var(--hit); accent-color: var(--accent); }
.os-sheet .btn { white-space: nowrap; }
.os-sheet .btn.destructive { background: transparent; color: var(--bad); border-color: var(--control-border); }
.os-sheet .btn.destructive:hover { background: var(--bad-bg); opacity: 1; }
.os-sheet .btn.plain { background: transparent; color: var(--text); border-color: transparent; }
.os-sheet .btn.plain:hover { background: var(--surface-2); opacity: 1; }

/* ── notification centre ────────────────────────────────────────────────── */
.os-nc { display: flex; flex-direction: column; gap: var(--s-4); }
.os-nc__line { margin: 0; font-size: var(--t-small); color: var(--text-2); }
.os-nc__acts { display: flex; gap: var(--s-2); }
.os-nc__group h3 { margin: 0 0 var(--s-2); font-size: var(--t-small); font-weight: var(--w-medium); color: var(--text-2); }
.os-nc__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.os-note { display: flex; align-items: flex-start; gap: var(--s-2); border-radius: var(--r-md); }
.os-note > .dot { margin-top: 18px; flex: none; }
.os-note:not(.is-unread) > .dot { opacity: .45; }
.os-note__main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left;
  min-height: var(--hit); padding: var(--s-2) var(--s-2); border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.os-note__main:hover:not(:disabled) { background: var(--surface-2); }
.os-note__main:disabled { cursor: default; }
.os-note__main b { font-size: var(--t-body); font-weight: var(--w-medium); }
.os-note:not(.is-unread) .os-note__main b { font-weight: var(--w-regular); }
.os-note__main span { font-size: var(--t-small); color: var(--text-2); }
.os-note__main small { font-size: var(--t-caption); color: var(--text-3); font-variant-numeric: tabular-nums; }
.os-new { color: var(--text); font-weight: var(--w-medium); }
.os-nc__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-4) 0; color: var(--text-2); font-size: var(--t-small); }
.os-nc__empty b { color: var(--text); font-size: var(--t-body); font-weight: var(--w-medium); }
.os-nc__empty svg { color: var(--text-3); }

/* ── banners ────────────────────────────────────────────────────────────── */
.os-banners { position: fixed; top: calc(64px + var(--s-2)); right: var(--s-4); z-index: 70; width: min(400px, calc(100vw - 2 * var(--s-4))); pointer-events: none; }
.os-banners__live { display: flex; flex-direction: column; gap: var(--s-2); }
.os-banner {
  pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--s-3);
  padding: var(--s-4); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  animation: os-rise var(--motion-banner);
}
.os-banner > .dot { margin-top: 7px; }
.os-banner__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; border-radius: var(--r-sm); }
button.os-banner__text { cursor: pointer; min-height: var(--hit); }
.os-banner__text b { font-size: var(--t-body); font-weight: var(--w-medium); }
.os-banner__text span { font-size: var(--t-small); color: var(--text-2); }
.os-banner__acts { display: flex; align-items: center; gap: var(--s-1); margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) 0 0; }

/* ── shortcut sheet ─────────────────────────────────────────────────────── */
.os-keys { margin: 0 0 var(--s-4); display: flex; flex-direction: column; }
.os-keys__row { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: var(--s-4); align-items: center; min-height: var(--hit); border-bottom: 1px solid var(--hairline); }
.os-keys dt { white-space: nowrap; }
.os-keys dd { margin: 0; font-size: var(--t-body); }

/* ── phones: the sheets become bottom sheets ────────────────────────────── */
@media (max-width: 760px) {
  .os-scrim:not([hidden]) { background: color-mix(in srgb, var(--text) 28%, transparent); pointer-events: auto; }
  .os-sheet--side, .os-sheet--keys {
    top: auto; left: 0; right: 0; bottom: 0; transform: none; width: auto;
    max-height: 86vh; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  }
  .os-sheet--palette { top: var(--s-4); max-height: calc(100vh - 2 * var(--s-4)); }
  .os-cc { grid-template-columns: 1fr; }
  .os-banners { top: calc(56px + var(--s-2)); left: var(--s-4); right: var(--s-4); width: auto; }
  .os-topbar { gap: 0; }
}

/* ── the glass: 48 px targets, as everywhere else on it ─────────────────── */
[data-glass] .os-iconbtn { width: 48px; height: 48px; }