/* =========================================================================
   Greenlight — design system
   =========================================================================
   Hand-written on purpose: there is no CSS build step, so branding colours can
   be swapped at runtime through the custom properties injected by the Branding
   service, and a server update never needs Node.

   --brand / --accent and their derived tints come from <head>. Everything else
   is defined here.

   Mobile-first: every rule is written for a 375px phone, and @media (min-width)
   blocks progressively add tablet and desktop layout.
   ========================================================================= */

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

:where(a) { color: var(--link); }

/* ---------- Tokens ---------- */

:root {
  /* Neutrals — slightly warm, so the brand green does not read as clinical. */
  --grey-0:  #ffffff;
  --grey-25: #fbfbfa;
  --grey-50: #f6f6f5;
  --grey-100:#eeeeec;
  --grey-150:#e4e4e1;
  --grey-200:#d8d8d4;
  --grey-300:#bebeb8;
  --grey-400:#95958e;
  --grey-500:#71716b;
  --grey-600:#616159;
  --grey-650:#565651;
  --grey-700:#3f3f3b;
  --grey-800:#2a2a27;
  --grey-900:#1a1a18;

  --surface:        var(--grey-0);
  --surface-sunken: var(--grey-50);
  --surface-raised: var(--grey-0);
  --canvas:         var(--grey-25);

  --text:        var(--grey-900);
  --text-muted:  var(--grey-500);
  --text-subtle: var(--grey-400);
  --text-invert: #ffffff;

  --border:        var(--grey-150);
  --border-strong: var(--grey-200);

  --link: var(--brand-dark, #16794a);

  /* Semantic */
  --danger:        #c3352b;
  --danger-bg:     #fdf2f1;
  --danger-border: #f2c9c5;
  --warn:          #a96a00;
  --warn-bg:       #fff8ea;
  --warn-border:   #f0dcb4;
  --success:       #1c7a4a;
  --success-bg:    #eefaf3;
  --success-border:#bfe6d1;
  --info:          #1c5f9e;
  --info-bg:       #eef5fd;
  --info-border:   #c5dcf3;

  /* Project status palette — deliberately distinct at a glance in the grid. */
  --status-talks:     #8a8a84;
  --status-confirmed: #2f7fc4;
  --status-signed:    #6b4fd8;
  --status-underway:  #1f9d55;
  --status-complete:  #4c8a76;
  --status-cancelled: #b0403a;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-xs:  0.75rem;
  --fs-sm:  0.8125rem;
  --fs-md:  0.875rem;
  --fs-base:0.9375rem;
  --fs-lg:  1.0625rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10:2.5rem;
  --s-12:3rem;

  --radius-sm: 4px;
  --radius:    7px;
  --radius-lg: 11px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
  --shadow:    0 1px 3px rgb(0 0 0 / .07), 0 1px 2px rgb(0 0 0 / .04);
  --shadow-md: 0 4px 12px rgb(0 0 0 / .08), 0 2px 4px rgb(0 0 0 / .04);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / .12), 0 4px 8px rgb(0 0 0 / .06);

  --sidebar-w: 240px;
  --header-h:  56px;

  /* The secondary column of every two-column page. Wide enough for a
     seven-column calendar and a definition list without either one
     wrapping — see .grid--sidebar. */
  --aside-w: 360px;

  /* Comfortable thumb target; every interactive element respects it. */
  --tap: 44px;

  --ring: 0 0 0 3px rgb(var(--brand-rgb) / .28);
}

/* ---------- Base ---------- */

body {
  /* Nothing should ever scroll the page sideways; wide content scrolls inside
     its own container instead (tables, the calendar). */
  overflow-x: clip;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { line-height: 1.25; font-weight: 600; letter-spacing: -.011em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

a { text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

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

/* Skip link for keyboard users. */
.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 100;
  background: var(--brand);
  color: var(--brand-contrast);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  transition: top .15s;
}
.skip-link:focus { top: var(--s-2); }

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

/*
 * The UA stylesheet's [hidden] rule loses to any class that sets `display`,
 * so every element toggled with the hidden attribute — modals, drawers, the
 * selected-customer block, status panels — would render regardless. This must
 * stay above the component styles.
 */
[hidden] { display: none !important; }

/* =========================================================================
   Layout — app shell
   ========================================================================= */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* --- Mobile bar (drawer toggle + brand; gone once the sidebar is permanent) --- */

.app-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* --- Brand --- */

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.brand:hover { text-decoration: none; }

.brand__logo { height: 26px; width: auto; max-width: 150px; object-fit: contain; }

.brand__mark {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--brand-contrast);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
}

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

.icon-button {
  width: var(--tap); height: var(--tap);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
}
.icon-button:hover { background: var(--grey-50); color: var(--text); }
.icon-button svg { width: 20px; height: 20px; }

/* --- Navigation --- */

.nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: min(84vw, 300px);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav.is-open { transform: translateX(0); }

.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(0 0 0 / .34);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.nav__scrim.is-open { opacity: 1; pointer-events: auto; }

.nav__head {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--border);
}

.nav__body { padding: var(--s-3) var(--s-2); flex: 1 1 auto; }

.nav__section + .nav__section { margin-top: var(--s-5); }

.nav__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 0 var(--s-3);
  margin-bottom: var(--s-2);
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: 0 var(--s-3);
  border-radius: var(--radius);
  color: var(--grey-700);
  text-decoration: none;
  font-weight: 500;
  position: relative;
}
.nav__link:hover { background: var(--grey-50); color: var(--text); text-decoration: none; }
.nav__link svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .78; }

.nav__link.is-active {
  background: var(--brand-lighter);
  color: var(--brand-darker);
  font-weight: 600;
}
.nav__link.is-active svg { opacity: 1; }

.nav__badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
}

.nav__foot {
  border-top: 1px solid var(--border);
  padding: var(--s-3) var(--s-2);
}

.nav__user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  min-height: var(--tap);
}
.nav__user:hover { background: var(--grey-50); text-decoration: none; }

.avatar {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-contrast);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
}

.nav__user-meta { min-width: 0; line-height: 1.3; }
.nav__user-name { font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__user-role { font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Main --- */

.main {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-4) var(--s-3) var(--s-12);
}

.container { max-width: 1360px; margin-inline: auto; }
.container--narrow { max-width: 760px; }
.container--mid { max-width: 1040px; }

/* --- Desktop: permanent sidebar --- */

@media (min-width: 1024px) {
  .app { flex-direction: row; }

  .nav {
    position: sticky;
    top: 0;
    height: 100dvh;
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    transform: none;
    transition: none;
  }

  .nav__scrim { display: none; }

  .app__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

  .main { padding: var(--s-6) var(--s-6) var(--s-12); }
}

/* =========================================================================
   Page furniture
   ========================================================================= */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.page-head__text { flex: 1 1 260px; min-width: 0; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.page-title {
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.page-subtitle {
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin-top: var(--s-1);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb svg { width: 14px; height: 14px; opacity: .5; }

@media (min-width: 768px) {
  .page-title { font-size: var(--fs-3xl); }
}

/* =========================================================================
   Cards & panels
   ========================================================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card__head {
  display: flex;
  align-items: center;
  /* Wraps rather than forcing the card wider than the viewport: a long title
     plus an action button will not fit side by side at 375px. */
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.card__head h2, .card__head h3 {
  font-size: var(--fs-base);
  font-weight: 600;
  min-width: 0;
  flex: 1 1 auto;
}
.card__head-actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

.card__body { padding: var(--s-4); }
.card__body--flush { padding: 0; }

.card__foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card__hint { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-1); }

/*
 * Two-column pages.
 *
 * A page whose content is one tall stack wastes the whole right-hand half of a
 * desktop screen and makes the reader scroll for things that would have fitted
 * on one screen. So above 1180px the primary, actionable content goes left and
 * the reference material goes right: --sidebar for an asymmetric split (a form
 * and the answer it produces, a record and its metadata), --halves for two
 * columns of equal weight. Below that both collapse to source order, which is
 * why the source order has to read correctly on a phone.
 */
.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--sidebar { grid-template-columns: 1fr; }
.grid--halves { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr) var(--aside-w); align-items: start; }
  .grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.grid > * { min-width: 0; }

.stack { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.stack > * { min-width: 0; }
.stack--sm { gap: var(--s-2); }
.stack--lg { gap: var(--s-6); }

.row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--tight { gap: var(--s-1); }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--grey-50); text-decoration: none; }
.btn:active { background: var(--grey-100); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--primary:active { background: var(--brand-darker); }

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover { background: #a72c23; border-color: #a72c23; }

.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--grey-50); }

.btn--subtle { background: var(--grey-50); border-color: var(--border); }

.btn--sm { min-height: 34px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.btn--sm svg { width: 15px; height: 15px; }

.btn--block { width: 100%; }

.btn--icon { padding: 0; width: var(--tap); }
.btn--icon.btn--sm { width: 34px; }

.btn-group { display: inline-flex; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-strong); }
.btn-group .btn { border: 0; border-radius: 0; min-height: 38px; }
.btn-group .btn + .btn { border-left: 1px solid var(--border-strong); }
.btn-group .btn.is-active { background: var(--brand-lighter); color: var(--brand-darker); font-weight: 600; }

/* =========================================================================
   Forms
   ========================================================================= */

.field { display: flex; flex-direction: column; gap: var(--s-2); }

/*
 * A row of fields that share one line above the phone breakpoint.
 *
 * It spaces itself exactly like a single .field, so pairing two fields never
 * means placing margins by hand — which is what every one of these used to do,
 * with a `grid grid--2 mt-4` wrapper and an inline style="margin:0" on each
 * child.
 */
.field-row { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.field-row > .field + .field { margin-top: 0; }

.field + .field,
.field + .field-row,
.field-row + .field,
.field-row + .field-row { margin-top: var(--s-4); }

@media (min-width: 768px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.label {
  font-size: var(--fs-md);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.label__optional { font-weight: 400; font-size: var(--fs-xs); color: var(--text-subtle); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  /* 16px stops iOS Safari zooming on focus. */
  font-size: 16px;
  transition: border-color .12s, box-shadow .12s;
}

@media (min-width: 768px) {
  .input, .select, .textarea { font-size: var(--fs-base); }
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}

.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }

.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--grey-50);
  color: var(--text-muted);
  cursor: not-allowed;
}

.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2371716b'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%2371716b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  background-size: 18px;
  padding-right: var(--s-8);
}
html[dir="rtl"] .select { background-position: left var(--s-3) center; padding-right: var(--s-3); padding-left: var(--s-8); }

.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
  border-color: var(--danger);
}
.input.is-invalid:focus { box-shadow: 0 0 0 3px rgb(195 53 43 / .18); }

.field__error { color: var(--danger); font-size: var(--fs-sm); font-weight: 500; }
.field__hint  { color: var(--text-muted); font-size: var(--fs-sm); }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius) 0 0 var(--radius); }
.input-group__addon {
  display: grid;
  place-items: center;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--grey-50);
  color: var(--text-muted);
  font-size: var(--fs-md);
  white-space: nowrap;
}

/* Checkbox & radio */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: var(--tap);
  cursor: pointer;
  padding: var(--s-1) 0;
}
.check input { margin: 0; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; accent-color: var(--brand); cursor: pointer; }
.check__text { font-size: var(--fs-md); line-height: 1.45; }
.check__text strong { font-weight: 600; display: block; }
.check__text span { color: var(--text-muted); font-size: var(--fs-sm); }

/* A row of toggleable chips — used for weekdays, statuses, filters. */

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 38px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--grey-700);
}
.chip:hover { background: var(--grey-50); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) {
  background: var(--brand-lighter);
  border-color: var(--brand);
  color: var(--brand-darker);
}
.chip:has(input:focus-visible) { box-shadow: var(--ring); }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset > legend { font-size: var(--fs-md); font-weight: 600; padding: 0; margin-bottom: var(--s-2); }

/*
 * A form's actions, in a bar of their own at the end of it.
 *
 * It stays in the flow — so it never covers the last field once the page is
 * scrolled to the bottom — but sticks to the bottom edge while there is still
 * form above it. On a phone that is the difference between saving a project and
 * scrolling past six cards to find the button.
 */
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-4);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* At 375px the primary action takes the row and the rest wrap under it. */
.form-actions__primary { flex: 1 1 12rem; }

/*
 * A live answer the bar carries for the form above it — the project form's
 * availability. On a phone it takes a row of its own at the top of the bar;
 * wider, it sits at the far end.
 */
.form-actions__status {
  order: -1;
  flex: 1 0 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.form-actions__status:hover { text-decoration: none; filter: brightness(.97); }
.form-actions__status svg { width: 16px; height: 16px; flex: 0 0 auto; }
.form-actions__status[hidden] { display: none; }
.form-actions__status.is-clear  { background: var(--success-bg); color: var(--success); }
.form-actions__status.is-warn   { background: var(--warn-bg);    color: var(--warn); }
.form-actions__status.is-danger { background: var(--danger-bg);  color: var(--danger); }

@media (min-width: 640px) {
  .form-actions { padding: var(--s-3) var(--s-4); }
  .form-actions__primary { flex: 0 0 auto; min-width: 11rem; }
  .form-actions__status { order: 0; flex: 0 0 auto; margin-left: auto; padding: 5px 10px; border-radius: var(--radius-pill); }
}

/* =========================================================================
   Badges, pills, alerts
   ========================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
  white-space: nowrap;
}

.badge--neutral { background: var(--grey-100); color: var(--grey-700); }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warn    { background: var(--warn-bg);    color: var(--warn); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.badge--info    { background: var(--info-bg);    color: var(--info); }
.badge--brand   { background: var(--brand-lighter); color: var(--brand-darker); }

/* Status pills share one shape; the hue comes from the status token. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--s-2) 3px var(--s-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  background: var(--grey-100);
  color: var(--grey-700);
}
.status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.status--talks     { background: #f1f1ef; color: #5f5f59; }
.status--confirmed { background: #e9f2fb; color: #1f5f95; }
.status--signed    { background: #efecfd; color: #4c34ad; }
.status--underway  { background: #e7f7ee; color: #15794a; }
.status--complete  { background: #eaf4f0; color: #2f6a58; }
.status--cancelled { background: #fbeceb; color: #96322c; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid;
  border-radius: var(--radius);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.alert > svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.alert__body { min-width: 0; flex: 1 1 auto; padding-top: 1px; }

/* The dismiss control sits on the text's first line rather than stretching the
   row to a 44px tap target, which is what threw the toast out of alignment. */
.alert__dismiss {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: -2px -6px -2px 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: currentColor;
  opacity: .6;
  cursor: pointer;
}
.alert__dismiss:hover { opacity: 1; background: rgb(0 0 0 / .06); }
.alert__dismiss svg { width: 15px; height: 15px; }
.alert__title { font-weight: 600; }
.alert ul { margin: var(--s-1) 0 0; padding-left: var(--s-4); list-style: disc; }

.alert--success { background: var(--success-bg); border-color: var(--success-border); color: #14603a; }
.alert--danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: #8f2620; }
.alert--warn    { background: var(--warn-bg);    border-color: var(--warn-border);    color: #7d4f00; }
.alert--info    { background: var(--info-bg);    border-color: var(--info-border);    color: #16497a; }

/* Toast-style flash, top-right on desktop, full-width on phones. */
.flash {
  position: fixed;
  z-index: 80;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  box-shadow: var(--shadow-lg);
  animation: flash-in .24s ease-out;
}
@keyframes flash-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 768px) {
  .flash { left: auto; bottom: auto; top: calc(var(--header-h) + var(--s-3)); right: var(--s-4); max-width: 420px; }
}
/* Nothing above the content once the mobile bar is gone. */
@media (min-width: 1024px) {
  .flash { top: var(--s-3); }
}

/* =========================================================================
   Tables & lists
   ========================================================================= */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { font-size: var(--fs-md); }

.table th {
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface-sunken);
}
.table th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.table th a:hover { color: var(--text); }

.table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--grey-25); }

.table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__actions { text-align: right; white-space: nowrap; width: 1%; }
.table__primary { font-weight: 600; }
.table__meta { color: var(--text-muted); font-size: var(--fs-sm); }

/* Below tablet, tables become stacked cards driven by data-label. */
@media (max-width: 767px) {
  .table--responsive thead { display: none; }
  .table--responsive tbody tr {
    display: block;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
  }
  .table--responsive tbody tr:last-child { border-bottom: 0; }
  .table--responsive td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-4);
    padding: 3px 0;
    border: 0;
  }
  .table--responsive td::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
    flex: 0 0 auto;
  }
  .table--responsive td:not([data-label])::before { content: none; }
  .table--responsive td.table__actions { justify-content: flex-end; padding-top: var(--s-2); width: auto; }
  .table--responsive td.cell-main { display: block; padding-bottom: var(--s-2); }
}

.list { display: flex; flex-direction: column; }
.list__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  min-height: 56px;
}
.list__item:last-child { border-bottom: 0; }
a.list__item:hover { background: var(--grey-25); text-decoration: none; }
.list__item > svg { width: 18px; height: 18px; }
.list__main { flex: 1 1 auto; min-width: 0; }
.list__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__meta { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__aside { flex: 0 0 auto; text-align: right; font-size: var(--fs-sm); color: var(--text-muted); }

.empty {
  padding: var(--s-10) var(--s-4);
  text-align: center;
  color: var(--text-muted);
}
.empty svg { width: 36px; height: 36px; margin: 0 auto var(--s-3); opacity: .35; }
.empty__title { font-weight: 600; color: var(--text); margin-bottom: var(--s-1); }
.empty__hint { font-size: var(--fs-md); }
.empty--sm { padding: var(--s-6) var(--s-4); }

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.pagination__pages { display: flex; gap: var(--s-1); margin-left: auto; flex-wrap: wrap; }
.pagination__link {
  min-width: 36px; height: 36px;
  display: grid; place-items: center;
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
}
.pagination__link:hover { background: var(--grey-50); text-decoration: none; }
.pagination__link.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); font-weight: 600; }
.pagination__link.is-disabled { opacity: .4; pointer-events: none; }

/* Definition list used on every "view" page. */
.dl { display: grid; gap: var(--s-3); }
/* minmax(0, 1fr) rather than the implicit `auto`: an auto track is at least as
   wide as its min-content, and the min-content of a .truncate value is the
   whole un-wrapped string — so a long commit subject grew its own column and
   ran across the one beside it instead of ellipsizing. */
.dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.dl dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.dl dd { font-size: var(--fs-base); }
.dl dd.is-empty { color: var(--text-subtle); font-style: italic; }

@media (min-width: 640px) {
  .dl--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}

/* =========================================================================
   Calendar
   =========================================================================
   Two layouts over identical markup semantics.

   .cal--weeks   one column per week, seven weekday rows. Scrolls sideways,
                 with the weekday labels pinned to the left edge. This is the
                 spec's primary layout and happens to be the one that survives
                 a 375px screen intact.

   .cal--classic the familiar month grid: weeks run across, days down.
   ========================================================================= */

.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.cal-toolbar__label {
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -.01em;
  margin-inline: var(--s-2);
  white-space: nowrap;
}
.cal-toolbar__group { display: flex; align-items: center; gap: var(--s-1); }
.cal-toolbar__spacer { flex: 1 1 auto; }

.cal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ---------- Shared day-cell presentation ---------- */

.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 6px 6px;
  border: 0;
  background: var(--surface);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}
.cal-day:hover { background: var(--grey-25); }
.cal-day:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; z-index: 2; }

.cal-day--off { background: var(--grey-50); cursor: default; }
.cal-day--off:hover { background: var(--grey-50); }
/* …unless somebody works it anyway, which makes it a day like any other. */
.cal-day--off[role="button"] { cursor: pointer; }
.cal-day--outside { opacity: .45; }

.cal-day--today { box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }

/* Pressure wash: the busier the day, the warmer the tint. Kept very light so
   project chips stay legible on top of it. */
.cal-day--busy   { background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface)); }
.cal-day--full   { background: color-mix(in srgb, var(--warn-bg) 100%, var(--surface)); }
.cal-day--over   { background: var(--danger-bg); }
.cal-day--over:hover { background: color-mix(in srgb, var(--danger-bg) 88%, var(--grey-100)); }

.cal-day__head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
}

.cal-day__num {
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  line-height: 1;
}
.cal-day--today .cal-day__num {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-pill);
  padding: 3px 6px;
  margin: -2px -2px -2px 0;
}

.cal-day__month {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cal-day__warn {
  margin-left: auto;
  width: 16px; height: 16px;
  flex: 0 0 auto;
  color: var(--danger);
  cursor: help;
}
.cal-day__warn svg { width: 100%; height: 100%; }

.cal-day__off-label {
  font-size: 10px;
  color: var(--text-subtle);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-day__projects { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cal-chip {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--chip, var(--grey-400));
  background: color-mix(in srgb, var(--chip, var(--grey-400)) 12%, var(--surface));
  color: var(--grey-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  text-decoration: none;
}
a.cal-chip:hover { text-decoration: none; filter: brightness(.96); }

.cal-chip--talks     { --chip: var(--status-talks); }
.cal-chip--confirmed { --chip: var(--status-confirmed); }
.cal-chip--signed    { --chip: var(--status-signed); }
.cal-chip--underway  { --chip: var(--status-underway); }
.cal-chip--complete  { --chip: var(--status-complete); }
.cal-chip--cancelled { --chip: var(--status-cancelled); text-decoration: line-through; opacity: .7; }

.cal-chip--start { border-radius: var(--radius-sm); }
.cal-chip--more {
  font-size: 10px;
  color: var(--text-muted);
  padding: 0 5px;
  border: 0;
  background: none;
  font-weight: 600;
}

/* ---------- Weeks layout ---------- */

.cal--weeks {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;

  /* The weekday labels are a sticky column at the left edge. Without matching
     scroll padding, a snap point aligns the week with the scrollport edge and
     the browser parks it underneath them. */
  scroll-padding-left: 46px;
}

.cal-weekdays {
  position: sticky;
  left: 0;
  z-index: 3;
  flex: 0 0 46px;
  display: grid;
  grid-template-rows: 34px repeat(7, minmax(74px, 1fr));
  background: var(--surface-sunken);
  border-right: 1px solid var(--border-strong);
}

.cal-weekdays__spacer { border-bottom: 1px solid var(--border); }

.cal-weekdays__day {
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.cal-weekdays__day:last-child { border-bottom: 0; }
.cal-weekdays__day--off { color: var(--grey-300); }

.cal-week {
  flex: 0 0 132px;
  display: grid;
  grid-template-rows: 34px repeat(7, minmax(74px, 1fr));
  border-right: 1px solid var(--border);
  scroll-snap-align: start;
  min-width: 0;
}
.cal-week:last-child { border-right: 0; }

.cal-week__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--grey-650);
  position: sticky;
  top: 0;
  z-index: 2;
}
.cal-week__num { font-variant-numeric: tabular-nums; }
.cal-week__range { font-weight: 500; color: var(--text-subtle); font-size: 10px; }
.cal-week__head--current { background: var(--brand-lighter); color: var(--brand-darker); }

.cal--weeks .cal-day { border-bottom: 1px solid var(--border); }
.cal--weeks .cal-day:last-child { border-bottom: 0; }

@media (min-width: 768px) {
  .cal-weekdays { flex-basis: 58px; }
  .cal-week { flex-basis: 150px; }
  .cal--weeks { scroll-padding-left: 58px; }
}

@media (min-width: 1280px) {
  /* Enough room to let the weeks share the width rather than scroll. */
  .cal-week { flex: 1 1 150px; }
}

/* ---------- Classic month layout ---------- */

.cal--classic { display: block; }

.cal-classic__head {
  display: grid;
  grid-template-columns: 30px repeat(7, minmax(0, 1fr));
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
}
.cal-classic__head div {
  padding: var(--s-2) 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-subtle);
  overflow: hidden;
}

.cal-classic__row {
  display: grid;
  grid-template-columns: 30px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}
.cal-classic__row:last-child { border-bottom: 0; }

.cal-classic__week {
  display: grid;
  place-items: center;
  background: var(--surface-sunken);
  border-right: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.cal-classic__week a { color: inherit; text-decoration: none; }

.cal--classic .cal-day {
  min-height: 88px;
  border-right: 1px solid var(--border);
}
.cal--classic .cal-day:last-child { border-right: 0; }

@media (min-width: 768px) {
  .cal-classic__head { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); }
  .cal-classic__row  { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); }
  .cal-classic__head div { font-size: var(--fs-xs); padding: var(--s-2); }
  .cal--classic .cal-day { min-height: 118px; }
}

/* ---------- Legend & summary ---------- */

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.cal-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend__swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-strong); }

/* ---------- Day drawer ---------- */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(0 0 0 / .38);
}

.drawer {
  position: fixed;
  z-index: 71;
  left: 0; right: 0; bottom: 0;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  animation: drawer-up .22s cubic-bezier(.32, .72, 0, 1);
}
@keyframes drawer-up { from { transform: translateY(100%); } to { transform: none; } }

.drawer__grip {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--grey-200);
  margin: var(--s-2) auto 0;
  flex: 0 0 auto;
}

.drawer__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.drawer__title { font-weight: 600; font-size: var(--fs-lg); }
.drawer__body { padding: var(--s-4); overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }

@media (min-width: 768px) {
  .drawer {
    left: auto;
    top: 0;
    bottom: 0;
    width: min(440px, 92vw);
    max-height: none;
    border-radius: 0;
    animation: drawer-in .22s cubic-bezier(.32, .72, 0, 1);
  }
  @keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
  .drawer__grip { display: none; }
}

/* Capacity meter used in the drawer and on the dashboard. */
.meter { display: grid; gap: 4px; }
.meter__top { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-sm); }
.meter__name { font-weight: 600; }
.meter__value { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter__track {
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--grey-100);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brand);
  transition: width .2s;
}
.meter--full .meter__fill { background: var(--warn); }
.meter--over .meter__fill { background: var(--danger); }
.meter--over .meter__value { color: var(--danger); font-weight: 600; }

/* =========================================================================
   Modals, tabs, misc components
   ========================================================================= */

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgb(0 0 0 / .42);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
}

.modal {
  position: relative;
  z-index: 91;
  width: 100%;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  animation: drawer-up .2s cubic-bezier(.32, .72, 0, 1);
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.modal__title { font-size: var(--fs-lg); font-weight: 600; }
.modal__hint { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.modal__body { padding: var(--s-4); overflow-y: auto; flex: 1 1 auto; }
.modal__foot {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  flex: 0 0 auto;
}
.modal__foot .btn { flex: 1 1 auto; }

@media (min-width: 640px) {
  .modal-scrim { align-items: center; padding: var(--s-4); }
  .modal {
    max-width: 540px;
    border-radius: var(--radius-lg);
    animation: modal-in .18s ease-out;
  }
  @keyframes modal-in {
    from { opacity: 0; transform: scale(.97) translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  .modal--wide { max-width: 720px; }
  .modal__foot { justify-content: flex-end; }
  .modal__foot .btn { flex: 0 0 auto; }
}

.tabs {
  display: flex;
  gap: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__link {
  padding: var(--s-3) var(--s-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-md);
  white-space: nowrap;
}
.tabs__link:hover { color: var(--text); text-decoration: none; }
.tabs__link.is-active { color: var(--brand-darker); border-bottom-color: var(--brand); font-weight: 600; }

.stat {
  display: grid;
  gap: 2px;
  padding: var(--s-4);
}
.stat__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.stat__value { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat__meta  { font-size: var(--fs-sm); color: var(--text-muted); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat-row > * { background: var(--surface); }

@media (min-width: 900px) {
  .stat-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--grey-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.55;
  color: var(--grey-800);
}
.code--wrap { white-space: pre-wrap; word-break: break-all; }

.log {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  background: var(--grey-900);
  color: #d7d7d2;
  border-radius: var(--radius);
  padding: var(--s-3);
  max-height: 24rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* A log that fills in later: at full height from the moment it appears, so
   scrolling to it stays meaningful. Left to size itself it would open as a
   sliver, the page would scroll to that sliver, and the output landing would
   push everything below it — including the sliver — back out of view. */
.log--reserved { height: 24rem; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.divider { height: 1px; background: var(--border); border: 0; margin: var(--s-4) 0; }

/* Colour swatch input pairing a native picker with a hex field. */
.colour-field { display: flex; align-items: center; gap: var(--s-2); }
.colour-field input[type="color"] {
  width: 46px; height: 44px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  flex: 0 0 auto;
}
.colour-field .input { font-family: var(--font-mono); text-transform: lowercase; }

.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--grey-25);
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.file-drop:hover { border-color: var(--brand); background: var(--brand-lighter); color: var(--brand-darker); }
.file-drop svg { width: 24px; height: 24px; opacity: .6; }
.file-drop input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }

/* =========================================================================
   Auth pages
   ========================================================================= */

.auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--s-5) var(--s-4) var(--s-8);
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--brand-lighter), transparent 62%),
    var(--canvas);
}

.auth__box { width: 100%; max-width: 400px; }

.auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  text-align: center;
}
.auth__brand img { max-height: 52px; width: auto; max-width: 100%; }
.auth__mark {
  width: 48px; height: 48px;
  border-radius: var(--radius-lg);
  background: var(--brand);
  color: var(--brand-contrast);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--fs-xl);
  box-shadow: var(--shadow-md);
}
.auth__name { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }

.auth__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s-5);
}

.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.auth__divider::before, .auth__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.auth__foot {
  margin-top: var(--s-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  line-height: 1.6;
}
.auth__foot a { color: var(--text-muted); }

/* =========================================================================
   Utilities
   ========================================================================= */

.muted   { color: var(--text-muted); }
.subtle  { color: var(--text-subtle); }
.small   { font-size: var(--fs-sm); }
.tiny    { font-size: var(--fs-xs); }
.strong  { font-weight: 600; }
.nowrap  { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: var(--font-mono); font-size: .95em; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.ml-auto { margin-left: auto; }

.flex-1 { flex: 1 1 auto; min-width: 0; }
.hide { display: none !important; }

@media (max-width: 639px) { .hide-xs { display: none !important; } }
@media (max-width: 767px) { .hide-sm { display: none !important; } }
@media (min-width: 768px) { .show-sm-only { display: none !important; } }
@media (max-width: 1023px) { .hide-md { display: none !important; } }
/* Hidden once the sidebar becomes permanent. */
@media (min-width: 1024px) { .hide-lg { display: none !important; } }

@media print {
  .app-bar, .nav, .page-head__actions, .cal-toolbar, .form-actions, .flash { display: none !important; }
  .app { display: block; }
  .main { padding: 0; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .cal--weeks { overflow: visible; }
}

/* Dashboard four-week pressure strip. */
.dash-strip { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 520px) { .dash-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dash-strip__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-subtle);
  margin-bottom: 4px;
  text-align: center;
}
.dash-strip__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.dash-strip__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--grey-100);
  color: var(--grey-600);
  text-decoration: none;
}
.dash-strip__day:hover { text-decoration: none; outline: 1px solid var(--brand); }
.dash-strip__day.is-off   { background: var(--grey-50); color: var(--grey-300); }
.dash-strip__day.is-busy  { background: #fdf0d6; color: #7d5a12; }
.dash-strip__day.is-full  { background: #fbe3b4; color: #6f4d09; }
.dash-strip__day.is-over  { background: var(--danger); color: #fff; }
.dash-strip__day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }

/* Calendar filter popover — a plain <details>, so it works without JS. */
.cal-filter { position: relative; }
.cal-filter > summary { list-style: none; cursor: pointer; }
.cal-filter > summary::-webkit-details-marker { display: none; }

.cal-filter__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-2));
  z-index: 30;
  width: min(92vw, 340px);
  padding: var(--s-4);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 639px) {
  .cal-filter__panel { position: fixed; left: var(--s-3); right: var(--s-3); width: auto; }
}

/* ---------- Resource allocation picker ---------- */

.alloc-group + .alloc-group { margin-top: var(--s-5); }

.alloc-group__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--grey-650);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.alloc-group__head svg { width: 16px; height: 16px; opacity: .7; }

.alloc-grid { display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .alloc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.alloc-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  min-height: var(--tap);
}
.alloc-row:hover { border-color: var(--border-strong); }
.alloc-row.is-set { border-color: var(--brand); background: var(--brand-lighter); }

.alloc-row__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

.alloc-row__name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); font-weight: 500; line-height: 1.3; }
.alloc-row__name small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }

.alloc-row__input {
  width: 68px;
  flex: 0 0 auto;
  min-height: 38px;
  text-align: center;
  padding: 4px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Selected customer & combobox ---------- */

.picked {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--grey-25);
}
.picked .avatar { background: var(--accent-light); color: var(--accent-dark); }

.combo { position: relative; }
.combo__results {
  position: absolute;
  z-index: 25;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  padding: 0;
}
.combo__results .list__item { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.combo__results .list__item + .list__item { border-top: 1px solid var(--border); }
.combo__results .list__item:hover,
.combo__results .list__item.is-active { background: var(--brand-lighter); }

/*
 * The availability panel sizes its contents to its own width, not the
 * screen's: the same answer sits in a sidebar, across the full width of a
 * desktop, and down a phone, and container queries let one set of markup
 * suit all three.
 *
 * It reserves a height before the first answer lands, since below the form
 * it has content under it that an answer arriving late would shove down.
 */
.conflict-panel { container: avail / inline-size; min-height: 16rem; }

/* A re-check dims the last answer rather than replacing it with a spinner, so
   the calendar does not flicker while the planner is still typing. */
.conflict-panel.is-busy { opacity: .55; transition: opacity .12s ease; }

/* A fixed site that could cover a shortage, and the button that borrows it. */
.avail-lend { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--fs-sm); }

/* The days a category is short, as spans the planner can pick to inspect. */
.alert .avail-shorts { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-2); }
.avail-shorts li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); }
.avail-ranges { display: flex; flex-wrap: wrap; gap: 4px; }
.avail-range {
  padding: 1px 8px;
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
}
.avail-range:hover { border-color: currentColor; }
.avail-range--more { cursor: default; border-style: dashed; }
.avail-range--more:hover { border-color: var(--warn-border); }

/* Calendar and day detail: stacked in a sidebar or on a phone, side by side
   once the panel is wide enough for both to be read at a comfortable size. */
.avail {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.avail > * { min-width: 0; }

@container avail (min-width: 46rem) {
  .avail { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
}

/* The span the draft actually covers, stated in words above the grid —
   because a grid of day numbers cannot say which months they are in. */
.conflict-run {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  align-items: baseline;
  margin-bottom: var(--s-3);
  font-size: var(--fs-md);
}
.conflict-run__dates { font-weight: 600; }
.conflict-run__days  { color: var(--text-muted); margin-left: auto; }

.avail__day {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--grey-25);
}

.avail-day__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.avail-day__date { font-weight: 600; font-size: var(--fs-md); margin-right: auto; }
.avail-day__hint { font-size: var(--fs-sm); color: var(--text-muted); }
.avail-day__loads { display: grid; gap: var(--s-3); }
.avail-day__note { font-size: var(--fs-xs); color: var(--text-muted); }

/* Who holds a category that day: this job first, then everybody else. */
.avail-day__who { display: grid; gap: 1px; font-size: var(--fs-xs); color: var(--text-muted); }
.avail-day__who li { display: flex; gap: var(--s-2); }
.avail-day__who li > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avail-day__who b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.avail-day__who .is-self { color: var(--brand-darker); font-weight: 600; }
.avail-day__who .is-site { border-top: 1px dashed var(--border); padding-top: 2px; margin-top: 1px; }

/* Borrowing from fixed sites, folded under the allocation picker. */
.loans { margin-top: var(--s-5); padding-top: var(--s-2); border-top: 1px solid var(--border); }
.loans__summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.loans__summary::-webkit-details-marker { display: none; }
.loans__summary svg { width: 16px; height: 16px; opacity: .7; flex: 0 0 auto; }
.loans__chevron { transition: transform .15s; }
.loans[open] .loans__chevron { transform: rotate(180deg); }
.loans .alloc-group + .alloc-group { margin-top: var(--s-4); }

/* -------------------------------------------------------------------------
   Project form

   Three slots: the job being described, the availability answer, and the
   commercial detail. Which one belongs where depends entirely on the screen.

   On a phone the answer has to sit directly under the inputs that produce it —
   a planner on the phone to a customer should not have to scroll past the
   quoted price to find out whether the job fits. On a desktop the planner
   chooses: beside the form in a sticky column, where it stays on screen
   through the whole conversation, or across the full width under the inputs,
   where the calendar and the day detail have room to be read side by side.
   ------------------------------------------------------------------------- */

.project-form { display: grid; gap: var(--s-4); }

/* Source order is main, side, extra — reordered here so a phone reads
   details → availability → price, and the two-column rules below place
   everything explicitly and ignore order entirely. */
.project-form__side  { order: 1; }
.project-form__extra { order: 2; }

/* The position switch only means something where there are two columns.
   Kept compact, so the head it sits in stays the height of every other. */
.project-form__layout { display: none; margin: -6px 0; }
.project-form__layout .btn { min-height: 30px; width: 32px; }
.project-form__layout .btn svg { width: 16px; height: 16px; }

@media (min-width: 1180px) {
  /*
   * Beside, the answer gets close to half the width: at a fixed sidebar's
   * 360px its calendar was a strip of 30px squares nobody could read at a
   * glance, while the form beside it needed nothing like the rest.
   */
  .project-form {
    grid-template-columns: minmax(0, 1fr) minmax(var(--aside-w), .85fr);
    grid-template-areas:
      "main  side"
      "extra side";
    align-items: start;
  }

  .project-form__main  { grid-area: main; }
  .project-form__extra { grid-area: extra; }
  .project-form__layout { display: flex; }

  /*
   * Capped to the viewport with its own scrollbar: a three-month run draws a
   * calendar taller than the screen, and a sticky element taller than the
   * viewport can never show its own bottom. The action bar that sticks to the
   * bottom edge is taken off too, or it would cover the last of the panel.
   */
  .project-form__side {
    grid-area: side;
    position: sticky;
    top: var(--s-4);
    max-height: calc(100dvh - var(--s-4) - var(--form-actions-h, 5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Below, the price and notes take the right-hand column beside the job,
     and the answer spans both under the inputs that drive it. */
  .project-form[data-layout="below"] {
    grid-template-columns: minmax(0, 1.6fr) minmax(var(--aside-w), 1fr);
    grid-template-areas:
      "main extra"
      "side side";
  }
  .project-form[data-layout="below"] .project-form__side {
    position: static;
    max-height: none;
    overflow: visible;
  }

  /* Beside the form the panel is on screen already; the bar need not
     repeat it. */
  .project-form:not([data-layout="below"]) ~ .form-actions .form-actions__status { display: none; }
}

/* ---------- Project timeline grid ----------
   One project's run, drawn as a calendar: seven fluid columns behind fixed
   weekday headings, one row per week, a week-number gutter down the left.

   It used to be a column per week, scrolling sideways. That made the whole
   component's width depend on how long the project was — a one-day job drew a
   single 34px stripe adrift in the panel, and a three-month job scrolled out
   of sight inside a 340px sidebar. Seven columns are always seven columns:
   the run grows downwards, the component never changes width, and the same
   markup fits a 375px phone and a sidebar without either scrolling. */

.proj-cal { padding: var(--s-4); }

/* Inside the project form's availability panel the card body already pads. */
.proj-cal--flush { padding: 0; }

/* Capped so that on a wide page the cells stay day-sized rather than
   stretching into banners. */
.proj-cal__grid { display: grid; gap: 3px; max-width: 32rem; }

.proj-cal__head,
.proj-cal__week {
  display: grid;
  /* The gutter holds a week number and, in the heading, whatever the
     deployment's language abbreviates "week" to — "W" in English, "Εβδ." in
     Greek — so it is sized for the longer of those, and clips rather than
     stealing width from the seven day columns. */
  grid-template-columns: 2.1rem repeat(7, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}

.proj-cal__head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding-bottom: 2px;
}
.proj-cal__head > * { text-align: center; overflow: hidden; }
.proj-cal__wd--off { opacity: .5; }

.proj-cal__wnum {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-subtle);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.proj-cal__day {
  position: relative;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--grey-100);
  color: var(--grey-600);
  border-radius: 3px;
}
.proj-cal__day.is-off { background: var(--grey-50); color: var(--grey-300); }
.proj-cal__day.is-on {
  background: var(--brand);
  color: var(--brand-contrast);
}
.proj-cal__day.is-conflict { background: var(--danger); color: #fff; }
.proj-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }

/* Fits, but with nothing to spare in something this job needs. */
.proj-cal__day.is-full::after,
.cal-legend__swatch--full::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; bottom: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--warn-border);
}
.cal-legend__swatch--full { position: relative; background: var(--brand); border-color: var(--brand); }
.cal-legend__swatch--full::after { left: 1px; right: 1px; bottom: 1px; height: 2px; }

.proj-cal__warn { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; }

/* In the availability panel every day of the run can be picked for its
   detail, so those days are buttons. */
button.proj-cal__day {
  width: 100%;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
button.proj-cal__day:hover { filter: brightness(1.08); }
button.proj-cal__day:focus-visible { outline: 2px solid var(--brand-darker); outline-offset: 2px; z-index: 1; }
.proj-cal__day.is-selected { outline: 2px solid var(--grey-900); outline-offset: 2px; z-index: 1; }

/* How short, on the day itself — once the panel is wide enough for the cell
   to carry it. Until then the corner warning says only that it is. */
.proj-cal__short { display: none; }

@container avail (min-width: 18rem) {
  .conflict-panel .proj-cal__grid { max-width: none; gap: 4px; }
  .conflict-panel .proj-cal__head,
  .conflict-panel .proj-cal__week { gap: 4px; }
  .conflict-panel .proj-cal__day { height: 44px; font-size: 12px; align-content: center; gap: 1px; }
  .conflict-panel .proj-cal__short { display: block; font-size: 10px; font-weight: 700; line-height: 1; }
  .conflict-panel .proj-cal__warn { display: none; }
}

.proj-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.file-badge {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--grey-100);
  color: var(--grey-650);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  overflow: hidden;
}

/* ---------- Repeatable contact rows ---------- */

.contact-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3);
  background: var(--grey-25);
}

.contact-row__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.contact-row__num { font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; }

.contact-row__grid { display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .contact-row__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.res-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; align-self: flex-start; margin-top: 6px; }

.passkey-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--grey-25);
}
.passkey-row .avatar { background: var(--brand-lighter); color: var(--brand-darker); }

/* Renaming swaps the name for this input in place, so it sits where the label
   was rather than reflowing the row around a full-width field. */
.passkey-row__input { max-width: 320px; }

/* Two icon buttons, side by side even at 375px, where .row would wrap them
   into a column and leave the row twice as tall as it needs to be. */
.passkey-row__actions { flex-wrap: nowrap; flex: 0 0 auto; }

.brand-preview { padding: var(--s-3); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--grey-25); }
.brand-asset { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--grey-25); }

/* Icons carry width/height attributes, but flex containers can still stretch
   them; pin every icon inside common containers. */
.card__head > svg,
.list__item > svg,
.alert > svg,
.hcheck svg,
.empty svg,
.dl svg { flex: 0 0 auto; }

.card__head > svg { width: 18px; height: 18px; opacity: .75; }

/* ---------- Health checks ---------- */

.hcheck {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.hcheck__icon {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-top: 1px;
}

.hcheck--ok      { border-color: var(--success-border); background: var(--success-bg); }
.hcheck--ok      .hcheck__icon { background: var(--success); color: #fff; }
.hcheck--warning { border-color: var(--warn-border);    background: var(--warn-bg); }
.hcheck--warning .hcheck__icon { background: var(--warn); color: #fff; }
.hcheck--failed  { border-color: var(--danger-border);  background: var(--danger-bg); }
.hcheck--failed  .hcheck__icon { background: var(--danger); color: #fff; }

/* ---------- Health check summary & list ---------- */

/* The verdict bar is deliberately not an .alert: sitting directly above a list
   of pass/fail rows, an alert-shaped element reads as one more row. */
.hsummary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
}
.hsummary__tally { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hsummary--success { background: var(--success-bg); color: #14603a; border-bottom-color: var(--success-border); }
.hsummary--warn    { background: var(--warn-bg);    color: #7d4f00; border-bottom-color: var(--warn-border); }
.hsummary--danger  { background: var(--danger-bg);  color: #8f2620; border-bottom-color: var(--danger-border); }

.hchecks { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.hcheck {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border: 0;
  border-radius: 0;
}

.hcheck__icon {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-top: 1px;
  color: #fff;
}

.hcheck__label  { font-weight: 600; font-size: var(--fs-md); }
.hcheck__detail { font-size: var(--fs-xs); color: var(--text-muted); word-break: break-word; margin-top: 1px; }
.hcheck__hint   { font-size: var(--fs-xs); margin-top: 3px; }

.hcheck--ok      .hcheck__icon { background: var(--success); }
.hcheck--warning .hcheck__icon { background: var(--warn); }
.hcheck--failed  .hcheck__icon { background: var(--danger); }
.hcheck--skipped .hcheck__icon { background: var(--grey-300); }

.hcheck--ok      .hcheck__label { font-weight: 500; }
.hcheck--skipped .hcheck__label { color: var(--text-muted); font-weight: 500; }
.hcheck--failed  .hcheck__hint  { color: var(--danger); }
.hcheck--warning .hcheck__hint  { color: var(--warn); }

.modal--confirm .modal__body p { margin: 0; line-height: 1.55; }