/* public/look-apple/base.css — the NEW look's shared components ("Deepslate"; specs/redesign/spec.md §3-§5). W0 owns this
   file; the areas restyle their pages in chat.css / login.css / listen.css / admin.css / manager.css / map.css / apidocs.css.
   Rules:
     - every selector starts with html[data-look="apple"] (scopes the file to the new look and outweighs ui.css + the pages'
       <style> blocks); class names, ids and the DOM stay — only this file (and shell.js's few pieces) restyle them;
     - the layout engine's geometry is untouched: the .grid / .layout gaps keep the classic values (layout.js reads them);
     - glass only on the functional layer (the desktop top bar, menus / popovers / desktop sheets; the map's chrome is
       map.css), opaque on phones, with reduced transparency, increased contrast, or no backdrop-filter;
     - !important only where a classic !important or an inline style must be beaten (listed at each one).
   Contents: base · top bar + the Live Island · phone bar + page menu · sidebar · tab bar · large title · groups and rows ·
   buttons · segmented · switch · fields · badges, pills, dots, chips · icon tiles · sheets · menus · toasts · tables ·
   console and code · empty states · heads · layout engine accents · accessibility fallbacks. */

/* ---------- base ---------- */
html[data-look="apple"] { background: var(--bg); }
html[data-look="apple"] body {
  background: var(--bg); color: var(--label);
  font-family: var(--font-text); font-size: 15px; line-height: 1.4667; letter-spacing: normal;
}
html[data-look="apple"] ::selection { background: rgba(10, 132, 255, .45); }
html[data-look="apple"] a { color: var(--accent-text); }
html[data-look="apple"] h1, html[data-look="apple"] h2, html[data-look="apple"] h3 { letter-spacing: normal; }
html[data-look="apple"] * { scrollbar-color: rgba(160, 170, 190, .28) transparent; }
html[data-look="apple"] ::-webkit-scrollbar-thumb { background: rgba(160, 170, 190, .28); background-clip: padding-box; }
html[data-look="apple"] ::-webkit-scrollbar-thumb:hover { background: rgba(160, 170, 190, .42); background-clip: padding-box; }
/* focus: a 2 px accent ring + 2 px offset on every interactive element (8.15:1 on the page); fields use the halo below */
html[data-look="apple"] a:focus-visible, html[data-look="apple"] button:focus-visible, html[data-look="apple"] .btn:focus-visible,
html[data-look="apple"] .chip:focus-visible, html[data-look="apple"] summary:focus-visible, html[data-look="apple"] [tabindex]:focus-visible,
html[data-look="apple"] input[type=checkbox]:focus-visible, html[data-look="apple"] input[type=radio]:focus-visible,
html[data-look="apple"] label.switch:focus-within .sw {
  outline: 2px solid var(--accent-text); outline-offset: 2px;
}
html[data-look="apple"] .lk-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: -1px;
}

/* ---------- top bar (functional layer: glass on desktop) ---------- */
html[data-look="apple"] .topbar {
  min-height: var(--topbar-h); padding: 0 16px; gap: 12px;
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}
/* the scroll edge: the hairline shows once the page has scrolled (shell.js sets .lk-scrolled) */
html[data-look="apple"] .topbar.lk-scrolled { border-bottom-color: var(--sep); }
html[data-look="apple"] .brand { gap: 9px; min-height: 32px; color: var(--label); }
html[data-look="apple"] .brand-mark {
  width: 22px; height: 22px; border-radius: 6px; background: var(--accent); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}
html[data-look="apple"] .brand-mark::after { inset: 6px; background: #0B0D12; }
html[data-look="apple"] .brand-name { font: 600 15px/20px var(--font-text); letter-spacing: normal; }
/* the page switcher: a capsule segmented control */
html[data-look="apple"] .topbar .nav { padding: 2px; gap: 0; border-radius: var(--r-cap); background: rgba(255, 255, 255, .06); }
html[data-look="apple"] .topbar .nav a {
  min-height: 28px; padding: 0 14px; border-radius: var(--r-cap);
  font: 500 14px/20px var(--font-text); color: var(--label-2); background: transparent;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease);
}
html[data-look="apple"] .topbar .nav a:hover { color: var(--label); background: transparent; }
html[data-look="apple"] .topbar .nav a.active, html[data-look="apple"] .topbar .nav a[aria-current="page"] {
  background: var(--s3); color: var(--label); box-shadow: var(--shadow-1);
}
html[data-look="apple"] .topbar .nav a:focus-visible { outline-offset: -2px; }
/* the phone page menu's button (shell.js inserts it before #mainNav): phones only */
html[data-look="apple"] .lk-pagemenu { display: none; }
/* the account chip (UI.nav builds it from #navWho): a glyph circle + the name + a chevron; its menu holds Log out */
html[data-look="apple"] .acct-chip {
  min-height: 32px; padding: 0 10px 0 4px; gap: 8px; background: transparent;
  font: 500 14px/20px var(--font-text); color: var(--label);
}
html[data-look="apple"] .acct-chip:hover, html[data-look="apple"] .acct-chip.active { background: rgba(255, 255, 255, .06); }
html[data-look="apple"] .acct-chip svg {
  width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--s3); color: var(--label-2); box-sizing: border-box;
}
html[data-look="apple"] .acct-chip::after {
  content: ''; width: 7px; height: 7px; margin: -3px 0 0 2px; flex: none;
  border-right: 1.6px solid var(--label-3); border-bottom: 1.6px solid var(--label-3); transform: rotate(45deg);
}
html[data-look="apple"] .topbar .btn.ghost { background: transparent; color: var(--accent-text); }
html[data-look="apple"] .topbar .btn.ghost:hover { background: rgba(255, 255, 255, .06); }
html[data-look="apple"] .topbar .sub { color: var(--label-2); }

/* ---------- THE LIVE ISLAND (§5): the main bot's state + the panel's live link, one black capsule ---------- */
/* shell.js wraps #botPill and .conn in .lk-island (the nodes move, the ids stay) */
/* round 17: where the page hides the bot pill (the chat page), the island goes too while the connection is fine; it comes
   back as soon as the connection is not (the dot connecting / offline) */
html[data-look="apple"] .lk-island:has(#botPill[style*="display:none"]):has(#connDot.online) { display: none; }
html[data-look="apple"] .lk-island {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 36px; max-width: 520px; padding: 0 8px 0 7px;
  border-radius: 18px; background: var(--island); white-space: nowrap; min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 1px var(--lk-rim, transparent), var(--shadow-2);
}
html[data-look="apple"] .lk-island:has(> #botPill.on) { --lk-rim: rgba(48, 209, 88, .38); }
html[data-look="apple"] .lk-island:has(> #botPill.warn) { --lk-rim: rgba(244, 192, 96, .40); }
html[data-look="apple"] .lk-island:has(> #botPill.off) { --lk-rim: rgba(255, 123, 115, .40); }
/* the pill inside: no capsule of its own; head 22, name + state, the state dot in the role's colour */
html[data-look="apple"] .lk-island .pill {
  background: transparent; padding: 0; gap: 7px; max-width: 320px; min-width: 0;
  font: 600 14px/18px var(--font-text); color: var(--label);
}
html[data-look="apple"] .lk-island .pill img { width: 22px; height: 22px; border-radius: 6px; margin: 0; background: var(--s3); }
html[data-look="apple"] .lk-island .pill .dot { width: 7px; height: 7px; margin: 0; }
html[data-look="apple"] .lk-island .pill.on .pill-t { color: var(--label); }
html[data-look="apple"] .lk-island .pill.on .dot { background: var(--ok-text); }
html[data-look="apple"] .lk-island .pill.warn .dot { background: var(--warn-text); }
html[data-look="apple"] .lk-island .pill.off .dot { background: var(--bad-text); }
html[data-look="apple"] .lk-island .pill.warn .pill-t { color: var(--warn-text); }
html[data-look="apple"] .lk-island .pill.off .pill-t { color: var(--label-2); }
/* the trailing live link: a 6 px dot with a halo while the socket is live; the words show whenever it is not */
html[data-look="apple"] .lk-island .conn { gap: 6px; font: 500 12px/16px var(--font-text); color: var(--label-2); min-width: 0; }
html[data-look="apple"] .lk-island .conn .dot { width: 6px; height: 6px; margin: 0 4px 0 0; }
html[data-look="apple"] .lk-island .conn .dot.online { background: var(--ok-text); box-shadow: 0 0 0 3px rgba(48, 209, 88, .16); }
html[data-look="apple"] .lk-island .conn .dot.connecting { background: var(--warn-text); box-shadow: 0 0 0 3px rgba(244, 192, 96, .16); }
html[data-look="apple"] .lk-island .conn .dot.offline { background: var(--bad-text); box-shadow: 0 0 0 3px rgba(255, 123, 115, .16); }
html[data-look="apple"] .lk-island #conn { font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
html[data-look="apple"] .lk-island .conn:has(> #connDot.online) { flex-direction: row-reverse; }
html[data-look="apple"] .lk-island .conn:has(> #connDot.online) > #conn {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* the one motion moment: the rim lights up once when the main bot comes online (shell.js adds .lk-just for 900 ms) */
@keyframes lk-island-light {
  0% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 1px var(--lk-rim, transparent), 0 0 0 0 rgba(48, 209, 88, .45), var(--shadow-2); }
  100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 1px var(--lk-rim, transparent), 0 0 0 14px rgba(48, 209, 88, 0), var(--shadow-2); }
}
html[data-look="apple"] .lk-island.lk-just { animation: lk-island-light 900ms var(--ease) 1; }
/* the bar's order: [brand][page switcher] — spacer — [the page's quiet stats][the island when it is in the flow][account];
   the island is centred in the bar where it has room (≥ 1280 px), in the flow after the spacer where it has not */
html[data-look="apple"] .topbar > * { order: 2; }
html[data-look="apple"] .topbar > .brand, html[data-look="apple"] .topbar > .lk-pagemenu, html[data-look="apple"] .topbar > .nav { order: 0; }
html[data-look="apple"] .topbar > .grow { order: 1; }
@media (min-width: 1280px) {
  html[data-look="apple"] .topbar > .lk-island { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  html[data-look="apple"] .lk-island #conn { max-width: 120px; }
}
/* the narrow desktop bar (861–1279: the island in the flow). At flex: none the island made a long bar wider than the window
   (Admin: brand + switcher + island + account 917 px at 861, 40 px of page overflow up to ~900; the chat page 29 px; a
   longer bot name pushes it further). As on the phone, the island may shrink and its name ellipsises — last (a token
   shrink factor: the bar's other items give way to their own minimum first, as before), so wherever the bar fitted nothing
   changes. (Was a page-scoped copy in chat.css.) */
@media (min-width: 861px) and (max-width: 1279px) {
  html[data-look="apple"] .topbar > .lk-island { flex: 0 .001 auto; overflow: hidden; }
  html[data-look="apple"] .lk-island .pill .pill-t { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- phone bar: the page menu, the compact island, the account circle (opaque, 48 px + the safe area) ---------- */
@media (max-width: 860px) {
  html[data-look="apple"] .topbar {
    flex-wrap: nowrap; min-height: calc(48px + env(safe-area-inset-top, 0px)); gap: 6px;
    padding: env(safe-area-inset-top, 0px) 8px 0 12px;
    background: var(--bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--sep);
  }
  html[data-look="apple"] .topbar .brand { min-height: 44px; }
  /* the page menu names the page: the brand keeps its mark only (a bar without one, /listen, keeps the name) */
  html[data-look="apple"] .topbar:has(> .lk-pagemenu) .brand-name { display: none; }
  html[data-look="apple"] .lk-pagemenu {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 44px; min-height: 44px; max-width: 40vw;
    padding: 0 6px; margin: 0; border: 0; border-radius: var(--r-s); background: transparent; cursor: pointer;
    font: 600 17px/22px var(--font-text); color: var(--label);
  }
  html[data-look="apple"] .lk-pagemenu > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-look="apple"] .lk-pagemenu svg { width: 14px; height: 14px; flex: none; color: var(--label-2); transition: transform var(--dur-2) var(--ease); }
  html[data-look="apple"].lk-pages-open .lk-pagemenu svg { transform: rotate(180deg); }
  /* the page strip is gone: #mainNav is the page menu's list (Chat, Admin, Manager, Voice; then Log out) */
  html[data-look="apple"] .topbar .nav { display: none; }
  html[data-look="apple"].lk-pages-open .topbar .nav {
    display: flex; position: fixed; z-index: 1900; top: calc(var(--bar-h, 48px) + 6px); left: 8px; order: 0;
    flex: none; flex-direction: column; align-items: stretch; gap: 0; width: min(280px, calc(100vw - 16px));
    padding: 6px; overflow: visible; border-radius: var(--r-l); background: var(--bar-solid);
    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--sep-strong);
  }
  html[data-look="apple"].lk-pages-open .topbar .nav a, html[data-look="apple"].lk-pages-open .topbar .nav a.active,
  html[data-look="apple"].lk-pages-open .topbar .nav a.nav-auth {
    flex: none; justify-content: flex-start; gap: 12px; min-height: 44px; margin: 0; padding: 0 12px; border-radius: var(--r-s);
    background: transparent; color: var(--label); font: 400 17px/22px var(--font-text); box-shadow: none;
  }
  html[data-look="apple"].lk-pages-open .topbar .nav a svg { display: block; width: 18px; height: 18px; color: var(--label-2); flex: none; }
  html[data-look="apple"].lk-pages-open .topbar .nav a.active { background: var(--accent-tint); }
  html[data-look="apple"].lk-pages-open .topbar .nav a.active svg { color: var(--accent-text); }
  html[data-look="apple"].lk-pages-open .topbar .nav a:hover { background: rgba(255, 255, 255, .05); }
  html[data-look="apple"].lk-pages-open .topbar .nav a.nav-auth { margin-top: 7px; position: relative; color: var(--accent-text); }
  html[data-look="apple"].lk-pages-open .topbar .nav a.nav-auth::before { content: ''; position: absolute; left: 6px; right: 6px; top: -4px; height: 1px; background: var(--sep); }
  html[data-look="apple"].lk-pages-open .topbar .nav a.nav-auth svg { color: var(--accent-text); }
  /* the compact island: head + name + state; while the panel's link is down the bot's line is stale, so the link's words
     take its place (the bot's state stays in the head's dot, the rim and the island's label) */
  html[data-look="apple"] .lk-pagemenu { flex: none; }
  html[data-look="apple"] .topbar:has(> .lk-island) > .grow { display: none; }
  html[data-look="apple"] .lk-island { height: 32px; gap: 6px; padding: 0 9px 0 5px; margin: 0 auto; flex: 0 1 auto; max-width: 62vw; overflow: hidden; }
  html[data-look="apple"] .lk-island .pill { max-width: none; min-width: 0; }
  html[data-look="apple"] .lk-island .pill .pill-t { display: block; min-width: 0; font-size: 13px; }
  html[data-look="apple"] .lk-island .pill img { width: 22px; height: 22px; margin-left: 0; }
  html[data-look="apple"] .lk-island #conn { max-width: 120px; }
  html[data-look="apple"] .lk-island:has(#connDot:not(.online)) .pill .pill-t { display: none; }
  html[data-look="apple"] .pill { max-width: none; }
  /* a page's quiet stats live on the desktop bar only (the chat's count + sparkline) */
  html[data-look="apple"] .topbar > .counter, html[data-look="apple"] .topbar > .spark-wrap { display: none; }
  /* the account: a 44 px circle (its menu: Signed in as … and My account; Log out is in the page menu) */
  html[data-look="apple"] .topbar .acct:not([hidden]) { display: inline-flex; margin-left: 2px; }
  html[data-look="apple"] .topbar #navWho:not([hidden]) { display: inline-flex; }
  html[data-look="apple"] .acct-chip { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  html[data-look="apple"] .acct-chip .acct-role, html[data-look="apple"] .acct-chip::after { display: none; }
  html[data-look="apple"] .acct-chip svg { width: 30px; height: 30px; padding: 7px; }
}

/* ---------- sidebar (desktop): an inset floating panel, monochrome glyphs, groups split by gaps ---------- */
@media (min-width: 861px) {
  html[data-look="apple"] body.side .sec-nav {
    top: calc(var(--bar-h, var(--topbar-h)) + 8px); height: auto; max-height: calc(100vh - var(--bar-h, var(--topbar-h)) - 16px);
    margin: 8px 0 8px 8px; padding: 8px; gap: 2px;
    background: var(--s1); border-right: none; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--sep);
  }
  html[data-look="apple"] body.side .sec-nav a {
    min-height: 34px; padding: 0 10px; gap: 10px; border-radius: var(--r-s);
    font: 500 14px/20px var(--font-text); color: var(--label); background: transparent;
  }
  html[data-look="apple"] body.side .sec-nav a:hover { background: rgba(255, 255, 255, .05); color: var(--label); }
  html[data-look="apple"] body.side .sec-nav a .ico { width: 20px; height: 20px; border-radius: 0; background: transparent; color: var(--label-2); }
  html[data-look="apple"] body.side .sec-nav a .ico svg { width: 17px; height: 17px; }
  html[data-look="apple"] body.side .sec-nav a.active { background: var(--accent-tint); color: var(--label); }
  html[data-look="apple"] body.side .sec-nav a.active .ico { background: transparent; color: var(--accent-text); }
  html[data-look="apple"] body.side .sec-nav .src-h { font: 600 12px/16px var(--font-text); color: var(--label-3); text-transform: none; letter-spacing: normal; margin: 12px 10px 6px; }
  /* Admin's three groups: [Bot · Accounts · Movement · Scripts] [Tracking · Server · Worlds] [System · Access · Console] */
  html[data-look="apple"] body.side .sec-nav a[href="#secTrack"], html[data-look="apple"] body.side .sec-nav a[href="#secSystem"] { margin-top: 12px; }
}

/* ---------- tab bar (phone): the page's sections, opaque, a top hairline; never hidden, no actions ---------- */
@media (max-width: 860px) {
  html[data-look="apple"] .tabbar, html[data-look="apple"] body.side .sec-nav {
    background: var(--bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--sep);
  }
  html[data-look="apple"] .tabbar button, html[data-look="apple"] body.side .sec-nav a, html[data-look="apple"] body.side .sec-nav a.active {
    min-height: 44px; gap: 3px; color: var(--label-3); background: transparent; font: 500 11px/13px var(--font-text);
  }
  html[data-look="apple"] .tabbar button.active, html[data-look="apple"] body.side .sec-nav a.active { color: var(--accent-text); }
  html[data-look="apple"] .tabbar button .ico svg, html[data-look="apple"] body.side .sec-nav a .ico svg { width: 22px; height: 22px; }
}

/* ---------- large title ---------- */
html[data-look="apple"] .large-title, html[data-look="apple"] body.side .sec-h {
  font: 700 var(--fs-large)/var(--lh-large) var(--font-display); letter-spacing: -.01em; color: var(--label); margin-bottom: 20px;
}
html[data-look="apple"] .large-title .sub, html[data-look="apple"] body.side .sec-h .sub { font: 400 var(--fs-callout)/var(--lh-callout) var(--font-text); color: var(--label-2); letter-spacing: normal; }
html[data-look="apple"] .sec-h { text-transform: none; letter-spacing: normal; font-weight: 600; color: var(--label-2); }
html[data-look="apple"] .sec-h::after { display: none; }

/* ---------- groups and rows (inset grouped lists) ---------- */
html[data-look="apple"] .card { background: var(--s1); border-radius: var(--r-l); }
html[data-look="apple"] .card > h2, html[data-look="apple"] .card > .card-h { font: 600 13px/18px var(--font-text); color: var(--label); }
/* a card of groups: the header in sentence case, 600 13 label-2 (no uppercase, no letter-spacing) */
html[data-look="apple"] .card.plain > h2, html[data-look="apple"] .card:has(> .group) > h2, html[data-look="apple"] .card:has(> .ilist) > h2,
html[data-look="apple"] .card.plain > .card-h, html[data-look="apple"] .card:has(> .group) > .card-h, html[data-look="apple"] .card:has(> .ilist) > .card-h,
html[data-look="apple"] h3.sub-h, html[data-look="apple"] .group-h {
  font: 600 13px/18px var(--font-text); color: var(--label-2); text-transform: none; letter-spacing: normal; margin-bottom: 8px;
}
html[data-look="apple"] .card.plain, html[data-look="apple"] .card:has(> .group), html[data-look="apple"] .card:has(> .ilist) { background: transparent; border-radius: 0; }
html[data-look="apple"] h3.sub-h .hint, html[data-look="apple"] .group-h .hint { color: var(--label-2); font-weight: 400; }
html[data-look="apple"] .group, html[data-look="apple"] .ilist {
  background: var(--s1); border-radius: var(--r-l); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}
html[data-look="apple"] .irow { min-height: var(--row-h); color: var(--label); }
html[data-look="apple"] .irow ~ .irow::before, html[data-look="apple"] .group > * + .irow::before, html[data-look="apple"] .ilist > * + .irow::before { background: var(--sep); }
html[data-look="apple"] .irow .lbl { font-size: var(--fs-body); line-height: 1.3; }
html[data-look="apple"] .irow .lbl .sub, html[data-look="apple"] .irow .lbl small { font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--label-2); }
html[data-look="apple"] .irow .val { color: var(--label-2); font-size: var(--fs-body); }
html[data-look="apple"] .irow .val.mono { font-size: 13px; }
html[data-look="apple"] .irow .val.on { color: var(--bad-text); }
html[data-look="apple"] .irow .chev { color: var(--label-3); }
html[data-look="apple"] .irow.link { transition: background-color var(--dur-1) var(--ease); }
html[data-look="apple"] .irow.link:hover { background: var(--hover); }
html[data-look="apple"] .irow.link:active { background: var(--press); }
html[data-look="apple"] .irow.link:focus-visible, html[data-look="apple"] button.irow:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; border-radius: var(--r-m); }
html[data-look="apple"] .irow.link[data-da] .lbl, html[data-look="apple"] .irow.danger .lbl { color: var(--bad-text); }
html[data-look="apple"] .irow > label.switch { font-size: var(--fs-body); }
html[data-look="apple"] .irow.field:focus-within { box-shadow: inset 0 0 0 2px var(--ring); }
html[data-look="apple"] .footnote, html[data-look="apple"] .fn { font: 400 13px/18px var(--font-text); color: var(--label-2); margin: 8px 16px 0; }
html[data-look="apple"] .footnote.on, html[data-look="apple"] .fn.on { color: var(--bad-text); }
html[data-look="apple"] .hint, html[data-look="apple"] .meta { color: var(--label-2); }
html[data-look="apple"] .empty { color: var(--label-2); }
html[data-look="apple"] .kv dt { color: var(--label-2); }
html[data-look="apple"] .targets { color: var(--label-2); }
html[data-look="apple"] .targets .tg-off { color: var(--label-3); }
html[data-look="apple"] .card-sum { color: var(--label-2); }
html[data-look="apple"] .card-collapse { color: var(--label-3); }
html[data-look="apple"] .card-collapse:hover { background: rgba(255, 255, 255, .06); color: var(--label); }
html[data-look="apple"] .card.danger { box-shadow: inset 3px 0 0 var(--bad-text); }
html[data-look="apple"] .composer::before { background: var(--sep); }

/* ---------- buttons: capsules; one Lapis primary per view; status colours never carry a white label (but a confirm) ---------- */
html[data-look="apple"] .btn {
  min-height: var(--ctl-h); padding: 0 14px; gap: 7px; border-radius: var(--r-cap);
  font: 600 14px/18px var(--font-text); letter-spacing: normal; color: var(--label); background: var(--s3);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
html[data-look="apple"] .btn:hover { opacity: 1; background: #343944; }
html[data-look="apple"] .btn:active { transform: scale(.97); }
html[data-look="apple"] .btn:disabled, html[data-look="apple"] .btn.disabled { opacity: .45; }
html[data-look="apple"] .btn.gray { background: var(--s3); color: var(--label); }
/* primary (Lapis fill, white 600: 4.88:1) */
html[data-look="apple"] .btn.blue { background: var(--accent); color: #fff; }
html[data-look="apple"] .btn.blue:hover { background: var(--accent-hover); }
html[data-look="apple"] .btn.blue:active { background: var(--accent-press); }
/* the status colours as tinted buttons (their text colour on their own tint ≥ 5.59:1) */
html[data-look="apple"] .btn.green { background: var(--ok-tint); color: var(--ok-text); }
html[data-look="apple"] .btn.green:hover { background: rgba(48, 209, 88, .26); }
html[data-look="apple"] .btn.red, html[data-look="apple"] .btn.danger { background: var(--bad-tint); color: var(--bad-text); }
html[data-look="apple"] .btn.red:hover, html[data-look="apple"] .btn.danger:hover { background: rgba(255, 69, 58, .30); }
html[data-look="apple"] .btn.yellow { background: var(--warn-tint); color: var(--warn-text); }
html[data-look="apple"] .btn.yellow:hover { background: rgba(233, 169, 58, .26); }
html[data-look="apple"] .btn.purple { background: var(--voice-tint); color: var(--voice-text); }
html[data-look="apple"] .btn.purple:hover { background: rgba(124, 77, 223, .30); }
/* plain (text) buttons */
html[data-look="apple"] .btn.ghost { background: transparent; color: var(--accent-text); }
html[data-look="apple"] .btn.ghost:hover { background: rgba(255, 255, 255, .05); }
html[data-look="apple"] .btn.ghost.hl { background: var(--accent-tint); color: var(--accent-text); }
/* the small ones: tinted */
html[data-look="apple"] .btn.mini { min-height: var(--ctl-h); padding: 0 12px; font-size: 13px; }
html[data-look="apple"] .btn.mini:hover { filter: none; }
html[data-look="apple"] .btn.mini.blue { background: var(--accent-tint); color: var(--accent-text); }
html[data-look="apple"] .btn.mini.blue:hover { background: rgba(10, 132, 255, .32); }
html[data-look="apple"] .btn.mini.green { background: var(--ok-tint); color: var(--ok-text); }
html[data-look="apple"] .btn.mini.red { background: var(--bad-tint); color: var(--bad-text); }
html[data-look="apple"] .btn.mini.yellow { background: var(--warn-tint); color: var(--warn-text); }
html[data-look="apple"] .btn.mini.purple { background: var(--voice-tint); color: var(--voice-text); }
html[data-look="apple"] .btn.mini.gray { background: var(--s3); color: var(--label); }
html[data-look="apple"] .btn.mini.ghost { background: transparent; color: var(--accent-text); }
html[data-look="apple"] .btn.icon { width: var(--ctl-h); height: var(--ctl-h); min-width: var(--ctl-h); min-height: var(--ctl-h); }
html[data-look="apple"] .btn.icon.ghost { color: var(--label-2); background: transparent; }
html[data-look="apple"] .btn.icon.ghost:hover { color: var(--label); background: rgba(255, 255, 255, .07); }
html[data-look="apple"] .btn.icon.danger { color: var(--bad-text); background: transparent; }
html[data-look="apple"] .btn.icon.danger:hover { background: var(--bad-tint); }
html[data-look="apple"] .btn.big { min-height: var(--ctl-h-big); border-radius: 12px; font-size: 15px; }
html[data-look="apple"] .btnrow .btn { min-height: var(--ctl-h-big); border-radius: 12px; font-size: 15px; }
html[data-look="apple"] .btn.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-text); }

/* ---------- segmented control ---------- */
html[data-look="apple"] .seg { background: var(--seg-track); border-radius: 9px; padding: 2px; gap: 2px; }
html[data-look="apple"] .seg .chip, html[data-look="apple"] .seg .btn, html[data-look="apple"] .seg > button {
  min-height: 28px; border-radius: 7px; padding: 0 12px; background: transparent; color: var(--label-2);
  font: 500 13px/18px var(--font-text); box-shadow: none;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
html[data-look="apple"] .seg .chip:hover, html[data-look="apple"] .seg .btn:hover, html[data-look="apple"] .seg > button:hover { background: rgba(255, 255, 255, .05); color: var(--label); }
html[data-look="apple"] .seg .chip.on, html[data-look="apple"] .seg .btn.on, html[data-look="apple"] .seg > button.on,
html[data-look="apple"] .seg .active, html[data-look="apple"] .seg [aria-pressed="true"] {
  background: var(--seg-thumb); color: var(--label); box-shadow: var(--shadow-1); font-weight: 600;
}
html[data-look="apple"] .seg .chip:focus-visible, html[data-look="apple"] .seg .btn:focus-visible, html[data-look="apple"] .seg > button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -1px; }

/* ---------- switch: 51 × 31, off = s3 + an inner edge, on = Emerald ---------- */
html[data-look="apple"] label.switch { font-size: var(--fs-body); }
html[data-look="apple"] label.switch .sw { background: var(--s3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); transition: background-color var(--dur-2) var(--ease); }
html[data-look="apple"] label.switch .sw::after { box-shadow: 0 2px 4px rgba(0, 0, 0, .35); transition: transform var(--dur-2) var(--ease); }
html[data-look="apple"] label.switch > input:checked + .sw { background: var(--ok); box-shadow: none; }

/* ---------- fields: s2, no border, radius 10, the focus halo ---------- */
html[data-look="apple"] input[type=text], html[data-look="apple"] input[type=number], html[data-look="apple"] input[type=password],
html[data-look="apple"] input[type=search], html[data-look="apple"] input[type=email], html[data-look="apple"] input[type=url],
html[data-look="apple"] input[type=date], html[data-look="apple"] input[type=time], html[data-look="apple"] input[type=datetime-local],
html[data-look="apple"] input:not([type]), html[data-look="apple"] select, html[data-look="apple"] textarea {
  background-color: var(--s2); color: var(--label); border: 1px solid transparent; border-radius: var(--r-m);
  font-size: var(--fs-input); min-height: 36px;
  transition: box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
html[data-look="apple"] input:hover:not(:disabled), html[data-look="apple"] select:hover:not(:disabled), html[data-look="apple"] textarea:hover:not(:disabled) { background-color: #262B34; }
html[data-look="apple"] input:focus, html[data-look="apple"] select:focus, html[data-look="apple"] textarea:focus { box-shadow: 0 0 0 3px var(--ring); background-color: var(--s2); }
html[data-look="apple"] input::placeholder, html[data-look="apple"] textarea::placeholder { color: var(--label-3); }
html[data-look="apple"] input[aria-invalid="true"], html[data-look="apple"] label.field.invalid > input, html[data-look="apple"] label.field.invalid > select,
html[data-look="apple"] label.field.invalid > textarea { box-shadow: 0 0 0 2px var(--bad-text); }
html[data-look="apple"] input.mini, html[data-look="apple"] select.mini { min-height: 32px; border-radius: var(--r-s); font-size: 14px; }
html[data-look="apple"] textarea.mono, html[data-look="apple"] input.mono { font-size: 13px; }
html[data-look="apple"] select option { background: var(--s1); color: var(--label); }
/* a row that is a field: the row is the box (the field stays bare; the row lights up while it has the focus) */
html[data-look="apple"] .irow.field input, html[data-look="apple"] .irow.field select, html[data-look="apple"] .irow.field textarea,
html[data-look="apple"] .irow.field input:hover:not(:disabled), html[data-look="apple"] .irow.field select:hover:not(:disabled),
html[data-look="apple"] .irow.field textarea:hover:not(:disabled), html[data-look="apple"] .irow.field input:focus,
html[data-look="apple"] .irow.field select:focus, html[data-look="apple"] .irow.field textarea:focus {
  background-color: transparent; border-color: transparent; box-shadow: none; font-size: var(--fs-input);
}
html[data-look="apple"] input[type=checkbox], html[data-look="apple"] input[type=radio], html[data-look="apple"] input[type=range] { accent-color: var(--accent); }
html[data-look="apple"] label.field, html[data-look="apple"] label.field > .lbl, html[data-look="apple"] .mlabel { color: var(--label-2); }
html[data-look="apple"] label.field .field-hint { color: var(--label-3); }
html[data-look="apple"] label.field .field-msg { color: var(--bad-text); }
html[data-look="apple"] .input-icon > svg { color: var(--label-3); }
html[data-look="apple"] .inputgroup > .suffix { background: var(--s3); color: var(--label-2); }
html[data-look="apple"] .ac-drop { background: var(--s2); border-radius: var(--r-l); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--sep); }
html[data-look="apple"] .ac-item.sel, html[data-look="apple"] .ac-item:hover { background: rgba(255, 255, 255, .07); }
html[data-look="apple"] .rangewrap > .rtick { background: var(--label-4); }

/* ---------- badges (always a word), pills, dots, chips ---------- */
html[data-look="apple"] .badge {
  min-height: 22px; padding: 0 9px; gap: 6px; border-radius: var(--r-cap);
  font: 600 12px/16px var(--font-text); background: var(--neutral-tint); color: var(--label-2);
}
html[data-look="apple"] .badge.on { background: var(--ok-tint); color: var(--ok-text); }
html[data-look="apple"] .badge.on::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
html[data-look="apple"] .badge.off, html[data-look="apple"] .badge.rec { background: var(--bad-tint); color: var(--bad-text); }
html[data-look="apple"] .badge.warn, html[data-look="apple"] .badge.proxy { background: var(--warn-tint); color: var(--warn-text); }
html[data-look="apple"] .badge.blue { background: var(--accent-tint); color: var(--accent-text); }
html[data-look="apple"] .badge.purple { background: var(--voice-tint); color: var(--voice-text); }
html[data-look="apple"] .badge.dim { background: var(--neutral-tint); color: var(--label-2); }
html[data-look="apple"] .badge.direct { background: transparent; color: var(--label-2); }
html[data-look="apple"] .badge.ping-good { background: var(--ok-tint); }
html[data-look="apple"] .badge.ping-ok, html[data-look="apple"] .badge.ping-warn { background: var(--warn-tint); }
html[data-look="apple"] .badge.ping-bad { background: var(--bad-tint); }
html[data-look="apple"] .ping-ok { color: var(--warn-text); }
html[data-look="apple"] .card.plain > h2 .badge, html[data-look="apple"] .card:has(> .group) > h2 .badge, html[data-look="apple"] .card:has(> .ilist) > h2 .badge { vertical-align: 0; }
/* the status pills outside the island (the listen page, labs) */
html[data-look="apple"] .pill { font: 600 12px/16px var(--font-text); background: var(--neutral-tint); color: var(--label-2); }
html[data-look="apple"] .pill.on { background: var(--ok-tint); color: var(--ok-text); }
html[data-look="apple"] .pill.warn { background: var(--warn-tint); color: var(--warn-text); }
html[data-look="apple"] .pill.off { background: var(--bad-tint); color: var(--bad-text); }
html[data-look="apple"] .dot { background: var(--label-3); }
html[data-look="apple"] .dot.online, html[data-look="apple"] .dot.ready, html[data-look="apple"] .dot.on { background: var(--ok-text); }
html[data-look="apple"] .dot.connecting, html[data-look="apple"] .dot.warn { background: var(--warn-text); }
html[data-look="apple"] .dot.offline, html[data-look="apple"] .dot.off, html[data-look="apple"] .dot.error { background: var(--bad-text); }
html[data-look="apple"] .chip, html[data-look="apple"] .mem { background: var(--s2); color: var(--label); }
html[data-look="apple"] .chip:hover { background: var(--s3); }
html[data-look="apple"] .chip.on, html[data-look="apple"] .chip.active { background: var(--ok-tint); color: var(--ok-text); }
html[data-look="apple"] .chip.blue.on { background: var(--accent-tint); color: var(--accent-text); }
html[data-look="apple"] .meter { background: var(--s3); }
html[data-look="apple"] .meter > i, html[data-look="apple"] .meter > div { background: var(--accent); }
html[data-look="apple"] .meter.green > i, html[data-look="apple"] .meter.green > div { background: var(--ok); }
html[data-look="apple"] .meter.yellow > i, html[data-look="apple"] .meter.yellow > div { background: var(--warn); }
html[data-look="apple"] .meter.red > i, html[data-look="apple"] .meter.red > div { background: var(--bad); }

/* ---------- icon tiles in rows (.irow.ic .ric): a quiet tile, the role colour on its own tint ---------- */
html[data-look="apple"] .irow .ric { width: 28px; height: 28px; border-radius: var(--r-s); background: var(--s3); color: var(--label-2); }
html[data-look="apple"] .irow .ric.gray { background: var(--s3); color: var(--label-2); }
html[data-look="apple"] .irow .ric.blue { background: var(--accent-tint); color: var(--accent-text); }
html[data-look="apple"] .irow .ric.green { background: var(--ok-tint); color: var(--ok-text); }
html[data-look="apple"] .irow .ric.red { background: var(--bad-tint); color: var(--bad-text); }
html[data-look="apple"] .irow .ric.orange { background: var(--warn-tint); color: var(--warn-text); }
html[data-look="apple"] .irow .ric.purple { background: var(--voice-tint); color: var(--voice-text); }
html[data-look="apple"] .irow.ic + .irow::before { left: 56px; }

/* ---------- sheets: a centred glass card on a desktop, an opaque bottom sheet on a phone ---------- */
html[data-look="apple"] .popup-scrim { background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-look="apple"] .popup {
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  border-radius: var(--r-xl); box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
html[data-look="apple"] .popup-h { font: 600 17px/22px var(--font-text); }
html[data-look="apple"] .popup-h .sub { color: var(--label-2); }
html[data-look="apple"] .popup.window .popup-h { border-bottom-color: var(--sep); }
html[data-look="apple"] .popup-close { background: rgba(255, 255, 255, .08); color: var(--label-2); }
html[data-look="apple"] .popup-close:hover { background: rgba(255, 255, 255, .14); color: var(--label); }
html[data-look="apple"] .popup .group, html[data-look="apple"] .popup .ilist { background: var(--s2); box-shadow: none; }
html[data-look="apple"] .popup .irow ~ .irow::before { background: var(--sep-strong); }
/* the footer: Cancel (plain), then the default — Lapis; a destructive confirm is the one red fill with a white label */
html[data-look="apple"] .popup-f .btn.mini.gray { background: var(--s3); color: var(--label); }
html[data-look="apple"] .popup-f .btn.mini:last-child { color: #fff; }
html[data-look="apple"] .popup-f .btn.mini.green:last-child, html[data-look="apple"] .popup-f .btn.mini.blue:last-child { background: var(--accent); color: #fff; }
html[data-look="apple"] .popup-f .btn.mini.red:last-child { background: var(--bad); color: #fff; }
html[data-look="apple"] .popup-f .btn.mini.gray:last-child { color: var(--label); }
html[data-look="apple"] .popup-f .btn[data-close-popup], html[data-look="apple"] .popup-f .btn.mini.gray[data-close-popup] { background: transparent; color: var(--accent-text); font-weight: 500; }
html[data-look="apple"] .popup-f .btn.mini.gray[data-close-popup]:hover { background: rgba(255, 255, 255, .05); }
html[data-look="apple"] .modal-bg { background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-look="apple"] .mbox { background: var(--s1); border-radius: var(--r-xl); box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-look="apple"] .steps li { background: var(--s2); color: var(--label-2); }
html[data-look="apple"] .steps li::before { background: var(--accent-tint); color: var(--accent-text); }
html[data-look="apple"] .mcode { background: var(--s2); color: var(--warn-text); }
html[data-look="apple"] .mstatus { color: var(--label-2); }
html[data-look="apple"] .confirm .q { color: var(--label-2); }
@media (max-width: 860px) {
  html[data-look="apple"] .popup:not(.window), html[data-look="apple"] .popup.wide:not(.window), html[data-look="apple"] .popup.xwide:not(.window), html[data-look="apple"] .popup.narrow:not(.window) {
    background: var(--s1); -webkit-backdrop-filter: none; backdrop-filter: none;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0; max-height: 88vh; box-shadow: var(--shadow-3);
  }
  html[data-look="apple"] .popup.window { background: var(--s1); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-look="apple"] .popup:not(.window)::before { background: var(--label-4); }
  html[data-look="apple"] .popup-f .btn, html[data-look="apple"] .popup-f .btn.mini { border-radius: 12px; font-size: 17px; }
}

/* ---------- menus and popovers ---------- */
html[data-look="apple"] .dropdown-menu, html[data-look="apple"] .menu {
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  border-radius: var(--r-l); box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
html[data-look="apple"] .dropdown-item, html[data-look="apple"] .menu-item { min-height: 32px; border-radius: var(--r-s); font-size: 14px; color: var(--label); }
html[data-look="apple"] .dropdown-item:hover, html[data-look="apple"] .menu-item:hover { background: rgba(255, 255, 255, .07); }
html[data-look="apple"] .dropdown-item.active, html[data-look="apple"] .menu-item.active { background: var(--accent-tint); color: var(--accent-text); }
html[data-look="apple"] .dropdown-item.danger, html[data-look="apple"] .menu-item.danger { color: var(--bad-text); }
html[data-look="apple"] .dropdown-item .check, html[data-look="apple"] .menu-item .check { color: var(--accent-text); }
html[data-look="apple"] .dropdown-title, html[data-look="apple"] .menu-title { color: var(--label-2); }
html[data-look="apple"] .dropdown-sep, html[data-look="apple"] .menu-sep { background: var(--sep); }
html[data-look="apple"] .acct-menu .acct-out svg { color: var(--label-2); }
html[data-look="apple"] [data-tip]::after { background: var(--s3); color: var(--label); box-shadow: var(--shadow-2); border-radius: var(--r-s); }
@media (max-width: 860px) {
  html[data-look="apple"] .dropdown-menu, html[data-look="apple"] .menu { background: var(--bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-look="apple"] .dropdown-item, html[data-look="apple"] .menu-item { min-height: 44px; font-size: 17px; }
}

/* ---------- toasts: a glass capsule with a leading glyph (never a colour-only dot) ---------- */
html[data-look="apple"] .toast {
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  border-radius: var(--r-cap); padding: 9px 18px 9px 10px; gap: 10px; color: var(--label); font: 500 14px/20px var(--font-text);
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
html[data-look="apple"] .toast::before {
  content: 'i'; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  font: 700 12px/1 var(--font-text); background: var(--neutral-tint); color: var(--label-2);
}
html[data-look="apple"] .toast.ok::before { content: '\2713'; background: var(--ok-tint); color: var(--ok-text); }
html[data-look="apple"] .toast.bad::before { content: '!'; background: var(--bad-tint); color: var(--bad-text); }
html[data-look="apple"] .noti { background: var(--s1); border-left-color: var(--accent-text); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--sep); }
html[data-look="apple"] .noti.leave { border-left-color: var(--bad-text); }
@media (max-width: 860px) {
  html[data-look="apple"] .toast { background: var(--bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- tables (usage, script runs, the API reference) ---------- */
html[data-look="apple"] :is(.group, .card, .popup-b, .lk-table-wrap) > table, html[data-look="apple"] table.lk-table {
  width: 100%; border-collapse: collapse; font: 400 var(--fs-callout)/var(--lh-callout) var(--font-text); color: var(--label-2);
}
html[data-look="apple"] :is(.group, .card, .popup-b, .lk-table-wrap) > table th, html[data-look="apple"] table.lk-table th {
  text-align: left; font: 600 12px/16px var(--font-text); color: var(--label-2); padding: 8px 16px; border-bottom: 1px solid var(--sep);
}
html[data-look="apple"] :is(.group, .card, .popup-b, .lk-table-wrap) > table td, html[data-look="apple"] table.lk-table td {
  padding: 8px 16px; border-bottom: 1px solid var(--sep); vertical-align: top; font-variant-numeric: tabular-nums;
}
html[data-look="apple"] :is(.group, .card, .popup-b, .lk-table-wrap) > table tr:last-child td, html[data-look="apple"] table.lk-table tr:last-child td { border-bottom: 0; }
html[data-look="apple"] .lk-table-wrap { overflow-x: auto; max-width: 100%; }

/* ---------- console and code ---------- */
html[data-look="apple"] .console {
  background: var(--sunk); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--sep);
  font: 400 13px/18px var(--mono); color: #D6DBE4;
}
html[data-look="apple"] .console .ln:hover { background: rgba(255, 255, 255, .03); }
html[data-look="apple"] .console .ln.hl { background: var(--warn-tint); }
html[data-look="apple"] .console .log-warn { color: var(--warn-text); }
html[data-look="apple"] .console .log-error { color: var(--bad-text); }
html[data-look="apple"] .console .log-debug { color: var(--label-3); }
html[data-look="apple"] .console-bar .chip.on { background: var(--accent-tint); color: var(--accent-text); }
html[data-look="apple"] .console-bar .chip[data-level="warn"].on { background: var(--warn-tint); color: var(--warn-text); }
html[data-look="apple"] .console-bar .chip[data-level="error"].on { background: var(--bad-tint); color: var(--bad-text); }
html[data-look="apple"] .console-bar .chip[data-level="debug"].on { background: var(--neutral-tint); color: var(--label-2); }
html[data-look="apple"] .card.docked { background: var(--s1); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: var(--r-xl) var(--r-xl) 0 0; }
html[data-look="apple"] code { background: var(--s2); color: var(--label); border-radius: var(--r-xs); font-family: var(--mono); }
html[data-look="apple"] pre { font-family: var(--mono); }

/* ---------- empty states: a 28 px glyph in label-3, one sentence, the action ---------- */
html[data-look="apple"] .empty-state { color: var(--label-2); font-size: var(--fs-callout); gap: 10px; }
html[data-look="apple"] .empty-state > svg { width: 28px; height: 28px; color: var(--label-3); }

/* ---------- heads: Minecraft's own pixels, on the s3 placeholder ---------- */
html[data-look="apple"] img.avatar, html[data-look="apple"] .avatar-inline, html[data-look="apple"] .hero-head,
html[data-look="apple"] .targets img, html[data-look="apple"] .chip img, html[data-look="apple"] .ac-item img {
  image-rendering: pixelated; background-color: var(--s3);
}

/* ---------- the layout engine's accents (geometry untouched) ---------- */
html[data-look="apple"] .layout.editing > .mod-box { outline-color: var(--sep-strong); border-radius: var(--r-l); }
html[data-look="apple"] .mod-ph { border-color: var(--sep-strong); border-radius: var(--r-l); }
html[data-look="apple"] .mod-rs::after { background: var(--label-4); }
html[data-look="apple"] .mod-rs:hover::after, html[data-look="apple"] .mod-rs.active::after { background: var(--accent-text); }
html[data-look="apple"] .mod-menu { color: var(--label-2); }
html[data-look="apple"] .mod-menu:hover { background: rgba(255, 255, 255, .07); color: var(--label); }
html[data-look="apple"] .mod-drag { background: var(--bg); box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(255, 255, 255, .08); border-radius: var(--r-l); }
html[data-look="apple"] .mod-box.mod-fixed > [data-mod] > .mod-handle { background: var(--s1); }
html[data-look="apple"] .mod-box.mod-fixed > .card.plain > .mod-handle, html[data-look="apple"] .mod-box.mod-fixed > .card:has(> .group) > .mod-handle,
html[data-look="apple"] .mod-box.mod-fixed > .card:has(> .ilist) > .mod-handle { background: var(--bg); }
@media (min-width: 861px) {
  html[data-look="apple"] .mod-span-tip { background: var(--accent); color: #fff; }
  html[data-look="apple"] .layout.fit .mod-rs::before { background: var(--label-4); }
  html[data-look="apple"] .layout.fit .mod-rs:hover::before, html[data-look="apple"] .layout.fit .mod-rs.active::before { background: var(--accent-text); }
  html[data-look="apple"] .layout.fit.resizing { background-image: linear-gradient(90deg, rgba(10, 132, 255, .12) 0 var(--colw, 0px), transparent var(--colw, 0px)); }
}

/* ---------- phones: the 44 px floor stays (ui.css's 860 block), inputs at 17 px ---------- */
@media (max-width: 860px) {
  html[data-look="apple"] body { font-size: 15px; }
  html[data-look="apple"] input[type=text], html[data-look="apple"] input[type=number], html[data-look="apple"] input[type=password],
  html[data-look="apple"] input[type=search], html[data-look="apple"] input[type=email], html[data-look="apple"] input[type=url],
  html[data-look="apple"] input:not([type]), html[data-look="apple"] select, html[data-look="apple"] textarea, html[data-look="apple"] input.mini, html[data-look="apple"] select.mini {
    min-height: 44px; font-size: 17px;
  }
  html[data-look="apple"] .seg .chip, html[data-look="apple"] .seg .btn, html[data-look="apple"] .seg > button { min-height: 44px; }
  html[data-look="apple"] .btn.mini { font-size: 15px; }
}

/* ---------- accessibility fallbacks ---------- */
/* reduced transparency / increased contrast / no backdrop-filter: every glass surface is opaque */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-look="apple"] .topbar, html[data-look="apple"] .popup, html[data-look="apple"] .dropdown-menu, html[data-look="apple"] .menu, html[data-look="apple"] .toast {
    background: var(--bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-look="apple"] .popup .group, html[data-look="apple"] .popup .ilist { background: var(--s2); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-look="apple"] .topbar, html[data-look="apple"] .popup, html[data-look="apple"] .dropdown-menu, html[data-look="apple"] .menu, html[data-look="apple"] .toast { background: var(--bar-solid); }
}
@media (prefers-contrast: more) {
  html[data-look="apple"] input[type=text], html[data-look="apple"] input[type=number], html[data-look="apple"] input[type=password],
  html[data-look="apple"] input[type=search], html[data-look="apple"] input:not([type]), html[data-look="apple"] select, html[data-look="apple"] textarea {
    border-color: var(--sep-strong);
  }
  html[data-look="apple"] label.switch .sw { box-shadow: inset 0 0 0 1px var(--sep-strong); }
  html[data-look="apple"] .topbar { border-bottom-color: var(--sep-strong); }
}
@media (forced-colors: active) {
  html[data-look="apple"] .group, html[data-look="apple"] .ilist, html[data-look="apple"] .card, html[data-look="apple"] .popup,
  html[data-look="apple"] .btn, html[data-look="apple"] .badge, html[data-look="apple"] .seg { border: 1px solid CanvasText; }
  html[data-look="apple"] .lk-island { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  html[data-look="apple"] :focus-visible { outline: 2px solid Highlight; }
}
/* reduced motion: tokens.css drops every new-look duration (--dur-1/2/3, --t) to 1 ms and ui.css's own reduced-motion block
   stops the classic components' transitions; here: no island ring (shell.js does not add it either) and no press scale */
@media (prefers-reduced-motion: reduce) {
  html[data-look="apple"] .lk-island.lk-just { animation: none; }
  html[data-look="apple"] .btn:active { transform: none; }
  html[data-look="apple"] .lk-pagemenu svg { transition: none; }
}