/* TEDxShar e Naw — the whole visual system, in one file.
   Three colours and Inter, as the brand allows. Nothing else.
   Drop Inter-Variable.woff2 into assets/fonts/ to self-host; until then
   the generic sans stack carries it.

   Generated from design/prototype.html. Do not hand-edit: edit the
   prototype and regenerate, so the two cannot drift apart. */
@font-face{font-family:Inter;font-style:normal;font-weight:200 700;font-display:swap;
  src:url('fonts/Inter-Variable.woff2') format('woff2-variations'),url('fonts/Inter-Variable.woff2') format('woff2');}
:root{
  --red:#EB0028;
  --ink:#1A1B1C;
  --paper:#F0F4F7;

  --rule:rgba(26,27,28,.13);
  --rule-mid:rgba(26,27,28,.22);
  --rule-hard:rgba(26,27,28,.40);
  --ink-70:rgba(26,27,28,.70);
  --ink-52:rgba(26,27,28,.52);
  --ink-38:rgba(26,27,28,.38);
  --ink-06:rgba(26,27,28,.055);
  --ink-03:rgba(26,27,28,.028);
  --panel-bg:#EDF1F4; /* --ink-03 over --paper, flattened, for the scroll shadows */
  --red-12:rgba(235,0,40,.12);
  --red-30:rgba(235,0,40,.30);
  --red-55:rgba(235,0,40,.55);
  --pap-70:rgba(240,244,247,.70);
  --pap-45:rgba(240,244,247,.45);
  --pap-22:rgba(240,244,247,.22);
  --pap-10:rgba(240,244,247,.10);

  --rail-w:238px;
  --r:3px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.55;
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

/* ---------- type roles ---------- */
.label{font-size:10.5px;font-weight:650;letter-spacing:.135em;text-transform:uppercase;color:var(--ink-38);line-height:1.4}
.label--red{color:var(--red)}
.label--pap{color:var(--pap-45)}
.hero{font-size:clamp(34px,4.4vw,54px);font-weight:200;letter-spacing:-.035em;line-height:1.02}
.h1{font-size:27px;font-weight:300;letter-spacing:-.022em;line-height:1.15}
.h2{font-size:19px;font-weight:400;letter-spacing:-.014em;line-height:1.25}
.h3{font-size:15px;font-weight:600;letter-spacing:-.006em}
.meta{font-size:13px;color:var(--ink-52);line-height:1.5}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lede{font-size:16px;font-weight:300;color:var(--ink-70);line-height:1.6;max-width:64ch}

/* ---------- harness ---------- */
.harness{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;
  background:var(--ink);color:var(--pap-70);
  padding:0 18px;height:38px;border-bottom:1px solid rgba(240,244,247,.12);
}
.harness .dot{width:6px;height:6px;background:var(--red);border-radius:50%;flex:none}
.harness b{color:var(--paper);font-weight:600;letter-spacing:.02em}
.harness .sp{flex:1}
.harness select{
  background:transparent;border:1px solid var(--pap-22);color:var(--paper);
  padding:3px 8px;border-radius:var(--r);font-size:12px;letter-spacing:.01em;
}
.harness select option{color:#1A1B1C}
.harness .hnote{font-size:11.5px;letter-spacing:.04em}
.harness{white-space:nowrap;overflow-x:auto}
@media(max-width:1000px){.harness .hnote:first-of-type{display:none}}
@media(max-width:760px){.harness .hnote{display:none}.harness b{font-size:12px}}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh}
.shell.is-public{grid-template-columns:minmax(0,1fr)}

/* ---------- rail ---------- */
.rail{background:var(--ink);color:var(--pap-70);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.rail-top{padding:26px 22px 20px}
.rail-logo{width:150px;display:block}
.rail-logo svg{width:100%;height:auto;display:block}
.rail-sub{margin-top:10px;font-size:10.5px;font-weight:600;letter-spacing:.135em;text-transform:uppercase;color:var(--pap-22)}
.rail-nav{padding:6px 0 24px;flex:1}
.rail-group{margin:20px 0 6px;padding:0 22px;font-size:10px;font-weight:650;letter-spacing:.15em;text-transform:uppercase;color:rgba(240,244,247,.28)}
.rail-link{text-decoration:none;
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:7px 22px 7px 20px;font-size:13.5px;color:var(--pap-70);border-left:2px solid transparent;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.rail-link:hover{color:var(--paper);background:rgba(240,244,247,.05)}
.rail-link.is-active{color:var(--paper);border-left-color:var(--red);background:rgba(240,244,247,.06)}
.rail-link .cnt{margin-left:auto;font-size:11px;color:var(--pap-22);font-variant-numeric:tabular-nums}
.rail-link.is-active .cnt{color:var(--pap-45)}
.rail-link .cnt.is-hot{color:var(--red)}
.rail-foot{border-top:1px solid rgba(240,244,247,.12);padding:14px 22px 18px}
.rail-foot .who{font-size:13px;color:var(--paper)}
.rail-foot .pos{font-size:10.5px;font-weight:650;letter-spacing:.135em;text-transform:uppercase;color:var(--pap-22);margin-bottom:3px}
.rail-out{display:inline-block;margin-top:10px;font-size:12px;color:var(--pap-45);text-decoration:none}
.rail-version{margin-top:14px;font-size:10.5px;letter-spacing:.06em;color:rgba(240,244,247,.28);font-variant-numeric:tabular-nums}
.rail-out:hover{color:var(--paper)}

/* ---------- page ---------- */
.page{padding:0 0 90px;min-width:0}
.wrap{max-width:1300px;padding:0 44px;margin-inline:auto}
.masthead{padding:40px 0 0}
.mast-rule{height:1px;background:var(--rule);margin-top:26px;position:relative}
.mast-rule::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:3px;background:var(--red)}
.mast-row{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.mast-row .grow{flex:1;min-width:280px}
.mast-eyebrow{margin-bottom:10px}
.mast-actions{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:4px}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:38px;margin-top:30px;align-items:start}
.cols--wide{grid-template-columns:minmax(0,1fr)}
@media(max-width:1080px){.cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- panels ---------- */
.panel{border:1px solid var(--rule);border-radius:var(--r);background:var(--ink-03)}
.panel+.panel{margin-top:20px}
.panel-hd{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--rule)}
.panel-hd .grow{flex:1;min-width:0}
.panel-bd{padding:18px}
.panel-bd--flush{padding:0}
.panel-note{padding:12px 18px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-52)}

/* ---------- state strip ---------- */
.state{border-left:1px solid var(--rule);padding-left:22px}
.state+.state{margin-top:26px}
.state-hd{margin-bottom:12px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px}
.dl dt{color:var(--ink-38);white-space:nowrap}
.dl dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.trail{margin-top:4px}
.trail li{display:grid;grid-template-columns:9px 1fr;gap:11px;padding:9px 0;border-top:1px solid var(--rule);font-size:12.5px}
.trail li:first-child{border-top:0}
.trail .tick{width:7px;height:7px;margin-top:6px;border:1px solid var(--rule-hard)}
.trail .tick.on{background:var(--ink);border-color:var(--ink)}
.trail .tick.hot{background:var(--red);border-color:var(--red)}
.trail .tm{color:var(--ink-38);font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{
  text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:7px 14px;border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;letter-spacing:-.004em;
  transition:opacity .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.btn:hover{opacity:.85}
.btn--red{background:var(--red);border-color:var(--red)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-mid)}
.btn--ghost:hover{border-color:var(--ink);opacity:1}
.btn--quiet{background:transparent;border-color:transparent;color:var(--ink-52);padding:7px 8px}
.btn--quiet:hover{color:var(--ink)}
.btn--sm{padding:4px 10px;font-size:12px}
.btn--wide{width:100%;justify-content:center;padding:11px 14px}
.btn[disabled]{opacity:.32;cursor:not-allowed}
.linky{display:inline;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);border-bottom:1px solid var(--rule-mid);font-size:inherit}
.linky:hover{border-bottom-color:var(--ink)}
.linky--red{color:var(--red);border-bottom-color:var(--red-30)}
.linky--red:hover{border-bottom-color:var(--red)}

/* ---------- status ---------- */
.st{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-70);white-space:nowrap}
.st i{width:7px;height:7px;border:1px solid var(--rule-hard);flex:none}
.st.on i{background:var(--ink);border-color:var(--ink)}
.st.hot i{background:var(--red);border-color:var(--red)}
.st.hot{color:var(--red)}
.st.half i{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border-color:var(--rule-hard)}
.chip{display:inline-block;border:1px solid var(--rule-mid);border-radius:2px;padding:2px 7px;font-size:11px;letter-spacing:.02em;color:var(--ink-70)}
.chip--red{border-color:var(--red-30);color:var(--red)}
.chip--solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- tables ---------- */
.tbl{font-size:13.5px}
.tbl th{
  text-align:left;font-size:10px;font-weight:650;letter-spacing:.135em;text-transform:uppercase;color:var(--ink-38);
  padding:11px 18px;border-bottom:1px solid var(--rule);white-space:nowrap;
}
.tbl td{padding:12px 18px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .14s var(--ease)}
.tbl tbody tr.clickable{cursor:pointer}
.tbl tbody tr.clickable:hover{background:var(--ink-06)}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl .nowrap{white-space:nowrap}
.tbl .who{font-weight:500}
.tbl .sub{font-size:11.5px;color:var(--ink-38);display:block;margin-top:1px}

/* ---------- seats ---------- */
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:10px}
.seat{text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:var(--r);padding:12px 13px 13px;min-height:78px;display:flex;flex-direction:column;background:var(--ink-03)}
.seat .pos{font-size:10px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-38);margin-bottom:7px}
.seat .nm{font-size:15px;font-weight:400;letter-spacing:-.01em;margin-top:auto}
.seat .tail{font-size:11px;color:var(--ink-38);margin-top:3px;font-variant-numeric:tabular-nums}
.seat--vacant{border-color:var(--red-30);background:transparent}
.seat--vacant .pos{color:var(--red)}
.seat--vacant .nm{color:var(--red);font-size:10px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}
.seat--lead{border-color:var(--rule-hard)}
.seat--lead .pos{color:var(--ink-70)}
.seat button.apply{margin-top:6px;align-self:flex-start}
.podhd{display:flex;align-items:baseline;gap:12px;margin:28px 0 12px}
.podhd .ct{font-size:11.5px;color:var(--ink-38);font-variant-numeric:tabular-nums}

/* ---------- cycle rail ---------- */
.cycle{border:1px solid var(--rule);border-radius:var(--r);padding:22px 22px 18px;background:var(--ink-03)}
.cycle-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.cycle-count{display:flex;align-items:baseline;gap:12px}
.cycle-count .n{font-size:56px;font-weight:200;letter-spacing:-.05em;line-height:.86;font-variant-numeric:tabular-nums}
.cycle-count .u{font-size:12.5px;color:var(--ink-52);max-width:150px;line-height:1.35}
.cyc-track{display:grid;gap:2px;padding-top:12px}
.cyc-weeks{display:grid;grid-template-columns:repeat(13,1fr);gap:2px}
.cyc-w{height:26px;background:var(--ink-06);position:relative;border-radius:1px}
.cyc-w.done{background:var(--ink)}
.cyc-w.now{background:var(--red)}
.cyc-w .g{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--ink-38)}
.cyc-phase{display:grid;grid-template-columns:2fr 2fr 4fr 4fr 1fr;gap:2px;margin-top:8px}
.cyc-phase div{font-size:10px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-38);padding-top:6px;border-top:1px solid var(--rule)}
.cyc-phase div.cur{color:var(--red);border-top-color:var(--red)}
.gates{display:flex;gap:22px;margin-top:18px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:14px}

/* ---------- stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--ink-03)}
.stat{padding:16px 18px 15px;border-left:1px solid var(--rule)}
.stat:first-child{border-left:0}
.stat .n{font-size:32px;font-weight:200;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;display:block}
.stat .n.hot{color:var(--red)}
.stat .k{margin-top:6px}
.stat .s{font-size:11.5px;color:var(--ink-38);margin-top:3px}
.stat.clickable{cursor:pointer;transition:background .14s var(--ease)}
.stat.clickable:hover{background:var(--ink-06)}

/* ---------- board ---------- */
.board{display:grid;gap:12px;grid-auto-flow:column;grid-auto-columns:minmax(192px,1fr);overflow-x:auto;padding-bottom:6px}
.bcol{border:1px solid var(--rule);border-radius:var(--r);background:var(--ink-03);min-width:0}
.bcol-hd{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid var(--rule)}
.bcol-bd{padding:10px;display:grid;gap:8px;min-height:80px}
.card{display:block;text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:2px;padding:11px 12px;cursor:pointer;background:var(--paper);transition:border-color .14s var(--ease)}
.card:hover{border-color:var(--rule-hard)}
.card .t{font-size:13.5px;font-weight:500;letter-spacing:-.008em}
.card .m{font-size:11.5px;color:var(--ink-38);margin-top:4px;font-variant-numeric:tabular-nums}
.card--hot{border-color:var(--red-30)}

/* ---------- forms ---------- */
.form{display:grid;gap:18px;max-width:620px}
.form--wide{max-width:none}
/* Gate rows. The whole row is the control, because a checkbox the size of a
   full stop is a checkbox nobody can press. */
.gates{display:flex;flex-direction:column}
.gate-row{margin:0;border-top:1px solid var(--rule)}
.gate-row:first-child{border-top:0}
.gate-btn{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:14px 20px;font:inherit;color:inherit;transition:background .12s var(--ease)}
.gate-btn:hover{background:var(--ink-03)}
.gate-box{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border:1px solid var(--rule-hard);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:transparent;transition:border-color .12s var(--ease),background .12s var(--ease)}
.gate-btn:hover .gate-box{border-color:var(--ink)}
.gate-row.is-done .gate-box{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gate-row.is-still .gate-btn{cursor:default}
.gate-row.is-still .gate-btn:hover{background:none}
.gate-txt{flex:1 1 auto;min-width:0}
.gate-req{display:block;line-height:1.45}
.gate-row.is-done .gate-req{color:var(--ink-52)}
.gate-st{flex:0 0 auto;padding-top:2px}
.gate-row.is-done .gate-st{color:var(--ink-38)}
@media(max-width:640px){.gate-btn{padding:13px 16px;gap:12px}.gate-st{display:none}}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 18px;margin-top:2px}
fieldset[disabled] .inp,fieldset[disabled] .check{opacity:.55}
/* An explicit display on a class beats the hidden attribute, so say it louder. */
[hidden]{display:none!important}
/* The mail sender: a live strip on any screen that queues messages. */
.sender-slot{margin-bottom:20px}
.sender{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--ink-03);font-size:13.5px}
.sender-dot{width:8px;height:8px;border-radius:50%;background:var(--rule-hard);flex:none}
.sender.is-live .sender-dot{background:var(--red)}
.sender.is-sending .sender-dot{animation:senderPulse 1.1s var(--ease) infinite}
.sender.is-done .sender-dot{background:var(--ink)}
.sender.is-waiting .sender-dot{background:var(--ink-38);animation:senderPulse 2.4s var(--ease) infinite}
.sender.is-waiting{border-color:var(--rule-hard)}
.sender.is-stuck{border-color:var(--red-30)}
.sender.is-stuck .sender-dot{background:var(--red)}
.sender-txt{flex:1;min-width:0}
.sender.is-stuck .sender-txt{color:var(--red)}
@keyframes senderPulse{0%,100%{opacity:1}50%{opacity:.25}}
/* Feature requests: the count of people who want it, as the control itself. */
.second{display:grid;justify-items:center;gap:1px;width:56px;padding:6px 4px;border:1px solid var(--rule-hard);border-radius:2px;background:var(--paper);cursor:pointer;transition:border-color .12s var(--ease),background .12s var(--ease)}
.second:hover{border-color:var(--ink)}
.second.is-mine{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.second-n{font-size:16px;font-variant-numeric:tabular-nums;line-height:1.1}
.second-l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-38)}
.second.is-mine .second-l{color:var(--pap-70)}
/* Questions people asked when they signed up, read as writing not as data. */
.asked{display:grid;gap:2px}
.asked-one{padding:14px 0;border-top:1px solid var(--rule)}
.asked-one:first-child{border-top:0;padding-top:2px}
.asked-one:target{background:var(--ink-03);box-shadow:0 0 0 10px var(--ink-03);border-radius:2px}
.asked-q{font-size:15px;line-height:1.6;max-width:68ch}
.asked-who{margin-top:6px}
/* Running order: the editor, and the way it reads on a page. */
.run-edit{border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);overflow:hidden}
.run-head,.run-item{display:grid;grid-template-columns:60px minmax(0,1.4fr) minmax(0,.85fr) minmax(0,1.5fr) 84px 34px;gap:10px;align-items:center}
.run-head{padding:10px 14px;background:var(--ink-03);border-bottom:1px solid var(--rule);font-size:10px;font-weight:650;letter-spacing:.135em;text-transform:uppercase;color:var(--ink-38)}
.run-head .r{text-align:right}
.run-item{padding:9px 14px;border-top:1px solid var(--rule)}
.run-body>.run-item:first-child{border-top:0}
.run-item .inp{padding:8px 10px;font-size:13.5px}
.run-when{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink-52)}
.run-cell{display:block;min-width:0}
.run-cell--num .inp{text-align:right}
.run-lab{display:none}
.run-drop{width:28px;height:28px;display:grid;place-items:center;border:1px solid transparent;border-radius:2px;background:none;color:var(--ink-38);font-size:17px;line-height:1;cursor:pointer;transition:color .12s var(--ease),border-color .12s var(--ease)}
.run-drop:hover{color:var(--red);border-color:var(--red-30)}
.run-drop[hidden]{visibility:hidden;display:grid}
.run-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--rule);background:var(--ink-03)}
.run-sum{font-variant-numeric:tabular-nums}
/* Without scripting there is no add button to press, so it should not sit there dead. */
.run-edit:not(.run-edit--live) [data-run-add]{display:none}
.run{border-top:1px solid var(--rule)}
.run-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule)}
.run-at{font-variant-numeric:tabular-nums;padding-top:1px}
.run-ttl{display:block;line-height:1.45}
.run-kind{padding-top:2px;white-space:nowrap}
@media(max-width:760px){
  .run-head{display:none}
  .run-item{grid-template-columns:1fr auto;gap:10px;padding:14px;position:relative}
  .run-when{grid-column:1;font-size:11px;letter-spacing:.135em;text-transform:uppercase}
  .run-drop{grid-column:2;grid-row:1;justify-self:end}
  .run-cell{grid-column:1 / -1}
  .run-cell--num .inp{text-align:left}
  /* The column headings are gone, so each field says what it is. */
  .run-lab{display:block;font-size:10.5px;font-weight:650;letter-spacing:.135em;text-transform:uppercase;color:var(--ink-38);margin-bottom:4px}
  .run-foot{padding:12px 14px}
  .run-row{grid-template-columns:52px minmax(0,1fr);gap:10px}
  .run-kind{grid-column:2;padding-top:0}
}
/* Covers: what a shared link shows. */
.cover-now{display:block;width:100%;max-width:360px;height:auto;border:1px solid var(--rule);border-radius:var(--r);margin-bottom:10px}
.cover-hero{display:block;width:100%;height:auto;border-radius:var(--r);margin-bottom:30px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
@media(min-width:641px) and (max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:6px}
.field .hint{font-size:12px;color:var(--ink-38)}
.inp{
  width:100%;height:42px;background:transparent;border:1px solid var(--rule-mid);border-radius:var(--r);
  padding:0 11px;font-size:14px;line-height:1.3;transition:border-color .14s var(--ease);
}
.inp:focus{outline:none;border-color:var(--ink)}
select.inp{
  appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%231A1B1C' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
textarea.inp{height:auto;min-height:110px;padding:10px 11px;resize:vertical;line-height:1.55}
/* a two-column row keeps its controls on one line even when only one carries a hint */
.grid2,.grid3{align-items:start}
.field .hint{min-height:0}
.grid2>.field,.grid3>.field{align-content:start}
/* a hint that wraps to two lines must not leave its neighbour hanging short */
.grid2>.field>.hint,.grid3>.field>.hint{min-height:2.5em}
.field--pair{display:grid;grid-template-rows:auto 42px auto;gap:6px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;cursor:pointer}
.check input{margin:3px 0 0;accent-color:var(--red);flex:none}
.radios{display:grid;gap:8px}
.fileslot{border:1px dashed var(--rule-hard);border-radius:var(--r);padding:20px;text-align:center;font-size:13px;color:var(--ink-52)}

/* ---------- misc ---------- */
.empty{padding:34px 18px;text-align:center;color:var(--ink-38);font-size:13.5px}
.empty .e1{font-size:15px;color:var(--ink-70);margin-bottom:5px}
.notice{border:1px solid var(--rule);border-left:2px solid var(--red);border-radius:var(--r);padding:13px 16px;font-size:13px;color:var(--ink-70);line-height:1.5}
.notice b{color:var(--ink);font-weight:600}
.notice--flat{border-left-color:var(--rule-hard)}
.rows{display:grid}
.row{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--rule)}
.row:first-child{border-top:0}
.row .grow{flex:1;min-width:0}
.doc-body{max-width:70ch;font-size:15px;line-height:1.68;color:var(--ink-70)}
.doc-body h3{margin:26px 0 8px;color:var(--ink)}
.doc-body p{margin:0 0 13px}
.split{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.hr{height:1px;background:var(--rule);margin:26px 0}
.sig{border:1px solid var(--rule-mid);border-radius:var(--r);height:140px;display:flex;align-items:center;justify-content:center;color:var(--ink-38);font-size:13px;background:var(--ink-03)}
.sigmark{font-size:34px;font-weight:200;letter-spacing:-.02em;font-style:italic;color:var(--ink)}
/* Tabs need air under them: the next label was sitting on the underline. */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin:24px 0 22px;overflow-x:auto}
.tab{display:inline-block;text-decoration:none;background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px;font-size:13px;color:var(--ink-52);cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink);border-bottom-color:var(--red)}
.qr{width:96px;height:96px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px),
  repeating-linear-gradient(0deg,var(--ink) 0 6px,transparent 6px 12px);
  opacity:.85;border:6px solid var(--paper);outline:1px solid var(--rule)}
.public-top{border-bottom:1px solid var(--rule);background:var(--ink-03)}
.public-in{max-width:1300px;margin-inline:auto;padding:20px 44px;display:flex;align-items:center;gap:22px}
.public-logo{width:132px;display:block}
.public-logo svg{width:100%;height:auto;display:block}
.public-foot{border-top:1px solid var(--rule);margin:70px auto 0;padding:30px 44px 60px;max-width:1300px;font-size:12.5px;color:var(--ink-38);line-height:1.6}
.foot-grid{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot-grid .grow{flex:1;min-width:280px}
.foot-grid a{color:var(--ink-70);text-decoration:none;border-bottom:1px solid var(--rule-mid);transition:color .14s var(--ease),border-color .14s var(--ease)}
.foot-grid a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.credit{text-align:right;font-size:12.5px;color:var(--ink-38);line-height:1.6}
.credit a{color:var(--ink-70);text-decoration:none;border-bottom:1px solid var(--rule-mid)}
.credit a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.credit .hrt{color:var(--red)}
.app-foot{border-top:1px solid var(--rule);margin:60px 0 0;padding:22px 44px 40px;font-size:12px;color:var(--ink-38);line-height:1.6}
@media(max-width:820px){.credit{text-align:left}.app-foot{padding-left:20px;padding-right:20px}}
/* ---------- the bar that replaces the rail on a phone ---------- */
.topbar{display:none}
.burger{width:34px;height:34px;display:grid;place-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0}
.burger i{display:block;width:19px;height:1.5px;background:var(--paper);transition:transform .2s var(--ease),opacity .15s var(--ease)}
body.nav-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .burger i:nth-child(2){opacity:0}
body.nav-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.avatar{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:rgba(240,244,247,.14);color:var(--paper);font-size:11px;font-weight:600;letter-spacing:.02em}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.whoami{display:flex;align-items:center;gap:9px;min-width:0}
.whoami .nm{font-size:13px;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
/* the same control on the light public header */
.burger--dark{display:none}
.burger--dark i{background:var(--ink)}
body.pubnav-open .burger--dark i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.pubnav-open .burger--dark i:nth-child(2){opacity:0}
body.pubnav-open .burger--dark i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:820px){
  /* minmax(0,1fr), not 1fr: a grid track refuses to shrink below its
     content by default, so one wide table stretched the whole page and every
     screen looked shoved sideways. This is the actual fix; the rest is polish. */
  .shell{grid-template-columns:minmax(0,1fr)}
  .shell>*{min-width:0}
  .topbar{
    display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:50;
    background:var(--ink);color:var(--paper);padding:9px 14px;
    border-bottom:1px solid rgba(240,244,247,.12);
  }
  .topbar .tb-logo{width:104px;display:block;flex:none}
  .topbar .tb-logo img,.topbar .tb-logo svg{width:100%;height:auto;display:block}
  .topbar .sp{flex:1}
  .rail{
    position:fixed;left:0;right:0;top:52px;bottom:0;height:auto;z-index:49;
    display:none;overflow-y:auto;
  }
  body.nav-open{overflow:hidden}
  body.nav-open .rail{display:flex}
  .rail-top{display:none}
  .rail-nav{padding:10px 0 20px}
  .rail-link{text-decoration:none;padding:10px 22px 10px 20px;font-size:15px}
  .wrap,.public-in,.public-foot{padding-left:20px;padding-right:20px}
  .state{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:22px}
  .public-in{flex-wrap:wrap;gap:12px;padding-top:14px;padding-bottom:14px}
  .public-in .burger--dark{display:grid;margin-left:auto}
  .pubnav{
    display:none;width:100%;flex-direction:column;align-items:flex-start;
    gap:16px!important;margin-left:0!important;padding:16px 0 6px;border-top:1px solid var(--rule);
  }
  body.pubnav-open .pubnav{display:flex}
  .pubnav .linky{font-size:16px}
}
/* ---------- narrow screens ---------- */
/* A table with five columns and nowrap headers is wider than a phone. Left to
   itself it drags the whole page sideways, which is what made every screen
   look misaligned rather than just the table. It scrolls inside its panel now,
   at every width — a laptop has the same problem with a wide enough table. */
/* A shadow on whichever edge still has table hidden behind it, so a table
   that scrolls looks like a table that scrolls. The covers are painted with
   the scrolled content (local) and the shadows with the box (scroll), so each
   shadow is hidden exactly when that end is reached. */
.panel-bd--flush{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,var(--panel-bg),rgba(237,241,244,0)) 0 0,
    linear-gradient(to left,var(--panel-bg),rgba(237,241,244,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgba(26,27,28,.11),rgba(26,27,28,0)) 0 0,
    radial-gradient(farthest-side at 100% 50%,rgba(26,27,28,.11),rgba(26,27,28,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:26px 100%,26px 100%,13px 100%,13px 100%;
  background-attachment:local,local,scroll,scroll;
}
img,svg,video{max-width:100%}

@media(max-width:760px){
  .masthead{padding-top:28px}
  .h1{font-size:23px}
  .mast-row{gap:14px}
  .mast-row .grow{min-width:0;flex:1 1 100%}
  .mast-actions{padding-bottom:0;width:100%}

  .panel-hd{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .panel-bd{padding:14px}
  .panel-note{padding:11px 14px}

  /* Tighter, but not squeezed: a table that cannot fit scrolls inside its
     panel. Letting it shrink instead breaks words down the middle, which is
     harder to read than a sideways nudge. Only addresses, which have no spaces
     to break at, are allowed to break anywhere. */
  .tbl{font-size:12.5px;width:auto;min-width:100%}
  .tbl th{padding:9px 12px}
  .tbl td{padding:10px 12px}
  .tbl .sub{font-size:11px}

  /* Flex children shrink instead of forcing their parent wider. */
  .row{gap:12px;flex-wrap:wrap}
  .row .grow{min-width:0;flex:1 1 100%}
  .split{gap:8px}

  /* Two columns of terms do not fit; one does. */
  .dl{grid-template-columns:1fr;gap:0}
  .dl dt{white-space:normal}
  .dl dd{text-align:left;margin:1px 0 10px}

  .stat{padding:13px 14px}
  .stat .n{font-size:26px}
  .seats{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .doc-body{font-size:14.5px}
  .form{gap:14px}
  .btn{max-width:100%}
}
@media(max-width:420px){
  .stats{grid-template-columns:1fr}
  .stats .stat{border-left:0;border-top:1px solid var(--rule)}
  .stats .stat:first-child{border-top:0}
}
.pageenter{animation:pe .22s var(--ease) both}
@keyframes pe{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}

/* signature pad */
.pad{border:1px solid var(--rule-mid);border-radius:var(--r);background:var(--ink-03);position:relative;touch-action:none}
.pad canvas{display:block;width:100%;height:170px;cursor:crosshair}
.pad .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-38);font-size:13px;pointer-events:none}
.pad .ph.gone{display:none}
.padbar{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--rule)}
.seg{display:inline-flex;border:1px solid var(--rule-mid);border-radius:var(--r);overflow:hidden}
.seg button{background:transparent;border:0;padding:6px 13px;font-size:12.5px;cursor:pointer;color:var(--ink-52)}
.seg button.on{background:var(--ink);color:var(--paper)}
/* email preview */
.mail{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper);max-width:600px}
.mail-hd{padding:12px 18px;border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--ink-52);display:grid;gap:2px;background:var(--ink-03)}
.mail-hd b{color:var(--ink);font-weight:600}
.mail-bd{padding:26px 28px;font-size:14.5px;line-height:1.62}
.mail-bd p{margin:0 0 14px}
.mail-logo{width:104px;margin-bottom:22px}
.mail-logo svg{width:100%;height:auto;display:block}
.mail-btn{display:inline-block;background:var(--red);color:var(--paper);padding:11px 20px;border-radius:var(--r);font-size:14px;font-weight:500;text-decoration:none;margin:6px 0 14px}
.mail-foot{border-top:1px solid var(--rule);padding:14px 28px 20px;font-size:11.5px;color:var(--ink-38);line-height:1.55}
.done{display:grid;gap:8px;justify-items:center;text-align:center;padding:40px 0 14px}
.done .lede{margin-inline:auto}
.done .mk{width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:17px;margin-bottom:6px}