/* Hex Realms front end - "Sector Command" console theme.
 * Palette and treatment lifted from the approved prototype:
 * bg #020a07-#0a2418 radial, primary #7ef0aa, bright #9dffc4, muted #3f8f63,
 * accent #46e88a, gold #ffd23a, alert #ff5a47. Fonts: Share Tech Mono + VT323.
 * All rules scoped under .hexr-app. Mobile-first sizing; side panels overlay
 * the stage on narrow screens and dock beside it on wide ones. */

.hexr-app,
.hexr-app *,
.hexr-app *::before,
.hexr-app *::after { box-sizing: border-box; }

.hexr-app {
  /* Skin tokens: these defaults are the Sector Command skin. A skin
   * overrides them via inline custom properties on this same element
   * (see HEXR_Views::skin_style()), so layout/interaction stay identical
   * across skins - only these values change. */
  --hexr-bg-from: #0a2418;
  --hexr-bg-via: #051710;
  --hexr-bg-to: #020a07;
  --hexr-ink: #7ef0aa;
  --hexr-bright: #9dffc4;
  /* Was #3f8f63, which is about 4.7:1 on the console background - fine for a
   * heading and not fine for the 10-11px hint text it is mostly used on, which
   * is where "I can't read the dark green" came from at the playtest. */
  --hexr-muted: #6fb98c;
  --hexr-accent: #46e88a;
  --hexr-accent-soft: var(--hexr-accent-a30);
  --hexr-accent-line: var(--hexr-accent-a42);
  --hexr-gold: #ffd23a;
  --hexr-alert: #ff5a47;
  --hexr-panel: rgba(4, 16, 10, .72);
  --hexr-inset: rgba(4, 16, 10, .85);
  --hexr-font-display: 'VT323', monospace;
  --hexr-font-mono: 'Share Tech Mono', 'Courier New', monospace;
  --hexr-radius: 0px;

  /* Tabs. These were hardcoded in the tab rules, which is why a skin could
   * recolour the whole console and leave its navigation the stock green.
   * Derived from the rest of the skin by default, so they are right without
   * being set - a skin only writes these properties when it overrides them. */
  --hexr-tab-ink: var(--hexr-muted);
  --hexr-tab-bg: transparent;
  --hexr-tab-on-ink: var(--hexr-gold);
  --hexr-tab-on-bg: var(--hexr-accent-a20);
  --hexr-tab-on-line: var(--hexr-gold);

  /* Type scale.
   *
   * Six steps rather than one size per element: the stylesheet had 105 font
   * sizes across 17 values, which is not something anybody can tune. Every
   * size in the app now resolves to one of these, and HEXR_Skins multiplies
   * all six by the skin's overall scale before writing them here - so a skin
   * can nudge one step or move the lot. */
  --hexr-fs-micro: 9px;
  --hexr-fs-small: 11px;
  --hexr-fs-base: 13px;
  --hexr-fs-lead: 15px;
  --hexr-fs-title: 17px;
  --hexr-fs-numeral: 30px;

  /* Accent tints.
   *
   * Sixty-six literal rgba(70, 232, 138, x) values were scattered through this
   * file - every border, divider, hover fill and inset glow in the app - so a
   * skin could change the accent colour and leave all of them stock green.
   * Derived from the accent token so they follow it, with a literal fallback
   * first for anything that does not understand color-mix. Not editable on
   * purpose: seven more colour pickers is not control, it is a chore. */
  --hexr-accent-a05: rgba(70, 232, 138, .05);
  --hexr-accent-a05: color-mix(in srgb, var(--hexr-accent) 5%, transparent);
  --hexr-accent-a12: rgba(70, 232, 138, .12);
  --hexr-accent-a12: color-mix(in srgb, var(--hexr-accent) 12%, transparent);
  --hexr-accent-a20: rgba(70, 232, 138, .2);
  --hexr-accent-a20: color-mix(in srgb, var(--hexr-accent) 20%, transparent);
  --hexr-accent-a30: rgba(70, 232, 138, .3);
  --hexr-accent-a30: color-mix(in srgb, var(--hexr-accent) 30%, transparent);
  --hexr-accent-a42: rgba(70, 232, 138, .42);
  --hexr-accent-a42: color-mix(in srgb, var(--hexr-accent) 42%, transparent);
  --hexr-accent-a55: rgba(70, 232, 138, .55);
  --hexr-accent-a55: color-mix(in srgb, var(--hexr-accent) 55%, transparent);
  --hexr-accent-a70: rgba(70, 232, 138, .7);
  --hexr-accent-a70: color-mix(in srgb, var(--hexr-accent) 70%, transparent);
  background: radial-gradient(130% 100% at 50% -10%, var(--hexr-bg-from) 0%, var(--hexr-bg-via) 45%, var(--hexr-bg-to) 100%);
  color: var(--hexr-ink);
  font-family: var(--hexr-font-mono);
  font-size: var(--hexr-fs-base);
  line-height: 1.5;
  border: 1px solid var(--hexr-accent-line);
  border-radius: var(--hexr-radius);
  box-shadow: 0 0 44px rgba(20, 90, 48, .22), inset 0 0 90px rgba(8, 32, 19, .35);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.hexr-app[data-skin-scanlines="0"] .hexr-scanlines { display: none; }
.hexr-app[data-skin-glow="0"] { box-shadow: none; }
.hexr-app[data-skin-glow="0"] .hexr-numeral,
.hexr-app[data-skin-glow="0"] .hexr-gold,
.hexr-app[data-skin-glow="0"] .hexr-conhead-title,
.hexr-app[data-skin-glow="0"] .hexr-headbar h1,
.hexr-app[data-skin-glow="0"] .hexr-sigilbox,
/* Two classes that carry a text-shadow and were never listed here, so Glow
 * off left the collapse arrows and the over-points warning still glowing.
 * The two splash-screen classes that used to be in this list went with the
 * splash screen in 0.20.0. */
.hexr-app[data-skin-glow="0"] .hexr-collapse-arrow,
.hexr-app[data-skin-glow="0"] .hexr-pts-over { text-shadow: none; }
.hexr-app[data-skin-glow="0"] .hexr-chip,
.hexr-app[data-skin-glow="0"] .hexr-actbtn-gold,
.hexr-app[data-skin-glow="0"] .hexr-corner { box-shadow: none; }

.hexr-app ::selection { background: #2d7a50; color: #e9fff2; }
.hexr-app ::-webkit-scrollbar { width: 9px; height: 9px; }
.hexr-app ::-webkit-scrollbar-track { background: #04140d; }
.hexr-app ::-webkit-scrollbar-thumb { background: #1c5436; border: 1px solid #2d7a50; }
.hexr-app ::-webkit-scrollbar-thumb:hover { background: #2d7a50; }

.hexr-app .hexr-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 18, 8, .14) 2px 4px);
}

.hexr-app .hexr-login-note { padding: 26px; text-align: center; color: var(--hexr-muted); max-width: 320px; margin: 0 auto; }
.hexr-app .hexr-login-note a { color: var(--hexr-gold); }
.hexr-app .hexr-login-shell { display: flex; align-items: center; justify-content: center; min-height: 320px; }
.hexr-app .hexr-login-note form p { text-align: left; }
.hexr-app .hexr-login-note form label { display: block; font-size: var(--hexr-fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--hexr-muted); margin-bottom: 4px; }
.hexr-app .hexr-login-note form input[type="text"],
.hexr-app .hexr-login-note form input[type="password"],
.hexr-app .hexr-login-note form input[type="email"] {
  width: 100%; background: var(--hexr-inset); color: var(--hexr-bright);
  border: 1px solid var(--hexr-accent-soft); padding: 9px 10px; font-family: inherit; font-size: var(--hexr-fs-lead); margin-bottom: 8px;
}
.hexr-app .hexr-login-note form input[type="submit"] {
  width: 100%; background: rgba(40, 30, 6, .55); color: #ffe6a0; border: 1px solid rgba(255, 210, 58, .6);
  padding: 11px 16px; font-family: inherit; font-size: var(--hexr-fs-base); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; min-height: 44px;
}
.hexr-app .hexr-login-note form .forgetmenot { display: flex; align-items: center; gap: 6px; font-size: var(--hexr-fs-small); color: var(--hexr-muted); margin-bottom: 10px; }
.hexr-app .hexr-login-note form .forgetmenot label { display: inline; margin: 0; text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------ shared atoms */
.hexr-app .hexr-numeral { font-family: var(--hexr-font-display); font-size: calc(var(--hexr-fs-numeral) * 0.67); color: var(--hexr-bright); line-height: 1; text-shadow: 0 0 8px var(--hexr-accent-a42); }
.hexr-app .hexr-numeral-lg { font-size: calc(var(--hexr-fs-numeral) * 0.9); }
.hexr-app .hexr-numeral-xl { font-size: var(--hexr-fs-numeral); }
.hexr-app .hexr-numeral small { font-size: var(--hexr-fs-small); color: #9a8a52; margin-left: 3px; }
.hexr-app .hexr-gold { color: var(--hexr-gold); text-shadow: 0 0 8px rgba(255, 200, 40, .4); }
.hexr-app .hexr-pos { color: var(--hexr-accent); }
.hexr-app .hexr-neg { color: var(--hexr-alert); text-shadow: none; }

.hexr-app .hexr-fieldlabel { display: block; font-size: var(--hexr-fs-micro); letter-spacing: .16em; color: var(--hexr-muted); margin: 10px 0 4px; text-transform: uppercase; }
.hexr-app .hexr-hint { font-size: var(--hexr-fs-small); color: var(--hexr-muted); line-height: 1.55; margin: 8px 0; }
.hexr-app .hexr-note { font-size: var(--hexr-fs-base); color: #5fc488; margin: 8px 0; }

.hexr-app .hexr-chiprow { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; }
.hexr-app .hexr-chiprow:first-child { margin-top: 0; }
.hexr-app .hexr-chip { font-size: var(--hexr-fs-small); letter-spacing: .16em; color: #04140d; background: var(--hexr-accent); padding: 3px 9px; border-radius: var(--hexr-radius); box-shadow: 0 0 12px var(--hexr-accent-a55); white-space: nowrap; }
.hexr-app .hexr-chip-gold { background: var(--hexr-gold); box-shadow: 0 0 12px rgba(255, 200, 40, .45); }
.hexr-app .hexr-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--hexr-accent-a55), transparent); }
.hexr-app .hexr-rule-block { margin: 6px 0 12px; }

.hexr-app .hexr-swatch { width: 12px; height: 12px; border: 1px solid rgba(0, 0, 0, .5); display: inline-block; flex: none; }

.hexr-app .hexr-input,
.hexr-app select,
.hexr-app input[type="number"],
.hexr-app input[type="text"] {
  width: 100%;
  background: var(--hexr-inset);
  color: var(--hexr-bright);
  border: 1px solid var(--hexr-accent-soft);
  padding: 9px 10px;
  font-family: inherit;
  font-size: var(--hexr-fs-lead);
  margin-bottom: 8px;
}
.hexr-app select option { background: #05140d; color: var(--hexr-bright); }
.hexr-app .hexr-range { width: 100%; accent-color: var(--hexr-accent); margin: 6px 0 10px; }

.hexr-app .hexr-stepbtn {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid var(--hexr-accent-a42);
  background: rgba(12, 40, 26, .7);
  color: var(--hexr-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--hexr-fs-title);
  line-height: 1;
}
.hexr-app .hexr-stepbtn:active { background: rgba(24, 66, 42, .9); }
.hexr-app .hexr-stepbtn-wide { min-width: 52px; font-size: var(--hexr-fs-small); letter-spacing: .1em; }

.hexr-app .hexr-actbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 6px 0;
  padding: 10px 13px;
  border: 1px solid var(--hexr-accent-a42);
  background: rgba(14, 46, 29, .7);
  color: var(--hexr-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--hexr-fs-base);
  letter-spacing: .1em;
}
.hexr-app .hexr-actbtn:active { background: rgba(24, 66, 42, .95); }
.hexr-app .hexr-actbtn-gold { border-color: rgba(255, 210, 58, .6); color: #ffe6a0; background: rgba(40, 30, 6, .55); box-shadow: 0 0 14px rgba(255, 200, 40, .15); }
.hexr-app .hexr-cost { font-family: 'VT323', monospace; font-size: var(--hexr-fs-title); color: var(--hexr-gold); }

.hexr-app .hexr-flash {
  border-left: 3px solid var(--hexr-gold);
  background: rgba(40, 30, 6, .4);
  color: #ffe6a0;
  padding: 8px 12px;
  margin: 8px 14px 0;
  font-size: var(--hexr-fs-base);
  position: relative;
  z-index: 45;
}
.hexr-app .hexr-flash-err { border-left-color: var(--hexr-alert); background: rgba(40, 10, 8, .5); color: #ff8a78; }

/* ================================================== CONSOLE (map) */
.hexr-console { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-height: 900px; width: 100%; }

/* The size cap is right for a console embedded in a theme's content area and
 * wrong on a route that owns the whole document, which is the direct cause of
 * "the hub will not follow the browser height". Scoped rather than removed:
 * the shortcode embed still wants a bounded game window. */
.hexr-standalone .hexr-console { max-height: none; }

.hexr-app .hexr-conhead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(12, 42, 27, .62), rgba(4, 16, 10, .2));
  border-bottom: 1px solid var(--hexr-accent-line);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .6);
  position: relative;
  z-index: 30;
  flex: none;
}
.hexr-app .hexr-conhead-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hexr-app .hexr-sigilbox { font-size: calc(var(--hexr-fs-numeral) * 0.67); color: var(--hexr-ink); text-shadow: 0 0 10px var(--hexr-accent-a70); border: 1px solid var(--hexr-accent-a42); padding: 2px 7px; flex: none; }
.hexr-app .hexr-conhead-title { letter-spacing: .18em; font-size: var(--hexr-fs-lead); color: var(--hexr-bright); text-shadow: 0 0 9px var(--hexr-accent-a55); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hexr-app .hexr-conhead-sub { font-size: var(--hexr-fs-micro); letter-spacing: .22em; color: var(--hexr-muted); }
.hexr-app .hexr-conhead-spacer { flex: 1; }

.hexr-app .hexr-turnbox,
.hexr-app .hexr-viewerbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--hexr-accent-a30);
  background: rgba(4, 16, 10, .6);
  box-shadow: inset 0 0 14px rgba(20, 80, 44, .18);
}
.hexr-app .hexr-turnbox .hexr-fieldlabel,
.hexr-app .hexr-viewerbox .hexr-fieldlabel { margin: 0; }
.hexr-app .hexr-viewer-name { font-size: var(--hexr-fs-small); letter-spacing: .1em; color: var(--hexr-bright); }

.hexr-app .hexr-camp-picker select { width: auto; margin: 0; padding: 6px 9px; font-size: var(--hexr-fs-small); }

.hexr-console .hexr-console-body { flex: 1; display: flex; min-height: 0; position: relative; }

/* ---------------- side panels: ALWAYS a floating overlay layer above
 * the map, on every viewport width. They are taken out of flex flow
 * entirely (position: absolute) so the stage never reflows or resizes
 * when a panel opens or closes - it simply sits underneath. */
.hexr-app .hexr-side {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  min-height: 0;
  background: var(--hexr-panel);
  backdrop-filter: blur(2px);
  transition: transform .28s ease;
  transform: translateX(0);
  z-index: 20;
  box-shadow: 0 0 30px rgba(0, 0, 0, .45);
}
.hexr-app .hexr-side-left { left: 0; width: min(78vw, 260px); border-right: 1px solid var(--hexr-accent-a20); }
.hexr-app .hexr-side-right { right: 0; width: min(88vw, 322px); border-left: 1px solid var(--hexr-accent-a20); }
.hexr-app .hexr-side-inner { flex: 1; overflow-y: auto; padding: 14px 14px 40px; min-width: 0; }

.hexr-app .hexr-side-left.hexr-collapsed { transform: translateX(-100%); }
.hexr-app .hexr-side-right.hexr-collapsed { transform: translateX(100%); }

.hexr-app .hexr-collapse {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 22px was a third of a comfortable touch target, on the control a player
   * reaches for most on a phone. 44 is the accepted minimum; the visible bar
   * stays slim and the padding does the work. */
  width: 44px;
  height: 72px;
  border: 1px solid var(--hexr-accent-line);
  background: rgba(6, 24, 15, .92);
  color: var(--hexr-accent);
  cursor: pointer;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--hexr-fs-small);
  padding: 0;
}
.hexr-app .hexr-collapse-left { right: -44px; border-left: 0; justify-content: flex-start; padding-left: 4px; }
.hexr-app .hexr-collapse-right { left: -44px; border-right: 0; justify-content: flex-end; padding-right: 4px; }
.hexr-app .hexr-collapse-arrow { display: inline-block; transition: transform .28s ease; text-shadow: 0 0 8px var(--hexr-accent-a55); }
.hexr-app .hexr-side.hexr-collapsed .hexr-collapse-arrow { transform: rotate(180deg); }

/* ---------------- layers + tools */
.hexr-app .hexr-layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid var(--hexr-accent-a20);
  background: rgba(6, 18, 12, .45);
  color: var(--hexr-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-align: left;
}
.hexr-app .hexr-layer-on { border-color: var(--hexr-accent-a55); background: rgba(20, 66, 42, .55); color: #bfffd6; box-shadow: inset 0 0 14px rgba(20, 90, 48, .25); }
.hexr-app .hexr-layer-state { font-size: var(--hexr-fs-micro); letter-spacing: .14em; color: #2c7a4f; flex: none; }
.hexr-app .hexr-layer-on .hexr-layer-state { color: var(--hexr-gold); }

.hexr-app .hexr-zoomrow { display: flex; align-items: center; gap: 8px; }
.hexr-app .hexr-zoomrow .hexr-numeral { min-width: 48px; text-align: center; }

.hexr-app .hexr-modrow { display: flex; gap: 7px; margin-bottom: 10px; }
.hexr-app .hexr-modebtn {
  flex: 1;
  min-height: 38px;
  border: 1px solid var(--hexr-accent-a30);
  background: rgba(6, 18, 12, .45);
  color: var(--hexr-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--hexr-fs-small);
  letter-spacing: .12em;
}
.hexr-app .hexr-modebtn-active { border-color: var(--hexr-gold); color: #ffe6a0; background: rgba(40, 30, 6, .55); box-shadow: 0 0 12px rgba(255, 200, 40, .18); }
.hexr-app .hexr-paintbox { border: 1px solid rgba(255, 210, 58, .35); background: rgba(20, 16, 4, .4); padding: 10px; }

/* ---------------- center stage
 * Always 100% of the console body - side panels float above it and never
 * take up flex space, so this never shrinks, shifts or reflows when a
 * panel opens/closes. justify-content + margin:auto on the plate below
 * keep the hex grid centered on screen instead of hugging the left edge. */
.hexr-app .hexr-stagewrap {
  width: 100%;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(circle, var(--hexr-accent-a05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.hexr-app .hexr-plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin: 0 auto;
  background: #040d09;
  border: 1px solid var(--hexr-accent-a42);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 44px rgba(20, 90, 48, .22), inset 0 0 90px rgba(8, 32, 19, .5);
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
}
.hexr-app .hexr-corner { position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 5; }
.hexr-app .hexr-corner-tl { top: -1px; left: -1px; border-top: 2px solid var(--hexr-accent); border-left: 2px solid var(--hexr-accent); box-shadow: 0 0 9px var(--hexr-accent-a55); }
.hexr-app .hexr-corner-tr { top: -1px; right: -1px; border-top: 2px solid var(--hexr-accent); border-right: 2px solid var(--hexr-accent); box-shadow: 0 0 9px var(--hexr-accent-a55); }
.hexr-app .hexr-corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--hexr-accent); border-left: 2px solid var(--hexr-accent); box-shadow: 0 0 9px var(--hexr-accent-a55); }
.hexr-app .hexr-corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--hexr-accent); border-right: 2px solid var(--hexr-accent); box-shadow: 0 0 9px var(--hexr-accent-a55); }

.hexr-app .hexr-stage {
  flex: 1;
  overflow: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; /* our JS handles pinch; single finger pans natively */
  cursor: grab;
}
.hexr-app .hexr-stage.hexr-dragging { cursor: grabbing; }
.hexr-app .hexr-stage svg { display: block; }

/* SVG element styling + layer toggles (stage carries hexr-off-* classes) */
.hexr-app .hexr-hex { cursor: pointer; stroke: var(--hexr-accent-a30); stroke-width: 1.1; fill: transparent; }
.hexr-app .hexr-hex-selected { stroke: #ffe6a0 !important; stroke-width: 3 !important; }
.hexr-app .hexr-hex-label { font-size: var(--hexr-fs-small); fill: var(--hexr-muted); pointer-events: none; font-family: 'Share Tech Mono', monospace; opacity: .8; }
.hexr-app .hexr-hex-sigil { font-size: var(--hexr-fs-numeral); fill: #eafff2; pointer-events: none; font-family: 'VT323', monospace; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 3; }
.hexr-app .hexr-hex-mil { font-size: var(--hexr-fs-lead); font-family: 'VT323', monospace; fill: #ff8a78; pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, .7); stroke-width: 3; }
.hexr-app .hexr-hex-fort { font-size: var(--hexr-fs-small); fill: var(--hexr-gold); pointer-events: none; }
.hexr-app .hexr-hex-note { fill: #35f0c0; stroke: rgba(0, 0, 0, .5); pointer-events: none; }

.hexr-app .hexr-stage.hexr-off-map .hexr-svg-map { display: none; }
.hexr-app .hexr-stage.hexr-off-grid .hexr-hex-label { display: none; }
.hexr-app .hexr-stage.hexr-off-control .hexr-hex { fill: transparent !important; stroke: var(--hexr-accent-a30) !important; stroke-width: 1.1 !important; }
.hexr-app .hexr-stage.hexr-off-control .hexr-hex-sigil { display: none; }
.hexr-app .hexr-stage.hexr-off-mil .hexr-hex-mil { display: none; }
.hexr-app .hexr-stage.hexr-off-fort .hexr-hex-fort { display: none; }
.hexr-app .hexr-stage.hexr-off-note .hexr-hex-note { display: none; }
.hexr-app .hexr-stage.hexr-off-site .hexr-hex-site, .hexr-app .hexr-stage.hexr-off-site .hexr-hex-site-lg { display: none; }
.hexr-app .hexr-stage.hexr-off-vp .hexr-hex-vp { display: none; }
.hexr-app .hexr-stage.hexr-off-orders .hexr-order-arrow { display: none; }
.hexr-app .hexr-stage.hexr-off-event .hexr-hex-eventmark { display: none; }

/* Standing orders drawn on the ground they concern. A list of orders and a
 * board are the same information twice; the player has to reconcile them by
 * hand unless the commitment is shown where it is going. */
.hexr-app .hexr-order-arrow { stroke: var(--hexr-gold); stroke-width: 2; fill: none; opacity: .85; marker-end: url(#hexr-arrowhead); pointer-events: none; }
.hexr-app .hexr-order-arrow-dash { stroke-dasharray: 5 4; }
/* Assaults read red and solid, reinforcements gold and dashed. The dash is the
 * real signal and the colour is the reinforcement, not the other way round. */
.hexr-app .hexr-order-arrow-assault { stroke: var(--hexr-alert); stroke-width: 2.4; opacity: .95; marker-end: url(#hexr-arrowhead-assault); }

/* paint mode cursor cue */
.hexr-app .hexr-stage.hexr-painting .hexr-hex { cursor: crosshair; }

/* ---------------- right console tabs */
.hexr-app .hexr-tabsrow { display: flex; border-bottom: 1px solid var(--hexr-accent-a30); margin: -14px -14px 14px; }
.hexr-app .hexr-ctab {
  flex: 1;
  min-height: 40px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: var(--hexr-tab-bg);
  color: var(--hexr-tab-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--hexr-fs-small);
  letter-spacing: .1em;
}
.hexr-app .hexr-ctab-active {
  border-bottom-color: var(--hexr-tab-on-line);
  background: var(--hexr-tab-on-bg);
  color: var(--hexr-tab-on-ink);
}
.hexr-app .hexr-ctab-panel { display: none; }
.hexr-app .hexr-ctab-panel-active { display: block; }

.hexr-app .hexr-empty { text-align: center; padding: 40px 14px; }
.hexr-app .hexr-empty-glyph { font-size: var(--hexr-fs-numeral); color: #1c5436; margin-bottom: 10px; }
.hexr-app .hexr-empty-title { font-size: var(--hexr-fs-base); letter-spacing: .08em; color: #5fc488; }

.hexr-app .hexr-hexhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hexr-app .hexr-hexstatus { font-size: var(--hexr-fs-small); letter-spacing: .1em; color: var(--hexr-muted); }
.hexr-app .hexr-statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.hexr-app .hexr-stat { border: 1px solid var(--hexr-accent-a20); background: rgba(8, 24, 16, .55); padding: 8px 10px; }
.hexr-app .hexr-stat .hexr-fieldlabel { margin: 0 0 4px; }
.hexr-app .hexr-stat-mil { color: var(--hexr-alert); }
.hexr-app .hexr-stat-fort { color: var(--hexr-gold); }

.hexr-app .hexr-rostercard { border: 1px solid var(--hexr-accent-a20); border-left: 3px solid var(--hexr-accent); background: rgba(8, 24, 16, .55); padding: 10px 12px; margin-bottom: 10px; }
.hexr-app .hexr-rostercard-dim { border-left-color: var(--hexr-accent-a20); opacity: .8; }
.hexr-app .hexr-rosterhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hexr-app .hexr-rostername { flex: 1; font-size: var(--hexr-fs-base); color: var(--hexr-bright); letter-spacing: .04em; }
.hexr-app .hexr-rosterrow { display: flex; justify-content: space-between; gap: 8px; font-size: var(--hexr-fs-base); padding: 4px 0; border-top: 1px solid var(--hexr-accent-a12); }

.hexr-app .hexr-reqhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
/*
 * The RP transfer controls.
 *
 * These were a single flex row: a commander select, an amount field and a
 * Send button all sharing one line, which left the amount too narrow to read
 * a three-digit number in and put the button under the thumb that was aiming
 * at the field. Wrapping, with a floor on the amount, so the row breaks
 * before anything in it gets squeezed.
 */
.hexr-app .hexr-transferrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.hexr-app .hexr-transferrow .hexr-input { flex: 1 1 140px; min-width: 120px; margin-bottom: 0; }
.hexr-app .hexr-transferrow .hexr-actbtn { flex: 0 0 auto; width: auto; margin: 0; }
.hexr-app .hexr-ledgerrow { display: flex; align-items: baseline; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--hexr-accent-a12); }
.hexr-app .hexr-ledgerrow .hexr-numeral { min-width: 36px; text-align: right; flex: none; }
.hexr-app .hexr-ledgertext { font-size: 11.5px; color: #5fc488; line-height: 1.4; }

.hexr-app .hexr-logrow { display: flex; gap: 9px; padding: 8px 2px; border-bottom: 1px solid var(--hexr-accent-a12); align-items: baseline; }
.hexr-app .hexr-logkind { font-size: 8.5px; letter-spacing: .1em; color: var(--hexr-muted); border: 1px solid var(--hexr-accent-a30); padding: 1px 5px; flex: none; }
.hexr-app .hexr-logkind-dispute { color: #ff8a78; border-color: rgba(255, 90, 71, .4); }
.hexr-app .hexr-logkind-gm, .hexr-app .hexr-logkind-turn { color: #ffe6a0; border-color: rgba(255, 210, 58, .4); }
.hexr-app .hexr-logmsg { font-size: var(--hexr-fs-base); color: #5fc488; line-height: 1.45; }

/* ================================================== HUB (player) */
.hexr-app-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-height: 780px; max-width: 520px; }

/*
 * On its own route the hub fills the width, and stays filled.
 *
 * Dropping the 520px cap in 0.19.0 was only half the job. A flex item defaults
 * to min-width:auto, which means it refuses to shrink below its widest content
 * - so one wide table inside a panel pushed the whole console out, and because
 * each tab has a different widest thing, changing tab resized the entire
 * screen. That is the "jumping width all over" on desktop: not a missing width
 * but a floor set by whatever happened to be showing.
 *
 * width:100% pins it, min-width:0 lets it hold, and wide content scrolls
 * inside its own panel instead of shoving the console around.
 */
.hexr-standalone .hexr-app-shell {
  max-height: none;
  max-width: none;
  width: 100%;
  min-width: 0;
  /* The flex parent already sizes this to the viewport minus the site bar.
     Asking for a second full viewport height here made the console taller
     than its own slot and pushed the bottom nav off the screen. */
  height: auto;
}
.hexr-app-shell > * { min-width: 0; }
.hexr-app .hexr-panels { min-width: 0; }

/* A table wider than the panel scrolls itself. Nothing inside a panel may set
   the width of the console. */
.hexr-app .hexr-panels table.hexr-table { display: block; overflow-x: auto; white-space: nowrap; }
.hexr-app .hexr-panels table.hexr-table td,
.hexr-app .hexr-panels table.hexr-table th { white-space: normal; }

/* Desktop: a console the full width of a 27-inch monitor is unreadable, and
   the panels are single-column by design. Hold the reading measure in the
   middle and let the frame be the full width, rather than letting content
   decide. */
@media (min-width: 900px) {
  .hexr-standalone .hexr-app-shell .hexr-panels > * { max-width: 780px; margin-left: auto; margin-right: auto; }
  .hexr-standalone .hexr-app-shell .hexr-topbar,
  .hexr-standalone .hexr-app-shell .hexr-bottomnav > * { max-width: none; }
}

.hexr-app .hexr-headbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 16px; background: linear-gradient(180deg, rgba(12, 42, 27, .62), rgba(4, 16, 10, .2)); border-bottom: 1px solid var(--hexr-accent-line); flex: none; position: relative; z-index: 30; }
.hexr-app .hexr-headbar h1 { font-size: var(--hexr-fs-lead); letter-spacing: .18em; margin: 0; color: var(--hexr-bright); text-shadow: 0 0 9px var(--hexr-accent-a55); text-transform: uppercase; font-weight: 400; }

.hexr-app .hexr-topbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; flex-shrink: 0; }
.hexr-app .hexr-pill { background: rgba(4, 16, 10, .6); border: 1px solid var(--hexr-accent-a30); color: var(--hexr-muted); padding: 4px 12px; font-size: var(--hexr-fs-small); letter-spacing: .08em; text-transform: uppercase; }
.hexr-app .hexr-pill strong { color: var(--hexr-gold); font-family: 'VT323', monospace; font-size: var(--hexr-fs-lead); font-weight: 400; margin-left: 3px; }

.hexr-app .hexr-panels { flex: 1; overflow-y: auto; padding: 14px; padding-bottom: 84px; -webkit-overflow-scrolling: touch; position: relative; }
.hexr-app .hexr-panel { display: none; }
.hexr-app .hexr-panel-active { display: block; }

/* Grouped panels. Command holds Wallet, Army and Team; Standings holds
 * Alliances and Commanders. The segmented control is the map's own tab row,
 * so the app has one idiom for switching within a screen rather than two
 * that look alike and behave differently. */
.hexr-app .hexr-subtabs { margin: -14px -14px 14px; position: sticky; top: -14px; z-index: 20; background: rgba(4, 16, 10, .96); }
.hexr-app .hexr-subpanel { display: none; }
.hexr-app .hexr-subpanel-active { display: block; }
.hexr-app .hexr-enlist-card { text-align: center; }

.hexr-app .hexr-card { background: rgba(8, 24, 16, .55); border: 1px solid var(--hexr-accent-a20); padding: 12px 14px; margin-bottom: 12px; }
.hexr-app .hexr-card-title { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--hexr-bright); }
.hexr-app h3 { font-size: var(--hexr-fs-small); text-transform: uppercase; letter-spacing: .16em; color: var(--hexr-muted); margin: 14px 0 6px; font-weight: 400; }
.hexr-app p { margin: 0 0 8px; font-size: var(--hexr-fs-base); }
.hexr-app .hexr-muted { color: var(--hexr-muted); font-size: var(--hexr-fs-base); }

.hexr-app .hexr-status { font-size: var(--hexr-fs-micro); text-transform: uppercase; letter-spacing: .12em; padding: 2px 8px; border: 1px solid var(--hexr-accent-a30); color: var(--hexr-muted); white-space: nowrap; }
.hexr-app .hexr-status-open { color: var(--hexr-gold); border-color: rgba(255, 210, 58, .5); }
.hexr-app .hexr-status-inprogress { color: #ffe6a0; border-color: rgba(255, 210, 58, .5); }
.hexr-app .hexr-status-reporting { color: #ffb36b; border-color: rgba(255, 179, 107, .5); }
.hexr-app .hexr-status-disputed { color: #ff8a78; border-color: rgba(255, 90, 71, .5); }
.hexr-app .hexr-status-resolved { color: var(--hexr-accent); border-color: var(--hexr-accent-a55); }
.hexr-app .hexr-status-scheduled { color: var(--hexr-muted); border-color: var(--hexr-accent-a30); }
/* Inside a log row the pill must not be squeezed - it is white-space: nowrap. */
.hexr-app .hexr-logrow .hexr-status { flex: none; align-self: flex-start; }

.hexr-app table.hexr-table { width: 100%; border-collapse: collapse; font-size: var(--hexr-fs-base); margin: 0 0 10px; }
.hexr-app table.hexr-table th,
.hexr-app table.hexr-table td { border: 1px solid var(--hexr-accent-a20); padding: 6px 8px; text-align: left; background: rgba(4, 16, 10, .4); }
.hexr-app table.hexr-table th { color: var(--hexr-muted); text-transform: uppercase; font-size: var(--hexr-fs-micro); letter-spacing: .12em; font-weight: 400; }

.hexr-app .hexr-vp-grid { display: grid; grid-template-columns: 1fr 90px; gap: 8px 10px; align-items: center; }
.hexr-app .hexr-vp-grid label { font-size: var(--hexr-fs-base); color: var(--hexr-bright); }
.hexr-app .hexr-vp-grid input { margin-bottom: 0; }
.hexr-app .hexr-vp-submit { grid-column: 1 / -1; margin-top: 4px; }
.hexr-app .hexr-transfer-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hexr-app .hexr-transfer-form select { flex: 1 1 100%; min-width: 0; }
.hexr-app .hexr-transfer-form input { flex: 1 1 140px; min-width: 120px; margin-bottom: 0; }
.hexr-app .hexr-transfer-form button { flex: 0 0 auto; }

.hexr-app .hexr-btn {
  /* inline-flex, not the browser default. .hexr-btn is used on <a> as well as
   * <button> - the map link, Log Out, the snapshot link - and an anchor is
   * inline, so width, min-height and vertical padding were all being ignored
   * and the theme's link underline showed through. Centring and killing the
   * underline here makes the two elements render identically. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  background: rgba(14, 46, 29, .7);
  color: var(--hexr-ink);
  border: 1px solid var(--hexr-accent-a42);
  padding: 11px 16px;
  font-family: inherit;
  font-size: var(--hexr-fs-base);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  min-height: 44px;
}
.hexr-app a.hexr-btn:hover { color: var(--hexr-bright); text-decoration: none; }
.hexr-app .hexr-btn:active { background: rgba(24, 66, 42, .95); }
.hexr-app .hexr-btn-gold { border-color: rgba(255, 210, 58, .6); color: #ffe6a0; background: rgba(40, 30, 6, .55); }
.hexr-app .hexr-btn-sm { width: auto; padding: 7px 14px; font-size: var(--hexr-fs-small); min-height: 36px; }
.hexr-app .hexr-btn-lg { font-size: var(--hexr-fs-lead); padding: 15px; }

.hexr-app .hexr-log ul { list-style: none; margin: 0; padding: 0; }
.hexr-app .hexr-log li { font-size: 11.5px; color: #5fc488; border-bottom: 1px solid var(--hexr-accent-a12); padding: 7px 0; }
.hexr-app .hexr-log .hexr-muted { font-size: var(--hexr-fs-small); }

/* ---------------------------------------------------------- Squad (friends) */
.hexr-app .hexr-squadsearch { display: flex; gap: 8px; }
.hexr-app .hexr-squadsearch input { flex: 1; margin-bottom: 0; }
.hexr-app .hexr-squadrow { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--hexr-accent-a12); }
.hexr-app .hexr-squadname { flex: 1; font-size: var(--hexr-fs-base); color: var(--hexr-bright); }
.hexr-app .hexr-squadrow .hexr-btn-sm { margin-top: 0; }

/* ---------------------------------------------------------- Requisition shop */
.hexr-app .hexr-reqcard { border: 1px solid var(--hexr-accent-a20); background: rgba(8, 24, 16, .55); border-radius: var(--hexr-radius); padding: 10px 12px; margin-bottom: 10px; }
.hexr-app .hexr-reqcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hexr-app .hexr-reqcard-name { font-size: var(--hexr-fs-base); color: var(--hexr-bright); letter-spacing: .03em; }
.hexr-app .hexr-reqcard-desc { font-size: var(--hexr-fs-small); color: var(--hexr-muted); margin: 4px 0 8px; line-height: 1.5; }
.hexr-app .hexr-reqcard-foot { display: flex; gap: 8px; align-items: center; }
.hexr-app .hexr-reqedit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--hexr-accent-a20); }
.hexr-app .hexr-reqedit .hexr-input { margin-bottom: 0; }
.hexr-app .hexr-reqedit-full { grid-column: 1 / -1; }

/* ---------------------------------------------------------- fog of war */
/* Unsurveyed sectors read as empty ground; scouted-but-not-held sectors show
 * control colour at reduced strength with their power levels redacted. */
/* Unsurveyed. Amber-edged since 0.14.0 - in the playtest a hidden sector and an
   empty one were indistinguishable at arm's length, so nobody could tell what
   was worth scouting. Amber is what the rest of the app uses for "needs you". */
.hexr-app .hexr-hex-vis-hidden { fill: rgba(10, 8, 2, .55) !important; stroke: rgba(255, 210, 58, .34) !important; }
.hexr-app .hexr-hex-vis-hidden:hover { stroke: rgba(255, 210, 58, .8) !important; }
.hexr-app .hexr-hex-vis-hidden + .hexr-hex-label { opacity: .3; }
.hexr-app .hexr-hex-unknown { font-size: calc(var(--hexr-fs-numeral) * 0.87); font-family: var(--hexr-font-display); fill: rgba(255, 210, 58, .62); pointer-events: none; }
.hexr-app .hexr-hex-vis-partial { stroke-dasharray: 4 3; }
.hexr-app .hexr-hex-redacted { fill: rgba(255, 138, 120, .5); letter-spacing: 1px; font-size: var(--hexr-fs-micro); }
.hexr-app .hexr-redacted { color: var(--hexr-muted); letter-spacing: 2px; opacity: .7; }

/* ---------------------------------------------------------- notifications */
.hexr-app .hexr-navicon { position: relative; }
.hexr-app .hexr-navbadge {
  position: absolute; top: -5px; right: -9px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 8px; background: var(--hexr-alert); color: #fff;
  font-family: var(--hexr-font-mono); font-size: var(--hexr-fs-micro); line-height: 15px; text-align: center;
}
.hexr-app .hexr-unreadpill {
  display: inline-block; min-width: 16px; padding: 1px 6px; margin-left: 6px;
  border-radius: 9px; background: var(--hexr-alert); color: #fff; font-size: var(--hexr-fs-small);
}
.hexr-app .hexr-noterow { display: flex; gap: 9px; padding: 9px 2px; border-bottom: 1px solid var(--hexr-accent-a12); align-items: flex-start; }
.hexr-app .hexr-noterow-unread { background: rgba(20, 60, 40, .28); border-left: 2px solid var(--hexr-gold); padding-left: 8px; }
.hexr-app .hexr-notebody { font-size: var(--hexr-fs-base); color: #5fc488; line-height: 1.45; }
.hexr-app .hexr-notetitle { color: var(--hexr-bright); font-weight: 400; }
.hexr-app .hexr-notebody .hexr-hint { display: block; margin-top: 3px; font-size: var(--hexr-fs-small); }
.hexr-app .hexr-notescope {
  font-size: 8.5px; letter-spacing: .1em; padding: 2px 6px; flex: none;
  border: 1px solid var(--hexr-accent-a30); color: var(--hexr-muted); white-space: nowrap;
}
.hexr-app .hexr-notescope-global { color: #ffe6a0; border-color: rgba(255, 210, 58, .5); }
.hexr-app .hexr-notescope-battle { color: #ff8a78; border-color: rgba(255, 90, 71, .45); }
.hexr-app .hexr-notescope-team { color: var(--hexr-accent); border-color: var(--hexr-accent-a55); }

/* ---------------------------------------------------------- registration */
.hexr-app .hexr-regform { text-align: left; margin-top: 10px; }
.hexr-app .hexr-regform input[type="color"] { height: 38px; padding: 3px; }
/* Alliance heading above its factions, so the sign-up picker reads as the
   two-level thing it is rather than one long list of army names. */
/* The sign-up faction radio list was replaced by two selects in 0.20.0, and
 * the rules that styled it went with it. */

/* ---------------------------------------------------------- round archive */
.hexr-app .hexr-snapshot { border: 1px solid var(--hexr-accent-a30); background: #040d09; padding: 6px; margin-top: 8px; }
.hexr-app .hexr-snapshot svg { display: block; width: 100%; height: auto; }
.hexr-app .hexr-teamselect { max-width: 130px; }

.hexr-app .hexr-bottomnav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; background: var(--hexr-inset); border-top: 1px solid var(--hexr-accent-line); flex-shrink: 0; z-index: 30; }
.hexr-app .hexr-navitem { flex: 1; background: var(--hexr-tab-bg); border: none; border-top: 2px solid transparent; color: var(--hexr-tab-ink); padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-family: inherit; min-height: 48px; }
.hexr-app .hexr-navicon { font-size: var(--hexr-fs-title); line-height: 1; }
.hexr-app .hexr-navlabel { font-size: var(--hexr-fs-micro); letter-spacing: .1em; text-transform: uppercase; }
.hexr-app .hexr-navitem-active { color: var(--hexr-tab-on-ink); background: var(--hexr-tab-on-bg); border-top-color: var(--hexr-tab-on-line); }
/* Theatre is a link, not a tab - it leaves the hub for the map. It has to
 * look identical to its neighbours anyway, because to a player it is the
 * fifth thing in the row. */
.hexr-app a.hexr-navitem-link { text-decoration: none; }
.hexr-app a.hexr-navitem-link:hover, .hexr-app a.hexr-navitem-link:focus { color: #ffe6a0; }

/* Seven tabs since 0.8.0 (Account joined the row). At 1/7 of a narrow phone
 * that is roughly 50px per tab, which the longest label ("ENGAGEMENTS") does
 * not fit on one line - so labels clip rather than wrap, which would push the
 * icons out of alignment and change the nav's height. */
.hexr-app .hexr-navitem { min-width: 0; padding-left: 2px; padding-right: 2px; }
.hexr-app .hexr-navlabel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) {
  .hexr-app .hexr-navlabel { font-size: var(--hexr-fs-micro); letter-spacing: .04em; }
  .hexr-app .hexr-navicon { font-size: var(--hexr-fs-lead); }
}

/* Return leg from the map back to the hub. Sits in the console header before
 * the brand, so it reads as navigation rather than as part of the title. */
.hexr-app .hexr-backhub { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 5px 9px; border: 1px solid var(--hexr-accent-line); color: var(--hexr-bright); text-decoration: none; font-size: var(--hexr-fs-small); letter-spacing: .1em; line-height: 1; }
.hexr-app .hexr-backhub:hover { color: var(--hexr-gold); border-color: var(--hexr-gold); }
@media (max-width: 640px) {
  .hexr-app .hexr-backhub-label { display: none; }
}

.hexr-app .hexr-reqcard-spent { opacity: .55; }

/* Teams: a member chip carrying their own faction colour, since a team's
 * members can come from different factions. */
.hexr-app .hexr-teammate { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; white-space: nowrap; }

/* Squad tab: faction order-of-battle blocks. */
.hexr-app .hexr-rosterblock { padding: 8px 0; border-bottom: 1px solid var(--hexr-accent-line); }
.hexr-app .hexr-rosterblock:last-child { border-bottom: none; }
.hexr-app .hexr-rosternames { font-size: var(--hexr-fs-small); color: var(--hexr-muted); line-height: 1.6; padding: 2px 0 0 20px; }

/* Marks an Intel line that only your own faction can see. */
.hexr-app .hexr-intelmark { display: inline-block; font-size: 8.5px; letter-spacing: .12em; padding: 1px 5px; margin-right: 5px; border: 1px solid var(--hexr-gold); color: var(--hexr-gold); vertical-align: 1px; }

/* Account tab: label/value rows for the service record. */
.hexr-app .hexr-statrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hexr-accent-line); }
.hexr-app .hexr-statrow:last-child { border-bottom: none; }

/* ================================================== responsive */
@media (max-width: 860px) {
  .hexr-console { max-height: none; }
  .hexr-app .hexr-conhead { gap: 8px; padding: 8px 12px; }
  .hexr-app .hexr-conhead-sub { display: none; }
  .hexr-app .hexr-stagewrap { padding: 10px; }
}

/* A small persistent corner control (the theme's account chip, ~60px wide
 * in its compact icon form) floats above the app on a shortcode page.
 * Reserve real breathing room on the right of the header rows - not just
 * a token amount - so its own buttons stay reachable and nothing sits
 * underneath it. */
.hexr-app .hexr-conhead,
.hexr-app .hexr-headbar { padding-right: 78px; }
@media (max-width: 520px) {
  .hexr-app .hexr-conhead,
  .hexr-app .hexr-headbar { padding-right: 60px; }
}

@media (max-width: 480px) {
  /* Six tabs need tighter spacing than four did. */
  .hexr-app .hexr-navlabel { font-size: var(--hexr-fs-micro); letter-spacing: .04em; }
  .hexr-app .hexr-navicon { font-size: var(--hexr-fs-lead); }
  .hexr-app .hexr-navitem { padding: 9px 2px 7px; }
}

@media (max-width: 380px) {
  .hexr-app .hexr-navlabel { display: none; }
  .hexr-app .hexr-navitem { padding: 13px 4px; }
}

/* ---------------------------------------------------------- report timer */
.hexr-app .hexr-deadline {
  font-size: var(--hexr-fs-small); color: var(--hexr-gold); border-left: 2px solid var(--hexr-gold);
  background: rgba(40, 30, 6, .35); padding: 6px 10px; margin: 8px 0;
}
.hexr-app .hexr-countdown { font-family: var(--hexr-font-display); font-size: var(--hexr-fs-title); letter-spacing: .05em; }
.hexr-app .hexr-deadline-over { color: #ff8a78; border-left-color: var(--hexr-alert); background: rgba(40, 10, 8, .4); }

/* ---------------------------------------------------------- breadcrumb */
.hexr-app .hexr-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 12px; font-size: var(--hexr-fs-small); }
.hexr-app .hexr-breadcrumb-link { background: none; border: none; color: var(--hexr-accent); text-decoration: underline; cursor: pointer; padding: 0; font-family: inherit; font-size: var(--hexr-fs-small); }
.hexr-app .hexr-breadcrumb-link:hover { color: var(--hexr-gold); }
.hexr-app .hexr-breadcrumb-current { color: var(--hexr-bright); }
.hexr-app .hexr-breadcrumb-sep { color: var(--hexr-muted); }

/* ---------------------------------------------------------- events */
.hexr-app .hexr-eventcard { border: 1px solid rgba(255, 210, 58, .35); background: rgba(40, 30, 6, .3); border-radius: var(--hexr-radius); padding: 9px 11px; margin-bottom: 8px; }
.hexr-app .hexr-eventcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hexr-app .hexr-eventcard-name { font-size: var(--hexr-fs-base); color: var(--hexr-gold); }
.hexr-app .hexr-eventcard-desc { font-size: var(--hexr-fs-small); color: var(--hexr-muted); margin: 4px 0 0; line-height: 1.5; }
.hexr-app .hexr-hex-eventmark { font-size: var(--hexr-fs-base); fill: var(--hexr-gold); pointer-events: none; }

/* ---------------------------------------------------------- chronicle */
.hexr-app .hexr-newsitem { border-bottom: 1px solid var(--hexr-accent-a12); padding: 9px 2px; }
.hexr-app .hexr-newsdate { display: block; font-size: 9.5px; letter-spacing: .08em; color: var(--hexr-muted); margin-bottom: 3px; }
.hexr-app .hexr-newsbody { margin: 0; font-size: var(--hexr-fs-base); color: #5fc488; line-height: 1.5; }
.hexr-app .hexr-rankno { flex: none; width: 18px; font-family: var(--hexr-font-display); font-size: var(--hexr-fs-lead); color: var(--hexr-gold); text-align: right; }
.hexr-app .hexr-titletag {
  display: inline-block; font-size: var(--hexr-fs-micro); letter-spacing: .06em; text-transform: uppercase;
  color: var(--hexr-gold); border: 1px solid rgba(255, 210, 58, .4); padding: 1px 5px; margin-left: 5px; border-radius: var(--hexr-radius);
}
.hexr-app .hexr-side-chronicle { position: static; width: 100%; max-width: 340px; }
@media (max-width: 860px) {
  .hexr-app .hexr-chronicle .hexr-console-body { flex-direction: column; }
  .hexr-app .hexr-side-chronicle { position: relative; max-width: none; width: 100%; max-height: 46vh; }
}
.hexr-changelog-list { margin: 0 0 12px 18px; font-size: var(--hexr-fs-base); }
.hexr-changelog-list li { margin-bottom: 4px; }

/* ---------------------------------------------------------- view as (debug) */
.hexr-app .hexr-viewas { padding: 6px 16px; }
.hexr-app .hexr-viewas select { width: auto; max-width: 280px; margin: 0; font-size: var(--hexr-fs-small); padding: 5px 8px; }
.hexr-app .hexr-viewas-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 16px; background: rgba(90, 40, 6, .4); border-top: 1px solid rgba(255, 150, 40, .4);
  border-bottom: 1px solid rgba(255, 150, 40, .4); color: #ffcf8a; font-size: var(--hexr-fs-small); letter-spacing: .04em;
}
.hexr-app .hexr-viewas-banner .hexr-btn { margin: 0; flex: none; }

/* ============================================== FIELD MANUAL + TAB TIPS (0.12.0) */

/* The one-time explainer that sits on top of a tab the first time it opens. */
.hexr-app .hexr-hintcard { position: relative; background: rgba(40, 30, 6, .4); border: 1px solid rgba(255, 210, 58, .32); padding: 11px 34px 11px 13px; margin-bottom: 12px; }
.hexr-app .hexr-hintcard-text { margin: 0; font-size: var(--hexr-fs-base); line-height: 1.5; color: #ffe6a0; }
.hexr-app .hexr-hintclose { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: rgba(255, 230, 160, .65); font-size: var(--hexr-fs-title); line-height: 1; padding: 2px 5px; cursor: pointer; }
.hexr-app .hexr-hintclose:hover { color: var(--hexr-gold); }

/* The manual itself, in the Account tab. */
.hexr-app .hexr-manual .hexr-manual-line { font-size: 12.5px; line-height: 1.55; color: #7fd6a2; margin: 0 0 9px; }
.hexr-app .hexr-manual .hexr-chiprow { margin-top: 15px; }
.hexr-app .hexr-manual-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hexr-accent-a20); }
.hexr-app .hexr-manual-foot .hexr-btn { margin-top: 7px; }

/* A GM's own campaign notes, above the generated rules. */
.hexr-app .hexr-briefing { margin-bottom: 4px; }
/* The manual's chiprow rule wins on source order, so restore the zero top
   margin for the briefing's own leading chiprow. */
.hexr-app .hexr-manual .hexr-briefing .hexr-chiprow:first-child { margin-top: 0; }
.hexr-app .hexr-briefing p { font-size: 12.5px; line-height: 1.55; color: var(--hexr-bright); margin: 0 0 9px; }
.hexr-app .hexr-briefing ul, .hexr-app .hexr-briefing ol { margin: 0 0 9px 18px; padding: 0; }
.hexr-app .hexr-briefing li { font-size: 12.5px; line-height: 1.5; color: var(--hexr-bright); margin-bottom: 4px; }
.hexr-app .hexr-briefing a { color: var(--hexr-gold); }
.hexr-app .hexr-briefing strong { color: #ffe6a0; }

/* ================================================== WAR ROOM / ROSTER (0.13.0) */

/* Header icon buttons: Account and the Field Manual, which live off the
   bottom nav so the seven tabs stay the seven things used every round. */
.hexr-app .hexr-headtools { display: flex; align-items: center; gap: 7px; }
.hexr-app .hexr-headtools .hexr-camp-picker { margin: 0; }
.hexr-app .hexr-iconbtn {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hexr-accent-a42);
  background: rgba(4, 16, 10, .6);
  color: var(--hexr-ink);
  font-family: inherit; font-size: var(--hexr-fs-lead); line-height: 1;
  border-radius: 50%; cursor: pointer; padding: 0;
}
.hexr-app .hexr-iconbtn:active { background: rgba(24, 66, 42, .9); }
.hexr-app .hexr-iconbtn-active { border-color: var(--hexr-accent); color: var(--hexr-bright); box-shadow: 0 0 10px var(--hexr-accent-a30); }

/* Running points total. The state colours are the whole point of the widget:
   a GM and a player both scan for "is this list legal" before anything else. */
.hexr-app .hexr-pts-under { color: var(--hexr-bright); }
.hexr-app .hexr-pts-on { color: var(--hexr-accent); }
.hexr-app .hexr-pts-over { color: #ffb36b; text-shadow: 0 0 8px rgba(255, 179, 107, .35); }
.hexr-app .hexr-pts-empty { color: var(--hexr-muted); text-shadow: none; }
.hexr-app p.hexr-pts-over { font-size: var(--hexr-fs-small); text-shadow: none; }

/* One unit in an order of battle. */
.hexr-app .hexr-unit { border: 1px solid var(--hexr-accent-a20); background: rgba(4, 16, 10, .4); padding: 9px 11px; margin-bottom: 8px; }
.hexr-app .hexr-unit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hexr-app .hexr-unit-name { color: var(--hexr-bright); font-size: var(--hexr-fs-base); }
.hexr-app .hexr-unit-pts { color: var(--hexr-gold); font-family: var(--hexr-font-display); font-size: var(--hexr-fs-title); line-height: 1; white-space: nowrap; flex: none; }
.hexr-app .hexr-unit-pts small { font-size: 8.5px; color: #9a8a52; margin-left: 3px; }
/* Wargear is pasted out of an army builder, so it keeps its line breaks and
   scrolls sideways rather than reflowing someone's carefully aligned list. */
.hexr-app .hexr-unit-gear {
  margin: 7px 0 0; padding: 0; font-family: inherit; font-size: 11.5px;
  line-height: 1.5; color: #5fc488; white-space: pre-wrap; overflow-wrap: break-word;
}
.hexr-app .hexr-unit-actions { display: flex; gap: 6px; margin-top: 8px; }
.hexr-app .hexr-unit-actions .hexr-btn { margin-top: 0; }
.hexr-app .hexr-unit-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hexr-accent-a20); }
.hexr-app .hexr-unit-form textarea.hexr-input { min-height: 88px; resize: vertical; line-height: 1.5; }
.hexr-app .hexr-unit-form .hexr-btn-sm { margin-right: 6px; }

/* Opponent list buttons on a match card, and the panel they open. */
.hexr-app .hexr-listrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hexr-app .hexr-listrow .hexr-btn { margin-top: 0; }
.hexr-app .hexr-rosterview { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hexr-accent-a20); }

/* ============================================ 0.14.0: playtest feedback */

/* Unsurveyed sectors were too close to "empty" to tell apart at a glance.
   Amber says "there is something here you have not looked at" - the same
   colour the tab tips and the over-points warning use for "your attention". */
/* An order chosen before its sector: the map is waiting for a tap. */
.hexr-app .hexr-armedbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(40, 30, 6, .55); border: 1px solid rgba(255, 210, 58, .5);
  color: #ffe6a0; font-size: var(--hexr-fs-base); line-height: 1.45; padding: 9px 11px; margin-bottom: 10px;
}
.hexr-app .hexr-armedbar .hexr-btn { margin-top: 0; width: auto; flex: none; }
.hexr-app .hexr-arming { cursor: crosshair; }
.hexr-app .hexr-arming .hexr-hex { cursor: crosshair; }

/* Engagements: the standing instruction and the manual refresh. */
.hexr-app .hexr-engagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hexr-app .hexr-engagehead .hexr-hint { margin-top: 0; flex: 1; }
.hexr-app .hexr-engagehead .hexr-btn { margin-top: 0; width: auto; flex: none; }
.hexr-app .hexr-engagenote { margin-top: 0; opacity: .8; }

/* An army's faction, beside its name in the order of battle. */
.hexr-app .hexr-unit-faction { color: var(--hexr-muted); font-size: var(--hexr-fs-small); margin-left: 7px; }
/* A whole pasted list needs room; the per-unit box was sized for four lines. */
.hexr-app textarea.hexr-listbox { min-height: 190px; font-size: 12.5px; line-height: 1.5; }

/* A saved board, opened big and centred. The archive strip could show one but
   not at a size anyone could read, and clicking it did nothing. */
.hexr-app .hexr-modal {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 8, 5, .82); padding: 18px;
}
.hexr-app .hexr-modal-box {
  background: var(--hexr-panel); border: 1px solid var(--hexr-accent-line);
  box-shadow: 0 0 40px rgba(20, 90, 48, .35);
  max-width: 900px; width: 100%; max-height: 100%;
  display: flex; flex-direction: column;
}
.hexr-app .hexr-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--hexr-accent-line); flex: none;
}
.hexr-app .hexr-modal-close {
  background: none; border: 0; color: var(--hexr-ink);
  font-size: calc(var(--hexr-fs-numeral) * 0.8); line-height: 1; padding: 0 6px; cursor: pointer;
}
.hexr-app .hexr-modal-close:hover { color: var(--hexr-bright); }
.hexr-app .hexr-modal-body { padding: 12px; overflow: auto; }
.hexr-app .hexr-modal-body svg { width: 100%; height: auto; display: block; }

/* Area-of-operations picker: the screen before the board, when a campaign runs
   more than one theatre. */
.hexr-app.hexr-theatres { padding-bottom: 22px; }
.hexr-app .hexr-theatre-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; padding: 16px;
}
.hexr-app .hexr-theatre-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; text-decoration: none; color: var(--hexr-ink);
  background: rgba(8, 24, 16, .55); border: 1px solid var(--hexr-accent-a30);
}
.hexr-app .hexr-theatre-card:hover { border-color: var(--hexr-accent); box-shadow: 0 0 16px var(--hexr-accent-a20); }
.hexr-app .hexr-theatre-card:focus-visible { outline: 2px solid var(--hexr-gold); outline-offset: 2px; }
.hexr-app .hexr-theatre-thumb {
  display: block; height: 108px; background: rgba(4, 16, 10, .8) center/cover no-repeat;
  border: 1px solid var(--hexr-accent-a20);
}
.hexr-app .hexr-theatre-name { color: var(--hexr-bright); font-size: var(--hexr-fs-lead); letter-spacing: .04em; }
.hexr-app .hexr-theatre-meta { color: var(--hexr-muted); font-size: var(--hexr-fs-small); }
.hexr-app .hexr-theatre-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 16px; }
.hexr-app .hexr-theatre-foot .hexr-btn { margin-top: 0; width: auto; flex: none; }
.hexr-app .hexr-theatre-foot .hexr-hint { margin: 0; }

/* Alliance heading inside the faction picker. */
.hexr-app .hexr-alliance-note { margin: -4px 0 8px; opacity: .8; }

/* ------------------------------------------------- route site bar (0.17.1)
   The door out of the app. Slim on purpose: it sits above a fixed-height game
   window, so every pixel here is a pixel the board does not get. */
.hexr-sitebar {
	display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
	padding: 6px 12px; min-height: 34px;
	background: #04120c; border-bottom: 1px solid var(--hexr-accent-a30);
	font-family: 'Share Tech Mono', ui-monospace, monospace;
	font-size: var(--hexr-fs-base); letter-spacing: .06em;
	overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.hexr-sitebar a { color: #46e88a; text-decoration: none; white-space: nowrap; }
.hexr-sitebar a:hover, .hexr-sitebar a:focus { color: #d8ffe9; text-decoration: underline; }
.hexr-sitebar-home { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.hexr-sitebar-nav { flex: 1 1 auto; min-width: 0; }
.hexr-sitebar-menu { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hexr-sitebar-account { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.hexr-sitebar-who { color: rgba(216, 255, 233, .6); white-space: nowrap; }
@media (max-width: 640px) {
	.hexr-sitebar-nav { display: none; }
	.hexr-sitebar-who { display: none; }
}

/* ------------------------------------------------------ launcher (0.17.1) */
.hexr-launcher { padding: 22px 18px; text-align: left; }
.hexr-launcher-lead { margin: 0 0 14px; color: #d8ffe9; }
.hexr-launcher-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hexr-launcher-row .hexr-btn { flex: 0 1 auto; }
.hexr-launcher-foot { margin: 16px 0 0; font-size: var(--hexr-fs-base); opacity: .75; display: flex; gap: 8px; }

/* ------------------------------------------------- 0.18.0 board layers */
/* A locked sector is a hole in the board: the map image shows through, and
   nothing about it invites a click. */
.hexr-app .hexr-hex-locked {
	fill: rgba(2, 8, 5, .34);
	stroke: var(--hexr-accent-a12);
	stroke-width: .6;
	/* Still clickable: a GM has to be able to select a void to paint it back,
	   and a player clicking one should be told what it is rather than getting
	   no response at all. Orders are refused server-side, not by CSS. */
	cursor: default;
}
.hexr-app .hexr-hex-site {
	font-size: var(--hexr-fs-micro); fill: var(--hexr-gold); opacity: .9;
	paint-order: stroke; stroke: rgba(2, 10, 6, .8); stroke-width: 2px;
}
.hexr-app .hexr-hex-vp {
	font-family: var(--hexr-font-display); font-size: var(--hexr-fs-small); fill: var(--hexr-bright);
	paint-order: stroke; stroke: rgba(2, 10, 6, .8); stroke-width: 2px;
}
.hexr-app .hexr-incoming {
	border-left: 2px solid var(--hexr-alert);
	padding-left: 8px; color: #ffb3a8;
}

/* Standing orders: what is committed but not yet resolved. */
.hexr-app .hexr-orderrow {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 0; border-bottom: 1px solid var(--hexr-accent-a12);
}
.hexr-app .hexr-orderrow:last-of-type { border-bottom: 0; }
.hexr-app .hexr-orderkind {
	font-size: var(--hexr-fs-micro); letter-spacing: .12em; padding: 2px 6px; white-space: nowrap;
	border: 1px solid var(--hexr-accent-soft); color: var(--hexr-muted);
}
.hexr-app .hexr-orderkind-assault { color: var(--hexr-gold); border-color: rgba(255, 210, 58, .5); }
.hexr-app .hexr-ordermsg { flex: 1 1 auto; min-width: 0; font-size: var(--hexr-fs-base); }

/* Landmarks read through the fog - deliberately, so a flashpoint draws people
   to it before anyone has scouted the ground. */
.hexr-app .hexr-hex-site-lg { font-size: var(--hexr-fs-lead); opacity: 1; }
.hexr-app .hexr-logsector {
	font-family: var(--hexr-font-display); font-size: var(--hexr-fs-lead); line-height: 1;
	color: var(--hexr-gold); min-width: 34px; flex: none; text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ================================================== 0.19.0 additions */

/* Round deadline. Orders resolve when the round turns, so this is not
 * decoration - it is the rule made visible. */
.hexr-app .hexr-deadline { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 12px; border: 1px solid var(--hexr-accent-line); background: rgba(4, 16, 10, .6); }
.hexr-app .hexr-deadline-clock { color: var(--hexr-gold); font-size: var(--hexr-fs-title); }
.hexr-app .hexr-deadline-soon { border-color: rgba(255, 90, 71, .6); }
.hexr-app .hexr-deadline-soon .hexr-deadline-clock { color: #ff8a78; }
.hexr-app .hexr-deadline-over .hexr-deadline-clock { color: var(--hexr-muted); }

/* Dismiss the sector panel back to whatever reference tab was open. */
.hexr-app .hexr-hexclose {
  position: absolute; top: 4px; right: 6px; z-index: 6;
  width: 44px; height: 44px; line-height: 1;
  background: none; border: 0; color: var(--hexr-muted);
  font-size: calc(var(--hexr-fs-numeral) * 0.73); cursor: pointer;
}
.hexr-app .hexr-hexclose:hover, .hexr-app .hexr-hexclose:focus { color: var(--hexr-bright); }
.hexr-app .hexr-ctab-panel { position: relative; }

/* Legend. Eight visual codes on one board, previously explained nowhere. */
.hexr-app .hexr-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.hexr-app .hexr-legend li { display: flex; align-items: center; gap: 8px; font-size: var(--hexr-fs-small); color: var(--hexr-muted); line-height: 1.3; }
.hexr-app .hexr-legend-key {
  flex: none; width: 26px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: var(--hexr-fs-small); color: var(--hexr-gold); border: 1px solid transparent;
}
.hexr-app .hexr-legend-outline { border: 2px solid var(--hexr-accent); background: none; }
.hexr-app .hexr-legend-fill { border: 2px solid var(--hexr-accent); background: var(--hexr-accent-a30); }
.hexr-app .hexr-legend-fog { border: 1px solid var(--hexr-accent-a30); background: var(--hexr-accent-a12); }

/* ---------------- touch targets and slow connections
 *
 * The comfortable minimum for a touch target is 44px. Several of the controls
 * a player reaches for most were between 22 and 34, which is what "the hit
 * areas are too small" at the playtest was actually describing. Raised on
 * touch-capable pointers only, so a mouse-driven desktop console keeps its
 * density. */
@media (pointer: coarse) {
  .hexr-app .hexr-stepbtn { min-width: 44px; min-height: 44px; }
  .hexr-app .hexr-ctab { min-height: 46px; }
  .hexr-app .hexr-navitem { min-height: 56px; }
  .hexr-app .hexr-layer { min-height: 44px; }
  .hexr-app .hexr-input, .hexr-app select.hexr-input { min-height: 44px; }
  .hexr-app .hexr-btn-sm { min-height: 40px; }
}

/* Send RP: the amount field was sharing a line with the button, which left it
 * too narrow to read a three-digit number in and put Send under a thumb that
 * was aiming at the field. Below 480 they get a line each. */
@media (max-width: 480px) {
  .hexr-app .hexr-transferrow, .hexr-app .hexr-transfer-form { flex-wrap: wrap; }
  .hexr-app .hexr-transferrow .hexr-input,
  .hexr-app .hexr-transfer-form input { flex: 1 0 100%; min-width: 0; }
  .hexr-app .hexr-transferrow .hexr-actbtn,
  .hexr-app .hexr-transfer-form button { flex: 1 0 100%; width: 100%; }
}

/* An action in flight. Without this a tap on a slow connection looks like
 * nothing happened, which is what produces the second tap. */
body.hexr-busy .hexr-app { cursor: progress; }
body.hexr-busy .hexr-app .hexr-btn,
body.hexr-busy .hexr-app .hexr-actbtn { opacity: .6; }

/* Allegiance gets its own box on the sign-up form. It used to run straight on
 * from the invitation code, so it read as more account fields rather than the
 * first decision of the game. */
.hexr-app .hexr-regbox {
  border: 1px solid var(--hexr-accent-line);
  background: rgba(8, 24, 16, .45);
  padding: 12px 14px 14px;
  margin: 4px 0 14px;
}
.hexr-app .hexr-regbox legend { padding: 0 6px; color: var(--hexr-gold); }
.hexr-app .hexr-regbox .hexr-input { margin-bottom: 10px; }

/* ---------------- pressable vs informational
 *
 * "These also appear to be buttons because they use the same design language
 * as these." A bordered box in this skin means something you can press, and
 * status tags, faction pills and section chips were all wearing one. The rule
 * from here: a border is an affordance. Information is tinted, not outlined. */
.hexr-app .hexr-status {
  border: 0;
  background: var(--hexr-accent-a12);
  border-radius: 2px;
  padding: 3px 9px;
}
.hexr-app .hexr-status-open,
.hexr-app .hexr-status-inprogress { background: rgba(255, 210, 58, .12); }
.hexr-app .hexr-status-reporting { background: rgba(255, 179, 107, .12); }
.hexr-app .hexr-status-disputed { background: rgba(255, 90, 71, .14); }
.hexr-app .hexr-status-resolved { background: var(--hexr-accent-a12); }
.hexr-app .hexr-pill { border: 0; background: var(--hexr-accent-a12); }

/* And the converse: anything actually pressable keeps its outline and says so
   to a pointer. */
.hexr-app button:not(:disabled),
.hexr-app a.hexr-btn { cursor: pointer; }

/* Refresh sits in the topbar pill row, so it reads as part of the status strip
 * rather than an action bar of its own - but it is pressable, so it keeps a
 * border where the other pills lost theirs. */
.hexr-app .hexr-pill-btn {
  border: 1px solid var(--hexr-accent-line);
  color: var(--hexr-ink);
  font-family: inherit;
  cursor: pointer;
  line-height: 1.4;
}
.hexr-app .hexr-pill-btn:hover { color: var(--hexr-bright); border-color: var(--hexr-accent); }

/* A control that is present but cannot act. Dimmed rather than removed: a
 * missing button reads as a broken app, and the rule behind it is worth
 * teaching at the moment somebody reaches for it. */
.hexr-app .hexr-btn-blocked { opacity: .55; }
.hexr-app .hexr-btn-blocked:hover { opacity: .8; }

/* When a requisition lands. Two orders at the same price that read the same
 * are not the same purchase if one answers now and one answers next round. */
.hexr-app .hexr-reqspeed { margin: 2px 0 6px; opacity: .9; }

/* Turn zero. One instruction, above everything, until the GM opens round one. */
.hexr-app .hexr-turnzero { border-color: var(--hexr-gold); }
.hexr-app .hexr-turnzero h3 { color: var(--hexr-gold); }
.hexr-app .hexr-turnzero-steps { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.hexr-app .hexr-turnzero-steps li { font-size: var(--hexr-fs-base); line-height: 1.5; }
.hexr-app .hexr-turnzero-steps .hexr-step-done { color: var(--hexr-muted); }

/* Requisition on the map top bar. The Wallet tab went in 0.24.0 and this is
 * where the money is actually spent, so the number belongs next to the round. */
.hexr-app .hexr-pursebox { margin-left: 8px; }
.hexr-app .hexr-pursebox .hexr-numeral small { font-size: var(--hexr-fs-micro); margin-left: 2px; opacity: .75; }

/* One commander's send-RP form, revealed from their row on the Intel tab. */
.hexr-app .hexr-sendrow > td { background: var(--hexr-inset); padding: 10px 12px; }
.hexr-app .hexr-sendcell { text-align: right; white-space: nowrap; }

/* Plus/minus on number fields. A native spinner is two 10px arrows in the
 * corner of the box - unusable on a phone, and the thing the 15 September
 * playtest found hardest on the whole board. 44px is the minimum target. */
.hexr-app .hexr-stepper { display: flex; align-items: stretch; gap: 6px; margin: 4px 0; }
.hexr-app .hexr-stepper input[type="number"] {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: var(--hexr-fs-lead); -moz-appearance: textfield;
}
.hexr-app .hexr-stepper input[type="number"]::-webkit-outer-spin-button,
.hexr-app .hexr-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.hexr-app .hexr-stepper-btn {
  flex: 0 0 auto; min-width: 48px; min-height: 48px;
  font-family: var(--hexr-font-display); font-size: var(--hexr-fs-title); line-height: 1;
  color: var(--hexr-bright); background: var(--hexr-inset);
  border: 1px solid var(--hexr-accent-a45); border-radius: var(--hexr-radius);
  cursor: pointer; touch-action: manipulation; user-select: none;
}
.hexr-app .hexr-stepper-btn:active { background: var(--hexr-accent-a30); }

/* An order standing on the sector you are looking at, with the way to undo it. */
.hexr-app .hexr-orderrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; margin: 0 0 6px;
  border: 1px solid var(--hexr-accent-a30); background: var(--hexr-inset);
}
.hexr-app .hexr-orderrow-text { flex: 1 1 160px; min-width: 0; font-size: var(--hexr-fs-small); }