/* --- buttons ---------------------------------------------------------- */

button,
.btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    cursor: pointer;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
        color var(--fast) var(--ease);
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
}

button:hover,
.btn:hover {
    background: var(--surface-3);
    border-color: var(--faint);
    text-decoration: none;
}

button:active {
    transform: translateY(0.5px);
}

button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

button.primary,
.btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #06232a;
    font-weight: 600;
}

button.primary:hover,
.btn.primary:hover {
    background: #5fd0e2;
    border-color: #5fd0e2;
}

button.ghost {
    background: transparent;
    border-color: var(--line);
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

button.tiny {
    padding: 4px 8px;
    font-size: 11.5px;
}

/* --- forms ------------------------------------------------------------ */

.field {
    display: grid;
    gap: 5px;
    margin-bottom: var(--s3);
}

.field label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    gap: var(--s2);
}

.field label .hint {
    color: var(--faint);
    font-weight: 400;
}

/* Named by exclusion rather than by enumeration.
 *
 * This rule used to list input[type=number] and input[type=text] only, which meant
 * every email, password, and search field on the site rendered as a white browser
 * default box in the middle of a dark form — and nothing said so, because the rule
 * that should have caught them simply did not mention them. Excluding the types
 * that genuinely need their own treatment is the safer direction: a field type
 * nobody thought about arrives styled instead of arriving broken. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select {
    font-family: inherit;
    font-size: 13.5px;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    width: 100%;
    transition: border-color var(--fast) var(--ease);
}

textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

/* Chromium paints its own pale background over autofilled fields. The inset shadow
   is the only thing that reliably covers it, and the long transition delay keeps it
   from flashing white before the override lands. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--fg);
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
    transition: background-color 100000s ease-in-out 0s;
}

input::placeholder,
textarea::placeholder {
    color: var(--faint);
}

input:hover,
textarea:hover,
select:hover {
    border-color: var(--faint);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-dim);
}

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--s4);
}

.fieldset > legend {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 0 0 var(--s2);
    border-bottom: 1px solid var(--line);
    width: 100%;
    margin-bottom: var(--s3);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
}

.switch {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 13px;
    color: var(--fg-dim);
    cursor: pointer;
    padding: 6px 0;
}

.switch input {
    appearance: none;
    width: 34px;
    height: 19px;
    border-radius: 10px;
    background: var(--surface-3);
    border: 1px solid var(--line-strong);
    position: relative;
    cursor: pointer;
    transition: background var(--fast) var(--ease);
    flex: none;
}

.switch input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}

.switch input:checked {
    background: var(--accent-wash);
    border-color: var(--accent-dim);
}

.switch input:checked::after {
    transform: translateX(15px);
    background: var(--accent);
}

/* --- tables ----------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    margin: 0 calc(var(--s1) * -1);
    padding: 0 var(--s1);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 0 var(--s3) var(--s2) 0;
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}

tbody td {
    padding: 9px var(--s3) 9px 0;
    border-bottom: 1px solid var(--line);
    color: var(--fg-dim);
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover td {
    background: var(--surface-2);
}

td.num,
th.num {
    text-align: right;
    padding-right: var(--s4);
    white-space: nowrap;
}

tr.is-reference td {
    background: rgba(255, 255, 255, 0.022);
}

tr.is-flagged td {
    background: var(--warn-wash);
}

td strong,
.strong {
    color: var(--fg);
    font-weight: 600;
}

/* --- pills, badges ---------------------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    white-space: nowrap;
}

.pill.approve {
    color: var(--approve);
    border-color: rgba(63, 191, 143, 0.4);
    background: var(--approve-wash);
}

.pill.decline {
    color: var(--decline);
    border-color: rgba(229, 100, 110, 0.4);
    background: var(--decline-wash);
}

.pill.warn {
    color: var(--warn);
    border-color: rgba(232, 177, 76, 0.4);
    background: var(--warn-wash);
}

.pill.accent {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: var(--accent-wash);
}

/* --- stat tiles ------------------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s3);
}

.stat {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--s3) var(--s4);
    background: var(--surface-2);
}

.stat .k {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 5px;
}

.stat .v {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fg);
}

.stat .s {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 3px;
}

/* --- callouts --------------------------------------------------------- */

.callout {
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: var(--s3) var(--s4);
    font-size: 12.5px;
    color: var(--muted);
}

.callout .label {
    display: block;
    margin-bottom: 5px;
}

.callout.accent {
    border-left-color: var(--accent);
}

.callout.warn {
    border-left-color: var(--warn);
}

.callout em {
    color: var(--fg);
    font-style: italic;
}

/* --- bars ------------------------------------------------------------- */

.barlist {
    display: grid;
    gap: 9px;
}

.barlist .item {
    display: grid;
    grid-template-columns: 1fr 62px;
    gap: var(--s3);
    align-items: center;
    font-size: 12.5px;
}

.barlist .track {
    position: relative;
    height: 20px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
}

.barlist .fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--accent-dim);
    border-radius: 3px;
    transition: width var(--base) var(--ease);
}

.barlist .fill.flagged {
    background: var(--warn);
}

.barlist .name {
    position: absolute;
    left: 8px;
    top: 0;
    line-height: 20px;
    font-size: 11.5px;
    color: var(--fg);
    white-space: nowrap;
    z-index: 1;
    text-shadow: 0 0 6px var(--bg);
}

.barlist .threshold {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: var(--decline);
    z-index: 2;
}

/* --- skeleton --------------------------------------------------------- */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-2) 25%,
        var(--surface-3) 37%,
        var(--surface-2) 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
    height: 14px;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
}

.skeleton-block {
    display: grid;
    gap: var(--s2);
}

.skeleton-block .skeleton:nth-child(2) {
    width: 82%;
}

.skeleton-block .skeleton:nth-child(3) {
    width: 64%;
}

/* --- toast ------------------------------------------------------------ */

.toasts {
    position: fixed;
    bottom: var(--s5);
    right: var(--s5);
    display: grid;
    gap: var(--s2);
    z-index: 50;
}

.toast {
    background: var(--surface-3);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: var(--s3) var(--s4);
    font-size: 13px;
    animation: rise var(--base) var(--ease);
    max-width: 380px;
}

.toast.bad {
    border-left-color: var(--decline);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* --- misc ------------------------------------------------------------- */

.hash {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--fg-dim);
    cursor: pointer;
    border-bottom: 1px dotted var(--faint);
}

.hash:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.kv {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 7px var(--s4);
    font-size: 12.5px;
}

.kv dt {
    color: var(--faint);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding-top: 1px;
}

.kv dd {
    margin: 0;
    color: var(--fg-dim);
}

.empty {
    color: var(--muted);
    font-size: 13px;
    padding: var(--s5) 0;
    text-align: center;
}

.divider {
    height: 1px;
    background: var(--line);
    margin: var(--s5) 0;
}

.spinner {
    width: 13px;
    height: 13px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- the mark ---------------------------------------------------------- */

/* Lives here because every page loads components.css. It used to be declared
   identically in account.css and landing.css and nowhere else, so the two pages
   that load neither — login and request-access — rendered an SVG with no width and
   no stroke: invisible, and stretched to 530px, which silently pushed the whole
   left-hand pitch down and off the bottom of the panel. One declaration, on the
   sheet nothing can be served without. */
.tally-marks {
    width: 22px;
    height: 14px;
    flex: none;
    overflow: visible;
}

.tally-marks path {
    stroke: var(--accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    fill: none;
}