/* Ditto: the design system.

   A quiet sky, soft cloud ribbons, warm paper, and deep fountain-pen ink.
   At night the palette is blue hour: indigo sky, violet cloud, the painted cloud sea's own colours.

   Type: Instrument Serif speaks (headlines, names, numbers); Hanken Grotesk
   does the work. Handwriting on screen is always written by the engine, in
   a real person's learned hand, never a font. */

:root {
  color-scheme: light;

  /* the air: what pages sit in, a breath of sky in the white */
  --air: #f7f4f2;
  --air-hi: #fcfaf8;
  --air-lo: #eee8e6;
  --surface: #fffdfb;
  --surface-2: #f8f4f1;
  --surface-3: #efe9e6;
  --paper: #fffdf8;

  /* ink: deep navy */
  --ink: #1a1c33;
  --ink-2: #45465f;
  --ink-3: #686880;
  --ink-4: #a3a1b3;
  --line: rgba(26, 28, 51, 0.08);
  --line-2: rgba(26, 28, 51, 0.14);
  --line-3: rgba(26, 28, 51, 0.22);

  /* what you can press: luminous sky blue */
  --accent: #2d3d9a;
  --accent-hi: #3a4cb4;
  --accent-wash: rgba(45, 61, 154, 0.07);
  --accent-wash-2: rgba(45, 61, 154, 0.13);
  --on-accent: #ffffff;
  --hand-ink: #22338c; /* handwriting shown on the room itself */
  --red-pen: #d23f3a;
  --hl: #ffe37a;
  --good: #1f8a5b;
  --warn: #b0731a;
  --bad: #c2413a;

  /* the primary button is a pane of lit sky */
  --primary: #1b1f38;
  --primary-hi: #262b4a;
  --primary-top: #33395e;
  --primary-glow: rgba(214, 164, 72, 0.42);
  --on-primary: #fff6e4;

  /* the sky */
  --sky-0: #bdb6e4;
  --sky-1: #d3c9ec;
  --sky-2: #e9ddee;
  --sky-3: #f7e5e0;
  --sky-4: #fdeedd;
  --horizon: #ffdca6;
  --sunrise: #f4b46c;
  --sunrise-2: #ee9f86;
  --rose: #e8a9bf;
  --lilac: #b3a7e3;
  --sun: rgba(255, 246, 220, 0.98);
  --cloud-lit: #fbfaf7;
  --cloud-mid: #d0d6de;
  --cloud-shade: #b9c4ce;
  --cloud-warm: #e2ddd3;
  --mt-far: #c8bfe6;
  --mt-near: #a99fd6;
  --mt-lit: #fff3e0;
  --mt-haze: #f2e6ee;
  --star-a: 0;
  --on-sky: #1a1c33;
  --on-sky-2: rgba(40, 40, 70, 0.78);

  /* light (older names, kept for the flows) */
  --glow-warm: rgba(255, 205, 140, 0.45);
  --glow-cool: rgba(190, 175, 235, 0.45);
  --glow-rose: rgba(232, 169, 191, 0.3);
  --leaf: 30, 50, 90;
  --leaf-a: 0;
  --leaf-paper-a: 0;
  --beam: rgba(255, 255, 255, 0.5);

  /* depth: cool, airy shadows; paper floats */
  --sh-1: 0 0.5px 0 rgba(62, 44, 92, 0.05), 0 1px 3px -1px rgba(62, 44, 92, 0.1);
  --sh-2: 0 0.5px 0 rgba(62, 44, 92, 0.05), 0 2px 6px -2px rgba(62, 44, 92, 0.1), 0 16px 34px -14px rgba(62, 44, 92, 0.2);
  --sh-3: 0 1px 0 rgba(62, 44, 92, 0.04), 0 6px 14px -6px rgba(62, 44, 92, 0.12), 0 34px 70px -26px rgba(62, 44, 92, 0.34);
  --sh-paper: 0 0.5px 0 rgba(62, 44, 92, 0.06), 0 3px 6px -2px rgba(62, 44, 92, 0.1), 0 22px 44px -18px rgba(62, 44, 92, 0.26), 0 60px 110px -40px rgba(150, 100, 150, 0.28);
  --sh-float: 0 0 0 0.5px rgba(62, 44, 92, 0.08), 0 2px 4px -2px rgba(62, 44, 92, 0.1), 0 20px 46px -16px rgba(62, 44, 92, 0.28);
  --veil: rgba(255, 252, 248, 0.74);
  --veil-strong: rgba(255, 252, 248, 0.93);
  --veil-edge: rgba(255, 255, 255, 0.85);
  --scrim: rgba(30, 24, 50, 0.3);
  --hover: rgba(13, 25, 54, 0.05);
  --press: rgba(13, 25, 54, 0.09);

  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Instrument Sans", "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-xs: 8px;
  --r-s: 11px;
  --r-m: 15px;
  --r-l: 22px;
  --r-xl: 30px;
  --gutter: clamp(16px, 4.4vw, 56px);
  --max: 1200px;
  /* one spacing scale (4px base) for every gap, pad and section rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-section: clamp(var(--sp-8), 9vw, 144px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.8, 0.35, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-1: 160ms;
  --t-2: 280ms;
  --t-3: 640ms;

  /* names the older stylesheets use, mapped onto the new palette */
  --brand: var(--accent);
  --brand-fill: var(--accent);
  --brand-fill-hover: var(--accent-hi);
  --brand-600: var(--accent-hi);
  --brand-700: var(--accent);
  --brand-50: var(--accent-wash);
  --brand-100: var(--accent-wash-2);
  --brand-ink: var(--hand-ink);
  --bg: var(--air);
  --bg-2: var(--air-lo);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --text-on-brand: var(--on-accent);
  --desk: var(--air);
  --glass: var(--veil);
  --glass-strong: var(--veil-strong);
  --glass-edge: var(--veil-edge);
  --pill-dark: rgba(26, 28, 51, 0.92);
  --shadow-1: var(--sh-1);
  --shadow-2: var(--sh-3);
  --shadow-paper: var(--sh-paper);
  --gold: #d6a448;
  --gold-hi: #f0c66e;
}

/* dusk: the same sky after sunset */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --air: #0b0d24;
    --air-hi: #10132e;
    --air-lo: #07081a;
    --surface: #17163d;
    --surface-2: #1e1b4b;
    --surface-3: #27235a;
    --paper: #f4f0e6;
    --ink: #eef0ff;
    --ink-2: #bfc2e0;
    --ink-3: #9093b8;
    --ink-4: #5d6088;
    --line: rgba(220, 230, 255, 0.08);
    --line-2: rgba(220, 230, 255, 0.14);
    --line-3: rgba(220, 230, 255, 0.22);
    --accent: #a9b6ff;
    --accent-hi: #c4cdff;
    --accent-wash: rgba(138, 174, 255, 0.11);
    --accent-wash-2: rgba(138, 174, 255, 0.18);
    --on-accent: #0a1026;
    --hand-ink: #eef0ff;
    --red-pen: #ff8a7e;
    --bad: #ff8a7e;
    /* (night: readable as text on the dark sheets, 4.9:1 and more, and a white tick on them still 3:1) */
    --good: #2da571;
    --warn: #c27f22;
    --primary: #f1e2bf;
    --primary-hi: #f8ebcc;
    --primary-top: #fff4dc;
    --primary-glow: rgba(240, 210, 150, 0.35);
    --on-primary: #171a33;
    --sky-0: #070820;
    --sky-1: #0a0d28;
    --sky-2: #141740;
    --sky-3: #2c2e66;
    --sky-4: #3d3c78;
    --horizon: #56548c;
    --sunrise: #a9a6dc;
    --sunrise-2: #8d84c9;
    --rose: #7d64a8;
    --lilac: #5d58a8;
    --sun: rgba(232, 238, 255, 0.92);
    --cloud-lit: #969cd6;
    --cloud-mid: #3e447c;
    --cloud-shade: #202450;
    --cloud-warm: #6e6aa8;
    --mt-far: #23265a;
    --mt-near: #15183e;
    --mt-lit: #6a6fae;
    --mt-haze: #2a2a5c;
    --star-a: 0.38;
    --on-sky: #ffffff;
    --on-sky-2: rgba(230, 234, 255, 0.82);
    --glow-warm: rgba(240, 143, 116, 0.18);
    --glow-cool: rgba(100, 120, 230, 0.16);
    --glow-rose: rgba(200, 90, 138, 0.12);
    --leaf: 0, 0, 0;
    --leaf-a: 0;
    --leaf-paper-a: 0;
    --beam: rgba(255, 200, 170, 0.05);
    --sh-1: 0 0.5px 0 rgba(0, 0, 0, 0.4), 0 1px 3px -1px rgba(0, 0, 0, 0.5);
    --sh-2: 0 0.5px 0 rgba(0, 0, 0, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.5), 0 14px 32px -12px rgba(0, 0, 0, 0.6);
    --sh-3: 0 1px 0 rgba(0, 0, 0, 0.4), 0 4px 10px -4px rgba(0, 0, 0, 0.5), 0 28px 60px -22px rgba(0, 0, 0, 0.75);
    --sh-paper: 0 0.5px 0 rgba(0, 0, 0, 0.5), 0 3px 6px -2px rgba(0, 0, 0, 0.5), 0 22px 44px -18px rgba(0, 0, 0, 0.6), 0 60px 110px -40px rgba(10, 10, 60, 0.8);
    --sh-float: 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.5), 0 18px 42px -16px rgba(0, 0, 0, 0.7);
    --veil: rgba(26, 23, 60, 0.74);
    --veil-strong: rgba(28, 25, 66, 0.92);
    --veil-edge: rgba(200, 215, 255, 0.1);
    --scrim: rgba(2, 4, 16, 0.55);
    --hover: rgba(220, 230, 255, 0.07);
    --press: rgba(220, 230, 255, 0.11);
    --pill-dark: rgba(238, 242, 255, 0.95);
    --gold: #e9c77e;
    --gold-hi: #f7dd9f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --air: #0b0d24;
  --air-hi: #10132e;
  --air-lo: #07081a;
  --surface: #17163d;
  --surface-2: #1e1b4b;
  --surface-3: #27235a;
  --paper: #f4f0e6;
  --ink: #eef0ff;
  --ink-2: #bfc2e0;
  --ink-3: #9093b8;
  --ink-4: #5d6088;
  --line: rgba(220, 230, 255, 0.08);
  --line-2: rgba(220, 230, 255, 0.14);
  --line-3: rgba(220, 230, 255, 0.22);
  --accent: #a9b6ff;
  --accent-hi: #c4cdff;
  --accent-wash: rgba(138, 174, 255, 0.11);
  --accent-wash-2: rgba(138, 174, 255, 0.18);
  --on-accent: #0a1026;
  --hand-ink: #eef0ff;
  --red-pen: #ff8a7e;
  --bad: #ff8a7e;
  --good: #2da571;
  --warn: #c27f22;
  --primary: #f1e2bf;
  --primary-hi: #f8ebcc;
  --primary-top: #fff4dc;
  --primary-glow: rgba(240, 210, 150, 0.35);
  --on-primary: #171a33;
  --sky-0: #070820;
  --sky-1: #0a0d28;
  --sky-2: #141740;
  --sky-3: #2c2e66;
  --sky-4: #3d3c78;
  --horizon: #56548c;
  --sunrise: #a9a6dc;
  --sunrise-2: #8d84c9;
  --rose: #7d64a8;
  --lilac: #5d58a8;
  --sun: rgba(232, 238, 255, 0.92);
  --cloud-lit: #969cd6;
  --cloud-mid: #3e447c;
  --cloud-shade: #202450;
  --cloud-warm: #6e6aa8;
  --mt-far: #23265a;
  --mt-near: #15183e;
  --mt-lit: #6a6fae;
  --mt-haze: #2a2a5c;
  --star-a: 0.38;
  --on-sky: #ffffff;
  --on-sky-2: rgba(230, 234, 255, 0.82);
  --glow-warm: rgba(240, 143, 116, 0.18);
  --glow-cool: rgba(100, 120, 230, 0.16);
  --glow-rose: rgba(200, 90, 138, 0.12);
  --leaf: 0, 0, 0;
  --leaf-a: 0;
  --leaf-paper-a: 0;
  --beam: rgba(255, 200, 170, 0.05);
  --sh-1: 0 0.5px 0 rgba(0, 0, 0, 0.4), 0 1px 3px -1px rgba(0, 0, 0, 0.5);
  --sh-2: 0 0.5px 0 rgba(0, 0, 0, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.5), 0 14px 32px -12px rgba(0, 0, 0, 0.6);
  --sh-3: 0 1px 0 rgba(0, 0, 0, 0.4), 0 4px 10px -4px rgba(0, 0, 0, 0.5), 0 28px 60px -22px rgba(0, 0, 0, 0.75);
  --sh-paper: 0 0.5px 0 rgba(0, 0, 0, 0.5), 0 3px 6px -2px rgba(0, 0, 0, 0.5), 0 22px 44px -18px rgba(0, 0, 0, 0.6), 0 60px 110px -40px rgba(10, 10, 60, 0.8);
  --sh-float: 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.5), 0 18px 42px -16px rgba(0, 0, 0, 0.7);
  --veil: rgba(26, 23, 60, 0.74);
  --veil-strong: rgba(28, 25, 66, 0.92);
  --veil-edge: rgba(200, 215, 255, 0.1);
  --scrim: rgba(2, 4, 16, 0.55);
  --hover: rgba(220, 230, 255, 0.07);
  --press: rgba(220, 230, 255, 0.11);
  --pill-dark: rgba(238, 242, 255, 0.95);
  --gold: #e9c77e;
  --gold-hi: #f7dd9f;
}

/* ------------------------------------------------------------------ base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--air);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
}
img,
canvas,
svg,
video {
  display: block;
}
img,
video {
  max-width: 100%;
}
svg {
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button {
  -webkit-tap-highlight-color: transparent;
}
button svg,
a svg {
  flex-shrink: 0;
}
a {
  color: inherit;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-weight: inherit;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection {
  background: color-mix(in srgb, var(--hl) 75%, transparent);
  color: #191d29;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
svg.ico,
.btn .ico {
  width: 18px;
  height: 18px;
  flex: none;
}
kbd {
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 560;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line);
  color: var(--ink-2);
}
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.grow {
  flex: 1;
}
.muted {
  color: var(--ink-3);
}

/* paper grain over the whole room: one tile, no blending */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .32 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: 0.09;
}
:root[data-theme="dark"] .grain::after {
  opacity: 0.1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .grain::after {
    opacity: 0.1;
  }
}

/* ------------------------------------------------------------------ type */
.serif {
  font-family: var(--font-display);
}
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 0.96;
}
.display em,
.h-serif em {
  font-style: italic;
  font-weight: 330;
}
.h-serif {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--accent);
}
/* a small sun rising: the sunrise's colours in one dot */
.kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e6, var(--gold-hi) 45%, var(--gold) 100%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent), 0 0 12px color-mix(in srgb, var(--gold-hi) 70%, transparent);
}
.lede {
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 400;
}

/* ------------------------------------------------------------------ brand */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
  border-radius: 10px;
}
.logo-slot {
  display: inline-flex;
  align-items: center;
  height: 38px;
  width: 92px;
}
.logo-svg {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  overflow: visible;
}
.logo-slot.failed::before {
  content: "ditto";
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
}
.logo-svg .lg-m {
  visibility: hidden;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lg-draw var(--du) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--dl) forwards;
}
@keyframes lg-draw {
  from {
    visibility: visible;
    stroke-dashoffset: 1;
  }
  to {
    visibility: visible;
    stroke-dashoffset: 0;
  }
}
.logo-svg .lg-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: lg-plop 0.32s cubic-bezier(0.3, 1.8, 0.5, 1) var(--dl) forwards;
}
@keyframes lg-plop {
  to {
    transform: scale(1);
  }
}

/* ------------------------------------------------------------------ buttons */
.btn {
  --h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 560;
  font-size: calc(15.5px * var(--ts, 1));
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease), background var(--t-1), color var(--t-1), opacity var(--t-1);
}
.btn:active {
  transform: scale(0.975);
}
.btn .ico {
  width: 17px;
  height: 17px;
  transition: transform var(--t-2) var(--ease);
}
.btn:hover .ico {
  transform: translateX(2px);
}
/* primary: a bottle of ink with a gold rim; the arrow is the nib's glint */
.btn-brand,
.btn-paper,
.btn-ink {
  color: var(--on-primary);
  background:
    radial-gradient(120% 120% at 30% -30%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--primary-top), var(--primary) 70%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent),
    inset 0 1px 0 rgba(255, 240, 210, 0.28),
    0 2px 4px rgba(30, 20, 50, 0.18),
    0 14px 30px -12px rgba(30, 20, 60, 0.5),
    0 10px 40px -14px var(--primary-glow);
}
.btn-brand .ico,
.btn-paper .ico,
.btn-ink .ico {
  color: var(--gold-hi);
}
.btn-brand:hover,
.btn-paper:hover,
.btn-ink:hover {
  background:
    radial-gradient(120% 120% at 30% -30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--primary-top), var(--primary-hi) 70%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 80%, transparent),
    inset 0 1px 0 rgba(255, 240, 210, 0.32),
    0 3px 6px rgba(30, 20, 50, 0.18),
    0 18px 36px -12px rgba(30, 20, 60, 0.55),
    0 12px 50px -12px var(--primary-glow);
}
:root[data-theme="dark"] .btn-ink .ico {
  color: #8a5a12;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-ink .ico {
    color: #8a5a12;
  }
}
/* secondary: a slip of cloud */
.btn-glass,
.btn-quiet {
  color: var(--ink);
  background: var(--veil);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-1);
}
.btn-glass:hover,
.btn-quiet:hover {
  background: var(--veil-strong);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-2);
}
/* on the sky: a slip of pearl */
.btn-sky {
  color: var(--on-sky);
  background: color-mix(in srgb, var(--cloud-lit) 46%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cloud-lit) 70%, transparent), 0 10px 26px -16px rgba(60, 40, 90, 0.45);
}
.btn-sky:hover {
  background: color-mix(in srgb, var(--cloud-lit) 68%, transparent);
}
:root[data-theme="dark"] .btn-sky {
  background: rgba(14, 16, 44, 0.55);
  box-shadow: inset 0 0 0 1px rgba(220, 226, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-sky {
    background: rgba(14, 16, 44, 0.55);
    box-shadow: inset 0 0 0 1px rgba(220, 226, 255, 0.3);
  }
}
.btn-ghost {
  color: var(--ink-2);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn-ghost:hover {
  color: var(--ink);
  background: var(--hover);
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.btn-accent {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px -12px rgba(44, 62, 158, 0.6);
}
.btn-accent:hover {
  background: var(--accent-hi);
}
.btn-sm {
  --h: 38px;
  padding: 0 16px;
  font-size: calc(14.5px * var(--ts, 1));
}
.btn-xs {
  --h: 32px;
  padding: 0 12px;
  font-size: calc(13.5px * var(--ts, 1));
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  transform: none;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 560;
  text-decoration: none;
  color: var(--ink);
}
.link-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-2) var(--ease);
}
.link-arrow:hover svg {
  transform: translateX(3px);
}
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 540;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-1), color var(--t-1);
}
.link-btn:hover {
  text-decoration-color: currentColor;
}
.link-btn .ico,
.link-btn svg {
  width: 15px;
  height: 15px;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 0;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  flex: none;
  transition: background var(--t-1), color var(--t-1);
}
.icon-btn:hover,
.icon-btn[aria-expanded="true"] {
  background: var(--hover);
  color: var(--ink);
}
.icon-btn[aria-pressed="true"] {
  background: var(--press);
  color: var(--ink);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-1), color var(--t-1), transform var(--t-3) var(--ease);
}
.theme-toggle:hover {
  background: var(--hover);
  color: var(--ink);
}
.theme-toggle:active {
  transform: rotate(-30deg);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------------ fields */
.inp,
.select,
.search {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-s);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  font-size: 15px;
  transition: box-shadow var(--t-1), background var(--t-1);
}
textarea.inp {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.55;
  resize: vertical;
}
.inp::placeholder,
.search::placeholder,
textarea::placeholder {
  color: var(--ink-4);
}
.inp:hover,
.select:hover,
.search:hover {
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.inp:focus,
.select:focus,
.search:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-wash);
}
.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23767a85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.search {
  padding-left: 38px;
  border-radius: 999px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%23767a85' stroke-width='1.8'/%3E%3Cpath d='M15 15l4.5 4.5' stroke='%23767a85' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center;
  background-size: 17px;
}
.fld {
  display: grid;
  gap: 7px;
}
.fld + .fld {
  margin-top: 14px;
}
.fld-label,
.m-label {
  font-size: 13.5px;
  font-weight: 560;
  color: var(--ink-2);
}
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  margin-top: 4px;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ink) var(--p, 50%), var(--line-2) var(--p, 50%));
}
.range::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: var(--line-2);
}
.range::-moz-range-progress {
  height: 4px;
  border-radius: 99px;
  background: var(--ink);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(25, 29, 41, 0.1), 0 2px 6px rgba(70, 52, 30, 0.3);
  transition: transform var(--t-1);
}
.range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}
.range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(25, 29, 41, 0.1), 0 2px 6px rgba(70, 52, 30, 0.3);
}

/* chips: one choice of several */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 520;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-1), box-shadow var(--t-1), color var(--t-1);
}
.chip:hover {
  color: var(--ink);
  background: var(--hover);
}
.chip[aria-pressed="true"],
.chip.on {
  background: var(--ink);
  color: var(--air-hi);
  box-shadow: none;
}
.chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* ------------------------------------------------------------------ tiers */
.tier {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.tier.pro {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ------------------------------------------------------------------ modal */
.modal-back {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  animation: m-fade var(--t-2) var(--ease-soft);
}
@keyframes m-fade {
  from {
    opacity: 0;
  }
}
.modal {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 30px 30px 26px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-3);
  animation: m-rise 0.5s var(--ease);
  scrollbar-width: thin;
}
.modal.wide {
  width: min(940px, 100%);
}
@keyframes m-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}
.modal h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 380;
  line-height: 1.1;
  letter-spacing: -0.018em;
  padding-right: 40px;
}
.modal .m-sub {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.modal .m-actions {
  margin-top: 26px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.modal .m-actions .btn {
  --h: 42px;
  font-size: 15px;
}
.modal-x {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-1), color var(--t-1), transform var(--t-2) var(--ease);
}
.modal-x:hover {
  background: var(--surface-3);
  color: var(--ink);
  transform: rotate(90deg);
}
.modal-x svg {
  width: 15px;
  height: 15px;
}
.modal:focus {
  outline: none;
}
.modal h3 {
  font-size: calc(30px * var(--ts, 1));
}
.modal .m-sub {
  font-size: calc(15px * var(--ts, 1));
}
/* the page behind a dialog holds still; the scrollbar's room is kept so nothing shifts (dom.js) */
html.modal-open {
  overflow: hidden;
}
html.modal-open body {
  padding-right: var(--sb-gap, 0px);
}
/* on a phone a dialog is a sheet from the foot of the screen, its buttons side by side within reach of a thumb */
@media (max-width: 560px) {
  .modal-back {
    place-items: end stretch;
    padding: 24px 0 0;
  }
  .modal,
  .modal.wide {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 26px 20px max(20px, env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
    animation: m-sheet 0.46s var(--ease);
  }
  .modal h3 {
    font-size: calc(26px * var(--ts, 1));
  }
  .modal-x {
    top: 14px;
    right: 14px;
  }
  .modal .m-actions .btn {
    flex: 1 1 0;
    min-width: max-content;
  }
}
@keyframes m-sheet {
  from {
    transform: translateY(40%);
    opacity: 0.4;
  }
}
/* a button for what can't be undone */
.btn-danger {
  color: #fff;
  background: var(--bad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px -14px color-mix(in srgb, var(--bad) 80%, transparent);
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--bad) 88%, #000);
}
:root[data-theme="dark"] .btn-danger {
  color: #1a0b0a;
  background: #ff8a7e;
}
:root[data-theme="dark"] .btn-danger:hover {
  background: #ffa59b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-danger {
    color: #1a0b0a;
    background: #ff8a7e;
  }
  :root:not([data-theme="light"]) .btn-danger:hover {
    background: #ffa59b;
  }
}

/* ------------------------------------------------------------------ toasts */
.toast-root {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 120;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  max-width: min(92vw, 520px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--pill-dark);
  color: var(--air-hi);
  font-size: 14.5px;
  line-height: 1.45;
  box-shadow: var(--sh-3);
  animation: t-rise 0.45s var(--ease);
}
:root[data-theme="dark"] .toast {
  color: #13151b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast {
    color: #13151b;
  }
}
@keyframes t-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}
.toast.out {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}

/* ------------------------------------------------------------------ measures of a hand */
.dna {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.dna > div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dna .k {
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.dna .v {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 420;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ motion */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* thin, quiet scrollbars */
* {
  scrollbar-color: var(--line-3) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--line-3);
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* moving between pages (main.js, where supported): a fade through, not a cross-fade, so one page is never seen
   through the other (Home under a page as it opened) */
:root.vt-page::view-transition-old(root) {
  animation: vt-out 150ms cubic-bezier(0.4, 0, 1, 1) both;
}
:root.vt-page::view-transition-new(root) {
  animation: vt-in 280ms cubic-bezier(0.25, 0.8, 0.35, 1) 130ms both;
}
@keyframes vt-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
  }
}

/* a visible keyboard focus everywhere, at zero specificity so a component's own ring wins */
:where(a, button, select, summary, [role="button"], [role="slider"], [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* (a place the focus is moved to, not a control: a page's main, a heading arrived at) */
:is(main, h1, h2, h3)[tabindex="-1"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------ polish: crisp type */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
h1, h2, h3, .h2, .lf-h {
  text-wrap: balance;
  font-kerning: normal;
}
p, li, .lede {
  text-wrap: pretty;
}

/* ---- features review: toasts are opaque (their studio position lives in studio.css) ---- */
.toast { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* a line written as it plays (learn.js writeLine): the stroke the pen is on drawn as it goes, over the strokes already
   down */
.wl-wrap {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.wl-pen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ================================================================== accessibility (Make it yours, look.js)
   Each setting is an attribute on <html>, kept on this device as well as in the account, so it reaches every page:
   the app, the studio, the photo workspace, the learning flow, the landing and the sign-in pages. The rules here are
   broad on purpose (tokens first, then the few surfaces that don't use them). */

/* ---- stronger contrast: darker secondary text and placeholders, firmer hairlines (app.css adds the app's paper
   and bar); the night values follow the device's own theme as well as a chosen one */
:root[data-contrast="high"] {
  --ink-2: #2a2b44;
  --ink-3: #3f4058;
  --ink-4: #5d5e74;
  --line: rgba(26, 28, 51, 0.2);
  --line-2: rgba(26, 28, 51, 0.34);
  --line-3: rgba(26, 28, 51, 0.5);
  --on-sky-2: #2a2b44;
  --veil: rgba(255, 252, 248, 0.94);
  --veil-strong: #fffcf8;
  --veil-edge: rgba(26, 28, 51, 0.3);
}
:root[data-contrast="high"][data-theme="dark"] {
  --ink-2: #e6e8ff;
  --ink-3: #c9ccf0;
  --ink-4: #a6a9d2;
  --line: rgba(230, 232, 255, 0.24);
  --line-2: rgba(230, 232, 255, 0.4);
  --line-3: rgba(230, 232, 255, 0.56);
  --on-sky-2: #f0f2ff;
  --veil: rgba(22, 20, 54, 0.95);
  --veil-strong: #1c1942;
  --veil-edge: rgba(230, 232, 255, 0.36);
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]) {
    --ink-2: #e6e8ff;
    --ink-3: #c9ccf0;
    --ink-4: #a6a9d2;
    --line: rgba(230, 232, 255, 0.24);
    --line-2: rgba(230, 232, 255, 0.4);
    --line-3: rgba(230, 232, 255, 0.56);
    --on-sky-2: #f0f2ff;
    --veil: rgba(22, 20, 54, 0.95);
    --veil-strong: #1c1942;
    --veil-edge: rgba(230, 232, 255, 0.36);
  }
}

/* ---- calmer motion: nothing slides, fades or breathes (the device's own setting is followed too, above) */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}
:root[data-motion="reduced"]::view-transition-old(root),
:root[data-motion="reduced"]::view-transition-new(root),
:root.vt-page[data-motion="reduced"]::view-transition-old(root),
:root.vt-page[data-motion="reduced"]::view-transition-new(root) {
  animation: none;
}

/* ---- reduce transparency: frosted glass becomes solid paper, and nothing behind it shows through */
html:root[data-transparency="reduced"] {
  --veil: var(--surface);
  --veil-strong: var(--surface);
  --veil-edge: var(--line-2);
  --bar: var(--sheet, var(--surface));
  --bar-edge: var(--line-2);
  --fr-veil: var(--air-hi);
  --scrim: rgba(24, 20, 46, 0.62);
}
html:root[data-transparency="reduced"][data-theme="dark"] {
  --scrim: rgba(2, 4, 16, 0.78);
}
@media (prefers-color-scheme: dark) {
  html:root[data-transparency="reduced"]:not([data-theme="light"]) {
    --scrim: rgba(2, 4, 16, 0.78);
  }
}
:root[data-transparency="reduced"] *,
:root[data-transparency="reduced"] *::before,
:root[data-transparency="reduced"] *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* (the surfaces that mix their own see-through paper rather than use the tokens) */
:root[data-transparency="reduced"] :is(.btn-quiet, .btn-glass, .hm-way, .seg, .sec-head .sec-link, .pg-card, .pl-day, .app-empty, .nb-add, .wk-ring, .hm-quiet-card, .todo-done summary, .todo-group h3 span, .hand-card.hand-new, .lib-search, .studio .st-empty .source, .st-rail, .hand-tile .ht-meta .tier, .fr-chip, .learn-stage, .nav-scrim, .compare-table td:first-child, .compare-table th:first-child, .drop-veil) {
  background: var(--sheet, var(--surface)) !important;
}
:root[data-transparency="reduced"] .btn-sky {
  background: var(--surface);
}
:root[data-transparency="reduced"] :is(.ba-tag, .cam-tip, .cam-review, .bt-lb, .slip-toggle) {
  background-color: rgb(20 20 36 / 0.94) !important;
}
:root[data-transparency="reduced"] .slip-toggle {
  background-color: var(--surface) !important;
}

/* ---- bold text: every word a little heavier, the handwriting untouched (it's drawn, not typed) */
:root[data-bold="on"] body {
  -webkit-text-stroke: 0.028em currentColor;
  font-synthesis: weight;
}
:root[data-bold="on"] :is(input, textarea, select)::placeholder {
  -webkit-text-stroke: 0.02em currentColor;
}

/* ---- underline links: a link always looks like one, and a quiet text button gets an edge */
:root[data-links="underline"] a:not(.btn, .brand, .nb, .ab-tab, .at-tab, .ab-learning, .set-nav a, .nav-signup, [role="tab"], [role="menuitem"], [role="option"]),
:root[data-links="underline"] :is(.link-btn, .sec-link, .pg-back, .st-hide, .hero-trust, .ps-ai) {
  text-decoration-line: underline !important;
  text-decoration-thickness: max(1.5px, 0.08em) !important;
  text-underline-offset: 0.22em !important;
  text-decoration-color: currentColor !important;
}
:root[data-links="underline"] :is(.st-hide, .link-btn, .sec-link, .pg-back, .ha-photo-x, .toast-act) {
  box-shadow: inset 0 0 0 1.5px var(--line-3);
}

/* ---- bigger buttons: every control at least 44px high (and wide, for the ones that are only an icon) */
:root[data-targets="large"] :is(.btn, .chip, .seg button, .ws-seg button, .ha-chip, .hm-way, .dp-q, .dp-in, .st-hide, .sec-link, .pg-back, .toast-act, .ps-look, .lib-sort, .set-select, .ws-select, .select, .inp, .search, .fr-chip, .fr-x, .lf-x, .cam-x, .op-chip, .ph-ed, .ph-mini button, .insp-jump-b, .nav-menu, .billing button, .studio .st-insp .seg-ctl button, .studio .st-source .panel-head .tab, .studio .mc-go, .st-subject, .st-due, .st-back) {
  min-height: 44px;
}
:root[data-targets="large"] :is(.icon-btn, .modal-x, .theme-toggle, .ha-photo-x, .ph-z, .ph-peek) {
  min-width: 44px;
  min-height: 44px;
}
:root[data-targets="large"] .btn-sm,
:root[data-targets="large"] .btn-xs {
  --h: 44px;
}
:root[data-targets="large"] :is(.pm-item, .cp-item) {
  min-height: 48px;
}
:root[data-targets="large"] :is(.card-acts, .ha-chips, .ha-go, .pg-head-acts, .m-actions, .hm-ways) {
  gap: 12px;
}
:root[data-targets="large"] input:is([type="checkbox"], [type="radio"]):not(.switch, .ws-radio) {
  width: 22px;
  height: 22px;
}

/* ---- always show focus: a heavy ring on whatever has focus, by mouse or by keyboard, that nothing can hide */
:root[data-focus="always"] :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]):not(.ws-radio, .sr-only):focus {
  outline: 3px solid var(--ink) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--acc, var(--accent)) 45%, transparent) !important;
}
/* (a choice whose radio is hidden inside its card: the card wears the ring) */
:root[data-focus="always"] .ws-card:has(.ws-radio:focus) {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* ---- more space between lines: lines, words and letters spaced as the reading guidelines ask (WCAG 1.4.12) */
:root[data-spacing="wide"] body {
  letter-spacing: 0.025em;
  word-spacing: 0.09em;
}
:root[data-spacing="wide"] :is(p, li, dd, blockquote, .m-sub, textarea, .pr-snip, .nx-snip, .hh-pitch) {
  line-height: 1.8 !important;
}
:root[data-spacing="wide"] p + p {
  margin-top: 0.9em;
}

/* ---- differentiate without colour: what a colour says is said by a shape or a mark too */
:root[data-shapes="on"] .sj-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
:root[data-shapes="on"] .sj-dot[data-c="sky"] {
  border-radius: 2px;
}
:root[data-shapes="on"] .sj-dot[data-c="gold"] {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
:root[data-shapes="on"] .sj-dot[data-c="rose"] {
  border-radius: 1px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
:root[data-shapes="on"] .sj-dot[data-c="sage"] {
  border-radius: 0;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
:root[data-shapes="on"] .sj-dot[data-c="plum"] {
  border-radius: 0;
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 98%, 50% 76%, 20% 98%, 30% 60%, 0 38%, 38% 36%);
}
:root[data-shapes="on"] .sj-dot[data-c="coral"] {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}
:root[data-shapes="on"] .sj-dot[data-c="slate"] {
  background: transparent !important;
  box-shadow: inset 0 0 0 3px var(--sj-slate, #6b7385);
}
:root[data-shapes="on"] .due-chip[data-tone]::before {
  margin-right: 5px;
  font-weight: 800;
}
:root[data-shapes="on"] .due-chip[data-tone="over"]::before {
  content: "!";
}
:root[data-shapes="on"] .due-chip[data-tone="today"]::before {
  content: "●";
  font-size: 0.8em;
}
:root[data-shapes="on"] .due-chip[data-tone="done"]::before {
  content: "✓";
}
/* (a switch says On or Off, not only green or grey) */
:root[data-shapes="on"] input.switch {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 1.5px 10px;
  background-position: 13px 50%;
  color: rgba(255, 255, 255, 0.95);
}
:root[data-shapes="on"] input.switch:not(:checked) {
  background-image: radial-gradient(circle, transparent 3px, var(--ink-3) 3.2px, var(--ink-3) 4.6px, transparent 4.8px);
  background-size: 12px 12px;
  background-position: calc(100% - 7px) 50%;
}
/* (the avatar's dot: saving is a ring, a problem is a square) */
:root[data-shapes="on"] .ab-me[data-sync="offline"] .ab-sync,
:root[data-shapes="on"] .ab-me[data-sync="error"] .ab-sync {
  border-radius: 2px;
}
:root[data-shapes="on"] .ab-me[data-sync="syncing"] .ab-sync {
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--acc, var(--accent)), 0 0 0 2px var(--sheet, #fff);
}

/* the footer's column names: headings in their right place, small as they were (site.css lays the footer out) */
.footer .footer-h {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink);
}

/* at night the colour for what's wrong is a light coral (7.7:1 on the night's paper): what's written on it in white
   by day is written in a dark ink instead */
:root[data-theme="dark"] :is(.acct-del, .af-field-err, .lf-thumb[data-level="bad"] .lf-q) {
  color: #1a0b0a;
}
:root[data-theme="dark"] .acct-del:hover {
  background: #ffa59b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.acct-del, .af-field-err, .lf-thumb[data-level="bad"] .lf-q) {
    color: #1a0b0a;
  }
  :root:not([data-theme="light"]) .acct-del:hover {
    background: #ffa59b;
  }
}