/* ============================================================
   GP Team Hub - components.css
   Content patterns shared across pages: cards, grids, timeline,
   tables, directories, tiles, callouts, tags.

   COLOR RULE: no literal color values here. Everything references a
   token from :root in base.css.

   DENSITY: this is reference material scanned for one fact, not an
   article read end to end, so padding is tight and the type steps are
   wide. Nothing carries a drop shadow; a block is separated from the
   page by its surface value and a hairline.
   ============================================================ */

/* ---------------- Chip nav ----------------
   Only survives where the chips are outbound links. app.js removes any
   chip row that is purely in-page anchors, because the section bar
   already does that job and better. */
.chipnav{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 24px;}
.chipnav a{
  color:var(--ink-soft);
  font-size:.82rem;
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-raised);
  transition:background .12s,color .12s,border-color .12s;
}
.chipnav a:hover,
.chipnav a.accent{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);text-decoration:none;}
.chipnav a.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);}

/* ---------------- Off-site links ----------------
   Links to somewhere else, in a row. They are not chips: a chip picks
   one of a set and one of them is always the current pick, which is the
   wrong reading for four links that all just open. */
.extlinks{
  display:flex;flex-wrap:wrap;
  gap:6px 20px;
  margin:0 0 22px;
  font-size:.84rem;
}
.extlinks a{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent);
}
.extlinks a i{font-size:.76rem;color:var(--ink-faint);}
.extlinks a:hover i{color:var(--accent);}

/* ---------------- Tags ----------------
   A tag is a label first and reads by its own words, so the default is
   neutral. The accent variant marks the recommended path, which keeps
   at most one tag in any group emphasized. */
.tag{
  display:inline-block;
  font-size:.69rem;font-weight:700;letter-spacing:.5px;
  padding:3px 9px;border-radius:var(--radius-sm);text-transform:uppercase;
  background:var(--surface-high);
  color:var(--ink-soft);
}
.tag-accent{background:var(--accent-strong);color:var(--ink-inverse);}

/* ---------------- Grids ---------------- */
/* Explicit counts rather than auto-fit. auto-fit fits as many columns
   as will physically go, which is how a four-card section became three
   across with the fourth stranded on its own row. A named count wraps
   evenly: 2x2, or 2 then 4, and one column on a phone. */
/* minmax(0,1fr) rather than 1fr, so a card whose widest child cannot
   shrink is clipped inside its column instead of widening the column
   past the screen. */
.grid{display:grid;gap:12px;margin-top:14px;grid-template-columns:minmax(0,1fr);}

@media (min-width:620px){
  .g2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:560px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1000px){
  .g3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ---------------- Cards ---------------- */
.card{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
  transition:border-color .15s;
}
.card:hover{border-color:var(--line-strong);}
.card h3{font-size:1rem;font-weight:700;margin:6px 0 4px;line-height:1.35;}
.card .meta{color:var(--ink-soft);font-size:.88rem;line-height:1.55;}
.card ul{margin:9px 0 0 17px;}
.card li{margin-bottom:5px;font-size:.89rem;line-height:1.55;}
.card li::marker{color:var(--ink-faint);}

/* Yes/no lists. A check and a cross carry the meaning, so these are the
   only list markers on the site that take a color. */
.yes li,.no li{list-style:none;position:relative;padding-left:5px;}
.yes li::before,.no li::before{
  font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:-17px;top:1px;font-size:.75em;
}
.yes li::before{content:"\f00c";color:var(--ink);}
.no li::before{content:"\f00d";color:var(--danger);}
.lbl{font-size:.69rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;margin-top:13px;}
.lbl.ok{color:var(--ink);}
.lbl.not{color:var(--danger);}

/* ---------------- Callouts ----------------
   A note is already set apart by its surface, so bold alone carries the
   emphasis inside it. Only the critical variant escalates to a color,
   which is what makes the deal-killing notes findable at a glance. */
.warn{
  background:var(--surface-high);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 15px;
  margin-top:13px;
  font-size:.88rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.warn b{color:var(--ink);}

/* A critical note sits on the ordinary raised surface and lets a
   colored icon do the signaling. The tinted maroon it used to wear
   went muddy against the dark palette: a desaturated red panel reads as
   a smudge rather than as a warning, and it is the pattern that put
   colored type on a colored ground in the first place. */
.crit{
  background:var(--surface-raised);
  border-color:var(--line-strong);
  color:var(--ink-soft);
}
.crit b{color:var(--ink);}

/* Callouts get their icon from CSS rather than from markup, so every
   one of them has an icon and they are all the same size. */
.warn::before,.crit::before{
  font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:.92em;
  margin-right:9px;
  color:var(--ink-faint);
}
.warn::before{content:"\f05a";}
.crit::before{content:"\f071";color:var(--danger);}

/* ---------------- Timeline ----------------
   The rail is narrow on a phone because a 375px screen cannot spare
   60px to a decorative column, and widens once there is room. */
.timeline{position:relative;margin-top:10px;}
.stage{display:flex;gap:12px;position:relative;padding-bottom:20px;}
.stage:last-child{padding-bottom:0;}
.rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:30px;}
/* Filled rather than outlined: a step number is a label on a sequence,
   and the grey ring read as a control that had been switched off. */
.dot{
  width:30px;height:30px;border-radius:var(--radius-pill);
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.86rem;
  color:var(--ink-inverse);
}
.cord{flex:1;width:1px;background:var(--line);margin-top:5px;}
.stage-card{
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;flex:1;min-width:0;
}
.stage-card h3{font-size:1rem;font-weight:700;margin-bottom:2px;line-height:1.35;}
.stage-card .when{color:var(--ink-faint);font-size:.8rem;margin-bottom:8px;}
.stage-card ul{margin:8px 0 0 17px;}
.stage-card li{margin-bottom:6px;font-size:.89rem;line-height:1.55;}
.stage-card li::marker{color:var(--ink-faint);}

@media (min-width:640px){
  .stage{gap:16px;padding-bottom:24px;}
  .rail{width:38px;}
  .dot{width:38px;height:38px;font-size:.95rem;}
}

/* ---------------- Tables ----------------
   The old table forced a 520px minimum, so every reference table on the
   site scrolled sideways on a phone. These stack into labelled rows on
   small screens instead, which is the size they get read at most. */
/* The wrapper is the scroll container at every width. A table whose
   own content will not fit 360px still has to scroll inside its box
   rather than pushing the page sideways. */
.tbl-wrap{margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  font-size:.89rem;
}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;}
th{
  background:var(--surface-high);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;
  color:var(--ink-faint);font-weight:700;
}
tr:last-child td{border-bottom:none;}
td:first-child{color:var(--ink);font-weight:600;}

/* The floor and the sideways scroll belong to the wrapper that opted
   into them. Applying them to every table pushed the ones that live
   inside a card wider than the card, which is where the horizontal bar
   on the support inboxes came from. */
@media (min-width:640px){
  .tbl-wrap table{min-width:520px;}
  .tbl-wrap th,
  .tbl-wrap td,
  .acct-table th,
  .acct-table td{padding:11px 15px;}
  .tbl-wrap td:first-child,
  .acct-table td:first-child{white-space:nowrap;}
}

/* The accounts tables carry a name, a switch per role, a state and two
   actions, which is more columns than a narrow screen has room for. The
   scroll belongs to the box around the table rather than to the table,
   because a table told to scroll stops being a table and shrinks to its
   own content instead of filling the width it was given. */
.acct-scroll{overflow-x:auto;max-width:100%;scrollbar-width:thin;}
.acct-table{width:100%;border-collapse:collapse;}

/* The table keeps its own natural width at every width and its box
   scrolls, because a column squeezed to fit wraps a date into six lines
   and a name into three. Where the content fits, width:100% still fills
   the box, so this only ever adds the scroll that squeezing replaced. A
   phone width was not the boundary: the same date wrapped onto three
   lines on a desktop set to a larger browser font. A cell holding a
   sentence is capped so one long note cannot drag the whole table out to
   the length of the note. */
.tbl-wrap table,
.acct-scroll .acct-table{min-width:max-content;}
.tbl-wrap th,
.tbl-wrap td,
.acct-scroll th,
.acct-scroll td{max-width:62vw;}

/* ---------------- Figures ---------------- */
.money{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:14px;}
.big{font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--gold-ink);}

/* ---------------- Launch tiles ---------------- */
.launch{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));margin-top:14px;}
.launch a{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 13px;
  color:var(--ink);
  min-height:58px;
  transition:background .12s,border-color .12s;
}
.launch a:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.launch .l-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.launch .l-name{font-weight:600;font-size:.9rem;}
.launch .l-sub{color:var(--ink-faint);font-size:.76rem;line-height:1.35;}
.l-icon{width:17px;height:17px;border-radius:3px;flex-shrink:0;color:var(--ink-faint);}

/* ---------------- Flow strip ----------------
   A sequence rather than a grid: the steps read across and wrap. */
.flow{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;}
.flow a{
  flex:1 1 118px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 12px;
  color:var(--ink);
  font-size:.85rem;
  min-width:112px;
  transition:background .12s,border-color .12s;
}
.flow a:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.flow .f-step{
  display:block;font-size:.67rem;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------------- Daily playbook ---------------- */
.daily{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:4px 17px;
  margin-top:14px;
}
.daily-row{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);}
.daily-row:last-child{border-bottom:none;}
.daily-num{font-size:1.05rem;font-weight:700;color:var(--ink-faint);width:20px;flex-shrink:0;line-height:1.5;}
.daily-act{font-weight:600;font-size:.94rem;line-height:1.4;}
.daily-why{color:var(--ink-soft);font-size:.85rem;margin-top:3px;line-height:1.5;}
.daily-pay{
  margin-left:auto;color:var(--ink);font-weight:700;font-size:.82rem;
  white-space:nowrap;padding-top:2px;
}

/* ---------------- Link directory ---------------- */
.linkgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));margin-top:14px;}
.linkcard{
  display:flex;flex-direction:column;gap:2px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:11px 13px;
  color:var(--ink);
  position:relative;
  transition:background .12s,border-color .12s;
}
.linkcard:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.lc-top{display:contents;}
.lc-name{font-weight:600;font-size:.9rem;}
.lc-desc{color:var(--ink-soft);font-size:.79rem;line-height:1.45;margin-top:2px;}
.lc-dom{order:10;color:var(--ink-faint);font-size:.7rem;margin-top:6px;overflow-wrap:anywhere;}
.lc-personal{
  align-self:flex-start;
  margin-top:6px;
  font-size:.66rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-inverse);
  background:var(--accent-strong);
  border-radius:var(--radius-sm);
  padding:2px 7px;
}
.cat-head{display:flex;align-items:baseline;gap:9px;margin:34px 0 2px;}
.cat-head h2{margin:0;}
.cat-count{color:var(--ink-faint);font-size:.79rem;}

/* ---------------- Phone directory ----------------
   The number is the answer, so it is the largest thing in the card and
   the whole of it is a tel: link. */
.phonegrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));margin-top:14px;}
.phonecard{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  display:flex;flex-direction:column;gap:2px;
  transition:border-color .15s;
}
.phonecard:hover{border-color:var(--line-strong);}
.pc-who{font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-faint);}
.pc-num{font-size:1.3rem;font-weight:700;margin:2px 0;line-height:1.2;}
.pc-num a{color:var(--ink);}
.pc-opt{font-size:.83rem;color:var(--ink);font-weight:600;}
.pc-for{color:var(--ink-soft);font-size:.83rem;line-height:1.5;margin-top:3px;}
.pc-mail{font-size:.8rem;margin-top:4px;word-break:break-all;}

/* The number and the address are the two things a rep taps, so both
   carry the icon that says what tapping will do. */
.pc-num::before,.pc-mail::before{
  font-family:"Font Awesome 6 Free";font-weight:900;
  color:var(--ink-faint);
  margin-right:8px;
}
.pc-num::before{content:"\f879";font-size:.72em;}
.pc-mail::before{content:"\f0e0";font-size:.92em;}
.pc-flag{color:var(--danger);font-size:.76rem;margin-top:5px;line-height:1.45;}
.pc-actions{display:flex;gap:7px;margin-top:10px;}
.copy-btn{
  font-size:.75rem;font-weight:600;
  padding:5px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--surface-high);
  color:var(--ink-soft);
}
.copy-btn:hover{color:var(--ink);border-color:var(--line-strong);}
.copy-btn.copied{color:var(--ink);border-color:var(--line-strong);}

/* The official page is the one that settles any disagreement with this
   one, so the way to it is a button near the top rather than one more
   entry in the row of links under it. */
.inc-official{margin:14px 0 0;}

/* ---------------- Incentive cards ---------------- */
.inc-card{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:17px 19px;
}
/* Every figure on the site is the accent. The gold is the brand mark's
   color and wears the logo; using it for money made two different
   things look like the same one. */
.inc-amt{font-size:1.75rem;font-weight:700;color:var(--accent);line-height:1.1;letter-spacing:-.3px;}
.inc-name{font-weight:700;font-size:1.02rem;margin-top:3px;}
.inc-sub{color:var(--ink-soft);font-size:.85rem;margin-top:3px;line-height:1.5;}
.inc-tiers{margin:13px 0 0;display:flex;flex-direction:column;gap:5px;}
.inc-tier{
  display:flex;justify-content:space-between;gap:10px;
  background:var(--surface-high);
  border-radius:var(--radius-sm);
  padding:8px 13px;
  font-size:.87rem;
  color:var(--ink-soft);
}
.inc-tier b{color:var(--ink);white-space:nowrap;}
.fine{color:var(--ink-faint);font-size:.79rem;margin-top:11px;line-height:1.6;}
.elem-tier{font-size:1.35rem;letter-spacing:-.2px;}

/* ---------------- My Links rows ---------------- */
.ml-row{
  display:flex;align-items:center;gap:11px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 13px;
  margin-top:7px;
}
.ml-main{min-width:0;flex:1;}
.ml-label{font-weight:600;font-size:.92rem;}
.ml-url{color:var(--ink-faint);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.ml-actions{display:flex;gap:6px;flex-shrink:0;}
.suggest{border-style:dashed;background:transparent;}

/* ---------------- Cadence list ---------------- */
.cadence li{margin-bottom:7px;font-size:.89rem;line-height:1.55;}
.cadence b{color:var(--ink);font-weight:600;}

/* ---------------- Page-level filter ---------------- */
.filter-wrap{position:relative;max-width:420px;margin-top:6px;}
.filter-wrap input{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  padding:10px 13px;
  font-size:.94rem;
  outline:none;
}
.filter-wrap input::placeholder{color:var(--ink-faint);}
.filter-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.hidden{display:none !important;}

/* ---------------- Sections ----------------
   Built by app.js: a heading and everything under it, grouped so the
   chip row above can swap one group for another. The header is a
   heading and nothing more, because a header that folded its content
   away meant clicking a title emptied the page. */
.sec-head{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:1.09rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.2px;
  margin:0 0 4px;
  padding:6px 0 10px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--topbar-h) + 44px);
}
.sec + .sec .sec-head{margin-top:30px;}

/* The icon carries the accent on its own strokes. A filled tile behind
   it competed with the numbered bubbles and the card icons further
   down the same page, so the mark is the glyph alone. */
.sec-ic{
  font-size:1.2rem;
  width:24px;
  flex-shrink:0;
  text-align:center;
  color:var(--accent);
}
/* Written a second time against the header it lives in, because the
   generic h2 icon rule further down this file is one step more
   specific and would otherwise take the size and the hue back. */
.sec-head .sec-ic{font-size:1.2rem;color:var(--accent);}
.sec-title{min-width:0;}

/* A named block inside a section. It reads as a heading rather than as
   a card title, and it keeps its own id so every link written against
   the old standalone section still lands on it. */
.sec-sub{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.98rem;
  font-weight:700;
  line-height:1.3;
  margin:34px 0 0;
  padding-bottom:7px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--topbar-h) + 52px);
}
.sec-sub > i{font-size:.92rem;width:18px;text-align:center;color:var(--accent);}
.sec-sub + .sub{margin-top:7px;}

.sec-body{padding:0 0 22px;}

/* The first block sits directly under the header and does not need the
   48px break a standalone heading would take. */
.sec-body > *:first-child{margin-top:10px;}

/* ---------------- Icons ----------------
   One size per role, so an icon never changes size between two places
   that mean the same thing. */
h2 .fa-fw{margin-right:7px;font-size:.85em;color:var(--ic);}
.card h3 .fa-fw,.stage-card h3 .fa-fw{margin-right:7px;font-size:.85em;color:var(--ink-faint);}
.warn > .fa-fw{margin-right:8px;color:var(--ink-faint);}
.crit > .fa-fw{color:var(--ink-soft);}
.pc-flag .fa-fw,.pc-flag i{margin-right:5px;}

/* ---------------- SPA transition ---------------- */
.page{transition:opacity .1s ease;}
.page.fading{opacity:0;}

/* ============================================================
   Picker cards
   A row of cards standing in for a stack of open sections. Seven lists
   on screen at once buries whatever follows them and nobody scans a
   wall of forty names for one document, so each group is a card and
   opens only when asked for. Shared by the document shelf, the
   business-type lookup and the objection list.
   ============================================================ */
/* A row of chips, each the width of its own name. An equal-column grid
   cut the longer group names down to "Competi..." while leaving the
   short ones padded out. */
.picker{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px;
}
.pick{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  color:var(--ink-soft);
  text-align:left;
}
.pick:hover{background:var(--surface-high);border-color:var(--line-strong);color:var(--ink);}
.pick-on{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}
.pick-on:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--ink-inverse);}
.pick-ic{font-size:.92rem;flex-shrink:0;color:var(--ic);}
.pick-on .pick-ic{color:var(--ink-inverse);opacity:.85;}
.pick-name{
  font-size:.85rem;font-weight:600;
  white-space:nowrap;
}
.pick-n{
  flex-shrink:0;
  font-size:.72rem;font-weight:700;
  color:var(--ink-faint);
}
.pick-on .pick-n{color:var(--ink-inverse);opacity:.8;}

/* Panels sit under the row and are plain hidden rather than animated,
   because a height transition on a list of unknown length either
   clips it or jumps. */
.shelf-group[hidden],
[data-pick-panel][hidden]{display:none;}

/* ============================================================
   The sign-in wall
   Two tabs on a pair of hidden radios, so the switch needs no
   scripting and a browser with JS off still reaches both forms.
   ============================================================ */
.wall{
  max-width:520px;
  margin:26px auto 40px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 20px 22px;
}
.wall-head{display:flex;align-items:flex-start;gap:13px;}
.wall-ic{
  font-size:1.05rem;
  color:var(--ic);
  margin-top:3px;
  flex-shrink:0;
}
.wall-head-main{min-width:0;}
.wall-title{
  font-size:1.12rem;font-weight:700;letter-spacing:-.2px;
  margin:0;
  color:var(--ink);
}
.wall-lead{
  margin:5px 0 0;
  font-size:.86rem;line-height:1.5;
  color:var(--ink-soft);
}
.wall-alert{margin:15px 0 0;}

.wall-radio{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}
.wall-tabbar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin:18px 0 18px;
  padding:3px;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.wall-tab{
  display:block;
  text-align:center;
  padding:8px 10px;
  border-radius:5px;
  font-size:.88rem;font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  user-select:none;
}
.wall-tab:hover{color:var(--ink);}
#wallTabSignin:checked ~ .wall-tabbar .wall-tab[for="wallTabSignin"],
#wallTabRegister:checked ~ .wall-tabbar .wall-tab[for="wallTabRegister"]{
  background:var(--accent);
  color:var(--ink-inverse);
}
#wallTabSignin:focus-visible ~ .wall-tabbar .wall-tab[for="wallTabSignin"],
#wallTabRegister:focus-visible ~ .wall-tabbar .wall-tab[for="wallTabRegister"]{
  box-shadow:0 0 0 3px var(--accent-ring-soft);
}

.wall-panel{display:none;}
#wallTabSignin:checked ~ .wall-signin,
#wallTabRegister:checked ~ .wall-register{display:block;}

.wall-foot{
  margin:14px 0 0;
  font-size:.8rem;line-height:1.5;
  color:var(--ink-faint);
}

/* On a page that shows some of its content, the wall is a divider in
   the flow rather than the whole page, so it gets a rule above it. */
.wall-inline{
  margin-top:30px;
  border-top:1px solid var(--line);
  padding-top:26px;
}
.wall-inline .wall{margin-top:0;}

/* ---- A page whose title carries one action ----
   The control sits level with the heading, on the far side of it, so
   it reads as somewhere to go rather than as the end of whatever
   table happens to be underneath. */
.page-head-act{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.page-head-act > div{min-width:0;}
.head-act{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:38px;height:38px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
  font-size:.92rem;
}
.head-act:hover{background:var(--surface-high);border-color:var(--line-strong);color:var(--ink);text-decoration:none;}
.head-act-n{
  position:absolute;top:-6px;right:-6px;
  min-width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 4px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.63rem;font-weight:700;
}


/* ---- A select, on the page surface ----
   The same control as the theme picker in the top bar. Shared rather
   than admin-only: the day-off reason on Today and the partner kind on
   Referrals are the same box, and a control two pages away from the
   admin has no business loading the admin's stylesheet to be drawn. */
.sel{position:relative;display:inline-flex;width:100%;min-width:0;}
.sel-in{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;
  padding:7px 28px 7px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-page);
  color:var(--ink);
  font-size:.84rem;font-weight:600;
  cursor:pointer;
  outline:none;
  text-overflow:ellipsis;
}
.sel-in:hover{background:var(--surface-high);border-color:var(--line-strong);}
.sel-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.sel-in option{background:var(--surface-raised);color:var(--ink);}
.sel-ic{
  position:absolute;top:50%;right:10px;transform:translateY(-50%);
  color:var(--ink-faint);
  font-size:.68rem;
  pointer-events:none;
}

/* ---- Add ----
   The button at the foot of a table that adds a row to it. On Referrals
   as well as on every admin table. */
.acct-add{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;
  border-radius:var(--radius-sm);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.83rem;font-weight:700;
  white-space:nowrap;
}
.acct-add:hover{background:var(--accent-hover);}