/* Shared component library — the modularization first pass for the
   cart-checkout epic (spec: cart-page). Load AFTER site.css: site.css owns
   the tokens (--ink/--line/--accent/--muted/--paper/--display) and the page
   chrome (.site-head/.site-nav/.site-foot/.beta-pill); this file owns the
   components a second (now third) page needs — the ink/outline pills, the
   quiet text-link, the 3:4 thumb + pending wash, the dashed empty blocks,
   the section grammar, the share-a-thought sheet skin, the checkout tracker,
   and the nav bag icon + count badge.

   Consumers today: account.html (mechanical class-additions only — its own
   selectors are untouched so its Playwright suite stays green), cart.html
   (built directly against these classes), fb-sheet.mjs (injects markup that
   assumes these classes are loaded). index.html migrates in Feature 4. */

/* ---- Pills ------------------------------------------------------------- */
/* Ink pill: the one primary-action treatment (was re-declared per page as
   .new-book / .open-cue / .checkout-btn). Works on <a> or <button>. */
.pill-ink {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none;
  padding: .55rem 1.1rem; border-radius: 999px; white-space: nowrap; cursor: pointer;
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.pill-ink:hover { background: #000; transform: translateY(-1px); }
.pill-ink:disabled, .pill-ink[aria-disabled="true"] {
  cursor: default; opacity: .55; transform: none; background: var(--ink);
}
.pill-ink svg { width: 1rem; height: 1rem; }

/* Outline pill: the secondary "move this" action (was .move-btn in the cart
   mock — same shape belongs to any page that offers a reversible move). */
.pill-line {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid var(--ink); border-radius: 999px; padding: .4rem 1rem; cursor: pointer;
  white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center;
  transition: background .15s ease, color .15s ease;
}
.pill-line:hover { background: var(--ink); color: #fff; }
.pill-line:disabled { opacity: .55; cursor: default; background: #fff; color: var(--ink); }

/* Quiet link-button: an underlined muted action styled like text, not a
   button (item row "Preview" / "Move to drafts", account's "Sign out"). */
.link-quiet {
  font: inherit; font-size: .82rem; color: var(--muted); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.link-quiet:hover { color: var(--accent); }

/* ---- Quantity stepper: one bordered pill, tabular digits (QtyStepper) --- */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.qty button {
  font: inherit; font-size: 1rem; line-height: 1; width: 1.9rem; height: 1.9rem; border: 0;
  background: none; color: var(--ink); cursor: pointer; border-radius: 999px;
}
.qty button:hover { color: var(--accent); }
.qty button:disabled { color: var(--line); cursor: default; }
.qty .n { min-width: 1.6rem; text-align: center; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Money passthrough (MoneyLine) -------------------------------------- */
.money { font-variant-numeric: tabular-nums; }

/* ---- Thumb: the 3:4 cover treatment shared by every book-shaped row ---- */
.thumb {
  aspect-ratio: 3 / 4; border: 1px solid var(--line); border-radius: 8px;
  background: #f4f1ec; overflow: hidden; display: grid; place-items: center;
}
.thumb.pending {
  background: repeating-linear-gradient(135deg, #f4f1ec 0 10px, #efece6 10px 20px);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .wash { width: 100%; height: 100%; }

/* Activatable variant (BookThumb's onActivate) — the cover as a real
   button, e.g. the cart row's "click cover to preview" affordance. Kept
   minimal: reset the <button> chrome onto what .thumb already provides,
   add a pointer cursor + a hover accent border; keyboard focus relies on
   the global :focus-visible ring, not a bespoke one here. */
.thumb-btn { font: inherit; padding: 0; cursor: pointer; }
.thumb-btn:hover { border-color: var(--accent); }

/* ---- Empty blocks -------------------------------------------------------
   .empty: a quiet dashed note (order history's "nothing yet"). .empty-hero:
   the bigger, CTA-owning version (zero-draft dashboard, empty cart). */
.empty {
  border: 1px dashed var(--line); border-radius: 14px; background: #fcfbfa;
  padding: 1.3rem 1.2rem; color: var(--muted); font-size: .9rem; line-height: 1.55;
}
.empty a { color: var(--accent); }
.empty-hero {
  border: 1px dashed var(--line); border-radius: 14px; background: #fcfbfa;
  padding: 2.6rem 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.empty-hero .frame-glyph { width: 3.1rem; height: 3.1rem; color: var(--accent); opacity: .9; margin-bottom: .4rem; }
.empty-hero h3 { font-family: var(--display); font-weight: 500; font-size: 1.6rem; margin: 0; }
.empty-hero p { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; max-width: 24rem; }
.empty-hero .pill-ink { font-size: .9rem; padding: .6rem 1.3rem; }

/* ---- Section grammar: the account-page "block" pattern, generalized ---- */
section.block { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2rem; }
section.block h2 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; margin: 0 0 .2rem; }
section.block .sub { color: var(--muted); font-size: .9rem; margin: 0 0 1.1rem; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.block-head h2 { margin: 0; }

/* Loading / signed-out notes — the same .state-note pattern on every page
   that has to resolve an auth state before it can paint anything real. */
.state-note { color: var(--muted); margin: 2.2rem 0; line-height: 1.6; }
.state-note a { color: var(--accent); }

/* ---- Checkout tracker: a dedicated, quiet strip (spec: cart-page). Cart
   is ours; Payment & Shipping and Order Confirmed render as upcoming until
   their step is current. Shared so the Feature 5 confirmation page can
   render the same component with step 3 current. */
.tracker { display: flex; align-items: center; gap: .55rem; margin: 2.2rem 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.tracker .step { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }
.tracker .dot {
  width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; font-size: .7rem; font-variant-numeric: tabular-nums;
}
.tracker .step[aria-current="step"] { color: var(--ink); }
.tracker .step[aria-current="step"] .dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.tracker .rule { flex: 0 0 1.6rem; height: 1px; background: var(--line); }

/* ---- Preview overlay (spec: cart-page QA fix F1) -----------------------
   A clean, minimal flip-through for the cart page's "Preview" link — same
   dark-scrim/Cormorant-accent language as index.html's #lightbox, but not a
   reuse of it (that surface carries cover-picking/feedback/upload state this
   page has no business touching). Column layout, same reasoning as
   #lightbox: .pv-stage gets a DEFINITE height (flex:1, min-height:0) so
   .pv-figure's height:100% has something real to resolve against — a
   shrink-wrap figure with only max-height on a naturally-sized <img>
   collapses instead of filling the stage
   ([lightbox-figure-needs-definite-height]). */
.pv-overlay {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: .6rem;
  background: rgba(26,26,26,.92); padding: 2.5rem 1rem;
}
.pv-stage { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.pv-figure { position: relative; max-width: min(90vw, 640px); height: 100%; }
.pv-figure img {
  display: block; max-width: 100%; max-height: 100%; border-radius: 10px;
  background: #f2f2f2; -webkit-touch-callout: none; user-select: none;
}
.pv-figure.is-cover img { box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.pv-figure.img-broken img, .pv-figure.pv-empty img { display: none; }
.pv-figure.img-broken::after, .pv-figure.pv-empty::after {
  content: 'This book’s pages aren’t available to preview right now.';
  display: block; color: #fff; font-size: .9rem; text-align: center;
  max-width: 18rem; padding: 1.25rem; line-height: 1.45;
}
@media (prefers-reduced-motion: no-preference) {
  .pv-figure { animation: pv-in .18s ease; }
}
@keyframes pv-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.pv-title {
  margin: 0; flex: 0 0 auto; font-family: var(--display); color: #fff;
  font-size: 1.15rem; text-align: center;
}
.pv-counter {
  margin: 0; flex: 0 0 auto; font-family: var(--display); color: #fff;
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
.pv-close, .pv-prev, .pv-next {
  min-height: 44px; min-width: 44px; border-radius: 50%; padding: 0;
  border: 0; background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer;
  line-height: 1; display: flex; align-items: center; justify-content: center;
}
.pv-close svg, .pv-prev svg, .pv-next svg { width: 1.1rem; height: 1.1rem; }
.pv-close { flex: 0 0 auto; align-self: flex-end; }
.pv-prev, .pv-next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 1; }
.pv-prev { left: 1rem; }
.pv-next { right: 1rem; }
.pv-prev:disabled, .pv-next:disabled { opacity: .4; cursor: default; }

/* ---- Nav bag icon + count badge (upper right, Nordstrom-style) --------- */
.bag { position: relative; display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; }
.bag:hover, .bag[aria-current="page"] { color: var(--ink); }
.bag svg { width: 1.35rem; height: 1.35rem; display: block; }
.bag .count {
  position: absolute; top: -.42rem; right: -.55rem; min-width: 1.05rem; height: 1.05rem;
  display: grid; place-items: center; padding: 0 .22rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .62rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- Share-a-thought chip + sheet (spec: feedback-surface-ux) ----------
   Skin for the markup fb-sheet.mjs injects. Same visual language on every
   page that mounts it; only `source` differs per caller. */
.fb-card { background: rgba(255,255,255,.98); border-radius: 14px; color: var(--ink); box-shadow: 0 2px 14px rgba(26,26,26,.14); }
.fb-card .field { display: flex; align-items: baseline; justify-content: space-between; font-size: .85rem; }
.fb-card .counter { color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-primary { padding: .7rem 1.2rem; min-height: 46px; font: inherit; font-weight: 600; border-radius: 10px; border: 0; background: var(--ink); color: #fff; cursor: pointer; }
.fb-primary:disabled { opacity: .5; cursor: default; }
.fb-ghost { padding: .7rem 1.1rem; min-height: 46px; font: inherit; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; }
#fbChip {
  position: fixed; right: .9rem; bottom: calc(.9rem + env(safe-area-inset-bottom));
  z-index: 60; min-height: 44px; padding: .55rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--accent); background: rgba(255,255,255,.96);
  color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 10px rgba(26,26,26,.18);
}
#fbChipCollapse {
  position: fixed; right: .55rem; bottom: calc(3rem + env(safe-area-inset-bottom));
  z-index: 60; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.96);
  color: var(--muted); font-size: .85rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(26,26,26,.18);
}
#fbChipDot {
  position: fixed; right: .9rem; bottom: calc(.9rem + env(safe-area-inset-bottom));
  z-index: 60; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--accent); background: rgba(255,255,255,.96);
  color: var(--accent); font-size: 1.1rem; cursor: pointer;
  box-shadow: 0 2px 10px rgba(26,26,26,.18);
  display: flex; align-items: center; justify-content: center;
}
#fbSheetScrim { position: fixed; inset: 0; z-index: 61; background: rgba(26,26,26,.35); }
#fbSheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 62;
  margin: 0 auto; max-width: 480px; width: 100%;
  border-radius: 16px 16px 0 0;
  padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: .7rem;
}
#fbSheet h2 { font-family: var(--display); font-weight: 500; font-size: 1.25rem; margin: 0; }
#fbSheet .sub { margin: 0; color: var(--muted); font-size: .9rem; }
#fbSheet textarea {
  width: 100%; padding: .6rem .7rem; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; background: #fff; resize: vertical;
}
.fb-sheet-actions { display: flex; gap: .6rem; align-items: center; }
#fbSheetStatus { font-size: .85rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  #fbSheet { animation: fb-sheet-in .2s ease; }
}
@keyframes fb-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Order history: fulfillment tracker + order rows (spec: checkout-ui-
   ux-nits). Distinct from `.tracker` (the numbered checkout stepper) — same
   step/rail DNA, but a "colors-in" treatment: reached = filled accent dot
   with a check, current = accent-ring dot, upcoming = hollow line-art dot.
   Server is the single source of stage truth (_order_stage); this only
   paints whatever stageKey/stageIndex/terminal it's handed. */
.order-list { margin-top: .4rem; }
/* No cover thumb in order rows (spec: order-history-ledger-revamp / #547) —
   the title + items line carries identity, honestly for multi-book orders. */
.order-row { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.order-row:last-child { border-bottom: 0; }
.order-body { min-width: 0; }
.order-title { font-family: var(--display); font-weight: 500; font-size: 1.15rem; margin: 0 0 .2rem; }
/* Quiet Stripe-receipt link in the meta line — the lazy redirect route. */
.receipt-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.receipt-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Collapsible Order-history section (spec: order-history-ledger-revamp) —
   a native <details>, collapsed by default, order count in the summary.
   Marker suppressed both ways (list-style + the WebKit pseudo). */
.orders-toggle > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline;
  gap: .6rem; -webkit-user-select: none; user-select: none;
}
.orders-toggle > summary::-webkit-details-marker { display: none; }
.orders-toggle > summary h2 { margin: 0; }
.orders-toggle > summary .count { color: var(--muted); font-size: .85rem; }
.orders-toggle > summary .caret {
  margin-left: auto; align-self: center; color: var(--muted);
  transition: transform .18s ease;
}
.orders-toggle[open] > summary .caret { transform: rotate(180deg); }
.orders-toggle > summary:hover h2 { color: var(--accent); }
.order-meta { color: var(--muted); font-size: .85rem; margin: 0; font-variant-numeric: tabular-nums; }
.order-items { color: var(--muted); font-size: .85rem; margin: .2rem 0 0; }

.otrack { display: flex; align-items: flex-start; gap: 0; margin: .95rem 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.otrack .ostage { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; color: var(--muted); flex: 0 0 auto; width: 5.5rem; }
.otrack .olabel { line-height: 1.2; }
.otrack .orail { flex: 1 1 auto; height: 2px; background: var(--line); margin-top: .8rem; min-width: .75rem; }
.otrack .orail.reached { background: var(--accent); }
.otrack .odot {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--line); display: grid; place-items: center;
}
.otrack .odot svg { width: .8rem; height: .8rem; }
/* Reached: filled accent dot + white check. */
.otrack .ostage.reached { color: var(--ink); }
.otrack .ostage.reached .odot { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Current: white dot, accent ring, a subtle breathe (motion-gated). */
.otrack .ostage.current { color: var(--ink); }
.otrack .ostage.current .odot {
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .otrack .ostage.current .odot { animation: otrack-breathe 2.2s ease-in-out infinite; }
}
@keyframes otrack-breathe {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent); }
}
/* Upcoming: hollow line-art dot, nothing more. */
.otrack .ostage.upcoming .odot { background: #fff; border-color: var(--line); }

/* Terminal (refunded/cancelled): a chip + muted note, no forward bar. */
.otrack-terminal { display: flex; align-items: center; gap: .6rem; margin: .95rem 0 0; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px;
  padding: .3rem .75rem; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--line); background: #f1ece4; color: var(--muted);
}
.otrack-terminal .note { color: var(--muted); font-size: .85rem; }

/* "Track your package" — shown only on a shipped order with tracking_urls. */
.track-aside { margin-top: .65rem; display: flex; flex-direction: column; gap: .15rem; }
.track-aside a { color: var(--accent); font-size: .85rem; font-weight: 600; text-decoration: none; }
.track-aside a:hover { text-decoration: underline; text-underline-offset: 3px; }
.track-aside .carrier { color: var(--muted); font-size: .78rem; }

/* Stack at phone width: tracker stages in a vertical list
   (dot+label side by side) instead of a horizontal rail that has no room. */
@media (max-width: 560px) {
  .otrack { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .otrack .ostage { flex-direction: row; width: auto; text-align: left; gap: .55rem; }
  .otrack .orail { display: none; }
}

/* Loader: the one wordless loading signal (spec: universal-loading-signal).
   tone = color (currentColor inside), size = font-size (ring is em-relative). */
.ytc-loader {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); line-height: 0;
}
.ytc-loader.tone-light { color: #fff; }
.ytc-loader.s-inline { font-size: 22px; }
.ytc-loader.s-button { font-size: 18px; }
.ytc-loader.s-tile { font-size: 34px; }
.ytc-loader.s-overlay { font-size: 52px; }
.ytc-loader .ring {
  width: 1em; height: 1em; display: inline-block;
  border: .14em solid color-mix(in srgb, currentColor 26%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: ytc-spin .8s linear infinite;
}
@keyframes ytc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ytc-loader .ring { animation-duration: 2.4s; }
}
/* Stubbed mark artwork (LOADER_ART='mark', inactive) — class-renamed copy of
   index.html #reopenRestore's .restore-mark, the future branded swap's source. */
.ytc-loader .mark { position: relative; width: 1.35em; height: 1.15em; display: inline-block; }
.ytc-loader .mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ytc-loader .mark .frame-fill { fill: #fff; }
.ytc-loader .mark .wash {
  fill: var(--accent); transform-box: fill-box; transform-origin: bottom center;
  animation: ytc-mark-color 2.6s ease-in-out infinite;
}
@keyframes ytc-mark-color {
  0% { transform: scaleY(0); } 46% { transform: scaleY(1); }
  54% { transform: scaleY(1); } 100% { transform: scaleY(0); }
}
.ytc-loader .mark .ink { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ytc-loader .mark .sun { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) {
  .ytc-loader .mark .wash { animation: none; transform: scaleY(.62); }
}

/* ---- Sign-in card (spec: signin-card-ui) ---------------------------------
   One centred card, three states (email capture -> check-your-email / in-place
   signup). Tokens only — no bespoke :root. The brand mark colours itself in
   with --chosen at the send moment (the single deliberate flourish); reduced
   motion fills instantly. The Turnstile host is a fixed slot present in every
   state (hidden in "sent") so the widget mounts once and re-renders never tear
   it down (memory: turnstile-hidden-container-issues-no-token — it's rendered
   while visible, then only hidden once a token's already in hand). */
.signin-wrap { display: flex; justify-content: center; padding: 2.5rem 0 1rem; }
.signin-card {
  width: 100%; max-width: 460px; background: #fff;
  border: 1px solid var(--line); border-radius: 18px; padding: 2.25rem 2rem 2rem;
  box-shadow: 0 12px 36px rgba(26, 26, 26, .06);
}
.signin-mark { width: 52px; height: auto; display: block; margin: 0 auto 1rem; }
.signin-mark .frame-fill { fill: #fff; }
.signin-mark .wash { fill: var(--chosen); opacity: 0; transition: opacity .5s ease; }
.signin-mark.washed .wash { opacity: .9; }
.signin-mark .ink {
  fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.signin-mark .sun { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) {
  .signin-mark .wash { transition: none; }
}
.signin-card h1 {
  font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 5vw, 2.25rem);
  line-height: 1.05; letter-spacing: .005em; margin: 0 0 .45rem; text-align: center;
}
.signin-sub { color: var(--muted); text-align: center; margin: 0 auto 1.75rem; max-width: 34ch; }
.signin-sub b { color: var(--ink); font-weight: 600; }

.signin-field { margin-top: 1rem; }
.signin-field:first-child { margin-top: 0; }
.signin-field label {
  display: block; font-size: .76rem; font-weight: 650; letter-spacing: .035em;
  color: var(--ink); margin-bottom: .4rem;
}
.signin-card input[type=text], .signin-card input[type=email] {
  width: 100%; padding: .82rem .95rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 10px; min-height: 50px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.signin-card input:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.signin-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.signin-row2 .signin-field { margin-top: 1rem; }

.signin-emailrow {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .72rem .95rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font-size: .95rem;
}
.signin-emailrow span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.signin-check {
  display: flex; align-items: flex-start; gap: .65rem; margin-top: 1.25rem;
  font-size: .88rem; line-height: 1.45; color: var(--muted); cursor: pointer;
}
.signin-check input { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--accent); flex: none; }

.signin-ts { margin-top: 1.1rem; min-height: 0; }
.signin-ts.is-hidden { display: none; }

.signin-primary {
  width: 100%; margin-top: 1.35rem; padding: .9rem 1rem; font: inherit; font-weight: 650; font-size: 1rem;
  color: #fff; background: var(--accent); border: 0; border-radius: 10px; cursor: pointer; min-height: 52px;
  transition: filter .15s ease, transform .15s ease, opacity .15s ease;
}
.signin-primary:hover { filter: brightness(.92); transform: translateY(-1px); }
.signin-primary:disabled { opacity: .5; cursor: default; transform: none; filter: none; }

@media (max-width: 520px) {
  .signin-wrap { padding-top: 1.5rem; }
  .signin-card { padding: 1.75rem 1.25rem 1.5rem; border-radius: 14px; }
  .signin-row2 { grid-template-columns: 1fr; gap: 0; }
}

.signin-links { margin-top: 1.3rem; text-align: center; display: flex; flex-direction: column; gap: .7rem; }
.signin-linkbtn {
  background: none; border: 0; font: inherit; color: var(--muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.signin-linkbtn.strong { color: var(--ink); }
.signin-linkbtn:hover { color: var(--ink); }

.signin-err { color: #c0392b; font-size: .9rem; margin-top: .9rem; text-align: center; }
.signin-note { color: var(--muted); font-size: .88rem; margin-top: .9rem; text-align: center; }