/* Sooplaa Admin — the game's own paper-and-hard-shadow language, sized for a phone. Tokens,
   palette and card treatment mirror Sooplaa.Web/wwwroot/Css/Sooplaa.css so the panel and the
   app look like one product. Written mobile-first: the base rules are the phone layout (this
   panel is used on a phone almost exclusively) and the media queries only add room back.

   Anything that is reference rather than action lives in a dialog, so each page is a bar, a
   list or a card, and a bar. */

:root {
    --red: #D72018;
    --paper: #FAF6F2;
    --paper-sunk: #F1EAE2;
    --black: #1C1C1C;
    --outer-bg: #1B1B1B;
    --ink-soft: #6B635B;
    --ink-faint: #8A8076;
    --rule: #E2D9CF;
    --green: #1F7A4D;
    --amber: #B5761A;

    --border: 2px;
    --pad: 12px;
    --gap: 10px;

    /* The two sticky bars. Written down once because each one adds its own safe-area inset on
       top, and both grow together on a wider screen. */
    --topbar-h: 48px;
    --navbar-h: 56px;

    /* Roboto sits behind Poppins on purpose: card text is where Russian shows up and Poppins
       carries no Cyrillic, so a ru translation would otherwise drop to a system face halfway
       through the library. */
    --font-ui: 'Poppins', 'Roboto', 'Segoe UI', sans-serif;

    color-scheme: light;
    font-family: var(--font-ui);
    color: var(--black);
    font-synthesis: none;
    -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--outer-bg);
    font-size: 15px;
    line-height: 1.5;
}

button, input, textarea, select { font-family: inherit; }
button, a, input, textarea, select, summary { touch-action: manipulation; }
a { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- Buttons ---------- */

/* Every tap target clears 44px, which is what makes the panel usable one-handed. */
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    cursor: pointer;
    border: var(--border) solid var(--black);
    border-radius: 10px;
    background: var(--paper);
    color: var(--black);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 2px 2px 0 var(--black);
    transition: transform .1s ease, box-shadow .1s ease;
}

button:active:enabled { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--black); }
button:disabled { opacity: .4; box-shadow: none; cursor: default; }
button.primary { background: var(--red); color: #fff; }
button.wide { width: 100%; }

button.quiet {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--ink-soft);
    font-weight: 600;
}

button.quiet:active:enabled { transform: none; box-shadow: none; color: var(--red); }

/* ---------- Top bar ---------- */

/* The sheet. On a phone it is the whole screen — every pixel of a 375px viewport is working
   space — and from tablet up it becomes the app's .paper-container: cream stock inside the
   dark frame, hard ink border, hard offset shadow. */
.admin-shell {
    max-width: 720px;
    min-height: 100dvh;
    margin: 0 auto;
    background: var(--paper);
    display: flex;
    flex-direction: column;
}

/* The bars carry the iOS insets themselves rather than the body, so the notch and the home
   indicator sit on cream paper and the sticky edges still reach the true viewport edge. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
    background: var(--paper);
    border-bottom: var(--border) solid var(--black);
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { display: block; }

/* Three pills, filled when current. Short enough that all three plus the mark and the account
   fit a 375px bar without a menu. */
.tabs { display: flex; gap: 4px; min-width: 0; }

.tabs a {
    padding: 6px 10px;
    white-space: nowrap;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    text-decoration: none;
}

.tabs a.active { background: var(--black); color: var(--paper); }

/* The signed-in address is context, not navigation: it is one initial here and the whole
   address inside the dialog behind it. */
.avatar {
    flex: none;
    width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 999px;
    box-shadow: none;
    font-size: 13px;
}

button.icon {
    width: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--ink-soft);
    font-size: 15px;
}

button.icon:active:enabled { transform: none; box-shadow: none; background: var(--paper-sunk); }

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--pad);
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
}

/* ---------- The card ---------- */

/* One compact strip above the card: how far through the library you are, and the language
   switches. Both are glanceable and neither costs a heading. */
.meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-soft);
}

.counter { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--black); }

.progress {
    flex: 1 1 40px;
    height: 6px;
    min-width: 40px;
    background: var(--paper-sunk);
    border: 1.5px solid var(--black);
    border-radius: 999px;
    overflow: hidden;
}

.progress i { display: block; height: 100%; background: var(--red); }

/* EN and TR are on by default and the rest are one tap away, so the pair actually being
   proofread is always in front of you without a menu. */
.lang-row { display: flex; gap: 4px; flex-wrap: wrap; }

.lang {
    min-height: 30px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1.5px solid var(--black);
    background: var(--paper);
    box-shadow: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--ink-soft);
}

.lang.on { background: var(--black); color: var(--paper); }
.lang.missing { opacity: .45; border-style: dashed; }

.card {
    background: #fff;
    border: 3px solid var(--black);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--black);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.type {
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--red);
}

.status {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}

.status.approved { color: var(--green); }
.status.pending { color: var(--amber); }

/* One block per shown language. The first is the size the card is read at; the others are the
   same text a step down, so the eye lands on the translation being checked without losing the
   reference above it. */
.translation + .translation { border-top: 1px dashed var(--rule); padding-top: 10px; }

.translation .tag {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: var(--ink-faint);
    margin-bottom: 3px;
}

.translation p {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.card-top + .translation p { font-size: 19px; font-weight: 600; }

.translation p.absent {
    color: var(--ink-faint);
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
}

/* ---------- Bottom bar ---------- */

/* Previous, the two panels and next live under the thumb and stay there while the card
   scrolls past. Nothing on this page costs a scroll to reach. */
.bottombar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: auto;
    flex: none;
    display: grid;
    grid-template-columns: 46px 1fr 1fr 46px;
    align-items: center;
    gap: 6px;
    height: calc(var(--navbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
    background: var(--paper);
    border-top: var(--border) solid var(--black);
}

.bottombar button { width: 100%; min-height: 40px; padding: 6px 4px; font-size: 13px; }
.bottombar .step { font-size: 16px; }

.count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--black);
    color: var(--paper);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.count.zero { background: transparent; color: var(--ink-faint); }

/* Two states worth spotting without opening the panel behind them. */
.dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.dot.flag { background: var(--amber); }
.dot.draft { background: var(--red); }

/* ---------- Dialogs ---------- */

/* A bottom sheet on a phone, a centred box from tablet up. The browser supplies the backdrop
   and the top layer, so this clears both sticky bars without a z-index fight. */
.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}

.sheet::backdrop { background: rgba(0, 0, 0, .55); }

.sheet-inner {
    display: flex;
    flex-direction: column;
    max-height: 90dvh;
    background: var(--paper);
    border-top: var(--border) solid var(--black);
    border-radius: 14px 14px 0 0;
}

.sheet-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
}

.sheet-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    font-size: 13px;
}

.sheet-body > :first-child { margin-top: 0; }

/* ---------- Fields, chips, text ---------- */

.field { margin-bottom: 12px; }

.field > .label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 4px;
}

.field p { margin: 0; line-height: 1.55; color: var(--ink-soft); overflow-wrap: anywhere; }

/* Taxonomy values as pills. A definition list with a fixed label column wrapped badly at phone
   width; a wrapping chip row does not. */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }

.chips span {
    border: 1.5px solid var(--rule);
    border-radius: 999px;
    padding: 1px 8px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.chips span.none { border-style: dashed; color: var(--ink-faint); font-weight: 400; }
.chips span.flag { border-color: var(--red); color: var(--red); }

/* Traits as four short meters: the numbers matter less than whether a card is hot or mild, and
   a bar answers that at a glance on a small screen. */
.traits {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 5px 8px;
    margin-bottom: 14px;
    font-size: 11px;
    color: var(--ink-soft);
}

.traits .bar {
    height: 7px;
    background: var(--paper-sunk);
    border: 1.5px solid var(--black);
    border-radius: 999px;
    overflow: hidden;
}

.traits .bar i { display: block; height: 100%; background: var(--red); }
.traits .value { font-weight: 700; font-variant-numeric: tabular-nums; }

.muted { color: var(--ink-soft); }

.hint {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.hint.warn { color: var(--amber); }

.mono {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

summary { cursor: pointer; font-size: 12px; font-weight: 700; padding: 6px 0; color: var(--ink-soft); }

/* ---------- Forms ---------- */

input, textarea, select {
    width: 100%;
    background: #fff;
    border: var(--border) solid var(--black);
    border-radius: 10px;
    padding: 9px 10px;
    line-height: 1.4;
    color: var(--black);
    /* 16px keeps iOS Safari from zooming the page when a field takes focus. */
    font-size: 16px;
}

select { min-height: 44px; padding: 8px 10px; }
textarea { resize: vertical; }
::placeholder { color: var(--ink-faint); }
form > * + * { margin-top: 8px; }

.pair { display: flex; gap: 8px; }
.pair > * { flex: 1; min-width: 0; }
.pair > button { flex: 0 0 auto; }

.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 700; }
.check input { width: 20px; height: 20px; flex: none; }

/* The dictation control sits on its own line above the form's closing row: while recording it
   carries a running clock and a discard, and folding that into .row-end left the Add button
   with no room at phone width. */
.dictate { display: flex; gap: 8px; flex-wrap: wrap; }
.dictate button { min-height: 40px; padding: 6px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }

.row-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.row-end .hint { margin: 0; margin-right: auto; }

/* Only the ones closing a form need to be pushed off the field above; a page-level row takes
   its spacing from .main's own gap. */
form .row-end { margin-top: 10px; }

.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.actions button { flex: 1 1 auto; min-height: 40px; padding: 6px 10px; font-size: 13px; }

/* ---------- Lists ---------- */

/* A whole row is the tap target; its actions are in the dialog it opens. */
.listrow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    text-align: left;
    background: #fff;
    border-color: var(--rule);
    box-shadow: none;
    font-weight: 500;
    padding: 10px 12px;
}

.listrow-top { display: flex; align-items: center; gap: 8px; }
.listrow-top strong { font-size: 14px; overflow-wrap: anywhere; }
.listrow small { font-size: 11px; color: var(--ink-faint); overflow-wrap: anywhere; }

/* ---------- Comments ---------- */

.comment { border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 10px; }

.comment-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 10px;
    color: var(--ink-faint);
}

.comment-meta strong { color: var(--ink-soft); }
.comment p { margin: 3px 0 0; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Notices, sign-in, empty ---------- */

.notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    background: #FDECE9;
    border: var(--border) solid var(--red);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #8E1E17;
}

.notice button { min-height: 36px; padding: 4px 12px; font-size: 12px; }
ul.notice { display: block; padding-left: 28px; }

.login { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.login img { display: block; }
.login form { width: 100%; max-width: 320px; }

.empty { margin: auto 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
.empty p { margin: 0 0 12px; }

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

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    padding: 12px;
    background: var(--red);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

#blazor-error-ui a { color: #fff; }

/* From tablet up there is room for the sheet to sit inside the dark frame with the app's hard
   shadow, and for the card to breathe. The bars stay sticky — the layout is the same one, just
   roomier — and the dialogs become centred boxes. */
@media (min-width: 700px) {
    :root {
        --pad: 20px;
        --gap: 14px;
        --topbar-h: 60px;
        --navbar-h: 64px;
    }

    /* The sheet becomes a fixed frame and the card column scrolls inside it, the way
       .paper-container does in the app. On a phone the page itself scrolls instead, so the
       browser chrome can still collapse and give the card the height back. */
    body { height: 100dvh; overflow: hidden; padding: 16px; }

    .admin-shell {
        height: 100%;
        min-height: 0;
        border: 3px solid var(--black);
        border-radius: 14px;
        box-shadow: 6px 6px 0 #000;
    }

    .main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

    /* The sheet's rounded corners, repeated on the two bars. Clipping the shell instead would
       make it a scroll container and the bars would stop sticking. */
    .topbar { border-radius: 11px 11px 0 0; }
    .bottombar { border-radius: 0 0 11px 11px; }

    .card { padding: 22px; }
    .card-top + .translation p { font-size: 23px; }
    .translation p { font-size: 19px; }

    .sheet {
        top: 50%;
        bottom: auto;
        left: 50%;
        right: auto;
        width: min(560px, calc(100vw - 32px));
        transform: translate(-50%, -50%);
    }

    .sheet-inner { max-height: 80dvh; border: var(--border) solid var(--black); border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}