/* paper.css — the one shared stylesheet for every Strike app.

   A page loads this and at most one app stylesheet. Every colour, size and
   space below the token block is a var(); the dark theme is a palette swap on
   :root[data-theme="dark"], never a second set of rules. Components carry the
   p- prefix and apps never restyle them. Fonts are self-hosted because the
   strict CSP in Strike/middleware.py allows font-src 'self' only.

   Custom properties cannot appear in @media conditions, so the two breakpoints
   are written out: 40rem (phone) and 64rem (wide). */

/* ---------------------------------------------------------------- fonts -- */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext-roman.woff2") format("woff2-variations"),
       url("../fonts/source-serif-4-latin-ext-roman.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-roman.woff2") format("woff2-variations"),
       url("../fonts/source-serif-4-latin-roman.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext-italic.woff2") format("woff2-variations"),
       url("../fonts/source-serif-4-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-italic.woff2") format("woff2-variations"),
       url("../fonts/source-serif-4-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  color-scheme: light;

  /* Colour (design §3.1). */
  --ground: #E7ECF4;
  --paper: #FFFFFF;
  --ink: #141C2E;
  --ink-2: #4F5B78;
  --accent: #1E3A8A;
  --accent-2: #2F4FA8;
  --on-accent: #FFFFFF;
  --rule: #1E3A8A2B;
  --rule-2: #1E3A8A17;
  --highlight: #EAF0FB;
  --gain: #1F6F45;
  --loss: #B3261E;
  --warn: #8A5A00;
  --shadow: 0 1px 2px #0F1D4A0D, 0 16px 36px -24px #0F1D4A40;
  --scrim: #0F1D4A59;

  /* Weight. Dark lowers each step: light text on dark reads heavier. */
  --wt-body: 400;
  --wt-head: 500;
  --wt-bold: 600;

  /* Type. */
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --text-display: clamp(2.25rem, 1rem + 5vw, 5.25rem);
  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --leading-prose: 1.7;
  --track-caps: .08em;
  --track-display: -.022em;
  --track-title: -.012em;
  --opsz-display: 60;
  --opsz-title: 36;
  --opsz-body: 12;
  --dropcap-size: 3.3em;
  --dropcap-leading: .82;
  --sup-size: .68em;
  --mono-size: .875em;
  --underline-offset: .18em;

  /* Space: 4 8 12 16 24 32 48 64 96 px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --hair: 0.125rem;

  /* Shape and measure. */
  --radius-1: 3px;
  --radius-2: 6px;
  --measure: 64ch;
  --page-w: 77.5rem;
  --sheet-pad: clamp(1.25rem, 0.5rem + 3.5vw, 3.5rem);
  --grid-min: 17rem;
  --notes-w: 17rem;
  --note-num: 1.125rem;
  --note-code: 2.25rem;
  --panel-w: 22rem;
  --dialog-w: 34rem;
  --toast-w: 24rem;
  --tabbar-h: 3.75rem;
  --sticky-end-clear: 10rem;
  --full-h: 100dvh;
  --sheet-max-h: 88dvh;

  /* Controls. */
  --control-h: 2.5rem;
  --control-h-sm: 2rem;
  --control-pad: 0.875rem;
  --textarea-h: 7.5rem;
  --check: 1.0625rem;
  --stroke: 1.5px;
  --stroke-strong: 2px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --icon: 1.125em;
  --icon-shift: -0.1875em;
  --chevron: 0.3125rem;
  --bar-w: 2.25rem;
  --bar-h: 0.375rem;
  --spinner: 1em;

  /* Motion and stacking. theme.js zeroes --dur while the palette swaps. */
  --dur: 140ms;
  --dur-slow: 220ms;
  --dur-spin: 800ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --z-masthead: 20;
  --z-panel: 30;
  --z-toast: 50;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --ground: #070B13;
  --paper: #111A2C;
  --ink: #DBE2EE;
  --ink-2: #95A2BD;
  --accent: #94B1EC;
  --accent-2: #B5C9F2;
  --on-accent: #0A1122;
  --rule: #94B1EC38;
  --rule-2: #94B1EC1F;
  --highlight: #1A2946;
  --gain: #86C5A0;
  --loss: #E59A92;
  --warn: #E0B566;
  --shadow: inset 0 1px 0 #FFFFFF0D, 0 20px 44px -22px #000000CC;
  --scrim: #000000A6;

  --wt-body: 380;
  --wt-head: 470;
  --wt-bold: 560;
}

@media (pointer: coarse) {
  :root {
    --control-h: 2.75rem;
    --control-h-sm: 2.5rem;
  }
}

/* ---------------------------------------------------------------- base -- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--rule) transparent;
}

body {
  margin: 0;
  min-height: var(--full-h);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--wt-body);
  line-height: var(--leading-body);
  font-variation-settings: "opsz" var(--opsz-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--wt-head);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); letter-spacing: var(--track-title); font-variation-settings: "opsz" var(--opsz-title); }
h2 { font-size: var(--text-xl); letter-spacing: var(--track-title); font-variation-settings: "opsz" var(--opsz-title); }
h3 { font-size: var(--text-lg); }
h4, h5, h6 { font-size: var(--text-md); font-weight: var(--wt-bold); }

p, ul, ol, dl, figure, blockquote, pre {
  margin: 0;
}
p { text-wrap: pretty; }
ul, ol { padding-inline-start: var(--space-5); }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--underline-offset);
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent-2); }

strong, b { font-weight: var(--wt-bold); }

small { font-size: var(--text-sm); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  font-variant-numeric: lining-nums tabular-nums;
}
pre {
  overflow-x: auto;
  padding: var(--space-4);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-1);
  background: var(--ground);
  line-height: var(--leading-snug);
}

hr {
  margin: var(--space-6) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--rule);
  color: var(--ink-2);
  font-style: italic;
}

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

table {
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}

button, input, select, textarea {
  margin: 0;
  color: inherit;
  font: inherit;
  font-variant-numeric: lining-nums;
}
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}

::selection {
  background: var(--highlight);
  color: var(--ink);
}

[hidden] { display: none !important; }

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

/* Users: every migrated app. */
.p-page {
  min-height: var(--full-h);
  padding: var(--space-5) var(--space-4) var(--space-8);
  background: var(--ground);
}
.p-page > * {
  max-width: var(--page-w);
  margin-inline: auto;
}

.p-sheet {
  padding: var(--sheet-pad);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-2);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.p-stack {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}
.p-stack.is-tight { gap: var(--space-3); }
.p-stack.is-loose { gap: var(--space-7); }

.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr));
  gap: var(--space-5);
}

.p-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.p-row.is-end { justify-content: flex-end; }
.p-row.is-between { justify-content: space-between; }

.p-measure { max-width: var(--measure); }

.p-page-foot {
  max-width: var(--page-w);
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

/* ------------------------------------------------------------ masthead -- */

/* Users: every page on design_system/base.html. */
.p-masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-masthead);
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
}
.p-masthead-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--page-w);
  min-height: var(--control-h);
  margin-inline: auto;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-md);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
  color: var(--ink-2);
}
.p-masthead-brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
  margin-inline-end: auto;
}
/* When the row is too narrow, the app name gives way first and the site name
   only then, so neither can run under the controls beside it. */
.p-masthead-site {
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-weight: var(--wt-bold);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-masthead-site:hover { color: var(--accent); }
.p-masthead-app {
  overflow: hidden;
  color: var(--accent);
  font-style: italic;
  font-variant-caps: normal;
  letter-spacing: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-masthead-app::before {
  content: "·";
  margin-inline-end: var(--space-3);
  color: var(--ink-2);
  font-style: normal;
}
.p-masthead-account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-variant-caps: normal;
  letter-spacing: normal;
  font-size: var(--text-sm);
}
.p-masthead-account a { color: var(--ink-2); text-decoration: none; }
.p-masthead-account a:hover { color: var(--accent); }

/* Contents switcher: a native <details> disclosure. A dropdown on wide
   screens, a full-width panel under the masthead on phones. */
.p-contents { position: relative; flex-shrink: 0; }
.p-contents > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.p-contents > summary::-webkit-details-marker { display: none; }
.p-contents > summary:hover { border-color: var(--rule); color: var(--accent); }
.p-contents[open] > summary { border-color: var(--rule); color: var(--accent); }
.p-contents .p-contents-close { display: none; }
.p-contents[open] .p-contents-open { display: none; }
.p-contents[open] .p-contents-close { display: block; }
.p-contents-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-panel);
  width: var(--panel-w);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  background: var(--paper);
  box-shadow: var(--shadow);
  font-variant-caps: normal;
  letter-spacing: normal;
}
.p-contents-panel .p-label { margin-bottom: var(--space-2); }

/* Theme toggle: three real buttons in a labelled group. */
.p-theme {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
}
.p-theme button {
  display: inline-grid;
  place-items: center;
  width: var(--control-h-sm);
  height: calc(var(--control-h-sm) - var(--hair));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.p-theme button + button { border-inline-start: 1px solid var(--rule); }
.p-theme button:hover { color: var(--accent); }
.p-theme button[aria-pressed="true"] {
  background: var(--highlight);
  color: var(--accent);
}
.p-theme button:first-child { border-radius: var(--radius-1) 0 0 var(--radius-1); }
.p-theme button:last-child { border-radius: 0 var(--radius-1) var(--radius-1) 0; }

@media (pointer: coarse) {
  .p-masthead-site { line-height: var(--control-h-sm); }
  .p-theme button { height: var(--control-h-sm); }
}

@media (max-width: 40rem) {
  .p-masthead-inner { gap: var(--space-2); padding-inline: var(--space-3); }
  .p-masthead-brand { font-size: var(--text-sm); }
  .p-masthead-app::before { margin-inline-end: var(--space-2); }
  .p-masthead-inner:has(.p-masthead-account:not(:empty)) .p-masthead-app { display: none; }
  .p-contents { position: static; }
  .p-contents-label { display: none; }
  .p-contents-panel {
    top: 100%;
    left: 0;
    width: 100%;
    max-height: calc(var(--full-h) - var(--space-8));
    overflow-y: auto;
    border-width: 0 0 1px;
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------- type -- */

/* Users: every app; p-dropcap on home and LEX answers. */
.p-display {
  font-size: var(--text-display);
  font-weight: var(--wt-head);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  font-variation-settings: "opsz" var(--opsz-display);
  text-wrap: balance;
}

.p-title {
  font-size: var(--text-2xl);
  font-weight: var(--wt-head);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-title);
  font-variation-settings: "opsz" var(--opsz-title);
  text-wrap: balance;
}

.p-subtitle {
  color: var(--accent);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-snug);
  font-variation-settings: "opsz" var(--opsz-title);
}

.p-label {
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
  font-variant-numeric: lining-nums;
}
/* Coloured labels. Users: MindFlow (the breath ring, review sentiment). */
.p-label.is-accent { color: var(--accent); }
.p-label.is-gain { color: var(--gain); }
.p-label.is-loss { color: var(--loss); }
.p-label.is-warn { color: var(--warn); }

.p-meta {
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-style: italic;
}

.p-prose {
  max-width: var(--measure);
  line-height: var(--leading-prose);
  font-variant-numeric: oldstyle-nums proportional-nums;
  hyphens: auto;
}
.p-prose > * + * { margin-top: var(--space-4); }
.p-prose > * + :is(h2, h3, h4) { margin-top: var(--space-6); }
.p-prose li + li { margin-top: var(--space-1); }

.p-dropcap::first-letter {
  float: left;
  margin: var(--space-1) var(--space-2) 0 0;
  color: var(--accent);
  font-size: var(--dropcap-size);
  font-weight: var(--wt-head);
  line-height: var(--dropcap-leading);
  font-variation-settings: "opsz" var(--opsz-display);
}

.p-mono {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Figures that must line up: tables, prices, counters.
   Users: dashboard, agent, Règlements comparisons, home figures. */
.p-num {
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.p-icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon);
  height: var(--icon);
  vertical-align: var(--icon-shift);
}

/* A contents list with dotted leaders, as in the front of a working paper.
   Users: home, the Contents switcher. */
.p-toc {
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-toc li + li { margin-top: var(--space-1); }
.p-toc a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-1);
  color: var(--ink);
  text-decoration: none;
}
.p-toc a::after {
  content: "";
  flex: 1;
  order: 1;
  min-width: var(--space-5);
  border-bottom: 1px dotted var(--rule);
}
.p-toc-name {
  font-weight: var(--wt-bold);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.p-toc-desc {
  order: 2;
  color: var(--ink-2);
  font-style: italic;
  font-variant-numeric: oldstyle-nums;
  text-align: right;
}
.p-toc a:hover .p-toc-name,
.p-toc a[aria-current="page"] .p-toc-name { color: var(--accent); }

/* ----------------------------------------------------- figures & notes -- */

/* Users: LEX (pension_rag, reglement_rag, banking_rag), dashboard figures,
   the home legal landing; p-colophon on home and the shared footer. */
.p-fig { display: grid; gap: var(--space-3); }

.p-caption {
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
  font-variant-numeric: lining-nums;
}
.p-caption b { color: var(--ink); font-weight: var(--wt-bold); }

/* Footnote reference in running text: <sup class="p-fnref"><a href="#n1">1</a></sup> */
.p-fnref {
  font-size: var(--sup-size);
  line-height: 0;
  font-variant-numeric: lining-nums;
}
.p-fnref a {
  padding-inline: var(--hair);
  color: var(--accent);
  font-weight: var(--wt-bold);
  text-decoration: none;
}
.p-fnref a:hover { text-decoration: underline; }

/* Text beside its notes; the notes drop under the text on narrow widths. */
.p-annotated {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--notes-w);
  gap: var(--space-7);
  align-items: start;
}

.p-notes {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 0 var(--space-5);
  border-left: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  list-style: none;
  counter-reset: p-note;
}
.p-notes > li {
  display: grid;
  grid-template-columns: var(--note-num) minmax(0, 1fr);
  counter-increment: p-note;
  scroll-margin-top: var(--space-8);
}
.p-notes > li::before {
  content: counter(p-note);
  color: var(--accent);
  font-weight: var(--wt-bold);
  font-variant-numeric: lining-nums;
}
/* Coded notes (LEX): <ol class="p-notes is-coded"><li data-note="A3"> shows the
   citation code the text uses instead of a running number. */
.p-notes.is-coded > li { grid-template-columns: var(--note-code) minmax(0, 1fr); }
.p-notes > li[data-note]::before { content: attr(data-note); }
.p-notes > li:target { background: var(--highlight); }
.p-notes cite {
  display: block;
  color: var(--ink);
  font-style: normal;
  font-weight: var(--wt-bold);
}
.p-notes cite + span { font-style: italic; }
.p-notes a { overflow-wrap: anywhere; }

@media (max-width: 64rem) {
  .p-annotated { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .p-notes {
    padding: var(--space-4) 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

.p-footnotes {
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-style: italic;
}

.p-colophon {
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ---------------------------------------------------------------- data -- */

/* Users: dashboard, agent, Règlements comparisons. */
.p-table-wrap {
  overflow-x: auto;
}

.p-table {
  width: 100%;
  font-size: var(--text-base);
  font-variant-numeric: lining-nums tabular-nums;
}
.p-table caption {
  padding-bottom: var(--space-3);
  text-align: left;
}
.p-table th,
.p-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  vertical-align: baseline;
}
.p-table th:last-child,
.p-table td:last-child { padding-right: 0; }
.p-table thead th {
  border-bottom-color: var(--rule);
  color: var(--ink-2);
  font-weight: var(--wt-body);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
}
.p-table th.p-num,
.p-table td.p-num { text-align: right; }
.p-table tbody tr { transition: background-color var(--dur) var(--ease); }
.p-table tbody tr.is-highlight,
.p-table tbody tr[aria-selected="true"] { background: var(--highlight); }
.p-table tbody tr.is-highlight td,
.p-table tbody tr.is-highlight th { font-weight: var(--wt-bold); }
.p-table tfoot td { border-bottom: 0; border-top: 1px solid var(--rule); }
.p-table a { text-decoration: none; }
.p-table a:hover { text-decoration: underline; }

.p-delta {
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.p-delta.is-gain { color: var(--gain); }
.p-delta.is-loss { color: var(--loss); }

/* An inline bar: <svg class="p-bar" viewBox="0 0 100 1" preserveAspectRatio="none">
   <rect width="24" height="1"></rect></svg>. The width is an SVG attribute, so
   no inline style is needed under the strict CSP. */
.p-bar {
  display: inline-block;
  width: var(--bar-w);
  height: var(--bar-h);
  margin-inline-start: var(--space-2);
  border-radius: 1px;
  background: var(--rule-2);
  vertical-align: middle;
}
.p-bar rect { fill: var(--accent); }
.p-bar.is-gain rect { fill: var(--gain); }
.p-bar.is-loss rect,
.p-bar rect.is-loss { fill: var(--loss); }
/* A bar that fills its row, for figure lists. Users: agent stats, reviews
   and goals. */
.p-bar.is-full { display: block; width: 100%; margin-inline-start: 0; }

/* ------------------------------------------------------------ controls -- */

/* Buttons. Users: every interactive app. */
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--control-pad);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--wt-head);
  line-height: var(--leading-snug);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.p-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.p-btn:active { background: var(--highlight); }

/* The one primary action on a view. Nothing else is filled with accent. */
.p-btn.is-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.p-btn.is-primary:hover {
  border-color: var(--accent-2);
  background: var(--accent-2);
  color: var(--on-accent);
}

.p-btn.is-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--accent);
}
.p-btn.is-quiet:hover { background: var(--highlight); }
/* A quiet button that marks the current page or a pressed toggle.
   Users: MindFlow (journal pager, mute). */
.p-btn.is-quiet[aria-current="page"],
.p-btn.is-quiet[aria-pressed="true"] {
  border-color: var(--rule);
  background: var(--highlight);
  font-weight: var(--wt-bold);
}

.p-btn.is-danger {
  border-color: color-mix(in srgb, var(--loss) 45%, transparent);
  color: var(--loss);
}
.p-btn.is-danger:hover {
  border-color: var(--loss);
  background: color-mix(in srgb, var(--loss) 8%, var(--paper));
  color: var(--loss);
}
.p-btn.is-danger.is-quiet { border-color: transparent; }
.p-btn.is-danger.is-primary {
  border-color: var(--loss);
  background: var(--loss);
  color: var(--on-accent);
}

.p-btn.is-small {
  min-height: var(--control-h-sm);
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
}
.p-btn.is-icon {
  width: var(--control-h);
  padding: 0;
}
.p-btn.is-icon.is-small { width: var(--control-h-sm); }

.p-btn:disabled,
.p-btn[aria-disabled="true"],
.p-btn.is-primary:disabled,
.p-btn.is-danger:disabled {
  border-color: var(--rule-2);
  background: transparent;
  color: var(--ink-2);
  cursor: not-allowed;
}

/* Loading keeps the label (so the width holds) and adds a spinner. */
.p-btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}
.p-btn[aria-busy="true"]::after {
  content: "";
  width: var(--spinner);
  height: var(--spinner);
  border: var(--stroke) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: p-spin var(--dur-spin) linear infinite;
}

/* Fields: <div class="p-field"><label>…</label><input class="p-input">
   <p class="p-hint">…</p></div>
   Users: file tools, Minutes, MindFlow, journal, meditation login, agent,
   dashboard screener, home contact form. */
.p-field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.p-field > label,
.p-field > legend,
.p-field-label {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--wt-head);
}
fieldset.p-field {
  margin: 0;
  padding: 0;
  border: 0;
}
.p-hint {
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-style: italic;
}
.p-error {
  color: var(--loss);
  font-size: var(--text-xs);
}

.p-input,
.p-select,
.p-textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-base);
  transition: border-color var(--dur) var(--ease);
}
.p-input::placeholder,
.p-textarea::placeholder { color: var(--ink-2); opacity: 1; }
.p-input:hover,
.p-select:hover,
.p-textarea:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.p-input:focus-visible,
.p-select:focus-visible,
.p-textarea:focus-visible {
  border-color: var(--accent);
  outline-offset: 0;
}
.p-input[aria-invalid="true"],
.p-select[aria-invalid="true"],
.p-textarea[aria-invalid="true"] { border-color: var(--loss); }
.p-input:disabled,
.p-select:disabled,
.p-textarea:disabled {
  border-color: var(--rule-2);
  background: var(--ground);
  color: var(--ink-2);
  cursor: not-allowed;
}
.p-input[type="file"] { padding: var(--space-2) var(--space-3); }

/* The chevron is two gradient halves so it can take a token colour. */
.p-select {
  padding-right: calc(var(--space-6) + var(--space-2));
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:
    calc(100% - var(--space-4) - var(--chevron)) 50%,
    calc(100% - var(--space-4)) 50%;
  background-size: var(--chevron) var(--chevron);
  background-repeat: no-repeat;
}

.p-textarea {
  min-height: var(--textarea-h);
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-body);
  resize: vertical;
}

/* Check and radio: native inputs, tinted. <label class="p-check"><input
   type="checkbox"> Text</label>
   Users: dashboard screener, agent, MindFlow settings, file tools options. */
.p-check {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}
.p-check input {
  flex-shrink: 0;
  width: var(--check);
  height: var(--check);
  margin: 0;
  accent-color: var(--accent);
  transform: translateY(var(--hair));
  cursor: pointer;
}
.p-check:has(input:disabled) { color: var(--ink-2); cursor: not-allowed; }
@media (pointer: coarse) {
  .p-check { align-items: center; min-height: var(--control-h-sm); }
  .p-check input { transform: none; }
}

/* Segmented control: buttons with aria-pressed, one pressed at a time. Links
   (for choices that must stay deep-linkable) mark the current one with
   aria-current="true".
   Users: dashboard (period, year range, table mode), LEX filters. */
.p-segmented {
  display: inline-flex;
  justify-self: start;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  background: var(--paper);
}
.p-segmented > button,
.p-segmented > a {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--control-h) - var(--hair));
  padding: 0 var(--control-pad);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.p-segmented > :is(button, a) + :is(button, a) { border-inline-start: 1px solid var(--rule); }
.p-segmented > :is(button, a):hover { color: var(--accent); }
.p-segmented > button[aria-pressed="true"],
.p-segmented > a[aria-current="true"] {
  background: var(--highlight);
  color: var(--accent);
  font-weight: var(--wt-bold);
}
.p-segmented > button:disabled { color: var(--ink-2); background: var(--ground); }

/* Segmented and tabs scroll sideways, which clips an outline drawn outside
   the button, so their focus ring is drawn inside it. */
.p-segmented > :is(button, a):focus-visible,
.p-tabs > [role="tab"]:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }

/* Tabs: role="tablist" with role="tab" buttons and aria-selected. The tabs
   carry a little side padding so the inset ring clears the label.
   Users: dashboard (statements), agent. */
.p-tabs {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--rule);
}
.p-tabs > [role="tab"] {
  min-height: var(--control-h);
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--text-md);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.p-tabs > [role="tab"]:hover { color: var(--ink); }
.p-tabs > [role="tab"][aria-selected="true"] {
  color: var(--ink);
  box-shadow: inset 0 calc(-1 * var(--stroke-strong)) 0 var(--accent);
}

/* Chips: filters and tags. Toggle ones are buttons with aria-pressed.
   Users: dashboard (sectors), LEX filters, agent. */
.p-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
button.p-chip:hover,
a.p-chip:hover { border-color: var(--accent); color: var(--accent); }
.p-chip.is-on,
.p-chip[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--highlight);
}
/* Disabled differs from an idle chip by its dashed edge, and takes no hover. */
button.p-chip:disabled {
  border-style: dashed;
  border-color: var(--ink-2);
  background: transparent;
  color: var(--ink-2);
  cursor: not-allowed;
}

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

/* Badge: a status word, never a button.
   Users: LEX (Public, Connexion, quota), agent, dashboard. */
.p-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
  font-variant-numeric: lining-nums;
  line-height: var(--leading-snug);
  white-space: nowrap;
}
.p-badge.is-accent { border-color: var(--accent); color: var(--accent); }
.p-badge.is-gain { border-color: color-mix(in srgb, var(--gain) 45%, transparent); color: var(--gain); }
.p-badge.is-loss { border-color: color-mix(in srgb, var(--loss) 45%, transparent); color: var(--loss); }
.p-badge.is-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }

/* Notice: an inline message. role="status" for news, role="alert" for errors.
   Users: every app; home contact errors, LEX quota warnings. */
.p-notice {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  background: var(--highlight);
  color: var(--ink);
  font-size: var(--text-sm);
}
.p-notice > .p-icon { color: var(--accent); transform: translateY(var(--hair)); }
.p-notice-title { display: block; font-weight: var(--wt-bold); }
/* A warn tint mixes to beige, which R2 rules out; the border and icon carry it. */
.p-notice.is-warn {
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  background: var(--paper);
}
.p-notice.is-warn > .p-icon { color: var(--warn); }
.p-notice.is-loss {
  border-color: color-mix(in srgb, var(--loss) 40%, transparent);
  background: color-mix(in srgb, var(--loss) 6%, var(--paper));
}
.p-notice.is-loss > .p-icon { color: var(--loss); }
.p-notice.is-gain {
  border-color: color-mix(in srgb, var(--gain) 40%, transparent);
  background: color-mix(in srgb, var(--gain) 6%, var(--paper));
}
.p-notice.is-gain > .p-icon { color: var(--gain); }

/* Empty state: what is missing and the one thing to do about it.
   Users: dashboard screener, agent, journal, Minutes. */
.p-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-2);
  color: var(--ink-2);
  text-align: center;
}
.p-empty-title {
  color: var(--accent);
  font-size: var(--text-lg);
  font-style: italic;
  font-variation-settings: "opsz" var(--opsz-title);
}
.p-empty p { max-width: var(--measure); }

/* Dropzone: a <label> around a file input, so it works without JS.
   Users: file tools (pdf_toolkit, pdf_converter, img_compressor), Minutes. */
.p-dropzone {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-2);
  background: var(--paper);
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.p-dropzone:hover,
.p-dropzone.is-over,
.p-dropzone:focus-within {
  border-color: var(--accent);
  background: var(--highlight);
}
.p-dropzone > .p-icon { width: var(--space-6); height: var(--space-6); color: var(--accent); }
.p-dropzone strong { color: var(--ink); font-weight: var(--wt-head); }

/* Toast: short-lived confirmation. The region is role="status" aria-live.
   Users: agent, journal, Minutes, dashboard saves. */
.p-toasts {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-2);
  width: min(var(--toast-w), calc(100% - var(--space-6)));
  pointer-events: none;
}
.p-toast {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: var(--text-sm);
  pointer-events: auto;
}
.p-toast > .p-icon { color: var(--accent); transform: translateY(var(--hair)); }
.p-toast.is-gain > .p-icon { color: var(--gain); }
.p-toast.is-loss { border-color: color-mix(in srgb, var(--loss) 40%, transparent); }
.p-toast.is-loss > .p-icon { color: var(--loss); }
.p-toast > button { margin-inline-start: auto; }

@media (max-width: 40rem) {
  .p-toasts { right: var(--space-3); left: var(--space-3); width: auto; }
}
/* Toasts on a page with a fixed bottom tab bar of --tabbar-h rise above it.
   Users: agent, whose tab bar shows below 45rem. */
@media (max-width: 45rem) {
  .p-toasts.is-over-tabbar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-2)); }
}

/* Sheet modal: a native <dialog> opened with showModal(). On phones it becomes a
   bottom sheet.
   Users: destructive confirmations in agent, journal and Minutes; the
   dashboard command palette. */
.p-sheet-modal {
  width: min(var(--dialog-w), calc(100% - var(--space-6)));
  max-height: var(--sheet-max-h);
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.p-sheet-modal::backdrop { background: var(--scrim); }
.p-sheet-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--rule-2);
}
.p-sheet-modal-head h2 { font-size: var(--text-lg); }
.p-sheet-modal-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}
.p-sheet-modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--rule-2);
}

@media (max-width: 40rem) {
  .p-sheet-modal {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--radius-2) var(--radius-2) 0 0;
  }
  .p-sheet-modal-foot { flex-direction: column-reverse; }
  .p-sheet-modal-foot .p-btn { width: 100%; }
}

.p-spinner {
  display: inline-block;
  width: var(--spinner);
  height: var(--spinner);
  border: var(--stroke) solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: var(--icon-shift);
  animation: p-spin var(--dur-spin) linear infinite;
}

@keyframes p-spin {
  to { rotate: 1turn; }
}

/* ----------------------------------------------------------- utilities -- */

/* Users: every app. */
.p-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.p-skip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-1);
  background: var(--paper);
  transform: translateY(-200%);
}
.p-skip:focus { transform: none; }

/* An action bar held at the foot of the view on wide screens. While one is
   sticky, the page scrolls focused fields and anchor targets clear of it
   instead of under it. Users: Minutes transcript and PV review. */
.p-sticky-end {
  position: sticky;
  bottom: var(--space-3);
  z-index: var(--z-masthead);
}
@media not all and (max-width: 40rem) {
  html:has(.p-sticky-end) { scroll-padding-bottom: var(--sticky-end-clear); }
}
@media (max-width: 40rem) {
  .p-sticky-end { position: static; }
}

/* -------------------------------------------------------------- motion -- */

/* theme.js adds this class for two frames while the palette swaps and also
   zeroes --dur, which is what stops app transitions written with --dur. */
:root.p-theme-switching *,
:root.p-theme-switching *::before,
:root.p-theme-switching *::after {
  transition: none;
}

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