/* HCS Engagement Tools: Apple HIG glass (apple-hig-glass skill, captured
   2026-08-20). HIG semantic colors as variables, one .liquid-glass recipe for
   every surface, a faint two-color wash for the glass to blur, system font.
   Everything is scoped to body.hig so the report PDFs and older form pages
   are untouched by construction. */
:root {
  color-scheme: light;
  --system-blue:#007AFF; --system-purple:#AF52DE; --system-orange:#FF9500;
  --system-teal:#5AC8FA; --system-red:#FF3B30; --system-green:#34C759;
  --system-gray:#8E8E93; --system-gray2:#AEAEB2; --system-gray3:#C7C7CC;
  --system-gray4:#D1D1D6; --system-gray5:#E5E5EA; --system-gray6:#F2F2F7;
  --label:#000; --secondary-label:rgba(60,60,67,.6); --tertiary-label:rgba(60,60,67,.3);
  --background:#FFF; --secondary-background:#F2F2F7; --grouped-background:#F2F2F7;
  --separator:rgba(60,60,67,.29);
  --glass-bg:rgba(255,255,255,.72); --glass-border:rgba(255,255,255,.5);
  --glass-shadow:0 4px 24px rgba(0,0,0,.08); --glass-inset:inset 0 1px 0 rgba(255,255,255,.8);
  --wash-a:rgba(0,122,255,.08); --wash-b:rgba(175,82,222,.06);
  --hairline:rgba(60,60,67,.12);
}
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) {
    color-scheme: dark;
    --system-blue:#0A84FF; --system-purple:#BF5AF2; --system-orange:#FF9F0A;
    --system-red:#FF453A; --system-green:#32D74B;
    --system-gray2:#636366; --system-gray3:#48484A; --system-gray4:#3A3A3C;
    --system-gray5:#2C2C2E; --system-gray6:#1C1C1E;
    --label:#FFF; --secondary-label:rgba(235,235,245,.6); --tertiary-label:rgba(235,235,245,.3);
    --background:#000; --secondary-background:#1C1C1E; --grouped-background:#1C1C1E;
    --separator:rgba(84,84,88,.65);
    --glass-bg:rgba(30,30,32,.72); --glass-border:rgba(255,255,255,.12);
    --glass-shadow:0 4px 24px rgba(0,0,0,.4); --glass-inset:inset 0 1px 0 rgba(255,255,255,.06);
    --wash-a:rgba(10,132,255,.12); --wash-b:rgba(191,90,242,.09);
    --hairline:rgba(84,84,88,.45);
  }
}
html.theme-dark {
  color-scheme: dark;
  --system-blue:#0A84FF; --system-purple:#BF5AF2; --system-orange:#FF9F0A;
  --system-red:#FF453A; --system-green:#32D74B;
  --system-gray2:#636366; --system-gray3:#48484A; --system-gray4:#3A3A3C;
  --system-gray5:#2C2C2E; --system-gray6:#1C1C1E;
  --label:#FFF; --secondary-label:rgba(235,235,245,.6); --tertiary-label:rgba(235,235,245,.3);
  --background:#000; --secondary-background:#1C1C1E; --grouped-background:#1C1C1E;
  --separator:rgba(84,84,88,.65);
  --glass-bg:rgba(30,30,32,.72); --glass-border:rgba(255,255,255,.12);
  --glass-shadow:0 4px 24px rgba(0,0,0,.4); --glass-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --wash-a:rgba(10,132,255,.12); --wash-b:rgba(191,90,242,.09);
  --hairline:rgba(84,84,88,.45);
}

/* Paint html too: on a short page the body wash ends and html shows through. */
html:has(body.hig) { background: var(--secondary-background); }
body.hig {
  margin: 0; min-height: 100vh;
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", BlinkMacSystemFont, sans-serif;
  color: var(--label); line-height: 1.5; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse at 20% 20%, var(--wash-a) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, var(--wash-b) 0%, transparent 60%),
    var(--secondary-background);
}
body.hig a { color: var(--system-blue); text-decoration: none; }
body.hig a:hover { text-decoration: underline; }
body.hig :focus-visible { outline: 2px solid var(--system-blue); outline-offset: 2px; }

.liquid-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  border-radius: 16px;
}

/* Scrollbars in the token greys, thin, on every scrolling pane. */
body.hig ::-webkit-scrollbar { width: 9px; height: 9px; }
body.hig ::-webkit-scrollbar-track { background: transparent; }
body.hig ::-webkit-scrollbar-thumb { background: var(--system-gray3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
body.hig ::-webkit-scrollbar-thumb:hover { background: var(--system-gray2); background-clip: padding-box; }
body.hig * { scrollbar-width: thin; scrollbar-color: var(--system-gray3) transparent; }

/* Sticky glass header: radius on the bottom corners only. */
.hig-topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; border-radius: 0 0 16px 16px; border-top: none;
}
.hig-topbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--label); }
.hig-topbar .brand:hover { text-decoration: none; }
.hig-topbar h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.02em; color: var(--label); }
.hig-topbar .sub { font-size: 13px; color: var(--secondary-label); }
.hig-topbar .right { display: flex; align-items: center; gap: 10px; }

/* Buttons: blue is the only interaction accent. */
.hig-btn {
  box-sizing: border-box; /* .cta sets width:100%; without this its padding pushes it out of the card */
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--separator); background: var(--background); color: var(--label);
  transition: background .2s, border-color .2s, transform .1s;
}
.hig-btn:hover { text-decoration: none; background: var(--system-gray6); }
.hig-btn:active { transform: scale(.98); }
.hig-btn.primary { background: var(--system-blue); border-color: var(--system-blue); color: #fff; }
.hig-btn.primary:hover { background: var(--system-blue); filter: brightness(1.06); color: #fff; }
.hig-btn.danger { color: var(--system-red); }
.hig-btn.cta { padding: 16px 24px; font-size: 17px; font-weight: 600; border-radius: 12px; width: 100%; justify-content: center; }
.hig-btn:disabled { opacity: .4; cursor: default; }

/* Status badges: system color at 10% fill, 30% border, full-color text. */
.hig-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 8px; white-space: nowrap; line-height: 1.5; }
.hig-badge.blue   { color: var(--system-blue);   background: rgba(0,122,255,.10);  border: 1px solid rgba(0,122,255,.30); }
.hig-badge.green  { color: var(--system-green);  background: rgba(52,199,89,.10);  border: 1px solid rgba(52,199,89,.30); }
.hig-badge.orange { color: var(--system-orange); background: rgba(255,149,0,.10);  border: 1px solid rgba(255,149,0,.30); }
.hig-badge.red    { color: var(--system-red);    background: rgba(255,59,48,.10);  border: 1px solid rgba(255,59,48,.30); }
.hig-badge.gray   { color: var(--secondary-label); background: var(--system-gray6); border: 1px solid var(--separator); }

/* Inputs */
body.hig input[type=text], body.hig input[type=search], body.hig select, body.hig textarea {
  padding: 10px 14px; border: 1px solid var(--separator); border-radius: 10px; font: inherit; font-size: 15px;
  background: var(--background); color: var(--label); transition: border-color .2s, box-shadow .2s;
}
body.hig input:focus, body.hig select:focus, body.hig textarea:focus {
  border-color: var(--system-blue); box-shadow: 0 0 0 3px rgba(0,122,255,.15); outline: none;
}

/* Table */
.hig-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hig-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--secondary-label); padding: 8px; border-bottom: 1px solid var(--separator); font-weight: 600; }
.hig-table td { padding: 8px; border-bottom: 1px solid var(--separator); vertical-align: top; }

/* Theme toggle lives in the header; three states, persisted. */
.hig-theme { font-variant-numeric: tabular-nums; min-width: 64px; justify-content: center; }

@media (max-width: 600px) {
  .hig-topbar h1 { font-size: 16px; }
  .hig-topbar .sub { display: none; }
}
@media print {
  body.hig { background: #fff; }
  .liquid-glass { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-color: #ddd; }
  .hig-topbar, .hig-btn, [data-noprint] { display: none !important; }
}