/* The owner pages: the sign in card, the access code page, the sample opener and the dashboard. Colours, the
   paper note and the peeking panda come from brand.css; this file only adds what the owner pages need. */

:root {
    --line: rgba(243, 227, 200, 0.08);
    --raise: rgba(255, 255, 255, 0.035);
    --ok: #9cc98a;
    --radius: 22px;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    background: radial-gradient(ellipse at 50% 0%, var(--bg-1) 0%, var(--bg-2) 70%) fixed, var(--bg-2);
    color: var(--cream);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

a {
    color: inherit;
}

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

/* The small brand: plain letters, no unfold. */
.brand-sm {
    font: 700 26px var(--font);
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 1;
}

.brand-sm .g {
    color: var(--gold);
}

.brand-sm .p {
    color: var(--pink);
}

.brand-sm .c {
    color: var(--cream);
}

/* ---------- sign in ---------- */

.login {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 96px 16px 32px;
}

.login-wrap {
    position: relative;
    width: min(400px, 100%);
}

.login-card {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #2a1d14 0%, var(--card) 100%);
    border: 1px solid var(--card-edge);
    border-radius: 26px;
    padding: 30px 22px 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.login-card .brand-sm {
    text-align: center;
    font-size: 34px;
}

.login-card h1 {
    margin: 10px 0 2px;
    text-align: center;
    font: 500 20px var(--font);
}

.login-card .sub {
    margin: 0 0 22px;
    text-align: center;
    text-wrap: balance;
    color: var(--faint);
    font-size: 15px;
}

.field {
    margin-bottom: 14px;
}

.field label {
    display: block;
    font-weight: 500;
    margin: 0 0 6px;
}

.field input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    font: 400 17px var(--font);
    color: var(--cream);
    background: rgba(255, 255, 255, 0.045);
    border: 1.5px solid rgba(243, 227, 200, 0.16);
    border-radius: 14px;
}

.field input:hover {
    border-color: rgba(233, 187, 82, 0.45);
}

.field input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(233, 187, 82, 0.18);
}

.gold-btn {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    font: 600 18px var(--font);
    color: var(--ink);
    background: radial-gradient(circle at 35% 30%, #fbe8a6 0%, #e6b951 55%, #c9952f 100%);
    box-shadow: 0 6px 18px rgba(233, 187, 82, 0.22), inset 0 -2px 0 rgba(120, 80, 20, 0.35);
}

a.gold-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.gold-btn:hover {
    filter: brightness(1.05);
}

.gold-btn[disabled] {
    opacity: 0.65;
    cursor: progress;
}

.inline-note {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 15px;
    background: var(--paper);
    color: var(--paper-ink);
}

.inline-note.err {
    background: #f2c9bc;
    color: #5a2216;
}

.login-foot {
    margin-top: 18px;
    text-align: center;
    color: var(--faint);
    font-size: 14px;
    line-height: 1.7;
}

.login-foot a {
    color: var(--muted);
    text-decoration-color: rgba(201, 176, 140, 0.4);
}

/* ---------- access code ---------- */

/* The panda dozes over the card and wakes when the code field has focus or a code. */
.code-wrap .peek {
    transform: translateX(-50%) translateY(5px);
    transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.code-wrap.awake .peek {
    transform: translateX(-50%) translateY(0);
}

.code-wrap .lid {
    transform-box: fill-box;
    transform-origin: top;
    transform: scaleY(0.55);
    transition: transform 0.3s;
}

.code-wrap.awake .lid {
    transform: scaleY(0);
}

.code-wrap .pupil {
    transition: transform 0.25s ease-out;
}

.field input.code {
    min-height: 54px;
    font: 600 18px var(--font);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.field input.code::placeholder {
    color: rgba(243, 227, 200, 0.22);
}

.field input.bad {
    border-color: var(--warn);
    box-shadow: 0 0 0 3px rgba(239, 143, 122, 0.12);
}

@media (max-width: 420px) {
    .field input.code {
        font-size: 16px;
        letter-spacing: 0.5px;
        padding: 0 10px;
    }
}

.field .hint {
    margin: 6px 2px 0;
    font-size: 13px;
    color: var(--faint);
}

/* ---------- dashboard ---------- */

.dash {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: 0 16px 48px;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 12px;
}

.topbar .who {
    margin-left: auto;
    min-width: 0;
    text-align: right;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.2;
}

.topbar .who strong {
    display: block;
    color: var(--cream);
    font-weight: 500;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar form {
    margin: 0 0 0 auto;
}

.topbar .who:not([hidden]) + form {
    margin-left: 0;
}

.topbar > a.ghost {
    flex: none;
}

.ghost {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    border: 1.5px solid rgba(243, 227, 200, 0.16);
    color: var(--muted);
    font-weight: 500;
    font-size: 15px;
}

.ghost:hover {
    border-color: rgba(233, 187, 82, 0.45);
    color: var(--cream);
}

a.ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.gold-btn.sm {
    width: auto;
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
    border-radius: 12px;
}

.ghost[disabled] {
    opacity: 0.65;
    cursor: progress;
}

.device {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.device-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--faint);
    flex: none;
}

.dot.on {
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(156, 201, 138, 0.18);
}

.live-tag {
    color: var(--faint);
}

.device a {
    color: var(--gold);
    font-weight: 500;
    text-underline-offset: 3px;
    margin-left: 4px;
}

/* The sandbox and sample strips, the same family as the top song. */
.strip {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    padding: 10px 12px 10px 14px;
    border-radius: 16px;
    background: rgba(233, 187, 82, 0.1);
    border: 1px solid rgba(233, 187, 82, 0.25);
}

.strip .tx {
    flex: 1;
    min-width: 220px;
    font-size: 15px;
    color: var(--muted);
}

.strip .tx strong {
    color: var(--cream);
    font-weight: 500;
}

.strip .acts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* The side by side switch: a judge's sandbox on a desktop only, and inside the side by side view, where
   the dashboard's frame is narrow. */
.split-switch {
    display: none;
    position: relative;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--cream);
    font: 500 14px var(--font);
    white-space: nowrap;
    user-select: none;
}

@media (min-width: 1100px) {
    .split-switch {
        display: inline-flex;
    }
}

html.embedded .split-switch {
    display: inline-flex;
}

.split-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.split-switch .track {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: rgba(243, 227, 200, 0.14);
    border: 1px solid var(--card-edge);
    position: relative;
    transition: background 0.2s;
}

.split-switch .track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cream);
    transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.split-switch input:checked + .track {
    background: var(--gold);
}

.split-switch input:checked + .track::after {
    transform: translateX(16px);
    background: var(--ink);
}

.split-switch input:focus-visible + .track {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Inside the side by side view the tip page and the panda are on screen, so their links go. */
html.embedded #sandbox-tip,
html.embedded #watch,
html.embedded .demo-tip {
    display: none;
}

.strip.sample {
    background: rgba(243, 227, 200, 0.05);
    border-color: rgba(243, 227, 200, 0.14);
}

.strip.sample .badge {
    color: var(--muted);
}

/* The model is resting: a calm strip with the sleeping panda. */
.resting {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px 10px 8px;
    border-radius: 16px;
    background: var(--raise);
    border: 1px solid var(--line);
}

.resting svg {
    width: 66px;
    height: 37px;
    flex: none;
}

.resting strong {
    display: block;
    font-weight: 500;
}

.resting span {
    font-size: 14px;
    color: var(--faint);
}

.page-note {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 15px;
    background: var(--paper);
    color: var(--paper-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-note.err {
    background: #f2c9bc;
    color: #5a2216;
}

.page-note .retry {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1.5px solid currentColor;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
}

.loading-line {
    margin: 10px 2px 0;
    color: var(--faint);
    font-size: 14px;
}

/* today */
.today {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.stat {
    min-width: 0;
    background: var(--raise);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px 14px;
}

.stat .k {
    font-size: 13px;
    color: var(--faint);
}

.stat .v {
    font: 600 24px var(--font);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.stat.money .v {
    color: var(--gold);
}

.stat .v.quiet {
    font: 500 15px var(--font);
    color: var(--muted);
    padding-top: 6px;
}

.stat.busy-card {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.busy-card .v {
    font-size: 22px;
    white-space: nowrap;
}

.busy-card .busy-text {
    flex: none;
}

.busy-card .sub {
    font-size: 13px;
    color: var(--muted);
}

.bars-wrap {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    text-align: center;
}

/* A long day has many hours; the bars narrow down to 3 px before the text gives way. */
.bars {
    display: flex;
    align-items: flex-end;
    gap: clamp(2px, 1vw, 4px);
    height: 44px;
}

.bars span {
    flex: 0 1 9px;
    min-width: 3px;
    height: var(--h, 0%);
    min-height: 2px;
    border-radius: 3px 3px 1px 1px;
    background: rgba(243, 227, 200, 0.16);
}

.bars span.peak {
    background: var(--gold);
    box-shadow: 0 0 10px rgba(233, 187, 82, 0.45);
}

.bars-wrap .ax {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--faint);
    margin-top: 3px;
}

.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.grid > * {
    min-width: 0;
}

@media (min-width: 900px) {
    /* Tips come first in the page, so a phone shows them right after today's numbers; on a laptop they
       sit on the right of the notes, requests and hidden messages. */
    .grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
    }

    .grid > .side {
        grid-column: 1;
        grid-row: 1;
    }

    .grid > .tips-panel {
        grid-column: 2;
        grid-row: 1;
    }

    .today {
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
    }

    .stat.busy-card {
        grid-column: auto;
    }
}

.panel {
    background: linear-gradient(180deg, #261a12 0%, var(--card) 100%);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
}

.side > .panel {
    margin-top: 18px;
}

.panel-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}

.panel-head h2 {
    margin: 0;
    font: 600 19px var(--font);
}

.panel-head .count {
    color: var(--faint);
    font-size: 14px;
}

.derived {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--faint);
}

/* the panda's notes: the AI daily summary on kraft paper */
.notes-wrap {
    margin-top: 70px;
}

/* No notes yet: the card stands alone, the tips' empty state already has a panda. */
.notes-wrap.no-notes {
    margin-top: 0;
}

.notes-wrap.no-notes .peek,
.notes-wrap.no-notes .paws {
    display: none;
}

/* Ruled paper: every line of text is one --rule tall, with no margins between them, and the ruling repeats
   every --rule from where the text starts. The ink is the last pixel of each line, below any font's
   descenders, so where the font puts its baseline (other metrics on Windows, others again before the web
   font loads) never moves text onto it, and the rounding of page zoom has room to spare. */
.kraft {
    --rule: 30px;
    --rule-top: 22px;
    padding: var(--rule-top) 18px 8px;
    background-image:
        linear-gradient(var(--paper), var(--paper)),
        repeating-linear-gradient(
            180deg,
            transparent 0 calc(var(--rule) - 1px),
            rgba(90, 60, 30, 0.14) calc(var(--rule) - 1px) var(--rule)
        );
    background-size: 100% var(--rule-top), auto;
    background-position: 0 0, 0 var(--rule-top);
    background-repeat: no-repeat, repeat;
}

.kraft h2 {
    margin: 0;
    font: 600 18px var(--font);
    line-height: var(--rule);
    color: #3b2414;
}

.kraft ul {
    margin: 0;
    padding: 0 0 0 18px;
    line-height: var(--rule);
    overflow-wrap: anywhere;
}

.kraft .waiting {
    margin: 0;
    line-height: var(--rule);
}

/* Centred, so the chip never makes a line taller than --rule, whatever the font's baseline. */
.kraft .sig {
    margin: 0;
    min-height: var(--rule);
    line-height: var(--rule);
    font-size: 13px;
    color: #7a5a3e;
    display: flex;
    gap: 0 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* 18 px of line and 4 px of padding, and margins making up the rest of --rule, so a chip the signature
   wraps onto a line of its own still makes that line one --rule tall. */
.ai-chip {
    font-size: 12px;
    line-height: 18px;
    padding: 2px 8px;
    margin: calc((var(--rule) - 22px) / 2) 0;
    border-radius: 999px;
    background: rgba(90, 60, 30, 0.14);
    color: #5a3b22;
}

/* requests */
.top-song {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(233, 187, 82, 0.1);
    border: 1px solid rgba(233, 187, 82, 0.25);
    overflow-wrap: anywhere;
}

.top-song svg {
    width: 20px;
    height: 20px;
    color: var(--gold);
    flex: none;
}

.top-song .t {
    font-size: 13px;
    color: var(--muted);
    display: block;
}

.top-song strong {
    font-weight: 600;
    color: var(--cream);
}

.req {
    list-style: none;
    margin: 0;
    padding: 0;
}

.req li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
}

.req li:first-child {
    border-top: 0;
}

.req .times {
    flex: none;
    min-width: 38px;
    height: 30px;
    padding: 0 8px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 15px;
    background: rgba(243, 227, 200, 0.08);
    color: var(--cream);
}

.req .times.hot {
    background: rgba(233, 187, 82, 0.16);
    color: var(--gold);
}

.req .what {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.req .when {
    flex: none;
    font-size: 13px;
    color: var(--faint);
}

/* hidden messages */
.flag-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.flag-head svg {
    width: 66px;
    height: 46px;
    flex: none;
}

.flag-head p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.flagged {
    list-style: none;
    margin: 0;
    padding: 0;
}

.flagged li {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.flagged .row1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.flagged .amt {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.flagged .why {
    color: var(--warn);
    min-width: 0;
    overflow-wrap: anywhere;
}

.flagged .when {
    margin-left: auto;
    flex: none;
    font-size: 13px;
    color: var(--faint);
}

.detail .actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.flagged .row2 {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.hidden-msg {
    font-size: 14px;
    color: var(--faint);
    font-style: italic;
}

/* A hidden message the owner asked to read: in memory only, gone after a reload. */
.revealed {
    flex: 1 1 100%;
    background: rgba(239, 143, 122, 0.07);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--cream);
    overflow-wrap: anywhere;
}

.revealed small {
    display: block;
    font-size: 12px;
    color: var(--faint);
}

.moderate {
    justify-self: start;
}

/* tips */
.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    margin: 6px -2px 0;
    scrollbar-width: none;
}

.chips::-webkit-scrollbar {
    display: none;
}

.chip {
    flex: none;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    cursor: pointer;
    background: transparent;
    border: 1.5px solid rgba(243, 227, 200, 0.14);
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
}

.chip[aria-pressed="true"] {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
}

.tips {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tip {
    border-top: 1px solid var(--line);
}

.tip:first-child {
    border-top: 0;
}

.tip-head {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: start;
    padding: 12px 2px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.tip-head:hover .msg {
    color: var(--cream);
}

.kind {
    grid-row: span 2;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(243, 227, 200, 0.07);
}

.kind svg {
    width: 20px;
    height: 20px;
}

.k-WARM {
    background: rgba(231, 166, 193, 0.15);
    color: var(--pink);
}

.k-PLAYFUL {
    background: rgba(233, 187, 82, 0.15);
    color: var(--gold);
}

.k-REQUEST {
    background: rgba(201, 176, 140, 0.15);
    color: var(--muted);
}

.k-PLAIN {
    background: rgba(143, 122, 94, 0.14);
    color: var(--faint);
}

.k-FLAG {
    background: rgba(239, 143, 122, 0.14);
    color: var(--warn);
}

.line1 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
    min-width: 0;
}

.kname {
    font-weight: 500;
}

.lang {
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(243, 227, 200, 0.08);
    color: var(--muted);
}

.unhid {
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(233, 187, 82, 0.12);
    color: var(--gold);
}

.badge {
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
}

.badge.refunded {
    color: var(--faint);
}

.badge.pending {
    color: var(--gold);
}

.badge.reversed {
    color: var(--warn);
}

.badge.demo {
    color: var(--muted);
    border-style: dashed;
}

.badge.unread {
    color: var(--faint);
    border-style: dashed;
}

.badge.sandbox {
    color: var(--gold);
    white-space: nowrap;
}

/* The public sample: write buttons stay, switched off, with a lock that says why. */
.ro-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.ro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--faint);
}

.ro svg {
    width: 13px;
    height: 13px;
}

.ro-row .ghost[disabled],
.ro-row .refund-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ro-row .ghost[disabled]:hover {
    border-color: rgba(243, 227, 200, 0.16);
    color: var(--muted);
}

.ro-row .refund-btn[disabled]:hover {
    background: transparent;
}

/* A sample tip in a sandbox: no refund, a way to send a real one instead. */
.demo-note {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.demo-note span {
    flex: 1;
    min-width: 180px;
}

.amount {
    font: 600 17px var(--font);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.tip.refunded .amount {
    color: var(--faint);
    text-decoration: line-through;
}

.msg {
    grid-column: 2 / 3;
    color: var(--muted);
    font-size: 15px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.tip-head[aria-expanded="true"] .msg {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
}

.msg.none {
    color: var(--faint);
    font-style: italic;
}

.time {
    grid-column: 3;
    grid-row: 2;
    font-size: 13px;
    color: var(--faint);
    text-align: right;
    white-space: nowrap;
}

.trans {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 0 12px;
    padding: 0 2px 12px;
}

/* 12 px of padding above and below a 20 px line make a 44 px target; the same negative margins keep the
   row as tall as the line, the top of the target reaching into the row's own bottom padding. */
.translate {
    grid-column: 2 / 3;
    justify-self: start;
    margin: -12px 0;
    padding: 12px 0;
    line-height: 20px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--gold);
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.english {
    grid-column: 2 / 3;
    margin-top: 16px;
    font-size: 15px;
    color: var(--cream);
    overflow-wrap: anywhere;
}

.english small {
    display: block;
    font-size: 12px;
    color: var(--faint);
}

/* In a revealed message the translation sits under the text, without the tip row's icon column. */
.revealed .trans {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 0 4px;
}

.revealed .translate,
.revealed .english {
    grid-column: 1;
}

.revealed .english {
    margin-top: 12px;
    font-size: 14px;
}

.detail {
    padding: 0 2px 14px 50px;
    display: grid;
    gap: 10px;
}

.facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0;
    font-size: 14px;
}

.facts dt {
    color: var(--faint);
}

.facts dd {
    margin: 0;
    color: var(--cream);
}

.owner-note {
    background: rgba(243, 227, 200, 0.06);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.owner-note small {
    display: block;
    color: var(--faint);
    font-size: 12px;
}

.refund-btn {
    justify-self: start;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    border: 1.5px solid rgba(239, 143, 122, 0.45);
    color: var(--warn);
    font-weight: 500;
    font-size: 15px;
}

.refund-btn:hover {
    background: rgba(239, 143, 122, 0.08);
}

.confirm {
    background: rgba(239, 143, 122, 0.07);
    border: 1px solid rgba(239, 143, 122, 0.3);
    border-radius: 14px;
    padding: 12px;
    font-size: 15px;
}

.confirm p {
    margin: 0 0 10px;
}

.btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.danger {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    background: var(--warn);
    color: #2a0f08;
    font-weight: 600;
    font-size: 15px;
}

.danger[aria-disabled="true"],
.ghost[aria-disabled="true"] {
    opacity: 0.65;
    cursor: progress;
}

.danger[disabled] {
    opacity: 0.65;
    cursor: progress;
}

.result {
    margin: 0;
    font-size: 14px;
}

.result.ok {
    color: var(--ok);
}

.result.wait {
    color: var(--gold);
}

.result.err {
    color: var(--warn);
}

.more {
    margin-top: 8px;
    width: 100%;
}

/* a live tip arriving */
@keyframes arrive {
    0% {
        opacity: 0;
        transform: translateY(-10px);
        background: rgba(233, 187, 82, 0.18);
    }
    30% {
        opacity: 1;
        transform: none;
        background: rgba(233, 187, 82, 0.18);
    }
    100% {
        background: transparent;
    }
}

.tip.new {
    animation: arrive 2.4s ease-out;
    border-radius: 14px;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 32px);
    background: #2e2016;
    border: 1px solid rgba(233, 187, 82, 0.35);
    color: var(--cream);
    border-radius: 999px;
    padding: 10px 16px 10px 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    font-size: 15px;
    animation: toast-in 0.3s ease-out;
}

.toast-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 16px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

.toast .coin {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fbe8a6, #e6b951 55%, #c9952f);
}

/* continue on another device */
.scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(10, 7, 5, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 16px 24px;
    overflow-y: auto;
}

.sheet-wrap {
    position: relative;
    width: min(380px, 100%);
    margin: auto;
}

.sheet {
    position: relative;
    z-index: 1;
    text-align: center;
    background: linear-gradient(180deg, #2a1d14 0%, var(--card) 100%);
    border: 1px solid var(--card-edge);
    border-radius: 26px;
    padding: 26px 20px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.sheet:focus {
    outline: none;
}

.sheet h2 {
    margin: 0 0 4px;
    font: 600 20px var(--font);
}

.sheet .sub {
    margin: 0 0 16px;
    color: var(--faint);
    font-size: 15px;
}

.qr-card {
    display: inline-block;
    padding: 14px;
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(90, 60, 30, 0.25);
    transform: rotate(-1deg);
}

.qr-card canvas {
    display: block;
    width: 188px;
    height: 188px;
    image-rendering: pixelated;
}

.qr-card.dead {
    opacity: 0.25;
}

.link-row {
    display: flex;
    gap: 8px;
    margin: 16px 0 10px;
}

.link-row input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    font: 400 14px var(--font);
    color: var(--muted);
    background: rgba(255, 255, 255, 0.045);
    border: 1.5px solid rgba(243, 227, 200, 0.16);
    border-radius: 12px;
}

.countdown {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

.countdown strong {
    color: var(--cream);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.countdown button {
    min-height: 44px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--gold);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.careful {
    margin: 10px 0 14px;
    font-size: 13px;
    color: var(--faint);
}

.sheet-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* test payment details: label, value and its Copy button per row, grouped like the PayPal card form */
.pay-group {
    margin: 0 0 14px;
    text-align: left;
}

.pay-group h3 {
    margin: 0 0 6px;
    font: 600 15px var(--font);
    color: var(--cream);
}

.pay-rows {
    margin: 0;
    border: 1px solid var(--card-edge);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.pay-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 12px;
}

.pay-row + .pay-row {
    border-top: 1px solid var(--card-edge);
}

.pay-row dt {
    font-size: 13px;
    color: var(--faint);
}

.pay-row dd {
    margin: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pay-value {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--cream);
    font-size: 15px;
    user-select: all;
}

.pay-row .ghost {
    flex: none;
    min-width: 68px;
    padding: 0 12px;
    font-size: 14px;
}

/* empty states */
.empty {
    text-align: center;
    padding: 18px 8px 8px;
    color: var(--muted);
}

.empty svg {
    width: 132px;
    height: 74px;
    display: block;
    margin: 0 auto 6px;
}

.empty strong {
    display: block;
    color: var(--cream);
    font-weight: 500;
    font-size: 17px;
}

.empty p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--faint);
}

.empty .eyes {
    animation: peek-blink 5s infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .tip.new,
    .toast,
    .empty .eyes,
    .peek .eyes {
        animation: none;
    }

    .code-wrap .peek,
    .code-wrap .lid,
    .code-wrap .pupil,
    .split-switch .track,
    .split-switch .track::after {
        transition: none;
    }
}