/* Dashboard — styles.css (the portfolio's, shared with the landing pages) gives the class names; inside .dash its
   tokens point at the tool's design system (app-tokens.css, --ds-*), which also carries the dark values. */

.dash {
  --color-bg: var(--ds-ground);
  --color-bg-white: var(--ds-surface);
  --surface: var(--ds-surface);
  --color-text: var(--ds-ink);
  --color-text-secondary: var(--ds-ink-2);
  --color-text-tertiary: var(--ds-ink-3);
  --color-border: var(--ds-line);
  --color-border-hover: var(--ds-line-strong);
  --color-accent: var(--ds-live);
  --color-accent-hover: var(--ds-sun-300);
  --color-accent-light: var(--ds-live-soft);
  --chart-bar: var(--ds-chart);
  --chart-text: var(--ds-chart-text); /* the bar colour as text: ≥ 4.5:1 */
  --segmented-text: var(--ds-action-text); /* unpicked options on the blue track */
  --grid: var(--ds-chart-grid);
  --danger: var(--ds-danger);
  --ok: var(--ds-ok); /* ATS check: passed / found */
  --amber: var(--ds-warn); /* ATS check: another wording */
  --amber-bg: var(--ds-warn-soft);
  background: var(--color-bg);
}
[data-theme="dark"] .dash { color-scheme: dark; }
[data-theme="dark"] .dash .nav--minimal.scrolled { background: color-mix(in srgb, var(--ds-ground) 82%, transparent); }
[data-theme="dark"] .dash .nav__logo img, [data-theme="dark"] .dash .login__logo { filter: invert(1); }
[data-theme="dark"] .dash .tag--accent { color: #FFDF77; }
/* Primary buttons, whatever their markup: the action blue of the design system (.ds-btn--primary), one per area */
body.dash :is(.btn--primary, .quick-add__btn--primary, .page-form__btn--primary, .ap-dirty__btn--primary) {
  background: var(--ds-action); color: var(--ds-on-action); border-color: transparent; border-radius: var(--ds-r-pill);
}
body.dash :is(.btn--primary, .quick-add__btn--primary, .page-form__btn--primary, .ap-dirty__btn--primary):is(:hover, :focus-visible) {
  background: var(--ds-action-hover); color: var(--ds-on-action); opacity: 1; transform: none; box-shadow: none;
}
[data-theme="dark"] .dash .btn--accent { color: #1A1A1A; }

/* Layers, bottom to top. The pickers drawn by JS sit outside this list: icon-picker.js 2000 (in its own popover),
   month-picker.js 5000 (above everything). */
:root {
  --z-checklist: 900;      /* the floating "Getting started" list */
  --z-chrome: 1000;        /* sidebar, top bar, phone tab bar */
  --z-popover: 1500;       /* View options and other popovers */
  --z-activity: 1990;      /* Recent activity / pipeline sheet: below an application opened from it */
  --z-drawer: 2000;        /* an application or project */
  --z-chrome-full: 2050;   /* sidebar, top bar and nav over a full-page application */
  --z-visits: 2080;        /* an application's visits */
  --z-visit: 2100;         /* one visit */
  --z-editor: 2500;        /* full-screen website / CV editor, onboarding wizard */
  --z-help: 2600;          /* the Help panel: opens from the editors' bars too */
  --z-menu: 3000;          /* menus, label picker, tooltips, toasts */
}

/* Scrollbars (page and every scrolling box): a thin thumb, no track or arrows. :where() keeps it at zero specificity,
   so boxes that hide theirs (teleprompter, drawer tabs) still do. Firefox / Chrome: scrollbar-*; Safari: ::-webkit-. */
:root { --focus-ring: var(--ds-focus); }
:root { --scroll-thumb: rgba(0, 0, 0, 0.22); --scroll-thumb-hover: rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] { --scroll-thumb: rgba(255, 255, 255, 0.2); --scroll-thumb-hover: rgba(255, 255, 255, 0.38); }
:where(html, .dash *) { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
:where(html, .dash *)::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
:where(html, .dash *)::-webkit-scrollbar-track, :where(html, .dash *)::-webkit-scrollbar-corner { background: transparent; }
:where(html, .dash *)::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }
:where(html, .dash *)::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
:where(html, .dash *)::-webkit-scrollbar-button { display: none; }

.dash body, .dash { font-size: 15px; line-height: 1.5; }

.btn--sm { padding: 8px 16px; font-size: 13px; }
.btn--danger { background: transparent; color: var(--danger); border: 1.5px solid currentColor; }
.btn--outline { color: var(--color-text); }

/* --- Sidebar (from 641 px, dashboard/layout/sidebar.js setSidebar): every section with its icon, Settings + Admin at the bottom; the
   top menu is only for phones then. Collapsed (<html class="sidebar-collapsed">): icons only, names as tooltips.
   --sidebar-w = the room the page, full-page sheets and the sticky list footer leave for it. --- */
.sidebar, .topbar { display: none; }
@media (min-width: 641px) {
  .dash { --sidebar-w: 232px; padding-left: var(--sidebar-w); }
  .sidebar-collapsed .dash { --sidebar-w: 64px; }
  .dash > nav.nav { display: none; }
  .dash { --topbar-h: 54px; } /* a 40 px row from 14 px down: level with the collapse button */
  .dash .dash__main { padding-top: calc(var(--topbar-h) + var(--space-lg)); }
  .sidebar {
    position: fixed; z-index: var(--z-chrome); inset: 0 auto 0 0; width: var(--sidebar-w); display: flex; flex-direction: column; gap: 4px;
    padding: 14px 10px; background: var(--surface); border-right: 1px solid var(--color-border); overflow-x: hidden; overflow-y: auto;
    transition: width var(--transition-base);
  }
  .sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 40px; padding: 0 2px 0 8px; margin-bottom: 10px; }
  .sidebar__logo { display: flex; align-items: center; flex-shrink: 0; }
  .sidebar__logo-full { height: 26px; width: auto; }
  .sidebar__logo-mark { display: none; }
  [data-theme="dark"] .sidebar__logo-full { filter: invert(1); }
  .sidebar__toggle {
    display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm);
    color: var(--color-text-tertiary); background: none; border: 0; cursor: pointer;
  }
  .sidebar__toggle:hover, .sidebar__toggle:focus-visible { color: var(--color-text); background: var(--color-bg); }
  .sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
  .sidebar__foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--color-border); }
  /* Items are .ds-nav-item (app-components.css: colours, hover, the selected one in the action's soft tint); here
     only what the sidebar needs on top (full width, fixed height, the collapsed state below). */
  .sidebar__item { width: 100%; height: 36px; white-space: nowrap; }
  .sidebar__item[hidden] { display: none; }
  .sidebar__item:focus-visible { outline-offset: -2px; }
  .sidebar__item[aria-current="page"] { font-weight: 600; }
  .sidebar__group { display: flex; align-items: center; gap: 5px; margin: 18px 10px 4px; font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); white-space: nowrap; }
  .sidebar__gap { height: 14px; flex: none; }
  /* the right edge: drag to resize */
  .sidebar__resize { position: absolute; top: 0; right: 0; bottom: 0; width: 6px; cursor: col-resize; touch-action: none; }
  .sidebar__resize[hidden] { display: none; }
  .sidebar__resize:hover, .sidebar__resize:focus-visible, .sidebar-resizing .sidebar__resize { background: var(--focus-ring); outline: 0; }
  .sidebar-resizing, .sidebar-resizing * { cursor: col-resize !important; user-select: none; }
  .sidebar-resizing .sidebar { transition: none; }
  /* the top bar: breadcrumbs */
  .topbar {
    position: fixed; z-index: var(--z-chrome); top: 14px; right: 0; left: var(--sidebar-w); height: 40px; display: flex; align-items: center;
    padding: 0 var(--space-xl); pointer-events: none; /* slim, no background or outline: only the crumbs take clicks */
  }
  .crumbs, .topbar__slot { pointer-events: auto; }
  /* Back, the crumbs and ⋯ share one 28 px line */
  .topbar__slot { display: flex; align-items: center; height: 28px; }
  .topbar__slot:empty { display: none; }
  #topbar-start { margin-right: 6px; margin-left: -6px; } /* the arrow's stroke lines up with the page's left edge */
  #topbar-end { margin-left: 4px; }
  .topbar .icon-btn {
    display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--color-text-secondary); font-size: 15px; line-height: 1;
  }
  .topbar .icon-btn:hover, .topbar .icon-btn:focus-visible, .topbar .drawer__more[aria-expanded="true"] { background: var(--surface); color: var(--color-text); }
  .topbar .drawer__back-label { display: none; } /* icon only here: its name is the aria-label */
  .topbar__help {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-left: auto; padding: 0 10px;
    border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-secondary); font: inherit; font-size: 14px; cursor: pointer;
  }
  .topbar__help:hover, .topbar__help:focus-visible { background: var(--surface); color: var(--color-text); }
  /* the editors (Web pages, Documents) keep the sidebar beside them */
  .dash .site.is-full { left: var(--sidebar-w); }
  .app-full .topbar { z-index: var(--z-chrome-full); }
  .crumbs { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; min-width: 0; height: 28px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 28px; }
  .crumbs__item { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--color-text-tertiary); white-space: nowrap; }
  .crumbs__item + .crumbs__item::before { content: '/'; color: var(--color-border-hover, var(--color-text-tertiary)); }
  .crumbs__item:last-child { min-width: 0; color: var(--color-text); font-weight: 600; }
  .crumbs__item:last-child span { overflow: hidden; text-overflow: ellipsis; }
  .crumbs a { display: inline-block; height: 28px; padding: 0 6px; margin: 0 -6px; color: var(--color-text-secondary); text-decoration: none; border-radius: var(--radius-sm); }
  .crumbs a:hover, .crumbs a:focus-visible { color: var(--color-text); background: var(--surface); }
  /* icons only */
  .sidebar-collapsed .sidebar__top { flex-direction: column; padding: 0; gap: 8px; }
  .sidebar-collapsed .sidebar__logo-full { display: none; }
  .sidebar-collapsed .sidebar__logo-mark { display: block; }
  .sidebar-collapsed .sidebar__toggle svg { transform: scaleX(-1); }
  .sidebar-collapsed .sidebar__item { justify-content: center; padding: 0; }
  .sidebar-collapsed .sidebar__item span, .sidebar-collapsed .sidebar__group span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); /* still the item's name */
  }
  .sidebar-collapsed .sidebar__group { height: 1px; margin: 10px 8px; background: var(--color-border); }
  .sidebar-collapsed .sidebar__group svg { display: none; }
  /* full-page sheets (an application, Recent activity) start right of it; the sidebar stays usable above them */
  .dash .drawer.is-full { left: var(--sidebar-w); background: var(--surface); } /* the crumbs sit on the page's own surface */
  .app-full .sidebar { z-index: var(--z-chrome-full); }
  .dash .mini-cal { top: calc(var(--topbar-h) + var(--space-md)); } /* under the top bar */
  /* the full page scrolls below the crumbs, its tabs stick to that edge */
  .dash .drawer.is-full .drawer__panel { top: var(--topbar-h); padding-top: var(--space-md); }
  .dash .drawer.is-full .d-tabs { top: calc(-1 * var(--space-md)); }
}

/* --- Nav: the website's minimal top menu (nav.css); the page name next to the logo, actions as text links --- */
.dash .nav__inner { justify-content: flex-start; }
.dash .nav__logo { flex-shrink: 0; }
.dash__tab {
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-tertiary); white-space: nowrap; text-decoration: none;
  padding: 6px 10px; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast);
}
.dash__tab:hover, .dash__tab:focus-visible { color: var(--color-text); background: var(--color-bg); }
.dash__tab[aria-current="page"] { color: var(--color-text); background: var(--color-bg); }
.dash__main[hidden] { display: none; } /* every top-level page (Dashboard, Applications, Calendar, Videos, Profile, Website …) */
.nav--minimal .dash__nav-links { gap: var(--space-sm); } /* buttons sit closer than the website's text links */

/* Bottom tab bar (phones, incl. the home screen app): the sidebar's sections floating above the bottom edge, in the
   sidebar's colours (.ds-nav-item: flat surface, ink-2 icons, the current one in the action's soft tint with a blue icon), as a pill;
   icons only, the current section's label shows below its icon. Hidden above 640 px;
   below, the top menu keeps the logo, Admin and Settings. --tabbar-h = the room the page, the toast and the list footer
   (.ap-foot) leave for it, without the home indicator's safe area. */
.tabbar { display: none; }
@media (max-width: 640px) {
  .dash { --tabbar-h: 64px; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed; z-index: var(--z-chrome); display: flex; gap: 2px; padding: 4px;
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom)); max-width: 420px; margin: 0 auto;
    background: var(--ds-surface); border: 0; border-radius: var(--ds-r-pill);
    box-shadow: var(--ds-card-edge), var(--ds-shadow-float); /* floating: the one place a nav may cast a shadow */
  }
  .tabbar .tabbar__item {
    flex: 1 1 0; min-width: 0; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0; padding: 0; background: none; border: 0; border-radius: var(--ds-r-pill); font: 500 10px / 1.15 var(--ds-font-ui);
    color: var(--ds-ink-2); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: padding var(--transition-base), background-color var(--ds-t-hover), color var(--ds-t-hover);
  }
  /* the label stays in the accessibility tree, only collapsed */
  .tabbar__item span {
    max-height: 0; overflow: hidden; white-space: nowrap; opacity: 0;
    transition: max-height var(--transition-base), opacity var(--transition-fast), margin var(--transition-base);
  }
  .tabbar .tabbar__item:hover, .tabbar .tabbar__item:focus-visible { background: var(--ds-surface-2); color: var(--ds-ink); }
  .tabbar .tabbar__item[aria-current="page"] { flex: 0 0 auto; padding: 0 14px; background: var(--ds-action-soft); color: var(--ds-ink); font-weight: 600; }
  .tabbar .tabbar__item[aria-current="page"] svg { color: var(--ds-action-text); }
  .tabbar__item[aria-current="page"] span { max-height: 12px; opacity: 1; margin-top: 1px; }
  .tabbar__item svg { width: 20px; height: 20px; flex: none; transition: transform var(--transition-fast); }
  .tabbar__item:active svg { transform: scale(0.88); }
  /* the on-screen keyboard would push the bar up over the field being typed in */
  .dash:has(input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus) .tabbar { display: none; }
  .dash .toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); }
  .dash .ap-foot { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: 8px; }
}
/* Import menu: file or URL, each with a one-line explanation */
.import-item { display: flex; align-items: flex-start; gap: 10px; }
.import-item .btn__icon { margin-top: 2px; flex: none; color: var(--color-text-secondary); }
.import-item span { display: flex; flex-direction: column; font-weight: 500; }
.import-item small { font-size: 12px; font-weight: 400; color: var(--color-text-tertiary); }
.btn__icon { flex-shrink: 0; }
/* Settings and Log out: icon-only buttons on the right of the top menu */
.dash__icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; color: var(--color-text-secondary); background: none; border: 1px solid transparent; cursor: pointer;
}
.dash__icon-btn:hover, .dash__icon-btn[aria-expanded="true"] { color: var(--color-text); border-color: var(--color-border); background: var(--surface); }
.dash__icon-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Small menus that open under a button (settings, more options); see dashboard/core/menus.js setupPopover() */
.menu-wrap { position: relative; }
.popover {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-popover); min-width: 240px; padding: 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.popover[hidden] { display: none; }
.popover--end { left: auto; right: 0; }

/* View options menus (Notion's database view settings): one row per setting, icon + name left, the value muted on
   the right; the row's <select> covers it, so a click anywhere opens the select menu (openSelectMenu) */
.vo { padding: 6px; gap: 0; align-items: stretch; }
.vo__title { padding: 6px 8px 8px; font-size: 14px; font-weight: 600; color: var(--color-text); }
.vo__head { margin-top: 6px; padding: 8px 8px 4px; border-top: 1px solid var(--color-border); font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); }
.vo__group { display: flex; flex-direction: column; }
.vo-row {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px;
  border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text); cursor: pointer;
}
.vo-row:hover { background: color-mix(in srgb, var(--color-border) 55%, transparent); }
.vo-row:has(select:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.vo-row__icon { flex-shrink: 0; color: var(--color-text-secondary); }
.vo-row__label { white-space: nowrap; pointer-events: none; }
.vo-row__label[data-tip] { pointer-events: auto; position: relative; z-index: 1; }
.vo-row select {
  position: absolute; inset: 0; width: 100%; padding: 0 26px 0 50%; appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; outline: none; font: inherit; font-size: 13px; color: var(--color-text-tertiary);
  text-align: right; text-align-last: right; text-overflow: ellipsis; cursor: pointer;
}
.vo-row select.is-set { color: var(--color-text); font-weight: 500; }
.vo-row::after { /* the › after the value */
  content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; pointer-events: none;
  border-right: 1.5px solid var(--color-text-tertiary); border-bottom: 1.5px solid var(--color-text-tertiary); transform: rotate(-45deg);
}
.vo-row--labels { flex-wrap: wrap; padding: 6px 8px; cursor: default; }
.vo-row--labels:hover { background: none; }
.vo-row--labels::after { content: none; }
.vo-row--labels .label-toggles { flex-basis: 100%; padding-left: 24px; gap: 4px; }
.vo__reset { margin-top: 6px; padding: 8px; border-top: 1px solid var(--color-border); border-radius: 0; text-align: left; font-size: 13px; color: var(--color-text-secondary); }
.vo__reset:hover { color: var(--color-text); }
.vo__reset[hidden] { display: none; }

.dash__main {
  padding-top: 104px;
  padding-bottom: var(--space-4xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* --- Dashboard top row: the Applications tab's .ap-bar with the date range as tabs (.views / .view-tab) --- */
.dash-bar .views { min-width: 0; }
/* Narrow row: 7 · 30 · 90 · All, so every range stays in view next to the buttons */
@container apbar (max-width: 420px) { .range__long { display: none; } }

/* Switchers: the picked option is the action color (app-tokens.css: --ds-action fills a selected segment), on a
   blue-tinted track; same look as app-components.css .ds-seg. */
.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--ds-action-soft);
  border-radius: var(--radius-pill);
}
.segmented button {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--segmented-text);
  transition: background-color var(--ds-t-hover), color var(--ds-t-hover);
}
.segmented button:not([aria-pressed="true"]):not(:disabled):hover { background: color-mix(in srgb, var(--ds-action) 12%, transparent); }
.segmented button[aria-pressed="true"] {
  background: var(--ds-action);
  color: var(--ds-on-action);
  font-weight: 600;
  box-shadow: 0 1px 3px rgb(29 71 230 / 0.3);
}

/* --- KPI tiles --- */
.kpis { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-md); }
/* Sized by the stats column (the calendar takes the rest of the row), not the window: all four in one line,
   tighter when the column is narrow; only very narrow (phones) puts the hero tile on its own line */
@container stats (max-width: 760px) {
  .kpis { gap: var(--space-sm); }
  .kpis .kpi { padding: var(--space-md); min-height: 0; }
  .kpis .kpi__label { font-size: 12px; }
  .kpis .kpi__value { font-size: 28px; }
  .kpis .kpi--hero .kpi__value { font-size: 44px; }
  .kpis .kpi__note { font-size: 11px; }
  .kpis .kpi--btn .kpi__label { flex-wrap: wrap; gap: 0 var(--space-sm); }
}
@container stats (max-width: 440px) { .kpis { grid-template-columns: repeat(3, 1fr); } .kpi--hero { grid-column: 1 / -1; } }

/* Tiles: .ds-tile (app-components.css); the views tile is the screen's one loud field (.ds-tile--live). */
.kpi { gap: var(--space-sm); }
.kpi__label { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); } /* also the pipeline card's heading */
.kpi__note { font-size: 12px; color: var(--color-text-tertiary); }
.ds-tile--live .kpi__label, .ds-tile--live .kpi__note { color: inherit; }
/* Pipeline: a key-figure card holding a list (one line each: label left, value + short note right), two columns where there is room */
.pipeline {
  padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: 4px;
}
.pipeline__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.pipeline__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: var(--space-xl); }
.pipeline__item { border-bottom: 1px solid var(--color-border); min-width: 0; }
.pipeline__item:nth-child(4), .pipeline__item:last-child { border-bottom: 0; } /* the last of each column: sent, opened + durations | meeting counts */
/* Each row is a button: opens the applications behind the figure in a side sheet */
.pipeline__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); width: calc(100% + 16px);
  margin: 0 -8px; padding: 6px 8px; font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius-sm); transition: background var(--transition-fast);
}
.pipeline__row:hover { background: color-mix(in srgb, var(--color-border) 45%, transparent); }
.pipeline__row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.pipeline__label { font-size: 13px; color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline__value { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pipeline__value small { margin-left: 6px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--color-text-tertiary); }
@container stats (max-width: 560px) {
  .pipeline__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .pipeline__item:nth-child(4) { border-bottom: 1px solid var(--color-border); }
}

/* The hero tile opens the Recent activity sheet */
.kpi--btn .kpi__label { display: flex; justify-content: space-between; gap: var(--space-sm); }
.kpi__more { font-size: 12px; font-weight: 600; white-space: nowrap; }

/* --- Panels --- */
/* Charts row: page views per day, views by application, the small calendar */
/* Stats: key figures + charts on the left, the small calendar floating beside them (no card, sticky) */
.stats { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-xl); align-items: start; }
.stats__main { container: stats / inline-size; display: flex; flex-direction: column; gap: var(--space-xl); min-width: 0; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr; } }
.charts { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-md); }
@container stats (max-width: 600px) { .charts { grid-template-columns: 1fr; } }

.panel {
  padding: var(--space-lg);
  min-width: 0;
}
.panel__head { margin-bottom: var(--space-md); }
.panel__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.panel__table { margin-top: var(--space-md); font-size: 13px; }
.panel__table summary { cursor: pointer; color: var(--color-text-secondary); }
.panel__table table { margin-top: var(--space-sm); border-collapse: collapse; width: 100%; }
.panel__table td, .panel__table th { padding: 4px 8px; border-bottom: 1px solid var(--color-border); text-align: left; font-variant-numeric: tabular-nums; }
.panel__table div { max-height: 240px; overflow: auto; }

.empty { color: var(--color-text-tertiary); font-size: 14px; padding: var(--space-xl) 0; text-align: center; }

/* --- Column chart (SVG) --- */
.chart { position: relative; height: 240px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .axis text { fill: var(--color-text-tertiary); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--chart-bar); }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover + .bar, .chart .hit:focus + .bar { opacity: 0.75; }
.chart .hit:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.chart .peak { fill: var(--color-text-secondary); font-size: 11px; font-weight: 600; }

/* --- Horizontal bars (HTML) --- */
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: var(--space-sm); align-items: center; font-size: 13px; cursor: pointer; border-radius: var(--radius-sm); }
.hbar:hover .hbar__fill, .hbar:focus-visible .hbar__fill { opacity: 0.75; }
.hbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.hbar__label small { color: var(--color-text-tertiary); }
.hbar__track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hbar__fill { height: 16px; background: var(--chart-bar); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbar__value { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); font-weight: 600; }

/* --- Table --- */
.table-wrap { position: relative; overflow-x: auto; margin: 0 calc(-1 * var(--space-lg)); }
.apps { width: 100%; border-collapse: collapse; font-size: 14px; }
.apps th {
  text-align: left; font-size: 13px; font-weight: 600; color: var(--color-text-tertiary); padding: 8px var(--space-sm); border-bottom: 1px solid var(--color-border);
}
.apps th, .apps td { white-space: nowrap; }
.apps td:first-child { white-space: normal; min-width: 12rem; }
.apps td { padding: 12px var(--space-sm); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.apps th:first-child, .apps td:first-child { padding-left: var(--space-lg); }
.apps th:last-child, .apps td:last-child { padding-right: var(--space-lg); }
.apps tbody tr { cursor: pointer; transition: background var(--transition-fast); }
.apps tbody tr:hover { background: var(--color-bg); }
.apps tr.is-archived { opacity: 0.55; }
.apps .num { text-align: right; font-variant-numeric: tabular-nums; }
.apps__company { font-weight: 600; }
.apps__role { color: var(--color-text-secondary); font-size: 13px; }
.apps__meta { color: var(--color-text-tertiary); font-size: 12px; margin-top: 2px; }
.apps td.apps__more { width: 1%; text-align: right; }
.row-more { font-size: 18px; line-height: 1; padding: 4px 8px 8px; border-radius: var(--radius-sm); color: var(--color-text-secondary); background: none; border: 0; cursor: pointer; }
.row-more:hover, .row-more[aria-expanded="true"] { background: var(--color-border); color: var(--color-text); }
.row-more:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* Table / Board switch in the Applications panel head */
.segmented--icons button { display: grid; place-items: center; padding: 5px 12px; }

/* --- Board: one column per status, cards dragged between them --- */
.board {
  display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: var(--space-sm);
  overflow-x: auto; margin: 0 calc(-1 * var(--space-lg)); padding: 0 var(--space-lg) 4px;
}
.board[hidden] { display: none; }
.board__col {
  display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; padding: 10px;
  background: var(--color-bg); border: 1px solid transparent; border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.board__col.is-over { border-color: var(--chart-bar); background: var(--color-accent-light); }
.board__head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.board__title { font-size: 13px; font-weight: 600; }
.board__count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.board__cards { display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; min-height: 64px; }
.board__hint {
  display: grid; place-items: center; min-height: 64px; padding: var(--space-md) var(--space-sm); text-align: center;
  font-size: 12px; color: var(--color-text-tertiary); border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
}
.card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; font-size: 14px; cursor: grab;
  transition: box-shadow var(--transition-fast), opacity var(--transition-fast);
}
.card:hover { box-shadow: var(--ds-card-edge-hover); }
.card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.card.is-dragging { opacity: 0.4; }
.card.is-archived { opacity: 0.6; }
.card__top { display: flex; align-items: flex-start; gap: 4px; }
.card__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.card__top .row-more { margin: -4px -6px 0 0; }
.card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card__figures { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.card__last { margin-left: auto; }

.icon-btn {
  padding: 6px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;
  color: var(--color-text-secondary); border: 1px solid var(--color-border); background: var(--surface);
}
.icon-btn:hover { color: var(--color-text); border-color: var(--color-border-hover); }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); color: var(--color-text-secondary); white-space: nowrap; }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--interview, .status--offer { background: var(--color-accent-light); border-color: var(--color-accent); color: var(--color-text); }
.status--rejected, .status--withdrawn { text-decoration: line-through; }
.status--btn { cursor: pointer; font-family: inherit; background: var(--surface); }
.status--btn.status--interview, .status--btn.status--offer { background: var(--color-accent-light); }
.status--btn:hover, .status--btn[aria-expanded="true"] { border-color: var(--color-border-hover); color: var(--color-text); }
.status--btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.status__caret { font-size: 9px; opacity: 0.6; margin-left: -2px; text-decoration: none; display: inline-block; }

/* The floating menu: status and page chips, ⋯ buttons, every <select> and date field (dashboard/core/menus.js showMenu) */
.menu {
  position: fixed; z-index: var(--z-menu); min-width: 200px; padding: 6px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  max-height: min(420px, calc(100dvh - 16px)); overflow-y: auto; overscroll-behavior: contain; /* long lists (a select's menu, e.g. every application) scroll */
}
.menu__group { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); padding: 8px 10px 4px; border-top: 1px solid var(--color-border); margin-top: 4px; }
.menu__group:first-child { border-top: 0; margin-top: 0; }
.menu__item { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 14px; text-align: left; color: var(--color-text); }
.menu__item:hover, .menu__item:focus-visible { background: var(--color-bg); }
.menu__item[aria-checked="true"] { font-weight: 600; }
.menu__item[aria-checked="true"]::after { content: '✓'; margin-left: auto; color: var(--color-text-secondary); }
.menu__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--color-text-tertiary); flex-shrink: 0; }
.menu__dot.status--applied { background: var(--color-text-secondary); }
.menu__dot.status--interview, .menu__dot.status--offer { background: var(--chart-bar); }
.menu__dot.status--rejected, .menu__dot.status--withdrawn { background: transparent; border: 1.5px solid var(--color-text-tertiary); }

/* Page state: .ds-page (app-components.css): live = a solid sun pill, draft / off quiet. The chip button opens the menu. */
.page-state--btn { border: 0; cursor: pointer; flex: none; transition: filter var(--transition-fast); }
.page-state--btn:hover, .page-state--btn[aria-expanded="true"] { filter: brightness(0.95); }
.page-state--btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.menu__item.is-danger { color: var(--danger); }
/* Date picker (dashboard/core/menus.js openDatePicker): a month in the menu's card, like the small calendar */
.menu--date { padding: 10px; }
.date-pick { display: flex; flex-direction: column; gap: 6px; width: 252px; }
.date-pick__head { display: flex; align-items: center; gap: 2px; padding: 0 0 4px 4px; }
.date-pick__month { flex: 1; font-size: 14px; font-weight: 600; color: var(--color-text); }
.date-pick__nav { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--color-text-secondary); }
.date-pick__nav:hover { background: color-mix(in srgb, var(--color-border) 70%, transparent); color: var(--color-text); }
.date-pick__nav:focus-visible, .date-pick__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.date-pick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.date-pick__wd { padding: 2px 0 4px; font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); }
.date-pick__day {
  display: grid; place-items: center; height: 32px; border-radius: var(--radius-sm); font-size: 13px;
  font-variant-numeric: tabular-nums; color: var(--color-text);
}
.date-pick__day:hover { background: color-mix(in srgb, var(--color-border) 70%, transparent); }
.date-pick__day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.date-pick__day.is-other { color: var(--color-text-tertiary); }
.date-pick__day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--chart-bar); }
.date-pick__day[aria-pressed="true"] { background: var(--color-text); color: var(--surface); font-weight: 600; box-shadow: none; }
.date-pick__foot { display: flex; justify-content: space-between; padding: 6px 2px 0; border-top: 1px solid var(--color-border); }
.date-pick__link { padding: 4px 6px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
.date-pick__link:hover:not(:disabled) { background: color-mix(in srgb, var(--color-border) 70%, transparent); color: var(--color-text); }
.date-pick__link:disabled { opacity: .4; cursor: default; }
/* date + time: the times as a scrolling column right of the month */
.date-pick__both { display: flex; gap: 10px; }
.date-pick__times {
  display: flex; flex-direction: column; gap: 1px; width: 76px; height: 272px; overflow-y: auto; overscroll-behavior: contain;
  padding-left: 10px; border-left: 1px solid var(--color-border); scrollbar-width: thin;
}
.date-pick__time { flex-shrink: 0; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13px; font-variant-numeric: tabular-nums; text-align: left; color: var(--color-text); }
.date-pick__time:hover { background: color-mix(in srgb, var(--color-border) 70%, transparent); }
.date-pick__time:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.date-pick__time[aria-selected="true"] { background: var(--color-text); color: var(--surface); font-weight: 600; }
.menu__item > .d-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-secondary); }
.menu__item.is-danger > .d-icon { color: inherit; }
.menu__item:disabled > .d-icon { color: inherit; }
.menu__item:has(.menu__text) > .d-icon { align-self: flex-start; margin-top: 2px; }
.menu__item:disabled { cursor: default; color: var(--color-text-tertiary); }
.menu__item:disabled:hover { background: none; }
.menu__sep { height: 1px; margin: 4px 6px; background: var(--color-border); }
.menu__text { display: flex; flex-direction: column; gap: 1px; }
.menu__text small { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }
.menu__dot.page-dot--live { background: var(--ds-live); }
.menu__dot.page-dot--draft { background: transparent; border: 1.5px dashed var(--color-text-tertiary); }
.menu__dot.page-dot--off { background: transparent; border: 1.5px solid var(--color-text-tertiary); }

.seen { display: inline-flex; align-items: center; gap: 6px; }
.seen__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chart-bar); flex-shrink: 0; }
.muted { color: var(--color-text-tertiary); }

/* --- Activity feed --- */
.feed { display: flex; flex-direction: column; }
.feed li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-md); padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.feed li:last-child { border-bottom: 0; }
.feed time { color: var(--color-text-tertiary); font-size: 13px; font-variant-numeric: tabular-nums; }
.feed b { font-weight: 600; }
.feed li.feed__more, .visits__more { display: flex; justify-content: center; padding: var(--space-md) 0; }
@media (max-width: 600px) { .feed li { grid-template-columns: 1fr; gap: 2px; } }

/* --- Drawer --- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); pointer-events: none; visibility: hidden; transition: visibility 0s linear 0.5s; /* closed = out of the tab order, after the slide-out */ }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity var(--transition-base); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100%);
  background: var(--surface); box-shadow: var(--shadow-lg); overflow-y: auto;
  padding: var(--space-md) var(--space-xl) var(--space-2xl); transform: translateX(100%); transition: transform var(--transition-slow);
}
.drawer__bar { display: flex; align-items: center; gap: var(--space-xs); margin: 0 calc(-1 * var(--space-xs)) var(--space-md) 0; }
/* Full page / Back and ⋯: no outline, a soft background on hover (like the close button) */
.drawer__bar .icon-btn { border-color: transparent; background: none; }
.drawer__bar .icon-btn:hover, .drawer__more[aria-expanded="true"] { background: var(--color-bg); color: var(--color-text); }
.drawer__more { font-size: 15px; line-height: 1; letter-spacing: 1px; }
.drawer.open { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.drawer.open .drawer__backdrop { opacity: 1; }
.drawer.open .drawer__panel { transform: none; }
.drawer__close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--color-text-secondary); }
.drawer__close:hover { background: var(--color-bg); color: var(--color-text); }

/* Full page (⤢): the drawer covers the screen; details + visits left, CV / letter preview right */
.drawer__back { display: inline-flex; align-items: center; gap: 6px; }
.drawer__back[hidden], .drawer.is-full .drawer__close, .drawer.is-full .drawer__expand { display: none; }
.drawer.is-full .drawer__backdrop { display: none; }
.drawer.is-full .drawer__panel {
  width: 100%; box-shadow: none; transition: none;
  /* same side padding as the top menu (nav.css: .nav__inner, max-width centered + --space-xl) */
  padding: var(--space-xl) calc(max(0px, (100% - var(--max-width)) / 2) + var(--space-xl)) var(--space-4xl);
  padding-top: calc(60px + var(--space-lg)); /* below the top menu (next rule): the scrolled one is 60 px high */
  display: block;
}

/* The top menu stays visible above the full page (always as the blurred bar); the page starts below it */
.app-full .nav { z-index: var(--z-chrome-full); }

.d-link { display: flex; gap: 8px; align-items: center; margin: var(--space-lg) 0; padding: 8px; background: var(--color-bg); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12px; }
.d-link > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Landing page tab: intro video row (upload / record / pick / remove) */
.d-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-xl); }
.d-stats div { background: var(--color-bg); border-radius: var(--radius-md); padding: 10px 12px; }
.d-stats b { display: block; font-size: 20px; font-weight: 600; }
.d-stats span { font-size: 12px; color: var(--color-text-secondary); }
/* views (and opens without statistics): opens the visits sheet */
.d-stats .d-stats__btn {
  font: inherit; color: inherit; text-align: left; cursor: pointer; background: var(--color-bg); border: 1px solid transparent;
  border-radius: var(--radius-md); padding: 10px 12px; transition: border-color var(--transition-fast);
}
.d-stats .d-stats__btn:hover { border-color: var(--chart-bar); }
.d-stats .d-stats__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Next upcoming meeting: a wider tile at the end of the stats row, white with the accent outline, calendar icon top left */
.d-stats .d-next {
  grid-column: span 2; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 8px 12px; text-align: left;
  font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--color-accent); border-radius: var(--radius-md); cursor: pointer;
  transition: border-color var(--transition-fast);
}
.d-stats .d-next:hover { border-color: var(--chart-bar); }
.d-stats .d-next:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.d-stats .d-next__icon {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text-secondary);
}
.d-stats .d-next__icon .d-icon { width: 18px; height: 18px; }
.d-stats .d-next__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.d-stats .d-next__text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-stats .d-next__label { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.d-stats .d-next__title { font-size: 14px; font-weight: 600; color: var(--color-text); }
.d-stats .d-next__when { font-size: 12px; color: var(--color-text-secondary); }
@media (max-width: 640px) { .d-stats .d-next { grid-column: 1 / -1; } }
.d-section { font-size: 13px; font-weight: 600; color: var(--color-text-tertiary); margin: var(--space-xl) 0 var(--space-sm); }
.intro-card { border: 1px solid var(--color-accent); background: var(--color-accent-light); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: var(--space-sm); font-size: 14px; }
.intro-card .visit__when { display: inline-flex; align-items: center; gap: 8px; }
.intro-card .tag { font-size: 11px; }
.intro-card__email { display: inline-block; margin-top: 4px; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.intro-card__msg { margin-top: 6px; white-space: pre-wrap; color: var(--color-text); }
.apps__hello { font-size: 13px; }

.visit { padding: 12px 14px; margin-bottom: var(--space-sm); font-size: 14px; }
.visit__top { display: flex; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.visit__when { font-weight: 600; }
.visit__meta { color: var(--color-text-secondary); font-size: 13px; }
.visit__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.visit__chips .tag { font-size: 11px; }

/* --- Import from URL: Notion-style quick-add bar (top of the screen, borderless input, quiet chrome) --- */
.quick-add {
  width: min(560px, calc(100% - 32px)); margin: 14vh auto auto; border-radius: var(--radius-md);
  border: 0; padding: 0; outline: none; background: var(--surface); color: var(--color-text);
  box-shadow: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.1), 0 9px 24px rgba(15, 15, 15, 0.2);
  overflow: hidden;
}
.quick-add::backdrop { background: rgba(15, 15, 15, 0.4); }
.quick-add[open] { animation: quick-add-in 140ms ease-out; }
@keyframes quick-add-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) { .quick-add[open] { animation: none; } }
.quick-add__bar { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--color-border); }
.quick-add__icon { color: var(--color-text-tertiary); flex-shrink: 0; }
.quick-add__bar:focus-within { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.quick-add__bar input {
  flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 17px; color: var(--color-text);
}
.quick-add__bar input::placeholder { color: var(--color-text-tertiary); }
.quick-add__body { padding: 12px 16px 4px; }
.quick-add__label { font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); margin-bottom: 4px; }
.quick-add__hint { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }
.quick-add__error { margin-top: 6px; }
/* ask.js: confirm / prompt in our own dialog */
.ask-dialog .quick-add__body { padding-bottom: 12px; }
.ask-dialog__text { color: var(--color-text); white-space: pre-line; }
.ask-dialog__text + .ask-dialog__text { margin-top: 8px; }
.quick-add__error:empty { display: none; }
.quick-add__foot {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px 10px 16px; margin-top: 8px;
  border-top: 1px solid var(--color-border); background: var(--color-bg);
}
.quick-add__keys { font-size: 12px; color: var(--color-text-tertiary); }
.quick-add__foot .quick-add__btn:first-of-type { margin-left: auto; }
.quick-add__keys kbd {
  font: inherit; font-size: 11px; padding: 1px 5px; margin: 0 2px 0 0; border-radius: 4px;
  border: 1px solid var(--color-border); background: var(--surface); color: var(--color-text-secondary);
}
.quick-add__keys kbd:not(:first-child) { margin-left: 8px; }
.quick-add__btn {
  font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--color-text-secondary);
  transition: background var(--transition-fast);
}
.quick-add__btn:hover, .quick-add__btn:focus-visible { background: var(--color-border); color: var(--color-text); }
.quick-add__btn:disabled { opacity: 0.5; cursor: progress; }
@media (max-width: 640px) { .quick-add__keys { display: none; } .quick-add { margin-top: 10vh; } }

/* --- Create / check an import: Notion-style page — big title, property rows (icon + label | borderless value), job description --- */
.page-sheet { width: min(820px, calc(100% - 32px)); border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.1), 0 9px 24px rgba(15, 15, 15, 0.2); outline: none; }
.page-sheet::backdrop { background: rgba(15, 15, 15, 0.4); }
/* The same inset on every side: 24px (16px on phones), also below the Save bar. */
.page-sheet .page-form { padding: 24px 24px 0; }
.page-form__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: -6px -11px 18px 0; } /* the × glyph on the inset line */
.page-form__crumb { font-size: 13px; color: var(--color-text-tertiary); }
.page-form__close { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 22px; line-height: 1; color: var(--color-text-secondary); }
.page-form__close:hover, .page-form__close:focus-visible { background: var(--color-bg); color: var(--color-text); }
.page-form input, .page-form select, .page-form textarea { font-family: inherit; color: var(--color-text); }
.page-form__title, .page-form__subtitle {
  display: block; width: 100%; border: 0; outline: 0; background: transparent; padding: 0;
}
.page-form__title { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.page-form__subtitle { font-size: 18px; color: var(--color-text-secondary) !important; margin: 6px 0 22px; }
.page-form__title:focus-visible, .page-form__subtitle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 2px; }
.page-form__title::placeholder, .page-form__subtitle::placeholder { color: var(--color-text-tertiary); opacity: 0.6; }

/* .props / .prop / .prop__label: with the Information tab's below */
.prop__icon { color: var(--color-text-tertiary); flex-shrink: 0; }
.prop > input, .prop > select {
  width: 100%; min-width: 0; border: 0; border-radius: var(--radius-sm); background: transparent;
  font-size: 14px; padding: 6px 8px; transition: background var(--transition-fast);
}
.prop > select { appearance: none; cursor: pointer; }
.prop > select:has(option[value=""]:checked) { color: var(--color-text-tertiary); }
.prop > input::placeholder { color: var(--color-text-tertiary); }
.prop:hover > input, .prop:hover > select { background: var(--color-bg); }
.prop > input:focus, .prop > select:focus {
  outline: 2px solid var(--focus-ring); outline-offset: -2px; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border-hover, var(--color-border));
}

.page-form__chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 5px 10px;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border); color: var(--color-text); background: transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--transition-fast);
}
.page-form__chip:hover, .page-form__chip:focus-visible { background: var(--color-bg); }


.page-sheet .page-form__actions {
  position: sticky; bottom: 0; z-index: 1; background: var(--surface); margin: 18px -24px 0; padding: 12px 24px 24px;
  border-top: 1px solid var(--color-border); flex-wrap: wrap;
}
/* The sheet's error sits in its sticky Save bar: above the buttons, never scrolled out of sight */
.page-form__actions .form-error { flex-basis: 100%; order: -1; margin: 0; }
.page-form__actions .form-error:empty { display: none; }
.page-form__btn {
  display: inline-block; text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--color-text-secondary);
  transition: background var(--transition-fast);
}
.page-form__btn:hover, .page-form__btn:focus-visible { background: var(--color-bg); color: var(--color-text); }
.page-form__btn--danger { color: var(--danger); }
.page-form__btn--danger:hover, .page-form__btn--danger:focus-visible { color: var(--danger); }
.page-form__btn[hidden], .page-form__chip[hidden], #nav-admin[hidden] { display: none; } /* these set their own display */
#nav-admin:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; }

/* --- Video gallery: grid of video cards (preview, name, size · date, pages using it, use / delete) --- */
.gallery { position: relative; color: var(--color-text); }
.gallery--dialog {
  width: min(980px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; outline: none;
  border-radius: var(--radius-md); background: var(--surface); overflow: auto;
  box-shadow: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.1), 0 9px 24px rgba(15, 15, 15, 0.2);
}
.gallery--dialog::backdrop { background: rgba(15, 15, 15, 0.4); }
.gallery__head { display: flex; align-items: center; gap: 10px; }
.gallery--dialog .gallery__head {
  position: sticky; top: 0; z-index: 1; padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--color-border);
}
.gallery__title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
/* Videos tab: the same gallery as a page */
.gallery--page { min-height: 60vh; }
.gallery--page .gallery__head { padding-bottom: 4px; }
.gallery--page .gallery__count { align-self: flex-end; padding-bottom: 6px; }
.gallery--page .gallery__hint, .gallery--page .gallery__grid { padding-left: 0; padding-right: 0; }
.gallery--page .gallery__drop { margin-left: 0; margin-right: 0; padding: 28px; }
.gallery--page .gallery__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding-top: 22px; }
.gallery--page .gallery__overlay { position: fixed; inset: 12px; }
.gallery__count { font-size: 13px; color: var(--color-text-tertiary); margin-right: auto; }
.gallery__close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--color-text-secondary); }
.gallery__close:hover, .gallery__close:focus-visible { background: var(--color-bg); color: var(--color-text); }
.gallery__hint { font-size: 13px; color: var(--color-text-secondary); padding: 14px 20px 0; }
.gallery__drop {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 20px 0; padding: 18px;
  border: 1.5px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-tertiary);
  font-size: 13px; text-align: center; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.gallery__drop b { color: var(--color-text); font-weight: 600; }
.gallery__drop:hover, .gallery__drop:focus-within { background: var(--color-bg); border-color: var(--color-border-hover, var(--color-text-tertiary)); color: var(--color-text-secondary); }
.gallery.is-uploading .gallery__drop { cursor: progress; background: var(--color-bg); color: var(--color-text-secondary); }
.gallery.is-uploading .gallery__record { opacity: 0.5; pointer-events: none; }
/* while files are dragged over the gallery */
.gallery__overlay {
  position: absolute; inset: 8px; z-index: 2; display: none; place-items: center; pointer-events: none;
  border: 2px dashed var(--color-text); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-size: 16px; font-weight: 600; color: var(--color-text);
}
.gallery.is-dragging .gallery__overlay { display: grid; }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 14px 20px 20px; }
.gallery__empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--color-text-tertiary); font-size: 14px; }

.vcard { display: flex; flex-direction: column; overflow: hidden; }
.vcard.is-current { box-shadow: 0 0 0 2px var(--ds-action); }
.vcard__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; }
.vcard__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.vcard__name { font-family: var(--font-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard__meta { font-size: 12px; color: var(--color-text-tertiary); margin-top: -4px; }
.vcard__used { display: flex; flex-wrap: wrap; gap: 4px; min-height: 24px; align-items: center; }
.vcard__page {
  font-size: 12px; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background var(--transition-fast);
}
.vcard__page:hover, .vcard__page:focus-visible { background: var(--color-border); }
.vcard__page.is-archived { color: var(--color-text-tertiary); text-decoration: line-through; }
.vcard__unused { font-size: 12px; color: var(--color-text-tertiary); }
.vcard__captions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.vcard__cap-state { font-size: 12px; color: var(--color-text-tertiary); margin-right: auto; }
.vcard__actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.vcard__current { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
@media (max-width: 640px) {
  .gallery--dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .gallery--dialog .gallery__head { padding: 12px 16px; }
  .gallery--dialog .gallery__hint { padding: 12px 16px 0; }
  .gallery--dialog .gallery__drop { margin: 12px 16px 0; }
  .gallery--dialog .gallery__grid { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .gallery__grid, .gallery--page .gallery__grid { grid-template-columns: 1fr; }
  .gallery--page .gallery__drop { padding: 18px; }
}

/* --- Modal form --- */
.modal {
  border: 0; border-radius: var(--radius-xl); padding: 0; width: min(760px, calc(100% - 32px));
  max-height: calc(100vh - 48px); background: var(--surface); color: var(--color-text); box-shadow: var(--shadow-lg);
  margin: auto;
}
.modal::backdrop { background: rgba(0, 0, 0, 0.35); }
.modal__form { padding: var(--space-xl); }
.modal__title { font-size: 22px; margin-bottom: var(--space-lg); }
.modal__actions { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); align-items: center; }
.spacer { flex: 1; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; min-width: 0; }
.field[hidden], .profile__pwform[hidden] { display: none; } /* the hidden attribute must win over display: flex (e.g. the login's password field) */
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: 13px; font-weight: 600; }
.field__label small { font-weight: 400; color: var(--color-text-tertiary); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  font: inherit; font-size: 14px; color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 9px 12px; width: 100%;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: transparent; }



.form-error, .login__error { color: var(--danger); font-size: 13px; min-height: 1em; margin-top: var(--space-sm); }

/* --- Tooltip & toast --- */
.tooltip {
  position: fixed; z-index: var(--z-menu); background: var(--color-bg-dark); color: #F5F5F5;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; box-shadow: var(--shadow-md); line-height: 1.4;
}
.tooltip b { display: block; font-size: 15px; }
.tooltip span { opacity: 0.75; }
.tooltip .tooltip__text { opacity: 1; max-width: 260px; font-size: 13px; }
.tooltip--wrap { max-width: 260px; white-space: normal; line-height: normal; }
/* Explanations: the label itself shows the tooltip on hover (dashboard/core/tips.js showTipFor) */
[data-tip]:not(button):not(a):not(.site-style) { cursor: help; }
.settings__hint:empty, .gallery__hint:empty, .recorder__hint:empty, .profile__home:empty { display: none; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; z-index: var(--z-menu);
  background: var(--color-bg-dark); color: #F5F5F5; padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: 13px; transition: opacity var(--transition-base), transform var(--transition-base); pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Login --- */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-md); }
.login__card {
  width: min(360px, 100%);
  padding: var(--space-2xl) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md);
}
.login__logo { height: 36px; width: auto; align-self: flex-start; }
.login__title { font-size: 20px; }
.login__step { display: flex; flex-direction: column; gap: var(--space-md); }
.login__hint { font-size: 14px; color: var(--color-text-secondary); margin: 0; }
.login__hint:empty { display: none; }
.login__link {
  align-self: center; background: none; border: 0; padding: 4px; font: inherit; font-size: 13px;
  color: var(--color-text-secondary); text-decoration: underline; cursor: pointer;
}
.login__link:hover, .login__link:focus-visible { color: var(--color-text); }
.login__step[hidden], .login__link[hidden], .login__hint[hidden], .login__check[hidden] { display: none; }
.login__error:empty { display: none; } /* an empty message takes no row in the card's gap */
/* the opt-in checkbox of the sign-up steps (signup-steps.js) */
.login__check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-text-secondary); cursor: pointer; }
.login__check input { margin: 2px 0 0; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-text); }
.login__check a, .login__hint a { color: var(--color-text); text-decoration: underline; } /* not by color alone (WCAG 1.4.1) */

@media (max-width: 640px) {
  .dash__tab { padding: 6px 8px; }
  .dash__main { padding-top: 96px; }
  .dash .container { padding-left: 16px; padding-right: 16px; }
  .kpi--hero .kpi__value { font-size: 44px; }

}

/* --- Video recorder --- */
/* --rec-ratio = the chosen format (width / height, set on the dialog); the live picture is cropped to it like the recording */
.recorder { width: min(720px, calc(100vw - 32px)); --rec-ratio: 16 / 9; }
.recorder__stage {
  position: relative; aspect-ratio: var(--rec-ratio); width: min(100%, calc(56vh * var(--rec-ratio)));
  margin-inline: auto; background: #111; border-radius: var(--radius-md); overflow: hidden;
}
.recorder__stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.recorder__stage .recorder__live { object-fit: cover; }
.recorder__live { transform: scaleX(-1); } /* mirrored like a mirror; the recording itself is not */
.recorder__stage video[hidden] { display: none; }
.recorder__badge {
  position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.6); color: #FFF; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.recorder__badge::before { content: '● '; color: #FF5A4F; }
.recorder__badge--paused::before { content: '❚❚ '; color: #BDBDBD; }
.recorder__count {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 96px; font-weight: 700; color: #FFF; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.recorder [hidden] { display: none; } /* .btn and the overlays set their own display */
.recorder__devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
/* Teleprompter (when the application has a video script): the dialog fills the window, the script scrolls in big
   type at the very top, right under the webcam, so reading it looks like talking to the camera. The preview sits small below. */
.recorder--prompter { width: 100vw; max-width: none; height: 100vh; max-height: none; border-radius: 0; margin: 0; }
.recorder--prompter .modal__form { height: 100%; display: flex; flex-direction: column; padding: 0 var(--space-xl) var(--space-lg); }
.recorder--prompter .modal__title { display: none; }
.recorder--prompter .recorder__stage { width: auto; height: 26vh; min-height: 140px; align-self: center; margin-top: var(--space-md); flex: none; }
.recorder--prompter .recorder__devices { width: min(720px, 100%); align-self: center; }
.recorder--prompter .recorder__hint, .recorder--prompter .form-error { text-align: center; }
.recorder--prompter .modal__actions { width: min(720px, 100%); align-self: center; }
/* Full screen = the dialog's content (a <dialog> itself can't go full screen); the prompter's own background */
.recorder .modal__form:fullscreen { width: 100vw; height: 100vh; background: var(--surface); color: var(--color-text); overflow: auto; }
.prompter {
  --prompter-size: 44px; --prompter-line: calc(var(--prompter-size) * 0.6); /* reading line: first line, at the top edge */
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  margin: 0 calc(-1 * var(--space-xl)); background: #0E0E0E; color: #F4F4F4;
}
.prompter__scroll {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; outline: none;
  /* text that was read fades out above the reading line, the next lines fade in below */
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--prompter-line), #000 70%, transparent 100%);
}
.prompter__scroll:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.prompter__scroll::-webkit-scrollbar { display: none; }
.prompter__text {
  /* a narrow column keeps the eyes close to the camera (centered on top of the screen on most laptops) */
  max-width: 24em; margin: 0 auto; padding: var(--prompter-line) var(--space-lg) 70vh;
  font-size: var(--prompter-size); line-height: 1.45; font-weight: 500; white-space: pre-wrap; text-wrap: pretty;
}
/* Mini camera: a small see-through self view at the top center, right under the laptop's camera, over the text:
   looking at your own eyes there means looking (almost) into the lens */
.prompter__mini {
  position: absolute; z-index: 1; top: 6px; left: 50%; height: 96px; aspect-ratio: var(--rec-ratio); max-width: 40%;
  translate: -50% 0; transform: scaleX(-1); object-fit: cover; opacity: 0.5; border-radius: var(--radius-md);
  pointer-events: none;
}
.prompter__mini[hidden] { display: none; }
/* Editing the script in place: no fading, the text outlined, the cursor where clicked */
.prompter--editing .prompter__scroll { mask-image: none; }
.prompter--editing .prompter__text { outline: 1px dashed #555; outline-offset: -1px; border-radius: var(--radius-md); cursor: text; caret-color: #FF5A4F; }
.prompter--editing .prompter__text:focus { outline-color: #FF5A4F; }
.prompter__marker {
  position: absolute; left: 12px; top: calc(var(--prompter-line) + var(--prompter-size) * 0.725 - 10px); pointer-events: none;
  border: 10px solid transparent; border-left: 14px solid #FF5A4F;
}
.prompter__bar {
  display: flex; align-items: center; gap: var(--space-sm) var(--space-md); flex-wrap: wrap;
  padding: var(--space-sm) var(--space-lg); border-top: 1px solid #2A2A2A; font-size: 12px; color: #BDBDBD;
}
.prompter__bar .btn { color: #F4F4F4; border-color: #444; background: transparent; }
.prompter__range { display: inline-flex; align-items: center; gap: 6px; }
.prompter__range input { width: 110px; accent-color: #FF5A4F; }
.prompter__check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.prompter__check input { accent-color: #FF5A4F; }
.prompter__value { min-width: 2.5em; font-variant-numeric: tabular-nums; color: #F4F4F4; }
.prompter__keys { color: #8A8A8A; }
.recorder--recording .prompter__bar { opacity: 0.35; transition: opacity .2s; }
.recorder--recording .prompter__bar:hover, .recorder--recording .prompter--flash .prompter__bar { opacity: 1; } /* flash: a shortcut changed something */
.recorder__hint { font-size: 12px; color: var(--color-text-tertiary); margin-top: var(--space-sm); }
@media (max-width: 600px) { .recorder__devices { grid-template-columns: 1fr; } .prompter__keys { display: none; } }


/* --- CV & cover letter preview in the drawer (paper.js renders the document into the iframe) --- */
/* Tabs: Information · Landing page · CV · Cover letter */
.d-docs__bar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
/* The tabs stay at the top while the panel scrolls (below the top menu on the full page). #drawer-top is
   display: contents so the tabs stick within the whole panel; the shadow + clip paint the background edge to edge. */
#drawer-top { display: contents; }
/* top is measured from the panel's content edge, so it subtracts the panel's padding-top (full page: 60 px menu + it) */
.d-tabs {
  display: flex; gap: 2px; margin: var(--space-lg) 0 var(--space-md); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none;
  position: sticky; top: calc(-1 * var(--space-md)); z-index: 3; background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax);
}
.drawer.is-full .d-tabs { top: calc(-1 * var(--space-lg)); }
.d-tabs__tab {
  padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.d-tabs__tab:hover { color: var(--color-text); }
.d-tabs__tab[aria-selected="true"] { color: var(--color-text); font-weight: 600; border-bottom-color: var(--color-accent); }
.d-tabs__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.d-hint { font-size: 12px; color: var(--color-text-tertiary); margin: 6px 0 var(--space-sm); }
.link-btn { font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; padding: 0; background: none; border: 0; cursor: pointer; }
.link-btn:hover { color: var(--color-text); }

/* Head: company and job title edited in place, properties as chips (like Linear's issue header) */
.d-head__title, .d-head__role {
  display: block; width: calc(100% + 12px); margin-left: -6px; padding: 2px 6px; resize: none; overflow: hidden;
  font: inherit; color: var(--color-text); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  field-sizing: content;
}
.d-head__title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin-top: 6px; }
.d-head__role { font-size: 15px; color: var(--color-text-secondary); line-height: 1.4; }
.d-head__title:hover, .d-head__role:hover { background: var(--color-bg); }
.d-head__title:focus, .d-head__role:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; background: var(--surface); }
.d-head .field-state { font-size: 12px; color: var(--chart-text); font-weight: 600; }

.popover--menu { min-width: 0; width: max-content; padding: 6px; gap: 2px; }
.menu-item { width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text); white-space: nowrap; }
.menu-item:hover, .menu-item:focus-visible { background: var(--color-bg); }
.menu-item--danger { color: var(--danger); }
.d-props { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#d-head-stats { margin: var(--space-md) 0 0; }
.d-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--surface);
  font-size: 13px; color: var(--color-text); box-sizing: border-box;
}
.d-chip:hover { border-color: var(--color-border-hover); background: var(--color-bg); }
.d-chip:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.d-chip.is-empty { border-style: dashed; color: var(--color-text-tertiary); }
.d-chip .d-icon { color: var(--color-text-tertiary); flex-shrink: 0; }
.d-chip__prefix { color: var(--color-text-tertiary); }
.d-chip select, .d-chip input {
  font: inherit; color: inherit; background: transparent; border: 0; padding: 0; outline: none; cursor: pointer;
  appearance: none; -webkit-appearance: none; field-sizing: content; max-width: 220px;
}
.d-chip input[type="text"] { cursor: text; }
.d-chip input::placeholder { color: var(--color-text-tertiary); }
.d-chip input::-webkit-calendar-picker-indicator { display: none; } /* date picker / suggestion arrow: the chip is the button */
input[type="date"], input[type="datetime-local"] { cursor: pointer; }
.d-chip.is-empty input[type="date"]:not(:focus) { width: 0 !important; } /* an empty date chip is just its label, not "tt.mm.jjjj" */
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { display: none; } /* the field opens our calendar (openDatePicker) */
.d-chip .field-state { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; font-size: 11px; color: var(--chart-text); font-weight: 600; white-space: nowrap; }

/* Labels: .ds-tag pills (app-components.css: tint, deep text, a dot in the label's colour); .lbl adds the label's own
   parts (name ellipsis, the × to take it off) */
.lbl__name { overflow: hidden; text-overflow: ellipsis; }
.lbl__x { position: relative; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: -4px; border-radius: 50%; font-size: 13px; line-height: 1; color: inherit; opacity: 0.6; cursor: pointer; }
.lbl__x::before { content: ''; position: absolute; inset: -5px; } /* 24 x 24 px hit area */
.lbl__x:focus-visible { opacity: 1; outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.lbl__x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.lbl-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--tag-bg); box-shadow: inset 0 0 0 4px var(--tag-bg), inset 0 0 0 8px var(--tag-dot); } /* the pill in small: tint ring, dot inside */
.lbl-row { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-right: 6px; vertical-align: middle; }
.apps__meta .lbl-row { margin: 2px 6px 2px 0; }

/* In the drawer head: the chip holds the pills; in the New dialog the property's value is a button */
.d-chip--labels { height: auto; min-height: 30px; flex-wrap: wrap; gap: 6px; }
.d-chip--labels .lbl { height: 30px; gap: 7px; padding: 0 12px 0 10px; font-size: 13px; } /* in the head as big as the chips beside them */
.d-chip--labels .lbl::before { width: 7px; height: 7px; }
.d-chip--labels:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* With labels the pills stand on their own: no frame, the tag icon and a soft background on hover only */
.d-chip--labels:not(.is-empty) { border: 0; background: none; padding: 0 4px 0 0; }
.d-chip--labels:not(.is-empty):hover, .d-chip--labels:not(.is-empty)[aria-expanded="true"] { background: var(--color-bg); }
.prop-labels {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; width: 100%; padding: 6px 8px; text-align: left;
  border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text); cursor: pointer;
}
.prop-labels.is-empty { color: var(--color-text-tertiary); }
.prop-labels:hover, .prop-labels[aria-expanded="true"] { background: var(--color-bg); }

/* Filter menus: one toggle per label */
.field__hint { font-weight: 400; color: var(--color-text-tertiary); }
.label-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.lbl-toggle { padding: 2px; border-radius: var(--radius-pill); border: 0; box-shadow: inset 0 0 0 1.5px transparent; opacity: 0.5; cursor: pointer; transition: opacity var(--transition-fast), box-shadow var(--transition-fast); }
.lbl-toggle:hover { opacity: 0.85; }
.lbl-toggle.is-on { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--ds-action); }
.lbl-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* The picker (dashboard/labels.js openLabelPicker): fixed under its chip, in the body or the open dialog */
.label-picker {
  position: fixed; z-index: var(--z-menu); display: flex; flex-direction: column; overflow: hidden; color: var(--color-text);
  background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.label-picker__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px;
  background: var(--color-bg); border-bottom: 1px solid var(--color-border);
}
.label-picker__head:focus-within { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.label-picker__input { flex: 1 1 80px; min-width: 80px; border: 0; background: transparent; font: inherit; font-size: 14px; color: inherit; padding: 2px 0; outline: none; }
.label-picker__input::placeholder { color: var(--color-text-tertiary); }
.label-picker__hint { margin: 8px 12px 4px; font-size: 12px; color: var(--color-text-tertiary); }
.label-picker__list { overflow-y: auto; padding: 0 6px 6px; min-height: 0; }
.label-picker__row { display: flex; align-items: center; gap: 6px; width: 100%; border-radius: var(--radius-sm); padding: 0 4px 0 0; text-align: left; cursor: pointer; }
button.label-picker__row { padding: 5px 8px; font-size: 13px; color: var(--color-text-secondary); }
.label-picker__row.is-active { background: var(--color-bg); }
.label-picker__pick { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 5px 0 5px 4px; text-align: left; cursor: pointer; }
.label-picker__check { width: 14px; flex-shrink: 0; font-size: 12px; color: var(--color-text-secondary); text-align: center; }
.label-picker__create { flex-shrink: 0; }
.label-picker__more {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--color-text-tertiary); opacity: 0; cursor: pointer;
}
.label-picker__row.is-active .label-picker__more, .label-picker__row:hover .label-picker__more, .label-picker__row:focus-within .label-picker__more, .label-picker__more:focus-visible { opacity: 1; }
.label-picker__more:hover { background: var(--color-border); color: var(--color-text); }
@media (hover: none) { .label-picker__more { opacity: 1; } }
.label-picker__edit-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.label-picker__back { width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer; }
.label-picker__back:hover { background: var(--color-bg); }
.label-picker__name { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.label-picker__name:focus { border-color: var(--color-border-hover); }
.label-picker > .menu-item { width: auto; margin: 6px 6px 0; }
.label-picker__colors { display: flex; flex-direction: column; overflow-y: auto; padding: 0 6px 6px; }
.label-picker__color { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); font-size: 13px; color: var(--color-text); text-align: left; cursor: pointer; }
.label-picker__color:hover, .label-picker__color:focus-visible { background: var(--color-bg); }
.label-picker__color .label-picker__check { margin-left: auto; }
@media (max-width: 767px) { .label-picker__input { font-size: 16px; } } /* no zoom on focus (iOS) */

/* Information tab: a property list (icon · label · value), then the long texts (Linear-like) */
.props { display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--color-border); padding: 2px 0 8px; }
.prop { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; min-height: 36px; }
.prop__label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); padding: 0 6px; }
.prop__label .d-icon { color: var(--color-text-tertiary); }
.prop__value { display: flex; align-items: center; gap: 4px; min-width: 0; }
.prop__value input, .prop__value select {
  flex: 1; min-width: 0; height: 30px; padding: 0 8px; margin-left: -8px;
  font: inherit; font-size: 14px; color: var(--color-text); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
}
.prop__value select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.prop__value input::placeholder { color: var(--color-text-tertiary); }
.prop__value input:hover, .prop__value select:hover { background: var(--color-bg); }
.prop__value input:focus, .prop__value select:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; background: var(--surface); }
.prop__open { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--color-text-secondary); }
.prop__open:hover { background: var(--color-bg); color: var(--color-text); }
.prop .field-state, .d-long .field-state { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--chart-text); font-weight: 600; }
.d-long .field-state { top: 2px; transform: none; }

.d-long { position: relative; margin-top: var(--space-lg); }
/* Wide panels (full page): properties in a narrow column right of the description */
@container panel (min-width: 800px) {
  .d-info { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-2xl); align-items: start; }
  .d-info__side { grid-column: 2; grid-row: 1; }
  .d-info__main { grid-column: 1; grid-row: 1; }
  .d-info__side .props { border-bottom: 0; padding: 0; }
  .d-info__side .prop { grid-template-columns: 136px minmax(0, 1fr); }
  .d-info__side .prop__label { white-space: nowrap; }
  .d-info__main > .d-long:first-child { margin-top: 0; }
}
/* Commute (Information tab, under the properties): bike / there / back as rows */
.commute { position: relative; padding: var(--space-sm) 0 var(--space-md); border-bottom: 1px solid var(--color-border); }
.d-info__side .commute { border-bottom: 0; }
.commute.is-busy > :not(.commute__head) { opacity: 0.5; }
.commute__head { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.commute__head .field-state { position: static; transform: none; margin-left: auto; font-size: 11px; color: var(--color-text-tertiary); }
.commute__title { margin: 0; }
.commute__calc { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; }
.commute__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); padding: 5px 0; } /* same columns as .prop */
.d-info__side .commute__row { grid-template-columns: 136px minmax(0, 1fr); }
.commute__label { grid-row: span 2; display: flex; align-items: center; gap: 8px; align-self: start; height: 22px; font-size: 13px; color: var(--color-text-secondary); }
.commute__label .d-icon { color: var(--color-text-tertiary); }
.commute__value { font-size: 14px; font-weight: 600; line-height: 22px; color: var(--color-text); }
.commute__detail { font-size: 12px; color: var(--color-text-tertiary); overflow-wrap: anywhere; }
.commute__hint { font-size: 12px; color: var(--color-text-tertiary); margin: 6px 0 0; }
.commute__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.d-long__label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-tertiary); margin-bottom: 4px; }
.d-long__text {
  display: block; width: calc(100% + 16px); margin-left: -8px; padding: 6px 8px; resize: none; overflow: hidden;
  font: inherit; font-size: 14px; line-height: 1.6; color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm); field-sizing: content; min-height: 3lh;
}
.d-long__text::placeholder { color: var(--color-text-tertiary); }
#info-notes { min-height: 14lh; } /* the Notes tab: room to write */
.d-long__text:hover { background: var(--color-bg); }
.d-long__text:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; background: var(--surface); }
/* Job description: formatted (markdown.js), edited in place */
.d-rich { min-height: 6lh; white-space: normal; overflow-wrap: anywhere; cursor: text; }
.d-rich:empty::before { content: attr(data-placeholder); color: var(--color-text-tertiary); }
.d-rich > :first-child { margin-top: 0; }
.d-rich > :last-child { margin-bottom: 0; }
.d-rich p, .d-rich ul, .d-rich ol { margin: 0 0 0.8em; }
.d-rich ul, .d-rich ol { padding-left: 1.4em; }
.d-rich ul { list-style: disc; }
.d-rich ol { list-style: decimal; }
.d-rich li ul, .d-rich li ol { margin: 0; }
.d-rich h1, .d-rich h2, .d-rich h3, .d-rich h4, .d-rich h5, .d-rich h6 {
  font-family: inherit; font-weight: 600; letter-spacing: normal; text-transform: none; line-height: 1.35; margin: 1.2em 0 0.4em;
}
.d-rich h1, .d-rich h2 { font-size: 17px; }
.d-rich h3 { font-size: 15px; }
.d-rich h4, .d-rich h5, .d-rich h6 { font-size: 14px; }
.d-rich strong, .d-rich b { font-weight: 600; }

/* Landing page tab: the real page in a frame, at desktop (1280 px, scaled) or phone width */
.d-site__frame { position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #FFF; }
.d-site__frame--mobile { background: var(--color-bg); }
/* "Add / Change video" button, laid over the page's photo / video in the preview (mountVideoTools) */
.lp-video {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--surface); color: var(--color-text);
  font: 500 14px var(--font-sans); white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-lg);
  opacity: 0; transform: scale(0.96); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
}
.lp-video .d-icon { width: 16px; height: 16px; }
.lp-video:hover { border-color: var(--color-border-hover); }
.lp-video.is-shown, .lp-video:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.lp-video:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (hover: none) { .lp-video { opacity: 1; transform: none; pointer-events: auto; } }
.lp-video[hidden] { display: none; }

/* Intro video dialog (openVideoDialog) */
.video-dialog { width: min(480px, calc(100% - 32px)); }
.video-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.video-dialog__preview { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--color-bg-dark); margin-bottom: var(--space-md); }
.video-dialog__state { font-size: 13px; color: var(--color-text-secondary); }
.video-dialog__state:empty { display: none; }
.video-dialog__options { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-sm); }
.video-dialog__option {
  display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; font: inherit; color: var(--color-text);
  background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer;
}
.video-dialog__option:hover, .video-dialog__option:focus-visible { border-color: var(--color-border-hover); background: var(--color-bg); }
.video-dialog__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--color-bg); flex-shrink: 0; }
.video-dialog__icon .d-icon { width: 18px; height: 18px; }
.video-dialog__text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.video-dialog__text small { font-size: 12px; color: var(--color-text-secondary); }
.video-dialog__option.is-danger b, .video-dialog__option.is-danger .video-dialog__icon { color: var(--danger); }
.video-dialog.is-busy .video-dialog__options { opacity: 0.5; pointer-events: none; }
.d-site__page { position: absolute; top: 0; left: 0; border: 0; background: #FFF; transform-origin: 0 0; }

/* The sheet, as wide as it is shown (scaled by paper.js), centered; zoomed past the width it scrolls sideways */
.d-docs__stage { overflow-x: auto; overscroll-behavior-x: contain; }
.d-docs__frame { position: relative; overflow: hidden; margin: 0 auto; outline: 1px solid var(--color-border); outline-offset: -1px; border-radius: var(--radius-sm); background: #FFF; min-height: 120px; }
.d-docs__paper { display: block; border: 0; background: #FFF; }
.d-docs__state { font-size: 12px; color: var(--color-text-tertiary); }
.d-docs__actions .d-docs__state { flex: none; padding: 0 8px 0 10px; white-space: nowrap; }
.d-docs__state.is-dirty { color: var(--color-text-secondary); }
.d-docs__state.is-error { color: var(--danger); }
.d-docs__actions .d-docs__state.is-saving { display: inline-flex; align-items: center; gap: 6px; }
/* while saving: a rotating ring (before the text; in the compact bar instead of the dot) */
.d-docs__actions .d-docs__state.is-saving::before {
  content: ''; flex: none; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--color-border); border-top-color: var(--color-text-secondary); animation: docs-spin 0.7s linear infinite;
}
@keyframes docs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .d-docs__actions .d-docs__state.is-saving::before { animation-duration: 2s; } }

/* Floating actions at the bottom of the drawer: CV focus, zoom, PDF, ⋯ */
.d-docs__actions {
  /* sticky insets count from inside the panel's bottom padding: subtract it */
  position: sticky; bottom: calc(var(--space-md) - var(--space-2xl)); z-index: 2; display: flex; align-items: center; gap: 4px;
  width: fit-content; max-width: 100%; margin: var(--space-md) auto 0; padding: 5px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--color-border); border-radius: 999px; box-shadow: var(--shadow-lg);
  overflow-x: auto; scrollbar-width: none;
}
.drawer.is-full .d-docs__actions { bottom: calc(var(--space-md) - var(--space-4xl)); }
.d-docs__actions::-webkit-scrollbar { display: none; }
.d-docs__btn, .d-docs__pct {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap;
}
.d-docs__btn:hover:not(:disabled), .d-docs__pct:hover, .d-docs__more[aria-expanded="true"] { background: var(--color-bg); color: var(--color-text); }
.d-docs__btn:disabled { opacity: 0.6; cursor: progress; }
.d-docs__more { font-size: 15px; letter-spacing: 1px; }
.d-docs__zoom { display: flex; align-items: center; flex: none; padding: 0 2px; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.d-docs__zoom .d-docs__btn { width: 32px; padding: 0; justify-content: center; font-size: 17px; }
.d-docs__pct { min-width: 54px; padding: 0 4px; justify-content: center; font-variant-numeric: tabular-nums; }
.d-docs__variant {
  flex: none; font: inherit; font-size: 13px; height: 32px; padding: 0 30px 0 12px; border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--color-text); appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 220px; text-overflow: ellipsis;
}
.d-docs__variant:hover { border-color: var(--color-border-hover); }
/* CV / letter bar in narrower panels (drawer, phone): first icons only, then the state as a dot, then everything tighter */
#drawer-panel { container: panel / inline-size; }
@container panel (max-width: 860px) {
  .d-docs__btn > span { display: none; }
  .d-docs__btn:has(> svg), .d-docs__more { width: 34px; padding: 0; justify-content: center; }
}
@container panel (max-width: 620px) {
  /* grey saved, dark unsaved, red error; the full text is its title */
  .d-docs__actions .d-docs__state { width: 8px; height: 8px; padding: 0; margin: 0 6px 0 8px; border-radius: 50%; background: currentColor; font-size: 0; }
  .d-docs__actions .d-docs__state.is-saving { width: 10px; height: 10px; gap: 0; margin: 0 5px 0 7px; background: none; border-radius: 0; }
}
@container panel (max-width: 420px) {
  .d-docs__actions { gap: 2px; }
  .d-docs__zoom .d-docs__btn { width: 30px; }
  .d-docs__pct { min-width: 44px; font-size: 12px; }
  .d-docs__variant { max-width: 84px; padding-right: 26px; background-position: right 10px center; }
}


/* ============================================================
   Phone layout: applications first, cards instead of the table,
   full-screen forms, the menu as a bottom sheet
   ============================================================ */
@media (max-width: 640px) {

  /* Top bar: compact, nothing wraps */
  .dash .nav__logo img { height: 26px; }
  .dash__tab { padding: 6px 8px; }
  .nav--minimal .dash__nav-links { gap: 4px; }

  .dash__main { padding-top: 80px; gap: var(--space-lg); padding-left: 12px; padding-right: 12px; }
  .dash-bar { order: -2; flex-wrap: nowrap; }
  .dash-bar .view-tab__name { padding: 0 10px; }

  /* Key figures: smaller tiles, no explanations */
  .kpis { gap: 8px; }
  .kpi { padding: 12px 14px; }
  .kpi__value { font-size: 24px; }
  .kpi--hero .kpi__value { font-size: 36px; }
  .kpi__note { display: none; }
  .panel { padding: var(--space-md); }
  .chart { height: 180px; }

  /* Applications as cards: name + role, status and page, figures, actions */
  .table-wrap { margin: 0; overflow: visible; }
  .apps thead { display: none; }
  .apps, .apps tbody { display: block; }
  .apps tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
  .apps tbody tr:last-child { border-bottom: 0; }
  .apps tbody tr:hover { background: none; }
  .apps td, .apps th:first-child, .apps td:first-child, .apps td:last-child { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .apps td:first-child, .apps td:last-child { flex-basis: 100%; }
  .apps td[data-label] { font-size: 12px; color: var(--color-text-tertiary); }
  .apps td[data-label]::before { content: attr(data-label) ' '; }
  .apps td.num { text-align: left; color: var(--color-text-secondary); }
  .apps td.apps__applied.is-empty { display: none; }
  .apps td.apps__last { font-size: 12px; }
  .board { grid-template-columns: repeat(6, 82%); scroll-snap-type: x mandatory; }
  .board__col { scroll-snap-align: start; }
  .apps__company { font-size: 16px; }
  .apps tbody tr { position: relative; }
  .apps td:first-child { padding-right: 48px; }
  .apps td.apps__more { position: absolute; top: 12px; right: 0; width: auto; }
  .icon-btn { padding: 9px 12px; font-size: 13px; }
  .status--btn { padding: 6px 12px; font-size: 13px; }

  /* Drawer: full width already, more room for the close button */
  .drawer__panel { padding: 10px 16px 32px; }
  .drawer__expand { display: none; }
  .drawer__close { width: 44px; height: 44px; }
  .drawer.is-full .drawer__panel { padding: 76px 16px 32px; }
  .d-link { flex-wrap: wrap; }
  .d-link > span { flex-basis: 100%; order: -1; }
  .d-docs__variant { font-size: 16px; } /* no iOS zoom on focus */
  .drawer .d-docs__actions, .drawer.is-full .d-docs__actions { bottom: calc(var(--space-sm) + env(safe-area-inset-bottom) - 32px); } /* panel padding 32px */
  .d-tabs__tab { padding: 10px 6px; font-size: 13px; }
  .d-tabs { top: -10px; }
  .drawer.is-full .d-tabs { top: -16px; }
  .d-head__title { font-size: 21px; }
  .prop { grid-template-columns: 130px minmax(0, 1fr); }
  .prop__value input, .prop__value select, .d-long__text, .d-chip input { font-size: 16px; } /* chip selects keep the chip's size */

  /* Filter menu: bottom sheet */
  #more-menu, #ap-options {
    position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); min-width: 0; width: auto; max-width: none;
    max-height: 80dvh; overflow-y: auto; box-shadow: var(--shadow-lg), 0 0 0 100vmax rgba(0, 0, 0, 0.3);
  }
  .vo-row { min-height: 44px; }
  .vo-row select { font-size: 16px; }

  /* Status menu: bottom sheet with big targets */
  .menu {
    left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); min-width: 0; padding: 8px;
    box-shadow: var(--shadow-lg), 0 0 0 100vmax rgba(0, 0, 0, 0.3); /* dims the page behind the sheet */
  }
  .menu__item { padding: 13px 12px; font-size: 16px; }

  /* Forms full screen; Save / Cancel stay reachable */
  .modal { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .modal__form { padding: 20px 16px 0; }
  .modal__actions {
    position: sticky; bottom: 0; z-index: 1; background: var(--surface); margin: var(--space-md) -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border);
  }
  .field input:not([type="checkbox"]), .field select, .field textarea { font-size: 16px; } /* no iOS zoom on focus */
  .page-sheet { border-radius: 0; box-shadow: none; }
  .page-sheet .page-form { padding: 16px 16px 0; min-height: 100%; display: flex; flex-direction: column; } /* Save bar at the bottom */
  .page-form__top { margin-bottom: 14px; }
  .page-form__title { font-size: 28px; }
  .prop { grid-template-columns: 128px minmax(0, 1fr); }
  .prop > input, .prop > select { font-size: 16px; }
  .page-sheet .page-form__actions { margin: auto -16px 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
}

/* --- Visit sheet (one page view in detail), above the application sheet --- */
.drawer--visit { z-index: var(--z-visit); }
/* Help (Help in the top bar): a floating panel; home = article cards (a small picture + the title), an article opens inside it
   (public/js/dashboard/pages/help.js) */
.drawer--help .drawer__panel {
  top: var(--ds-space-3); right: var(--ds-space-3); bottom: var(--ds-space-3); width: min(380px, calc(100% - 2 * var(--ds-space-3)));
  border-radius: var(--ds-r-sheet); box-shadow: var(--ds-shadow-float); background: var(--ds-surface);
  display: flex; flex-direction: column; padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-5);
  transform: translateX(calc(100% + var(--ds-space-3)));
}
.drawer--help { z-index: var(--z-help); }
.drawer.drawer--help.open .drawer__backdrop { background: var(--ds-scrim); opacity: 0.5; }
.help-sheet__search { width: 100%; }
.help-sheet__label { margin: var(--ds-space-5) 0 var(--ds-space-2); font-size: var(--ds-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-ink-3); }
.help-sheet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
/* one card per row: the picture (square: the scene sits centred on its ground) and the title */
.help-card { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-2); color: var(--ds-ink); text-decoration: none; transition: box-shadow 0.15s; }
.help-card:hover, .help-card:focus-visible { box-shadow: var(--ds-card-edge), var(--ds-shadow-float); }
.help-card__text { display: grid; gap: 2px; min-width: 0; }
.help-card__title { font-size: var(--ds-text-md); font-weight: 600; line-height: 1.3; }
.help-card__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--ds-text-sm); line-height: 1.4; color: var(--ds-ink-3); }
.help-card > :is(.help-art, .help-card__icon) { flex: none; width: 64px; aspect-ratio: 1; height: auto; }
.help-card__icon { display: grid; place-items: center; border-radius: calc(var(--ds-r-card) - 4px); background: var(--ds-ground); color: var(--ds-ink-3); }
.help-sheet__article h1 { font-size: var(--ds-title-sm); }
.help-sheet__foot { margin-top: auto; padding-top: var(--ds-space-5); display: flex; gap: var(--ds-space-2); flex-wrap: wrap; }
.help-sheet__foot svg { width: 14px; height: 14px; }
.help-sheet__foot [hidden] { display: none; } /* .ds-btn's display would show it */

/* A help article, in the panel and on the help center (public/dashboard/help.html) */
.help-doc { color: var(--ds-ink); line-height: var(--ds-leading); }
.help-doc > h1 { font-size: var(--ds-title); line-height: var(--ds-leading-tight); margin: 0 0 var(--ds-space-3); }
.help-doc > h1 + p { color: var(--ds-ink-2); font-size: var(--ds-text-lg); }
.help-doc > :is(p, ul, ol) { margin: 0 0 var(--ds-space-3); }
.help-doc > :is(ul, ol) { padding-left: var(--ds-space-5); }
.help-doc > ul { list-style: disc; }
.help-doc > ol { list-style: decimal; }
.help-doc > :is(ul, ol) > li { margin: var(--ds-space-1) 0; }
.help-doc > :is(p, ul, ol) a { color: var(--ds-action-text); text-decoration: underline; text-underline-offset: 2px; }
/* A help article's demo (public/js/help-demo.js, help/demos/*.html): a small copy of the real screen, scaled to the
   column, that a cursor clicks through; the article's numbered steps light up with it */
.help-demo { margin: var(--ds-space-4) 0 var(--ds-space-5); }
.help-demo__stage { position: relative; overflow: hidden; border-radius: var(--ds-r-card); background: var(--ds-ground); box-shadow: var(--ds-card-edge); }
.help-demo__screen { position: absolute; top: 0; left: 0; transform-origin: 0 0; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--ds-space-4); padding: var(--ds-space-4); font-size: 14px; line-height: 1.4; }
.help-demo__window { position: relative; height: 100%; overflow: hidden; padding: var(--ds-space-4) var(--ds-space-5); border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow-float); }
.help-demo__window .d-head__title { margin: 6px 0 0; font-size: 20px; }
.help-demo__window .d-head__role { margin: 0; }
.help-demo__window .d-tabs { position: static; margin: var(--ds-space-3) 0; }
.help-demo__window .d-tabs__tab { display: inline-block; }
.help-demo__lines { display: grid; gap: 10px; padding-top: var(--ds-space-2); }
.help-demo__lines i { display: block; height: 10px; border-radius: 5px; background: var(--ds-surface-2); }
.help-demo__lines i:nth-child(2) { width: 80%; }
.help-demo__lines i:nth-child(3) { width: 55%; }
/* the meeting dialog: the real .page-sheet over a backdrop on the whole screen */
.help-demo__modal { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(15, 15, 15, 0.4); }
.help-demo__sheet { max-height: calc(100% - 32px); overflow: hidden; background: var(--surface); }
.help-demo__sheet .page-form__close { display: grid; place-items: center; }
.help-demo__sheet .page-form__title { min-height: 1.2em; }
.help-demo__sheet .page-form__actions { display: flex; align-items: center; gap: 4px; }
.help-demo__value { padding: 6px 8px; font-size: 14px; min-height: 1.4em; }
.help-demo__value--empty { color: var(--color-text-tertiary); }
.help-demo__page { margin-top: var(--ds-space-3); padding: var(--ds-space-4); border-radius: var(--ds-r-control); background: var(--ds-ground); }
.help-demo__eyebrow { margin: 0; font-size: 12px; color: var(--ds-ink-3); }
.help-demo__headline { margin: 4px 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
.help-demo__text { margin: 0; color: var(--ds-ink-2); }
.help-demo__toast { position: absolute; z-index: 3; left: 50%; bottom: var(--ds-space-4); transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: var(--ds-r-pill); background: var(--ds-ink); color: var(--ds-surface); font-size: 13px; width: max-content; max-width: calc(100% - 2 * var(--ds-space-4)); text-align: center; text-wrap: balance; }
.help-demo__screen [hidden] { display: none !important; }
/* the sidebar and the list beside, the window as the sheet floating over the right */
.help-demo__screen .help-demo__window { position: absolute; z-index: 2; top: var(--ds-space-4); right: var(--ds-space-4); bottom: var(--ds-space-4); width: 460px; height: auto; }
.help-demo__side { display: grid; align-content: start; gap: 2px; }
.help-demo__side svg { flex: none; }
.help-demo__list { overflow: hidden; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-card-edge); }
.help-demo__list-title { margin: 0; padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-2); font-size: 18px; font-weight: 700; }
.help-demo__list .apps tbody tr.is-pressed { box-shadow: none; background: var(--ds-surface-2); }
.help-demo__screen .is-pressed { box-shadow: 0 0 0 3px var(--ds-focus); border-radius: 6px; }
/* the cursor: an arrow whose tip is the point; pressed = a ring */
.help-demo__cursor {
  position: absolute; top: 0; left: 0; z-index: 2; width: 18px; height: 18px; pointer-events: none;
  transform: translate(380px, 260px); transition: transform 0.6s var(--ds-ease);
  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M1 1l6.5 15 2.2-6.3L16 7.5z' fill='%23111' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.help-demo__cursor::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--ds-focus); opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.2s; }
.help-demo__cursor.is-pressed::after { opacity: 0.45; transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) { .help-demo__cursor { transition: none; } }
.help-demo__bar { display: flex; align-items: center; gap: 2px; margin-top: var(--ds-space-2); color: var(--ds-ink-2); font-size: var(--ds-text-sm); }
.help-demo__count { margin-left: var(--ds-space-2); }
/* the steps the demo plays: the current one lit, any can be clicked */
.help-doc:has(.help-demo) > ol > li { cursor: pointer; border-radius: var(--ds-r-control); padding: 2px 6px; margin-left: -6px; transition: background-color var(--ds-t-hover); }
.help-doc > ol > li.is-current { background: var(--ds-action-soft); }

.drawer--visits { z-index: var(--z-visits); } /* above the application (and the full page's top menu), below one visit */
.drawer--visits .drawer__panel { width: min(560px, 100%); }
.drawer.drawer--visits.open .drawer__backdrop { background: rgba(0, 0, 0, 0.18); }
#visits-body .d-stats { margin: var(--space-md) 0 var(--space-lg); }
/* The CV editor's ATS hint count (dashboard/editors/docs.js updateDocsAts): a quiet pill in its top bar */
.docs-ats { padding: 5px 11px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; color: var(--color-text-secondary); background: var(--color-bg); white-space: nowrap; }
.docs-ats:hover { color: var(--color-text); }
.docs-ats.is-warn { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.docs-ats.is-ok { color: var(--ok); }
.docs-ats__item { max-width: 380px; white-space: normal; }
.docs-ats__item.is-warn .menu__text { color: var(--danger); }
.docs-ats__item small { color: var(--color-text-secondary); }

/* ATS check of the CV (dashboard/drawer/ats.js openAts / atsResult): verdict, what to fix, hints, what passed, the parser's text.
   Surfaces are told apart by tone steps only (no lines); red = something to fix, green = passed. */
.ats__intro { color: var(--color-text-secondary); font-size: 14px; line-height: 1.5; margin: 2px 0 0; max-width: 46ch; }
.ats__source { width: fit-content; margin-top: var(--space-md); }
.ats__verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; margin-top: var(--space-lg); padding: 18px 20px; border-radius: var(--radius-lg); background: var(--color-bg); }
.ats__verdict.is-warn { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
[data-theme="dark"] .ats__verdict.is-warn { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); }
.ats__verdict.is-ok { grid-template-columns: minmax(0, 1fr); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.ats__verdict.is-busy { grid-template-columns: minmax(0, 1fr); }
.ats__verdict.is-busy .ats__claim { color: var(--color-text-secondary); animation: ats-pulse 1.4s ease-in-out infinite; }
@keyframes ats-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ats__verdict.is-busy .ats__claim { animation: none; } }
.ats__big { margin: 0; font-size: 44px; font-weight: 650; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.is-warn > .ats__big { color: var(--danger); }
.is-ok > .ats__big { font-size: 30px; color: var(--ok); margin-bottom: 6px; }
.ats__claim { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.ats__facts { margin: 4px 0 0; font-size: 13px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.ats__group { margin-top: var(--space-xl); }
.ats__h { margin: 0 0 var(--space-sm); font-size: 15px; font-weight: 600; }
.ats__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ats__item { padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-bg); }
.ats__list.is-info .ats__item { padding: 10px 16px; background: none; }
.ats__list.is-info { gap: 0; margin-inline: -16px; }
.ats__lead { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.ats__list.is-info .ats__lead { font-weight: 500; }
.ats__why { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.ats__fix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ats__fix .btn { display: inline-flex; align-items: center; gap: 6px; }
.ats__link { margin-top: 2px; padding: 0; font-size: 14px; font-weight: 500; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-text-tertiary); }
.ats__link:hover { text-decoration-color: currentColor; }
.ats__list.is-info .ats__fix { margin-top: 2px; }
.ats__more > summary { display: flex; align-items: center; gap: 6px; width: fit-content; cursor: pointer; list-style: none; }
.ats__more > summary::-webkit-details-marker { display: none; }
.ats__more > summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--transition-base); }
.ats__more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.ats__passed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.4; }
.ats__passed li { display: flex; gap: 10px; align-items: baseline; }
.ats__passed li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); transform: translateY(-1px); }
/* Matches the posting (atsPosting): count, job title, missing terms, the posting's lines with terms marked.
   Green = in the CV, amber = in another wording, red = missing; grey = soft skills and lines we can't judge. */
.ats__score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; margin-bottom: 8px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--color-bg); }
.ats__score .ats__big { font-size: 40px; }
.ats__score .ats__big span { font-size: 22px; font-weight: 500; color: var(--color-text-tertiary); letter-spacing: 0; }
.ats__title { margin-bottom: 8px; }
.ats__title.is-match .ats__lead { color: var(--ok); }
.ats__sub { margin: var(--space-lg) 0 6px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.ats__missing { margin-top: var(--space-md); }
.ats__terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ats__terms li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.ats__term { font-size: 14px; font-weight: 600; }
.ats__term small { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); }
.ats__term-actions { display: flex; gap: 14px; }
.ats__term-actions .ats__link { font-size: 13px; margin: 0; }
.ats__done { font-size: 13px; font-weight: 600; color: var(--ok); }
.ats__missing > .ats__why { margin-top: 8px; font-size: 13px; }
.ats__reqs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ats__req { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 12px; font-size: 14px; line-height: 1.5; }
.ats__req::before { content: ''; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--color-text-tertiary); grid-row: 1 / span 2; }
.ats__req.is-covered::before { background: var(--ok); }
.ats__req.is-partial::before { background: var(--amber); }
.ats__req.is-missing::before { background: var(--danger); }
.ats__req p { margin: 0; grid-column: 2; }
.ats__req .ats__why { margin-top: 1px; font-size: 13px; }
.ats__req.is-unknown > p:first-of-type, .ats__req.is-soft > p:first-of-type { color: var(--color-text-secondary); }
.ats__req mark { padding: 0 3px; margin: 0 -1px; border-radius: 3px; color: inherit; font-weight: 500; }
.ats__req mark.is-found { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.ats__req mark.is-synonym { background: var(--amber-bg); }
.ats__req mark.is-missing { background: color-mix(in srgb, var(--danger) 15%, transparent); }
.ats__req mark.is-soft { background: color-mix(in srgb, var(--color-text) 8%, transparent); font-weight: 400; }
.ats__text { margin-top: var(--space-sm); padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-bg); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.ats__text p { margin: 0; }
.ats__line { padding: 1px 6px; margin-inline: -6px; border-radius: 4px; }
.ats__line.is-mixed { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.ats__tag { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--danger); white-space: nowrap; }
.ats__page { margin: 14px 0 4px; font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); }
.drawer--visit .drawer__panel { width: min(520px, 100%); }
.drawer.drawer--visit.open .drawer__backdrop { background: rgba(0, 0, 0, 0.18); }
.drawer__bar-title { font-size: 13px; font-weight: 600; color: var(--color-text-tertiary); padding-left: 2px; }
.visit-sheet__title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.visit-sheet__sub { color: var(--color-text-secondary); font-size: 14px; margin-top: 2px; }
.visit-sheet__app { margin-top: var(--space-sm); }
#visit-body .d-stats { margin: var(--space-md) 0 var(--space-sm); }
#visit-body .d-stats div { position: relative; overflow: hidden; }
.visit-sheet__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: var(--chart-bar); }
.prop__value--text { font-size: 14px; color: var(--color-text); min-height: 30px; flex-wrap: wrap; }
.tag--off { color: var(--color-text-tertiary); border-style: dashed; }
.visit-sheet__others { display: flex; flex-direction: column; }

.timeline { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid var(--color-border); margin-left: 4px; }
.timeline li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: 14px; padding: 4px 0; }
.timeline li::before { content: ''; position: absolute; left: -19px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--color-text-tertiary); }
.timeline li.is-action::before { background: var(--chart-bar); border-color: var(--chart-bar); }
.timeline li.is-end::before { background: var(--color-text-tertiary); }
.timeline__at { font-variant-numeric: tabular-nums; color: var(--color-text-tertiary); font-size: 12px; padding-top: 2px; }

/* Clickable visits (recent activity, an application's visits) */
.visit--open { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); }
.visit--open:hover { border-color: var(--color-border-hover); background: var(--color-bg); }
.visit--open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* Visits sheet: the same visitor's visits that day, as one card with a head */
.visit-group { margin-bottom: var(--space-sm); overflow: hidden; }
.visit-group__head {
  display: flex; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; padding: 8px 14px;
  background: var(--color-bg); font-size: 12px; color: var(--color-text-secondary);
}
.visit-group__head b { font-weight: 600; color: var(--color-text); }
.visit-group .visit { margin: 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; box-shadow: none; }
.visit-group .visit--open:focus-visible { outline-offset: -2px; }
.feed__item--open { cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition-fast); }
.feed__item--open:hover { background: var(--color-bg); }
.feed__item--open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ============================================================
   Meetings (drawer tab, dialog) and the Calendar tab
   ============================================================ */
.d-tabs__count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: var(--radius-pill); background: var(--color-border); font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
}
.d-meetings__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.d-meetings__bar .d-hint { margin: 0; }
.d-meetings__bar .btn { flex-shrink: 0; }

.meetings, .agenda { display: flex; flex-direction: column; }
.meeting { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.meeting:last-child { border-bottom: 0; }
.meeting.is-past { opacity: 0.6; }
.meeting__date {
  flex-shrink: 0; width: 44px; padding: 4px 0; display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--surface); line-height: 1.1;
}
.meeting__date small { font-size: 11px; font-weight: 600; color: var(--chart-text); }
.meeting__date b { font-size: 18px; font-weight: 600; }
.meeting__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meeting__title { font-size: 14px; font-weight: 600; color: var(--color-text); text-align: left; overflow-wrap: anywhere; }
.meeting__title:hover { text-decoration: underline; text-underline-offset: 2px; }
.meeting__title:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.meeting__meta { font-size: 12px; color: var(--color-text-tertiary); overflow-wrap: anywhere; }
.meeting__link { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.meeting-sheet { width: min(640px, calc(100% - 32px)); }
.meeting-sheet .page-form__title { font-size: 28px; margin-bottom: 18px; }
.meeting-sheet .prop[hidden] { display: none; }
.meeting-sheet .d-long { margin-top: var(--space-md); }
.meeting-sheet .d-long__text { width: 100%; resize: vertical; }

/* Calendar tab */
.cal__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.cal__title { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; min-width: 9ch; }
.cal__nav { display: flex; gap: 4px; }
.cal__nav .icon-btn { min-width: 34px; font-size: 14px; }
.cal { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-lg); align-items: start; }
@media (max-width: 1100px) { .cal { grid-template-columns: 1fr; } }
.cal__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  overflow: hidden;
}
.cal__dow { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); background: var(--surface); }
.cal__day {
  min-height: 112px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
  background: var(--surface); cursor: pointer;
}
.cal__day:hover { background: var(--color-bg); }
.cal__day.is-weekend { background: color-mix(in srgb, var(--color-bg) 60%, var(--surface)); }
.cal__day.is-other .cal__num { color: var(--color-text-tertiary); }
.cal__day-head { display: flex; align-items: center; justify-content: space-between; }
.cal__num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; font-size: 13px; font-weight: 500; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.cal__day.is-today .cal__num { background: var(--color-text); color: var(--surface); font-weight: 600; }
.cal__add {
  width: 24px; height: 24px; border-radius: var(--radius-sm); font-size: 16px; line-height: 1; color: var(--color-text-tertiary); opacity: 0;
}
.cal__day:hover .cal__add, .cal__day:focus-within .cal__add, .cal__add:focus-visible { opacity: 1; }
@media (hover: none) { .cal__add { opacity: 1; } }
.cal__add:hover { background: var(--color-border); color: var(--color-text); }
.cal__add:focus-visible { outline: 2px solid var(--focus-ring); }
.cal__event {
  display: block; width: 100%; padding: 3px 6px; text-align: left; font-size: 12px; font-weight: 500; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--color-accent-light); border-left: 3px solid var(--chart-bar); border-radius: 3px;
}
.cal__event:hover { filter: brightness(0.97); }
.cal__event:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.cal__event.is-past { background: var(--color-bg); border-left-color: var(--color-text-tertiary); color: var(--color-text-secondary); }
.cal__event.is-archived { opacity: 0.6; }
.cal__time { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.cal__agenda-title { font-size: 16px; font-weight: 600; margin-bottom: var(--space-sm); }

/* Week / Month / Year: icon radios with a thumb that slides to the chosen one (--i = its index) */
.cal-switch {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 36px; padding: 3px;
  background: var(--ds-action-soft); border-radius: var(--ds-r-pill); isolation: isolate;
}
.cal-switch__thumb {
  position: absolute; z-index: -1; top: 3px; left: 3px; width: 36px; height: calc(100% - 6px);
  background: var(--ds-action); border-radius: var(--ds-r-pill); box-shadow: 0 1px 3px rgb(29 71 230 / 0.3);
  transform: translateX(calc(var(--i, 1) * 100%)); transition: transform 220ms cubic-bezier(0.3, 0.9, 0.3, 1);
}
.cal-switch button {
  display: grid; place-items: center; height: 30px; border-radius: var(--ds-r-pill); color: var(--ds-action-text);
  transition: color var(--transition-fast);
}
.cal-switch button:hover { color: var(--ds-action); }
.cal-switch button[aria-checked="true"] { color: var(--ds-on-action); }
.cal-switch button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.cal-switch svg { transition: transform 160ms ease; }
.cal-switch button:active svg { transform: scale(0.88); }
@media (prefers-reduced-motion: reduce) { .cal-switch__thumb, .cal-switch svg { transition: none; } }

/* Calendar tab: week view (time column + a column per day; the head stays while the hours scroll) */
.cal-week {
  display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); grid-template-rows: auto calc(var(--hours) * var(--hour));
  max-height: max(420px, calc(100vh - 220px)); overflow-y: auto; overscroll-behavior: contain;
}
.cal-week__corner, .cal-week__head { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--color-border); }
.cal-week__head { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border-left: 1px solid var(--color-border); }
.cal-week__dow { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); }
.cal-week__head.is-today .cal__num { background: var(--color-text); color: var(--surface); font-weight: 600; }
.cal-week__times { display: flex; flex-direction: column; }
.cal-week__times span {
  height: var(--hour); flex: none; padding-right: 8px; text-align: right; font-size: 11px; color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums; transform: translateY(-0.6em);
}
.cal-week__col {
  position: relative; border-left: 1px solid var(--color-border); cursor: pointer;
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--color-border) 45%, transparent) 1px, transparent 1px);
  background-size: 100% var(--hour), 100% var(--hour);
  background-position: 0 0, 0 calc(var(--hour) / 2);
}
.cal-week__col.is-weekend, .cal-week__head.is-weekend { background-color: color-mix(in srgb, var(--color-bg) 60%, var(--surface)); }
.cal-week__col:hover { background-color: color-mix(in srgb, var(--color-bg) 70%, var(--surface)); }
.cal__event.cal-week__event {
  position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 3px 6px; overflow: hidden; white-space: nowrap; line-height: 1.3;
}
.cal-week__event .cal__time { font-size: 11px; }
.cal-week__what { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cal-week__now { position: absolute; left: 0; right: 0; z-index: 1; height: 2px; margin-top: -1px; background: var(--color-accent); pointer-events: none; }
.cal-week__now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }

/* Calendar tab: year view (twelve small months, styled like the dashboard's mini calendar) */
.cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-lg) var(--space-md); }
.cal-year__month { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-year__name {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; margin-left: -6px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; border-radius: var(--radius-sm); color: var(--color-text);
}
.cal-year__name:hover { background: color-mix(in srgb, var(--color-border) 70%, transparent); }
.cal-year__name:focus-visible { outline: 2px solid var(--focus-ring); }
.cal-year__name.is-now { color: var(--color-accent); }
.cal-year__count {
  min-width: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; text-align: center; border-radius: var(--radius-pill);
  background: var(--color-accent-light); color: var(--color-text); font-variant-numeric: tabular-nums;
}
.cal-year .mini-cal__day { height: 28px; font-size: 12px; }

/* Subscribe dialog */
.feed-sheet { width: min(560px, calc(100% - 32px)); }
.feed-sheet .page-form { padding: 24px 24px 0; }
.feed__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.feed__how, .feed__note { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }
.feed__link { display: flex; gap: var(--space-sm); margin: var(--space-md) 0; }
.feed__link input {
  flex: 1; min-width: 0; padding: 8px 10px; font: 13px var(--font-mono, monospace); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.feed__how { display: flex; flex-direction: column; gap: 4px; padding-left: 1.1em; list-style: disc; }
.feed__how b { color: var(--color-text); font-weight: 600; }
.feed__note { margin-top: var(--space-md); font-size: 13px; color: var(--color-text-tertiary); }
.feed-sheet .page-form__actions a { text-decoration: none; }

/* Website editor: version history */
.history__list { display: flex; flex-direction: column; margin: var(--space-md) 0; max-height: 50vh; overflow: auto; }
.history__item { display: flex; align-items: center; gap: var(--space-sm); padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 14px; }
.history__item:first-child { border-top: 0; }
.history__when { flex: 1; color: var(--color-text); font-variant-numeric: tabular-nums; }
.history__ago { font-size: 12px; color: var(--color-text-tertiary); }
.history__published { margin-left: 8px; padding: 1px 8px; font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); color: var(--ds-live-text, #7a5a00); background: var(--ds-live-soft, #fff6cc); }
.history__empty { font-size: 14px; color: var(--color-text-tertiary); padding: 8px 0; }

@media (max-width: 640px) {
  .cal__title { font-size: 26px; flex-basis: 100%; }
  .cal__head .spacer { display: none; }
  .cal__head .btn { flex: 1 1 auto; justify-content: center; }
  .cal__dow { padding: 6px 2px; text-align: center; font-size: 11px; }
  .cal__day { min-height: 52px; padding: 3px; align-items: center; }
  .cal__add { display: none; }
  /* Phones: a dot per meeting in the grid, the details in the list below */
  .cal__event { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--chart-bar); font-size: 0; color: transparent; }
  .cal__event.is-past { background: var(--color-text-tertiary); }
  .cal__day { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 3px; }
  .cal__day-head { flex-basis: 100%; justify-content: center; }
  .cal-week { grid-template-columns: 36px repeat(7, minmax(0, 1fr)); }
  .cal-week__head { flex-direction: column; gap: 0; padding: 4px 0; }
  .cal-week__dow { font-size: 10px; }
  .cal-week__times span { padding-right: 4px; font-size: 10px; }
  .cal__event.cal-week__event { padding: 2px 3px; border: 0; border-left: 2px solid var(--chart-bar); border-radius: 3px; font-size: 10px; background: var(--color-accent-light); }
  .cal__event.cal-week__event.is-past { background: var(--color-bg); border-left-color: var(--color-text-tertiary); }
  .cal-week__event .cal__time { display: none; }
  .d-meetings__bar { flex-direction: column; align-items: stretch; }
  .feed__link { flex-direction: column; }
}

/* Recent activity sheet (from the hero tile), below an application opened from it, below the visit sheet */
.drawer--activity { z-index: var(--z-activity); }
.drawer--activity .drawer__panel { width: min(560px, 100%); }
.activity__feed { margin-top: var(--space-md); }
.activity__feed li { grid-template-columns: 6.5rem 1fr; padding-left: 6px; padding-right: 6px; }

/* Pipeline sheet: the applications behind one pipeline figure (same layer as Recent activity) */
.pl-list { margin-top: var(--space-md); }
.pl-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 12px 8px;
  border-bottom: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast);
}
.pl-item:last-child { border-bottom: 0; }
.pl-item:hover { background: var(--color-bg); }
.pl-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pl-item.is-archived .apps__company { color: var(--color-text-secondary); }
.pl-item__main { min-width: 0; }
.pl-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.pl-item__note { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Small calendar on the dashboard */
.mini-cal { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 84px; min-width: 0; } /* under the scrolled top menu */
@media (max-width: 860px) { .mini-cal { position: static; max-width: 420px; } }
.mini-cal__bar { display: flex; align-items: center; gap: 2px; }
.mini-cal__month { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.mini-cal__icon {
  display: grid; place-items: center; width: 28px; height: 28px; margin-left: 2px; border-radius: var(--radius-sm); color: var(--color-text-tertiary);
}
.mini-cal__icon:hover { background: color-mix(in srgb, var(--color-border) 70%, transparent); color: var(--color-text); }
.mini-cal__icon:focus-visible, .mini-cal__nav:focus-visible, .mini-cal__add:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* + : the accent button, like "+ New application" */
.mini-cal__add {
  display: grid; place-items: center; width: 28px; height: 28px; margin-left: 6px; border-radius: 50%;
  background: var(--color-accent); color: #1A1A1A; transition: filter var(--transition-fast);
}
.mini-cal__add:hover { filter: brightness(0.94); }
.mini-cal__nav { width: 28px; height: 28px; border-radius: var(--radius-sm); font-size: 16px; color: var(--color-text-secondary); }
.mini-cal__nav:hover { background: color-mix(in srgb, var(--color-border) 70%, transparent); color: var(--color-text); }
.mini-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.mini-cal__dow { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); padding-bottom: 2px; }
.mini-cal__day {
  position: relative; height: 32px; border-radius: var(--radius-sm); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-text);
}
.mini-cal__day:hover { background: color-mix(in srgb, var(--color-border) 70%, transparent); }
.mini-cal__day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.mini-cal__day.is-other { color: var(--color-text-tertiary); }
.mini-cal__day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--color-text); }
.mini-cal__day.has-meetings { font-weight: 600; }
.mini-cal__day.has-meetings::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--chart-bar);
}
.mini-cal__day[aria-pressed="true"] { background: var(--color-text); color: var(--surface); }
.mini-cal__day[aria-pressed="true"]::after { background: var(--surface); }
.mini-cal__list { border-top: 1px solid var(--color-border); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.mini-cal__label { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); }
.mini-cal__list ol { display: flex; flex-direction: column; }
.mini-cal__item { display: flex; flex-direction: column; width: 100%; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); text-align: left; border-radius: var(--radius-sm); }
.mini-cal__item:hover { background: color-mix(in srgb, var(--color-border) 70%, transparent); }
.mini-cal__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.mini-cal__item.is-past { opacity: 0.6; }
.mini-cal__when { font-size: 12px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.mini-cal__what { font-size: 13px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-cal__empty { font-size: 13px; color: var(--color-text-tertiary); }

/* ============================================================
   Applications tab: saved views (tabs), toolbar, table / board
   ============================================================ */
/* "x of y applications" under the list; sticks to the window's bottom edge while the list is taller than the window */
.ap-foot {
  position: sticky; bottom: 0; z-index: 2; margin-top: calc(-1 * var(--space-xl)); padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--space-md); min-height: 46px;
  font-size: 13px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ap-new { flex-shrink: 0; white-space: nowrap; }
@container apbar (max-width: 480px) { .ap-new__long { display: none; } } /* phones: "+ New" */

/* View tabs, Linear / Notion style: names in a row, the current one underlined; ⋯ on hover */
/* One row: view tabs (scroll sideways when many), then unsaved-changes actions, search, view options */
.ap-bar {
  display: flex; align-items: center; gap: var(--space-sm);
  container: apbar / inline-size;
  /* The container makes the row its own stacking context, so its popovers' z-index only counts inside it: the row
     itself lies above the list / grid / sticky footer after it (still below sheets and the sidebar). */
  position: relative; z-index: 4;
}
/* Narrow row: the options button shows only its icon, "+ New", a shorter search field */
@container apbar (max-width: 820px) {
  .ap-search.is-open input { width: 140px; }
  .ap-dirty__long { display: none; }
  .views { min-width: 90px; }
}
.views { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 4px; padding: 6px 2px; /* room for the current tab's edge */ overflow-x: auto; scrollbar-width: none; }
/* Phones: the Media and Projects tabs (several built-in views) get a line of their own above the buttons, faded at the
   edge so it reads as scrollable */
@media (max-width: 640px) {
  .md-bar, .pj-bar { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
  .md-bar .views, .pj-bar .views {
    flex: 1 0 100%; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
}
.views::-webkit-scrollbar { display: none; }
/* View tabs: pills like every other control (layout icon + name), the current one a raised white pill with the card
   edge (as .ds-seg's picked segment); ⋯ inside on hover */
.view-tab {
  position: relative; display: flex; align-items: center; flex-shrink: 0; height: 32px; border-radius: var(--ds-r-pill);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.view-tab:hover { background: var(--ds-surface-2); }
.view-tab.is-current { background: var(--ds-surface); box-shadow: var(--ds-card-edge), 0 1px 3px rgb(18 18 22 / 0.06); }
.view-tab__name {
  display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--color-text-secondary); border-radius: inherit;
}
.view-tab__name .d-icon { flex-shrink: 0; opacity: 0.8; }
.view-tab.is-current .view-tab__name { color: var(--color-text); font-weight: 600; }
.view-tab__name:hover { color: var(--color-text); }
.view-tab__name:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.view-tab__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-action); } /* unsaved changes */
.view-tab__caret { font-size: 9px; color: var(--color-text-tertiary); margin-left: -2px; }
.view-tab__name[aria-expanded="true"] { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.view-add {
  flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ds-r-pill); font-size: 18px; line-height: 1;
  color: var(--color-text-tertiary);
}
.view-add:hover { background: var(--ds-surface-2); color: var(--color-text); }
.view-add:focus-visible { outline: 2px solid var(--focus-ring); }

/* Search: a round icon button; open, it widens into a field (the button becomes its icon) */
.ap-search {
  display: flex; align-items: center; flex-shrink: 0; height: 34px; border: 1px solid transparent; border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ap-search__btn {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; color: var(--color-text-secondary);
}
.ap-search__btn:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-border) 70%, transparent); }
.ap-search__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.ap-search input {
  width: 0; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--color-text); outline: none;
  opacity: 0; transition: width var(--transition-base), opacity var(--transition-fast), padding var(--transition-base);
}
.ap-search.is-open { background: var(--surface); border-color: var(--color-border); }
.ap-search.is-open:focus-within { border-color: var(--color-border-hover); box-shadow: 0 0 0 3px var(--color-accent-light); outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.ap-search.is-open .ap-search__btn { color: var(--color-text-tertiary); background: none; }
.ap-search.is-open input { width: 220px; padding-right: 12px; opacity: 1; }
/* View options (Notion style): one button that sums up the view, one menu with layout, sort, which applications, filters */
/* An icon button like search: no border or background, a light highlight on hover; filters on → a dot on the icon */
.ap-options-btn {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  color: var(--color-text-secondary); border-radius: 50%;
}
.ap-options-btn:hover, .ap-options-btn[aria-expanded="true"] { color: var(--color-text); background: color-mix(in srgb, var(--color-border) 70%, transparent); }
.ap-options-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.ap-options-btn.is-set { color: var(--color-text); }
.ap-options-btn.is-set::after {
  content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--chart-bar); box-shadow: 0 0 0 2px var(--color-bg);
}
.ap-options { width: 300px; max-width: calc(100vw - 32px); }
.ap-dirty { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ap-dirty[hidden], .ap-dirty__btn[hidden] { display: none; }
.ap-dirty__btn { height: 30px; padding: 0 10px; white-space: nowrap; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
.ap-dirty__btn:hover { background: color-mix(in srgb, var(--color-border) 70%, transparent); color: var(--color-text); }
.ap-dirty__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.apps-page .table-wrap { margin: 0; }
.apps-page .board { margin: 0; padding: 0 0 4px; }
@media (min-width: 641px) {
  .apps-page .apps th:first-child, .apps-page .apps td:first-child { padding-left: var(--space-sm); }
  .apps-page .apps th:last-child, .apps-page .apps td:last-child { padding-right: var(--space-sm); }
}
.view-dialog .quick-add__bar input { font-size: 18px; }

@media (max-width: 640px) {
  /* Phones: tabs, search, options and + New fit one row; a changed view's buttons get their own line below it */
  .ap-bar { flex-wrap: wrap; }
  .views { min-width: 80px; }
  .ap-search.is-open input { width: 96px; }
  .ap-dirty { order: 5; width: 100%; justify-content: flex-end; padding: 2px 0 6px; }

  .apps-page .board { grid-template-columns: repeat(6, 82%); scroll-snap-type: x mandatory; }
}

/* --- Settings dialog (the top menu's gear): sections on the left, the chosen one's settings on the right --- */
.settings-sheet { width: min(980px, calc(100% - 32px)); height: min(680px, calc(100vh - 48px)); overflow: hidden; border-radius: var(--ds-r-sheet); }
.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100%; }
.settings__nav { display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; background: var(--color-bg); border-right: 1px solid var(--color-border); overflow-y: auto; }
.settings__heading { font-size: 13px; font-weight: 600; color: var(--color-text-tertiary); padding: 0 10px 10px; }
.settings__tab, .settings__logout { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--ds-r-control); font-size: 14px; font-weight: 500; color: var(--color-text-secondary); text-align: left; transition: background var(--transition-fast); }
.settings__tab svg { flex-shrink: 0; color: var(--color-text-tertiary); }
.settings__tab:hover, .settings__logout:hover { background: var(--ds-surface-2); color: var(--color-text); }
/* Log out: pinned to the bottom of the sidebar; the hairline above it is its own element, so the button keeps the tab's shape */
.settings__divider { height: 1px; margin: auto 10px 6px; background: var(--color-border); }
.settings__logout svg { flex-shrink: 0; color: var(--color-text-tertiary); }
/* The current section: a slight outline, inset so nothing shifts; focus ring is a thin inset line (after, so it wins) */
.settings__tab[aria-current] { background: var(--ds-action-soft); color: var(--color-text); } /* like the sidebar's .ds-nav-item */
.settings__tab:focus-visible, .settings__logout:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.settings__tab[aria-current] svg { color: var(--ds-action-text); }
.settings__main { container: settings / inline-size; overflow-y: auto; padding: 0 32px 32px; }
.settings__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 22px 0 14px; margin-bottom: 4px; background: var(--surface); }
.settings__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-right: auto; }
.settings__top .site-page__state { padding: 0; }
.settings__top .page-form__close { margin-right: -10px; }
.settings__back { display: none; margin-left: -10px; }
.settings__close-list { display: none; } /* phones only (the list has no header) */
.settings__heading-row { display: flex; align-items: center; }
.settings__heading-row .settings__heading { flex: 1; min-width: 0; }
.settings__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.settings__row[hidden] { display: none; } /* e.g. #apps-locked, shown only on plans without AI apps */
.settings__row:last-child { border-bottom: 0; }
.settings__row > :first-child { min-width: 0; }
.settings__row > :last-child { flex-shrink: 0; }
.settings__row > label { cursor: pointer; }
.settings__row:has(.settings__switch:disabled) > label { cursor: default; }
.settings__controls { display: flex; align-items: center; gap: 12px; }
.settings__controls .page-form__chip:disabled { opacity: 0.5; cursor: default; }
/* Settings that only apply while the switch above them is on: indented under it, faded while it's off */
.settings__group { margin: 0 0 4px 14px; padding-left: 16px; border-left: 2px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.settings__group:last-child { border-bottom: 0; }
.settings__group .settings__row { padding: 12px 0; }
.settings__group .settings__row:last-child { border-bottom: 0; }
.settings__group.is-off .settings__row > label { opacity: 0.5; }
.settings__group.is-off .settings__switch { opacity: 0.5; }
.settings__label { font-size: 14px; font-weight: 600; color: var(--color-text); }
.settings__hint { font-size: 13px; color: var(--color-text-tertiary); line-height: 1.45; margin-top: 2px; max-width: 460px; }
/* Settings → Plan: usage rows with a bar, then what the plan includes */
.plan-usage, .plan-features { list-style: none; margin: 0; padding: 0; }
.plan-usage__row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 0; font-size: 14px; }
.plan-usage__value { color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.plan-usage__row progress { grid-column: 1 / -1; appearance: none; width: 100%; height: 4px; border: 0; border-radius: 2px; overflow: hidden; background: var(--color-border); }
.plan-usage__row progress::-webkit-progress-bar { background: var(--color-border); }
.plan-usage__row progress::-webkit-progress-value { background: var(--color-accent); }
.plan-usage__row progress::-moz-progress-bar { background: var(--color-accent); }
.plan-features { margin-top: 16px; display: grid; gap: 6px; font-size: 14px; }
.plan-features .is-off { color: var(--color-text-tertiary); }
/* A checkbox drawn as a switch */
.settings__switch { appearance: none; position: relative; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--color-border-hover, var(--color-border)); cursor: inherit; transition: background var(--transition-fast); }
.settings__switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform var(--transition-fast); }
.settings__switch:checked { background: var(--chart-bar); }
.settings__switch:checked::after { transform: translateX(14px); }
.settings__switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.settings__main a.page-form__chip { text-decoration: none; }
@container settings (max-width: 520px) { .settings__row:not(:has(> .settings__switch)) { flex-direction: column; align-items: flex-start; gap: 10px; } }
/* Settings → Notifications: per alert Send test (a plain small link-like button), Email | Push | Both, a switch */
.segmented--sm { padding: 2px; }
.segmented--sm button { padding: 3px 10px; font-size: 12px; }
.segmented--sm button:disabled { opacity: 0.5; cursor: default; }
.settings__test { padding: 3px 6px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast); }
.settings__test:hover, .settings__test:focus-visible { background: var(--color-bg); color: var(--color-text); }
.settings__test:disabled { opacity: 0.5; cursor: progress; }
.settings__subhead { font-size: 13px; font-weight: 600; color: var(--color-text-tertiary); margin: 28px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--color-border); }
.push-devices { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.push-devices[hidden] { display: none; }
.push-device { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 12px; }
.push-device__name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 0; }
.push-device__this { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-accent-light); color: var(--color-text); }
.push-device__meta { grid-row: 2; font-size: 12px; color: var(--color-text-tertiary); }
.push-device .page-form__chip { grid-row: 1 / 3; }

/* Settings → Website: the homepage in a small browser window (read-only, a click opens the editor) */
.settings-site { padding: 16px 0 4px; }
.settings-site__window { overflow: hidden; }
.settings-site__bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); }
.settings-site__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-hover, var(--color-border)); }
.settings-site__url { flex: 1; min-width: 0; margin-left: 10px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface); font-size: 12px; color: var(--color-text-tertiary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-site__frame { position: relative; overflow: hidden; height: 300px; background: #FFFFFF; }
.settings-site__frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.settings-site__msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; font-size: 13px; color: var(--color-text-tertiary); background: var(--color-bg); }
.settings-site__msg[hidden] { display: none; }
.settings-site__open { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; background: transparent; transition: background var(--transition-fast); }
.settings-site__open span { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-text); color: var(--surface); font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.settings-site__open:hover, .settings-site__open:focus-visible { background: rgba(15, 15, 15, 0.12); }
.settings-site__open:hover span, .settings-site__open:focus-visible span { opacity: 1; transform: none; }

/* Phones: a full-screen list of the sections (rows with chevrons, Log out last); one section opens full screen with
   ‹ Settings (the dialog's is-section state, set in dashboard/settings/index.js setSettingsSection) */
@media (max-width: 640px) {
  .settings-sheet { box-sizing: border-box; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0;
    background: var(--surface); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .settings { width: 100%; height: 100%; background: var(--surface); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .settings__close-list { display: inline-flex; margin: 0 -10px 0 auto; }
  .settings__nav { padding: 4px 16px 16px; gap: 0; border-right: 0; }
  .settings__heading { display: block; font-size: 22px; font-weight: 700; color: var(--color-text); padding: 14px 0 10px; }
  .settings__tab, .settings__logout { width: 100%; min-height: 48px; padding: 12px 4px; border-radius: 0; border-bottom: 1px solid var(--color-border); font-size: 16px; }
  .settings__tab::after { content: ''; flex-shrink: 0; margin-left: auto; width: 7px; height: 7px; border-top: 1.5px solid var(--color-text-tertiary); border-right: 1.5px solid var(--color-text-tertiary); transform: rotate(45deg); }
  .settings__tab[aria-current]:not(:focus-visible) { background: none; box-shadow: none; outline: 0; color: var(--color-text-secondary); }
  .settings__logout { border-bottom: 0; margin: 0; }
  .settings__divider { display: block; margin: 8px 0 0; }
  .settings__main { display: none; width: 100%; height: 100%; box-sizing: border-box; background: var(--surface); padding: 0 16px 24px; }
  .settings-sheet.is-section .settings__nav { display: none; }
  .settings-sheet.is-section .settings__main { display: block; }
  .settings__back { display: inline-flex; align-items: center; }
}

/* Settings → Profile: photo + logo cards on the left, contact details on the right (stacked when the pane is narrow) */
.profile { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
@container settings (max-width: 640px) { .profile { grid-template-columns: 1fr; } }
.profile__images { display: flex; flex-direction: column; gap: 16px; }
.profile-img { display: flex; gap: 16px; align-items: center; padding: 16px; }
.profile-img.is-drop { box-shadow: 0 0 0 2px var(--ds-live); background: var(--ds-live-soft); }
.profile-img__preview { flex-shrink: 0; display: grid; place-items: center; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-border); }
.profile-img__preview--photo { width: 88px; height: 88px; border-radius: 50%; }
.profile-img__preview--photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-img__preview--logo { width: 120px; height: 72px; border-radius: var(--radius-md); padding: 10px; background: #FFFFFF; } /* the website's light background */
.profile-img__preview--logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.profile-img__preview--icon { width: 88px; height: 88px; border-radius: 20px; } /* like a phone's app icon */
.profile-img__preview--icon img { width: 100%; height: 100%; object-fit: cover; }
.profile-img__body { min-width: 0; }
.profile-img__body .site__h { margin-bottom: 2px; }
.profile-img__body .site__hint { margin: 0 0 10px; }
.profile-img__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-img__actions [hidden] { display: none; }
.profile-img__upload { cursor: pointer; }
.profile-img__upload:focus-within { outline: 2px solid var(--focus-ring); }
.profile__form { align-content: start; }
.profile__form .site__hint { margin: 0; }
.profile__home::before { content: '📍 '; }
.profile__home.is-warn { color: var(--chart-text); }

/* --- Website settings (#website): style cards + content blocks on the left, live preview on the right --- */
.site-page__head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.site-page__head > div { margin-right: auto; }
.site-page__title { font-size: 34px; letter-spacing: -0.02em; line-height: 1.2; }
.site-page__state { font-size: 13px; color: var(--color-text-tertiary); padding-bottom: 6px; }
.site { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.site__panel { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.site__h { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.site__h-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.site__h-row .site__h { flex: 1; min-width: 0; margin-bottom: 0; }
.site__hint { font-size: 12px; color: var(--color-text-tertiary); line-height: 1.45; margin: 6px 0 10px; }

.site-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.site-style {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; text-align: left; min-width: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.site-style:hover { border-color: var(--color-border-hover, var(--color-text-tertiary)); }
.site-style:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.site-style[aria-checked="true"] { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }
.site-style__swatch { display: flex; width: 100%; height: 28px; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.site-style__swatch span { flex: 1; }
.site-style__swatch span:first-child { flex: 2; }
.site-style__name { font-size: 14px; font-weight: 600; color: var(--color-text); max-width: 100%; overflow-wrap: anywhere; }

/* On / off switch */


.site__preview { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.site__frame {
  position: relative; height: calc(100dvh - 160px); min-height: 420px; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg);
}
.site__frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #FFFFFF; }
.site__frame.is-mobile iframe { left: 50%; translate: -50% 0; transform-origin: 50% 0; box-shadow: 0 0 0 1px var(--color-border); }

@media (max-width: 900px) {
  .site { grid-template-columns: 1fr; }
  .site__preview { position: static; }
  .site__frame { height: 70dvh; }
}

/* Website settings: font, corners, colors */

.site-custom { display: flex; flex-direction: column; gap: 12px; }
.site-custom .site__h { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; }
.site-custom .site__hint { margin: 0; }
.site__badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text-secondary); box-shadow: inset 0 0 0 1px var(--color-border); }
.site__seg { flex-wrap: wrap; border-radius: var(--radius-md); }
.site__seg button { padding: 5px 10px; }
.site__range-label { display: flex; justify-content: space-between; }
.site__out { font-weight: 500; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.site-custom input[type="range"] { width: 100%; accent-color: var(--chart-bar); }

.site-corners { display: flex; align-items: center; gap: 16px; }
.site-corners__sample { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.site-corners__card { width: 72px; height: 48px; background: var(--color-bg); box-shadow: inset 0 0 0 1.5px var(--color-text-tertiary); }
.site-corners__controls { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }

.site-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.site-color {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--surface);
}
.site-color:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.site-color input { width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; flex-shrink: 0; }
.site-color input::-webkit-color-swatch-wrapper { padding: 0; }
.site-color input::-webkit-color-swatch { border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.site-color input::-moz-color-swatch { border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.site-color__text { display: flex; flex-direction: column; min-width: 0; }
.site-color__name { font-size: 13px; font-weight: 600; }
.site-color__code { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-tertiary); }
.site__warn { font-size: 12px; color: var(--danger); margin: 0; }
.site__warn[hidden] { display: none; }

/* Website settings: Styling / Content tabs */
.site-tabs { display: flex; gap: 4px; margin: -4px 0 20px; border-bottom: 1px solid var(--color-border); }
.site-tabs button {
  padding: 8px 14px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--color-text-secondary);
  border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast);
}
.site-tabs button:hover { color: var(--color-text); }
.site-tabs button[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-text); }
.site-tabs button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-sm); }
.site__panel[hidden] { display: none; }
/* Content tab: no settings column, the preview (edited inline) takes the full width */
.site--wide { grid-template-columns: minmax(0, 1fr); }

/* Styling tab: numbered steps, preset cards with samples; the preview is a static style guide */
.site__step {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%;
  background: var(--color-text); color: var(--surface); font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.site-styles--palettes { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.site-styles--palettes .site-style__name { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.site-styles--palettes .site__badge { font-size: 10px; padding: 1px 5px; }
.site-styles--fonts, .site-styles--buttons, .site-styles--themes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.site-font__aa { font-size: 30px; line-height: 1.1; color: var(--color-text); }
.site__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-tertiary); }
.site__preview.is-guide #site-layout,
.site__preview.is-guide .site__select { display: none; }

/* Button samples (colors and corner radius of the current palette via --sb-*): a primary and a secondary button */
/* Highlight samples (Styling → Highlight): the rules of site-styles.css "Highlights", on the palette's sample colors */
.site-styles--highlights { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.hl-sample {
  display: block; width: 100%; padding: 12px 10px; margin-bottom: 4px; border-radius: var(--radius-sm);
  background: var(--sb-bg); color: var(--sb-text); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em;
}
.hl-sample mark { position: relative; z-index: 0; background: none; color: inherit; }
.hl-sample mark::after { content: ''; position: absolute; z-index: -1; left: 0; width: 100%; bottom: 0.05em; height: 0.18em; border-radius: 2px; background: var(--sb-accent); }
.hl-sample[data-hl="marker"] mark::after { left: -0.08em; right: -0.08em; width: auto; bottom: 0.12em; height: 0.42em; border-radius: 0.15em 0.05em 0.2em 0.05em; opacity: 0.85; transform: skewX(-12deg) rotate(-1deg); }
.hl-sample[data-hl="block"] mark { color: var(--sb-on-accent); }
.hl-sample[data-hl="block"] mark::after { left: -0.12em; right: -0.12em; width: auto; top: 0.1em; bottom: -0.02em; height: auto; border-radius: 0.14em; }
.hl-sample[data-hl="wavy"] mark { text-decoration: underline wavy var(--sb-accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; text-decoration-skip-ink: none; }
.hl-sample[data-hl="circle"] mark::after { left: -0.28em; right: -0.28em; width: auto; top: -0.08em; bottom: -0.12em; height: auto; background: none; border: 0.06em solid var(--sb-accent); border-radius: 0.7em; transform: rotate(-1.5deg); }
.hl-sample:is([data-hl="color"], [data-hl="italic"]) mark { color: color-mix(in srgb, var(--sb-accent) 45%, var(--sb-text)); }
.hl-sample[data-hl="italic"] mark { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: 0; }
.hl-sample:is([data-hl="wavy"], [data-hl="color"], [data-hl="italic"]) mark::after { display: none; }
.btn-sample-box { display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 10px; margin-bottom: 4px; border-radius: var(--radius-sm); background: var(--sb-bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.btn-sample { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; font-size: 11px; font-weight: 600; white-space: nowrap; border-radius: 100px; background: var(--sb-text); color: var(--sb-bg); }
.btn-sample.btn-sample--outline { background: transparent; color: var(--sb-text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sb-text) 25%, transparent); }
.btn-sample--rounded { border-radius: calc(var(--sb-r) * 0.5); }
.btn-sample--square { border-radius: 0; }
.btn-sample--outline:first-child { background: transparent; color: var(--sb-text); box-shadow: inset 0 0 0 2px var(--sb-text); }
.btn-sample--soft { background: color-mix(in srgb, var(--sb-accent) 22%, var(--sb-surface)); color: color-mix(in srgb, var(--sb-accent) 45%, var(--sb-text)); border-radius: calc(var(--sb-r) * 0.5); }
.btn-sample--soft.btn-sample--outline { background: color-mix(in srgb, var(--sb-text) 6%, transparent); box-shadow: none; color: var(--sb-text); }
.btn-sample--offset { background: var(--sb-accent); color: var(--sb-on-accent); border-radius: calc(var(--sb-r) * 0.3); box-shadow: inset 0 0 0 1.5px var(--sb-text), 2px 2px 0 var(--sb-text); }
.btn-sample--offset.btn-sample--outline { background: var(--sb-surface); color: var(--sb-text); box-shadow: inset 0 0 0 1.5px var(--sb-text), 2px 2px 0 var(--sb-text); }

/* Overall style thumbnails: a tiny page in the current palette with the style's texture, a heading, two cards */
.theme-thumb {
  position: relative; display: flex; flex-direction: column; gap: 5px; width: 100%; height: 74px; padding: 9px 10px; margin-bottom: 4px; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--sb-bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.theme-thumb__title { width: 62%; height: 7px; border-radius: 2px; background: var(--sb-text); }
.theme-thumb__line { width: 40%; height: 4px; border-radius: 2px; background: var(--sb-accent); }
.theme-thumb__cards { display: flex; gap: 6px; margin-top: auto; }
.theme-thumb__cards span { flex: 1; height: 22px; border-radius: calc(var(--sb-r) * 0.25); background: var(--sb-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.theme-thumb--classic { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sb-text) 14%, transparent) 1px, transparent 0) 0 0 / 7px 7px, radial-gradient(ellipse 60% 70% at 85% 20%, color-mix(in srgb, var(--sb-accent) 55%, transparent), transparent 70%), var(--sb-bg); }
.theme-thumb--clean .theme-thumb__cards span { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb-text) 12%, transparent); }
.theme-thumb--gradient { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--sb-accent) 45%, transparent), transparent 60%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--sb-accent) 35%, transparent), transparent 60%), var(--sb-bg); }
.theme-thumb--gradient .theme-thumb__cards span { background: color-mix(in srgb, var(--sb-surface) 60%, transparent); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
.theme-thumb--dots { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sb-text) 18%, transparent) 1px, transparent 0) 0 0 / 6px 6px, var(--sb-bg); }
.theme-thumb--grid { background: linear-gradient(color-mix(in srgb, var(--sb-text) 10%, transparent) 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(90deg, color-mix(in srgb, var(--sb-text) 10%, transparent) 1px, transparent 1px) 0 0 / 10px 10px, var(--sb-bg); }
.theme-thumb--grid .theme-thumb__cards span { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb-text) 30%, transparent); }
.theme-thumb--lines { background: repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--sb-text) 9%, transparent) 4px 5px), var(--sb-bg); }
.theme-thumb--grain { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--sb-bg); }
.theme-thumb--elevated .theme-thumb__cards span { box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.3); }
.theme-thumb--bold .theme-thumb__cards span { box-shadow: inset 0 0 0 1.5px var(--sb-text), 3px 3px 0 var(--sb-text); }
.theme-thumb--bold .theme-thumb__line { height: 6px; }
.theme-thumb--bands { background: linear-gradient(var(--sb-bg) 0 45%, color-mix(in srgb, var(--sb-accent) 18%, var(--sb-bg)) 45% 85%, var(--sb-text) 85%); }


/* Preview bar: left (back in full screen, page switch, page picker), center (device icons), right (state, open, full) */
.site__preview-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site__bar-group { display: flex; align-items: center; gap: 8px; min-width: 0; }
.site__bar-left { flex: 1 1 auto; }
.site__bar-right { margin-left: auto; }
.site__back { display: none; }
.site__full-state { display: none; }
.site__preview.is-guide :is(#site-layout, .site__picker, .site__full-btn, .site__preview-btn) { display: none; }
/* Preview: as tall as the chips beside it; Publish next to it is the top bar's one primary button */
.site__preview-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; white-space: nowrap; }
/* Publishing (dashboard/editors/shared.js publishControl): one pill that says the state. Something to publish = the
   top bar's one primary button ("Publish", "Publish changes", amber dot); nothing to publish = quiet "Live", yellow dot.
   The chevron joined to it opens Discard / View live site. */
.publish { display: inline-flex; align-items: stretch; height: 30px; flex: none; border-radius: var(--radius-pill); }
.publish[hidden] { display: none; }
.publish > button {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
  cursor: pointer; color: var(--color-text-secondary); background: var(--color-surface, #fff); border: 1px solid var(--color-border);
}
.publish__main { padding: 0 12px 0 13px; border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.publish__more { padding: 0 9px 0 7px; margin-left: -1px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.publish > button:hover { background: var(--color-bg-alt, #f4f4f4); }
.publish__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-live, #f5b400); flex: none; }
.publish__main.is-pending .publish__dot { background: #ffc94d; }
.publish:has(.is-pending) > button { color: #fff; background: var(--ds-action); border-color: var(--ds-action); }
.publish:has(.is-pending) > button:hover { background: var(--ds-action-hover); border-color: var(--ds-action-hover); }
.publish:has(.is-pending) .publish__more { border-left-color: rgb(255 255 255 / .35); }
.publish__main:disabled { opacity: .6; cursor: progress; }
/* Full screen below 1600 px: Preview, Sections and Help as icons, so the right group
   doesn't run into the page switch (their titles name them) */
@media (max-width: 1599px) {
  .site.is-full .site__bar-right .site__panel-toggle span, .site.is-full .site__preview-btn span { display: none; }
  .site.is-full .site__preview-btn { padding: 0 9px; }
}
/* below 1300 px Publish is its dot, and the page switch and the right group tighter */
@media (max-width: 1299px) {
  .site.is-full .site__bar-right { gap: 4px; }
  .site.is-full .publish__label { display: none; }
  .site.is-full .publish__main { padding: 0 9px 0 11px; }
  .site.is-full .site__preview-bar .site__bar-center #site-layout button { padding: 5px 7px; } /* outranks the full-screen size further down */
}

.site__preview.is-guide .site__bar-left { flex: 0 0 auto; }

/* The page / language picker: a pill with a globe and a chevron instead of the plain select */
.site__picker { position: relative; display: inline-flex; align-items: center; flex: 0 1 280px; min-width: 150px; }
.site__picker .site__select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 32px; padding: 0 30px 0 32px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--color-text); text-overflow: ellipsis;
  background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.site__picker .site__select:hover { border-color: var(--color-border-hover, var(--color-text-tertiary)); }
.site__picker .site__select:focus-visible { border-color: var(--chart-bar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-bar) 25%, transparent); }
.site__picker-icon, .site__picker-chevron { position: absolute; pointer-events: none; color: var(--color-text-secondary); }
.site__picker-icon { left: 12px; }
.site__picker-chevron { right: 11px; }

/* Device switcher: icons */
.site__device button { display: grid; place-items: center; width: 34px; height: 28px; padding: 0; }

/* Full screen: the whole editor fills the window. Rows: the top menu, then three columns: styling (left side menu),
   the page, sections (right side menu); each side menu collapses (.no-left / .no-right). */
.site-toc, .site__panel-toggle { display: none; }
.site.is-full {
  position: fixed; inset: 0; z-index: var(--z-editor); display: grid; gap: 0; align-items: stretch; background: var(--color-bg);
  grid-template-columns: var(--site-left) minmax(0, 1fr) var(--site-right); grid-template-rows: auto minmax(0, 1fr);
  --site-left: 340px; --site-right: 270px;
  /* liquid glass for the top bar and the floating bar (see below) */
  --glass-fill: linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--surface) 50%, transparent));
  --glass-edge: rgba(255, 255, 255, 0.65);
  --glass-shine: rgba(255, 255, 255, 0.8);
}
.site.is-full.no-left { --site-left: 0px; }
.site.is-full.no-right { --site-right: 0px; }
.site.is-full .site__preview { display: contents; }
.site.is-full .site__preview-bar {
  grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px;
  padding: 8px 12px; z-index: 3;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent), 0 6px 24px -12px rgba(0, 0, 0, 0.18);
}
.site.is-full .site__bar-right { justify-content: flex-end; margin-left: 0; }
/* The Documents bar's right group (focus, ATS, undo … Publish) is wider than half the bar: CV / Cover letter sits
   between the groups instead of in the exact middle */
.docs-ed.site.is-full .site__preview-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
.docs-ed.site.is-full .site__bar-center { justify-content: center; }
.site.is-full .site__back {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--color-text); flex-shrink: 0;
}
.site.is-full .site__back:hover, .site.is-full .site__back:focus-visible { background: var(--color-bg); }
.site.is-full .site__full-btn { display: none; }
.site.is-full .site__full-state { display: inline; font-size: 12px; color: var(--color-text-tertiary); white-space: nowrap; }
.site.is-full #site-layout button { padding: 5px 10px; font-size: 12px; }
.site.is-full .site__frame { grid-column: 2; grid-row: 2; height: auto; min-height: 0; border: 0; border-radius: 0; }
.site.is-full .site__panel-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; flex-shrink: 0; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; color: var(--color-text-secondary); border: 1px solid var(--color-border); background: var(--surface);
}
.site.is-full .site__panel-toggle:hover, .site.is-full .site__panel-toggle:focus-visible { color: var(--color-text); border-color: var(--color-text-tertiary); }
.site.is-full .site__panel-toggle[aria-pressed="true"] { color: var(--color-text); background: var(--color-bg); }
/* Undo / redo / version history: icon-only buttons; the two arrows sit together */
.site.is-full .site__undo { padding: 0 8px; }
.site.is-full #site-redo { margin-left: -4px; }
.site.is-full .site__panel-toggle:disabled { opacity: .4; cursor: default; color: var(--color-text-secondary); border-color: var(--color-border); }

/* Left side menu: the styling steps */
.site.is-full #site-panel-styling {
  grid-column: 1; grid-row: 2; min-height: 0; overflow: auto; padding: 18px 16px 40px; gap: 26px;
  background: var(--surface); border-right: 1px solid var(--color-border);
}
.site.is-full.no-left #site-panel-styling { display: none; }
.site.is-full #site-panel-styling .site-styles--fonts, .site.is-full #site-panel-styling .site-styles--buttons, .site.is-full #site-panel-styling .site-styles--highlights,
.site.is-full #site-panel-styling .site-styles--themes { grid-template-columns: 1fr 1fr; }

/* Right side menu: sections */
.site.is-full .site-toc {
  grid-column: 3; grid-row: 2; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto;
  padding: 18px 10px 40px; background: var(--surface); border-left: 1px solid var(--color-border);
}
.site.is-full.no-right .site-toc { display: none; }
.site-toc__title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); padding: 0 8px 6px; }
.site-toc__list { list-style: none; display: flex; flex-direction: column; }
.site-toc__item { position: relative; display: flex; align-items: center; border-radius: var(--radius-sm); }
.site-toc__item::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 1px; background: transparent; }
.site-toc__item.is-active::before { background: var(--color-text); }
.site-toc__item.is-active .site-toc__name { color: var(--color-text); font-weight: 600; }
.site-toc__item.is-off .site-toc__name { color: var(--color-text-tertiary); text-decoration: line-through; }
.site-toc__item.is-dragging { opacity: 0.4; }
.site-toc__item.is-drop-before { box-shadow: 0 -2px 0 var(--color-text); }
.site-toc__item.is-drop-after { box-shadow: 0 2px 0 var(--color-text); }
.site-toc__grip {
  position: absolute; left: -2px; display: grid; cursor: grab; color: var(--color-text-tertiary);
  user-select: none; opacity: 0; transition: opacity var(--transition-fast);
}
.site-toc__item:hover .site-toc__grip, .site-toc__item:focus-within .site-toc__grip { opacity: 1; }
@media (hover: none) { .site-toc__grip { opacity: 1; } }
.site-toc__jump {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 6px 8px 6px 12px; text-align: left;
  font-size: 13px; color: var(--color-text-secondary); border-radius: var(--radius-sm);
}
.site-toc__jump:hover:not(:disabled) { color: var(--color-text); }
.site-toc__jump:disabled { cursor: default; }
.site-toc__jump:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.site-toc__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-toc__shared { display: inline-flex; flex-shrink: 0; color: #2383E2; }
.site-toc__move {
  display: grid; place-items: center; width: 24px; height: 26px; flex-shrink: 0; border-radius: var(--radius-sm);
  color: var(--color-text-tertiary); font-size: 13px; opacity: 0; transition: opacity var(--transition-fast);
}
.site-toc__item:hover .site-toc__move, .site-toc__item:focus-within .site-toc__move { opacity: 1; }
.site-toc__move:hover:not(:disabled) { color: var(--color-text); }
.site-toc__move:disabled { visibility: hidden; }
.site-toc__move:focus-visible, .site-toc__eye:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
@media (hover: none) { .site-toc__move { opacity: 1; } }
.site-toc__eye {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-sm);
  color: var(--color-text-tertiary); opacity: 0; transition: opacity var(--transition-fast);
}
.site-toc__item:hover .site-toc__eye, .site-toc__item:focus-within .site-toc__eye, .site-toc__eye:focus-visible, .site-toc__eye[aria-pressed="false"] { opacity: 1; }
.site-toc__eye:hover { color: var(--color-text); }
@media (hover: none) { .site-toc__eye { opacity: 1; } }

/* Collapsible styling steps: the heading is the toggle */
.site__h-toggle { display: flex; align-items: center; width: 100%; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* collapsed: a small summary of the choice (palette dots, font, radius …) between title and chevron */
.site__h-summary { display: none; align-items: center; gap: 6px; min-width: 0; margin-left: auto; padding-left: 10px; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-custom.is-collapsed .site__h-summary { display: inline-flex; }
.site-custom.is-collapsed .site__h-summary + .site__h-chevron { margin-left: 10px; }
.site__h-dots { display: inline-flex; flex-shrink: 0; }
.site__h-dots span { width: 12px; height: 12px; margin-left: -3px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--surface), inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.site__h-corner { width: 12px; height: 12px; flex-shrink: 0; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.site__h-chevron { flex-shrink: 0; width: 8px; height: 8px; margin-left: auto; margin-right: 4px; border-right: 1.5px solid var(--color-text-tertiary); border-bottom: 1.5px solid var(--color-text-tertiary); transform: rotate(45deg) translateY(-2px); transition: transform var(--transition-fast); }
.site__h-toggle[aria-expanded="false"] .site__h-chevron { transform: rotate(-45deg); }
.site__h-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.site-custom.is-collapsed > :not(.site__h-row) { display: none; }
.site-custom.is-collapsed .site__h-row > :not(.site__h) { display: none; }

/* The side menu never scrolls sideways: everything in it may shrink, long things wrap */
.site.is-full #site-panel-styling { overflow-x: hidden; }
.site.is-full #site-panel-styling > * { min-width: 0; max-width: 100%; }
.site.is-full #site-panel-styling .site__seg { flex-wrap: wrap; }
.site.is-full #site-panel-styling .site__seg button { padding: 5px 8px; font-size: 12px; }
.site-color__name, .site-color__code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Full screen: page switch, page / language picker and device icons float above the bottom of the page */
.site__float { display: none; }
.site.is-full .site__float {
  grid-column: 2; grid-row: 2; align-self: end; justify-self: center; z-index: 3; margin-bottom: 18px; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--color-border), 0 10px 30px -8px rgba(0, 0, 0, 0.25);
}
.site.is-full .site__bar-center #site-layout button { padding: 5px 12px; font-size: 12px; }
.site.is-full .site__float .site__picker { flex: 0 1 260px; min-width: 140px; }
.site.is-full .site__float .site__picker .site__select { height: 30px; box-shadow: none; }

html.site-full { overflow: hidden; }
/* Narrow windows: the side menus lie over the page instead of beside it */
@media (max-width: 1100px) {
  .site.is-full { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .site.is-full #site-panel-styling, .site.is-full .site-toc {
    position: absolute; top: 49px; bottom: 0; z-index: 2; width: min(340px, 86vw); box-shadow: var(--shadow-lg);
  }
  .site.is-full #site-panel-styling { left: 0; }
  .site.is-full .site-toc { right: 0; width: min(280px, 86vw); }
  .site.is-full .site__preview-btn { padding: 0 9px; }
  .site.is-full .site__preview-btn span { display: none; } /* icon only, so the top bar's groups don't overlap */
  /* the three-way page switch (General / Landing / Project pages) tighter, and the save state only as the history's */
  .site.is-full .site__bar-center #site-layout button { padding: 5px 8px; }
  .site.is-full :is(#site-toggle-left, #site-toggle-right, #site-own-layout) span { display: none; } /* icons; their title names them */
  .site.is-full:not(.docs-ed) .site__bar-right .site__full-state { display: none; }
}
@media (max-width: 860px) {
  .site.is-full .site__panel-toggle span { display: none; }
  .site.is-full .site__preview-bar { grid-template-columns: auto 1fr auto; }
}

/* Full-screen editor: the top bar (its rule above) and the floating bar as liquid glass (translucent, blurred, a light
   edge and an inner highlight; the dark theme uses the dark surface with a fainter highlight) */
[data-theme="dark"] .site.is-full { --glass-edge: rgba(255, 255, 255, 0.12); --glass-shine: rgba(255, 255, 255, 0.14); }
.site.is-full .site__float {
  /* more see-through, no outlines: only a soft inner highlight and a diffuse shadow */
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 38%, transparent), color-mix(in srgb, var(--surface) 22%, transparent));
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-shine) 60%, transparent), 0 10px 40px -12px rgba(0, 0, 0, 0.22);
}
.site.is-full .site__float .segmented { background: color-mix(in srgb, var(--ds-action) 10%, transparent); }
.site.is-full .site__float .site__picker .site__select { background: color-mix(in srgb, var(--surface) 35%, transparent); border-color: transparent; }
/* their controls sit on the glass: slightly translucent too */
.site.is-full :is(.site__preview-bar, .site__float) .segmented { background: color-mix(in srgb, var(--ds-action) 12%, transparent); }
.site.is-full :is(.site__preview-bar, .site__float) :is(.site__panel-toggle, .page-form__chip, .site__picker .site__select) {
  background: color-mix(in srgb, var(--surface) 55%, transparent); border-color: color-mix(in srgb, var(--color-text) 10%, transparent);
}

/* --- Documents editor (#documents): the website editor's full-screen frame (.site.is-full) with the styling steps on
   the left and the A4 sheet in the middle; no right side menu --- */
.docs-ed.site.is-full { --site-right: 0px; }
.docs-ed .docs-ed__panel {
  grid-column: 1; grid-row: 2; min-height: 0; overflow: auto; overflow-x: hidden; padding: 18px 16px 40px; gap: 26px;
  background: var(--surface); border-right: 1px solid var(--color-border);
}
.docs-ed.no-left .docs-ed__panel { display: none; }
.docs-ed .docs-ed__panel > * { min-width: 0; max-width: 100%; }
.docs-ed .docs-ed__panel .site-styles--fonts, .docs-ed .site-styles--docs { grid-template-columns: 1fr 1fr; }
.docs-ed__presets { display: flex; flex-wrap: wrap; gap: 8px; }
.docs-ed__stage { grid-column: 2; grid-row: 2; min-height: 0; overflow: auto; padding: 20px 28px 60px; }
.docs-ed__fit { width: 100%; max-width: 794px; margin: 0 auto; }
.docs-ed .d-docs__frame { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 30px -12px rgba(0, 0, 0, 0.2); }
.docs-ed__focus { flex: 0 1 230px; }
.docs-ed .site__bar-right { gap: 8px; }
.docs-ed #docs-more { font-size: 16px; padding: 0 10px; }
.docs-ed #docs-sample button, .docs-ed #docs-lang button, .docs-ed #docs-kind button { padding: 5px 12px; font-size: 12px; }
.docs-ed [hidden] { display: none !important; }
@media (max-width: 1100px) {
  .docs-ed.site.is-full { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .docs-ed .docs-ed__panel { position: absolute; top: 49px; bottom: 0; left: 0; z-index: 2; width: min(340px, 86vw); box-shadow: var(--shadow-lg); }
  .docs-ed__stage { padding: 16px 12px 48px; }
}
@media (max-width: 860px) {
  .docs-ed .site__bar-right .site__full-state { display: none; }
  .docs-ed__focus { flex-basis: 150px; min-width: 120px; }
}

/* Styling samples, on white paper in the chosen colors (--sb-text / --sb-accent / --sb-tint) */
.doc-sample {
  display: flex; align-items: center; width: 100%; min-height: 50px; padding: 10px; margin-bottom: 4px; border-radius: var(--radius-sm);
  background: #FFFFFF; color: var(--sb-text); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.doc-h { font-size: 15px; font-weight: 600; color: var(--sb-text); }
.doc-h[data-h="underline"] { padding-bottom: 2px; border-bottom: 2px solid var(--sb-accent); }
.doc-h[data-h="bar"] { padding-left: 6px; border-left: 3px solid var(--sb-accent); }
.doc-h[data-h="caps"] { flex: 1; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid var(--sb-tint); color: color-mix(in srgb, var(--sb-accent) 55%, var(--sb-text)); }
.doc-chips { flex-wrap: wrap; gap: 4px; }
.doc-chip { font-size: 10.5px; line-height: 1; padding: 4px 7px; border-radius: 20px; background: var(--sb-tint); color: var(--sb-text); }
.doc-chips[data-chips="colorful"] .doc-chip:nth-child(1) { background: #f9a98e; }
.doc-chips[data-chips="colorful"] .doc-chip:nth-child(2) { background: #6cc5c0; }
.doc-chips[data-chips="colorful"] .doc-chip:nth-child(3) { background: #ffdb7d; }
.doc-chips[data-chips="outline"] .doc-chip { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb-text) 35%, #FFFFFF); }
.doc-chips[data-chips="plain"] { gap: 0; }
.doc-chips[data-chips="plain"] .doc-chip { background: none; padding: 0; }
.doc-chips[data-chips="plain"] .doc-chip + .doc-chip::before { content: '·'; margin: 0 5px; color: var(--sb-accent); }

/* Drawer, CV tab: where the timeline comes from */
.d-docs__note { font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); margin: 0 0 10px; }
.d-docs__note a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.docs-ed .site__seg { flex-wrap: wrap; }
.docs-ed .site__seg button { padding: 5px 10px; font-size: 12px; }
/* Several choices inside one styling step (Body: layout, section headings, spacing) */
.docs-ed__group { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.docs-ed__group > .site__hint { margin: 0 0 2px; }
.docs-ed__group .field__label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }

/* Settings → Workspace (dashboard/settings/workspace.js loadMembers()): members, open invites, your workspaces */
.members { list-style: none; margin: 0 0 8px; padding: 0; }
.members__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.members__item:last-child { border-bottom: 0; }
.members__who { min-width: 0; }
.members__who strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-chip--static, .d-chip--static:hover { cursor: default; border-color: var(--color-border); background: var(--surface); }
.members__who small { color: var(--color-text-tertiary); }
.members__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.members__link { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.members__link input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--surface); color: var(--color-text); font: inherit; }
.members__link[hidden] { display: none; }
.members__remove { background: none; border: 0; color: var(--color-text-tertiary); cursor: pointer; padding: 4px 6px; font: inherit; }
/* Settings → Connected apps: the AI apps this account allowed (logo or plug icon, name, since), like the members list */
.apps__how { margin: 0 0 4px; font-size: 14px; color: var(--color-text-secondary); }
.apps__head { margin-top: var(--space-md); border-top: 1px solid var(--color-border); }
.apps__who { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--color-text-secondary); }
.apps__logo { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; flex-shrink: 0; }
.apps__item { flex-wrap: wrap; }
.apps__access { flex-basis: 100%; display: grid; gap: 8px; padding-left: 34px; }
.apps__access .segmented { justify-self: start; }
.apps__parts { display: grid; gap: 8px; }
.apps__part { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.apps__part input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--color-text); flex-shrink: 0; }
.apps__part strong { display: block; font-weight: 500; }
.apps__part small { color: var(--color-text-tertiary); font-size: 13px; }
@media (max-width: 640px) { .apps__access { padding-left: 0; } }
.members__remove:hover { color: var(--color-text); }

/* Settings → Workspace: the open workspace on top, the owner's delete at the bottom */
.ws-current { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.ws-current .settings__hint { margin: 2px 0 0; }
.ws-danger { display: grid; justify-items: start; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.ws-danger[hidden] { display: none; }
.ws-suffix { white-space: nowrap; color: var(--color-text-tertiary); font-size: 13px; }
.quick-add__btn--danger { color: var(--danger); }
.btn[hidden], .quick-add__btn[hidden] { display: none; } /* .btn and the dialog buttons set their own display */
.members__invite-head { display: flex; margin: 4px 0 0; }
.members__invite-head .page-form__btn { padding-left: 0; } /* its text starts where the rows' text does */

/* Settings → Profile: your account's password (below the workspace's profile fields) */
.profile__password { margin-top: 24px; border-top: 1px solid var(--color-border); }
.profile__pwform { padding-bottom: 16px; }
.profile__pwform [hidden] { display: none; }

/* --- Setup wizard for a new workspace (/dashboard#welcome, public/js/dashboard/pages/onboarding.js): one question per screen,
   centered in a narrow column, lots of room around it --- */
.welcome {
  position: fixed; inset: 0; z-index: var(--z-editor); display: grid; grid-template-rows: auto 1fr;
  background: var(--ds-ground); color: var(--ds-ink); font-family: var(--ds-font-ui);
}
.welcome[hidden] { display: none; }
html.welcome-open { overflow: hidden; }
/* the top: logo | one segment per question, the phase and count under it | Finish later */
.welcome__top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--ds-space-4);
  padding: var(--ds-space-4) var(--ds-space-6); border-bottom: 1px solid var(--ds-line);
  background: color-mix(in srgb, var(--ds-surface) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px);
}
.welcome__logo { justify-self: start; height: 24px; width: auto; }
[data-theme="dark"] .welcome__logo { filter: invert(1); }
.welcome__later { justify-self: end; }
.welcome__steps { display: grid; justify-items: center; gap: 6px; }
.welcome__segs { display: flex; gap: 6px; }
.welcome__segs i { position: relative; width: 36px; height: 6px; overflow: hidden; border-radius: var(--ds-r-pill); background: var(--ds-surface-3); }
.welcome__segs i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ds-action); transform: scaleX(0); transform-origin: left; transition: transform var(--ds-t-enter) var(--ds-ease); }
.welcome__segs i.is-done::after { transform: scaleX(1); }
.welcome__segs i.is-current::after { transform: scaleX(0.5); }
.welcome__step-label { display: flex; gap: 6px; font-size: var(--ds-text-xs); line-height: 1; color: var(--ds-ink-3); font-variant-numeric: tabular-nums; }
.welcome__step-label b { font-weight: 600; color: var(--ds-ink-2); }
.welcome__step-label b::after { content: '·'; margin-left: 6px; font-weight: 400; color: var(--ds-ink-3); }
.welcome__skip { font-size: var(--ds-text-sm); color: var(--ds-ink-3); min-height: 24px; padding: 4px 6px; }
.welcome__skip:hover { color: var(--ds-ink); }
.welcome__body { overflow-y: auto; display: grid; justify-items: center; align-content: start; padding: clamp(40px, 11vh, 120px) 24px 72px; }
.welcome__screen { width: 100%; max-width: 480px; display: grid; justify-items: center; text-align: center; animation: welcome-in 0.3s ease-out; }
.welcome__body.is-wide .welcome__screen { max-width: 920px; }
.welcome__body.is-mid { padding-top: clamp(24px, 6vh, 72px); }
.welcome__body.is-mid .welcome__screen { max-width: 640px; }
.welcome__body.is-mid .welcome__content { margin-top: 28px; }
.welcome__body.is-mid .welcome__actions-row { margin-top: 28px; }
.welcome__narrow { width: 100%; max-width: 440px; justify-self: center; }
@keyframes welcome-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .welcome__screen { animation: none; } .welcome__segs i::after { transition: none; } }
.welcome__title { font: 600 clamp(28px, 3.6vw, 40px) / 1.1 var(--ds-font-display); letter-spacing: var(--ds-tracking-display); text-wrap: balance; margin: 0; }
.welcome__lead { margin: 14px 0 0; max-width: 44ch; color: var(--ds-ink-2); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.welcome__content { width: 100%; display: grid; gap: 22px; margin-top: 40px; text-align: left; }
.welcome__field { gap: 8px; }
.welcome__field .field__label { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-ink-2); }
.welcome .field input:not([type="checkbox"]), .welcome .field textarea {
  font-size: 16px; padding: 12px 14px; color: var(--ds-ink); background: var(--ds-surface);
  border: 1px solid var(--ds-line); border-radius: var(--ds-r-control); box-shadow: none;
  transition: border-color var(--ds-t-hover), box-shadow var(--ds-t-hover);
}
.welcome .field input:not([type="checkbox"]):hover, .welcome .field textarea:hover { border-color: var(--ds-line-strong); }
.welcome .field input:not([type="checkbox"]):focus-visible, .welcome .field textarea:focus-visible { outline: none; border-color: var(--ds-focus); box-shadow: 0 0 0 4px var(--ds-action-soft); }
.welcome .field input.welcome__big { font-size: 22px; padding: 18px 20px; text-align: center; border-radius: var(--ds-r-card); }
.welcome .field textarea.welcome__line { font-size: 17px; line-height: 1.45; padding: 14px 16px; resize: none; border-radius: var(--ds-r-card); }
.welcome__hint { font-size: var(--ds-text-xs); color: var(--ds-ink-3); }
.welcome__center { text-align: center; }
.welcome__actions-row { display: grid; justify-items: center; gap: 14px; margin-top: 40px; width: 100%; }
.welcome__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2); }
.welcome__next { min-width: 200px; min-height: 48px; font-weight: 600; }
.welcome__back { min-height: 48px; padding-left: 14px; }
.welcome__skip { text-decoration: underline; text-underline-offset: 3px; }
.welcome__skip:disabled { opacity: 0.5; }

.welcome__look, .welcome__action {
  display: grid; gap: 4px; padding: 18px 20px; text-align: left; border: 0; border-radius: var(--ds-r-card); color: var(--ds-ink);
  background: var(--ds-surface); box-shadow: var(--ds-card-edge); transition: box-shadow var(--ds-t-hover), transform var(--ds-t-press) var(--ds-ease);
}
.welcome__look:hover, .welcome__action:hover { box-shadow: var(--ds-card-edge-hover); }
.welcome__look:active, .welcome__action:active { transform: scale(0.99); }
.welcome__look[aria-checked="true"] { background: var(--ds-action-soft); box-shadow: 0 0 0 2px var(--ds-action); }
.welcome__look small, .welcome__action small { font-size: var(--ds-text-xs); color: var(--ds-ink-3); }

/* look */
.welcome__looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.welcome__look { grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; }
.welcome__look-name { grid-column: 2; font-weight: 600; font-size: 14px; }
.welcome__look small { grid-column: 2; }
.welcome__swatch {
  grid-row: 1 / 3; position: relative; display: grid; place-items: center; width: 48px; height: 38px;
  border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.08); font-size: 14px;
}
.welcome__swatch i { position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border-radius: 50%; }
.welcome__preview-frame {
  position: relative; overflow: hidden; height: 360px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: #FFFFFF; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10);
}
.welcome__preview-frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }

/* experience */
.welcome__entry { display: grid; gap: 18px; }
.welcome__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* a CV date: a button like the inputs, opening the month picker (month-picker.js) */
.welcome__month {
  width: 100%; padding: 9px 12px; text-align: left; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer;
}
.welcome__month.is-empty { color: var(--color-text-tertiary); }
.welcome__month:hover { border-color: var(--color-border-hover); }
.welcome__month:focus-visible, .welcome__month[aria-expanded="true"] { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: transparent; }
/* the month picker in the dashboard's own document takes its colors (light + dark; :root outranks its injected CSS) */
:root .mp {
  --mp-bg: var(--surface); --mp-text: var(--color-text); --mp-muted: var(--color-text-secondary); --mp-faint: var(--color-text-tertiary);
  --mp-line: var(--color-border); --mp-hover: color-mix(in srgb, var(--color-border) 70%, transparent);
  --mp-tint: color-mix(in srgb, var(--chart-bar) 14%, transparent); --mp-ring: var(--chart-bar); --mp-focus: var(--focus-ring);
  font-family: inherit;
}
.welcome__list { display: grid; gap: 16px; }
.welcome__card { position: relative; padding: 22px 22px 20px; }
.welcome__remove {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 1;
  color: var(--color-text-tertiary);
}
.welcome__remove:hover { background: var(--color-border); color: var(--color-text); }
.welcome__add { justify-self: center; padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.welcome__add:hover { color: var(--color-text); }
.welcome__chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; min-height: 50px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--surface);
}
.welcome__chips:focus-within { border-color: var(--color-text); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.welcome .welcome__chips input { flex: 1; min-width: 140px; border: 0; padding: 6px 8px; background: transparent; box-shadow: none; outline: none; }
.welcome__chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: var(--radius-pill); background: var(--color-accent-light); font-size: 14px; }
.welcome__chip button { width: 24px; height: 24px; border-radius: 50%; line-height: 1; color: var(--color-text-secondary); }
.welcome__chip button:hover { background: rgba(0, 0, 0, 0.08); color: var(--color-text); }

/* done */
.welcome__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.welcome__action.is-primary { grid-column: 1 / -1; background: var(--ds-action); color: var(--ds-on-action); box-shadow: none; }
.welcome__action.is-primary:hover { background: var(--ds-action-hover); }
.welcome__action.is-primary small { color: inherit; opacity: 0.75; }
.welcome__action-label { font-weight: 600; }
.welcome__actions .welcome__action:last-child:nth-child(even) { grid-column: 1 / -1; }

/* --- The wizard's moving pictures (public/js/dashboard/pages/onboarding-art.js): shapes in the app's own tokens; the
   text next to them carries the meaning, so with reduced motion they simply stand still --- */
.ob-line { display: block; height: 5px; border-radius: 3px; background: var(--ds-surface-3); }
.ob-line + .ob-line { margin-top: 5px; }
.ob-line:nth-child(3n) { width: 70%; }
.ob-line:nth-child(3n + 1) { width: 86%; }
.ob-line--ink { width: 55% !important; height: 7px; margin-bottom: 8px; background: var(--ds-ink); opacity: 0.8; }
.ob-line--on { background: var(--ds-on-action); opacity: 0.9; }

/* How it works: one stage, three beats (data-beat on the figure), the steps under it pick a beat */
.ob-how { position: relative; display: grid; gap: var(--ds-space-4); margin: 0; }
.ob-how__stage {
  container-type: inline-size; position: relative; height: 196px; overflow: hidden; border-radius: var(--ds-r-sheet);
  background: radial-gradient(120% 90% at 50% 0%, var(--ds-action-soft), transparent 70%), var(--ds-surface-2);
}
.ob-how__stage > * {
  position: absolute; left: 50%; top: 50%; opacity: var(--o, 1);
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: transform 700ms var(--ds-ease), opacity 500ms var(--ds-ease);
}
.ob-how__post {
  display: flex; align-items: center; gap: 10px; width: min(196px, 50cqi); padding: 12px 14px; z-index: 1;
  background: var(--ds-surface); border-radius: var(--ds-r-card); box-shadow: var(--ds-shadow-float);
}
.ob-how__logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--ds-action-soft); color: var(--ds-action-text); }
.ob-how__post-lines { flex: 1; }
.ob-how__tag { position: absolute; top: -7px; right: 12px; width: 30px; height: 14px; border-radius: var(--ds-r-pill); background: var(--ds-action); }
.ob-how__doc {
  width: min(108px, 27cqi); aspect-ratio: 3 / 4; padding: 12px 10px; border-radius: 10px; background: var(--ds-surface);
  box-shadow: var(--ds-card-edge), var(--ds-shadow-float);
}
.ob-how__doc--page { z-index: 2; padding: 6px; }
.ob-how__hero { display: flex; align-items: center; gap: 6px; height: 46%; margin-bottom: 8px; padding: 8px; border-radius: 6px; background: var(--ds-action); }
.ob-how__hero > span:last-child { flex: 1; }
.ob-how__face { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ds-live); }
.ob-how__doc--page > .ob-line { margin-inline: 4px; }
.ob-how__views, .ob-how__hello {
  z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: var(--ds-r-pill);
  font: 600 13px/1 var(--ds-font-ui); font-variant-numeric: tabular-nums; box-shadow: var(--ds-shadow-float);
}
.ob-how__views { background: var(--ds-live); color: var(--ds-on-live); }
.ob-how__hello { padding: 6px; border-radius: 12px 12px 12px 4px; background: var(--ds-people); color: var(--ds-on-people); }
/* beat 0: the job alone */
.ob-how__doc { --o: 0; --s: 0.55; --y: 10px; }
.ob-how__views, .ob-how__hello { --o: 0; --s: 0.4; --x: 12cqi; }
/* beat 1: the job hands over to a page, a CV and a letter */
.ob-how[data-beat="1"] .ob-how__post, .ob-how[data-beat="2"] .ob-how__post { --x: -31cqi; --s: 0.82; --o: 0.6; }
.ob-how[data-beat="1"] .ob-how__doc { --o: 1; --s: 1; --y: 0px; }
.ob-how[data-beat="1"] .ob-how__doc--cv { --x: -1cqi; --r: -8deg; --y: 8px; }
.ob-how[data-beat="1"] .ob-how__doc--letter { --x: 27cqi; --r: 8deg; --y: 8px; }
.ob-how[data-beat="1"] .ob-how__doc--page { --x: 13cqi; --y: -4px; --s: 1.04; }
/* beat 2: the page goes out, the views and a hello come in */
.ob-how[data-beat="2"] .ob-how__post { --o: 0.3; }
.ob-how[data-beat="2"] .ob-how__doc { --o: 0.45; --s: 0.9; }
.ob-how[data-beat="2"] .ob-how__doc--cv { --x: -3cqi; --r: -12deg; --y: 12px; }
.ob-how[data-beat="2"] .ob-how__doc--letter { --x: 29cqi; --r: 12deg; --y: 12px; }
.ob-how[data-beat="2"] .ob-how__doc--page { --o: 1; --x: 13cqi; --s: 1.14; }
.ob-how[data-beat="2"] .ob-how__views { --o: 1; --s: 1; --x: calc(13cqi + 70px); --y: -66px; transition-delay: 250ms; }
.ob-how[data-beat="2"] .ob-how__hello { --o: 1; --s: 1; --x: calc(13cqi - 88px); --y: 34px; transition-delay: 550ms; }
.ob-how[data-beat="2"] .ob-how__count { animation: ob-tick 0.5s 0.9s var(--ds-ease) both; }
@keyframes ob-tick { from { opacity: 0; transform: translateY(6px); } }
.ob-how__count { display: inline-block; }
.ob-how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-2); }
.ob-how__step {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; text-align: left;
  border-radius: var(--ds-r-control); color: var(--ds-ink-3); transition: background var(--ds-t-hover), color var(--ds-t-hover);
}
.ob-how__step:hover { background: var(--ds-surface-2); }
.ob-how__step[aria-pressed="true"] { color: var(--ds-ink); }
.ob-how__n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 12px/1 var(--ds-font-ui);
  background: var(--ds-surface-2); color: var(--ds-ink-2); transition: background var(--ds-t-hover), color var(--ds-t-hover);
}
.ob-how__step[aria-pressed="true"] .ob-how__n { background: var(--ds-action); color: var(--ds-on-action); }
.ob-how__label { display: grid; gap: 2px; font-size: var(--ds-text-sm); font-weight: 600; line-height: 1.3; }
.ob-how__label small { font-size: var(--ds-text-xs); font-weight: 400; color: var(--ds-ink-3); }
.ob-how__pause {
  position: absolute; top: calc(196px - 40px); right: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px;
  border-radius: var(--ds-r-pill); background: var(--ds-surface); color: var(--ds-ink-2); font-size: var(--ds-text-xs); box-shadow: var(--ds-card-edge);
}
.ob-how__pause:hover { color: var(--ds-ink); }

/* The top of your homepage in small, your line under your name as you type it (the "What do you do?" screen) */
.ob-hero {
  display: grid; gap: 14px; padding: 14px 18px 22px; text-align: left; border-radius: var(--ds-r-sheet);
  background: var(--ds-surface); box-shadow: var(--ds-card-edge), var(--ds-shadow-float);
}
.ob-hero__bar { display: flex; gap: 8px; justify-content: flex-end; }
.ob-hero__bar i { width: 34px; height: 5px; border-radius: 3px; background: var(--ds-surface-3); }
.ob-hero__main { display: flex; align-items: center; gap: 18px; }
.ob-hero__text { flex: 1; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.ob-hero__name { font: 600 26px/1.1 var(--ds-font-display); letter-spacing: var(--ds-tracking-display); color: var(--ds-ink); overflow-wrap: anywhere; }
.ob-hero__line { font-size: var(--ds-text-md); line-height: 1.45; color: var(--ds-ink-2); overflow-wrap: anywhere; transition: color var(--ds-t-hover); }
.ob-hero__line:not(.is-empty)::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--ds-action); animation: ob-caret 1s steps(1) infinite; }
.ob-hero__line.is-empty { color: var(--ds-ink-3); font-style: italic; }
.ob-hero__btns { display: flex; gap: 8px; margin-top: 4px; }
.ob-hero__btns i { width: 76px; height: 24px; border-radius: var(--ds-r-pill); background: var(--ds-ink); }
.ob-hero__btns i + i { width: 52px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ds-line-strong); }
.ob-hero__face { flex: none; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--ds-live) 0 22%, transparent 23%), var(--ds-live-soft); }
@keyframes ob-caret { 50% { opacity: 0; } }

/* Where the rest waits: the dashboard in small, the Getting started list bottom right ticking its first items */
.ob-list {
  position: relative; display: grid; grid-template-columns: 18% 1fr; gap: 12px; height: 188px; padding: 14px; overflow: hidden;
  border-radius: var(--ds-r-sheet); background: var(--ds-surface-2); text-align: left;
}
.ob-list__side { padding: 8px; border-radius: 10px; background: var(--ds-surface); }
.ob-line--side { height: 4px; }
.ob-list__main { display: grid; align-content: start; gap: 10px; padding-top: 6px; }
.ob-list__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-list__tiles i { height: 46px; border-radius: 10px; background: var(--ds-surface); }
.ob-list__card {
  position: absolute; right: 14px; bottom: 14px; width: min(220px, 52%); padding: 12px 12px 8px; border-radius: var(--ds-r-card);
  background: var(--ds-surface); box-shadow: var(--ds-shadow-dialog); animation: ob-rise 0.6s 0.2s var(--ds-ease) both, ob-ring 1.4s 1.6s ease-out 2;
}
.ob-list__bar { display: block; height: 4px; margin: -2px 0 6px; border-radius: 2px; background: var(--ds-surface-3); overflow: hidden; }
.ob-list__bar i { display: block; width: 0; height: 100%; background: var(--ds-live); animation: ob-fill 0.8s 1.3s var(--ds-ease) forwards; }
.ob-list__row { display: flex; align-items: center; gap: 8px; padding: 3px 0; animation: ob-rise 0.4s calc(0.5s + var(--i) * 0.12s) var(--ds-ease) both; }
.ob-list__row .ob-line { flex: 1; margin: 0; }
.ob-list__check { display: grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 50%; color: transparent; box-shadow: inset 0 0 0 1.5px var(--ds-line-strong); }
.ob-list__row:nth-child(-n + 4) .ob-list__check { animation: ob-check 0.3s calc(1.1s + var(--i) * 0.25s) var(--ds-ease) forwards; }
@keyframes ob-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes ob-fill { to { width: 30%; } }
@keyframes ob-check { to { color: var(--ds-on-action); background: var(--ds-action); box-shadow: none; } }
@keyframes ob-ring { from { box-shadow: var(--ds-shadow-dialog), 0 0 0 0 color-mix(in srgb, var(--ds-live) 70%, transparent); } to { box-shadow: var(--ds-shadow-dialog), 0 0 0 14px transparent; } }

@media (prefers-reduced-motion: reduce) {
  .ob-how__stage > *, .ob-how__step, .ob-how__n { transition: none; }
  .ob-how__count, .ob-hero__line::after, .ob-list * { animation: none !important; }
  .ob-list__bar i { width: 30%; }
  .ob-list__row:nth-child(-n + 4) .ob-list__check { color: var(--ds-on-action); background: var(--ds-action); box-shadow: none; }
}

@media (max-width: 760px) {
  .welcome__looks { grid-template-columns: 1fr 1fr; }
  .welcome__preview-frame { order: -1; }
}
@media (max-width: 640px) {
  .ob-how__steps { grid-template-columns: 1fr; gap: 0; }
  .ob-hero__face { width: 52px; height: 52px; }
  .ob-hero__name { font-size: 22px; }
  .ob-how__step { padding: 6px 8px; }
  .ob-how__stage { height: 188px; }
  .ob-how__pause { top: calc(188px - 40px); }
  .ob-how[data-beat="1"] .ob-how__post, .ob-how[data-beat="2"] .ob-how__post { --x: -33cqi; --s: 0.66; }
  .welcome__top { grid-template-columns: auto 1fr auto; padding: 12px 16px; }
  .welcome__logo { height: 20px; }
  .welcome__segs i { width: 20px; }
  .welcome__step-label b { display: none; }
  .welcome__body { padding: 40px 20px 56px; }
  .welcome__content { margin-top: 32px; }
  .welcome__actions { grid-template-columns: 1fr; }
  .welcome__looks { grid-template-columns: 1fr; }
}

/* --- Getting started (new workspaces): floating bottom right, a pill while minimized (public/js/dashboard/pages/onboarding.js) --- */
.getting-started {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-checklist); width: min(360px, calc(100vw - 32px));
  padding: 16px 18px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 14px); background: var(--surface);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  animation: gs-in 0.22s ease-out;
}
.getting-started.is-min { width: auto; padding: 0; border-radius: var(--radius-pill); }
.getting-started[hidden], html.welcome-open .getting-started, html.site-full .getting-started { display: none; }
@keyframes gs-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .getting-started { animation: none; } }
.getting-started__head { display: flex; align-items: center; gap: 10px; }
.getting-started__title { font-size: 15px; font-weight: 600; }
.getting-started__count { font-size: 12px; color: var(--color-text-tertiary); margin-right: auto; font-variant-numeric: tabular-nums; }
.getting-started__min { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--color-text-tertiary); }
.getting-started__min:hover { background: var(--color-border); color: var(--color-text); }
.getting-started__bar { display: block; height: 4px; margin: 10px 0 6px; border-radius: 2px; background: var(--color-border); overflow: hidden; }
.getting-started__bar span { display: block; height: 100%; background: var(--chart-bar); border-radius: inherit; }
.getting-started__list { display: grid; margin: 0; padding: 0; list-style: none; }
.getting-started__list li { display: flex; align-items: center; gap: 8px; }
.getting-started__item { flex: 1; display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; text-align: left; }
.getting-started__item:not(:disabled):hover { text-decoration: underline; text-underline-offset: 3px; }
.getting-started__check {
  display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--color-border-hover, var(--color-border));
  font-size: 11px; font-weight: 700;
}
.is-done .getting-started__check { background: var(--chart-bar); border-color: var(--chart-bar); color: #FFFFFF; }
.is-done .getting-started__item { color: var(--color-text-tertiary); text-decoration: line-through; cursor: default; }
.is-next .getting-started__item { font-weight: 600; }
.is-next .getting-started__check { border-color: var(--ds-action); box-shadow: 0 0 0 3px var(--ds-action-soft); }
/* just out of the wizard: a lift and a ring, once (public/js/dashboard/pages/onboarding.js renderChecklist) */
.getting-started.is-fresh { animation: gs-in 0.22s ease-out, gs-hello 1.4s 0.3s ease-out 2; }
@keyframes gs-hello { from { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 0 0 0 color-mix(in srgb, var(--ds-live) 75%, transparent); } to { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 0 0 16px transparent; } }
@media (prefers-reduced-motion: reduce) { .getting-started.is-fresh { animation: none; } }
.getting-started__mark { flex: none; font-size: 12px; color: var(--color-text-tertiary); text-decoration: underline; text-underline-offset: 2px; }
.getting-started__resume { width: 100%; justify-content: center; margin-top: 10px; }
.getting-started__pill { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: inherit; font-size: 14px; font-weight: 600; }
.getting-started__pill .getting-started__count { margin: 0; font-weight: 500; }
.getting-started__pill .getting-started__bar { width: 48px; margin: 0; }
.getting-started__pill:hover { background: var(--color-bg); }
@media (max-width: 640px) {
  .getting-started { right: 16px; bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 12px); }
}

/* Sign-up steps (public/js/signup-steps.js: account page + invite login) */
:root { --pw-ok: #1f7a45; }
[data-theme="dark"] { --pw-ok: #6fcf97; }
.pw-input { position: relative; display: flex; }
.pw-input input { flex: 1; padding-right: 44px !important; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 6px; background: none; color: var(--color-text-tertiary); cursor: pointer; }
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--color-text); }
.pw-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
/* A platform admin's authenticator setup (signup-steps.js mfaStep): Supabase's QR code on white, so it scans in dark mode too */
.mfa-qr { display: block; width: 180px; height: 180px; padding: 8px; background: #fff; border-radius: var(--radius-sm, 8px); }
.mfa-secret { font-family: var(--font-mono, monospace); font-size: 13px; word-break: break-all; user-select: all; }
.pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--color-text-secondary); }
.pw-rules li { display: flex; align-items: center; gap: 8px; }
.pw-rules svg { flex-shrink: 0; color: var(--color-text-tertiary); }
.pw-rules li.is-met { color: var(--color-text); }
.pw-rules li.is-met svg { color: var(--pw-ok); }
.pw-rules li.is-bad { color: var(--danger); }
.pw-rules li.is-bad svg { color: var(--danger); }
.pw-step .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The Testimonials tab (/dashboard#testimonials, dashboard/pages/testimonials.js loadTestimonials()): the link, then each submission as a card */
.tm-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tm-item { padding: 14px 16px; }
.tm-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tm-item__head .members__who { flex: 1; }
.tm-item__head .members__who strong { white-space: normal; }
.tm-item__avatar {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 13px; font-weight: 600;
}
.tm-item__traits { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tm-item__traits li { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-secondary); }
.tm-item__strength { margin: 10px 0 0; font-weight: 600; color: var(--color-text); line-height: 1.4; }
.tm-item__quote { margin: 6px 0 0; font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.tm-item__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.tm-item__foot small { color: var(--color-text-tertiary); overflow-wrap: anywhere; }

/* Viewers only read (dashboard.js load() sets data-role): no buttons that would only answer 403. */
:root[data-role="viewer"] :is(#new-app, #ap-new, #import-btn, #cal-new, #mini-cal-add, #dash-save-new, #ap-save-new) { display: none !important; }
:root[data-role="viewer"] [inert] { opacity: 0.5; }

/* Focus: the baseline for every control that has no ring of its own (zero specificity, so any rule above wins).
   Lists and menus keep the ring inside their rows. */
:where(a, button, summary, input, select, textarea, [tabindex], [role="button"], [role="menuitem"], [role="tab"]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:is(.dash__tab, .tabbar .tabbar__item, .menu-item, .menu__item, .page-form__close, .page-form__btn, .page-form__chip, .quick-add__btn,
  .gallery__close, .vcard__page, .video-dialog__option, .label-picker__color, .settings__test, .settings-site__open,
  .site.is-full .site__back, .site.is-full .site__panel-toggle):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

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

/* Reduced motion: no slide, fade or spin; state changes still happen, just at once */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .drawer { transition: none; }
}

/* Saved-view / dashboard tab lists: the tablist wrapper takes no box of its own */
.views__tabs { display: contents; }
/* A company name in a table row / pipeline sheet: a real button that looks like text */
.apps__open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.apps__open:hover { text-decoration: underline; }
.apps__open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

/* Live dashboards (dashboard/live.js paintPresence): who else is on an application, a frame in their color + avatars;
   AI apps (connected through MCP) get the sparkles avatar. --live-color is set per element. */
.card[data-live-at], .prop[data-live-at], .d-chip[data-live-at], .d-long[data-live-at], textarea[data-live-at] {
  outline: 2px solid var(--live-color); outline-offset: 2px; border-radius: var(--radius-sm);
}
.card[data-live-at] { border-radius: var(--radius-md); }
.apps tr[data-live-at] > td { background: color-mix(in srgb, var(--live-color) 7%, transparent); }
.apps tr[data-live-at] > td:first-child { box-shadow: inset 3px 0 0 var(--live-color); }
.d-long[data-live-at], .prop[data-live-at] { position: relative; }
.live-faces { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.live-faces--drawer { margin-left: auto; }
.live-face {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--live-color); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  border: 2px solid var(--surface, var(--color-bg)); box-sizing: content-box;
}
.live-face + .live-face { margin-left: -6px; }
.live-face svg { width: 13px; height: 13px; }
.live-face--ink { color: var(--surface, var(--color-bg)); } /* a black mark on the text color: light in dark mode */
.live-face--app { animation: live-pulse 1.6s ease-in-out infinite; }
.live-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 8px 2px 2px; font-size: 12px;
  color: var(--live-color); background: color-mix(in srgb, var(--live-color) 10%, transparent); border-radius: var(--radius-pill);
}
.live-tag .live-face { border: 0; }
.live-tag--chip { margin: 0 0 0 4px; padding: 0; background: none; }
.is-live-flash { animation: live-flash 1.4s ease-out; }
@keyframes live-flash { from { background-color: color-mix(in srgb, #F5C542 35%, transparent); } }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--live-color) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .live-face--app, .is-live-flash { animation: none; } }

/* The Projects tab (/dashboard#projects, public/js/dashboard/pages/projects.js): cards in the workspace's order (drag to reorder) */
/* the overview's table (Applications' .apps styles) and cards; the row's cover + title + summary */
.pj-list[hidden] { display: none; }
.pj-locked { margin: 0; padding: 10px 14px; font-size: 14px; color: var(--color-text-secondary); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.pj-locked[hidden] { display: none; }
.pj-board { grid-template-columns: repeat(2, minmax(260px, 1fr)); margin: 0; padding: 0; }
.pj-bcard { cursor: pointer; }
.pj-bcard[draggable="true"] { cursor: grab; }
.pj-bcard__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 2px; }
.pj-table td:first-child { min-width: 18rem; }
.pj-row { display: flex; align-items: center; gap: 12px; }
.pj-row__cover { flex: none; width: 56px; height: 36px; border-radius: 4px; object-fit: cover; background: var(--color-bg); border: 1px solid var(--color-border); }
.pj-row__cover--empty { display: grid; place-items: center; color: var(--color-text-tertiary); }
.pj-row__text { display: flex; flex-direction: column; min-width: 0; }
.pj-row__title { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--color-text); text-align: left; cursor: pointer; }
.pj-row__title:hover { text-decoration: underline; }
.pj-row__summary { max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--color-text-tertiary); }
.pj-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.vo-row--check input { margin: 0 2px 0 1px; accent-color: var(--color-text); }
.pj-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.pj-card { overflow: hidden; transition: box-shadow var(--transition-fast); }
.pj-card:hover { box-shadow: var(--ds-card-edge-hover); }
.pj-card.is-dragging { opacity: 0.5; }
.pj-card[draggable="true"] { cursor: grab; }
.pj-card__open { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
.pj-card__open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.pj-card__cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-bg); }
.pj-card__cover--empty { display: grid; place-items: center; color: var(--color-text-tertiary); }
.pj-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.pj-card__title { font-weight: 600; font-size: 15px; }
.pj-card__summary { font-size: 13px; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pj-card__meta { display: flex; flex-wrap: wrap; gap: 4px; }
.pj-card__foot { color: var(--color-text-tertiary); font-size: 12px; }

/* A project's sheet: its data as chips, then the page itself filling the rest (edited in place) */
.drawer--project .drawer__panel { width: min(980px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.drawer--project.is-full .drawer__panel { display: flex; }
.drawer--project .drawer__bar { flex-wrap: wrap; }
.pj-heading { margin: 0 0 var(--space-sm); font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.pj-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-sm); }
.pj-chip, .pj-chips .prop-labels {
  display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 30px; padding: 0 10px; font-size: 13px;
  color: var(--color-text-secondary); background: none; border: 1px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer;
}
.pj-chip:hover, .pj-chips .prop-labels:hover, .pj-chip:focus-within { color: var(--color-text); background: var(--color-bg); }
.pj-chip select, .pj-chip input { border: 0; background: transparent; font: inherit; color: var(--color-text); padding: 0; }
.pj-chip select { appearance: none; cursor: pointer; }
.pj-chip input { width: 16ch; }
.pj-chip input:focus { outline: none; }
.pj-chip .pj-slug__base { padding: 0; }
.pj-frame { flex: 1; min-height: 320px; }
.pj-state { font-size: 12px; color: var(--color-text-tertiary); }
.prop-value {
  display: flex; align-items: center; width: 100%; min-height: 32px; padding: 6px 8px; text-align: left; font: inherit; font-size: 14px;
  color: var(--color-text); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.prop-value:hover, .prop-value[aria-expanded="true"] { background: var(--color-bg); }
.prop-empty { color: var(--color-text-tertiary); }
.pj-slug { display: flex; align-items: center; min-width: 0; }
.pj-slug__base { padding-left: 8px; color: var(--color-text-tertiary); font-size: 14px; }
.pj-slug input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; padding: 6px 2px; border-radius: var(--radius-sm); }
.pj-slug input:hover, .pj-slug input:focus { background: var(--color-bg); }
/* the drawer's Landing page tab: which projects the page shows */
.d-site__projects { display: inline-flex; align-items: center; gap: 6px; }
/* the website editor's top bar: a project page's Template / Own layout */
.site__own-layout[aria-pressed="true"] { color: var(--color-text); background: var(--color-bg); }

/* The Media page (#media, dashboard/pages/media.js): images and PDFs as cards beside the videos, or every file as a table row */
.gallery__drop[hidden], .gallery__record[hidden], .gallery__grid[hidden], #md-table[hidden] { display: none; }
.md-card .md-img { object-fit: contain; background: repeating-conic-gradient(var(--color-bg) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; }
.md-card .md-doc { display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--color-text-tertiary); background: var(--color-bg); }
.md-card .md-doc b { font-size: 12px; letter-spacing: 0.08em; }
.vcard__page small { color: var(--color-text-tertiary); font-weight: 400; }
.md-table .md-name { display: inline-block; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.md-table .md-actions { white-space: nowrap; text-align: right; }
.md-card__top { display: flex; align-items: flex-start; gap: 4px; }
.md-card__top .vcard__name { flex: 1; min-width: 0; }
.md-card__top .row-more { margin: -4px -6px 0 0; }
.md-table .vcard__used { display: flex; flex-wrap: wrap; gap: 4px; }
#md-table { margin-top: 14px; }
/* + Add replaces the drop area and the record chip there (dropping files on the page still uploads) */

/* --- Cards: one look for every card in the tool (= .ds-card in app-components.css: the surface, --ds-r-card and the
   faint --ds-card-edge, no border). A new card class goes in this list instead of styling its own box; its own rule
   keeps only layout and padding. The calendar month grid keeps its line colour as background (the 1 px gaps). --- */
:is(.panel, .pipeline, .card, .visit, .visit-group, .vcard, .cal__grid, .cal-week, .push-device, .profile-img,
  .welcome__card, .tm-item, .pj-card, .settings-site__window, .login__card, .ds-skel-card, .help-card) {
  background: var(--ds-surface); border: 0; border-radius: var(--ds-r-card); box-shadow: var(--ds-card-edge);
}
.cal__grid { background: var(--color-border); }

/* --- Skeletons and empty states inside the dashboard's lists (dashboard/core/empty.js; the look: app-components.css) --- */
.apps tr.empty-row, .apps tr.skel-row { cursor: default; }
.apps tr.empty-row:hover, .apps tr.skel-row:hover { background: none; }
.apps tr.empty-row > td { padding: var(--space-lg) !important; border-bottom: 0; }
.apps:has(> tbody > tr.empty-row) > thead { display: none; } /* no column heads above an empty state */
.apps tr.skel-row > td .ds-skel { min-width: 2.5rem; }
.apps tr.skel-row > td:first-child .ds-skel:first-of-type { width: 9rem; }
.feed li.ds-skel-item, .feed li.feed__empty { display: flex; }
.feed li.feed__empty { justify-content: center; border-bottom: 0; }
.kpis > .ds-load-error, .board > :is(.ds-empty, .ds-load-error), .gallery__grid > :is(.ds-empty, .ds-load-error), .pj-list > li:has(> :is(.ds-empty, .ds-load-error)) { grid-column: 1 / -1; }
.gallery__grid > .ds-skel-card .ds-skel--cover { margin: calc(-1 * var(--ds-space-3)) calc(-1 * var(--ds-space-3)) var(--ds-space-2); width: calc(100% + 2 * var(--ds-space-3)); max-width: none; border-radius: var(--ds-r-card) var(--ds-r-card) 0 0; }
.pj-list > .ds-skel-card { list-style: none; }
#app-chart > .ds-empty { padding-block: var(--space-md); }
@media (max-width: 767px) {
  .apps tbody tr.empty-row, .apps tbody tr.skel-row { padding: 14px 0; }
  .apps tbody tr.skel-row > td:not(:first-child) { flex: 1; }
}