/* ============================================================
   revenueify Ask, version 3.

   v2 swung too far into pure chat. Three things come back:
   a left panel with the click your journey route at the top and
   the chat record at the bottom, the assigned quests living in
   that record as parent chats with their missions as sub chats,
   and an opening turn that is honest about what this can and
   cannot do. The floating ask button is gone, because the main
   window already takes any question.

   Quest structure is the real TRL Monthly Coaching Program (AE),
   TotalCare, read from the live myQuest API: 3 levels, 10
   missions, titles verbatim.

   Brand: BUILD-SYSTEM.md v2.0. Montserrat only, weight 500.
   White sections, #f9f7f4 cards, #1a1a1a dark. No tan, no cream.
   ============================================================ */
:root{
  --gold:#fdb745; --red:#ee2f4c; --amber:#f4a460; --brown:#6b4423;
  --grad:linear-gradient(95deg,#fdb745 -28.7%,#ee2f4c 127.95%);
  --bg:#ffffff; --panel:#f9f7f4; --card:#f9f7f4; --raise:#ffffff;
  --head:#1a1a1a; --body:#54575f; --sub:#555555; --muted:#8a8378; --hair:#e0e0e0;
  --link:#6b4423; --sel:rgba(238,47,76,.07); --ok:#1f7a4d;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1a1a1a; --panel:#151515; --card:#2a2a2a; --raise:#232323;
    --head:#ffffff; --body:#cccccc; --sub:#aaaaaa; --muted:#8a8378; --hair:#3a3a3a;
    --link:#f4a460; --sel:rgba(244,164,96,.10); --ok:#5fc28e;
  }
}
:root[data-theme="dark"]{
  --bg:#1a1a1a; --panel:#151515; --card:#2a2a2a; --raise:#232323;
  --head:#ffffff; --body:#cccccc; --sub:#aaaaaa; --muted:#8a8378; --hair:#3a3a3a;
  --link:#f4a460; --sel:rgba(244,164,96,.10); --ok:#5fc28e;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{background:var(--bg);color:var(--body);font-family:Montserrat,sans-serif;font-weight:500;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,textarea{font-family:Montserrat,sans-serif;color:inherit}
button{cursor:pointer;background:none;border:none;text-align:left}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* the brand CTA and the only secondary */
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--grad);color:#000;font-weight:700;
  font-size:15px;padding:14px 26px;border-radius:16px;border:none;transition:filter .15s}
.cta:hover{filter:brightness(1.05)}
.cta.sm{font-size:13.5px;padding:11px 20px;gap:10px}
.cta .chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;
  width:27px;height:27px;flex-shrink:0}
.cta.sm .chip{width:23px;height:23px}
.cta .chip svg{width:17px;height:17px}
.cta.sm .chip svg{width:15px;height:15px}
.tlink{display:inline-flex;align-items:center;gap:8px;color:var(--link);font-weight:700;font-size:13px;border:none}
.tlink:hover{opacity:.72}
.tlink svg{width:12px;height:12px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:268px minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  height:100dvh;overflow:hidden}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:288px;z-index:100;transform:translateX(-100%);
    transition:transform .22s;box-shadow:0 0 40px rgba(0,0,0,.2)}
  .side.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:90}
}
@media(min-width:901px){.scrim{display:none}}

/* ---------- left panel ---------- */
.side{background:var(--panel);border-right:1px solid var(--hair);display:flex;flex-direction:column;
  min-height:0;overflow:hidden}
.sidetop{padding:15px 14px 10px;flex-shrink:0}
.brandrow{display:flex;align-items:center;gap:9px;padding:0 6px 14px;width:100%;border-radius:9px;transition:.13s}
.brandrow:hover{background:var(--sel)}
.mark{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#000}
.wordmark{font-size:15px;font-weight:800;color:var(--head);letter-spacing:-.02em}
.brandrow .sp{flex:1}

.sechead{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:0 8px 8px}
.nav{display:flex;flex-direction:column;gap:1px}
.navi{display:flex;align-items:center;gap:11px;width:100%;padding:9px 9px;border-radius:9px;
  font-size:14px;font-weight:600;color:var(--body);transition:.13s}
.navi:hover{background:var(--sel);color:var(--head)}
.navi svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.navi .ct{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted)}
.navi .ct.hot{color:#000;background:var(--grad);border-radius:999px;padding:2px 7px}

.sidesplit{height:1px;background:var(--hair);margin:14px 0}

.chatscroll{flex:1;overflow-y:auto;padding:0 14px 16px;min-height:0}
.newchat{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:10px;
  border:1.5px dashed var(--hair);font-size:13.5px;font-weight:700;color:var(--head);margin-bottom:14px}
.newchat:hover{border-color:var(--red);color:var(--red)}
.newchat svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

.quest{margin-bottom:6px}
.qhead{display:flex;align-items:center;gap:9px;width:100%;padding:9px;border-radius:9px;
  font-size:14px;font-weight:700;color:var(--head)}
.qhead:hover{background:var(--sel)}
.qhead .caret{width:12px;height:12px;stroke:var(--muted);fill:none;stroke-width:2.2;transition:transform .18s;flex-shrink:0}
.qhead.open .caret{transform:rotate(90deg)}
.qhead .qt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qhead .qp{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.star{width:15px;height:15px;flex-shrink:0}
.star.off{opacity:.22}

.level{padding:9px 0 3px 22px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.mission{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px 8px 22px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--body);line-height:1.35}
.mission:hover{background:var(--sel);color:var(--head)}
.mission.on{background:var(--sel);color:var(--head);font-weight:700}
.mission .mt{flex:1;min-width:0}
.mission .mtype{font-size:10.5px;color:var(--muted);font-weight:600;display:block;margin-top:1px}
.mission.locked{opacity:.45}
.mission.locked:hover{background:none;color:var(--body)}

.chatlist{display:flex;flex-direction:column;gap:1px}
.chatrow{display:flex;align-items:center;gap:9px;width:100%;padding:9px;border-radius:9px;font-size:13.5px;
  font-weight:600;color:var(--body)}
.chatrow:hover{background:var(--sel);color:var(--head)}
.chatrow.on{background:var(--sel);color:var(--head);font-weight:700}
.chatrow .ci{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0}
.chatrow .ci.coach{background:var(--grad)}
.chatrow .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatrow time{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
/* Archiving a chat lives on the chat, because that is where you are when you
   decide you are done with it. Kept quiet on a pointer, always there on touch,
   where there is no hover to reveal it. */
.chatrow .carch{width:22px;height:22px;flex-shrink:0;border-radius:6px;display:grid;place-items:center;
  font-size:13px;line-height:1;color:var(--muted);opacity:0;transition:opacity .12s}
.chatrow:hover .carch,.chatrow:focus-within .carch,.chatrow .carch:focus{opacity:1}
.chatrow .carch:hover{background:var(--raise);color:var(--head)}
@media (hover:none){ .chatrow .carch{opacity:.55} }
.chatrow.arch .cn{color:var(--muted)}
.archline{display:flex;align-items:center;gap:6px;padding:4px 10px 2px}
.archline button{font-size:12px;font-weight:700;color:var(--muted)}
.archline button:hover{color:var(--head)}

.sidefoot{flex-shrink:0;border-top:1px solid var(--hair);padding:11px 14px;display:flex;align-items:center;gap:10px;
  position:relative}
.whobtn{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:4px 6px;margin:-4px -6px;
  border-radius:9px;transition:.13s}
.whobtn:hover{background:var(--sel)}
.who{width:30px;height:30px;border-radius:50%;background:var(--head);color:var(--bg);display:grid;place-items:center;
  font-size:11px;font-weight:800;flex-shrink:0}
.sidefoot .wi{flex:1;min-width:0}
.sidefoot .wi b{display:block;font-size:13px;font-weight:700;color:var(--head);line-height:1.25}
.sidefoot .wi span{font-size:11px;color:var(--muted)}
.iconb{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);flex-shrink:0}
.iconb:hover{color:var(--head);background:var(--sel)}
.iconb svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}

/* The account popover. Tapping the avatar used to do nothing at all. */
.acctpop{position:absolute;left:14px;right:14px;bottom:calc(100% + 8px);background:var(--card);
  border:1.5px solid var(--hair);border-radius:14px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:70}
.acctpopi{display:flex;align-items:center;gap:10px;width:100%;padding:10px 10px;border-radius:9px;
  font-size:13.5px;font-weight:700;color:var(--head);min-height:40px}
.acctpopi:hover{background:var(--sel)}
.acctpopi svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.acctpopi.danger{color:var(--red)}

/* ---------- main ---------- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.bar{display:flex;align-items:center;gap:11px;padding:13px 24px;flex-shrink:0;border-bottom:1px solid transparent;
  transition:border-color .2s}
.bar.stuck{border-bottom-color:var(--hair)}
/* The three line icon is back, and this is the second time it has moved.
   It was removed once and its job given to the crumb, on the reasoning that
   tapping where you are should open where you can go. That reasoning held right
   up until the crumb had something else to say. On the chat screen it reads
   "New chat", which is the name of an action that is also sitting in the panel
   it opens, so the one control was a verb that did a different thing. And
   inside a learning it now carries a back link, so the same pill meant two
   things depending on which half you hit.

   One job per control. The button opens the panel, the crumb says where you
   are, and the back link inside it goes back. Below 900px only, because above
   it the panel is always on screen and this would be a control that appears to
   do nothing. */
.menub{display:none;width:34px;height:34px;border-radius:99px;border:1px solid var(--hair);
  align-items:center;justify-content:center;color:var(--head);flex-shrink:0;margin-left:-2px}
.menub svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.menub:active{background:var(--sel);border-color:var(--muted)}
@media(max-width:900px){ .menub{display:flex} }
.crumb{font:inherit;font-size:13px;font-weight:700;color:var(--head);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-align:left}
.crumb span{color:var(--muted);font-weight:600}
.barsp{flex:1}

/* the lesson progress strip */
.prog{flex-shrink:0;border-bottom:1px solid var(--hair);padding:11px 24px;display:flex;align-items:center;gap:14px;
  animation:rise .3s both}
.prog .pt{font-size:13px;font-weight:700;color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog .pbar{flex:1;height:6px;border-radius:99px;background:var(--hair);overflow:hidden;min-width:50px}
.prog .pbar i{display:block;height:100%;border-radius:99px;background:var(--grad);transition:width .45s cubic-bezier(.2,.8,.3,1)}
.prog .px{font-size:13px;font-weight:700;color:var(--link);white-space:nowrap}
@media(max-width:600px){.prog{padding:10px 18px;gap:10px}}

.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch}
.col{width:min(740px,100%);margin:0 auto;padding:24px 24px 28px}
@media(max-width:600px){.col{padding:18px 18px 22px}}

.turn{margin-bottom:30px;animation:rise .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.you{display:flex;justify-content:flex-end;margin-bottom:26px}
.you p{background:var(--head);color:var(--bg);border-radius:16px 16px 4px 16px;padding:11px 17px;
  font-size:15px;font-weight:600;max-width:82%}
.agent{display:flex;gap:14px}
.adot{width:30px;height:30px;border-radius:50%;background:var(--grad);flex-shrink:0;margin-top:4px}
.abody{flex:1;min-width:0}
.say{font-size:18px;line-height:1.62;color:var(--head);font-weight:500;letter-spacing:-.005em;text-wrap:pretty;
  margin-bottom:14px}
.say:last-child{margin-bottom:0}
.say b{font-weight:700}
.say .hl{font-weight:700;box-shadow:inset 0 -.5em 0 rgba(253,183,69,.42)}
.small{font-size:15px;line-height:1.65;color:var(--sub);margin-bottom:14px}
.eyebrow{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);
  margin-bottom:10px}

.panel{background:var(--card);border-radius:16px;padding:20px;margin-bottom:16px}
.panel h3{font-size:19px;font-weight:700;color:var(--head);line-height:1.3;margin-bottom:8px}
.panel p{font-size:15px;color:var(--sub);line-height:1.65}
.panel .lede{margin-bottom:14px}
.acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:16px}

/* what this can do, the orientation panel */
.can{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:4px}
.cancol h4{font-size:14px;font-weight:800;color:var(--head);margin-bottom:3px;display:flex;align-items:center;gap:8px}
.cancol h4 svg{width:15px;height:15px;stroke:var(--red);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cancol > p{font-size:12.5px;color:var(--muted);margin-bottom:9px;line-height:1.45}
.cancol ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.cancol li button{font-size:13.5px;font-weight:600;color:var(--link);line-height:1.4;padding:0}
.cancol li button:hover{opacity:.7;text-decoration:underline}
.cannot{background:var(--card);border-left:4px solid var(--brown);border-radius:0 14px 14px 0;padding:15px 18px;
  margin-top:18px}
.cannot p{font-size:14.5px;color:var(--sub);line-height:1.6}
.cannot b{color:var(--head)}

/* answer chips */
.opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.opt{border:1.5px solid var(--hair);background:var(--raise);border-radius:999px;padding:9px 17px;
  font-size:14px;font-weight:700;color:var(--head);transition:.15s}
.opt:hover{border-color:var(--red);color:var(--red)}

/* the pick, which is the quiz with the quiz taken out */
.pick{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.pickb{background:var(--raise);border:1.5px solid var(--hair);border-radius:14px;padding:15px 18px;transition:.15s;
  font-size:16px;font-weight:600;color:var(--head);line-height:1.5}
.pickb:hover{border-color:var(--red)}
.pickb b{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.pickb:hover b{color:var(--red)}

.writeme{background:var(--card);border-left:4px solid var(--gold);border-radius:0 14px 14px 0;padding:15px 18px;
  margin-top:4px}
.writeme p{font-size:15px;color:var(--head);font-weight:600;line-height:1.55}
.writeme span{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:6px}

/* evidence strip */
.strip{display:flex;flex-direction:column;gap:11px}
.srow{display:flex;align-items:center;gap:13px}
.srow .sl{flex:1;font-size:14px;color:var(--body);font-weight:600}
.srow .sb{width:92px;height:6px;border-radius:99px;background:var(--hair);overflow:hidden;flex-shrink:0}
.srow .sb i{display:block;height:100%;border-radius:99px;background:var(--grad);
  animation:gw .75s cubic-bezier(.2,.8,.3,1) both}
.srow .sb.low i{background:linear-gradient(95deg,#e8a03c,#b3261e)}
@keyframes gw{from{width:0 !important}}
.srow .sv{font-size:14px;font-weight:700;color:var(--head);width:30px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:520px){.srow .sb{width:58px}}
.quote{font-size:16px;color:var(--head);border-left:3px solid var(--gold);padding:2px 0 2px 16px;line-height:1.55;
  font-weight:600;margin-top:16px}
.quote span{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:6px}

.srcs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.src{font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--hair);border-radius:8px;
  padding:6px 10px;background:var(--raise)}
.src:hover{color:var(--head);border-color:var(--muted)}
.src em{font-style:normal;font-weight:500}

.filed{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--hair);animation:rise .4s both}
.filed:first-child{border-top:none;padding-top:0}
.filed .tk{width:20px;height:20px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  flex-shrink:0;margin-top:2px}
.filed .tk svg{width:11px;height:11px;stroke:#000;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.filed .fk{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.filed p{font-size:14.5px;color:var(--head);line-height:1.55;margin-top:3px;font-weight:500}
.filed .note{font-size:13px;color:var(--link);font-weight:700;margin-top:5px}

.who2{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.who2 .av{width:44px;height:44px;border-radius:50%;background:var(--head);color:var(--bg);display:grid;
  place-items:center;font-size:14px;font-weight:800;flex-shrink:0}
.who2 b{display:block;font-size:16px;font-weight:700;color:var(--head)}
.who2 span{font-size:13px;color:var(--muted)}
.post{padding:13px 0;border-top:1px solid var(--hair)}
.post:first-of-type{border-top:none;padding-top:4px}
.post b{font-size:14px;font-weight:700;color:var(--head)}
.post time{font-size:12px;color:var(--muted);margin-left:7px}
.post p{font-size:14.5px;color:var(--sub);margin-top:3px;line-height:1.55}

/* the star a finished mission earns */
.earned{display:flex;align-items:center;gap:11px;background:var(--card);border-radius:14px;padding:14px 18px;
  margin-bottom:16px;animation:pop .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.earned svg{width:24px;height:24px;flex-shrink:0}
.earned b{font-size:15px;font-weight:700;color:var(--head)}
.earned span{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:2px}

/* ---------- composer ---------- */
.dock{flex-shrink:0;background:var(--bg);border-top:1px solid var(--hair)}
.dockin{width:min(740px,100%);margin:0 auto;padding:14px 24px 18px}
@media(max-width:600px){.dockin{padding:12px 18px 16px}}
.composer{display:flex;align-items:flex-end;gap:12px;background:var(--card);border:1.5px solid var(--hair);
  border-radius:20px;padding:10px 10px 10px 20px;transition:border-color .16s}
.composer:focus-within{border-color:var(--muted)}
.composer textarea{flex:1;border:none;background:none;resize:none;font-size:16px;font-weight:500;color:var(--head);
  line-height:1.5;min-height:30px;max-height:130px;padding:8px 0;outline:none}
.composer textarea::placeholder{color:var(--muted)}
.talkb{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--hair);display:grid;place-items:center;
  color:var(--muted);flex-shrink:0;background:var(--raise)}
.talkb:hover{color:var(--head);border-color:var(--muted)}
.talkb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sendb{width:44px;height:44px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex-shrink:0;
  border:none}
.sendb .chip{width:26px;height:26px;border-radius:8px;background:#fff;display:grid;place-items:center}
.sendb .chip svg{width:17px;height:17px}
.dockhint{font-size:12px;color:var(--muted);text-align:center;margin-top:9px}
.dockhint button{font-size:12px;font-weight:700;color:var(--link);padding:0}
.dockhint button:hover{text-decoration:underline}

/* listening */
.listen{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:26px;padding:30px;animation:rise .26s both}
.orb{width:136px;height:136px;border-radius:50%;background:var(--grad);position:relative;
  box-shadow:0 0 70px rgba(238,47,76,.3);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
.orb::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:2px solid rgba(253,183,69,.45);
  animation:ripple 2.2s infinite}
@keyframes ripple{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.3);opacity:0}}
.heard{font-size:23px;font-weight:600;color:var(--head);text-align:center;max-width:22ch;min-height:70px;
  line-height:1.4;letter-spacing:-.01em}
.lstate{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(6px);z-index:200;
  background:var(--head);color:var(--bg);font-size:13px;font-weight:700;padding:11px 18px;border-radius:12px;
  opacity:0;pointer-events:none;transition:.22s;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}

/* the four styles, as a reference card the member keeps */
.styletbl{overflow-x:auto;margin-top:4px}
.styletbl table{border-collapse:collapse;width:100%;min-width:520px;font-size:13.5px}
.styletbl th,.styletbl td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;
  border-bottom:1px solid var(--hair);line-height:1.45}
.styletbl thead th,.styletbl tr:first-child th{font-weight:800;color:var(--head);font-size:13px}
.styletbl th[scope="row"]{font-weight:700;color:var(--muted);font-size:12px;white-space:nowrap;padding-right:16px}
.styletbl td{color:var(--sub)}
.styletbl td b{color:var(--head)}
.styletbl tr:last-child td,.styletbl tr:last-child th{border-bottom:none}