/* Apple-style presentation layer (ticket 5TbkrO71BsFoaKiclUvO).
   Loaded AFTER styles.css. Presentation only: it restyles what exists and
   removes nothing — every field, button and datum is still in the DOM. One
   accent colour, system font stack, inset grouped cards, 8pt spacing,
   44px touch targets, light + dark, reduced motion. Helper copy is moved
   into (i) tooltips by js/ui-polish.js. */
:root {
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ap-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ap-bg: #f5f5f7;
  --ap-card: #ffffff;
  --ap-divider: rgba(60, 60, 67, .14);
  --ap-radius: 14px;
  --ap-radius-sm: 10px;
  --ap-s1: 8px; --ap-s2: 16px; --ap-s3: 24px; --ap-s4: 32px;
  --ap-fast: .16s;
  --bg: var(--ap-bg);
  --border: var(--ap-divider);
}
/* Light is the default on every device, whatever the OS appearance setting
   (Rob, 20 Oct 2026: the phone's dark mode was turning the whole console
   dark). Dark is opt-in only: <html data-theme="dark">. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  --ap-bg: #000000; --ap-card: #1c1c1e; --ap-divider: rgba(235, 235, 245, .16);
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e;
  --text: #f5f5f7; --text-muted: rgba(235, 235, 245, .6); --border: rgba(235, 235, 245, .16);
  --primary-tint: rgba(22, 155, 194, .2); --primary-text: #4cc3e6;
  --bar-bg: rgba(28, 28, 30, .92); --bar-bg-strong: rgba(28, 28, 30, .97); --sheet-bg: rgba(28, 28, 30, .97);
  --active-bg: rgba(255, 255, 255, .12); --tip-bg: #2c2c2e; --tip-bg-muted: #3a3a3c; --tip-bg-live: rgba(22, 155, 194, .25); --tip-bg-project: rgba(151, 71, 255, .25);
  color-scheme: dark;
}
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: #2c2c2e; color: var(--text); }

html, body { font-family: var(--ap-font); -webkit-font-smoothing: antialiased; line-height: 1.55; background: var(--ap-bg); }
/* clip, never hidden: overflow-x:hidden on body makes iOS Safari treat it as the scroller and the sticky topbar stops sticking. */
body { overflow-x: clip; }
/* iPad Safari still pans the page sideways when the viewport's overflow is clipped (body's clip propagates to the viewport, which iOS lets you drag anyway). Nothing here is wider than the screen, so forbid the horizontal pan itself: vertical scroll and pinch-zoom stay, and nested scrollers (tables, tab strips, code) are their own scroll containers and keep theirs. */
html { overflow-x: clip; overscroll-behavior-x: none; }
html, body { touch-action: pan-y pinch-zoom; }
code, pre, kbd, samp { font-family: var(--ap-mono); }
/* No blanket `.app * { min-width: 0 }`: it let flex rows squeeze buttons below
   their own label (one letter per line on a phone). Sideways overflow is
   handled where it starts (body/.app clip, modals, the reader view). */
.app { max-width: 1280px; padding: 0 var(--ap-s2) var(--ap-s4); overflow-x: clip; }
img, video, svg { max-width: 100%; }

/* hierarchy: one large page title, section headers, body */
.page-header h1, .page-header h2 { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.page-header { gap: var(--ap-s1) var(--ap-s2); margin-bottom: var(--ap-s3); }
.page-header-count { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--primary-tint); color: var(--primary); }
h2, h3 { letter-spacing: -.01em; }
h3 { font-size: 17px; font-weight: 600; }

/* inset grouped cards */
.docs-page > section, .docs-block, .settings-group, .faq-admin-page > section,
.np-panel, .fr-side > *, .releases-list > *, .skills-list > *, .project-section, .board-column {
  background: var(--ap-card); border: 0; border-radius: var(--ap-radius);
  box-shadow: 0 0 0 .5px var(--ap-divider);
}
.docs-page > section, .docs-block, .settings-group { padding: var(--ap-s2) var(--ap-s3); margin-bottom: var(--ap-s2); }
.card, .item-card { border: 0; border-radius: var(--ap-radius-sm); box-shadow: 0 0 0 .5px var(--ap-divider); }
table { border-collapse: collapse; }
th, td { border-color: var(--ap-divider) !important; }
hr { border: 0; border-top: .5px solid var(--ap-divider); }

/* controls */
button, .btn-primary, .btn-ghost, .btn-outline, .btn-attach, select, input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"] {
  min-height: 44px; border-radius: var(--ap-radius-sm); font-family: inherit;
  transition: background-color var(--ap-fast), opacity var(--ap-fast), transform var(--ap-fast), box-shadow var(--ap-fast);
}
.btn-primary { background: var(--primary); border-color: transparent; color: #fff; font-weight: 600; }
.btn-primary:active { transform: scale(.98); }
.btn-ghost, .btn-outline { border: 0; background: rgba(120, 120, 128, .12); color: var(--text); }
.btn-ghost:hover, .btn-outline:hover { background: rgba(120, 120, 128, .2); border-color: transparent; }
input, textarea, select { border: .5px solid var(--ap-divider); border-radius: var(--ap-radius-sm); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* checkboxes read as toggles */
input[type="checkbox"]:not(.no-switch) {
  appearance: none; -webkit-appearance: none; width: 51px; height: 31px; min-height: 31px; border-radius: 999px; flex: none;
  background: rgba(120, 120, 128, .32); position: relative; cursor: pointer; border: 0; vertical-align: middle; margin: 6px 6px 6px 0;
  transition: background-color var(--ap-fast);
}
input[type="checkbox"]:not(.no-switch)::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform var(--ap-fast);
}
input[type="checkbox"]:not(.no-switch):checked { background: #34c759; }
input[type="checkbox"]:not(.no-switch):checked::after { transform: translateX(20px); }
.item-card input[type="checkbox"], .board input[type="checkbox"], th input[type="checkbox"], td input[type="checkbox"] { /* selection boxes stay boxes */
  appearance: auto; -webkit-appearance: checkbox; width: 22px; height: 22px; min-height: 22px; background: none; border-radius: 4px; margin: 0; }
.item-card input[type="checkbox"]::after, .board input[type="checkbox"]::after, th input[type="checkbox"]::after, td input[type="checkbox"]::after { content: none; }

/* segmented control (applied to any tab strip) */
.seg, .docs-tabs, .project-tabs, .tabs {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(120, 120, 128, .12); max-width: 100%; overflow-x: auto;
}
.seg > *, .docs-tabs > *, .project-tabs > *, .tabs > * { min-height: 32px; border: 0; border-radius: 7px; background: transparent; padding: 4px 14px; font-weight: 500; }
.seg > .active, .docs-tabs > .active, .project-tabs > .active, .tabs > .active, .seg > [aria-selected="true"], .tabs > [aria-selected="true"] {
  background: var(--ap-card); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }

/* document / README reader view */
.fa-body-viewer, .markdown-body, .docs-md, .readme-view { max-width: 70ch; line-height: 1.7; margin-inline: auto; }
.fa-body-viewer pre, .markdown-body pre, .docs-md pre, .readme-view pre { overflow-x: auto; max-width: 100%; white-space: pre; border-radius: var(--ap-radius-sm); }
.fa-body-viewer table, .markdown-body table, .docs-md table, .readme-view table { display: block; overflow-x: auto; max-width: 100%; }
.doc-toc { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; font-size: 13px; }
@media (max-width: 1024px) { .doc-toc { position: static; max-height: none; } }

/* (i) tooltips — the home for all helper copy (js/ui-polish.js) */
.info-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 20px; height: 20px; min-height: 20px; margin-left: 6px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(120, 120, 128, .2); color: var(--text-muted); font: 600 12px/1 var(--ap-font); font-style: italic; cursor: help;
}
.info-tip::before { content: ""; position: absolute; inset: -12px; } /* 44px hit area */
.info-tip::after {
  content: attr(data-tip); position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: min(280px, 80vw); padding: 8px 12px; border-radius: var(--ap-radius-sm);
  background: #2c2c2e; color: #f5f5f7; font: 400 12.5px/1.45 var(--ap-font); font-style: normal; text-align: left; white-space: normal;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); pointer-events: none; display: none; /* display:none, not opacity:0 — a hidden tip would still widen a scrolling modal */
}
.info-tip:hover::after, .info-tip:focus-visible::after, .info-tip.open::after { display: block; animation: ap-tip-in var(--ap-fast) ease-out; }
@keyframes ap-tip-in { from { opacity: 0; } to { opacity: 1; } }
.info-tip.edge-left::after { left: 0; transform: none; }
.info-tip.edge-right::after { left: auto; right: 0; transform: none; }
/* the source paragraph stays in the DOM (screen readers, tests) but is not shown */
.tip-source { position: fixed !important; top: 0; left: 0; /* fixed, not absolute: absolute with no positioned ancestor sits at its place inside a scrolled list but is not clipped by it, stretching the page far below the content and un-pinning the sticky topbar */ width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* empty states: one short line */
.empty-hint { font-style: normal; font-size: 14px; padding: var(--ap-s3) var(--ap-s2); }

/* modals: sheets */
@media (max-width: 640px) {
  .modal-card, .modal > div, dialog { border-radius: var(--ap-radius) var(--ap-radius) 0 0; max-height: 92vh; overflow-y: auto; }
  /* CTAs: at least 44px tall, label never clipped; a long label wraps inside the button instead of overflowing it,
     break-word, not anywhere: anywhere lowers a button's min-content width to one letter. */
  .btn-primary, .btn-ghost, .btn-outline, .notify-claude-btn { height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; line-height: 1.25; text-align: center; max-width: 100%; overflow-wrap: break-word; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Phone shell: header clear of the status bar / notch, content clear of the side insets (viewport-fit=cover in index.html). */
.topbar { padding-top: max(6px, env(safe-area-inset-top, 0px)); }
.app { padding-left: max(var(--ap-s2), env(safe-area-inset-left, 0px)); padding-right: max(var(--ap-s2), env(safe-area-inset-right, 0px)); }
@media (max-width: 640px) {
  .app { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  /* Full-bleed bar: it sits inside .app's side padding, so pull it out to the screen edges. */
  .topbar { margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px)));
    padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); background: var(--bar-bg-strong); }
}

/* 44px touch targets for the header controls on tablet too */
.hamburger-btn, .profile-btn { min-width: 44px; min-height: 44px; }

/* Round icon buttons stay round. The blanket `button { min-height: 44px }` above gave the 30px-wide dictation mic
   a 30 x 44 oval on a tablet (and a lopsided 42 x 44 on a phone), and the red "listening" pulse followed that shape.
   Width, height and the minimums are one size, padding is nil and the button can't be squeezed or stretched by a flex parent. */
.mic-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; flex: none; aspect-ratio: 1 / 1; border-radius: 50%; box-sizing: border-box; font-size: 18px; }
@media (pointer: coarse), (max-width: 1023px) { .mic-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } }
.btn-attach.recording::before { flex: none; }