/*
 * Forms.
 *
 * The old markup carried its layout inline -- every radio group was a
 * `style="display:flex; justify-content:center; gap:20px"` repeated verbatim
 * sixteen times, and labels hardcoded `color:white` (invisible on the two light
 * themes). All of it is classes now, driven by theme tokens.
 */

/* ------------------------------------------------------------------- panels */

.panels[data-empty="true"] .panels__hint { display: block; }
.panels__hint {
    display: none;
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--text-faint);
    font-size: .9375rem;
}

.panel {
    display: grid;
    gap: 1.125rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.panel__head { display: grid; gap: .25rem; }

.panel__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
}

.panel__note {
    margin: 0;
    font-size: .8125rem;
    color: var(--text-muted);
}

.panel--danger { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.panel--danger .panel__title { color: var(--bad); }

/* -------------------------------------------------------------------- grid */

.fields {
    display: grid;
    gap: .875rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.fields--single { grid-template-columns: 1fr; }
.field--wide { grid-column: 1 / -1; }

.field { display: grid; gap: .375rem; min-width: 0; }

.field__label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.field__label .req { color: var(--bad); margin-left: .125rem; }

.field__help {
    font-size: .75rem;
    color: var(--text-faint);
}

.field__error {
    font-size: .75rem;
    font-weight: 600;
    color: var(--bad);
}

.field:not([data-invalid="true"]) .field__error { display: none; }

/* ------------------------------------------------------------------ inputs */

.input,
.select {
    width: 100%;
    padding: .625rem .75rem;
    font: inherit;
    font-size: .9375rem;
    color: var(--text);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .15s, box-shadow .15s, background .15s;
    -webkit-appearance: none;
    appearance: none;
}

.input::placeholder { color: var(--text-faint); }

.input:hover,
.select:hover { border-color: color-mix(in srgb, var(--accent-solid) 40%, var(--line)); }

.input:focus-visible,
.select:focus-visible {
    outline: none;
    border-color: var(--accent-solid);
    box-shadow: var(--ring);
}

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select {
    border-color: var(--bad);
}

/* Amount fields: monospace so decimal points line up while typing. */
.input--money {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Native selects need their own arrow back once appearance is stripped. */
.select {
    padding-right: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.0625rem) 55%, calc(100% - .75rem) 55%;
    background-size: .3125rem .3125rem, .3125rem .3125rem;
    background-repeat: no-repeat;
}

/* Option lists render with OS chrome, so force legible contrast in both modes. */
.select option {
    background: var(--surface-solid);
    color: var(--text);
}

/* ----------------------------------------------------------- radio / choice */

.choice { display: grid; gap: .5rem; }

.choice__options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.choice__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
}

.choice__option:hover { border-color: color-mix(in srgb, var(--accent-solid) 45%, var(--line)); }

.choice__option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.choice__option:has(input:checked) {
    color: var(--text);
    background: var(--hover);
    border-color: var(--accent-solid);
}

.choice__option:has(input:focus-visible) { box-shadow: var(--ring); }

/* Owner chips keep their identity colour when chosen. */
.choice__option--myriam:has(input:checked) {
    color: var(--myriam);
    border-color: var(--myriam);
    background: color-mix(in srgb, var(--myriam) 16%, transparent);
}

.choice__option--richard:has(input:checked) {
    color: var(--richard);
    border-color: var(--richard);
    background: color-mix(in srgb, var(--richard) 16%, transparent);
}

/* -------------------------------------------------------------- checkboxes */

.check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--text-muted);
    cursor: pointer;
}

.check input {
    width: 1.0625rem;
    height: 1.0625rem;
    accent-color: var(--accent-solid);
    cursor: pointer;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    padding: .625rem 1.125rem;
    font: inherit;
    font-size: .9375rem;
    font-weight: 650;
    color: var(--text);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: filter .15s, background .15s, border-color .15s, box-shadow .15s;
}

.btn:hover:not(:disabled) { background: var(--hover); border-color: var(--accent-solid); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn:disabled { opacity: .55; cursor: not-allowed; }

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

.btn--primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }

.btn--danger {
    color: var(--on-accent);
    background: var(--bad);
    border-color: transparent;
}

.btn--danger:hover:not(:disabled) { filter: brightness(1.08); background: var(--bad); }

.btn--ghost { background: transparent; }

/* Busy state: the label is swapped for a spinner without resizing the button. */
.btn[data-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.btn[data-busy="true"]::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, var(--on-accent) 40%, transparent);
    border-top-color: var(--on-accent);
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .btn[data-busy="true"]::after { animation-duration: 2s; }
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    align-items: center;
}

.actions--end { justify-content: flex-end; }

/* -------------------------------------------------------------- combo box  */

.combo { position: relative; }

.combo__list {
    position: absolute;
    z-index: 40;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    max-height: 13rem;
    overflow-y: auto;
    padding: .25rem;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow);
}

.combo__list[hidden] { display: none; }

.combo__item {
    padding: .4375rem .5625rem;
    font-size: .875rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--text);
}

.combo__item.is-active { background: var(--accent); color: var(--on-accent); }

/* ------------------------------------------------------------------ readout */

/* The "selected item details" box that the delete forms show before you commit. */
.readout {
    display: grid;
    gap: .5rem .875rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    padding: .875rem;
    font-size: .8125rem;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-sm);
}

.readout[hidden] { display: none; }
.readout__key { color: var(--text-faint); }
.readout__val { color: var(--text); font-weight: 600; }
.readout__row { display: grid; gap: .0625rem; }