/* 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. */

/* 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; }