/* 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 on larger screens. */

: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: 60px;

    /* 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;
    --font-display: 'Luckiest Guy', 'Poppins', cursive;

    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;
    font-size: 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 {
    min-height: 44px;
    padding: 10px 14px;
    cursor: pointer;
    border: var(--border) solid var(--black);
    border-radius: 10px;
    background: var(--paper);
    color: var(--black);
    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.quiet {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ink-soft);
    font-weight: 600;
    padding: 8px 10px;
}

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

.text-button {
    min-height: 0;
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    font-size: inherit;
    font-weight: 600;
    color: var(--red);
    text-decoration: underline;
}

/* ---------- Shell ---------- */

/* The paper 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: baseline;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: .5px;
    text-decoration: none;
    color: var(--black);
}

.brand span {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
    background: var(--red);
    border-radius: 4px;
    padding: 2px 5px;
}

.account {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 12px;
    color: var(--ink-soft);
}

/* The address is context, not an action: it yields its width to the sign-out button and
   disappears entirely on a narrow phone. */
.account .who {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* ---------- 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;
    justify-content: space-between;
    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 60px;
    height: 6px;
    min-width: 48px;
    background: var(--paper-sunk);
    border: 1.5px solid var(--black);
    border-radius: 999px;
    overflow: hidden;
}

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

/* Language switches. EN and TR are on by default and the rest are one tap away, so the
   pair I actually proofread is always in front of me without a menu. */
.lang-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}

.lang-chip {
    min-height: 36px;
    padding: 4px 14px;
    border-radius: 999px;
    border: var(--border) solid var(--black);
    background: var(--paper);
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--ink-soft);
}

.lang-chip.on {
    background: var(--black);
    color: var(--paper);
}

.lang-chip.missing {
    opacity: .45;
    border-style: dashed;
}

.review-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: 12px;
}

.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
}

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

.status {
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    padding: 2px 8px;
}

.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. */
.translations {
    display: flex;
    flex-direction: column;
}

.translation + .translation {
    border-top: 1px dashed var(--rule);
    margin-top: 10px;
    padding-top: 10px;
}

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

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

.translation:first-child p {
    font-size: 19px;
    font-weight: 600;
}

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

.card-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 2px;
    border-top: 1px solid var(--rule);
    font-size: 11px;
    color: var(--ink-faint);
}

.card-bottom span:last-child {
    text-align: right;
    overflow-wrap: anywhere;
}

/* ---------- Details ---------- */

.panel {
    border: var(--border) solid var(--black);
    border-radius: 10px;
    background: var(--paper);
    overflow: hidden;
}

/* The disclosure header is a real button rather than a <summary>: the panel's open state is
   component state (a card with notes opens itself, an unsaved draft must not be hidden), and
   a re-render must not fight the element's own toggling. */
.panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
}

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

/* A caret drawn in CSS rather than a glyph, so it turns with the disclosure and needs no
   icon font. */
.panel-head::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}

.panel-head[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

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

.panel-head .count.zero {
    background: transparent;
    color: var(--ink-faint);
    font-weight: 600;
}

.panel-head .flag-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--amber);
}

.panel-body {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
}

/* 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: 12px;
}

.traits .name {
    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-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

.field {
    margin-bottom: 10px;
}

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

/* 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: 2px 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);
}

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

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

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

.notes textarea {
    min-height: 76px;
}

.comment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.comment-actions .muted {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.draft-hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--amber);
}

.empty-notes {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--ink-faint);
}

.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;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.notes .load-older {
    width: 100%;
    margin-top: 12px;
    font-size: 12px;
}

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

textarea {
    resize: vertical;
}

textarea::placeholder {
    color: var(--ink-faint);
}

/* ---------- Bottom navigation ---------- */

/* Previous / next live under the thumb and stay there while the card, its details and its
   comments scroll past. Reaching the next card never costs a scroll. */
.card-navigation {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: auto;
    flex: none;
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    gap: 8px;
    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);
}

.card-navigation button {
    width: 100%;
    padding: 10px 8px;
}

.save-state {
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    color: var(--ink-faint);
    overflow-wrap: anywhere;
}

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

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

.notice button {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12px;
}

.login-panel {
    margin: auto 0;
    padding: 24px 0;
}

.login-panel h1 {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .5px;
    margin: 8px 0 6px;
}

.login-panel .lede {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--ink-soft);
}

.eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--red);
}

.login-panel label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 5px;
}

.login-panel .field-row {
    margin-bottom: 12px;
}

.login-panel button {
    width: 100%;
    margin-top: 8px;
}

.empty {
    margin: auto 0;
    text-align: center;
    padding: 32px 16px;
}

.empty h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 6px;
}

.empty p {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--ink-soft);
}

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

.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;
}

/* Very narrow phones: the signed-in address is the first thing to go. */
@media (max-width: 380px) {
    .account .who {
        display: none;
    }
}

/* 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. */
@media (min-width: 700px) {
    :root {
        --pad: 20px;
        --gap: 14px;
        --topbar-h: 60px;
        --navbar-h: 68px;
    }

    /* 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;
    }

    .card-navigation {
        border-radius: 0 0 11px 11px;
    }

    .brand {
        font-size: 24px;
    }

    .review-card {
        padding: 22px;
    }

    .translation:first-child p {
        font-size: 23px;
    }

    .translation p {
        font-size: 19px;
    }

    .card-navigation button {
        padding: 12px;
    }
}

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