/* Dialed · Profile (me.html). Page-specific layout only, loaded after site.css.
   The home board's size tiles expanded into a form: the sizes on a lit tile first, sections under heavy rules,
   and the viewer's own line on the board mirrored in a tint block beside the form. Below 820 the side column
   docks as a bottom sheet on a lit tile (page-me.js sets the class) carrying the line, Save and the status.
   Every color is a token. */

/* ---------------------------------------------------------------- layout: the form and the line on the board */
.me { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s6) var(--s8); align-items: start; }
.me-form { min-width: 0; }
.me-side { position: sticky; top: var(--s5); min-width: 0; display: grid; gap: var(--s4); }

/* ---------------------------------------------------------------- sections: a heavy rule, the legend as a board heading, one line of why */
.me-sec { border-top: 2px solid var(--fg); padding-top: var(--s4); min-width: 0; }
.me-sec + .me-sec { margin-top: var(--s7); }
.me-sec > legend { float: left; width: 100%; margin: 0 0 var(--s3); padding: 0; }
.me-sec > legend + * { clear: both; }
.me-sec > legend h2, .me-sec > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); font-size: var(--t3); font-family: var(--font-semi); text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.me-sec > h2 { margin: 0 0 var(--s3); }
.me-sec > legend h2:focus-visible { outline-offset: 6px; }
.me-n { font-size: var(--t-1); font-weight: 600; font-family: var(--font-semi); text-transform: none; letter-spacing: 0; color: var(--fg-3); }
.me-why { color: var(--fg-2); max-width: 60ch; margin-bottom: var(--s5); }
.me-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.me-sec .hint { font-size: var(--t-1); color: var(--fg-3); }
.me-sec .err { font-size: var(--t-1); font-weight: 600; color: var(--red); }
.me-sec .err[hidden] { display: none; }
.me-sec > .live { margin-top: var(--s3); }
.me .field.is-off > label { color: var(--fg-3); }

/* ---------------------------------------------------------------- the sizes: the home board's tiles, on a lit tile */
.me-sec.tile { padding: var(--s4) var(--s5) var(--s5); border: 1px solid var(--rule); border-top: 2px solid var(--fg); border-radius: var(--radius); }
.me-stiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.me-szc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.me-szc.wide { grid-column: span 3; }
.me .stile { width: auto; min-width: 0; }
.me .stile select { appearance: none; border: 0; background-color: var(--bg); padding: 0 26px 0 0; margin: 0; width: 100%; min-width: 0; min-height: 30px; font-weight: 800; font-size: var(--t3); font-family: var(--font-narrow); line-height: 1.1; color: var(--fg); outline: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(-45deg, transparent 50%, var(--fg-2) 50%); background-position: right 8px center, right 2px center; background-size: 6px 6px; background-repeat: no-repeat; }
.me .stile select.is-empty { color: var(--fg-3); font-weight: 700; }
.me .stile select:disabled { cursor: not-allowed; }
.me-szc.error .stile { border-color: var(--red); }
.me-fit { margin-top: var(--s5); max-width: 24rem; }

/* ---------------------------------------------------------------- pills with a status word; disabled ones read as not yet */
.me .pill span { padding: 9px 14px; }
.me .pill small { margin-left: 8px; font-size: var(--t-2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.me .pill input:checked + span small { color: inherit; opacity: .78; }
/* a disabled pill stays legible: dashed boundary and muted ink instead of a fade, so "season two" can still be read */
.me .pill input:disabled + span { opacity: 1; border-style: dashed; color: var(--fg-3); }
.me .pill input:disabled + span small { color: var(--fg-3); }
/* the one live sport is a status, not a toggle: the stored value stays checked, and the pill wears a status tab's inset ring with no fill */
.me .pill input:checked:disabled + span { border-style: solid; border-color: var(--fg); background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.me .pill input:checked:disabled + span small { color: var(--green); opacity: 1; }
.me .pill input:checked:disabled { cursor: default; }
.me-brands { display: grid; gap: var(--s6); }
.me-bgroup .pills { margin-bottom: var(--s3); }

/* ---------------------------------------------------------------- checkbox rows with their reason */
.me-checks { list-style: none; margin: 0; padding: 0; }
.me-checks li { margin: 0; padding: var(--s1) 0 var(--s3); border-bottom: 1px solid var(--rule); }
.me-checks li:last-child { border-bottom: 0; }
.me-checks .hint { margin: -2px 0 0 30px; max-width: 60ch; }
/* the address row: the key and the saved address (or that there is none yet), then the way to put one on file */
.me-mail .me-mail-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s3); row-gap: 2px; min-height: 44px; margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--fg); }
.me-mail .me-mail-v { min-width: 0; overflow-wrap: anywhere; }
.me-mail .me-mail-v.is-empty { color: var(--fg-3); font-weight: 500; }
.me-mail .hint { margin-left: 0; }
.me .check.is-off { color: var(--fg-3); cursor: not-allowed; }
.me .check input:disabled { cursor: not-allowed; }
.me-alert-fields { margin-top: var(--s5); }
.me-renew { margin-top: var(--s3); font-weight: 600; color: var(--fg); max-width: 60ch; }

/* ---------------------------------------------------------------- the line on the board: a tint block, like the home totals */
.me-board { --rule: color-mix(in srgb, var(--on-tint) 26%, transparent); padding: var(--s4) var(--s5) var(--s5); border-radius: var(--radius); }
.me-board .bh { margin-bottom: var(--s2); }
.me-line { border-top: 2px solid var(--on-tint); }
.me-line > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 9px 0 8px; border-bottom: 1px solid var(--rule); min-width: 0; }
.me-line dt { font-size: var(--t-2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); flex: none; line-height: 1.2; }
.me-line dd { margin: 0; font-size: var(--t2); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.me-line dd.is-empty { color: var(--fg-3); font-weight: 600; font-family: var(--font-semi); font-size: var(--t-1); letter-spacing: 0; }
.me-board p { margin-top: var(--s3); font-size: var(--t-1); line-height: 1.45; }
.me-status { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--on-tint); }
/* the one-line summary of the filled lines; shown only when the side column is the sheet */
.me-board .me-sum { display: none; margin: 0; font-weight: 800; font-family: var(--font-semi); font-size: var(--t2); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; color: var(--figure); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-board .me-sum.is-empty { color: var(--fg-3); font-weight: 600; font-family: var(--font-semi); font-size: var(--t-1); line-height: 1.3; }
.me-save { width: 100%; }
.me-side .note { margin-top: calc(-1 * var(--s2)); }

/* ---------------------------------------------------------------- breakpoints */
@media (max-width: 1100px) {
  .me { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: var(--s6); }
}
@media (max-width: 820px) {
  .me { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .me-sec + .me-sec { margin-top: var(--s6); }
  /* the side column docks as a bottom sheet, full-bleed under a heavy rule like the home strip. It is the last item in the
     form, so it holds the viewport bottom while the form scrolls and rests in flow after Membership: nothing is covered at the end. */
  .me-side { position: sticky; top: auto; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter); border-top: 2px solid var(--fg); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h b" "s s"; align-items: center; gap: 0 var(--s3); }
  .me-board { grid-area: h; background: transparent; padding: 0; min-width: 0; }
  .me-board .bh { font-size: var(--t-2); letter-spacing: .12em; line-height: 1.2; margin: 0 0 2px; }
  .me-board .me-sum { display: block; }
  .me-line, .me-board #b-p, .me-status, .me-side .note { display: none; }
  .me-save { grid-area: b; width: auto; justify-self: end; }
  .me-side .live { grid-area: s; min-height: 0; margin: 0; }
  .me-side .live:not(:empty) { margin-top: var(--s2); }
  /* a focused field scrolls in above the sheet; page-me.js publishes the sheet height */
  html { scroll-padding-bottom: calc(var(--me-sheet-h, 0px) + var(--s4)); }
}
@media (max-width: 560px) {
  .me-fields { grid-template-columns: minmax(0, 1fr); }
  .me-stiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .me-szc.wide { grid-column: auto; }
  .me-sec.tile { padding: var(--s4); }
  .me-sec > legend h2, .me-sec > h2 { font-size: var(--t2); }
  .me .stile select { font-size: var(--t2); min-height: 26px; }
}

/* ===== motion (2 Nov 2026). Tokens from site.css :root; every rule has its reduced-motion path below. ===== */
/* the size tiles acknowledge focus (the border takes the primary, like an input) and a committed change (a quiet fill that fades back) */
.me .stile { transition: border-color var(--dur-1) ease-out, background-color var(--dur-1) ease-out; }
.me .stile:focus-within { border-color: var(--primary); }
.me .stile.is-changed { background-color: var(--bg-2); }
.me .me-szc.error .stile, .me .me-szc.error .stile:focus-within { border-color: var(--red); }
/* the line on the board slides to a committed value (240 ms), the board's own figure motion at the row's scale */
.me-line dd { transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease-out; }
.me-line dd.in { transform: translateY(.25em); opacity: 0; transition: none; }
/* Save settles back after Enter as after a click; the status line fades in */
#f-save { transition: background-color var(--dur-1) ease-out, border-color var(--dur-1) ease-out, color var(--dur-1) ease-out, transform var(--dur-1) var(--ease-out); }
#f-save.is-pressing { transform: scale(.98); transition: none; }
@keyframes me-live-in { from { opacity: 0; } to { opacity: 1; } }
.me .live.is-new { animation: me-live-in var(--dur-1) ease-out; }
@media (prefers-reduced-motion: reduce) {
  .me-line dd, .me-line dd.in { transition: none; transform: none; opacity: 1; }
  #f-save, #f-save.is-pressing { transform: none; transition: background-color var(--dur-1) ease-out, border-color var(--dur-1) ease-out, color var(--dur-1) ease-out; }
  .me .live.is-new { animation: none; }
}

/* ---------------------------------------------------------------- finish (2 Nov 2026): "Set your sizes" (me.html#f-boot) lands with the section's heading and its why line in view */
.me-stiles input, .me-stiles select { scroll-margin-top: calc(var(--s9) + var(--s7)); }

/* ---------------------------------------------------------------- the address's verification and this browser's session (3 Nov 2026)
   An address that has not used its link yet carries a quiet amber callout under the Email row with the resend beside it
   (amber is a fill with ink on it, never amber text on the ground). Sign out is drawn only when GET /api/me says there is
   a session to end, so the button is never there doing nothing. */
.me-verify { margin: var(--s3) 0 var(--s2); max-width: 60ch; }
.me-verify p { margin: 0; font-size: var(--t-1); line-height: 1.45; }
.me-verify .rowbtns { margin-top: var(--s3); }
.me-verify .live { margin-top: var(--s2); min-height: 0; }
.me-verify .live:not(:empty) { margin-top: var(--s3); }
.me-out { margin-top: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s4); max-width: 60ch; }
.me-out .hint { margin: 0 0 var(--s3); }
.me-out b { color: var(--fg); overflow-wrap: anywhere; }
.me-out .live { margin-top: var(--s2); }