/* Pinpoint's look, Atelier's: a neutral graphite surround, as in photo editors, so the chrome casts
   no colour on the page images beside the texts. One typeface, Instrument Sans (bundled, SIL Open
   Font License: fonts/OFL.txt). The file has Atelier's general parts (the font, the colours, the
   columns, the sidebar, the page heads, the empty state), then the chat page's workspace (step
   18: Atelier's chat, composer, live lines, buttons, dialogs and avatars, and the new parts built
   from the same pieces: the activity line, the answers and their citations, the thinking block,
   the viewer and the side panel); each later page brings its own section from Atelier's
   stylesheet when it is built. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url(fonts/instrument-sans-latin-ext-standard-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url(fonts/instrument-sans-latin-standard-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --side: #1e1f21;        /* the side panels */
  --stage: #242527;       /* the chat */
  --raised: #2e2f32;      /* the composer, your messages, a chosen item */
  --hover: #34353a;
  --line: #38393d;        /* hairlines */
  --text: #ecebe8;
  --muted: #a3a4a7;
  --faint: #76787c;
  --paper: #efeee9;       /* the main action: light paper on graphite */
  --paper-text: #1c1d1f;
  --viewer: #151617;      /* behind a page image in the viewer */
  --working: #8fbf9a;
  --asking: #d9b46b;
  --failed: #d27b6f;
  --idle: #7a7c80;
  --done: #c4c6c9;
  --cited: #9db7d6;       /* a citation's mark: the one cool tone, as DocQA's cited quote */
  --font: "Instrument Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

html, body, #app, .q-page-container, .nicegui-content {
  height: 100%;
}

body, body.body--dark {
  margin: 0;
  background: var(--stage);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.nicegui-content {
  padding: 0;
  gap: 0;
}

.q-btn, .q-field, .q-menu, .q-tab, .q-dialog, .q-notification {
  font-family: var(--font);
}

:focus-visible {
  outline: 2px solid rgba(239, 238, 233, 0.6);
  outline-offset: 2px;
}

/* --- the columns ------------------------------------------------------------------------- */

.app {
  display: grid;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* The widths the user drags (2026-10-31, the user's wish; the column handles, below, and
   pinpoint.js): --sidebar-width (on every page), --chat-width and --side-width (the chat
   page), --folders-width and --library-main-width (the Library page), set on the page's root
   when dragged and kept by the browser; without them, the defaults below. Each column's width
   (--*-column) is the user's, capped so that the column taking the rest keeps its room when the
   window is made narrower later: the chat 360 px, the viewer 400 px, the Library page's sources
   400 px. */

/* A page of the sidebar and one column (the Monitor's, the Settings', the Instructions'). */
.app.monitor-app {
  --sidebar-column: clamp(180px, var(--sidebar-width, 256px), min(480px, 30vw));
  grid-template-columns: var(--sidebar-column) minmax(0, 1fr);
}

.monitor-app > .sidebar { grid-column: 1; grid-row: 1; }
.monitor-app > main { grid-column: 2; grid-row: 1; }

@media (max-width: 1100px) {
  .app.monitor-app {
    --sidebar-column: clamp(180px, var(--sidebar-width, 220px), 30vw);
  }
}

/* The chat page's workspace, designed for 2560x1440: the activity line across, then the
   sidebar, the chat, the viewer (when something is open in it) and the side panel. With the
   viewer closed the chat takes its room, its messages kept to a reading width. */
.app.workspace {
  --sidebar-column: clamp(180px, var(--sidebar-width, 240px), 480px);
  --side-column: min(var(--side-width, 520px), calc(100vw - var(--sidebar-column) - 360px));
  grid-template-columns: var(--sidebar-column) minmax(0, 1fr) var(--side-column);
  grid-template-rows: auto minmax(0, 1fr);
}

.app.workspace.viewer-open {
  --side-column: min(var(--side-width, 520px), calc(100vw - var(--sidebar-column) - 760px));
  --chat-column: max(
    360px,
    min(
      var(--chat-width, 760px),
      calc(100vw - var(--sidebar-column) - var(--side-column) - 400px)
    )
  );
  grid-template-columns:
    var(--sidebar-column) var(--chat-column) minmax(0, 1fr) var(--side-column);
}

.app.workspace.no-project {
  grid-template-columns: var(--sidebar-column) minmax(0, 1fr);
}

/* The Library page (library_page.py): the activity line across, then the sidebar, the folders,
   the sources of the folder shown and the viewer (when a source is open in it). */
.app.library-app {
  --sidebar-column: clamp(180px, var(--sidebar-width, 240px), 480px);
  --folders-column: min(var(--folders-width, 300px), calc(100vw - var(--sidebar-column) - 400px));
  grid-template-columns: var(--sidebar-column) var(--folders-column) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.app.library-app.viewer-open {
  --library-main-column: max(
    400px,
    min(
      var(--library-main-width, 820px),
      calc(100vw - var(--sidebar-column) - var(--folders-column) - 400px)
    )
  );
  grid-template-columns:
    var(--sidebar-column) var(--folders-column) var(--library-main-column) minmax(0, 1fr);
}

.library-app > .activity { grid-column: 1 / -1; grid-row: 1; }
.library-app > .sidebar { grid-column: 1; grid-row: 2; }
.library-app > .library-folders { grid-column: 2; grid-row: 2; }
.library-app > .library-main { grid-column: 3; grid-row: 2; }
.library-app > .viewer { display: none; }
.library-app.viewer-open > .viewer { display: flex; grid-column: 4; grid-row: 2; }

.workspace > .activity { grid-column: 1 / -1; grid-row: 1; }
.workspace > .sidebar { grid-column: 1; grid-row: 2; }
.workspace > .stage { grid-column: 2; grid-row: 2; }
.workspace > .viewer { display: none; }
.workspace > .side { grid-column: -2 / -1; grid-row: 2; }
.workspace.viewer-open > .viewer { display: flex; grid-column: 3; grid-row: 2; }

.shared-only, .drawer-only {
  display: none !important;
}

/* Below about 2,200 px the viewer and the side panel share one column, with tabs: the viewer
   in front while something is open in it, the side panel when one of its tabs is chosen. */
@media (max-width: 2199px) {
  .app.workspace, .app.workspace.viewer-open {
    --side-column: min(var(--side-width, 600px), calc(100vw - var(--sidebar-column) - 360px));
    grid-template-columns: var(--sidebar-column) minmax(0, 1fr) var(--side-column);
  }
  .workspace.viewer-open > .viewer { grid-column: 3; }
  .workspace.viewer-open:not(.side-first) > .side { display: none; }
  .workspace.viewer-open.side-first > .viewer { display: none; }
  .workspace .shared-only { display: flex !important; }
  .workspace.viewer-open:not(.side-first) .side-tab.current {
    color: var(--muted);
    border-bottom-color: transparent;
  }
}

/* Below about 1,800 px the sidebar shows as icons; the mouse over it opens it over the page, as
   wide as the user made it. The Library page's sources and viewer share their room as before. */
@media (max-width: 1799px) {
  .app.workspace, .app.workspace.viewer-open, .app.library-app {
    --sidebar-column: 64px;
  }
  .app.workspace, .app.workspace.viewer-open {
    --side-column: min(var(--side-width, 520px), calc(100vw - 64px - 360px));
  }
  .app.library-app {
    --folders-column: min(var(--folders-width, 280px), calc(100vw - 64px - 400px));
  }
  .app.library-app.viewer-open {
    --folders-column: min(var(--folders-width, 260px), calc(100vw - 64px - 800px));
    grid-template-columns: 64px var(--folders-column) minmax(400px, 0.8fr) minmax(0, 1.2fr);
  }
  :is(.workspace, .library-app) > .sidebar {
    position: relative;
    z-index: 30;
    width: 64px;
    overflow: hidden;
    transition: width 0.15s ease, box-shadow 0.15s ease;
  }
  :is(.workspace, .library-app) > .sidebar:hover,
  :is(.workspace, .library-app) > .sidebar:focus-within {
    width: clamp(180px, var(--sidebar-width, 240px), 480px);
    box-shadow: 16px 0 48px rgba(0, 0, 0, 0.45);
  }
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .wordmark,
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .page-link > div,
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .project-item .name,
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .project-item .meta,
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .sidebar-foot,
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .pages-part,
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .gpu-line {
    display: none;
  }
  /* Quasar keeps a button's label shown (display: block, important, in its layer): it gets no
     width instead. */
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .new-project .block {
    max-width: 0;
    overflow: hidden;
  }
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .new-project .q-icon {
    margin: 0;
  }
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .wordmark-short {
    display: block;
  }
  :is(.workspace, .library-app) > .sidebar:not(:hover):not(:focus-within) .new-project {
    width: 40px;
    min-width: 0;
    padding: 0;
    margin: 0 12px 14px;
  }
}

/* Below about 1,500 px the side panel is a drawer (its button in the chat's head), and the
   viewer opens over the chat. */
@media (max-width: 1499px) {
  .app.workspace, .app.workspace.viewer-open {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .workspace > .side {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: 480px;
    max-width: 92vw;
    transform: translateX(105%);
    transition: transform 0.2s ease;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
  }
  .workspace.side-open > .side { transform: none; }
  .workspace.viewer-open > .viewer,
  .workspace.viewer-open.side-first > .viewer {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    width: min(900px, 92vw);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
  }
  .app.library-app, .app.library-app.viewer-open {
    --folders-column: min(var(--folders-width, 260px), calc(100vw - 64px - 400px));
    grid-template-columns: 64px var(--folders-column) minmax(0, 1fr);
  }
  .library-app.viewer-open > .viewer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    width: min(900px, 92vw);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
  }
  .workspace .shared-only { display: none !important; }
  .workspace .drawer-only { display: inline-flex !important; }
  .workspace .viewer .side-switch { display: flex !important; }  /* the drawer, over the viewer */
}

/* The column handles (2026-10-31, the user's wish; controls.column_handle, pinpoint.js): thin
   lines at the start of a column, dragged to resize the column before them (the sidebar, the
   chat, the folders, the sources) or after them (the side panel, the shared column below about
   2,200 px); a double click gives the default back. None where a column has no width of its
   own: the sidebar as icons, the side panel as a drawer, the sources and the viewer sharing
   their room on a narrower Library page. */
.app > .column-handle {
  display: none;
  justify-self: start;
  position: relative;
  z-index: 20;
  width: 7px;
  margin-left: -3px;
  cursor: col-resize;
  touch-action: none;
}

.app > .column-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  background: transparent;
  transition: background 0.15s ease;
}

.app > .column-handle:hover::after,
.app > .column-handle.dragging::after {
  background: var(--muted);
}

.monitor-app > .sidebar-handle { display: block; grid-column: 2; grid-row: 1; }
:is(.workspace, .library-app) > .sidebar-handle { display: block; grid-column: 2; grid-row: 2; }
.workspace > .side-handle { display: block; grid-column: -2 / -1; grid-row: 2; }
.workspace.viewer-open > .chat-handle { display: block; grid-column: 3; grid-row: 2; }
.workspace.no-project > .column-handle { display: none; }
.library-app > .folders-handle { display: block; grid-column: 3; grid-row: 2; }
.library-app.viewer-open > .library-main-handle { display: block; grid-column: 4; grid-row: 2; }

.app.resizing {
  cursor: col-resize;
  user-select: none;
}

@media (max-width: 2199px) {
  .workspace.viewer-open > .chat-handle { display: none; }
}

@media (max-width: 1799px) {
  :is(.workspace, .library-app) > .sidebar-handle { display: none; }
  .library-app.viewer-open > .library-main-handle { display: none; }
}

@media (max-width: 1499px) {
  .workspace > .column-handle { display: none !important; }
}

/* --- the activity line ------------------------------------------------------------------- */

.activity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 32px;
  padding: 0 20px;
  background: var(--side);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}

.activity .what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
}

.activity .what:hover {
  color: var(--text);
}

.activity .extra {
  margin-left: auto;
  flex: none;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.activity .q-btn.stop-reading {
  min-height: 24px;
  padding: 0 8px;
  font-size: 12.5px;
}

.activity .q-btn.stop-reading .q-icon {
  font-size: 16px;
}

/* --- the sidebar ------------------------------------------------------------------------- */

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--side);
  border-right: 1px solid var(--line);
}

.wordmark-row {
  display: flex;
  align-items: center;
  min-height: 64px;
}

.wordmark {
  padding: 18px 20px 14px;
  font-size: 24px;
  font-weight: 620;
  font-stretch: 75%;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
}

.wordmark-short {
  display: none;
  width: 64px;
  font-size: 24px;
  font-weight: 620;
  font-stretch: 75%;
  text-align: center;
}

.sidebar .pages {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 14px;
}

.page-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 540;
  text-decoration: none;
  white-space: nowrap;
}

.page-link .q-icon {
  font-size: 18px;
  color: var(--faint);
}

.page-link:hover {
  background: var(--hover);
  color: var(--text);
}

.page-link.current {
  background: var(--raised);
  color: var(--text);
}

.page-link.current .q-icon {
  color: var(--text);
}

.sidebar .new-project {
  margin: 0 14px 14px;
  white-space: nowrap;
}

.project-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px 12px;
}

.project-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.project-item:hover {
  background: var(--hover);
}

.project-item.current {
  background: var(--raised);
}

.project-item .name {
  font-weight: 540;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-item .meta {
  grid-column: 2;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--idle);
  transform: translateY(-1px);
  flex: none;
}

.dot.working { background: var(--working); box-shadow: 0 0 0 3px rgba(143, 191, 154, 0.16); }
.dot.asking { background: var(--asking); box-shadow: 0 0 0 3px rgba(217, 180, 107, 0.16); }
.dot.failed { background: var(--failed); }
.dot.finished { background: var(--done); }

.sidebar-foot {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The web edition's Your account, in place of the model's line (W3). */
.account-foot {
  padding: 10px 8px 12px;
  border-top: 1px solid var(--line);
}

.account-foot .account-name {  /* the account's email (2026-11-03) */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-foot .gpu-line {
  padding: 2px 12px 0 40px;
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
}

/* The web admin's pages under the sidebar's pages (W4). */
.sidebar .pages-part {
  padding: 10px 12px 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- a page's head and its empty state --------------------------------------------------- */

.monitor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--stage);
}

.monitor-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px 16px;
  background: var(--stage);
  border-bottom: 1px solid var(--line);
}

.stage-head .title, .monitor-head .title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-head .facts, .monitor-head .facts {
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

.empty {
  max-width: 460px;
  margin: 18vh auto 0;
  padding: 0 28px;
  text-align: center;
}

.empty .headline {
  font-size: 26px;
  font-weight: 600;
  font-stretch: 87%;
  line-height: 1.25;
}

.empty .lead {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.empty .q-btn {
  margin-top: 22px;
}

/* --- the chat ---------------------------------------------------------------------------- */

.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--stage);
}

.stage-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px 16px;
  border-bottom: 1px solid var(--line);
}

.stage-head .actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex: none;
}

.stage-head .origin {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--faint);
}

.stage-head .origin .q-icon {
  font-size: 15px;
}

.stage-head .origin a {
  color: var(--muted);
  text-decoration: none;
}

.stage-head .origin a:hover {
  color: var(--text);
  text-decoration: underline;
}

.transcript {
  flex: 1;
  min-height: 0;
}

.transcript .q-scrollarea__content {
  width: 100%;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 28px 0;
}

.messages.after {
  padding: 22px 28px 36px;
}

.messages.after:empty {
  padding: 0 28px 36px;
}

.day {
  align-self: center;
  font-size: 12.5px;
  color: var(--faint);
}

.message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
  border-radius: 12px;
}

.message .who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-size: 12.5px;
  color: var(--muted);
}

.message .who .time {
  color: var(--faint);
}

.message .who .q-btn {
  width: 24px;
  height: 24px;
  min-height: 24px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.message:hover .who .q-btn, .message .who .q-btn:focus-visible {
  opacity: 1;
}

.message .who .q-btn .q-icon {
  font-size: 18px;
}

.message.user {
  align-self: flex-end;
  align-items: flex-end;
  max-width: 82%;
}

.message.user .body {
  background: var(--raised);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 15px;
  white-space: pre-wrap;
}

.message .body {
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.message .body p, .viewer-page .body p {
  margin: 0 0 0.6em;
}

.message .body p:last-child {
  margin-bottom: 0;
}

.message .body ul, .message .body ol, .viewer-page .body ul, .viewer-page .body ol {
  margin: 0 0 0.6em;
  padding-left: 22px;
}

.message .body code {
  font-size: 13px;
  background: var(--raised);
  padding: 1px 5px;
  border-radius: 4px;
}

.message .mark {
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
}

.message.queued .body {
  opacity: 0.7;
  border: 1px dashed var(--line);
}

/* The news: short, plain messages while the work goes on, lighter than the answers. */
.message.news {
  padding-left: 14px;
  border-left: 2px solid var(--line);
  border-radius: 0;
}

.message.news .body {
  font-size: 14px;
  color: var(--muted);
}

.message.question .body {
  padding: 12px 16px;
  background: rgba(217, 180, 107, 0.07);
  border: 1px solid rgba(217, 180, 107, 0.28);
  border-radius: 12px;
}

/* A citation of a message scrolled to: it lights up for a moment (pinpoint.js). */
.message.flash {
  animation: flash 1.6s ease;
}

@keyframes flash {
  0%, 30% { box-shadow: 0 0 0 6px rgba(157, 183, 214, 0.22); }
  100% { box-shadow: 0 0 0 6px rgba(157, 183, 214, 0); }
}

.options, .links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.chat-empty {
  margin-top: 14vh;
}

/* --- an answer and a written document ---------------------------------------------------- */

.answer-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.status {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 560;
  color: var(--muted);
}

.status.answered { color: var(--working); border-color: rgba(143, 191, 154, 0.4); }
.status.partly { color: var(--asking); border-color: rgba(217, 180, 107, 0.4); }
.status.not_answered { color: var(--done); }

.answer-top .when {
  font-size: 12.5px;
  color: var(--faint);
}

/* The model that wrote the answer: its program and file on hover. */
.answer-top .model {
  margin-left: auto;
  min-width: 0; /* a long name shortens with its ellipsis, inside the flex row */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--faint);
}

.question-quote {
  margin: 4px 0 2px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.written-text h1, .written-text h2, .written-text h3 {
  margin: 0.8em 0 0.4em;
  font-weight: 600;
  line-height: 1.3;
}

.written-text h1 { font-size: 19px; }
.written-text h2 { font-size: 17px; }
.written-text h3 { font-size: 15px; color: var(--muted); }

.written-text table {
  border-collapse: collapse;
  margin: 6px 0 10px;
  font-size: 13.5px;
}

.written-text th, .written-text td {
  padding: 5px 12px 5px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

/* The numbered citations: [1, 2], each its place and quote on hover. */
.cites {
  color: var(--faint);
  white-space: nowrap;
}

.cite {
  color: var(--cited);
  font-size: 0.86em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;  /* it opens its place in the viewer */
  border-bottom: 1px dotted rgba(157, 183, 214, 0.5);
}

.cite:hover {
  color: var(--text);
}

.missing {
  padding: 10px 14px;
  background: rgba(217, 180, 107, 0.06);
  border-left: 2px solid rgba(217, 180, 107, 0.5);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.55;
}

.missing .missing-title {
  margin-bottom: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--asking);
}

.written-notes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}

.citations-head {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.citations-head:hover {
  color: var(--text);
}

.citations-head .chevron {
  font-size: 18px;
  transition: transform 0.15s ease;
}

.citations.opened .citations-head .chevron {
  transform: rotate(90deg);
}

.citation-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 2px;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.5;
}

.citation-row .where {
  color: var(--text);
  font-weight: 540;
}

.citation-row.opens {
  margin: 0 -8px;
  padding: 3px 8px;
  border-radius: 7px;
  cursor: pointer;
}

.citation-row.opens:hover {
  background: var(--hover);
}

.citation-row .quote {
  color: var(--muted);
}

.answer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: -8px;
}

.writing-report {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  font-size: 13px;
  color: var(--muted);
}

/* --- the thinking of a deep turn (thinking_block.py) -------------------------------------- */

.thinking {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(30, 31, 33, 0.6);
  color: var(--muted);
}

.thinking-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 4px 8px 4px 12px;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
}

button.thinking-head {
  cursor: pointer;
}

button.thinking-head:hover {
  color: var(--text);
}

.thinking-head .title {
  color: var(--text);
  font-weight: 560;
  white-space: nowrap;
}

.thinking-head .facts {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.thinking-head .q-btn:first-of-type {
  margin-left: auto;
}

.thinking-head .chevron {
  flex: none;
  font-size: 18px;
  color: var(--faint);
  transition: transform 0.15s ease;
}

.saved-thinking.opened .thinking-head .chevron {
  transform: rotate(90deg);
}

.thinking-body {
  padding: 0 14px 12px;
}

.thinking-note {
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--faint);
}

.thinking-text {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.thinking-text .chunk {
  display: inline;
}

/* --- the composer ------------------------------------------------------------------------ */

.composer {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px 18px;
}

/* The run's line and the live line under it share their columns: the dot over the chevron (both
   16px wide), the texts starting at the same place. */
.run-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 4px 6px 8px;
  font-size: 13px;
  color: var(--muted);
}

.run-line > .dot {
  margin: 0 4.5px;
}

.run-line .what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-line .extra {
  flex: none;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.run-line .q-btn {
  margin-left: auto;
}

.box {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.box:focus-within {
  border-color: #55575c;
}

.box .q-field {
  flex: 1;
}

.box .q-field__control, .box .q-field__native {
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.box .q-field__native {
  padding: 7px 0;
  max-height: 220px;
}

.box .q-field__control:before, .box .q-field__control:after {
  display: none;
}

.composer .hint {
  margin-top: 6px;
  padding: 0 4px;
  font-size: 12.5px;
  color: var(--faint);
}

/* The run menu, a row under the box (chat_page.py settings_line): the level for the next run
   and Deep thinking at follow-ups, small and quiet. */
.next-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 4px;
  padding: 0 4px;
  font-size: 12.5px;
  color: var(--faint);
}

.next-run .level-select .q-field__control,
.next-run .level-select .q-field__native {
  min-height: 28px;
  padding: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.next-run .level-select .q-field__append {
  height: 28px;
  color: var(--faint);
}

.next-run .q-toggle__label {
  font-size: 12.5px;
  color: var(--muted);
}

/* The web edition's kind of model beside the level (chat_page.py, 2026-11-05), and the chosen
   level's description under the run menu. */
.next-run .kind-note {
  color: var(--muted);
}

.next-run-note {
  margin-top: 2px;
  padding: 0 4px;
  max-width: 640px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--faint);
}

/* --- the run's live lines, under the run's line ----------------------------------------- */

.live {
  margin: 0 0 10px;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.live-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 5px 12px 5px 7px; /* with the border, the chevron sits under the run line's dot */
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.live-head:hover {
  color: var(--text);
}

.live-head .chevron {
  flex: none;
  font-size: 16px;
  color: var(--faint);
  transition: transform 0.15s ease;
}

.live.opened .live-head .chevron {
  transform: rotate(180deg);
}

.live-head .avatar-box {
  display: inline-flex;
  flex: none;
}

.live-head .who {
  flex: none;
  color: var(--text);
  font-weight: 600;
}

.live-head .tag, .live-row .tag {
  flex: none;
  color: var(--faint);
}

/* The end of the line shows (a thinking that streams in): right to left, the text cut at its
   start, the text itself left to right. */
.live-head .text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}

.live-head .text > div {
  display: inline;
  direction: ltr;
  unicode-bidi: isolate;
}

.live-head .seconds {
  flex: none;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.live-bar {
  height: 2px;
  margin: 0 12px 0 31px; /* under the text, not the chevron */
  background: var(--line);
  border-radius: 1px;
  opacity: 0;
}

.live-bar.shown {
  opacity: 1;
  margin-bottom: 6px;
}

.live-bar .fill {
  width: 0;
  height: 100%;
  background: var(--working);
  border-radius: 1px;
  transition: width 0.25s linear;
}

/* About fifteen lines; pinpoint.js keeps it at its bottom while you are there. */
.live-lines {
  display: none;
  height: 296px;
  padding: 8px 12px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.live.opened .live-lines {
  display: block;
}

.live-row {
  display: grid;
  grid-template-columns: 58px 112px minmax(0, 1fr);
  column-gap: 10px;
  padding: 1px 0;
}

.live-row .at {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.live-row .who {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-weight: 600;
}

.live-row .who > .q-label, .live-row .who > div:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-row .who .avatar {
  margin-top: 1px;
}

.live-row .body > * {
  display: inline;
}

.live-row .tag {
  margin-right: 6px;
}

.live-row .text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.live-row.thinking .text {
  color: var(--muted);
  font-style: italic;
}

.live-row.result .text, .live-row.note .text, .live-row.program .text {
  color: var(--muted);
}

.live-row.progress .who {
  color: var(--working);
}

/* --- buttons ----------------------------------------------------------------------------- */

.q-btn.paper {
  background: var(--paper);
  color: var(--paper-text);
  font-weight: 600;
  border-radius: 10px;
  padding: 0 16px;
  min-height: 38px;
  text-transform: none;
  letter-spacing: 0;
}

.q-btn.paper.q-btn--disabled {
  opacity: 0.35;
}

.q-btn.danger {
  background: var(--failed);
  color: var(--paper-text);
  font-weight: 600;
  border-radius: 10px;
  padding: 0 16px;
  min-height: 38px;
  text-transform: none;
  letter-spacing: 0;
}

.q-btn.quiet {
  color: var(--muted);
  border-radius: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 520;
}

.q-btn.quiet:hover {
  color: var(--text);
}

.q-btn.quiet .q-icon, .q-btn.outline .q-icon {
  font-size: 20px;
}

.q-btn.quiet.q-btn--round {
  width: 38px;
  height: 38px;
}

.q-btn.outline {
  color: var(--text);
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 540;
}

.q-btn.outline:before {
  border-color: var(--line);
}

.q-btn.outline:hover:before {
  border-color: #5a5c61;
}

/* --- dialogs and menus ------------------------------------------------------------------- */

.q-dialog .q-card.sheet-card {
  width: 440px;
  max-width: calc(100vw - 32px);
  padding: 24px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.sheet-card .card-title {
  font-size: 18px;
  font-weight: 600;
}

.sheet-card .card-lead {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.sheet-card .error {
  min-height: 20px;
  margin-top: 6px;
  color: var(--failed);
  font-size: 13px;
}

.q-dialog .q-card.sheet-card.wide-card {
  width: 560px;
}

/* The Cloud levels' models and contexts (users_settings_page.py): three to a row. */
.form-row .cloud-field {
  width: 274px;
  max-width: 100%;
}

/* An account's Settings panel (users_page.py): its numbers' labels are long. */
.sheet-card .panel-field {
  width: 280px;
  max-width: 100%;
}

.sheet-card .card-lead + .card-lead {
  margin-top: 8px;
}

.sheet-card .edit-text .q-field__native {
  max-height: 260px;
}

.sheet-card .buttons {
  display: flex;
  align-self: stretch;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.report {
  width: 100%;
  font-size: 15px;
  line-height: 1.65;
}

.report h1 {
  margin: 24px 0 4px;
  font-size: 28px;
  font-weight: 620;
  font-stretch: 87%;
  line-height: 1.2;
}

.report h2 {
  margin: 34px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 19px;
  font-weight: 600;
}

.report h3 {
  margin: 26px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.report p, .report ul {
  margin: 0 0 10px;
}

.report ul {
  padding-left: 20px;
}

.report img {
  display: block;
  max-width: 100%;
  margin: 10px 0 12px;
  border-radius: 6px;
}

.report blockquote {
  margin: 0 0 10px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--line);
  color: var(--muted);
}

.report pre {
  padding: 12px 14px;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 8px;
  white-space: pre-wrap;
  font-family: var(--font);
  font-size: 14px;
}

.report table {
  border-collapse: collapse;
  margin: 8px 0 12px;
  font-size: 13.5px;
}

.report th, .report td {
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.report th {
  color: var(--muted);
  font-weight: 540;
}

.q-scrollarea__thumb {
  width: 5px;
  background: #5a5c61;
  opacity: 0.6;
}

.card-note {
  font-size: 13px;
  color: var(--muted);
}

.q-menu.message-menu {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
}

.q-menu.message-menu .q-item {
  min-height: 34px;
  font-size: 13.5px;
}

.q-field--dark .q-field__control {
  color: var(--text);
}

.q-field--dark.q-field--outlined .q-field__control:before {
  border-color: var(--line);
}

.q-notification {
  border-radius: 10px;
}

/* --- the team's avatars (avatars.py) ----------------------------------------------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: var(--raised);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.avatar-xs { width: 18px; height: 18px; }
.avatar-xs .q-icon { font-size: 11px; }
.avatar-xs .initial { font-size: 10px; }
.avatar-sm { width: 22px; height: 22px; }
.avatar-sm .q-icon { font-size: 13px; }
.avatar-sm .initial { font-size: 11px; }
.avatar-lg { width: 48px; height: 48px; }
.avatar-lg .q-icon { font-size: 24px; }
.avatar-lg .initial { font-size: 19px; }

.avatar .initial {
  font-weight: 640;
  line-height: 1;
}

.avatar.active {
  background: var(--paper);
  color: var(--paper-text);
  box-shadow: 0 0 0 3px rgba(143, 191, 154, 0.28);
}

.avatar-lg.active {
  animation: avatar-breathe 2.4s ease-in-out infinite;
}

@keyframes avatar-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(143, 191, 154, 0.30); }
  50% { box-shadow: 0 0 0 7px rgba(143, 191, 154, 0.10); }
}

/* --- the viewer (viewer.py) -------------------------------------------------------------- */

.viewer {
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--stage);
  border-left: 1px solid var(--line);
}

.viewer-head {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--side);
}

.viewer-head > .q-btn {
  margin: 0 0 6px;
}

.viewer-tabs-box {
  flex: 1;
  min-width: 0;
}

.viewer-tabs {
  display: flex;
  min-width: 0;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.viewer-tab {
  display: flex;
  align-items: center;
  flex: none;
  max-width: 240px;
  padding: 0 2px 0 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  color: var(--muted);
}

.viewer-tab.current {
  background: var(--stage);
  border-color: var(--line);
  color: var(--text);
  margin-bottom: -1px;
}

.viewer-tab-name {
  min-width: 0;
  padding: 9px 4px 9px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 540;
  cursor: pointer;
}

.viewer-tab-name .q-label, .viewer-tab-name div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-tab .tab-close.q-btn {
  width: 26px;
  height: 26px;
  min-height: 26px;
}

.viewer-tab .tab-close .q-icon {
  font-size: 16px;
}

.side-switch {
  gap: 2px;
  margin: 0 0 6px;
}

.viewer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  container-type: inline-size;  /* a narrow viewer stacks the review's and a source's sides */
}

.viewer-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
  padding: 26px 36px 48px;
}

.viewer-page-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.viewer-title {
  font-size: 24px;
  font-weight: 620;
  font-stretch: 87%;
  line-height: 1.2;
}

.viewer-page-head .q-btn {
  margin-left: auto;
}

.viewer-page .body {
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.viewer-note {
  padding: 26px 36px;
  color: var(--muted);
}

.viewer-page .viewer-note {
  padding: 0;
}

.outdated {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(217, 180, 107, 0.07);
  border: 1px solid rgba(217, 180, 107, 0.3);
  border-radius: 8px;
  color: var(--asking);
  font-size: 13.5px;
}

.report h1 {
  margin: 4px 0 4px;
  font-size: 28px;
  font-weight: 620;
  font-stretch: 87%;
  line-height: 1.2;
}

.viewer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: -6px 0 0 -8px;
}

/* A page's or a unit's text (marked_text.py): the page reader's marks in the warm tone, its
   descriptions shaded (the model's words), a cited quote in the cool one, as DocQA's. */
.page-text {
  padding: 14px 16px;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.page-mark {
  padding: 0 2px;
  background: rgba(217, 180, 107, 0.2);
  border-radius: 3px;
  color: var(--asking);
}

.description {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-style: italic;
}

.quoted {
  background: rgba(157, 183, 214, 0.22);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(157, 183, 214, 0.32);
  color: var(--text);
}

.quote-line {
  font-size: 13px;
  line-height: 1.5;
  color: var(--asking);
}

/* The review view (review_view.py), DocQA's: the page image beside its text, each side scrolling
   on its own; a narrow viewer puts the image over the text. */
.viewer-body > .review, .viewer-body > .source-view {
  height: 100%;
}

.review {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.review-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 12px 22px;
  border-bottom: 1px solid var(--line);
}

.review-title-box {
  flex: 1;
  min-width: 0;
}

.review-title {
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-facts {
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--faint);
}

.review-head .q-btn.guided {
  color: var(--cited);
}

.page-arrows {
  display: flex;
  align-items: center;
  gap: 2px;
}

.page-number {
  min-width: 96px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--muted);
}

.review-sides {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
}

.review-sides.text-alone {
  grid-template-columns: minmax(0, 1fr);
}

.review-image {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--viewer);
  border-right: 1px solid var(--line);
}

.review-image .segmented {
  align-self: flex-start;
  margin: 10px 14px;
}

.image-box {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 16px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.page-image {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
}

.page-image.full {
  width: auto;
  max-width: none;
}

.segmented {
  display: inline-flex;
  padding: 2px;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.segment {
  padding: 3px 11px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 540;
  cursor: pointer;
}

.segment:hover {
  color: var(--text);
}

.segment.current {
  background: var(--raised);
  color: var(--text);
}

.review-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px 48px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.review-sides.text-alone .review-text {
  padding: 20px 36px 56px;
}

.review-sides.text-alone .review-text > * {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.review-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.model-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.failed-line {
  color: var(--failed);
}

.locked-line {
  color: var(--faint);
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-left: -8px;
}

.review-actions .q-checkbox {
  margin-left: 10px;
  font-size: 13.5px;
  color: var(--muted);
}

.page-editor {
  width: 100%;
}

.page-editor .q-field__native {
  min-height: 280px;
  font-size: 14.5px;
  line-height: 1.6;
}

.versions-head {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.versions-head:hover {
  color: var(--text);
}

.versions-head .chevron {
  font-size: 18px;
  transition: transform 0.15s ease;
}

.versions.opened .versions-head .chevron {
  transform: rotate(90deg);
}

.version-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
  padding-left: 22px;
}

.version-row {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--muted);
}

.version-name {
  flex: 1;
  min-width: 0;
}

.version-buttons {
  display: flex;
  align-items: center;
  flex: none;
  width: 196px;  /* Show in one column, whether Use this and Delete follow or not */
}

.version-buttons .q-btn.delete:hover, .document-row .q-btn.delete:hover {
  color: var(--failed);
}

.q-dialog .q-card.sheet-card.version-card {
  display: flex;
  flex-direction: column;
  width: 780px;
  max-height: 86vh;
}

.version-card .version-text {
  min-height: 0;
  margin-top: 12px;
  overflow-y: auto;
}

@container (max-width: 760px) {
  .review-sides {
    display: block;
    overflow-y: auto;
  }

  .review-image {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .image-box {
    max-height: 70vh;
  }

  .review-text {
    overflow: visible;
  }
}

/* A library source (source_view.py): its outline as a tree beside the unit's text. */
.source-view {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 0;
}

.source-outline {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--side);
  border-right: 1px solid var(--line);
}

.outline-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 16px 8px;
}

.outline-title {
  font-size: 15px;
  font-weight: 600;
}

.outline-count {
  font-size: 12.5px;
  color: var(--faint);
}

.outline-find {
  margin: 0 12px 8px;
}

.outline-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 28px;
  font-size: 13px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.outline-tree .q-tree__node-header {
  margin-top: 1px;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--muted);
}

.outline-tree .q-tree__node-header:hover {
  color: var(--text);
}

.outline-tree .q-tree__node--selected {
  background: var(--raised);
  color: var(--text);
}

.outline-tree .q-tree__node-header:before, .outline-tree .q-tree__node:after {
  display: none;  /* Quasar's connecting lines */
}

.source-unit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 30px 56px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.unit-head {
  position: sticky;
  top: -20px;  /* the unit's padding: it stays in sight while its text scrolls */
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -20px -30px 0;
  padding: 20px 30px 10px;
  background: var(--stage);
  border-bottom: 1px solid var(--line);
}

.unit-title-box {
  flex: 1;
  min-width: 0;
}

.unit-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.unit-facts {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.unit-id {
  margin-top: 1px;
  font-size: 12px;
  color: var(--faint);
}

@container (max-width: 680px) {
  .source-view {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 38%) minmax(0, 1fr);
  }

  .source-outline {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* The outline's tabs (Outline, Find in the text) and the places found. */
.outline-tabs {
  display: flex;
  gap: 16px;
  padding: 0 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.outline-tab {
  padding: 4px 0 7px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.outline-tab:hover {
  color: var(--text);
}

.outline-tab.current {
  color: var(--text);
  border-bottom-color: var(--paper);
}

.outline-part, .find-part {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.places {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.places-count {
  padding: 2px 8px 8px;
  font-size: 12.5px;
  color: var(--faint);
}

.place {
  display: block;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.place:hover {
  background: var(--raised);
  color: var(--text);
}

.place-name {
  font-size: 13px;
  font-weight: 560;
  color: var(--text);
}

.place-line {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.place-line .hit {
  color: var(--cited);
  background: rgba(157, 183, 214, 0.14);
  border-radius: 3px;
}

/* --- the Library page -------------------------------------------------------------------- */

.library-folders {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--side);
  border-right: 1px solid var(--line);
}

.folders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 10px 20px;
}

.folders-head .title {
  font-size: 17px;
  font-weight: 600;
}

.library-find {
  margin: 0 12px 10px;
}

.folder-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.folder-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding-right: 8px;
  border: 1px dashed transparent;
  border-radius: 7px;
  color: var(--muted);
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
}

.folder-row:hover {
  color: var(--text);
}

.folder-row.current {
  background: var(--raised);
  color: var(--text);
}

.folder-row.drop-here {
  border-color: var(--paper);
  background: var(--hover);
}

.folder-row .chevron, .folder-row .chevron-room {
  flex: none;
  width: 18px;
  font-size: 18px;
  color: var(--faint);
}

.folder-row .folder-icon {
  flex: none;
  font-size: 17px;
  color: var(--faint);
}

.folder-row .folder-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-row .folder-count {
  font-size: 12px;
  color: var(--faint);
}

.library-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--stage);
}

.library-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px 12px;
}

.library-head .title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-head .facts {
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

.library-head .actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.library-head .actions .q-btn.delete {
  color: var(--faint);
}

.library-lines {
  padding: 0 28px 8px;
}

.library-lines .reading-line, .library-lines .panel-note {
  margin: 0 0 4px;
}

.library-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 28px 56px;
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.library-empty {
  margin-top: 12vh;
}

.source-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(56, 57, 61, 0.6);
}

.source-row[draggable="true"] {
  cursor: grab;
}

.source-text {
  flex: 1;
  min-width: 0;
}

.source-text .name.opens {
  display: block;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  font-weight: 560;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.source-text .name.opens:hover {
  text-decoration: underline;
  text-decoration-color: var(--faint);
}

.source-text .facts {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.source-state {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--faint);
}

.source-state.working { color: var(--working); }
.source-state.waiting { color: var(--asking); }
.source-state.failed { color: var(--failed); }

.row-actions {
  display: flex;
  flex: none;
  gap: 0;
  opacity: 0.55;
  transition: opacity 0.12s ease;
}

.source-row:hover .row-actions, .row-actions:focus-within {
  opacity: 1;
}

.row-actions .q-btn .q-icon {
  font-size: 18px;
}

.sheet-card .card-subtitle {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
}

.sheet-card .buttons.start {
  justify-content: flex-start;
}

.sheet-card .reading-choice {
  margin-top: 12px;
  font-size: 13.5px;
}

.sheet-card .edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0;
}

.sheet-card .result-line {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* --- the side panel ---------------------------------------------------------------------- */

.side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--side);
  border-left: 1px solid var(--line);
}

.side-tabs {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 14px 20px 0;
  border-bottom: 1px solid var(--line);
}

.side-tabs > .q-btn {
  margin: 0 -8px 6px auto;
}

.side-tab {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 540;
  cursor: pointer;
}

.side-tab:hover {
  color: var(--text);
}

.side-tab.current {
  color: var(--text);
  border-bottom-color: var(--paper);
}

.side-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.panel {
  display: flex;
  flex-direction: column;
}

.panel-part {
  padding: 16px 20px 18px;
  border-bottom: 1px solid var(--line);
}

.panel-part:last-child {
  border-bottom: 0;
}

.part-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-bottom: 6px;
}

.part-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.part-head .count {
  font-size: 12.5px;
  color: var(--faint);
}

.part-head .q-btn {
  margin-left: auto;
}

.part-head .part-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.part-head .part-actions .q-btn {
  margin-left: 0;
}

.reading-line {
  margin: -4px 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--working);
}

.size-line {
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}

.panel-note {
  margin: 4px 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.panel-link {
  margin: 14px 20px 20px;
  font-size: 13px;
  color: var(--muted);
}

.document-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(56, 57, 61, 0.6);
}

.document-row:first-of-type {
  border-top: 0;
}

.document-row.unused .name {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: var(--line);
}

.document-text {
  flex: 1;
  min-width: 0;
}

.document-text .name {
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-text .name.opens {
  display: block;
  max-width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 560;
  text-align: left;
  cursor: pointer;
}

.document-text .name.opens:hover {
  text-decoration: underline;
  text-decoration-color: var(--faint);
}

.document-text .facts {
  margin-top: 1px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.document-text .facts.holding {
  color: var(--faint);
}

.toggles {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding-top: 1px;
}

.toggles .q-btn.delete {
  margin: -4px -6px 0 0;
  color: var(--faint);
}

.toggles .q-btn.delete .q-icon {
  font-size: 17px;
}

.toggle {
  padding: 2px 8px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--faint);
  font: inherit;
  font-size: 12px;
  font-weight: 540;
  cursor: pointer;
}

.toggle:hover {
  color: var(--text);
  border-color: #5a5c61;
}

.toggle.on {
  background: var(--raised);
  border-color: #55575c;
  color: var(--text);
}

.notes-box {
  width: 100%;
}

/* Saved, or kept until the run has ended: the notes save themselves (2026-11-03). */
.part-head .notes-state {
  margin-left: auto;
  font-size: 12px;
  color: var(--faint);
  text-align: right;
}

.notes-box .q-field__native {
  min-height: 72px;
  max-height: 320px;
  font-size: 14px;
  line-height: 1.55;
}

.library-actions {
  display: flex;
  gap: 2px;
  margin: 0 0 6px -8px;
}

.library-folder .q-checkbox__label {
  font-weight: 600;
  color: var(--text);
}

.library-source {
  display: flex;
  align-items: center;
}

.library-source .source-size {
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.library-source .source-open.q-btn {
  color: var(--faint);
}

.library-source .source-open .q-icon {
  font-size: 17px;
}

.library-source .q-checkbox__label {
  color: var(--muted);
  font-size: 13.5px;
  overflow-wrap: anywhere;  /* a source's name, which may be long (2026-11-03) */
}

.library-source .q-checkbox {
  min-width: 0;
}

/* The library's find box in the Sources (2026-11-03). */
.sources-find {
  margin: 0 0 8px;
}

.answer-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border-top: 1px solid rgba(56, 57, 61, 0.6);
}

.answer-row:first-of-type {
  border-top: 0;
}

.answer-open {
  flex: 1;
  min-width: 0;
  padding: 9px 8px 9px 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.answer-open:hover .name {
  text-decoration: underline;
  text-decoration-color: var(--faint);
}

.answer-open .name {
  font-weight: 560;
}

.answer-open .facts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--faint);
}

.answer-open .question {
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outdated-line {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--asking);
}

.answer-row > .q-btn {
  margin-top: 6px;
}

/* --- the side panel's Monitor (monitor_panel.py) ----------------------------------------- */

.now-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.now-top .phase {
  font-size: 16px;
  font-weight: 600;
}

.meter {
  min-width: 0;
  margin-top: 10px;
}

.meter-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}

.meter-title {
  color: var(--faint);
}

.meter-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.meter-bar {
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  background: var(--raised);
  border-radius: 2px;
}

.meter-bar .fill {
  width: 0;
  height: 100%;
  background: var(--done);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.member-row {
  display: grid;
  grid-template-columns: 22px 78px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: 5px 0;
}

.member-row .name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.member-row.active .name {
  color: var(--text);
}

.member-row .doing {
  font-size: 12.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-row.active .doing {
  color: var(--text);
}

.program-row {
  display: grid;
  grid-template-columns: 10px auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 10px;
  padding: 4px 0;
}

.program-row .name {
  font-weight: 600;
  font-size: 13.5px;
}

.program-row .detail, .call-row .detail {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-row {
  display: grid;
  grid-template-columns: 62px 120px minmax(0, 1fr);
  column-gap: 10px;
  padding: 3px 0;
  font-size: 12.5px;
}

.call-row .at {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.call-row .name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-note.memory {
  margin-top: 8px;
}

/* --- the Monitor tab (monitor_panel.py: the Monitor page of step 21, from Atelier's, in the
   side panel since 2026-10-31) --------------------------------------------------------------- */

/* Its cards in two columns when the tab is wide enough (the side panel dragged wider: a query on
   the tab's own width, as the Monitor page's was on the window's), else in one. */
.monitor-panel {
  container: monitor / inline-size;
}

.monitor-panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--side);
  border-bottom: 1px solid var(--line);
}

.monitor-panel-head .run-select {
  width: min(380px, 100%);
}

.monitor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1680px;
  padding: 16px 20px 40px;
}

@container monitor (min-width: 1200px) {
  .monitor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.monitor-panel .card {
  background: var(--stage);
}

.card {
  min-width: 0;
  padding: 16px 18px 18px;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.card.wide {
  grid-column: 1 / -1;
}

.card-head {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.card .card-part {
  margin: 16px 0 6px;
  font-size: 12.5px;
  color: var(--faint);
}

.card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-top .q-btn-toggle {
  margin-left: auto;
}

.monitor-grid .now-top {
  flex-wrap: wrap;
  margin-bottom: 0;
}

.monitor-grid .now-top .phase {
  font-size: 18px;
}

.now-top .budget {
  display: flex;
  gap: 22px;
  margin-left: auto;
}

.now-top .budget .meter {
  width: 220px;
  margin-top: 0;
}

.now-line {
  min-height: 1.45em;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
}

.team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.member.active {
  background: var(--raised);
  border-color: var(--line);
}

.member .name {
  font-size: 13.5px;
  font-weight: 600;
}

.member .status {
  display: -webkit-box;
  min-height: 2.6em;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.member.active .status {
  color: var(--text);
}

.monitor-grid .meter {
  margin-top: 4px;
}

.meter-bar.empty {
  visibility: hidden;
}

.card .chart {
  width: 100%;
  height: 120px;
  margin: 4px 0 12px;
}

.span-toggle {
  border: 1px solid var(--line);
}

/* A choice of two or three (ui.toggle): the one chosen in light paper, as a kind chip. Quasar
   gives it text-white, an !important in NiceGUI's layers that an unlayered rule can't beat: the
   text's own colour is set instead. */
.q-btn-toggle .q-btn .q-btn__content {
  color: var(--muted);
}

.q-btn-toggle .q-btn.bg-primary .q-btn__content {
  color: var(--paper-text);
  font-weight: 600;
}

.span-toggle .q-btn {
  font-size: 12px;
}

.span-note {
  margin: 4px 0 6px;
  font-size: 12px;
  color: var(--faint);
}

.monitor-grid .program-row {
  padding: 5px 0;
}

.monitor-grid .program-row .detail {
  white-space: normal;
}

.program-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 8px 20px;
}

.program-actions .q-btn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
}

.handover {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  padding: 2px 0;
  font-size: 12.5px;
}

.handover .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.handover .at, .event .at, .call-line .at, .live-line .at {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.handovers-all {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.handovers-all .q-item {
  min-height: 36px;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--muted);
}

.handovers-all .handovers {
  max-height: 260px;
  overflow-y: auto;
}

/* A list of a run's rows, newest first, a page at a time (Rows): it scrolls, and loads older
   rows near its end. */
.rows {
  max-height: 460px;
  overflow-y: auto;
  font-size: 12.5px;
}

.rows.handovers {
  max-height: 200px;
}

.rows.live-rows, .rows.new-files {
  max-height: 520px;
}

.rows-more.q-btn {
  margin: 6px 0 2px;
  min-height: 28px;
  font-size: 12.5px;
}

.rows-empty {
  padding: 4px 0;
}

.speed-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.figure-title {
  font-size: 12px;
  color: var(--faint);
}

.figure-value {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.call-line {
  display: grid;
  grid-template-columns: 64px 150px minmax(0, 1fr) 120px 72px 64px 84px 64px;
  align-items: center;
  column-gap: 14px;
  padding: 3px 0;
  font-size: 12.5px;
}

/* The web edition's: Took holds a Cloud call's cost too ("1.2 min · $0.004" is 83px). */
.call-line.costs {
  grid-template-columns: 64px 150px minmax(0, 1fr) 120px 72px 92px 84px 64px;
}

.call-line > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.call-line.call-head {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--faint);
}

.call-line .who {
  display: flex;
  align-items: center;
  gap: 6px;
}

.call-line .calls-made {
  color: var(--muted);
}

.kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.kind-chip {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 11px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.kind-chip .count {
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.kind-chip.none {
  opacity: 0.5;
}

.kind-chip:hover {
  border-color: #55575c;
  color: var(--text);
}

.kind-chip.current {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--paper-text);
  font-weight: 600;
}

.kind-chip.current .count {
  color: var(--paper-text);
}

.event {
  display: grid;
  grid-template-columns: 64px 64px minmax(0, 1fr);
  column-gap: 10px;
  padding: 4px 0;
  border-top: 1px solid rgba(56, 57, 61, 0.6);
}

.event .kind {
  color: var(--faint);
}

.event .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event.kind-error .kind, .event.kind-error .text {
  color: var(--failed);
}

.event.kind-budget .kind {
  color: var(--asking);
}

.live-line {
  display: grid;
  grid-template-columns: 58px 112px minmax(0, 1fr);
  column-gap: 10px;
  padding: 3px 0;
  border-top: 1px solid rgba(56, 57, 61, 0.6);
}

.live-line .who {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-weight: 600;
}

.live-line .who > .q-label, .live-line .who > div:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-line .body {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.live-line .body > * {
  display: inline;
}

.live-line .tag {
  margin-right: 6px;
  color: var(--faint);
}

.live-line .text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.live-line.kind-thinking .text {
  color: var(--muted);
  font-style: italic;
}

.live-line.kind-result .text, .live-line.kind-note .text, .live-line.kind-program .text {
  color: var(--muted);
}

.live-line.kind-progress .who {
  color: var(--working);
}

.new-file {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 2px 0;
  border-top: 1px solid rgba(56, 57, 61, 0.6);
}

.new-file .kind {
  font-size: 16px;
  color: var(--faint);
}

.new-file .path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.new-file .meta {
  white-space: nowrap;
  font-size: 12px;
  color: var(--faint);
}

.new-file .q-btn.quiet.q-btn--round {
  width: 30px;
  height: 30px;
  min-height: 30px;
}

.new-file .q-btn .q-icon {
  font-size: 16px;
}

@container monitor (max-width: 840px) {
  .now-top .budget {
    margin-left: 0;
    width: 100%;
  }
}

/* --- the Settings page (settings_page.py, step 21, from Atelier's) ------------------------ */

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 960px;
  padding: 22px 28px 120px;
}

.settings-card .card-head {
  margin-bottom: 2px;
}

.settings-card .card-lead {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--muted);
}

.settings-card .card-note {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}

.settings-part {
  margin: 18px 0 8px;
  font-size: 12.5px;
  color: var(--faint);
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.form-row .field {
  width: 200px;
}

.form-row .field-large {
  width: 300px;
}

.field-wide {
  flex: 1;
  min-width: 240px;
}

.field-label {
  font-size: 13.5px;
  color: var(--muted);
}

.choice-toggle {
  border: 1px solid var(--line);
}

.path-field {
  margin-bottom: 10px;
}

.path-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.path-input {
  flex: 1;
  min-width: 0;
}

.field-note {
  min-height: 1.3em;
  margin: 3px 2px 0;
  font-size: 12px;
  color: var(--faint);
}

.field-note.missing {
  color: var(--asking);
}

.profile {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.profile.opened {
  background: var(--stage);
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-head .chevron {
  font-size: 18px;
  color: var(--faint);
}

.profile-head .name {
  font-weight: 600;
}

.profile-head .summary {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--faint);
}

.chip {
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--muted);
}

.chip.in-use {
  border-color: rgba(143, 191, 154, 0.5);
  color: var(--working);
}

.profile-body {
  padding: 6px 14px 14px 40px;
}

.profile-body .field-wide {
  width: 100%;
  margin-bottom: 8px;
}

.profile-fact {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.sampling-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.problem-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--failed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.file-view {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.file-view .q-item {
  min-height: 36px;
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--muted);
}

.file-view .q-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-code {
  width: calc(100% - 16px);
  max-height: 360px;
  margin: 0 8px 8px;
  overflow: auto;
  font-size: 12px;
}

.profile-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.test-page {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.test-page .q-btn {
  align-self: flex-start;
}

.upload.q-uploader {
  width: 100%;
  max-height: 160px;
  background: var(--side);
  border: 1px dashed #4a4c51;
  border-radius: 8px;
  box-shadow: none;
  color: var(--text);
}

.upload .q-uploader__header {
  background: var(--raised);
  color: var(--text);
}

.upload .q-uploader__subtitle {
  color: var(--faint);
}

.upload .q-uploader__list {
  display: none;  /* the page says what it took */
}

.test-log {
  max-height: 260px;
  margin-top: 12px;
  padding: 10px 12px;
  overflow-y: auto;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.test-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.test-line.passed { color: var(--working); }
.test-line.failed { color: var(--failed); }

/* The effort levels on the Settings page (settings_page.py: team): the levels in tabs, as the
   side panel's, the one a new project starts with marked default. */
.level-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 16px 0 6px;
  border-bottom: 1px solid var(--line);
}

.level-tab {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 540;
  cursor: pointer;
}

.level-tab:hover {
  color: var(--text);
}

.level-tab.current {
  color: var(--text);
  border-bottom-color: var(--paper);
}

.level-tab .default {
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
}

.team-rows {
  display: flex;
  flex-direction: column;
}

.role-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 160px 190px;
  align-items: center;
  column-gap: 14px;
  padding: 8px 0;
  border-top: 1px solid rgba(56, 57, 61, 0.6);
}

.role-row:first-child {
  border-top: 0;
}

.role-text .name {
  font-weight: 600;
}

.role-text .work {
  font-size: 12.5px;
  color: var(--muted);
}

.role-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.role-row.off .role-text, .role-row.off .avatar {
  opacity: 0.45;
}

.role-row .always {
  font-size: 12.5px;
  color: var(--faint);
}

.save-bar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 28px;
  background: var(--raised);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.3);
}

.save-bar .what {
  margin-right: auto;
  color: var(--text);
}

@media (max-width: 900px) {
  .role-row {
    grid-template-columns: 22px minmax(0, 1fr);
    row-gap: 6px;
  }
}

/* --- the Instructions page (instructions_page.py, context_view.py, step 21) --------------- */

.instructions-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  width: 100%;
  max-width: 1280px;
  padding: 22px 28px 80px;
}

.instr-list {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  padding-right: 4px;
  overflow-y: auto;
}

.instr-section {
  margin: 14px 8px 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.instr-section:first-child {
  margin-top: 0;
}

.instr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.instr-item:hover {
  background: var(--hover);
  color: var(--text);
}

.instr-item.current {
  background: var(--raised);
  color: var(--text);
}

.instr-item .name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instr-icon {
  font-size: 17px;
  color: var(--faint);
}

.instr-icon.big {
  font-size: 22px;
}

.instr-state {
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
}

.instr-state.unsaved {
  color: var(--asking);
}

.instr-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.instr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.instr-title {
  font-size: 18px;
  font-weight: 600;
}

.instr-part {
  margin: 24px 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.instr-lead {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.instr-lead.faint {
  font-size: 12px;
  color: var(--faint);
}

.instr-editor {
  height: auto;  /* as tall as its text, up to max-height */
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.instr-editor .cm-editor {
  height: auto;
  min-height: 140px;
  max-height: 62vh;
  background: var(--side);
  font-size: 13px;
}

.instr-editor .cm-scroller {
  overflow: auto;
}

.instr-editor.read-only .cm-editor {
  max-height: 46vh;
}

.instr-editor .cm-gutters {
  background: var(--side);
  border-right: 1px solid var(--line);
  color: var(--faint);
}

.instr-editor .cm-activeLine, .instr-editor .cm-activeLineGutter {
  background: rgba(255, 255, 255, 0.035);
}

.instr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.instr-actions .what {
  margin-right: auto;
  font-size: 12.5px;
  color: var(--faint);
}

.instr-actions .what.unsaved {
  color: var(--asking);
}

.diff {
  max-height: 320px;
  margin-top: 8px;
  padding: 8px 10px;
  overflow-y: auto;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.diff-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--faint);
}

.diff-line.added { color: var(--working); }
.diff-line.removed { color: var(--failed); }
.diff-line.hunk { margin-top: 6px; color: var(--muted); }

.context-box {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.msg.q-expansion-item {
  align-self: stretch;
  width: 100%;
  margin-top: 6px;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.msg .q-item {
  min-height: 40px;
  padding: 6px 12px;
}

.msg .q-item__label {
  font-size: 13px;
  color: var(--text);
}

.msg .q-item__label--caption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--faint);
}

.msg .q-expansion-item__content {
  padding: 0 12px 10px;
}

.msg.system .q-item__label:first-child,
.msg.answer .q-item__label:first-child {
  font-weight: 600;
}

.msg.note .q-item__label:first-child {
  color: var(--asking);
}

.msg.helper {
  margin-top: 8px;
}

.msg-part {
  margin: 10px 0 6px;
  font-size: 12.5px;
  color: var(--faint);
}

.msg-text {
  max-height: 520px;
  padding: 8px 10px;
  overflow-y: auto;
  background: var(--stage);
  border-radius: 6px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.msg-text.muted {
  color: var(--muted);
}

@media (max-width: 900px) {
  .instructions-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .instr-list {
    position: static;
    max-height: none;
  }
}

/* --- choosing a folder or a file (path_picker.py, from Atelier) --------------------------- */

.q-dialog .q-card.picker-card {
  width: 620px;
}

.picker-drives {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 10px;
}

.picker-card .picker-bar, .picker-card .picker-list {
  align-self: stretch;
}

.picker-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.picker-where {
  flex: 1;
}

.picker-list {
  display: flex;
  flex-direction: column;
  height: 340px;
  margin-top: 10px;
  padding: 4px;
  overflow-y: auto;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.picker-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.picker-entry .q-icon {
  font-size: 18px;
  color: var(--faint);
}

.picker-entry:hover {
  background: var(--hover);
}

.picker-entry.chosen {
  background: var(--paper);
  color: var(--paper-text);
}

.picker-entry.chosen .q-icon {
  color: var(--paper-text);
}

/* --- the web edition: the pages before a login and Your account (web/, W3) --------------- */

.sign-in {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding: 32px 16px;
  background: var(--stage);
}

.sign-in-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 400px;
  max-width: 100%;
  padding: 28px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.sign-in-card .wordmark {
  padding: 0;
}

.sign-in-card .card-title {
  font-size: 18px;
  font-weight: 600;
}

.sign-in-card .card-lead {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.sign-in-card .card-note {
  margin: 0;
}

.sign-in-card .error {
  min-height: 20px;
  color: var(--failed);
  font-size: 13px;
}

.sign-in-card .q-btn {
  align-self: flex-start;
}

.sign-in-link {
  color: var(--text);
}

.account-value {
  font-size: 20px;
  font-weight: 600;
}

/* --- the web admin's Activity page (web/activity_page.py, Phase 1 step 1.2) ------------- */

.settings-body.activity-body {
  max-width: 1280px;
}

.activity-glance {
  display: grid;
  grid-template-columns: minmax(180px, 260px) repeat(2, 110px);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  width: max-content;
  max-width: 100%;
}

.activity-glance > * {
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.activity-glance > .glance-head {
  border-top: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.activity-glance > .glance-what {
  color: var(--muted);
}

.activity-glance > .glance-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.needs-look-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--asking);
}

.found-count {
  font-size: 13px;
  color: var(--muted);
}

.activity-table {
  display: grid;
  grid-template-columns: 170px minmax(160px, 1fr) 170px minmax(240px, 2fr);
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-x: auto;
}

.activity-table > * {
  min-width: 0;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.activity-table > .activity-head {
  border-top: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.activity-table > .activity-cell {
  color: var(--muted);
}

.activity-table > .activity-cell.what {
  color: var(--text);
}

.activity-table > .activity-cell.time {
  font-variant-numeric: tabular-nums;
}

/* --- the web admin's Users page (web/users_page.py, W4) --------------------------------- */

.users-body {
  width: 100%;
  padding: 22px 28px 80px;
  overflow-x: auto;
}

.users-table {
  display: grid;
  /* User, Now, Last active, Projects, GPU time, Cloud, Storage, Account ends, Last login, the
     menu */
  grid-template-columns:
    minmax(220px, 2fr) minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(76px, 0.5fr)
    repeat(3, minmax(150px, 1.2fr)) repeat(2, minmax(120px, 1fr)) 52px;
  min-width: 1430px;
  max-width: 1920px;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.users-table > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.users-table > .users-head {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.users-table .users-cell {
  color: var(--muted);
  font-size: 13px;
}

.user-cell .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
}

.user-cell .state {
  font-size: 12.5px;
  color: var(--faint);
}

.user-cell .state::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--idle);
  vertical-align: 1px;
}

/* Who has the GPU (2026-11-03): its call goes on, it holds the GPU, it waits for it. */
.users-table .now.working { color: var(--working); }
.users-table .now.holding { color: var(--text); }
.users-table .now.waiting { color: var(--asking); }

/* A usage's share used, as a bar under its words (2026-11-03). */
.users-table .usage .usage-bar {
  height: 5px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.users-table .usage .usage-fill {
  height: 100%;
  border-radius: 3px;
}

/* Under a user's storage bar: what their whole folder takes on the server, against the
   server's own limit (2026-11-05). */
.users-table .usage .usage-note {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--faint);
}

.usage-bar.green .usage-fill { background: var(--working); }
.usage-bar.amber .usage-fill { background: var(--asking); }
.usage-bar.red .usage-fill { background: var(--failed); }

.user-cell .state.active::before { background: var(--working); }
.user-cell .state.invited::before { background: var(--asking); }
.user-cell .state.suspended::before, .user-cell .state.ended::before { background: var(--failed); }

.example-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

/* --- a band across the top of the page: the admin's read-only view of an account (W6b;
   web/view.py, ui/viewing.py), the GPU worker's pages (W7; worker/pages.py), the web admin's
   pages and the GPU not available (2026-11-03; ui/sidebar.py) ------------------------------ */
/* The band says where the page is; the page sits under it (body.with-band). Its colours are its
   kind's: the view's amber, the worker's blue, the admin's red, the GPU's violet, the admin's
   banner green. The banner and the GPU's band may both show: they stack (body.two-bands), the
   GPU's second. */

body.with-band {
  --page-band: 34px;
}

body.with-band.two-bands {
  --page-band: 68px;
}

.page-band {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 16px;
  background: var(--band-background);
  border-bottom: 1px solid var(--band-line);
  color: var(--text);
  font-size: 13px;
}

.view-band { --band-background: #3a3322; --band-line: var(--asking); }
.worker-band { --band-background: #1c3346; --band-line: #6fa8d6; }
/* The web edition's (2026-11-03): the admin's pages, and the GPU not available to the user. */
.admin-band { --band-background: #3d2121; --band-line: #d27b6f; }
.gpu-band { --band-background: #2e2544; --band-line: #a68ce0; }
.notice-band { --band-background: #1d362c; --band-line: #6cc9a1; }
.page-band.second { top: 34px; }

.page-band .q-icon {
  color: var(--band-line);
  font-size: 18px;
}

.page-band .band-what {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-band .band-link {
  margin-left: auto;
  color: var(--text);
  font-weight: 560;
  text-underline-offset: 3px;
}

.page-band a.band-link {
  text-decoration: underline;
}

body.with-band .app {
  height: calc(100vh - var(--page-band));
  margin-top: var(--page-band);
}

@media (max-width: 1499px) {
  body.with-band :is(.workspace > .side, .app > .viewer) {
    top: var(--page-band);  /* the narrow window's drawer and viewer, under the band */
  }
}

/* The read-only view: the controls that would change something are dimmed and take no click
   (the server lets their events through neither); those marked .viewing (the tabs, the viewer,
   the thinking, the find boxes) work. */

body.read-only-view :is(.q-btn, .q-checkbox, .q-toggle, .q-chip, button):not(.viewing) {
  opacity: 0.4;
  pointer-events: none;
}

body.read-only-view .q-field:not(.viewing) {
  opacity: 0.75;  /* the user's text in it is read */
  pointer-events: none;
}

/* --- the GPU worker's pages (worker/pages.py, W7) --------------------------------------- */

.worker-state {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
}

.worker-state .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--idle);
  flex: none;
}

.worker-state .dot.working { background: var(--working); }
.worker-state .dot.finished { background: var(--done); }
.worker-state .dot.asking { background: var(--asking); }

.program-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.program-row:first-of-type {
  border-top: 0;
}

.program-row .name {
  min-width: 220px;
  font-weight: 560;
}

.program-row .facts {
  color: var(--muted);
  font-size: 13px;
}

.calls-table {
  display: grid;
  /* When, Whose, The model, Time, Prompt, Output, Cost, How it ended (2026-11-03: the tokens;
     2026-11-05: the Cloud's cost) */
  grid-template-columns:
    auto minmax(0, 1.4fr) minmax(0, 1fr) auto minmax(0, 1.1fr) minmax(0, 1fr) auto auto;
  overflow-x: auto;
}

/* The worker's page is wider than a settings page: its calls have eight columns. */
.settings-body.worker-body {
  max-width: 1440px;
}

.calls-table > * {
  min-width: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calls-table > .users-head {
  border-top: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.calls-table > .users-cell {
  font-size: 13px;
  color: var(--muted);
}