/* ============================================================================
   hall.css — Shared Skills
   A working district: sky, a street of small premises, the road below.
   Manila, ink, machine blue and amber carry the page.

   One piece of decoration (the district), everything else disciplined.
   Covers both the marketing/dashboard pages and every class room.php needs.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Manila, ink, machine blue and amber.

   The frame is a working district: a street of one-person businesses, each
   with its own trade, sitting next to each other the way small firms actually
   do. Sole traders, consultancies, workshops, practices.

   The palette comes off a job sheet rather than a brochure — kraft paper, a
   blue you would find on a machine housing, and the amber used on signage
   where something is live and running. It carries money without irony, which
   the previous theme could not: "credits" on a campus read as coursework,
   while credits on an account is just what a balance is called.
   ------------------------------------------------------------------------ */

:root {
  /* palette */
  --paper:      #F4F1E9;   /* page — manila, kraft, a filed job sheet */
  --card:       #FFFFFF;
  --rule:       #DED7C7;   /* borders — the printed rule on a form */
  --machine:    #1D5A73;   /* primary — machine housing blue */
  --machine-dk: #12455A;
  --iron:       #1B2A30;   /* deep — cast iron, headers */
  --iron-deep:  #101A1F;
  --steel:      #90A0A6;   /* distant structures, muted trim */
  --oxide:      #A5432F;   /* live / in session / danger — rust, stop */
  --amber:      #D68A1E;   /* signage. running meter, credits, attention */
  --green:      #3E7A4E;   /* open for business, positive */
  --ink:        #1B2A30;
  --slate:      #64757A;
  --light:      #E3EAEC;

  /* type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --meter:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r:  8px;    /* radius — squarer still. stamped steel, not stationery. */
  --r-s: 5px;
  --shadow: 0 1px 2px rgba(27,42,48,.06), 0 8px 22px -12px rgba(27,42,48,.22);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 72px; position: relative; }
.wrap.wide { max-width: 1280px; }

/* ---------------------------------------------------------------------------
   The district

   Sits behind every masthead. Three layers: a working sky, a street of small
   premises, and the road below it.

   These are the businesses on the platform, drawn as what they are — a
   workshop with a north-light roof, a stack, a row of shopfronts under
   awnings, a water tower, a warehouse, a couple of small office blocks. Sole
   traders sitting next to each other the way small firms actually do.

   The windows are lit because somebody is working behind each one. That is
   the entire premise: the trade happens through the screen, and the street
   itself is somewhere nobody has to travel to.
   ------------------------------------------------------------------------ */

.district {
  position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 300px;
  margin-left: 50%; transform: translateX(-50%);
  max-width: 100vw;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, #DDE4E5 0%, #E8EAE4 40%, #F0EDE3 76%, var(--paper) 100%);
}

.district .skyline {
  position: absolute; bottom: 72px; left: 0;
  width: 100%; height: 165px;
}
.district .skyline .structure > * { fill: var(--steel); opacity: .42; }
.district .skyline .sign { fill: var(--oxide); opacity: .38; }
.district .skyline .lit  { fill: var(--amber); opacity: .58; }

/* The road. Asphalt, mostly implied. */
.district .street {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 88px;
  background: linear-gradient(180deg, rgba(27,42,48,.16) 0%, rgba(27,42,48,.07) 46%, rgba(244,241,233,0) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .district .skyline .lit { animation: onShift 8s ease-in-out infinite; }
  .district .skyline .lit:nth-child(3n)   { animation-delay: -2.6s; }
  .district .skyline .lit:nth-child(4n+1) { animation-delay: -5.1s; }
}
@keyframes onShift {
  0%, 100% { opacity: .58; }
  50%      { opacity: .32; }
}

/* ---------------------------------------------------------------------------
   Masthead + nav
   ------------------------------------------------------------------------ */

.masthead {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 26px 0 18px;
}

.wordmark {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 30px; font-weight: 600; letter-spacing: -.022em;
  color: var(--iron); text-decoration: none; line-height: 1;
}
.wordmark span { color: var(--machine); }
.wordmark em { font-style: italic; font-weight: 500; }

.nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14.5px; }
.nav a { color: var(--iron); text-decoration: none; font-weight: 450; }
.nav a:hover { color: var(--iron-deep); }
.nav .quietlink { color: var(--slate); font-weight: 350; }
.nav .who { font-weight: 550; }

.nav .credits {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--rule);
  padding: 5px 12px 5px 9px; border-radius: 999px;
  font-family: var(--meter); font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow);
}
.nav .credits .coin {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #FFE08A, var(--amber));
  box-shadow: 0 0 0 2px rgba(255,190,61,.22);
}

/* ---------------------------------------------------------------------------
   Type
   ------------------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-optical-sizing: auto;
  color: var(--iron);
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0 0 12px;
  font-weight: 600;
}
h1 { font-size: clamp(34px, 5.2vw, 56px); }
h2 { font-size: clamp(24px, 3.2vw, 32px); }
h3 { font-size: 20px; }
h4 { font-size: 15px; letter-spacing: .01em; }

p { margin: 0 0 14px; }
a { color: var(--iron-deep); }

.eyebrow {
  display: block;
  font-family: var(--meter); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 10px;
}
.sub { color: var(--slate); font-size: 15.5px; }
.help { color: var(--slate); font-size: 13px; }
.fineprint { color: var(--slate); font-size: 12.5px; line-height: 1.65; }

/* ---------------------------------------------------------------------------
   Surfaces
   ------------------------------------------------------------------------ */

.panel, .card {
  position: relative; z-index: 1;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; }

.grid { display: grid; gap: 18px; }
.grid.two   { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.split { grid-template-columns: 1.6fr .9fr; align-items: start; }

.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 14px; }

section { margin-top: 40px; position: relative; z-index: 1; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }

/* ---------------------------------------------------------------------------
   Buttons + fields
   ------------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--machine); color: #fff;
  border: 1px solid transparent; border-radius: 999px;
  padding: 11px 22px;
  font-family: var(--body); font-size: 15px; font-weight: 550;
  cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background .16s ease, transform .16s ease;
}
.btn:hover { background: var(--iron-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.small { padding: 7px 16px; font-size: 14px; }
.btn.big   { padding: 14px 30px; font-size: 16.5px; }
.btn.quiet { background: var(--card); color: var(--iron); border-color: var(--rule); }
.btn.quiet:hover { background: #F7F1E5; }
.btn.danger { background: var(--oxide); }
.btn.danger:hover { background: #E8465A; }
.btn.sun { background: var(--amber); color: #4A3208; }
.btn.sun:hover { background: #F0AE2A; }
.btn.wide { width: 100%; }

.field { display: block; margin-bottom: 15px; }
.field > span {
  display: block; font-size: 13px; font-weight: 550;
  color: var(--iron); margin-bottom: 6px;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
  width: 100%; padding: 11px 13px;
  background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r-s);
  font-family: var(--body); font-size: 15px; color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--machine); outline-offset: 1px; border-color: transparent;
}
:focus-visible { outline: 2px solid var(--machine); outline-offset: 2px; }

.checkline { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 14px; }
.checkline input { margin-top: 3px; flex: none; }

.flash {
  border-radius: var(--r-s); padding: 12px 16px; margin-bottom: 16px;
  font-size: 14.5px; border: 1px solid;
}
.flash.note { background: #E9F7F6; border-color: #B7E5E2; color: #08575A; }
.flash.warn { background: #FFF4E0; border-color: #FFDFA3; color: #6B4A05; }
.flash.bad  { background: #FFECEF; border-color: #FFC7CF; color: #8E1F2F; }

/* ---------------------------------------------------------------------------
   Availability — the little sun
   ------------------------------------------------------------------------ */

.avail {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--slate);
}
.avail i { width: 9px; height: 9px; border-radius: 50%; background: var(--slate); flex: none; }
.avail.ready { color: #B4442F; }
.avail.ready i {
  background: radial-gradient(circle at 35% 32%, #FFE08A, var(--amber));
  box-shadow: 0 0 0 0 rgba(255,190,61,.6);
  animation: warm 2.4s ease-out infinite;
}
.avail.open { color: var(--green); }
.avail.open i { background: var(--green); }

@keyframes warm {
  0%   { box-shadow: 0 0 0 0 rgba(255,190,61,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,190,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,190,61,0); }
}
@media (prefers-reduced-motion: reduce) {
  .avail.ready i { animation: none; }
  * { scroll-behavior: auto !important; }
}

.stars { font-size: 13px; color: var(--iron); font-weight: 500; }
.stars b { color: var(--amber); }
.stars em { font-style: normal; color: var(--slate); font-weight: 400; }
.stars.new { color: var(--slate); font-weight: 400; }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: #EFF7F6; border: 1px solid #D6EBE8;
  color: #0A6E68; font-size: 12px; font-weight: 500; margin: 0 5px 5px 0;
}
.tag.warm { background: #FFF3E2; border-color: #FFE0B4; color: #7A5210; }

/* ---------------------------------------------------------------------------
   Sharer cards (showcase)
   ------------------------------------------------------------------------ */

.sharers { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 18px; }

.sharerCard {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sharerCard:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -16px rgba(10,85,96,.34); }

.sharerCard .face {
  height: 132px;
  background: linear-gradient(150deg, #CFF0F5, #FFE6C4 68%, #FFD9DC);
  position: relative;
  display: grid; place-items: center;
}
.sharerCard .face img { width: 100%; height: 100%; object-fit: cover; }
.sharerCard .face .initial {
  font-family: var(--display); font-size: 44px; font-weight: 500;
  color: rgba(10,85,96,.42);
}
.sharerCard .face .flag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(255,255,255,.92); border-radius: 999px; padding: 4px 10px;
  backdrop-filter: blur(4px);
}

.sharerCard .meat { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.sharerCard h3 { font-size: 18px; margin-bottom: 3px; }
.sharerCard h3 a { color: inherit; text-decoration: none; }
.sharerCard .headline { font-size: 13.5px; color: var(--slate); margin-bottom: 10px; min-height: 21px; }
.sharerCard .why { font-size: 12px; color: var(--iron-deep); margin: 2px 0 10px; }
.sharerCard .rates {
  font-family: var(--meter); font-size: 12px; color: var(--slate);
  border-top: 1px solid var(--rule); padding-top: 10px; margin-top: auto;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.sharerCard .rates b { color: var(--iron); font-weight: 500; }
.sharerCard .acts { display: flex; gap: 8px; margin-top: 12px; }
.sharerCard .acts .btn { flex: 1; padding: 8px 10px; font-size: 13.5px; }

/* ---------------------------------------------------------------------------
   Sponsors
   ------------------------------------------------------------------------ */

.sponsor {
  display: block; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, #FFFDF6, #FFF7E7);
  border: 1px dashed #F0D69B; border-radius: var(--r);
  padding: 14px 16px; box-shadow: none;
}
.sponsor:hover { border-color: var(--amber); }
.sponsor strong { display: block; font-family: var(--display); font-size: 16px; color: var(--iron); }
.sponsor .body { display: block; font-size: 13px; color: var(--slate); margin-top: 3px; }
.sponsor img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 8px; display: block; }
.sponsor.strip { display: flex; align-items: center; gap: 14px; }
.sponsor.strip .eyebrow { margin: 0; flex: none; }
.sponsor.rail { margin-top: 16px; }

/* ---------------------------------------------------------------------------
   THE BOOTH — every class room.php needs
   ------------------------------------------------------------------------ */

.office { display: grid; grid-template-columns: 1.55fr .85fr; gap: 22px; align-items: start; margin-top: 8px; }

.stage {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(165deg, #0B4753, #06323B);
  border-radius: var(--r); overflow: hidden;
  border: 1px solid #0A5560;
}
.stage.voice { aspect-ratio: 16 / 9; }
.stage > video#remote { width: 100%; height: 100%; object-fit: cover; display: block; background: #06323B; }
.stage video.offstage { position: absolute; width: 1px; height: 1px; opacity: .01; pointer-events: none; }

.stage .status {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 28px;
  color: #CFEAE6; font-size: 15px; line-height: 1.5;
  background: rgba(6,50,59,.72); z-index: 3;
}

.stage .self {
  position: absolute; right: 12px; bottom: 12px;
  width: 27%; max-width: 176px; aspect-ratio: 4/3;
  object-fit: cover; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.5);
  background: #06323B; z-index: 4;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.6);
}

.voiceFace {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; z-index: 2;
  color: #CFEAE6; text-align: center;
}
.voiceFace p { font-family: var(--display); font-size: 22px; margin: 0; color: #EAF7F4; }
.voiceFace small { font-size: 12.5px; color: #8FBDBC; }
.orb {
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #FFE08A, var(--amber) 58%, #E89A1F);
  transition: transform .1s linear;
  box-shadow: 0 0 44px rgba(255,190,61,.35);
}

.peerBadge {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  background: rgba(6,50,59,.78); color: #CFEAE6;
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  backdrop-filter: blur(4px);
}

.soundBar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #FFF4E0; border: 1px solid #FFDFA3; color: #6B4A05;
  padding: 10px 14px; border-radius: var(--r-s); margin-top: 10px; font-size: 14px;
}
.soundBar button {
  border: 0; background: var(--amber); color: #4A3208;
  padding: 7px 15px; border-radius: 999px; font-family: var(--body);
  font-weight: 550; font-size: 13.5px; cursor: pointer;
}

.controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
}

.ctl {
  display: inline-flex; align-items: center; gap: 8px;
  background: #EFF7F6; border: 1px solid #D6EBE8; color: #0A6E68;
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--body); font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.ctl .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.ctl.off { background: #FFECEF; border-color: #FFC7CF; color: #8E1F2F; }
.ctl.off .dot { background: var(--oxide); }

.levels { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 190px; }
.lvlLabel { font-size: 11px; color: var(--slate); font-family: var(--meter); }
.lvl { flex: 1; height: 6px; background: #E7EFEE; border-radius: 3px; overflow: hidden; min-width: 34px; }
.lvl i { display: block; height: 100%; width: 0; background: var(--machine); transition: width .1s linear; }
.lvlNote { font-size: 11px; color: var(--oxide); font-family: var(--meter); white-space: nowrap; }

.link {
  font-family: var(--meter); font-size: 11.5px; padding: 4px 10px;
  border-radius: 999px; background: #EFF1F0; color: var(--slate);
}
.link[data-state="connected"], .link[data-state="completed"] { background: #E4F5EC; color: var(--green); }
.link[data-state="connecting"], .link[data-state="checking"],
.link[data-state="disconnected"] { background: #FFF4E0; color: #8A6212; }
.link[data-state="failed"] { background: #FFECEF; color: #8E1F2F; }

.devices { font-size: 13px; }
.devices summary { cursor: pointer; color: var(--slate); list-style: none; }
.devices summary::-webkit-details-marker { display: none; }
.devicePanel {
  position: absolute; right: 14px; z-index: 12; margin-top: 8px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-s);
  padding: 14px; width: 258px; box-shadow: 0 14px 34px -14px rgba(10,85,96,.4);
}
.devicePanel label { display: block; font-size: 12px; color: var(--slate); margin: 8px 0 4px; }

.joinBar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 12px; padding: 15px 18px;
  background: linear-gradient(180deg, #FFFDF6, #FFF6E4);
  border: 1px solid #F0D69B; border-radius: var(--r);
}
.joinBar strong { font-family: var(--display); font-size: 17px; color: var(--iron); }

#endBar, #answerBar { margin-top: 14px; }

/* the meter */
.meter {
  background: linear-gradient(168deg, #0B4753, #073F49);
  color: #DCF1EE; border-radius: var(--r); padding: 18px 20px;
}
.meter .clock {
  font-family: var(--meter); font-size: 42px; font-weight: 500;
  letter-spacing: -.02em; color: #fff; line-height: 1; margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.meter.warning .clock { color: var(--amber); }
.meter .line {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.12);
}
.meter .line b { font-family: var(--meter); font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }

/* session chat */
.chat {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden; margin-top: 16px;
}
.chat .log { height: 300px; overflow-y: auto; padding: 14px; font-size: 14px; }
.chat .msg { margin-bottom: 11px; }
.chat .msg .who {
  font-size: 11px; font-weight: 600; color: var(--iron-deep);
  text-transform: uppercase; letter-spacing: .06em;
}
.chat form { display: flex; border-top: 1px solid var(--rule); }
.chat input { border: 0; border-radius: 0; padding: 12px 14px; flex: 1; }
.chat input:focus { outline-offset: -2px; }
.chat button {
  border: 0; background: var(--machine); color: #fff;
  padding: 0 20px; font-family: var(--body); font-weight: 550;
  font-size: 14px; cursor: pointer;
}

.giftRail { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.giftBtn {
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; cursor: pointer; font-family: var(--body);
  display: inline-flex; align-items: center; gap: 6px; color: var(--iron);
}
.giftBtn:hover { border-color: var(--amber); background: #FFFBF2; }
.giftBtn span { font-family: var(--meter); font-size: 11px; color: var(--slate); }

/* ---------------------------------------------------------------------------
   Tables (admin, ledger, receipts)
   ------------------------------------------------------------------------ */

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); font-weight: 600; padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
}
table.data td { padding: 10px; border-bottom: 1px solid #F4EADA; vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data .num { font-family: var(--meter); text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--green); }
.neg { color: var(--oxide); }

/* ---------------------------------------------------------------------------
   Colophon
   ------------------------------------------------------------------------ */

.colophon { margin-top: 64px; border-top: 1px solid var(--rule); padding-top: 28px; position: relative; z-index: 1; }
.colophon .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; margin-bottom: 22px; }
.colophon h4 { margin-bottom: 8px; }
.colophon p, .colophon li { font-size: 13.5px; color: var(--slate); }
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { margin-bottom: 5px; }

/* ---------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .office, .grid.split, .grid.three, .grid.two { grid-template-columns: 1fr; }
  .colophon .cols { grid-template-columns: 1fr; gap: 18px; }
  .district { height: 230px; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 15px 56px; }
  .masthead { padding: 18px 0 14px; }
  .nav { gap: 13px; font-size: 14px; width: 100%; }
  .wordmark { font-size: 25px; }
  .sharers { grid-template-columns: 1fr; }
  .meter .clock { font-size: 34px; }
  .chat .log { height: 220px; }
  .devicePanel { right: 0; width: calc(100vw - 46px); }
  .stage { aspect-ratio: 3/4; }
  .stage .self { width: 34%; }
}

/* --- messages badge -------------------------------------------------- */
/* The nav had no route to messages at all, so replies arrived, were charged
   for, and sat unseen. The badge is the notification. */

.nav .navmsg { position: relative; }

.nav .badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--oxide);
  color: #fff;
  font: 500 11px/1.5 var(--mono);
  text-align: center;
  vertical-align: 1px;
}
.nav .badge[hidden] { display: none; }
.nav .navmsg.has-unread { color: var(--iron); font-weight: 550; }

/* --- spend limit fields ---------------------------------------------- */

.field em.help {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  color: var(--slate);
}

.grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 620px) { .grid.two { grid-template-columns: 1fr; } }