/* Pressvik Studio – the console and the master panel. Plain CSS, no frameworks.

   Studio 1.11 (delivery 4c): a deep indigo app shell with a sidebar, light and dark. The theme follows the system
   unless the person chose one (html[data-theme], from the pvs-theme cookie, so that the page never flashes). The
   sidebar is dark in both themes; the work area changes. Poppins (SIL Open Font License, fonts/OFL.txt) is served
   from here, in the Latin subsets Studio's three languages need. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-regular.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-medium.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/poppins-bold.woff") format("woff"); }

:root {
  /* The work area, light. */
  --paper: #f2f3fa;
  --surface: #ffffff;
  --surface-2: #f6f7fc;
  --ink: #161a33;
  --ink-2: #525878;
  --line: #dde0ef;
  --line-strong: #7a7fa1;
  --accent: #3a55e0;
  --accent-ink: #ffffff;
  --accent-soft: #e8ecff;
  --accent-strong: #3149c9;
  --accent-hover: #2b43c2;
  --warn: #8a4b00;
  --warn-soft: #fff1dc;
  --stop: #b42318;
  --stop-soft: #fde7e5;
  --ok: #16743f;
  --ok-soft: #e3f5ea;
  --violet: #6440d8;
  --violet-soft: #efeaff;
  --focus: #2f55e4;
  --code-bg: #eef0f8;
  --shadow: 0 1px 2px rgba(22, 26, 51, 0.06), 0 8px 24px -18px rgba(22, 26, 51, 0.35);
  /* The sidebar, the same in both themes. */
  --side: #0b0d1f;
  --side-2: #151935;
  --side-active: #1d2250;
  --side-ink: #ffffff;
  --side-ink-2: #a3a9d6;
  --side-mark: #8aa2ff;
  --side-line: #232850;
  --radius: 0.5rem;
  --radius-lg: 0.875rem;
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.45rem;
  --step-3: 1.8rem;
  --gap: 1.25rem;
  --sidebar-width: 16rem;
  color-scheme: light;
}

/* The work area, dark: twice, for the system's choice and for the person's own. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1126;
    --surface: #171a35;
    --surface-2: #1f2347;
    --ink: #eef0ff;
    --ink-2: #a9aed3;
    --line: #2a2f5a;
    --line-strong: #767cab;
    --accent: #3d5cf0;
    --accent-ink: #ffffff;
    --accent-soft: #1d2756;
    --accent-strong: #8aa2ff;
    --accent-hover: #2f4ad6;
    --warn: #f6bd5a;
    --warn-soft: #3a2c12;
    --stop: #ff8585;
    --stop-soft: #3d1a22;
    --ok: #5fd69c;
    --ok-soft: #143327;
    --violet: #a58bff;
    --violet-soft: #261f4f;
    --focus: #9db4ff;
    --code-bg: #11142c;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1126;
  --surface: #171a35;
  --surface-2: #1f2347;
  --ink: #eef0ff;
  --ink-2: #a9aed3;
  --line: #2a2f5a;
  --line-strong: #767cab;
  --accent: #3d5cf0;
  --accent-ink: #ffffff;
  --accent-soft: #1d2756;
  --accent-strong: #8aa2ff;
  --accent-hover: #2f4ad6;
  --warn: #f6bd5a;
  --warn-soft: #3a2c12;
  --stop: #ff8585;
  --stop-soft: #3d1a22;
  --ok: #5fd69c;
  --ok-soft: #143327;
  --violet: #a58bff;
  --violet-soft: #261f4f;
  --focus: #9db4ff;
  --code-bg: #11142c;
  --shadow: none;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute always wins, also over components that set display. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }

/* Studio 1.16: on a computer everything is a fifth smaller (as Chrome shows it at 80 %), from the person's own text
   size (a percentage, so that the browser's text size and zoom still work). Every size is in rem, so text, spacing,
   buttons and icons scale together; targets stay at least 24 px (2.75rem is 35 px here). Only with a mouse or a
   trackpad: phones and tablets (also a large one held sideways) keep the full size and their 44 px targets. The
   breakpoints are in rem too, and media queries read rem at the browser's size, never this one. */
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  html { font-size: 80%; }
}

/* Studio 1.16: the scrollbars are Studio's own, in both themes: a slim rounded thumb on the page's colours, darker
   while it is used, at least 3:1 against the page and the panels (WCAG 1.4.11). Firefox and Chrome draw scrollbar-color; Safari and older Chrome the ::-webkit-scrollbar rules.
   (Chrome 121 and later use scrollbar-color when it is set, so the webkit rules are only for browsers without it.) */
:root {
  --scroll-thumb: #7a80a8;
  --scroll-thumb-hover: #5d6390;
  --scroll-track: transparent;
  --scroll-side-thumb: #5c64a8;
  --scroll-side-thumb-hover: #7880c0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --scroll-thumb: #6a74a8; --scroll-thumb-hover: #8a93c4; }
}
:root[data-theme="dark"] { --scroll-thumb: #6a74a8; --scroll-thumb-hover: #8a93c4; }
@supports (scrollbar-color: auto) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
  :where(:hover) { scrollbar-color: var(--scroll-thumb-hover) var(--scroll-track); }
  .sidebar, .sidebar * { scrollbar-color: var(--scroll-side-thumb) transparent; }
  .sidebar:hover, .sidebar *:hover { scrollbar-color: var(--scroll-side-thumb-hover) transparent; }
}
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: max(0.75rem, 10px); height: max(0.75rem, 10px); }
  ::-webkit-scrollbar-track { background: var(--scroll-track); }
  ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
  ::-webkit-scrollbar-corner { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb, .sidebar *::-webkit-scrollbar-thumb { background-color: var(--scroll-side-thumb); }
}
@media (forced-colors: active) {
  *, *:hover { scrollbar-color: auto !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
}

a { color: var(--accent-strong); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 { line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.6em; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; }
b, strong { font-weight: 600; }
code, pre, .mono { font-family: var(--mono); font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); font-weight: 400; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 0.5rem; top: -5rem; z-index: 40;
  background: var(--surface); color: var(--ink); padding: 0.6rem 1rem; border: 2px solid var(--focus);
}
.skip:focus { top: 0.5rem; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- the shell: sidebar, top bar, work area */

/* Phones first: the top bar on top, the sidebar a drawer that the menu button opens (without JavaScript the
   sidebar simply comes first, above the page). From 64rem the sidebar stays on the left. */
.shell { min-height: 100vh; min-height: 100dvh; }
.shell__work { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  background: var(--side); color: var(--side-ink);
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1rem 0.85rem 1.25rem;
}
.sidebar a { color: var(--side-ink); }
.sidebar :focus-visible { outline-color: var(--side-mark); }
.sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.4rem; }
.sidebar__group { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar__label {
  margin: 0 0 0.35rem; padding: 0 0.75rem; font-size: 0.8rem; font-weight: 500; color: var(--side-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__label a { color: var(--side-ink-2); text-decoration: none; }
.sidebar__label a:hover { color: var(--side-ink); text-decoration: underline; }
.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--side-line); padding-top: 1rem; }

.brand {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem;
  color: var(--side-ink); text-decoration: none; font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap;
}
.brand b { font-weight: 700; }
/* The Pressvik logo (its mark and its wordmark), then the product's name. In the dark sidebar the white logo; on the
   page the colour logo in light and the white one in dark (_brand.html). */
.brand__logo { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand__img { display: block; height: 1.7rem; width: auto; flex: none; }
.brand__word { display: block; height: 0.95rem; width: auto; flex: none; }
.brand__logo--page .brand__img--white { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo--page .brand__img--white { display: block; }
  :root:not([data-theme="light"]) .brand__logo--page .brand__img--colour { display: none; }
}
:root[data-theme="dark"] .brand__logo--page .brand__img--white { display: block; }
:root[data-theme="dark"] .brand__logo--page .brand__img--colour { display: none; }
.brand__product { color: var(--side-mark); font-weight: 600; }
.brand--large .brand__product, .topbar__brand .brand__product { color: var(--accent-strong); }
.brand--large { font-size: var(--step-1); margin-bottom: 1.5rem; color: var(--ink); }
.brand--large .brand__img { height: 2.3rem; }
.brand--large .brand__word { height: 1.25rem; }

/* The menus in the sidebar: the main one (.topnav) and a project's (.tabs). */
.topnav, .tabs { display: flex; flex-direction: column; gap: 0.15rem; }
.topnav a, .tabs a {
  display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.75rem;
  color: var(--side-ink-2); text-decoration: none; border-radius: var(--radius); font-weight: 500;
}
.topnav a:hover, .tabs a:hover { background: var(--side-2); color: var(--side-ink); }
.topnav a[aria-current="page"], .tabs a[aria-current="page"] {
  background: var(--side-active); color: var(--side-ink); box-shadow: inset 3px 0 0 var(--side-mark);
}
.topnav a[aria-current="page"] .icon, .tabs a[aria-current="page"] .icon { color: var(--side-mark); }
.tabs .count, .topnav .count { margin-left: auto; }
.sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }

/* The theme: one button that goes system → light → dark; its text says which one it is. */
.theme {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.75rem; padding: 0 0.75rem;
  border: 1px solid var(--side-line); border-radius: var(--radius); background: transparent; color: var(--side-ink-2);
  font: inherit; font-size: var(--step--1); cursor: pointer; text-align: left;
}
.theme:hover { background: var(--side-2); color: var(--side-ink); }
.theme__value { margin-left: auto; color: var(--side-ink); font-weight: 500; }

.sidebar .signout { margin: 0; }
.sidebar .link-button { color: var(--side-ink-2); padding: 0 0.75rem; width: 100%; text-align: left; display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.sidebar .link-button:hover { color: var(--side-ink); text-decoration: underline; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.5rem 1rem; min-height: 4rem;
  padding: 0.5rem clamp(1rem, 3vw, 2rem);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar__menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.6rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}
.topbar__menu:hover { background: var(--surface-2); }
.topbar__brand { color: var(--ink); }
.topbar__context { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.3; }
.topbar__title { margin: 0; font-size: var(--step-1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__sub { font-size: var(--step--1); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__sub a { color: var(--ink-2); }
.topbar__sub a:hover { color: var(--ink); }

/* The month's spend: a ring that fills with the share of the budget, and the numbers beside it. */
.meter {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; flex: none;
  color: var(--ink); text-decoration: none; padding: 0.2rem 0.6rem 0.2rem 0.3rem; border-radius: 999px;
  border: 1px solid var(--line);
}
.meter:hover { background: var(--surface-2); color: var(--ink); }
.meter__text { display: flex; flex-direction: column; line-height: 1.2; }
.meter__label { font-size: 0.75rem; color: var(--ink-2); }
.meter__value { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--step--1); }
.meter__of { font-weight: 400; color: var(--ink-2); }
/* A very narrow phone shows only the amount; screen readers still hear the whole text. */
@media (max-width: 24rem) {
  .meter__label, .meter__of { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .meter { gap: 0.4rem; }
}
.meter__bar { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.ring { width: 2.25rem; height: 2.25rem; flex: none; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--line); stroke-width: 4; }
.ring__value { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.ring--empty .ring__value { display: none; }
.meter--warn .ring__value { stroke: var(--warn); }
.meter--stop .ring__value { stroke: var(--stop); }
.meter--warn .meter__value { color: var(--warn); }
.meter--stop .meter__value { color: var(--stop); }

/* The budget bar on the costs pages reads like a measuring tape: ticks every tenth, filled up to the month's spend. */
meter {
  -webkit-appearance: none; appearance: none;
  width: 9rem; height: 0.6rem; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden;
  background: var(--surface) repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--line) calc(10% - 1px) 10%);
}
meter::-webkit-meter-bar { background: transparent; border: 0; height: 100%; }
meter::-webkit-meter-optimum-value { background: var(--accent); }
meter::-webkit-meter-suboptimum-value { background: var(--warn); }
meter::-webkit-meter-even-less-good-value { background: var(--stop); }
meter:-moz-meter-optimum::-moz-meter-bar { background: var(--accent); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--stop); }

.signout { margin: 0; }
.link-button {
  background: none; border: 0; padding: 0 0.5rem; min-height: 2.75rem; font: inherit; color: var(--accent-strong);
  text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer;
}

/* The project's name and site above its pages. */
.project-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin: 0 0 1.25rem;
}
.has-chat .project-bar { margin: 0; padding: 1.25rem clamp(1rem, 3vw, 2rem) 0.75rem; }
.project-bar__title { font-size: var(--step-2); margin: 0; }
.project-bar__url { font-size: var(--step--1); color: var(--ink-2); }

/* Phones: the drawer. The menu link opens it through :target, so it works without JavaScript too; app.js adds
   focus, Escape and a click outside. */
.shell .sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(20rem, 86vw); overflow-y: auto;
  transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
/* Visible at once when it opens (so that focus can move into it), hidden only once it has slid away. */
/* :target only until app.js runs (.has-menu): from then on the script alone opens and closes it. */
.shell:not(.has-menu) .sidebar:target, .shell.is-open .sidebar { transform: none; visibility: visible; transition: transform 0.2s ease, visibility 0s;
  box-shadow: 0 0 0 100vmax rgba(5, 6, 16, 0.6); }
.sidebar__close {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem;
  border: 1px solid var(--side-line); border-radius: var(--radius); background: transparent; color: var(--side-ink);
}
.topbar__menu { text-decoration: none; }

@media (min-width: 64rem) {
  /* The sidebar's colour runs the whole height of a long page, also where the sticky sidebar itself ends. */
  .shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    background: linear-gradient(to right, var(--side) var(--sidebar-width), transparent var(--sidebar-width)); }
  .topbar--bare { display: none; }
  .shell .sidebar, .shell .sidebar:target, .shell.is-open .sidebar {
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; width: auto;
    transform: none; visibility: visible; transition: none; box-shadow: none;
  }
  .sidebar__close, .topbar__menu, .topbar__brand { display: none; }
}

/* ---------------------------------------------------------------- page structure */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.topbar__space { flex: 1 1 auto; }
.page { max-width: 76rem; width: 100%; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2rem) 4rem; }
.page:focus { outline: none; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-head h1, .page-head h2 { margin: 0; }
.lead { color: var(--ink-2); max-width: 70ch; font-size: 1.05rem; }
.narrow { max-width: 40rem; }
.columns { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.25rem clamp(1rem, 2.5vw, 1.5rem); margin-bottom: var(--gap);
}
/* A card's first heading is its header, set off from the rest by a line. */
.panel > h2:first-child { font-size: var(--step-1); margin: 0 calc(-1 * clamp(1rem, 2.5vw, 1.5rem)) 1.1rem;
  padding: 0 clamp(1rem, 2.5vw, 1.5rem) 0.9rem; border-bottom: 1px solid var(--line); }

/* Key figures at the top of an overview: an icon in its colour, the number, what it counts. */
.stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin-bottom: var(--gap); }
.stat {
  display: flex; align-items: center; gap: 1rem; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem; color: var(--ink); text-decoration: none;
}
a.stat:hover { border-color: var(--line-strong); color: var(--ink); }
.stat__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.75rem; flex: none;
  background: var(--accent-soft); color: var(--accent-strong); }
.stat__icon .icon { width: 1.5rem; height: 1.5rem; }
.stat--violet .stat__icon { background: var(--violet-soft); color: var(--violet); }
.stat--ok .stat__icon { background: var(--ok-soft); color: var(--ok); }
.stat--warn .stat__icon { background: var(--warn-soft); color: var(--warn); }
.stat--stop .stat__icon { background: var(--stop-soft); color: var(--stop); }
.stat__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.stat__value { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--ink-2); font-size: var(--step--1); }
.stat .ring { width: 3rem; height: 3rem; margin-left: auto; }
.panel > :last-child { margin-bottom: 0; }
.panel--attention { border-color: var(--warn); box-shadow: inset 4px 0 0 var(--warn); }

.stack > * + * { margin-top: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.crumbs { color: var(--ink-2); }

.empty { max-width: 36rem; padding: 3rem 0; }

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

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.75rem; padding: 0 1.1rem; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.button:hover { background: var(--surface-2); color: var(--ink); }
.button--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.button--ghost { background: transparent; border-color: transparent; color: var(--accent-strong); }
.button--ghost:hover { background: var(--accent-soft); }
.button--small { min-height: 2.25rem; padding: 0 0.75rem; font-size: var(--step--1); }
.button--wide { width: 100%; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ---------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: 0.3rem; max-width: 40rem; border: 0; padding: 0; margin: 0 0 1rem; }
.field--short { max-width: 18rem; }
.input--short { max-width: 12rem; }
.field label, .field legend, .field .label { font-weight: 600; padding: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  width: 100%; min-height: 2.75rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit;
}
textarea { resize: vertical; line-height: 1.5; }
select { padding-right: 2rem; }
input[type="file"] { font: inherit; padding: 0.4rem 0; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); margin: 0; flex: none; }
.choice { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font-weight: 400 !important; }
.choice > span { min-width: 0; }
.choice--off { color: var(--ink-2); }
.help { color: var(--ink-2); font-size: var(--step--1); margin: 0; }
.field--error input, .field--error textarea, .field--error select, [aria-invalid="true"] { border-color: var(--stop); border-width: 2px; }
.field__error, .form-error { color: var(--stop); font-weight: 600; margin: 0; }

/* ---------------------------------------------------------------- notices */

.notice, .flash {
  padding: 0.75rem 1rem; border-radius: var(--radius); border-left: 0.25rem solid var(--accent);
  background: var(--accent-soft); color: var(--ink); max-width: 70ch;
}
.notice--warning { border-color: var(--warn); background: var(--warn-soft); }
.notice--error, .flash--error { border-color: var(--stop); background: var(--stop-soft); }
.flash--success { border-color: var(--ok); background: var(--ok-soft); }
.badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-2); vertical-align: middle; }
.badge--ok { border-color: var(--ok); color: var(--ok); }
.badge--warn { border-color: var(--warn); color: var(--warn); }
.count { display: inline-block; min-width: 1.6rem; text-align: center; border-radius: 999px; background: var(--warn); color: var(--surface); font-size: var(--step--1); padding: 0 0.4rem; }

/* ---------------------------------------------------------------- sign-in */

.gate .gate__main { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.gate__card {
  width: 100%; max-width: 28rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 5vw, 2.25rem);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(10, 30, 40, 0.45);
}
.gate__aside { margin-top: 1.25rem; }
.gate__lang { margin-top: 1.5rem; display: flex; gap: 1rem; font-size: var(--step--1); }
.roles { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.4rem; max-width: 70ch; color: var(--ink-2); }
.roles strong { color: var(--ink); margin-right: 0.35rem; }
.op-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.op-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.command { background: var(--code-bg); padding: 0.75rem 1rem; border-radius: var(--radius); overflow-x: auto; }

/* ---------------------------------------------------------------- projects */

.project-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.project-list.panel { padding: 0 clamp(1rem, 2.5vw, 1.5rem); border-top: 1px solid var(--line); }
.project-list.panel .project-row:last-child { border-bottom: 0; }
.project-row {
  display: grid; gap: 0.25rem 1.5rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line);
  grid-template-columns: 1fr;
}
.project-row__link { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); min-width: 0; }
.project-row__name { font-size: var(--step-1); font-weight: 600; }
.project-row__link:hover .project-row__name { text-decoration: underline; }
.project-row__url, .project-row__facts { color: var(--ink-2); font-size: var(--step--1); }
.project-row__facts { display: flex; gap: 1rem; flex-wrap: wrap; }
.project-row__cost { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
@media (min-width: 52rem) {
  .project-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; }
  .project-row__cost { justify-content: flex-end; }
}

/* ---------------------------------------------------------------- code */

.facts { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0 0 1rem; }
.facts dt { color: var(--ink-2); font-size: var(--step--1); }
.facts dd { margin: 0; font-weight: 600; }
.upload { border-top: 1px solid var(--line); padding-top: 1rem; }
.file-list { columns: 18rem; column-gap: 2rem; padding-left: 1.1rem; margin: 0; }
.file-list li { break-inside: avoid; padding: 0.15rem 0; }
.code-view { overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-height: 80vh; }
.code-lines { border-collapse: collapse; font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; width: 100%; }
.code-lines__n { color: var(--ink-2); text-align: right; padding: 0 0.75rem; user-select: none; vertical-align: top; border-right: 1px solid var(--line); background: var(--surface-2); }
.code-lines__c { padding: 0 1rem; white-space: pre; }
.code-lines code { font-size: inherit; }
.pager { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; margin: 0.75rem 0; color: var(--ink-2); }
.pager a { min-height: 2.75rem; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------- tables */

/* Positioned, so that a visually hidden heading inside (absolutely positioned) scrolls with the table, not the page. */
.table-wrap { overflow-x: auto; position: relative; }
table.data, .prose table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
.data th, .data td, .prose th, .prose td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.data thead th, .prose thead th { font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.data tbody tr:hover { background: var(--surface-2); }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap .data tbody tr:last-child > * { border-bottom: 0; }
.data .num { text-align: right; }
.budget { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 0.5rem; }
.budget__numbers { margin: 0; }
.budget__spent { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; }
.budget__bar { width: min(100%, 22rem); height: 0.9rem; }

/* ---------------------------------------------------------------- settings */

.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0 1.5rem; }
.price-list { list-style: none; padding: 0; margin: 0; }
.price { border-top: 1px solid var(--line); padding: 0.9rem 0; }
.price__name { margin: 0 0 0.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.price__fields { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end; margin-top: 0.4rem; }
.price__field { display: flex; flex-direction: column; font-size: var(--step--1); color: var(--ink-2); }
.price__field input { width: 7.5rem; min-height: 2.25rem; padding: 0.3rem 0.5rem; font-variant-numeric: tabular-nums; }
.price__tier { border: 0; border-left: 3px solid var(--line); margin: 0.6rem 0 0; padding: 0 0 0 0.75rem; }
.price__tier legend { padding: 0; font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.price .actions { margin-top: 0.6rem; }
.passkeys { list-style: none; padding: 0; margin: 0 0 1rem; }
.passkeys li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.passkeys form { margin: 0; }
.sessions { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.sessions p, .sessions form { margin: 0; }

/* ---------------------------------------------------------------- memory */

.proposals { list-style: none; padding: 0; margin: 0; }
.proposal { padding: 1rem 0; border-top: 1px solid var(--line); }
.proposal__kind { font-weight: 600; margin-bottom: 0.5rem; }
.proposal__text { background: var(--surface-2); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.versions { list-style: none; padding: 0; margin: 0; }
.versions li { border-top: 1px solid var(--line); padding: 0.5rem 0; }
.versions summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; gap: 0.5rem; }

/* ---------------------------------------------------------------- prose (Markdown from Studio) */

.prose { max-width: 72ch; overflow-wrap: anywhere; }
.prose > :last-child { margin-bottom: 0; }
.prose h3, .prose h4, .prose h5, .prose h6 { font-size: 1.05rem; margin: 1.2em 0 0.5em; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1em; }
.prose li + li { margin-top: 0.25em; }
.prose blockquote { margin: 0 0 1em; padding-left: 1rem; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.prose code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 0.25rem; }
.prose pre { background: var(--code-bg); padding: 0.85rem 1rem; border-radius: var(--radius); overflow-x: auto; margin: 0 0 1em; line-height: 1.45; position: relative; }
.prose pre code { background: none; padding: 0; font-size: 0.85rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; }
.copy-button {
  position: absolute; top: 0.4rem; right: 0.4rem; min-height: max(2rem, 24px); padding: 0 0.6rem;
  font: inherit; font-size: 0.75rem; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; opacity: 0.85;
}

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

/* The chat fills the window: the conversation scrolls by itself, and the composer stays in view. */
.has-chat .shell__work { height: 100vh; height: 100dvh; overflow: hidden; }
.has-chat .shell__work > .topbar, .has-chat main > .project-bar { flex: none; }
.has-chat .project-bar { border-bottom: 1px solid var(--line); }
/* width: the page's auto margins would otherwise shrink it to its content in the column. */
.has-chat .shell__work > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
.has-chat .shell__work > main > .flash { margin: 0.75rem clamp(1rem, 3vw, 2rem) 0; flex: none; }
.page--chat { max-width: none; padding: 0; }
.chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat__side { flex: none; background: var(--surface); border-bottom: 1px solid var(--line); padding: 0.25rem clamp(1rem, 3vw, 2rem);
  max-height: 40vh; overflow-y: auto; }
/* The chat's side column (Studio 1.12.1): small headings with a count, one line per conversation, and each requirement
   as a compact card, its code and state above its title. */
.chat__side { font-size: 0.9375rem; }
.chat__list summary {
  cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); font-weight: 600; color: var(--ink-2);
}
.chat__list summary:hover { color: var(--ink); }
.chat__count {
  min-width: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2);
  font-size: 0.75rem; font-weight: 600; text-align: center; line-height: 1.4rem;
}
.chat__new { margin: 0 0 0.5rem; }
.chat__new .button { width: 100%; justify-content: center; gap: 0.4rem; }
.chat__reqs { border-top: 1px solid var(--line); margin-top: 0.75rem; padding-top: 0.25rem; }
.conv-list, .conv-reqs { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.conv-reqs { gap: 0.4rem; }
.conv-list a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.65rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.conv-list a:hover { background: var(--surface-2); }
.conv-list a[aria-current="page"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.conv-list__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-list__meta { font-size: 0.78rem; color: var(--ink-2); }
.conv-reqs a {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); text-decoration: none; background: var(--surface);
}
.conv-reqs a:hover { border-color: var(--line-strong); }
.conv-reqs a:hover .conv-reqs__title { text-decoration: underline; }
.conv-reqs__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.conv-reqs__top .status { font-size: 0.72rem; padding: 0 0.45rem; }
.conv-reqs__title {
  font-weight: 500; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat__main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; min-width: 0; padding: 0 clamp(1rem, 3vw, 2rem); }
.chat__notice { margin: 0.75rem 0 0; flex: none; }
@media (min-width: 60rem) {
  .chat { display: grid; grid-template-columns: 17rem minmax(0, 1fr); }
  .chat__side { border-bottom: 0; border-right: 1px solid var(--line); max-height: none; padding-top: 0.5rem; }
}

.thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
  gap: 1.25rem; padding: 1rem 0.25rem 1.5rem 0; max-width: 52rem; width: 100%; }
.thread:focus-visible { outline-offset: -3px; }
.thread__empty { padding: 1rem 0; max-width: 40rem; }
.thread__empty h2 { font-size: var(--step-2); }
/* Shown just above the composer when a new answer arrives while the person reads further up. */
.thread__jump {
  position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 0.75rem); transform: translateX(-50%);
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600;
  cursor: pointer; box-shadow: 0 6px 18px -10px rgba(10, 30, 40, 0.45);
}

.msg { display: flex; flex-direction: column; gap: 0.5rem; }
.msg__head { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: baseline; font-size: var(--step--1); color: var(--ink-2); }
.msg__who { font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.msg--user .msg__body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.75rem 1rem; }
.msg--assistant { padding-left: 1rem; border-left: 3px solid var(--accent); }
.msg--error, .msg--stopped { border-left-color: var(--line-strong); }
.msg__thinking summary, .msg__thinking { color: var(--ink-2); font-size: var(--step--1); }
.msg__thinking summary { cursor: pointer; min-height: max(2rem, 24px); display: inline-flex; align-items: center; }
.msg__thinking .prose { border-left: 2px solid var(--line); padding-left: 0.75rem; margin-top: 0.25rem; }
.msg__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.8rem; color: var(--ink-2); }
.msg__tools li { border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.6rem; background: var(--surface); }
.msg__tools li.is-failed { border-color: var(--stop); }
.msg__wait { color: var(--ink-2); margin: 0; }
.msg__wait::after { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-left: 0.5rem; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; vertical-align: middle; }
.msg__error { color: var(--stop); font-weight: 600; margin: 0; }
.msg__cost { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8rem; color: var(--ink-2); margin: 0; }
.msg__price { font-weight: 700; color: var(--ink); }
.msg__tag { font-size: 0.75rem; font-weight: 600; padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent-strong); }
/* Make it a requirement turns what the conversation arrived at into a requirement, so it belongs under the latest answer. */
.msg__actions { display: none; flex-wrap: wrap; gap: 0.5rem; }
.thread > .msg:last-child .msg__actions { display: flex; }
.msg__images { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.msg__image { max-width: min(100%, 18rem); }
.msg__image figure { margin: 0; }
.msg__image img, .image-list img {
  display: block; max-width: 100%; height: auto; max-height: 14rem; width: auto; object-fit: contain;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.msg__image figcaption, .image-list__caption { font-size: 0.8rem; color: var(--ink-2); margin: 0.3rem 0 0; display: flex; flex-wrap: wrap; gap: 0 0.4rem; }
.msg__image-name { overflow-wrap: anywhere; color: var(--ink); }
.msg__image-note { font-size: 0.8rem; color: var(--ink-2); margin: 0.2rem 0 0; }
.msg__image-form { margin: 0.1rem 0 0; }
.msg__image-actions { display: flex; flex-wrap: wrap; gap: 0 0.9rem; align-items: baseline; }
.msg__image--gone { max-width: 18rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.msg__image--gone .msg__image-note { margin: 0; }
.link-button--small { font-size: 0.8rem; min-height: max(2rem, 24px); padding: 0; }
.req-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0; padding: 0.6rem 0.85rem;
  border: 1px solid var(--line); border-left: 0.25rem solid var(--warn); border-radius: var(--radius); background: var(--surface);
}
.req-card__label { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.req-card__link { font-weight: 600; color: var(--ink); min-height: max(2rem, 24px); display: inline-flex; align-items: center; gap: 0.4rem; }

@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.composer {
  position: relative; flex: none; background: var(--paper); padding: 0.75rem 0 0.75rem; max-width: 52rem; width: 100%;
  border-top: 1px solid var(--line);
}
.composer.is-dropping { outline: 3px dashed var(--accent); outline-offset: 4px; }
/* One card for the message and its choices (Studio 1.12.1): the card shows the focus, the field inside it does not. */
.composer__box {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); padding: 0.35rem 0.6rem 0.6rem;
}
.composer__box:focus-within { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 2px; }
.composer textarea {
  min-height: 4.5rem; max-height: 30vh; background: transparent; border: 0; box-shadow: none; padding: 0.5rem 0.25rem; resize: none;
}
/* The card shows the focus; a transparent outline still shows in forced colours (Windows contrast themes). */
.composer textarea:focus, .composer textarea:focus-visible { outline: 2px solid transparent; box-shadow: none; }
@media (forced-colors: active) { .composer__box:focus-within { outline: 2px solid Highlight; } }
.composer__row {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end; margin-top: 0.4rem; padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.composer__attach { display: flex; align-items: flex-end; }
.composer__attach .button { gap: 0.4rem; }
.composer__choice { display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--step--1); flex: 1 1 9rem; min-width: 0; max-width: 16rem; }
.composer__choice label { font-weight: 500; color: var(--ink-2); font-size: 0.78rem; }
.composer__actions { display: flex; gap: 0.5rem; margin-left: auto; }
.composer__hint { font-size: 0.8rem; color: var(--ink-2); margin: 0.5rem 0 0; }
.attachments { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.attachment {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.6rem;
  align-items: center; padding: 0.35rem 0.4rem 0.35rem 0.35rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); max-width: 17rem; min-width: 12rem;
}
.attachment__thumb { grid-row: 1 / 3; width: 3rem; height: 3rem; object-fit: cover; border-radius: 0.25rem; background: var(--surface-2); }
.attachment__name { font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment__state { grid-column: 2; font-size: 0.75rem; color: var(--ink-2); }
.attachment--failed { border-color: var(--stop); }
.attachment--failed .attachment__state { color: var(--stop); font-weight: 600; }
.attachment--ready .attachment__state { color: var(--ok); }
.attachment__remove {
  grid-column: 3; grid-row: 1 / 3; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.attachment__remove:hover { background: var(--surface-2); color: var(--ink); }

/* Phones and very low windows: the whole page scrolls, so the header gives way to the conversation. On a phone held
   upright the composer stays at the bottom of the screen; held sideways it would cover everything, so it does not. */
@media (max-width: 47.99rem), (max-height: 32rem) {
  .has-chat .shell__work { display: block; height: auto; overflow: visible; }
  .has-chat .shell__work > main, .chat { display: block; }
  .chat__side { max-height: none; }
  .thread { overflow: visible; }
}
@media (max-width: 47.99rem) and (min-height: 32.01rem) {
  .composer { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -10px 18px -16px rgba(10, 30, 40, 0.5); }
  .composer textarea { min-height: 3rem; }
  .composer__hint { display: none; }
}

/* ---------------------------------------------------------------- requirements, builds and versions */

.status {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; padding: 0.1rem 0.65rem;
  border-radius: 0.375rem; border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface); white-space: nowrap;
}
.status--approved, .status--ready, .status--done { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.status--draft, .status--warn, .status--stopped { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.status--failed { border-color: var(--stop); color: var(--stop); background: var(--stop-soft); }
.status--queued, .status--running, .status--stop_requested, .status--checking { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }

.req-list, .build-list, .version-list { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--line); }
.req-list__item, .build-list li, .version-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line);
}
.req-list__link { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 18rem; min-width: 0; min-height: 2.75rem; color: var(--ink); text-decoration: none; }
.req-list__link:hover .req-list__title { text-decoration: underline; }
.req-list__code, .req-code { font-family: var(--mono); font-size: 0.85em; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.req-list__title { font-weight: 600; }
.req-list__meta { font-size: var(--step--1); }

.panel--quiet { background: var(--surface-2); }
.image-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.image-list__item { max-width: min(100%, 16rem); }
.image-list__item form { margin: 0.1rem 0 0; }
.upload-inline { align-items: flex-end; }
details.panel > summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: 600; }
.actions--end { justify-content: flex-end; margin-top: 1rem; }
.edit > summary { cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 600; color: var(--accent-strong); }
.field--inline { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; max-width: 18rem; flex: 1 1 12rem; }
.field--inline label { font-weight: 600; font-size: var(--step--1); }
.inline-form.model-form, .model-form .inline-form { align-items: flex-end; }

.build-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.spinner { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.build-steps summary { cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 600; }
.build-steps ol { margin: 0.25rem 0 0.75rem; padding-left: 1.6rem; font-size: var(--step--1); color: var(--ink-2); }
.build-steps li.is-failed { color: var(--stop); }
.build-narrative { border-left: 3px solid var(--accent); padding-left: 0.85rem; color: var(--ink-2); max-height: 18rem; overflow: auto; margin-bottom: 1rem; }

.findings { list-style: none; margin: 0 0 1rem; padding: 0; }
.finding {
  display: grid; gap: 0.15rem; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem;
  border-left: 0.25rem solid var(--stop); background: var(--stop-soft); border-radius: var(--radius);
}
.finding--warning { border-left-color: var(--warn); background: var(--warn-soft); }
.finding--old { border-left-color: var(--line-strong); background: var(--surface-2); }
.finding__sev { font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.finding__where { font-weight: 600; overflow-wrap: anywhere; }
.finding__snippet { display: block; background: var(--code-bg); padding: 0.3rem 0.5rem; border-radius: 0.25rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; }
.css-detail { background: var(--code-bg); padding: 0.5rem 0.75rem; border-radius: 0.25rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; max-height: 16rem; overflow: auto; }
.php-versions { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.php-versions > li { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.35rem 0.7rem; background: var(--surface); }
.php-versions > li.is-ok { border-color: var(--ok); }
.php-versions > li.is-failed { border-color: var(--stop); flex-basis: 100%; }
.php-versions ul { margin: 0.35rem 0 0; padding-left: 1.2rem; font-size: var(--step--1); }
.site-zips { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.site-zips > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; background: var(--surface); }
.site-zips__name { font-weight: 600; overflow-wrap: anywhere; }
.site-zips .inline-form { margin-left: auto; }

/* The preview (Studio 1.0): tests, pages with their screenshots before and after. */
.preview-tests, .preview-pages { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.preview-tests > li, .preview-page { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0.5rem 0.75rem; }
.preview-tests > li.is-ok { border-left: 0.25rem solid var(--ok); }
.preview-tests > li.is-failed { border-left: 0.25rem solid var(--stop); }
.preview-tests summary, .preview-page summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.preview-steps { margin: 0.5rem 0; padding-left: 1.5rem; font-size: var(--step--1); }
.preview-steps .is-failed { color: var(--stop); font-weight: 600; }
.preview-page__title { font-weight: 600; }
.preview-page__open { margin: 0.5rem 0 0; }
.confirm-pages { margin: 1rem 0; padding: 0.75rem 1rem; border: 1px solid var(--warn); border-left-width: 0.25rem; border-radius: var(--radius); background: var(--warn-soft); }
.confirm-pages h4 { margin-top: 0; }
.confirm-pages--done { border-color: var(--ok); background: var(--ok-soft); }
.confirm-pages__list { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.5rem; }
.confirm-pages__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; min-height: 2.75rem; }
.confirm-pages__choice { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; cursor: pointer; }
.confirm-pages__choice input { width: 1.5rem; height: 1.5rem; margin: 0; flex-shrink: 0; }
.confirm-pages__name code { overflow-wrap: anywhere; }
.preview-shots { display: grid; gap: 1.25rem; margin-top: 0.75rem; }
.preview-view__title { margin: 0 0 0.35rem; font-weight: 600; }
.preview-shot { margin: 0; }
.preview-shot figcaption { font-size: var(--step--1); color: var(--ink-2); margin-bottom: 0.25rem; }
.preview-shot--single { max-width: 40rem; }
.preview-view--mobile .preview-shot--single { max-width: 16rem; }
.preview-shot--single img { display: block; width: 100%; height: auto; max-height: 32rem; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.preview-shot__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.35rem 0 0; font-size: var(--step--1); }
/* Before and after side by side, the build's screenshot as it is, with the changed areas as frames on top. */
.preview-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; }
.preview-view--mobile .preview-pair { max-width: 34rem; }
.preview-shot__frame { max-height: 36rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.preview-shot__frame:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.preview-shot__canvas { position: relative; display: block; }
.preview-shot__canvas img { display: block; width: 100%; height: auto; }
.preview-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95)); }
.preview-marks rect { fill: rgba(222, 109, 0, 0.08); stroke: #c25400; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.preview-marks-toggle { width: 1.25rem; height: 1.25rem; margin: 0 0.4rem 0 0; vertical-align: middle; accent-color: var(--accent); }
.preview-marks-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 0.35rem; max-width: calc(100% - 1.75rem); min-height: 2.75rem; vertical-align: middle; cursor: pointer; font-size: var(--step--1); }
.preview-marks-toggle:not(:checked) ~ .preview-pair .preview-marks { display: none; }
.preview-warnings { margin-bottom: 1rem; }
.preview-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.preview-open { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1rem 0 1.25rem; }
.preview-setup ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.check-progress { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: var(--step--1); color: var(--ink-2); }
@media (max-width: 40rem) {
  .preview-view--desktop .preview-pair { grid-template-columns: minmax(0, 1fr); }
}


.changes { list-style: none; margin: 0; padding: 0; }
.change { border-top: 1px solid var(--line); padding: 0.4rem 0; }
.change summary { cursor: pointer; min-height: 2.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.change summary code { overflow-wrap: anywhere; font-weight: 600; }
.change__kind { font-size: 0.8rem; color: var(--ink-2); }
.change__stat .plus { color: var(--ok); }
.change__stat .minus { color: var(--stop); }
.removals { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.removals code { overflow-wrap: anywhere; }
.diff { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.diff pre { margin: 0; padding: 0.5rem 0; font-size: 0.8rem; line-height: 1.45; }
.diff pre > span { display: block; padding: 0 0.85rem; white-space: pre; }
.diff__add { background: var(--ok-soft); }
.diff__del { background: var(--stop-soft); }
.diff__hunk { color: var(--accent-strong); background: var(--surface-2); }
.diff__cut { color: var(--ink-2); }
.diff__note { color: var(--ink-2); font-style: italic; }

/* Disclosure marks for summaries that are laid out as flex rows (they lose the browser's own marker). */
details.panel > summary::before, .change summary::before, .build-steps summary::before, .edit > summary::before {
  content: "▸"; display: inline-block; width: 1em; color: var(--ink-2); flex: none;
}
details[open].panel > summary::before, .change details[open] > summary::before, details[open].build-steps > summary::before,
details[open].edit > summary::before { content: "▾"; }
.blocking { margin: 0 0 1rem; padding-left: 1.2rem; }
.blocking li { margin-bottom: 0.35rem; }
.steps { padding-left: 1.4rem; margin: 0 0 1rem; max-width: 70ch; }
.steps > li { margin-bottom: 0.75rem; }
.steps .button { margin: 0.25rem 0.5rem 0.25rem 0; }
code.wrap { overflow-wrap: anywhere; word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .button--primary, .msg--assistant { border: 1px solid ButtonText; }
  .topnav a[aria-current="page"], .tabs a[aria-current="page"], .conv-list a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  meter { border: 1px solid CanvasText; }
}

/* Studio 1.1: what a connected site reported about an installation. */
.site-report__message { white-space: pre-line; overflow-wrap: anywhere; }
.checks-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.25rem; }
.checks-list li { overflow-wrap: anywhere; }
.approvers { margin: 0.5rem 0 1rem; padding-left: 1.25rem; }

/* Phones: in the top bar only the logo's mark shows; the wordmark and the product's name stay for screen readers. */
@media (max-width: 40rem) {
  .topbar__brand .brand__word, .topbar__brand .brand__product {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}