/* Copied from phase-figma design/components.css at ce4124a. Do not edit. Light only. */
/*
 * Phase components  (phase-figma/design/components.css)
 * ------------------------------------------------------------------
 * Framework-free. Needs tokens.css loaded first. Modelled on the Figma screens
 * in phase-figma/references/ (see REFERENCE-NOTES.md and DESIGN.md).
 * LIGHT ONLY: no dark media query, no dark class, no dark background.
 * Prefix ph-.  Modifier ph-btn--primary.  Part ph-card__title.
 *
 *  1 Base            9 Alert + banner card     17 Modal
 *  2 Layout         10 Link                    18 Code, device + recovery codes
 *  3 Typography     11 Tabs + segmented        19 Misc: kv, stat, KPI strip, steps, progress
 *  4 Button         12 Shell, sidebar, topbar  20 Charts: donut, gauge, bars, area
 *  5 Form + search  13 Empty                   21 Node-card diagram
 *  6 Card           14 Skeleton, spinner       22 Chat: messages, tool call, composer
 *  7 Table + menu   15 Toast                   23 Motion + print
 *  8 Pills and chips 16 Popover/menu
 */

/* ========================== 1 Base ========================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ph-bg-canvas);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ph-bg-canvas);
  color: var(--ph-grey-800);
  font-family: var(--ph-font-sans);
  font-size: var(--ph-text-base);
  line-height: var(--ph-leading-body);
  font-feature-settings: "tnum" 1, "cv11" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--ph-focus);
  outline-offset: 2px;
  border-radius: var(--ph-radius-xs);
}
::selection { background: var(--ph-accent-200); color: var(--ph-text); }

.ph-skip-link {
  position: absolute; left: var(--ph-space-3); top: -4rem; z-index: 100;
  padding: var(--ph-space-2) var(--ph-space-4);
  background: var(--ph-bg-surface); color: var(--ph-link);
  border: 2px solid var(--ph-focus); border-radius: var(--ph-radius-sm);
  font-weight: var(--ph-weight-strong); text-decoration: none;
}
.ph-skip-link:focus { top: var(--ph-space-3); }

.ph-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ph-icon { width: 1rem; height: 1rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ph-icon--lg { width: 1.25rem; height: 1.25rem; }

/* ========================== 2 Layout ========================== */
.ph-container { width: 100%; max-width: var(--ph-content-max); margin-inline: auto; padding-inline: var(--ph-space-5); }
.ph-stack   { display: flex; flex-direction: column; gap: var(--ph-space-4); }
.ph-stack--sm { gap: var(--ph-space-2); }
.ph-stack--lg { gap: var(--ph-space-5); }
.ph-row     { display: flex; align-items: center; gap: var(--ph-space-3); flex-wrap: wrap; }
.ph-row--between { justify-content: space-between; }
.ph-row--end { justify-content: flex-end; }
.ph-row--nowrap { flex-wrap: nowrap; }
.ph-grow { flex: 1 1 auto; min-width: 0; }
.ph-grid { display: grid; gap: var(--ph-space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ph-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ph-grid--dash { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 960px) { .ph-grid--3, .ph-grid--dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ph-grid--2, .ph-grid--3, .ph-grid--dash { grid-template-columns: minmax(0, 1fr); } }
.ph-span-2 { grid-column: span 2; }
@media (max-width: 640px) { .ph-span-2 { grid-column: auto; } }

/* Auth layout: one quiet card on the pale canvas, brand above */
.ph-auth {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: var(--ph-space-6) var(--ph-space-4);
  gap: var(--ph-space-5); background: var(--ph-bg-canvas);
}
.ph-auth__brand { display: flex; align-items: center; gap: var(--ph-space-2); text-decoration: none; color: var(--ph-text); }
.ph-auth__panel { width: 100%; max-width: var(--ph-auth-max); }
.ph-auth__panel--wide { max-width: 36rem; }
.ph-auth__foot { color: var(--ph-text-3); font-size: var(--ph-text-xs); text-align: center; max-width: var(--ph-auth-max); }

/* ========================== 3 Typography ========================== */
/* Logo: the real Phase OS wordmark (brand/phase-os-wordmark-trim*.png), never redrawn, recoloured or stretched.
   Height is set, width follows the image. Clear space >= the height of the "P" (~ the image height). Light UI only. */
.ph-logo { display: inline-flex; align-items: center; gap: var(--ph-space-2); color: var(--ph-text); text-decoration: none; line-height: 1; }
.ph-logo__img { display: block; height: 1.375rem; width: auto; max-width: none; flex: none; object-fit: contain; }
.ph-logo__mark { display: block; width: 1.75rem; height: 1.75rem; flex: none; object-fit: contain; }
.ph-logo--lg .ph-logo__img { height: 2rem; }
.ph-logo--lg .ph-logo__mark { width: 2.5rem; height: 2.5rem; }
.ph-logo--sm .ph-logo__img { height: 1.125rem; }
.ph-logo--sm .ph-logo__mark { width: 1.5rem; height: 1.5rem; }
.ph-logo__sub { padding-left: var(--ph-space-2); border-left: 1px solid var(--ph-border); font-size: var(--ph-text-2xs); font-weight: var(--ph-weight-regular); color: var(--ph-text-3); letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
/* .ph-logo--responsive: wordmark by default, the circular mark alone in small/collapsed contexts */
/* .ph-logo--stacked: sublabel under the wordmark (narrow sidebars, long sublabels such as "Staff console") */
.ph-logo--stacked { flex-direction: column; align-items: flex-start; gap: var(--ph-space-1); }
.ph-logo--stacked .ph-logo__sub { padding-left: 0; border-left: 0; }
.ph-logo--responsive .ph-logo__mark { display: none; }
@media (max-width: 640px) {
  .ph-logo--responsive .ph-logo__img { display: none; }
  .ph-logo--responsive .ph-logo__mark { display: block; }
  .ph-logo--responsive .ph-logo__sub { display: none; }
}
.ph-sidebar--collapsed .ph-logo--responsive .ph-logo__img, .ph-sidebar--collapsed .ph-logo__sub { display: none; }
.ph-sidebar--collapsed .ph-logo--responsive .ph-logo__mark { display: block; }
.ph-brand-mark { width: 1.75rem; height: 1.75rem; flex: none; }
.ph-brand-name { font-weight: var(--ph-weight-strong); font-size: var(--ph-text-lg); letter-spacing: -0.02em; line-height: 1.05; color: var(--ph-text); }
.ph-brand-name small { display: block; margin-top: 0.15rem; font-size: var(--ph-text-2xs); font-weight: var(--ph-weight-regular); color: var(--ph-text-3); letter-spacing: 0; }

.ph-h1, .ph-h2, .ph-h3, .ph-h4 { margin: 0; color: var(--ph-text); font-weight: var(--ph-weight-medium); line-height: var(--ph-leading-tight); letter-spacing: -0.015em; text-wrap: balance; }
.ph-h1 { font-size: var(--ph-text-xl); }
.ph-h1--auth { font-size: var(--ph-text-2xl); letter-spacing: -0.02em; }
.ph-h2 { font-size: var(--ph-text-lg); }
.ph-h3 { font-size: var(--ph-text-md); }
.ph-h4, .ph-caps { font-size: var(--ph-text-2xs); text-transform: uppercase; letter-spacing: var(--ph-tracking-caps); color: var(--ph-text-3); font-weight: var(--ph-weight-medium); line-height: 1.3; margin: 0; }
.ph-lede  { margin: 0; color: var(--ph-text-2); font-size: var(--ph-text-base); max-width: 62ch; text-wrap: pretty; }
.ph-caption { margin: 0; color: var(--ph-text-3); font-size: var(--ph-text-xs); line-height: var(--ph-leading-snug); }
.ph-text-sm { font-size: var(--ph-text-sm); }
.ph-text-xs { font-size: var(--ph-text-xs); }
.ph-muted { color: var(--ph-text-3); }
.ph-mono  { font-family: var(--ph-font-mono); font-size: 0.92em; }
.ph-num   { font-variant-numeric: tabular-nums; }
.ph-strong { font-weight: var(--ph-weight-medium); color: var(--ph-text); }

/* ========================== 4 Button ========================== */
.ph-btn {
  --_bg: var(--ph-bg-surface); --_fg: var(--ph-grey-800); --_bd: var(--ph-border-button);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ph-space-2);
  min-height: var(--ph-control-h); padding: 0 var(--ph-space-4);
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  border-radius: var(--ph-radius-sm); box-shadow: var(--ph-shadow-1);
  font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background var(--ph-dur-fast) var(--ph-ease), border-color var(--ph-dur-fast) var(--ph-ease), box-shadow var(--ph-dur-fast) var(--ph-ease);
}
.ph-btn:hover { --_bg: var(--ph-grey-50); --_bd: var(--ph-grey-400); }
.ph-btn:active { --_bg: var(--ph-grey-100); }
.ph-btn[disabled], .ph-btn[aria-disabled="true"] { --_bg: var(--ph-grey-100); --_fg: var(--ph-grey-600); --_bd: var(--ph-grey-200); box-shadow: none; cursor: not-allowed; }
.ph-btn--primary { --_bg: var(--ph-accent-600); --_fg: var(--ph-text-on-accent); --_bd: var(--ph-accent-600); }
.ph-btn--primary:hover { --_bg: var(--ph-accent-700); --_bd: var(--ph-accent-700); }
.ph-btn--primary:active { --_bg: var(--ph-accent-800); --_bd: var(--ph-accent-800); }
.ph-btn--primary[disabled], .ph-btn--primary[aria-disabled="true"] { --_bg: var(--ph-accent-100); --_fg: var(--ph-accent-800); --_bd: var(--ph-accent-200); }
/* The one dark-slate BUTTON FILL from the dashboard references ("View Full Dashboard"). The page stays light. */
.ph-btn--slate { --_bg: var(--ph-slate); --_fg: #fff; --_bd: var(--ph-slate); }
.ph-btn--slate:hover { --_bg: #4a5870; --_bd: #4a5870; }
.ph-btn--danger { --_bg: var(--ph-danger-solid); --_fg: #fff; --_bd: var(--ph-danger-solid); }
.ph-btn--danger:hover { --_bg: var(--ph-danger-fg); --_bd: var(--ph-danger-fg); }
.ph-btn--danger:active { --_bg: var(--ph-danger-fg); --_bd: var(--ph-danger-fg); }
.ph-btn--danger-quiet { --_fg: var(--ph-danger-fg); --_bd: var(--ph-danger-bd); }
.ph-btn--danger-quiet:hover { --_bg: var(--ph-danger-bg); --_bd: var(--ph-danger-fg); }
.ph-btn--ghost { --_bg: transparent; --_bd: transparent; box-shadow: none; color: var(--ph-link); }
.ph-btn--ghost:hover { --_bg: var(--ph-accent-100); --_bd: transparent; }
.ph-btn--sm { min-height: 1.875rem; padding: 0 var(--ph-space-3); font-size: var(--ph-text-xs); }
.ph-btn--lg { min-height: var(--ph-tap); padding: 0 var(--ph-space-5); font-size: var(--ph-text-base); }
.ph-btn--block { display: flex; width: 100%; }
.ph-btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.ph-btn[aria-busy="true"]::after { content: ""; position: absolute; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--ph-grey-300); border-top-color: var(--ph-accent-600); animation: ph-spin 0.7s linear infinite; }
.ph-btn--primary[aria-busy="true"] { --_bg: var(--ph-accent-100); --_bd: var(--ph-accent-200); }
.ph-btn-group { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); }
@media (pointer: coarse) { .ph-btn { min-height: var(--ph-tap); } .ph-btn--sm { min-height: 2.25rem; } }

.ph-iconbtn { display: inline-grid; place-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--ph-radius-sm); background: transparent; color: var(--ph-grey-700); cursor: pointer; text-decoration: none; }
.ph-iconbtn:hover { background: var(--ph-grey-100); color: var(--ph-text); }
@media (pointer: coarse) { .ph-iconbtn { width: var(--ph-tap); height: var(--ph-tap); } }

/* ========================== 5 Form + search ========================== */
.ph-field { display: flex; flex-direction: column; gap: 0.375rem; }
.ph-label { font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); color: var(--ph-grey-800); line-height: var(--ph-leading-snug); }
.ph-label__opt { font-weight: var(--ph-weight-regular); color: var(--ph-text-3); }
.ph-input, .ph-select, .ph-textarea {
  width: 100%; min-height: var(--ph-control-h); padding: 0 var(--ph-space-3);
  background: var(--ph-bg-surface); color: var(--ph-text);
  border: 1px solid var(--ph-border-strong); border-radius: var(--ph-radius-sm);
  font-size: var(--ph-text-base); line-height: 1.4;
  transition: border-color var(--ph-dur-fast) var(--ph-ease), box-shadow var(--ph-dur-fast) var(--ph-ease);
}
@media (pointer: coarse) { .ph-input, .ph-select, .ph-textarea { font-size: var(--ph-text-md); min-height: var(--ph-tap); } }
.ph-textarea { padding-block: var(--ph-space-2); min-height: 6rem; resize: vertical; }
.ph-select { appearance: none; padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234d596c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; }
.ph-select--sm { min-height: 2rem; font-size: var(--ph-text-sm); width: auto; min-width: 7rem; }
.ph-input::placeholder, .ph-textarea::placeholder { color: var(--ph-grey-600); opacity: 1; }
.ph-input:hover, .ph-select:hover, .ph-textarea:hover { border-color: var(--ph-grey-700); }
.ph-input:focus, .ph-select:focus, .ph-textarea:focus { outline: 2px solid var(--ph-focus); outline-offset: 0; border-color: var(--ph-focus); box-shadow: 0 0 0 4px var(--ph-focus-halo); }
.ph-input[disabled], .ph-select[disabled], .ph-textarea[disabled], .ph-input[readonly] { background: var(--ph-grey-100); color: var(--ph-grey-700); border-color: var(--ph-grey-300); cursor: not-allowed; }
.ph-input[readonly] { cursor: default; }
.ph-input[aria-invalid="true"], .ph-field--error .ph-input, .ph-field--error .ph-select, .ph-field--error .ph-textarea { border-color: var(--ph-danger-solid); }
.ph-input[aria-invalid="true"]:focus, .ph-field--error .ph-input:focus { box-shadow: 0 0 0 4px var(--ph-danger-bg); outline-color: var(--ph-danger-fg); }
.ph-input--code { font-family: var(--ph-font-mono); font-size: var(--ph-text-xl); letter-spacing: 0.3em; text-align: center; min-height: 3.25rem; text-transform: uppercase; }
.ph-field__help  { margin: 0; font-size: var(--ph-text-xs); color: var(--ph-text-3); line-height: var(--ph-leading-snug); }
.ph-field__error { margin: 0; font-size: var(--ph-text-xs); color: var(--ph-danger-fg); font-weight: var(--ph-weight-medium); line-height: var(--ph-leading-snug); display: flex; gap: var(--ph-space-1); }
.ph-field__error::before { content: "!"; flex: none; width: 1rem; height: 1rem; margin-top: 0.05rem; border-radius: 50%; background: var(--ph-danger-fg); color: #fff; font-size: 0.7rem; line-height: 1rem; text-align: center; font-weight: 700; }
.ph-form { display: flex; flex-direction: column; gap: var(--ph-space-4); }
.ph-form__actions { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); align-items: center; margin-top: var(--ph-space-2); }
fieldset.ph-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ph-fieldset legend { padding: 0; margin-bottom: var(--ph-space-2); font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); }

/* Search with leading icon and a key hint (top bar, tables, chat history) */
.ph-search { position: relative; display: flex; align-items: center; width: 100%; }
.ph-search > .ph-icon { position: absolute; left: 0.75rem; color: var(--ph-grey-600); pointer-events: none; }
.ph-search .ph-input { padding-left: 2.25rem; padding-right: 3.25rem; border-color: var(--ph-grey-300); background: var(--ph-bg-surface); }
.ph-search .ph-input:hover { border-color: var(--ph-grey-400); }
.ph-search--soft .ph-input { background: var(--ph-grey-50); border-color: var(--ph-grey-200); }
.ph-search .ph-kbd { position: absolute; right: 0.5rem; }

.ph-check { display: flex; gap: var(--ph-space-3); align-items: flex-start; min-height: 1.75rem; cursor: pointer; font-size: var(--ph-text-base); }
.ph-check input { appearance: none; flex: none; width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; background: var(--ph-bg-surface); border: 1px solid var(--ph-border-strong); border-radius: var(--ph-radius-xs); display: grid; place-content: center; cursor: pointer; }
.ph-check input[type="radio"] { border-radius: 50%; }
.ph-check input:checked { background: var(--ph-accent-600); border-color: var(--ph-accent-600); }
.ph-check input:checked::after { content: ""; width: 0.6rem; height: 0.32rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.ph-check input[type="radio"]:checked::after { width: 0.45rem; height: 0.45rem; border: 0; border-radius: 50%; background: #fff; transform: none; }
.ph-check input:focus-visible { outline: 2px solid var(--ph-focus); outline-offset: 2px; }
.ph-check input[disabled] { background: var(--ph-grey-100); border-color: var(--ph-grey-300); cursor: not-allowed; }
.ph-check__text small { display: block; color: var(--ph-text-3); font-size: var(--ph-text-xs); }

/* ========================== 6 Card ========================== */
.ph-card { background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); box-shadow: var(--ph-shadow-1); }
.ph-card--raised { box-shadow: var(--ph-shadow-2); }
.ph-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ph-space-3); padding: var(--ph-space-4) var(--ph-space-5); }
.ph-card__head--rule { border-bottom: 1px solid var(--ph-border); }
.ph-card__title { margin: 0; font-size: var(--ph-text-md); font-weight: var(--ph-weight-medium); letter-spacing: -0.01em; line-height: var(--ph-leading-tight); color: var(--ph-text); }
.ph-card__sub { margin: 0.25rem 0 0; color: var(--ph-text-3); font-size: var(--ph-text-xs); }
.ph-card__body { padding: var(--ph-space-5); }
.ph-card__head + .ph-card__body { padding-top: var(--ph-space-1); }
.ph-card__body--flush { padding: 0 !important; }
.ph-card__foot { padding: var(--ph-space-3) var(--ph-space-5); border-top: 1px solid var(--ph-border); display: flex; gap: var(--ph-space-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ph-card--auth .ph-card__body { padding: var(--ph-space-6); }
@media (max-width: 480px) { .ph-card--auth .ph-card__body { padding: var(--ph-space-5); } .ph-card__head, .ph-card__body { padding-inline: var(--ph-space-4); } }

/* ========================== 7 Table + menu ========================== */
.ph-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); }
.ph-card > .ph-table-wrap { border: 0; border-radius: inherit; }
.ph-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ph-text-sm); font-variant-numeric: tabular-nums; }
.ph-table caption { text-align: left; padding: var(--ph-space-3) var(--ph-space-4); color: var(--ph-text-3); }
.ph-table th, .ph-table td { padding: 0.875rem var(--ph-space-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ph-border); }
.ph-table thead th { background: var(--ph-bg-subtle); color: var(--ph-grey-600); font-size: var(--ph-text-xs); font-weight: var(--ph-weight-medium); white-space: nowrap; padding-block: 0.625rem; border-bottom: 1px solid var(--ph-border); }
.ph-table tbody tr:last-child td, .ph-table tbody tr:last-child th { border-bottom: 0; }
.ph-table tbody tr:hover { background: var(--ph-grey-25); }
.ph-table tbody th { font-weight: var(--ph-weight-medium); color: var(--ph-text); }
.ph-table .ph-col-num { text-align: right; }
.ph-table .ph-col-actions { text-align: right; white-space: nowrap; width: 1%; }
.ph-table tr[aria-selected="true"], .ph-table tr.is-selected { background: var(--ph-bg-selected); }
.ph-table--dense th, .ph-table--dense td { padding-block: var(--ph-space-2); }
.ph-sort { display: inline-flex; align-items: center; gap: 0.25rem; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.ph-sort::after { content: "\2195"; font-size: 0.7em; color: var(--ph-grey-600); }
th[aria-sort="ascending"] .ph-sort::after { content: "\2191"; color: var(--ph-accent-700); }
th[aria-sort="descending"] .ph-sort::after { content: "\2193"; color: var(--ph-accent-700); }
.ph-cell-main { display: block; font-weight: var(--ph-weight-medium); color: var(--ph-text); line-height: 1.3; }
.ph-cell-sub  { display: block; margin-top: 0.125rem; font-size: var(--ph-text-xs); font-weight: var(--ph-weight-regular); color: var(--ph-text-3); line-height: 1.3; }
.ph-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 22rem; }
.ph-dash { color: var(--ph-grey-600); }
@media (max-width: 640px) {
  .ph-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ph-table--stack, .ph-table--stack tbody, .ph-table--stack tr, .ph-table--stack td, .ph-table--stack th { display: block; width: 100%; }
  .ph-table--stack tr { padding: var(--ph-space-3) var(--ph-space-4); border-bottom: 1px solid var(--ph-border); }
  .ph-table--stack tbody tr:last-child { border-bottom: 0; }
  .ph-table--stack td, .ph-table--stack th { border: 0 !important; padding: 0.2rem 0; text-align: left !important; display: flex; justify-content: space-between; align-items: baseline; gap: var(--ph-space-4); }
  .ph-table--stack td::before { content: attr(data-label); color: var(--ph-text-3); font-size: var(--ph-text-2xs); font-weight: var(--ph-weight-medium); text-transform: uppercase; letter-spacing: var(--ph-tracking-caps); flex: none; }
  .ph-table--stack td.ph-col-actions { width: 100%; justify-content: flex-end; }
  .ph-table--stack td.ph-col-actions::before { content: none; }
}

/* Page filter bar: title, filters, search and view toggle in one row (GridWatch) */
.ph-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-space-2); padding: var(--ph-space-3); background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); }
.ph-filterbar .ph-search { width: 14rem; flex: 0 1 14rem; }
.ph-filterbar .ph-input, .ph-filterbar .ph-select { min-height: 2rem; font-size: var(--ph-text-sm); }
.ph-filterbar .ph-select { width: auto; min-width: 7.5rem; }
.ph-filterbar__title { margin: 0 var(--ph-space-3) 0 var(--ph-space-1); font-size: var(--ph-text-md); font-weight: var(--ph-weight-medium); color: var(--ph-text); }
.ph-filterbar__spacer { flex: 1 1 0; }
.ph-toolbar { display: flex; flex-wrap: wrap; gap: var(--ph-space-3); align-items: center; justify-content: space-between; margin-bottom: var(--ph-space-4); }
.ph-toolbar .ph-input, .ph-toolbar .ph-select { width: auto; min-width: 12rem; }

.ph-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--ph-space-3); padding: var(--ph-space-3) var(--ph-space-4); border-top: 1px solid var(--ph-border); }
.ph-pages { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.ph-page-btn { display: inline-grid; place-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; border: 1px solid transparent; border-radius: var(--ph-radius-sm); background: transparent; color: var(--ph-text-2); font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); text-decoration: none; cursor: pointer; }
.ph-page-btn:hover { background: var(--ph-grey-100); }
.ph-page-btn[aria-current="page"] { background: var(--ph-grey-50); border-color: var(--ph-grey-300); color: var(--ph-text); }
@media (max-width: 640px) { .ph-pages li:not(:first-child):not(:last-child):not(.is-cur) { display: none; } }

/* ========================== 8 Pills and chips ========================== */
.ph-badge {
  --_fg: var(--ph-neutral-fg); --_bg: var(--ph-neutral-bg); --_bd: var(--ph-neutral-bd); --_dot: var(--ph-neutral-solid);
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem 0.125rem 0.4rem;
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); border-radius: var(--ph-radius-pill);
  font-size: var(--ph-text-xs); font-weight: var(--ph-weight-medium); line-height: 1.4; white-space: nowrap;
}
.ph-badge::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--_dot); flex: none; }
.ph-badge--plain::before { content: none; }
.ph-badge--plain { padding-inline: 0.5rem; }
.ph-badge--success { --_fg: var(--ph-success-fg); --_bg: var(--ph-success-bg); --_bd: var(--ph-success-bd); --_dot: var(--ph-success-solid); }
.ph-badge--warn    { --_fg: var(--ph-warn-fg);    --_bg: var(--ph-warn-bg);    --_bd: var(--ph-warn-bd);    --_dot: var(--ph-warn-solid); }
.ph-badge--orange  { --_fg: var(--ph-orange-fg);  --_bg: var(--ph-orange-bg);  --_bd: var(--ph-orange-bd);  --_dot: var(--ph-orange-solid); }
.ph-badge--danger  { --_fg: var(--ph-danger-fg);  --_bg: var(--ph-danger-bg);  --_bd: var(--ph-danger-bd);  --_dot: var(--ph-danger-solid); }
.ph-badge--info    { --_fg: var(--ph-info-fg);    --_bg: var(--ph-info-bg);    --_bd: var(--ph-info-bd);    --_dot: var(--ph-info-solid); }
.ph-badge--purple  { --_fg: var(--ph-purple-fg);  --_bg: var(--ph-purple-bg);  --_bd: var(--ph-purple-bd);  --_dot: var(--ph-purple-solid); }
.ph-badge--accent  { --_fg: var(--ph-accent-700); --_bg: var(--ph-accent-100); --_bd: var(--ph-accent-200); --_dot: var(--ph-accent-500); }
/* square-cornered "tag" (Done, High match, Sensor M1, No sensor) */
.ph-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.45rem; border-radius: var(--ph-radius-xs); border: 1px solid var(--_bd, var(--ph-neutral-bd)); background: var(--_bg, var(--ph-neutral-bg)); color: var(--_fg, var(--ph-neutral-fg)); font-size: var(--ph-text-xs); font-weight: var(--ph-weight-medium); line-height: 1.4; white-space: nowrap; }
.ph-tag--success { --_fg: var(--ph-success-fg); --_bg: var(--ph-success-bg); --_bd: var(--ph-success-bd); }
.ph-tag--warn    { --_fg: var(--ph-warn-fg); --_bg: var(--ph-warn-bg); --_bd: var(--ph-warn-bd); }
.ph-tag--orange  { --_fg: var(--ph-orange-fg); --_bg: var(--ph-orange-bg); --_bd: var(--ph-orange-bd); }
.ph-tag--danger  { --_fg: var(--ph-danger-fg); --_bg: var(--ph-danger-bg); --_bd: var(--ph-danger-bd); }
.ph-tag--info    { --_fg: var(--ph-info-fg); --_bg: var(--ph-info-bg); --_bd: var(--ph-info-bd); }
.ph-tag--sky     { --_fg: var(--ph-sky-fg); --_bg: var(--ph-sky-50); --_bd: var(--ph-sky-100); }
.ph-tag--purple  { --_fg: var(--ph-purple-fg); --_bg: var(--ph-purple-bg); --_bd: var(--ph-purple-bd); }
/* type chip with a tiny icon (Charging stations, Solar, Water) = ph-tag + icon */
.ph-tag .ph-icon { width: 0.8125rem; height: 0.8125rem; }
.ph-count { display: inline-grid; place-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: var(--ph-radius-pill); background: var(--ph-grey-100); color: var(--ph-grey-700); font-size: var(--ph-text-2xs); font-weight: var(--ph-weight-medium); }
.ph-count--alert { background: var(--ph-danger-solid); color: #fff; }
.ph-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ph-warn-solid); flex: none; }
.ph-dot--ok { background: var(--ph-success-solid); } .ph-dot--bad { background: var(--ph-danger-solid); } .ph-dot--idle { background: var(--ph-grey-400); }

/* ========================== 9 Alert + banner card ========================== */
.ph-alert {
  --_fg: var(--ph-info-fg); --_bg: var(--ph-info-bg); --_bd: var(--ph-info-bd); --_bar: var(--ph-info-solid);
  display: flex; gap: var(--ph-space-3); padding: var(--ph-space-3) var(--ph-space-4);
  background: var(--_bg); color: var(--ph-grey-800); border: 1px solid var(--_bd);
  border-radius: var(--ph-radius-md); font-size: var(--ph-text-sm); line-height: var(--ph-leading-snug);
}
.ph-alert__icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; border-radius: 50%; background: var(--_bar); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
.ph-alert__icon::before { content: "i"; }
.ph-alert__title { display: block; margin: 0 0 0.15rem; font-weight: var(--ph-weight-medium); color: var(--_fg); }
.ph-alert p { margin: 0; }
.ph-alert--success { --_fg: var(--ph-success-fg); --_bg: var(--ph-success-bg); --_bd: var(--ph-success-bd); --_bar: var(--ph-success-solid); }
.ph-alert--success .ph-alert__icon::before { content: "\2713"; }
.ph-alert--warn    { --_fg: var(--ph-warn-fg); --_bg: var(--ph-warn-bg); --_bd: var(--ph-warn-bd); --_bar: var(--ph-warn-solid); }
.ph-alert--warn .ph-alert__icon::before, .ph-alert--danger .ph-alert__icon::before { content: "!"; }
.ph-alert--danger  { --_fg: var(--ph-danger-fg); --_bg: var(--ph-danger-bg); --_bd: var(--ph-danger-bd); --_bar: var(--ph-danger-solid); }
.ph-alert--banner { border-radius: 0; border-width: 0 0 1px; justify-content: center; }

/* Banner card (Fluid "Possible leak detected"): white card, tinted icon tile, caps kicker, bold title, link right */
.ph-bannercard { display: flex; align-items: center; gap: var(--ph-space-4); padding: var(--ph-space-3) var(--ph-space-4); background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); box-shadow: var(--ph-shadow-1); }
.ph-bannercard__tile { flex: none; display: grid; place-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--ph-radius-sm); background: var(--ph-danger-bg); color: var(--ph-danger-fg); }
.ph-bannercard--info .ph-bannercard__tile { background: var(--ph-info-bg); color: var(--ph-info-fg); }
.ph-bannercard--warn .ph-bannercard__tile { background: var(--ph-warn-bg); color: var(--ph-warn-fg); }
.ph-bannercard--success .ph-bannercard__tile { background: var(--ph-success-bg); color: var(--ph-success-fg); }
.ph-bannercard__kicker { margin: 0; font-size: var(--ph-text-2xs); color: var(--ph-text-3); }
.ph-bannercard__title { margin: 0; font-size: var(--ph-text-base); font-weight: var(--ph-weight-medium); color: var(--ph-text); }
.ph-bannercard__text { margin: 0; font-size: var(--ph-text-xs); color: var(--ph-text-3); }
.ph-bannercard__action { margin-left: auto; flex: none; }
@media (max-width: 560px) { .ph-bannercard { flex-wrap: wrap; } .ph-bannercard__action { margin-left: 3.25rem; } }

/* ========================== 10 Link ========================== */
.ph-link, a.ph-link { color: var(--ph-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ph-link:hover { color: var(--ph-link-hover); text-decoration-thickness: 2px; }
.ph-link--quiet { text-decoration: none; font-weight: var(--ph-weight-medium); }
.ph-link--quiet:hover { text-decoration: underline; }
.ph-prose a { color: var(--ph-link); text-underline-offset: 0.2em; }

/* ========================== 11 Tabs + segmented ========================== */
.ph-tabs { display: flex; gap: var(--ph-space-1); border-bottom: 1px solid var(--ph-border); overflow-x: auto; margin: 0; padding: 0; list-style: none; }
.ph-tab { display: inline-flex; align-items: center; gap: var(--ph-space-2); min-height: var(--ph-tap); padding: 0 var(--ph-space-4); margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ph-text-2); font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ph-tab:hover { color: var(--ph-text); border-bottom-color: var(--ph-grey-300); }
.ph-tab[aria-selected="true"], .ph-tab[aria-current="page"] { color: var(--ph-accent-700); border-bottom-color: var(--ph-accent-600); }
.ph-tab__count { padding: 0 0.45rem; border-radius: var(--ph-radius-pill); background: var(--ph-grey-100); color: var(--ph-grey-700); font-size: var(--ph-text-2xs); }
.ph-tabpanel { padding-top: var(--ph-space-5); }

/* Segmented control: rounded grey track, white selected tab (chat Queries|History, time ranges) */
.ph-segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--ph-grey-100); border: 1px solid var(--ph-grey-150); border-radius: var(--ph-radius-sm); max-width: 100%; overflow-x: auto; }
.ph-segmented--full { display: flex; width: 100%; }
.ph-segmented--full .ph-seg { flex: 1 1 0; }
.ph-seg { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 1.75rem; padding: 0 var(--ph-space-3); border: 0; border-radius: 4px; background: transparent; color: var(--ph-grey-700); font-size: var(--ph-text-xs); font-weight: var(--ph-weight-medium); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ph-seg:hover { color: var(--ph-text); }
.ph-seg[aria-selected="true"], .ph-seg[aria-pressed="true"], .ph-seg[aria-current="page"] { background: var(--ph-bg-surface); color: var(--ph-text); box-shadow: 0 1px 2px rgb(31 42 60 / 0.1), 0 0 0 1px var(--ph-grey-200); }
.ph-seg--icon { padding: 0 0.5rem; }
.ph-seg--sky[aria-pressed="true"], .ph-seg--sky[aria-selected="true"] { background: var(--ph-sky-100); color: var(--ph-sky-fg); box-shadow: none; }
@media (pointer: coarse) { .ph-seg { min-height: 2.5rem; } }

/* ========================== 12 Shell, sidebar, topbar ========================== */
.ph-shell { display: grid; grid-template-columns: var(--ph-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.ph-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--ph-space-4); padding: var(--ph-space-4) var(--ph-space-3); background: var(--ph-bg-surface); border-right: 1px solid var(--ph-border); overflow-y: auto; }
.ph-sidebar__brand { display: flex; align-items: center; gap: var(--ph-space-2); padding: var(--ph-space-1) var(--ph-space-2); color: var(--ph-text); text-decoration: none; }
.ph-sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--ph-space-1); padding-top: var(--ph-space-3); border-top: 1px solid var(--ph-border); font-size: var(--ph-text-sm); color: var(--ph-text-2); }
.ph-nav { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ph-nav__label { padding: var(--ph-space-3) var(--ph-space-3) var(--ph-space-1); font-size: var(--ph-text-2xs); font-weight: var(--ph-weight-medium); text-transform: uppercase; letter-spacing: var(--ph-tracking-caps); color: var(--ph-text-3); }
.ph-nav__link { display: flex; align-items: center; gap: var(--ph-space-3); min-height: 2.125rem; padding: 0 var(--ph-space-3); border-radius: var(--ph-radius-sm); color: var(--ph-grey-700); font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); text-decoration: none; position: relative; }
.ph-nav__link:hover { background: var(--ph-grey-50); color: var(--ph-text); }
.ph-nav__link[aria-current="page"] { background: var(--ph-accent-100); color: var(--ph-accent-700); }
.ph-nav__link .ph-count, .ph-nav__link .ph-badge { margin-left: auto; }
.ph-nav__sub { margin: 0 0 0 1.125rem; padding: 0 0 0 var(--ph-space-3); list-style: none; border-left: 1px solid var(--ph-border); display: flex; flex-direction: column; gap: 2px; }
.ph-nav__icon { width: 1rem; height: 1rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ph-usercard { display: flex; align-items: center; gap: var(--ph-space-2); padding: var(--ph-space-2) var(--ph-space-2); min-width: 0; }
.ph-usercard__name { display: block; font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); color: var(--ph-text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-usercard__role { display: block; font-size: var(--ph-text-2xs); color: var(--ph-text-3); }

.ph-main { min-width: 0; display: flex; flex-direction: column; }
.ph-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ph-space-4); min-height: var(--ph-topbar-h); padding: 0 var(--ph-space-5); background: var(--ph-bg-surface); border-bottom: 1px solid var(--ph-border); }
.ph-topbar__mid { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.ph-topbar__mid .ph-search { max-width: 26rem; }
.ph-topbar__end { display: flex; align-items: center; gap: var(--ph-space-2); }
.ph-page { width: 100%; max-width: var(--ph-content-max); margin-inline: auto; padding: var(--ph-space-5) var(--ph-space-5) var(--ph-space-8); display: flex; flex-direction: column; gap: var(--ph-space-4); }
.ph-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ph-space-4); }
.ph-page-header__text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ph-crumbs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-space-2); font-size: var(--ph-text-sm); color: var(--ph-text-3); }
.ph-crumbs li + li::before { content: "\203A"; margin-right: var(--ph-space-2); color: var(--ph-grey-500); }
.ph-crumbs a { color: var(--ph-text-3); text-decoration: none; }
.ph-crumbs a:hover { color: var(--ph-text); text-decoration: underline; }
.ph-crumbs [aria-current] { color: var(--ph-text); font-weight: var(--ph-weight-medium); }

.ph-user { display: inline-flex; align-items: center; gap: var(--ph-space-2); font-size: var(--ph-text-sm); color: var(--ph-text-2); }
.ph-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #e9d7fe; color: #53389e; display: inline-grid; place-content: center; font-size: var(--ph-text-2xs); font-weight: var(--ph-weight-medium); text-transform: uppercase; flex: none; }   /* sampled #e9d7fe (GridWatch / neuronAI avatar) */
.ph-avatar--blue { background: var(--ph-accent-100); color: var(--ph-accent-700); }

@media (max-width: 880px) {
  .ph-shell { grid-template-columns: minmax(0, 1fr); }
  .ph-sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: var(--ph-space-2); padding: var(--ph-space-2) var(--ph-space-3); border-right: 0; border-bottom: 1px solid var(--ph-border); overflow-x: auto; overflow-y: hidden; }
  .ph-sidebar__brand .ph-brand-name small { display: none; }
  .ph-sidebar__foot { margin: 0 0 0 auto; padding: 0; border: 0; flex-direction: row; align-items: center; flex: none; }
  .ph-sidebar__foot .ph-usercard__role { display: none; }
  .ph-nav { flex-direction: row; flex: none; gap: var(--ph-space-1); }
  .ph-nav__label, .ph-nav__sub { display: none; }
  .ph-nav__link { white-space: nowrap; min-height: var(--ph-tap); }
  .ph-page { padding: var(--ph-space-4) var(--ph-space-4) var(--ph-space-7); }
  .ph-topbar { padding-inline: var(--ph-space-4); }
  .ph-topbar__mid { display: none; }
}
.ph-navbar { display: flex; align-items: center; gap: var(--ph-space-4); padding: 0 var(--ph-space-5); min-height: var(--ph-topbar-h); background: var(--ph-bg-surface); border-bottom: 1px solid var(--ph-border); }

/* ========================== 13 Empty ========================== */
.ph-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ph-space-3); padding: var(--ph-space-7) var(--ph-space-5); text-align: center; color: var(--ph-text-3); }
.ph-empty__art { width: 3rem; height: 3rem; border-radius: var(--ph-radius-md); background: var(--ph-accent-100); display: grid; place-content: center; color: var(--ph-accent-700); }
.ph-empty__art svg { width: 1.375rem; height: 1.375rem; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ph-empty__title { margin: 0; color: var(--ph-text); font-size: var(--ph-text-md); font-weight: var(--ph-weight-medium); }
.ph-empty__text { margin: 0; max-width: 42ch; font-size: var(--ph-text-sm); }

/* ========================== 14 Skeleton, spinner ========================== */
.ph-skeleton { display: block; height: 0.875rem; border-radius: var(--ph-radius-xs); background: linear-gradient(90deg, var(--ph-grey-100) 25%, var(--ph-grey-150) 37%, var(--ph-grey-100) 63%); background-size: 400% 100%; animation: ph-shimmer 1.4s var(--ph-ease) infinite; }
.ph-skeleton--title { height: 1.25rem; width: 40%; }
.ph-skeleton--line  { width: 100%; }
.ph-skeleton--short { width: 55%; }
.ph-skeleton--block { height: 5rem; border-radius: var(--ph-radius-md); }
.ph-skeleton-rows { display: flex; flex-direction: column; gap: var(--ph-space-3); padding: var(--ph-space-4) var(--ph-space-5); }
.ph-spinner { display: inline-block; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 2px solid var(--ph-grey-200); border-top-color: var(--ph-accent-600); animation: ph-spin 0.7s linear infinite; vertical-align: -0.2em; }
.ph-loading { display: flex; align-items: center; gap: var(--ph-space-3); color: var(--ph-text-3); font-size: var(--ph-text-sm); padding: var(--ph-space-4) 0; }

/* ========================== 15 Toast ========================== */
.ph-toasts { position: fixed; right: var(--ph-space-4); bottom: var(--ph-space-4); z-index: var(--ph-z-toast); display: flex; flex-direction: column; gap: var(--ph-space-2); width: min(24rem, calc(100vw - 2rem)); }
.ph-toast { display: flex; gap: var(--ph-space-3); align-items: flex-start; padding: var(--ph-space-3) var(--ph-space-4); background: var(--ph-bg-surface); color: var(--ph-text); border: 1px solid var(--ph-border); border-left: 3px solid var(--ph-info-solid); border-radius: var(--ph-radius-md); box-shadow: var(--ph-shadow-3); font-size: var(--ph-text-sm); animation: ph-rise var(--ph-dur-slow) var(--ph-ease); }
.ph-toast--success { border-left-color: var(--ph-success-solid); }
.ph-toast--warn    { border-left-color: var(--ph-warn-solid); }
.ph-toast--danger  { border-left-color: var(--ph-danger-solid); }
.ph-toast__title { display: block; font-weight: var(--ph-weight-medium); }
.ph-toast__close { margin-left: auto; flex: none; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--ph-radius-xs); background: transparent; color: var(--ph-grey-700); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.ph-toast__close:hover { background: var(--ph-grey-100); color: var(--ph-text); }

/* ========================== 16 Popover / row menu ========================== */
.ph-menu-wrap { position: relative; display: inline-block; }
.ph-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--ph-z-pop); min-width: 11rem; margin: 0; padding: 0.25rem; list-style: none; background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); box-shadow: var(--ph-shadow-3); text-align: left; }
.ph-menu__item { display: flex; align-items: center; gap: var(--ph-space-2); width: 100%; min-height: 2rem; padding: 0 var(--ph-space-2); border: 0; border-radius: var(--ph-radius-xs); background: transparent; color: var(--ph-grey-800); font-size: var(--ph-text-sm); text-align: left; text-decoration: none; cursor: pointer; }
.ph-menu__item:hover, .ph-menu__item:focus-visible { background: var(--ph-grey-50); }
.ph-menu__item .ph-icon { color: var(--ph-grey-600); }
.ph-menu__item--danger { color: var(--ph-danger-fg); }
.ph-menu__sep { height: 1px; margin: 0.25rem 0; background: var(--ph-border); }

/* ========================== 17 Modal ========================== */
.ph-modal { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--ph-border); border-radius: var(--ph-radius-lg); background: var(--ph-bg-surface); color: var(--ph-text); box-shadow: var(--ph-shadow-3); overflow: auto; }
.ph-modal::backdrop { background: var(--ph-scrim); backdrop-filter: blur(2px); }
.ph-modal[open] { animation: ph-rise var(--ph-dur-slow) var(--ph-ease); }
.ph-modal__head { padding: var(--ph-space-5) var(--ph-space-5) var(--ph-space-2); }
.ph-modal__title { margin: 0; font-size: var(--ph-text-lg); font-weight: var(--ph-weight-medium); }
.ph-modal__body { padding: var(--ph-space-2) var(--ph-space-5) var(--ph-space-5); color: var(--ph-text-2); font-size: var(--ph-text-sm); }
.ph-modal__foot { display: flex; justify-content: flex-end; gap: var(--ph-space-2); flex-wrap: wrap; padding: var(--ph-space-3) var(--ph-space-5); border-top: 1px solid var(--ph-border); }

/* ========================== 18 Code, device + recovery codes ========================== */
.ph-code { font-family: var(--ph-font-mono); font-size: 0.875em; padding: 0.1rem 0.4rem; background: var(--ph-grey-100); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-xs); color: var(--ph-grey-800); word-break: break-all; }
pre.ph-code, .ph-codeblock { display: block; margin: 0; padding: var(--ph-space-3) var(--ph-space-4); background: var(--ph-bg-subtle); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm); color: var(--ph-grey-800); font-family: var(--ph-font-mono); font-size: var(--ph-text-xs); line-height: 1.6; overflow-x: auto; white-space: pre; word-break: normal; }
.ph-devicecode { display: flex; flex-direction: column; align-items: center; gap: var(--ph-space-1); padding: var(--ph-space-5) var(--ph-space-4); background: var(--ph-accent-50); border: 1px solid var(--ph-accent-200); border-radius: var(--ph-radius-md); text-align: center; }
.ph-devicecode__label { font-size: var(--ph-text-2xs); font-weight: var(--ph-weight-medium); text-transform: uppercase; letter-spacing: var(--ph-tracking-caps); color: var(--ph-accent-700); }
.ph-devicecode__value { font-family: var(--ph-font-mono); font-size: clamp(1.75rem, 8vw, 2.25rem); font-weight: 600; letter-spacing: 0.2em; padding-left: 0.2em; color: var(--ph-grey-900); line-height: 1.2; user-select: all; overflow-wrap: anywhere; }
.ph-recovery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ph-space-2); margin: 0; padding: var(--ph-space-4); list-style: none; background: var(--ph-bg-subtle); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm); counter-reset: rc; }
.ph-recovery li { counter-increment: rc; font-family: var(--ph-font-mono); font-size: var(--ph-text-base); letter-spacing: 0.06em; padding: var(--ph-space-2) var(--ph-space-3); background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-xs); user-select: all; overflow-wrap: anywhere; }
.ph-recovery li::before { content: counter(rc) "."; display: inline-block; min-width: 1.6rem; color: var(--ph-text-3); font-size: var(--ph-text-2xs); letter-spacing: 0; }
/* single <pre> variant: one code per line, two columns (copy/paste keeps newlines) */
pre.ph-recovery { display: block; columns: 2; column-gap: var(--ph-space-5); white-space: pre; font-family: var(--ph-font-mono); font-size: var(--ph-text-base); letter-spacing: 0.06em; line-height: 2; user-select: all; overflow-x: auto; }
.ph-qr { display: inline-block; padding: var(--ph-space-3); background: #fff; border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm); line-height: 0; }
.ph-qr img, .ph-qr canvas, .ph-qr svg { width: 11rem; height: 11rem; image-rendering: pixelated; }
.ph-kbd { font-family: var(--ph-font-sans); font-size: var(--ph-text-2xs); padding: 0.05rem 0.35rem; background: var(--ph-grey-50); border: 1px solid var(--ph-grey-300); border-radius: var(--ph-radius-xs); color: var(--ph-text-3); line-height: 1.5; }

/* ========================== 19 Misc: kv, stat, KPI strip, steps, progress ========================== */
.ph-kv { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 0; margin: 0; font-size: var(--ph-text-sm); }
.ph-kv dt, .ph-kv dd { margin: 0; padding: var(--ph-space-3) 0; border-bottom: 1px solid var(--ph-border); }
.ph-kv dt { color: var(--ph-text-3); }
.ph-kv dd { color: var(--ph-text); font-weight: var(--ph-weight-medium); overflow-wrap: anywhere; }
.ph-kv > :nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 480px) { .ph-kv { grid-template-columns: 1fr; } .ph-kv dt { padding-bottom: 0; border-bottom: 0; } }

/* Stat card (Fluid): tiny icon + label, big value, caption */
.ph-stat { padding: var(--ph-space-4); background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); display: flex; flex-direction: column; gap: 0.25rem; box-shadow: var(--ph-shadow-1); min-width: 0; }
.ph-stat__label { display: flex; align-items: center; gap: 0.5rem; font-size: var(--ph-text-xs); color: var(--ph-text-2); font-weight: var(--ph-weight-medium); }
.ph-stat__label .ph-icon { color: var(--ph-accent-600); }
.ph-stat__value { font-size: var(--ph-text-2xl); font-weight: var(--ph-weight-medium); letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ph-text); }
.ph-stat__value small { font-size: var(--ph-text-xs); font-weight: var(--ph-weight-regular); color: var(--ph-text-3); letter-spacing: 0; margin-left: 0.25rem; }
.ph-stat__note { font-size: var(--ph-text-2xs); color: var(--ph-text-3); }
.ph-stat--tile { padding: var(--ph-space-2) var(--ph-space-3); background: var(--ph-bg-subtle); box-shadow: none; }
.ph-stat--tile .ph-stat__value { font-size: var(--ph-text-lg); }

/* KPI strip (GridWatch): N cards in one bordered strip, tiny caps label, big number, delta */
.ph-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); overflow: hidden; }
.ph-kpi { padding: var(--ph-space-3) var(--ph-space-4); display: flex; flex-direction: column; gap: 0.25rem; border-right: 1px solid var(--ph-border); min-width: 0; }
.ph-kpi:last-child { border-right: 0; }
.ph-kpi__label { margin: 0; font-size: var(--ph-text-2xs); text-transform: uppercase; letter-spacing: var(--ph-tracking-caps); color: var(--ph-text-3); font-weight: var(--ph-weight-medium); }
.ph-kpi__value { margin: 0; font-size: var(--ph-text-xl); font-weight: var(--ph-weight-medium); color: var(--ph-text); letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ph-kpi__delta { margin: 0; font-size: var(--ph-text-xs); color: var(--ph-text-3); }
.ph-delta { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0 0.3rem; border-radius: var(--ph-radius-xs); font-weight: var(--ph-weight-medium); }
.ph-delta--bad  { background: var(--ph-danger-bg); color: var(--ph-danger-fg); }
.ph-delta--good { background: var(--ph-success-bg); color: var(--ph-success-fg); }
@media (max-width: 640px) { .ph-kpi { border-right: 0; border-bottom: 1px solid var(--ph-border); } .ph-kpi:last-child { border-bottom: 0; } }

.ph-steps { display: flex; gap: var(--ph-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--ph-text-sm); color: var(--ph-text-3); flex-wrap: wrap; }
.ph-steps li { display: flex; align-items: center; gap: var(--ph-space-2); }
.ph-steps li + li::before { content: ""; width: 1.25rem; height: 1px; background: var(--ph-grey-300); }
.ph-steps__n { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--ph-grey-500); display: inline-grid; place-content: center; font-size: var(--ph-text-xs); font-weight: var(--ph-weight-medium); }
.ph-steps [aria-current="step"] { color: var(--ph-text); font-weight: var(--ph-weight-medium); }
.ph-steps [aria-current="step"] .ph-steps__n { background: var(--ph-accent-600); border-color: var(--ph-accent-600); color: #fff; }
.ph-steps .is-done .ph-steps__n { background: var(--ph-accent-100); border-color: var(--ph-accent-500); color: var(--ph-accent-700); }

.ph-progress { height: 0.5rem; border-radius: var(--ph-radius-pill); background: var(--ph-grey-150); overflow: hidden; }
.ph-progress > span { display: block; height: 100%; background: var(--ph-accent-600); border-radius: inherit; }
.ph-progress--warn > span { background: var(--ph-warn-solid); }
.ph-progress--danger > span { background: var(--ph-danger-solid); }
.ph-progress--green > span { background: var(--ph-success-solid); }
.ph-divider { border: 0; border-top: 1px solid var(--ph-border); margin: var(--ph-space-4) 0; }
.ph-section { display: flex; flex-direction: column; gap: var(--ph-space-3); }
.ph-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ph-space-3); flex-wrap: wrap; }
.ph-listrow { display: flex; align-items: center; gap: var(--ph-space-3); padding: var(--ph-space-3) var(--ph-space-4); border-bottom: 1px solid var(--ph-border); text-decoration: none; color: inherit; }
.ph-listrow:last-child { border-bottom: 0; }
a.ph-listrow:hover { background: var(--ph-grey-25); }
.ph-listrow__main { flex: 1 1 auto; min-width: 0; }
.ph-listrow__title { display: block; font-size: var(--ph-text-sm); color: var(--ph-text); }
.ph-listrow__sub { display: block; font-size: var(--ph-text-2xs); color: var(--ph-text-3); }

/* ========================== 20 Charts (BrainPlatform dashboards) ========================== */
.ph-chartcard { background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); padding: var(--ph-space-4); display: flex; flex-direction: column; gap: var(--ph-space-3); min-width: 0; box-shadow: var(--ph-shadow-1); --_c: var(--ph-chart-blue); --_c-lt: var(--ph-chart-blue-lt); }
.ph-chartcard--amber  { --_c: var(--ph-chart-amber);  --_c-lt: var(--ph-chart-amber-lt); }
.ph-chartcard--purple { --_c: var(--ph-chart-purple); --_c-lt: var(--ph-chart-purple-lt); }
.ph-chartcard--green  { --_c: var(--ph-chart-green);  --_c-lt: var(--ph-chart-green-lt); }
.ph-chartcard--teal   { --_c: var(--ph-chart-teal);   --_c-lt: var(--ph-chart-teal-lt); }
.ph-chartcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ph-space-3); }
.ph-chartcard__title { margin: 0; display: flex; align-items: center; gap: var(--ph-space-2); font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); color: var(--ph-text); }
.ph-chartcard__title small { font-weight: var(--ph-weight-regular); color: var(--ph-text-3); font-size: var(--ph-text-xs); }
.ph-chartcard__value { font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); color: var(--ph-text); font-variant-numeric: tabular-nums; }
.ph-chartcard__foot { display: flex; justify-content: space-between; gap: var(--ph-space-3); font-size: var(--ph-text-2xs); color: var(--ph-text-3); }
.ph-legend { display: flex; flex-wrap: wrap; gap: var(--ph-space-1) var(--ph-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--ph-text-xs); color: var(--ph-text-2); }
.ph-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.ph-legend li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--_sw, var(--_c)); }
.ph-legend .is-line::before { height: 0; width: 0.875rem; border-top: 1.5px dotted var(--ph-grey-700); background: none; border-radius: 0; }

/* Donut: conic-gradient ring. Set --p1/--p2 (percent) and colours; centre number inside. */
.ph-donut { --p1: 62; --p2: 18; --_ring: var(--_c); position: relative; width: 11rem; aspect-ratio: 1; margin-inline: auto; border-radius: 50%;
  background: conic-gradient(var(--_ring) 0 calc(var(--p1) * 1%), var(--ph-chart-teal) 0 calc((var(--p1) + var(--p2)) * 1%), var(--ph-grey-150) 0); }
.ph-donut::before { content: ""; position: absolute; inset: 0.875rem; border-radius: 50%; background: var(--ph-bg-surface); }
.ph-donut__centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ph-donut__value { font-size: var(--ph-text-3xl); font-weight: var(--ph-weight-regular); letter-spacing: -0.03em; line-height: 1; color: var(--ph-text); font-variant-numeric: tabular-nums; }
.ph-donut__unit { font-size: var(--ph-text-xs); color: var(--ph-text-3); }
/* Semicircle gauge */
.ph-gauge { --v: 60; position: relative; width: 12rem; aspect-ratio: 2 / 1; margin-inline: auto; overflow: hidden; }
.ph-gauge::before { content: ""; position: absolute; inset: 0 0 -100% 0; border-radius: 50%; background: conic-gradient(from 270deg, var(--ph-chart-amber) 0 calc(var(--v) * 1.8deg), var(--ph-grey-150) 0 180deg, transparent 0); }
.ph-gauge::after { content: ""; position: absolute; left: 1rem; right: 1rem; top: 1rem; bottom: -200%; border-radius: 50%; background: var(--ph-bg-surface); }
.ph-gauge__value { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; text-align: center; font-size: var(--ph-text-lg); font-weight: var(--ph-weight-medium); font-variant-numeric: tabular-nums; }
/* Bar chart built from flex columns. Each .ph-bar sets --h (height %). Use --a/--b for paired bars. */
.ph-bars { display: flex; align-items: flex-end; gap: var(--ph-space-2); height: 9rem; padding: var(--ph-space-2) 0 0; border-bottom: 1px solid var(--ph-border); position: relative; background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--ph-grey-100) calc(25% - 1px) 25%); }
.ph-bars--tall { height: 13rem; }
.ph-bars--mini { height: 4.5rem; gap: 3px; background: none; }
.ph-bars__col { flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; min-width: 0; }
.ph-bar { flex: 1 1 0; max-width: 0.875rem; height: calc(var(--h, 50) * 1%); background: var(--_c); border-radius: 2px 2px 0 0; min-height: 2px; }
.ph-bar--past { background: var(--_c-lt); }
.ph-bar--peak { background: var(--ph-chart-red); }
.ph-bars__ref { position: absolute; left: 0; right: 0; bottom: calc(var(--ref, 60) * 1%); border-top: 1.5px dotted var(--ph-grey-700); pointer-events: none; }
.ph-bars-axis { display: flex; gap: var(--ph-space-2); margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: var(--ph-text-2xs); color: var(--ph-text-3); }
.ph-bars-axis li { flex: 1 1 0; text-align: center; min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
/* Line / area chart: inline <svg class="ph-areachart"> with <path class="ph-area">, <path class="ph-line">, <circle class="ph-dotpt">, <line class="ph-avg"> */
.ph-areachart { width: 100%; height: auto; display: block; overflow: visible; }
.ph-areachart .ph-grid-line { stroke: var(--ph-grey-150); stroke-width: 1; }
.ph-areachart .ph-axis-text { fill: var(--ph-grey-600); font-size: 9px; }
.ph-area { fill: var(--ph-accent-100); opacity: 0.75; stroke: none; }
.ph-line { fill: none; stroke: var(--ph-accent-600); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ph-dotpt { fill: var(--ph-bg-surface); stroke: var(--ph-accent-600); stroke-width: 1.5; }
.ph-avg { stroke: var(--ph-accent-300); stroke-width: 1; stroke-dasharray: 4 3; }
.ph-chartcard--amber .ph-area { fill: var(--ph-chart-amber-lt); } .ph-chartcard--amber .ph-line { stroke: var(--ph-chart-amber); }
.ph-chartcard--purple .ph-line { stroke: var(--ph-chart-purple); }
.ph-chartcard--green .ph-line { stroke: var(--ph-chart-green); }
.ph-band { height: 4.5rem; border-radius: var(--ph-radius-xs); background: linear-gradient(to bottom, var(--ph-chart-band-dk) 0 35%, var(--ph-chart-band) 35% 100%); position: relative; }
.ph-band::after { content: ""; position: absolute; left: 0; right: 0; top: 30%; border-top: 2px solid var(--ph-chart-line); }

/* ========================== 21 Node-card diagram (flow / device map) ========================== */
.ph-diagram { position: relative; padding: var(--ph-space-5); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); background-color: var(--ph-bg-surface); background-image: radial-gradient(var(--ph-bg-dots) 1px, transparent 1px); background-size: 16px 16px; overflow-x: auto; }
.ph-flow { display: flex; align-items: center; gap: var(--ph-space-5); min-width: min-content; }
.ph-flow--col { flex-direction: column; align-items: stretch; }
.ph-node { display: flex; flex-direction: column; gap: 0.125rem; min-width: 11rem; padding: var(--ph-space-3); background: var(--ph-bg-surface); border: 1px solid var(--ph-grey-200); border-radius: var(--ph-radius-sm); box-shadow: var(--ph-shadow-1); position: relative; }
.ph-node__label { margin: 0; font-size: var(--ph-text-2xs); text-transform: uppercase; letter-spacing: var(--ph-tracking-caps); color: var(--ph-text-2); }
.ph-node__title { margin: 0; font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); color: var(--ph-text); display: flex; align-items: center; gap: var(--ph-space-2); }
.ph-node__sub { margin: 0; font-size: var(--ph-text-xs); color: var(--ph-text-2); }
.ph-node--main { border-color: var(--ph-accent-300); background: var(--ph-accent-50); }
.ph-node--attn { border-color: var(--ph-warn-solid); }
.ph-node--est  { border-style: dashed; }
.ph-node--bad  { border-color: var(--ph-danger-solid); }
.ph-node__tile { display: grid; place-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--ph-radius-xs); background: var(--ph-accent-100); color: var(--ph-accent-700); flex: none; }
.ph-conn { flex: 1 1 2.5rem; min-width: 2.5rem; align-self: center; position: relative; height: 0; border-top: 1.5px dashed var(--ph-accent-400); }
.ph-conn--col { flex: none; width: 0; height: 1.75rem; min-width: 0; border-top: 0; border-left: 1.5px dashed var(--ph-accent-400); align-self: center; }
.ph-conn > .ph-conn__pill { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); }
.ph-conn__pill { display: inline-block; padding: 0.05rem 0.5rem; border-radius: var(--ph-radius-xs); background: var(--ph-info-bg); border: 1px solid var(--ph-info-bd); color: var(--ph-info-fg); font-size: var(--ph-text-2xs); white-space: nowrap; }
.ph-conn__pill--ok { background: var(--ph-success-bg); border-color: var(--ph-success-bd); color: var(--ph-success-fg); }
.ph-zoom { position: absolute; right: var(--ph-space-3); bottom: var(--ph-space-3); display: flex; flex-direction: column; gap: 0.25rem; }
.ph-zoom button { width: 1.75rem; height: 1.75rem; border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm); background: var(--ph-bg-surface); color: var(--ph-grey-700); cursor: pointer; }
.ph-diagram-legend { display: flex; flex-wrap: wrap; gap: var(--ph-space-4); margin: var(--ph-space-4) 0 0; padding: 0; list-style: none; font-size: var(--ph-text-xs); color: var(--ph-text-3); }
.ph-diagram-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.ph-diagram-legend li::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 2px; border: 1px solid var(--ph-accent-300); background: var(--ph-accent-100); }
.ph-diagram-legend .is-est::before { border-style: dashed; border-color: var(--ph-grey-500); background: var(--ph-bg-surface); }
.ph-diagram-legend .is-attn::before { border-color: var(--ph-warn-solid); background: var(--ph-warn-bg); }

/* ========================== 22 Chat (neuronAI screens) ========================== */
.ph-chatshell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); height: 100vh; background: var(--ph-bg-canvas); }
.ph-chatside { display: flex; flex-direction: column; gap: var(--ph-space-3); padding: var(--ph-space-3); background: var(--ph-bg-surface); border-right: 1px solid var(--ph-border); overflow-y: auto; }
.ph-chatside__top { display: flex; align-items: center; justify-content: space-between; padding: var(--ph-space-1) var(--ph-space-1); }
.ph-saved { display: flex; flex-direction: column; gap: 0.125rem; padding: var(--ph-space-2) var(--ph-space-3); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); background: var(--ph-bg-surface); text-decoration: none; color: inherit; }
.ph-saved:hover { border-color: var(--ph-grey-300); }
.ph-saved__row { display: flex; justify-content: space-between; gap: var(--ph-space-2); align-items: center; font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); color: var(--ph-text); }
.ph-saved__run { font-size: var(--ph-text-xs); color: var(--ph-text-3); }
.ph-history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ph-history__group { margin: var(--ph-space-3) var(--ph-space-2) var(--ph-space-1); }
.ph-history__item { display: block; padding: var(--ph-space-2) var(--ph-space-3); border-radius: var(--ph-radius-sm); text-decoration: none; color: inherit; }
.ph-history__item:hover { background: var(--ph-grey-50); }
.ph-history__item[aria-current="true"], .ph-history__item[aria-current="page"] { background: var(--ph-accent-150); }
.ph-history__title { display: flex; justify-content: space-between; gap: var(--ph-space-2); font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); color: var(--ph-text); white-space: nowrap; overflow: hidden; }
.ph-history__item[aria-current="true"] .ph-history__title, .ph-history__item[aria-current="page"] .ph-history__title { color: var(--ph-accent-700); }
.ph-history__prev { display: block; font-size: var(--ph-text-2xs); color: var(--ph-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-chatmain { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ph-chathead { display: flex; align-items: center; justify-content: space-between; gap: var(--ph-space-3); min-height: 3rem; padding: 0 var(--ph-space-5); background: var(--ph-bg-surface); border-bottom: 1px solid var(--ph-border); }
.ph-chathead__title { display: flex; align-items: center; gap: var(--ph-space-2); font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); color: var(--ph-text); }
.ph-chatscroll { flex: 1 1 auto; overflow-y: auto; padding: var(--ph-space-5); }
.ph-thread { max-width: 46rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--ph-space-4); }
.ph-msg { display: flex; gap: var(--ph-space-3); font-size: var(--ph-text-sm); color: var(--ph-grey-800); }
.ph-msg__glyph { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--ph-accent-600); }
.ph-msg__body { min-width: 0; display: flex; flex-direction: column; gap: var(--ph-space-2); }
.ph-msg__time { font-size: var(--ph-text-2xs); color: var(--ph-text-3); }
.ph-msg--user { justify-content: flex-end; text-align: right; }
.ph-msg--user .ph-msg__body { align-items: flex-end; }
.ph-toolcall { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--ph-space-2) var(--ph-space-3); background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm); font-size: var(--ph-text-xs); color: var(--ph-text-3); }
.ph-toolcall__row { display: flex; align-items: center; gap: var(--ph-space-2); }
.ph-toolcall__label { font-size: var(--ph-text-2xs); font-weight: var(--ph-weight-strong); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ph-accent-600); }
.ph-toolcall__call { font-family: var(--ph-font-mono); font-size: var(--ph-text-2xs); color: var(--ph-grey-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ph-toolcall .ph-tag { margin-left: auto; }
.ph-suggest { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); margin: 0; padding: 0; list-style: none; }
.ph-chip-btn { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0 var(--ph-space-3); border: 1px solid var(--ph-border-button); border-radius: var(--ph-radius-pill); background: var(--ph-bg-surface); color: var(--ph-grey-800); font-size: var(--ph-text-xs); font-weight: var(--ph-weight-medium); text-decoration: none; cursor: pointer; }
.ph-chip-btn:hover { background: var(--ph-grey-50); border-color: var(--ph-grey-400); }
.ph-chip-btn .ph-icon { color: var(--ph-chart-amber); }
.ph-empty-chat { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ph-space-5); padding: var(--ph-space-6) var(--ph-space-4); text-align: center; }
.ph-empty-chat__title { margin: 0; font-size: var(--ph-text-2xl); font-weight: var(--ph-weight-medium); letter-spacing: -0.02em; color: var(--ph-text); }
.ph-empty-chat__sub { margin: 0.375rem 0 0; font-size: var(--ph-text-sm); color: var(--ph-text-3); }
.ph-catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 8.75rem)); gap: var(--ph-space-3); justify-content: center; }
@media (max-width: 560px) { .ph-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ph-catcard { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: var(--ph-space-3); text-align: left; background: var(--ph-bg-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); box-shadow: var(--ph-shadow-1); text-decoration: none; color: inherit; cursor: pointer; font: inherit; }
.ph-catcard:hover { border-color: var(--ph-grey-300); box-shadow: var(--ph-shadow-2); }
.ph-catcard__tile { display: grid; place-content: center; width: 1.5rem; height: 1.5rem; margin-bottom: 0.25rem; border-radius: var(--ph-radius-xs); background: var(--ph-warn-bg); color: var(--ph-warn-solid); }
.ph-catcard__tile--orange { background: var(--ph-orange-bg); color: var(--ph-orange-solid); }
.ph-catcard__tile--red { background: var(--ph-danger-bg); color: var(--ph-danger-solid); }
.ph-catcard__tile--green { background: var(--ph-success-bg); color: var(--ph-success-solid); }
.ph-catcard__tile--blue { background: var(--ph-info-bg); color: var(--ph-info-solid); }
.ph-catcard__title { font-size: var(--ph-text-sm); font-weight: var(--ph-weight-medium); color: var(--ph-text); }
.ph-catcard__text { font-size: var(--ph-text-2xs); color: var(--ph-text-3); line-height: 1.4; }
/* Composer: large rounded white box pinned at the bottom; send is grey when empty, blue when ready */
.ph-composer-wrap { padding: var(--ph-space-3) var(--ph-space-5) var(--ph-space-2); }
.ph-composer { max-width: 46rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--ph-space-2); padding: var(--ph-space-3) var(--ph-space-3) var(--ph-space-2) var(--ph-space-4); background: var(--ph-bg-surface); border: 1px solid var(--ph-border-button); border-radius: var(--ph-radius-lg); }
.ph-composer:focus-within { border-color: var(--ph-focus); box-shadow: 0 0 0 3px var(--ph-focus-halo); }
.ph-composer__input { width: 100%; min-height: 2.5rem; max-height: 10rem; padding: 0; border: 0; outline: 0; resize: none; background: transparent; font-size: var(--ph-text-base); line-height: 1.5; color: var(--ph-text); }
.ph-composer__input::placeholder { color: var(--ph-grey-600); }
.ph-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ph-space-2); }
.ph-composer__tools, .ph-composer__end { display: flex; align-items: center; gap: var(--ph-space-1); }
.ph-modelpick { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2rem; padding: 0 var(--ph-space-2); border: 0; border-radius: var(--ph-radius-sm); background: transparent; color: var(--ph-grey-700); font-size: var(--ph-text-xs); cursor: pointer; }
.ph-modelpick:hover { background: var(--ph-grey-100); }
.ph-send { display: inline-grid; place-content: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--ph-grey-150); color: var(--ph-grey-700); cursor: pointer; }
.ph-send[disabled] { cursor: not-allowed; }
.ph-send.is-ready, .ph-send:not([disabled]) { background: var(--ph-accent-500); color: #fff; }
.ph-composer-hint { margin: var(--ph-space-2) 0 0; text-align: center; font-size: var(--ph-text-2xs); color: var(--ph-text-3); }
@media (max-width: 760px) { .ph-chatshell { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100vh; } .ph-chatside { border-right: 0; border-bottom: 1px solid var(--ph-border); max-height: 40vh; } }

/* ========================== 23 Motion + print ========================== */
@keyframes ph-spin    { to { transform: rotate(360deg); } }
@keyframes ph-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes ph-rise    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@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; }
  .ph-skeleton { background: var(--ph-grey-150); }
}
@media print {
  .ph-sidebar, .ph-topbar, .ph-navbar, .ph-toasts, .ph-btn { display: none !important; }
  .ph-shell { display: block; }
  body, html { background: #fff; }
}

/* selected history row sits on a tinted fill: use the darker secondary text to stay AA */
.ph-history__item[aria-current="true"] .ph-history__prev, .ph-history__item[aria-current="page"] .ph-history__prev { color: var(--ph-text-2); }
.ph-line, .ph-avg, .ph-dotpt, .ph-areachart .ph-grid-line { vector-effect: non-scaling-stroke; }
.ph-conn:has(.ph-conn__pill) { min-width: 6.5rem; }