/* ==========================================================================
   SGFX Gold Rush — admin and raffle stage

   Loaded after app.css and reusing its tokens. Different register from the
   public flow: this is a tool for staff standing at a stand, so it is dense,
   dark (it runs on the booth's own screens, often beside a projector feed) and
   gets out of the way. Same colour discipline: cyan is the system, gold is
   only ever the prize.

   The warrant is square because it is printed matter. The admin is software,
   so it takes one small radius throughout, and surfaces are separated by a
   raised panel colour plus a 1px top highlight rather than by shadows.
   ========================================================================== */

.admin,
.stage,
.login {
  --r: 6px;
  --panel: oklch(0.213 0.058 263);
  --hair: oklch(0.968 0.005 250 / 0.13);
  --hair-strong: oklch(0.968 0.005 250 / 0.24);
}

/* ---- Sign in ------------------------------------------------------------ */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: var(--field);
}

/* Without this cap the fields inherit the form's full width and run the whole
   way across the viewport. */
.login__panel {
  width: 100%;
  max-width: 23rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 1px 0 oklch(0.968 0.005 250 / 0.05);
  color: var(--on-field);
}

.login__panel .wordmark {
  color: var(--on-field);
}

.login__panel .wordmark__plate {
  background: var(--cyan);
  color: var(--field-deep);
}

.login__panel h1 {
  font-size: var(--step-2);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  letter-spacing: -0.022em;
}

.login__panel .form {
  gap: var(--sp-3);
}

/* The only action on the page, so it keeps the brand fill rather than the
   quiet grey the rest of the admin uses. */
.login__panel .btn[type='submit'] {
  min-height: 50px;
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--field-deep);
  font-size: 1rem;
  font-weight: 800;
}

.login__panel .btn[type='submit']:hover {
  background: oklch(0.918 0.132 191);
  border-color: oklch(0.918 0.132 191);
  color: var(--field-deep);
}

.login__panel .btn[type='submit'] .btn__spinner {
  border-color: oklch(0.145 0.048 263 / 0.3);
  border-top-color: var(--field-deep);
}

.admin {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--field);
  color: var(--on-field);
}

/* The mark is already white, so on every dark surface it needs no plate. */
.topbar .brand img,
.login__panel .brand img {
  height: 28px;
}

.login__panel .brand img {
  height: 34px;
}

.draw__brand .brand img {
  height: clamp(1.4rem, 0.9rem + 1.6vw, 2.2rem);
}

/* ---- Top bar ------------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 0.65rem clamp(1rem, 3vw, 1.75rem);
  background: color-mix(in oklch, var(--field-deep) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}

.topbar .wordmark {
  color: var(--on-field);
}

.topbar .wordmark__plate {
  background: var(--cyan);
  color: var(--field-deep);
}

.topbar__note {
  color: var(--on-field-2);
  font-size: var(--step--1);
  font-weight: 600;
  padding-left: 0.65rem;
  border-left: 1px solid oklch(0.968 0.005 250 / 0.2);
}

.topbar__nav {
  display: flex;
  gap: 0.15rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.topbar__nav a {
  padding: 0.4rem 0.7rem;
  border-radius: var(--r);
  color: var(--on-field-2);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.topbar__nav a:hover {
  background: var(--field-lift);
  color: var(--on-field);
}

.topbar__nav a[aria-current='page'] {
  background: var(--cyan);
  color: var(--field-deep);
}

.admin__body {
  flex: 1;
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding: var(--sp-5) clamp(1rem, 3vw, 1.75rem) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.admin__head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin__head h1 {
  font-size: var(--step-2);
  font-family: var(--sans);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--on-field);
}

.admin__head p {
  color: var(--on-field-2);
  font-size: 0.9375rem;
  max-width: 76ch;
}

/* ---- Summary tiles ------------------------------------------------------
   Numbers at a readable size, not a hero-metric wall: the label sits under the
   figure so a row of tiles scans as a sentence rather than a scoreboard.    */
.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
}

.readout div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.1rem;
  padding: 0.8rem 0.9rem;
  background: var(--panel);
}

.readout dt {
  color: var(--on-field-2);
  font-size: 0.75rem;
}

.readout dd {
  margin: 0;
  color: var(--on-field);
  font-size: 1.4rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 108;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.readout dd[data-accent='gold'] {
  color: var(--gold-bright);
}

/* A timestamp is not a figure: at figure size it wraps and unbalances the row. */
.readout dd[data-kind='text'] {
  font-size: 0.9375rem;
  font-weight: 600;
  padding-block: 0.2rem;
}

/* ---- Filters ----------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

/* Controls in a filter bar sit inline and shrink; the full-width sizing that
   app.css gives a form field would stack them down the page. */
.filters .input,
.filters .select,
.filters .btn {
  width: auto;
  min-height: 42px;
  padding: 0.4rem 0.65rem;
  font-size: 0.875rem;
}

.filters .select {
  padding-right: 2rem;
}

.filters .btn {
  padding: 0.4rem 1rem;
}

.filters .input[type='search'] {
  min-width: 15rem;
  flex: 1 1 15rem;
}

/* ---- Table ------------------------------------------------------------- */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 1px 0 oklch(0.968 0.005 250 / 0.05);
}

table.data {
  width: 100%;
  min-width: 54rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

/* Sentence case, not tracked caps: the columns are read, not shouted. */
table.data th {
  position: sticky;
  top: 0;
  padding: 0.7rem;
  background: var(--field-lift);
  color: var(--on-field-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

table.data td {
  padding: 0.75rem 0.7rem;
  border-top: 1px solid var(--hair);
  color: var(--on-field-2);
  vertical-align: middle;
}

table.data tr:hover td {
  background: oklch(0.235 0.062 263);
}

table.data td b {
  color: var(--on-field);
}

table.data a {
  color: var(--cyan);
}

table.data a:hover {
  color: var(--on-field);
}

/* Mono earns its place on serials and phone numbers, which get compared
   character by character. Nothing else. */
.serial {
  color: var(--gold-bright);
  font-family: var(--mono);
  font-variation-settings: 'wdth' 87.5;
  font-size: 0.6875rem;
  font-weight: 700;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.chip {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--on-field-2);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.chip--trader { border-color: var(--cyan); color: var(--cyan); }
.chip--ib { border-color: oklch(0.78 0.13 155); color: oklch(0.82 0.14 155); }
.chip--exploring { color: var(--on-field-2); }
.chip--winner { border-color: var(--gold); color: var(--gold-bright); }
.chip--claimed { border-color: oklch(0.78 0.13 155); color: oklch(0.84 0.14 155); }
.chip--shortlisted { border-color: var(--cyan); color: var(--cyan); }
.chip--disqualified { border-color: oklch(0.62 0.19 26); color: oklch(0.78 0.15 26); }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--on-field-2);
  font-size: 0.8125rem;
}

.pager a {
  color: var(--cyan);
  font-weight: 700;
}

.empty {
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  color: var(--on-field-2);
  font-size: 0.9375rem;
}

/* ---- Admin notes and panels -------------------------------------------- */
.admin .note {
  border-color: var(--hair-strong);
  background: var(--field-lift);
  color: var(--on-field-2);
}

.admin .note strong {
  color: var(--on-field);
}

.admin .note--alert {
  border-color: oklch(0.62 0.19 26);
  background: oklch(0.28 0.08 26);
  color: oklch(0.9 0.08 26);
}

.admin .note--live {
  border-color: var(--cyan);
  background: oklch(0.25 0.05 220);
  color: var(--on-field);
}

.admin .note--prize {
  border-color: var(--gold);
  background: oklch(0.28 0.06 82);
  color: var(--gold-bright);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 1px 0 oklch(0.968 0.005 250 / 0.05);
}

.panel h2 {
  font-size: var(--step-1);
  font-family: var(--sans);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--on-field);
}

.panel p {
  color: var(--on-field-2);
  font-size: 0.875rem;
  max-width: 74ch;
}

.panel a {
  color: var(--cyan);
}

.rowactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.rowactions .btn {
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  font-size: 0.8125rem;
}

.admin .linkbtn {
  color: var(--cyan);
}

.admin .linkbtn:hover {
  color: var(--on-field);
}


/* ==========================================================================
   Forms on the dark field

   app.css styles every control for the paper sheet: dark ink labels, a light
   well, a dark select arrow. All of that disappears on the dark admin, so the
   whole family is restated here once rather than patched rule by rule as each
   invisible control is noticed.
   ========================================================================== */
.admin .field-row > label,
.admin .fieldset__legend,
.login__panel .field-row > label {
  color: var(--on-field);
}

.admin .hint,
.admin .muted-sm,
.login__panel .hint,
.login__panel .muted-sm {
  color: var(--on-field-2);
}

.admin .error-text,
.login__panel .error-text {
  color: oklch(0.82 0.14 26);
}

.admin .check,
.login__panel .check {
  color: var(--on-field-2);
}

.admin .check input,
.login__panel .check input {
  border-color: var(--hair-strong);
  background-color: var(--field-lift);
}

/* app.css sets `background` as a shorthand, which also carries the select
   arrow's size and position. Only the colour is overridden here so the arrow
   geometry survives; its ink is restated separately below. */
.admin .input,
.admin .select,
.admin textarea.input,
.login__panel .input {
  border-color: var(--hair-strong);
  border-bottom-color: oklch(0.968 0.005 250 / 0.34);
  background-color: var(--field-lift);
  color: var(--on-field);
}

.admin .input::placeholder,
.admin textarea.input::placeholder,
.login__panel .input::placeholder {
  color: var(--on-field-2);
}

.admin .input:hover,
.admin .select:hover,
.admin .input:focus,
.admin .select:focus,
.admin textarea.input:focus,
.login__panel .input:hover,
.login__panel .input:focus {
  background-color: oklch(0.295 0.062 263);
  border-color: var(--cyan);
}

.admin .select {
  background-image: linear-gradient(45deg, transparent 50%, var(--on-field-2) 50%),
    linear-gradient(135deg, var(--on-field-2) 50%, transparent 50%);
}

.admin .input[aria-invalid='true'] {
  border-color: oklch(0.62 0.19 26);
  background-color: oklch(0.28 0.08 26);
}

.admin textarea.input {
  font-family: inherit;
}

/* ==========================================================================
   Buttons

   One plain style for the whole admin. app.css gives .btn a cyan fill and a
   dark-ink label, which belongs on paper: on the dark field that would be both
   loud and, for .btn--quiet, invisible. Staff press these a hundred times a
   day, so they are quiet and uniform, and only the raffle stage keeps gold.
   ========================================================================== */
.admin .btn,
.login__panel .btn {
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r);
  background: var(--field-lift);
  color: var(--on-field);
  font-size: 0.875rem;
  font-weight: 600;
}

.admin .btn:hover,
.login__panel .btn:hover {
  background: oklch(0.305 0.06 263);
  border-color: oklch(0.968 0.005 250 / 0.4);
  color: var(--on-field);
}

.admin .btn--quiet,
.login__panel .btn--quiet {
  background: transparent;
  color: var(--on-field);
}

.admin .btn--quiet:hover,
.login__panel .btn--quiet:hover {
  background: var(--field-lift);
  color: var(--on-field);
}

.admin .btn[disabled] {
  opacity: 0.45;
}

/* The stage is crowd-facing, so the prize action stays gold there. */
.stage .btn--quiet {
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--on-field);
}

.stage .btn--quiet:hover {
  background: var(--field-lift);
  border-color: var(--cyan);
  color: var(--on-field);
}

.stage .btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: oklch(0.22 0.05 70);
}

.stage .btn--gold:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: oklch(0.22 0.05 70);
}

/* ---- Lookup result ----------------------------------------------------- */
.lookup {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--gold);
  border-radius: var(--r);
  background: var(--panel);
}

.lookup__label {
  color: var(--gold);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lookup__code {
  font-variation-settings: 'wdth' 87.5;
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  font-weight: 700;
}

.kv {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: 0.35rem var(--sp-4);
  margin: 0;
  font-size: 0.875rem;
}

.kv dt {
  color: var(--on-field-2);
  font-size: 0.75rem;
  font-weight: 700;
  padding-top: 0.12em;
}

.kv dd {
  margin: 0;
  color: var(--on-field);
  word-break: break-word;
}

/* ==========================================================================
   Raffle stage — the screen the crowd watches at the stand.
   Reads at three metres on a booth monitor and still works on a 390px tablet.
   Flat navy field: no ambient glow, no mesh.
   ========================================================================== */
.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--field);
  color: var(--on-field);
}

.draw {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vh, 2.25rem);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
}

.draw__stagegroup {
  display: contents;
}

.draw[data-state='won'] .draw__stagegroup {
  display: none;
}

.draw__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--on-field-2);
  font-size: clamp(0.75rem, 0.65rem + 0.5vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.draw__brand span {
  padding-left: 0.75rem;
  border-left: 1px solid var(--hair-strong);
}

/* Set in the didone, like the head of a banknote. */
.draw__title {
  margin-top: 0.4rem;
  font-size: clamp(2rem, 1.1rem + 5.4vw, 4.6rem);
  font-family: var(--sans);
  font-variation-settings: 'wdth' 122;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--on-field);
}

.draw__consignment {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-size: clamp(0.75rem, 0.66rem + 0.35vw, 0.9rem);
  font-weight: 700;
}

.draw__consignment img {
  width: 30px;
  height: auto;
}

/* ---- Reels: letterpress number wheels ---------------------------------- */
.reels {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.25rem, 0.9vw, 0.7rem);
  padding: clamp(0.4rem, 1vw, 0.85rem);
  border: 1px solid oklch(0.968 0.005 250 / 0.28);
  background: var(--field-deep);
  max-width: 100%;
}

.reels[data-spinning] {
  border-color: var(--cyan);
}

.reels__prefix {
  display: grid;
  place-items: center;
  padding: 0 clamp(0.4rem, 1.2vw, 0.9rem);
  color: var(--on-field-2);
  font-family: var(--mono);
  font-size: clamp(0.85rem, 0.5rem + 1.7vw, 1.6rem);
  font-weight: 700;
}

.reel {
  --cell: clamp(3.5rem, 1.4rem + 11.6vw, 8.8rem);
  position: relative;
  flex: 0 1 auto;
  width: clamp(2.55rem, 1rem + 8.4vw, 6.4rem);
  height: var(--cell);
  overflow: hidden;
  background: var(--field-lift);
  box-shadow: inset 0 0 0 1px oklch(0.968 0.005 250 / 0.2);
}

/* Barrel shading, so a spinning strip reads as a physical drum. */
.reel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  background: linear-gradient(
    180deg,
    oklch(0.145 0.048 263 / 0.85) 0%,
    transparent 27%,
    transparent 73%,
    oklch(0.145 0.048 263 / 0.85) 100%
  );
  pointer-events: none;
  transition: opacity var(--t) var(--ease-out);
}

.reel[data-landed] {
  background: oklch(0.3 0.055 82);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* Ease the barrel shading off once a reel stops, so the character the crowd
   needs to read is at full strength. */
.reel[data-landed]::after {
  opacity: 0.28;
}

.reel__strip {
  display: flex;
  flex-direction: column;
}

.reel__strip span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  height: var(--cell);
  color: var(--on-field);
  font-family: var(--mono);
  font-size: clamp(1.4rem, 0.55rem + 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
}

.reel[data-landed] .reel__strip span {
  color: var(--gold-bright);
}

/* ---- Winner readout ---------------------------------------------------- */
.draw__readout {
  min-height: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.draw__name {
  font-size: clamp(1.2rem, 0.85rem + 1.6vw, 2.1rem);
  font-family: var(--sans);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--on-field);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}

.draw__name[data-show] {
  opacity: 1;
  transform: none;
}

.draw__serial {
  color: var(--gold-bright);
  font-family: var(--mono);
  font-variation-settings: 'wdth' 87.5;
  font-size: clamp(0.75rem, 0.65rem + 0.5vw, 0.95rem);
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--t) var(--ease-out);
}

.draw__serial[data-show] {
  opacity: 1;
}

.draw__hint {
  color: var(--on-field-2);
  font-size: 0.875rem;
  max-width: 46ch;
}

.draw__hint[data-alert] {
  color: oklch(0.82 0.14 26);
}

.draw__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.draw__actions .btn {
  min-width: 11rem;
  min-height: 56px;
}

.btn--xl {
  min-width: 13rem !important;
  min-height: 64px !important;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem) !important;
}

.draw__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid var(--hair);
  color: var(--on-field-2);
  font-size: 0.75rem;
}

.draw__meta b {
  color: var(--on-field);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.draw__meta a,
.draw__meta button {
  color: var(--cyan);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Confirmed panel --------------------------------------------------- */
.draw__won {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 30rem;
}

.draw__won[data-show] {
  display: flex;
}

.draw__won img {
  width: min(52%, 13rem);
  height: auto;
  filter: drop-shadow(0 16px 24px oklch(0.1 0.04 263 / 0.75));
}

.won-plate {
  width: 100%;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--gold);
  background: var(--field-deep);
  text-align: center;
}

.won-plate__label {
  color: var(--gold);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.won-plate__code {
  margin-top: 0.35rem;
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 700;
  word-break: break-all;
}

@media (prefers-reduced-motion: no-preference) {
  .reel[data-landed] {
    animation: land 380ms var(--ease-out);
  }

  @keyframes land {
    0% { transform: translateY(-3px); }
    100% { transform: none; }
  }
}

/* ==========================================================================
   Leads, remarks and performance
   ========================================================================== */
.section-h {
  margin-top: var(--sp-3);
  font-size: var(--step-1);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--on-field);
}

.textarea {
  min-height: 68px;
  resize: vertical;
  line-height: 1.5;
}

/* The interaction log on an entry: a form to add to it, newest entries first. */
.remarks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hair);
}

.remarks h2 {
  font-size: var(--step-1);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--on-field);
}

.remarks .rowactions .select {
  width: auto;
  min-height: 44px;
  flex: 1 1 12rem;
}

a.serial:hover {
  color: var(--on-field);
}

.chip--new { border-color: var(--cyan); color: var(--cyan); }
.chip--contacted { border-color: oklch(0.8 0.12 250); color: oklch(0.84 0.12 250); }
.chip--meeting_booked { border-color: var(--gold); color: var(--gold-bright); }
.chip--converted { border-color: oklch(0.78 0.13 155); color: oklch(0.84 0.14 155); }
.chip--not_interested { color: var(--on-field-2); }
.chip--super_admin { border-color: var(--gold); color: var(--gold-bright); }
.chip--sales { border-color: oklch(0.8 0.12 250); color: oklch(0.84 0.12 250); }
.chip--hostess { border-color: var(--cyan); color: var(--cyan); }

/* The remark log: newest first, each line owned by a named person. */
.log {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
}

.log li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hair);
}

.log li:last-child {
  border-bottom: 0;
}

.log__meta {
  color: var(--on-field-2);
  font-size: 0.75rem;
}

.log__meta b {
  color: var(--on-field);
}

.log__body {
  margin-top: 0.2rem;
  color: var(--on-field);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Bars are filled by analytics.js from data-w, because the CSP allows CSSOM
   but not a style attribute. With scripting off the numbers still read. */
.bar {
  display: inline-block;
  vertical-align: middle;
  width: 5rem;
  height: 6px;
  margin-right: 0.4rem;
  background: var(--hair);
}

.bar__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--cyan);
}

.hours {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--hair);
}

.hours__row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 3rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  color: var(--on-field-2);
}

.hours__row .bar {
  width: 100%;
  max-width: 34rem;
  height: 10px;
  margin: 0;
}

.hours__label {
  color: var(--on-field-2);
}

.hours__n {
  color: var(--on-field);
  font-weight: 700;
  text-align: right;
}

.team-form {
  max-width: 26rem;
}


/* Asked to speak to the team: the one thing in the queue that is time-sensitive. */
.chip--asked {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.chip--other {
  color: var(--on-field-2);
}