/* ============================================================
   Crime Watch Canada — subscription + subscriber account surfaces.
   KDS v1 · Verandah: warm ground, white cards, 20px rounding, soft shadows,
   Inter at sentence case, brand red only on the primary action.
   Loaded by routes/subscribe.js and routes/account.js.
   Tokens only — no raw colours, radii, spacing, durations or fonts.
   ============================================================ */

/* ------------------------------------------------------------------
   0. Page-frame fixes
   routes/subscribe.js sets bodyClass 'has-sticky-cta'; legacy.css zeroes the
   body padding for that class, which would let the phone tab bar sit on top of
   the last section. Restore the 60px the tab bar occupies on phones only.
   ------------------------------------------------------------------ */
body.has-sticky-cta.has-tabbar { padding-bottom: 60px; }
@media (min-width: 1000px) { body.has-sticky-cta.has-tabbar { padding-bottom: 0; } }

/* ------------------------------------------------------------------
   1. The magazine, presented as a print object
   A white paper card: masthead plate, cover photograph, cover lines, footer.
   One ghost sheet behind it suggests a stack. Real shadow, slight tilt.
   ------------------------------------------------------------------ */
.magwrap { position: relative; display: flex; justify-content: center; padding-block: var(--kds-sp-4) var(--kds-sp-6); }
.mag {
  position: relative; width: min(290px, 74vw); aspect-ratio: 3 / 4;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--kds-surface); border: 1px solid var(--kds-border);
  border-radius: 3px var(--kds-radius-md) var(--kds-radius-md) 3px;
  box-shadow: var(--kds-shadow-3), 0 2px 6px color-mix(in srgb, var(--kds-fg) 14%, transparent);
  overflow: hidden; rotate: -2deg; transform-origin: bottom center;
}
.mag__ghost {
  position: absolute; left: 50%; bottom: 0; width: min(290px, 74vw); aspect-ratio: 3 / 4;
  translate: -50% 0; rotate: 4deg; z-index: -1;
  background: var(--kds-surface-2); border: 1px solid var(--kds-border);
  border-radius: 3px var(--kds-radius-md) var(--kds-radius-md) 3px;
  box-shadow: var(--kds-shadow-2);
}
.mag__spine { position: absolute; inset: 0 auto 0 0; width: 9px; background: linear-gradient(90deg, color-mix(in srgb, var(--kds-fg) 12%, transparent), transparent); z-index: 3; pointer-events: none; }
.mag__head { padding: var(--kds-sp-3) var(--kds-sp-4) var(--kds-sp-2) calc(var(--kds-sp-4) + 4px); border-bottom: 3px solid var(--kds-brand); }
.mag__mast { display: block; font-size: var(--kds-text-xl); font-weight: var(--kds-weight-bold); letter-spacing: var(--kds-tracking-tight); line-height: 1.05; color: var(--kds-fg); }
.mag__mast em { font-style: normal; color: var(--kds-brand); }
.mag__sub { display: block; margin-top: 2px; font-size: 10px; letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--kds-fg-faint); }
.mag__photo { position: relative; overflow: hidden; background: var(--kds-surface-2); }
.mag__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }
.mag__lines { position: absolute; inset: auto 0 0 0; display: grid; gap: 4px; padding: var(--kds-sp-6) var(--kds-sp-3) var(--kds-sp-3) calc(var(--kds-sp-3) + 4px);
  background: linear-gradient(to top, color-mix(in srgb, var(--kds-n0) 80%, transparent), color-mix(in srgb, var(--kds-n0) 45%, transparent) 55%, transparent); }
.mag__lines span { font-size: var(--kds-text-sm); font-weight: var(--kds-weight-semibold); line-height: 1.2; color: var(--kds-n10); letter-spacing: var(--kds-tracking-tight); }
.mag__lines span:first-child { color: var(--kds-warning); }
.mag__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kds-sp-2); padding: 8px var(--kds-sp-3) 8px calc(var(--kds-sp-3) + 4px); font-size: 10px; color: var(--kds-fg-faint); }
.mag__barcode { flex: none; width: 34px; height: 16px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--kds-fg) 0 1px, transparent 1px 3px, var(--kds-fg) 3px 4px, transparent 4px 6px); opacity: .55; }
@media (min-width: 1000px) { .mag, .mag__ghost { width: 320px; } }
@media (prefers-reduced-motion: reduce) { .mag { rotate: none; } .mag__ghost { rotate: none; } }

/* caption under the print object */
.magwrap + .mag-note { margin: 0; text-align: center; }

/* ------------------------------------------------------------------
   2. Plan cards
   Comparable, equal-height, one "most popular" marker on Print + Digital.
   ------------------------------------------------------------------ */
.plans { display: grid; gap: var(--kds-sp-4); align-items: stretch; margin-top: var(--kds-sp-2); }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(3, 1fr); gap: var(--kds-sp-3); } }
@media (min-width: 1020px) { .plans { gap: var(--kds-sp-4); } }

.plan { position: relative; display: flex; flex-direction: column; gap: var(--kds-sp-3); padding: var(--kds-sp-5); }
.plan--popular { border-color: var(--kds-brand); box-shadow: var(--kds-shadow-2); }
.plan__flag { position: absolute; top: calc(-1 * var(--kds-sp-2) - 4px); left: var(--kds-sp-5); padding: 4px 10px; border-radius: var(--kds-radius-full);
  background: var(--kds-brand); color: var(--kds-brand-fg); font-size: var(--kds-text-xs); font-weight: var(--kds-weight-semibold); letter-spacing: .01em; white-space: nowrap; }
.plan__name { margin: 0; font-size: var(--kds-text-xl); font-weight: var(--kds-weight-semibold); letter-spacing: var(--kds-tracking-tight); }
.plan__blurb { margin: 0; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
@media (min-width: 760px) { .plan__blurb { min-height: 4.2em; } }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.plan__price b { font-size: var(--kds-text-3xl); font-weight: var(--kds-weight-bold); letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price span { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); font-weight: var(--kds-weight-medium); }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--kds-text-sm); }
.plan__list li { display: flex; gap: 8px; align-items: flex-start; color: var(--kds-fg-muted); }
.plan__list svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--kds-positive); }
.plan__cta { margin-top: auto; padding-top: var(--kds-sp-2); }
.plan__cta .kds-btn { width: 100%; }

/* ------------------------------------------------------------------
   3. Where your money goes
   ------------------------------------------------------------------ */
.money { display: grid; gap: var(--kds-sp-4); }
@media (min-width: 900px) { .money { grid-template-columns: 1.1fr 1fr; align-items: start; gap: var(--kds-sp-6); } }
.money__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kds-sp-3); }
.money__list li { display: grid; grid-template-columns: 34px 1fr; gap: var(--kds-sp-3); align-items: start; }
.money__list svg { width: 34px; height: 34px; padding: 7px; border-radius: var(--kds-radius-md); background: var(--kds-accent-soft); color: var(--kds-accent); box-sizing: border-box; }
.money__list b { display: block; font-weight: var(--kds-weight-semibold); font-size: var(--kds-text-sm); }
.money__list span { display: block; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }

/* ------------------------------------------------------------------
   4. FAQ + gift strip
   ------------------------------------------------------------------ */
.faq { max-width: 760px; }
/* the icon set has no chevron: the arrow glyph points right, so rotate it a
   quarter turn — KDS adds its own 180° rotation when the item opens. */
.faq .kds-accordion__chevron { display: inline-grid; place-content: center; rotate: 90deg; }
.faq .kds-accordion__chevron svg { width: 18px; height: 18px; }
.faq .kds-accordion__trigger { font-size: var(--kds-text-md); }
.faq .kds-accordion__panel-inner > p { max-width: 62ch; }
.gift-strip { display: grid; gap: var(--kds-sp-4); }
.gift-strip h3 { margin: 0 0 .3em; }
.gift-strip p { margin: 0; color: var(--kds-fg-muted); }
.gift-strip .kds-btn { justify-self: start; }
@media (min-width: 760px) { .gift-strip { grid-template-columns: 1fr auto; align-items: center; } .gift-strip .kds-btn { justify-self: end; } }
.gift-form { max-width: 720px; display: grid; gap: var(--kds-sp-5); }

/* ------------------------------------------------------------------
   5. Details step (/subscribe/:plan)
   ------------------------------------------------------------------ */
.steps-wrap { max-width: 520px; margin-top: var(--kds-sp-4); }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kds-sp-4); padding-bottom: var(--kds-sp-7); align-items: start; }
.co-grid > * { min-width: 0; }
@media (min-width: 960px) { .co-grid { grid-template-columns: minmax(0, 1fr) 350px; gap: var(--kds-sp-6); } }
.co-main { display: grid; gap: var(--kds-sp-4); min-width: 0; }
.co-aside { min-width: 0; order: -1; }
@media (min-width: 960px) { .co-aside { order: 0; position: sticky; top: 84px; } }
.co-card__title { margin: 0 0 var(--kds-sp-1); font-size: var(--kds-text-lg); font-weight: var(--kds-weight-semibold); }
.co-card__sub { margin: 0 0 var(--kds-sp-4); color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
.co-signed { display: flex; gap: var(--kds-sp-3); align-items: center; padding: var(--kds-sp-3); border-radius: var(--kds-radius-md); background: var(--kds-surface-2); }
.co-signed__avatar { flex: none; width: 40px; height: 40px; border-radius: var(--kds-radius-full); background: var(--kds-brand); color: var(--kds-brand-fg); display: grid; place-content: center; font-weight: var(--kds-weight-bold); font-size: var(--kds-text-sm); }
.co-signed p { margin: 0; font-size: var(--kds-text-sm); }
.co-signed small { color: var(--kds-fg-muted); font-size: var(--kds-text-xs); }
.co-error { color: var(--kds-danger); font-size: var(--kds-text-xs); line-height: 1.4; }
.co-error a { color: inherit; font-weight: var(--kds-weight-semibold); }
.co-terms { margin: 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.co-submit { display: grid; gap: var(--kds-sp-3); }
.co-submit > .kds-btn { width: 100%; }
@media (min-width: 640px) { .co-submit > .kds-btn { width: auto; justify-self: start; min-width: 280px; } }
.co-safe { display: flex; gap: var(--kds-sp-3); flex-wrap: wrap; align-items: center; font-size: var(--kds-text-xs); color: var(--kds-fg-faint); }
.co-safe span { display: inline-flex; align-items: center; gap: 5px; }
.co-safe svg { width: 14px; height: 14px; }

/* order summary in the aside */
.co-summary { display: grid; gap: var(--kds-sp-3); }
.co-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kds-sp-3); }
.co-summary__row b { font-size: var(--kds-text-md); font-weight: var(--kds-weight-semibold); }
.co-summary__total { padding-top: var(--kds-sp-3); border-top: 1px solid var(--kds-border); }
.co-summary__total .plan__price b { font-size: var(--kds-text-2xl); }
.co-summary__switch { margin: 0; font-size: var(--kds-text-xs); color: var(--kds-fg-muted); }

/* ------------------------------------------------------------------
   6. Subscriber account
   ------------------------------------------------------------------ */
.acct-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--kds-sp-3); }
.acct-head h1 { margin: 0; font-size: var(--kds-text-3xl); }
.acct-head p { margin: 0; }
.acct-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-top: var(--kds-sp-4); border-bottom: 1px solid var(--kds-border); }
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs a { white-space: nowrap; text-decoration: none; padding: 11px 13px; font-size: var(--kds-text-sm); font-weight: var(--kds-weight-medium); color: var(--kds-fg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 44px; display: inline-flex; align-items: center; }
.acct-tabs a:hover { color: var(--kds-fg); }
.acct-tabs a.is-active { color: var(--kds-fg); border-color: var(--kds-brand); font-weight: var(--kds-weight-semibold); }

.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kds-sp-4); margin-top: var(--kds-sp-5); }
@media (min-width: 960px) { .acct-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } .acct-grid > .span-2 { grid-column: 1 / -1; } }
.acct-grid > * { min-width: 0; }
.acct-card { min-width: 0; }
.acct-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kds-sp-4); align-content: start; min-width: 0; }
.acct-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--kds-sp-3); flex-wrap: wrap; margin-bottom: var(--kds-sp-3); }
.acct-card__head h2 { margin: 0; font-size: var(--kds-text-xl); }
.acct-card h3 { font-size: var(--kds-text-md); }
.acct-plan { margin: 0 0 2px; font-size: var(--kds-text-2xl); font-weight: var(--kds-weight-bold); letter-spacing: var(--kds-tracking-tight); line-height: 1.1; }
.acct-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--kds-sp-4); margin: var(--kds-sp-4) 0 0; font-size: var(--kds-text-sm); }
.acct-dl dt { color: var(--kds-fg-muted); }
.acct-dl dd { margin: 0; }
.acct-actions { display: flex; gap: var(--kds-sp-2); flex-wrap: wrap; margin-top: var(--kds-sp-4); }
.acct-actions form { display: contents; }
.acct-issue { display: grid; grid-template-columns: 76px 1fr; gap: var(--kds-sp-3); align-items: start; }
.acct-issue__cover { aspect-ratio: 3 / 4; border-radius: var(--kds-radius-sm); overflow: hidden; background: var(--kds-surface-2); border: 1px solid var(--kds-border); }
.acct-issue__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-issue h3 { margin: 0 0 3px; font-size: var(--kds-text-md); line-height: 1.3; }
.acct-issue p { margin: 0 0 10px; font-size: var(--kds-text-xs); color: var(--kds-fg-muted); }
.acct-links { display: grid; gap: 8px; }
.acct-links a { display: flex; justify-content: space-between; gap: var(--kds-sp-3); align-items: center; padding: 11px 13px; border: 1px solid var(--kds-border); border-radius: var(--kds-radius-md); text-decoration: none; color: var(--kds-fg); font-size: var(--kds-text-sm); font-weight: var(--kds-weight-medium); min-height: 44px; }
.acct-links a:hover { border-color: var(--kds-border-strong); background: var(--kds-surface-2); }
.acct-links svg { width: 16px; height: 16px; flex: none; color: var(--kds-fg-faint); }
.acct-forms { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kds-sp-4); min-width: 0; }
@media (min-width: 760px) { .acct-forms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.acct-form { display: grid; gap: var(--kds-sp-4); }
.acct-form .kds-btn { justify-self: start; }
.acct-orders td.kds-table__num { white-space: nowrap; }
.acct-orders td:nth-child(2) { min-width: 15ch; }
.acct-orders__status { display: grid; gap: 6px; justify-items: start; }
.acct-orders__date { display: none; }
/* on phones the date gets its own line inside the description so the table
   fits without a horizontal scroll */
@media (max-width: 640px) {
  .acct-orders th:first-child, .acct-orders td:first-child { display: none; }
  .acct-orders__date { display: block; font-size: var(--kds-text-xs); color: var(--kds-fg-faint); margin-bottom: 2px; }
  .acct-orders td, .acct-orders th { padding-inline: var(--kds-sp-2); }
  .acct-orders td:nth-child(2) { min-width: 0; }
  .acct-orders__status .kds-btn { padding-inline: 10px; }
}
.acct-orders td:first-child { white-space: nowrap; color: var(--kds-fg-muted); }

/* ------------------------------------------------------------------
   7. Digital issues + reader
   ------------------------------------------------------------------ */
.iss-lock { display: grid; gap: var(--kds-sp-4); align-items: center; }
.iss-lock h2 { margin: 0 0 .3em; font-size: var(--kds-text-xl); }
.iss-lock p { margin: 0; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
.iss-lock .kds-btn { justify-self: start; }
@media (min-width: 760px) { .iss-lock { grid-template-columns: 1fr auto; } .iss-lock .kds-btn { justify-self: end; } }

.iss-grid { display: grid; gap: var(--kds-sp-4); grid-template-columns: repeat(2, 1fr); margin-top: var(--kds-sp-5); }
@media (min-width: 640px) { .iss-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .iss-grid { grid-template-columns: repeat(4, 1fr); } }
.iss { display: block; text-decoration: none; color: inherit; }
.iss__cover { position: relative; aspect-ratio: 3 / 4; border-radius: var(--kds-radius-md); overflow: hidden; background: var(--kds-surface-2); border: 1px solid var(--kds-border); box-shadow: var(--kds-shadow-1); transition: transform var(--kds-dur-fast) var(--kds-ease-standard), box-shadow var(--kds-dur-fast) var(--kds-ease-standard); }
.iss:hover .iss__cover { transform: translateY(-3px); box-shadow: var(--kds-shadow-2); }
.iss__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iss__ph { position: absolute; inset: 0; padding: var(--kds-sp-3); display: flex; flex-direction: column; justify-content: space-between; background: var(--kds-surface-2); }
.iss__ph b { font-size: var(--kds-text-sm); font-weight: var(--kds-weight-bold); line-height: 1.15; letter-spacing: var(--kds-tracking-tight); color: var(--kds-brand); }
.iss__ph span { font-size: var(--kds-text-xs); color: var(--kds-fg-muted); }
.iss__free { position: absolute; top: 8px; left: 8px; }
.iss--locked .iss__cover img { filter: grayscale(.85) contrast(.9); opacity: .45; }
.iss--locked .iss__ph { opacity: .5; }
.iss__lock { position: absolute; inset: auto 8px 8px 8px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: var(--kds-radius-full);
  background: color-mix(in srgb, var(--kds-surface) 92%, transparent); border: 1px solid var(--kds-border); color: var(--kds-fg-muted);
  font-size: var(--kds-text-xs); font-weight: var(--kds-weight-semibold); }
.iss__lock svg { width: 13px; height: 13px; }
.iss__meta { margin-top: 10px; }
.iss__meta h3 { margin: 0 0 2px; font-size: var(--kds-text-sm); font-weight: var(--kds-weight-semibold); line-height: 1.3; }
.iss__meta p { margin: 0; font-size: var(--kds-text-xs); color: var(--kds-fg-muted); }

.reader-back { display: flex; width: fit-content; align-items: center; gap: 6px; text-decoration: none; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); font-weight: var(--kds-weight-medium); }
.reader-back:hover { color: var(--kds-fg); }
.reader-back svg { width: 15px; height: 15px; rotate: 180deg; }
.reader-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
.reader-tools { display: flex; gap: var(--kds-sp-2); flex-wrap: wrap; margin: var(--kds-sp-4) 0; }
.reader-frame { border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); overflow: hidden; background: var(--kds-surface-2); }
.reader-frame object { display: block; width: 100%; height: min(78vh, 1000px); }
.reader-frame__fallback { padding: var(--kds-sp-7) var(--kds-sp-4); text-align: center; color: var(--kds-fg-muted); }
.reader-soon { display: grid; gap: var(--kds-sp-5); margin-top: var(--kds-sp-4); }
.reader-soon__cover { width: min(240px, 66vw); margin-inline: auto; }
.reader-soon__cover .iss__cover { box-shadow: var(--kds-shadow-3); }
.reader-soon__body { display: grid; gap: var(--kds-sp-4); min-width: 0; }
@media (min-width: 760px) { .reader-soon { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } .reader-soon__cover { margin: 0; width: 100%; } }
.reader-sections { columns: 2; column-gap: var(--kds-sp-5); margin: 0; padding-left: 1.1em; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.reader-sections li { break-inside: avoid; padding: 2px 0; }