/* Shared portal theme. Light values match the launcher :root so existing
   pages that already use --clr-* do not shift when they start linking this file. */

:root {
    color-scheme: light;
    --clr-bg: hsl(210, 40%, 98%);
    --clr-surface: hsl(0, 0%, 100%);
    --clr-surface-muted: hsl(210, 40%, 96%);
    --clr-primary: hsl(217, 91%, 60%);
    --clr-primary-hover: hsl(221, 83%, 53%);
    --clr-primary-light: hsl(221, 83%, 97%);
    --clr-danger: hsl(354, 70%, 54%);
    --clr-danger-hover: hsl(354, 70%, 44%);
    --clr-danger-soft: hsl(0, 86%, 94%);
    --clr-danger-ink: hsl(0, 63%, 31%);
    --clr-success: hsl(145, 63%, 42%);
    --clr-success-hover: hsl(145, 63%, 34%);
    --clr-success-soft: hsl(142, 76%, 93%);
    --clr-success-ink: hsl(144, 61%, 20%);
    --clr-text-heading: hsl(220, 13%, 13%);
    --clr-text-body: hsl(215, 14%, 34%);
    --clr-text-muted: hsl(217, 10%, 50%);
    --clr-border: hsl(210, 20%, 90%);
    --clr-border-hover: hsl(210, 20%, 80%);
    --clr-focus-ring: hsl(204, 70%, 53%);
    --clr-warning: hsl(38, 92%, 50%);
    --clr-warning-hover: hsl(32, 95%, 44%);
    --clr-warning-soft: hsl(48, 96%, 89%);
    --clr-warning-ink: hsl(26, 83%, 24%);
    --clr-info: hsl(217, 91%, 60%);
    --clr-info-soft: hsl(221, 83%, 97%);
    --clr-danger-light: var(--clr-danger-soft);
    --clr-success-light: var(--clr-success-soft);
    --clr-warning-light: var(--clr-warning-soft);
    --clr-info-light: var(--clr-info-soft);
    --clr-text-secondary: var(--clr-text-muted);
    --clr-heading: var(--clr-text-heading);
    --clr-body: var(--clr-text-body);
    --clr-muted: var(--clr-text-muted);
    --clr-table-header: var(--clr-surface-muted);
    --clr-table-stripe: hsl(210, 40%, 97%);
    --clr-row-hover: hsl(210, 40%, 94%);
    --clr-secondary: hsl(200, 18%, 46%);
    --clr-secondary-hover: hsl(200, 18%, 38%);
    --clr-disabled: hsl(210, 10%, 75%);
    --clr-purple: hsl(270, 55%, 48%);
    --clr-purple-hover: hsl(270, 55%, 40%);
    --clr-purple-soft: hsl(270, 80%, 96%);
    --clr-purple-ink: hsl(270, 55%, 32%);
    --clr-pink: hsl(330, 80%, 58%);
    --clr-pink-soft: hsl(330, 85%, 94%);
    --clr-pink-ink: hsl(330, 60%, 32%);
    --clr-pto: hsl(270, 60%, 55%);
    --clr-pto-light: hsl(270, 60%, 96%);
    --clr-on-accent: #fff;
    --clr-scrim: rgba(15, 23, 42, 0.45);
    --clr-scrim-strong: rgba(15, 23, 42, 0.7);
    --clr-code-bg: hsl(220, 13%, 18%);
    --clr-code-head: hsl(220, 13%, 22%);
    --clr-code-ink: hsl(210, 20%, 88%);
    --clr-code-meta: hsl(215, 15%, 70%);
    --clr-code-border: hsl(220, 13%, 32%);
    --clr-code-hover: hsl(220, 13%, 28%);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07);
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius: var(--radius-lg);
    --transition-speed: 0.2s ease-in-out;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --font-display: inherit;
    --font-body: inherit;
    --paper: var(--clr-bg);
    --white: var(--clr-surface);
    --ink-navy: var(--clr-text-heading);
    --ink-text: var(--clr-text-heading);
    --ink: var(--clr-text-heading);
    --ink-soft: var(--clr-text-muted);
    --signal: var(--clr-primary);
    --relay-teal: var(--clr-primary);
    --slate: var(--clr-text-muted);
    --mist: var(--clr-border);
    --on-accent: var(--clr-on-accent);
    --shadow: var(--shadow-lg);
    --rail-bg: hsl(222, 32%, 10%);
    --present: var(--clr-success);
    --present-bg: var(--clr-success-soft);
    --expiring: var(--clr-warning);
    --expiring-bg: var(--clr-warning-soft);
    --expired: var(--clr-danger);
    --expired-bg: var(--clr-danger-soft);
    --missing: var(--clr-danger);
    --missing-bg: var(--clr-danger-soft);
    --muted: var(--clr-text-muted);
    --muted-bg: var(--clr-surface-muted);
    --border: var(--clr-border);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --clr-bg: hsl(222, 28%, 8%);
    --clr-surface: hsl(222, 22%, 12%);
    --clr-surface-muted: hsl(222, 20%, 16%);
    --clr-primary: hsl(217, 91%, 65%);
    --clr-primary-hover: hsl(217, 91%, 72%);
    --clr-primary-light: hsl(217, 40%, 18%);
    --clr-danger: hsl(354, 70%, 58%);
    --clr-danger-hover: hsl(354, 70%, 50%);
    --clr-danger-soft: hsl(0, 40%, 18%);
    --clr-danger-ink: hsl(0, 86%, 86%);
    --clr-success: hsl(145, 55%, 48%);
    --clr-success-hover: hsl(145, 55%, 40%);
    --clr-success-soft: hsl(144, 32%, 16%);
    --clr-success-ink: hsl(142, 70%, 80%);
    --clr-text-heading: hsl(210, 40%, 96%);
    --clr-text-body: hsl(214, 18%, 78%);
    --clr-text-muted: hsl(215, 12%, 58%);
    --clr-border: hsl(217, 18%, 22%);
    --clr-border-hover: hsl(217, 18%, 30%);
    --clr-focus-ring: hsl(204, 80%, 62%);
    --clr-warning: hsl(38, 92%, 56%);
    --clr-warning-hover: hsl(38, 92%, 48%);
    --clr-warning-soft: hsl(32, 40%, 16%);
    --clr-warning-ink: hsl(48, 96%, 82%);
    --clr-info: hsl(217, 91%, 65%);
    --clr-info-soft: hsl(217, 40%, 18%);
    --clr-table-stripe: hsl(222, 20%, 14%);
    --clr-row-hover: hsl(222, 20%, 18%);
    --clr-secondary: hsl(210, 12%, 52%);
    --clr-secondary-hover: hsl(210, 12%, 60%);
    --clr-disabled: hsl(215, 12%, 32%);
    --clr-purple: hsl(270, 60%, 72%);
    --clr-purple-hover: hsl(270, 60%, 78%);
    --clr-purple-soft: hsl(270, 30%, 18%);
    --clr-purple-ink: hsl(270, 70%, 86%);
    --clr-pink: hsl(330, 70%, 72%);
    --clr-pink-soft: hsl(330, 30%, 18%);
    --clr-pink-ink: hsl(330, 80%, 88%);
    --clr-pto: hsl(270, 60%, 72%);
    --clr-pto-light: hsl(270, 30%, 18%);
    --clr-scrim: rgba(0, 0, 0, 0.55);
    --clr-scrim-strong: rgba(0, 0, 0, 0.72);
    --clr-code-bg: hsl(222, 28%, 6%);
    --clr-code-head: hsl(222, 22%, 11%);
    --clr-code-ink: hsl(210, 25%, 90%);
    --clr-code-meta: hsl(215, 14%, 68%);
    --clr-code-border: hsl(217, 18%, 26%);
    --clr-code-hover: hsl(217, 18%, 22%);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --rail-bg: hsl(222, 28%, 6%);
}

html, body {
    background-color: var(--clr-bg);
    color: var(--clr-text-body);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Shared chrome. New apps include _theme_head.html and use these classes. */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-success,
.btn-danger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed);
}

.btn-primary {
    background: var(--clr-primary);
    color: var(--clr-on-accent);
}

.btn-primary:hover:not(:disabled) {
    background: var(--clr-primary-hover);
}

.btn-secondary,
.btn-ghost {
    background: var(--clr-surface);
    color: var(--clr-text-body);
    border-color: var(--clr-border);
}

.btn-secondary:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
    border-color: var(--clr-border-hover);
    background: var(--clr-surface-muted);
    color: var(--clr-text-heading);
}

.btn-success {
    background: var(--clr-success);
    color: var(--clr-on-accent);
}

.btn-success:hover:not(:disabled) {
    background: var(--clr-success-hover);
}

.btn-danger {
    background: var(--clr-danger);
    color: var(--clr-on-accent);
}

.btn-danger:hover:not(:disabled) {
    background: var(--clr-danger-hover);
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-success:disabled,
.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-success:focus-visible,
.btn-danger:focus-visible {
    outline: 2px solid var(--clr-focus-ring);
    outline-offset: 2px;
}

table {
    background-color: var(--clr-surface);
    color: var(--clr-text-heading);
}

th {
    background-color: var(--clr-table-header);
    color: var(--clr-text-heading);
}

td {
    color: var(--clr-text-body);
}

input, select, textarea {
    accent-color: var(--clr-primary);
    color-scheme: inherit;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--clr-border-hover);
    border-radius: 24px;
    transition: background-color 0.3s ease;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--clr-surface);
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--clr-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Collapsed: current mode only. Open: three-position recessed pill. */
.portal-theme-switch {
    --pts-thumb: 40px;
    --pts-pad: 4px;
    --pts-step: 56px;
    --pts-nudge: calc((var(--pts-step) - var(--pts-thumb)) / 2);
    box-sizing: border-box;
    position: fixed;
    left: max(20px, env(safe-area-inset-left, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    width: calc(var(--pts-thumb) + var(--pts-pad) * 2);
    height: calc(var(--pts-thumb) + var(--pts-pad) * 2);
    padding: var(--pts-pad);
    border: 0;
    border-radius: 999px;
    background: #d8dee6;
    box-shadow:
        inset 0 3px 8px rgba(15, 23, 42, 0.28),
        inset 0 -1px 1px rgba(255, 255, 255, 0.55);
    isolation: isolate;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.portal-theme-switch[data-open="true"] {
    grid-template-columns: repeat(3, var(--pts-step));
    width: calc(var(--pts-step) * 3 + var(--pts-pad) * 2);
}

html[data-theme="dark"] .portal-theme-switch {
    background: #1a1f27;
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.65),
        inset 0 -1px 1px rgba(255, 255, 255, 0.06);
}

.portal-theme-switch__thumb {
    position: absolute;
    top: var(--pts-pad);
    left: var(--pts-pad);
    width: var(--pts-thumb);
    height: var(--pts-thumb);
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    box-shadow:
        0 3px 8px rgba(15, 23, 42, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 1px rgba(15, 23, 42, 0.08) inset;
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 0;
}

.portal-theme-switch[data-open="true"][data-pref="light"] .portal-theme-switch__thumb {
    transform: translateX(var(--pts-nudge));
}

.portal-theme-switch[data-open="true"][data-pref="system"] .portal-theme-switch__thumb {
    transform: translateX(calc(var(--pts-nudge) + var(--pts-step)));
}

.portal-theme-switch[data-open="true"][data-pref="dark"] .portal-theme-switch__thumb {
    transform: translateX(calc(var(--pts-nudge) + var(--pts-step) * 2));
}

.portal-theme-switch:not([data-open="true"]) .portal-theme-switch__opt:not([aria-checked="true"]) {
    display: none;
}

.portal-theme-switch__opt {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: #8b93a1;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.portal-theme-switch__opt svg {
    width: 20px;
    height: 20px;
    display: block;
}

.portal-theme-switch__opt[aria-checked="true"] {
    color: #6b7280;
}

html[data-theme="dark"] .portal-theme-switch__thumb {
    background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -1px 1px rgba(0, 0, 0, 0.4) inset;
}

html[data-theme="dark"] .portal-theme-switch__opt {
    color: #7d8594;
}

html[data-theme="dark"] .portal-theme-switch__opt[aria-checked="true"] {
    color: #e5e7eb;
}

.portal-theme-switch__opt:focus-visible {
    outline: 2px solid var(--clr-focus-ring);
    outline-offset: 2px;
}

.portal-theme-switch--inline,
.portal-theme-switch--compact {
    /* Must stay positioned so the thumb is not against the page. */
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 1;
}

.portal-theme-switch--compact {
    --pts-thumb: 26px;
    --pts-pad: 3px;
    --pts-step: 36px;
    flex-shrink: 0;
}

.portal-theme-switch--compact .portal-theme-switch__opt svg {
    width: 15px;
    height: 15px;
}