/* ==========================================================================
   COMPONENT — Mode picker + verification policy (sidebar)
   ========================================================================== */

/* ---- Mode picker -------------------------------------------------------
   The selected mode used to be a solid indigo slab with a hard edge and a
   drop shadow — the loudest object on a page whose loudest object should be
   a verdict. It is now a tinted row with an accent rail and a check: the same
   amount of information, a quarter of the volume, and (unlike a gradient
   slab) the label on it is a contrast-checkable colour on a known surface. */
.mode-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.7rem;
}

.mode-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.7rem 0.6rem 0.85rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    text-align: left;
    color: var(--text-secondary);
    font-family: inherit;
}

.mode-button:hover {
    background: var(--surface-2);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.mode-button[aria-pressed="true"] {
    background: var(--accent-bg);
    border-color: var(--accent-border);
    color: var(--text-primary);
}

/* The rail is a 1.4.11 non-text indicator: --accent-fg against the tinted row
   is 6.84:1. Selection is therefore carried by position, a rail, a tick and a
   weight change — four channels, none of them colour alone. */
.mode-button[aria-pressed="true"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--accent-fg);
}

.mode-button[aria-pressed="true"]::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--accent-fg);
    margin-left: auto;
    padding-left: 0.4rem;
}

/* Font Awesome glyph, not an emoji: emoji render in the system colour font,
   ignore `color`, and vary wildly by platform. */
.mode-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text-tertiary);
    font-size: 0.8rem;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.mode-button[aria-pressed="true"] .mode-icon {
    background: var(--accent-solid);
    color: var(--text-on-accent);
}

/* The mode button's children are <span>s (a <button> may not contain <div>),
   so each has to be told to be a block or the title and description run
   together on one line. */
.mode-content { flex: 1; min-width: 0; display: block; }
.mode-title {
    display: block;
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin-bottom: 0.1rem;
}
.mode-desc {
    display: block;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}
.mode-button[aria-pressed="true"] .mode-desc { color: var(--text-secondary); }

/* ---- Policy ------------------------------------------------------------ */
.policy-section {
    padding: 0.9rem 1.15rem 1.1rem;
    border-top: 1px solid var(--border-subtle);
}

.policy-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.policy-legend {
    display: flex;
    align-items: center;
    font-size: var(--text-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    min-height: 28px;
    margin-bottom: 0.7rem;
    padding: 0;
    color: var(--text-tertiary);
}

.policy-control { margin-bottom: 0.8rem; }
.policy-control:last-child { margin-bottom: 0; }

.policy-control > label,
.policy-group-label {
    display: block;
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.policy-select,
.policy-input {
    width: 100%;
    min-height: 38px;
    padding: 0.45rem 0.6rem;
    background: var(--surface-input);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
}

.policy-select:hover,
.policy-input:hover { border-color: var(--accent-fg); }

/* ---- Source-type checkboxes -------------------------------------------
   The native 16x16 box was a 16x16 target — under any target-size guideline
   there is, and impossible on a phone. The real input is stretched invisibly
   over the whole chip (appearance:none, so it paints nothing but still takes
   the focus ring and still IS the control), and the tick is drawn by the
   sibling mark. Hit area = the chip, which is what a user aims at anyway. */
.source-type-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.checkbox-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.25rem 0.7rem 0.25rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.checkbox-label:hover { border-color: var(--border-interactive); color: var(--text-primary); }

.checkbox-label input[type="checkbox"] {
    /* -1px, not 0: the absolute containing block is the label's PADDING box,
       so `inset: 0` stops inside the 1px border and a 44px chip yields a 42px
       control. The input paints nothing, so overlaying the border is free. */
    position: absolute;
    inset: -1px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.checkbox-mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--border-interactive);
    border-radius: var(--radius-xs);
    background: var(--surface-input);
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.checkbox-mark::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    line-height: 1;
    color: var(--text-on-accent);
    opacity: 0;
}
.checkbox-label input[type="checkbox"]:checked ~ .checkbox-mark {
    background: var(--accent-solid);
    border-color: var(--accent-solid);
}
.checkbox-label input[type="checkbox"]:checked ~ .checkbox-mark::after { opacity: 1; }

.checkbox-label:has(input:checked) {
    background: var(--accent-bg);
    border-color: var(--accent-border);
    color: var(--text-primary);
}

.policy-hint {
    margin: 0.7rem 0 0;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

/* ---- Usage / tier ------------------------------------------------------ */
.usage-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.usage-tier {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    font-size: var(--text-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--accent-fg);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.55rem;
}
.usage-counter {
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.usage-upsell { margin: 0.45rem 0 0; }

/* Below the sidebar breakpoint the policy block used to be display:none —
   the controls silently stopped existing on mobile while still being read by
   currentPolicy(). It is a <details> now, so it collapses but stays reachable. */
.policy-details > summary {
    cursor: pointer;
    list-style: none;
}
.policy-details > summary::-webkit-details-marker { display: none; }
.policy-details > summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: var(--text-3xs);
    color: var(--text-muted);
    transition: transform var(--duration-fast) var(--ease-out);
}
.policy-details[open] > summary::after { transform: rotate(180deg); }

@media (min-width: 1025px) {
    /* On desktop the sidebar has room; keep it permanently expanded and hide
       the disclosure affordance rather than shipping two markup variants. */
    .policy-details > summary { pointer-events: none; }
    .policy-details > summary::after { display: none; }
}

/* ---- Responsive -------------------------------------------------------
   Owned here, not in layout.css: this file loads last, so a rule there would
   never win. Two deliberate shapes rather than one compromise:

   Tablet (721–1024px): the sidebar is now a full-width band, so the three
   modes become a horizontal strip — a stacked list would waste the width and
   push the input below the fold.

   Phone (≤720px): stacked and full-width. A horizontal scroller here hides
   Rapid check off-screen behind a gesture nothing signals, and the tap targets
   would be under 44px tall. */
@media (min-width: 721px) and (max-width: 1024px) {
    .mode-list {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.7rem;
    }
    .mode-button { min-width: 220px; flex: 0 0 auto; }
}

@media (max-width: 768px) {
    .mode-list { flex-direction: column; }
    .mode-button { min-height: var(--hit-min); }
    .policy-legend { min-height: var(--hit-min); }
    .policy-select,
    .policy-input { min-height: var(--hit-min); }
    .checkbox-label { min-height: var(--hit-min); padding-inline: 0.85rem 0.9rem; }
}