/* ---------- the site's controls: one of each, everywhere (DESIGN.md, Controls) ----------
   Every page with a choice or a send loads this file (scripts/check-design.js fails the build
   if one doesn't), and no other stylesheet styles a checkbox or a send. Timing and color come
   from /tokens.css. Sha, Oct 7, 2026: a send is a black circle you slide along a gray line,
   and a choice is an empty circle that fills with ink, gradually, never instantly. */

/* ---- a choice: an empty circle that fills with ink from its edge inward when chosen ----
   Unchosen, it empties on the exhale. Its row is the control too, so every page lays it out alike:
     <label class="choice"><input type="checkbox" name="…" value="…">the words</label>
     <label class="choice-write"><input type="checkbox" aria-label="…"><input type="text" placeholder="other"></label>
   The whole row is the target (~43px tall, a thumb's width), the write-in's too: a tap on its
   line writes, a tap anywhere else on the row chooses.
   SIZE: three quarters of the words' size (12px beside body text).
   PLACE: centered on the words as the eye sees them, the middle between the baseline and the top
   of the tall letters (h, l, F). vertical-align:middle sets the circle's middle half an x-height
   up; `top` lifts it from there to half the cap height, plus .03em for the tall letters rising
   just past the capitals. Font units, so it holds in any face at any size. (Sha, Oct 7, 2026: the
   20px circle on the line's middle was too big; then the 12px circle on the x-height's middle
   "CLEARLY" sat low. Measured on iOS Safari, it now lands within a device pixel of the words'
   middle.) A circle never parts from its words; words long enough to need a second line go in a
   <span>, and hang clear of the circle. Pages place rows (columns, gaps), never style them;
   --choice-pad is the row's top padding, for a page that sets rows flush under a question. */
:root{--choice-pad:.55rem;}
.choice,.choice-write{display:block; white-space:nowrap; color:var(--ink-2); cursor:pointer; -webkit-tap-highlight-color:transparent;}
.choice{padding:var(--choice-pad) 0 var(--choice-pad) 1.45em; text-indent:-1.45em;}
.choice > *{text-indent:0;}
.choice > span{white-space:normal;}
.choice-write{padding:.3rem 0;}
input[type=checkbox]{appearance:none; -webkit-appearance:none; display:inline-block; vertical-align:middle; font:inherit;
  position:relative; top:-.12em; top:calc(.5ex - .5cap - .03em);   /* the first for a browser without the cap unit */
  width:.75em; height:.75em; margin:0 .7em 0 0; padding:0; border:1px solid var(--soft); border-radius:50%;
  background:transparent; cursor:pointer; box-shadow:inset 0 0 0 0 var(--ink);
  transition:box-shadow var(--t-answer) var(--ease-exhale), border-color var(--t-answer) var(--ease-exhale);}
input[type=checkbox]:checked{border-color:var(--ink); box-shadow:inset 0 0 0 calc(.375em - .75px) var(--ink);   /* just past the inner radius: full as the answer ends */
  transition:box-shadow var(--answer), border-color var(--answer);}
input[type=checkbox]:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
@media (hover:hover){ .choice:hover > input[type=checkbox]:not(:checked), .choice-write:hover > input[type=checkbox]:not(:checked){border-color:var(--ink);
  transition:box-shadow var(--t-answer) var(--ease-exhale), border-color var(--answer-hover);} }   /* the fill still empties on the exhale under the cursor */
/* the write-in line: serif words on a hairline, in place of a word, ending where the fields above
   it end. controls.css loads after project.css (check-design.js), so this beats the boxed field */
.choice-write input[type=text]{display:inline-block; vertical-align:baseline; width:calc(100% - 1.45em); height:auto; cursor:text;
  font:inherit; color:var(--ink-2); background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:.35rem 0;
  transition:border-color var(--answer);}
.choice-write input[type=text]:focus{border-bottom-color:var(--ink); outline:none;}

/* ---- what's missing: one line directly under the field it's about (DESIGN.md, Forms) ----
     <p class="err" id="err-…" role="alert" hidden>we'll need your name.</p>
   It unfolds through unfurl.js, so it has no vertical padding. */
.err{font-family:var(--serif); font-size:var(--type-small, .875rem); line-height:1.5; color:var(--ink);
  margin:var(--s-field, .4rem) 0 0; padding-left:.7rem; border-left:2px solid var(--ink);}

/* ---- a send: slide the circle to the end of the line ---- */
.slide{position:relative; width:min(100%, 16rem); -webkit-tap-highlight-color:transparent;}
.slide-track{position:relative; height:44px; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none;}   /* 44px: a thumb's width; a vertical swipe still scrolls the page */
.slide.dragging .slide-track{cursor:grabbing;}
.slide.sent .slide-track{cursor:default;}
.slide-line,.slide-ink{position:absolute; left:0; right:0; top:50%; height:1px; margin-top:-.5px; pointer-events:none;}
.slide-line{background:var(--faint);}   /* gray enough to read as a path */
.slide-ink{background:var(--ink); opacity:0;}   /* the line darkens to ink as the circle travels (slide.js) */
.slide-dot{position:absolute; left:0; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%;
  background:var(--ink); pointer-events:none; will-change:transform;}
/* the word sits just under the line's right end: the tops of its capitals 16px under the line,
   7px under the circle's lowest point, so the circle arriving at the end rests just above it
   without crowding it (Sha, Oct 7: 36px under the line, it read as unrelated). The negative
   right margin takes back the letter-spacing after the last letter, so the word ends where the
   line ends */
.slide-word{display:block; margin:-8.5px -.14em 0 0; text-align:right; font-family:var(--label); font-weight:400; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.14em; line-height:1; color:var(--soft); pointer-events:none;}
.slide.sent .slide-word{color:var(--ink); transition:color var(--answer);}
/* for a keyboard or a screen reader the slide is a real button (slide.js adds it), hidden from the eye;
   when it has focus, the slide shows the ring */
.slide-btn{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.slide-btn:focus-visible + .slide-track{outline:2px solid var(--ink); outline-offset:4px;}

/* high contrast: box-shadow and backgrounds are dropped, so the marks are drawn in system colors */
@media (forced-colors:active){
  input[type=checkbox]:checked{forced-color-adjust:none; background:CanvasText; border-color:CanvasText;}
  .slide-dot,.slide-ink{forced-color-adjust:none; background:CanvasText;}
  .slide-line{forced-color-adjust:none; background:GrayText;}
}