/* ============================================================
   CANIPUS · TYPE · the one file every page reads (3 Sep 2026).

   Chosen: C, The Dial, with A (The Reader) as Standard and B (The Clinic)
   as Large. Every size on canipus.com comes from a step named here. No page
   prints a pixel number of its own. The floor is 11 px: nothing on the site
   is smaller, at any step, on any screen. Sizes are in rem, so a phone whose
   owner has turned its text up gets Canipus larger too.

   The steps          label · label2 · small · chip · body · lead · lead2 ·
                      h3 · h2 · h2b · h1 · title · display
   The dial           html[data-type="compact" | "standard" | "large"]
                      (absent = standard). Kept per device in localStorage
                      'canipus.type'; the head snippet on every page sets it
                      before the first paint.
   The tiers          phone under 700 · tablet 700 to 999 · laptop 1000 up
   ============================================================ */

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

:root{
  /* STANDARD · A · The Reader */
  --t-label:   0.6875rem;   /* 11 · the mono labels, section names, chips' small print */
  --t-label2:  0.75rem;     /* 12 · a label with a little more weight */
  --t-small:   0.8125rem;   /* 13 · secondary text */
  --t-chip:    0.875rem;    /* 14 · chips, buttons' small print, lists */
  --t-body:    1rem;        /* 16 · body */
  --t-lead:    1.0625rem;   /* 17 · captions, lead lines */
  --t-lead2:   1.125rem;    /* 18 · a line that leads a card */
  --t-h3:      1.375rem;    /* 22 · a card's number, a sheet's title */
  --t-h2:      1.5rem;      /* 24 · a section title */
  --t-h2b:     1.75rem;     /* 28 · a bigger one */
  --t-h1:      2rem;        /* 32 · a page title on a phone */
  --t-title:   2.125rem;    /* 34 · the stall's name on a phone */
  --t-display: 4rem;        /* 64 · the one very large number */

  --ls:  0.12em;            /* the mono labels' spacing */
  --ls2: 0.08em;            /* tighter, for labels that must fit */
  --ls3: 0.16em;            /* the widest, for the brand and section names */

  --lh:  1.55;              /* body line height */
  --tap: 44px;              /* the least height of anything a thumb taps */
}

html[data-type="compact"]{
  --t-label:   0.6875rem;   /* 11 · the floor holds */
  --t-label2:  0.71875rem;  /* 11.5 */
  --t-small:   0.75rem;     /* 12 */
  --t-chip:    0.8125rem;   /* 13 */
  --t-body:    0.9375rem;   /* 15 */
  --t-lead:    1rem;        /* 16 */
  --t-lead2:   1.0625rem;   /* 17 */
  --t-h3:      1.25rem;     /* 20 */
  --t-h2:      1.375rem;    /* 22 */
  --t-h2b:     1.625rem;    /* 26 */
  --t-h1:      1.75rem;     /* 28 */
  --t-title:   1.875rem;    /* 30 */
  --t-display: 3.5rem;      /* 56 */
  --lh: 1.5;
}

html[data-type="large"]{
  /* LARGE · B · The Clinic */
  --t-label:   0.75rem;     /* 12 */
  --t-label2:  0.8125rem;   /* 13 */
  --t-small:   0.875rem;    /* 14 */
  --t-chip:    0.9375rem;   /* 15 */
  --t-body:    1.0625rem;   /* 17 */
  --t-lead:    1.125rem;    /* 18 */
  --t-lead2:   1.1875rem;   /* 19 */
  --t-h3:      1.5rem;      /* 24 */
  --t-h2:      1.625rem;    /* 26 */
  --t-h2b:     1.875rem;    /* 30 */
  --t-h1:      2.125rem;    /* 34 */
  --t-title:   2.25rem;     /* 36 */
  --t-display: 4.25rem;     /* 68 */
  --ls:  0.1em;
  --ls2: 0.06em;
  --ls3: 0.14em;
  --lh:  1.6;
  --tap: 48px;
}

/* the laptop tier: titles grow, and Large's body takes one more step */
@media (min-width: 1000px){
  :root{ --t-h1: 2.5rem; --t-title: 2.75rem; }                                  /* 40 · 44 */
  html[data-type="compact"]{ --t-h1: 2.25rem; --t-title: 2.5rem; }              /* 36 · 40 */
  html[data-type="large"]{ --t-h1: 2.75rem; --t-title: 3rem; --t-body: 1.125rem; --t-lead: 1.1875rem; }   /* 44 · 48 · body 18 */
}

/* the phone tier: the safe areas are the page's edges, never the glass's */
@media (max-width: 699px){
  :root{ --edge-l: env(safe-area-inset-left, 0px); --edge-r: env(safe-area-inset-right, 0px); }
}

/* the dial itself, drawn the same on every page that carries it */
.type-dial{ display:inline-flex; gap:4px; padding:4px; border-radius:100px; background:rgba(7,20,38,0.6); box-shadow:inset 0 0 0 1px rgba(153,189,208,0.26); max-width:100%; }
.type-dial button{ appearance:none; border:0; cursor:pointer; min-height:36px; padding:0 14px; border-radius:100px; background:none; color:#99BDD0; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:var(--t-label); letter-spacing:var(--ls2); display:inline-flex; align-items:center; gap:7px; }
.type-dial button i{ font-style:normal; font-family:'Jost', system-ui, sans-serif; font-weight:600; line-height:1; }
.type-dial button:nth-child(1) i{ font-size:0.8125rem; } .type-dial button:nth-child(2) i{ font-size:1rem; } .type-dial button:nth-child(3) i{ font-size:1.1875rem; }
.type-dial button.on{ background:#40C9BE; color:#071C33; font-weight:500; }
.type-dial button:focus-visible{ outline:2px solid #8FE6DE; outline-offset:2px; }
@media (max-width:420px){ .type-dial{ display:flex; width:100%; } .type-dial button{ flex:1; justify-content:center; padding:0 6px; gap:5px; } }
@media (max-width:360px){ .type-dial button span{ display:none; } .type-dial button{ min-height:40px; } .type-dial button i{ font-size:1rem; } .type-dial button:nth-child(1) i{ font-size:0.875rem; } .type-dial button:nth-child(3) i{ font-size:1.25rem; } }