/* 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);
}
.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;} }