/* ============================================================
   Pipezoom - 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: because this is reference material scanned for 1 fact,
   padding is tight and the type steps are wide. Nothing carries a drop
   shadow; a block is set apart from the page by its background value
   and a hairline.
   ============================================================ */

/* Chip nav
   Kept only where the chips are outbound links. Because the section bar
   already covers in-page anchors, app.js removes any chip row made only
   of them. */
.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
   Because a chip picks 1 of a set and always marks a current pick, the
   4 links to other sites are drawn as plain links in a row. */
.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
   Because a tag is a label that reads by its own words, the default is
   neutral. The accent variant marks the recommended path, at most 1 tag
   in any group. */
.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. auto-fit fits as many columns as will go and can
   strand the last card on its own row. A named count wraps evenly: 2x2,
   or 2 then 4, and 1 column on a phone. */
/* minmax(0,1fr) clips a card whose widest child cannot shrink inside its
   column and holds the column inside 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. Because a check and a cross carry the meaning, 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
   Because a note is already set apart by its background, bold alone
   carries the emphasis inside it. Only the critical variant takes a
   color, and it marks the deal-killing notes. */
.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 is on the ordinary raised background and a colored
   icon does the signaling. A tinted maroon panel goes muddy against the
   dark palette and puts colored type on a colored ground. */
.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: 1 icon each, 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
   Because a 375px screen cannot spare 60px to a decorative column, the
   rail is narrow on a phone 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;}
/* Because a gray ring reads as a switched-off control, a step number is
   drawn filled. */
.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
   On small screens, the size they are read at most, these stack into
   labeled rows. */
/* 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. */
.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 apply only to the wrapper that opts
   into them. On every table they push a table inside a card wider than
   the card. */
@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 2
   actions: more columns than a narrow screen holds. Because a table told
   to scroll shrinks to its own content, the scroll is on the box around
   the table. */
.acct-scroll{overflow-x:auto;max-width:100%;scrollbar-width:thin;}
.acct-table{width:100%;border-collapse:collapse;}

/* Because a column squeezed to fit wraps a date into 6 lines and a name
   into 3, the table keeps its natural width at every width and its box
   scrolls. With content that fits, width:100% still fills the box. A
   desktop with a larger browser font wraps the same date at any screen
   width. A cell holding a sentence has a width cap that keeps 1 long
   note from stretching the whole table. */
.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: 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;
}

/* A heading can carry 1 link at the right-hand end of its own line,
   above the rule under it. The chip label, the section slug and the
   search index skip the link through its data-head-link mark and read
   the heading's own words. */
h2:has(> .head-link),h2:has(> .head-pick){display:flex;align-items:center;gap:11px;}
.head-link{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent);
  font-size:.8rem;font-weight:600;
  white-space:nowrap;
}
.head-link:hover{text-decoration:underline;}
.head-link i{font-size:.72rem;}

/* A heading whose words are a choice. The pick takes the words' position,
   in the heading's own type, with a caret after it. The words the chip
   and the crumb read stay in .sec-title, off screen, and are rewritten
   with each pick to keep the heading, the chip and the crumb in step.
   The section builder sets the data-head-pick mark aside the way it sets
   the head link aside. */
h2.sec-head:has(> .head-pick) > .sec-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.head-pick{position:relative;display:inline-flex;align-items:center;}
.head-pick-sel{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;padding:0 22px 0 0;margin:0;
  font:inherit;color:inherit;cursor:pointer;
}
.head-pick-sel:focus-visible{outline:none;border-radius:6px;box-shadow:0 0 0 3px var(--accent-ring-soft);}
.head-pick-ic{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:.7rem;color:var(--ink-faint);pointer-events:none;}
.head-pick-sel option{font-size:1rem;font-weight:400;color:var(--ink);background:var(--surface-raised);}

/* 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 largest thing in the card, and the whole number 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, the 2 things a rep taps, each carry an
   icon naming what the tap does. */
.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);}

/* Because the official page settles any disagreement with this one, the
   way to it is a button near the top. */
.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. Gold is the brand mark's
   color and stays on the logo. */
.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 for the
   chip row above to swap 1 group for another. The header is only a
   heading and folds nothing away. */
.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;}

/* Because a filled tile competes with the numbered bubbles and the card
   icons further down the page, the mark is the glyph alone, with the
   accent on its strokes. */
.sec-ic{
  font-size:1.2rem;
  width:24px;
  flex-shrink:0;
  text-align:center;
  color:var(--accent);
}
/* Because the generic h2 icon rule further down this file is 1 step more
   specific, this rule repeats the size and the hue against the header
   the icon is in. */
.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 and keeps its
   own id for the links written against the old standalone section. */
.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 is directly under the header and skips the 48px break
   of a standalone heading. */
.sec-body > *:first-child{margin-top:10px;}

/* Icons
   1 size per role, the same in every place that means 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, 1 a group, each opening only when pressed. Because 7
   open lists bury whatever follows them, the groups stay shut. 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
   cuts a longer group name to "Competi." and pads the short ones 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;}

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

/* ============================================================
   The sign-in wall
   2 tabs on a pair of hidden radios: a switch with no script, usable in
   a browser with JS off.
   ============================================================ */
.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 with 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 1 action. The control is level with the
   heading, on its far side. */
.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 background
   The same control as the theme picker in the top bar. The day-off
   reason on Today and the partner kind on Referrals share this box,
   defined here and kept out of the admin's stylesheet. */
.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
   and 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);}