/* PeerToSite's one stylesheet (moved out of base.html 2026-10-01). Design rules:
   docs/UI_CONVENTIONS.md — tokens on :root, breakpoints 640px and 900px only. */
:root {
  /* PeerToSite brand (docs/BRAND.md; the kit's tokens.css). The short names below are the ones
     this stylesheet and the templates have always used; they now carry the brand's values, so
     every page picks them up. New code may use either set. Light theme only for now. */
  --ink: #1e1b4b;             /* Indigo 950: text, headings, the masthead */
  --muted: #5b5f77;
  --faint: #5b5f77;           /* was a lighter grey; the brand has one muted text colour (6.3:1 on white) */
  --accent: #4f46e5;          /* Indigo 600: primary buttons, links, active states */
  --accent-dark: #4338ca;     /* Indigo 700: hover and pressed */
  --accent-light: #eef0ff;    /* Mist: tinted panels */
  --amber: #b45309;           /* warning */
  --amber-light: #fef3c7;
  --line: #dcdde8;            /* border */
  --hairline: #e9eaf2;
  --bg: #ffffff;              /* card / panel surface */
  --bg-tint: #eef0ff;         /* tinted surface */
  --page-bg: #f4f4f8;         /* the page behind the panels */
  --footer-bg: #1e1b4b;
  --footer-line: #2c2a52;
  --footer-text: #c9cbe8;
  --good-bg: #dcfce7; --good-text: #166534; --good-border: #86c79b;
  --warn-bg: #fef3c7; --warn-text: #92400e; --warn-border: #e2c275;
  --critical: #b91c1c;        /* danger; the Critical urgency level */
  --radius: 6px;              /* panels and modals */
  --shadow-sm: none;          /* surfaces are flat: a 1px border, not a shadow */
  --shadow-md: 0 2px 6px rgba(30, 27, 75, 0.12);    /* dropdowns and popovers only */
  --shadow-lg: 0 8px 24px rgba(30, 27, 75, 0.18);   /* modals only */
  --font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* The brand kit's own names, for new code. */
  --p2s-indigo-950: #1e1b4b; --p2s-indigo-700: #4338ca; --p2s-indigo-600: #4f46e5;
  --p2s-violet-600: #7c3aed; --p2s-violet-500: #8b5cf6; --p2s-periwinkle: #a5b4fc;
  --p2s-lavender: #c4b5fd; --p2s-mist: #eef0ff; --p2s-night: #14122b;
  --color-bg: #f4f4f8; --color-surface: #ffffff; --color-surface-tint: #eef0ff;
  --color-border: #dcdde8; --color-border-strong: #8f92ad;
  --color-text: #1e1b4b; --color-text-muted: #5b5f77; --color-text-on-primary: #ffffff;
  --color-primary: #4f46e5; --color-primary-hover: #4338ca;
  --color-accent: #8b5cf6; --color-accent-text: #7c3aed; --color-link: #4f46e5; --color-focus-ring: #4f46e5;
  --color-masthead: #1e1b4b; --color-masthead-text: #ffffff;
  --color-success: #15803d; --color-success-bg: #dcfce7; --color-success-on-bg: #166534;
  --color-warning: #b45309; --color-warning-bg: #fef3c7; --color-warning-on-bg: #92400e;
  --color-danger: #b91c1c;  --color-danger-bg: #fee2e2;  --color-danger-on-bg: #991b1b;
  --color-info: #0369a1;    --color-info-bg: #e0f2fe;    --color-info-on-bg: #075985;
  /* Job status tags (background / text) — the same status always looks the same. */
  --status-new-bg: #e0e7ff;       --status-new-text: #3730a3;
  --status-assigned-bg: #ede9fe;  --status-assigned-text: #5b21b6;
  --status-enroute-bg: #e0f2fe;   --status-enroute-text: #075985;
  --status-onsite-bg: #fef3c7;    --status-onsite-text: #92400e;
  --status-done-bg: #dcfce7;      --status-done-text: #166534;
  --status-cancelled-bg: #f1f5f9; --status-cancelled-text: #475569;
  --status-overdue-bg: #fee2e2;   --status-overdue-text: #991b1b;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 999px;
}
* { box-sizing: border-box; }
body {
  font-family: var(--font-body);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: 26px; } h2 { font-size: 20px; margin-top: 32px; } h3 { font-weight: 700; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  margin: 0 -24px 32px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
}
.utility-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 24px 0; }
.utility-row a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.utility-row a:hover { color: var(--accent); }
.utility-row .utility-sep { color: var(--line); font-size: 13px; }
nav {
  display: flex; gap: 18px; align-items: center;
  padding: 16px 24px 16px;
  border-bottom: 1px solid var(--line);
}
nav b { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
nav > :first-child { margin-right: auto; }
nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
nav a:hover { color: var(--accent); }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger::after { content: ' ▾'; font-size: 11px; }
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow-md); padding: 6px; min-width: 180px; z-index: 30;
}
.nav-dropdown-menu a { display: block; padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: var(--bg-tint); }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }

table { border-collapse: collapse; width: 100%; margin: 12px 0 24px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); font-size: 14px; }
th { color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
tr:hover td { background: var(--bg-tint); }

.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; background: var(--bg); box-shadow: var(--shadow-sm); }
label { display: block; margin: 12px 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
input, select, textarea { width: 100%; padding: 9px 10px; border: 1px solid #c5cfd6; border-radius: 6px; font-size: 14px; font-family: inherit; box-sizing: border-box; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
button { margin-top: 16px; padding: 10px 20px; background: var(--accent); color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); }
button:hover { background: var(--accent-dark); }
button.secondary { background: var(--bg-tint); color: var(--ink); box-shadow: none; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--bg-tint); color: var(--muted); }
.pill.good { background: var(--good-bg); color: var(--good-text); }
.pill.warn { background: var(--warn-bg); color: var(--warn-text); }
.muted { color: var(--muted); font-size: 13px; }   /* --faint fails 4.5:1 contrast on white — not for text */

.btn { display: inline-block; padding: 12px 24px; border-radius: 6px; font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1; transition: transform .12s ease, box-shadow .12s ease; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* Full-bleed section bands — break out of the centered column, keep an
   inner max-width so content still reads at the same measure. */
.full-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
.bleed-inner { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.band-tint { background: var(--bg-tint); }
.band-dark { background: var(--footer-bg); color: var(--footer-text); }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .muted { color: #8494a9; }
.section { padding: 56px 0; }
.section-tight { padding: 8px 0 40px; }

.eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--amber); border-radius: 2px; }

.hero { position: relative; padding: 12px 0 8px; }
.hero .eyebrow { margin-bottom: 14px; }
.hero h1 { font-size: 44px; line-height: 1.12; margin: 0 0 18px; max-width: 640px; font-weight: 600; }
.hero .lead { font-size: 18px; color: var(--muted); max-width: 560px; margin: 0 0 30px; line-height: 1.55; }
.cta-row { display: flex; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }

.hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; }
.hero-visual { position: relative; height: 460px; }
.hero-visual .blob { position: absolute; border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; filter: blur(2px); opacity: .5; }
.hero-visual .blob-1 { width: 320px; height: 320px; top: -10px; right: -10px; background: linear-gradient(135deg, var(--accent-light), #cfe0ee); }
.hero-visual .blob-2 { width: 170px; height: 170px; bottom: 10px; left: -10px; background: linear-gradient(135deg, var(--amber-light), #f6dcb8); opacity: .7; }
.hero-visual .dotgrid { position: absolute; inset: 0; background-image: radial-gradient(var(--line) 1.4px, transparent 1.4px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); }
.hero-visual .float-card { position: absolute; box-shadow: var(--shadow-lg); }
.hero-visual .float-card.card-a { top: 96px; left: 4px; width: 220px; transform: rotate(-4deg); z-index: 2; }
.hero-visual .float-card.card-b { bottom: 10px; right: 24px; width: 200px; transform: rotate(3deg); z-index: 3; }
.hero-visual .float-card.card-c { top: 0; right: 0; width: 230px; transform: rotate(2deg); z-index: 5; }
.hero-visual .float-badge { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 8px 14px 8px 8px; box-shadow: var(--shadow-lg); font-size: 12px; font-weight: 700; color: var(--ink); }
.hero-visual .float-badge .dot-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--good-bg); color: var(--good-text); display: flex; align-items: center; justify-content: center; }
.hero-visual .float-badge.badge-1 { bottom: 14px; left: 4px; }

.mini-chart { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin: 4px 0 12px; }
.mini-chart .bar { flex: 1; background: linear-gradient(180deg, var(--accent-light), var(--accent)); border-radius: 3px 3px 1px 1px; }
.mini-chart .bar.peak { background: linear-gradient(180deg, #f6dcb8, var(--amber)); }
.mini-stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; }
.mini-stat-row .num { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.mini-stat-row .cap { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }

.photo-band { position: relative; height: 320px; overflow: hidden; border-radius: 6px; margin: 28px 0 40px; box-shadow: var(--shadow-md); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-band .photo-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 26px; background: linear-gradient(to top, rgba(15,28,44,.78), rgba(15,28,44,0)); color: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
@media (max-width: 640px) { .photo-band { height: 220px; } }

.steps { display: flex; gap: 20px; margin: 20px 0 8px; }
.steps .step { flex: 1; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--bg); box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.steps .step:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.steps .step .num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-family: var(--font-display); font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.steps .step h3 { font-size: 16px; margin: 0 0 6px; }
.steps .step p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.steps .step .link-arrow { margin-top: 10px; }

.two-col { display: flex; gap: 20px; margin: 20px 0; }
.two-col .card { flex: 1; margin-bottom: 0; }
.two-col .card h3 { font-size: 17px; margin: 0 0 10px; }
.two-col .card ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.two-col .card li { margin-bottom: 6px; }
.two-col .card > a { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; text-decoration: none; }

.band { margin-top: 8px; padding: 48px 0; text-align: center; }
.band h2 { margin-top: 0; font-size: 26px; }

.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 20px 0 8px; }
.tile-grid .tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--bg); box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.tile-grid .tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tile-grid .tile h3 { font-size: 15px; margin: 0 0 6px; }
.tile-grid .tile p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.tile-grid .tile a { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; text-decoration: none; }

.feature-highlight { display: flex; gap: 28px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin: 20px 0; background: var(--bg); box-shadow: var(--shadow-sm); }
.feature-highlight .badge { flex-shrink: 0; width: 52px; height: 52px; border-radius: 6px; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; }
.feature-highlight h3 { font-size: 18px; margin: 0 0 8px; }
.feature-highlight p { font-size: 14px; color: var(--muted); margin: 0 0 10px; line-height: 1.55; }

.site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: 64px; padding: 44px 0 20px; }
.site-footer .cols { display: flex; gap: 48px; margin-bottom: 28px; }
.site-footer .col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #7c8ba0; margin: 0 0 12px; font-family: var(--font-body); }
.site-footer .col a { display: block; font-size: 13px; color: var(--footer-text); text-decoration: none; margin-bottom: 9px; }
.site-footer .col a:hover { color: #fff; }
.site-footer .copyright { font-size: 12px; color: #62728a; border-top: 1px solid var(--footer-line); padding-top: 18px; }

.subnav { display: flex; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 24px 0 32px; }
.subnav a { font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; padding-bottom: 10px; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--accent); }
.subnav a.active { color: var(--accent); border-bottom-color: var(--accent); }

.col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0 8px; }
.col-3 .item h3 { font-size: 14px; margin: 0 0 6px; }
.col-3 .item p { font-size: 13px; color: var(--muted); margin: 0 0 6px; line-height: 1.5; }
.col-3 .item a { font-size: 13px; font-weight: 700; text-decoration: none; }

.settings-layout { display: flex; gap: 32px; align-items: flex-start; margin-top: 20px; }
/* .settings-nav is a <nav> element — without this, the bare `nav {
   display: flex; ... }` site-header rule above cascades in (a class
   rule that never sets `display` doesn't win over a tag rule that
   does), turning these stacked groups into a flex row. */
.settings-nav { display: block; width: 220px; flex-shrink: 0; }
.settings-nav-group { margin-bottom: 24px; }
.settings-nav-group h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin: 0 0 8px; }
.settings-nav-group a { display: block; font-size: 13.5px; color: var(--muted); text-decoration: none; padding: 6px 0; }
.settings-nav-group a:hover { color: var(--accent); }
.settings-nav-group a.active { color: var(--accent); font-weight: 700; }
.settings-content { flex: 1; min-width: 0; }
@media (max-width: 900px) { .settings-layout { flex-direction: column; } .settings-nav { width: 100%; } }

.activity-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-sm); overflow: hidden; }
.activity-item { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--hairline); font-size: 13.5px; }
.activity-item:last-child { border-bottom: none; }
.activity-item .activity-label { flex: 1; color: var(--ink); }
.activity-item .activity-time { color: var(--faint); font-size: 12px; flex-shrink: 0; }
.empty-nudge { border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.empty-nudge a { font-weight: 700; }

.notice-banner { background: var(--warn-bg); border: 1px solid #e0b48a; border-radius: var(--radius); padding: 20px 24px; margin-bottom: 28px; }
.notice-banner p { color: var(--warn-text); margin: 6px 0 14px; font-size: 14px; }

.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.dash-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--bg); box-shadow: var(--shadow-sm); text-align: center; display: flex; flex-direction: column; }
.dash-card h3 { font-size: 15px; margin: 4px 0 10px; }
.dash-card p { font-size: 12.5px; color: var(--muted); flex: 1; margin: 0 0 14px; }
.dash-card .dash-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto 10px; }
.completeness-bar { height: 6px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 8px 0 14px; }
.completeness-bar .fill { height: 100%; background: var(--accent); }
@media (max-width: 900px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }

.scorecard-row { display: flex; gap: 16px; margin: 16px 0 28px; }
.scorecard-tile { flex: 1; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--bg); box-shadow: var(--shadow-sm); }
.scorecard-tile .stat-number { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--ink); line-height: 1; }
.scorecard-tile .stat-label { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
@media (max-width: 640px) { .scorecard-row { flex-direction: column; } }

/* Work-item detail layout (postings, styled as an ADO-style work item) */
.workitem-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.state-badge { display:inline-block; padding:4px 12px; border-radius: 2px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.state-badge.draft { background:var(--bg-tint); color:var(--muted); }
.state-badge.open { background:var(--accent-light); color:var(--accent); }
.state-badge.under_review { background:var(--warn-bg); color:var(--warn-text); }
.state-badge.awarded { background:var(--good-bg); color:var(--good-text); }
.state-badge.canceled, .state-badge.expired { background:#f1eae6; color:#8a6d5a; }
.workitem-layout { display:grid; grid-template-columns: 1fr 280px; gap:32px; align-items:start; margin-top:20px; }
.workitem-field { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--hairline); font-size:13px; }
.workitem-field:first-child { border-top:none; }
.workitem-field .fname { color:var(--muted); }
.workitem-field .fval { color:var(--ink); font-weight:600; text-align:right; }
.activity-feed-item { padding:12px 0; border-top:1px solid var(--hairline); }
.activity-feed-item:first-child { border-top:none; }
.activity-feed-item .meta { font-size:12px; color:var(--faint); margin-bottom:4px; }
@media (max-width: 900px) { .workitem-layout { grid-template-columns: 1fr; } }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi-card { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--bg); box-shadow: var(--shadow-sm); }
.kpi-card .kpi-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 10px; }
.kpi-card .kpi-value { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.kpi-card .kpi-value.good { color: var(--good-text); }
.kpi-card .kpi-value.amber { color: var(--amber); }
.kpi-card .kpi-sub { font-size: 12px; color: var(--faint); margin-top: 6px; line-height: 1.45; }
.kpi-card .btn { align-self: center; margin-top: 16px; padding: 9px 16px; font-size: 12.5px; }
.kpi-card .btn:last-child { margin-top: auto; }
.kpi-card .completeness-bar { width: 100%; margin: 10px 0 4px; }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.analytics-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; margin-bottom: 24px; align-items: stretch; }
@media (max-width: 900px) { .analytics-row { grid-template-columns: 1fr; } }
.chart-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; background: var(--bg); box-shadow: var(--shadow-sm); }
.chart-card h3 { margin: 0 0 2px; font-size: 15px; }
.chart-card .chart-sub { font-size: 12px; color: var(--faint); margin: 0 0 18px; }

.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 156px; }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bar-chart .bar-track { flex: 1; display: flex; align-items: flex-end; width: 100%; justify-content: center; }
.bar-chart .bar { width: 60%; min-width: 4px; background: var(--accent); border-radius: 3px 3px 0 0; transition: background .12s; }
.bar-chart .bar:hover { background: var(--accent-dark); }
.bar-chart .bar-col.is-zero .bar { background: var(--line); height: 2px !important; }
.bar-chart .bar-label { font-size: 10.5px; color: var(--faint); margin-top: 6px; white-space: nowrap; }

.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.donut-figure { position: relative; width: 156px; height: 156px; }
.donut-figure .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-figure .donut-center .donut-total { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.donut-figure .donut-center .donut-caption { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .03em; }
.donut-legend { width: 100%; display: grid; gap: 8px; }
.donut-legend .legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.donut-legend .legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend .legend-label { color: var(--muted); flex: 1; }
.donut-legend .legend-value { font-weight: 700; color: var(--ink); }

.rank-list { display: grid; gap: 12px; }
.rank-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; }
.rank-row .rank-index { font-family: var(--font-display); font-weight: 600; color: var(--faint); font-size: 13px; }
.rank-row .rank-body { min-width: 0; }
.rank-row .rank-name { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .rank-bar-track { height: 6px; background: var(--bg-tint); border-radius: 4px; overflow: hidden; }
.rank-row .rank-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.rank-row .rank-amount { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }

.search-widget { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; background: var(--bg); box-shadow: var(--shadow-sm); margin-bottom: 28px; }
.search-widget h2 { margin: 0 0 14px; font-size: 18px; }
.search-widget form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.search-widget input[type="text"] { flex: 2; min-width: 180px; }
.search-widget select { flex: 1; min-width: 160px; }
.search-widget button { flex-shrink: 0; margin-top: 0; }

.wizard-steps { display: flex; align-items: flex-start; max-width: 480px; margin: 4px 0 28px; }
.wizard-steps .step-item { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.wizard-steps .step-node { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 13px; flex-shrink: 0; }
.wizard-steps .step-node.done { background: var(--good-bg); color: var(--good-text); }
.wizard-steps .step-node.current { background: var(--accent); color: #fff; }
.wizard-steps .step-node.pending { background: var(--bg-tint); color: var(--faint); }
.wizard-steps .step-node.warn { background: var(--warn-bg); color: var(--warn-text); }
.wizard-steps .step-label { font-size: 12px; color: var(--muted); text-align: center; }
.wizard-steps .step-item .step-label { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--faint); white-space: nowrap; }
.wizard-steps .step-label.done { color: var(--good-text); }
.wizard-steps .step-label.current { color: var(--accent); }
.wizard-steps .step-line { flex: 1; height: 2px; background: var(--line); margin: 14px 6px 0; }
.wizard-steps .step-line.done { background: var(--good-text); }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; }

.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 20px; }
.skill-option { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 13.5px; cursor: pointer; }
.skill-option:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.skill-option input { width: auto; margin: 0; }
@media (max-width: 640px) { .skill-grid { grid-template-columns: 1fr; } }

.review-section { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px; }
.review-section:last-of-type { border-bottom: none; margin-bottom: 4px; padding-bottom: 0; }
.review-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.review-section-head h3 { margin: 0; font-size: 14px; }
.review-section-head a { font-size: 13px; font-weight: 600; }
.review-list { display: grid; grid-template-columns: 140px 1fr; row-gap: 6px; column-gap: 12px; margin: 0; font-size: 13.5px; }
.review-list dt { color: var(--muted); font-weight: 600; }
.review-list dd { margin: 0; }
@media (max-width: 640px) { .review-list { grid-template-columns: 1fr; row-gap: 2px; } .review-list dt { margin-top: 8px; } }

.password-field { position: relative; }
.password-field input { padding-right: 40px; }
.password-field .toggle-password { position: absolute; top: 0; right: 0; bottom: 0; width: 38px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; box-shadow: none; color: var(--muted); cursor: pointer; }
.password-field .toggle-password:hover { color: var(--accent); background: none; }
.password-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.password-rules li { position: relative; padding-left: 20px; font-size: 12.5px; color: var(--muted); }
.password-rules li::before { content: "○"; position: absolute; left: 0; color: var(--line); font-size: 11px; }
.password-rules li.met { color: var(--good-text); }
.password-rules li.met::before { content: "✓"; color: var(--good-text); }

.btn-sso { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; margin-bottom: 16px; box-sizing: border-box; }
.btn-sso:hover { box-shadow: var(--shadow-sm); }
.btn-sso .sso-mark { width: 18px; height: 18px; flex-shrink: 0; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0; }
.choice-card { display: block; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; background: var(--bg); box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.choice-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--accent); }
.choice-card .choice-icon { width: 52px; height: 52px; border-radius: 6px; background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; }
.choice-card h3 { font-size: 19px; margin: 0 0 8px; }
.choice-card p { font-size: 14px; color: var(--muted); margin: 0 0 14px; line-height: 1.55; }
.choice-card .choice-cta { font-size: 13.5px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.choice-card:hover .choice-cta { text-decoration: underline; }
.choice-card.with-photo { padding: 0; overflow: hidden; }
.choice-card .choice-photo { height: 160px; overflow: hidden; }
.choice-card .choice-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.choice-card:hover .choice-photo img { transform: scale(1.03); }
.choice-card .choice-body { padding: 24px; }
.choice-card ul.ticks { list-style: none; padding: 0; margin: 0 0 16px; }
.choice-card ul.ticks li, .auth-aside ul.ticks li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 13.5px; line-height: 1.45; }
.choice-card ul.ticks li::before, .auth-aside ul.ticks li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--good-text); font-weight: 600; }
@media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr; } }

/* Sign-in and signup: the form beside a picture panel (_auth_aside.html). */
.auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 16px; }
.auth-split > .auth-main > .card { margin-bottom: 16px; }
.auth-split.solo { grid-template-columns: 1fr; }
.auth-aside { position: relative; border-radius: 6px; overflow: hidden; min-height: 460px; box-shadow: var(--shadow-md); color: #fff; background: #12263a; }
.auth-aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-aside .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,28,44,.92) 25%, rgba(15,28,44,.35) 70%, rgba(15,28,44,.15)); }
.auth-aside .aside-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; }
.auth-aside .eyebrow { color: #fff; }
.auth-aside h2 { color: #fff; font-size: 24px; line-height: 1.2; margin: 0 0 16px; }
.auth-aside ul.ticks { list-style: none; padding: 0; margin: 0; }
.auth-aside ul.ticks li::before { color: #8fe0ae; }
.auth-aside.plain { background: linear-gradient(150deg, #16324d, #0d1c2c); }
.auth-aside.plain .dotgrid { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1.4px, transparent 1.4px); background-size: 22px 22px; }
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-aside { min-height: 0; }
  .auth-aside img, .auth-aside .shade { display: none; }
  .auth-aside .aside-body { position: static; padding: 24px; }
}

.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 24px 0 8px; }
.map-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--bg); box-shadow: var(--shadow-sm); text-align: center; }
.map-card h3 { font-size: 14px; margin: 0 0 12px; }
.region-map { width: 100%; height: auto; display: block; background: var(--bg-tint); border-radius: 6px; }
.map-land { fill: var(--line); stroke: var(--muted); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-dot { fill: var(--accent); }
.map-halo { fill: var(--accent); opacity: .18; }

.faq-list { margin: 20px 0 8px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-list summary { font-family: var(--font-display); font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; flex-shrink: 0; font-size: 20px; font-weight: 400; color: var(--accent); transition: transform .15s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { font-size: 14px; color: var(--muted); margin: 12px 0 0; line-height: 1.6; max-width: 640px; }

.search-form { display: flex; gap: 8px; max-width: 480px; margin: 4px 0 0; }
.search-form input { flex: 1; }
.search-form button { margin-top: 0; }

.breadcrumb { font-size: 13px; color: var(--faint); margin: 20px 0 4px; }
.breadcrumb a { color: var(--faint); }
.breadcrumb a:hover { color: var(--accent); }

.article-list .article { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.article-list .article:last-child { border-bottom: none; }
.article-list .article a { font-size: 15px; font-weight: 700; text-decoration: none; }
.article-list .article p { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.article-list .article .cat { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin-bottom: 4px; }

.interactive-tabs { margin: 20px 0 8px; }
.interactive-tabs .tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.interactive-tabs .tab-bar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.interactive-tabs .tab-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; min-width: 110px; padding: 18px 6px; cursor: pointer; border-bottom: 3px solid transparent; text-align: center; color: var(--muted); }
.interactive-tabs .tab-btn:hover { color: var(--accent); }
.interactive-tabs .tab-btn .icon-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-tint); display: flex; align-items: center; justify-content: center; transition: background .15s ease, box-shadow .15s ease; }
.interactive-tabs .tab-btn svg { width: 20px; height: 20px; stroke: currentColor; }
.interactive-tabs .tab-btn span { font-size: 12px; font-weight: 700; letter-spacing: .01em; line-height: 1.3; }
.interactive-tabs .tab-panel { display: none; padding: 40px 0 8px; }
.interactive-tabs .panel-grid { display: flex; gap: 64px; align-items: center; justify-content: space-between; }
.interactive-tabs .panel-copy { flex: 0 1 380px; }
.interactive-tabs .panel-copy .eyebrow { margin-bottom: 10px; }
.interactive-tabs .panel-copy h3 { font-size: 25px; margin: 0 0 12px; }
.interactive-tabs .panel-copy p { font-size: 14.5px; color: var(--muted); margin: 0 0 20px; max-width: 420px; line-height: 1.6; }
.interactive-tabs .illustration { flex: 0 1 340px; display: flex; justify-content: flex-end; }
#tab-1:checked ~ .tab-bar label[for="tab-1"],
#tab-2:checked ~ .tab-bar label[for="tab-2"],
#tab-3:checked ~ .tab-bar label[for="tab-3"],
#tab-4:checked ~ .tab-bar label[for="tab-4"],
#tab-5:checked ~ .tab-bar label[for="tab-5"],
#tab-6:checked ~ .tab-bar label[for="tab-6"] { color: var(--ink); border-bottom-color: var(--accent); }
#tab-1:checked ~ .tab-bar label[for="tab-1"] .icon-circle,
#tab-2:checked ~ .tab-bar label[for="tab-2"] .icon-circle,
#tab-3:checked ~ .tab-bar label[for="tab-3"] .icon-circle,
#tab-4:checked ~ .tab-bar label[for="tab-4"] .icon-circle,
#tab-5:checked ~ .tab-bar label[for="tab-5"] .icon-circle,
#tab-6:checked ~ .tab-bar label[for="tab-6"] .icon-circle { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; box-shadow: 0 4px 10px rgba(30,77,123,.28); }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
#tab-1:checked ~ .tab-panels #panel-1,
#tab-2:checked ~ .tab-panels #panel-2,
#tab-3:checked ~ .tab-panels #panel-3,
#tab-4:checked ~ .tab-panels #panel-4,
#tab-5:checked ~ .tab-panels #panel-5,
#tab-6:checked ~ .tab-panels #panel-6 { display: block; }

.mini-preview { border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; background: #fff; width: 100%; max-width: 320px; box-shadow: var(--shadow-md); border-top: 3px solid var(--accent); }
.mini-preview-header { font-size: 13px; font-weight: 700; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.mini-preview-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 6px 0; color: var(--muted); }
.mini-preview-row span:first-child { color: var(--ink); }
.mini-preview-divider { border-top: 1px solid var(--hairline); margin: 8px 0; }
.mini-preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin: 4px 0 6px; }
.mini-preview-log { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 6px 0; }
.mini-preview-log .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
/* Job progress tracker (_tracker.html): dots with a pop-up card each. */
.trk { display: flex; align-items: flex-start; margin: 16px 0 24px; max-width: 760px; }
.trk-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; width: 64px; }
.trk-dot { width: 30px; height: 30px; border-radius: 50%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;
           font-size: 12px; font-weight: 600; box-shadow: none; border: 2px solid var(--line); background: var(--bg); color: var(--faint); cursor: pointer; }
.trk-dot:hover { background: var(--bg-tint); }
.trk-done .trk-dot { background: var(--good-text); border-color: var(--good-text); color: #fff; }
.trk-current .trk-dot { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.trk-warn .trk-dot { background: var(--warn-text); border-color: var(--warn-text); color: #fff; }
.trk-stopped .trk-dot { background: var(--bg-tint); }
.trk-label { font-size: 11px; text-align: center; color: var(--muted); line-height: 1.25; }
.trk-current .trk-label, .trk-warn .trk-label { color: var(--ink); font-weight: 700; }
.trk-line { flex: 1; height: 2px; background: var(--line); margin-top: 14px; min-width: 8px; }
.trk-line.done { background: var(--good-text); }
.trk-pop { display: none; position: absolute; top: 40px; left: 0; z-index: 30; width: 280px; max-width: calc(100vw - 32px); text-align: left; }
.trk-right .trk-pop { left: auto; right: 0; }
.trk-step:hover .trk-pop, .trk-step:focus-within .trk-pop, .trk-step.open .trk-pop { display: block; }
.trk-pop .mini-preview-row span:last-child { text-align: right; max-width: 60%; overflow-wrap: anywhere; }
.trk-pop .pill.current { background: var(--accent-light); color: var(--accent); }
.trk-note { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-text); font-size: 12.5px; }
.trk-compact { margin: 0; }
.trk-compact .trk-step { width: auto; }
.trk-compact .trk-dot { width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; }
.trk-compact .trk-line { margin-top: 9px; min-width: 6px; max-width: 18px; }
.trk-compact .trk-pop { top: 28px; }
@media (max-width: 640px) {
  .trk:not(.trk-compact) .trk-step { width: 36px; }
  .trk:not(.trk-compact) .trk-label { display: none; }
  /* On a phone a card spans the tracker's width instead of hanging off one dot. */
  .trk { position: relative; }
  .trk-step { position: static; }
  .trk-pop, .trk-right .trk-pop { left: 0; right: auto; width: 100%; min-width: 260px; }
}

.marketplace-split { display: flex; gap: 44px; align-items: flex-start; margin: 24px 0 8px; }
.marketplace-split .role-col { flex: 1.1; }
.marketplace-split .role-col h2 { margin-top: 0; }
.role-links { margin: 12px 0; }
.role-group + .role-group { margin-top: 22px; }
.role-group h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin: 0 0 2px; font-weight: 700; }
.role-links a { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; padding: 13px 4px; border-bottom: 1px solid var(--hairline); transition: color .12s ease, padding-left .12s ease; }
.role-links a:hover { color: var(--accent); padding-left: 8px; }
.role-links a:last-child { border-bottom: none; }
.marketplace-split .callout-card { flex: 1; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; background: linear-gradient(160deg, #fff, var(--accent-light) 160%); align-self: stretch; box-shadow: var(--shadow-sm); }
.marketplace-split .callout-card h3 { font-size: 21px; margin: 0 0 12px; }
.marketplace-split .callout-card p { font-size: 14px; color: var(--muted); margin: 0 0 22px; line-height: 1.55; }

.role-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 12px 0 4px; }
.role-card { display: block; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-decoration: none; color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.role-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.role-card img { width: 100%; height: 84px; object-fit: cover; display: block; }
.role-card .role-card-label { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 13px; font-weight: 700; gap: 6px; }
.role-card .role-card-label .arrow { color: var(--faint); flex-shrink: 0; }
.role-card:hover .role-card-label { color: var(--accent); }
@media (max-width: 640px) { .role-card-grid { grid-template-columns: repeat(2, 1fr); } }

.chat-thread { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.chat-bubble { max-width: 75%; padding: 12px 16px; border-radius: 6px; font-size: 14px; line-height: 1.55; }
.chat-bubble .meta { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; opacity: .7; }
.chat-bubble.requester { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.ai_agent { align-self: flex-start; background: var(--bg-tint); color: var(--ink); border-bottom-left-radius: 4px; }
.escalated-banner { border: 1px solid #f0c896; background: var(--amber-light); color: var(--amber); border-radius: 6px; padding: 14px 16px; font-size: 13px; margin: 16px 0; }

.docs-layout { display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: start; margin-top: 12px; }
.docs-nav { position: sticky; top: 84px; }
.docs-nav .docs-group { margin-bottom: 20px; }
.docs-nav h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin: 0 0 8px; }
.docs-nav a { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 5px 0; }
.docs-nav a:hover { color: var(--accent); }
.method-tag { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; letter-spacing: .03em; flex-shrink: 0; }
.method-tag.get { background: var(--accent-light); color: var(--accent); }
.method-tag.post { background: var(--amber-light); color: var(--amber); }
.docs-content section { margin-bottom: 44px; scroll-margin-top: 84px; }
.docs-content h2 { border-bottom: 1px solid var(--hairline); padding-bottom: 12px; }
.docs-content h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 8px; }
pre { background: #0f1c2e; color: #d6e6ff; padding: 16px 18px; border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.6; margin: 10px 0 18px; }
code { font-family: ui-monospace, 'SF Mono', Consolas, monospace; }
p code, li code { background: var(--bg-tint); color: var(--accent-dark); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; }
.endpoint-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.endpoint-header code { font-size: 15px; background: none; color: var(--ink); padding: 0; }

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-nav { position: static; display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
}
@media (max-width: 640px) {
  .marketplace-split { flex-direction: column; }
  .interactive-tabs .panel-grid { flex-direction: column; }
  .col-3 { grid-template-columns: 1fr; }
  .steps, .two-col, .tile-grid { flex-direction: column; grid-template-columns: 1fr; }
  .feature-highlight { flex-direction: column; align-items: flex-start; }
  .site-footer .cols { flex-wrap: wrap; gap: 28px; }
  .hero h1 { font-size: 32px; }
  nav { flex-wrap: wrap; row-gap: 10px; }
}

/* --- Interaction states (docs/UI_CONVENTIONS.md) --------------------------- */
/* D1: a visible focus ring on everything you can reach with the keyboard. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
/* D3: disabled looks disabled. */
button:disabled, button[aria-disabled="true"], .btn[aria-disabled="true"], input:disabled, select:disabled, textarea:disabled {
  opacity: .55; cursor: not-allowed; box-shadow: none;
}
button:disabled:hover { background: var(--accent); }
button.secondary:disabled:hover { background: var(--bg-tint); }
button:active:not(:disabled), .btn:active { transform: translateY(1px); }

/* Message boxes (replacing hard-coded colours in templates). */
.notice { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 16px; }
.notice.good { border-color: var(--good-border); background: var(--good-bg); color: var(--good-text); }
.notice.warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }

/* D9: skip link, visible only when focused. */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--bg); padding: 8px 14px;
             border-radius: 6px; box-shadow: var(--shadow-md); }
.skip-link:focus { left: 16px; }

/* D6: on a phone, a table becomes one card per row, each cell labelled
   with its column (labels added by the script in base.html). */
@media (max-width: 640px) {
  table.stacked, table.stacked tbody, table.stacked tr, table.stacked td { display: block; width: 100%; }
  table.stacked tr.stacked-head { display: none; }
  table.stacked tr { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; padding: 6px 4px;
                     background: var(--bg); box-shadow: var(--shadow-sm); }
  table.stacked tr:hover td { background: none; }
  table.stacked td { border: none; padding: 6px 10px; display: flex; justify-content: space-between; gap: 12px;
                     text-align: right; }
  table.stacked td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--muted);
                                         text-align: left; flex-shrink: 0; max-width: 45%; }
  table.stacked td:not([data-label]), table.stacked td[colspan] { display: block; text-align: left; }
  table.stacked td:first-child { font-weight: 600; }
  button, .btn, input[type="submit"] { min-height: 44px; }   /* tap targets */
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Opportunities dashboard: three views as large toggle cards (company_opportunities.html) */
.view-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 28px; }
.view-toggle a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); }
.view-toggle a:hover { border-color: var(--accent); }
.view-toggle a.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-light); }
.view-toggle-count { font-size: 26px; font-weight: 600; color: var(--accent); line-height: 1.1; }
.view-toggle-label { font-size: 14px; font-weight: 700; }
.view-toggle-hint { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  .view-toggle { grid-template-columns: 1fr; gap: 8px; }
  .view-toggle a { flex-direction: row; align-items: baseline; gap: 10px; padding: 10px 14px; }
  .view-toggle-count { font-size: 20px; }
  .view-toggle-hint { display: none; }
}

/* Company management's tabs are the underlined subnav since 2026-10-07; on a phone they scroll sideways. */
@media (max-width: 640px) {
  .cm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cm-tabs a { white-space: nowrap; flex: none; }
}
}

/* Dispatch plan tiers (settings_services.html): tiers 1–2 light, 3 accent, 4 dark */
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin: 16px 0; }
.plan-card { border-radius: var(--radius); padding: 20px 22px; background: var(--bg-tint); color: var(--ink); display: flex; flex-direction: column; }
.plan-card.plan-3 { background: var(--accent); color: #fff; }
.plan-card.plan-4 { background: var(--ink); color: #fff; }
.plan-card.plan-current { box-shadow: 0 0 0 3px var(--amber); }
.plan-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.plan-name { font-size: 22px; font-weight: 600; margin: 8px 0 2px; }
.plan-price { font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.plan-1 .plan-price, .plan-2 .plan-price { color: var(--accent); }
.plan-from { font-size: 12px; font-weight: 600; opacity: .8; }
.plan-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-top: 10px; }
.plan-value { font-size: 15px; font-weight: 600; margin-top: 4px; }
.plan-action { margin-top: auto; padding-top: 16px; }
.plan-card.plan-3 .plan-action a, .plan-card.plan-4 .plan-action a { color: #fff; }
.plan-card.plan-3 label, .plan-card.plan-4 label { color: #fff; }
.plan-meter { height: 8px; border-radius: 4px; background: var(--bg-tint); overflow: hidden; max-width: 420px; }
.plan-meter span { display: block; height: 100%; background: var(--accent); }
.plan-card.plan-3 button, .plan-card.plan-4 button { background: #fff; color: var(--accent); }

/* Plan & services page (settings_services.html) */
.setup-steps { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 20px; }
.setup-step { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--muted); }
.setup-step.done { color: var(--ink); border-color: var(--good-border); background: var(--good-bg); }
.setup-num, .section-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }
.setup-step:not(.done) .setup-num { background: var(--bg-tint); color: var(--muted); border: 1px solid var(--line); }
.section-title { display: flex; align-items: center; gap: 10px; }
.plan-summary-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plan-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 14px 0 0; }
.plan-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan-facts dd { margin: 2px 0 0; font-weight: 600; }
.settings-content details > summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.plan-chooser { margin: 4px 0 8px; }
.plan-card.plan-pickable { cursor: pointer; position: relative; }
.plan-card.plan-pickable:hover { box-shadow: 0 0 0 2px var(--accent); }
.plan-radio { position: absolute; top: 18px; right: 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--amber); }
.plan-card:has(.plan-radio:checked) { box-shadow: 0 0 0 3px var(--amber); }
.plan-card .plan-eyebrow, .plan-card .plan-name, .plan-card .plan-price, .plan-card .plan-label, .plan-card .plan-value { display: block; }
.service-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.service-card { margin: 0; display: flex; flex-direction: column; }
.service-card.service-on { border-color: var(--good-border); }
.danger-zone > summary { color: var(--muted); font-weight: 600; font-size: 13px; }
.service-card details > summary { font-size: 13px; }
.plan-cards .plan-card { padding: 18px; }

/* Dispatch request: category step (company_dispatch_new.html) */
.category-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 12px 0 24px; }
.category-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); }
.category-card:hover, .category-card:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.category-name { font-size: 18px; font-weight: 600; color: var(--accent); }
.category-examples { font-size: 13px; color: var(--muted); }

/* Dispatch request: urgency cards (company_dispatch_new.html) */
.urgency-fieldset { border: 0; padding: 0; margin: 16px 0 4px; }
.urgency-fieldset legend { font-weight: 700; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.urgency-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.urgency-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 16px; border: 1px solid var(--line); border-left-width: 5px; border-radius: var(--radius); cursor: pointer; font-weight: 400; margin: 0; }
.urgency-card input { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.urgency-card:has(input:checked) { box-shadow: 0 0 0 2px var(--accent); }
.urgency-critical { border-left-color: var(--critical); }
.urgency-high { border-left-color: var(--amber); }
.urgency-medium { border-left-color: var(--accent); }
.urgency-low { border-left-color: var(--line); }
.urgency-name { font-size: 16px; font-weight: 600; padding-right: 26px; }
.urgency-def { font-size: 13.5px; font-weight: 600; }
.urgency-ex { font-size: 12.5px; color: var(--muted); }
.urgency-times { font-size: 13px; margin-top: 4px; }
.urgency-price { font-size: 12px; color: var(--muted); }

/* Dispatch request: documents from the library or uploaded (company_dispatch_new.html) */
.doc-fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 14px; margin: 16px 0 4px; }
.doc-fieldset legend { font-weight: 700; font-size: 13px; color: var(--muted); padding: 0 6px; }
.doc-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 16px; }
.doc-pick { font-weight: 400; margin: 0; display: flex; gap: 8px; align-items: center; }

/* Dispatch request steps (company_dispatch_new.html): done steps fold to one line */
.step-title { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 22px 0 8px; }
.step-done { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--good-border); border-radius: var(--radius); background: var(--bg); }
.step-done.urgency-critical, .step-done.urgency-high, .step-done.urgency-medium, .step-done.urgency-low { border-left-width: 5px; }
.step-form { margin: 0; }
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 8px; }
.step-done.urgency-critical { border-left-color: var(--critical); }
.step-done.urgency-high { border-left-color: var(--amber); }
.step-done.urgency-medium { border-left-color: var(--accent); }
.step-done.urgency-low { border-left-color: var(--line); }
.step-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg-tint); }

/* Dispatch home: a card per stage (company_dispatch_list.html) */
/* A list's filter bar: dropdown(s) and search on one row (Dispatch list). */
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 18px 0 8px; }
.filter-bar label { margin: 0 0 4px; font-size: 12.5px; }
.filter-bar select, .filter-bar input { margin: 0; }
.filter-bar select { min-width: 240px; }
.filter-bar .filter-grow { flex: 1; min-width: 220px; }
.filter-bar button { margin: 0; }
.filter-clear { align-self: flex-end; padding-bottom: 10px; }
.filter-alert { margin: 0 0 4px; font-weight: 700; }
.filter-alert a { color: var(--amber); }
.urgency-tag { font-weight: 700; }
.urgency-tag-critical { color: var(--critical); }
.urgency-tag-high { color: var(--amber); }

/* Dispatch details (company_dispatch_detail.html) */
.now-card { border-left-width: 5px; }
.now-card.now-signoff, .now-card.now-awaiting_eta, .now-card.now-peertosite, .now-card.now-disputed { border-left-color: var(--amber); }
.now-card.now-scheduled, .now-card.now-on_site, .now-card.now-completed { border-left-color: var(--good-border); }
.now-card.now-finding { border-left-color: var(--accent); }
.now-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.now-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.detail-grid .card { margin: 0; }
.facts { margin: 0; display: grid; gap: 10px; }
.facts dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 2px 0 0; }

/* Manage visit (company_dispatch_visit.html) */
.visit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.visit-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.visit-steps a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--accent); }
.visit-section { scroll-margin-top: 16px; }
.visit-title { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 12px; }
.facts-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.checklist { margin: 0; padding-left: 20px; }
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding: 4px 0 8px; }
.chat-msg { max-width: 80%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line); }
.chat-msg.mine { align-self: flex-end; background: var(--accent-light); }
.chat-msg.theirs { align-self: flex-start; background: var(--bg-tint); }
.chat-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.chat-form { margin-top: 10px; }
.chat-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.answers { margin-bottom: 10px; }
.review-window { padding: 10px 12px; border-radius: var(--radius); background: var(--accent-light); font-size: 13.5px; }
.review-window.over { background: var(--warn-bg); }
.decision { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.decision form button { margin: 0; }
.decision > button { margin: 0; }
/* Pop-up windows (<dialog> opened with showModal): centred, page dimmed behind. */
.modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; border: 0; border-radius: var(--radius);
         padding: 24px; background: var(--bg); color: var(--ink); box-shadow: var(--shadow-lg); }
.modal::backdrop { background: rgba(16, 28, 44, .62); }
.modal h2 { margin: 0 32px 4px 0; }
.modal h3 { font-size: 14px; margin: 16px 0 6px; }
.modal-close-form { position: absolute; top: 12px; right: 12px; margin: 0; }
.modal { position: fixed; }
.modal-x-abs { position: absolute; top: 12px; right: 12px; }
#confirm-facts:empty { display: none; }
#confirm-facts { margin: 0 0 4px; }
.confirm-facts { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-tint); font-size: 13.5px; }
.confirm-facts div { display: flex; gap: 12px; padding: 3px 0; }
.confirm-facts dt { color: var(--muted); min-width: 110px; }
.confirm-facts dd { margin: 0; font-weight: 600; }
.modal-x { background: none; box-shadow: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 8px; margin: 0; }
.modal-x:hover { background: var(--bg-tint); color: var(--ink); }
.modal-answers { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 6px; }
.modal-answers li { padding: 8px 12px; font-size: 13.5px; }
.modal-answers li + li { border-top: 1px solid var(--hairline); }
.modal-bill { width: 100%; border-collapse: collapse; font-size: 13.5px; border: 1px solid var(--line); border-radius: 6px; }
.modal-bill td, .modal-bill th { padding: 6px 12px; text-align: left; border-top: 1px solid var(--hairline); }
.modal-bill .num { text-align: right; white-space: nowrap; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.modal-actions button { margin: 0; }
.reason-set { border: 0; padding: 0; margin: 10px 0 0; }
.reason-set legend { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.reason-option { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 4px 0; }
.star-input { border: 0; padding: 0; margin: 0 0 8px; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.star-input legend { font-weight: 700; font-size: 13px; margin-bottom: 4px; width: 100%; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 30px; line-height: 1; color: var(--line); cursor: pointer; margin: 0; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--amber); }
.star-input input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.stars-static { color: var(--amber); letter-spacing: 1px; }
.feedback { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--ink); }
.job-review + .job-review, .entry-list li + li { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.job-review-head { font-weight: 700; margin: 0 0 4px; }
.review-scores { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); }
.review-scores strong { color: var(--ink); }
.entry-list { list-style: none; padding: 0; margin: 0; }
.wo-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; }

/* Posting form (bid_request_form.html): locations to tick, criteria side by side, the firms that qualify. */
.site-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; padding: 2px; }
.site-check { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-weight: 400; cursor: pointer; }
.site-check input { width: auto; margin: 3px 0 0; }
.site-check:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.potential { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.potential h3 { font-size: 14px; margin: 0 0 4px; }
table[hidden] { display: none; }
.rollout-bar { height: 8px; border-radius: 99px; background: var(--hairline); overflow: hidden; margin: 0 0 12px; }
.rollout-bar span { display: block; height: 100%; background: var(--good-text); }

/* Getting-started checklist (_checklist.html): folds to its header. */
.setup-fold > summary { list-style: none; cursor: pointer; }
.setup-fold > summary::-webkit-details-marker { display: none; }
.setup-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.setup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.setup-toggle::after { content: "Hide ▴"; margin-left: 10px; font-weight: 700; color: var(--accent); }
.setup-fold:not([open]) .setup-toggle::after { content: "Show ▾"; }
.setup-bar { display: block; height: 6px; background: var(--bg-tint); border-radius: 3px; margin: 12px 0 4px; }
.setup-bar span { display: block; height: 6px; border-radius: 3px; background: var(--good-text); }

/* Contractor Home and Opportunity Marketplace. */
.home-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; gap: 0; } }
.todo-list { list-style: none; padding: 0; margin: 0; }
.todo-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; }
.todo-list li + li { border-top: 1px solid var(--hairline); }
.home-rating { font-size: 22px; margin: 0 0 6px; }
.market-views { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.market-views .count-badge { margin-left: 6px; }
.btn-primary .count-badge { background: #fff; color: var(--accent); }

/* Offers and agreements (bid_request_detail.html, _agreement.html). */
.binding-tick { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 14px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-tint); }
.binding-tick input { margin-top: 3px; }
.expense-row { display: grid; grid-template-columns: 1fr 140px; gap: 10px; margin-bottom: 6px; }
.expense-row input { margin: 0; }
.agreement .confirm-facts div { align-items: baseline; }
.doc-list { margin: 0; padding-left: 20px; }
.doc-list li { padding: 3px 0; }


/* =====================================================================================
   PeerToSite brand (2026-10-06; docs/BRAND.md). The rules above were written for the old
   look; these restate the shared pieces the brand defines — flat and bordered, square
   corners, dense 14px app text, semibold headings, one indigo accent — so every page
   inherits them. Light theme only.
   ===================================================================================== */
html { background: var(--page-bg); }
body { background: var(--page-bg); font-size: 14px; line-height: 1.55; color: var(--ink); max-width: 1120px; }
body.public { font-size: 16px; }                      /* reading text: marketing, help, legal */
a { color: var(--color-link); }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; color: var(--ink); }
h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; font-weight: 600; }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .95em; }

/* Masthead: one dark bar across the top of every page — logo, navigation, account links. */
.site-header {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px;
  min-height: 48px; margin: 0 calc(50% - 50vw) 24px; padding: 0 max(24px, calc(50vw - 560px));
  background: var(--color-masthead); color: var(--color-masthead-text); backdrop-filter: none;
}
.site-header nav { order: 1; flex: 1 1 auto; gap: 4px; padding: 0; border-bottom: 0; flex-wrap: wrap; min-height: 48px; }
.site-header nav > :first-child { margin-right: 20px; display: inline-flex; align-items: center; }
.site-header nav .brand-logo { height: 22px; width: auto; display: block; }
.site-header nav a { color: #d6d8f5; font-size: 14px; font-weight: 500; padding: 14px 10px 11px; border-bottom: 3px solid transparent; line-height: 1.4; }
.site-header nav a:hover { color: #fff; }
.site-header nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--p2s-periwinkle); }
.site-header nav a.brand-link { padding: 0; border: 0; }
.site-header .utility-row { order: 2; padding: 0; gap: 8px; }
.site-header .utility-row a, .site-header .utility-row span, .site-header .utility-row button { color: #c9cbe8; font-size: 13px; font-weight: 500; }
.site-header .utility-row a:hover { color: #fff; }
.site-header .utility-row .utility-sep { color: #4a4780; }
.site-header .pill.warn { background: var(--p2s-periwinkle); color: var(--p2s-night); }
.site-header nav .btn-primary, .site-header nav a.btn { padding: 8px 14px; border-bottom: 0; color: #fff; }
@media (max-width: 640px) { .site-header { padding: 0 16px; } .site-header nav a { padding: 10px 8px 7px; } }

/* Buttons: 36px tall, 4px corners, no gradients, no lift. One primary per section. */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px; margin-top: 16px;
  border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary); color: #fff;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
  box-shadow: none; transition: background .12s ease; transform: none;
}
.btn { margin-top: 0; }
button:hover, .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: none; box-shadow: none; }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: none; }
button.secondary, .btn-secondary { background: var(--bg); color: var(--color-primary); border: 1px solid var(--color-primary); }
button.secondary:hover, .btn-secondary:hover { background: var(--bg-tint); color: var(--color-primary); border-color: var(--color-primary); }
button.danger, .btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
button:disabled, button[disabled] { opacity: .55; cursor: not-allowed; }

/* Inputs: white, a strong 1px outline you can find, 4px corners, label above in 12px semibold. */
label { font-size: 12px; font-weight: 600; color: var(--ink); margin: 12px 0 4px; }
input, select, textarea { min-height: 36px; padding: 6px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: #fff; color: var(--ink); font-size: 14px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--color-primary); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-focus-ring); outline-offset: 0; border-color: var(--color-primary); }

/* Panels: white, 1px border, 6px corners, 20px padding, no shadow. */
.card, .chart-card, .search-widget, .scorecard-tile, .kpi-card, .dash-card, .feature-highlight, .steps .step, .tile-grid .tile, .activity-list {
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; background: var(--bg);
}
.card { padding: 20px; }
.steps .step:hover, .tile-grid .tile:hover { box-shadow: none; transform: none; border-color: var(--color-border-strong); }

/* Dashboard figures: a 3px indigo top border, a small label, a 28px figure in tabular numbers. */
.scorecard-tile, .kpi-card { border-top: 3px solid var(--color-primary); border-radius: var(--radius-md); align-items: flex-start; text-align: left; }
.scorecard-tile .stat-number, .kpi-card .kpi-value { font-size: 28px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-card .kpi-label, .scorecard-tile .stat-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.kpi-card .kpi-value.amber { color: var(--color-warning); }

/* Data tables: header on the tinted surface, 14px cells, row borders only, hover highlight. */
table { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
th, td { padding: 8px 12px; font-size: 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--bg-tint); color: var(--ink); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: #f8f8fc; }

/* Status tags: a small rectangle with the status word — never colour alone. */
.pill, .state-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.5; background: var(--status-cancelled-bg); color: var(--status-cancelled-text); }
.pill.good, .state-badge.awarded { background: var(--status-done-bg); color: var(--status-done-text); }
.pill.warn, .state-badge.under_review { background: var(--status-onsite-bg); color: var(--status-onsite-text); }
.pill.new, .state-badge.open { background: var(--status-new-bg); color: var(--status-new-text); }
.pill.assigned { background: var(--status-assigned-bg); color: var(--status-assigned-text); }
.pill.enroute { background: var(--status-enroute-bg); color: var(--status-enroute-text); }
.pill.overdue { background: var(--status-overdue-bg); color: var(--status-overdue-text); }
.state-badge.canceled, .state-badge.expired, .state-badge.draft { background: var(--status-cancelled-bg); color: var(--status-cancelled-text); }
.count-badge { border-radius: var(--radius-pill); background: var(--color-primary); }

/* Notices: tinted background with a 3px coloured left border. */
.notice, .notice-banner { border: 1px solid var(--line); border-left: 3px solid var(--color-info); border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--ink); padding: 12px 16px; }
.notice.good { border-left-color: var(--color-success); background: var(--color-success-bg); color: var(--ink); }
.notice.warn, .notice-banner { border-left-color: var(--color-warning); background: var(--color-warning-bg); color: var(--ink); }
.notice-banner p { color: var(--ink); }

/* Tabs under the masthead. */
.subnav { gap: 4px 20px; border-bottom: 1px solid var(--line); }
.subnav a { font-size: 14px; font-weight: 500; color: var(--muted); padding-bottom: 8px; border-bottom: 3px solid transparent; }
.subnav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--color-primary); }

.muted { color: var(--muted); font-size: 13px; }
body.public .muted { font-size: 14px; }
.eyebrow { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; color: var(--color-primary); }
.eyebrow::before { background: var(--color-accent); }
.modal { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.nav-dropdown-menu { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.bar-chart .bar, .rank-row .rank-bar-fill, .completeness-bar .fill { background: var(--color-accent); border-radius: 2px 2px 0 0; }   /* violet is for charts */
.bar-chart .bar:hover { background: var(--color-accent-text); }
.dash-card .dash-icon, .steps .step .num, .feature-highlight .badge { border-radius: var(--radius-md); }
.skill-option { border-radius: var(--radius-md); }

/* Trust footer: on every page, signed in or not. */
.site-footer { margin-top: 64px; padding: 40px 0 20px; }
.site-footer .col h4 { font-family: var(--font-mono); font-weight: 500; color: #9a9dcf; }
.site-footer .copyright { color: #9a9dcf; }
.trust-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; margin: 48px 0 0; padding: 16px 0 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.trust-footer nav { display: flex; flex-wrap: wrap; gap: 16px; padding: 0; border: 0; min-height: 0; }
.trust-footer a { color: var(--muted); font-size: 12px; font-weight: 500; text-decoration: none; }
.trust-footer a:hover { color: var(--color-primary); text-decoration: underline; }
.site-footer .trust-footer { margin: 0; border-top: 1px solid var(--footer-line); color: #9a9dcf; }
.site-footer .trust-footer a { color: var(--footer-text); }
.site-footer .trust-footer a:hover { color: #fff; }
/* Radios and checkboxes are never full-width boxes; hidden tab radios take no room at all. */
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; padding: 0; border-radius: 0; }
.tab-radio { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }

/* --- The landing page and plans (home.html, _plans.html) ----------------------------------- */
.lp-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding: 24px 0 40px; }
.lp-hero h1 { font-size: 40px; line-height: 1.15; margin: 0 0 16px; font-weight: 600; }
.lp-hero .lead, .lp-section .lead { font-size: 18px; color: var(--muted); line-height: 1.55; margin: 0 0 24px; }
.lp-hero .cta-row, .lp-section .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.lp-panel { background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--color-primary); border-radius: var(--radius-lg); padding: 20px; font-size: 14px; }
.lp-panel h3 { margin: 8px 0 4px; font-size: 18px; }
.lp-panel-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.lp-track { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lp-track li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.lp-track li.done { color: var(--ink); }
.lp-section { padding: 40px 0; }
.lp-section > h2, .lp-sides h2 { font-size: 28px; margin: 0 0 16px; max-width: 760px; }
.lp-section .eyebrow, .lp-hero .eyebrow { margin: 0 0 12px; }
.lp-section .two-col .card p { margin: 0 0 12px; }
.lp-section .two-col .card ul, .lp-list { font-size: 15px; color: var(--ink); }
.lp-section .two-col .card li { margin-bottom: 8px; color: var(--muted); }
.lp-steps { margin-top: 8px; }
.lp-steps .step .num { margin-bottom: 12px; }
.lp-steps .step p { font-size: 14px; }
.lp-band { padding: 48px 0; margin-top: 16px; }
.lp-sides { gap: 48px; align-items: flex-start; }
.lp-sides > div { flex: 1; }
.lp-list { list-style: none; padding: 0; margin: 0 0 24px; }
.lp-list li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.5; }
.lp-list li strong { color: var(--ink); }
.lp-features .tile h3 { font-size: 16px; }
.lp-features .tile p { font-size: 14px; }
.lp-features .tile a { font-size: 14px; font-weight: 600; }
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0; }
.plan { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.plan-featured { border-top: 3px solid var(--color-accent); }
.plan h3 { margin: 0 0 4px; font-size: 22px; }
.plan-for { margin: 0 0 8px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.plan-line { margin: 0 0 12px; font-weight: 600; color: var(--color-primary); font-size: 14px; }
.plan ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.plan li { margin-bottom: 8px; }
.plan-notes table { margin: 0 0 12px; }
.plan-notes td:first-child { font-weight: 600; color: var(--ink); }
.lp-cta { padding: 56px 0; margin-top: 24px; text-align: center; }
.lp-cta img { height: 56px; width: auto; margin: 0 auto 24px; display: block; }
.lp-cta h2 { color: #fff; font-size: 28px; margin: 0 0 8px; }
.lp-cta p { color: var(--footer-text); margin: 0 0 24px; }
.lp-cta .cta-row { justify-content: center; }
.lp-cta .btn-secondary { background: transparent; color: #fff; border-color: var(--p2s-periwinkle); }
.lp-cta .btn-secondary:hover { background: #2c2a66; color: #fff; }
.lp-cta-link { color: var(--p2s-periwinkle); font-weight: 600; font-size: 14px; }
.band-tint { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-dark { background: var(--color-masthead); }
@media (max-width: 900px) { .lp-hero { grid-template-columns: 1fr; gap: 24px; } .plan-grid { grid-template-columns: repeat(2, 1fr); } .lp-sides { flex-direction: column; gap: 32px; } .lp-hero h1 { font-size: 32px; } }
@media (max-width: 640px) { .plan-grid { grid-template-columns: 1fr; } .two-col, .steps { flex-direction: column; } .tile-grid { grid-template-columns: 1fr; } }
.bleed-inner { max-width: 1120px; }   /* lines up with the page column */
.doc-page { max-width: 760px; }
.doc-page h2 { margin-top: 32px; }
.doc-page li { margin-bottom: 8px; }

/* Marketing heroes: 40px semibold, never extra bold. */
.hero h1 { font-size: 40px; font-weight: 600; line-height: 1.15; }
.hero .lead { font-size: 18px; }
.band h2 { font-size: 28px; }
/* A tile whose caption is a sentence reads as text, not as a shouted label. */
.scorecard-tile .stat-label { font-family: var(--font-body); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.5; }
/* Section links on Manage visit: squared like every other control (no pill shapes). */
.visit-steps a { border-radius: var(--radius-md); }
/* A button inside a card keeps the button's own layout (older card rules set links to inline-block). */
.two-col .card > a.btn, .tile-grid .tile a.btn, .col-3 .item a.btn { display: inline-flex; font-size: 14px; font-weight: 600; }

/* Masthead tools (2026-10-06): the page's primary action, notifications, help and the account menu. */
.site-header { gap: 0 16px; }
.mast-tools { order: 2; display: flex; align-items: center; gap: 4px; margin-left: auto; min-height: 48px; }
.mast-link { color: #d6d8f5; font-size: 14px; font-weight: 500; text-decoration: none; padding: 6px 8px; }
.mast-link:hover { color: #fff; }
.mast-action { margin: 0 8px 0 0; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--radius-md); }
.mast-action .mast-icon { width: 16px; height: 16px; }
.mast-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); color: #e3e4fb; }
.mast-icon-btn:hover, .account-menu > summary:hover { background: #2c2a66; color: #fff; }
.mast-icon { display: block; flex-shrink: 0; }
.mast-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.mast-icon-btn .mast-count { position: absolute; top: 0; right: -2px; border: 2px solid var(--color-masthead); min-width: 20px; height: 20px; }
.site-header nav a .mast-count { margin-left: 4px; background: var(--p2s-periwinkle); color: var(--p2s-night); }
.account-menu { position: relative; margin-left: 4px; }
.account-menu > summary { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: var(--radius-md); cursor: pointer; list-style: none; color: #fff; font-size: 14px; font-weight: 600; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary .mast-icon { width: 16px; height: 16px; }
.account-menu .avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--p2s-lavender); color: var(--p2s-night); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 240px; padding: 6px 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.account-who { margin: 0; padding: 8px 16px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.account-pop a, .account-pop .account-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 0; margin: 0; padding: 9px 16px; border: 0; border-radius: 0; background: none; color: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; justify-content: flex-start; cursor: pointer; }
.account-pop a:hover, .account-pop .account-item:hover { background: var(--bg-tint); color: var(--ink); }
.account-pop .mast-icon { color: var(--muted); width: 18px; height: 18px; }
.account-pop form { margin: 0; }
.account-sep { height: 1px; margin: 6px 0; background: var(--line); }
@media (max-width: 900px) { .account-name { display: none; } .mast-action span { display: none; } .mast-action { padding: 0 10px; margin-right: 4px; } }
.mast-icon-btn .mast-count { top: -3px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }
.mast-icon-btn { margin-right: 6px; }

/* The public masthead's "Get started" menu (2026-10-06). */
.start-menu > summary { margin: 0 0 0 8px; padding: 0 12px 0 14px; gap: 8px; min-height: 34px; color: #fff; font-size: 14px; }
.start-menu > summary:hover { background: var(--color-primary-hover); }
.start-pop { min-width: 300px; padding: 8px 0; }
.start-pop a { align-items: flex-start; padding: 10px 16px; }
.start-pop a .mast-icon { margin-top: 2px; width: 20px; height: 20px; }
.start-pop a span { display: flex; flex-direction: column; gap: 2px; }
.start-pop a strong { font-weight: 600; font-size: 15px; color: var(--ink); }
.start-pop a small { font-size: 13px; color: var(--muted); font-weight: 400; }
html { scroll-behavior: smooth; }
@media (max-width: 900px) { .mast-action.btn .start-label, .start-menu > summary .start-label { display: inline; } }

/* One row at every width (Tyler, 2026-10-06): on a narrow screen the sections leave the bar and
   appear in their own "Menu" at the right, signed in or not (site review 2026-11). */
.site-header { flex-wrap: nowrap; }
.site-header nav { flex-wrap: nowrap; min-width: 0; }
.mast-sections { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.mast-tools { flex-shrink: 0; }
.nav-menu, .account-pop a.only-small { display: none; }
.nav-menu > summary { justify-content: center; width: 36px; height: 36px; padding: 0; margin-left: 4px; }
.nav-menu > summary .mast-icon { width: 20px; height: 20px; }
.nav-pop a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }
.nav-pop a .mast-count { margin-left: auto; background: var(--color-primary); color: #fff; }
@media (max-width: 900px) {
  .mast-sections { display: none; }
  .nav-menu { display: block; }
  .site-header nav { flex: 0 0 auto; }
  .site-header nav > :first-child { margin-right: 0; }
}
@media (max-width: 640px) {
  .mast-tools > .mast-link { display: none; }
  .account-pop a.only-small { display: flex; }
  .mast-tools { gap: 2px; }
  .mast-icon-btn { margin-right: 2px; }
  .account-pop { min-width: 220px; max-width: calc(100vw - 32px); }
}

/* The account button is the initials and a chevron only; the name is inside the menu (2026-10-06). */
.account-menu > summary { gap: 6px; padding: 4px 6px 4px 4px; }
.account-menu .avatar { width: 30px; height: 30px; }
.account-who { padding: 12px 16px; }
.account-who strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3; }
.account-who span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }

/* The company's home (Tyler's layout, 2026-10-06): filter, figures, panels with rows. */
.home-title { margin-bottom: 2px; }
.home-sub { margin: 0 0 16px; }
.home-filters { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: inline-flex; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); min-height: 0; gap: 0; overflow: hidden; }
.seg a { padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; border-right: 1px solid var(--line); border-bottom: 0; }
.seg a:last-child { border-right: 0; }
.seg a:hover { background: var(--bg-tint); color: var(--ink); }
.seg a.active { background: var(--bg-tint); color: var(--color-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-primary); }
.home-picks { display: flex; gap: 8px; }
.pick { position: relative; }
.pick > summary { list-style: none; cursor: pointer; padding: 7px 28px 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); font-size: 14px; font-weight: 500; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick > summary::-webkit-details-marker { display: none; }
.pick > summary::after { content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.pick-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; min-width: 220px; max-height: 320px; overflow: auto; padding: 4px 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.pick-pop a { display: block; padding: 8px 12px; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.pick-pop a:hover { background: var(--bg-tint); }
.pick-pop a.active { color: var(--color-primary); font-weight: 600; }
.fig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fig { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; }
.fig-label { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.fig-value { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); }
.fig-value a { color: inherit; text-decoration: none; }
.fig-value a:hover { color: var(--color-primary); }
.fig-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.fig-alert .fig-note { color: var(--color-warning); font-weight: 500; }
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; }
.panel-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.panel-count { font-size: 13px; color: var(--muted); }
.panel-link { margin-left: auto; font-size: 14px; font-weight: 500; text-decoration: none; }
.panel-link.second { margin-left: 0; }
.panel-link:hover { text-decoration: underline; }
.panel-table { margin: 0; border: 0; border-radius: 0; }
.panel-table th { background: #fafafd; color: var(--muted); font-weight: 500; }
.panel-table td a { text-decoration: none; font-weight: 500; }
.panel-table td a:hover { text-decoration: underline; }
.panel-empty, .panel-foot { margin: 0; padding: 12px 16px; }
.late { color: var(--color-danger); font-weight: 500; }
.answer-list { list-style: none; margin: 0; padding: 0; }
.answer-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.answer-list li:last-child { border-bottom: 0; }
.answer-what { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.answer-detail { color: var(--muted); font-size: 13px; white-space: nowrap; }
.answer-detail.urgent { color: var(--color-warning); font-weight: 500; }
.answer-go { font-weight: 600; text-decoration: none; white-space: nowrap; }
.answer-go:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .answer-list li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .answer-what { grid-column: 1 / -1; white-space: normal; }
  .home-filters { align-items: flex-start; }
}
.answer-list .pill { justify-self: start; }

/* The Dispatch list (Tyler's layout, 2026-10-06). */
.list-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.list-head h1 { margin: 0; }
.list-tabs { margin: 16px 0; gap: 4px 24px; }
.list-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: #e9eaf2; color: var(--muted); font-size: 12px; font-weight: 600; }
.tab-count-warn { background: var(--color-warning-bg); color: var(--color-warning-on-bg); }
.list-tools { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.list-search { flex: 1; margin: 0; }
.list-search input[type="search"] { height: 38px; padding-left: 12px; border-color: var(--line); }
.list-tools .pick > summary { height: 38px; display: flex; align-items: center; }
.request-table td { padding: 12px 16px; vertical-align: top; }
.request-table th { padding: 10px 16px; }
.request-title { font-weight: 600; color: var(--ink); text-decoration: none; }
.request-title:hover { color: var(--color-primary); text-decoration: underline; }
.cell-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); font-weight: 400; }
.priority { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.priority::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9a9cb5; }
.priority-critical::before, .priority-high::before { background: var(--color-danger); }
.priority-medium::before { background: #d08700; }
.arrival-main { display: block; }
.arrival-main.late { color: var(--color-danger); font-weight: 600; }
.arrival-main.soon { color: var(--color-warning); font-weight: 600; }
.row-attention td { background: #fffbeb; }
.row-attention td:first-child { box-shadow: inset 3px 0 0 #e2b93b; }
tr.row-attention:hover td { background: #fff6d6; }
.row-action { text-align: right; white-space: nowrap; }
.row-action .btn { min-height: 34px; }
.list-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.list-foot a { color: var(--muted); }
@media (max-width: 640px) { .list-tools { flex-wrap: wrap; } .list-search { flex: 1 1 100%; } }
.subnav > :first-child { margin-right: 0; }   /* the masthead's "logo pushes the rest right" rule is for the masthead only */
.request-table .pill, .request-table .arrival-main, .request-table td:not(:first-child) .cell-sub { white-space: nowrap; }
.request-table td:first-child { min-width: 220px; }

/* Signed-in pages are wider than the reading pages, as in Tyler's mock-ups (tables need the room). */
body { --page-w: 1120px; }
body:not(.public) { --page-w: 1280px; max-width: var(--page-w); }
.site-header { padding-left: max(24px, calc(50vw - var(--page-w) / 2)); padding-right: max(24px, calc(50vw - var(--page-w) / 2)); }
@media (max-width: 640px) { .site-header { padding-left: 16px; padding-right: 16px; } }

/* The job progress tracker, corrected (2026-10-06): the steps share the full width evenly, each
   connector runs from one circle's centre to the next (no gaps), and labels sit centred under
   their circle on one line. The compact row of dots used in lists is unchanged. */
.trk:not(.trk-compact) { max-width: none; margin: 16px 0 20px; padding: 20px 8px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.trk:not(.trk-compact) .trk-step { flex: 1 1 0; width: auto; min-width: 0; gap: 8px; }
.trk:not(.trk-compact) .trk-line { display: none; }
.trk:not(.trk-compact) .trk-step::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.trk:not(.trk-compact) .trk-step:first-child::before { display: none; }
.trk:not(.trk-compact) .trk-line.done + .trk-step::before { background: var(--color-success); }
.trk:not(.trk-compact) .trk-dot { position: relative; z-index: 1; width: 32px; height: 32px; min-height: 0; border: 2px solid var(--line); background: var(--bg); color: var(--muted); font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1; }
.trk:not(.trk-compact) .trk-dot:hover { background: var(--bg-tint); border-color: var(--color-primary); }
.trk-done .trk-dot, .trk:not(.trk-compact) .trk-done .trk-dot { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.trk:not(.trk-compact) .trk-done .trk-dot:hover { background: #126a33; border-color: #126a33; }
.trk-current .trk-dot, .trk:not(.trk-compact) .trk-current .trk-dot { background: var(--bg); border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 0 4px var(--bg-tint); }
.trk-warn .trk-dot, .trk:not(.trk-compact) .trk-warn .trk-dot { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
.trk:not(.trk-compact) .trk-label { font-size: 13px; line-height: 1.3; color: var(--muted); padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.trk:not(.trk-compact) .trk-done .trk-label { color: var(--ink); }
.trk:not(.trk-compact) .trk-current .trk-label, .trk:not(.trk-compact) .trk-warn .trk-label { color: var(--ink); font-weight: 600; }
.trk:not(.trk-compact) .trk-pop { top: 46px; left: 50%; transform: translateX(-50%); }
.trk:not(.trk-compact) .trk-step:first-child .trk-pop { left: 8px; transform: none; }
.trk:not(.trk-compact) .trk-step:last-child .trk-pop { left: auto; right: 8px; transform: none; }
.trk-pop.mini-preview { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--bg); }
.trk-note { border-radius: var(--radius-md); }
@media (max-width: 640px) {
  .trk:not(.trk-compact) { padding: 14px 4px 10px; }
  .trk:not(.trk-compact) .trk-step { width: auto; }
  .trk:not(.trk-compact) .trk-pop, .trk:not(.trk-compact) .trk-step:first-child .trk-pop, .trk:not(.trk-compact) .trk-step:last-child .trk-pop { left: 0; right: auto; transform: none; }
}
@media (max-width: 640px) {
  /* On a phone the labels are hidden and each card spans the tracker, so the steps aren't positioned
     themselves; the connectors are the line elements between the circles instead. */
  .trk:not(.trk-compact) { padding: 14px 12px 12px; align-items: center; }
  .trk:not(.trk-compact) .trk-step { flex: 0 0 32px; width: 32px; }
  .trk:not(.trk-compact) .trk-step::before { display: none; }
  .trk:not(.trk-compact) .trk-line { display: block; flex: 1; height: 2px; margin: 0; min-width: 6px; background: var(--line); }
  .trk:not(.trk-compact) .trk-line.done { background: var(--color-success); }
  .trk:not(.trk-compact) .trk-pop, .trk:not(.trk-compact) .trk-step:first-child .trk-pop, .trk:not(.trk-compact) .trk-step:last-child .trk-pop { top: 58px; left: 0; right: auto; transform: none; }
}

/* Pop-ups in the brand format (2026-10-06). A pop-up window has a tinted title band, its body, and
   the actions in a band along the bottom; the page behind dims in the brand's night colour. The
   tracker's cards have the same title band and open below the step's label, not over it.
   Markup is unchanged: the bands are the pop-up's own <h2> and .modal-actions pulled to its edges. */
.modal { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-lg); font-size: 14px; }
.modal::backdrop { background: rgba(20, 18, 43, .64); }
.modal > h2 { margin: -24px -24px 16px; padding: 16px 60px 16px 24px; background: var(--color-surface-tint); border-bottom: 1px solid var(--line);
              font-size: 18px; line-height: 1.3; }
.modal > h2 + p { margin-top: 0; }
.modal h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; }
.modal-actions { margin: 20px -24px 12px; padding: 14px 24px; background: var(--color-bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.modal > .modal-actions:last-child, .modal > form:last-child > .modal-actions:last-child { margin-bottom: -24px; border-bottom: 0; }
.modal form:not(.modal-actions):not(.modal-close-form) { margin-bottom: 0; }
.modal-close-form, .modal-x-abs { top: 11px; right: 14px; }
.modal-x { width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text-muted); font-size: 22px; }
.modal-x:hover { background: #fff; color: var(--ink); }
.modal-answers, .confirm-facts { border-radius: var(--radius-md); }
@media (max-width: 640px) {
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions button { width: 100%; }
}
.trk-pop.mini-preview { padding: 0 16px 12px; overflow: hidden; }
.trk-pop .mini-preview-header { margin: 0 -16px 8px; padding: 10px 16px; background: var(--color-surface-tint); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); }
.trk-pop .trk-note { margin-top: 8px; }
@media (min-width: 641px) {
  .trk:not(.trk-compact) .trk-pop { top: calc(100% + 2px); }
}
/* Inside a pop-up: option buttons and tick boxes line up with their words at the pop-up's text size;
   a confirmation that removes, cancels or can't be undone (data-confirm-tone="danger") has a red band. */
.modal label:has(> input[type=radio]), .modal label:has(> input[type=checkbox]) { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; font-size: 14px; font-weight: 400; line-height: 1.45; }
.modal label > input[type=radio], .modal label > input[type=checkbox] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; }
.modal label:has(> input[type=radio]) > strong { flex: none; }
.modal fieldset { border: 0; padding: 0; margin: 12px 0; }
.modal legend { padding: 0; font-size: 13px; font-weight: 600; }
.modal select, .modal textarea, .modal input[type=text], .modal input[type=number] { width: 100%; }
.modal-danger > h2 { background: var(--color-danger-bg); color: var(--color-danger-on-bg); border-bottom-color: #f5c2c2; }
/* A pop-up taller than the screen scrolls; its buttons stay in view at the bottom. */
.modal > .modal-actions:last-child, .modal > form:last-child > .modal-actions:last-child { position: sticky; bottom: -24px; z-index: 1; }
/* A job's facts (label and value) read as one column, not stretched across a wide page. */
.fact-card { max-width: 640px; padding: 8px 20px; }
.workitem-field { font-size: 14px; }
/* Status tags read in sentence case wherever they're written. */
.pill::first-letter, .state-badge::first-letter { text-transform: uppercase; }

/* Site-wide format check (2026-10-06): what the crawl of every page found. */
/* Flat surfaces: photos and the sign-in panel are bordered, not shadowed (shadows are for menus and pop-ups). */
.photo-band, .auth-aside, .mini-preview:not(.trk-pop) { box-shadow: none; }
.photo-band, .auth-aside { border: 1px solid var(--line); border-radius: var(--radius-lg); }
/* The sign-in and sign-up side panel in the brand's night and indigo, not the old navy. */
.auth-aside { background: var(--p2s-night); }
.auth-aside .shade { background: linear-gradient(to top, rgba(20, 18, 43, .94) 25%, rgba(20, 18, 43, .45) 70%, rgba(20, 18, 43, .2)); }
.auth-aside.plain { background: linear-gradient(150deg, var(--p2s-indigo-950), var(--p2s-night)); }
.auth-aside ul.ticks li::before { color: var(--p2s-periwinkle); }
.photo-band .photo-caption { background: linear-gradient(to top, rgba(20, 18, 43, .82), rgba(20, 18, 43, 0)); }
/* Nothing smaller than 11px. */
.bar-chart .bar-label, .donut-figure .donut-center .donut-caption, .method-tag { font-size: 11px; }
.method-tag { border-radius: var(--radius-sm); }
code { font-size: max(12px, .95em); }
/* The developer reference fits a phone: its column may shrink, and long code scrolls inside its own box. */
.docs-content { min-width: 0; }
.docs-content pre, .docs-content table { max-width: 100%; overflow-x: auto; }
/* Buttons in a table row keep their words on one line. */
td button, td .btn { white-space: nowrap; }
.wizard-steps .step-item .step-label { font-size: 12px; }
/* Summary tiles hug their content: label, figure, one line of explanation. */
.kpi-card { gap: 8px; justify-content: flex-start; }
.kpi-card > * { margin: 0; }
.mast-count, .mast-icon-btn .mast-count { font-size: 11px; }
/* Chart panels may shrink to a phone's width. */
.chart-card { min-width: 0; max-width: 100%; }
.chart-card > * { max-width: 100%; }

/* Typing boxes stop at a reading width (Tyler, 2026-10-07): a signed-in page is 1280px wide for
   its tables, and a box that wide asks for a longer answer than it wants. Search and filter bars, the chat
   box and boxes inside a table keep the room they're given. A phone is narrower than the limit already. */
main :is(input, select, textarea) { max-width: 640px; }
main :is(.list-search, .filter-bar, .search-form, .chat-form, table) :is(input, select, textarea) { max-width: none; }
/* A box used to fill its line, so whatever followed it started a new one. Keep that now it's narrower. */
main :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):not([style*="width"], :is(.list-search, .filter-bar, .search-form, .chat-form, table) *) { display: block; }

/* The dispatch work order (Tyler's layout, 2026-10-07): the title and its facts with the actions beside
   them; an overview in two columns — what's needed now and what the technician reported, with the visit's
   facts and the parts alongside — and the Activity tab's timeline. */
.wo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.wo-head h1 { margin: 0 0 8px; }
.wo-head .wo-actions { margin: 4px 0 0; }
.wo-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wo-facts li { padding: 2px 8px; border-radius: var(--radius-md); background: var(--color-border); color: var(--color-text-muted); font-size: 13px; }
.wo-facts li[class*="urgency-tag-"] { color: var(--color-text-muted); }
.wo-facts li.urgency-tag-critical, .wo-facts li.urgency-tag-high { background: var(--color-warning-bg); color: var(--color-warning-on-bg); font-weight: 600; }
.wo-menu > summary.btn { display: inline-flex; align-items: center; max-width: none; padding-right: 30px; color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }
.wo-menu > summary.btn::after { border-color: var(--color-primary); }
.wo-menu .pick-pop button { display: block; width: 100%; min-height: 0; margin: 0; padding: 8px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: var(--color-danger); font-size: 14px; font-weight: 400; text-align: left; white-space: nowrap; }
.wo-menu .pick-pop button:hover { background: var(--color-danger-bg); }
.wo-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.wo-grid .card { margin: 0 0 20px; }
.wo-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 16px; }
.now-title { margin: 0 0 6px; font-size: 18px; }
.now-card p { margin: 0 0 12px; color: var(--color-text-muted); }
.now-card > :last-child { margin-bottom: 0; }
.now-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.now-buttons button, .now-buttons .btn { margin: 0; }
.wo-report { list-style: none; margin: 0; padding: 0; }
.wo-report li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wo-report li:last-child { border-bottom: 0; }
.wo-check { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--color-border-strong); border-radius: 50%; font-size: 11px; line-height: 15px; text-align: center; color: #fff; }
.wo-report li.done .wo-check { background: var(--color-success); border-color: var(--color-success); }
.wo-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wo-photos a { display: flex; align-items: center; justify-content: center; width: 96px; height: 72px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-tint); overflow: hidden; font-size: 12px; color: var(--color-text-muted); text-decoration: none; }
.wo-photos img { width: 100%; height: 100%; object-fit: cover; }
.wo-rows { margin: 0; }
.wo-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; }
.wo-rows dt { color: var(--color-text-muted); }
.wo-rows dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.wo-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wo-activity { list-style: none; margin: 0; padding: 0; }
.wo-activity li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wo-activity li:last-child { border-bottom: 0; }
.wo-when { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.trk-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--color-text-muted); text-align: center; white-space: nowrap; }
.trk:not(.trk-compact) .trk-attn .trk-dot { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning-on-bg); box-shadow: 0 0 0 4px var(--color-warning-bg); }
@media (max-width: 900px) { .wo-grid { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 640px) {
  .wo-activity li { grid-template-columns: 1fr; gap: 2px; }
  .trk-sub { display: none; }
}
.wo-head .wo-actions button, .wo-head .wo-actions .btn { margin: 0; }

/* Manage visit (Tyler's layout, 2026-10-07): the steps in one column — each done, waiting on the company
   (amber edge) or not open yet (dashed) — and the conversation with the technician alongside. */
.link-button { min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--color-link); font-size: 14px; font-weight: 400; text-decoration: underline; cursor: pointer; }
.link-button:hover { background: none; color: var(--color-primary-hover); }
.mv-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; margin-top: 20px; }
.mv-steps > .card, .mv-steps > .notice, .mv-steps > div { margin: 0 0 20px; }
.mv-card { scroll-margin-top: 16px; }
.mv-card.mv-active { border-left: 4px solid var(--color-warning); }
.mv-card.mv-locked { background: transparent; border-style: dashed; }
.mv-card.mv-locked h2 { color: var(--color-text-muted); }
.mv-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mv-title h2 { margin: 0; font-size: 18px; }
.mv-num { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 2px solid var(--color-border); border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.mv-num.ok { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.mv-num.now { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning-on-bg); }
.mv-hint, .mv-hint a { font-size: 13px; }
.mv-hint { color: var(--color-text-muted); }
.mv-docico { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mv-facts { display: flex; gap: 12px 28px; flex-wrap: wrap; margin: 14px 0 0; }
.mv-facts dt { font-size: 13px; color: var(--color-text-muted); }
.mv-facts dd { margin: 0; }
.mv-facts strong { font-size: 16px; }
.mv-ticks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 6px 24px; flex-wrap: wrap; }
.mv-ticks li::before { content: "\2013"; margin-right: 8px; color: var(--color-text-muted); font-weight: 700; }
.mv-ticks li.ticked::before { content: "\2713"; color: var(--color-success); }
.mv-ticks.pending { margin-top: 0; }
.mv-items { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
.mv-items > div { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.mv-items > div:first-child { border-top: 0; }
.mv-items > div > span:first-child { flex: 1; min-width: 0; }
.mv-warn { margin: 0; font-weight: 600; }
.mv-actions { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; margin: 16px 0 0; }
.mv-actions button { margin: 0; }
.mv-files { list-style: none; margin: 14px 0 0; padding: 0; }
.mv-files li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mv-files li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mv-files small, .mv-drop small { display: block; font-size: 13px; color: var(--color-text-muted); font-weight: 400; }
.mv-drop { margin: 14px 0 0; padding: 18px; border: 1.5px dashed var(--p2s-periwinkle); border-radius: var(--radius-lg); background: var(--color-surface-tint); text-align: center; }
.mv-drop.over { background: var(--p2s-mist); border-color: var(--color-primary); }
.mv-drop label { margin: 0 0 10px; font-size: 14px; font-weight: 400; cursor: pointer; }
.mv-drop strong { font-weight: 600; }
.mv-browse { color: var(--color-link); text-decoration: underline; }
.mv-drop input[type="file"] { display: inline-block; width: auto; max-width: 100%; }
.mv-drop.enhanced input[type="file"], .mv-drop.enhanced button { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mv-drop.enhanced { position: relative; }
.mv-drop.enhanced label { margin: 0; }
.mv-chat { display: flex; flex-direction: column; padding: 0; margin: 0; overflow: hidden; position: sticky; top: 16px; max-height: calc(100vh - 32px); scroll-margin-top: 16px; }
.mv-chat > header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.mv-chat > header small { display: block; font-size: 13px; color: var(--color-text-muted); }
.mv-who { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-tint); color: var(--ink); font-weight: 600; }
.mv-live { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--color-success); }
.mv-thread { flex: 1; min-height: 220px; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--color-bg); overflow: auto; }
.mv-thread .chat-msg { background: var(--bg); }
.mv-thread .chat-msg.mine { background: var(--color-surface-tint); }
.mv-sys { align-self: center; font-size: 12px; color: var(--color-text-muted); }
.mv-compose { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; padding: 10px 10px 10px 18px; border-top: 1px solid var(--line); }
.mv-compose textarea { flex: 1; min-width: 0; min-height: 36px; padding: 6px 0; border: 0; outline: 0; background: none; resize: none; }
.mv-compose textarea:focus { outline: 0; border: 0; }
.mv-compose:focus-within { box-shadow: inset 0 0 0 2px var(--color-focus-ring); }
.mv-compose button { margin: 0; }
.mv-clip { flex: none; display: flex; margin: 0; padding: 6px; border-radius: var(--radius-md); cursor: pointer; }
.mv-clip:hover { background: var(--color-surface-tint); }
.mv-clip svg { width: 20px; height: 20px; fill: none; stroke: var(--color-text-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mv-clip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mv-clip:focus-within { outline: 2px solid var(--color-focus-ring); }
.mv-attached { flex-basis: 100%; font-size: 12px; color: var(--color-text-muted); }
.mv-chat > footer { padding: 10px 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 900px) {
  .mv-grid { grid-template-columns: 1fr; }
  .mv-chat { position: static; max-height: none; }
  .mv-thread { max-height: 420px; }
}

/* Company management (Tyler's layout, 2026-10-07): each tab opens with its name, a line on what it's for and
   its actions; filters are chips; lists sit in a bordered panel with a footer line. */
.cm-tabs { margin: 0 0 4px; }
.cm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; margin-top: 24px; }
.cm-head h2 { margin: 0; font-size: 20px; }
.cm-head p { margin: 2px 0 0; max-width: 760px; color: var(--color-text-muted); }
.cm-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cm-actions button, .cm-actions .btn { margin: 0; }
.cm-tools { margin: 16px 0 0; align-items: center; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg); color: var(--color-text-muted); font-size: 14px; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--color-border-strong); color: var(--ink); }
.chip.on { background: var(--color-surface-tint); border-color: var(--p2s-periwinkle); color: var(--ink); font-weight: 600; }
.cm-table { margin: 16px 0 0; padding: 0; overflow: hidden; }
.cm-table table { margin: 0; border: 0; }
.cm-table td { vertical-align: top; }
.cm-foot { padding: 12px 16px; }
.cm-code { font-weight: 600; text-decoration: none; }
.cm-mono { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted); }
.cm-group td { background: var(--color-surface-tint); font-weight: 600; }
.cm-group span { margin-left: 8px; font-weight: 400; color: var(--color-text-muted); }
.cm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: stretch; }
.cm-row { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 20px; margin-top: 20px; align-items: stretch; }
.cm-two > .card, .cm-row > .card { margin: 0; display: flex; flex-direction: column; }
.cm-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-card-head h3, .cm-two h3, .cm-row h3 { margin: 0; font-size: 16px; }
.cm-card-head > :last-child:not(h3) { margin-left: auto; }
.cm-note { margin: 4px 0 0; font-size: 13px; color: var(--color-text-muted); }
.cm-list { list-style: none; margin: 12px 0 0; padding: 0; flex: 1; }
.cm-list > li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.cm-list > li:first-child { border-top: 0; }
.cm-list .cm-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cm-list small { display: block; font-size: 13px; color: var(--color-text-muted); }
.cm-list form { margin: 0; }
.cm-grip { color: var(--color-border-strong); letter-spacing: -2px; cursor: grab; user-select: none; }
.cm-list li.dragging { opacity: .5; }
.cm-move { display: inline-flex; gap: 2px; }
.cm-move button, .cm-x { min-height: 0; margin: 0; padding: 2px 6px; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text-muted); font-size: 14px; font-weight: 400; cursor: pointer; }
.cm-move button:hover:not(:disabled) { background: var(--color-surface-tint); color: var(--ink); }
.cm-x:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.cm-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; padding: 5px 5px 5px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.cm-add input[type="text"] { flex: 1; min-width: 160px; max-width: none; min-height: 32px; padding: 0; border: 0; outline: 0; background: none; }
.cm-add:focus-within { outline: 2px solid var(--color-focus-ring); }
.cm-add label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: 13px; font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }
.cm-add button { margin: 0; min-height: 32px; padding: 4px 14px; }
.cm-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 12px; padding: 26px 16px; border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-text-muted); text-align: center; }
.cm-empty strong { display: block; color: var(--ink); }
.cm-upload { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 12px; align-items: end; margin-top: 14px; }
.cm-upload label { margin-top: 0; }
.cm-upload :is(input, select) { max-width: none; }
.cm-upload button { margin: 0; }
.cm-drop { display: flex; align-items: center; justify-content: center; min-height: 36px; margin: 0; padding: 0 12px; border: 1.5px dashed var(--p2s-periwinkle); border-radius: var(--radius-md); background: var(--color-surface-tint); color: var(--color-text-muted); font-size: 14px; font-weight: 400; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-drop.over { border-color: var(--color-primary); background: var(--p2s-mist); }
.cm-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cm-drop:focus-within { outline: 2px solid var(--color-focus-ring); }
.cm-big { margin-top: 10px; font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1.2; }
.cm-big.none { color: var(--color-text-muted); }
.cm-stars { font-size: 22px; letter-spacing: 3px; color: var(--color-border); }
.cm-stars b { color: #b45309; font-weight: 400; }
.cm-prog { display: flex; gap: 6px; margin: 16px 0 6px; }
.cm-prog i { flex: 1; height: 8px; border-radius: 4px; background: var(--color-border); }
.cm-prog i.on { background: var(--color-primary); }
.cm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 10px; margin-top: 14px; }
.cm-tile { padding: 12px; border-radius: var(--radius-lg); background: var(--color-bg); }
.cm-tile span { display: block; min-height: 2.9em; font-size: 13px; color: var(--color-text-muted); }
.cm-tile b { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.4; }
.cm-tile b.none { color: var(--color-text-muted); }
.cm-tile small { font-size: 12px; color: var(--color-text-muted); }
.cm-todo { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.cm-todo > div { flex: 1; min-width: 0; }
.cm-todo small { display: block; font-size: 13px; color: var(--color-text-muted); }
.cm-how { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.cm-how summary { cursor: pointer; font-weight: 600; color: var(--color-primary); }
.cm-how ul { margin: 10px 0 2px; padding-left: 20px; color: var(--color-text-muted); }
@media (max-width: 900px) { .cm-two, .cm-row, .cm-upload { grid-template-columns: 1fr; } }
.cm-tile span { min-height: 3.1em; line-height: 1.5; }
.cm-list > li { flex-wrap: wrap; } .cm-list .cm-t { flex: 1 1 170px; overflow-wrap: break-word; }
.pill.preferred { background: var(--color-surface-tint); color: var(--color-primary-hover); }

/* The list format on staff and contractor pages (2026-10-07), as on the company's: a page opens with its
   title, a line on what it's for and its actions; filters are chips; a list sits in a bordered panel. */
.page-head { margin-top: 0; }
.page-head h1 { margin: 0 0 2px; }
.page-head p { max-width: 900px; }
.page-chips { margin: 16px 0 0; }
.page-head + .card, .page-head + form, .page-chips + .card:not(.cm-table), .cm-tools + .card:not(.cm-table) { margin-top: 16px; }
.cm-table + p, .cm-table + .muted { margin-top: 12px; }
@media (max-width: 640px) { .cm-table:has(table.stacked) { border: 0; background: none; } .cm-table:has(table.stacked) .cm-foot { border-top: 0; padding: 8px 0; } }
.mv-work { margin-top: 14px; } .mv-work > :last-child { margin-bottom: 0; }
.page-head + .kpi-grid, .page-head + .notice, .page-head + .notice-banner { margin-top: 16px; }

/* The contractor's Home (2026-10-08, worker_dashboard.html): the setup strip, the next visit beside what
   needs an answer, then the jobs under way grouped by what each needs. */
.th-setup { display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; padding: 14px 20px; border: 1px solid var(--line); border-left: 3px solid var(--color-warning); border-radius: var(--radius-md); background: var(--color-warning-bg); }
.th-setup-lead { flex: 1 1 280px; }
.th-setup h2 { margin: 0; font-size: 16px; }
.th-setup p { margin: 2px 0 0; font-size: 13px; color: var(--ink); }
.th-step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--bg); }
.th-step small { display: block; font-size: 12px; color: var(--color-text-muted); }
.th-no { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 700; }
.th-step.locked { color: var(--color-text-muted); }
.th-step.locked .th-no { background: var(--color-border); color: var(--color-text-muted); }
.th-step.done .th-no { background: var(--status-done-bg); color: var(--status-done-text); }
.th-star { color: var(--color-warning); }
.th-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; margin-top: 16px; align-items: stretch; }
.th-top > .card { margin: 0; display: flex; flex-direction: column; }
.th-next { border-left: 4px solid var(--color-primary); }
.th-label { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); }
.th-next h2 { margin: 6px 0 2px; font-size: 22px; }
.th-next h2 a { color: inherit; text-decoration: none; }
.th-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.th-facts dt { font-size: 13px; color: var(--color-text-muted); }
.th-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.th-acts { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.th-hint { margin: 10px 0 0; font-size: 13px; color: var(--color-text-muted); }
.th-ask h2, .th-jobs h2 { margin: 0; font-size: 16px; }
.th-qs { margin-top: 10px; }
.th-q { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.th-q:first-child { border-top: 0; }
.th-q > div { flex: 1; min-width: 0; }
.th-q small, .th-jobs td small { display: block; font-size: 13px; color: var(--color-text-muted); }
.th-opps { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-bg); }
.th-opps b { font-size: 20px; color: var(--color-primary); }
.th-opps div { flex: 1; }
.th-jobs { margin-top: 20px; }
.th-jobs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.th-group td { background: var(--color-surface-tint); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); }
.th-group.bad td { color: var(--status-overdue-text); }
.th-foot { border-top: 1px solid var(--line); font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 900px) { .th-top { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .th-facts { grid-template-columns: 1fr 1fr; } .th-step { flex: 1 1 100%; } .th-acts .btn { flex: 1; text-align: center; } }
.th-step .btn, .th-q .btn { padding: 5px 12px; font-size: 14px; white-space: nowrap; }

/* The way back from a work order, posting or visit page to its list (2026-10-08): a button, first thing on the
   page, on every such page — "Back to Dispatch", "Back to Opportunities". A second link beside it goes one level up. */
.back-row { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; }
.back-link { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.back-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* A posting's two columns each start with a heading, so the Details box sits level with the work description's. */
.workitem-layout > div > h3:first-child { margin-top: 0; }

/* Dispatch Support (2026-10-08, worker_dispatch_offers.html): the accepting switch, three figures, and each
   offer as a card with its countdown and answer buttons. */
.ds-top { display: flex; gap: 16px 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.ds-top .cm-head { flex: 1 1 420px; }
.ds-avail { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; max-width: 460px; }
.ds-avail small, .ds-stat small, .ds-facts small, .ds-table td small { display: block; font-size: 13px; color: var(--color-text-muted); }
.ds-switch { flex: none; position: relative; width: 44px; height: 24px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 12px; background: var(--status-done-text); box-shadow: none; cursor: pointer; }
.ds-switch::after { content: ""; position: absolute; top: 3px; left: 23px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.ds-switch.off { background: var(--color-border-strong); }
.ds-switch.off::after { left: 3px; }
.ds-switch:hover { transform: none; }
.ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
.ds-stat { margin: 0; padding: 14px 16px; }
.ds-stat span { display: block; font-size: 13px; color: var(--color-text-muted); }
.ds-stat b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.ds-offer { margin-top: 16px; border-left: 4px solid var(--color-warning); }
.ds-offer-head { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.ds-offer h2 { margin: 6px 0 2px; font-size: 20px; }
.ds-offer h2 a { color: inherit; text-decoration: none; }
.ds-timer { text-align: right; }
.ds-timer small { display: block; font-size: 13px; color: var(--color-text-muted); }
.ds-timer b { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; color: var(--color-warning-on-bg); }
.ds-desc { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--color-bg); color: var(--ink); white-space: pre-wrap; }
.ds-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ds-facts dt { font-size: 13px; color: var(--color-text-muted); }
.ds-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ds-accept { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.ds-accept label { display: flex; align-items: center; gap: 8px; margin: 0; }
.ds-accept select { width: auto; margin: 0; }
.ds-accept button { margin: 0; }
.ds-arrive { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-accept small { flex-basis: 100%; margin-top: -4px; }
.ds-gap { flex: 1; }
.ds-done { display: flex; align-items: center; gap: 10px; margin-top: 16px; border-color: var(--good-border); background: var(--good-bg); color: var(--good-text); }
.ds-done a { margin-left: auto; }
.ds-tip { margin-top: 12px; font-size: 13px; }
.ds-table { margin-top: 16px; }
@media (max-width: 640px) { .ds-facts { grid-template-columns: 1fr; } .ds-timer { text-align: left; } .ds-accept button { flex: 1; } }

/* The contractor's job page: the company's arrival and sign-off items side by side on "Action required". */
.jp-criteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 32px; }
.jp-criteria h3 { margin: 0 0 6px; font-size: 14px; }
.jp-criteria ul { margin: 0; padding-left: 20px; }
.jp-criteria li { margin: 4px 0; }
.jp-criteria p { margin: 0; }

/* Opportunity Marketplace (2026-10-08, worker_opportunities.html): the tools row, then one row per posting
   that opens in place (a <details>, so it works without scripts). */
.op-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0 0; }
.op-tools input[type=search] { flex: 1 1 260px; max-width: none; margin: 0; }
.op-tools select { width: auto; margin: 0; }
.op-tools button { margin: 0; }
.op-list { margin-top: 16px; padding: 0; overflow: hidden; }
.op-cols, .op-row > summary { display: grid; grid-template-columns: 20px minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 12px 16px; }
.op-cols { background: var(--color-surface-tint); font-size: 13px; font-weight: 600; color: var(--color-text-muted); padding-top: 9px; padding-bottom: 9px; }
.op-row { border-top: 1px solid var(--line); }
.op-row > summary { cursor: pointer; list-style: none; }
.op-row > summary::-webkit-details-marker { display: none; }
.op-row > summary:hover { background: var(--color-bg); }
.op-row small, .op-table td small, .op-facts small { display: block; font-size: 13px; color: var(--color-text-muted); }
.op-chev { color: var(--color-text-muted); font-size: 18px; line-height: 1.2; transition: transform .15s; }
.op-row[open] .op-chev { transform: rotate(90deg); }
.op-title a { font-weight: 600; }
.op-new { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--color-primary); vertical-align: middle; }
.op-soon { color: var(--color-warning-on-bg); font-weight: 600; }
.op-panel { padding: 4px 16px 16px 52px; }
.op-scope { margin: 0 0 12px; white-space: pre-wrap; }
.op-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0 0 14px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.op-facts dt { font-size: 13px; color: var(--color-text-muted); }
.op-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.op-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.op-acts form { margin: 0; }
.op-gap { flex: 1; }
.op-ghost { margin: 0; padding: 6px 10px; border: 0; background: none; box-shadow: none; color: var(--color-text-muted); font-weight: 600; }
.op-ghost:hover { color: var(--ink); transform: none; background: none; }
.op-empty { margin: 0; padding: 20px 16px; border-top: 1px solid var(--line); }
.op-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); font-size: 13px; color: var(--color-text-muted); }
.op-note { margin-top: 12px; font-size: 13px; }
.op-table { margin-top: 16px; }
@media (max-width: 900px) { .op-cols { display: none; } .op-row > summary { grid-template-columns: 20px minmax(0, 1fr) auto; } .op-cell { display: none; } .op-panel { padding-left: 16px; } }
@media (max-width: 640px) { .op-row > summary { grid-template-columns: 20px minmax(0, 1fr); } .op-row > summary > span:last-child { grid-column: 2; } .op-acts .btn { flex: 1; text-align: center; } }

/* The opportunity page, for a contractor: the facts that decide whether to bid, the time left, the running total. */
.op-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 20px; margin: 16px 0 0; }
.op-strip span { display: block; font-size: 13px; color: var(--color-text-muted); }
.op-strip b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.op-strip small { display: block; font-size: 13px; color: var(--color-text-muted); }
.op-closes b { color: var(--color-warning-on-bg); }
.op-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.op-total span, .op-total small { font-size: 13px; color: var(--color-text-muted); }
.op-total b { font-family: var(--font-display); font-size: 20px; }

/* Questions and answers on an opportunity (2026-10-08). */
.qa-item { padding: 12px 0; border-top: 1px solid var(--line); }
.qa-item:first-of-type { border-top: 0; padding-top: 0; }
.qa-item small { display: block; font-size: 13px; color: var(--color-text-muted); }
.qa-q { margin: 0; font-weight: 600; }
.qa-a { margin: 8px 0 0; padding-left: 12px; border-left: 3px solid var(--color-primary); white-space: pre-wrap; }
.qa-item form, .qa-ask { margin: 10px 0 0; }
.qa-item textarea, .qa-ask textarea { margin-bottom: 8px; }
.qa-more { margin-top: 8px; font-size: 14px; }
.qa-ask { padding-top: 12px; border-top: 1px solid var(--line); }

/* Settings overview cards (2026-10-08): where an account stands, one card per area, each a link. */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.st-card { display: flex; flex-direction: column; gap: 8px; margin: 0; color: var(--ink); text-decoration: none; }
.st-card:hover { border-color: var(--color-primary); }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-text { flex: 1; font-size: 14px; color: var(--color-text-muted); }
.st-go { font-weight: 600; color: var(--color-primary); }

/* The staff portal (Tyler's layout, 2026-10-09): the Overview's "Needs you now", area cards and
   visits strip, and the collapsible "how this works" note on a queue page. Site colours only. */
.sp-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; margin-top: 16px; align-items: start; }
.sp-cols > .card { margin: 0; }
.sp-cols > *, .sp-split > * { min-width: 0; }
.sp-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.sp-h h2 { margin: 0; font-size: 18px; }
.sp-queue { list-style: none; margin: 12px 0 0; padding: 0; }
.sp-queue > li { border-top: 1px solid var(--line); }
.sp-queue > li > a { display: flex; align-items: center; gap: 14px; padding: 14px 4px; color: var(--ink); text-decoration: none; }
.sp-queue > li > a:hover { background: var(--color-bg); }
.sp-n { flex: 0 0 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--color-warning-bg); color: var(--color-warning-on-bg); font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.sp-n.urgent { background: var(--color-danger-bg); color: var(--color-danger-on-bg); }
.sp-queue .sp-body { flex: 1; min-width: 0; }
.sp-queue strong { display: block; font-size: 15px; }
.sp-queue small { display: block; font-size: 13px; color: var(--color-text-muted); }
.sp-go { font-weight: 600; color: var(--color-primary); white-space: nowrap; }
.sp-quiet { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--color-text-muted); }
.sp-quiet a { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--color-text-muted); text-decoration: none; background: var(--bg); }
.sp-quiet a:hover { border-color: var(--color-border-strong); color: var(--ink); }
.sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 0; }
.sp-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); color: var(--ink); text-decoration: none; }
a.sp-kpi:hover { border-color: var(--color-primary); }
.sp-kpi b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; margin-top: 4px; }
.sp-kpi b.none { color: var(--color-text-muted); }
.sp-kpi span { display: block; font-size: 13px; color: var(--color-text-muted); }
.sp-kpi .sp-kpi-t { font-weight: 600; color: var(--ink); }
.sp-kpi .sp-go { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--color-primary); }
.sp-kpi.hot { border-color: var(--warn-border); background: var(--color-warning-bg); }
.sp-kpi.hot span { color: var(--ink); }
.sp-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sp-stack .sp-kpi { border: 0; background: var(--color-bg); }
.sp-stack .sp-kpi b { font-size: 26px; margin-top: 0; }
.sp-sec { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; margin: 32px 0 0; }
.sp-sec h2 { margin: 0; }
.sp-sec p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 13px; }
.sp-pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.sp-pipe li { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.sp-pipe li.hot { border-color: var(--warn-border); background: var(--color-warning-bg); }
.sp-pipe li.zero b { color: var(--color-text-muted); }
.sp-pipe span { display: block; min-height: 2.9em; font-size: 13px; line-height: 1.45; color: var(--color-text-muted); }
.sp-pipe li.hot span { color: var(--ink); }
.sp-pipe b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.3; }
.sp-pipe small { display: block; font-size: 12px; color: var(--color-text-muted); }
.sp-rule { margin: -8px 0 16px; }
.sp-rule > summary { cursor: pointer; font-weight: 600; color: var(--color-primary); font-size: 13px; }
.sp-rule p { margin: 8px 0 0; max-width: 820px; color: var(--color-text-muted); font-size: 13px; }
.sp-nav-count { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; }
.sp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; }
.sp-facts dt { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.sp-facts dd { margin: 2px 0 0; font-weight: 600; }
.sp-chat { list-style: none; margin: 8px 0 0; padding: 0; }
.sp-chat li { padding: 8px 0; border-top: 1px solid var(--line); }
.sp-chat small { display: block; color: var(--color-text-muted); font-size: 12px; }
@media (max-width: 900px) { .sp-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sp-queue > li > a { flex-wrap: wrap; } .sp-go { margin-left: 58px; } }

/* The technician's sign-off form (worker_signoff_form.html): ticking each item comes first;
   "Can't complete?" is a small option at the right that opens a compact reason. */
.so-item { border-bottom: 1px solid var(--hairline); padding: 12px 0; }
.so-item:last-of-type { border-bottom: 0; }
.so-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.so-main { width: auto; flex: 1; margin: 0; }
.so-cant-link { flex: none; margin: 2px 0 0; font-size: 12.5px; font-weight: normal; color: var(--muted); cursor: pointer; white-space: nowrap; }
.so-cant-link input { width: auto; margin: 0 4px 0 0; vertical-align: -2px; }
.so-cant-link:hover { color: var(--accent); }
.so-photo { margin: 8px 0 0 26px; }
.so-photo label { font-size: 13px; margin-top: 0; }
.so-why { margin: 8px 0 0 26px; padding: 10px; border: 1px solid var(--warn-border); border-radius: 4px; background: var(--warn-bg);
  display: grid; gap: 8px; }
.so-why[hidden] { display: none; }
.so-why select, .so-why textarea { margin: 0; }
.so-item.is-cant .so-text { color: var(--muted); }
.so-item.is-cant .so-cant-link { color: var(--warn-text); }
.so-note { font-size: 12.5px; margin: 12px 0 0; }

/* An expected arrival (_eta_picker.html): a day and a time drop-down, flagged On time or
   Late against the promised arrival. */
.eta-pick { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eta-pick select { width: auto; margin: 0; }
.eta-flag { margin: 8px 0 0; font-size: 13px; flex-basis: 100%; }
.eta-heading { margin: 0 0 6px; font-size: 13px; font-weight: 600; }

/* A location's working hours (company_site.working_hours): one row a day. */
.site-hours-row { display: grid; grid-template-columns: 110px 1fr auto 1fr; gap: 8px; align-items: center; max-width: 520px; margin-bottom: 6px; }
.site-hours-row input { margin: 0; }
.site-hours-row input { min-width: 0; width: 100%; }
@media (max-width: 640px) { .site-hours-row { grid-template-columns: 44px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; } .site-hours-row > span:first-child { font-size: 13px; } }

/* Signup's plan step (Tyler, 2026-11-05): one card a plan. */
.signup-plans { display: grid; gap: 10px; }
.signup-plan { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; font-weight: normal; cursor: pointer; }
.signup-plan input { width: auto; margin: 0; grid-row: span 3; }
.signup-plan .muted { grid-column: 2 / -1; font-size: 13px; }
.signup-plan-name { font-weight: 600; }
.signup-plan-price { font-weight: 600; white-space: nowrap; }
.signup-plan-talk { display: block; cursor: default; background: var(--bg-tint); }
.signup-plan-talk .muted { display: block; }
.signup-plan:has(input:checked) { border-color: var(--color-primary); background: var(--status-new-bg); }

/* "What comes next" (approval page; from the public site's sign-up panel, 2026-11-10): a numbered list whose
   steps are done (tick), the one to do now (indigo edge) or later (grey). */
.next-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.next-steps li { counter-increment: step; position: relative; padding: 10px 0 10px 44px; border-top: 1px solid var(--hairline); }
.next-steps li:first-child { border-top: 0; }
.next-steps li::before { content: counter(step); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--bg-tint); color: var(--muted); }
.next-steps li.done::before { content: "✓"; background: var(--good-bg); color: var(--good-text); }
.next-steps li.now::before { background: var(--accent); color: #fff; }
.next-steps li b { display: block; }
.next-steps li span { color: var(--muted); font-size: 13px; }

/* One line under each menu item (Tyler, 2026-11-10, from the public site's drop-downs): the account menu
   and the staff side menus. */
.account-pop[data-described] { min-width: 290px; }
.account-pop[data-described] a { align-items: flex-start; }
.account-pop[data-described] a .mast-icon { margin-top: 2px; }
.account-pop[data-described] a span { display: flex; flex-direction: column; gap: 1px; }
.account-pop[data-described] a strong { font-weight: 600; color: var(--ink); }
.account-pop[data-described] a small { font-size: 12px; color: var(--muted); font-weight: 400; }
.settings-nav .sp-nav-count { display: grid !important; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
.settings-nav .nav-line { grid-column: 1 / -1; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.35; }
.settings-nav a.active .nav-line { color: inherit; opacity: .85; }

/* An example of a list, shown while it's empty (_example_screen.html): dashed, labelled, never real. */
.example-screen { border-style: dashed; }
.example-label { margin: 0 0 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.example-rows > div { display: grid; grid-template-columns: 2fr 1.4fr auto 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hairline); opacity: .8; }
.example-rows > div:first-child { border-top: 0; }
.example-rows b { font-weight: 600; }
@media (max-width: 640px) { .example-rows > div { grid-template-columns: 1fr auto; } .example-rows > div > span:nth-child(2) { display: none; } }

/* The dispatch request form's step bar and "Price before you send" (Tyler, 2026-11-10, from the public site). */
.form-steps { list-style: none; margin: 8px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.form-steps li { font-size: 12.5px; color: var(--muted); border-top: 3px solid var(--line); padding-top: 6px; }
.form-steps li.done { border-top-color: var(--accent); }
.form-steps li.now { border-top-color: var(--accent); color: var(--ink); font-weight: 700; }
.price-preview { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-tint); }
.price-preview h3 { margin: 0 0 8px; font-size: 15px; }
.pp-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--hairline); font-size: 13.5px; }
.pp-line:first-of-type { border-top: 0; }
.pp-line b { white-space: nowrap; }
.pp-total { font-weight: 700; border-top: 1px solid var(--line); }
.next-steps li > span { display: block; }
.next-steps .next-step-action { display: inline-block; margin-top: 8px; padding: 7px 14px; font-size: 13px; }

/* One masthead across the whole site (Tyler, 2026-11-10): the signed-in bar takes the public site's
   measurements (site.css .mast) — 72px tall, a 26px logo, 16px semibold links in periwinkle that turn white,
   a 3px underline on the current section — and the page starts with room below it. */
.site-header { min-height: 72px; margin-bottom: 36px; }
.site-header nav, .mast-tools { min-height: 72px; }
.site-header nav .brand-logo { height: 26px; }
.site-header nav > :first-child { margin-right: 28px; }
.site-header nav a:not(.brand-link):not(.btn) { color: #C7D2FE; font-size: 16px; font-weight: 600; padding: 24px 12px 21px; }
.site-header nav a:not(.brand-link):not(.btn):hover { color: #fff; }
.site-header nav a[aria-current="page"] { color: #fff; border-bottom-color: #A5B4FC; }
.mast-tools .mast-action { font-size: 15px; padding: 10px 18px; }
@media (max-width: 640px) { .site-header nav a:not(.brand-link):not(.btn) { padding: 16px 8px 13px; font-size: 15px; } }

/* Staff → Inbox (Tyler, 2026-11-10): the list at left, the open item at right; one column on a phone. */
.cm-head + .chips, .notice + .chips { margin-top: 12px; }
.inbox { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; margin-top: 12px; }
.inbox-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.inbox-list li + li { border-top: 1px solid var(--hairline); }
.inbox-list a { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 14px; text-decoration: none; color: var(--ink); }
.inbox-list a:hover { background: var(--bg-tint); }
.inbox-list li.on a { background: var(--bg-tint); box-shadow: inset 3px 0 0 var(--accent); }
.inbox-kind { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.inbox-main b { display: block; font-weight: 600; }
.inbox-main small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.inbox-when { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.inbox-when.due { color: var(--warn-text); font-weight: 700; }
.inbox-pane { position: sticky; top: 92px; margin: 0; }
.inbox-pane h3 { font-size: 14px; margin: 14px 0 6px; }
.inbox-decide { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 6px; }
@media (max-width: 900px) { .inbox { grid-template-columns: 1fr; } .inbox-pane { position: static; } .inbox-list a { grid-template-columns: 1fr auto; } .inbox-list .inbox-kind { grid-column: 1 / -1; } }

/* Staff → Reports (Tyler, 2026-11-10). */
.reports-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.reports-grid .card { margin: 0; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 18px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; position: relative; }
.bar-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-col b { font-size: 12px; order: -1; }
.bar-col small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.sr-only-table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 900px) { .reports-grid { grid-template-columns: 1fr; } }
.ticket-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ticket-layout aside .card { margin-bottom: 16px; }
@media (max-width: 900px) { .ticket-layout { grid-template-columns: 1fr; } }