/* theme-switcher.css — the Dark / Light / High-contrast switcher
   (resources/views/partials/theme/switcher.blade.php, public/js/theme.js).
   One component for four chromes: the platform topbar (.p-shell tokens), the
   public nav (.sqm-nav tokens), and the guest / auth footers (app.css :root
   tokens) — so every colour resolves through a fallback chain onto whichever
   token set the host page has. Touch targets are 44px; the popover is a
   native radio group. Loaded unlayered, after the host page's CSS. */

.pf-theme{
  --sw-bg: var(--tile, var(--card, var(--bg-card, #161716)));
  --sw-line: var(--line-strong, var(--line, var(--border, #2c2b27)));
  --sw-text: var(--text, var(--text-primary, #f1ede4));
  --sw-muted: var(--muted, var(--text-secondary, #9a958a));
  --sw-acc: var(--acc-bright, var(--gold-bright, var(--accent, #e3a948)));
  --sw-wash: var(--acc-dim, rgba(227,169,72,.14));
  --sw-focus: var(--focus, var(--acc-line, var(--gold, #e3a948)));
  position:relative;display:inline-flex;align-items:center;font-family:inherit;
}

/* ── trigger (popover variant) ── */
.pf-theme-trigger{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:44px;min-height:38px;padding:0 10px;border-radius:8px;cursor:pointer;
  border:1px solid var(--sw-line);background:var(--sw-bg);color:var(--sw-text);
  font:600 13px/1 var(--sans, inherit);letter-spacing:.01em;white-space:nowrap;
  transition:border-color .16s,background .16s;
}
.pf-theme-trigger:hover{border-color:var(--sw-acc);}
.pf-theme-trigger:focus-visible,
.pf-theme-opt:focus-within{outline:3px solid var(--sw-focus);outline-offset:2px;}
.pf-theme-trigger svg{width:16px;height:16px;flex:none;}
.pf-theme-ic{display:none;}
.pf-theme[data-current="dark"] .pf-theme-ic--dark,
.pf-theme[data-current="light"] .pf-theme-ic--light,
.pf-theme[data-current="hc"] .pf-theme-ic--hc{display:block;}

/* ── panel ── */
.pf-theme-pop{margin:0;padding:6px;border:1px solid var(--sw-line);border-radius:12px;background:var(--sw-bg);min-width:0;}
.pf-theme--popover .pf-theme-pop{
  position:absolute;top:calc(100% + 8px);right:0;z-index:70;width:max-content;min-width:210px;max-width:calc(100vw - 24px);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.55);
}
/* light: a soft warm shadow, not the dark theme's black drop (it read as a grey smudge) */
html[data-pf-theme="light"] .pf-theme--popover .pf-theme-pop{box-shadow:0 16px 36px -20px rgba(26,26,22,.28);}
.pf-theme-pop[hidden]{display:none;}
.pf-theme--popover .pf-theme-legend{float:left;width:100%;}
.pf-theme--popover .pf-theme-opt{clear:both;}
.pf-theme-legend{padding:6px 8px 4px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sw-muted);}
.pf-theme-opt{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:8px;cursor:pointer;
  color:var(--sw-text);font-size:14px;font-weight:500;border:1px solid transparent;position:relative;
}
.pf-theme-opt:hover{background:var(--sw-wash);}
/* the native radio stays in the a11y tree + keyboard order; drawn as a ring */
.pf-theme-opt input{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--sw-muted);background:transparent;display:grid;place-items:center;cursor:pointer;
}
.pf-theme-opt input:checked{border-color:var(--sw-acc);}
.pf-theme-opt input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--sw-acc);}
.pf-theme-opt input:focus{outline:none;}
/* selected = ring + bold + edge (never colour alone) */
.pf-theme-opt:has(input:checked){border-color:var(--sw-acc);font-weight:700;background:var(--sw-wash);}
.pf-theme-opt-ic{width:17px;height:17px;flex:none;color:var(--sw-muted);}
.pf-theme-opt:has(input:checked) .pf-theme-opt-ic{color:var(--sw-acc);}
/* "Only on this device" (signed in): a real checkbox, 44px row, hint below */
.pf-theme-dev{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;margin-top:4px;border-top:1px solid var(--sw-line);
  cursor:pointer;color:var(--sw-text);font-size:13.5px;font-weight:600;}
.pf-theme-dev input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--sw-acc);cursor:pointer;}
.pf-theme-dev:focus-within{outline:3px solid var(--sw-focus);outline-offset:2px;border-radius:8px;}
.pf-theme-hint{margin:0 12px 6px;max-width:30ch;font-size:12px;line-height:1.45;color:var(--sw-muted);}
.pf-theme--inline .pf-theme-dev{border-top:none;margin-top:0;}
.pf-theme--inline .pf-theme-hint{display:none;}
.pf-theme-note{display:none;margin:6px 8px 4px;max-width:30ch;font-size:12px;line-height:1.45;color:var(--sw-muted);}
html[data-pf-theme-locked] .pf-theme-note{display:block;}

/* ── inline variant (footers): three options in a row ── */
.pf-theme--inline .pf-theme-pop{display:flex;flex-wrap:wrap;align-items:center;gap:4px;border:none;padding:0;background:none;}
.pf-theme--inline .pf-theme-legend{float:left;padding:0 6px 0 0;}
.pf-theme--inline .pf-theme-opt{padding:0 10px;font-size:13px;}

/* ── small screens: icon-only trigger; the panel never runs off-screen ── */
/* the label only where the bar has room (≤1080 the shell drops its other labels too) */
@media (max-width:1080px){ .pf-theme-cur{display:none;} }
@media (max-width:620px){ .pf-theme-trigger{min-height:44px;} }
@media (pointer:coarse){ .pf-theme-trigger{min-height:44px;} }
@media (prefers-reduced-motion:no-preference){ .pf-theme-trigger{transition:border-color .16s,background .16s;} }

/* the options' track: invisible to layout everywhere except light (below) */
.pf-theme-seg{display:contents;}

/* ── LIGHT v1 (docs/design/light-v1/README.md): the radio group is drawn as a
   segmented control — sunken track, segments sit flat, the checked one takes the
   selected look (tint + 1.5px accent.line + 600). The native radios stay the
   controls (one tab stop, arrow keys move + apply); the focus ring goes around
   the whole group. The trigger is an icon button; the panel floats (shadow.2). ── */
html[data-pf-theme="light"] .pf-theme-trigger{
  min-height:40px;border-radius:8px;background:var(--sl-surface-panel);border:1px solid var(--sl-line-control);
  box-shadow:var(--sl-shadow-1);color:var(--sl-ink-primary);
}
html[data-pf-theme="light"] .pf-theme-trigger:hover{background:var(--sl-surface-plot);border-color:var(--sl-line-strong);}
html[data-pf-theme="light"] .pf-theme-trigger[aria-expanded="true"]{background:var(--sl-accent-tint);border-color:var(--sl-accent-line);box-shadow:inset 0 0 0 .5px var(--sl-accent-line);}
html[data-pf-theme="light"] .pf-theme-trigger:focus-visible{outline:2px solid var(--sl-focus-ring);outline-offset:2px;}
@media (max-width:620px),(pointer:coarse){ html[data-pf-theme="light"] .pf-theme-trigger{min-height:44px;} }
html[data-pf-theme="light"] .pf-theme-pop{background:var(--sl-surface-raised);border:1px solid var(--sl-line-default);border-radius:12px;padding:6px 10px 10px;}
html[data-pf-theme="light"] .pf-theme--popover .pf-theme-pop{box-shadow:var(--sl-shadow-2);}
html[data-pf-theme="light"] .pf-theme--inline .pf-theme-pop{background:none;border:none;padding:0;box-shadow:none;}
html[data-pf-theme="light"] .pf-theme-legend{font-family:var(--mono);font-weight:500;letter-spacing:.16em;color:var(--sl-ink-faint);padding:6px 2px 8px;}
html[data-pf-theme="light"] .pf-theme--inline .pf-theme-legend{padding:0 8px 0 0;}
html[data-pf-theme="light"] .pf-theme-seg{
  display:flex;clear:both;gap:2px;padding:3px;border-radius:10px;
  background:var(--sl-surface-sunken);border:1px solid var(--sl-line-default);
}
html[data-pf-theme="light"] .pf-theme-seg:focus-within{outline:2px solid var(--sl-focus-ring);outline-offset:2px;}
html[data-pf-theme="light"] .pf-theme-opt{
  flex:1 1 auto;justify-content:center;min-height:44px;padding:0 12px;border-radius:7px;border:1.5px solid transparent;
  color:var(--sl-ink-secondary);font-size:14px;font-weight:500;line-height:1.2;text-align:center;
}
html[data-pf-theme="light"] .pf-theme-opt:hover{background:var(--sl-segment-hover);color:var(--sl-ink-primary);}
html[data-pf-theme="light"] .pf-theme-opt:focus-within{outline:none;}
html[data-pf-theme="light"] .pf-theme-opt:has(input:checked){background:var(--sl-accent-tint);border-color:var(--sl-accent-line);color:var(--sl-ink-primary);font-weight:600;}
html[data-pf-theme="light"] .pf-theme-opt:active{transform:translateY(1px);}
/* the radio stays the real control (label click, arrow keys); only its ring is not drawn */
html[data-pf-theme="light"] .pf-theme-opt input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
html[data-pf-theme="light"] .pf-theme-opt-ic{display:none;}
html[data-pf-theme="light"] .pf-theme-dev{border-top-color:var(--sl-line-default);margin-top:8px;color:var(--sl-ink-primary);}
html[data-pf-theme="light"] .pf-theme--inline .pf-theme-dev{margin-top:0;}
html[data-pf-theme="light"] .pf-theme-dev:focus-within{outline:2px solid var(--sl-focus-ring);}
html[data-pf-theme="light"] :is(.pf-theme-hint,.pf-theme-note){color:var(--sl-ink-secondary);}