/* =============================================================================
 *  WX Client area - the NAVIGATION SHELL's own styles (unit X0, plan M.3).
 *
 *  index.html carries the page's styles inline; this file carries only what
 *  the six-group shell added, so the shell can be read, reviewed and changed
 *  without scrolling through a thousand lines of page CSS.
 *
 *  TOKENS ONLY (house rule, shared static/theme.css): no literal colour lives
 *  here except the white-on-navy tints the side drawer has always used for
 *  its own text, which the drawer defines the same way a few lines above in
 *  index.html - the drawer is a fixed dark surface and has no token of its
 *  own yet.
 * ========================================================================== */

/* SIGN-IN SECURITY (static/portal/mfa.js): the code prompt, the set-up
   dialog, the banner and the panel. Theme tokens, except the white behind
   the QR: a scanner needs dark modules on a light ground in both themes,
   which is also why this block sits above the pages that are held to
   tokens only. */
.mfa-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  margin:0 0 var(--sp-3,12px);padding:10px 14px;border:1px solid var(--st-warn);border-left-width:4px;
  border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:12px;line-height:1.5}
.mfa-banner-acts{display:flex;gap:8px}
.mfa-dlg .mfa-code{font-family:var(--mono);font-size:18px;letter-spacing:4px;width:10ch}
.mfa-dlg .mfa-lbl{font-size:11px;color:var(--text-mid)}
.mfa-dlg .mfa-qr{align-self:center;background:#fff;padding:8px;border:1px solid var(--border);border-radius:var(--radius)}
.mfa-dlg .mfa-qr svg{display:block;width:180px;height:180px}
.mfa-dlg .mfa-key{font-family:var(--mono);overflow-wrap:anywhere;word-break:break-all;color:var(--text)}
.mfa-dlg .mfa-codes{columns:2;font-family:var(--mono);font-size:12px;margin:0;padding-left:22px}
.mfa-dlg .mfa-rec summary{cursor:pointer;font-size:11px;color:var(--text-mid)}
.mfa-dlg .mfa-acts{display:flex;flex-wrap:wrap;gap:8px}
.mfa-dlg h4{margin:8px 0 0;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mid)}
.mfa-dlg .modal-body{overflow-y:auto}
.mfa-dlg .mfa-people{width:100%;font-size:12px;border-collapse:collapse}
.mfa-dlg .mfa-people td{padding:4px 6px;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.mfa-dlg .mfa-chk{display:flex;gap:8px;align-items:center;font-size:12px}
@media (max-width:480px){.mfa-dlg .mfa-codes{columns:1}}

/* ---------------------------------------------------------- the side nav -- */
/* A page that is coming in a later release still has a nav item, so the
   shape of the area stops changing (M.3). The item says so quietly: a
   reader must be able to tell "not built yet" from "empty right now", and
   colour alone would not say it. */
.sidenav .sn-soon{
  margin-left:6px;padding:0 5px;border-radius:8px;
  font-size:9px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.22)}
/* A group with ONE entry draws no heading (unit C5): the entry stands at
   heading level instead, so "SITES" is not printed over "Sites". */
.sidenav .sn-solo .sn-tab{font-weight:600}

/* ---------------------------------------------------------- Blueprints -- */
/* One section per blueprint (blueprints.js, unit C5): the name, what it
   runs, and the sites that follow it. Read-only, so no control column. */
#page-blueprints .bp-family{
  border-top:1px solid var(--border);padding:var(--sp-3) 0;margin-top:var(--sp-3)}
#page-blueprints .bp-family h3{margin:0 0 var(--sp-2);font-size:var(--fs-3)}
#page-blueprints .bp-sub{margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-1);
  color:var(--text-dim);font-weight:600}
#page-blueprints .bp-sites{margin:0;padding-left:1.2em}
#page-blueprints .bp-apps th[scope="row"]{font-weight:400}

/* ------------------------------------------------------- the shell bar --- */
/* Above every page: where you are, which site is in hand, the site's own
   tabs when one is open, and the question mark for THIS page. It sits under
   the masthead and stays there while the page scrolls, because the site you
   are working on is the thing you most need not to lose track of. */
.shellbar{
  position:sticky;top:52px;z-index:var(--z-tabbar);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  margin:0 0 14px;padding:8px 12px 0}
.shellbar[hidden]{display:none}
.shellbar .shellbar-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;padding-bottom:8px}
.shellbar .crumb{
  font-size:var(--fs-1);font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--navy);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shellbar .crumb-sep{color:var(--text-dim);margin:0 6px;font-weight:400}
.shellbar .shellbar-right{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}

/* THE STICKY SITE. Whatever was last opened - a row, a station on the map, a
   printed label - is named here and is one click from being opened again. */
.site-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface3);border:1px solid var(--border);border-radius:12px;
  padding:2px 4px 2px 9px;max-width:min(46vw,320px)}
.site-chip .site-chip-lbl{
  font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-dim)}
.site-chip .site-chip-name{
  font-family:var(--mono);font-size:var(--fs-2);color:var(--text-bright);
  background:transparent;border:0;padding:0;cursor:pointer;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-chip .site-chip-name:hover{text-decoration:underline}
.site-chip .site-chip-x{
  background:transparent;border:0;cursor:pointer;line-height:1;
  color:var(--text-dim);font-size:var(--fs-3);padding:0 4px}
.site-chip .site-chip-x:hover{color:var(--text-bright)}

/* THE QUESTION MARK. One per page (M.3), carrying the key of the page it is
   on; unit K2 turns it into the Help page for that screen. */
.help-btn{
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--text-dim);
  font-family:var(--sans);font-size:var(--fs-2);font-weight:600;line-height:1;
  cursor:pointer;flex:0 0 auto}
.help-btn:hover{border-color:var(--border-h);color:var(--navy);background:var(--surface3)}

/* WHY YOU ARE NOT WHERE YOU ASKED TO BE. A link into a part of the area this
   sign-in does not have lands on the reader's own home page - and says so
   here, because being moved without a word reads as a broken link. Cleared by
   the next navigation. */
.shellbar .shellbar-note{
  font-size:var(--fs-2);color:var(--text-mid);
  border-top:1px solid var(--border);padding:8px 0 8px}

/* ------------------------------------------------------ the site's tabs -- */
/* One site, four answers, in one place (unit C4): Status, Software and
   settings, LinkMap, Recovery. The strip scrolls sideways rather than
   wrapping, so the page below never jumps by a row when a name is long. The
   words are written as the side nav writes them, not in capitals. */
.site-tabs{display:flex;gap:2px;overflow-x:auto;border-top:1px solid var(--border)}
.site-tab{
  font-family:var(--sans);font-size:var(--fs-2);font-weight:600;
  white-space:nowrap;cursor:pointer;
  padding:9px 14px;border:0;border-bottom:2px solid transparent;
  background:transparent;color:var(--text-dim)}
.site-tab:hover{color:var(--text-mid)}
.site-tab.active{color:var(--navy);border-bottom-color:var(--navy)}
.site-tab:focus-visible{outline:2px solid var(--wx);outline-offset:-2px}

/* ------------------------------------------------- pages not built yet --- */
/* Every entry opens something. A page whose function is still being built
   says what it will answer and links to where that job is done today
   (placeholders.js), so no click in this area ends on nothing. */
.panel.placeholder .panel-header .dim{
  font-size:var(--fs-1);letter-spacing:.4px;text-transform:none}
.panel.placeholder .panel-body p{margin:0 0 var(--sp-2)}
.panel.placeholder .panel-body p:last-child{margin-bottom:0}

/* --------------------------------------------------------- the Help page -- */
/* The Help entry (plan K.4, unit K2). The drawing itself - the version line,
   the search, the rail, the page - is the shared wxhelp.js/.css, the same
   pair the edge configurator's Help panel uses; this is only how that
   drawing sits on THIS page: in a panel like every other page, the rail
   pinned under the shell bar while a long page scrolls, and a landed-on
   section kept clear of the bar. */
#page-help .wxhelp{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--elev-1);padding:var(--sp-4)}
#page-help .wxhelp-body{grid-template-columns:240px minmax(0,1fr);gap:var(--sp-5)}
#page-help .wxhelp-rail{position:sticky;top:116px;max-height:calc(100vh - 132px);overflow:auto}
#page-help .wxhelp-content section{scroll-margin-top:124px}

/* ------------------------------------------------------- the Connections -- */
/* One card per connection (integrations.js, unit C0), a panel inside the
   page's panel: the header carries the name, the type word and the state
   pill; the body is the house .kvs. The Sites checklist is a column of
   labelled boxes inside the edit gate. Tokens only. */
#page-connections .int-card{margin-bottom:var(--sp-4)}
#page-connections .int-card .panel-header .dim{
  font-size:var(--fs-1);letter-spacing:.4px;text-transform:none;margin:0 var(--sp-2)}
#page-connections .int-card .panel-header .btn{margin-left:auto}
#page-connections .int-scope-edit{display:flex;flex-direction:column;gap:4px;margin-top:4px}
#page-connections .int-site{display:flex;align-items:center;gap:6px;font-size:var(--fs-2)}
#page-connections .int-scope-edit .edit-tools{display:flex;gap:8px;margin-top:6px}
#page-connections .int-h4{margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-1);
  letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim)}
#page-connections .int-days td,#page-connections .int-sessions td{white-space:nowrap}
/* The card's label/value rows (UI-A2, Chrome review 24 Sep task 03 stall 4/5):
   the house .kvs is an auto-fit grid, so a long value - the server
   certificate's fingerprint - ran into the next cell and covered its label.
   Here each label sits on its own line above its value, both spanning the
   row, and a value wraps inside its cell. Tokens only; both themes follow. */
#page-connections .kvs .k{grid-column:1/-1;color:var(--text-dim);font-size:var(--fs-1);
  margin-top:var(--sp-2)}
#page-connections .kvs .v{grid-column:1/-1;min-width:0;overflow-wrap:anywhere;word-break:break-word}
#page-connections .kvs .v .int-fp{font-family:var(--mono);overflow-wrap:anywhere}

/* ------------------------------------------------------------ the Hydro -- */
/* The Hydro entry (hydro.js, unit K3): the conversations down the left, the
   conversation and the ask box on the right, and under every answer the pages
   Hydro read as a row of the house .chip - each chip carries its words (the
   page and how long ago), never a colour alone. Tokens only. */
#page-hydro .hydro-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--sp-5);
  margin-top:var(--sp-3)}
#page-hydro .hydro-h{margin:0 0 var(--sp-2);font-size:var(--fs-1);letter-spacing:.6px;
  text-transform:uppercase;color:var(--text-dim)}
#page-hydro .hydro-list,#page-hydro .hydro-turns,#page-hydro .hydro-ev{
  list-style:none;margin:0;padding:0}
#page-hydro .hydro-item{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--sp-2);
  padding:6px 0;border-bottom:1px solid var(--border)}
#page-hydro .hydro-item.on>.link{font-weight:600}
#page-hydro .hydro-item-acts{margin-left:auto;display:inline-flex;gap:4px}
#page-hydro .hydro-turn{padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
#page-hydro .hydro-q{margin:0 0 var(--sp-2);white-space:normal}
#page-hydro .hydro-a p{margin:4px 0 var(--sp-2);line-height:1.6;max-width:70ch}
#page-hydro .hydro-ref{font-size:var(--fs-1);padding:0 2px}
#page-hydro .hydro-ev-lead{margin-bottom:4px}
#page-hydro .hydro-ev{display:flex;flex-wrap:wrap;gap:6px}
#page-hydro .hydro-chip{text-decoration:none;white-space:normal;max-width:100%}
#page-hydro a.hydro-chip:hover{border-color:var(--border-h);color:var(--text-bright)}
#page-hydro .hydro-ref-n{font-weight:600}
#page-hydro .hydro-ask{margin-top:var(--sp-3)}
#page-hydro .hydro-ask textarea{width:100%;resize:vertical}
#page-hydro .hydro-owner{margin:var(--sp-2) 0;padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2)}
/* Hydro's proposals (hydro-drafts.js, unit K4): one bordered card per
   proposal under its answer - the title, Hydro's note, the pages behind it,
   the state and expiry in words, and the one way on. A card that is over
   (used, dismissed, expired) is quieter; its word still says why. Every
   long word wraps, so a card fits a 360 px phone without scrolling sideways. */
#page-hydro .hydro-drafts{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:flex;
  flex-direction:column;gap:var(--sp-2);min-width:0}
#page-hydro .hydro-draft{padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface2);min-width:0;overflow-wrap:anywhere}
#page-hydro .hydro-draft.over{background:transparent;color:var(--text-mid)}
#page-hydro .hydro-draft-h{margin:0 0 var(--sp-1);font-size:var(--fs-2);color:var(--text-bright)}
#page-hydro .hydro-draft-note,#page-hydro .hydro-draft-st{margin:4px 0;max-width:70ch}
#page-hydro .hydro-draft-acts{display:flex;flex-wrap:wrap;gap:6px;margin:var(--sp-2) 0 4px}
/* The same line on the Config tab and the Desired state page. */
#page-config .config-draft,#page-desired-state .dss-draft .msg{overflow-wrap:anywhere}
#page-desired-state .dss-draft{margin:var(--sp-3) 0;padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border);border-radius:var(--radius);min-width:0;overflow-wrap:anywhere}
/* The answer said once to a screen reader: in the page, never on screen. */
#page-hydro .hydro-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------- narrow ---- */
/* Read-only on a phone is in scope for release one (M.6 decision M-D3), so
   the shell has to fold: the breadcrumb and the chip share a line, and the
   site's tabs keep their own. The Help page's rail comes off the side and
   sits above the page. */
@media (max-width:640px){
  .shellbar{margin-bottom:10px;padding:8px 10px 0}
  .shellbar .crumb{font-size:10px;letter-spacing:.8px}
  .shellbar .shellbar-note{font-size:var(--fs-1)}
  .site-chip{max-width:60vw}
  .site-tab{padding:9px 10px}
  #page-help .wxhelp{padding:var(--sp-3)}
  #page-help .wxhelp-body{grid-template-columns:1fr;gap:var(--sp-3)}
  #page-help .wxhelp-rail{position:static;max-height:none}
  #page-hydro .hydro-grid{grid-template-columns:1fr;gap:var(--sp-3)}
  #page-hydro .hydro-main{order:-1}
}

/* ===========================================================================
 *  READ THIS ON A PHONE  (unit X3, plan M.6 decision M-D3)
 *
 *  Release one lets a phone READ the client area - Overview, Sites and Help
 *  are laid out for a 390 px screen - and does not let it approve, apply,
 *  restore or sign anything. Those acts want a screen where the whole of
 *  what is about to change can be seen at once.
 *
 *  THE SHARED PRIMITIVES DO MOST OF IT. theme.css owns .wx-desktop-only
 *  (display:none under 600px), .wx-phone-note (the one sentence that says
 *  where the buttons went) and .wx-phone-stack, and this file uses the same
 *  600px line so the two can never disagree about what a phone is. A new act
 *  anywhere in the client area carries .wx-desktop-only.
 *
 *  WHY display:none EVERY TIME: visibility:hidden and opacity:0 leave a
 *  control in the reading order, so a keyboard on a phone can still land on
 *  it and fire it. Only display:none takes it off the page for everybody.
 *
 *  THE LIST BELOW is the acts drawn before the class existed, named by the
 *  attribute each one really carries: the Edit gate on every page that has
 *  one and the box of tools it opens; the acts on a configuration snapshot
 *  (keep, name, restore) while View and Compare stay; starting or undoing a
 *  software update, and confirming or stopping one (Update, Cancel update);
 *  renaming a site; setting a site's location, which the fleet map marks
 *  with data-mact and the site page with data-act; and, on a site's Comms
 *  map and Backups tabs, acknowledging an alarm and keeping a revision -
 *  both change what the server holds, so both are desk work.
 *  tests/test_portal_phone_width.py renders those screens and fails the
 *  build when any act is still reachable at 390 px.
 * ======================================================================== */
@media (max-width:600px){
  #configEdit,#configTools,
  [id$="EditBtn"],[id$="EditTools"],
  .edit-tools,
  [data-act="snap-pin"],[data-act="snap-label"],[data-act="snap-restore"],
  [data-act="restore"],[data-act="restore-go"],
  [data-act="distribute-preview"],[data-act="update-preview"],
  [data-act="plan"],[data-act="plan-one"],[data-act="plan-flag"],
  [data-act="name-edit"],[data-act="name-save"],
  [data-act="loc-edit"],[data-act="loc-save"],
  [data-mact="loc-edit"],[data-mact="loc-save"],
  [data-act="apply"],[data-act="cancel"],
  [data-act="ack"],[data-act="pin"]{display:none!important}

  /* Sites, Overview and Help at 390 px: nothing on these three pages may push
     the PAGE sideways, because a page that scrolls sideways hides its right
     edge and the reader never learns there was one. A wide table keeps its
     own .table-scroll box (theme.css: overflow-x:auto), which scrolls inside
     itself, so its right-hand columns stay one swipe away instead of being
     cut off. */
  #page-fleet,#page-overview,#page-help{overflow-x:hidden}
  #page-fleet .panel-header,#page-overview .panel-header{flex-wrap:wrap;row-gap:6px}
  #page-overview .metric-grid{grid-template-columns:repeat(2,1fr)}
  #page-fleet .fleet-kpis .metric-grid{grid-template-columns:repeat(2,1fr)}
}

/* --------------------------------------------------------- the Changes page */
/* Estate, Changes (unit C3, static/portal/changes.js): a sentence, one row per
   site that needs something, two tabs, the up-to-date line and the automatic
   updates box. Every state is a word in a .pill, never a colour alone. */
#page-changes{overflow-x:hidden}
#page-changes .changes-lead{font-size:var(--fs-4);font-weight:600;color:var(--text-bright);margin:0 0 var(--sp-3)}
#page-changes .changes-rows,#page-changes .changes-items,#page-changes .changes-causes{list-style:none;margin:0 0 var(--sp-4);padding:0}
#page-changes .changes-row{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-2);background:var(--surface)}
#page-changes .changes-head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
#page-changes .changes-name{font-weight:600;color:var(--text-bright);overflow-wrap:anywhere}
#page-changes .changes-reason{margin:var(--sp-1) 0}
#page-changes .changes-acts{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-1) 0}
#page-changes details summary{cursor:pointer;color:var(--text-dim);font-size:var(--fs-1)}
#page-changes .changes-causes li,#page-changes .changes-items li{margin:var(--sp-1) 0;overflow-wrap:anywhere}
#page-changes .changes-tabs{display:flex;gap:var(--sp-2);margin:0 0 var(--sp-2)}
#page-changes .changes-uptodate{color:var(--text-mid);margin:var(--sp-3) 0}
#page-changes .changes-autobox{border-top:1px solid var(--border);padding-top:var(--sp-3);margin-top:var(--sp-3)}
#page-changes .changes-autobox h3{font-size:var(--fs-3);margin:0 0 var(--sp-2)}
#page-changes .changes-ver{font-weight:600;margin:var(--sp-2) 0 0}

/* ------------------------- a site's Software and settings tab, and Recovery */
/* Unit C4 (static/portal/siteapps.js, static/portal/recovery.js): one table
   per site, and every site's backups and restore tests. Every state is a word
   in a .pill; a wide table scrolls inside its own .table-scroll box, never
   the page. */
#page-site-software,#page-recovery{overflow-x:hidden}
#page-site-software .siteapps-answer{margin:0 0 var(--sp-3)}
#page-site-software .siteapps-answer .siteapps-acts{display:flex;gap:var(--sp-2);flex-wrap:wrap}
#page-site-software td.siteapps-acts .btn{margin:2px 4px 2px 0}
#page-site-software .siteapps-h{font-size:var(--fs-3);margin:var(--sp-3) 0 var(--sp-1)}
#page-site-software .siteapps-items,#page-recovery .recovery-tests{list-style:none;margin:var(--sp-2) 0;padding:0}
#page-site-software .siteapps-items li,#page-recovery .recovery-tests li{margin:var(--sp-1) 0;overflow-wrap:anywhere}
#page-site-software .siteapps-more{margin-top:var(--sp-3)}
#page-recovery .recovery-lead{color:var(--text-mid);margin:0 0 var(--sp-3)}
#page-recovery .recovery-site{border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-3);background:var(--surface)}
#page-recovery .recovery-name{font-size:var(--fs-3);margin:0 0 var(--sp-1);overflow-wrap:anywhere}
#page-recovery .recovery-testline{color:var(--text-mid)}
#page-recovery td.recovery-acts .btn{margin:2px 4px 2px 0}
#page-recovery .recovery-pick{max-width:360px}
/* A backup's row header is a time and an age, read as written - not shouted
   in capitals like a column heading, and the two never run together. */
#page-recovery .recovery-table th[scope=row]{text-transform:none;letter-spacing:normal;font-weight:400;
  color:var(--text-bright);overflow-wrap:anywhere}
#page-recovery .recovery-table th[scope=row] .recovery-when{white-space:nowrap}
#page-recovery .recovery-gate .btn{margin-right:var(--sp-2)}

/* ---------------------------------------------------------------- Support */
/* Support requests (6 Oct 2026, static/portal/support.js): the account's
   requests and one request's thread. Every status and urgency is a word in a
   .pill; who said each thing is a word too, the border only repeats it. */
#page-support{overflow-x:hidden}
#page-support .sup-lead{color:var(--text-mid);margin:0 0 var(--sp-3)}
#page-support .sup-tools{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin:0 0 var(--sp-3)}
#page-support .sup-filter{display:flex;gap:var(--sp-2);align-items:center;margin:0}
#page-support .sup-filter select{width:auto}
#page-support .sup-empty{color:var(--text-mid);margin:var(--sp-2) 0}
#page-support .sup-hint{color:var(--text-mid);margin:var(--sp-1) 0 var(--sp-2)}
#page-support .sup-upload label,#page-support .sup-attach label,#page-support .sup-reply label{font-weight:600}
/* A request's row header is its number and the person's own subject: read
   as written, not shouted like a column heading. */
#page-support .sup-list th[scope=row]{text-transform:none;letter-spacing:normal;font-weight:400;
  color:var(--text-bright);overflow-wrap:anywhere}
#page-support .sup-list th[scope=row] a{font-weight:600}
#page-support .sup-upload,#page-support .sup-attach,#page-support .sup-reply{
  border-top:1px solid var(--border);margin-top:var(--sp-3);padding-top:var(--sp-3)}
#page-support .sup-upload input[type=file],#page-support .sup-attach input[type=file]{width:auto;max-width:100%}
#page-support .sup-title{font-size:var(--fs-4);margin:var(--sp-2) 0;overflow-wrap:anywhere}
#page-support .sup-meta{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-1) var(--sp-3);margin:0 0 var(--sp-3)}
#page-support .sup-meta .k{color:var(--text-dim)}
#page-support .sup-meta .v{overflow-wrap:anywhere}
#page-support .sup-diag{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-3)}
#page-support .sup-diag ul,#page-support .sup-files{margin:var(--sp-1) 0;padding-left:var(--sp-4)}
#page-support .sup-msgs{list-style:none;margin:0;padding:0}
#page-support .sup-msg{border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius);
  padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-2);background:var(--surface)}
#page-support .sup-from-wx{border-left-color:var(--navy)}
#page-support .sup-msg-body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:var(--sp-1)}
#page-support .sup-reply textarea{width:100%}
#page-support h3{font-size:var(--fs-3);margin:var(--sp-3) 0 var(--sp-1)}

/* ------------------------------------------- Chrome review, 7 Oct 2026 --- */
/* CR-M-011: a page, a section or a landed-on anchor is scrolled into view
   BELOW the sticky masthead and shell bar, never under them. */
.tab-page,.tab-page section,.tab-page h2,.tab-page h3,#siteDetail{scroll-margin-top:140px}

/* CR-L-001: the client area's version, small and quiet, under every page. */
.ca-version{margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-1);color:var(--text-dim);text-align:center}

/* CR-L-010: the Sites counts lay out by width. A tile alone on the last row
   grows to fill it rather than sitting beside an empty slot. */
#page-fleet .fleet-kpis .metric-grid{display:flex;flex-wrap:wrap}
#page-fleet .fleet-kpis .metric-grid .metric{flex:1 1 150px}

/* The Help index on a phone (CR-L-011): a "Help pages" button above the
   article opens and closes the index; on a wider screen the index is always
   beside the article and the button is not drawn. */
#page-help .help-rail-toggle{display:none}

/* CR-M-045 / CR-L-010: below tablet width the shell bar keeps only what a
   phone needs. The site chip and Report a problem leave it (the site is in
   the breadcrumb; Report a problem is on the Support page), and a site's
   four tabs sit two by two at equal width, so no tab is ever left alone on a
   second row. */
@media (max-width:767px){
  .shellbar #navSiteChip,.shellbar #navReport{display:none}
  .shellbar .site-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow-x:visible}
  .shellbar .site-tab{white-space:normal;text-align:center;padding:9px 6px}
  #page-help .help-rail-toggle{display:block;width:100%;text-align:left;margin:0 0 var(--sp-2)}
  #page-help .wxhelp-rail.is-folded{display:none}
}