/* ==========================================================================
   The theme picker — palette on top, appearance below.

   Its own file because it is the one component that appears in all THREE
   shells: the application layout, the module launcher and the sign-in page.
   app.css is the application shell's stylesheet and the other two do not load
   it, so a picker living there would have been a picker on one screen.

   Everything here is token-driven, including the swatch dots, which are the
   one place in the application that must show a palette OTHER than the one in
   force — so they state their four accents literally, next to a comment
   pointing at the palette they belong to. Four hexes, and the only ones left.
   ========================================================================== */

.theme-switch {
    position: relative;
    flex-shrink: 0;
    z-index: 40;
}
.theme-switch[hidden] { display: none; }

/*
    In the topbar the trigger also carries .topbar__icon and inherits that
    shape. On the launcher and the sign-in page there is no .topbar__icon, so
    these are the properties that make it a button at all — written to be
    overridden, never to fight.
*/
.theme-switch > button {
    display: inline-grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
}
.theme-switch > button:hover { border-color: var(--border-strong); color: var(--text); }
.theme-switch[data-open="true"] > button { border-color: var(--accent); color: var(--accent); }

/* The chip shows the palette in force: its accent over its page ground. */
.theme-switch__chip {
    width: 15px;
    height: 15px;
    border-radius: var(--radius-pill);
    background:
        linear-gradient(135deg,
            rgb(var(--accent-rgb)) 0 50%,
            var(--surface-app) 50% 100%);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.theme-menu[hidden] { display: none !important; }
.theme-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    /* Anchored popover. See the layer ladder in app.css: 80-90. */
    z-index: 90;
    width: 232px;
    padding: 8px;
    /* Opaque, for the same reason .combo__list is: a menu you read THROUGH is
       a menu you read twice. */
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md), var(--rim-soft);
    text-align: start;
}

.theme-menu__label {
    margin: 4px 6px 6px;
    font-family: var(--font-sans-small);
    font-size: var(--text-xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}

.theme-menu__palettes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 10px;
}

.theme-swatch {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: start;
    cursor: pointer;
}
.theme-swatch:hover { background: var(--surface-hover); }
.theme-swatch[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-weight: var(--weight-semibold);
}

.theme-swatch__dot {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
}
/*
    Each dot is its own palette's LIGHT accent over its own LIGHT page ground,
    so the four read as four and not as four copies of whatever is in force.
    These four literals are the only hard-coded colours left outside print and
    the paper documents, and they are hard-coded on purpose: a swatch that
    themed with the theme could not show you the theme you have not picked.
    They track :root[data-palette="…"] --l-accent-rgb / --l-surface-app.
*/
.theme-swatch__dot[data-swatch="indigo"] { background: linear-gradient(135deg, #2563eb 0 50%, #f5f6f9 50% 100%); }
.theme-swatch__dot[data-swatch="teal"]   { background: linear-gradient(135deg, #0f766e 0 50%, #f3f8f7 50% 100%); }
.theme-swatch__dot[data-swatch="sand"]   { background: linear-gradient(135deg, #b45309 0 50%, #f8f5ef 50% 100%); }
.theme-swatch__dot[data-swatch="plum"]   { background: linear-gradient(135deg, #6d28d9 0 50%, #f7f5fa 50% 100%); }

.theme-swatch__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-menu__modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.theme-mode {
    min-height: 28px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}
.theme-mode:hover { color: var(--text); }
.theme-mode[aria-checked="true"] {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-xs);
}

/* Keyboard focus, for the two shells that do not load app.css's global ring. */
.theme-switch :focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/*
    Forced colours: hand the whole thing back to the system, including the
    swatch dots — in a forced-colours mode the user has said their colours win,
    and a palette preview is exactly the kind of decoration that must not
    argue.
*/
@media (forced-colors: active) {
    .theme-switch > button,
    .theme-menu,
    .theme-swatch,
    .theme-mode { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .theme-swatch[aria-checked="true"],
    .theme-mode[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
    .theme-switch__chip,
    .theme-swatch__dot { background: CanvasText; forced-color-adjust: none; }
}

/* On paper there is no picker. */
@media print {
    .theme-switch { display: none !important; }
}

/*
    Sign-in only: the picker sits in the top corner of the page rather than in
    a topbar, because that page has no topbar. Logical inset, so it lands on
    the correct side under RTL.
*/
.auth { position: relative; }
.auth__tools {
    position: absolute;
    top: var(--space-5);
    inset-inline-end: var(--space-5);
    /* Above the card's own stacking, below anything that opens over the page.
       See the layer ladder in app.css. */
    z-index: 20;
}