/* The Nelix design standard (~/nelix-changes-work/DESIGN-STANDARD.md), shared by every signed-in page.
   Loaded last in shell.html, so the older pages (Learn, Plan, Usage, Account, Team, Feedback, the
   project tabs, run, schematic, report) get the same titles, buttons, tabs and phone tap targets as
   the redesigned ones (Overview, Projects, Runs). The general rules use :where(#main), so a page's
   own more specific styles (the Overview, Design Chat) still win. Only sizes and spacing; no colours. */
/* Colours (owner, 2026-10-10, second decision): the previous near-black on every page (values from the
   pre-graphite backup); Design Chat stays light (html.nx-light-chat), with the lab sidebar dark. */
:root {
  --nx-bg: #0a0a10; --nx-card: #0f0e17; --nx-raised: #13111f; --nx-edge: #1e1c2b; --nx-edge-2: #2c2940; --nx-edge-hover: #4a4566;
  --nx-text: #eceaf5; --nx-text-2: #d5d2dc; --nx-body: #a9a6bd; --nx-muted: #8e8aa6;
  --nx-link: #b9a6ff; --nx-link-hi: #d6cbff; --nx-focus: #b9a6ff; --nx-primary: #6a47f0; --nx-primary-hi: #7a5af5;
  --nx-bubble: #2a2150; --nx-bubble-ink: #f0eef6; --nx-code-ink: #c9b8ff; --nx-code-bg: #241e45; --nx-code-panel: #16141f;
  --nx-accent-soft: #241e45; --nx-accent-edge: #2f2857;
  --nx-ok: #7ee2a8; --nx-ok-bg: #12261c; --nx-ok-edge: #1e3a2a;
  --nx-bad: #ffb4a8; --nx-bad-bg: #2a1512; --nx-bad-edge: #3a2420;
  --nx-warn: #f1cf8f; --nx-warn-bg: #2a2010; --nx-warn-edge: #3a3222;
  --nx-hover: rgba(255, 255, 255, 0.035); --nx-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --nx-info: #a9d2f7; --nx-info-bg: rgba(63, 143, 214, 0.2); --nx-stop: #3a3558; --nx-stop-hi: #4a4470;
}
/* Design Chat: light, like Claude chat (light-chat-design.html) */
html.nx-light-chat {
  color-scheme: light;
  --nx-bg: #F7F7FA; --nx-card: #FFFFFF; --nx-raised: #EEEDF5; --nx-edge: #E4E3EC; --nx-edge-2: #DCDAE6; --nx-edge-hover: #C9C6D6;
  --nx-text: #1B1A22; --nx-text-2: #3E3B4F; --nx-body: #5F5C72; --nx-muted: #6B6880;
  --nx-link: #5B3FE0; --nx-link-hi: #3F25B8; --nx-focus: #5B3FE0; --nx-primary: #6A47F0; --nx-primary-hi: #5B3FE0;
  --nx-bubble: #E9E4FF; --nx-bubble-ink: #2A1F66; --nx-code-ink: #4B2FD1; --nx-code-bg: #EEEAFF; --nx-code-panel: #F6F5FA;
  --nx-accent-soft: #F1EEFF; --nx-accent-edge: #CFC6F5;
  --nx-ok: #1E7A4C; --nx-ok-bg: #EAF7EF; --nx-ok-edge: #B9E3C8;
  --nx-bad: #B4382A; --nx-bad-bg: #FDEDEA; --nx-bad-edge: #F2C3BB;
  --nx-warn: #8A5A00; --nx-warn-bg: #FCF4E3; --nx-warn-edge: #EBD3A0;
  --nx-hover: rgba(20, 18, 40, 0.045); --nx-shadow: 0 2px 8px rgba(20, 18, 40, 0.06);
  --nx-info: #1F5FA8; --nx-info-bg: #E8F1FB; --nx-stop: #3E3B4F; --nx-stop-hi: #1B1A22;
}
/* the lab sidebar stays dark on the Design Chat page */
html.nx-light-chat .side {
  color-scheme: dark;
  --nx-bg: #0a0a10; --nx-card: #0f0e17; --nx-raised: #13111f; --nx-edge: #1e1c2b; --nx-edge-2: #2c2940; --nx-edge-hover: #4a4566;
  --nx-text: #eceaf5; --nx-text-2: #d5d2dc; --nx-body: #a9a6bd; --nx-muted: #8e8aa6;
  --nx-link: #b9a6ff; --nx-link-hi: #d6cbff; --nx-focus: #b9a6ff; --nx-primary: #6a47f0; --nx-primary-hi: #7a5af5;
  --nx-bubble: #2a2150; --nx-bubble-ink: #f0eef6; --nx-code-ink: #c9b8ff; --nx-code-bg: #241e45; --nx-code-panel: #16141f;
  --nx-accent-soft: #241e45; --nx-accent-edge: #2f2857;
  --nx-ok: #7ee2a8; --nx-ok-bg: #12261c; --nx-ok-edge: #1e3a2a;
  --nx-bad: #ffb4a8; --nx-bad-bg: #2a1512; --nx-bad-edge: #3a2420;
  --nx-warn: #f1cf8f; --nx-warn-bg: #2a2010; --nx-warn-edge: #3a3222;
  --nx-hover: rgba(255, 255, 255, 0.035); --nx-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --nx-info: #a9d2f7; --nx-info-bg: rgba(63, 143, 214, 0.2); --nx-stop: #3a3558; --nx-stop-hi: #4a4470;
}

/* Page title: 34 / 600 like the Overview (26 on phones); the run ID title in mono stays smaller. */
:where(#main) .page-head h1, :where(#main) > h1 { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
:where(#main) .page-head h1.mono, :where(#main) > h1.mono { font-size: 26px; letter-spacing: -0.01em; }
:where(#main) .page-head { margin-bottom: 24px; gap: 20px; }
:where(#main) .page-head .lead, :where(#main) > h1 + .lead { margin-top: 6px; font-size: 14px; line-height: 1.55; }
:where(#main) .page-head .actions { gap: 8px; }

/* Buttons: header buttons 44 px like the Overview's; other buttons 40 px; in table rows they stay compact. */
:where(#main) .btn { min-height: 40px; padding: 0 16px; border-radius: 9px; }
:where(#main) .page-head .actions .btn { min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14px; }
:where(#main) td .btn, :where(#main) th .btn { min-height: 32px; padding: 0 12px; }
:where(#main) .btn:focus-visible, :where(#main) .tabs a:focus-visible { outline: 2px solid var(--nx-link); outline-offset: 2px; }

/* Small uppercase labels (Plan, Account, run page boxes): 11.5 px, never smaller. */
:where(#main) .status-cell span { font-size: 11.5px; }

/* Chip report: the small labels above each number, 11.5 px instead of 10. */
#main .kpi span { font-size: 11.5px; }

/* Progress marks under each project (Projects page): labels 11 px, not 10. */
#main .sm-label { font-size: 11px; }

/* Projects: a very long project name ends in "…" (the full name shows on hover), so the table never runs past its card. */
#main .pg-name { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* On computer screens the run ID column is left out (Result says how it went) and the cells are a little tighter,
   so every column shows without scrolling. */
@media (min-width: 761px) {
  #main .pg-table .pg-col-run { display: none; }
  #main .pg-name { max-width: 200px; }
  #main .pg-table th, #main .pg-table td { padding-left: 14px; padding-right: 14px; }
  #main .pg-table th:first-child, #main .pg-table td:first-child { padding-left: 22px; }
  #main .pg-table th:last-child, #main .pg-table td:last-child { padding-right: 22px; }
}

/* Overview: Nelix AI's reading of a failed stage is shown once. While the full-width card under the stages
   is open, the stage card does not repeat it; after "Not now" the stage card keeps its first sentence only. */
#main:has(#stage-diagnosis:not([hidden])) .flow-stage .stage-fix { display: none; }
#main .flow-stage .stage-fix p:not(:first-child):not(.kept) { display: none; }
#main .flow-stage .stage-fix p:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }

/* Detail boxes (run page): one even row on a desktop instead of five and a lone sixth; two per row on phones. */
:where(#main) .metrics { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Tabs: 14 px, a little more room between them. */
:where(#main) .tabs { gap: 22px; }
:where(#main) .tabs a, :where(#main) .tabs span { font-size: 14px; }

@media (max-width: 760px) {
  #main .page-head h1, #main > h1 { font-size: 26px; }
  #main .page-head h1.mono, #main > h1.mono { font-size: 21px; }
  /* every tap target at least 44 px tall */
  #main .btn, #main td .btn { min-height: 44px; }
  #main .tabs a, #main .tabs span { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .top { height: 56px; }
  .nx-menu { height: 44px; }
  .user-menu summary { display: block; line-height: 34px; min-height: 44px; box-sizing: border-box; }  /* block, so a long e-mail address ends in "…" (sidebar.css) instead of being cut off */
  .user-menu .menu a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; }
  .side.nx-open { top: 56px; }
  #main .metrics { grid-template-columns: 1fr 1fr; }
  #main select, #main summary { min-height: 44px; box-sizing: border-box; }
  #main #run-all.btn { height: auto; min-height: 44px; }
  #main .ov-mode { height: 44px; }
  #main .ov-askbox button { width: 44px; height: 44px; }
  #main input[type=text], #main input[type=email], #main input:not([type]) { min-height: 44px; box-sizing: border-box; }
  #main .tbx-more, #main .tbx-copy { min-height: 44px; }
  #main .ov-more { display: inline-flex; align-items: center; min-height: 44px; }
  #main .ov-btn-sm, #main .firstchip-hide, #main .intent-skip { min-height: 44px; }
  /* Overview stage links (View log, Run again, See the waveform...) */
  #main .ov-link, #main .ov-main { display: inline-flex; align-items: center; min-height: 44px; }
  /* Overview failure line: the red dot stays with the first line of text */
  #main .ov-attn > span { flex: 1 1 240px; }
  #main .ov-attn > a { display: inline-flex; align-items: center; min-height: 44px; padding-left: 18px; }
  /* Engineering header: the counter goes under the title instead of past the screen edge */
  #main .px-head .px-side { margin-left: 0; flex: 1 1 100%; }
  #main .px-clock { text-align: left; white-space: normal; }
  /* tables that scroll sideways show a soft edge where more columns are hidden */
  #main .table { background:
      linear-gradient(to right, var(--lab-surface, #14121f) 30%, rgba(20,18,31,0)) left center / 28px 100% no-repeat local,
      linear-gradient(to left, var(--lab-surface, #14121f) 30%, rgba(20,18,31,0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(185,166,255,0.22), rgba(0,0,0,0)) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(185,166,255,0.22), rgba(0,0,0,0)) right center / 12px 100% no-repeat scroll,
      var(--lab-surface, #14121f); }
}

/* First-run Overview (no projects yet): the guide with one main button, and "What you'll build" beside it. */
:where(#main) .fr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0 0 28px; }
@media (min-width: 1100px) { :where(#main) .fr { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); align-items: start; } }
:where(#main) .fr-guide, :where(#main) .fr-card { box-sizing: border-box; border: 1px solid var(--nx-edge); border-radius: 16px; background: var(--nx-card); }
:where(#main) .fr-guide { padding: 28px 28px 22px; }
:where(#main) .fr-kicker { margin: 0 0 6px; color: var(--nx-link); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
:where(#main) .fr-guide h2 { margin: 0; color: var(--nx-text); font-size: 26px; font-weight: 600; letter-spacing: -0.015em; text-transform: none; }
:where(#main) .fr-lead { margin: 8px 0 22px; max-width: 620px; color: var(--nx-body); font-size: 14.5px; line-height: 1.55; }
:where(#main) .fr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
:where(#main) .fr-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--nx-edge); }
:where(#main) .fr-step:first-child { border-top: 0; padding-top: 4px; }
:where(#main) .fr-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--nx-edge-2); border-radius: 50%; color: var(--nx-body); font-size: 13px; font-weight: 600; }
:where(#main) .fr-step.is-now .fr-num { border-color: var(--nx-primary); background: var(--nx-primary); color: #fff; }
:where(#main) .fr-step-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
:where(#main) .fr-step-body > b { color: var(--nx-text); font-size: 15.5px; font-weight: 600; }
:where(#main) .fr-step-body > span { color: var(--nx-body); font-size: 14px; line-height: 1.5; }
:where(#main) .fr-cta { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 0 22px;
  border-radius: 10px; background: var(--nx-primary); color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none; }
:where(#main) .fr-cta:hover { background: var(--nx-primary-hi); color: #fff; }
:where(#main) .fr-cta:focus-visible, :where(#main) .fr-chipbtn:focus-visible, :where(#main) .fr-skip:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
:where(#main) .fr-alt { margin: 12px 0 0; color: var(--nx-muted); font-size: 13px; line-height: 1.6; }
:where(#main) .fr-alt a { color: var(--nx-link); }
:where(#main) .fr-alt .cmd { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; vertical-align: middle; }
:where(#main) .fr-alt code { padding: 2px 7px; border-radius: 6px; background: var(--nx-code-bg); color: var(--nx-code-ink); font: 12.5px var(--lab-mono); }
:where(#main) .fr-alt .cmd-copy { min-height: 28px; padding: 0 8px; border: 1px solid var(--nx-edge-2); border-radius: 7px; background: transparent; color: var(--nx-body); font-size: 12px; cursor: pointer; }
:where(#main) .fr-foot { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--nx-edge); color: var(--nx-muted); font-size: 13px; }
:where(#main) .fr-foot a { color: var(--nx-link); }
:where(#main) .fr-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
:where(#main) .fr-card { padding: 22px; }
:where(#main) .fr-card h3 { margin: 0 0 12px; color: var(--nx-text); font-size: 16px; font-weight: 600; }
:where(#main) .fr-chip { margin: 0 0 16px; }
:where(#main) .fr-chip svg { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--nx-bg); }
:where(#main) .fr-chip .fr-die { fill: none; stroke: var(--nx-edge-2); stroke-width: 2; }
:where(#main) .fr-chip .fr-core { fill: var(--nx-raised); }
:where(#main) .fr-chip .fr-row { fill: var(--nx-edge-2); }
:where(#main) .fr-chip .fr-row.on { fill: #7a5af5; }
:where(#main) .fr-chip .fr-power { fill: #c9a227; opacity: 0.85; }
:where(#main) .fr-chip .fr-pin { fill: var(--nx-body); }
:where(#main) .fr-chip figcaption { margin-top: 8px; color: var(--nx-muted); font-size: 12.5px; line-height: 1.5; }
:where(#main) .fr-starters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
:where(#main) .fr-starters li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--nx-edge); }
:where(#main) .fr-starters b { color: var(--nx-text); font-size: 14px; font-weight: 600; }
:where(#main) .fr-starters span { color: var(--nx-body); font-size: 13px; }
:where(#main) .fr-intent p { margin: -4px 0 12px; color: var(--nx-body); font-size: 13px; }
:where(#main) .fr-intent-choices { display: flex; flex-wrap: wrap; gap: 8px; }
:where(#main) .fr-chipbtn { min-height: 40px; padding: 0 14px; border: 1px solid var(--nx-edge-2); border-radius: 999px; background: transparent; color: var(--nx-text); font: 500 13px var(--lab-font); cursor: pointer; }
:where(#main) .fr-chipbtn:hover { border-color: var(--nx-edge-hover); }
:where(#main) .fr-skip { margin-top: 10px; padding: 0; min-height: 32px; border: 0; background: none; color: var(--nx-muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) {
  :where(#main) .fr-guide { padding: 22px 18px 18px; }
  :where(#main) .fr-guide h2 { font-size: 22px; }
  :where(#main) .fr-cta { align-self: stretch; }
  :where(#main) .fr-chipbtn, :where(#main) .fr-skip { min-height: 44px; }
  :where(#main) .fr-alt .cmd-copy { min-height: 36px; }
}