#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---------- Auth split screen (design kit .k-auth) ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { background: var(--brand-navy); color: var(--neutral-50); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
:root[data-theme="dark"] .auth-art { background: var(--brand-navy); border-right: 1px solid var(--border); }
.auth-hero h2 { font-size: 2.25rem; line-height: 1.15; font-weight: 700; color: #fff; margin: 0 0 16px; letter-spacing: -0.02em; }
.auth-hero p { font-size: 1.0625rem; line-height: 1.6; color: var(--neutral-400); max-width: 440px; margin: 0; }
.auth-foot { font-size: .8125rem; color: var(--neutral-500); }
.auth-form { position: relative; display: flex; align-items: center; justify-content: center; padding: 72px 16px 48px; background: var(--page); }
.auth-top { position: absolute; top: 20px; right: 16px; }
.auth-box { width: 100%; max-width: 420px; }
.auth-box h1 { margin-bottom: 6px; }
.auth-box .sub { color: var(--text-muted); margin: 0 0 24px; }
.auth-box .row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.auth-box .foot { text-align: center; color: var(--text-muted); font-size: .875rem; margin-top: var(--s5); }
.auth-box .alert { margin-bottom: var(--s4); }
@media (max-width: 1024px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } }

.langtheme { display: flex; align-items: center; gap: var(--s2); }
.lang-menu { position: relative; }
.lang-btn { height: 36px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: 600 .8125rem var(--font); cursor: pointer; }
.lang-btn:hover { border-color: var(--border-strong); }
.lang-back { position: fixed; inset: 0; z-index: 40; }
.lang-list { position: absolute; z-index: 41; right: 0; top: calc(100% + 4px); min-width: 170px; margin: 0; padding: 4px; list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.lang-list.to-right { right: auto; left: 0; }
.lang-list button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.lang-list button:hover { background: var(--surface); }
.lang-list button[aria-selected="true"] { background: var(--primary-soft); color: var(--primary-soft-fg); }
.lang-list b { width: 22px; text-transform: lowercase; }

/* ---------- Cabinet ---------- */
/* the header stays on top while the page scrolls, as the Save bar stays at the bottom */
.cab-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: 12px 24px; background: var(--bg); border-bottom: 1px solid var(--border); }
.cab-header { position: sticky; top: 0; z-index: 30; transition: padding .2s; }
.cab-header .brand-logo img, .cab-link { transition: height .2s, padding .2s; }
html { scroll-padding-top: 88px; }   /* a field scrolled into view (a jump, an error) is not hidden under the header */
/* mt.js marks <html>: "scrolled" = away from the top, the header gets about a third lower (full again at the top);
   "at-end" = at the very bottom, the Save bar is full there and a third lower everywhere else */
html.scrolled .cab-header { padding-top: 6px; padding-bottom: 6px; }
html.scrolled .cab-header .brand-logo img { height: 22px; }
html.scrolled .cab-link { padding-top: 4px; padding-bottom: 4px; }
html:not(.at-end) .action-bar { padding: 6px 10px; }
html:not(.at-end) .action-bar .btn { min-height: 30px; padding: 0 12px; font-size: .875rem; }
/* a phone: the header has three lines (logo, account, sections); the sections go last and only they stay on top */
@media (max-width: 640px) {
  .cab-header .cab-left { display: contents; }
  .cab-header .brand-logo { order: 1; }
  .cab-header .cab-user { order: 2; }
  .cab-header .cab-nav { order: 3; width: 100%; }
  html { scroll-padding-top: 64px; }
}
.cab-user { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-soft-fg); font: 700 .8125rem var(--font); letter-spacing: .02em; }
.avatar:hover, .avatar.active { text-decoration: none; box-shadow: 0 0 0 2px var(--brand-gold); }
.cab-main { max-width: 960px; margin: 0 auto; padding: var(--s6) 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }   /* the column never grows past the screen for a long line */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: .9375rem; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }
.narrow { max-width: 420px; }

/* ---------- Page structure ---------- */
.cab-main.wide { max-width: 1180px; }
.cab-left { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.cab-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.cab-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-md); color: var(--text-muted); font-weight: 600; font-size: .9375rem; }
/* a phone: the sections show only their icons, the open one keeps its name (as the tabs do) */
@media (max-width: 640px) { .cab-link:not(.active) .cab-label { display: none; } }
.cab-link:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.cab-link.active { background: var(--primary-soft); color: var(--primary-soft-fg); }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.page-head h1 { margin-bottom: 4px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--text-muted); }
.toolbar { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.toolbar-search { flex: 1 1 260px; }
.toolbar select { width: auto; min-width: 200px; }
.empty { padding: 48px 16px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s4); }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.pre { white-space: pre-wrap; margin: 0; }
.r { text-align: right; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label { font-size: var(--text-sm); font-weight: 600; }

/* ---------- Auction cards (list) ---------- */
.tlist { display: grid; gap: var(--s3); }
.tcard { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto var(--control-md); gap: var(--s2) var(--s4); align-items: center;
  padding: 12px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.tcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.tcard-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--primary-soft-fg); background: var(--primary-soft); }
.tcard-title { font-weight: 700; font-size: 1.0625rem; color: var(--text); line-height: 1.35; display: block; grid-column: 2; grid-row: 1; }
.tcard-time, .tcard-actions { grid-row: 1 / span 2; }   /* two columns: title over stage and number on the left, the countdown on the right */
.tcard { position: relative; }
.tcard-when { position: absolute; bottom: 5px; right: 20px; line-height: 1; }   /* small, inside the card, bottom right under the buttons */
.tcard:has(.tcard-when) { padding-bottom: 20px; }
.tcard-when .tcard-period { flex-direction: row; gap: 6px; font-size: .625rem; white-space: nowrap; }
.tcard-icon { grid-row: 1 / span 2; align-self: center; }
.tlist { padding: 14px 0 0; row-gap: calc((var(--s3) + 24px) / 2); }   /* room for the stage and period tags on the borders */   /* on the left, in the middle of the whole card */
.tcard-title:hover { color: var(--link-hover); }
.tcard-meta { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; font-size: .875rem; color: var(--text-muted); }
.tcard-time { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .8125rem; text-align: right; }   /* the short countdown sits flush right over the long period */
.tcard-period { color: var(--text-muted); font-size: .8125rem; white-space: nowrap; display: flex; flex-direction: column; align-items: inherit; gap: 2px; }
.tcard-period .tz-name { color: var(--text); font-family: var(--font); }
.tcard-period .tz-yours { font-size: .75rem; }
.tcard-meta .chip { font-family: var(--font); font-weight: 600; }
.tcard-actions { display: flex; gap: 6px; justify-content: flex-end; }
.tcard.tcard-wide { grid-template-columns: 44px minmax(0, 1fr) auto calc(var(--control-md) * 3 + 12px); }
.tcard-main .tcard-stage { position: absolute; top: 0; right: 20px; transform: translateY(-50%); background: var(--bg); border-radius: 999px; line-height: 0; }   /* the stage sits on the top border, right */
.view-time { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* wide screen: the title on the left, the countdown and dates on the right; a phone puts them under the title */
.view-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.view-head .view-time { align-items: flex-end; }
.view-head .view-time .countdown:not(.cd-critical) { padding-right: 0; }
@media (max-width: 760px) { .view-head { grid-template-columns: minmax(0, 1fr); } .view-head .view-time { align-items: flex-start; } }
@media (max-width: 960px) {
  .tcard, .tcard.tcard-wide { grid-template-columns: 40px minmax(0, 1fr); }
  .tcard-main, .tcard-time, .tcard-actions { grid-column: 2; grid-row: auto; }
  .tcard-icon { align-self: start; }
  .tcard-title { grid-column: 2; }
  .tcard-main .tcard-stage { position: static; transform: none; margin-bottom: 6px; line-height: normal; }
  .tcard-when { position: static; grid-column: 2; justify-self: start; }
  .tcard:has(.tcard-when) { padding-bottom: 12px; }
  .tcard-when .tcard-period { flex-wrap: wrap; white-space: normal; }   /* a tall phone card: the icon stays next to the title */
  .tcard-actions { justify-content: flex-start; }
  .tcard-time { align-items: flex-start; text-align: left; }
  .tcard-period { white-space: normal; text-align: left; align-items: flex-start; }
}

/* Countdown */
/* Countdown in the Gazki-logo style: heavy figures split by thin vertical bars, tiny unit captions under them. */
.countdown { --cd-ink: var(--brand-navy); --cd-bar: var(--border-strong); display: inline-flex; flex-direction: column; gap: 2px; padding: 4px 8px 4px 0; border-radius: var(--radius-md); }
:root[data-theme="dark"] .countdown:not(.cd-urgent):not(.cd-critical) { --cd-ink: #f3f5f7; }
.cd-label { color: var(--text-muted); font: 600 .6875rem/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.cd-digits { display: inline-flex; align-items: stretch; }
.cd-unit { display: inline-flex; flex-direction: column; align-items: center; min-width: 2.1em; padding: 0 .45em; }
.cd-unit:first-child { padding-left: 0; }
.cd-unit + .cd-unit { border-left: 2px solid var(--cd-bar); }
.cd-unit b { font: 800 1.5rem/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--cd-ink); }
.cd-unit i { font: 700 .625rem/1.3 var(--font); font-style: normal; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
/* less than a day: gold */
.countdown.cd-soon { --cd-bar: var(--brand-gold); }
.countdown.cd-soon .cd-label { color: #a07a10; }
:root[data-theme="dark"] .countdown.cd-soon .cd-label { color: var(--brand-gold); }
/* less than an hour: red, the seconds beat */
.countdown.cd-urgent, .countdown.cd-critical { --cd-ink: var(--danger-fg); --cd-bar: color-mix(in oklab, var(--danger-fg) 45%, transparent); }
.countdown.cd-urgent .cd-label, .countdown.cd-critical .cd-label { color: var(--danger-fg); }
.countdown.cd-urgent .cd-sec b { animation: cd-beat 1s ease-in-out infinite; }
/* last 5 minutes: the whole block blinks */
.countdown.cd-critical { padding-left: 8px; animation: cd-blink 1s steps(2, jump-none) infinite; }
/* in a list card: caption left of the figures, one line, so the figures sit level with the auction title */
.tcard .countdown { flex-direction: row; align-items: baseline; gap: 10px; padding-top: 0; padding-bottom: 0; }
.tcard .cd-unit b { font-size: 1.25rem; }
.tcard .countdown.cd-critical { padding-top: 2px; padding-bottom: 2px; }
.tcard .cd-label { flex: none; line-height: 1.15; }
@keyframes cd-beat { 50% { opacity: .35; } }
@keyframes cd-blink { 0% { background: var(--danger-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .countdown.cd-urgent .cd-sec b, .countdown.cd-critical { animation: none; }
  .countdown.cd-critical { background: var(--danger-soft); }
}

/* Stage badges */
.badge.phase-draft { background: var(--status-draft-soft); color: var(--text-muted); }
.badge.phase-upcoming { background: var(--status-open-soft); color: var(--success); }
.badge.phase-bidding { background: var(--primary-soft); color: var(--primary-soft-fg); }
.badge.phase-analysis { background: var(--status-evaluating-soft); color: var(--text); }
.badge.phase-completed { background: var(--status-awarded-soft); color: var(--text); }
.badge.phase-cancelled { background: var(--danger-soft); color: var(--danger-fg); }

/* ---------- Stage line with dots ---------- */
.stepper-dots { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); margin: var(--s2) 0; padding: 0; }
.stepper-dots li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .8125rem; color: var(--text-muted); }
.stepper-dots li::before { content: ""; position: absolute; top: 9px; left: -50%; right: 50%; height: 2px; background: var(--border-strong); }
.stepper-dots li:first-child::before { display: none; }
.stepper-dots .dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong); }
.stepper-dots li.done .dot { background: var(--primary); border-color: var(--primary); }
.stepper-dots li.done::before, .stepper-dots li.current::before { background: var(--primary); }
.stepper-dots li.current .dot { border-color: var(--primary); box-shadow: 0 0 0 5px var(--primary-ring); background: var(--bg); }
.stepper-dots li.current .dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--primary); }
.stepper-dots li.current { color: var(--text); font-weight: 700; }
.stepper-dots.cancelled li .dot { border-color: var(--border-strong); background: var(--surface); box-shadow: none; }
.stepper-dots.cancelled li::before { background: var(--border-strong); }
.stepper-note { text-align: center; margin: 0; }

/* ---------- Editor ---------- */
.editor { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s4); }
.editor .card h2, .view .card h2, .card > h2 { margin-bottom: var(--s3); }
.zones { margin-top: var(--s2); padding: 12px 16px; background: var(--surface); border-radius: var(--radius-md); }
.zones-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .875rem; }
.zones[open] > .zones-title { margin-bottom: 6px; }
.zones > .zones-title .fold-icon { width: 24px; height: 24px; }
.zones .table { background: transparent; }
.table.lots td { padding: 6px 6px; vertical-align: middle; }
.table.lots input { min-height: 36px; }
/* the name takes the free width; the number columns stay as narrow as their values (headers wrap) */
.table.lots th { white-space: normal; vertical-align: bottom; }
.table.lots td:has(.lot-name) { width: 100%; }
.lot-name { min-width: 220px; width: 100%; }
.lot-unit { width: 80px; min-width: 80px; }
.lot-num { width: 120px; min-width: 120px; }
.lot-pct { width: 84px; min-width: 84px; }
.table.lots tr.bad td { background: var(--danger-soft); }
.files { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: 8px; }
.files li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.files img { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--surface); }
.file-thumb { flex: none; width: 56px; height: 40px; display: grid; place-items: center; line-height: 0; }
.file-doc text { letter-spacing: .02em; }
.files .file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.upload { position: relative; overflow: hidden; cursor: pointer; }
.upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.action-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; transition: padding .2s;
  background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.spacer { flex: 1; }
.icon { flex: none; vertical-align: middle; }

/* ---------- Toasts ---------- */
.toast-host { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 8px; }
.toast-item { padding: 12px 16px; border-radius: var(--radius-md); background: var(--brand-navy); color: #fff; box-shadow: var(--shadow-lg); font-weight: 600; font-size: .9375rem; }
.toast-item.error { background: var(--danger); }
.settings { display: grid; gap: var(--s4); max-width: 1100px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.settings-col { display: grid; gap: var(--s4); }
.settings .card h2 { margin-top: 0; }
.settings-panel { display: grid; gap: var(--s4); }
.settings-panel[hidden] { display: none; }
.settings-panel > .card[hidden] { display: none; }
.settings .field:last-child { margin-bottom: 0; }
.set-hint { margin: -6px 0 var(--s4); }
.notify-table { table-layout: fixed; }
.notify-table th.c, .notify-table td.c { width: 120px; text-align: center; }
.notify-table td.c input { width: 18px; height: 18px; cursor: pointer; }
.notify-table td.c input:disabled { cursor: not-allowed; opacity: .4; }
.notify-table tr.notify-group th { background: var(--surface); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); text-align: left; }
@media (max-width: 600px) { .notify-table th.c, .notify-table td.c { width: 76px; } }
.pick-list { list-style: none; margin: 0 0 var(--s2); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); }
.pick-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3); padding: 4px 4px 4px 12px; min-height: 40px; }
.pick-list li + li { border-top: 1px solid var(--border); }
.pick-list .zone-id { font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-list .zone-off { font-size: .8125rem; color: var(--text-muted); }
.tag-list { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list li { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface); }
.tag-list b { font-weight: 600; font-size: .875rem; }
.tag-list button { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.tag-list button:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger-fg); }
.tag-list button:disabled { opacity: .35; cursor: default; }
.pick-add { display: flex; gap: var(--s2); margin-bottom: 6px; }
.pick-add input { flex: 1; min-width: 0; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }
.rte { border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg); overflow: hidden; }
.rte:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent); }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 1; }
.rte-btn { min-width: 32px; height: 32px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.rte-btn:hover { background: var(--bg); border-color: var(--border); }
.rte-btn.on { background: var(--primary-soft); color: var(--primary-soft-fg); border-color: transparent; }
.rte-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border-strong); }
.rte-area { min-height: 320px; max-height: 70vh; overflow-y: auto; padding: 14px 16px; outline: none; }
.prose { line-height: 1.65; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose div { margin: 0 0 .75em; }
.prose h2 { font-size: 1.25rem; margin: 1.2em 0 .5em; }
.prose h3 { font-size: 1.0625rem; margin: 1em 0 .4em; }
.prose ul, .prose ol { margin: 0 0 .75em; padding-left: 1.6em; }
.prose li { margin: .2em 0; }
.prose blockquote { margin: 0 0 .75em 2em; padding: 0; border: 0; }
.prose a { text-decoration: underline; }
.terms { max-width: 820px; margin: 0 auto; }
.terms .prose { margin-top: var(--s4); }
.docs-editor .tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s2); }
.tab { height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.tab:hover { border-color: var(--border-strong); }
.tab.active { background: var(--primary-soft); color: var(--primary-soft-fg); border-color: transparent; }
.rte.readonly { background: var(--surface); }
.rte.readonly .rte-area { min-height: 0; }
.doc-links { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s3); flex-wrap: wrap; }
.doc-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 600; }
.doc-links a:hover { border-color: var(--border-strong); }
.terms .back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s3); color: var(--text-muted); }
.doc-state { height: 26px; font-family: var(--font); font-weight: 600; margin-left: 6px; }
.doc-state.std { background: var(--status-open-soft); color: var(--success); }
.doc-state.own { background: var(--primary-soft); color: var(--primary-soft-fg); }
.fold > summary { display: flex; align-items: center; gap: var(--s3); cursor: pointer; list-style: none; user-select: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { margin: 0 !important; }
.fold > summary .fold-icon { margin-left: auto; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.fold > summary:hover .fold-icon { background: var(--surface); color: var(--text); }
.fold[open] > summary { margin-bottom: var(--s3); }
.fold[open] > summary .fold-icon { transform: rotate(180deg); }
.fold > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 6px; }
/* ---------- taking part ---------- */
.part-panel { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s4) 0; padding: 14px 18px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg); }
.part-panel > .icon { color: var(--primary-soft-fg); }
.part-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.part-text span { color: var(--text-muted); font-size: .875rem; }
.part-panel.pending { border-color: var(--brand-gold); }
.part-panel.bad { border-color: color-mix(in oklab, var(--danger-fg) 40%, transparent); background: var(--danger-soft); }
.part-panel.bad > .icon { color: var(--danger-fg); }
.part-panel.neutral { background: var(--surface); }
.join-card { margin: var(--s4) 0; }
.join-card.invited { border-color: var(--brand-gold); background: color-mix(in oklab, var(--brand-gold) 6%, var(--bg)); }
.join-head { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); }
.join-head > .icon { color: var(--primary-soft-fg); margin-top: 2px; flex: none; }
.join-head h2 { margin: 0 0 4px; }
.join-head p { margin: 0; }
.join-steps { margin: 0 0 var(--s3); padding-left: 1.4em; line-height: 1.7; }
/* ---------- bidding board ---------- */
.board-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.board-head h2 { margin: 0 !important; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font: 700 .6875rem/1 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--danger-fg); }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--danger-fg); animation: cd-beat 1.2s ease-in-out infinite; }
.raise-all { gap: 8px; }
.board-table td { vertical-align: middle; }
.board-table .best { font-weight: 700; font-size: 1rem; }
.lot-row.lead td { background: color-mix(in oklab, var(--success) 9%, transparent); }
.lot-row.outbid td { background: color-mix(in oklab, var(--danger-fg) 7%, transparent); }
.lot-row.flash td { animation: lot-flash 1.6s ease-out; }
@keyframes lot-flash { 0% { background: color-mix(in oklab, var(--brand-gold) 45%, transparent); } 100% { background: transparent; } }
.bid-cell { display: flex; gap: 10px; align-items: center; }
.bid-min { white-space: nowrap; margin: 0; }
.bid-stepper { display: inline-flex; align-items: stretch; height: 36px; border: 1.5px solid var(--brand-gold); border-radius: 10px; overflow: visible; background: color-mix(in oklab, var(--brand-gold) 8%, var(--bg)); }
/* step-only bids: the amount, not a field — the new price this bid makes, in green with an arrow */
.bid-fixed { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 6px; border: 1px solid color-mix(in oklab, var(--success) 45%, transparent); border-radius: 8px; background: var(--success-soft); color: var(--success); font-weight: 600; font-size: .875rem; white-space: nowrap; }
.bid-fixed .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.bid-fixed.off { border-color: var(--border); background: var(--surface); color: var(--text-muted); font-weight: 500; padding-left: 10px; opacity: .7; }
.bid-stepper.off { border-color: var(--border); background: var(--surface); opacity: .6; }
.step-btn { width: 32px; border: 0; background: color-mix(in oklab, var(--brand-gold) 22%, var(--bg)); color: var(--brand-navy); font: 700 1.125rem/1 var(--font); cursor: pointer; }
:root[data-theme="dark"] .step-btn { color: var(--text); }
.step-btn:hover:not(:disabled) { background: var(--brand-gold); }
.step-btn:disabled { opacity: .35; cursor: default; }
.bid-input { width: 112px; min-height: 0 !important; height: 100%; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: center; font-weight: 700; box-shadow: none !important; padding: 0 4px !important; -moz-appearance: textfield; }
.bid-input::-webkit-outer-spin-button, .bid-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bid-input:focus { outline: none; }
.bid-stepper:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-gold) 35%, transparent); }
.iconbtn .count { font-size: .75rem; font-weight: 700; margin-left: 2px; }
.iconbtn:has(.count) { width: auto; padding: 0 8px; gap: 2px; white-space: nowrap; }
.history-row td { background: var(--surface); }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.history li { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: var(--s3); font-size: .875rem; }
.history li.mine { font-weight: 700; color: var(--success); }
@media (prefers-reduced-motion: reduce) { .lot-row.flash td, .live-dot::before { animation: none; } }
/* ---------- participants (admin) ---------- */
.block { display: block; }
.participants .block, .muted.block { display: block; font-size: .8125rem; }
/* a table cell must stay a cell (no flex on the td itself) */
td.row-actions { text-align: right; white-space: nowrap; }
td.row-actions > * + * { margin-left: 6px; }
.pstate-requested { background: color-mix(in oklab, var(--brand-gold) 25%, transparent); color: var(--text); }
.pstate-approved { background: var(--status-open-soft); color: var(--success); }
.pstate-rejected { background: var(--danger-soft); color: var(--danger-fg); }
.chip[class*="pstate-"] { font-family: var(--font); font-weight: 600; gap: 4px; }
/* ---------- messages ---------- */
.bell { display: inline-flex; align-items: center; gap: 6px; position: relative; color: inherit; }
a.bell { width: 36px; height: 36px; justify-content: center; border-radius: 50%; }
a.bell:hover { background: var(--surface); }
.bell-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger-fg); color: #fff; font: 700 .6875rem/18px var(--font); text-align: center; }
a.bell .bell-count { position: absolute; top: -2px; right: -4px; }
.bell.in-menu .bell-count { position: absolute; top: -8px; right: -12px; }
.messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.messages li { position: relative; }
.msg-group { margin-bottom: var(--s5); }
.msg-group-head { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; margin: 0 0 8px; }
.msg-group-head a, .msg-group-head > span:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); text-decoration: none; }
.msg-group-head a:hover b { text-decoration: underline; }
.msg-group-head a b, .msg-group-head a .icon { flex: none; white-space: nowrap; }   /* the auction number never breaks */
.msg-group-head a span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-group .messages { padding-left: 14px; border-left: 2px solid var(--border); }
.msg-group-side { display: flex; align-items: center; gap: var(--s2); flex: none; }
.msg-group.folded { margin-bottom: var(--s3); }
.msg-group.folded .msg-group-head { margin: 0; }
.msg-who { color: var(--text) !important; }
.msg-who b { font-weight: 600; }
/* the bin of a message: at the right of its first line */
.messages .msg { padding-right: 52px; }
.msg-delete { position: absolute; top: 31px; transform: translateY(-50%); right: 8px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted, #6b7280); cursor: pointer; }
.msg-delete:hover, .msg-delete:focus-visible { background: color-mix(in oklab, var(--danger, #e03131) 12%, transparent); color: var(--danger, #e03131); }
.msg-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 0 16px 12px 68px; margin-top: -4px; }
.messages li:has(.msg-actions) .msg { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.messages li:has(.msg-actions) .msg-actions { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--bg); padding-top: 4px; margin-top: 0; }
.messages .unread:has(.msg-actions) .msg-actions { border-color: var(--brand-gold); }
.msg { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; text-align: left; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.msg:hover { border-color: var(--border-strong); }
.msg > .num { white-space: nowrap; }   /* the date stays on one line */
@media (max-width: 600px) { .msg { grid-template-columns: 36px minmax(0, 1fr); } .msg > .num { grid-column: 2; justify-self: start; font-size: .75rem; } }   /* phone: the date goes under the text, the text keeps the width */
.msg-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--text-muted); }
.msg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-text b { font-weight: 500; }
.msg-text span { color: var(--text-muted); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages .unread .msg { border-color: var(--brand-gold); }
.messages .unread .msg-text b { font-weight: 700; }
.messages .unread .msg-icon { background: var(--primary-soft); color: var(--primary-soft-fg); }
.why-not { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s3); border: 1px solid var(--brand-gold); background: color-mix(in oklab, var(--brand-gold) 10%, var(--bg)); }
.offline-banner { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--radius-lg); background: var(--danger); color: #fff; box-shadow: var(--shadow-lg); font-weight: 600; }
.update-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: var(--radius-lg); background: var(--brand-navy); color: #fff; box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,.2)); font-weight: 600; }
/* "you lead": a gold crown badge (Gazki gold); "outbid": a red arrow badge. The words show as a tooltip on hover or focus. */
.badge-lead { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; vertical-align: middle; cursor: default; outline: none; }
.badge-lead.up { color: var(--brand-navy); background: linear-gradient(160deg, #f7d774 0%, #dfb63a 55%, #c99a1c 100%); box-shadow: 0 4px 14px rgba(223, 182, 58, .55), inset 0 1px 0 rgba(255, 255, 255, .6); animation: badge-in .55s cubic-bezier(.2, 1.7, .4, 1); }
.badge-lead.down { color: #fff; background: linear-gradient(160deg, #ff6b6b 0%, #e03131 60%, #c92a2a 100%); box-shadow: 0 4px 14px rgba(224, 49, 49, .45), inset 0 1px 0 rgba(255, 255, 255, .35); animation: badge-drop .55s cubic-bezier(.2, 1.7, .4, 1); }
.badge-lead.done { color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); }
/* in the lots table the tip opens leftwards from the badge and wraps: it never sticks out of the table (no sideways scrolling) */
.board-table .badge-lead[data-tip]::after { left: auto; right: 0; transform: translate(0, 4px); width: max-content; max-width: 220px; white-space: normal !important; text-align: left; line-height: 1.35; }
.board-table .badge-lead[data-tip]:hover::after, .board-table .badge-lead[data-tip]:focus-visible::after { transform: translate(0, 0); }
.badge-lead[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 5px 10px; border-radius: 6px; background: var(--brand-navy); color: #fff; font: 600 .75rem/1.2 var(--font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
.badge-lead[data-tip]:hover::after, .badge-lead[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="dark"] .badge-lead[data-tip]::after { background: #f3f5f7; color: var(--brand-navy); }
/* the badge fades in where it is: no growing, no moving */
@keyframes badge-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes badge-drop { 0% { opacity: 0; } 100% { opacity: 1; } }
/* the best price while it rolls to a new value */
.board-table .best { transition: color .2s; }
.board-table .best.rolling { color: #b7791f; text-shadow: 0 0 12px rgba(223, 182, 58, .55); }
:root[data-theme="dark"] .board-table .best.rolling { color: var(--brand-gold); }
.chip-you { font-family: var(--font); font-weight: 700; background: var(--status-open-soft); color: var(--success); gap: 4px; }
@media (prefers-reduced-motion: reduce) { .badge-lead { animation: none !important; } }
/* the results window: a small crown at the one who won the bidding */
.badge-lead.sm { width: 24px; height: 24px; border-radius: 8px; margin-left: 8px; animation: none; box-shadow: 0 2px 6px rgba(223, 182, 58, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.badge-lead.sm svg { width: 15px; height: 15px; }
.won-bidding { font-weight: 600; color: #8a6414; }
:root[data-theme="dark"] .won-bidding { color: var(--brand-gold); }
.notify-switch { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--text-muted); }
/* bidding board: fixed columns on a computer */
.board-table { table-layout: fixed; width: 100%; }
.board-table col.c-no { width: 40px; } .board-table col.c-qty { width: 84px; } .board-table col.c-start { width: 110px; } .board-table col.c-sum { width: 130px; }
.board-table col.c-step { width: 100px; } .board-table col.c-best { width: 128px; } .board-table col.c-lead { width: 112px; }
.board-table.admin col.c-lead { width: 200px; }
.board-table col.c-bid { width: 300px; } .board-table col.c-hist { width: 84px; }
/* no amount field: the bid column holds only the amount (and the lot's own button), the lot name gets the rest */
.board-table.step-only col.c-bid { width: 160px; } .board-table.step-only.by-lot col.c-bid { width: 250px; }
.board-table:not(.admin) col.c-lead { width: 100px; }
.board-table td { overflow: hidden; }
.board-table .c-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-cell { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 36px; }
.badge-slot { width: 36px; height: 36px; display: grid; place-items: center; }
.leader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .875rem; }
.leader-name .you { color: #a07a10; }
:root[data-theme="dark"] .leader-name .you { color: var(--brand-gold); }
.badge-lead[data-tip]::after { white-space: nowrap; }
.board-table td.c-lead, .board-table td.c-hist { overflow: visible; }
/* phone: one card per lot, no sideways scrolling */
@media (max-width: 760px) {
  .board .table-wrap { overflow: visible; border: 0; }
  .board-table, .board-table tbody { display: block; }
  .board-table colgroup, .board-table thead { display: none; }
  .board-table tr.lot-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .board-table tr.lot-row td { display: block; padding: 0; border: 0; overflow: visible; text-align: left; background: none !important; }
  .board-table tr.lot-row.lead { border-color: var(--brand-gold); background: color-mix(in oklab, var(--brand-gold) 8%, var(--bg)); }
  .board-table tr.lot-row.outbid { border-color: color-mix(in oklab, #e03131 50%, transparent); background: color-mix(in oklab, #e03131 6%, var(--bg)); }
  .board-table tr.lot-row td.c-no { display: none; }
  .board-table tr.lot-row td.c-name { grid-column: 1 / 3; grid-row: 1; font-size: 1rem; align-self: center; }
  .board-table td.c-name b { white-space: normal; }
  .board-table td[data-label]::before { content: attr(data-label); display: block; font: 600 .6875rem/1.3 var(--font); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
  .board-table td.c-best { grid-column: 1 / 3; font-size: 1.375rem; }
  .board-table tr.lot-row td.c-lead { grid-column: 3; grid-row: 1; justify-self: end; }
  .board-table td.c-lead .leader-name { display: none; }
  .board-table td.c-lead .leader-cell { justify-content: end; }
  .board-table td.c-bid { grid-column: 1 / -1; }
  .board-table td.c-bid .bid-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .board-table td.c-bid .bid-stepper { width: 100%; }
  .board-table td.c-bid .bid-input { width: 100%; flex: 1; }
  .board-table td.c-hist { grid-column: 1 / -1; }
  .board-table tr.history-row { display: block; margin: -6px 0 10px; }
  .board-table tr.history-row td { display: block; }
  .history li { grid-template-columns: minmax(0, 1fr) auto auto; }
  .board-head .raise-all { width: 100%; justify-content: center; }
}
.pc-sub { margin: -4px 0 var(--s3); }
.pc-actions { margin: 0 0 var(--s3); }
.form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.form-actions .btn, .action-bar .btn { gap: 6px; }
/* a separate form above the page */
.modal-back { position: fixed; inset: 0; z-index: 60; background: var(--overlay); }
.modal.saving-box { display: flex; align-items: center; gap: 14px; width: auto; min-width: 260px; }
.modal.saving-box p { margin: 0; font-weight: 600; }
.modal { position: fixed; z-index: 61; left: 50%; top: 18vh; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--bg); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.modal h3 { margin: 0 0 4px; font-size: 1.25rem; }
.modal label { font-weight: 600; font-size: .875rem; }
.modal .form-actions { margin-top: 6px; }
.modal.confirm p { margin: 0; white-space: pre-line; }
/* invite window: client base picker + the letter */
.wide-modal { width: min(720px, calc(100vw - 32px)); top: 6vh; max-height: 88vh; overflow-y: auto; }
.pick-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pick-head .label { font-weight: 600; font-size: .875rem; margin-right: auto; }
.pick-search { width: 240px; min-height: 34px !important; }
.pick-people { list-style: none; margin: 0; padding: 4px; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.pick-people li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.pick-people li:hover { background: var(--surface); }
.pick-people li.off { opacity: .55; }
.pick-people .check { font-size: .875rem; }
/* client base page */
.clients td { vertical-align: top; }
/* fixed columns: ticking "blocked" (its caption changes) must not make any column wider or narrower */
.clients { table-layout: fixed; min-width: 620px; }
.clients .c-lang { width: 160px; }
.clients .c-auctions { width: 96px; }
.clients .c-blocked { width: 170px; }
.clients .c-actions { width: 56px; }
.clients td:first-child { overflow-wrap: anywhere; }
/* a client's two lines read as one: no line between them, the note box under the name */
.clients tr.client-main td { border-bottom: 0; padding-bottom: 8px; }
.clients tr.client-note td { padding-top: 0; }
.clients tbody tr:hover { background: none; }
.clients .note { width: 100%; min-height: 56px; resize: vertical; font-size: .875rem; }
.clients tr.blocked td { background: color-mix(in oklab, #e03131 6%, transparent); }
.clients .chip { margin-left: 6px; }
.search { width: 100%; max-width: 520px; margin-bottom: var(--s3); }
.clients-all { margin-bottom: var(--s3); }   /* Clients: "show everyone", under the search */
/* "Leader" and "Your bid": titles and contents centred in their columns */
.board-table th.c { text-align: center; }
.board-table td.c-bid .bid-cell { justify-content: center; }
.board-table:not(.admin) td.c-lead .leader-cell { grid-template-columns: 36px; justify-content: center; }
/* keep the cabinet header on one line: drop the role/e-mail line when space is short */
/* "+": the step as a tooltip above the button (same look as the leader badge) */
.step-btn { position: relative; border-radius: 0 8px 8px 0; }
.step-btn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 5px 10px; border-radius: 6px; background: var(--brand-navy); color: #fff; font: 600 .75rem/1.2 var(--font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
.step-btn[data-tip]:hover::after, .step-btn[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="dark"] .step-btn[data-tip]::after { background: #f3f5f7; color: var(--brand-navy); }
.board-table td.c-bid { overflow: visible; }

/* results after bidding (admin) */
.nowrap { white-space: nowrap; }
.results .winner-cell { min-width: 240px; line-height: 1.45; }
.results td:nth-child(2) { min-width: 150px; }
.results .chip { white-space: nowrap; }
.params-toggle { margin: 0 0 var(--s4); }
.fold-toggle .icon { transition: transform .15s; }
.fold-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.results .winner-cell .chip { margin-top: 4px; }
.results .contacts { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.results .contacts a { display: inline-flex; align-items: center; gap: 4px; }
.results .result-row.outcome-unsold td:not(.row-actions) { color: var(--text-muted); }
.results td.row-actions { white-space: nowrap; }
.results-foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.pick-winner .pick-people { max-height: 320px; }
.pick-price-line { margin: var(--s3) 0 4px; }
.all-prices .all-price { max-width: 140px; margin-left: auto; }
.all-prices tfoot td { border-top: 1px solid var(--border-strong); }
.pick-winner .pick-people .check { align-items: flex-start; }
.leader-name.unsold { color: var(--text-muted); font-weight: 500; }
.board-table:not(.admin) td.c-lead .leader-cell:has(.unsold) { grid-template-columns: auto; }
.leader-cell:has(.unsold) .badge-slot { display: none; }
.board-table .your-price { display: block; font-size: .75rem; font-weight: 600; color: #a07a10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .board-table .your-price { color: var(--brand-gold); }
@media (max-width: 960px) { .board-table td.c-lead .leader-name.unsold { display: inline; } }

/* optional details of a person (registration) */
.more-fields { margin: 0 0 var(--s4); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--s2) var(--s3); }
.more-fields > summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); padding: 4px 0; }
.more-fields[open] > summary { margin-bottom: var(--s2); }
.more-fields > .hint { margin: 0 0 var(--s3); }
.more-fields .field:last-child { margin-bottom: var(--s2); }
fieldset.editor[hidden] { display: none; }
@media (max-width: 720px) {
  /* results on a phone: each lot is a card */
  .results, .results tbody, .results tr, .results td { display: block; width: auto; }
  .results thead { display: none; }
  .results tr.result-row { padding: var(--s3); border-bottom: 1px solid var(--border); }
  .results td { border: 0 !important; padding: 2px 0 !important; text-align: left !important; }
  .results td:first-child { display: none; }
  .results td:nth-child(2), .results .winner-cell { min-width: 0; }
  .results td.row-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: var(--s2) !important; white-space: normal; }
}

/* sums under lot tables */
.totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2) var(--s5); margin: var(--s3) 0 0; }
.totals > div { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.totals dt { font-size: .75rem; color: var(--text-muted); font-weight: 600; }
.totals dd { margin: 0; font-weight: 700; font-size: 1rem; text-align: right; }
.totals .tot-best dd { font-size: 1.125rem; }
.totals .tot-delta dd { color: var(--success-fg, #16794c); }
@media (max-width: 720px) { .totals { justify-content: flex-start; } .totals > div { align-items: flex-start; } .totals dd { text-align: left; } }
.totals dd .hint { font-weight: 400; font-size: .75rem; }

/* the auction's mode: two options, one chosen */
.mode-picker { border: 0; padding: 0; margin: var(--s2) 0 var(--s4); display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; }
.mode-picker legend { margin-bottom: var(--s2); }
.mode-option { display: flex; gap: 10px; align-items: flex-start; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-weight: 400; }
.mode-option.on { border-color: var(--brand-gold); background: color-mix(in oklch, var(--brand-gold) 8%, transparent); }
.mode-option input { margin-top: 3px; accent-color: var(--brand-gold); }
.mode-option .hint { margin-top: 2px; }
fieldset:disabled .mode-option { cursor: not-allowed; opacity: .7; }
@media (max-width: 720px) { .mode-picker { grid-template-columns: 1fr; } }
.winner-block { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; align-items: flex-start; padding: var(--s4); margin: 0 0 var(--s4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); line-height: 1.45; }
.winner-block.outcome-confirmed { border-color: var(--success, #2f9e6a); }
.winner-block .winner-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.winner-block .winner-who > b { font-size: 1.125rem; }
.winner-block .winner-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
.winner-block .complete-auction { margin-top: var(--s2); }   /* one winner, decided: "Complete the auction" under the decision */
.winner-block .contacts { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mode-chip { background: var(--surface); font-family: var(--font); letter-spacing: normal; }
.results th.r, .board-table th.r { text-align: right; }
a.badge-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; cursor: pointer; }
a.badge-link:hover { text-decoration: none; filter: brightness(.95); box-shadow: 0 0 0 2px color-mix(in oklch, currentColor 25%, transparent); }
@media (max-width: 720px) { .winner-block .winner-side { align-items: flex-start; } }

/* e-mail texts in Settings: language tabs, then every letter folded */
.mail-group { margin: var(--s4) 0 6px; font: 700 .75rem/1.2 var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mail-list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.mail-letter + .mail-letter { border-top: 1px solid var(--border); }
.mail-letter > summary { gap: 8px; padding: 6px 8px 6px 14px; min-height: 44px; font-weight: 600; }
.mail-letter > summary:hover, .mail-letter[open] > summary { background: var(--surface); }
.mail-letter[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--border); }
.mail-letter > summary:focus-visible { outline-offset: -2px; }
.mail-body { padding: 14px; }
.mail-letter textarea { width: 100%; resize: vertical; }
.mail-vars span { display: inline-block; margin-right: 12px; }
.mail-help { margin-bottom: var(--s3); padding: 6px 8px 6px 14px; border-radius: var(--radius-md); background: var(--surface); }
.mail-help > summary { gap: 8px; font-weight: 600; }
.mail-help[open] > summary { margin-bottom: 0; }
.mail-help ul { margin: var(--s2) 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--text-sm); }
.mail-help .mail-vars-all { margin-top: 4px; gap: 2px; }
.mail-sample { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radius-sm, 6px); background: var(--bg); font: inherit; white-space: pre-wrap; }
.mail-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.mail-bar .hint { margin: 0; }
.mail-preview { display: grid; gap: 6px; margin: var(--s2) 0 var(--s3); padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.mail-preview .label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.mail-preview p { margin: 0; white-space: pre-line; }
.mail-preview-btn { justify-self: start; padding: 6px 14px; border-radius: 8px; background: #dfb63a; color: #1f2c35; font-weight: 700; }

/* ---------- tabs (Tabs.razor): one look everywhere; a row that does not fit scrolls sideways without a scrollbar ---------- */
.tabbar { --tabbar-bg: var(--page); position: relative; min-width: 0; }
.card .tabbar { --tabbar-bg: var(--bg); }
.tabbar-row { position: relative; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.tabbar-row::-webkit-scrollbar { display: none; }
.tabbar.dragging .tabbar-row { cursor: grabbing; user-select: none; }
.tabbar-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tabbar-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tabbar-tab .chip { height: 20px; font-family: var(--font); font-weight: 700; background: var(--primary-soft); color: var(--primary-soft-fg); }
.tabbar-line .tabbar-row { gap: 4px; box-shadow: inset 0 -1px var(--border); }
.tabbar-line .tabbar-tab { height: 46px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); }
.tabbar-line .tabbar-tab:hover { color: var(--text); }
.tabbar-line .tabbar-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.tabbar-pill .tabbar-tab { height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg); color: var(--text); }
.tabbar-pill .tabbar-tab:hover { border-color: var(--border-strong); }
.tabbar-pill .tabbar-tab.active { background: var(--primary-soft); color: var(--primary-soft-fg); border-color: transparent; }
.tabbar-pill .tabbar-tab:focus-visible { border-radius: var(--radius-full); }
.tabbar-arrow { position: absolute; top: 0; bottom: 0; z-index: 2; display: none; align-items: center; width: 44px; padding: 0 4px; border: 0; color: var(--text); cursor: pointer; }
.tabbar-arrow.left { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--tabbar-bg) 55%, transparent); }
.tabbar-arrow.right { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--tabbar-bg) 55%, transparent); }
.tabbar-arrow.left .icon { transform: rotate(90deg); }
.tabbar-arrow.right .icon { transform: rotate(-90deg); }
.tabbar-arrow .icon { padding: 4px; box-sizing: content-box; border-radius: 50%; background: var(--surface); }
.tabbar-arrow:hover .icon { background: var(--border); }
.tabbar.can-left .tabbar-arrow.left, .tabbar.can-right .tabbar-arrow.right { display: flex; }
@media (max-width: 640px) {
  .tabbar.with-icons .tabbar-tab:not(.active) .tabbar-label { display: none; }
  .tabbar.with-icons .tabbar-tab:not(.active) { padding: 0 12px; }
}

/* ---------- Settings: look (logo, sign-in welcome) ---------- */
.logo-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 760px) { .logo-slots { grid-template-columns: 1fr; } }
.logo-slot { display: grid; gap: 10px; }
.logo-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.logo-slot-head .doc-state { margin-left: 0; }
.logo-box { display: flex; align-items: center; height: 76px; padding: 0 20px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.logo-box img { height: 30px; width: auto; max-width: 220px; object-fit: contain; }
.logo-box-light { background: #ffffff; }
.logo-box-dark { background: var(--brand-navy); border-color: var(--brand-navy); }
.logo-actions, .mail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.login-preview { display: grid; gap: 8px; margin: var(--s2) 0 var(--s3); padding: 20px 24px; border-radius: var(--radius-md); background: var(--brand-navy); color: #ffffff; }
.login-preview img { height: 24px; width: auto; max-width: 180px; object-fit: contain; }
.login-preview b { font-size: 1.25rem; line-height: 1.3; }
.login-preview p { margin: 0; color: rgba(255, 255, 255, .78); white-space: pre-line; }
#login-text .tabbar { margin-bottom: var(--s3); }
/* ---------- Settings: mail sending ---------- */
.md-now { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s3); padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface); font-weight: 600; }
.md-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .md-ways { grid-template-columns: 1fr; } }
.md-from { margin: 6px 0 0; font-weight: 600; word-break: break-all; }
.md-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s3); }
.md-check { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border); }
.md-check .field { flex: 1 1 260px; margin-bottom: 0; }
.mail-texts > .tabbar { margin-bottom: var(--s3); }
.settings-panel > .tabbar, .settings > .tabbar { margin-bottom: 0; }
/* mail not set up (or switched off): the e-mail column stays as ticked, but greyed */
.notify-table.mail-off th:nth-child(3), .notify-table.mail-off td:nth-child(3) { opacity: .4; }
.check.is-off { opacity: .55; }
.letters-lang { border: 0; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 6px; }
/* BidRulesPicker: late bids extend the end — the two numbers side by side, "seconds" after each */
.extend-rule { margin: var(--s4) 0 var(--s5); }   /* the lots table below keeps its distance, ticked or not */
.extend-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s2); }
.input-suffix { display: flex; align-items: center; gap: 8px; }
.input-suffix input { width: 7em; }
.input-suffix span { color: var(--text-muted); font-size: var(--fs-sm, .875rem); }
.extend-hint { display: flex; align-items: center; gap: 6px; }
@media (max-width: 520px) { .extend-fields { grid-template-columns: 1fr; } }
.cl-lang { min-width: 130px; }
.step-default { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 320px; }
.mail-off-note { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
/* a key or a password with an "eye" (SecretInput) */
.secret-input { position: relative; }
.secret-input input { width: 100%; padding-right: 44px; }
.secret-input .iconbtn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.secret-input input::-ms-reveal, .secret-input input::-ms-clear { display: none; }   /* Edge's own eye: ours is enough */

/* the admin's "advanced" lots view: every bid (BidLog.razor) */
.board .tabbar { margin-bottom: var(--s3); }
.bid-log-bar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.bid-log-table { width: 100%; }
.bid-log-table th.r { text-align: right; }
.bid-log-table tr.round-row { cursor: pointer; }
.bid-log-table tr.round-row:hover td { background: var(--surface); }
.bid-log-table td.change { color: var(--success, #1a7f37); }
.bid-log-table .fold svg { transition: transform .15s; }
.bid-log-table tr.open .fold svg { transform: rotate(180deg); }
.bid-log-table tr.round-lots > td { background: var(--surface); padding-top: 0; }
.bid-log-table td.time { text-align: start; }
.bid-log-lots { width: 100%; margin: 0; }
.results-card .winner-block + .tabbar { margin-top: var(--s4); }
.results-card .tabbar { margin-bottom: var(--s3); }
.bid-log-lots th, .bid-log-lots td { font-size: .92em; }

/* ---------- loading splash: the GAZKI logo draws itself, the I turns into an auction gavel and knocks the tagline in (mt.js) ---------- */
.splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--bg); transition: background-color .45s, opacity .45s; cursor: pointer; }
.splash .logo-anim { width: min(80vw, 560px); height: auto; overflow: visible; }   /* its flight to the header: mt.js, frame by frame */
.splash.away { background-color: transparent; pointer-events: none; }   /* the logo flies to the header, the page shows behind it */
.splash.gone { opacity: 0; }
.splash.on-art { background: var(--brand-navy); clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.6, 0, .2, 1), opacity .45s; }   /* sign-in pages: the art panel's colours */
.splash.on-art .logo-anim { --ink: #fff; }
.splash-on .brand-logo img { visibility: hidden; }   /* the flying logo takes its place */
.splash-on #app > .wait { visibility: hidden; }   /* the first loading spinner: the splash shows instead */
.logo-anim { --ink: var(--brand-navy); }
:root[data-theme="dark"] .logo-anim { --ink: #fff; }
.la-letter { fill: var(--ink); fill-opacity: 0; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.play .la-letter { animation: la-draw .9s cubic-bezier(.6, 0, .3, 1) forwards, la-fill .45s ease-out forwards; animation-delay: calc(var(--i) * .16s), calc(.75s + var(--i) * .16s); }
@keyframes la-draw { to { stroke-dashoffset: 0; } }
@keyframes la-fill { to { fill-opacity: 1; stroke-width: 0; } }
.la-divider { fill: var(--ink); transform: scaleY(0); }
.play .la-divider { animation: la-grow .45s cubic-bezier(.2, .8, .2, 1) 1.55s forwards, la-knock .35s ease-out 2.76s; }
@keyframes la-grow { to { transform: scaleY(1); } }
@keyframes la-knock { 0% { transform: scaleY(1) translateX(0); } 30% { transform: scaleY(.94) translateX(3px); } 100% { transform: scaleY(1) translateX(0); } }
.la-head { fill: var(--brand-gold); transform: scale(0); }
.play .la-head { animation: la-head 2.2s ease-in-out 1.75s forwards; }
@keyframes la-head { 0% { transform: scale(0); } 12% { transform: scale(1.1); } 18%, 78% { transform: scale(1); } 100% { transform: scale(0); } }
.play .la-gavel { animation: la-swing 2.2s cubic-bezier(.5, 0, .5, 1) 1.75s forwards; }
@keyframes la-swing { 0%, 18% { transform: rotate(0); } 38% { transform: rotate(-24deg); } 46% { transform: rotate(9deg); } 52% { transform: rotate(5deg); } 58%, 78% { transform: rotate(7deg); } 100% { transform: rotate(0); } }
.la-impact { opacity: 0; }
.la-impact path { fill: none; stroke: var(--brand-gold); stroke-width: 3; stroke-linecap: round; }
.play .la-impact { animation: la-impact .5s ease-out 2.76s; }
@keyframes la-impact { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.la-tag { fill: var(--ink); opacity: 0; transform: translateX(-40px) scaleX(.6); transform-origin: 469px 50%; }
.play .la-tag { animation: la-shoot .6s cubic-bezier(.15, 1.5, .4, 1) forwards; animation-delay: calc(2.8s + var(--t) * .12s); }
@keyframes la-shoot { 0% { opacity: 0; transform: translateX(-40px) scaleX(.6); } 40% { opacity: 1; } 100% { opacity: 1; transform: translateX(0) scaleX(1); } }

/* Settings → Sounds */
.sound-all { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0; }
.sound-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sound-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 8px 0; border-bottom: 1px solid var(--border); }
.sound-list li:last-child { border-bottom: 0; }
.sound-list .check > span { display: flex; flex-direction: column; gap: 2px; }
.sound-list .hint { margin: 0; }
.sound-list li > .btn { flex: none; }
.prefs .sound-list.off { opacity: .55; }   /* sounds off: the list waits greyed out */
.prefs .field + .field { margin-top: var(--s4); }
.sound-list .hint + .hint { margin-top: 2px; }
.prefs .segmented { width: fit-content; max-width: 100%; }   /* as wide as its choices */
.prefs .pref-lang-header { margin-top: var(--s3); }   /* under the language buttons: the same choice in the header too */

/* ---------- loader: a small auction gavel knocking on its block, instead of a spinner (Loader.razor, index.html) ---------- */
.loader { width: 44px; height: 44px; flex: none; overflow: visible; }
.ld-block { fill: var(--brand-navy); opacity: .85; transform-origin: 12.5px 30px; animation: ld-block .9s ease-out infinite; }
.ld-handle { fill: var(--brand-navy); }
.ld-head { fill: var(--brand-gold); }
:root[data-theme="dark"] .ld-block, :root[data-theme="dark"] .ld-handle { fill: var(--text); }
.ld-gavel { transform-origin: 27px 12.5px; animation: ld-knock .9s cubic-bezier(.5, 0, .5, 1) infinite; }
.ld-hit { fill: none; stroke: var(--brand-gold); stroke-width: 1.6; stroke-linecap: round; opacity: 0; animation: ld-hit .9s ease-out infinite; }
@keyframes ld-knock { 0%, 20% { transform: rotate(18deg); } 52% { transform: rotate(-28deg); } 62% { transform: rotate(-22deg); } 100% { transform: rotate(18deg); } }
@keyframes ld-block { 0%, 50% { transform: scaleY(1); } 56% { transform: scaleY(.8); } 70%, 100% { transform: scaleY(1); } }
@keyframes ld-hit { 0%, 50% { opacity: 0; } 56% { opacity: 1; } 80%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ld-gavel, .ld-block, .ld-hit { animation: none; } }
/* in a button: small, in the button's own colour */
.btn .loader.btn-spinner { width: 1.4em; height: 1.4em; margin: -.2em 0; }
/* BusyButton: the label keeps its place (hidden), the gavel knocks in the middle — the button does not change size */
.btn-label { display: contents; }
.btn.is-busy { position: relative; }
.btn.is-busy .btn-label { visibility: hidden; }
.btn.is-busy .btn-label + .loader.btn-spinner { position: absolute; left: 50%; top: 50%; width: 1.6em; height: 1.6em; margin: 0; transform: translate(-50%, -50%); }
/* the UI kit's own busy ring (ui/components.css: transparent text + ::after) gives way to the gavel, drawn in the button's text colour */
.btn[aria-busy="true"]::after { content: none; }
.btn[aria-busy="true"] .loader.btn-spinner { color: var(--on-primary); }
.btn-secondary[aria-busy="true"] .loader.btn-spinner, .btn-ghost[aria-busy="true"] .loader.btn-spinner { color: var(--text-muted); }
.btn .btn-spinner .ld-block, .btn .btn-spinner .ld-handle, .btn .btn-spinner .ld-head { fill: currentColor; }
.btn .btn-spinner .ld-hit { stroke: currentColor; }
/* the very first load (before the app): in the middle of the screen */
#app > .wait { min-height: 100vh; padding: 0; }
#app > .wait .loader { width: 84px; height: 84px; }   /* the first load: bigger, alone on the screen */
.load-more { display: flex; justify-content: center; padding: var(--s5) 0 var(--s3); min-height: 76px; }   /* the end of a list that loads in parts */
/* Fields the browser filled itself (saved sign-in, address): a no-op animation the pages and mt.js listen for —
   Chrome fills a saved sign-in as the page opens without telling the page, so the submit button would stay off */
@keyframes mt-autofill { from { opacity: 1; } to { opacity: 1; } }
input:-webkit-autofill { animation: mt-autofill 1ms; }
input:autofill { animation: mt-autofill 1ms; }
/* The Terms and Conditions in a dialog (TermsDialog): the title and "Close" stay put, the text scrolls; a phone: the whole screen */
.modal.doc-modal { top: 4vh; bottom: 4vh; width: min(860px, calc(100vw - 32px)); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; padding: 0; overflow: hidden; outline: none; }
.doc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--border); }
.doc-modal-head h3 { margin: 0; }
.doc-modal-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 22px var(--s4); }
.doc-modal .form-actions { margin: 0; padding: 12px 22px; border-top: 1px solid var(--border); justify-content: flex-end; }
body:has(.doc-modal) { overflow: hidden; }
@media (max-width: 640px) {
    .modal.doc-modal { inset: 0; width: 100%; transform: none; border-radius: 0; }
    .doc-modal-head { padding-left: 16px; }
    .doc-modal-body { padding: 0 16px var(--s4); }
    .doc-modal .form-actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
    .doc-modal .form-actions .btn { flex: 1; }
}
/* PasswordCheck: the minimum length filling up under a new password, then a green tick; the repeat field: match or not */
.pw-check { display: grid; gap: 6px; margin-top: 2px; font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }
.pw-bar { height: 4px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; }
.pw-bar span { display: block; height: 100%; border-radius: inherit; background: var(--warning); transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base); }
.pw-rule { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pw-check.short .pw-rule { color: var(--danger-fg); }
.pw-check.ok .pw-rule { color: var(--success); }
.pw-check.ok .pw-bar span { background: var(--success); }

/* ---- PeriodPicker: the auction's start and end in one field, a two-month calendar in a dialog (one month, full screen on a phone) ---- */
.period-cell { grid-column: 2 / -1; }
@media (max-width: 760px) { .period-cell { grid-column: auto; } }
.period-field { width: 100%; height: var(--control-md); display: flex; align-items: center; gap: 10px; padding: 0 var(--s3); overflow: hidden; white-space: nowrap; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg); color: var(--text); font: 400 var(--text-base) / 1.5 var(--font); text-align: left; cursor: pointer; }
.period-field:hover { border-color: var(--primary); }
.period-field:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent); }
.period-field[aria-invalid="true"] { border-color: var(--danger); }
.period-field > .icon { color: var(--primary); flex: none; width: 18px; height: 18px; }
.period-end { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.period-k { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.period-v { white-space: nowrap; }
.period-v b { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 4px; }
.period-arrow { color: var(--text-muted); }
.period-len { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-soft-fg); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.period-len.bad, .period-sum .bad { color: var(--danger-fg); }
.period-len.bad { background: color-mix(in oklab, var(--danger) 12%, transparent); }

.modal.period-modal { top: 6vh; max-height: 88vh; width: min(720px, calc(100vw - 32px)); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; padding: 0; overflow: hidden; outline: none; }
.period-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 10px 12px 10px 22px; border-bottom: 1px solid var(--border); }
.period-head h3 { margin: 0; }
.period-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 22px; }
.period-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--s3); }
.period-side { display: grid; gap: 2px; padding: 10px 12px; border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.period-side.on { border-color: var(--primary); background: var(--primary-soft); }
.period-day { font-weight: 600; }
.modal .period-time { width: 100%; max-width: 150px; height: 44px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg); color: var(--text); font: 700 1.5rem var(--font); font-variant-numeric: tabular-nums; }
.period-tip { margin: 8px 0 4px; }

.cal { position: relative; }
.cal-prev, .cal-next { position: absolute; top: 2px; z-index: 1; }
.cal-prev { left: 0; } .cal-next { right: 0; }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cal-title { height: var(--control-md); display: grid; place-items: center; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { padding: 4px 0; text-align: center; font-size: .75rem; font-weight: 600; color: var(--text-muted); }
.cal-day { height: 38px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-day:hover:not(:disabled) { background: var(--surface); }
.cal-day.weekend { color: var(--text-muted); }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--primary); font-weight: 700; }
.cal-day.between { background: var(--primary-soft); color: var(--primary-soft-fg); border-radius: 0; }
.cal-day.start, .cal-day.end { background: var(--primary); color: #fff; font-weight: 700; }
.cal-day:disabled { color: var(--border-strong); cursor: default; }

.period-quick { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qchip { min-width: 58px; height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--text); font: 600 .875rem var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.qchip:hover:not(:disabled) { border-color: var(--primary); }
.qchip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.qchip:disabled { opacity: .45; cursor: default; }

.period-modal .period-foot { margin: 0; padding: 12px 22px; border-top: 1px solid var(--border); justify-content: space-between; align-items: center; }
.period-sum { color: var(--text-muted); }
.period-sum b { color: var(--text); }
body:has(.period-modal) { overflow: hidden; }

@media (max-width: 640px) {
    .period-arrow { display: none; }
    .period-field { height: auto; min-height: var(--control-md); padding: 6px var(--s3); display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
    .period-field > .icon { grid-row: span 2; }
    .period-len { grid-column: 2; margin-left: 0; justify-self: start; }
    .modal.period-modal { inset: 0; width: 100%; max-height: none; transform: none; border-radius: 0; }
    .period-head { padding-left: 16px; }
    .period-body { padding: 12px 16px; }
    .cal-months { grid-template-columns: 1fr; }
    .cal-second { display: none; }
    .cal-day { height: 42px; }
    .qchip { flex: 1 0 calc(20% - 6px); min-width: 0; }
    .period-modal .period-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    .period-modal .period-foot .btn { flex: none; min-width: 120px; }
}