/* Text size (SPEC 2, "Text size"; CONVENTIONS 17, "Large text"): the three buttons (partials/textsize) and the
   sheet "Aa" opens (partials/aa). The root size of each choice is in partials/textsize-root.html, in the page itself.

   A file of its own, like signin.css: the service worker answers /static/ from its cache first, so after a deploy a
   browser that has the app shell would draw these new buttons with yesterday's base.css once; a new file is fetched
   fresh.

   Sized in px, not rem: the buttons stay the same size and in the same place while the page around them changes, so
   a finger that just chose Huge is still on Huge, and the three fit a 320px phone at every size. Each "A" is drawn
   at its size's share of the others (1, 1.25, 1.6). The words are 19px bold, more than the 17px floor. */

.ts-pick { margin: 0; }
.ts-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.ts-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  min-width: 0; min-height: 104px; margin: 0; padding: 12px 4px 12px; font: 700 19px/1.15 var(--sans); letter-spacing: 0;
  color: var(--ink); background: #fff; border: 2px solid var(--brown-2); border-radius: 14px; cursor: pointer;
  overflow-wrap: normal; word-break: normal; -webkit-tap-highlight-color: transparent; }
.ts-opt:hover { border-color: var(--pine); background: var(--tint-2); }
.ts-a { display: block; font: 700 24px/1 var(--sans); }
.ts-opt-large .ts-a { font-size: 30px; }
.ts-opt-huge .ts-a { font-size: 38px; }
.ts-word { display: block; font-size: 19px; line-height: 1.15; white-space: nowrap; }
/* The size the page shows: filled in the brand color with white words and a check in the corner (not color alone). */
.ts-opt[aria-pressed="true"] { color: #fff; background: var(--pine); border-color: var(--pine); box-shadow: 0 0 0 3px var(--select); }
.ts-opt[aria-pressed="true"]:hover { background: var(--pine-d); border-color: var(--pine-d); }
.ts-check { position: absolute; top: 6px; right: 6px; display: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--pine); }
.ts-check svg.ico { display: block; width: 16px; height: 16px; margin: 3px; stroke-width: 3; vertical-align: 0; }
.ts-opt[aria-pressed="true"] .ts-check { display: block; }

/* "Aa" in a top bar. */
.ts-aa { font: 700 min(1.125rem, 7.5vw)/1 var(--sans); }

/* The sheet: the three buttons and Done at the bottom of the screen, over the page, so the page behind shows the
   size as it changes. A modal <dialog> (textsize.js opens it): in the top layer, so no top bar clips or moves it. */
.ts-sheet { position: fixed; inset: auto 0 0 0; box-sizing: border-box; width: 100%; max-width: 480px; max-height: 100%; margin: 0 auto;
  padding: 18px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: auto; color: var(--ink); background: #fff; border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(40, 30, 20, .18);
  font: 400 19px/1.3 var(--sans); text-align: left; }
.ts-sheet:not([open]) { display: none; }
.ts-sheet::backdrop { background: rgba(43, 35, 32, .2); }
.ts-sheet-h { margin: 0 0 14px; font: 700 24px/1.2 var(--sans); color: var(--ink); letter-spacing: 0; }
.ts-sheet form[method="dialog"] { margin: 12px 0 0; }
.ts-done { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin: 0; padding: 8px 16px;
  font: 700 21px/1.15 var(--sans); color: var(--pine); background: #fff; border: 2px solid var(--pine); border-radius: 14px; cursor: pointer; }
.ts-done:hover { background: var(--tint); }
/* Without scripts the sheet never opens; More has the same buttons. */

/* A resident's or family member's sheet also has Screen style under the sizes (partials/aa, partials/style; Eric
   2026-10-25): More's two buttons, Modern and High contrast. The sizes and the style buttons scroll inside the sheet
   when the screen is too short for them (a 320x568 phone at its toolbars, a phone on its side) and Done stays in view
   under them. The scroll box reaches 6px past the buttons on every side and gives the 6px back, so a pressed button's
   ring and a focus ring are never cut while every piece keeps its place. */
.ts-sheet-style[open] { display: flex; flex-direction: column; overflow: hidden; }
.ts-sheet-body { flex: 1 1 auto; min-height: 0; margin: -6px; padding: 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.ts-sheet-style form[method="dialog"] { flex: none; }
.ts-sheet-h.ts-style-h { margin: 20px 0 14px; }
/* The style buttons in px, like the size buttons above them, so the sheet is the same size and its pieces in the
   same places at Normal, Large and Huge and in both styles (only colors change). By the dialog's id: More's rem sizes
   (base.css, contrast.css at every text size) never reach the sheet. Each is 68px tall, its name 19px bold over its
   hint at 17px, with the size buttons' 2px border, the one this page draws in outlined 3px (its 2px border and 1px
   inside it) in each style's colors. */
#textsize-sheet .style-form { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#textsize-sheet .stylechoices { display: grid; gap: 8px; }
#textsize-sheet .stylechoice { min-height: 68px; margin: 0; padding: 8px 14px; gap: 12px; border: 2px solid var(--brown-2); border-radius: 14px;
  font: 400 19px/1.2 var(--sans); letter-spacing: 0; }
#textsize-sheet .stylechoice[aria-pressed="true"] { border-color: var(--pine); }
#textsize-sheet .stylechoice[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--pine); }
#textsize-sheet .stylechoice .title { font-size: 19px; font-weight: 700; line-height: 1.2; }
#textsize-sheet .stylechoice .sub { display: inline-block; font-size: 17px; line-height: 1.2; text-wrap: balance; }
#textsize-sheet .stylemark { width: 28px; height: 28px; border-width: 2px; }

/* On the sign in page, under Sign in: the same three buttons, quieter, so Sign in stays the one solid button. The
   chosen size is a tinted button with a thick brand border and the check. */
.signin-ts { margin: 2rem 0 0; }
.signin-ts .ts-opt { min-height: 84px; }
.signin-ts .ts-opt[aria-pressed="true"] { color: var(--ink); background: var(--tint); border: 3px solid var(--pine); box-shadow: none; }
.signin-ts .ts-opt[aria-pressed="true"]:hover { background: var(--tint); border-color: var(--pine-d); }
.signin-ts .ts-check { background: var(--pine); color: #fff; }