/* DarkDev UI kit: components. Needs tokens.css loaded first.
 * Edit in ui-kit/, then run tools/sync_kit.py. kitchen-sink.html shows every piece.
 */

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: transparent;   /* the game shows through around the panel */
    color: var(--ink);
    font-family: var(--font);
    font-stretch: var(--stretch-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    caret-color: var(--accent);
}

/* Only body sets a size: the root size in tokens.css scales with the screen. */
body { font-size: var(--fs-base); }

body.preview { background: var(--preview-backdrop); }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.num, table, .kpi strong { font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-soft); color: var(--ink); }

::-webkit-scrollbar { width: .5rem; height: .5rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--radius); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius); }

h1, h2, h3 { margin: 0; font-stretch: var(--stretch-display); line-height: var(--lh-tight); }

/* An icon is a mask over the text color: <span class="i" style="--i: var(--icon-x)"></span> */
.i {
    display: inline-block;
    flex: none;
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
    vertical-align: -.15em;
}

/* ------------------------------------------------------------------ shell */

.shell {
    position: fixed;
    inset: 4vh 6vw;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: var(--border) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
    animation: shell-in var(--dur) var(--ease-out);
}
.shell > .body { flex: 1; overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-5); }

@keyframes shell-in { from { opacity: 0; transform: translateY(.5rem) scale(.995); } }

.topbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-5);
    border-bottom: var(--border) solid var(--line);
    background: var(--surface-1);
}
.topbar .title { display: flex; align-items: baseline; gap: var(--sp-3); flex: 1; min-width: 12rem; }
.topbar h1 {
    font-size: var(--fs-xl);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.005em;
    color: var(--title);
}
.topbar .sub { color: var(--muted); font-size: var(--fs-sm); }

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

.btn, .icon-btn, .tabs button, .chip-btn {
    font: inherit;
    font-stretch: var(--stretch-body);
    cursor: pointer;
    border-radius: var(--radius);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: var(--border) solid var(--line-strong);
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary:active { background: var(--accent-press); }
.btn.ghost { background: transparent; border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.2857rem;
    height: 2.2857rem;
    border: 0;
    background: transparent;
    color: var(--muted);
}
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn:active { background: var(--surface-3); }
.icon-btn .i { width: 1.15rem; height: 1.15rem; }

/* Small quiet text action inside tables */
.chip-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: .1429rem var(--sp-2);
    border: var(--border) solid transparent;
    background: transparent;
    color: var(--ink-2);
    font-size: var(--fs-sm);
}
.chip-btn:hover { border-color: var(--line-strong); color: var(--ink); }

/* ------------------------------------------------------------------ tabs */

.tabs {
    display: inline-flex;
    gap: .1429rem;
    padding: .1429rem;
    background: var(--bg);
    border: var(--border) solid var(--line);
    border-radius: var(--radius);
}
.tabs button {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: var(--sp-1) var(--sp-3);
    font-weight: 550;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active, .tabs button[aria-selected="true"] {
    background: var(--surface-3);
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* ------------------------------------------------------------------ status pill and chips */

/* Status always pairs a color with an icon and a word. Set --status and --i. */
.pill {
    --status: var(--neutral);
    --i: var(--icon-quiet);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: .1429rem var(--sp-2) .1429rem var(--sp-1);
    border-radius: var(--radius);
    background: var(--status);
    color: var(--on-status);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-stretch: var(--stretch-display);
}
.pill::before {
    content: '';
    width: 1.05em;
    height: 1.05em;
    background: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
}
.pill:empty { display: none; }
.is-success { --status: var(--success); --i: var(--icon-check); }
.is-warning { --status: var(--warning); --i: var(--icon-warning); }
.is-danger  { --status: var(--danger);  --i: var(--icon-warning); }
.is-info    { --status: var(--info);    --i: var(--icon-info); }
.is-neutral { --status: var(--neutral); --i: var(--icon-quiet); }

.chip {
    display: inline-block;
    padding: 0 var(--sp-2);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.6;
}
.chip.is-success { color: var(--success); }
.chip.is-warning { color: var(--warning); }
.chip.is-danger  { color: var(--danger); }
.chip.is-info    { color: var(--info); }

.status-line { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.status-line .text { color: var(--ink-2); }

/* Money and trend text */
.pos { color: var(--success); }
.neg { color: var(--danger); }
.caution { color: var(--warning); }

/* ------------------------------------------------------------------ cards, KPIs */

.card {
    background: var(--surface-1);
    border: var(--border) solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-4);
    min-width: 0;
}
.card > h2, .card-title {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ink);
}
.card > h2 .muted { font-size: var(--fs-sm); font-weight: 400; font-stretch: var(--stretch-body); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; margin-bottom: var(--sp-4);
        border: var(--border) solid var(--line); border-radius: var(--radius); background: var(--surface-1); }
.kpi { padding: var(--sp-3) var(--sp-4); min-width: 0; }
.kpi + .kpi { border-left: var(--border) solid var(--line); }
.kpi label { display: block; color: var(--muted); font-size: var(--fs-sm); }
.kpi strong {
    display: block;
    margin: var(--sp-1) 0 .1429rem;
    font-size: var(--fs-xl);
    font-weight: 650;
    font-stretch: var(--stretch-display);
    line-height: 1.1;
}
.kpi small { color: var(--muted); font-size: var(--fs-sm); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.grid > .wide { grid-column: 1 / -1; }

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

table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: var(--border) solid var(--line);
}
td { padding: var(--sp-2) var(--sp-3); }
tbody tr:nth-child(even) td { background: var(--surface-2); }
tbody tr:hover td { background: var(--surface-3); }
td.r, th.r { text-align: right; }

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

.field { display: grid; gap: var(--sp-1); margin: var(--sp-3) 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 550; }
.field .help { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }
.field .error { color: var(--danger); font-weight: 500; font-size: var(--fs-sm); }

input, select {
    font: inherit;
    font-size: var(--fs-base);
    font-stretch: var(--stretch-body);
    color: var(--ink);
    background: var(--bg);
    border: var(--border) solid var(--line-strong);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    width: 100%;
    transition: border-color var(--dur-fast) var(--ease-out);
}
input::placeholder { color: var(--muted); }
input:hover, select:hover { border-color: var(--muted); }
input:focus-visible, select:focus-visible { border-color: var(--accent-hover); }
input[aria-invalid="true"] { border-color: var(--danger); }
input.inline { width: 6.5rem; padding: var(--sp-1) var(--sp-2); }

.row { display: flex; gap: var(--sp-2); align-items: center; }
.row > select { flex: 1; }
.row.end { justify-content: flex-end; }

/* ------------------------------------------------------------------ data pieces */

/* Horizontal bars, labeled directly: name, bar, amount */
.bar-list .bar-row {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr minmax(4.5rem, auto);
    align-items: center;
    gap: var(--sp-3);
    padding: .2143rem 0;
}
.bar-list .name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-list .track { height: .5714rem; background: var(--data-track); border-radius: var(--radius); overflow: hidden; }
.bar-list .fill { height: 100%; border-radius: var(--radius); background: var(--bar, var(--data-in));
                  transform-origin: left; animation: grow-x var(--dur-slow) var(--ease-out); }
.bar-list .amt { text-align: right; font-variant-numeric: tabular-nums; }
.bar-list.out .fill { --bar: var(--data-out); }

/* Vertical columns, one per day */
.col-chart { display: flex; align-items: flex-end; gap: 2px; height: 9rem; }
.col-chart .col { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: var(--sp-1); height: 100%; cursor: default; }
.col-chart .bar { background: var(--bar, var(--data-in)); border-radius: var(--radius) var(--radius) 0 0; min-height: 2px;
                  transform-origin: bottom; animation: grow-y var(--dur-slow) var(--ease-out); }
.col-chart .col:hover .bar { filter: brightness(1.15); }
.col-chart .lbl { font-size: var(--fs-sm); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

.line-chart { position: relative; }
.line-chart svg { display: block; width: 100%; height: 10rem; overflow: visible; }
.line-chart .area { fill: var(--data-fill); }
.line-chart .stroke { fill: none; stroke: var(--data-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.line-chart .cross { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.line-chart .axis { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }

.tooltip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    padding: var(--sp-1) var(--sp-2);
    background: var(--surface-3);
    border: var(--border) solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    font-size: var(--fs-sm);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tooltip strong { display: block; }

@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }

/* ------------------------------------------------------------------ empty and loading */

.empty {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) 0;
    color: var(--muted);
}
.empty::before { content: ''; width: 1.1em; height: 1.1em; background: currentColor;
                 -webkit-mask: var(--icon-quiet) center / contain no-repeat; mask: var(--icon-quiet) center / contain no-repeat; }
td.empty-cell { color: var(--muted); padding: var(--sp-4) var(--sp-3); }

/* Any element with .skeleton, or a KPI value that has not loaded yet */
.skeleton, .kpi strong:empty {
    display: block;
    min-height: 1em;
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%) 0 0 / 200% 100%;
    animation: shimmer 1.4s linear infinite;
}
.kpi strong:empty { width: 60%; height: 1.6rem; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton, .kpi strong:empty { animation: none; } }

/* ------------------------------------------------------------------ dialog and toasts */

.dialog {
    position: fixed;
    width: min(26rem, 90vw);
    padding: var(--sp-4);
    background: var(--surface-1);
    border: var(--border) solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
    animation: shell-in var(--dur) var(--ease-out);
}
.dialog h2 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-3); }
.dialog .actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.dialog .actions .btn { flex: 1; }
/* Centered with margins, not transform, so the entrance animation can own transform */
.dialog.centered { inset: 0; margin: auto; height: fit-content; }
.scrim { position: fixed; inset: 0; background: var(--backdrop); }

.toasts {
    position: fixed;
    top: var(--sp-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    z-index: 20;
}
.toast {
    --i: var(--icon-info);
    --tone: var(--info);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 16rem;
    padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
    background: var(--surface-2);
    border: var(--border) solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    animation: toast-in var(--dur) var(--ease-out);
}
.toast::before { content: ''; width: 1.15rem; height: 1.15rem; flex: none; background: var(--tone);
                 -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.toast.success { --i: var(--icon-check); --tone: var(--success); }
.toast.error { --i: var(--icon-error); --tone: var(--danger); }
.toast.warning { --i: var(--icon-warning); --tone: var(--warning); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-.5rem); } }

/* ------------------------------------------------------------------ narrow screens (windowed games, small monitors) */

@media (max-width: 900px) {
    .shell { inset: 2vh 2vw; }
    .grid { grid-template-columns: 1fr; }
    .kpi + .kpi { border-left: 0; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}