/* ============================================================
   Focus, while somebody is inside a learning.

   Measured on a 390 by 844 phone before this: the install nudge, the demo bar,
   the app bar, the route strip and the composer took 314 of 844 pixels, so 37
   percent of the screen was frame and 63 percent was the lesson. At 16px and 42
   characters a line that is very little text at once, which is what "the words
   seem big" means.

   Nothing here removes information. The install nudge is a thing to do later,
   the dock hint is an instruction the lesson itself is already giving, and the
   named steps still open in one tap. The navigation is where it always was:
   the crumb goes back to Learning, and on a phone the rest of the crumb still
   opens the panel.
   ============================================================ */
.app.lesson .pwabar{display:none}
@media(max-width:640px){
  /* The named steps fold on a phone. The bar and the count stay, so how far
     along you are never leaves the screen. */
  .stepsx{display:flex}
  .prog .steps{display:none}
  .prog.stepsopen .steps{display:flex}
  /* The lesson tells you what to do next. It does not need a line under the
     box telling you there is a microphone. */
  .app.lesson .dockhint{display:none}
  /* Icon only. The label is what made this a whole row of its own. */
  .barask span{display:none}
  .barask{padding:7px;border-radius:99px}
  .barask svg{width:17px;height:17px}
}

/* The heading over a tab that has a menu under it repeats the crumb above it
   and is explained by the menu below it, so on a phone it is a frame around
   information rather than information. It keeps every word and takes less
   room. */
@media(max-width:640px){
  .vhead{margin-bottom:14px}
  .vhead h1{font-size:22px}
  .vhead p{font-size:14.5px;line-height:1.5}
  .seg{margin-bottom:2px}
}
.viewwrap{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.vpad{width:min(1080px,100%);margin:0 auto;padding:26px 28px 60px}
@media(max-width:640px){.vpad{padding:20px 18px 44px}}

.vhead{margin-bottom:22px}
.vhead h1{font-size:clamp(26px,3.4vw,34px);font-weight:600;color:var(--head);letter-spacing:-.025em;
  line-height:1.15;margin-bottom:8px}
.vhead p{font-size:16px;color:var(--sub);line-height:1.6;max-width:62ch}
.vrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0 6px}
.vsearch{flex:1;min-width:220px;display:flex;align-items:center;gap:11px;background:var(--card);
  border:1.5px solid var(--hair);border-radius:14px;padding:11px 16px}
.vsearch:focus-within{border-color:var(--muted)}
.vsearch svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.8;flex-shrink:0}
.vsearch input{flex:1;border:none;background:none;font-size:15px;font-weight:500;color:var(--head);outline:none}
.vsearch input::placeholder{color:var(--muted)}
.filters{display:flex;gap:7px;flex-wrap:wrap}
.filt{border:1.5px solid var(--hair);background:var(--raise);border-radius:999px;padding:8px 15px;
  font-size:13px;font-weight:700;color:var(--body);transition:.14s}
.filt:hover{border-color:var(--muted);color:var(--head)}
.filt.on{background:var(--head);border-color:var(--head);color:var(--bg)}

.vsec{margin-top:34px}
.vsech{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.vsech h2{font-size:19px;font-weight:800;color:var(--head);letter-spacing:-.01em}
.vsech p{font-size:13.5px;color:var(--muted);flex:1;min-width:180px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.lcard{background:var(--card);border-radius:16px;padding:18px;display:flex;flex-direction:column;
  transition:transform .16s;border:1.5px solid transparent}
.lcard:hover{transform:translateY(-2px);border-color:var(--hair)}
.lcard .leb{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);
  margin-bottom:7px}
.lcard.sup .leb{color:var(--brown)}
.lcard h3{font-size:16.5px;font-weight:700;color:var(--head);line-height:1.32;margin-bottom:6px}
.lcard p{font-size:13.5px;color:var(--sub);line-height:1.55;flex:1;margin-bottom:13px}
.lmeta{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:11px}
.lmeta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted)}
.lbar{height:5px;border-radius:99px;background:var(--hair);overflow:hidden;margin-bottom:13px}
.lbar i{display:block;height:100%;border-radius:99px;background:var(--grad)}
.lcard .acts{margin-top:auto;gap:12px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:4px 10px}
.badge.on{background:var(--grad);color:#000}
.badge.done{background:rgba(31,122,77,.12);color:var(--ok)}
.badge.soon{background:var(--hair);color:var(--muted)}

/* two pane views */
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:20px;align-items:start}
/* A bare 1fr track still sizes to its content's min-content width, which is
   what let a row of nowrap tab labels (Training materials, Your planners,
   Your uploads) push the whole page wider than the phone showing it rather
   than scrolling inside its own row. minmax(0,1fr) is the fix: it lets the
   track shrink below that, so overflow-x:auto on the row inside it is the
   thing that actually runs out of room, not the page. */
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.pane{background:var(--card);border-radius:18px;padding:20px}

/* Notes and Files, as one switch below 900px rather than one long scroll of
   both. Above it there is room for the two panes side by side, same as any
   other split view, so the switch does not exist where it is not needed. */
.nbseg{margin:14px 0 4px}
@media(min-width:901px){.nbseg{display:none}}

/* A hashtag is a word the member already typed with a # in front of it, read
   back out rather than stored as its own thing, so a tag that stops appearing
   in any note quietly stops being a filter. */
.tagrow{display:flex;flex-wrap:wrap;gap:7px}
.tagchip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--hair);background:var(--raise);
  border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--body);transition:.14s}
.tagchip:hover{border-color:var(--red);color:var(--red)}
.tagchip.on{background:var(--head);border-color:var(--head);color:var(--bg)}
.tagchip.clear{color:var(--muted);font-weight:600}
.tagchip span{font-size:10.5px;font-weight:700;opacity:.65}
.tagchip.static{cursor:default}
.tagchip.static:hover{border-color:var(--hair);color:var(--body)}
.pane h3{font-size:17px;font-weight:800;color:var(--head);margin-bottom:4px}
.pane .sub{font-size:13.5px;color:var(--muted);margin-bottom:14px;line-height:1.5}

/* notebook */
.nbtools{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.nbtools button{width:34px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:14px;
  font-weight:800;color:var(--body);border:1px solid transparent}
.nbtools button:hover{background:var(--raise);border-color:var(--hair);color:var(--head)}
.nbtools .sp{flex:1}
.nbtools .saved{font-size:12px;font-weight:700;color:var(--ok);align-self:center;padding-right:4px}
/* A control that is not built says so on its face. A toast that claims the
   thing happened is worse than a button that admits it does not work yet. */
.meta.wrote{color:var(--ok);font-weight:700}
.editform{background:var(--raise);border-radius:12px;padding:16px 18px;margin:2px 0 14px}
.editform .ef{display:block;margin-bottom:10px}
.editform .ef span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.editform input,.editform textarea,.editform select{width:100%;font:inherit;font-size:14.5px;
  color:var(--head);background:var(--bg);border:1.5px solid var(--hair);border-radius:9px;
  padding:9px 11px;outline:none}
.editform input:focus,.editform textarea:focus,.editform select:focus{border-color:var(--muted)}
.editform textarea{resize:vertical;min-height:52px}
.acct.arch,.buyer.arch{opacity:.66}
.archtag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hair);border-radius:6px;padding:1px 6px;margin-left:8px;vertical-align:2px}
.tlink.danger{color:var(--red)}
.na{opacity:.6}
button.na{cursor:default}
em.nab{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hair);border-radius:6px;padding:2px 6px;margin-left:7px;
  white-space:nowrap}
.nbtitle{width:100%;border:none;background:transparent;color:var(--head);font:inherit;font-size:19px;
  font-weight:800;letter-spacing:-.01em;padding:0 2px 10px;margin-bottom:2px;outline:none}
.nbtitle::placeholder{color:var(--muted);font-weight:700}
.nbempty{background:var(--raise);border-radius:12px;padding:26px 22px;text-align:center}
.nbempty b{display:block;font-size:15px;font-weight:800;color:var(--head);margin-bottom:6px}
.nbempty span{display:block;font-size:13.5px;color:var(--muted);line-height:1.55;max-width:44ch;margin:0 auto}
.nbedit{min-height:340px;background:var(--raise);border-radius:12px;padding:18px 20px;font-size:15.5px;
  line-height:1.7;color:var(--head);outline:none;border:1.5px solid transparent}
.nbedit:focus{border-color:var(--muted)}
.nbedit h3{font-size:17px;font-weight:800;margin:16px 0 6px}
.nbedit ul{margin:8px 0 8px 20px}
.nbedit li{margin-bottom:5px}
.nbedit p{margin-bottom:10px}
.nbnote{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}

.tabrow{display:flex;gap:3px;border-bottom:1px solid var(--hair);margin-bottom:14px;overflow-x:auto}
.tabb{font-size:13.5px;font-weight:700;color:var(--muted);padding:10px 13px;border-bottom:2px solid transparent;
  white-space:nowrap}
.tabb:hover{color:var(--head)}
.tabb.on{color:var(--head);border-bottom-color:var(--red)}

.frow{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hair)}
.frow:last-child{border-bottom:none}
.frow .fi{width:34px;height:34px;border-radius:10px;background:var(--raise);display:grid;place-items:center;
  color:var(--muted);flex-shrink:0}
.frow .fi svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.frow .ft{flex:1;min-width:0}
.frow .ft b{display:block;font-size:14.5px;font-weight:700;color:var(--head);line-height:1.35}
/* A record's own name is the way into it now, not a separate button beside
   it. font:inherit resets to the size the old <b> would have had in each of
   these three contexts, then the size is set explicitly per context to match
   what it replaced exactly. */
.rowname{display:block;width:100%;text-align:left;font:inherit;font-weight:700;color:var(--head);transition:color .13s}
.rowname:hover{color:var(--red)}
.frow .ft .rowname{font-size:14.5px;line-height:1.35}
.frow .ft span{font-size:12px;color:var(--muted)}
.scope{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;
  padding:3px 8px;white-space:nowrap;flex-shrink:0}
.scope.company{background:rgba(238,47,76,.10);color:var(--red)}
.scope.cohort{background:rgba(253,183,69,.16);color:var(--brown)}
.scope.program{background:rgba(107,68,35,.10);color:var(--brown)}
.scope.you{background:var(--hair);color:var(--muted)}
.drop{border:1.5px dashed var(--hair);border-radius:14px;padding:22px;text-align:center;margin-top:14px}
.drop:hover{border-color:var(--red)}
.drop b{display:block;font-size:14.5px;font-weight:700;color:var(--head);margin-bottom:4px}
.drop span{font-size:13px;color:var(--muted)}

/* people and threads */
.prof{display:flex;gap:16px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.prof .pv{width:64px;height:64px;border-radius:50%;background:var(--grad);color:#000;display:grid;
  place-items:center;font-size:21px;font-weight:800;flex-shrink:0}
.prof .pi{flex:1;min-width:180px}
.prof .pi b{display:block;font-size:21px;font-weight:700;color:var(--head);letter-spacing:-.015em}
.prof .pi span{font-size:14px;color:var(--muted)}
.slots{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.msg{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair)}
.msg:last-child{border-bottom:none}
.msg .av{width:34px;height:34px;border-radius:50%;background:var(--raise);border:1px solid var(--hair);
  color:var(--head);display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0}
.msg .av.g{background:var(--grad);border:none;color:#000}
.msg .mb{flex:1;min-width:0}
.msg .mb b{font-size:14px;font-weight:700;color:var(--head)}
.msg .mb time{font-size:12px;color:var(--muted);margin-left:8px}
.msg .mb p{font-size:14.5px;color:var(--sub);line-height:1.6;margin-top:3px}
.postbox{background:var(--card);border:1.5px solid var(--hair);border-radius:16px;padding:14px 16px;margin-top:16px}
.postbox:focus-within{border-color:var(--muted)}
.postbox .to{font-size:12px;font-weight:700;color:var(--red);letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:8px}
.postbox textarea{width:100%;border:none;background:none;resize:none;font-size:15px;color:var(--head);
  outline:none;min-height:56px;line-height:1.55}
.postbox textarea::placeholder{color:var(--muted)}
.postfoot{display:flex;align-items:center;gap:12px;margin-top:8px}
.postfoot .sp{flex:1}

/* the chat first CRM prompt */
.crmask{background:linear-gradient(180deg,var(--card),transparent);border:1.5px solid var(--hair);
  border-radius:18px;padding:20px}
.crmask h3{font-size:18px;font-weight:700;color:var(--head);margin-bottom:6px}
.crmask p{font-size:14.5px;color:var(--sub);line-height:1.6;margin-bottom:14px}
.acct{display:flex;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid var(--hair)}
.acct:last-child{border-bottom:none}
.acct .ad{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.acct .ad.warn{background:var(--red)} .acct .ad.ok{background:var(--ok)}
.acct .ai{flex:1;min-width:0}
.acct .ai b{display:block;font-size:15.5px;font-weight:700;color:var(--head)}
.acct .ai .rowname{font-size:15.5px}
.acct .ai span{font-size:12.5px;color:var(--muted)}
.tools{display:flex;gap:8px;flex-wrap:wrap}
.tool{border:1.5px solid var(--hair);background:var(--raise);border-radius:10px;padding:8px 13px;
  font-size:12.5px;font-weight:700;color:var(--head)}
.tool:hover{border-color:var(--red);color:var(--red)}

/* practice */
.buyer{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hair)}
.buyer:last-child{border-bottom:none}
.buyer .bv{width:46px;height:46px;border-radius:50%;background:var(--head);color:var(--bg);display:grid;
  place-items:center;font-size:14px;font-weight:800;flex-shrink:0}
.buyer .bi{flex:1;min-width:0}
.buyer .bi b{display:block;font-size:15.5px;font-weight:700;color:var(--head)}
.buyer .bi .rowname{font-size:15.5px}
.buyer .bi span{font-size:13px;color:var(--muted);line-height:1.5;display:block}
.disc{font-size:12px;font-weight:800;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.disc.D{background:rgba(238,47,76,.14);color:var(--red)}
.disc.i{background:rgba(253,183,69,.18);color:var(--brown)}
.disc.S{background:rgba(31,122,77,.12);color:var(--ok)}
.disc.C{background:rgba(107,68,35,.12);color:var(--brown)}
.allow{display:flex;align-items:center;gap:11px;margin-top:10px}
.allow .pips{display:flex;gap:4px;flex:1}
.allow .pips i{flex:1;height:7px;border-radius:99px;background:var(--hair);max-width:34px}
.allow .pips i.on{background:var(--grad)} .allow .pips i.v{background:var(--red)}
.allow b{font-size:13px;font-weight:700;color:var(--head)}
.hist{display:flex;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid var(--hair)}
.hist:last-child{border-bottom:none}
.hist .sc{width:44px;height:44px;border-radius:12px;background:var(--raise);display:grid;place-items:center;
  font-size:16px;font-weight:800;color:var(--head);flex-shrink:0}
.hist .hi{flex:1;min-width:0}
.hist .hi b{display:block;font-size:14.5px;font-weight:700;color:var(--head)}
.hist .hi span{font-size:12.5px;color:var(--muted)}

/* Picking one of your customers. One control, the same at three accounts and at
   fifty, because the alternative was a shape that changed under you: pills at
   small sizes and a search box at large ones, which is two things to learn.
   It is a dropdown that you can also type into, and the way to add one that is
   not on the list is pinned inside it, which is where somebody is standing at
   the moment they discover it is missing. */
.acctsel{position:relative;max-width:440px}
.acctbtn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--raise);border:1.5px solid var(--hair);border-radius:12px;padding:12px 14px;
  font-size:15px;font-weight:600;color:var(--head)}
.acctbtn:hover{border-color:var(--muted)}
.acctsel.open .acctbtn{border-color:var(--muted)}
.acctbtn>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctbtn .ph{color:var(--muted);font-weight:500}
.acctcar{width:7px;height:7px;flex-shrink:0;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s}
.acctsel.open .acctcar{transform:rotate(-135deg) translate(-3px,-3px)}
.acctmenu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--card);
  border:1.5px solid var(--hair);border-radius:14px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.16)}
.acctq{width:100%;font:inherit;font-size:14.5px;color:var(--head);background:var(--raise);
  border:none;border-radius:9px;padding:10px 12px;outline:none;margin-bottom:4px}
.acctq::placeholder{color:var(--muted)}
.acctlist{max-height:232px;overflow-y:auto;overscroll-behavior:contain}
.acctopt{display:block;width:100%;text-align:left;border-radius:9px;padding:9px 12px}
.acctopt:hover{background:var(--raise)}
.acctopt.on{background:var(--raise)}
.acctopt b{display:block;font-size:14.5px;font-weight:700;color:var(--head)}
.acctopt span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.acctnone{font-size:13.5px;color:var(--muted);padding:10px 12px}
.acctadd{display:flex;align-items:center;gap:9px;width:100%;text-align:left;margin-top:4px;
  border-top:1px solid var(--hair);border-radius:0 0 9px 9px;padding:11px 12px;
  font-size:13.5px;font-weight:700;color:var(--head)}
.acctadd:hover{background:var(--raise)}
.acctplus{width:19px;height:19px;border-radius:6px;background:var(--grad);color:#000;
  display:grid;place-items:center;font-size:14px;font-weight:800;flex-shrink:0}

/* Section navigation, and it is deliberately NOT the filter pill.
   Those two were the same component stacked in two adjacent rows, which meant an
   identical looking row above another one did something completely different.
   This is one recessed track with the current section raised out of it, so it
   reads as where am I rather than as what is shown. */
.seg{display:flex;gap:3px;background:var(--raise);border-radius:12px;padding:4px;
  margin:18px 0 4px;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1;min-width:fit-content;white-space:nowrap;border-radius:9px;padding:9px 16px;
  font-size:13.5px;font-weight:700;color:var(--muted);transition:background .14s,color .14s}
.seg button:hover{color:var(--head)}
.seg button.on{background:var(--card);color:var(--head);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.seg button b{font-weight:700;opacity:.55;margin-left:5px;font-size:12px}

/* A learning card is a buyer card with a percentage where the DISC letter goes,
   because the one number that says where you are in a learning is how much of
   it is behind you. */
.lrnpc{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--card);
  display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--head);
  border:1px solid var(--hair)}
.lrnpc em{font-style:normal;font-size:9px;font-weight:700;color:var(--muted)}

/* ---- the Learning tab ---- */
.lstat{display:flex;gap:28px;flex-wrap:wrap}
.lstat span{display:flex;flex-direction:column;gap:2px}
.lstat b{font-size:26px;font-weight:800;color:var(--head);line-height:1.1}
.lstat em{font-style:normal;font-size:12.5px;color:var(--muted)}
.fwrap{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.fwchip{display:flex;flex-direction:column;gap:4px;padding:13px 15px;border:1px solid var(--hair);
  border-radius:12px;background:var(--card)}
.fwchip b{font-size:13.5px;color:var(--head);line-height:1.35}
.fwchip span{font-size:11.5px;color:var(--muted)}
.fwchip .tlink{align-self:flex-start;margin-top:3px}
.ltable{width:100%;border-collapse:collapse;font-size:13px}
.ltable th{text-align:left;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;padding:11px 16px;border-bottom:1px solid var(--hair);white-space:nowrap}
.ltable td{padding:11px 16px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--body)}
.ltable tr:last-child td{border-bottom:0}
.ltable td b{display:block;color:var(--head);font-size:13px}
.ltable td span{display:block;font-size:11.5px;color:var(--muted)}
.ltable td em{font-style:normal;font-size:11.5px;color:var(--muted);display:block;margin-top:3px}
.ltable .tnone{color:var(--muted);font-size:12.5px;display:inline}
.tbar{display:block;width:74px;height:6px;border-radius:99px;background:var(--hair);overflow:hidden}
.tbar i{display:block;height:100%;border-radius:99px;background:var(--grad)}
/* the safety net, if a column ever grows past the screen anyway */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ltable .mob{display:none}
/* On a laptop the name is drawn once and the rows under it are obviously the
   same person's. The markup repeats it either way so the phone layout below has
   something to work with. */
.ltable td.rep b,.ltable td.rep span{display:none}

/* A phone is not wide enough for three columns of this, let alone five. The
   first attempt folded two columns away and Progress was still cut off, because
   Who and Learning alone take more than 390. So the row becomes a block. */
@media(max-width:640px){
  .ltable thead{display:none}
  .ltable,.ltable tbody,.ltable tr,.ltable td{display:block;width:auto}
  .ltable tr{padding:12px 15px;border-bottom:1px solid var(--hair)}
  .ltable tr:last-child{border-bottom:0}
  .ltable td{padding:0;border:0}
  .ltable td.c-who{margin-bottom:6px}
  .ltable td.c-who b{font-size:13.5px}
  .ltable td.rep b{display:block}
  .ltable td.rep span{display:none}
  .ltable .c-next,.ltable .c-due{display:none}
  .ltable .mob{display:block;margin-top:4px;line-height:1.45}
  .ltable .tbar{display:inline-block;vertical-align:middle;margin-right:9px}
  .ltable td em{display:inline;margin-top:0}
  .ltable td.tnone{margin-top:4px}
}

/* the way back. Two of them, because the bar is where somebody looks on a phone
   and the top of the page is where they look on a laptop. */
.backlink{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;
  color:var(--muted);margin-bottom:14px;padding:6px 10px 6px 0}
.backlink:hover{color:var(--head)}
.crumbback{font:inherit;font-size:13px;font-weight:700;color:var(--head);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--hair)}
.crumbback:hover{text-decoration-color:var(--head)}

/* the call. One orb, one timer, and captions, because a voice conversation has
   nothing to look at and silence with no feedback reads as broken. */
.call{background:var(--card);border-radius:18px;padding:26px 20px;text-align:center}
.orb{width:112px;height:112px;border-radius:50%;margin:0 auto 16px;background:var(--raise);
  display:grid;place-items:center;position:relative;transition:transform .25s}
.orb:before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid transparent}
.orb.listening{background:var(--grad)}
.orb.listening:before{border-color:var(--gold);animation:pulse 1.6s ease-out infinite}
.orb.speaking{background:var(--head);transform:scale(1.06)}
.orb.speaking:before{border-color:var(--head);animation:pulse .9s ease-out infinite}
.orb b{font-size:26px;font-weight:800;color:var(--bg)}
.orb.listening b{color:#000}
@keyframes pulse{0%{transform:scale(.94);opacity:.9}100%{transform:scale(1.18);opacity:0}}
.callst{font-size:15px;color:var(--sub);min-height:22px}
.calltmr{font-size:13px;font-weight:700;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.caps{text-align:left;margin-top:20px;max-height:280px;overflow-y:auto}
.cap{font-size:14.5px;line-height:1.6;margin-bottom:10px;color:var(--body)}
.cap .cwho{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:2px}
.cap.buyer{color:var(--head);font-weight:500}
.vq{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5}

/* buyer cards, drawn inside a chat reply when the coach pulls the library up */
.rpcards{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.rpcard{display:flex;gap:13px;align-items:center;background:var(--card);border:1.5px solid var(--hair);
  border-radius:14px;padding:14px 16px;flex-wrap:wrap}
.rpcard .rpi{flex:1;min-width:190px}
.rpcard .rpi b{display:block;font-size:15px;font-weight:700;color:var(--head)}
.rpcard .rpi span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}
.rpcard .rpi .rpm{margin-top:4px;font-size:11.5px;font-weight:700;color:var(--red)}

/* the video. 1:1, because this one genuinely is square */
.vid{position:relative;border-radius:16px;overflow:hidden;background:#1a1a1a;
  aspect-ratio:1/1;width:min(400px,100%);margin-top:4px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vposter{position:absolute;inset:0;width:100%;padding:0;border:none;background:none;cursor:pointer;display:block}
.vid .vbg{position:absolute;inset:0;background:radial-gradient(ellipse at 34% 26%,#3a2a28,#1a1a1a 72%)}
.vid .vin{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;gap:5px;text-align:left}
.vid .play{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;
  border-radius:50%;background:var(--grad);display:grid;place-items:center;
  box-shadow:0 8px 30px rgba(238,47,76,.4);transition:transform .16s}
.vid .play svg{width:24px;height:24px;fill:#000;margin-left:3px}
.vposter:hover .play{transform:translate(-50%,-50%) scale(1.07)}
.vid .veb{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.vid .vt{font-size:19px;font-weight:700;color:#fff;line-height:1.3}
.vid .vm{font-size:13px;color:rgba(255,255,255,.65)}
.vblocked{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);color:#fff;
  font-size:12px;font-weight:600;padding:9px 14px;margin:0}
.vfall{font-size:12.5px;color:var(--muted);margin-top:9px}
.vfall a{color:var(--link);font-weight:700}

/* the level meter, and locks */
.meter{padding:10px 14px 0;flex-shrink:0}
.lvpick{width:100%;display:block;text-align:left;border:1.5px solid var(--hair);border-radius:12px;
  padding:10px 12px;background:var(--raise);transition:.14s}
.lvpick:hover{border-color:var(--red)}
.lvname{display:block;font-size:13px;font-weight:800;color:var(--head)}
.lvleft{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}
.lvleft.out{color:var(--red);font-weight:700}
.lvbar{display:block;height:5px;border-radius:99px;background:var(--hair);overflow:hidden;margin-top:8px}
.lvbar i{display:block;height:100%;border-radius:99px;background:var(--grad)}
.navi.locked{color:var(--muted)}
.lock{margin-left:auto;display:grid;place-items:center;color:var(--muted)}
.lock svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7}

/* the comparison table */
.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px}
.cmp th,.cmp td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--hair);
  vertical-align:top;line-height:1.45}
.cmp thead th{font-size:13px;font-weight:800;color:var(--head);white-space:nowrap}
.cmp th[scope="row"]{font-weight:700;color:var(--muted);font-size:12.5px;white-space:nowrap;padding-right:18px}
.cmp td{color:var(--sub)}
.cmp .here{color:var(--head);font-weight:700}
.cmp thead th.here{color:var(--red)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none}

/* a document, previewed as a page rather than a download */
.docpage{background:var(--raise);border:1px solid var(--hair);border-radius:12px;padding:30px 34px;
  max-width:660px;margin:0 auto}
.docpage .deb{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);
  margin-bottom:10px}
.docpage h2{font-size:24px;font-weight:800;color:var(--head);line-height:1.2;margin-bottom:10px;letter-spacing:-.02em}
.docpage h3{font-size:15px;font-weight:800;color:var(--head);margin:20px 0 8px}
.docpage p{font-size:14px;color:var(--sub);line-height:1.6;margin-bottom:10px}
.docpage .dsm{font-size:12px;color:var(--muted)}
.fnd{border-collapse:collapse;width:100%;margin:6px 0 4px}
.fnd th{width:30px;font-size:16px;font-weight:800;color:var(--red);text-align:left;vertical-align:top;
  padding:11px 6px 11px 0;border-bottom:1px solid var(--hair)}
.fnd td{font-size:13.5px;color:var(--sub);line-height:1.5;vertical-align:top;padding:11px 12px 11px 0;
  border-bottom:1px solid var(--hair)}
.fnd tr.hi th,.fnd tr.hi td{background:var(--card)}
.fnd tr:last-child th,.fnd tr:last-child td{border-bottom:none}

/* a rich text composer, shared by the room and the coach chat */
.rttools{display:flex;gap:4px;align-items:center;margin-bottom:9px;padding-bottom:9px;
  border-bottom:1px solid var(--hair)}
.rttools button{width:32px;height:30px;border-radius:7px;display:grid;place-items:center;font-size:13px;
  font-weight:800;color:var(--body);border:1px solid transparent}
.rttools button:hover{background:var(--raise);border-color:var(--hair);color:var(--head)}
.rttools .rtsp{flex:1}
.rttools .rtattach{width:auto;padding:0 11px;gap:7px;display:inline-flex;align-items:center;font-size:12.5px;
  font-weight:700;color:var(--link)}
.rttools .rtattach svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rtedit{min-height:74px;font-size:15px;line-height:1.6;color:var(--head);outline:none}
.rtedit:empty::before{content:attr(data-ph);color:var(--muted)}
.rtedit ul{margin:6px 0 6px 20px}
.att{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;font-weight:700;
  color:var(--link);border:1px solid var(--hair);border-radius:9px;padding:6px 11px;background:var(--raise)}
.att svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}