/* Screen styles: login · no-access · more · users · settings — Direction A "לוח הכרטיסים".
   Tokens from css/tokens.css only (plus the few fixed "material" colours: paper slip, hazard black).
   Prefixes: lg- (login) · na- (no access) · mr- (more) · adm- (users + settings shared) · st- (settings). RTL: logical properties. */

/* ================================================================ shared bits */
.adm-err { color: var(--signal-ink); }
.adm-err[hidden] { display: none; }
.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.adm-span2 { grid-column: 1 / -1; }
.adm-pw { display: flex; gap: var(--sp-2); align-items: center; }
.adm-pw .input-wrap { flex: 1 1 auto; min-width: 0; }
.adm-pw .btn { flex: none; }
.adm-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.adm-form .adm-grid { margin-bottom: 0; }
.adm-seg { display: flex; width: 100%; }
.adm-seg button { flex: 1 1 0; justify-content: center; min-height: var(--touch-min); }
.adm-seg button[data-role="disabled"][aria-pressed="true"] { background: var(--signal); color: #fff; }
.adm-sheet .modal__body { gap: 14px; }

/* role colours: --rc is the "ink" of each role (stripe, stamp, tag) */
.adm-role--admin { --rc: var(--ink); }
.adm-role--editor { --rc: var(--amber-text); }
.adm-role--viewer { --rc: var(--ink-2); }
.adm-role--disabled { --rc: var(--signal); }
.adm-role--none { --rc: var(--ink-3); }

/* role pills on these screens: viewer = quiet outline, blocked = signal outline */
:is(.adm-tag, .adm-settings, .mr) .pill--role-viewer { background: transparent; color: var(--ink-2); box-shadow: 0 0 0 1px var(--ink-3) inset; }
:is(.adm-tag, .adm-settings, .mr) .pill--role-disabled { background: transparent; color: var(--signal-ink); box-shadow: 0 0 0 1px var(--signal) inset; }

/* bolted plate used by the settings + users screens */
.adm-plate { padding: 14px 18px 18px; }
.adm-plate > * { position: relative; z-index: 1; }
.adm-plate > .plate__head { margin-bottom: 12px; }

/* inline confirm (role change, new round, initial load) */
.adm-confirm {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: 9px; background: var(--plate-2);
  box-shadow: 0 0 0 1px var(--line-2) inset;
}
.adm-confirm--danger { background: var(--signal-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 32%, transparent) inset; padding-top: 16px; }
.adm-confirm--danger::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--signal) 0 7px, transparent 7px 14px); opacity: .85; }
.adm-confirm__msg { display: flex; gap: var(--sp-2); align-items: flex-start; }
.adm-confirm__msg svg.icon { margin-top: 3px; flex: none; }
.adm-confirm--danger .adm-confirm__msg { color: var(--signal-ink); }
.adm-confirm .input { background: var(--plate); }

/* show-once credentials: a printed slip (paper is a fixed material colour, same in both themes) */
.adm-reveal { display: flex; flex-direction: column; gap: var(--sp-3); }
.adm-slip {
  --slip: #F6F2E6; --slip-ink: #1B1F1C;
  position: relative; margin-bottom: 8px; padding: 14px 18px 18px; color: var(--slip-ink); border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(27, 31, 28, .06) 31px 32px), var(--slip);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(27, 31, 28, .1);
  transform: rotate(-.6deg);
}
.adm-slip::after {
  content: ""; position: absolute; inset-inline: 0; top: 100%; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 0h16L8 8z' fill='%23F6F2E6'/%3E%3C/svg%3E") repeat-x left top / 16px 8px;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .18));
}
.adm-slip__head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px dashed rgba(27, 31, 28, .35); font-weight: 600; font-size: 14px; }
.adm-slip__head svg.icon { color: #3D5A22; flex: none; }
.adm-slip__row { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; }
.adm-slip__k { font-size: 13px; color: #4A534C; flex: none; }
.adm-slip__dots { flex: 1 1 20px; min-width: 12px; border-bottom: 2px dotted rgba(27, 31, 28, .35); transform: translateY(-3px); }
.adm-slip__val { font-size: 20px; font-weight: 600; letter-spacing: .03em; user-select: all; overflow-wrap: anywhere; }
.adm-slip__bars {
  display: block; height: 24px; margin-top: 8px; opacity: .8;
  background: repeating-linear-gradient(90deg, var(--slip-ink) 0 2px, transparent 2px 4px, var(--slip-ink) 4px 5px, transparent 5px 8px, var(--slip-ink) 8px 11px, transparent 11px 13px);
}
.adm-reveal__actions .btn { min-height: 42px; }
.adm-slip__status:empty { display: none; }
.adm-reveal__note { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--amber-text); background: var(--amber-bg); border-radius: var(--radius-ctl); padding: var(--sp-2) var(--sp-3); box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent) inset; }
.adm-reveal__note svg.icon { margin-top: 3px; flex: none; }
/* "did you copy it?" — replaces a silent close while the one-time password has not been copied */
.adm-slip__warn { display: flex; gap: 8px; align-items: flex-start; color: var(--signal-ink); background: var(--signal-bg); border-radius: var(--radius-ctl); padding: var(--sp-3); box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 40%, transparent) inset; }
.adm-slip__warn svg.icon { margin-top: 3px; flex: none; }
.adm-slip__warn-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.adm-slip__warn .btn { min-height: 42px; }

/* ================================================================ login */
.lg-page { gap: 18px; }
.lg-plate {
  width: 100%; max-width: 420px; padding: 34px 26px 22px; border-radius: 14px; box-shadow: var(--shadow-pop);
}
.lg-plate > * { position: relative; z-index: 1; }
.lg-plate.is-shake { animation: lgShake .5s var(--ease); }
@keyframes lgShake { 0%, 100% { transform: none; } 18% { transform: translateX(-9px); } 36% { transform: translateX(8px); } 54% { transform: translateX(-5px); } 72% { transform: translateX(3px); } }
.lg-brand { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.lg-brand__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.lg-mark svg.icon { width: 46px; height: 46px; display: block; border-radius: 11px; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); }
.lg-brand h1 { font-size: 52px; line-height: .86; padding-top: 4px; white-space: nowrap; }
.lg-gate {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 10px; border-radius: 4px;
  background: var(--head); color: var(--amber-2); font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 -2px 0 rgba(0, 0, 0, .35) inset, 0 1px 2px rgba(0, 0, 0, .3);
}
.lg-gate svg.icon { width: 14px; height: 14px; }
.lg-cards { position: relative; width: 112px; height: 124px; flex: none; }
.lg-hang {
  --cw: 56px; --ch: 89px; position: absolute; top: 0; display: block; width: var(--cw); height: var(--ch);
  transform-origin: 50% calc(var(--cw) * .138);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)) drop-shadow(0 6px 6px rgba(20, 25, 20, .25));
  animation: lgSwing 1.6s cubic-bezier(.3, .6, .3, 1) .2s both;
}
.lg-hang .pin { top: calc(var(--cw) * .138 - 4.5px); }
.lg-hang--d { left: 0; --r: -7deg; }
.lg-hang--p { left: 46px; top: 12px; --r: 6deg; animation-delay: .35s; }
@keyframes lgSwing {
  0% { transform: rotate(calc(var(--r) + 16deg)); opacity: 0; }
  20% { opacity: 1; }
  40% { transform: rotate(calc(var(--r) - 7deg)); }
  62% { transform: rotate(calc(var(--r) + 3deg)); }
  82% { transform: rotate(calc(var(--r) - 1deg)); }
  100% { transform: rotate(var(--r)); opacity: 1; }
}
:root[data-theme="dark"] .lg-hang { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)) drop-shadow(0 6px 7px rgba(0, 0, 0, .55)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-hang { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)) drop-shadow(0 6px 7px rgba(0, 0, 0, .55)); } }

.lg-form { display: flex; flex-direction: column; gap: 16px; }
.lg-plate .btn--primary { min-height: 48px; font-size: 15.5px; }
.lg-err { display: flex; align-items: flex-start; gap: 9px; padding-block: 10px; }
.lg-err > svg.icon { margin-top: 2px; flex: none; }
.lg-err__text { flex: 1; min-width: 0; font-weight: 600; }
.lg-err__stamp { flex: none; margin-block: -3px; margin-inline-start: auto; }
.lg-err__stamp .stamp { font-size: 20px; padding: 2px 7px 0; }
.lg-note { margin: 0; text-align: center; }
.lg-slots { justify-content: center; margin: 18px auto 0; align-items: flex-end; display: flex; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.lg-slots .segbar__b { width: 9px; height: 15px; }

.lg-dev {
  position: relative; overflow: hidden; width: 100%; max-width: 420px; padding: 18px 16px 12px; font-size: var(--fs-small);
  background: var(--plate); border-radius: 12px; box-shadow: var(--shadow-plate), 0 0 0 1.5px color-mix(in srgb, var(--amber) 55%, transparent) inset;
}
.lg-dev::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--amber) 0 8px, #1a1a1a 8px 16px); }
.lg-dev__title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--amber-text); line-height: 1.35; }
.lg-dev__tag { flex: none; padding: 2px 7px; border-radius: 3px; background: var(--amber); color: var(--amber-ink); font: 700 15px/1.1 var(--font-display); letter-spacing: .06em; transform: rotate(-3deg); }
.lg-dev__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.lg-dev__row {
  width: 100%; min-height: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 8px;
  padding: 4px 10px; border: 0; border-radius: 7px; background: var(--plate-2); color: var(--ink); text-align: start; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line) inset; transition: background-color .15s, box-shadow .15s;
}
.lg-dev__row:hover { background: var(--plate-3); box-shadow: 0 0 0 1px var(--line-2) inset; }
.lg-dev__row .mono { font-size: 12.5px; overflow-wrap: anywhere; }
.lg-dev__pw { color: var(--ink-2); }
.lg-dev__foot { margin-top: 10px; }

/* ================================================================ no access */
.na-plate { width: 100%; max-width: 420px; padding: 30px 26px 24px; text-align: center; border-radius: 14px; box-shadow: var(--shadow-pop); }
.na-plate > * { position: relative; z-index: 1; }
.na-hang { --cw: 84px; --ch: 133px; position: relative; width: var(--cw); height: calc(var(--ch) + 6px); margin: 4px auto 16px; }
.na-hang .pin { top: calc(var(--cw) * .138 - 4.5px); }
.na-card {
  position: absolute; inset: 0 0 auto 0; transform-origin: 50% calc(var(--cw) * .138);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)) drop-shadow(0 7px 7px rgba(20, 25, 20, .28));
  animation: naSwing 1.8s cubic-bezier(.3, .6, .3, 1) .15s both;
}
@keyframes naSwing { 0% { transform: rotate(10deg); } 25% { transform: rotate(-6deg); } 48% { transform: rotate(3deg); } 70% { transform: rotate(-1.5deg); } 100% { transform: rotate(0); } }
.na-card__lock { position: absolute; inset: 34% 0 auto; display: grid; place-items: center; color: var(--amber); }
.na-card__lock svg.icon { width: 38px; height: 38px; stroke-width: 1.7; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.na-card .fcard__band { background: repeating-linear-gradient(-45deg, var(--signal) 0 7px, #1a1a1a 7px 14px); color: #fff; font-size: 12px; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); letter-spacing: .08em; }
.na-plate h1 { font-size: 38px; line-height: .98; padding-top: 4px; }
.na-text { margin: 12px 0 20px; }

/* ================================================================ more */
.mr { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.mr-me { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.mr-me > * { position: relative; z-index: 1; }
.mr-me__av { width: 48px; height: 48px; font-size: 22px; }
.mr-me__who { flex: 1; min-width: 0; }
.mr-me__name { font-weight: 600; font-size: 16px; }
.mr-groups { display: grid; gap: 16px; }
.mr-group { display: grid; gap: 8px; }
.mr-cap { display: flex; align-items: center; gap: 10px; font: 700 17px/1 var(--font-display); letter-spacing: .06em; color: var(--ink-3); padding-inline: 2px; }
.mr-cap::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.mr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mr-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 92px;
  padding: 12px 14px; border-radius: var(--radius-card); background: var(--plate); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-plate); transition: transform .2s var(--spring), box-shadow .2s;
}
.mr-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-plate), 0 8px 16px -8px rgba(0, 0, 0, .35); }
.mr-tile:active { transform: scale(.98); }
.mr-tile:focus-visible { outline-offset: 3px; border-radius: 12px; }
.mr-tile__ico {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px;
  background: var(--head); color: var(--amber); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 2px 4px -1px rgba(0, 0, 0, .35);
}
.mr-tile__ico svg.icon { width: 19px; height: 19px; }
.mr-tile__t { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.mr-tile__lock { position: absolute; top: 12px; inset-inline-end: 12px; color: var(--ink-3); }
.mr-tile__lock svg.icon { width: 15px; height: 15px; }
.mr-out { min-height: 46px; margin-top: 4px; }

/* ================================================================ users */
.adm-legend {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; margin-bottom: 16px; padding: 16px 20px;
}
.adm-legend > * { position: relative; z-index: 1; }
.adm-legend__item { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink-2); }
.adm-legend .stamp { --c: var(--rc); }
.adm-legend__item:nth-child(even) .stamp { transform: rotate(3deg); }
.adm-legend__item .small { line-height: 1.35; }

.adm-board {
  position: relative; margin-bottom: 18px; padding: 14px; border-radius: 12px;
  background-color: var(--board);
  background-image: radial-gradient(circle at 50% 50%, var(--hole) 0 1.7px, transparent 2.3px);
  background-size: 16px 16px; background-position: 8px 8px;
  box-shadow: 0 0 0 1px var(--board-edge), inset 0 2px 5px rgba(0, 0, 0, .08), inset 0 0 0 5px color-mix(in srgb, var(--board-edge) 40%, transparent);
}
.adm-users { display: grid; gap: 10px; }

/* an ID tag: role stripe on the edge, lanyard slot punched through, content in columns */
.adm-tag {
  position: relative; overflow: hidden; display: grid; align-items: center; gap: 10px 18px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, .8fr) auto;
  padding: 12px 18px 12px 16px; padding-inline-start: 42px;
  border-radius: 10px; background: var(--plate); box-shadow: var(--shadow-card);
  transition: transform .25s var(--spring), box-shadow .2s;
}
.adm-tag::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 7px; background: var(--rc); }
.adm-tag--admin { --rc: var(--ink); }
.adm-tag--editor { --rc: var(--amber); }
.adm-tag--viewer { --rc: var(--ink-3); }
.adm-tag--disabled { --rc: var(--signal); }
.adm-tag--disabled::before { background: repeating-linear-gradient(-45deg, var(--signal) 0 5px, #1a1a1a 5px 10px); }
.adm-tag__slot {
  position: absolute; inset-inline-start: 19px; top: 50%; width: 8px; height: 30px; margin-top: -15px; border-radius: 4px;
  background: var(--board); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 1px 0 var(--plate-hi);
}
.adm-tag.is-self { box-shadow: var(--shadow-card), 0 0 0 2px color-mix(in srgb, var(--amber) 55%, transparent); }
.adm-tag.is-disabled {
  background: repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--ink) 4.5%, transparent) 7px 14px), var(--plate-2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px color-mix(in srgb, var(--signal) 30%, transparent);
}
.adm-tag.is-disabled :is(.adm-who, .adm-date) { opacity: .5; filter: grayscale(1); }
.adm-tag.is-disabled .adm-name { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.adm-tag.is-disabled .stamp { --c: var(--signal); }
.adm-who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.adm-av { width: 42px; height: 42px; font-size: 19px; }
.adm-tag.is-disabled .adm-av { background: var(--plate-3); color: var(--ink-3); }
.adm-who__txt { min-width: 0; }
.adm-name { font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.adm-uname { overflow-wrap: anywhere; text-align: right; }
.adm-rolectl { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.adm-rolectl .stamp { margin-inline: 4px; }
.adm-select { width: auto; min-width: 110px; min-height: 38px; }
.adm-lock { display: inline-flex; align-items: center; gap: 4px; }
.adm-date__label { display: none; }
.adm-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
.adm-panel { grid-column: 1 / -1; }

/* permission-change log: a ledger — ruled paper, red margin line, mono time stamps */
.adm-log { padding: 16px 18px 18px; }
.adm-log > * { position: relative; z-index: 1; }
.adm-log .plate__head { margin-bottom: 6px; }
.adm-log__lock { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--font-mono); color: var(--ink-3); }
.adm-log__lock svg.icon { width: 13px; height: 13px; }
.adm-log__intro { margin: 0 0 12px; color: var(--ink-2); }
.adm-ledger-wrap {
  overflow: hidden; border-radius: 6px; background: var(--plate-2);
  box-shadow: 0 0 0 1px var(--line-2) inset; border-inline-start: 3px double color-mix(in srgb, var(--signal) 60%, transparent);
}
.adm-ledger { width: 100%; border-collapse: collapse; }
.adm-ledger th {
  text-align: start; padding: 9px 14px; font: 600 11px/1 var(--font-sans); letter-spacing: .06em; color: var(--ink-3);
  background: var(--plate-3); border-bottom: 2px solid var(--line-2); white-space: nowrap;
}
.adm-ledger td { padding: 10px 14px; vertical-align: top; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.adm-ledger tbody tr:last-child td { border-bottom: 0; }
.adm-ledger tbody tr:hover { background: color-mix(in srgb, var(--plate) 60%, transparent); }
.adm-led__t { font-weight: 500; font-size: 12.5px; }
.adm-lt {
  display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 1.5;
  color: var(--rc); box-shadow: 0 0 0 1px currentColor inset; background: transparent;
}
.adm-lt.is-new { background: color-mix(in srgb, var(--rc) 12%, transparent); }
.adm-chg { white-space: nowrap; }

/* ================================================================ settings */
.adm-settings { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.adm-settings .stack { gap: 16px; }

/* the active round: 18 = 13 + 5 */
.st-round { display: grid; gap: 14px; }
.st-round__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.adm-round-name { font: 700 28px/1 var(--font-display); letter-spacing: .01em; padding-top: 3px; }
.st-eq {
  display: flex; align-items: flex-start; gap: 14px; width: fit-content; max-width: 100%; padding: 14px 22px 12px; border-radius: 10px;
  background: var(--plate-2); box-shadow: 0 0 0 1px var(--line) inset, 0 2px 5px rgba(0, 0, 0, .06) inset;
}
.st-term { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 52px; }
.st-term b { font: 700 clamp(56px, 16vw, 88px)/.78 var(--font-display); letter-spacing: -.01em; padding-top: 6px; color: var(--ink); }
.st-term > span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.st-op { font: 400 clamp(34px, 9vw, 56px)/1 var(--font-display); color: var(--ink-3); padding-top: 10px; }

/* new round */
.st-newround__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-newround__ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--plate-2); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line) inset; flex: none; }
.st-newround__txt { flex: 1 1 140px; color: var(--ink-2); }
.st-newround .adm-form { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.adm-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.adm-counts label { display: flex; align-items: center; gap: 6px; }
.adm-num { font: 600 22px/1 var(--font-mono); text-align: center; }

/* initial load */
.adm-load__intro { margin: 0 0 14px; color: var(--ink-2); }
.adm-pastebox { margin-bottom: var(--sp-4); }
.adm-paste { min-height: 96px; padding: var(--sp-2) var(--sp-3); line-height: 1.6; resize: vertical; font-family: var(--font-mono); }
.adm-okline { color: var(--ok-c); display: flex; align-items: center; gap: 4px; }
.adm-perrors { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-ctl); background: var(--signal-bg); color: var(--signal-ink); }
.adm-perrors ul { margin: 4px 0 0; padding-inline-start: 18px; }
.adm-pline { font-family: var(--font-mono); unicode-bidi: plaintext; overflow-wrap: anywhere; }

.st-preview { margin: 4px 0 12px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--board-edge); }
.adm-counter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px;
  background: var(--head); color: var(--head-ink); font-size: var(--fs-small); font-weight: 500;
}
.adm-cnt { display: inline-flex; align-items: center; gap: 6px; }
.adm-cnt .sw { width: 12px; height: 8px; }
.adm-cnt b { font: 600 14px/1 var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.adm-cnt__sep { color: var(--head-ink-2); }
.adm-cnt.is-ok b { color: #B9DA8A; }
.adm-cnt.is-bad b { color: #FF8A55; text-decoration: underline wavy 1px; text-underline-offset: 4px; }
.adm-counter .pill--ok { background: rgba(175, 208, 127, .14); color: #B9DA8A; box-shadow: none; margin-inline-start: auto; }
.adm-submitrow .adm-counter { background: transparent; color: var(--ink); padding: 0; }
.adm-submitrow .adm-cnt__sep { color: var(--ink-3); }
.adm-submitrow .adm-cnt.is-ok b { color: var(--ok-c); }
.adm-submitrow .adm-cnt.is-bad b { color: var(--signal); }
.adm-submitrow .adm-counter .pill--ok { background: var(--ok-bg); color: var(--ok-c); margin-inline-start: 0; }

/* the slots of the round as a board: cards drop on their pins as rows get a fuel type */
.st-bench {
  --cw: 36px; --ch: 57px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; padding: 14px 16px 16px;
  background-color: var(--board);
  background-image: radial-gradient(circle at 50% 50%, var(--hole) 0 1.7px, transparent 2.3px);
  background-size: 16px 16px; background-position: 8px 8px;
}
.st-grp { display: grid; gap: 8px; align-content: start; min-width: 0; }
.st-grp__cap { display: flex; align-items: center; gap: 7px; font: 700 15px/1 var(--font-display); letter-spacing: .06em; color: var(--ink-2); }
.st-grp__cap b { font: 600 11.5px/1 var(--font-mono); letter-spacing: 0; color: var(--ink-3); }
.st-pegs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.st-slot { position: relative; width: var(--cw); height: calc(var(--ch) + 4px); flex: none; }
.st-slot::before { content: ""; position: absolute; inset: 0 0 4px; border-radius: 4px; border: 1.5px dashed var(--line-2); }
.st-slot.is-extra::before { border-color: var(--signal); }
.st-slot .pin { width: 6px; height: 6px; margin-left: -3px; top: calc(var(--cw) * .138 - 3px); }
.st-hang {
  position: absolute; inset: 0 0 auto; display: block; width: var(--cw); height: var(--ch); transform-origin: 50% calc(var(--cw) * .138);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)) drop-shadow(0 3px 3px rgba(20, 25, 20, .22));
}
.st-slot.is-extra .st-hang { filter: drop-shadow(0 0 0 var(--signal)) drop-shadow(0 0 2px var(--signal)); }
.st-hang.is-drop { animation: stDrop .6s var(--spring) both; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes stDrop { 0% { opacity: 0; transform: translateY(-20px) rotate(7deg); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }

.adm-lgrid { display: flex; flex-direction: column; }
.adm-lrow {
  display: grid; align-items: center; gap: 6px var(--sp-2);
  grid-template-columns: 26px minmax(120px, 1fr) auto minmax(130px, 180px) 36px;
  grid-template-areas: "n num fuel holder del" ". err err err err";
  padding: 6px 0; border-top: 1px solid var(--line);
}
.adm-lrow:first-child { border-top: 0; }
.adm-lrow > .adm-lrow__n { grid-area: n; text-align: center; font-family: var(--font-mono); }
.adm-lrow > .input { grid-area: num; }
.adm-lrow > .adm-fuel { grid-area: fuel; }
.adm-lrow > .select { grid-area: holder; }
.adm-lrow > .btn { grid-area: del; padding: 0; width: 36px; color: var(--ink-3); }
.adm-lrow > .adm-lrow__err { grid-area: err; }
.adm-lrow__err[hidden] { display: none; }
.adm-lrow.has-error > .input, .adm-lrow.has-error > .select { box-shadow: 0 0 0 2px var(--signal) inset; }
.adm-fuel button { min-height: var(--touch-min); }
.adm-problems { margin: var(--sp-2) 0 0; padding-inline-start: 18px; color: var(--ink-2); }
.adm-problems:empty { display: none; }
.adm-submitrow { margin-top: var(--sp-3); gap: var(--sp-3); }

/* side column */
.adm-me__row { display: flex; align-items: center; gap: 12px; }
.adm-me__name { font-weight: 600; }
.adm-me__txt { margin: 10px 0 12px; }
.adm-co { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm-co li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: var(--plate-2); box-shadow: 0 0 0 1px var(--line) inset; flex-wrap: wrap; }
.adm-co__name { font-weight: 600; }
.adm-co__code { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: var(--head); color: var(--head-ink-2); letter-spacing: .04em; }

/* ================================================================ responsive */
@media (max-width: 1100px) {
  .adm-settings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .adm-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; }
  .adm-legend__item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .adm-board { padding: 10px; background-size: 12px 12px; border-radius: 10px; }
  .adm-tag { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 12px 12px 14px; padding-inline-start: 38px; gap: 10px; }
  .adm-who { grid-column: 1; grid-row: 1; }
  .adm-date { grid-column: 2; grid-row: 1; align-self: start; text-align: end; font-size: var(--fs-caption); color: var(--ink-3); }
  .adm-date .caption { display: none; }
  .adm-rolectl, .adm-actions { grid-column: 1 / -1; }
  .adm-rolectl .adm-select { flex: 1 1 auto; }
  .adm-actions { justify-content: flex-start; }
  .adm-actions .btn { flex: 1 1 0; }
  .adm-tag__slot { inset-inline-start: 17px; }
  .lg-plate { padding-inline: 20px; }
}
@media (max-width: 700px) {
  .adm-ledger thead { display: none; }
  .adm-ledger, .adm-ledger tbody, .adm-ledger tr, .adm-ledger td { display: block; width: 100%; }
  .adm-ledger tr { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
  .adm-ledger tbody tr:last-child { border-bottom: 0; }
  .adm-ledger td { display: flex; gap: 10px; padding: 2px 0; border: 0; }
  .adm-ledger td::before { content: attr(data-label); flex: none; width: 62px; color: var(--ink-3); font-size: 11.5px; padding-top: 2px; }
  .adm-ledger td > div { margin-top: 0; }
  .adm-ledger td:first-child { flex-wrap: wrap; }
  .adm-chg { white-space: normal; }
}
@media (max-width: 600px) {
  .adm-grid { grid-template-columns: minmax(0, 1fr); }
  .adm-plate { padding: 12px 14px 16px; }
  .adm-lrow {
    grid-template-columns: 22px auto minmax(0, 1fr) 36px;
    grid-template-areas: "n num num del" ". fuel holder holder" ". err err err";
  }
  .adm-pw { flex-wrap: wrap; }
  .adm-pw .input-wrap { flex-basis: 100%; }
  .adm-slip__val { font-size: 17px; }
  .adm-counts { gap: var(--sp-2); }
  .st-eq { padding: 12px 14px 10px; gap: 8px; }
  .st-term { min-width: 0; }
  .st-term > span { font-size: 11.5px; gap: 4px; }
  .st-op { padding-top: 4px; }
  .st-bench { padding: 12px; gap: 12px 18px; background-size: 12px 12px; }
  .adm-counter { padding: 9px 12px; }
  .lg-brand h1 { font-size: 46px; }
  .lg-cards { width: 100px; }
  .lg-hang--p { left: 40px; }
  .adm-round-name { font-size: 24px; }
}
@media (max-width: 370px) {
  .lg-cards { display: none; }
  .mr-grid { gap: 8px; }
}

/* usernames are LTR text inside RTL blocks: keep them hugging the name above them */
:is(.mr-me, .adm-me) .mono { display: block; text-align: right; }
@media (min-width: 700px) {
  .mr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mr-tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 66px; }
  .mr-tile__lock { top: 50%; margin-top: -8px; }
}