/* ============================================================
   Lý Maison v3 skin
   Typographic alignment for legacy pages (order, gift, report,
   pending, status, pay, confirm-payment, gift-confirmed, privacy).
   Presentation only: no layout or behavior changes.
   Load AFTER assets/css/style.css.
   ============================================================ */

/* Reduced display scale, matching the v3 index/about/method pages */
h1, .display-1 { font-size: clamp(2.2rem, 4.8vw, 4rem); }
h2, .display-2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

/* Kickers: Bodoni tracked caps, no leading comma ornament */
.kicker {
  font-family: var(--tracked);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
}
.kicker::before { content: ''; }

/* Buttons: Bodoni tracked caps, square, consistent with v3 CTAs */
.btn {
  font-family: var(--tracked);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  border-width: 1px;
}
.btn-link { font-family: var(--tracked); }

/* Numerals a touch smaller */
.numeral { font-size: 2rem; }

/* Slightly tighter section rhythm */
:root { --s7: 8.5rem; }

/* ===== v3.1: square controls, consistent selection states ===== */
input, select, textarea, .btn { border-radius: 0; }
.tier-option, .lmpay-card { border-radius: 0 !important; }

/* ===== Order page: every button fully opaque (no ghost/transparent fills) ===== */
body.order-page .btn-secondary { background: #fbf9f0; }
body.order-page .lang-toggle button { background: var(--ivory, #f5f1e6); }
body.order-page .lang-toggle button.is-active { background: var(--ink, #142847); color: var(--ivory, #f5f1e6); }
body.order-page .lang-toggle button:hover:not(.is-active) { opacity: 1; background: #fbf9f0; }
body.order-page .gift-redeem-banner-close { background: #fbf9f0; border-radius: 50%; opacity: .85; }
body.order-page .wa-cc-btn { background: #fdfcf7; padding-left: .5em; padding-right: .5em; }
body.order-page .lm-moonlight-trigger,
body.order-page .lm-moonlight-submit,
body.order-page .btn-primary { opacity: 1; }

/* option cards (Preferred channel, Report language, Payment method) */
.lmpay-card {
  background: var(--ivory-3);
  border: 1px solid var(--hair-strong);
  box-shadow: none;
}
.lmpay-opt input:checked + .lmpay-card {
  background: var(--ivory-2, #efe9d8) !important;
  color: #142847 !important;
  border-color: #142847 !important;
  box-shadow: inset 0 0 0 1px #142847;
}
.lmpay-opt input:checked + .lmpay-card .lmpay-name,
.lmpay-opt input:checked + .lmpay-card .lmpay-text,
.lmpay-opt input:checked + .lmpay-card .lmpay-sub { color: #142847 !important; }

/* tier cards on the order form: keep the native subtle selected state (ivory + dot), square corners only */

/* wordmark a touch toward the middle */
.site-nav .wordmark { margin-left: clamp(0px, 3vw, 46px); }

/* ===== v3.1b: legacy nav aligned to the new design ===== */
.site-nav .site-nav-link {
  font-family: var(--tracked);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-nav .btn-link {
  font-family: var(--tracked);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--hair-strong);
  padding: 0.65em 1.2em;
}
.site-nav .btn-link:hover { background: var(--navy); color: var(--ivory); border-color: var(--navy); }

/* ===== Discreet expandable privacy summary in the site footer =====
   Ink tones by default (the legacy site-footer is ivory); the navy pages
   (status/pay, body.status-page) flip to ivory tones. */
.lm3f-privacy { margin-top: 26px; text-align: center; }
.lm3f-privacy summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-family: var(--tracked); font-weight: 500; font-size: 10px;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(20,40,71,.45);
}
.lm3f-privacy summary::-webkit-details-marker { display: none; }
.lm3f-privacy summary:hover, .lm3f-privacy[open] summary { color: rgba(20,40,71,.8); }
.lm3f-privacy p {
  max-width: 560px; margin: 12px auto 0; font-weight: 300;
  font-size: 13.5px; line-height: 1.7; color: rgba(20,40,71,.62);
}
.lm3f-privacy a { color: #142847; }
body.status-page .lm3f-privacy summary { color: rgba(240,234,214,.4); }
body.status-page .lm3f-privacy summary:hover,
body.status-page .lm3f-privacy[open] summary { color: rgba(240,234,214,.75); }
body.status-page .lm3f-privacy p { color: rgba(240,234,214,.58); }
body.status-page .lm3f-privacy a { color: rgba(240,234,214,.85); }

/* footer links row (contact / affiliate): quiet outlined buttons */
.lm3f-links { margin-top: 20px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lm3f-links a {
  display: inline-block; border: 1px solid rgba(20,40,71,.3); padding: 11px 20px;
  font-family: var(--tracked); font-weight: 500; font-size: 10.5px;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(20,40,71,.7);
  text-decoration: none; border-bottom-style: solid;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lm3f-links a:hover { background: #142847; color: #f5f1e6; border-color: #142847; }
.lm3f-links span { display: none; }
body.status-page .lm3f-links a { border-color: rgba(240,234,214,.3); color: rgba(240,234,214,.75); }
body.status-page .lm3f-links a:hover { background: rgba(240,234,214,.95); color: #142847; border-color: rgba(240,234,214,.95); }

/* ===== Moonlight widget: even proportions, centered button label ===== */
.lm-moonlight-input,
.lm-moonlight-submit { border-radius: 0; box-sizing: border-box; height: 46px; }
.lm-moonlight-input { padding: 0 13px; }
.lm-moonlight-submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px; white-space: nowrap;
}

/* status/pay pages: the starfield must never intercept clicks (lang-toggle bug) */
.lm-starfield { pointer-events: none; }
.status-lang { z-index: 90; }

/* ===== v3.1c: mobile compactness for legacy pages ===== */
@media (max-width: 640px) {
  .site-nav .wordmark { margin-left: 0; }
  .lang-toggle button { padding: 0.4em 0.75em; font-size: 0.62rem; }
  .site-nav .btn-link { padding: 0.55em 0.9em; font-size: 0.6rem; letter-spacing: 0.14em; }
  .site-nav .site-nav-link { font-size: 0.62rem; letter-spacing: 0.14em; }
}

/* ===== Long text boxes, site-wide: soft paper tone + serif voice =====
   Textareas (gift messages, relationship notes, affiliate form) read as
   stark white boxes with system type by default. Give them the same ivory
   paper and Spectral voice as the rest of the site. */
textarea {
  background: #f7f3e8;
  font-family: 'Spectral', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1c2840;
}
textarea:focus { background: #faf7ee; }
textarea::placeholder { color: rgba(28, 40, 64, 0.45); font-style: italic; }

/* ===== Report page: the Contents sidebar survives every zoom level =====
   The shared stylesheet stacks the contents above the article below 1400px,
   which at 100 percent zoom on ordinary laptops hides the sidebar entirely.
   Reinstate the left sticky sidebar for every width down to tablet size;
   only true phone widths (820px and below) keep the stacked layout. Screen
   only; print is untouched. */
@media screen and (min-width: 821px) and (max-width: 1400px) {
  .lm-report-body { flex-direction: row; align-items: flex-start; gap: 42px; }
  .lm-report-toc {
    position: sticky; top: 32px;
    flex: 0 0 190px; width: 190px; max-width: 190px;
    align-self: flex-start;
    max-height: calc(100vh - 56px); overflow-y: auto;
  }
  .lm-report-content { flex: 0 1 920px; width: auto; max-width: 920px; }
}
/* Phone widths: the stacked Contents centers with the reading column instead
   of pinning to the page edge. */
@media screen and (max-width: 820px) {
  .lm-report-toc { align-self: center; width: 100%; max-width: 920px; }
}

/* ===== Report summary: four system cards =====
   Replaces the old two-column rows with one card per system, each showing
   the localized system name, its native glyph, the primary engine result
   large, and the remaining computed facts as labeled lines. */
.lm-sum-engine {
  font-family: 'Inter', sans-serif; font-size: 0.68rem; color: var(--muted, #5c6577);
  margin: -4px 0 14px; letter-spacing: 0.02em;
}
.lm-syscards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .lm-syscards { grid-template-columns: 1fr; } }
.lm-syscard { background: #fbf9f0; border: 1px solid rgba(20,40,71,.15); padding: 14px 16px 10px; }
.lm-syscard-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.lm-syscard-h .lm-sysdot { transform: none; }
.lm-syscard-name {
  font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy, #142847); opacity: 0.72;
}
.lm-syscard-glyph { margin-left: auto; font-family: Georgia, serif; font-size: 1rem; color: var(--navy, #142847); opacity: 0.38; }
.lm-syscard-v {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: 1.42rem; line-height: 1.18; color: var(--navy, #142847);
  margin-bottom: 9px;
}
.lm-syscard-kv {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 0 4px; border-top: 1px dotted rgba(20,40,71,.16);
}
.lm-syscard-kv span {
  font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--navy, #142847); opacity: 0.52; flex: 0 0 auto;
}
.lm-syscard-kv b {
  font-family: 'Spectral', serif; font-weight: 500; font-size: 0.88rem;
  color: var(--ink, #1c2840); line-height: 1.45;
}
@media print {
  .lm-syscards { grid-template-columns: 1fr 1fr; gap: 3mm; }
  .lm-syscard { break-inside: avoid; page-break-inside: avoid; background: #f7f3e8; }
  .lm-sum-engine { font-size: 7.5pt; }
}

/* ===== Print: the Contents block must never scroll or split =====
   The on-screen sidebar gives .lm-report-toc a max-height and overflow so it
   can scroll while sticky. In print those same properties make it a
   fragmentable scroll container, and current Chrome splits it straight after
   the heading: "Contents" alone on one sheet, the list on the next. Reset it
   to a plain block for print and keep heading and list welded together. */
@media print {
  .lm-report-toc {
    position: static !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  .lm-report-toc,
  .lm-report-toc-inner,
  .lm-contents { break-inside: avoid !important; page-break-inside: avoid !important; }
  .lm-contents-h { break-after: avoid !important; page-break-after: avoid !important; }
}