/* ============================================================
   controls.css — form controls, styled once, for the whole game

   Every <select> outside the printer-assignment dropdown was the browser's
   default: a grey system widget with a native arrow, sitting inside a dark
   terminal UI and looking like it had been pasted in from another program.
   Checkboxes and range sliders were untouched too, so the intake policy
   screen read as an unstyled form rather than as part of the game.

   These rules are deliberately element-level rather than class-level. A new
   panel gets the right look by writing a plain <select>, which is the only
   way this stays true as more screens are added.
   ============================================================ */

/* ---------- Select ---------- */

select,
.ui-select {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 30px 6px 10px;
    max-width: 100%;

    color: var(--text-1);
    font: 600 12px var(--font-body);
    letter-spacing: .01em;
    line-height: 1.2;

    background-color: var(--bg-2);
    /* The arrow is drawn rather than left to the platform, so it matches the
       rest of the chrome at every zoom and on every OS. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
        linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
    background-position:
        calc(100% - 15px) calc(50% + 1px),
        calc(100% - 10px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;

    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

select:hover:not(:disabled),
.ui-select:hover:not(:disabled) {
    border-color: var(--accent-dim);
    background-color: var(--bg-3);
}

select:focus-visible,
.ui-select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255, 158, 44, .25);
}

select:disabled,
.ui-select:disabled {
    color: var(--text-3);
    background-color: var(--bg-inset);
    border-color: var(--line);
    cursor: not-allowed;
    /* Hide the arrow rather than grey it: nothing here opens. */
    background-image: none;
}

/* The popup list is drawn by the OS. These are the only two properties the
   platform reliably honours, and setting them stops a white flash on the
   list in dark mode. */
select option {
    color: var(--text-1);
    background: var(--bg-2);
}

select option:disabled {
    color: var(--text-3);
}

/* ---------- Checkbox and radio ---------- */

input[type='checkbox'],
input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 18px;
    height: 18px;
    margin: 0;

    background: var(--bg-inset);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

input[type='radio'] {
    border-radius: 50%;
}

input[type='checkbox']::before,
input[type='radio']::before {
    content: '';
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform .1s ease;
    background: var(--accent-ink);
    /* A drawn tick — no glyph, so it renders identically everywhere. */
    clip-path: polygon(14% 46%, 0 60%, 39% 100%, 100% 22%, 86% 8%, 39% 72%);
}

input[type='radio']::before {
    clip-path: none;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
    background: var(--accent);
    border-color: var(--accent);
}

input[type='checkbox']:checked::before,
input[type='radio']:checked::before {
    transform: scale(1);
}

input[type='checkbox']:hover:not(:disabled),
input[type='radio']:hover:not(:disabled) {
    border-color: var(--accent-dim);
}

input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 158, 44, .3);
}

input[type='checkbox']:disabled,
input[type='radio']:disabled {
    cursor: not-allowed;
    opacity: .45;
}

/* ---------- Switch ----------
   For a control that turns a whole system on and off, a tick box is too
   quiet: the intake policy read as broken because its master switch looked
   like an incidental option. A switch states which way it is set. */

/* Selector carries the attribute too: `input[type='checkbox']` above is more
   specific than a bare class, so `.ui-switch` alone lost every property it
   shared with the tick box and rendered as an 18px square. */
input[type='checkbox'].ui-switch {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    position: relative;
    display: block;
    width: 42px;
    height: 22px;
    margin: 0;
    padding: 0;
    background: var(--bg-inset);
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

input[type='checkbox'].ui-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    /* The tick-box rule clips its marker into a checkmark; a knob is round. */
    clip-path: none;
    border-radius: 50%;
    background: var(--text-3);
    transform: none;
    transition: transform .15s ease, background-color .15s ease;
}

input[type='checkbox'].ui-switch:checked {
    background: var(--accent-dim);
    border-color: var(--accent);
}

input[type='checkbox'].ui-switch:checked::before {
    transform: translateX(20px);
    background: var(--accent-ink);
}

input[type='checkbox'].ui-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 158, 44, .3);
}

/* ---------- Range ---------- */

input[type='range'] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: 2px;
}

input[type='range']::-moz-range-track {
    height: 4px;
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: 2px;
}

input[type='range']::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    /* Centres the 14px thumb on the 4px track plus its 1px borders. */
    margin-top: -6px;
    background: var(--accent);
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius);
    transition: transform .1s ease;
}

input[type='range']::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent);
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius);
}

input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type='range']:hover::-moz-range-thumb { transform: scale(1.12); }

input[type='range']:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(255, 158, 44, .28);
}
input[type='range']:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(255, 158, 44, .28);
}

input[type='range']:disabled {
    cursor: not-allowed;
    opacity: .45;
}

/* ---------- Text and number inputs ---------- */

input[type='text'],
input[type='number'],
input[type='search'],
textarea {
    padding: 7px 10px;
    color: var(--text-1);
    font: 500 12px var(--font-body);
    background: var(--bg-inset);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    transition: border-color .12s ease;
}

input[type='text']:focus-visible,
input[type='number']:focus-visible,
input[type='search']:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255, 158, 44, .22);
}

/* ---------- Setting row ----------
   One label, one control, one read-out. Used by every policy screen so the
   controls line up down the panel instead of each finding its own width. */

.setting-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--line);
}

.setting-row:last-of-type {
    border-bottom: 0;
}

.setting-row > .setting-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Without this the label's longest word sets the column's minimum and the
       whole row refuses to narrow — Czech labels are long enough to matter. */
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-2);
    font: 600 12px var(--font-body);
}

.setting-row > .setting-label small {
    color: var(--text-3);
    font: 400 10px var(--font-body);
    line-height: 1.35;
}

/* The read-out is the number the slider is currently at. Monospaced and
   right-aligned so it does not jitter as the value changes width. */
.setting-row > .setting-value {
    min-width: 52px;
    color: var(--accent-strong);
    font: 600 12px var(--font-mono);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A row whose control is a switch or a select does not need the value column
   to hold anything, but the column stays so every row aligns. */
.setting-row > .setting-control {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.setting-row > .setting-control > select {
    width: 100%;
}

@media (max-width: 620px) {
    .setting-row {
        grid-template-columns: 1fr auto;
        row-gap: var(--sp-1);
    }
    .setting-row > .setting-label { grid-column: 1; }
    .setting-row > .setting-value { grid-column: 2; }
    .setting-row > .setting-control { grid-column: 1 / -1; }
}

/* ---------- Policy cards ----------
   The intake and operations screens are settings, not lists, so they get a
   little more room to breathe than a plain card and a clear state when the
   whole thing is switched off. */

.card-intake .setting-row:first-of-type,
.card-intake .intake-master {
    margin-top: var(--sp-2);
}

/* A paused policy is dimmed everywhere except its own switch — the panel
   should look inert, while the control that revives it stays lit. */
.card-intake.is-paused .setting-row:not(.intake-master),
.card-intake.is-paused .intake-preview {
    opacity: .55;
}

.card-intake.is-paused .intake-master {
    border-bottom-color: var(--warn);
}

.intake-master .setting-label {
    color: var(--text-1);
    font-weight: 700;
}

.intake-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-inset);
    border-left: 2px solid var(--accent-dim);
    border-radius: var(--radius);
    color: var(--text-2);
    font-size: 11px;
}

.intake-preview strong {
    color: var(--text-1);
    font: 600 12px var(--font-body);
}

.intake-preview .market-item-stats {
    margin: 0;
}