/* Phase-3 visual treatment. Load last on the app and standalone portrait.
   One fixed viewport wash; reading surfaces never restart the gradient. */
html.p3-visual {
  --p3-blue:#315a80;
  --p3-blue-hover:#254a6d;
  --p3-ink:#24374a;
  --p3-muted:#4e6277;
  --p3-line:#c5d4e0;
  --p3-panel:#ffffff;
  --p3-paper:#f8fafc;
  --paper:var(--p3-panel);
  --font-sans:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --brand:var(--p3-blue); --brand-deep:#254a6d; --brand-mid:#527a9c;
  --ink:var(--p3-ink); --ink-strong:#1c2e40; --ink-secondary:#3f556b;
  --ink-muted:var(--p3-muted); --ink-faint:var(--p3-muted);
  --bg:var(--p3-paper); --surface:var(--p3-panel); --surface-subtle:#f7fafc;
  --surface-sunken:#edf3f8; --border:var(--p3-line); --border-strong:#9fb6c9;
  --accent:var(--p3-blue); --accent-deep:var(--p3-blue-hover); --on-accent:#fff;
  --cream-bg:var(--p3-paper); --cream-raised:var(--p3-panel);
  --cream-raised-hi:var(--p3-panel); --cream-page-3:#edf3f8;
  --ink-900:var(--p3-paper); --ink-850:var(--p3-paper); --ink-800:var(--p3-paper);
  --ink-750:var(--p3-paper); --ink-700:var(--p3-paper); --ink-650:var(--p3-paper);
  --ink-600:var(--p3-paper); --ink-550:var(--p3-paper); --ink-500:var(--p3-paper);
  --ink-450:var(--p3-paper);
  --ink-text:var(--p3-ink); --ink-text-strong:#1c2e40;
  --muted-ink:var(--p3-muted); --muted-ink-2:var(--p3-muted);
  --muted-ink-3:var(--p3-muted); --muted-ink-4:#3f556b; --muted-ink-5:var(--p3-muted);
  --eyebrow-ink:var(--p3-muted);
  --text-cream:var(--p3-ink); --text-cream-hi:#1c2e40; --text-cream-warm:#3f556b;
  --text-cream-72:var(--p3-muted); --text-cream-50:var(--p3-muted);
  --text-cream-45:var(--p3-muted); --text-cream-18:var(--p3-line);
  --hairline-ink:var(--p3-line); --hairline-ink-12:var(--p3-line);
  --hairline-ink-20:#afc2d3; --card-accent:var(--p3-blue);
  --attn:var(--p3-blue); --attn-g1:var(--p3-blue); --attn-g2:#416d93;
  --attn-text:var(--p3-blue); --on-attn:#fff;
  --func-clickable:#f7fafc; --func-chosen:#e4eff8; --func-inactive:#edf0f2;
  --wash-a:#f4f8fb; --wash-b:#eef4f8;
  --landing-glow:var(--p3-paper);
  --canvas-wash-1:var(--p3-paper); --canvas-wash-2:var(--p3-paper); --canvas-wash-3:var(--p3-paper);
  --focus-ring:0 0 0 3px #315a8040;
  background:var(--p3-paper);
  color-scheme:light;
}

html.p3-visual body {
  position:relative;
  isolation:isolate;
  background:var(--p3-paper);
  color:var(--p3-ink);
}
html.p3-visual body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom left,
    #d5e4f3 0%, #edf3f9 30%, #fff 46%, #fff 54%, #edf3f9 70%, #d5e4f3 100%);
}

/* Keep the long reading column continuous with the page. Dense cards and
   transient overlays retain their solid neutral surfaces. */
html.p3-visual .rm-quiz,
html.p3-visual .rm-quiz-inner,
html.p3-visual .rm-landing { background:transparent; }
html.p3-visual .rm-quiz-inner { box-shadow:none; border-radius:0; }
html.p3-visual .home-matter,
html.p3-visual .home-notice { background:var(--p3-panel); border-color:var(--p3-line); }
html.p3-visual .p3-landing .p3-example { background:#f2f6fa; border-color:#8da8be; }
html.p3-visual .p3-landing .p3-example-top { background:#e4eef6; border-color:#8da8be; }
html.p3-visual .p3-landing .p3-example-label { color:var(--p3-blue); }
html.p3-visual .ending-invitation { background:#f1f6fa; }
html.p3-visual .ending-btn-ghost { background:#ffffffcc; border-color:var(--p3-line); }
html.p3-visual .place-tabbar,
html.p3-visual .dk-strip { background:#fffffff5; border-color:var(--p3-line); }

/* Existing actions keep their names, geometry and precedence. */
html.p3-visual .p3-begin,
html.p3-visual .p3-actions>.btn-primary,
html.p3-visual .btn-continue,
html.p3-visual .mirror-home .home-conversation,
html.p3-visual .home-save,
html.p3-visual .p3-ending-matter button,
html.p3-visual .ending-btn-primary,
html.p3-visual .nt-google-calendar,
html.p3-visual .dk-strip[data-settled="1"] .dk-strip-link {
  background:var(--p3-blue); border-color:var(--p3-blue); color:#fff;
}
html.p3-visual .p3-begin:hover,
html.p3-visual .p3-actions>.btn-primary:hover,
html.p3-visual .btn-continue:hover,
html.p3-visual .mirror-home .home-conversation:hover,
html.p3-visual .home-save:hover,
html.p3-visual .ending-btn-primary:hover { background:var(--p3-blue-hover); }
html.p3-visual .p3-wordmark span,
html.p3-visual .p3-eyebrow,
html.p3-visual .portrait-header a,
html.p3-visual .ending-eyebrow,
html.p3-visual .home-matter-state { color:var(--p3-blue); }
html.p3-visual .p3-example .p3-example-stage { color:var(--p3-blue); }

/* Small utility text must remain readable even over a blue corner. */
html.p3-visual .rm-reoption,
html.p3-visual .rm-reoption-note,
html.p3-visual .rm-chip-muted { color:var(--p3-muted); opacity:1; }
html.p3-visual .rm-reoption:disabled { opacity:.5; }
html.p3-visual .dk-honesty,
html.p3-visual .dk-notes-loading,
html.p3-visual .dk-note-band,
html.p3-visual .dk-note-asof,
html.p3-visual .dk-turn-name,
html.p3-visual .dk-pick-m,
html.p3-visual .ending-ready-since,
html.p3-visual .ending-clearer-k,
html.p3-visual .portrait-session-tag,
html.p3-visual .place-wide-hint { color:var(--p3-muted); }
html.p3-visual :is(a,button,input,textarea,select,summary):focus-visible {
  outline:2px solid var(--p3-blue);
  outline-offset:3px;
  box-shadow:none;
}