/* frontend/shared/shell.css | the one bar every module wears.
 *
 * Every selector is prefixed `ds-`. Not decoration: the three modules between
 * them define `active`, `brand`, `check`, `ghost`, `hidden`, `ok`, `primary`,
 * `sub` and `top-actions` with different meanings. The prefix means the shell
 * drops into any of them without that collision audit having to come out right.
 *
 * Height is --shell-h, declared in tokens.css, because a module with a
 * full-height layout has to subtract it. Hard-coding it here is what pushed the
 * socket studio 46px below the fold the first time.
 */

.ds-shell {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--shell-h);
  padding-inline: var(--space-5);
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  position: sticky;
  top: 0;
  z-index: 60;
}

/* -------------------------------------------------------------- brand --- */
.ds-shell-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--ink);
}
.ds-shell-brand svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

/* ---------------------------------------------------------------- nav --- */
.ds-shell-nav { display: flex; gap: var(--space-1); }
.ds-shell-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--control-h);
  padding-inline: var(--space-5);
  border-radius: var(--radius);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ds-shell-nav a svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.ds-shell-nav a:hover { background: var(--sunken); color: var(--ink); }

/* The current module is marked by weight and a filled chip, not by colour
   alone -- colour on its own is not a signal everyone receives. */
.ds-shell-nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}
.ds-shell-nav a[aria-current="page"] svg { opacity: 1; }

.ds-shell-spacer { flex: 1 1 auto; }

/* --------------------------------------------------------------- meta --- */
.ds-shell-meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.ds-shell-wallet {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--control-h);
  padding-inline: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  white-space: nowrap;
  font-size: var(--text-sm);
}
.ds-shell-wallet b { color: var(--ink); font-weight: 600; font-size: var(--text-base); }
.ds-shell-wallet svg { width: 14px; height: 14px; flex: none; }
/* State is carried by a word and a border as well as a colour. */
.ds-shell-wallet.ds-low { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.ds-shell-wallet.ds-low b { color: var(--warn); }
.ds-shell-wallet.ds-blocked { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.ds-shell-wallet.ds-blocked b { color: var(--danger); }

.ds-shell-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-2);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-shell-user svg { width: 14px; height: 14px; flex: none; }

.ds-shell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: var(--control-h);
  height: var(--control-h);
  padding-inline: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.ds-shell-btn svg { width: 15px; height: 15px; flex: none; }
.ds-shell-btn:hover { background: var(--sunken); color: var(--ink); border-color: var(--ink-3); }
.ds-shell-btn:active { background: var(--line-soft); }

/* The language picker wears the button styling, but it is a <select>: the
   browser draws its own arrow and its own padding, and `justify-content`
   does nothing to a select's text. Kept narrow -- it shows a two-letter
   code, and the full language name is on the option's title. */
/* `width: auto; flex: none` because each page styles its own form controls, and
   a page-wide `select { width: 100% }` stretched this one across the bar until
   it squeezed the signed-in name to three letters and pushed Help and the theme
   button's labels out of their borders. */
.ds-shell-lang {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  flex: none;
  padding-inline: var(--space-3);
  min-width: 0;
  text-align: center;
  font-variant-numeric: normal;
  letter-spacing: .02em;
}
.ds-shell-lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------------- narrow --- */
@media (max-width: 900px) {
  .ds-shell { gap: var(--space-4); padding-inline: var(--space-4); }
  .ds-shell-brand span { display: none; }
  .ds-shell-nav a { padding-inline: var(--space-4); min-width: var(--control-h);
                    justify-content: center; }
  .ds-shell-nav a span { display: none; }   /* icon-only, aria-label carries the name */
  .ds-shell-user { display: none; }
}
@media (max-width: 620px) {
  .ds-shell-btn span { display: none; }
}
/* Wallet, demo, help and theme are all icon-only by here, and on the narrowest
   phone the four of them plus the module nav still ran nine pixels over. */
@media (max-width: 400px) {
  .ds-shell { gap: var(--space-2); padding-inline: var(--space-2); }
  .ds-shell-meta { gap: var(--space-1); }
  .ds-shell-nav { gap: 0; }
  /* The wallet is the only elastic thing left in the bar. The balance is what
     matters; its icon and its status word are not worth a scrollbar. The low
     and blocked states still colour the chip. */
  .ds-shell-wallet svg, .ds-shell-wallet span { display: none; }
  .ds-shell-wallet { padding-inline: 6px; }
}

/* The help link is a button that happens to be an anchor. */
.ds-shell-help { text-decoration: none; }

/* Any rule that sets `display` outranks the user agent's [hidden]{display:none},
   and every hideable thing in this header sets one -- so a hidden wallet still
   took up 89px of the bar in local mode, and the demo button stayed on screen
   during a demo. One rule, where all of them route through. */
.ds-shell [hidden],
.ds-demo[hidden],
.ds-demo [hidden] { display: none !important; }

/* ========================================================== guided demo ===
 * The bar a presenter reads off during a twenty-minute demonstration. It sits
 * at the foot of every module, and demo.js pads the body by its height so the
 * last control on a page never hides behind it.
 *
 * Its own colours, deliberately: this must be unmistakably not the product
 * chrome, so that nobody in the room mistakes the presenter's script for part
 * of what they are being sold. Fixed values, not page tokens -- the bar reads
 * the same in both themes on purpose.
 */
.ds-demo {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: #12182B;
  color: #E7ECF7;
  border-block-start: 2px solid #F2A93B;
  box-shadow: 0 -8px 28px rgb(6 10 20 / .35);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}
.ds-demo[hidden] { display: none; }

.ds-demo-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ds-demo-gap { flex: 1 1 auto; }

.ds-demo-badge {
  font: 700 12.5px / 1 var(--font-mono);
  letter-spacing: .1em;
  padding: 5px 8px;
  border-radius: 4px;
  background: #F2A93B;
  color: #241703;
  flex: none;
}
.ds-demo-pos { color: #A9B6D4; font-variant-numeric: tabular-nums; flex: none; }
.ds-demo-title { font-size: var(--text-base); font-weight: 600; }
.ds-demo-clock {
  font: 500 12.5px / 1 var(--font-mono);
  color: #A9B6D4;
  font-variant-numeric: tabular-nums;
  flex: none;
}
/* Over the budget for this step. Colour alone is not the signal -- the numbers
   next to it already say 3:41 / 2:00. */
.ds-demo-clock.ds-demo-over { color: #FFC86B; }

.ds-demo-nav { display: flex; gap: var(--space-2); flex: none; }
.ds-demo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px;
  min-width: 40px;
  padding-inline: var(--space-4);
  border: 1px solid #33406A;
  border-radius: var(--radius);
  background: #1B2440;
  color: #E7ECF7;
  font: 600 var(--text-sm) / 1 var(--font-sans);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ds-demo-btn:hover:not(:disabled) { background: #26325A; border-color: #4A5A91; }
.ds-demo-btn:disabled { opacity: .45; cursor: not-allowed; }
.ds-demo-next { background: #2F62F0; border-color: #2F62F0; color: #fff; }
.ds-demo-next:hover:not(:disabled) { background: #1D4ED8; border-color: #1D4ED8; }
.ds-demo-stop { background: transparent; border-color: #7B3A38; color: #FFB4AE; }
.ds-demo-stop:hover:not(:disabled) { background: #7B3A38; color: #fff; border-color: #7B3A38; }
.ds-demo :focus-visible { outline: 2px solid #FFC86B; outline-offset: 2px; }

/* The line to read out. Large enough to catch across a desk, and held to a
   readable measure rather than stretched over a 27-inch screen. */
.ds-demo-say {
  margin: 0;
  max-width: 96ch;
  font-size: var(--text-base);
  line-height: var(--leading);
  color: #F3F6FC;
}
.ds-demo-body { display: grid; gap: var(--space-2); max-width: 96ch; }
.ds-demo-body[hidden] { display: none; }
.ds-demo-line { margin: 0; color: #B9C5E0; }
.ds-demo-line b { color: #F2A93B; font-weight: 600; }

@media (max-width: 720px) {
  .ds-demo { padding: var(--space-3) var(--space-4); }
  .ds-demo-title { flex-basis: 100%; }
  .ds-demo-nav { width: 100%; }
  .ds-demo-nav .ds-demo-btn { flex: 1 1 auto; }
}