/* The Shell's own styles: bars, menus, overlays, sign-in. Every colour from Foundations. */

/* base reset — element selectors only, so every component class still wins */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); }
#tabs[hidden] { display: none; }
/* print: the screen's content alone (the report sheet), never the app around it */
@media print { #bar, #tabs, #overlay, #toast { display: none !important; } body, html, .v9 { background: #fff; } main#view { padding: 0 !important; } }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
img { max-width: 100%; }

.v9 { min-height: 100dvh; background: var(--bg); }
.v9-boot { min-height: 100dvh; display: grid; place-items: center; }
.v9-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .v9-spin { animation: v9spin .8s linear infinite; } @keyframes v9spin { to { transform: rotate(360deg); } } }

/* ---------- bars ---------- */
#bar { position: sticky; top: 0; z-index: 40; }
.v9-bar { position: relative; height: 56px; display: flex; align-items: center; gap: 22px; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  background: var(--surface); border-bottom: 1px solid var(--line); }
.v9-bar.phone { height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); gap: 10px; }
.v9-brand { display: inline-flex; align-items: center; gap: 9px; font: 600 15px var(--font); color: var(--text); white-space: nowrap; }
.v9-brand > span:last-child { font-weight: 400; color: var(--muted); }
.v9-logo { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--accent-on); display: grid; place-items: center; box-shadow: inset 0 -2px 0 var(--accent-hover); }
.v9-logo .du-icon { width: 17px; height: 17px; }
.v9-nav { display: flex; align-self: stretch; gap: 2px; }
.v9-nav a { display: flex; align-items: center; gap: 7px; padding: 0 12px; font: 500 14px var(--font); color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap; }
.v9-nav a:hover { color: var(--text); }
.v9-nav a[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.v9-count { min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; background: var(--bad-bg); color: var(--bad); font: 600 11px/18px var(--font); text-align: center; }
.v9-bar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.v9-search { width: 260px; height: 34px; border: 1px solid var(--line-2); border-radius: var(--r-s); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px;
  font: var(--t-small); color: var(--faint); background: var(--surface); text-align: left; }
.v9-search span:not(.du-kbd) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v9-search:hover { border-color: var(--line-3); }
.v9-ai { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-bg); }
.v9-ai:hover { background: var(--accent-bg); border-color: var(--accent); }
.v9-icon-btn { width: 38px; height: 38px; border-radius: var(--r-s); display: grid; place-items: center; color: var(--muted); }
.v9-icon-btn:hover { background: var(--hover); color: var(--text); }
.v9-avatar { width: 32px; height: 32px; font-size: 12px; cursor: pointer; border: 0; }
.v9-menu { position: absolute; right: 16px; top: calc(100% + 6px); width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 6px; display: grid; z-index: 60; }
.v9-menu-who { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: grid; gap: 2px; }
.v9-menu-who small { color: var(--muted); font: var(--t-small); }
.v9-menu a, .v9-menu button { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--r-s); font: 500 14px var(--font); color: var(--text); text-decoration: none; text-align: left; }
.v9-menu a:hover, .v9-menu button:hover { background: var(--hover); }

/* ---------- overlays ---------- */
.v9-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(17, 24, 39, .32); }
.v9-panel { position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; outline: none; }
@media (max-width: 1023px) {
  .v9-panel { top: auto; left: 0; width: 100%; max-height: 86dvh; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom); }
}
.v9-panel-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--accent-text); }
.v9-panel-head b { flex: 1; color: var(--text); font: var(--t-title); }
.v9-panel-body { padding: 16px; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.v9-h3 { margin: 6px 0 0; font: var(--t-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--faint); }
.v9-p { margin: 0; font: var(--t-body); color: var(--text); }
.v9-fine { margin: 4px 0 0; font: var(--t-small); color: var(--faint); }
.v9-quote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent-line); background: var(--machine-field); border-radius: 0 var(--r-s) var(--r-s) 0; font: var(--t-body); color: var(--text); }
.v9-photo { width: 100%; border-radius: var(--r-s); border: 1px solid var(--line); }
.v9-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font: var(--t-body); }
.v9-dl dt { color: var(--muted); } .v9-dl dd { margin: 0; color: var(--text); font-weight: 500; }
.v9-conf { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px 14px; border-radius: var(--r-s); background: var(--machine-field); border: 1px solid var(--machine-line); }
.v9-conf span { font: var(--t-small); color: var(--muted); } .v9-conf b { font: 600 15px var(--font); }
.v9-conf .du-meter { grid-column: 1 / -1; background: var(--machine-bg); }
.v9-conf small { grid-column: 1 / -1; font: var(--t-small); color: var(--muted); }
.v9-points { margin: 0; padding-left: 20px; display: grid; gap: 10px; font: var(--t-body); }
.v9-loading { display: flex; align-items: center; gap: 10px; font: var(--t-small); color: var(--muted); }
.v9-ask { display: grid; gap: 8px; }
.v9-ask textarea { width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); font: var(--t-body); color: var(--text); background: var(--surface); }
.v9-ask textarea:focus { outline: none; border-color: var(--accent); }
.v9-ask .du-btn { justify-self: start; }
.v9-answer { display: grid; gap: 10px; }
.v9-answer p { margin: 0; font: var(--t-body); }
.v9-ev { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.v9-ev li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); font: var(--t-small); }
.v9-ev span { color: var(--muted); }

.v9-palette { position: fixed; z-index: 80; left: 50%; top: 12vh; transform: translateX(-50%); width: min(620px, calc(100vw - 24px)); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; }
.v9-palette-in { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 52px; border-bottom: 1px solid var(--line); color: var(--faint); }
.v9-palette-in input { flex: 1; border: 0; outline: 0; font: 400 16px var(--font); color: var(--text); background: transparent; }
.v9-palette-list { max-height: 50vh; overflow-y: auto; padding: 6px; display: grid; }
.v9-palette-list button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-s); text-align: left; color: var(--muted); }
.v9-palette-list button span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.v9-palette-list button b { color: var(--text); font: 500 14px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.v9-palette-list button small { font: var(--t-small); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v9-palette-list button em { font: 500 11px var(--font); font-style: normal; color: var(--faint); }
.v9-palette-list button[aria-selected="true"] { background: var(--accent-bg); color: var(--accent-text); }
.v9-palette-empty { padding: 18px; text-align: center; font: var(--t-small); color: var(--muted); }
.v9-palette-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--sunk); font: var(--t-small); color: var(--faint); }
.v9-palette-foot span { display: inline-flex; align-items: center; gap: 4px; }


/* ---------- toast ---------- */
#toast { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: calc(92px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 24px); }
.is-wide #toast { bottom: 28px; }
.v9-toast { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--r); background: var(--text); color: var(--surface); font: 500 14px var(--font); box-shadow: var(--shadow-lg); }
.v9-toast button { color: var(--accent-line); font: 600 14px var(--font); }

/* ---------- sign-in ---------- */
.v9-auth-page { display: grid; place-items: center; padding: 24px 16px; }
.v9-auth { width: min(400px, 100%); display: grid; gap: 18px; justify-items: center; }
.v9-auth-card { width: 100%; padding: 24px; display: grid; gap: 14px; }
.v9-auth-card h1 { margin: 0; font: var(--t-page); }
.v9-auth-card p { margin: 0; font: var(--t-small); color: var(--muted); }
.v9-auth-card label { display: grid; gap: 6px; font: 500 13px var(--font); color: var(--text); }
.v9-auth-card input { height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); font: 400 16px var(--font); color: var(--text); background: var(--surface); }
.v9-auth-card input:focus { outline: none; border-color: var(--accent); }
.v9-auth-err { min-height: 18px; color: var(--bad) !important; }
.v9-soon { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font: 500 14px var(--font); color: var(--faint); cursor: default; }
.v9-demo { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.v9-demo small { font: var(--t-small); color: var(--muted); }

/* No browser focus ring around anything: a focused control shows it with its own border (bordered controls) or a
 * quiet fill (borderless ones). One line, never a second box. */
:focus, :focus-visible { outline: none; }
button:not(.du-btn):not(.lv-chip):not(.lv-key):not(.lv-model):focus-visible, a:focus-visible, [role="button"]:focus-visible { background-color: var(--hover); }
.lv-chip:focus-visible, .lv-key:focus-visible, .lv-model:focus-visible, .lv-stepbtn:focus-visible { border-color: var(--accent); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }

/* ---------- phone: navigation at the thumb ---------- */
.v9.is-phone { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface); border-top: 1px solid var(--line); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.v9-tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; height: 60px; font: 500 11.5px var(--font); color: var(--muted); }
.v9-tab .du-icon { width: 22px; height: 22px; }
.v9-tab.on { color: var(--accent-text); }
.v9-tab:disabled { color: var(--line-3); }
.v9-tab i { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bad); color: #fff; font: 600 10px/16px var(--font); font-style: normal; }
.v9-tab i.live { min-width: 0; width: 8px; height: 8px; padding: 0; top: 10px; left: calc(50% + 8px); background: var(--accent); }
.v9.is-phone .du-dock { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.v9-dot { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--font); color: var(--muted); }
.v9-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #12B76A; }
.v9-dot.off::before { background: #F79009; }
.v9.is-phone .v9-menu { position: fixed; top: auto; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); right: 12px; }
/* phone: messages appear above the thumb zone, never over the action dock */
.is-phone #toast { top: calc(60px + env(safe-area-inset-top, 0px)); bottom: auto; }

.v9-fine a { color: var(--accent-text); font-weight: 600; }