/* The entry screen (UI-114): the home page, the upload and the run.
 *
 * `/ui/screen.css` carries the system — the utilities, the buttons, the fields,
 * the chips, the glass and the toast. This file adds only what the entry has
 * and the workspace does not: a page that scrolls, a hero with a drop zone, a
 * grid of project cards, and the run's own list of stages.
 *
 * The same rule as that file, and it is checked by a test: **no colour, radius,
 * curve or duration as a literal** — every one comes from `design/tokens.css`.
 * And §4's rule holds here too: only `transform` and `opacity` animate.
 */

/* --- The page ---------------------------------------------------------- */
body.web { overflow: auto; background: var(--paper); }

/* `.btn` and `.pcard` set their own `display`, which outranks the browser's own rule for
 * `[hidden]` — so an element hidden in TypeScript stayed on screen. Found on the run screen,
 * where "Открыть проект" sat there while the GPU was still waking, inviting a click into a
 * project that did not exist yet. This file is loaded after `screen.css`, so one rule settles
 * it for everything the entry screen hides. */
[hidden] { display: none; }

/* Docked to the top edge (unlike the workspace's floating `.topbar`), so its own height grows
   by the safe-area inset — DESIGN.md §5's phone app bar is "48 px plus
   env(safe-area-inset-top)" — rather than squeezing its 56 px of content into less room. */
.webbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));
  border-radius: 0;
}

.webmain { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }
.webscreen { display: flex; flex-direction: column; }
.webscreen[hidden] { display: none; }

.t-28 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.t-34 { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.18; }
.row.base { align-items: baseline; }

/* --- Cards ------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: none;
}

/* Card #2056: two equal ways in — a plan, or quick start — under one short title. */
.hero {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px;
  padding: 24px; border-radius: var(--r-panel);
}
.hero-title { grid-column: 1 / -1; }
.way {
  min-width: 0; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.way h2 { margin: 0; }
.way p { margin: 0; }
/* The two actions line up at the bottom of their panels, whatever the text above them holds. */
.way-go { margin-top: auto; width: 100%; }
.way-grid {
  flex: 1 1 auto; width: 100%; min-height: 96px; max-height: 168px;
  border-radius: var(--r-card); background: var(--sunken); color: var(--line);
}
.way-grid-piece { stroke: var(--brand-text, var(--sys-text)); }
.way-grid-dot { fill: var(--brand-text, var(--sys-text)); }
/* `--bp-tablet` (design/tokens.css), not a literal of its own (MOB-24): a phone stacks the two. */
@media (max-width: 767px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .way { padding: 14px; }
  .way-grid { max-height: 96px; }
}

.drop { min-width: 0; }

.dropzone {
  align-items: center; text-align: center;
  padding: 22px 18px;
  border: 1.5px dashed var(--line2);
  border-radius: var(--r-card);
  background: var(--sunken);
  transition: transform var(--d-state) var(--ease-out), opacity var(--d-state) var(--ease-out);
}
.dropzone.over { transform: scale(1.01); border-color: var(--focus); }

.brieffld { width: 100%; height: auto; padding: 10px 12px; line-height: 1.47; resize: vertical; }

.btn.big { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* --- The project grid --------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
/* `--bp-wide` and `--bp-tablet` (design/tokens.css), not literals of their own (MOB-24). */
@media (max-width: 1279px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid { grid-template-columns: minmax(0, 1fr); } }

.pcard {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  color: var(--ink); cursor: pointer;
  transition: transform var(--d-micro) var(--ease-out), box-shadow var(--d-micro) var(--ease-out);
}
.pcard:hover { transform: translateY(-1px); box-shadow: var(--sh-lift); }

/* Owner, 2026-10-19: «в объектах надо чтобы были видны миниатюры». The thumbnail sits left of the
   name, one size on every card of a grid, beside the card's own lines so the card grows no taller
   than its text. Four narrow columns (`--bp-wide` and up) keep the name and the date beside it and
   give the marks the card's whole width, so no mark is cut. */
.pcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 14px;
  grid-template-areas: "thumb name" "thumb date" "thumb marks"; grid-template-rows: auto auto auto; align-content: start;
}
.pcard-name { grid-area: name; padding-right: 28px; }
.pcard-date { grid-area: date; }
.pcard-marks { grid-area: marks; }
.chip.pcard-nights { font-weight: 600; }
.pthumb { grid-area: thumb; }
@media (min-width: 1280px) {
  .pcard { grid-template-areas: "thumb name" "thumb date" "marks marks"; grid-template-rows: auto auto auto; column-gap: 12px; }
  .pcard .pthumb { width: 56px; height: 56px; }
}
.pthumb {
  width: 72px; height: 72px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-ctl);
}
.pthumb svg { width: 100%; height: 100%; }
.pthumb img { width: 100%; height: 100%; object-fit: contain; background: var(--paper); }
.pthumb path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pthumb .pthumb-room { fill: var(--plan-fill); stroke: none; }
.pthumb .pthumb-wall { stroke: var(--plan-stroke); stroke-width: 1.5; }
.pthumb .pthumb-window { stroke: var(--plan-space); stroke-width: 3; }
.pthumb .pthumb-door { stroke: var(--sunken); stroke-width: 3; }
/* Nothing to draw yet: a quiet dashed square of the same size. */
.pthumb[data-thumb="none"] { border-style: dashed; }
@media (max-width: 767px) { .pthumb { width: 64px; height: 64px; } .pcard { column-gap: 12px; } }

/* FE-192: the card's own "..." menu is a sibling of the <a>, never nested inside it — a button
   inside a link is two interactive elements answering one tap, which a screen reader and a
   keyboard both handle badly. */
.pcard-wrap { position: relative; }
.pcard-wrap .pcard { padding-right: 16px; } /* the name keeps the menu's room (`.pcard-name`) */
.pcard-menu { position: absolute; top: 8px; right: 8px; z-index: 1; }

/* --- The run ------------------------------------------------------------ */
.runcard { padding: 26px 28px; border-radius: var(--r-panel); max-width: var(--read); }

.strow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.strow:first-child { border-top: 0; }
.stmark { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.stmark.running { color: var(--sys-text); }
.stmark.done { color: var(--good-text); }
.stmark.failed { color: var(--bad-text); }
.stmark.skipped { color: var(--ink3); }

/* The one thing that moves while a stage runs. Opacity only (§4). */
.pulse { animation: fade var(--d-panel) var(--ease-in-out) infinite alternate; }
@keyframes fade { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } .dropzone { transition: none; } .pcard { transition: none; } }

/* --- The reading as a process (UI-124) ---------------------------------------
   The run screen is a stage with the person's own sheet and a panel that is the
   transcript, one row per turn. Layers on the stage appear on the turn that
   produced them; nothing here animates a number, and nothing is drawn before
   its turn has ended. */
.readgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1024px) { .readgrid { grid-template-columns: minmax(0, 1fr); } }
/* The stage clips at its own edge, not at the sheet's: a pin over a room near the top, or a room's
   label near a side, runs past the picture, so the sheet sits `--bleed` inside the stage and the
   layers draw past their box (`overflow: visible`) into that band, as the review workspace does
   since #1426. Zoomed in, the drawing runs on to the stage's edge the same way. */
.readstage { --bleed: 32px; position: relative; padding: var(--bleed); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; min-height: 320px; }
/* #1413: the img only loads the picture and gives the stage its height; the picture itself is
   drawn inside svg.layers (`renderLayers`), so the zoom's viewBox moves it with the rooms. */
.readstage img.sheet { display: block; width: 100%; height: auto; visibility: hidden; }
.readstage svg.layers { position: absolute; top: var(--bleed); left: var(--bleed); width: calc(100% - 2 * var(--bleed)); height: calc(100% - 2 * var(--bleed)); overflow: visible; }
.readstage .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.readlegend { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.readpanel { border-radius: var(--r-panel); padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100dvh - 160px); }
.readpanel .phead { padding: 12px 16px 8px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.readpanel .pbody { flex: 1; min-height: 0; overflow: auto; padding: 0 6px 6px; }
.readpanel .pfoot { padding: 8px 16px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink2); }
.trow { display: flex; gap: 10px; padding: 10px; border-radius: var(--r-card); align-items: flex-start; }
.trow + .trow { border-top: 1px solid var(--line); }
.trow.now { background: var(--sys-bg); }
.trow .when { flex: 0 0 46px; padding-top: 3px; }
.trow .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.trow .note { white-space: pre-wrap; overflow-wrap: anywhere; }
.trow .note.clip { max-height: 7.4em; overflow: hidden; }
.tile { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: var(--surface); margin-top: 4px; }
.tile img { display: block; width: 100%; height: auto; }
.chip.dense { height: 20px; padding: 0 8px; font-size: 11px; }
/* Card #1236: a model name is long; it wraps instead of ending in an ellipsis. */
.chip.dense.wrapname { height: auto; min-height: 20px; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; padding-top: 2px; padding-bottom: 2px; }
.readfoot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); width: fit-content; }
.stagesline { display: flex; flex-wrap: wrap; gap: 6px; }
.stagesline .strow { border: 0; padding: 4px 8px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); gap: 6px; align-items: center; }
.stagesline .strow .num { font-size: 11px; }
/* #1133: a failed reading is several sentences and a closed "details" line, not a one-line pill — it takes its own row, as a card-radius block. The readers' text inside the disclosure wraps and is never cut. */
.stagesline .strow.failedread { flex: 1 1 100%; align-items: flex-start; border-radius: var(--r-card); padding: 8px 12px; }
.failedread .rawwhy summary, .trow .rawwhy summary { cursor: pointer; width: fit-content; }
.failedread .rawwhy .rawtext, .trow .rawwhy .rawtext { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
/* UI-138: the live/replay chip is a `<button>` (it toggles the switch) styled as a chip. */
button.chip { border: 0; cursor: pointer; font-family: inherit; }

/* --- Sign-in and the account (OP-180) ------------------------------------ */
/* Owner, 2026-10-20: the sign-in screen gets a backdrop and a glass card. The backdrop is fixed to the
   window (it shows only while this screen does): the editor's squared paper, a soft wash of the
   palette's brand colour, and our own 3D render of a furnished flat. Desktop: card left, flat right.
   Phone: the flat sits above, the card below it. */
.signinscreen { position: relative; min-height: calc(100dvh - 56px - 88px); justify-content: center; }
.signin-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(50% 60% at 72% 55%, color-mix(in srgb, var(--brand, var(--sys)) 30%, transparent), transparent 72%),
    radial-gradient(40% 45% at 8% 100%, color-mix(in srgb, var(--brand, var(--sys)) 20%, transparent), transparent 70%),
    radial-gradient(35% 35% at 20% 0%, color-mix(in srgb, var(--brand-steel, var(--brand, var(--sys))) 16%, transparent), transparent 70%),
    var(--paper);
}
.signin-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--ink) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 3.5%, transparent) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(75% 70% at 65% 45%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(75% 70% at 65% 45%, #000 30%, transparent 85%);
}
.signin-model {
  position: absolute; right: max(2vw, calc(50vw - 620px)); top: calc(50% + 28px);
  width: min(50vw, 640px, 78dvh); height: auto; transform: translateY(-50%) rotate(-2deg);
  filter: drop-shadow(0 40px 60px color-mix(in srgb, var(--ink) 22%, transparent));
  animation: signin-float 9s var(--ease-in-out) infinite alternate;
}
@keyframes signin-float { from { transform: translateY(-50%) rotate(-2deg); } to { transform: translateY(-53%) rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) { .signin-model { animation: none; } }
:root.reduced .signin-model { animation: none; }
[data-theme="dark"] .signin-model { filter: brightness(.82) drop-shadow(0 40px 60px rgba(0, 0, 0, .5)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .signin-model { filter: brightness(.82) drop-shadow(0 40px 60px rgba(0, 0, 0, .5)); } }
.signinhero {
  max-width: 440px; width: 100%; margin: 0 auto 0 max(0px, calc(50% - 540px)); padding: 32px;
  border-radius: var(--r-panel); border: 1px solid var(--glass-edge); background: var(--glass-tint-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--sh-float), inset 0 1px 0 var(--glass-highlight);
}
.signinhero .t-28 { font-size: 32px; line-height: 1.15; text-wrap: balance; }
.signinhero .lead { margin: 0; text-wrap: pretty; }
.signin-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.signin-points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--ink); line-height: 1.35; }
.signin-points li::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; margin-top: -1px;
  background: var(--brand-bg, var(--sys-bg)) no-repeat center / 12px 12px;
  box-shadow: inset 0 0 0 1px var(--brand-line, var(--sys-line));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='.6'/%3E%3C/svg%3E");
}
.signin-google { width: 100%; min-height: 52px; font-size: 16px; border-radius: var(--r-card); gap: 12px; }
.signin-google .signin-g { flex: none; background: #fff; border-radius: 50%; padding: 3px; width: 26px; height: 26px; }
.signin-note { margin: -4px 0 0; text-align: center; }
@media (max-width: 899px) {
  .signinscreen { justify-content: flex-start; min-height: 0; padding-top: min(46vw, 300px); }
  .signin-model { right: 50%; top: 64px; width: min(88vw, 420px); transform: translateX(50%) rotate(-2deg); animation: none; }
  .signin-bg { background:
    radial-gradient(90% 40% at 50% 18%, color-mix(in srgb, var(--brand, var(--sys)) 22%, transparent), transparent 75%),
    var(--paper); }
  .signin-grid { mask-image: radial-gradient(90% 45% at 50% 20%, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(90% 45% at 50% 20%, #000 30%, transparent 85%); }
  .signinhero { margin: 0 auto; padding: 24px 20px; }
  .signinhero .t-28 { font-size: 26px; }
}
.testsignin { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left; }
.testsignin[hidden] { display: none; }
.accountbox { display: flex; align-items: center; gap: 8px; }
.accountbox .email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- The terms pop-up (OP-180): cannot be dismissed — no close cross, Escape does nothing,
   and there is exactly one button (docs/plans/2026-09-28-terms-popup.md, revised 2026-09-25). */
/* Card #2404 (the owner, 2026-10-22: "the terms pop-up looks bad"): `.card` carries no padding of
   its own, so the dialog sets it; the scrim is dark enough to read as a scrim over the dark page too,
   and the page under it does not scroll while consent is owed. */
.modal-scrim {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overscroll-behavior: contain;
}
html:has(> body > .modal-scrim:not([hidden])), body.web:has(> .modal-scrim:not([hidden])) { overflow: hidden; }
.modal-card {
  max-width: 520px; width: 100%; max-height: 100%; overflow: auto;
  padding: 28px; border-radius: var(--r-panel); box-shadow: var(--sh-lift);
}
.modal-card h2 { margin: 0 0 4px; line-height: 1.25; }
.modal-card p { margin: 0; color: var(--ink2); overflow-wrap: anywhere; }
.modal-card a { text-decoration: underline; text-underline-offset: 2px; }
.modal-card .row.end { justify-content: flex-end; }
/* A word too long for the card at a large text breaks inside it rather than pushing the button off its left edge. */
.modal-card .btn.big { min-height: 48px; padding: 10px 24px; white-space: normal; line-height: 1.25; text-align: center; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .modal-card { padding: 20px; }
  .modal-card .btn.big { width: 100%; }
}

/* FE-955 (US-37 part A): the two rolling-24h limit cards on the entry screen. A plain bar — no
   dependency, the product's own tokens — filled to `used/limit`, never past 100%. */
.limitcard { padding: 10px 12px; border-radius: var(--r-card); background: var(--sunken); border: 1px solid var(--line); }
.limitbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.limitbarfill { height: 100%; background: var(--sys-text, currentColor); border-radius: 3px; transition: width .2s var(--ease-in-out, ease); }
@media (prefers-reduced-motion: reduce) { .limitbarfill { transition: none; } }

/* Card #1874 (US-49): the one way back and the one "where am I" title (`whereBar.ts`, `/ui/where.ts`),
   the workspace's own trail: from 768 px up one line, «‹ Объекты / Настройки / Лимиты». It takes the
   room the bar has and its title gives way first (an ellipsis); the chevron and the controls stay. */
.webbar > .where { flex: 1 1 auto; min-width: 0; }
.where[hidden] { display: none; }
.where-title, .where-here { display: flex; align-items: center; gap: 8px; min-width: 0; }
.where-up { flex: 0 1 auto; min-width: 0; font: 600 15px/1.2 var(--font-ui); color: var(--ink); }
.where-page { flex: 0 1 auto; min-width: 0; font: 400 15px/1.2 var(--font-ui); color: var(--ink); }
/* While the avatar is shown the language is its menu's «Рус / Укр / Eng» row, as on the workspace; the
   select stays for a person who is not signed in. */
.webbar:has(> #avatar:not([hidden])) > #lang { display: none; }
/* What the bar's title already says on the screen below it (the run screen's heading and project) is
   kept for a screen reader and not drawn a second time. */
.said-in-bar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* On a phone (card #1874, the workspace's phone header of card #1805): one row, «‹ | title | search |
   bell | avatar»; the chevron alone at 44 × 44, its word is its accessible name; the title in two lines,
   the place above, the page under it (the GitHub app's «Furnlab / Board», the owner's example). The
   product mark gives its place to the arrow on every screen that has one; the projects list keeps it. */
@media (max-width: 767px) {
  .webbar {
    flex-wrap: nowrap; gap: 2px;
    height: calc(52px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) calc(4px + env(safe-area-inset-right)) 0 calc(4px + env(safe-area-inset-left));
  }
  .webbar:not(:has(> .where:not([hidden]))) > #brand { margin-left: 12px; }
  .webbar:has(> .where:not([hidden])) > #brand { display: none; }
  .webbar > .where { gap: 2px; }
  .where .where-sep, .where-here .crumb-sep { display: none; }
  .where-title { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 0 8px; height: 52px; }
  .where-up { max-width: 100%; font-size: 14px; line-height: 20px; }
  .where-here { max-width: 100%; }
  .where-page { font-size: 12px; line-height: 16px; color: var(--ink2); }
  /* The page that is itself the list (`/settings`, `/admin-tools` on a phone) shows the place alone. */
  .where[data-list] .where-here { display: none; }
  .webbar .notify-btn, .webbar .avatar-btn { width: var(--touch-target); height: var(--touch-target); }
  .webbar > #build-version { display: none; }
  .accountbox .email { max-width: 120px; }
}
/* The avatar is the outermost item at the right edge on every width (owner, 2026-10-04, as on GitHub
   and macOS). screen.css — shared with the review workspace — gives #lang and #build-version
   `order: 2` for that bar's second row; on this one-row bar that sorted them past the avatar, so they
   are reset here and the avatar is pinned last, the notification bell (card #1365) just before it
   (same order, earlier in the document). */
.webbar #lang, .webbar #build-version { order: 0; }
.webbar > #avatar, .webbar > #notify, .webbar > #search-btn { order: 9; margin-left: 0; }
/* #1568: the run screen's top row carries two actions now, so on a phone it wraps rather than run
   past the screen's edge; the reason "read the project again" is off takes its own line under them. */
.runtop { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
.runtop .run-again-why { order: 10; flex-basis: 100%; text-align: right; }

/* Card #1752: the side panel shared by Settings and the Admin tools (owner, 2026-10-09: the admin is
   tabs of Settings; RunPod's console was the example). Groups under a small title, each tab an icon
   and its name on one line, the open tab filled. Pinned to the left edge under the top bar. */
.sidenav {
  position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column; gap: 16px; padding: 16px 12px; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--line);
}
.sidenav-group { display: flex; flex-direction: column; gap: 2px; }
.sidenav-title { margin: 0 10px 6px; font: 600 13px/1.2 var(--font-ui); color: var(--ink3); letter-spacing: .02em; }
.sidenav-item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--r-ctl);
  color: var(--ink2); text-decoration: none; font: 500 14px/1.2 var(--font-ui);
}
.sidenav-item svg { width: 18px; height: 18px; flex: none; }
.sidenav-item:hover { background: var(--sunken); color: var(--ink); }
.sidenav-item[aria-current="page"] { background: var(--sys-bg); color: var(--sys-text); font-weight: 600; }
@media (pointer: coarse) { .sidenav-item { min-height: var(--touch-target, 44px); } }
/* Card #1752: «Обратная связь» and «Помощь» at the panel's foot, as RunPod's Feedback / Help. */
.sidenav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
button.sidenav-item { border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%; }
/* Card #1953: on a phone the panel is a page of its own (the list of sections, US-49), so it is a plain
   block that grows with its rows, never a scroll box. As a scroll box in a grid row, iOS Safari laid
   it out about 60 px tall and clipped the rest: a user saw «Настройки», half of «Оформление» and an
   empty screen under it. */
@media (max-width: 767px) {
  .sidenav { position: static; height: auto; overflow: visible; }
}