/* shell.css - the revamp's chrome - top bar, sidebar, menus, What's new, flashes.
   Every selector is scoped under the class tsa on <html> (or is a :root
   token), and base.html links this sheet only on a page that opts in:
   {% block html_class %}tsa{% endblock %} in the page template. Keep it that
   way when editing - an unscoped rule here restyles every opted-in page, and
   a page's own rules must be scoped the same way to compete with these. */
/* ============================================================== the shell ====
   base.html's chrome, written once for every prototype that wears it.

   The class names are the LIVE ones - tsa-topbar, tsa-sidebar, tsa-sidebar-nav,
   tsa-main, tsa-sidebar-backdrop - so the prototype maps one-to-one onto the
   template it replaces. Everything carries the tsa- prefix because four
   prototypes already use .nav / .side / .shell / .wrap for four different
   things, and a shell that borrowed those names would restyle the page under it.

   Before this file there were five shells: top bars of 68, 64, 62, 64 and 62px,
   sidebars of 246, 236, 232px or none, three breakpoints, and an account menu
   that had lost Admin, Training and Latest Video. base.html is one element; so
   is this.

   Tokens fall back to the brand values, so the shell renders the same whether
   or not the page under it declares them. */
:root{
  --tsa-bar:64px;          /* top bar height, logged in and logged out */
  --tsa-side:236px;        /* sidebar, open */
  --tsa-side-min:68px;     /* sidebar, collapsed to icons */
}
/* ---------------------------------------------------------------- top bar --- */
.tsa .tsa-topbar{position:sticky; top:0; z-index:60; height:var(--tsa-bar);
  display:flex; align-items:center; gap:10px; padding:0 16px;
  background:rgba(10,15,30,.88); border-bottom:1px solid var(--line,#1E2A3A);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif; color:var(--text,#fff);}
@media(prefers-reduced-transparency:reduce){
  .tsa .tsa-topbar{background:var(--ground,#0A0F1E); backdrop-filter:none; -webkit-backdrop-filter:none;}
}
/* min-width as well as min-height: with the wordmark hidden on a phone the link
   is the 30px mark alone, a 30px-wide tap target */
.tsa .tsa-brand{display:flex; align-items:center; gap:11px; min-height:44px; min-width:44px; flex:none;
  color:var(--text,#fff); font-weight:800; font-size:.94rem; letter-spacing:-.02em;
  text-decoration:none;}
.tsa .tsa-brand:hover{text-decoration:none; color:var(--text,#fff);}
.tsa .tsa-brand .mark{width:30px; height:auto; flex:none;}
/* the official mark, a little wider than tall */
.tsa .tsa-brand em{font-style:normal; color:var(--muted,#8892A4); font-weight:600;}
.tsa .tsa-sp{flex:1;}
.tsa .tsa-right{display:flex; align-items:center; gap:8px;}
/* buttons that belong to the chrome - their own names, so a page's .btn rules
   (three different heights across the set) cannot reach them */
.tsa .tsa-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 14px; border-radius:var(--r-control,9px);
  border:1px solid transparent; font:700 .82rem/1 Montserrat,"Helvetica Neue",Arial,sans-serif;
  white-space:nowrap; cursor:pointer; text-decoration:none; position:relative;
  transition:background .13s, border-color .13s, color .13s;}
.tsa .tsa-btn:hover{text-decoration:none;}
.tsa .tsa-btn i{font-size:1rem;}
.tsa .tsa-btn-ghost{background:transparent; color:var(--text,#fff); border-color:var(--line-2,#2A3A50);}
.tsa .tsa-btn-ghost:hover, .tsa .tsa-menu.is-open > .tsa-btn-ghost{border-color:#3C5170; background:rgba(255,255,255,.04);}
.tsa .tsa-btn-primary{background:var(--accent,#00C896); color:var(--accent-ink,#002E22);}
.tsa .tsa-btn-primary:hover{background:#15D9A9; color:var(--accent-ink,#002E22);}
.tsa .tsa-ibtn{width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  flex:none; padding:0; border-radius:var(--r-control,9px); border:1px solid transparent;
  background:transparent; color:var(--muted,#8892A4); font-size:1.1rem; cursor:pointer;
  transition:background .13s, color .13s, border-color .13s;}
.tsa .tsa-ibtn:hover, .tsa .tsa-menu.is-open > .tsa-ibtn{background:rgba(255,255,255,.05); color:var(--text,#fff);}
.tsa .tsa-dot{position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%;
  background:var(--accent,#00C896); box-shadow:0 0 0 2px var(--ground,#0A0F1E);}
/* -------------------------------------------------------------- the menus ---
   Disclosure menus, not role="menu": these are lists of links to other
   pages, which is the case the ARIA authoring guide gives the disclosure
   pattern to. Arrow keys still move between items. */
.tsa .tsa-menu{position:relative;}
.tsa .tsa-sheet{position:absolute; right:0; top:calc(100% + 8px); z-index:70; min-width:252px;
  max-height:calc(100vh - var(--tsa-bar) - 24px); overflow-y:auto;
  padding:7px; display:none; background:var(--surface,#111827);
  border:1px solid var(--line,#1E2A3A); border-radius:var(--r-surface,14px);
  box-shadow:0 18px 44px rgba(0,0,0,.5);}
.tsa .tsa-menu.is-open > .tsa-sheet{display:block;}
.tsa .tsa-sheet ul{list-style:none; margin:0; padding:0;}
/* .73rem, the project's floor for a label: .68rem is 10.88px, "under the floor
   for anything anyone has to read" (SETTINGS-PROTOTYPE) */
.tsa .tsa-sh{margin:0; padding:9px 11px 6px; font-size:.73rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted,#8892A4);}
.tsa .tsa-who{padding:9px 11px 11px; margin-bottom:6px; border-bottom:1px solid var(--line,#1E2A3A);}
.tsa .tsa-who b{display:block; font-size:.88rem; font-weight:800; color:var(--text,#fff);}
.tsa .tsa-who span{display:block; font-size:.78rem; color:var(--muted,#8892A4); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tsa .tsa-item{display:flex; align-items:center; gap:11px; width:100%; min-height:38px;
  padding:0 11px; border:0; border-radius:8px; background:none; text-align:left;
  font:600 .86rem/1.3 Montserrat,"Helvetica Neue",Arial,sans-serif; color:var(--text,#fff);
  text-decoration:none; cursor:pointer;}
.tsa a.tsa-item:hover, .tsa button.tsa-item:hover{background:rgba(255,255,255,.055); text-decoration:none;
  color:var(--text,#fff);}
.tsa .tsa-item > i:first-child{width:18px; flex:none; text-align:center; font-size:.98rem;
  color:var(--muted,#8892A4);}
.tsa .tsa-item .tsa-ext{margin-left:auto; font-size:.74rem; color:var(--muted,#8892A4);}
.tsa .tsa-item.is-soon{color:var(--muted,#8892A4); cursor:default;}
.tsa .tsa-item[aria-pressed="true"] .tsa-tick{opacity:1;}
.tsa .tsa-tick{margin-left:auto; color:var(--accent,#00C896); opacity:0;}
.tsa .tsa-item[disabled]{color:var(--muted,#8892A4); cursor:not-allowed;}
.tsa .tsa-chip{margin-left:auto; padding:2px 8px; border-radius:999px; border:1px solid var(--line-2,#2A3A50);
  font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted,#8892A4); flex:none;}
.tsa .tsa-count{margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--accent,#00C896); color:var(--accent-ink,#002E22);
  font-size:.68rem; font-weight:800; display:grid; place-items:center; flex:none;}
.tsa .tsa-div{height:1px; margin:6px 4px; background:var(--line,#1E2A3A); border:0;}
.tsa .tsa-hint{margin:2px 11px 6px; font-size:.76rem; line-height:1.45; color:var(--muted,#8892A4);
  max-width:28ch;}
/* ---------------------------------------------------------------- layout --- */
.tsa .tsa-layout{display:grid; grid-template-columns:var(--tsa-side) minmax(0,1fr); align-items:start;
  min-height:calc(100vh - var(--tsa-bar));}
html.tsa.tsa-side-min .tsa-layout{grid-template-columns:var(--tsa-side-min) minmax(0,1fr);}
/* the footer belongs to the content column, as it does in base.html */
.tsa .tsa-main{min-width:0; display:flex; flex-direction:column; min-height:calc(100vh - var(--tsa-bar));}
.tsa .tsa-main > .tsa-footer{margin-top:auto;}
/* --------------------------------------------------------------- sidebar --- */
.tsa .tsa-sidebar{position:sticky; top:var(--tsa-bar); align-self:start;
  height:calc(100vh - var(--tsa-bar)); overflow-y:auto; overflow-x:hidden;
  padding:16px 12px; background:#0C1220; border-right:1px solid var(--line,#1E2A3A);
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;}
.tsa .tsa-sidebar-nav{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.tsa .tsa-side-h{margin:0 0 8px; padding:4px 12px 0; font-size:.73rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted,#8892A4); white-space:nowrap;}
html.tsa.tsa-side-min .tsa-side-h{visibility:hidden;}
.tsa .tsa-navlink{display:flex; align-items:center; gap:13px; min-height:42px; padding:0 12px;
  border-radius:var(--r-control,9px); position:relative; white-space:nowrap;
  color:var(--muted,#8892A4); font-size:.875rem; font-weight:600; text-decoration:none;
  transition:background .14s, color .14s;}
.tsa .tsa-navlink:hover{background:rgba(255,255,255,.045); color:var(--text,#fff); text-decoration:none;}
.tsa .tsa-navlink[aria-current="page"]{color:var(--text,#fff); background:rgba(0,200,150,.11);}
.tsa .tsa-navlink[aria-current="page"]::before{content:""; position:absolute; left:0; top:9px; bottom:9px;
  width:2px; border-radius:2px; background:var(--accent,#00C896);}
.tsa .tsa-nav-icon{width:20px; flex:none; text-align:center; font-size:1.02rem;}
/* collapsed: the label leaves the screen but not the accessibility tree */
html.tsa.tsa-side-min .tsa-sidebar{padding-inline:10px;}
html.tsa.tsa-side-min .tsa-navlink{justify-content:center; padding:0;}
html.tsa.tsa-side-min .tsa-nav-label{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;}
.tsa .tsa-sidebar-backdrop{display:none;}
/* ---------------------------------------------------------------- footer --- */
.tsa .tsa-footer{border-top:1px solid var(--line,#1E2A3A); padding:18px 20px; margin-top:26px;
  font-size:.8rem; color:var(--muted,#8892A4);
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;}
.tsa .tsa-foot-in{display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center; justify-content:center;}
.tsa .tsa-footer a{color:var(--muted,#8892A4); text-decoration:none;}
/* the shell sizes its own links: Settings loads no core.resp.css, and its
   footer links measured 20px tall against a 24px floor */
.tsa .tsa-foot-in a{display:inline-block; padding:5px 0;}
.tsa .tsa-footer a:hover{color:var(--text,#fff); text-decoration:underline; text-underline-offset:3px;}
.tsa .tsa-footer .protobar{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  margin-top:14px; padding-top:12px; border-top:1px dashed #22314A; gap:4px 14px; font-size:.78rem;}
.tsa .tsa-footer .protobar b{font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  font-size:.72rem; color:var(--muted,#8892A4);}
.tsa .tsa-footer .protobar a[aria-current="page"]{color:var(--accent,#00C896); font-weight:700;}
/* -------------------------------------------------------- logged out -------
   base.html renders the same bar for a visitor, minus the sidebar and the two
   menus. The pages under it are centred, so the bar's contents line up with
   them rather than with the window edge. */
html.tsa[data-shell="guest"] .tsa-layout{grid-template-columns:minmax(0,1fr);}
html.tsa[data-shell="guest"] .tsa-sidebar, html.tsa[data-shell="guest"] .tsa-sidetoggle, html.tsa[data-shell="guest"] .tsa-user{display:none;}
:root.tsa:not([data-shell="guest"]) .tsa-guest{display:none;}
/* --shell and --tsa-gutter are the page's own container width and gutter, so
   the logo sits on the same left edge as the page's content */
html.tsa[data-shell="guest"] .tsa-topbar{
  padding-inline:max(var(--tsa-gutter,1.5rem), calc((100% - var(--shell,1180px)) / 2));}
/* a visitor's three links, as on the front page (Yas, 5 Oct: About, the
   tracker pages, Support, Training and Feedback had none); a menu holds them
   below 900px, where the bar has no room */
.tsa .tsa-gnav{display:flex; gap:26px; margin-left:22px; font-size:.86rem; font-weight:600;}
.tsa .tsa-gnav a{color:var(--muted,#8892A4); text-decoration:none;}
.tsa .tsa-gnav a:hover{color:var(--text,#fff);}
.tsa .tsa-gmenu{display:none;}
.tsa .tsa-guest .tsa-gmenu > .tsa-btn{width:38px; padding:0;}
.tsa .tsa-gmenu > summary{list-style:none;}
.tsa .tsa-gmenu > summary::-webkit-details-marker{display:none;}
/* script off: the <details> opens natively (script on, shell.js uses .is-open) */
.tsa .tsa-gmenu[open] > .tsa-sheet{display:block;}
@media(max-width:900px){
  .tsa .tsa-gnav{display:none;}
  .tsa .tsa-gmenu{display:block;}
}
/* touch: the bar's controls 44px to land on (the 64px bar has the room) */
@media (pointer:coarse){
  .tsa .tsa-btn{height:44px;}
  .tsa .tsa-ibtn{width:44px; height:44px;}
  .tsa .tsa-guest .tsa-gmenu > .tsa-btn{width:44px;}
  .tsa .tsa-gnav a{display:inline-flex; align-items:center; min-height:44px;}
}
.tsa .tsa-vh{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;}
/* --------------------------------------------------------- what's new ------
   Moved here from the dashboard: it lives under the account menu, and the
   account menu is on every page. */
.tsa .tsa-mask{position:fixed; inset:0; z-index:210; background:rgba(4,7,14,.66);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);}
.tsa .tsa-modal{position:fixed; z-index:211; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px, 100% - 2rem); max-height:min(82vh, 680px); display:flex; flex-direction:column;
  background:var(--surface,#111827); border:1px solid var(--line,#1E2A3A);
  border-radius:var(--r-surface,14px); box-shadow:0 34px 90px rgba(0,0,0,.68);
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif; color:var(--text,#fff);}
.tsa .tsa-modal:not([hidden]){animation:tsaPop .3s cubic-bezier(.16,1,.3,1) both;}
.tsa .tsa-mask:not([hidden]){animation:tsaFade .24s ease both;}
@keyframes tsaPop{from{opacity:0; transform:translate(-50%,-46%) scale(.975);}
                  to{opacity:1; transform:translate(-50%,-50%) scale(1);}}
@keyframes tsaFade{from{opacity:0;} to{opacity:1;}}
.tsa .tsa-mhead{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:20px 20px 14px; border-bottom:1px solid var(--line,#1E2A3A);}
.tsa .tsa-mhead h2{margin:0; font-size:1.12rem; font-weight:800; letter-spacing:-.02em;}
.tsa .tsa-mhead p{margin:4px 0 0; color:var(--muted,#8892A4); font-size:.82rem;}
.tsa .tsa-mbody{overflow-y:auto; padding:6px 20px 12px;}
.tsa .tsa-mfoot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 20px; border-top:1px solid var(--line,#1E2A3A);}
.tsa .tsa-mfoot span{color:var(--muted,#8892A4); font-size:.76rem;}
.tsa .tsa-nitem{padding:15px 0; border-top:1px solid var(--line,#1E2A3A);}
.tsa .tsa-nitem:first-child{border-top:0;}
.tsa .tsa-nhead{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.tsa .tsa-kind{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border:1px solid;
  border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;}
.tsa .tsa-k-fix{border-color:rgba(55,138,221,.45); color:#8FC0F0;}
.tsa .tsa-k-new{border-color:rgba(0,200,150,.5); color:var(--accent,#00C896);}
.tsa .tsa-k-upd{border-color:var(--line,#1E2A3A); color:var(--muted,#8892A4);}
.tsa .tsa-k-warn{border-color:rgba(242,181,68,.45); color:var(--warn,#F2B544);}
.tsa .tsa-nnew{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent,#00C896);}
.tsa .tsa-nwhen{margin-left:auto; color:var(--muted,#8892A4); font-size:.76rem;}
.tsa .tsa-nitem h3{margin:9px 0 0; font-size:.94rem; font-weight:800;}
.tsa .tsa-nitem p{margin:5px 0 0; color:#C3CCDA; font-size:.855rem; line-height:1.55;}
/* --------------------------------------------------------- focus, motion --- */
.tsa :where(.tsa-topbar, .tsa-sidebar, .tsa-modal, .tsa-footer) :focus-visible{
  outline:2px solid var(--accent,#00C896); outline-offset:2px;}
@media(prefers-reduced-motion:reduce){
  .tsa .tsa-modal:not([hidden]), .tsa .tsa-mask:not([hidden]){animation:none;}
  .tsa .tsa-sidebar, .tsa .tsa-navlink, .tsa .tsa-btn, .tsa .tsa-ibtn{transition:none !important;}
}
/* ---------------------------------------------------------------- narrow ---
   900px, not base.html's 768: a portrait tablet with a 236px rail left a data
   table 532px to live in. Below this the sidebar is a drawer. */
@media(max-width:900px){
  .tsa .tsa-layout, html.tsa.tsa-side-min .tsa-layout{grid-template-columns:minmax(0,1fr);}
  /* align-self:stretch undoes the desktop rule's `start`: on a fixed box a
     non-stretch alignment shrinks it to its content, so the drawer stopped
     under its five links instead of running to the bottom of the screen */
  .tsa .tsa-sidebar{position:fixed; top:var(--tsa-bar); left:0; bottom:0; height:auto; z-index:56;
    align-self:stretch;
    width:min(var(--tsa-side), 84vw); padding-inline:12px; box-shadow:18px 0 44px rgba(0,0,0,.45);
    transform:translateX(-100%); visibility:hidden;
    transition:transform .24s cubic-bezier(.4,0,.2,1), visibility 0s linear .24s;}
  html.tsa.tsa-side-open .tsa-sidebar{transform:none; visibility:visible;
    transition:transform .24s cubic-bezier(.4,0,.2,1), visibility 0s;}
  html.tsa.tsa-side-min .tsa-navlink{justify-content:flex-start; padding:0 12px;}
  html.tsa.tsa-side-min .tsa-nav-label{position:static; width:auto; height:auto; margin:0; overflow:visible;
    clip:auto;}
  html.tsa.tsa-side-open .tsa-sidebar-backdrop{display:block; position:fixed; inset:var(--tsa-bar) 0 0 0;
    z-index:55; background:rgba(5,8,16,.62);}
}
@media(max-width:700px){
  .tsa .tsa-wordmark{display:none;}
}
/* the labels go, the names stay: every one of these buttons carries an
   aria-label, so the media query cannot take its accessible name with it */
@media(max-width:620px){
  :root.tsa:not([data-shell="guest"]) .tsa-topbar{padding-inline:10px;}
  .tsa .tsa-topbar{gap:6px;}
  .tsa .tsa-user .tsa-lb{display:none;}
  .tsa .tsa-user .tsa-btn{width:38px; padding:0;}
  .tsa .tsa-right{gap:6px;}
  .tsa .tsa-guest .tsa-btn{padding:0 12px;}
  .tsa .tsa-sheet{position:fixed; left:8px; right:8px; top:calc(var(--tsa-bar) + 6px); min-width:0;}
}
/* 16px floor for sentences on a phone, the rule every prototype keeps. These
   only render with a menu or dialog open, which is why no page probe saw them */
@media(max-width:640px){
  .tsa .tsa-hint, .tsa .tsa-mhead p, .tsa .tsa-nitem p{font-size:1rem;}
  .tsa .tsa-hint{max-width:none;}
}
@media(pointer:coarse){
  .tsa .tsa-btn, .tsa .tsa-ibtn{height:44px; min-width:44px;}
  .tsa .tsa-item{min-height:46px;}
  .tsa .tsa-navlink{min-height:48px;}
  .tsa .tsa-footer .tsa-foot-in a, .tsa .tsa-footer .protobar a{display:inline-flex; align-items:center; min-height:44px;}
}
/* --------------------------------------------- production additions --- */
/* Not in the prototypes' shell.css because the prototypes never needed them:
   the server's flash messages on every page, and What's new with nothing in
   it. Appended to static/tsa/shell.css by land_foundation.py, scoped the same
   way. */
/* flashes: the auth prototype's alerts (app-shell.template.html), verbatim -
   except the danger icon, which named a --danger token core.css never
   defines; --neg is the token that exists */
.tsa .alerts{display:grid; gap:10px; margin:0 0 22px;}
.tsa .alert{display:flex; align-items:flex-start; gap:11px; padding:13px 16px;
  border-radius:var(--r-control); font-size:.87rem; font-weight:600;
  border:1px solid; background:var(--surface);}
.tsa .alert i{font-size:1rem; line-height:1.4; flex:none;}
.tsa .alert-info{border-color:rgba(55,138,221,.45); color:#BBD6F5;}
.tsa .alert-info i{color:var(--info);}
.tsa .alert-success{border-color:rgba(0,200,150,.45); color:#B6EBDB;}
.tsa .alert-success i{color:var(--accent);}
.tsa .alert-warning{border-color:rgba(242,181,68,.45); color:#F1DDB4;}
.tsa .alert-warning i{color:var(--warn);}
.tsa .alert-danger{border-color:rgba(255,107,107,.45); color:#F6C9C9;}
.tsa .alert-danger i{color:var(--neg);}
/* What's new with no rows */
.tsa .tsa-nempty{color:var(--muted); font-size:.9rem; padding:6px 0;}
/* Skip to content: the first thing Tab reaches, on screen only while it has
   focus. The bar (and on signed-in pages the sidebar) comes before every
   page's content; neither the old design nor the shell had a way past it.
   From the auth prototype's .skip. */
.tsa .tsa-skip{position:absolute; left:-9999px; top:0; z-index:200; padding:12px 20px;
  background:var(--accent); color:var(--accent-ink); font-weight:700;
  border-radius:0 0 var(--r-control) 0;}
.tsa .tsa-skip:focus{left:0;}
.tsa .tsa-skip:hover{text-decoration:none;}
/* main takes focus from the link (shell.js gives it tabindex -1 for that
   moment, so a screen reader starts reading there); a ring around the whole
   page would only be noise */
.tsa main#main:focus{outline:none;}
/* anything scrolled to - the skip link's target, a policy's section - lands
   below the sticky bar, not under it */
html.tsa{scroll-padding-top:calc(var(--tsa-bar, 64px) + 12px);}
/* The bar's small labels - "Soon", the unread count, an update's kind -
   were 10.2px and 10.9px: under the 11px floor for text that carries
   meaning (impeccable detect, undersized-ui-text). */
.tsa .tsa-chip, .tsa .tsa-count, .tsa .tsa-kind{font-size:.6875rem;}
/* shell.css gives footer links a 44px height on touch, not a width: "Terms"
   measured 40px across */
@media(pointer:coarse){
  .tsa .tsa-footer .tsa-foot-in a{min-width:44px; justify-content:center;}
}
/* A visitor's page is centred, and the bar lines its logo up with it:
   shell.css pads the guest bar to max(gutter, (100% - --shell) / 2). The
   prototypes' logged-out pages brought their own container; base.html's main
   column gives every page that one by default, so content starts on the logo's
   edge at every width. A page can set --shell / --tsa-gutter to change both. */
html.tsa[data-shell="guest"] main.wrap{
  max-width:calc(var(--shell,1180px) + 2 * var(--tsa-gutter,1.5rem));
  margin-inline:auto; padding-inline:var(--tsa-gutter,1.5rem); width:100%;}