/* SelfUse business pages: black, white and grey frosted glass. Colour appears only in log outcomes.
   The game cards live in _game_cards_style.html so the list still works without this file. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #dcdcdc; }
html.dark { background: #171717; }
a { color: inherit; text-decoration: none; }
a, button, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }

:root {
    color-scheme: light;
    --ink: #111; --soft: #4f4f4f; --rule: rgba(0, 0, 0, .11);
    --glass: rgba(255, 255, 255, .5); --glass-edge: rgba(255, 255, 255, .72); --glass-shadow: 0 22px 54px -30px rgba(0, 0, 0, .42);
    --bar: rgba(244, 244, 244, .88);
    --field: rgba(255, 255, 255, .58); --field-edge: rgba(0, 0, 0, .1); --field-focus: #fff;
    --solid: #111; --on-solid: #fff; --chip: rgba(255, 255, 255, .45);
    --solid-hover: #2e2e2e; --solid-press: #000; --chip-hover: rgba(255, 255, 255, .8); --chip-press: rgba(0, 0, 0, .07);
    --wash: rgba(0, 0, 0, .06); --wash-press: rgba(0, 0, 0, .13);
    --ok: #0a5c31; --warn: #774d00; --err: #a11c15;
    --blur: blur(26px);
    --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
    /* Grey diagonal bands, like light through a window: their crisp edges are what the glass blurs. */
    --backdrop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1600' height='1000' fill='%23dcdcdc'/%3E%3Cpolygon points='60,0 470,0 50,1000 -360,1000' fill='%23c6c6c6'/%3E%3Cpolygon points='470,0 590,0 170,1000 50,1000' fill='%23f0f0f0'/%3E%3Cpolygon points='860,0 930,0 510,1000 440,1000' fill='%23ececec'/%3E%3Cpolygon points='1130,0 1620,0 1200,1000 710,1000' fill='%23cbcbcb'/%3E%3Cpolygon points='1620,0 1760,0 1340,1000 1200,1000' fill='%23b8b8b8'/%3E%3C/svg%3E");
}
.dark {
    color-scheme: dark;
    --ink: #f3f3f3; --soft: #adadad; --rule: rgba(255, 255, 255, .11);
    --glass: rgba(26, 26, 26, .5); --glass-edge: rgba(255, 255, 255, .13); --glass-shadow: 0 22px 54px -30px rgba(0, 0, 0, .9);
    --bar: rgba(26, 26, 26, .88);
    --field: rgba(255, 255, 255, .07); --field-edge: rgba(255, 255, 255, .1); --field-focus: rgba(255, 255, 255, .13);
    --solid: #f3f3f3; --on-solid: #111; --chip: rgba(255, 255, 255, .08);
    --solid-hover: #d6d6d6; --solid-press: #b4b4b4; --chip-hover: rgba(255, 255, 255, .15); --chip-press: rgba(255, 255, 255, .03);
    --wash: rgba(255, 255, 255, .08); --wash-press: rgba(255, 255, 255, .16);
    --ok: #6fd09a; --warn: #ddb056; --err: #f28a81;
    --backdrop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1600' height='1000' fill='%23171717'/%3E%3Cpolygon points='60,0 470,0 50,1000 -360,1000' fill='%23272727'/%3E%3Cpolygon points='470,0 590,0 170,1000 50,1000' fill='%230c0c0c'/%3E%3Cpolygon points='860,0 930,0 510,1000 440,1000' fill='%23101010'/%3E%3Cpolygon points='1130,0 1620,0 1200,1000 710,1000' fill='%23232323'/%3E%3Cpolygon points='1620,0 1760,0 1340,1000 1200,1000' fill='%23323232'/%3E%3C/svg%3E");
}
body { margin: 0; color: var(--ink); font: 14px/1.5 var(--font); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--backdrop) center/cover no-repeat; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { color: var(--on-solid); background: var(--solid); }

.top, .main, .side, .notice {
    background: var(--glass);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}

/* Top bar. Rows scroll beneath it and Chrome leaves text inside another glass panel sharp,
   so it is denser than the sheets to keep its own text readable. */
.top { position: sticky; top: 10px; z-index: 10; display: flex; align-items: center; gap: 20px; width: min(1204px, calc(100% - 36px)); height: 48px; margin: 10px auto 0; padding: 0 18px; background: var(--bar); border-radius: 15px; }
.brand { font-size: 15px; font-weight: 800; }
.top-r { display: flex; align-items: center; gap: 18px; min-width: 0; margin-left: auto; font-size: 13px; }
.top-r form { display: contents; }
.tl { display: inline-flex; align-items: center; gap: .3em; min-width: 0; margin: -4px -6px; padding: 4px 6px; font: inherit; color: var(--soft); white-space: nowrap; cursor: pointer; background: none; border: 0; border-radius: 8px; }
.who { max-width: 10em; overflow: hidden; text-overflow: ellipsis; }

/* Page */
.page { max-width: 1240px; margin: 0 auto; padding: 30px 18px 64px; }
.head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; }
.back { grid-column: 1 / -1; margin-bottom: 8px; font-size: 13px; color: var(--soft); }
h1 { margin: 0; font-size: 38px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
h2 { margin: 0; font-size: 15px; font-weight: 750; }
.notice { margin-top: 20px; padding: 14px 18px; overflow-wrap: anywhere; border-radius: 16px; }
.empty-state { color: var(--soft); text-align: center; }
.empty-state:empty { display: none; }

/* Admin sign-in page. */
.selfuse-login { width: min(100%, 420px); margin: 11vh auto 0; }
.selfuse-login .main { margin-top: 20px; padding-top: 22px; }
.selfuse-login .rows input:not([type=checkbox]) { font-family: var(--font); text-align: left; text-align-last: left; }

/* Login sits beside the log in a narrow sheet; once signed in the forms take the wide side. */
.work { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 20px; }
.work.authenticated { grid-template-columns: minmax(0, 1fr) 400px; }
.main { min-width: 0; padding: 0 22px 22px; border-radius: 22px; }
.side { position: sticky; top: 72px; min-width: 0; padding: 0 20px 12px; border-radius: 22px; }
/* Signed in, the exit button lives in the heading; this panel only returns to host a recovery button. */
.work.authenticated #login-panel { display: none; }
.work.authenticated #login-panel:has(#result-panel:not([hidden])) { display: block; }

.sec { padding-top: 20px; }
#resource-panel:not([hidden]) ~ #feature-panel { margin-top: 22px; border-top: 1px solid var(--rule); }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.tools { display: flex; gap: 14px; }
.link { margin: -4px -6px; padding: 4px 6px; font: inherit; font-size: 13px; color: var(--soft); cursor: pointer; background: none; border: 0; border-radius: 8px; }
#copy-log { min-width: calc(3em + 12px); text-align: right; }

/* Ledger rows: label on the left, value on the right, a rule between rows. */
.rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; border-top: 1px solid var(--rule); }
.rows.one { grid-template-columns: minmax(0, 1fr); }
.rows > div, #credentials > div { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; border-bottom: 1px solid var(--rule); }
#credentials { display: contents; }
.rows label { flex: 0 0 46%; min-width: 0; font-size: 13.5px; cursor: text; }
.rows input:not([type=checkbox]), .rows select {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    margin-left: auto;
    padding: 0 11px;
    font: 14px var(--mono);
    text-align: right;
    text-align-last: right;
    color: inherit;
    background: var(--field);
    border: 1px solid var(--field-edge);
    border-radius: 10px;
    outline: 0;
}
@media (hover: hover) {
    .rows input:not([type=checkbox]):hover, .rows select:hover { border-color: var(--soft); }
}
.rows input:not([type=checkbox]):focus, .rows select:focus { background: var(--field-focus); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.rows select { font-family: var(--font); cursor: pointer; }
.rows input[type=number] { flex: 0 1 92px; appearance: textfield; }
.rows input[type=number]::-webkit-inner-spin-button { appearance: none; }

/* Feature rows: tick and name, with any parameter on the same line. */
.rows .feature-option { display: flex; flex: 1 1 0; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.feature-option span { min-width: 0; overflow-wrap: anywhere; }
.feature-option:has(input:checked) span { font-weight: 700; }
.feature-option input { flex: none; width: 17px; height: 17px; margin: 0; appearance: none; cursor: pointer; background: var(--field); border: 1px solid var(--soft); border-radius: 5px; }
.feature-option input:checked { background: var(--solid); border-color: var(--solid); box-shadow: inset 0 0 0 3px var(--on-solid); }
.rows .parameter-label { flex: none; font-size: 12.5px; color: var(--soft); }

/* Buttons */
.bar { padding-top: 16px; }
.primary, .secondary { font: inherit; cursor: pointer; }
.primary { width: 100%; height: 46px; font-size: 15px; font-weight: 750; color: var(--on-solid); background: var(--solid); border: 1px solid var(--solid); border-radius: 14px; }
.secondary { height: 36px; padding: 0 14px; font-size: 13px; color: var(--ink); background: var(--chip); border: 1px solid var(--field-edge); border-radius: 11px; }
.secondary.wide { width: 100%; height: 42px; font-size: 14px; font-weight: 650; border-radius: 13px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; }
/* Disabled usually means "not available"; only a busy form shows the wait cursor. */
:is(button, input, select):disabled { cursor: not-allowed; opacity: .55; }
[aria-busy="true"] :is(button, input, select):disabled, .is-busy:disabled { cursor: wait; }
/* The button that was pressed says it is waiting and keeps its weight; workspace-ui.js sets the label. */
.primary.is-busy { opacity: .88; }
.secondary.is-busy { opacity: .8; }
.is-busy::before {
    content: "";
    display: inline-block;
    flex: none;
    width: .95em;
    height: .95em;
    margin-right: .5em;
    vertical-align: -.12em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: selfuse-spin .7s linear infinite;
}
@keyframes selfuse-spin { to { transform: rotate(360deg); } }

/* Adapters return raster QR codes of any size; keep them inside the sheet and
   on a white quiet zone so they stay scannable in dark mode. */
#qr-area { padding-top: 6px; }
#qr-image { display: block; max-width: min(100%, 18rem); height: auto; padding: 12px; background: #fff; border-radius: 14px; }

/* Run log */
.log-panel .sec-h { border-bottom: 1px solid var(--rule); }
/* The side padding leaves room for the rounded wash of the group heads. */
.log-list { max-height: calc(100vh - 150px); margin-inline: -8px; padding-inline: 8px; overflow: auto; font-size: 12.5px; }
.log-empty { margin: 0; padding: 12px 0; color: var(--soft); }
.log-group { border-bottom: 1px solid var(--rule); }
.log-group:last-child { border-bottom: 0; }
.log-group-head { display: flex; align-items: baseline; gap: 8px; width: calc(100% + 16px); margin-inline: -8px; padding: 10px 8px; border-radius: 9px; font: inherit; font-weight: 700; color: inherit; text-align: left; cursor: pointer; background: none; border: 0; }
.log-group-head:focus-visible { outline-offset: -2px; }
.log-chevron { display: inline-block; font-size: 12px; color: var(--soft); }
.log-group-head[aria-expanded="true"] .log-chevron { transform: rotate(90deg); }
.log-group-title { min-width: 0; overflow-wrap: anywhere; }
.log-badge { flex: none; margin-left: auto; font-weight: 650; }
.log-badge.running { color: var(--soft); }
.log-badge.success { color: var(--ok); }
.log-badge.warning { color: var(--warn); }
.log-badge.error { color: var(--err); }
.log-entry { display: grid; grid-template-columns: 58px 28px minmax(0, 1fr); gap: 8px; padding: 2px 0; }
.log-entry:last-child { padding-bottom: 11px; }
.log-time { font: 11.5px/19px var(--mono); color: var(--soft); }
.log-level { font-size: 11.5px; line-height: 19px; color: var(--soft); }
.log-entry.success .log-level { font-weight: 600; color: var(--ok); }
.log-entry.warning .log-level { font-weight: 600; color: var(--warn); }
.log-entry.error .log-level, .log-entry.error .log-message { font-weight: 600; color: var(--err); }
.log-entry.data .log-level { font-weight: 700; color: var(--ink); }
.log-entry.data .log-message { font-weight: 600; }
.log-message { overflow-wrap: anywhere; white-space: pre-wrap; }
.log-group-body .button-row { padding: 6px 0 11px; }

/* Feel: quick and quiet. Colour fades in and a press gives way slightly; nothing lifts, glows or bounces.
   Hover exists only where a mouse does, so a tap leaves nothing behind. The :active rules come after
   the hover block because they have the same specificity and must win while pressing. */
.primary, .secondary { transition: background-color .12s ease-out, border-color .12s ease-out, opacity .12s ease-out, transform .08s ease-out; }
.link, .tl { transition: background-color .12s ease-out, color .12s ease-out; }
.back { transition: color .12s ease-out; }
.log-group-head { transition: background-color .12s ease-out; }
.log-chevron { transition: transform .12s ease-out; }
.feature-option input { transition: background-color .1s ease-out, border-color .1s ease-out, box-shadow .1s ease-out, transform .08s ease-out; }
.rows input:not([type=checkbox]), .rows select { transition: background-color .12s ease-out, border-color .12s ease-out, box-shadow .12s ease-out; }
@media (hover: hover) {
    .primary:not(:disabled):hover { background: var(--solid-hover); border-color: var(--solid-hover); }
    .secondary:not(:disabled):hover { background: var(--chip-hover); border-color: var(--ink); }
    :is(.link, .tl):not(:disabled):hover { color: var(--ink); background: var(--wash); }
    .back:hover { color: var(--ink); }
    .log-group-head:hover { background: var(--wash); }
    .feature-option:hover input:not(:checked):not(:disabled) { background: var(--wash); border-color: var(--ink); }
}
.primary:not(:disabled):active { background: var(--solid-press); border-color: var(--solid-press); transform: scale(.985); }
.secondary:not(:disabled):active { background: var(--chip-press); border-color: var(--ink); transform: scale(.975); }
:is(.link, .tl):not(:disabled):active { color: var(--ink); background: var(--wash-press); }
.back:active { color: var(--ink); }
.log-group-head:active { background: var(--wash-press); }
.feature-option:active input:not(:disabled) { transform: scale(.86); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --glass: rgba(240, 240, 240, .94); }
    .dark { --glass: rgba(30, 30, 30, .94); }
}
@media (max-width: 1023px) {
    h1 { font-size: 30px; }
}
@media (max-width: 980px) {
    .work, .work.authenticated { grid-template-columns: minmax(0, 1fr); }
    .side { position: static; }
    .log-list { max-height: none; }
    /* Only the main submit stays in reach while scrolling; a translucent second button would overlap rows. */
    .bar { position: sticky; bottom: 10px; z-index: 2; }
    .bar:has(.wide) { position: static; }
}
@media (max-width: 639px) {
    .rows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 539px) {
    h1 { font-size: 27px; }
    .top { width: calc(100% - 20px); margin-top: 8px; padding: 0 14px; }
    .top-r { gap: 13px; }
    .who { display: none; }
    .page { padding: 22px 10px 40px; }
    .main, .side { padding-left: 15px; padding-right: 15px; border-radius: 19px; }
    .rows > div, #credentials > div { min-height: 52px; }
    /* 16px stops iOS zooming the page when a field takes focus. */
    .rows input:not([type=checkbox]), .rows select { height: 38px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    :is(.primary, .secondary):active, .feature-option:active input { transform: none !important; }
    .is-busy::before { display: none; }
}