/* Regasis Plainspoken: tokens and component classes. v1.0 (2026-10-15)
   Fonts (load in <head>; confirm availability):
   <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,400&family=Atkinson+Hyperlegible+Next:wght@400;500;600;700;800&display=swap" rel="stylesheet">
*/
:root{
  /* brand colour */
  --ps-oat:#F5EFE4;            /* canvas */
  --ps-ink-navy:#091930;       /* text, primary button */
  --ps-dusk-indigo:#3132B0;    /* plain-language voice, key headings, links, focus */
  --ps-sorghum:#F2C46B;        /* highlighter: exactly one phrase per screen */
  --ps-rooibos:#A6452B;        /* "change this" marks and margin annotations only */
  --ps-leaf-neon:#38FA0E;      /* fill behind navy text for the single "you're clear" moment */
  /* derived warm neutrals */
  --ps-oat-raised:#FBF8F1;     /* cards, chips */
  --ps-oat-line:#DDD2BC;       /* hairlines, card borders */
  --ps-oat-line-strong:#CFC3AA;/* chip borders */
  --ps-original-grey:#565B6D;  /* original legal text, metadata (5.9:1 on Oat) */
  /* type */
  --ps-font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --ps-font-sans:'Atkinson Hyperlegible Next',Verdana,Arial,sans-serif;
  /* shape */
  --ps-radius-card:14px;
  --ps-radius-button:10px;
  --ps-radius-chip:6px;
  /* layout */
  --ps-column:760px;
  --ps-space-1:4px; --ps-space-2:8px; --ps-space-3:12px; --ps-space-4:16px;
  --ps-space-5:24px; --ps-space-6:32px; --ps-space-7:48px; --ps-space-8:64px;
}

/* base */
.ps-page{background:var(--ps-oat);color:var(--ps-ink-navy);font-family:var(--ps-font-sans);font-size:16px;line-height:1.5;margin:0}
.ps-column{width:100%;max-width:var(--ps-column);margin:0 auto;position:relative}
.ps-serif{font-family:var(--ps-font-serif)}
:focus-visible{outline:3px solid var(--ps-dusk-indigo);outline-offset:2px}

/* type roles */
.ps-hero-title{font-family:var(--ps-font-serif);font-weight:500;font-size:48px;line-height:1.1;letter-spacing:-.02em;margin:0}
.ps-lead{font-family:var(--ps-font-serif);font-weight:500;font-size:42px;line-height:1.1;letter-spacing:-.02em;margin:0}
.ps-plain{font-family:var(--ps-font-serif);font-weight:400;font-size:28px;line-height:1.28;color:var(--ps-dusk-indigo);margin:0}
.ps-plain--item{font-size:26px;line-height:1.25}
.ps-plain--sub{font-size:28px;line-height:1.35}
.ps-plain em,.ps-ph{font-style:italic}
.ps-label{font-weight:700;font-size:14.5px;line-height:1.3;color:var(--ps-dusk-indigo);margin:0 0 4px}
.ps-original{font-size:15px;line-height:1.55;color:var(--ps-original-grey);margin-top:8px;padding-top:8px;border-top:1px solid var(--ps-oat-line)}
.ps-original strong{font-weight:700}
.ps-quiet{font-size:13.5px;line-height:1.5;color:var(--ps-original-grey)}
.ps-quiet a{color:var(--ps-dusk-indigo);text-decoration:underline;text-underline-offset:3px}

/* citation chip */
.ps-chip{display:inline-block;border:1px solid var(--ps-oat-line-strong);border-radius:var(--ps-radius-chip);padding:1px 7px;font-size:13px;line-height:1.5;color:var(--ps-original-grey);background:var(--ps-oat-raised);white-space:nowrap}

/* highlight: ONE phrase per screen */
.ps-hl{background:var(--ps-sorghum);color:var(--ps-ink-navy);padding:0 .12em;border-radius:4px 9px 5px 8px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* you're clear: ONE moment per answer screen */
.ps-clear{background:var(--ps-leaf-neon);color:var(--ps-ink-navy);padding:2px 10px;border-radius:6px;font-weight:600}

/* hand-drawn underline (Rooibos). Markup: <span class="ps-ul">text<svg ...></svg></span> */
.ps-ul{position:relative;display:inline-block}
.ps-ul svg{position:absolute;left:0;bottom:-6px;width:100%;height:8px;overflow:visible}

/* margin note (right margin on wide screens; inline on narrow) */
.ps-note{color:var(--ps-rooibos);font-size:15px;line-height:1.4}
@media (min-width:1200px){.ps-note--margin{position:absolute;left:calc(100% + 38px);width:230px}}

/* cards and buttons */
.ps-card{background:var(--ps-oat-raised);border:1px solid var(--ps-oat-line);border-radius:var(--ps-radius-card);padding:24px 28px}
.ps-btn{display:inline-block;font-family:var(--ps-font-sans);font-weight:600;font-size:16px;line-height:1.2;border-radius:var(--ps-radius-button);padding:12px 22px;text-decoration:none;cursor:pointer;border:1.5px solid var(--ps-ink-navy)}
.ps-btn--primary{background:var(--ps-ink-navy);color:var(--ps-oat)}
.ps-btn--secondary{background:transparent;color:var(--ps-ink-navy)}
.ps-link{color:var(--ps-dusk-indigo);font-weight:600;text-decoration:underline;text-underline-offset:5px}
.ps-link:hover{text-decoration-thickness:2.5px}
@media (max-width:600px){.ps-original{font-size:13px}.ps-chip{font-size:12.5px}}

/* instrument rows */
.ps-rows{border-top:1px solid var(--ps-oat-line)}
.ps-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--ps-oat-line)}
.ps-row b{font-weight:600;font-size:15.5px}

/* tier row */
.ps-tier-word{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--ps-dusk-indigo)}
.ps-tier-sentence{font-size:16.5px;line-height:1.5}
.ps-tier-basis{font-size:14px;color:var(--ps-original-grey)}

/* checklist: real checkboxes */
.ps-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.ps-check input{width:22px;height:22px;margin:4px 0 0;accent-color:var(--ps-dusk-indigo);flex-shrink:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}