/* THE PAGES BESIDE THE DASHBOARD: sign-in (and the profile it asks for), the account
   page and the admin page. base.css, loaded first, gives them the dashboard's colours,
   typefaces, text size and scale; this file gives them the dashboard's parts, so each
   control here is a copy of one there:

     the top bar      .brand and .top (app.css): the serif wordmark, 62px, one hairline
     page tabs        the Support panel's tabs (.helptab): text with an accent underline
     segments         the dashboard's view switch (.viewtabs): a pill on a sunk track
     buttons          .btn: 12.5px, medium weight, a strong hairline
     fields           the filter panel's fields: sunk, borderless until focused
     section labels   the drawer's (.sect h3): small capitals, muted
     badges           .chip
     tables           the Support panel's (.help th / td)

   They were drawn from separate files with their own colours and a 15-16px type, so
   they looked like another product (2026-10-13). On a phone the controls grow to
   finger size and fields to 16px, below which iOS zooms in on focus. */

body{min-height:calc(100vh / var(--ui));overflow-x:hidden}
p{margin:0 0 10px}
.muted{color:var(--ink-mute)}
.small{font-size:12px}
hr{border:0;border-top:1px solid var(--rule);margin:18px 0}

/* ---------- the top bar: the dashboard's ---------- */
.pgbar{display:grid;grid-template-columns:288px 1fr;background:var(--surface);position:sticky;top:0;z-index:5}
/* Each half carries its own hairline and the full 62px, as .brand and .top do. */
.pgbar .brand,.pgtop{min-height:62px;border-bottom:1px solid var(--rule)}
.pgbar .brand{display:flex;align-items:center;padding:0 20px}
.pgbar .brand b{font-family:var(--serif);font-size:21px;font-weight:400;letter-spacing:-.01em;line-height:1.1}
.pgbar .brand a{color:var(--ink);text-decoration:none}
.pgtop{display:flex;align-items:center;justify-content:flex-end;padding:0 60px 0 0;min-width:0;position:relative}

/* ---------- the left panel: the dashboard's filter panel, listing the sections ---------- */
body:has(.pgshell){background:var(--surface)}
.pgshell{display:grid;grid-template-columns:288px minmax(0,1fr);min-height:calc(100vh / var(--ui) - 62px)}
.pgrail{background:var(--surface);border-right:1px solid var(--rule);padding:14px 12px 48px;
  position:sticky;top:62px;align-self:start;height:calc(100vh / var(--ui) - 62px);overflow-y:auto}
/* The way home, first in the panel: plain, and where the eye starts. */
.pgback{display:flex;align-items:center;gap:6px;padding:7px 10px;margin:0 0 6px;border-radius:7px;
  font-size:13px;color:var(--ink-soft);text-decoration:none}
.pgback:hover{background:var(--sunk);color:var(--ink)}
.pggroup + .pggroup{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.pggroup[hidden]{display:none}
/* The group names are the panel's own ("MARKETS", "FILTERS"). */
.pgsec{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-mute);
  font-weight:600;padding:8px 10px 6px}
.atabs,.pglinks{display:flex;flex-direction:column;gap:1px}
.atabs button,.pglinks a{display:flex;align-items:center;width:100%;padding:7px 10px;border:0;border-radius:7px;
  background:none;font:inherit;font-size:13px;color:var(--ink-soft);text-align:left;text-decoration:none;cursor:pointer}
.atabs button:hover,.pglinks a:hover{background:var(--sunk);color:var(--ink)}
.atabs button[aria-selected="true"]{background:var(--sunk);color:var(--ink);font-weight:600}

/* ---------- the section, on the page itself ----------
   No boxes: a large serif title (the drawer's and the wordmark's face), one line of what
   the section is for, then its parts divided by hairlines, as the drawer divides its own. */
.pgmain{background:var(--surface);min-width:0;padding:36px 48px 72px}
.pgtitle{font-family:var(--serif);font-size:34px;font-weight:400;letter-spacing:-.02em;line-height:1.1;margin:0}
.pgsub{color:var(--ink-mute);font-size:13px;margin:6px 0 20px;max-width:64ch}
.pgsub:empty{display:none}
.apane{max-width:860px}
.card{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:22px 0;margin:0;min-width:0}
.card h2{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-mute);
  font-weight:600;margin:0 0 14px}
.card h2 .count{text-transform:none;letter-spacing:0;font-weight:400;margin-left:6px}
.card h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--accent);
  font-weight:600;margin:18px 0 8px}
.card > p.muted:first-child{margin-bottom:14px}
.row{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.row h2{margin:0}
.row + *{margin-top:12px}

/* ---------- fields: the filter panel's ---------- */
input[type=email],input[type=password],input[type=search],input[type=text],input[type=tel],
input[type=date],input:not([type]),select{width:100%;min-width:0;padding:7px 10px;
  background:var(--sunk);border:1px solid transparent;border-radius:7px;font:inherit;font-size:12.5px;color:inherit}
/* One height for every field, so a row of them lines up whatever their kind. */
input:not([type=checkbox]),select{height:32px}
input:focus,select:focus{outline:none;background:var(--surface);border-color:var(--rule-strong);
  box-shadow:0 0 0 3px var(--accent-soft)}
textarea{width:100%;min-width:0;padding:7px 10px;background:var(--sunk);border:1px solid transparent;
  border-radius:7px;font:inherit;font-size:12.5px;color:inherit;resize:vertical}
textarea:focus{outline:none;background:var(--surface);border-color:var(--rule-strong);
  box-shadow:0 0 0 3px var(--accent-soft)}
/* The request form's hidden field: off the page for people, there for a script. */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
input[readonly]{color:var(--ink-mute);background:var(--raise);border-color:var(--rule)}
input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;margin:2px 0 0;flex:none}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:var(--ink-soft)}
label.check{flex-direction:row;align-items:flex-start;gap:9px;font-weight:400;color:var(--ink);font-size:12.5px}
form.stack,.stack{display:flex;flex-direction:column;gap:12px;max-width:440px}
/* A form's button sits at its own width, left, as the dashboard's do -- not a bar. */
form.stack > button{align-self:flex-start}
form.inline{display:flex;gap:8px;flex-wrap:wrap}
form.inline input{flex:1 1 220px;width:auto}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0 0 10px}
.filters label{flex:1 1 140px;min-width:0}
.filters label.grow{flex:2 1 220px}

/* ---------- buttons: the dashboard's .btn ---------- */
button{font:inherit}
.card button,.confirm button,.wrap button,.btnlink{display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:7px 12px;border-radius:var(--r);font-size:12.5px;font-weight:500;white-space:nowrap;
  cursor:pointer;border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);
  text-decoration:none;transition:border-color .15s,background .15s}
.card button:hover,.confirm button:hover,.wrap button:hover,.btnlink:hover{border-color:var(--ink-mute);background:var(--raise);color:var(--ink)}
button.primary,.card button.primary,.wrap button.primary,.confirm button.primary{background:var(--accent);
  border-color:var(--accent);color:var(--accent-ink)}
button.primary:hover,.card button.primary:hover,.wrap button.primary:hover,.confirm button.primary:hover{
  background:var(--accent-deep);border-color:var(--accent-deep);color:var(--accent-ink)}
button.danger,.confirm button.danger{background:var(--crit);border-color:var(--crit);color:#fff}
.pacts .dangerline{color:var(--crit)}
.pacts .dangerline:hover{border-color:var(--crit);color:var(--crit)}
button:disabled{opacity:.5;cursor:default}
button.link,.wrap button.link{border:0;background:none;padding:2px 0;color:var(--accent);
  text-decoration:underline;text-underline-offset:2px}
.btnrow{display:flex;flex-wrap:wrap;gap:8px}
/* Numbered steps on the account page's Excel tab. */
.steps{margin:8px 0 0;padding-left:20px;line-height:1.6}
.steps li+li{margin-top:4px}
.steps.mono{font-size:12px;list-style:none;padding-left:0}
.steps+p{margin-top:12px}

/* Segments: a pill on a sunk track, as the dashboard's view switch is. */
.seg{display:inline-flex;flex-wrap:wrap;background:var(--sunk);border-radius:24px;padding:3px;gap:2px}
.seg button,.card .seg button{background:none;border:0;padding:6px 15px;font-size:12.5px;font-weight:500;
  color:var(--ink-soft);border-radius:20px}
.seg button:hover,.card .seg button:hover{background:none;color:var(--ink)}
.seg button[aria-pressed="true"],.card .seg button[aria-pressed="true"]{background:var(--surface);
  color:var(--ink);box-shadow:var(--shadow-sm)}

/* ---------- messages ---------- */
.note{padding:9px 12px;border-radius:var(--r);font-size:12.5px;margin:0 0 12px;overflow-wrap:anywhere}
.note.err{background:var(--crit-soft);color:var(--crit)}
.note.ok{background:var(--good-soft);color:var(--good)}
.note.info{background:var(--accent-soft);color:var(--ink)}

/* ---------- people and events ---------- */
.people,.events,.signins{list-style:none;margin:12px 0 0;padding:0}
.person,.events li,.signins li{border-top:1px solid var(--rule);padding:12px 0;min-width:0}
.pemail{font-weight:600;overflow-wrap:anywhere}
.pmeta,.pdates{font-size:12px;overflow-wrap:anywhere}
.pmeta{margin-top:2px}
.badges{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10.5px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  background:transparent;color:var(--ink-mute);border:1px solid var(--rule-strong)}
.badge.admin{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.badge.bad{background:var(--crit-soft);color:var(--crit);border-color:transparent}
.pacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.etop{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px}
.q{font-family:var(--mono);font-size:11.5px;overflow-wrap:anywhere;color:var(--ink-soft)}
.pager{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:12px;font-size:12px}
.card h2.ptitle{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);margin:16px 0 4px;overflow-wrap:anywhere}
.origin{padding:9px 12px;background:var(--sunk);border-radius:var(--r);font-size:12.5px;overflow-wrap:anywhere}

/* ---------- tables: the Support panel's ---------- */
.tw{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.card table{border-collapse:collapse;width:100%;font-size:12px}
.card th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:600;
  color:var(--ink-mute);border-bottom:1px solid var(--rule-strong);padding:6px 8px;background:none;white-space:nowrap}
.card td{padding:7px 8px;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:anywhere}
.card td.n,.card th.n{text-align:right;font-variant-numeric:tabular-nums}
.card td code{font-family:var(--mono);font-size:11.5px;word-break:break-all}
.plink{overflow-wrap:anywhere}

/* The run log and sources, drawn by help.js as the Support panel draws them. */
.ops h2{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);margin:0 0 4px}
.ops h3{color:var(--accent)}
.ops p{font-size:12.5px;line-height:1.6;color:var(--ink-soft);max-width:74ch}
.ops .why{font-size:11.5px;color:var(--ink-mute);margin-top:3px;line-height:1.45}
.ops table{min-width:560px}

/* ---------- the confirm dialog: the dashboard's sheet ---------- */
.confirmwrap{position:fixed;inset:0;background:rgba(14,21,38,.4);backdrop-filter:blur(2px);display:flex;
  align-items:center;justify-content:center;padding:16px;z-index:20}
.confirmwrap[hidden]{display:none}
.confirm{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:20px;width:100%;max-width:420px}
.confirm h2{font-family:var(--serif);font-size:22px;font-weight:400;margin:0 0 8px}
.confirm p{font-size:13px;color:var(--ink-soft);overflow-wrap:anywhere}
.cbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* ---------- sign-in: one card under the wordmark ---------- */
.wrap{max-width:400px;margin:0 auto;padding:56px 16px 48px}
.wrap > .brand{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.01em;
  margin:0 0 18px;padding:0;border:0;background:none;display:block}
.wrap .card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px}
.wrap h1{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.01em;line-height:1.15;margin:0 0 6px}
.wrap h2{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-mute);font-weight:600;margin:0 0 10px}
.wrap form{display:flex;flex-direction:column;gap:12px}
.wrap form > button{width:100%;padding:9px 12px}
.wrap .muted{color:var(--ink-soft)}
.wrap .small{font-size:12px}
.wrap .foot{margin:14px 0 0;text-align:center}
.wrap .foot a{color:var(--ink-mute)}
.wrap .foot a:hover{color:var(--ink)}
.or{display:flex;align-items:center;gap:10px;color:var(--ink-mute);font-size:12px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--rule)}
.wrap dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 16px;font-size:13px}
.wrap dt{color:var(--ink-mute);font-size:12px}
.wrap dd{margin:0;overflow-wrap:anywhere}

/* ---------- the terms (terms.html): the account page's shell, set for reading ----------
   The left panel is the contents; the page is one column at a reading measure, a little
   larger and more open than the app's 13.5px, because this is read top to bottom. Section
   titles are the serif of the page titles; clause numbers the mono of the figures. */
.ltoc a{gap:10px;line-height:1.3}
.ltoc a .mono{flex:none;width:18px;font-size:11px;color:var(--ink-mute);text-align:right}
.ldoc{max-width:720px}
.lhead{margin:0 0 22px}
.lhead .pgsub{margin-bottom:0}
.ldoc p{font-size:14.5px;line-height:1.72;color:var(--ink-soft);margin:0 0 12px}
.ldoc b{color:var(--ink);font-weight:600}
.lintro{border-top:1px solid var(--rule);padding:22px 0 8px}
.lintro p:first-child{font-size:16px;color:var(--ink)}
.lsec{border-top:1px solid var(--rule);padding:30px 0 10px;scroll-margin-top:62px}
.lsec h2{display:flex;align-items:baseline;gap:12px;font-family:var(--serif);font-size:25px;
  font-weight:400;letter-spacing:-.01em;line-height:1.15;color:var(--ink);margin:0 0 16px}
.lsec h2 .lnum{font-size:12.5px;color:var(--accent);letter-spacing:0}
.lcl{scroll-margin-top:72px}
.lcl + .lcl{margin-top:16px}
.lcl .lnum{font-size:11.5px;color:var(--ink-mute);margin-right:9px}
/* The conspicuous disclaimer, in the capitals the document sets it in, on a sunk ground. */
.ldoc p.lcaps{font-size:12.5px;line-height:1.75;letter-spacing:.01em;color:var(--ink);
  background:var(--sunk);border-radius:var(--r);padding:14px 16px}
.lalpha{list-style:none;margin:2px 0 14px;padding:0}
.lalpha li{position:relative;padding-left:34px;font-size:14.5px;line-height:1.68;color:var(--ink-soft)}
.lalpha li + li{margin-top:7px}
.lalpha li::before{content:attr(data-l);position:absolute;left:6px;top:.15em;font-family:var(--mono);
  font-size:11.5px;color:var(--ink-mute)}
.ldefs{display:grid;grid-template-columns:190px minmax(0,1fr);margin:0}
.ldefs dt,.ldefs dd{padding:11px 0;border-top:1px solid var(--rule);font-size:14.5px;line-height:1.65}
.ldefs dt:first-of-type,.ldefs dt:first-of-type + dd{border-top:0;padding-top:0}
.ldefs dt{font-weight:600;color:var(--ink);padding-right:20px}
.ldefs dd{margin:0;color:var(--ink-soft)}
.laccept{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--raise);
  padding:20px 22px 10px;margin-top:30px}
.laccept h2{font-size:21px;margin-bottom:8px}
.laccept p{color:var(--ink)}

/* ---------- phones ---------- */
@media (max-width:760px){
  /* Sixteen contents rows would bury the text; the way back is enough. */
  .legal .pggroup{display:none}
  .ldoc p,.lalpha li,.ldefs dt,.ldefs dd{font-size:15.5px}
  .ldefs{grid-template-columns:1fr}
  .ldefs dt{padding-bottom:2px}
  .ldefs dd{border-top:0;padding-top:0}
  .lsec h2{font-size:22px}
  .pgbar{grid-template-columns:1fr auto;position:relative}
  .pgbar .brand{min-height:52px;padding:0 16px}
  .pgbar .brand b{font-size:18px}
  .pgtop{min-height:52px;padding:0 60px 0 0}
  /* The left panel becomes the sections in rows under the bar: wrapped, not scrolled
     sideways, so every one is on the screen. */
  .pgshell{display:block}
  .pgrail{position:static;height:auto;display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px;
    border-right:0;border-bottom:1px solid var(--rule)}
  .pggroup{display:contents}
  .pggroup[hidden]{display:none}
  .pgsec{display:none}
  .pgback{width:100%;margin:0;min-height:calc(44px / var(--ui));font-size:14px}
  .atabs,.pglinks{flex-direction:row;flex-wrap:wrap;gap:4px}
  .atabs button,.pglinks a{width:auto;white-space:nowrap;min-height:calc(44px / var(--ui));padding:0 12px;font-size:14px}
  .pgmain{padding:22px 16px 48px}
  .pgtitle{font-size:28px}
  /* 44px finger targets and 16px fields as the phone measures them: the page is drawn
     at 90% (base.css), so each is divided back out. */
  .card button,.wrap button,.confirm button,.btnlink,.seg button,.card .seg button{
    min-height:calc(44px / var(--ui));font-size:14px}
  input[type=email],input[type=password],input[type=search],input[type=text],input[type=tel],
  input[type=date],input:not([type]),select{height:calc(44px / var(--ui));font-size:calc(16px / var(--ui))}
  textarea{font-size:calc(16px / var(--ui))}
  .wrap{padding-top:28px}
  .confirmwrap{align-items:flex-end}
  .cbtns button{flex:1}
}

/* The places a name several share, to choose between (settings.js lookUp). */
.originpick{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.originpick p{flex-basis:100%;margin:0}