/* ---- Yin & Co. v2 palette, wired 2026-09-17 (matches quote.css's /quote wiring) ----
   --navy/--navy-dark/--gold/--gold-light/--focus keep their original NAMES for
   backward compatibility with quote.css, which re-points them again for the
   /quote route — but every value below is now the actual v2 brand color, not
   navy or gold. --navy = Terracotta (headings, links, primary buttons, the
   progress bar). --navy-dark = Sienna (hover-dark variant). --gold = Honey
   (small accents: nav numbers, the account-bar link, selected radio border).
   .app-header and .auth-brand bypass --navy on purpose and go straight to
   Cocoa below, since v2 keeps the dark structural bars a shade darker/cooler
   than the Terracotta accent color — same split as quote.css's app-header. */
:root {
  --navy: #C95C28;
  --navy-dark: #8A3A18;
  --gold: #E0A857;
  --gold-light: #EBC692;
  --bg: #FAF5E9;
  --panel: #ffffff;
  --border: #dcd8d0;
  --text: #23262b;
  --text-muted: #6b6f76;
  --danger: #A13328;
  --danger-bg: #F7EAE9;
  --ok: #5C7A46;
  --ok-bg: #EFF2ED;
  --pending: #D9A227;
  --pending-bg: #FBEAC5;
  --info: #3E6E8E;
  --info-bg: #E8EFF3;
  --radius: 6px;
  --focus: #C95C28;
  --font-serif: Georgia, "Times New Roman", "Noto Serif", "PT Serif", serif;
  --shadow-card: 0 1px 2px rgba(16, 26, 36, 0.05), 0 10px 30px rgba(16, 26, 36, 0.09);

  /* Motion. Established here — the app had no easing/duration scale. Keep UI
     transitions on --ease-out and under ~200ms; extend this block rather than
     inventing parallel values. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 120ms;
  --dur-ui: 180ms;
  /* Section step change: incoming settles slower than the outgoing leaves, so
     the swap reads as a deliberate move rather than a flicker. Still < 300ms. */
  --dur-section-out: 140ms;
  --dur-section-in: 260ms;
  --dur-enter: 280ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

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

.app-header {
  background: #3D2B1F; /* Cocoa — see the v2-palette note at the top of this file */
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 12px; color: #E4D6C7; }

.header-flag {
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 10px;
  border-radius: 999px;
  color: #F0E6D8;
}

.account-bar {
  font-size: 13px;
  color: #F0E6D8;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.account-bar button {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.account-bar button:hover { color: #fff; }

/* Signed-in identity — initials avatar, name, and (bankers only, today —
   see renderAccountBar() in app.js) their bank as a "company" line. Base
   style so it reads fine in the plain Cocoa top bar on every screen; the
   live agent-screen design (theme-indisea) just gives it more room in the rail. */
.agent-identity { display: flex; align-items: center; gap: 8px; }
.agent-identity-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(224, 168, 87, 0.18);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agent-identity-text { display: flex; flex-direction: column; line-height: 1.25; }
.agent-identity-text strong { font-size: 13px; font-weight: 600; color: #fff; }
.agent-identity-company { font-size: 12px; color: #CDB9A3; }

/* Plain wrapper — still used for the "Loading…" and edit-profile takeover. */
.auth-shell {
  max-width: 480px;
  margin: 40px auto;
}
.auth-shell .section-card { margin: 0; }

/* Branded two-panel wrapper for sign in / sign up / reset / pending review.
   Left: navy credibility panel. Right: the form. Stacks on narrow screens. */
.auth-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  max-width: 860px;
  margin: 48px auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  /* clip (not hidden): keeps the child backgrounds inside the 14px radius
     without making this a scroll container, which would disable the
     position:sticky on .auth-brand-inner. */
  overflow: clip;
}

.auth-brand {
  background: linear-gradient(157deg, #3D2B1F 0%, #2A1D15 100%); /* Cocoa, darkening — matches .app-header */
  color: #fff;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
}

/* Sticky on wide screens so the reassurance copy stays in view while a long
   form (sign-up) scrolls past. Overridden back to static in the stacked
   mobile layout below. */
.auth-brand-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 24px;
}

.auth-brand-mark {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.auth-brand h1 {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.auth-brand .auth-brand-sub {
  font-size: 13.5px;
  color: #E4D6C7;
  margin: -8px 0 0;
}

.auth-points {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: #EDE3D6;
}
.auth-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
.auth-points li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(235, 198, 146, 0.18);
  /* small check mark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23EBC692' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.auth-brand-foot {
  margin-top: auto;
  padding-top: 20px;
  font-size: 12px;
  color: #B8A996;
}

.auth-main {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Inside the branded layout the panel itself is the card — strip the
   nested .section-card chrome so it doesn't double up. */
.auth-main .section-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.auth-main .section-card h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
}
.auth-main .btn-row { margin-top: 22px; }
.auth-main .btn-row .nav-btn { width: 100%; }

.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
}
.auth-switch button {
  background: none;
  border: none;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 2px;
  font-size: 14px;
}
.auth-switch button:hover { color: var(--navy-dark); }

/* Password field + Show/Hide reveal toggle. */
.password-wrap {
  position: relative;
  max-width: 420px;
}
.password-wrap input[type] { width: 100%; padding-right: 58px; }
.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
}
.password-toggle:hover { color: var(--text); }
.password-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

@media (max-width: 760px) {
  .auth-layout {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 24px auto;
  }
  .auth-brand {
    padding: 24px 24px 22px;
  }
  .auth-brand-inner {
    gap: 14px;
    position: static;
    top: auto;
  }
  .auth-points,
  .auth-brand-foot { display: none; }
  .auth-brand h1 { font-size: 21px; }
  .auth-main { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-switch button,
  .password-toggle,
  button.nav-btn,
  button.submit-btn,
  .radio-option,
  .pending-btn,
  .telegram-btn { transition: none; }

  button.nav-btn:active,
  button.submit-btn:active,
  .radio-option:active,
  .pending-btn:active,
  .telegram-btn:active { transform: none; }

  /* Keep the result panel fading in (aids comprehension) but drop the rise. */
  .result-panel:not(.hidden) { animation-name: result-panel-fade; }

  /* Submit progress bar: the width still updates (it carries the status), it
     just jumps to each value instead of gliding. */
  .submit-progress .fill { transition: none; }
}

.app-body {
  flex: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 24px;
  align-items: start;
}

/* Screens with no section nav (sign in / sign up / pending review /
   edit profile / the post-submit confirmation) collapse the two-column
   grid to a single narrow column so the card sits centred, not shoved
   into the right-hand 1fr track with a dead 260px gutter beside it. */
.app-body.no-nav {
  grid-template-columns: 1fr;
  max-width: 920px;
}
.app-body.no-nav .result-panel,
.app-body.no-nav .auth-shell {
  max-width: 520px;
  margin: 40px auto;
}

@media (max-width: 860px) {
  .app-body { grid-template-columns: 1fr; }
  .section-nav { position: static !important; order: 2; }

}

.section-nav {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 20px;
  border-right: 1px solid var(--border);
  margin-right: 20px;
}

.nav-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  border: 1px solid transparent;
  background: none;
  text-align: left;
  width: 100%;
}

.nav-item .num { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 600; min-width: 20px; }

.nav-item:hover { background: rgba(0,0,0,0.03); }

.nav-item.active {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
  font-weight: 600;
}

.nav-item.skipped { opacity: 0.4; text-decoration: line-through; }
.nav-item.done .num { color: var(--ok); }

.form-main { min-width: 0; }

.section-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 32px;
  margin-bottom: 20px;
}

.section-card h2 {
  margin: 0 0 4px;
  font-size: 19px;
  color: var(--navy);
}

.section-desc {
  color: var(--text-muted);
  font-size: 13.5px;
  margin: 0 0 22px;
}

.field {
  margin-bottom: 22px;
}

.field:last-child { margin-bottom: 0; }

.field label.field-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.req-mark { color: var(--danger); margin-left: 2px; }

.field-help {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select {
  width: 100%;
  max-width: 420px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  background: #fff;
  color: var(--text);
}

textarea {
  width: 100%;
  max-width: 560px;
  min-height: 90px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  resize: vertical;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}

.field.has-error input,
.field.has-error select {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.error-text {
  color: var(--danger);
  font-size: 12.5px;
  margin-top: 5px;
}

.radio-group, .yn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.radio-option {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13.5px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}

.radio-option:hover { border-color: var(--gold-light); }

.radio-option.selected {
  border-color: var(--gold);
  background: #F7E9D5;
  font-weight: 600;
}

.radio-option input { margin: 0; }

.yn-group .radio-option { min-width: 64px; justify-content: center; }

.other-input-wrap { margin-top: 10px; max-width: 420px; }

.pending-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.pending-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--pending);
  background: var(--pending-bg);
  color: var(--pending);
  cursor: pointer;
}

.pending-btn.active {
  background: var(--pending);
  color: #fff;
}

.upload-choice {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.upload-box {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: #fbfaf8;
}

.upload-box input[type="file"] { font-size: 13px; }

.file-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 13px;
}

.file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 6px;
  background: #fff;
}

.file-remove {
  border: none;
  background: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 12px;
}

.upload-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

.btn-row {
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
  gap: 10px;
}

button.nav-btn, button.submit-btn {
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  transition: background-color 180ms ease, border-color 180ms ease, transform var(--dur-fast) var(--ease-out);
}

button.nav-btn.primary, button.submit-btn {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

button.nav-btn.primary:hover, button.submit-btn:hover { background: var(--navy-dark); }
button.nav-btn:focus-visible, button.submit-btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
button.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.telegram-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #229ed9;
  background: #eaf7fd;
  color: #1789bd;
  font-size: 13px;
  cursor: pointer;
}

.telegram-btn[data-connected="true"] {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: var(--ok);
}

/* Press feedback — a near-imperceptible dip so a tap registers, especially on
   touch where there is no hover state. transform only, ~120ms; reduced-motion
   opts out in the block near the top of this file. */
.radio-option, .pending-btn, .telegram-btn {
  transition: transform var(--dur-fast) var(--ease-out);
}
button.nav-btn:active,
button.submit-btn:active,
.radio-option:active,
.pending-btn:active,
.telegram-btn:active { transform: scale(0.98); }

/* Long-running submit: shown on its own full-page screen (see
   #submit-progress-panel / startSubmitProgress() in app.js) while the matter is
   being sent (~75s). The bar is a time estimate — the backend gives no real
   progress signal — so it eases to ~95% and holds, reaching 100% (green) only
   when the response lands. */
.submit-progress { margin-top: 22px; }
.submit-progress .track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.submit-progress .fill {
  height: 100%;
  width: 0%;
  background: var(--navy);
  transition: width 450ms var(--ease-out), background-color var(--dur-ui) ease;
}
.submit-progress .fill.is-done { background: var(--ok); }
.submit-progress .subline {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
}

.inline-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.banner {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
}

.banner.warn { background: var(--pending-bg); border: 1px solid var(--pending); color: var(--pending); }
.banner.error { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); }
.banner.info { background: var(--info-bg); border: 1px solid var(--info); color: var(--info); }

/* Small inline text-link button — same look as .auth-switch button, usable
   anywhere (e.g. the "Not you?" undo inside the OAuth sign-up banner). */
.link-btn {
  background: none;
  border: none;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.link-btn:hover { opacity: 0.8; }

/* Sign in / sign up with Google or Facebook. */
.oauth-buttons { margin-top: 18px; }
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 12.5px;
}
.oauth-divider::before, .oauth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.oauth-row { display: flex; gap: 10px; }
.oauth-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.oauth-btn:hover { border-color: var(--gold); }
.oauth-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.oauth-icon { display: inline-flex; flex: none; }

.result-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 32px;
}

.result-panel.hidden, .hidden { display: none !important; }

/* Submit-result entrance — the one rare, high-emotion moment (matter filed), so
   the delight budget applies. A single gesture: the panel rises 8px and fades in
   as it replaces the form. transform/opacity only. */
.result-panel:not(.hidden) {
  animation: result-panel-in var(--dur-enter) var(--ease-out) both;
}
/* The rise reads as an uplifting gesture — right for a confirmed submission,
   tonally wrong under an error. The failure panel fades in without travel. */
.result-panel.is-error:not(.hidden) {
  animation-name: result-panel-fade;
}
@keyframes result-panel-in {
  from { opacity: 0; transform: translateY(8px); }
}
@keyframes result-panel-fade {
  from { opacity: 0; }
}

/* The submitting screen fades out in place before the result panel fades/rises
   into the same spot — a quick opacity handoff, no movement. */
#submit-progress-panel { transition: opacity 150ms var(--ease-out); }
#submit-progress-panel.is-leaving { animation: none; opacity: 0; }

.result-panel h2 { margin-top: 0; color: var(--navy); }

.result-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 14px;
}

.result-status.ok { background: var(--ok-bg); color: var(--ok); }
.result-status.stub-fail { background: var(--danger-bg); color: var(--danger); }
/* A pipeline stage isn't a success/failure signal, so it gets its own
   neutral color rather than borrowing --ok (used by the client dashboard's
   "Current stage" badge). */
.result-status.info { background: var(--info-bg); color: var(--info); }

.result-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.result-summary-line { color: var(--text-muted); font-size: 14px; margin: 4px 0 18px; }

.result-next-steps { margin: 0 0 4px; padding-left: 20px; color: var(--text); }
.result-next-steps li { margin-bottom: 6px; }

.section-progress {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.app-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 16px;
}

.fieldset-title {
  font-size: 14px;
  font-weight: 700;
  margin: 26px 0 4px;
  color: var(--navy);
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.fieldset-title:first-child { border-top: none; padding-top: 0; margin-top: 0; }


/* ---------------------------------------------------------------------------
   Mobile control sizing. Deliberately at the END of the stylesheet: these
   override the base input rules above, and at equal specificity the later
   block wins. Moving this higher silently breaks the font-size rule.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* iOS Safari auto-zooms into any field whose text is under 16px and never
     zooms back out, leaving the agent panning a magnified page. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }

  /* Thumb-sized controls: 44px is Apple's minimum, 48px Android's. The stock
     36-38px is reachable but invites mis-taps on the longer option lists. */
  .radio-option,
  .pending-btn,
  .telegram-btn,
  button.nav-btn,
  button.submit-btn { min-height: 44px; }

  .upload-box input[type="file"] { font-size: 15px; }
}

/* --- Follow-up-doc page (?ft= link) ----------------------------------------
   Rendered outside the wizard (nav hidden, .app-body.no-nav centres it). Reuses
   .section-card / .field / .file-list / .result-* styling; only the matter
   context strip is new. */
.followup-card .followup-context {
  margin: 16px 0 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  background: var(--bg);
}
.followup-context-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.followup-context-row:last-child { border-bottom: none; }
.followup-context-row span { color: var(--text-muted); flex: 0 0 auto; }
.followup-context-row strong { text-align: right; font-weight: 600; }

/* --- Section transition (wizard step change) ------------------------------
   renderCurrentSection() wraps the panel swap in document.startViewTransition().
   These rules style that cross-fade: the outgoing section fades, the incoming
   one fades up 6px. transform/opacity only. With no View Transitions support,
   or under reduced motion (the JS skips the wrap), the swap is instant — the
   ::view-transition pseudo-elements simply never get created. */
#sections-container { view-transition-name: section-panel; }

::view-transition-group(section-panel) { animation-timing-function: var(--ease-out); }
::view-transition-old(section-panel) { animation: vt-section-out var(--dur-section-out) var(--ease-out) both; }
::view-transition-new(section-panel) { animation: vt-section-in var(--dur-section-in) var(--ease-out) both; }

@keyframes vt-section-out { to { opacity: 0; } }
@keyframes vt-section-in { from { opacity: 0; transform: translateY(6px); } }

/* Ordered step list on the "Almost there." screen — lower-roman with a
   closing bracket, i) ii), rather than the browser default "i." */
.step-list {
  list-style: none;
  padding-left: 1.6rem;
  margin: 0.6rem 0;
  counter-reset: step;
}

.step-list li {
  counter-increment: step;
  position: relative;
  margin-bottom: 0.4rem;
}

.step-list li::before {
  content: counter(step, lower-roman) ")";
  position: absolute;
  left: -1.6rem;
  width: 1.3rem;
  text-align: right;
}

/* --- Client dashboard (Purchaser/Vendor accounts) --------------------------
   A tile grid, not a stacked form card — the page header sits unboxed above
   it, same pattern as most dashboard UIs (glanceable summary, then boxed
   detail panels). */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.dashboard-header-main h2 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  color: var(--navy);
}
.dashboard-header-meta {
  color: var(--text-muted);
  font-size: 13.5px;
}
.dashboard-header-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.dashboard-header-side .result-status { margin: 0; }
.dashboard-switcher {
  max-width: 260px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  background: #fff;
  color: var(--text);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.dashboard-grid .full-width { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-header { flex-direction: column; }
  .dashboard-header-side { align-items: flex-start; }
}

.dashboard-tile {
  padding: 22px 24px;
  margin: 0;
}
.dashboard-tile .fieldset-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.dashboard-deadline-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.dashboard-deadline-row:last-child { border-bottom: none; padding-bottom: 0; }
.dashboard-deadline-date { color: var(--text-muted); white-space: nowrap; }
.dashboard-deadline-row.overdue .dashboard-deadline-date { color: var(--danger); font-weight: 600; }

/* Vertical timeline: a dot per event on a connecting line, not a plain list. */
.dashboard-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dashboard-timeline li {
  position: relative;
  padding: 0 0 18px 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard-timeline li:last-child { padding-bottom: 0; }
.dashboard-timeline li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--navy);
}
.dashboard-timeline li::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: -4px;
  width: 1px;
  background: var(--border);
}
.dashboard-timeline li:last-child::after { display: none; }
.dashboard-timeline-label { font-weight: 600; }
.dashboard-timeline-date { color: var(--text-muted); font-size: 13px; white-space: nowrap; }

/* --- Portal: five-step progress bar, "needs action" box, matter list ------
   Progress bar sits under the client dashboard header (with step names) and
   inside each matter row on the agent list (compact, no names). Done steps =
   Moss, current = Terracotta, upcoming = hairline grey. */
.phase-bar {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
}
.phase-bar li {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.phase-bar li::before {
  content: '';
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  margin-bottom: 6px;
}
.phase-bar li.done::before { background: var(--ok); }
.phase-bar li.now::before { background: var(--navy); }
.phase-bar li.now { color: var(--text); font-weight: 600; }
.phase-bar.compact { margin: 10px 0 8px; }
.phase-bar.compact li::before { height: 5px; margin-bottom: 0; }

.dashboard-tile.needs-action {
  border: 2px solid var(--pending);
  background: #fff;
}
.dashboard-tile.needs-action .fieldset-title { color: var(--text); }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.filter-chip {
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--gold); }
.filter-chip.selected { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-chip.warn:not(.selected) { background: var(--pending-bg); border-color: var(--pending); }

.matter-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.matter-row {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.matter-row:last-child { border-bottom: none; }
.matter-row.attention { box-shadow: inset 4px 0 0 var(--pending); }
.matter-row-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.matter-row-top h3 { margin: 0 0 2px; font-size: 15px; }
.matter-row-top .result-status { margin: 0; }
.matter-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.matter-facts .attn { color: var(--text); font-weight: 600; }
.matter-facts .overdue { color: var(--danger); font-weight: 600; }

/* Agent list: expandable "N outstanding" control and its detail panel. */
.facts-toggle {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.facts-toggle::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}
.facts-toggle.open::after { transform: translateY(1px) rotate(-135deg); }
.facts-toggle:hover { color: var(--navy-dark); }
.matter-detail {
  margin-top: 12px;
  padding: 12px 16px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.matter-detail[hidden] { display: none; }
.matter-detail-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.matter-detail ul { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.matter-detail li { margin: 3px 0; }
.matter-detail .inline-note { margin: 0; }

/* Default look of the filter buttons: label and count on one line, "Active · 4". */
.chip-count::before { content: ' · '; white-space: pre; }

/* Cells that only exist to keep table columns aligned in an earlier design;
   kept hidden by default (nothing in the live design ever shows them). */
.fact-na { display: none; }
.matter-list-head { display: none; }

/* --------------------------------------------------------------------------
   The three designs explored alongside this one (a soft-card grid, a soft
   card + left-sidebar variant, and an admin-style table) were deleted here
   once Design D below was picked, 2026-09-22. See git history/session notes
   if any of them need to be resurrected for comparison.
   -------------------------------------------------------------------------- */
/* Labelled fact cells on a matter row. Labels and captions stay hidden until a layout shows them. */
.fact { display: block; min-width: 0; }
.fact-label { display: none; }
.phase-caption { display: none; }

/* ==========================================================================
   LIVE DESIGN for the agent referrals screen — body.theme-indisea. Chosen
   2026-09-22 over the three alternatives explored alongside it (now deleted).
   Card layout, type, and alignment borrowed from Indisea Software's brand
   system (indisea.com/brand#surfaces); colour stays Yin & Co.'s own v2
   palette (Terracotta/Honey/Cocoa) — only the STRUCTURE is borrowed:
     - flat surfaces: no shadow anywhere, ever. Depth is one value step —
       stone canvas, nearly-white card — never a shadow or a hover lift.
     - cards are 16px radius; chips, badges and buttons are pill (999px).
     - a border means one of three things only: a hairline on a surface
       sitting on its own value, a 2px hover edge, or a 3px focus ring.
     - Inter (swapped from IBM Plex Sans 2026-09-22 to match souffletmalt.com,
       TYY's reference), weight fixed by role: 800 for big dashboard numbers,
       700 for page/card headings, 500 for buttons/pills/labels, 400 body —
       Inter carries much heavier weights cleanly than Plex did, so the scale
       leans bolder at the top end than before. Slightly negative body
       tracking, tight heading leading.
     - a subgrid card-alignment technique, so every card in a row lines up
       at the same points regardless of content length.
   The class is applied automatically (see renderAgentMatters() in app.js) —
   nothing in the markup sets it by hand any more. -------------------------- */
body.theme-indisea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #F3F1EA; /* stone canvas */
  letter-spacing: -0.011em; /* body copy runs slightly negative, not zero */
}
body.theme-indisea .app-header { box-shadow: none; }

/* Page eyebrow ("Agent Portal") — muted wayfinding, tracked out, sits above
   the actual heading rather than being a heading itself. */
body.theme-indisea .page-eyebrow {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Headings: sans SemiBold at a tight negative tracking, not the serif used
   elsewhere — Plex's own hat-and-feet capital I is precise enough on its own. */
body.theme-indisea .dashboard-header-main h2 {
  font-family: inherit;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.036em;
  line-height: 1.15;
  color: #3D2B1F;
}
body.theme-indisea .dashboard-header-meta { font-size: 13px; letter-spacing: -0.011em; }

/* Buttons and status pills: always pill, never a shadow. */
body.theme-indisea button.nav-btn,
body.theme-indisea button.submit-btn { border-radius: 999px; font-weight: 500; }
body.theme-indisea .result-status { font-weight: 500; letter-spacing: 0; }
body.theme-indisea .matter-row .result-status.info { background: #F6E9D2; color: var(--navy-dark); }
body.theme-indisea button.nav-btn:focus-visible,
body.theme-indisea button.submit-btn:focus-visible,
body.theme-indisea .filter-chip:focus-visible,
body.theme-indisea .facts-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Stat cards: a glanceable, non-interactive summary row (not the filter pills
   below, which are the actual controls). Still flat — no shadow, ever — but
   each tile carries its own colour: a soft category tint on the card, a
   filled icon badge, and a slim proportion bar underneath the row so the
   split between buckets reads at a glance, not just the three counts. */
body.theme-indisea .matter-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 10px;
}
body.theme-indisea .stat-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FAFAF8;
  border: 1px solid #E3DECF;
  border-radius: 16px;
  padding: 16px 18px;
}
body.theme-indisea .stat-tile-progress { background: rgba(201, 92, 40, 0.07); border-color: rgba(201, 92, 40, 0.18); }
body.theme-indisea .stat-tile-attention { background: rgba(161, 51, 40, 0.06); border-color: rgba(161, 51, 40, 0.16); }
body.theme-indisea .stat-tile-closed { background: rgba(92, 122, 70, 0.07); border-color: rgba(92, 122, 70, 0.17); }
body.theme-indisea .stat-tile-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
}
body.theme-indisea .stat-tile-icon svg { width: 19px; height: 19px; }
body.theme-indisea .stat-tile-progress .stat-tile-icon { background: rgba(201, 92, 40, 0.15); color: var(--navy); }
body.theme-indisea .stat-tile-attention .stat-tile-icon { background: rgba(161, 51, 40, 0.13); color: var(--danger); }
body.theme-indisea .stat-tile-closed .stat-tile-icon { background: rgba(92, 122, 70, 0.15); color: var(--ok); }
body.theme-indisea .stat-tile-body { min-width: 0; }
body.theme-indisea .stat-tile-count {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #221D18;
  font-variant-numeric: tabular-nums;
}
body.theme-indisea .stat-tile-count.danger { color: var(--danger); }
body.theme-indisea .stat-tile-count.ok { color: var(--ok); }
body.theme-indisea .stat-tile-label { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }

/* Proportion bar: one segment per bucket, width = share of the agent's total
   matters. Purely a glance aid — the filter pills above remain the only
   clickable control, so this bar has no click target and no legend beyond
   the tiles it sits under. */
body.theme-indisea .matter-stats-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: #E3DECF;
  margin: 0 0 24px;
}
body.theme-indisea .matter-stats-bar-seg { height: 100%; }
body.theme-indisea .matter-stats-bar-seg.progress { background: var(--navy); }
body.theme-indisea .matter-stats-bar-seg.attention { background: var(--danger); }
body.theme-indisea .matter-stats-bar-seg.closed { background: var(--ok); }

/* Filter pills: the actual controls — "Active 4", "Needs attention 3" — a
   dark pill for whichever is selected, hairline outline pills otherwise. */
body.theme-indisea .filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}
body.theme-indisea .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #E3DECF;
  color: var(--text);
  transition: border-color 150ms ease, background-color 150ms ease;
}
body.theme-indisea .filter-chip:hover { border-color: var(--navy); }
body.theme-indisea .chip-count::before { content: none; }
body.theme-indisea .chip-label { font-size: 14px; font-weight: 600; }
body.theme-indisea .chip-count { font-size: 14px; font-weight: 500; color: var(--text-muted); }
body.theme-indisea .filter-chip.selected { background: #221D18; border-color: #221D18; }
body.theme-indisea .filter-chip.selected .chip-label { color: #fff; }
body.theme-indisea .filter-chip.selected .chip-count { color: rgba(255, 255, 255, 0.55); }
body.theme-indisea .filter-chip.warn:not(.selected) { border-color: var(--pending); }
body.theme-indisea .filter-chip.warn:not(.selected) .chip-count { color: #9A6B00; }

/* Client (Purchaser/Vendor) dashboard — brought onto the same Design D
   language 2026-09-22 (it previously kept the old form-wizard look, the only
   screen that still did once the agent side moved). Same flat cards, same
   Inter role weights; the status pill/switcher next to the heading and the
   named 5-step bar are this screen's own pieces, styled to match. */
body.theme-indisea .dashboard-header { align-items: center; margin-bottom: 20px; }
body.theme-indisea .result-status.info { background: #F6E9D2; color: var(--navy-dark); font-weight: 500; }
body.theme-indisea .dashboard-switcher {
  border: 1px solid #E3DECF;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: #fff;
}
body.theme-indisea .phase-bar { margin: 4px 0 28px; }
body.theme-indisea .phase-bar li { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; }
body.theme-indisea .phase-bar li::before { border-radius: 999px; }

body.theme-indisea .dashboard-grid { gap: 16px; }
body.theme-indisea .dashboard-tile.section-card {
  background: #FAFAF8;
  border: 1px solid #E3DECF;
  border-radius: 16px;
  padding: 22px 24px;
}
body.theme-indisea .dashboard-tile.needs-action {
  border: 1px solid transparent;
  outline: 2px solid var(--pending);
  outline-offset: -1px;
  background: #FEFBF3;
}
body.theme-indisea .tile-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.theme-indisea .dashboard-tile.needs-action .tile-heading { color: #8A6100; }
body.theme-indisea .tile-heading-icon { display: flex; color: inherit; opacity: 0.75; }
body.theme-indisea .tile-heading-icon svg { width: 16px; height: 16px; }
body.theme-indisea .result-next-steps { color: var(--text); font-size: 14px; }
body.theme-indisea .result-next-steps li { margin-bottom: 8px; }
body.theme-indisea .dashboard-deadline-row { border-bottom: 1px solid #EFEAE0; font-size: 14px; }
body.theme-indisea .dashboard-timeline li::before { background: var(--navy); }
body.theme-indisea .dashboard-timeline li::after { background: #E3DECF; }
body.theme-indisea .dashboard-timeline-label { font-weight: 600; font-size: 14px; }

/* Matter cards: nearly-white fill on the stone canvas, 16px radius, no
   shadow. A 2px transparent border is reserved at rest so the 2px hover
   edge never shifts layout — same trick the source system uses. */
body.theme-indisea { background-color: #F3F1EA; }
body.theme-indisea .matter-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
  background: none;
  border: none;
  overflow: visible;
}
body.theme-indisea .matter-row {
  background: #FAFAF8;
  border: 2px solid transparent;
  outline: 1px solid #E3DECF;
  outline-offset: -1px;
  border-radius: 16px;
  padding: 24px;
  transition: border-color 150ms ease;
}
body.theme-indisea .matter-row:hover { border-color: var(--navy); }
body.theme-indisea .matter-row.attention { box-shadow: none; outline: 2px solid var(--pending); }
body.theme-indisea .matter-detail { border-radius: 12px; background: #F3F1EA; border: none; }
body.theme-indisea .phase-bar.compact { margin: 16px 0 6px; }
body.theme-indisea .phase-bar.compact li::before { height: 6px; border-radius: 3px; }
body.theme-indisea .facts-toggle { text-decoration: underline; text-decoration-style: solid; }
body.theme-indisea .facts-toggle:hover { color: var(--navy-dark); }

/* Left rail: same 236px grid as Design B (a fixed structural surface is a
   legitimate "bar" in this system — it just carries no shadow or gradient). */
@media (min-width: 900px) {
  body.theme-indisea .app-shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  body.theme-indisea .app-header {
    grid-row: 1 / span 2;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 24px;
    padding: 24px 16px;
  }
  body.theme-indisea .account-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    font-size: 12px;
    color: #CDB9A3;
  }
  body.theme-indisea .agent-identity {
    padding: 4px 4px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  body.theme-indisea .agent-identity-avatar { width: 36px; height: 36px; font-size: 13px; }
  body.theme-indisea .account-bar button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    color: #F0E6D8;
    transition: background-color 150ms ease, color 150ms ease;
  }
  body.theme-indisea .account-bar button:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
  body.theme-indisea .app-body { grid-column: 2; max-width: none; margin: 0; padding: 32px 40px; }
  body.theme-indisea .app-footer { grid-column: 2; }
}

/* Card interior: title/stage stacked, then a labelled 2 x 2 fact block —
   same tidy pattern as Design B, restyled to Plex's role weights. */
body.theme-indisea .matter-list { align-items: start; }
body.theme-indisea .matter-row { display: flex; flex-direction: column; }
body.theme-indisea .matter-row-top { flex-direction: column; align-items: flex-start; gap: 8px; }
body.theme-indisea .matter-row-top h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.017em; line-height: 1.3; margin: 0 0 3px; }
body.theme-indisea .matter-row-top .dashboard-header-meta { font-size: 12px; }
body.theme-indisea .phase-caption { display: block; font-size: 12px; color: var(--text-muted); margin: 0 0 16px; }
body.theme-indisea .matter-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  padding-top: 16px;
  border-top: 1px solid #EFEAE0;
}
body.theme-indisea .fact { display: flex; flex-direction: column; gap: 3px; }
body.theme-indisea .fact.fact-na { display: flex; }
body.theme-indisea .fact-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.theme-indisea .fact > :not(.fact-label) { font-size: 14px; }
body.theme-indisea .fact .facts-toggle { align-self: flex-start; text-align: left; }
body.theme-indisea .fact .who,
body.theme-indisea .fact-pre { display: none; }
body.theme-indisea .fact-client[data-state="signed_up"] { color: #47623A; font-weight: 500; }
body.theme-indisea .fact-client[data-state="not_yet"] { color: #8A6100; font-weight: 500; }
body.theme-indisea .matter-detail { margin-top: 18px; }

@supports (grid-template-rows: subgrid) {
  body.theme-indisea .matter-list { align-items: stretch; row-gap: 0; }
  body.theme-indisea .matter-row {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    margin-bottom: 24px;
  }
  body.theme-indisea .matter-row-top { grid-row: 1; align-self: start; }
  body.theme-indisea .phase-bar { grid-row: 2; }
  body.theme-indisea .phase-caption { grid-row: 3; }
  body.theme-indisea .matter-facts {
    grid-row: 4 / span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
  body.theme-indisea .matter-facts .fact { margin-bottom: 14px; align-self: start; }
  body.theme-indisea .matter-facts .fact:nth-child(n+3) { margin-bottom: 0; }
  body.theme-indisea .matter-detail { grid-row: 6; align-self: start; }
}