/* ============================================================================
   shell.css — the components every screen shares
   ============================================================================

   The top bar, the app container, cards, and the control primitives (chips,
   toggles, segmented controls, tab groups, drop zones). Anything used on more
   than one screen lives here; anything used on exactly one lives with that
   screen. The map-specific chrome is in map-shell.css.

   Requires tokens.css. Class prefix `kg-`.

   Mobile rule that outranks aesthetics: every interactive element is at least
   var(--hit) = 44px on touch. Where a design value is smaller (a 30px avatar,
   a 28px zoom button), the *target* is padded out to 44px even though the
   painted box stays small.
   ========================================================================= */


/* ── Page ────────────────────────────────────────────────────────────────── */

.kg-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--sand-100);
    padding: var(--space-page) var(--space-page) 48px;
}


/* ── App container ───────────────────────────────────────────────────────── */

.kg-container {
    max-width: 1180px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-container);
    box-shadow: var(--shadow-container);
    overflow: hidden;
}

/* The settings screen is the one narrow container. */
.kg-container--narrow { max-width: 760px; }

.kg-container__body { padding: 44px 40px 40px; }


/* ── Top bar ─────────────────────────────────────────────────────────────── */

.kg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 0 var(--space-page);
    background: var(--green-900);
}

/* The hub's bar is slightly taller and roomier — it is the front door. */
.kg-topbar--hub { height: 60px; padding: 0 24px; }

.kg-topbar__left { display: flex; align-items: center; gap: 14px; }

.kg-wordmark {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-card);
    color: var(--on-green);
    white-space: nowrap;
}
.kg-topbar--hub .kg-wordmark { font-size: 20px; }
.kg-wordmark em { font-style: normal; color: var(--yellow); }

/* The current app's name, right-aligned. Technical, so mono. */
.kg-topbar__app {
    font-family: var(--font-mono);
    font-size: var(--text-data);
    letter-spacing: .06em;
    color: var(--on-green-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "← Apps" / "Indstillinger" — a chip on the green bar. */
.kg-chip-onGreen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-small);
    color: var(--on-green-muted);
    background: none;
    border: 1px solid var(--on-green-border);
    border-radius: 8px;
    padding: 5px 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ease-state), color var(--ease-state);
}
.kg-chip-onGreen:hover { background: var(--on-green-hover); color: var(--on-green); }
.kg-topbar--hub .kg-chip-onGreen { padding: 6px 12px; border-radius: var(--radius-chip); }

.kg-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--yellow);
    color: var(--green-900);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}
.kg-avatar--lg { width: 42px; height: 42px; font-size: 16px; }


/* ── Type helpers ────────────────────────────────────────────────────────── */

/* The system's signature label: tiny, mono, uppercase, wide-tracked. Marks a
   section without spending a heading on it. */
.kg-micro {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
}

.kg-data {
    font-family: var(--font-mono);
    font-size: var(--text-data);
    letter-spacing: .06em;
}

.kg-muted    { color: var(--green-600); }
.kg-faint    { color: var(--faint); }
.kg-negative { color: var(--orange); }


/* ── Cards ───────────────────────────────────────────────────────────────── */

.kg-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--space-panel);
}

/* App card on the hub: icon at the top, title pushed to the bottom so titles
   of different lengths still sit on one line together. */
.kg-app-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 98px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card-sm);
    padding: 16px;
    color: var(--green-900);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.kg-app-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
    color: var(--green-900);           /* not the global link hover */
}

.kg-app-card__icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--map-grey-1);
    border: 1px solid var(--map-fill-2);
}

.kg-app-card__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-card);
    margin-top: auto;
    line-height: 1.25;
}

.kg-app-card__sub {
    font-size: 12px;
    color: var(--green-600);
    line-height: 1.45;
}

/* Not built yet. Legible but clearly not a destination — and not focusable,
   so the keyboard skips it rather than landing on a dead link. */
.kg-app-card--soon {
    opacity: .55;
    cursor: not-allowed;
    background: var(--sand-100);
}
.kg-app-card--soon:hover {
    border-color: var(--border);
    box-shadow: none;
}

.kg-badge-soon {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    align-self: flex-start;
}


/* ── Buttons ─────────────────────────────────────────────────────────────── */

.kg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--hit);
    padding: 11px 18px;
    border-radius: var(--radius-input);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--text-body);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease-state);
}
.kg-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }

.kg-btn--primary {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--green-900);
    font-weight: 600;
}
.kg-btn--primary:hover { box-shadow: var(--shadow-hover); }

.kg-btn--full { width: 100%; }


/* ── Control primitives ──────────────────────────────────────────────────── */

/* Chip — a wrap-around selectable (Whist's Melding, filter pills). */
.kg-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-chip);
    background: var(--surface);
    color: var(--green-600);
    font-size: var(--text-small);
    cursor: pointer;
    transition: background var(--ease-state), border-color var(--ease-state), color var(--ease-state);
}
.kg-chip[aria-pressed="true"],
.kg-chip.is-active {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--green-900);
    font-weight: 500;
}

/* Segmented control — equal-width, one active. */
.kg-segmented { display: flex; gap: 6px; }
.kg-segmented > button {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-chip);
    background: var(--surface);
    color: var(--green-600);
    font-size: var(--text-small);
    cursor: pointer;
    transition: background var(--ease-state), border-color var(--ease-state), color var(--ease-state);
}
.kg-segmented > button[aria-pressed="true"] {
    border-color: var(--yellow);
    background: var(--yellow-tint);
    color: var(--green-900);
}

/* Stacked variant, for when the options are named things rather than a short
   either/or — equal-width columns would squeeze "Havbunds-dybde" to nothing. */
.kg-segmented--stack { flex-direction: column; }
.kg-segmented--stack > button {
    flex: 0 0 auto;
    min-height: var(--hit);
    text-align: left;
    padding: 10px 12px;
}

/* Tab group — a sand track with a yellow pill riding in it. */
.kg-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--sand-100);
    border-radius: var(--radius-input);
}
.kg-tabs > button {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--green-600);
    font-size: var(--text-row);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--ease-state), color var(--ease-state);
}
.kg-tabs > button[aria-selected="true"] {
    background: var(--yellow);
    color: var(--green-900);
}

/* Toggle — 34x20 pill. The input stays in the DOM for keyboard and screen
   readers; the pill is drawn on the label. */
.kg-toggle { position: relative; width: 34px; height: 20px; flex: none; }
.kg-toggle input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    /* Pad the hit area out to 44px without moving the painted pill. */
    width: var(--hit);
    height: var(--hit);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.kg-toggle__track {
    display: block;
    width: 34px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--hairline);
    transition: background var(--ease-state);
    pointer-events: none;
}
.kg-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(31, 61, 43, .2);
    transition: transform var(--ease-state);
}
.kg-toggle input:checked ~ .kg-toggle__track { background: var(--yellow); }
.kg-toggle input:checked ~ .kg-toggle__track::after { transform: translateX(14px); }
.kg-toggle input:focus-visible ~ .kg-toggle__track {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* Toggle row — label left, toggle right, hairline between. Last has none. */
.kg-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--hit);
    padding: 11px 0;
    border-bottom: 1px solid var(--hairline);
    font-size: var(--text-row);
}
.kg-toggle-row:last-child { border-bottom: 0; }

.kg-dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--green-600);
}

/* Slider row — label and live mono value on one line, track beneath. */
.kg-slider-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.kg-slider-row__label { font-size: var(--text-small); color: var(--green-600); }
.kg-slider-row__value { font-family: var(--font-mono); font-size: 12px; }

.kg-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--hit);          /* generous target; the track is drawn small */
    background: none;
    cursor: pointer;
}
.kg-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--hairline);
}
.kg-slider::-moz-range-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--hairline);
}
.kg-slider::-moz-range-progress {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--yellow);
}
.kg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 2px solid var(--yellow);
}
.kg-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 2px solid var(--yellow);
}

/* Drop zone. */
.kg-dropzone {
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    background: var(--sand-100);
    padding: 18px;
    text-align: center;
    cursor: pointer;
}

/* Text input / search field. */
.kg-input {
    width: 100%;
    min-height: var(--hit);
    padding: 10px 12px;
    background: var(--sand-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-chip);
    font-size: var(--text-row);
}
.kg-input::placeholder { color: var(--faint); }


/* ── Utilities ───────────────────────────────────────────────────────────── */

.kg-rule { border: 0; border-top: 1px solid var(--border); margin: 0; }

.kg-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--gap-cards);
    padding-top: 14px;
}

/* Display utility. `.hidden` is spelled out alongside [hidden] because several
   apps toggle it with classList rather than the property. */
[hidden], .hidden { display: none !important; }

.kg-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ── Responsive ──────────────────────────────────────────────────────────── */
/* One breakpoint, matching the shell's existing ~760px. Below it the container
   stops being a card floating on sand and becomes the screen. */

@media (max-width: 760px) {
    .kg-page { padding: 0 0 32px; }

    .kg-container,
    .kg-container--narrow {
        max-width: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .kg-container__body { padding: 24px 16px 28px; }

    .kg-topbar,
    .kg-topbar--hub { height: 56px; padding: 0 16px; }

    /* Every row-like control grows for the thumb. */
    .kg-toggle-row { padding: 12px 0; font-size: var(--text-body); }

    .kg-tabs > button,
    .kg-segmented > button {
        min-height: var(--hit);
        font-size: var(--text-row);
    }
}