/* ===========================================================================
   Alara — hiring portal design system
   ---------------------------------------------------------------------------
   One stylesheet, one set of tokens. Components are built from the spacing and
   type scales; there are no arbitrary pixel values below the token block.

   Restraint is the point. The brand blue is an accent, not wallpaper — it marks
   the single action that matters on a screen and nothing else. Surfaces are
   near-white, borders are hairlines, shadows are barely there. Gradients on
   every control is the fastest way to look like a template.

   To rebrand this whole portal, change the six --pink-* / --ink-black values in
   the block below and nothing else. The names stay as they are on purpose: they
   are referenced in ~200 places, and renaming them buys nothing.
   ======================================================================== */

:root {
  /* ---- brand ---------------------------------------------------------- */
  /* Taken from the live Alara site: ink #080B10, paper #F8F7F4,
     green #2F664B, mint #55B084. */
  --pink: #2F664B;          /* Alara green — the one action colour */
  --pink-deep: #0A0E14;     /* deep end of the hero gradient (brand ink) */
  --pink-ink: #285741;      /* links, section labels, text on wash */
  --pink-mint: #55B084;     /* the lighter mint, for accents on dark */
  --pink-wash: #EDF4F0;
  --pink-line: #CFE1D7;

  --ink-black: #080B10;

  /* ---- neutrals (warm paper, matching the brand's off-white) ------------ */
  --ink: #0A0E14;
  --body: #3C443F;
  --muted: #6B736C;
  --faint: #9AA29B;
  --line: #E8E6DF;
  --line-strong: #D8D5CC;
  --bg: #F8F7F4;
  --surface: #FFFFFF;
  --surface-2: #FBFAF7;

  /* ---- status --------------------------------------------------------- */
  --ok: #0E7A54;    --ok-wash: #E9F6F0;     --ok-line: #C6E5D8;
  --warn: #8A5A00;  --warn-wash: #FDF4E5;   --warn-line: #F0DFBC;
  --bad: #B02A21;   --bad-wash: #FDEEEC;    --bad-line: #F3CFCA;
  --info: #1D5B99;  --info-wash: #ECF3FA;   --info-line: #CFE0F1;
  --violet: #5A3FA8; --violet-wash: #F1EDFB; --violet-line: #DDD3F3;

  /* ---- spacing scale --------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;

  /* ---- radii ----------------------------------------------------------- */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;

  /* ---- elevation: soft and layered, never a hard drop ------------------ */
  --e1: 0 1px 2px rgba(10, 14, 20, .04);
  --e2: 0 1px 2px rgba(10, 14, 20, .04), 0 4px 12px rgba(10, 14, 20, .06);
  --e3: 0 2px 4px rgba(10, 14, 20, .04), 0 12px 32px rgba(10, 14, 20, .09);

  /* ---- page gutters, generous on purpose ------------------------------- */
  --gutter: 32px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------- type ---- */

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 var(--s3); font-weight: 600; }
h1 { font-size: 1.9rem;  line-height: 1.2;  letter-spacing: -.025em; }
h2 { font-size: 1.22rem; line-height: 1.3;  letter-spacing: -.015em; }
h3 { font-size: 1.02rem; line-height: 1.4;  letter-spacing: -.01em; }
h4 { font-size: .92rem;  line-height: 1.45; }
p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--pink-ink); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--pink-deep); text-decoration: underline;
          text-underline-offset: 2px; }

small, .small { font-size: .82rem; line-height: 1.55; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .84em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }
code { font-family: var(--mono); font-size: .86em; background: var(--surface-2);
       border: 1px solid var(--line); padding: 1px 5px; border-radius: var(--r-sm); }

.section-label {
  font-size: .69rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint); font-weight: 600; margin-bottom: var(--s2);
}

/* -------------------------------------------------------------- layout ---- */

.wrap      { max-width: 880px;  margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
/* Long-hand on purpose. `.page` is always paired with `.wrap` or `.wrap-wide`
   and comes later in the file, so a `padding` shorthand here silently wipes
   their side gutters and every admin page ends up flush against the edge of a
   phone. */
.page      { padding-top: var(--s8); padding-bottom: var(--s10); }
.page-head { margin-bottom: var(--s6); }
.page-head h1 { margin-bottom: var(--s1); }
.page-head p  { margin: 0; }

.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.row-between { display: flex; gap: var(--s4); flex-wrap: wrap;
               align-items: center; justify-content: space-between; }
.spacer { flex: 1; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--s5); align-items: stretch; }
.panels > .panel { display: flex; flex-direction: column; height: 100%; }

/* Grids own their gaps. A stacking margin here offsets a column and lets the
   next block overlap it. */
.grid-2 > .card + .card,
.grid-3 > .card + .card,
.panels > .card + .card { margin-top: 0; }
.grid-2, .grid-3, .panels, .board { margin-bottom: var(--s5); }

/* Sections need air between them whatever order they come in. The old rule
   only spaced a card against another card, so a card followed by a grid — the
   screening list sitting straight on top of Coming up — met with no gap at
   all. Every neighbouring pair of blocks is covered here, once. */
.card + .grid-2, .card + .grid-3, .card + .panels, .card + .board,
.card + .notice, .notice + .card, .notice + .notice,
.notice + .grid-2, .notice + .grid-3, .notice + .panels, .notice + .board,
.tabs + .card, .tabs + .grid-2, .tabs + .board { margin-top: var(--s5); }

/* ---------------------------------------------------------------- card ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--e1);
}
.card + .card { margin-top: var(--s5); }
.card-tight { padding: var(--s4) var(--s5); }
.card-lift { margin-top: calc(var(--s8) * -1); position: relative; z-index: 2;
             box-shadow: var(--e3); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between;
             gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.accent-card { border-color: var(--pink-line); box-shadow: var(--e2); }
.cta-card { background: linear-gradient(170deg, var(--pink-wash), var(--surface) 70%);
            border-color: var(--pink-line); }

/* ------------------------------------------------------------- buttons ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font); font-size: .89rem; font-weight: 500; line-height: 1;
  padding: 11px var(--s4);
  border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .06s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--pink-ink); color: #fff; box-shadow: var(--e1); }
.btn-primary:hover { background: var(--pink-deep); color: #fff; box-shadow: var(--e2); }

.btn-secondary { background: var(--surface); color: var(--ink);
                 border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--muted);
                       color: var(--ink); }

.btn-ghost { background: transparent; color: var(--muted); padding: 9px var(--s3); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }

.btn-danger { background: var(--surface); color: var(--bad); border-color: var(--bad-line); }
.btn-danger:hover { background: var(--bad-wash); color: var(--bad); }

.btn-ok { background: var(--ok); color: #fff; }
.btn-ok:hover { filter: brightness(1.08); color: #fff; }

.btn-white { background: #fff; color: var(--pink-deep); }
.btn-white:hover { background: #fff; color: var(--pink-deep); box-shadow: var(--e3); }
.btn-outline-white { background: transparent; color: #fff;
                     border-color: rgba(255,255,255,.45); }
.btn-outline-white:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-onbar { background: rgba(255,255,255,.1); color: #fff;
             border-color: rgba(255,255,255,.16); }
.btn-onbar:hover { background: rgba(255,255,255,.18); color: #fff; }

.btn-sm { padding: 8px var(--s3); font-size: .81rem; }
.btn-lg { padding: 14px var(--s6); font-size: .96rem; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------- forms ---- */

label { display: block; font-weight: 500; color: var(--ink);
        margin-bottom: var(--s2); font-size: .88rem; }
.field { margin-bottom: var(--s5); }
.field:last-child { margin-bottom: 0; }
.field-help { color: var(--muted); font-size: .82rem; line-height: 1.5;
              margin: calc(var(--s1) * -1) 0 var(--s2); }
.field-error { color: var(--bad); font-size: .82rem; margin-top: var(--s2);
               font-weight: 500; }
.req { color: var(--pink); }

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], input[type=time], input[type=datetime-local],
input[type=search], input[type=file], input:not([type]),
select, textarea {
  width: 100%; font-family: var(--font); font-size: .92rem; color: var(--ink);
  padding: 11px var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(232, 29, 172, .12);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--bad); }
input[type=checkbox], input[type=radio] { accent-color: var(--pink);
  width: 17px; height: 17px; margin: 0; flex: none; }

.choices { display: flex; gap: var(--s2); flex-wrap: wrap; }
.choice {
  display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  padding: 9px var(--s4); border-radius: var(--r-pill);
  font-size: .87rem; color: var(--body); margin: 0; font-weight: 400;
  transition: all .15s ease;
}
.choice:hover { border-color: var(--pink-line); background: var(--pink-wash); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice.is-on { border-color: var(--pink); background: var(--pink-wash);
                color: var(--pink-deep); font-weight: 500;
                box-shadow: 0 0 0 1px var(--pink); }
.choice-block { border-radius: var(--r); width: 100%; justify-content: flex-start; }

.scale { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.scale .choice { min-width: 48px; justify-content: center; }
.scale-ends { display: flex; justify-content: space-between; font-size: .78rem;
              color: var(--faint); margin-top: var(--s2); }

.check-row { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; }
.check-row label, .check-row span { font-weight: 400; margin: 0; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--s7); }
legend { padding: 0; }

.filters { margin-top: var(--s2); display: flex; gap: var(--s2);
            align-items: center; flex-wrap: wrap; }
.filters input[type=search], .filters input[type=text] { flex: 1 1 220px;
            min-width: 180px; }
.filters select { width: auto; min-width: 150px; flex: 0 0 auto; }
.table td.right { white-space: nowrap; text-align: right; }
.table td.right form { display: inline-flex; gap: 4px; }
.filter-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.filter-row input[type=text] { flex: 1; min-width: 200px; }
.filter-row select, .filter-row input[type=date] { width: auto; }
.filter-date { display: flex; align-items: center; gap: var(--s2); font-size: .8rem;
               color: var(--muted); font-weight: 400; margin: 0; }

/* -------------------------------------------------------------- badges ---- */

.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .73rem; font-weight: 600; line-height: 1.7; white-space: nowrap;
  border: 1px solid transparent;
}
.badge-PENDING         { background: var(--warn-wash);   color: var(--warn);     border-color: var(--warn-line); }
.badge-PHONE_INTERVIEW { background: var(--info-wash);   color: var(--info);     border-color: var(--info-line); }
.badge-ZOOM_INTERVIEW  { background: var(--violet-wash); color: var(--violet);   border-color: var(--violet-line); }
.badge-ONBOARDING      { background: var(--pink-wash);   color: var(--pink-ink); border-color: var(--pink-line); }
.badge-ACTIVE          { background: var(--ok-wash);     color: var(--ok);       border-color: var(--ok-line); }
.badge-DECLINED,
.badge-INACTIVE        { background: var(--surface-2);   color: var(--muted);    border-color: var(--line-strong); }
.badge-ok      { background: var(--ok-wash);   color: var(--ok);    border-color: var(--ok-line); }
.badge-warn    { background: var(--warn-wash); color: var(--warn);  border-color: var(--warn-line); }
.badge-bad     { background: var(--bad-wash);  color: var(--bad);   border-color: var(--bad-line); }
.badge-info    { background: var(--info-wash); color: var(--info);  border-color: var(--info-line); }
.badge-neutral { background: var(--surface-2); color: var(--muted); border-color: var(--line-strong); }

/* ------------------------------------------------------------- notices ---- */

.notice { border-radius: var(--r); padding: var(--s3) var(--s4);
          margin-bottom: var(--s5); border: 1px solid transparent;
          font-size: .89rem; line-height: 1.6; }
.notice p:last-child { margin-bottom: 0; }
.notice-success { background: var(--ok-wash);   border-color: var(--ok-line);   color: #0B5C3E; }
.notice-error   { background: var(--bad-wash);  border-color: var(--bad-line);  color: #8A1C15; }
.notice-info    { background: var(--info-wash); border-color: var(--info-line); color: #164A7C; }
.notice-warn    { background: var(--warn-wash); border-color: var(--warn-line); color: #7A4D00; }
.notice-reveal  { background: var(--ink-black); border-color: var(--ink-black);
                  color: #fff; font-family: var(--mono); }

/* -------------------------------------------------------------- tables ---- */

.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th {
  text-align: left; font-size: .69rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); font-weight: 600;
  padding: 0 var(--s3) var(--s3); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: var(--s3); border-bottom: 1px solid var(--line);
            vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--surface-2); }
.table-scroll { overflow-x: auto; }

.empty { text-align: center; padding: var(--s8) var(--s5); color: var(--muted); }
/* Cards in a grid stretch to match their tallest sibling; centre the empty
   state inside that space rather than leaving it stranded at the top. */
.grid-2 > .card, .grid-3 > .card { display: flex; flex-direction: column; }
.grid-2 > .card > .empty, .grid-3 > .card > .empty { margin: auto 0; }
.empty h3 { color: var(--muted); }

/* ====================================================== admin top bar ===== */

.topbar { background: var(--ink-black);
          border-bottom: 1px solid rgba(255,255,255,.07);
          position: sticky; top: 0; z-index: 30; }
.topbar-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--s5); padding-top: var(--s3); padding-bottom: var(--s3);
}
.topbar-brand { display: flex; align-items: center; justify-self: start; }
.topbar-brand img { height: 20px; width: auto; display: block; }

.nav { display: flex; gap: var(--s1); justify-self: center; flex-wrap: wrap;
       justify-content: center; }
.nav a { color: rgba(255,255,255,.66); padding: 7px var(--s3);
         border-radius: var(--r-sm); font-size: .85rem; font-weight: 500;
         white-space: nowrap; transition: background .15s ease, color .15s ease; }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav a.on { background: rgba(255,255,255,.1); color: #fff;
            box-shadow: inset 0 -2px 0 var(--pink); }

.topbar-user { display: flex; align-items: center; gap: var(--s2); justify-self: end; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--pink-ink);
          display: grid; place-items: center; font-size: .7rem; font-weight: 600;
          color: #fff; flex: none; letter-spacing: .02em; }
.avatar:hover { text-decoration: none; background: var(--pink); color: #fff; }
.navtoggle { display: none; background: rgba(255,255,255,.1); color: #fff;
             border: 0; border-radius: var(--r-sm); width: 34px; height: 32px;
             font-size: 1rem; cursor: pointer; }

/* ===================================================== public site bar ==== */

.sitebar { background: rgba(255,255,255,.88);
           backdrop-filter: saturate(180%) blur(12px);
           border-bottom: 1px solid var(--line);
           position: sticky; top: 0; z-index: 20; }
.sitebar-inner { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--s5); min-height: 76px;
                 padding-top: var(--s4); padding-bottom: var(--s4); }
.sitebar-logo { display: flex; align-items: center; }
.sitebar-logo img { height: 34px; width: auto; display: block; }
.sitebar-word { font-weight: 600; color: var(--pink-deep); font-size: 1rem; }
.sitebar-nav { display: flex; align-items: center; gap: var(--s4); }
.sitebar-nav a { font-size: .87rem; color: var(--muted); font-weight: 500; }
.sitebar-nav a:hover { color: var(--ink); text-decoration: none; }
.sitebar-nav a.btn { color: #fff; }

/* ---------------------------------------------------------------- hero ---- */

.hero { background: linear-gradient(160deg, #12241C 0%, #0C1A15 45%, var(--pink-deep) 100%);
        color: #fff; padding: var(--s9) 0 var(--s10); text-align: center;
        position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.2), transparent 60%); }
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: 2.5rem; margin-bottom: var(--s4);
           letter-spacing: -.03em; }
.hero p { color: rgba(255,255,255,.88); max-width: 620px; margin: 0 auto var(--s6);
          font-size: 1.02rem; line-height: 1.65; }
.hero-lg { padding: var(--s9) 0 var(--s10); }
.hero-logo { height: 40px; width: auto; margin: 0 auto var(--s6); display: block; }

/* A hero is a full-bleed dark band. Content butting straight up against it
   reads as two pages stapled together, so give the page below it real air. */
.hero + .page { padding-top: var(--s10); }

.pill-row { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
.pill { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
        color: #fff; padding: 6px var(--s4); border-radius: var(--r-pill);
        font-size: .81rem; font-weight: 500; }

/* --------------------------------------------------------------- board ---- */

.board { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr));
         gap: var(--s3); align-items: stretch; overflow-x: auto;
         padding-bottom: var(--s2); }
.col { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3);
       display: flex; flex-direction: column; background: var(--surface-2); }
.col-head { display: flex; align-items: center; justify-content: space-between;
            margin-bottom: var(--s3); padding: 0 var(--s1); flex: 0 0 auto; }
/* The cards scroll inside their column. Otherwise the busiest stage sets the
   height of the entire board and everything under it — today's interviews,
   the system panel — is pushed off the bottom of the screen. */
/* One rule for every long list that would otherwise stretch a page: the list
   scrolls inside its own card and the page keeps its shape. */
.scroll-list { overflow-y: auto; max-height: 52vh; min-height: 0;
               padding-right: 4px; scrollbar-width: thin; }
.scroll-list::-webkit-scrollbar { width: 6px; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--line-strong);
                                        border-radius: 3px; }

.col-body { overflow-y: auto; max-height: 46vh; min-height: 0;
            padding-right: 2px; scrollbar-width: thin; }
.col-body::-webkit-scrollbar { width: 6px; }
.col-body::-webkit-scrollbar-thumb { background: var(--line-strong);
                                     border-radius: 3px; }
.col-head strong { font-size: .74rem; color: var(--muted); font-weight: 600;
                   text-transform: uppercase; letter-spacing: .06em; }
.col-count { background: var(--surface); border: 1px solid var(--line);
             color: var(--muted); border-radius: var(--r-pill); padding: 1px 8px;
             font-size: .72rem; font-weight: 600; }
.mini { display: block; background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-sm); padding: var(--s3); margin-bottom: var(--s2);
        color: var(--body); box-shadow: var(--e1);
        transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease; }
.mini:hover { text-decoration: none; border-color: var(--pink-line);
              box-shadow: var(--e2); transform: translateY(-1px); }
.mini strong { display: block; color: var(--ink); font-size: .87rem; font-weight: 600; }
.mini .meta { font-size: .76rem; color: var(--muted); margin-top: 2px; line-height: 1.5; }

/* --------------------------------------------------------------- stats ---- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
         gap: var(--s3); align-items: stretch; }
.stat { background: var(--surface-2); border: 1px solid var(--line);
        border-radius: var(--r); padding: var(--s4) var(--s5);
        display: flex; flex-direction: column; justify-content: center; }
.stat .n { font-size: 1.6rem; font-weight: 600; color: var(--ink);
           line-height: 1.15; letter-spacing: -.02em; }
.stat .l { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* --------------------------------------------------- progress and steps --- */

.progress { height: 6px; background: var(--line); border-radius: var(--r-pill);
            overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--pink-ink);
                transition: width .3s ease; }

.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: var(--s4); align-items: flex-start;
            padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.step-dot { width: 26px; height: 26px; border-radius: 50%; flex: none;
            display: grid; place-items: center; font-size: .74rem; font-weight: 600;
            background: var(--surface-2); border: 1px solid var(--line-strong);
            color: var(--muted); margin-top: 1px; }
.step-dot.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.step-dot.now  { background: var(--pink-ink); border-color: var(--pink-ink); color: #fff; }
.step-body { flex: 1; min-width: 0; }
.step-body strong { display: block; color: var(--ink); }
.step-body .muted { font-size: .84rem; }

.steps-numbered { list-style: none; counter-reset: s; padding: 0; margin: var(--s4) 0 0; }
.steps-numbered li { counter-increment: s; position: relative;
                     padding: var(--s3) 0 var(--s3) 46px;
                     border-bottom: 1px solid var(--line); }
.steps-numbered li:last-child { border-bottom: 0; }
.steps-numbered li::before {
  content: counter(s); position: absolute; left: 0; top: var(--s3);
  width: 28px; height: 28px; border-radius: 50%; background: var(--pink-wash);
  border: 1px solid var(--pink-line); color: var(--pink-ink);
  display: grid; place-items: center; font-size: .78rem; font-weight: 600; }
.steps-numbered strong { display: block; color: var(--ink); }
.steps-numbered span { font-size: .86rem; color: var(--muted); }

/* ------------------------------------------------------------ timeline ---- */

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 var(--s5) var(--s5);
               border-left: 1px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: -4px; top: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line-strong); }
.timeline li.hi::before { background: var(--pink); border-color: var(--pink); }
.timeline .t-when { font-size: .76rem; color: var(--faint); }

/* --------------------------------------------------------------- slots ---- */

.day-block { margin-bottom: var(--s6); }
.day-block h3 { font-size: .92rem; margin-bottom: var(--s3); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
         gap: var(--s2); }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.slot label { display: block; text-align: center; border: 1px solid var(--line-strong);
  background: var(--surface); padding: var(--s3) var(--s2); border-radius: var(--r-sm);
  cursor: pointer; font-weight: 500; font-size: .88rem; margin: 0;
  transition: all .15s ease; }
.slot label:hover { border-color: var(--pink); background: var(--pink-wash); }
.slot input:checked + label { background: var(--pink-ink); border-color: var(--pink-ink);
                              color: #fff; box-shadow: var(--e2); }
.slot .who { display: block; font-size: .7rem; opacity: .72; font-weight: 400;
             margin-top: 2px; }

/* ------------------------------------------------------------ policies ---- */

.policy { border: 1px solid var(--line); border-radius: var(--r);
          margin-bottom: var(--s3); background: var(--surface); overflow: hidden;
          transition: border-color .15s ease; }
.policy.is-missing { border-color: var(--bad); }
.policy > summary { padding: var(--s4) var(--s5); cursor: pointer; font-weight: 600;
  color: var(--ink); list-style: none; display: flex; justify-content: space-between;
  gap: var(--s3); align-items: center; }
.policy > summary::-webkit-details-marker { display: none; }
.policy > summary::after { content: '▾'; color: var(--faint); flex: none; }
.policy[open] > summary::after { content: '▴'; }
.policy .policy-body { padding: 0 var(--s5) var(--s2); border-top: 1px solid var(--line);
                       font-size: .91rem; }
.policy .policy-ack { padding: var(--s3) var(--s5); background: var(--pink-wash);
                      border-top: 1px solid var(--pink-line); }
.policy.ticked { border-color: var(--ok-line); }
.policy.ticked .policy-ack { background: var(--ok-wash); border-top-color: var(--ok-line); }

/* --------------------------------------------------------------- prose ---- */

.prose { font-size: .93rem; line-height: 1.75; }
.prose h1 { font-size: 1.42rem; margin-top: 1.6em; }
.prose h2 { font-size: 1.1rem;  margin-top: 1.8em; color: var(--pink-ink); }
.prose h3 { font-size: .98rem;  margin-top: 1.4em; }
.prose h1:first-child, .prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: var(--s6); margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose blockquote { margin: 1.2em 0; padding: var(--s3) var(--s4);
  background: var(--warn-wash); border-left: 3px solid var(--warn-line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .86rem;
               margin-bottom: 1em; }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--s2) var(--s3);
                       text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); font-weight: 600; color: var(--ink); }
.doc-scroll { max-height: 460px; overflow-y: auto; border: 1px solid var(--line);
              border-radius: var(--r); padding: var(--s5); background: var(--surface-2); }

/* ---------------------------------------------------------------- tabs ---- */

.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line);
        margin-bottom: var(--s6); flex-wrap: wrap; }
.tabs a { padding: var(--s3) var(--s4); color: var(--muted); font-size: .88rem;
          font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
          transition: color .15s ease; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { color: var(--pink-ink); border-bottom-color: var(--pink); }

/* -------------------------------------------------------- score / detail -- */

.score { display: flex; align-items: baseline; gap: var(--s2); }
.score b { font-size: 1.85rem; color: var(--ink); font-weight: 600; line-height: 1;
           letter-spacing: -.02em; }
.score span { color: var(--faint); font-size: .82rem; }
.meter { height: 6px; background: var(--line); border-radius: var(--r-pill);
         margin-top: var(--s3); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: var(--r-pill); }
.meter > i.hi  { background: var(--ok); }
.meter > i.mid { background: #D89B34; }
.meter > i.lo  { background: var(--bad); }

.kv { display: grid; grid-template-columns: minmax(120px, 180px) 1fr;
      gap: var(--s2) var(--s5); font-size: .88rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); }

.answer { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.answer:last-child { border-bottom: 0; }
.answer .q { font-size: .81rem; color: var(--muted); margin-bottom: 3px; }
.answer .a { color: var(--ink); white-space: pre-wrap; }
.answer.flagged { background: var(--warn-wash); margin: 0 calc(var(--s3) * -1);
                  padding: var(--s3); border-radius: var(--r-sm); border-bottom: 0; }

.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--s5);
               align-items: start; }

/* ------------------------------------------------------------ schedule ---- */

.sched-list { list-style: none; padding: 0; margin: 0; }
.sched-list li { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--s4);
                 align-items: center; padding: var(--s3) 0;
                 border-bottom: 1px solid var(--line); }
.sched-list li:last-child { border-bottom: 0; }
.sched-when { display: flex; flex-direction: column; line-height: 1.35; }
.sched-when strong { font-size: .82rem; color: var(--ink); }
.sched-when span { font-size: .78rem; color: var(--pink-ink); font-weight: 600; }
.sched-who { display: flex; flex-direction: column; min-width: 0; }
.sched-who a { font-weight: 600; }
.sched-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Scorecard / Move / Cancel sit on one line and wrap together when they must,
   rather than each form claiming a block of its own. */
.sched-act { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
             justify-content: flex-end; }
.sched-act form { margin: 0; }
.text-bad { color: var(--bad); font-weight: 600; }

/* -------------------------------------------------- screening on board ---- */

.screen-row { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--s4);
              align-items: start; padding: var(--s4) 0;
              border-bottom: 1px solid var(--line); }
.screen-row:last-child { border-bottom: 0; }
.screen-score { width: 48px; height: 48px; border-radius: var(--r); display: grid;
                place-items: center; font-weight: 600; font-size: 1.02rem;
                line-height: 1; border: 1px solid transparent; letter-spacing: -.02em; }
.screen-score small { display: block; font-size: .55rem; font-weight: 500;
                      opacity: .7; margin-top: 2px; letter-spacing: 0; }
.score-hi  { background: var(--ok-wash);   color: var(--ok);   border-color: var(--ok-line); }
.score-mid { background: var(--warn-wash); color: var(--warn); border-color: var(--warn-line); }
.score-lo  { background: var(--bad-wash);  color: var(--bad);  border-color: var(--bad-line); }
.screen-body { min-width: 0; }
.screen-body p { margin: var(--s1) 0 0; font-size: .86rem; color: var(--muted);
                 line-height: 1.6; }
.chip-row { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); }

/* ------------------------------------------------------ landing blocks ---- */

.booths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: var(--s3); margin-top: var(--s5); }
.booth { background: var(--surface-2); border: 1px solid var(--line);
         border-radius: var(--r); padding: var(--s4); }
.booth strong { display: block; color: var(--pink-ink); margin-bottom: 3px;
                font-size: .92rem; }
.booth span { font-size: .83rem; color: var(--muted); line-height: 1.55; }

.req-block ul { list-style: none; padding: 0; margin: 0; }
.req-block li { padding: var(--s2) 0 var(--s2) var(--s4); position: relative;
                font-size: .89rem; border-bottom: 1px solid var(--line); }
.req-block li:last-child { border-bottom: 0; }
.req-block li::before { content: ''; position: absolute; left: 2px; top: 15px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--pink); }

.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--s5) var(--s7); margin-top: var(--s5); }
.fit { display: flex; gap: var(--s3); align-items: flex-start; }
.fit-check { flex: none; width: 22px; height: 22px; border-radius: 50%;
             background: var(--ok-wash); color: var(--ok); display: grid;
             place-items: center; font-size: .72rem; font-weight: 700;
             margin-top: 2px; border: 1px solid var(--ok-line); }
.fit strong { display: block; color: var(--ink); margin-bottom: 2px; }
.fit p { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.6; }

/* ------------------------------------------------------------- account ---- */

.auth-wrap { max-width: 400px; margin: var(--s4) auto 0; }
.auth-alt { text-align: center; margin-top: var(--s5); padding-top: var(--s5);
            border-top: 1px solid var(--line); font-size: .87rem; color: var(--muted); }
.auth-or { display: flex; align-items: center; gap: var(--s3); color: var(--faint);
           font-size: .76rem; margin: var(--s5) 0; text-transform: uppercase;
           letter-spacing: .08em; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px;
                                    background: var(--line); }

/* -------------------------------------------------------------- footer ---- */

.footer { padding: var(--s7) 0 var(--s9); color: var(--faint); font-size: .82rem;
          text-align: center; }
.footer a { color: var(--muted); }

.sticky-actions { position: sticky; bottom: 0; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  padding: var(--s4) 0; margin-top: var(--s6); z-index: 5; }

/* ============================================================ responsive == */

@media (max-width: 1100px) {
  :root { --gutter: 24px; }
  .detail-grid { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(6, 200px); }
}

@media (max-width: 900px) {
  .topbar-inner { grid-template-columns: auto 1fr auto; }
  .navtoggle { display: block; }
  .nav { display: none; position: absolute; left: var(--s3); right: var(--s3);
    top: 54px; background: var(--ink-black); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r); padding: var(--s2); flex-direction: column;
    box-shadow: 0 20px 48px rgba(0,0,0,.45); z-index: 40; }
  .nav.open { display: flex; }
  .nav a { width: 100%; text-align: center; padding: var(--s3); }
  .nav a.on { box-shadow: none; background: rgba(255,255,255,.14); }
  .grid-3, .fit-grid, .booths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .grid-2, .panels { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }

  .page { padding-top: var(--s6); padding-bottom: var(--s8); }
  .card { padding: var(--s5); border-radius: var(--r); }
  .card + .card { margin-top: var(--s4); }
  .card-tight { padding: var(--s4); }
  .card-lift { margin-top: calc(var(--s6) * -1); }
  .grid-2, .grid-3, .panels, .board, .fit-grid, .booths { grid-template-columns: 1fr; }

  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.12rem; }
  .hero + .page { padding-top: var(--s7); }
  .hero { padding: var(--s7) 0 var(--s8); }
  .hero-lg { padding: var(--s7) 0 var(--s8); }
  .hero h1 { font-size: 1.85rem; }
  .hero-logo { height: 32px; margin-bottom: var(--s5); }
  .topbar-brand img { height: 18px; }
  .sitebar-logo img { height: 26px; }

  .board { overflow-x: visible; gap: var(--s3); }
  .col { padding: var(--s3) var(--s4); }
  .col-body { max-height: 40vh; }
  .scroll-list { max-height: 60vh; }
  .col .empty { padding: var(--s3) 0; }
  /* Stacked on a phone, six stages become six screens of scrolling — most of
     them empty. An empty stage shrinks to its own heading. */
  .col-empty { padding: var(--s2) var(--s4); }
  .col-empty .empty { display: none; }
  .col-empty .col-head { margin-bottom: 0; }

  /* Empty states are generous by design on a desktop card that has to match a
     tall sibling. Stacked on a phone there is no sibling, so the padding is
     just scrolling. */
  .empty { padding: var(--s5) var(--s4); }
  .grid-2 > .card > .empty, .grid-3 > .card > .empty { margin: 0; }

  /* Seven settings tabs wrapping onto three rows pushes the actual settings
     off the screen. One row that scrolls sideways instead. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
          scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: 0 0 auto; padding: var(--s3); }

  .sched-list li { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s4) 0; }
  .sched-when { flex-direction: row; gap: var(--s2); align-items: baseline; }
  .sched-act { width: 100%; justify-content: flex-start; }
  .sched-act > .btn, .sched-act form { flex: 1 1 0; }
  .sched-act form .btn { width: 100%; }

  /* Two columns, not three — the summary needs the width to read properly. */
  .screen-row { grid-template-columns: 48px 1fr; gap: var(--s3); }
  .screen-row .sched-act { grid-column: 1 / -1; }
  /* Name and location fight for one line at this width; give each its own. */
  .screen-body .row-between { flex-direction: column; align-items: flex-start;
                              gap: 2px; }

  .filter-row > * { width: 100%; }
  .filter-row input[type=text] { min-width: 0; }
  .filter-row select, .filter-row input[type=date] { width: 100%; }
  .filter-date { flex-direction: column; align-items: stretch; gap: 3px; }

  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: var(--s3); }
  .table th, .table td { padding: var(--s2); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy > summary, .policy .policy-body, .policy .policy-ack {
    padding-left: var(--s4); padding-right: var(--s4); }
  .doc-scroll { padding: var(--s4); }
  .sticky-actions .btn { width: 100%; }
  .sticky-actions .row-between { flex-direction: column; align-items: stretch;
                                 gap: var(--s2); }
  .btn-lg { padding: 13px var(--s5); }
}

@media (max-width: 400px) {
  :root { --gutter: 16px; }
  /* Two across, not one. Three stacked full-width boxes for three single
     digits is the kind of thing that makes a phone feel broken. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .stats .n { font-size: 1.4rem; }
}


/* ---------------------------------------------------------------- paperwork
   The document list, the signature pad and the embedded PDF reader. Sized on
   the same scale as everything else so a signing page does not read like a
   different product from the page before it. */

.doc-list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.doc-item {
  display: grid; grid-template-columns: 32px 1fr auto; gap: var(--s4);
  align-items: center; padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}
.doc-item:last-child { border-bottom: 0; padding-bottom: 0; }
.doc-item.is-off { opacity: .55; }
.doc-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: .82rem;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted);
}
.doc-item.is-signed .doc-icon {
  background: var(--ok-wash, #EAF7EF); border-color: transparent;
  color: var(--ok, #1B7A45); font-weight: 700;
}
.doc-body { min-width: 0; }
.doc-body strong { display: inline-block; margin-right: var(--s2); }
.doc-act { display: flex; gap: var(--s2); align-items: center; }

.progress-sm { height: 5px; }

.grid-2-tight {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
}
.choices-stack { flex-direction: column; align-items: stretch; }
.choices-stack .choice { width: 100%; }

.cert-list { margin: 0 0 var(--s5); padding-left: var(--s5); color: var(--body); }
.cert-list li { margin-bottom: var(--s3); line-height: 1.55; }

.disclosure {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s4) var(--s5); background: var(--surface-2);
}
.disclosure > summary {
  cursor: pointer; font-weight: 500; color: var(--ink);
  list-style: none; display: flex; align-items: center; gap: var(--s2);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: '+'; width: 18px; height: 18px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--pink-wash); color: var(--pink-ink); font-weight: 700;
  font-size: .8rem; line-height: 1;
}
.disclosure[open] > summary::before { content: '−'; }
.disclosure[open] > summary { margin-bottom: var(--s2); }

/* --- signature pad --- */

.sign-block { max-width: 640px; }

.sigpad {
  position: relative; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  height: 190px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(26, 20, 32, .04);
}
.sigpad.has-error { border-color: var(--bad); }
.sigpad canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Without this a finger drag scrolls the page instead of drawing. */
  touch-action: none; cursor: crosshair; display: block;
}
.sigpad-baseline {
  position: absolute; left: var(--s6); right: var(--s6); bottom: 46px;
  border-bottom: 1px solid var(--line-strong); pointer-events: none;
}
.sigpad-baseline span {
  position: absolute; left: -14px; bottom: 2px;
  color: var(--faint); font-size: 1rem; line-height: 1;
}
.sigpad-hint {
  position: absolute; left: var(--s6); bottom: 22px;
  color: var(--faint); font-size: .8rem; pointer-events: none;
  transition: opacity .15s ease;
}
.sigpad.has-ink .sigpad-hint { opacity: 0; }
.sigpad-clear {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 2;
}

.consent-box {
  margin: var(--s6) 0 var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--body);
  font-size: .85rem; line-height: 1.6;
  max-height: 190px; overflow-y: auto;
}

/* --- embedded pdf --- */

.pdf-frame {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--surface-2);
}
.pdf-frame iframe {
  display: block; width: 100%; height: 560px; border: 0; background: #fff;
}
.pdf-fallback { margin: 0; padding: var(--s3) var(--s4); text-align: center;
                border-top: 1px solid var(--line); }

.pdf-onphone { display: none; text-align: center; }
.pdf-onphone .btn { width: 100%; }

.big-check {
  width: 56px; height: 56px; margin: 0 auto var(--s4);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--pink-wash); color: var(--pink-ink);
  font-size: 1.5rem; font-weight: 700;
}
.center-row { justify-content: center; }

/* A wide table on a 390px screen is a horizontal scroll nobody discovers.
   Below this width the rows become stacked blocks with their own labels. */
@media (max-width: 760px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td {
    display: block; width: 100%;
  }
  .table-stack tr {
    padding: var(--s4) 0; border-bottom: 1px solid var(--line);
  }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { border: 0; padding: var(--s1) 0; min-width: 0 !important; }
  .table-stack td:empty { display: none; }
  .table-stack td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--faint); margin-bottom: var(--s1);
  }
  /* An action cell can hold several buttons, sometimes wrapped in an inline
     form. Lay them out as a wrapping row and let each take a share — a plain
     width:100% on every button added up to several screens wide. */
  .table-stack td.right, .table-stack td.right form {
    display: flex !important; flex-wrap: wrap; gap: var(--s2);
    width: 100%; text-align: left;
  }
  .table-stack td .btn { flex: 1 1 130px; width: auto; margin-top: var(--s2); }
  .table-stack td.right .btn { margin-top: 0; }

  /* A stacked row with a label above every cell is honest but enormous — a
     candidate list turned into a screen and a half per person. On the lists
     people scan rather than read, the short cells sit on one wrapped line
     under the name and the labels come off. */
  .table-stack.table-compact tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s3);
  }
  .table-stack.table-compact td { display: inline-block; width: auto;
                                  padding: 0; min-width: 0 !important; }
  .table-stack.table-compact td[data-label]::before { content: none; }
  .table-stack.table-compact td:first-child,
  .table-stack.table-compact td.right { display: block; width: 100%; }
  .table-stack.table-compact td:first-child { margin-bottom: var(--s1); }
  /* Only the wrapper around a stacked table stops scrolling. Every other
     .table-scroll still needs its overflow, or wide tables break the page. */
  .table-scroll.stacks { overflow-x: visible; }

  /* A <select> sizes itself to its widest option, so one long job title in the
     filter bar dragged the whole candidates page sideways. On a phone every
     control gets its own full-width line instead. The !important is earning
     its keep: these widths are set inline in the templates. */
  .card > .row, .filters .filter-row { flex-wrap: wrap; }
  .card > .row > *, .filters > *, .filters .filter-row > * {
    width: 100% !important; max-width: 100%; min-width: 0 !important;
    flex: 1 1 100%;
  }
}

/* Nothing in a form may be wider than the box it sits in, at any width. */
input, select, textarea { max-width: 100%; }

@media (max-width: 640px) {
  .doc-item { grid-template-columns: 28px 1fr; gap: var(--s3); }
  .doc-act { grid-column: 1 / -1; }
  .doc-act > *, .doc-act > form { flex: 1 1 0; }
  .doc-act .btn { width: 100%; }
  .grid-2-tight { grid-template-columns: 1fr; }
  .pdf-frame { display: none; }
  .pdf-onphone { display: block; }
  .sigpad { height: 165px; }
  .sign-block { max-width: none; }
}



/* ================================================================ job board */
/* The board is the front door. One toolbar, then roles grouped by team so it
   reads like an org rather than a pile. Everything a filter does is in the URL,
   so a filtered board is a link somebody can send to a friend. */

.jobboard { background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r-lg); box-shadow: var(--e2);
         padding: var(--s7); margin-bottom: var(--s5); }
.jobboard-head { display: flex; align-items: flex-start; justify-content: space-between;
              gap: var(--s5); margin-bottom: var(--s6); }
.jobboard-head h2 { margin: 0 0 var(--s2); }
.jobboard-count { text-align: right; white-space: nowrap;
               border-left: 1px solid var(--line); padding-left: var(--s5); }
.jobboard-count strong { display: block; font-size: 1.9rem; line-height: 1.1;
                      color: var(--pink); font-weight: 600; }
.jobboard-count span { font-size: .78rem; color: var(--muted);
                    text-transform: uppercase; letter-spacing: .06em; }

.jobboard-bar { background: var(--surface-2); border: 1px solid var(--line);
             border-radius: var(--r); padding: var(--s4);
             margin-bottom: var(--s6); }
.jobboard-search { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.jobboard-search input { flex: 1; }
.jobboard-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip-sep { width: 1px; height: 20px; background: var(--line-strong);
            margin: 0 var(--s2); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
        border: 1px solid var(--line-strong); border-radius: var(--r-pill);
        background: var(--surface); font-size: .82rem; color: var(--body);
        cursor: pointer; text-decoration: none; transition: all .12s ease; }
.chip:hover { border-color: var(--pink); color: var(--pink-ink);
              text-decoration: none; }
.chip.on { background: var(--pink); border-color: var(--pink); color: #fff;
           font-weight: 500; }
.chip i { font-style: normal; color: var(--faint); font-size: .74rem; }
.chip.on i { color: rgba(255,255,255,.75); }
.chip-clear { border-style: dashed; color: var(--muted); }

.job-group { margin-bottom: var(--s6); }
.job-group:last-child { margin-bottom: 0; }
.job-group-head { display: flex; align-items: baseline; gap: var(--s3);
                  margin-bottom: var(--s3); }
.job-group-head h3 { margin: 0; font-size: .82rem; text-transform: uppercase;
                     letter-spacing: .08em; color: var(--pink-ink); }
.job-group-head span { font-size: .78rem; color: var(--faint); }
.job-group-head::after { content: ''; flex: 1; height: 1px;
                         background: var(--line); }

.job-list { display: flex; flex-direction: column; gap: var(--s3); }
/* Grid children default to min-width:auto, which means a long job title or a
   nowrap salary line can hold the column open wider than the phone it is on.
   Nothing here needs to be wider than its share. */
.job-card > * { min-width: 0; }
.job-top strong, .job-summary { overflow-wrap: anywhere; }
.job-card { display: grid; grid-template-columns: 1fr auto; gap: var(--s6);
            align-items: center; padding: var(--s6) var(--s6) var(--s6) var(--s7);
            border: 1px solid var(--line); border-left: 3px solid transparent;
            border-radius: var(--r); background: var(--surface);
            text-decoration: none; color: inherit; position: relative;
            transition: border-color .14s ease, box-shadow .14s ease,
                        transform .14s ease; }
/* The title link covers the whole card so the row stays clickable, but it sits
   underneath the Apply button — which is the thing we actually want pressed. */
.job-stretch { color: inherit; text-decoration: none; }
.job-stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.job-apply { position: relative; z-index: 2; font-size: .95rem;
             padding: 11px 22px; }
.job-side > * { position: relative; z-index: 2; }
.job-card:hover { border-color: var(--line-strong); border-left-color: var(--pink);
                  box-shadow: var(--e2); text-decoration: none;
                  transform: translateY(-1px); }
.job-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.job-top strong { font-size: 1.3rem; font-weight: 600; color: var(--ink);
                  letter-spacing: -.015em; }
.job-summary { margin: 6px 0 0; font-size: .9rem; color: var(--body);
               line-height: 1.55; max-width: 62ch; }
.job-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s3); }
.job-tag { font-size: .76rem; color: var(--muted); background: var(--surface-2);
           border: 1px solid var(--line); border-radius: var(--r-sm);
           padding: 3px 9px; }
.job-side { text-align: right; display: flex; flex-direction: column;
            gap: var(--s3); white-space: nowrap; align-items: flex-end; }
.job-salary { font-size: .9rem; font-weight: 600; color: var(--ink); }
.job-salary-quiet { font-weight: 400; font-size: .8rem; color: var(--faint); }
.job-go { font-size: .82rem; color: var(--pink-ink); font-weight: 500;
           text-decoration: none; }
.job-go:hover { text-decoration: underline; }
.job-go em { font-style: normal; display: inline-block;
             transition: transform .14s ease; }
.job-card:hover .job-go em { transform: translateX(3px); }

.jobboard-empty { text-align: center; padding: var(--s9) var(--s5);
               border: 1px dashed var(--line-strong); border-radius: var(--r);
               background: var(--surface-2); }
.jobboard-empty h3 { margin: 0 0 var(--s2); color: var(--ink); }
.jobboard-empty p { margin: 0; }

.job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
              gap: var(--s7); align-items: start; }
.job-aside { position: sticky; top: var(--s5); }
.job-apply-card { margin-bottom: var(--s5); }
.job-salary-big { font-size: 1.15rem; font-weight: 600; color: var(--ink);
                  margin: 0 0 var(--s4); }
.job-facts { margin: 0 0 var(--s5); font-size: .85rem; }
.job-facts dt { color: var(--muted); font-size: .74rem; text-transform: uppercase;
                letter-spacing: .05em; margin-top: var(--s3); }
.job-facts dd { margin: 2px 0 0; color: var(--ink); }
.hero-crumb { font-size: .85rem; opacity: .85; margin: 0 0 var(--s2); }
.hero-crumb a { color: inherit; text-decoration: underline; }

.job-form .card { margin-bottom: var(--s4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: var(--s4); }
textarea.mono { font-family: var(--mono); font-size: .82rem; line-height: 1.55; }

/* ------------------------------------------------------- identity uploads */

.id-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: var(--s4); margin-top: var(--s3); }
.id-card { border: 1px solid var(--line); border-radius: var(--r);
           padding: var(--s4); display: flex; flex-direction: column;
           gap: 6px; align-items: flex-start; }
.id-review { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s2);
             width: 100%; }
.id-review input { flex: 1 1 140px; }

.upload-row { list-style: none; padding: 0 0 var(--s4) 52px; }
.upload-form { display: flex; gap: var(--s2); align-items: center;
               flex-wrap: wrap; }
.upload-form input[type=file] { flex: 1 1 200px; font-size: .82rem;
                                padding: 7px; border: 1px dashed var(--line-strong);
                                border-radius: var(--r-sm); background: var(--surface-2); }

@media (max-width: 900px) {
  .job-layout { grid-template-columns: 1fr; }
  .job-aside { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .jobboard { padding: var(--s5); }
  .jobboard-head { flex-direction: column; gap: var(--s3); }
  .jobboard-count { border-left: 0; padding-left: 0; text-align: left; }
  .jobboard-count strong { display: inline; font-size: 1.1rem; }
  .job-card { grid-template-columns: 1fr; gap: var(--s3); }
  .job-side { text-align: left; flex-direction: row; gap: var(--s3);
              align-items: center; justify-content: space-between;
              flex-wrap: wrap; white-space: normal; }
  .job-apply { width: 100%; }
  .id-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .chip-label { min-width: 0; width: 100%; margin-bottom: 2px; }
  .upload-row { padding-left: 0; }
}

@media print {
  .topbar, .sitebar, .sticky-actions, .btn, .nav, .footer { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 0; }
}


/* --------------------------------------------------------------- brand logo */
/* Two files, both the real mark: logo.svg is the dark wordmark for light
   surfaces, logo-white.svg the paper wordmark for the ink hero and the admin
   bar. The leaf stays brand green in both. */
.sitebar-logo img { height: 34px; width: auto; }
.topbar-brand img { height: 26px; width: auto; }
.hero-logo { height: 52px; width: auto; margin-bottom: var(--s6); }

/* ------------------------------------------------------------ whatsapp ---- */

.navdot {
  font-style: normal; font-size: .68rem; font-weight: 700;
  background: var(--pink-mint); color: var(--ink-black);
  border-radius: 999px; padding: 1px 6px; margin-left: 4px;
  vertical-align: 1px;
}

.statbar { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.statbar .stat {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px; min-width: 130px;
}
.statbar .stat strong { display: block; font-size: 1.5rem; line-height: 1.1; }
.statbar .stat span { color: var(--muted); font-size: .82rem; }
.statbar .stat-alert { border-color: var(--warn-line); background: var(--warn-wash); }
.statbar .stat-alert strong { color: var(--warn); }

/* The prompt list on the "try the assistant" page. */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding: 7px 0 7px 22px; position: relative; font-size: .9rem;
            border-bottom: 1px solid var(--line); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: "›"; position: absolute; left: 4px;
                    color: var(--pink); font-weight: 700; }

.wa-list { display: flex; flex-direction: column; gap: 10px; }
.wa-row {
  display: flex; justify-content: space-between; gap: var(--s4);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.wa-row:hover { border-color: var(--pink); box-shadow: 0 2px 14px rgba(10,14,20,.06); }
.wa-row-unread { border-left: 3px solid var(--pink); }
.wa-row-main { min-width: 0; }
.wa-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-row-top strong { font-size: 1rem; }
.wa-row-last {
  margin: 6px 0 4px; color: var(--body); font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62ch;
}
.wa-row-meta { display: flex; gap: 10px; font-size: .78rem; color: var(--faint); }
.wa-warn { color: var(--warn, #9A6200); }
.wa-row-side { text-align: right; white-space: nowrap; }
.wa-count {
  display: inline-block; background: var(--pink); color: #fff;
  border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 2px 8px;
  margin-bottom: 6px;
}

.wa-thread {
  background: var(--pink-wash); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; margin-bottom: var(--s4);
  max-height: 46vh; overflow-y: auto; scrollbar-width: thin;
}
.wa-msg { display: flex; flex-direction: column; margin-bottom: 14px; max-width: 78%; }
.wa-in  { align-items: flex-start; }
.wa-out { align-items: flex-end; margin-left: auto; }
.wa-bubble {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; font-size: .92rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.wa-out .wa-bubble { background: var(--pink); color: #fff; border-color: var(--pink); }
.wa-out .wa-bubble a { color: #fff; }
.wa-blocked .wa-bubble { opacity: .6; border-style: dashed; }
/* Voice notes and photos play and preview in the thread itself; nobody should
   have to download an attachment to find out what somebody said. */
.wa-audio { display: block; width: 100%; max-width: 300px; min-width: 220px; }
.wa-img { display: block; max-width: 100%; border-radius: 10px; }
.wa-caption { margin-top: 6px; font-size: .88rem; }
.wa-msg-meta { font-size: .72rem; color: var(--faint); margin-top: 4px; }
.wa-event {
  text-align: center; font-size: .76rem; color: var(--muted);
  margin: 12px 0; font-style: italic;
}
.wa-reply textarea { width: 100%; margin-bottom: 10px; }
/* Scrolled to the bottom on load by the snippet in base_admin.html — a thread
   that opens at the oldest message hides the thing you came to read. */

@media (max-width: 700px) {
  .wa-row { flex-direction: column; gap: var(--s2); padding: var(--s4); }
  .wa-row-side { text-align: left; display: flex; align-items: center;
                 gap: var(--s2); }
  .wa-row-last { max-width: none; white-space: normal;
                 display: -webkit-box; -webkit-line-clamp: 2;
                 -webkit-box-orient: vertical; overflow: hidden; }
  .wa-count { margin-bottom: 0; }
  .wa-msg { max-width: 88%; }
  .wa-thread { padding: var(--s4); max-height: 60vh; }
  .wa-reply .row { flex-direction: column; align-items: stretch !important;
                   gap: var(--s2); }
  .wa-reply .btn { width: 100%; }

  /* Four tiles across a phone is four unreadable tiles. Two, side by side. */
  .statbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
             gap: var(--s2); }
  .statbar .stat { min-width: 0; padding: var(--s3) var(--s4); }
  .statbar .stat strong { font-size: 1.25rem; }

  /* The board toolbar: search on its own line, chips scroll sideways rather
     than stacking into a wall of pills. */
  .jobboard-bar { padding: var(--s4); }
  .jobboard-search { flex-direction: column; align-items: stretch;
                     gap: var(--s2); }
  .jobboard-search .btn { width: 100%; }
  .jobboard-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none; }
  .jobboard-chips::-webkit-scrollbar { display: none; }
  .jobboard-chips .chip { flex: 0 0 auto; }
  .jobboard-head { flex-direction: column; align-items: flex-start;
                   gap: var(--s3); }
  .job-card { flex-direction: column; gap: var(--s3); }
  .job-side { align-items: flex-start; text-align: left;
              flex-direction: row; justify-content: space-between;
              width: 100%; }
}

/* ================================================= the front door (login) ===
   Full-viewport dark sign-in, adapted from the Peek A Booth HQ front door:
   same grid, sizes, morph and mobile behaviour, Alara's colours.

   The accent here is the mint, not the green. On a near-black ground the
   green is too dark to read as text or to carry a button; the mint is the
   lighter half of the same brand pair and is what it exists for.
   ======================================================================== */

body.is-front {
  --front-ground: #0A0E14;     /* brand ink */
  --front-card:   #141A22;
  --front-line:   #232C38;
  --front-input:  #070A0F;
  --front-stroke: #2E3A48;
  --front-accent: var(--pink-mint);
  --front-soft:   #D6DEE6;
  --front-grey:   #8A94A2;
  --front-divide: #161D26;
  --head: "Sora", "Inter", system-ui, sans-serif;

  background: var(--front-ground);
}
body.is-front .topbar { display: none; }
body.is-front .page { max-width: none; padding: 0; }

.front { display: grid; grid-template-columns: 58fr 42fr;
         min-height: 100vh; min-height: 100dvh;
         background: var(--front-ground); }

.front-brand { background: var(--front-ground); color: #fff;
               padding: clamp(28px, 5vw, 72px);
               display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 34px);
               justify-content: space-between; font-family: var(--head); }
.front-eyebrow { font-family: var(--head); font-weight: 700; font-size: .8rem;
                 letter-spacing: .18em; text-transform: uppercase;
                 color: var(--front-grey); margin-bottom: 14px; }
.front-hq { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 22px);
            flex-wrap: wrap; margin: 0; }
/* Sized by height, not width. The original front door used a long thin
   wordmark; Alara's mark is nearly square, so matching widths would make it
   four times as tall and push the quote off the bottom of the screen. Height
   is what has to match the line of type it replaces. */
.front-logo { height: clamp(76px, 10vw, 158px); width: auto; max-width: 100%;
              display: block; }

/* text -> logo morph: the words show first, then dissolve into the wordmark.
   Both sit in one grid cell so the swap moves nothing around it. */
.morph { position: relative; display: inline-grid; align-items: center; }
.morph > * { grid-area: 1 / 1; }
.morph-text { font-family: var(--head); font-weight: 800;
              font-size: clamp(2.6rem, 1.2rem + 5vw, 5.4rem); line-height: .98;
              letter-spacing: -.035em; color: #fff; white-space: nowrap;
              animation: morph-out 1.1s cubic-bezier(.6,0,.2,1) 1.4s forwards; }
.morph-logo { opacity: 0; transform: scale(.92); filter: blur(10px);
              animation: morph-in 1.1s cubic-bezier(.6,0,.2,1) 1.55s forwards; }
@keyframes morph-out {
  0%   { opacity: 1; transform: none; filter: blur(0); letter-spacing: -.035em; }
  100% { opacity: 0; transform: scale(1.06); filter: blur(14px); letter-spacing: .08em; }
}
@keyframes morph-in {
  0%   { opacity: 0; transform: scale(.92); filter: blur(10px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .morph-text { display: none; }
  .morph-logo { opacity: 1; transform: none; filter: none; animation: none; }
}

.front-tag { color: var(--front-soft); font-weight: 700; font-family: var(--head);
             font-size: clamp(1.15rem, .8rem + 1.3vw, 1.7rem);
             letter-spacing: -.01em; margin: 18px 0 0; max-width: 30ch; }

.collage { display: grid; grid-template-columns: 1.4fr 1fr;
           grid-auto-rows: clamp(104px, 10.5vw, 168px); gap: 12px; max-width: 780px; }
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px;
               display: block; background: #131A22; }
.collage .collage-a { grid-row: 1 / span 2; }

.front-quote { margin: 0; }
.front-quote { max-width: 900px; }
.front-quote p { font-family: var(--head); font-weight: 800;
                 font-size: clamp(1.35rem, .9rem + 1.4vw, 2.05rem); line-height: 1.15;
                 margin: 0 0 10px; letter-spacing: -.02em; color: #fff; }
.front-quote footer { color: var(--front-accent); font-weight: 700; font-size: 1.05rem; }

.front-form { display: flex; align-items: center; justify-content: center;
              padding: clamp(20px, 5vw, 80px); background: var(--front-ground);
              border-left: 1px solid var(--front-divide); }
.front-form .login-wrap { width: 100%; max-width: 26rem; margin: 0; }
.front-form-title { font-family: var(--head); font-weight: 800; font-size: 2.2rem;
                    letter-spacing: -.03em; color: #fff; margin: 0 0 6px; }
.front-form .muted, .front-form .faint { color: var(--front-grey); }
.front-form .card { background: var(--front-card); border-color: var(--front-line);
                    box-shadow: 0 20px 60px -20px rgba(0,0,0,.8); padding: 24px;
                    margin-top: 18px; }
.front-form label { color: #B6C0CC; }
.front-form input { background: var(--front-input); border-color: var(--front-stroke);
                    color: #fff; min-height: 46px; font-size: 1rem; }
.front-form input::placeholder { color: #5C6675; }
/* Chrome paints saved logins with its own pale yellow-white and ignores
   `background`. The only thing it does not override is an inset shadow, so
   that is what fills the field back in on a dark card. */
.front-form input:-webkit-autofill,
.front-form input:-webkit-autofill:hover,
.front-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px var(--front-input) inset;
  caret-color: #fff;
  transition: background-color 6000s ease-in-out 0s;
}
.front-form input:focus { border-color: var(--front-accent);
                          outline-color: var(--front-accent);
                          box-shadow: 0 0 0 3px rgba(85, 176, 132, .22); }
/* Mint carries the button here; dark text on it, because white on mint is the
   one combination in this palette that fails to read. */
.front-form .btn-primary { background: var(--front-accent);
                           border-color: var(--front-accent);
                           color: #08210F; min-height: 48px; font-size: 1.02rem;
                           font-family: var(--head); font-weight: 700; }
.front-form .btn-primary:hover { background: #6BC094; border-color: #6BC094;
                                 color: #08210F; }
.front-form .small { margin-top: 14px; }
.front-form .notice { margin-top: 14px; }

@media (max-width: 860px) {
  .front { grid-template-columns: 1fr; min-height: 0; }
  .front-brand { gap: 22px; padding: 32px 22px 30px; }
  .collage { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; gap: 8px; }
  .collage .collage-a { grid-column: 1 / span 2; grid-row: 1; }
  .front-logo { height: 68px; width: auto; }
  .morph-text { font-size: 2.3rem; }
  .front-tag { font-size: 1.15rem; max-width: none; }
  .front-quote p { font-size: 1.4rem; }
  .front-form { padding: 8px 22px 44px; border-left: 0; }
}

/* The brief exactly as WhatsApp will show it — monospaced so the line breaks
   somebody will actually see are the line breaks on the screen. */
.brief-preview {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s5);
  font-size: .86rem; line-height: 1.55; color: var(--ink);
  max-height: 46vh; overflow-y: auto;
}

/* ---------------------------------------------- interview availability ---- */
/* This was a four-column table in a horizontal scroller. On a phone the "On"
   column sat at left:-51px — off the screen — so the one control that matters
   could not be reached at all. Rows now stack, and nothing here scrolls
   sideways. */

.day-copy { display: flex; align-items: center; gap: var(--s2);
            flex-wrap: wrap; margin: 0 0 var(--s4);
            padding: var(--s3) var(--s4); border-radius: var(--r);
            background: var(--surface-2); border: 1px solid var(--line); }

.day-list { list-style: none; margin: 0; padding: 0; }
.day-row { display: flex; align-items: center; gap: var(--s4);
           padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line);
           border-radius: var(--r-sm); }
.day-row:last-child { border-bottom: 0; }
.day-row.is-on { background: var(--pink-wash); }

/* The whole day name is the hit target, not a 17px box. */
.day-on { display: flex; align-items: center; gap: var(--s3);
          min-width: 148px; cursor: pointer; margin: 0; padding: var(--s2) 0; }
.day-on input { width: 24px; height: 24px; flex: 0 0 auto; margin: 0; }

.day-times { display: flex; align-items: center; gap: var(--s2);
             flex-wrap: wrap; min-width: 0; }
.day-lbl { font-size: .82rem; color: var(--muted); }
.time-pick { width: auto; min-width: 116px; }
/* Only shown on a window that really does cross midnight. */
.day-next { display: none; font-size: .74rem; font-weight: 600;
            color: var(--pink-ink); background: var(--pink-wash);
            border: 1px solid var(--pink-line); border-radius: 999px;
            padding: 2px 9px; white-space: nowrap; }
.day-row.crosses.is-on .day-next { display: inline-block; }
/* An unticked day is still readable, just clearly off. */
.day-row:not(.is-on) .day-times { opacity: .55; }

@media (max-width: 640px) {
  .day-row { flex-direction: column; align-items: stretch; gap: var(--s2);
             padding: var(--s3) var(--s2) var(--s4); }
  .day-on { min-width: 0; }
  .day-times { padding-left: 32px; }
  .time-pick { flex: 1 1 130px; min-width: 0; }
  .day-copy .time-pick { flex: 1 1 120px; }
  .day-copy .js-apply-all { flex: 1 1 100%; }
}