/* Echo app shell shared by the Interview Suite: the MVP pages (/i, /c, start page) and the dashboard (8088, which
   proxies /static/* to this app). Left menu as in Echo (collapsed icon rail, expandable with labels), user bar on top,
   content in one white shell, grey header block. The menu itself is built by rail.js. Measured on the live Echo app
   (2026-11-03): rail items 32px high, radius 2px, active #DBF7F9; labels 14px; shell radius 8px. */
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/static/fonts/MonaSans-latin.woff2") format("woff2"); }
@font-face { font-family: "Inconsolata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/static/fonts/Inconsolata-latin.woff2") format("woff2"); }

:root {
  --sh-bg: #f7f7f7; --sh-panel: #ffffff; --sh-ink: #080808; --sh-muted: #757575; --sh-line: #e6e6e6;
  --sh-accent: #18848c; --sh-active: #dbf7f9; --sh-hover: #ededed;
  --sh-shadow: 0 0 6px rgba(0, 0, 0, .08);
  --sh-rail: 72px; --sh-rail-open: 196px;
  --font-sans: "Proxima Nova", "proxima-nova", "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Inconsolata", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sh-bg: #111416; --sh-panel: #1a1e21; --sh-ink: #eceeef; --sh-muted: #8a9296; --sh-line: #2c3236;
    --sh-accent: #3db3bb; --sh-active: #173b3e; --sh-hover: #22282b; --sh-shadow: none; }
}
:root[data-theme="dark"] { --sh-bg: #111416; --sh-panel: #1a1e21; --sh-ink: #eceeef; --sh-muted: #8a9296; --sh-line: #2c3236;
  --sh-accent: #3db3bb; --sh-active: #173b3e; --sh-hover: #22282b; --sh-shadow: none; }

body { font-family: var(--font-sans); background: var(--sh-bg); -webkit-font-smoothing: antialiased; }

/* ---- left menu ---- */
.rail { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sh-rail); display: flex; flex-direction: column;
  padding: 10px 14px 12px; background: var(--sh-bg); overflow: hidden; }
.rail a, .rail button { font: inherit; }
.rail-logo { display: flex; align-items: center; gap: 6px; height: 24px; padding-left: 10px; margin-bottom: 26px; color: var(--sh-ink); text-decoration: none; }
.rail-logo svg { width: 22px; height: 22px; flex: none; color: var(--sh-panel); }
.rail-logo .rail-word { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.rail-items { display: flex; flex-direction: column; gap: 8px; }
.rail-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 13px; border-radius: 2px; color: var(--sh-ink);
  text-decoration: none; font-size: 14px; white-space: nowrap; }
.rail-item svg { width: 16px; height: 16px; flex: none; }
.rail-item:hover { background: var(--sh-hover); color: var(--sh-ink); }
.rail-item.on { background: var(--sh-active); color: var(--sh-ink); }
.rail-item.on svg { color: var(--sh-accent); }
.rail-sep { height: 1px; background: var(--sh-line); margin: 4px 6px; }
.rail-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.rail-toggle { display: flex; align-items: center; height: 28px; padding: 0 0 0 14px; border: 0; background: transparent; color: var(--sh-ink); cursor: pointer; min-height: 0; border-radius: 2px; }
.rail-toggle:hover { background: var(--sh-hover); }
.rail-toggle svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.rail .rail-label, .rail .rail-word { display: none; }
html.rail-open .rail { width: var(--sh-rail-open); }
html.rail-open .rail .rail-label, html.rail-open .rail .rail-word { display: inline; }
html.rail-open .rail-toggle svg { transform: rotate(90deg); }

/* ---- frame: user bar + white shell ---- */
.frame { margin-left: var(--sh-rail); min-height: 100vh; padding: 0 16px 16px 0; display: flex; flex-direction: column; min-width: 0; }
html.rail-open .frame { margin-left: var(--sh-rail-open); }
.userbar { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .4rem 1rem; padding: 4px 0;
  font-size: 14px; color: var(--sh-ink); }
.userbar .brandmark { margin-right: auto; }
.brandmark { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 16px; color: var(--sh-ink); }
.brandmark svg, .brandmark img { width: 22px; height: 22px; }
.shell { flex: 1; background: var(--sh-panel); border-radius: 8px; box-shadow: var(--sh-shadow); padding: 32px 32px 40px; min-width: 0; }

@media (max-width: 760px) {
  .rail, html.rail-open .rail { position: static; width: auto; height: auto; flex-direction: row; align-items: center; gap: 4px; padding: 8px 12px; overflow-x: auto; }
  .rail-logo { margin: 0 8px 0 0; padding-left: 0; }
  .rail-items { flex-direction: row; gap: 4px; }
  .rail-sep { width: 1px; height: 20px; margin: 0 4px; }
  .rail-bottom { display: none; }
  .rail .rail-label, .rail .rail-word { display: none !important; }
  .frame, html.rail-open .frame { margin-left: 0; padding: 0; }
  .userbar { padding: 0 16px; }
  .shell { border-radius: 0; padding: 16px; }
}

/* ---- "View as" (admin preview), in the user bar ---- */
.viewas { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; padding: 3px 4px 3px 10px; border-radius: 6px;
  background: var(--sh-panel); box-shadow: var(--sh-shadow); font-size: 13px; }
.viewas-l { color: var(--sh-muted); }
.viewas.on { background: #fff8ec; }
.viewas.on .viewas-l { color: #8a5a0a; font-weight: 600; }
.viewas-seg { display: inline-flex; border: 1px solid var(--sh-accent); border-radius: 6px; overflow: hidden; }
.viewas-b { border: 0; border-radius: 0; min-height: 26px; padding: 0 10px; font: inherit; font-size: 13px; background: var(--sh-panel); color: var(--sh-accent); cursor: pointer; }
.viewas-b + .viewas-b { border-left: 1px solid var(--sh-accent); }
.viewas-b.on { background: var(--sh-accent); color: #fff; }
.viewas-sel { font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid rgba(8, 8, 8, .2); border-radius: 6px; max-width: 18rem; background: var(--sh-panel); color: var(--sh-ink); }
.userbar .viewas ~ .muted { margin-left: 0; }