/* Holon — shell chrome layered over app.css (loaded after it, so these win).
   Only app.css tokens are used here, so light and dark stay in lockstep.
   Scope: the topbar LINGO chip, the read-only demo note, the standards bar. */

/* The shell grows a third row so the standards bar sits below the content
   area — part of the layout, never fixed or floating over a view. */
.app{grid-template-rows:var(--bar) 1fr auto;
  grid-template-areas:"side bar" "side main" "side foot"}

/* ---- LINGO chip -----------------------------------------------------------
   The balance comes from the Stage D simulated ledger. That has to be legible
   without hovering, so the label rides inline instead of in a title. */
.lingo-chip .sim{font-weight:600;font-size:.68rem;letter-spacing:.02em;
  opacity:.68;white-space:nowrap}
/* app.css sets display:inline-flex on the chip, which outranks the UA rule for
   [hidden] — without this the hidden attribute is inert and the chip leaks onto
   the marketplace and Verify screens. */
.lingo-chip[hidden]{display:none}

/* ---- sidebar, public read-only deployment --------------------------------
   No local Pod to configure and no wallet to connect, so the demo says what it
   is in one line rather than showing shell commands nobody can run. */
.demo-note{font-size:.72rem;line-height:1.5;color:var(--on-surface-variant);
  background:var(--surface-1);border:1px solid var(--outline-variant);
  border-radius:14px;padding:11px 12px}

/* ---- standards bar --------------------------------------------------------
   Five standards this build actually runs; each one links into Verify, where
   the on-chain evidence for it lives. */
.stdbar{grid-area:foot;display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;
  padding:7px 18px;background:var(--surface);
  border-top:1px solid var(--outline-variant);z-index:4}
.stdbar .std{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;
  border-radius:999px;text-decoration:none;white-space:nowrap;
  font-size:.72rem;line-height:1.2;color:var(--on-surface-variant);
  transition:.18s var(--ease)}
.stdbar .std:hover{background:color-mix(in srgb,var(--on-surface) 7%,transparent);
  color:var(--on-surface)}
.stdbar .std:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.stdbar .std svg{width:14px;height:14px;flex:none;opacity:.7}
.stdbar .std:hover svg{opacity:1}
.stdbar .std b{font-weight:700;letter-spacing:-.01em;color:var(--on-surface)}
.stdbar .std .sep{opacity:.4}

@media (max-width:1180px){
  .stdbar{padding:6px 12px}
  .stdbar .std{padding:4px 8px;font-size:.68rem;gap:6px}
}

/* ---- marketplace mode -----------------------------------------------------
   The public build is judged as an agent marketplace: the topbar names it on
   one line, with the product credit beside — not a personal greeting. */
[data-mode=marketplace] .greet{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
[data-mode=marketplace] .greet .greet-sub{margin-top:0}

/* Escape hatch out of marketplace mode, local instances only. */
.mode-back{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;
  border-radius:12px;font-size:.8rem;font-weight:600;text-align:left;
  color:var(--on-surface-variant);border:1px solid var(--outline-variant);
  background:var(--surface-1);transition:.18s var(--ease)}
.mode-back:hover{background:var(--surface-2);color:var(--on-surface)}
.mode-back:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ---- phones and narrow windows --------------------------------------------
   The shell grid's content column was `1fr`, which never shrinks below the
   width of its content — on a phone the whole main area rendered wider than
   the screen and was clipped on the right. `minmax(0,1fr)` plus `min-width:0`
   on the flex/grid children lets the content column actually be as narrow as
   the screen; the rules below then lay the pieces out for that width. */
.app{grid-template-columns:var(--side) minmax(0,1fr)}
.main,.appbar,.greet,.askwrap,.status-group{min-width:0}
.askwrap .ask{min-width:0;width:100%}

@media (max-width:640px){
  :root{--side:56px;--bar:56px}
  .sidebar{padding:10px 6px}
  .sidebar .brand{padding:0 0 8px}
  .rail .item{padding:9px 0}
  .appbar{gap:8px;padding:0 10px}
  .greet h1{font-size:.88rem}
  [data-mode=marketplace] .greet .greet-sub{display:none}
  .askwrap{flex:1 1 80px;height:36px;padding:0 10px;gap:6px}
  .askwrap .ask-ic{display:none}
  .askwrap .ask{font-size:16px}          /* 16px stops iOS zooming the page on focus */
  .status-group{gap:6px}
  .icon-btn{width:34px;height:34px}
  /* four rows of standards on a phone is a wall; Verify carries the same links */
  .stdbar{display:none}
  .mk .scroll,.scroll.mk{padding:12px 10px 24px}
  .mk-hero-h{font-size:1.3rem}
  .mk-hero-sub,.mk-lead{font-size:.9rem}
  .mk-toolbar{gap:10px;padding:10px}
  .mk-search{flex:1 1 100%}
  .mk-search .btn{padding:8px 12px}
  .mk-toolbar-links{flex:1 1 100%}
  .mk-home{grid-template-columns:1fr}
  .mk-sec-head{flex-wrap:wrap;gap:8px}
  .mk-fields{flex-direction:column}
  .mk-field.narrow{max-width:none}
  .mk-actions .btn{flex:1 1 auto}
  .mk-row-acts{flex-wrap:wrap}
  /* tables scroll sideways inside their own container instead of folding
     every cell into one word per line; the page itself never scrolls sideways */
  .mk-scroll-x .mk-table{min-width:720px}
  .mk-table th,.mk-table td{padding:8px 10px}
  .field,select.field,textarea.field{font-size:16px}
  .chat-input textarea,#chatInput{font-size:16px}
}

/* The scroll container is a flex item; with the default min-width:auto one
   non-wrapping row inside it (the registry-id lookup row is ~400px) widened
   the whole column past the phone screen. Let it shrink, and let the rows
   wrap or their fields give way instead. */
.view,.scroll{min-width:0}
.mk-search .field,.mk-ask-row .field,.mk-lookup-row .field{min-width:0;flex:1 1 60px}
@media (max-width:640px){
  .mk-lookup-row{flex-wrap:wrap}
  .mk-lookup-row select.field{flex:1 1 100%}
  .mk-lookup-row input.field{flex:1 1 160px}
}

/* the Pod card carries display rules of its own; [hidden] must still win */
.pod-card[hidden]{display:none}