:root {
  --color-navy: #0A1F3D;
  --color-navy-light: #1A2F4D;
  --color-gold: #C19A3F;
  --color-gold-light: #D4B364;
  --color-cream: #F5F2EB;
  --color-cream-dark: #E8E2D3;
  --color-white: #FFFFFF;
  --color-text: #0A1F3D;
  --color-text-muted: #5A6478;
  --color-text-light: #8B95A8;
  --color-border: #E0DAC8;
  --color-success: #4CAF50;
  --color-warning: #C19A3F;
  --color-danger: #E24B4A;
  --color-info-bg: #E8F0F8;
  --color-success-bg: #E8F5E8;
  --color-warning-bg: #FFF8E8;
  --color-danger-bg: #FDEDED;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[x-cloak] { display: none !important; }

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

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-cream);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Authenticated app shell sits on the slightly lighter design-canvas tone. */
body.is-app { background: var(--canvas, #f6f4ee); }

main { flex: 1; }

h1, h2, h3 { font-family: var(--font-serif); line-height: 1.25; }
a { color: var(--color-navy); }

.container { max-width: 720px; margin: 0 auto; padding: 0 20px; width: 100%; }
.container--narrow { max-width: 680px; }
.container--wide { max-width: 1320px; }
.container--xwide { max-width: 1680px; }
.center { text-align: center; }

.section { padding: 56px 0; }
.section--alt { background: var(--color-cream-dark); }

.page__headline { font-size: 32px; margin-bottom: 8px; }
.page__lead { color: var(--color-text-muted); font-size: 18px; margin-bottom: 24px; }
.page__small { font-size: 14px; color: var(--color-text-muted); margin-top: 12px; }
.page-nav { display: flex; gap: 16px; justify-content: flex-end; }
.page-nav a { color: var(--color-navy); text-decoration: none; }
.page-nav a:hover { text-decoration: underline; }

.flash {
  background: var(--color-cream-dark);
  border-left: 3px solid var(--color-gold);
  padding: 12px 16px;
  margin: 16px 0 0;
  border-radius: 4px;
  font-size: 15px;
}
.dashboard__danger-zone {
  margin-top: 32px;
  text-align: right;
}
.dashboard__danger-zone a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.dashboard__danger-zone a:hover {
  color: #B23434;
  text-decoration: underline;
}

/* Locked preview: a blurred snapshot of what a paid analysis contains.
   Content is blurred + non-interactive; the gradient fades into the card
   background and the badge sits on top as the unlock affordance. Pointer
   events pass through so the CTA below stays the click target. */
.paid-preview {
  position: relative;
  margin: 20px 0;
  max-height: 280px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-cream);
}
.paid-preview__content {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
  padding: 18px 20px;
}
.paid-preview__h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin: 14px 0 8px;
}
.paid-preview__h3:first-child { margin-top: 0; }
.paid-preview__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    var(--color-white) 100%
  );
  pointer-events: none;
}
.paid-preview__badge {
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(10, 31, 61, 0.2);
}
.section__headline { font-size: 22px; margin-bottom: 16px; }
.card__title { font-size: 18px; margin-bottom: 8px; }

/* Header / footer */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.site-header__brand { display: flex; align-items: center; }
.site-header__nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.site-footer {
  background: var(--color-navy);
  color: var(--color-cream);
  padding: 32px 0;
  text-align: center;
  font-size: 14px;
}
.site-footer a { color: var(--color-gold-light); text-decoration: none; }
.site-footer__links { margin-top: 8px; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  transition: opacity .15s, background .15s;
}
.btn-primary {
  background: var(--color-gold);
  color: var(--color-navy);
  padding: 14px 24px;
}
.btn-primary:hover { background: var(--color-gold-light); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-secondary {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
  padding: 13px 23px;
}
.btn-secondary:hover { background: var(--color-navy); color: var(--color-white); }
.btn-ghost {
  background: transparent;
  color: var(--color-navy);
  padding: 8px 12px;
  font-weight: 500;
}
.btn-ghost:hover { color: var(--color-gold); }
.btn-lg { padding: 16px 32px; font-size: 18px; }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.card-elevated { box-shadow: 0 2px 4px rgba(10, 31, 61, 0.06); }

/* Pills */
.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.pill--info { background: var(--color-info-bg); color: var(--color-navy); }
.pill--success { background: var(--color-success-bg); color: #2E7D32; }
.pill--danger { background: var(--color-danger-bg); color: #B23434; }
.pill--impact { text-transform: uppercase; }
.pill--high { background: var(--color-danger-bg); color: #B23434; }
.pill--medium { background: var(--color-warning-bg); color: #8A6D1F; }
.pill--low { background: var(--color-success-bg); color: #2E7D32; }

/* Progress bars */
.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 36px;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.bar-row__label { font-size: 14px; color: var(--color-text-muted); }
.bar-row__value { font-size: 14px; font-weight: 600; text-align: right; }
.progress-bar {
  height: 6px;
  background: var(--color-cream-dark);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: var(--color-gold);
  border-radius: 99px;
  transition: width 1s ease;
}

/* Gauge */
.gauge { position: relative; display: inline-block; }
.gauge svg { transform: rotate(-90deg); }
.gauge__track { fill: none; stroke: var(--color-cream-dark); stroke-width: 8; }
.gauge__fill {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.5s ease;
}
.gauge__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-navy);
}
.gauge--160 .gauge__value { font-size: 42px; }
.gauge--120 .gauge__value { font-size: 32px; }
.gauge--80 .gauge__value { font-size: 22px; }

/* Hero */
.hero { background: var(--color-white); padding: 64px 0; text-align: center; }
.hero__headline { font-size: 48px; margin-bottom: 12px; }
.hero__subhead { font-size: 18px; color: var(--color-text-muted); margin-bottom: 32px; }
.hero__cta-secondary { margin-top: 16px; }
.trust-strip { margin-top: 20px; font-size: 14px; color: var(--color-text-muted); }
.pricing-strip {
  margin-top: 28px;
  text-align: center;
  font-size: 15px;
  color: var(--color-text-muted);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--color-gold);
  border-radius: 16px;
  background: var(--color-cream);
  padding: 40px 24px;
  max-width: 520px;
  margin: 0 auto;
  transition: background .15s, border-color .15s;
}
.upload-zone.is-dragover { background: var(--color-warning-bg); border-color: var(--color-navy); }
.upload-zone__hint { font-size: 18px; font-weight: 600; }
.upload-zone__or { color: var(--color-text-light); margin: 10px 0; }
.upload-zone__formats, .upload-zone__small { font-size: 13px; color: var(--color-text-light); margin-top: 12px; }
.upload-zone__error {
  margin-top: 16px;
  color: #B23434;
  background: var(--color-danger-bg);
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
}
.upload-zone__busy p { margin-top: 8px; }

.spinner {
  width: 36px; height: 36px;
  border: 4px solid var(--color-cream-dark);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: spin 0.9s linear infinite;
}
.spinner--lg { width: 56px; height: 56px; border-width: 6px; }
.btn-primary .spinner, .btn-secondary .spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: currentColor;
  margin: 0 8px 0 0;
  vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Grids */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.card__h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-charts canvas { max-width: 100%; }
.admin-charts .card { min-height: 280px; }

/* Reveal screen */
.reveal__hero { background: var(--color-white); padding: 48px 0; }
.reveal__label { font-size: 32px; margin: 16px 0 8px; }
.reveal__summary { color: var(--color-text-muted); max-width: 520px; margin: 0 auto 12px; }
.reveal__pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.reveal__section { margin-top: 28px; }
.reveal__spotlight { background: var(--color-warning-bg); border-color: var(--color-gold); }
.reveal__cta-block { margin: 40px 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }

.ats-list { list-style: none; }
.ats-list__item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.ats-list__item:last-child { border-bottom: none; }
.ats-list__mark { font-weight: 700; width: 22px; flex-shrink: 0; }
.ats-list__mark.is-pass { color: var(--color-success); }
.ats-list__mark.is-fail { color: var(--color-danger); }
.ats-list__item p { font-size: 14px; color: var(--color-text-muted); }

.quick-win__why { font-size: 14px; color: var(--color-text-muted); }
.quick-win__example {
  font-size: 13px;
  background: var(--color-cream);
  border-radius: 6px;
  padding: 8px;
  margin-top: 8px;
}

/* Locked preview */
.locked { position: relative; }
.locked__blur { filter: blur(6px); pointer-events: none; user-select: none; opacity: .7; }
.locked__decoy { color: var(--color-text-light); margin-top: 12px; }
.locked__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  background: rgba(245, 242, 235, 0.72);
  border-radius: 12px;
  padding: 24px;
}
.locked__overlay p { max-width: 420px; color: var(--color-text-muted); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(10, 31, 61, 0.5); }
.modal__panel {
  position: relative;
  background: var(--color-white);
  border-radius: 12px;
  padding: 28px;
  max-width: 420px;
  width: calc(100% - 32px);
  z-index: 1;
}
.modal__close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 24px;
  cursor: pointer; color: var(--color-text-muted);
}

/* Forms */
.input {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-family: var(--font-sans);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  margin-bottom: 12px;
}
.input:focus { outline: 2px solid var(--color-gold); border-color: var(--color-gold); }
.input--code { text-align: center; letter-spacing: 8px; font-size: 24px; }
.input--area { resize: vertical; min-height: 160px; }
.auth-form { max-width: 380px; margin: 24px auto 0; }
.form-error { color: #B23434; font-size: 14px; margin-top: 8px; }

/* Dashboard */
.dash-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.dash-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.dash-sidebar { }
.cv-list { list-style: none; margin: 12px 0; }
.cv-list__item { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 8px; font-size: 14px; background: var(--color-white); }
.cv-list__item.is-active { border-color: var(--color-gold); background: var(--color-warning-bg); }
.dash-hero-card { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--color-border); }
.data-table th { color: var(--color-text-muted); font-weight: 600; }

/* Analyse */
.analyse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.analyse-grid__footer { grid-column: 1 / -1; text-align: center; }

/* Results */
.results-head { margin-bottom: 16px; }
.col-strength { border-left: 4px solid var(--color-success); }
.col-improve { border-left: 4px solid var(--color-danger); }
.tick-list, .cross-list { list-style: none; }
.tick-list li, .cross-list li { padding: 6px 0 6px 24px; position: relative; font-size: 15px; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 700; }
.cross-list li::before { content: "✗"; position: absolute; left: 0; color: var(--color-danger); font-weight: 700; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-card { margin-bottom: 12px; }
.qa-card__q { font-weight: 600; }
.qa-card__a { font-size: 14px; color: var(--color-text-muted); margin-top: 6px; }
.cover-letter { white-space: pre-wrap; font-family: var(--font-sans); font-size: 15px; line-height: 1.7; }

/* Steps / pricing */
.steps { list-style: none; }
.steps li { margin-bottom: 16px; }
.price { font-family: var(--font-serif); font-size: 28px; color: var(--color-gold); margin: 8px 0; }

/* Admin */
.admin-metrics .card { text-align: center; }
.metric__n { display: block; font-family: var(--font-serif); font-size: 28px; color: var(--color-navy); }
.admin-metrics span:last-child { font-size: 13px; color: var(--color-text-muted); }
.funnel__row { display: grid; grid-template-columns: 160px 1fr 60px; align-items: center; gap: 12px; margin: 8px 0; }
.funnel__label { font-size: 14px; color: var(--color-text-muted); }
.funnel__bar { background: var(--color-cream-dark); border-radius: 4px; height: 22px; }
.funnel__fill { background: var(--color-gold); height: 100%; border-radius: 4px; min-width: 2px; }
.funnel__n { text-align: right; font-weight: 600; font-size: 14px; }

/* Breakpoints */
@media (min-width: 1024px) {
  .dash-header, .dash-grid { max-width: 1320px; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hero__headline { font-size: 34px; }
  .page__headline { font-size: 26px; }
  .section__headline { font-size: 20px; }
  .grid-4, .grid-3, .two-col, .analyse-grid { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .funnel__row { grid-template-columns: 110px 1fr 44px; }
  .gauge--160 svg { width: 120px; height: 120px; }
  .gauge--160 .gauge__value { font-size: 32px; }
  .section { padding: 40px 0; }
  .hero { padding: 44px 0; }
}
@media (max-width: 380px) {
  .hero__headline { font-size: 28px; }
  .bar-row { grid-template-columns: 90px 1fr 30px; }
}

/* --- Phase 1: org switcher, onboarding fork, team (HR) --- */
.org-switcher { position: relative; display: inline-block; }
.org-switcher__chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--color-navy); background: #fff;
  border: 1px solid var(--color-line, #E0DAC8); border-radius: 9px;
  padding: 7px 12px; cursor: pointer;
}
.org-switcher__chip:hover { border-color: var(--color-gold); }
.org-switcher__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 220px; background: #fff; border: 1px solid var(--color-line, #E0DAC8);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(10,31,61,.12); padding: 6px;
}
.org-switcher__menu form { margin: 0; }
.org-switcher__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--color-navy); padding: 9px 10px; border-radius: 7px;
  text-decoration: none;
}
.org-switcher__item:hover { background: var(--color-cream-dark, #F1ECDD); }
.org-switcher__item.is-active { font-weight: 600; }
.org-switcher__type { font-size: 11px; color: var(--color-text-muted); text-transform: capitalize; }

.onboard { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.onboard__opt {
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  border: 1px solid var(--color-line, #E0DAC8); border-radius: 12px; padding: 16px 18px;
  background: #fff;
}
.onboard__opt:hover { border-color: var(--color-gold); }
.onboard__opt.is-selected { border-color: var(--color-gold); box-shadow: 0 0 0 1px var(--color-gold); }
.onboard__company { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }

/* Two-column form grid (employee record editor); collapses on small screens. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* Lifecycle (onboarding/offboarding) checklists. */
.task-list { list-style: none; margin: 8px 0 0; padding: 0; }
.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--color-line, #E0DAC8); }
.task-row:last-child { border-bottom: none; }
.task-check { flex: none; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 1.5px solid var(--color-line, #E0DAC8); background: #fff; color: var(--color-white);
  font-size: 15px; line-height: 1; font-weight: 700; }
.task-row.is-done .task-check { background: var(--color-gold); border-color: var(--color-gold); }
.task-row.is-done .task-title { color: var(--color-text-muted); text-decoration: line-through; }
.task-title { font-size: 14px; font-weight: 600; }

.team-list { list-style: none; margin: 8px 0 0; padding: 0; }
.team-list__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--color-line, #E0DAC8); font-size: 14px;
}
.team-list__row:last-child { border-bottom: none; }
.invite-form { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-form .input { flex: 1; min-width: 180px; }
.tag {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--color-cream-dark, #F1ECDD); color: var(--color-navy);
  text-transform: capitalize;
}

/* --- Phase 2: token packs --- */
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }
.pack { border: 1px solid var(--color-line, #E0DAC8); border-radius: 12px; padding: 16px; text-align: center; background: #fff; }
.pack__tokens { font-weight: 600; color: var(--color-navy); }
.pack__price { font-size: 22px; color: var(--color-gold, #C19A3F); margin: 6px 0 12px; font-family: 'Playfair Display', Georgia, serif; }
@media (max-width: 720px) { .pack-grid { grid-template-columns: 1fr; } }

/* --- Phase 4: HR documents, sign-off, disclaimer --- */
.banner { display:flex; gap:10px; align-items:flex-start; background:#FBF3DF;
  border:1px solid #EAD8A6; border-radius:10px; padding:12px 14px; font-size:13.5px;
  color:#6b5410; margin:14px 0; }
.ai-disclaimer { background:#FBF3DF; }
.muted { color: var(--color-text-muted, #6E6E68); }
.docprev { white-space: pre-wrap; font-size:14px; line-height:1.7; max-height:480px;
  overflow:auto; background:#FCFBF8; }
.chk { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; margin:6px 0 14px; cursor:pointer; }
.chk input { margin-top:3px; }
.t-ok { background:#DDF0E7; color:#1D7A56; }
.t-amb { background:#F6ECD7; color:#B07A17; }
.field { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }

/* --- Phase 6: HR screens (landing, check, dashboard, guidance) --- */
.cta-box { max-width:440px; margin:24px auto; border:2px dashed var(--color-gold,#C19A3F);
  border-radius:16px; background:var(--color-cream-dark,#F1ECDD); padding:30px 26px; text-align:center; }
.cta-box__title { font-weight:600; color:var(--color-navy); font-size:16px; margin-bottom:6px; }
.cta-box__sub { color:var(--color-text-muted); font-size:13px; margin-bottom:18px; }
.cta-box__small { color:var(--color-text-muted); font-size:12px; margin-top:14px; }

.score-ring { width:110px; height:110px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; margin:18px auto; border:8px solid var(--color-amb,#B07A17); }
.score-ring--sm { width:88px; height:88px; border-width:7px; margin:0; }
.score-ring--ok { border-color:#1D7A56; } .score-ring--amb { border-color:#B07A17; } .score-ring--red { border-color:#B23B2E; }
.score-ring__num { font-family:'Playfair Display',Georgia,serif; font-size:28px; color:var(--color-navy); line-height:1; }
.score-ring--sm .score-ring__num { font-size:24px; }
.score-ring__of { font-size:10px; color:var(--color-text-muted); }

.opt { display:block; width:100%; text-align:left; border:1px solid var(--color-line,#E0DAC8);
  background:#fff; border-radius:10px; padding:13px 15px; margin-bottom:10px; cursor:pointer; font-size:15px; }
.opt:hover { border-color:var(--color-gold,#C19A3F); background:#FFFDF8; }
.opt:has(input:checked) { border-color:var(--color-gold,#C19A3F); box-shadow:0 0 0 1px var(--color-gold,#C19A3F); }
.check-nav { display:flex; gap:10px; justify-content:space-between; margin-top:16px; }

.act { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13.5px;
  padding:10px 0; border-bottom:1px solid var(--color-line,#E0DAC8); }
.act:last-child { border-bottom:none; }
.doc { display:flex; align-items:center; gap:9px; font-size:13px; padding:9px 0; border-bottom:1px solid var(--color-line,#E0DAC8); }
.doc:last-child { border-bottom:none; }
.row2 { display:grid; grid-template-columns:1.1fr 2fr; gap:14px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.ghost.block { display:flex; width:100%; align-items:center; gap:9px; margin-bottom:9px;
  background:#fff; border:1px solid var(--color-line,#E0DAC8); color:var(--color-navy);
  border-radius:9px; padding:11px 14px; font-size:14px; font-weight:500; text-decoration:none; }
.ghost.block:hover { border-color:var(--color-gold,#C19A3F); }
.link-gold { color:var(--color-gold-dark,#A07E22); font-weight:600; font-size:13px; }
.step { display:flex; gap:12px; margin-bottom:14px; }
.step:last-child { margin-bottom:0; }
.stepn { width:26px; height:26px; border-radius:50%; background:var(--color-cream-dark,#F1ECDD);
  color:var(--color-navy); font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.t-red { background:#F7E4E1; color:#B23B2E; }
@media(max-width:720px){ .row2,.row3 { grid-template-columns:1fr; } }

/* --- Guided product tour --- */
.cv-tour-overlay { position: fixed; inset: 0; z-index: 9997; cursor: default; }
.cv-tour-spot { position: fixed; z-index: 9998; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(13,35,64,.55); pointer-events: none;
  transition: top .2s, left .2s, width .2s, height .2s; }
.cv-tour-tip { position: fixed; z-index: 9999; max-width: 340px; background: #fff;
  border: 1px solid var(--color-line,#E0DAC8); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(10,31,61,.25); padding: 16px 18px; }
.cv-tour-tip__title { font-family: 'Playfair Display', Georgia, serif;
  color: var(--color-navy,#13233F); font-size: 18px; margin-bottom: 6px; }
.cv-tour-tip__body { font-size: 14px; color: var(--color-ink,#2C2C2A); line-height: 1.5; }
.cv-tour-tip__body a { color: var(--color-gold-dark,#A07E22); }
.cv-tour-tip__nav { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.cv-tour-tip__count { font-size: 12px; color: var(--color-text-muted,#6E6E68); margin-right: auto; }
.cv-tour-btn { border: 1px solid var(--color-line,#E0DAC8); background: #fff; border-radius: 8px;
  padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--color-navy,#13233F); }
.cv-tour-btn--primary { background: var(--color-gold,#C19A3F); border-color: var(--color-gold,#C19A3F); }
.cv-tour-btn--ghost { border: none; color: var(--color-text-muted,#6E6E68); font-weight: 500; }
.cv-tour-btn:disabled { opacity: .4; cursor: default; }
.cv-tour-launch { position: fixed; right: 16px; bottom: 16px; z-index: 9996;
  background: var(--color-navy,#13233F); color: #fff; border: none; border-radius: 999px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px rgba(10,31,61,.3); }
.cv-tour-launch:hover { background: var(--color-navy2,#0E2240); }
@media (max-width: 600px) { .cv-tour-tip { max-width: calc(100vw - 24px); } }

/* --- Rendered Markdown (AI documents, rights answers) --- */
.doc-rendered { font-size: 14.5px; line-height: 1.7; color: var(--color-ink,#2C2C2A);
  max-height: 560px; overflow: auto; background: #FCFBF8; }
.doc-rendered h2 { font-family: 'Playfair Display', Georgia, serif; color: var(--color-navy,#13233F);
  font-size: 20px; margin: 18px 0 8px; }
.doc-rendered h3 { color: var(--color-navy,#13233F); font-size: 16px; margin: 16px 0 6px; }
.doc-rendered h4, .doc-rendered h5, .doc-rendered h6 { color: var(--color-navy,#13233F); font-size: 14.5px; margin: 14px 0 4px; }
.doc-rendered p { margin: 0 0 12px; }
.doc-rendered ul, .doc-rendered ol { margin: 0 0 12px; padding-left: 22px; }
.doc-rendered li { margin: 3px 0; }
.doc-rendered strong { color: var(--color-navy,#13233F); }
.doc-rendered code { background: #F1ECDD; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.doc-rendered hr { border: none; border-top: 1px solid var(--color-line,#E0DAC8); margin: 16px 0; }
.doc-rendered a { color: var(--color-gold-dark,#A07E22); }

/* =====================================================================
   UI redesign — Option A · light top-nav app shell (design handoff)
   Additive: new tokens + components for authenticated app screens.
   Existing fonts kept (Playfair serif + system sans).
   ===================================================================== */
:root{
  --navy:#14253f; --navy-2:#1d3354;
  --gold:#b3862c; --gold-2:#caa033; --gold-soft:#f3ead4;
  --cream:#f4f2eb; --cream-2:#efece1; --paper:#ffffff;
  --canvas:#f6f4ee;
  --slate:#5d6b7b; --slate-2:#8a93a0;
  --line:#e8e3d6; --line-2:#efebe0; --line-soft:#f0ece1;
  --red:#b3322a; --red-soft:#f8e6e2;
  --green:#3f7d5c; --green-soft:#e4efe7;
  --amber:#b6831f; --amber-soft:#f6ecd3; --amber-text:#8a6415;
  --navy-soft:#e7ebf1;
  --line-strong:#d8d2c2; --gold-line:#d8cfae;
  --r:14px; --r-sm:10px; --r-card:18px; --r-card-sm:16px; --r-btn:11px; --r-ico:12px;
}

/* ---- top-nav app shell ---- */
.app-nav{ position:sticky; top:0; z-index:50; height:62px; background:var(--paper);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 26px; }
.app-nav__brand{ display:flex; align-items:center; text-decoration:none; font-family:var(--font-serif);
  font-weight:700; font-size:21px; letter-spacing:-.01em; white-space:nowrap; }
.app-nav__brand b{ color:var(--navy); font-weight:700; } .app-nav__brand i{ color:var(--gold); font-style:normal; }
.app-nav__links{ display:flex; gap:2px; margin-left:24px; height:100%; }
.app-nav__links a{ position:relative; display:flex; align-items:center; gap:8px; color:var(--navy);
  text-decoration:none; font-weight:600; font-size:13.5px; padding:0 15px; }
.app-nav__links a svg{ width:16px; height:16px; opacity:.8; }
.app-nav__links a:hover{ color:var(--gold); }
.app-nav__links a.is-active{ color:var(--navy); }
.app-nav__links a.is-active::after{ content:''; position:absolute; left:15px; right:15px; bottom:0;
  height:3px; background:var(--gold); border-radius:3px 3px 0 0; }
.app-nav__right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.app-nav__avatar{ width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:13px; }

/* workspace pill (reuses the org-switcher Alpine markup) */
.ws-pill{ display:flex; align-items:center; gap:9px; background:var(--cream-2); border:1px solid var(--line);
  padding:5px 12px 5px 6px; border-radius:999px; color:var(--navy); font-weight:600; font-size:12.5px; cursor:pointer; }
.ws-pill .ico{ width:26px; height:26px; border-radius:7px; background:var(--gold); color:var(--navy);
  display:grid; place-items:center; font-weight:800; font-size:12px; }

/* mobile nav: hamburger + slide-in drawer (desktop hides these) */
.app-nav__burger{ display:none; align-items:center; justify-content:center; width:40px; height:40px;
  margin-right:2px; padding:0; background:none; border:1px solid var(--line); border-radius:9px;
  color:var(--navy); cursor:pointer; }
.app-nav__burger svg{ width:22px; height:22px; }
.app-nav__scrim{ display:none; position:fixed; inset:62px 0 0 0; z-index:40;
  background:rgba(10,31,61,.38); }
.app-nav__drawer-account{ display:none; }

@media (max-width:860px){
  .app-nav__burger{ display:inline-flex; }
  .app-nav__links{
    position:fixed; top:62px; left:0; bottom:0; z-index:45; width:min(82vw,320px);
    margin-left:0; height:auto; flex-direction:column; gap:0; align-items:stretch;
    background:var(--paper); border-right:1px solid var(--line); padding:10px;
    box-shadow:2px 0 24px rgba(10,31,61,.14); overflow-y:auto;
    transform:translateX(-100%); transition:transform .22s ease; }
  .app-nav__links.is-open{ transform:translateX(0); }
  .app-nav__links a{ height:48px; padding:0 14px; font-size:15px; border-radius:9px; }
  .app-nav__links a svg{ width:19px; height:19px; }
  .app-nav__links a.is-active{ background:var(--cream-2); }
  .app-nav__links a.is-active::after{ display:none; }
  .app-nav.is-open .app-nav__scrim{ display:block; }
  .app-nav__drawer-account{ display:flex; flex-direction:column; gap:0;
    margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
  .app-nav__drawer-account a,
  .app-nav__drawer-account button{ display:flex; align-items:center; gap:8px; width:100%;
    height:48px; padding:0 14px; border:none; background:none; border-radius:9px;
    color:var(--navy); font-weight:600; font-size:15px; text-decoration:none;
    text-align:left; cursor:pointer; font-family:inherit; }
  .app-nav__drawer-account svg{ width:19px; height:19px; opacity:.8; }
  .ws-pill__name{ max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:420px){
  .app-nav{ padding:0 14px; gap:6px; }
  .ws-pill__name{ max-width:64px; }
}

/* page wrap + header */
.app-wrap{ max-width:1680px; margin:0 auto; padding:26px; }
/* fixed-height chart frame: keeps every panel's canvas the same size
   (Chart.js doughnuts otherwise ignore the height attr and fill the column) */
.chart-box{ position:relative; height:240px; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.page-head h1{ font-family:var(--font-serif); font-size:24px; font-weight:700; margin:5px 0 0; }
.eyebrow{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-2); font-weight:700; }

/* app buttons (compact, design-spec) */
.btn-gold,.btn-line{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans);
  font-weight:700; font-size:13px; border-radius:9px; padding:9px 15px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; }
.btn-gold{ background:var(--gold); color:var(--navy); }
.btn-gold:hover{ background:var(--gold-2); }
.btn-line{ background:transparent; border-color:var(--line); color:var(--navy); }
.btn-line:hover{ background:var(--cream-2); }
.btn-gold svg,.btn-line svg{ width:15px; height:15px; }
.btn-sm{ padding:6px 11px; font-size:12px; }

/* badges */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:999px; }
.b-high{ background:var(--red-soft); color:var(--red); }
.b-med{ background:var(--amber-soft); color:var(--amber); }
.b-low{ background:var(--green-soft); color:var(--green); }
.b-navy{ background:#e7ebf1; color:var(--navy-2); }

/* compliance ring (SVG) */
.ring-wrap{ position:relative; width:118px; height:118px; flex:0 0 118px; }
.ring-svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-num b{ font-family:var(--font-serif); font-size:34px; font-weight:700; line-height:1; color:var(--navy); }
.ring-num span{ font-size:11px; color:var(--slate-2); font-weight:600; }
.ring-wrap--sm{ width:84px; height:84px; flex:0 0 84px; }
.ring-wrap--sm .ring-num b{ font-size:26px; }

/* card header with icon (additive to existing .card) */
.card-h{ display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.card-h svg{ width:18px; height:18px; }
.card-h h3{ font-family:var(--font-serif); font-size:16px; font-weight:700; margin:0; }
.card-h .more{ margin-left:auto; font-size:12.5px; color:var(--gold); font-weight:600; text-decoration:none; }

/* feed / action rows */
.feed-row{ display:flex; align-items:center; gap:14px; padding:14px 15px; border-radius:12px;
  border:1px solid var(--line); background:var(--paper); }
.feed-row + .feed-row{ margin-top:10px; }
.feed-ico{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 40px; }
.feed-ico svg{ width:19px; height:19px; }
.feed-main{ flex:1; min-width:0; }
.feed-main .t{ font-weight:700; font-size:14px; color:var(--navy); }
.feed-main .s{ font-size:12.5px; color:var(--slate); margin-top:1px; }
.ic-red{ background:var(--red-soft); color:var(--red); }
.ic-amber{ background:var(--amber-soft); color:var(--amber); }
.ic-gold{ background:var(--gold-soft); color:var(--gold); }
.ic-navy{ background:#e7ebf1; color:var(--navy); }

/* document card */
.doc-card{ display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line);
  border-radius:12px; background:var(--paper); }
.doc-ico{ width:42px; height:42px; border-radius:10px; background:var(--gold-soft); color:var(--gold);
  display:grid; place-items:center; flex:0 0 42px; }
.doc-ico svg{ width:20px; height:20px; }

/* segmented control */
.seg{ display:inline-flex; background:var(--cream-2); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px; }
.seg a{ padding:6px 14px; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--slate); cursor:pointer; text-decoration:none; }
.seg a.on{ background:#fff; color:var(--navy); box-shadow:0 1px 2px rgba(20,37,63,.08); }

/* copilot dock (floating) */
.cop-dock{ position:fixed; right:26px; bottom:22px; z-index:60; display:inline-flex; align-items:center; gap:10px;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:999px;
  box-shadow:0 10px 30px rgba(20,37,63,.28); font-weight:600; font-size:13.5px; text-decoration:none; }
.cop-dock svg{ width:18px; height:18px; color:var(--gold-2); }

/* dashboard grids */
.dash-row1{ display:grid; grid-template-columns:1.05fr 1.55fr; gap:18px; }
.dash-row2{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:18px; }
@media (max-width:900px){ .dash-row1,.dash-row2{ grid-template-columns:1fr; } }

/* clickable table rows (additive to .data-table) */
.data-table tr.clk{ cursor:pointer; }
.data-table tr.clk:hover td{ background:var(--cream-2); }

/* responsive tables: on narrow screens a wide data-table scrolls horizontally
   *within its card* instead of pushing the whole page off-screen. Cells stop
   wrapping so rows stay legible; the table becomes its own scroll container so
   no per-template wrapper markup is needed. */
@media (max-width:720px){
  /* <main> is a flex item (body is a flex column); min-width:auto would let a
     wide table stretch the whole page. Allow it to shrink so the table's own
     scroll container engages instead. */
  main{ min-width:0; }
  .data-table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    white-space:nowrap; font-size:13px; }
  .data-table th, .data-table td{ padding:9px 10px; }
}

/* ---- case detail refinements ---- */
.case-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:stretch; }
@media (max-width:900px){ .case-grid{ grid-template-columns:1fr; align-items:start; } }
.composer-stack > * + *{ margin-top:18px; }
.step--done{ opacity:.5; }
.step--done strong{ text-decoration:line-through; }
.stepn--done{ background:var(--green-soft); color:var(--green); }
.risk-banner{ border-left:4px solid var(--line); }
.risk-banner.is-high{ border-left-color:var(--red); }
.risk-banner.is-medium{ border-left-color:var(--amber); }
.tl-event{ border-left:3px solid var(--line); padding:10px 0 14px 14px; }
.tl-event + .tl-event{ margin-top:6px; }

/* ---- brand wordmark + HR badge ---- */
.brand{ display:inline-flex; align-items:center; font-family:var(--font-serif); font-weight:700;
  font-size:21px; letter-spacing:-.01em; white-space:nowrap; text-decoration:none; line-height:1; }
.brand b{ color:var(--navy); font-weight:700; }
.brand i{ color:var(--gold); font-style:normal; }
.brand__hr{ display:inline-block; margin-left:9px; font-family:var(--font-sans); background:var(--gold);
  color:var(--navy); font-weight:800; font-size:11px; letter-spacing:.06em; padding:3px 7px;
  border-radius:7px; line-height:1; }

/* --- Assistant ("Ask CareerVertex") --- */
.assist-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.assist-threads { max-height: 70vh; overflow: auto; }
.assist-thread { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--navy, #13233F);
  font-size: 13.5px; }
.assist-thread:hover { background: var(--cream-dark, #F1ECDD); }
.assist-thread.is-active { background: var(--cream-dark, #F1ECDD); font-weight: 600; }
.assist-conv { display: flex; flex-direction: column; min-height: 420px; }
.assist-messages { flex: 1; overflow: auto; max-height: 60vh; display: flex; flex-direction: column; gap: 12px; }
.assist-msg { max-width: 80%; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.6; }
.assist-msg__who { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6E6E68); margin-bottom: 3px; }
.assist-msg--user { align-self: flex-end; background: var(--navy, #13233F); color: #fff; }
.assist-msg--user .assist-msg__who { color: rgba(255,255,255,.7); }
.assist-msg--assistant { align-self: flex-start; background: #FCFBF8; border: 1px solid var(--line, #E0DAC8); }
.assist-msg--error { align-self: flex-start; background: #F7E4E1; border: 1px solid #E6B8B1; color: #7a2e26; }
.assist-msg__body :first-child { margin-top: 0; } .assist-msg__body :last-child { margin-bottom: 0; }
.assist-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.assist-cite { font-size: 11px; background: #EEF2F0; color: #3f5b50; border-radius: 999px; padding: 2px 9px; text-decoration: none; }
a.assist-cite:hover { background: #e2e9e5; text-decoration: underline; }
.assist-composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px;
  border-top: 1px solid var(--line, #E0DAC8); padding-top: 12px; }
.assist-composer .input { flex: 1; }

/* In-flight indicator: htmx toggles .htmx-request on the elements named in
   hx-indicator while a send is pending. */
.assist-typing { display: none; margin-top: 12px; }
.assist-typing.htmx-request { display: block; }
.assist-typing__dots { display: inline-flex; gap: 5px; padding: 4px 0 2px; }
.assist-typing__dots span { width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold, #C19A3F); animation: assist-bounce 1.1s ease-in-out infinite; }
.assist-typing__dots span:nth-child(2) { animation-delay: .15s; }
.assist-typing__dots span:nth-child(3) { animation-delay: .3s; }
@keyframes assist-bounce {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.assist-send__spin { display: none; }
/* Busy state keys off :disabled (set by hx-disabled-elt for the request's
   duration) — not .htmx-request, which htmx never clears on an element listed
   in both hx-indicator and hx-disabled-elt. */
#assist-send:disabled { opacity: .75; cursor: progress; }
#assist-send:disabled svg { display: none; }
#assist-send:disabled .assist-send__spin { display: inline-block; width: 15px; height: 15px;
  border: 2px solid rgba(19, 35, 63, .25); border-top-color: var(--navy, #13233F);
  border-radius: 50%; animation: spin .8s linear infinite; }

/* Suggested-action hand-offs (e.g. "Update contract") are full-page POSTs that
   run an AI generation server-side — mark the pressed button busy on submit. */
.assist-action.is-busy { opacity: .75; cursor: progress; }
.assist-action.is-busy::before { content: ""; display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(19, 35, 63, .25); border-top-color: var(--navy, #13233F);
  border-radius: 50%; margin-right: 7px; vertical-align: -2px;
  animation: spin .8s linear infinite; }
.assist-empty-state { display: flex; align-items: center; justify-content: center; min-height: 300px; text-align: center; }
@media (max-width: 760px) { .assist-layout { grid-template-columns: 1fr; } }

/* --- Assistant: action hand-offs, starters, suggestions (PR3) --- */
.assist-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.assist-actions form { margin: 0; }
.assist-action { border: 1px solid var(--gold, #C19A3F); background: #fff; color: var(--navy, #13233F);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.assist-action:hover { background: var(--gold, #C19A3F); }
.assist-starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.assist-chip { text-align: left; border: 1px solid var(--line, #E0DAC8); background: #fff;
  color: var(--navy, #13233F); border-radius: 10px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.assist-chip:hover { border-color: var(--gold, #C19A3F); background: #FFFDF8; }
.assist-suggests { display: flex; flex-direction: column; gap: 8px; }
.assist-suggests form { margin: 0; }
.assist-suggest { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  border: 1px solid var(--line, #E0DAC8); background: #fff; color: var(--navy, #13233F);
  border-radius: 10px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.assist-suggest:hover { border-color: var(--gold, #C19A3F); background: #FFFDF8; }
.assist-suggest svg { width: 16px; height: 16px; }

/* =====================================================================
   Daily Brief shell (redesign phase 2)
   Transparent top bar on the canvas, white pill nav (desktop), avatar
   "More" sheet, and a fixed bottom tab bar with the raised gold Ask
   button on mobile. Additive — the portal keeps the old .app-nav shell.
   ===================================================================== */
.app-top{ display:flex; align-items:center; gap:20px; padding:20px 40px 0; }
.app-top .brand{ font-size:22px; }
.pill-nav{ margin-left:auto; display:flex; gap:2px; background:var(--paper);
  border:1px solid var(--line); border-radius:999px; padding:4px; }
.pill-nav a{ padding:8px 16px; border-radius:999px; color:#4a5769; font-size:13px;
  font-weight:500; text-decoration:none; white-space:nowrap; }
.pill-nav a:hover{ background:#f1eee4; }
.pill-nav a.is-on{ background:var(--navy); color:#fff; font-weight:600; }
.pill-nav a.is-on:hover{ background:var(--navy); }

.avatar-menu{ position:relative; }
.avatar-btn{ width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff;
  font-weight:700; font-size:13px; display:grid; place-items:center; border:none;
  cursor:pointer; font-family:inherit; letter-spacing:.02em; }
.avatar-sheet{ position:absolute; right:0; top:calc(100% + 8px); z-index:70; width:248px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 30px rgba(20,37,63,.16); padding:8px; }
.avatar-sheet__section + .avatar-sheet__section{ margin-top:6px; padding-top:6px;
  border-top:1px solid var(--line-soft); }
.avatar-sheet__label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate-2); font-weight:700; padding:6px 10px 2px; }
.avatar-sheet form{ margin:0; }
.avatar-sheet__item{ display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; font-family:inherit; font-size:13.5px;
  font-weight:500; color:var(--navy); padding:9px 10px; border-radius:9px; text-decoration:none; }
.avatar-sheet__item:hover{ background:var(--cream-2); }
.avatar-sheet__item.is-active{ font-weight:700; }
.avatar-sheet__item svg{ width:16px; height:16px; opacity:.75; flex:0 0 16px; }
.avatar-sheet__item--mob{ display:none; }

/* main column for the redesigned screens — full page width, matching the
   other app screens (.app-wrap = 1680px); only the mobile padding differs */
.app-wrap--brief{ max-width:1680px; margin:0 auto; padding:26px 26px 48px; }

/* bottom tab bar — mobile only */
.tabbar{ display:none; }
@media (max-width:720px){
  .app-top{ padding:18px 20px 0; gap:10px; }
  .pill-nav{ display:none; }
  .avatar-menu{ margin-left:auto; }
  .avatar-btn{ width:34px; height:34px; font-size:12px; }
  .avatar-sheet__item--mob{ display:flex; }
  .app-wrap--brief{ padding:18px 18px 24px; }
  .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--paper);
    border-top:1px solid var(--line); display:grid; grid-auto-flow:column;
    grid-auto-columns:1fr; align-items:end;
    padding:8px 6px calc(14px + env(safe-area-inset-bottom)); }
  .tabbar a{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    gap:3px; text-decoration:none; color:var(--slate); font-size:10.5px; font-weight:600;
    padding:6px 0; position:relative; min-height:44px; }
  .tabbar a svg{ width:22px; height:22px; }
  .tabbar__tab.is-on{ color:var(--gold); font-weight:700; }
  .tabbar__ask{ color:var(--navy); font-weight:700; margin-top:-26px; }
  .tabbar__fab{ width:56px; height:56px; border-radius:50%; background:var(--gold);
    display:grid; place-items:center; border:4px solid #fff;
    box-shadow:0 8px 20px rgba(179,134,44,.45); }
  .tabbar__fab svg{ width:24px; height:24px; color:var(--navy); }
  .tabbar__dot{ position:absolute; top:2px; right:calc(50% - 20px); width:8px; height:8px;
    border-radius:50%; background:var(--red); }
  /* clear the fixed tab bar */
  body.is-app main{ padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  body.is-app .cv-tour-launch,
  body.is-app .cop-dock{ bottom:calc(88px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   Morning brief (redesign phase 3) — the dashboard as a single-column
   prioritised feed: centred header, compliance strip, action cards with
   one-tap hand-offs, Ask bar. 720px column on every device.
   ===================================================================== */
.brief-head{ text-align:center; margin-bottom:26px; }
.brief-head .eyebrow{ font-size:12px; letter-spacing:.09em; }
.brief-head__h1{ font-family:var(--font-serif); font-size:30px; font-weight:700;
  color:var(--navy); margin:6px 0 0; }
.brief-head__sub{ font-size:15px; color:var(--slate); margin:6px 0 0; }

.brief-strip{ display:flex; align-items:center; justify-content:center; gap:22px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px 24px; margin-bottom:24px; }
.brief-ring{ position:relative; width:66px; height:66px; flex:0 0 66px; }
.brief-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.brief-ring svg circle:last-child{ transition:stroke-dashoffset 1.5s ease; }
.brief-ring b{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--navy); }
.brief-strip__txt{ text-align:left; min-width:0; }
.brief-strip__txt .t{ font-weight:700; font-size:15px; color:var(--navy); }
.brief-strip__txt .s{ font-size:13px; color:var(--slate); }

/* brief buttons: gold primary / outlined secondary, design-spec sizes */
.brief-btn{ display:inline-block; background:var(--gold); color:var(--navy); font-weight:700;
  font-size:13.5px; padding:11px 18px; border-radius:var(--r-btn); border:none;
  cursor:pointer; text-decoration:none; text-align:center; font-family:inherit;
  white-space:nowrap; }
.brief-btn:hover{ background:var(--gold-2); }
.brief-btn-line{ display:inline-block; background:transparent; border:1.5px solid var(--line-strong);
  color:var(--navy); font-weight:600; font-size:13.5px; padding:10px 18px;
  border-radius:var(--r-btn); cursor:pointer; text-decoration:none; text-align:center;
  font-family:inherit; white-space:nowrap; }
.brief-btn-line:hover{ background:var(--cream-2); }

.brief-feed{ display:flex; flex-direction:column; gap:12px; }
.brief-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:20px 22px; display:flex; gap:16px; align-items:center; }
.brief-card:hover{ border-color:var(--line-strong); }
.brief-card form{ margin:0; flex:0 0 auto; }
.brief-ico{ width:44px; height:44px; border-radius:var(--r-ico); display:grid;
  place-items:center; flex:0 0 44px; }
.brief-ico svg{ width:20px; height:20px; }
.brief-ico.ic-red{ background:var(--red-soft); color:var(--red); }
.brief-ico.ic-amber{ background:var(--amber-soft); color:var(--amber-text); }
.brief-ico.ic-navy{ background:var(--navy-soft); color:var(--navy-2); }
.brief-card__body{ flex:1; min-width:0; }
.brief-card__body .t{ font-weight:700; font-size:15px; color:var(--navy); }
.brief-card__body .s{ font-size:13.5px; color:var(--slate); margin-top:2px; }

.brief-foot{ text-align:center; margin-top:22px; font-size:13.5px; color:var(--slate-2); }
.brief-foot a{ color:var(--amber-text); font-weight:600; text-decoration:none; }
.brief-foot a:hover{ text-decoration:underline; }

.brief-empty{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:44px 24px; text-align:center; }
.brief-empty__h{ font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--navy); }
.brief-empty p{ font-size:13.5px; color:var(--slate); margin:6px 0 0; }

.ask-bar{ display:flex; align-items:center; gap:12px; background:var(--paper);
  border:1.5px solid var(--gold-line); border-radius:999px; padding:14px 22px;
  margin:26px auto 0; max-width:820px; text-decoration:none; }
.ask-bar svg{ width:19px; height:19px; color:var(--gold); flex:0 0 19px; }
.ask-bar span{ color:var(--slate-2); font-size:14.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ask-bar:hover{ border-color:var(--gold); }

/* htmx swap fade on card resolution */
#brief-main.htmx-swapping{ opacity:.4; transition:opacity .15s ease; }

@media (max-width:720px){
  .brief-head{ text-align:left; margin-bottom:16px; }
  .brief-head .eyebrow{ font-size:11px; }
  .brief-head__h1{ font-size:24px; margin-top:4px; }
  .brief-head__sub{ font-size:13.5px; margin-top:4px; }
  .brief-strip{ gap:14px; border-radius:var(--r-card-sm); padding:14px 16px; margin-bottom:14px; justify-content:flex-start; }
  .brief-ring{ width:54px; height:54px; flex-basis:54px; }
  .brief-ring b{ font-size:18px; }
  .brief-strip__txt .t{ font-size:14px; }
  .brief-strip__txt .s{ font-size:12.5px; }
  .brief-feed{ gap:10px; }
  .brief-card{ border-radius:var(--r-card-sm); padding:16px; flex-wrap:wrap; }
  .brief-ico{ width:38px; height:38px; flex-basis:38px; }
  .brief-ico svg{ width:18px; height:18px; }
  .brief-card__body{ flex-basis:0; }
  .brief-card__body .t{ font-size:14px; }
  .brief-card__body .s{ font-size:12.5px; }
  /* thumb-friendly: actions become full-width buttons under the row */
  .brief-card form{ flex:1 1 100%; }
  .brief-card .brief-btn, .brief-card .brief-btn-line{ display:block; width:100%;
    margin-top:2px; padding:12px; }
  .ask-bar{ margin-top:18px; }
}

/* =====================================================================
   Assist — "Ask" chat (redesign phase 4): centred header, thread chips
   instead of the sidebar, navy user bubbles / cream assistant bubbles
   with the gold-spark micro-label, pill composer + round gold send.
   Overrides the earlier assist block (same specificity, later wins).
   ===================================================================== */
.assist-head{ text-align:center; margin-bottom:20px; }
.assist-head .eyebrow{ font-size:12px; letter-spacing:.09em; }
.assist-head__h1{ font-family:var(--font-serif); font-size:28px; font-weight:700;
  color:var(--navy); margin:6px 0 0; }

.assist-chips{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.assist-chips form{ margin:0; }
.assist-chip-t{ display:inline-block; background:var(--paper); border:1px solid var(--line);
  color:#4a5769; font-size:12.5px; font-weight:500; padding:7px 14px; border-radius:999px;
  text-decoration:none; max-width:230px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.assist-chip-t:hover{ border-color:var(--line-strong); }
.assist-chip-t.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; }
.assist-chip-new{ background:var(--paper); border:1px solid var(--gold-line); color:var(--amber-text);
  font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer;
  font-family:inherit; }
.assist-chip-new:hover{ background:var(--gold-soft); }

.assist-card{ background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-card); padding:24px; display:flex; flex-direction:column;
  min-height:420px; }
.assist-card .assist-messages{ gap:16px; }

/* bubbles */
/* bubbles keep a readable line length even on the full-width card */
.assist-msg{ max-width:min(85%, 860px); padding:0; border-radius:0; font-size:14px; }
.assist-msg--user{ align-self:flex-end; max-width:min(78%, 720px); background:var(--navy); color:#fff;
  border-radius:16px 16px 4px 16px; padding:13px 16px; line-height:1.55; }
.assist-msg--assistant{ align-self:flex-start; background:none; border:none; padding:0; }
.assist-msg__label{ display:flex; align-items:center; gap:7px; margin-bottom:6px;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-2);
  font-weight:700; }
.assist-msg__label svg{ width:15px; height:15px; color:var(--gold); flex:0 0 15px; }
.assist-msg__bubble{ background:#faf8f2; border:1px solid var(--line-soft);
  border-radius:4px 16px 16px 16px; padding:15px 17px; line-height:1.6; color:#26334a; }
.assist-msg__bubble :first-child{ margin-top:0; } .assist-msg__bubble :last-child{ margin-bottom:0; }
.assist-msg--error{ align-self:flex-start; background:#F7E4E1; border:1px solid #E6B8B1;
  color:#7a2e26; padding:12px 15px; border-radius:12px; }

/* suggested-action chips: outlined gold pills */
.assist-action{ border:1.5px solid var(--gold-line); background:var(--paper); color:var(--navy);
  border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
.assist-action:hover{ background:var(--gold-soft); }

/* composer: pill input + 46px round gold send */
.assist-composer{ display:flex; gap:10px; align-items:center; margin-top:16px;
  border-top:1px solid var(--line-soft); padding-top:16px; }
.assist-composer .assist-input{ flex:1; width:100%; border:1.5px solid var(--line);
  border-radius:999px; padding:12px 18px; font-size:14px; font-family:inherit;
  resize:none; background:var(--paper); margin:0; line-height:1.4; min-height:46px; }
.assist-input:focus{ outline:none; border-color:var(--gold); }
.assist-send{ width:46px; height:46px; border-radius:50%; background:var(--gold); border:none;
  display:grid; place-items:center; cursor:pointer; flex:0 0 46px; }
.assist-send:hover{ background:var(--gold-2); }
.assist-send svg{ width:20px; height:20px; color:var(--navy); }

.assist-disclaimer{ text-align:center; font-size:12px; color:var(--slate-2); margin-top:12px; }

@media (max-width:720px){
  .assist-card{ padding:16px; border-radius:var(--r-card-sm); }
  .assist-msg--assistant{ max-width:92%; }
  .assist-msg--user{ max-width:85%; }
  .assist-chips{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch; padding-bottom:4px; }
}

/* =====================================================================
   People · Employee record · Cases · Documents · Deadlines
   (redesign phase 5) — single-column card screens on the 720px column.
   ===================================================================== */
/* shared page head (People/Cases/Documents/Deadlines) */
.people-head{ display:flex; align-items:flex-end; gap:16px; margin-bottom:18px; }
.people-head > div:first-child{ flex:1; min-width:0; }
.people-head .eyebrow{ font-size:12px; letter-spacing:.09em; }
.people-head__h1{ font-family:var(--font-serif); font-size:28px; font-weight:700;
  color:var(--navy); margin:4px 0 0; }
.people-sub{ font-size:14px; color:var(--slate); margin:-8px 0 20px; }
.section-h{ font-weight:700; font-size:15px; color:var(--navy); margin:0 0 10px; }

/* search pill */
.people-search{ display:flex; align-items:center; gap:10px; background:var(--paper);
  border:1.5px solid var(--line); border-radius:999px; padding:0 18px; margin-bottom:16px; }
.people-search svg{ width:17px; height:17px; color:var(--slate-2); flex:0 0 17px; }
.people-search input{ flex:1; border:none; background:none; font-family:inherit;
  font-size:14px; color:var(--navy); padding:12px 0; }
.people-search input:focus{ outline:none; }

/* person rows */
.people-list{ display:flex; flex-direction:column; gap:10px; }
.person-row{ display:flex; align-items:center; gap:6px; }
.person-row__main{ flex:1; min-width:0; display:flex; align-items:center; gap:14px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card-sm);
  padding:16px 18px; text-decoration:none; }
.person-row__main:hover{ border-color:var(--line-strong); }
.person-tile{ width:44px; height:44px; border-radius:var(--r-ico); color:#fff; font-weight:700;
  font-size:14px; display:grid; place-items:center; flex:0 0 44px; text-transform:uppercase; }
.person-tile.t-navy{ background:var(--navy); }
.person-tile.t-gold{ background:var(--gold); color:var(--navy); }
.person-tile.t-green{ background:var(--green); }
.person-tile.t-navy2{ background:var(--navy-2); }
.person-tile.t-muted{ background:var(--slate-2); }
.person-tile--lg{ width:60px; height:60px; flex-basis:60px; border-radius:16px; font-size:19px; }
.person-row__txt{ flex:1; min-width:0; }
.person-row__txt .n{ display:block; font-weight:700; font-size:15px; color:var(--navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person-row__txt .s{ display:block; font-size:13px; color:var(--slate); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person-row__chev{ color:var(--slate-2); flex:0 0 auto; }
.person-row__del{ background:none; border:none; cursor:pointer; font-size:14px;
  color:var(--slate-2); padding:8px 4px; }
.person-row__del:hover{ color:var(--red); }
.person-row.is-leaver .person-row__main{ opacity:.75; }
.people-archived{ text-align:center; margin-top:18px; font-size:13px; color:var(--slate-2); }
.people-archived a{ color:var(--amber-text); font-weight:600; text-decoration:none; }

/* employee record */
.back-link{ display:inline-block; font-size:13px; font-weight:600; color:var(--amber-text);
  text-decoration:none; margin-bottom:14px; }
.back-link:hover{ text-decoration:underline; }
.profile-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px; display:flex; gap:18px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.profile-card__txt{ flex:1; min-width:200px; }
.profile-card__name{ font-family:var(--font-serif); font-size:23px; font-weight:700; color:var(--navy); }
.profile-card__sub{ font-size:13.5px; color:var(--slate); margin-top:2px; }
.profile-card__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.profile-links{ display:flex; gap:16px; flex-wrap:wrap; margin:0 4px 16px; }
.profile-links a{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  font-weight:600; color:var(--amber-text); text-decoration:none; }
.profile-links a svg{ width:14px; height:14px; }
.profile-links a:hover{ text-decoration:underline; }

.alert-card{ display:flex; align-items:center; gap:14px; background:var(--paper);
  border:1px solid var(--line); border-left:4px solid var(--red); border-radius:14px;
  padding:15px 18px; margin-bottom:18px; flex-wrap:wrap; }
.alert-card__txt{ flex:1; min-width:200px; }
.alert-card__txt .t{ font-weight:700; font-size:14px; color:var(--navy); }
.alert-card__txt .s{ font-size:12.5px; color:var(--slate); margin-top:1px; }

.emp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.emp-grid__stack{ display:flex; flex-direction:column; gap:14px; }
.emp-grid .card, .card.emp-card{ margin-bottom:0; border-radius:var(--r-card-sm); padding:20px; }
.emp-card__h{ font-weight:700; font-size:14.5px; color:var(--navy); margin-bottom:10px; }
.emp-card__meta{ margin-left:auto; font-size:12.5px; color:var(--slate-2); font-weight:400; }
.kv{ display:flex; justify-content:space-between; gap:12px; padding:8px 0;
  border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.kv:last-child{ border-bottom:none; }
.kv span{ color:var(--slate); flex:0 0 auto; }
.kv b{ color:var(--navy); font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere; }
.leave-bar{ height:10px; border-radius:999px; background:var(--cream-2); overflow:hidden; display:flex; }
.leave-bar span{ background:var(--gold); border-radius:999px; }
.leave-legend{ display:flex; gap:14px; margin-top:10px; font-size:12.5px; color:var(--slate); }
.leave-legend b{ color:var(--navy); }
.leave-legend a{ margin-left:auto; color:var(--amber-text); font-weight:600; text-decoration:none; }
.emp-contact__email{ font-size:13.5px; color:var(--navy); font-weight:600; overflow-wrap:anywhere; }
.emp-contact__sub{ font-size:13.5px; color:var(--slate); margin-top:4px; }
.emp-contact__emg{ font-size:12.5px; color:var(--slate-2); margin-top:8px; }
@media (max-width:720px){ .emp-grid{ grid-template-columns:1fr; } }

/* cases */
.case-list{ display:flex; flex-direction:column; gap:12px; }
.case-card{ display:block; background:var(--paper); border:1px solid var(--line);
  border-left-width:4px; border-radius:var(--r-card-sm); padding:18px 20px; text-decoration:none; }
.case-card:hover{ border-color:var(--line-strong); }
.case-card.is-high{ border-left-color:var(--red) !important; }
.case-card.is-medium{ border-left-color:var(--amber) !important; }
.case-card.is-low{ border-left-color:var(--green) !important; }
.case-card__top{ display:flex; align-items:center; gap:12px; }
.case-card__title{ flex:1; min-width:0; font-weight:700; font-size:15px; color:var(--navy); }
.case-card__meta{ display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap; }
.case-card__meta > span:first-child{ flex:1; min-width:140px; font-size:13px; color:var(--slate); }
.next-pill{ display:inline-flex; align-items:center; gap:7px; background:var(--gold-soft);
  color:var(--amber-text); font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:999px; }
.closed-divider{ display:flex; align-items:center; gap:10px; margin:24px 0 10px; }
.closed-divider span{ font-weight:700; font-size:14px; color:var(--slate-2); }
.closed-divider i{ flex:1; height:1px; background:#e3ded0; }
.closed-list{ display:flex; flex-direction:column; }
.closed-row{ display:flex; gap:12px; align-items:center; padding:11px 4px;
  border-bottom:1px solid #ece7da; text-decoration:none; }
.closed-row:last-child{ border-bottom:none; }
.closed-row > span:first-child{ flex:1; font-size:13.5px; color:var(--slate); font-weight:500; }
.closed-row__date{ font-size:12px; color:var(--slate-2); }

/* documents */
.filter-chips{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.filter-chips button{ background:var(--paper); border:1px solid var(--line); color:#4a5769;
  font-size:12.5px; font-weight:500; padding:8px 15px; border-radius:999px; cursor:pointer;
  font-family:inherit; white-space:nowrap; }
.filter-chips button.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; }
.doc-list{ display:flex; flex-direction:column; gap:10px; }
.doc-row{ display:flex; align-items:center; gap:6px; }
.doc-row__main{ flex:1; min-width:0; display:flex; align-items:center; gap:14px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card-sm);
  padding:16px 18px; text-decoration:none; }
.doc-row__main:hover{ border-color:var(--line-strong); }
.doc-row__ico{ width:42px; height:42px; border-radius:var(--r-ico); background:var(--gold-soft);
  color:var(--gold); display:grid; place-items:center; flex:0 0 42px; }
.doc-row__ico svg{ width:19px; height:19px; }
.doc-row__txt{ flex:1; min-width:0; }
.doc-row__txt .n{ display:block; font-weight:700; font-size:14.5px; color:var(--navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-row__txt .s{ display:block; font-size:12.5px; color:var(--slate); margin-top:1px; }

/* deadlines */
.deadlines-note{ font-size:13px; color:var(--slate-2); margin:-6px 0 20px; }
.deadlines-note a{ color:var(--amber-text); font-weight:600; text-decoration:none; }
.action-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:26px; }
.action-card{ display:flex; align-items:center; gap:14px; background:var(--paper);
  border:1px solid var(--line); border-left-width:4px; border-radius:14px; padding:14px 17px; }
.action-card.is-high{ border-left-color:var(--red); }
.action-card.is-med{ border-left-color:var(--amber); }
.action-card__t{ flex:1; min-width:0; font-weight:600; font-size:14px; color:var(--navy); }
.action-card form{ margin:0; }
.btn-fix{ padding-top:9px; padding-bottom:9px; font-size:12.5px; }
.law-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card-sm);
  padding:6px 20px; margin-bottom:14px; }
.law-row{ display:flex; align-items:center; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--line-soft); }
.law-row:last-child{ border-bottom:none; }
.law-date{ flex:0 0 74px; text-align:center; background:var(--navy-soft); color:var(--navy-2);
  font-size:12px; font-weight:700; padding:6px 0; border-radius:9px; line-height:1.5; }
.law-date.is-near{ background:var(--gold-soft); color:var(--amber-text); }
.law-row__txt{ flex:1; min-width:0; }
.law-row__txt .n{ display:block; font-weight:600; font-size:14px; color:var(--navy); }
.law-row__txt .s{ display:block; font-size:12.5px; color:var(--slate); margin-top:1px; }
.law-meta{ font-size:12.5px; color:var(--slate-2); display:flex; flex-direction:column; gap:4px; }
.law-meta__link{ background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
  font-size:12.5px; color:var(--amber-text); font-weight:600; }
.law-meta__link:disabled{ color:var(--slate-2); cursor:default; }
.law-meta__link:hover:not(:disabled){ text-decoration:underline; }

@media (max-width:720px){
  .people-head__h1{ font-size:24px; }
  .person-row__main{ padding:14px 15px; gap:12px; }
  .person-tile{ width:40px; height:40px; flex-basis:40px; font-size:13px; border-radius:11px; }
  .filter-chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .law-date{ flex-basis:62px; font-size:11px; }
}