/* EVERGLOW typography baseline — natural Korean/English line wrapping.
   UI tokens, URLs and code may break when space is genuinely exhausted;
   editorial text must wrap by words/phrases, never arbitrary glyphs. */
html {
  line-break: strict;
  text-spacing-trim: trim-start;
}

body {
  overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6, legend, figcaption) {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}

:where(p, li, dt, dd, blockquote, td, th, label, summary) {
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: none;
  text-wrap: pretty;
}

:where(code, kbd, samp) {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: wrap;
}

:where(pre, pre code, [data-wrap-anywhere]) {
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}

:where(.url) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}

/* Dynamic dashboard copy often lives in generic containers rather than p tags. */
:where(.sub, .subtitle, .lead, .seclead, .foot, .muted, .insight-copy,
  .owner-card, .priority-copy, .story-copy, .decision-copy, .dialog-body,
  .card-copy, .card-desc, .description, .note) {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Short labels and metric values should stay intact. Existing page-specific nowrap
   rules still win when a component deliberately needs a single line. */
:where(.label, .eyebrow, .kicker, .story-kicker, .num, .value, .vl, .tag, .badge) {
  word-break: keep-all;
}

/* ─────────────────────────────────────────────────────────────
   EG testbed type hierarchy · 260721

   Every component should read as three roles at most:
   display (the one thing to notice), body (the content), meta (context).
   Short components should use body + meta only. Raster marks and wordmarks
   are brand assets and do not count toward the component font-family limit.
   ───────────────────────────────────────────────────────────── */
:root {
  --eg-type-body: 15px;
  --eg-type-meta: 12px;
  --eg-weight-regular: 400;
  --eg-weight-emphasis: 600;
  --eg-weight-display: 700;
}

body[data-eg-surface] :where(button, input, select, textarea) {
  font-family: inherit;
}

body[data-eg-surface] :where(strong, b) {
  font-weight: var(--eg-weight-emphasis) !important;
}

body[data-eg-surface] :where(p, li, dt, dd, summary, input, select, textarea) {
  font-size: var(--eg-type-body) !important;
  font-weight: var(--eg-weight-regular);
}

body[data-eg-surface] :where(
  small, label, th, .eyebrow, .kicker, .story-kicker, .minihd,
  .seclead, .period-pill, .delta, .fine, .hint, .note, .foot,
  [class$="-label"], [class$="-tag"], [class$="-meta"],
  [class$="-kicker"], [class$="-eyebrow"]
) {
  font-size: var(--eg-type-meta) !important;
  font-weight: var(--eg-weight-regular);
}

body[data-eg-surface] :where(h1, h2) {
  font-weight: var(--eg-weight-display);
}

body[data-eg-surface] :where(h3, h4, h5, h6) {
  font-weight: var(--eg-weight-emphasis);
}

body[data-eg-surface] [style*="font-weight:900"],
body[data-eg-surface] [style*="font-weight: 900"],
body[data-eg-surface] [style*="font-weight:800"],
body[data-eg-surface] [style*="font-weight: 800"] {
  font-weight: var(--eg-weight-display) !important;
}

/* Gate: display / body / meta. */
body[data-eg-surface="home"] .slogan,
body[data-eg-surface="home"] .card p,
body[data-eg-surface="home"] .card .go {
  font-size: var(--eg-type-body) !important;
}

body[data-eg-surface="home"] :where(.qsub, .resume, .langtoggle button,
  .langtoggle .sep, .card .mono, .note, .foot) {
  font-size: var(--eg-type-meta) !important;
}

body[data-eg-surface="home"] :where(h1, .card h3) {
  font-weight: var(--eg-weight-display) !important;
}

body[data-eg-surface="home"] :where(.slogan, .card .go, .langtoggle button) {
  font-weight: var(--eg-weight-emphasis) !important;
}

/* Brand and Realtor: one body size for readable copy, one meta size for
   navigation/supporting labels, and one display size per local module. */
body[data-eg-surface="brand"] :where(button, .btn, .hero-sub, .quote-card-sub,
  .quote-card-list li, .quote-p, .reelintro, .ai-text, .ai-mopt,
  .ai-serviceline, .ai-talkline, .ai-brief-quote, .ai-ho p,
  .ai-sent-sub, .form-status) {
  font-size: var(--eg-type-body) !important;
}

body[data-eg-surface="brand"] :where(.brand-slogan, .hero-label, .problem-label,
  .pv-label, .pv-gaplabel, .tl-viz-label, .tl-viz-tag, .sv-tx,
  .tl-num, .svc-label, .svc-meta, .work-filter, .wf-n,
  .quote-card-list li span, .quote-fine, .qbudget-ticks, .qlabel,
  .linklike, .ai-badge, .ai-count, .ai-pickhint, .ai-brief-lead,
  .ai-brief-list li, .ai-brief-toggle, .ph-note, .price-group,
  .reelcap, .cookie-banner-btn, .qcal-weekdays span, .qcal-footer button,
  footer :where(a, span)) {
  font-size: var(--eg-type-meta) !important;
}

body[data-eg-surface="brand"] :where(.ai-core, .quote-h, .quote-card-title) {
  font-weight: var(--eg-weight-emphasis) !important;
}

body[data-eg-surface="brand"] :where(.mut, .gold, .keep-sig) {
  font-weight: inherit !important;
}

body:is([data-eg-surface="realtor"], :has(.realtor-nav)) :where(
  span[style*="font-size:17px"], span[style*="font-size:16.5px"],
  span[style*="font-size:16px"], span[style*="font-size:15.5px"],
  span[style*="font-size:15px"], span[style*="font-size:14.5px"],
  span[style*="font-size:14px"], span[style*="font-size:13.5px"],
  span[style*="font-size:13px"]
) {
  font-size: var(--eg-type-body) !important;
}

body:is([data-eg-surface="realtor"], :has(.realtor-nav)) :where(
  span[style*="font-size:12.5px"], span[style*="font-size:12px"],
  span[style*="font-size:11.5px"], span[style*="font-size:11px"],
  span[style*="font-size:10.5px"], span[style*="font-size:10px"],
  span[style*="font-size:9.5px"], span[style*="font-size:9px"],
  span[style*="font-size:8.5px"], .eg-slogan, .eg-lang,
  .eg-kicker, [data-loop], footer :where(a, span)
) {
  font-size: var(--eg-type-meta) !important;
}

body:is([data-eg-surface="realtor"], :has(.realtor-nav)) :where(.eg-ratebox span, summary) {
  font-weight: var(--eg-weight-emphasis) !important;
}

/* Owner report: denser data remains readable, but every card still uses only
   display / body / meta. */
body[data-eg-surface="report"] :where(h1) {
  font-weight: var(--eg-weight-regular) !important;
}

body[data-eg-surface="report"] :where(h2, h3) {
  font-weight: var(--eg-weight-emphasis) !important;
}

body[data-eg-surface="report"] :where(.sub, .owner-intro p, .owner-lead,
  .action-item b, .action-item span, .signal-sub, .section-label p,
  .story-head p, .story-takeaway, .story-data, .journey-toolbar p,
  .journey-panel .panel-q, .journey-conclusion .insight p,
  .manual-head p, .manual-status, .business-note, .dialog-body,
  .insight p, .legend, .bar, .secrow, td) {
  font-size: var(--eg-type-body) !important;
}

body[data-eg-surface="report"] :where(.brand, .statusline, .kpi .label,
  .kpi .delta, .kpi .foot, .chip, .donut .hole .s, th, .tag,
  .sparky, .sparkx, .spark .col b, .journey-window,
  .analysis-metric .am-label, .analysis-metric .am-note,
  .story-kicker, .minihd, .manual-field label, .manual-check span,
  .manual-toggle, .manual-save, .manual-delete, .source-badge, footer) {
  font-size: var(--eg-type-meta) !important;
}

body[data-eg-surface="report"] :where(.owner-card h2, .story-head h3,
  .journey-toolbar h3, .journey-panel h3, .manual-head h3) {
  font-weight: var(--eg-weight-emphasis) !important;
}

body[data-eg-surface="report"] :where(.manual-field input,
  .manual-field select, .manual-field textarea) {
  font-size: var(--eg-type-body) !important;
  font-weight: var(--eg-weight-regular) !important;
}

body[data-eg-surface="report"] :where(.panel-answer) {
  font-size: var(--eg-type-body) !important;
  font-weight: var(--eg-weight-regular) !important;
}

body[data-eg-surface="report"] :where(.info-btn, .ih, .signal-chip,
  .btn, .ftab, .manual-toggle, .manual-save, .manual-delete) {
  font-size: var(--eg-type-meta) !important;
  font-weight: var(--eg-weight-emphasis) !important;
}

body[data-eg-surface="report"] :where(.label, .delta, .foot, .am-label,
  .am-note, .story-kicker, .minihd, .period-pill) {
  font-weight: var(--eg-weight-regular) !important;
}

body[data-eg-surface="report"] :where(.secrow .vl, .bar .vl) {
  font-weight: var(--eg-weight-emphasis) !important;
}

body[data-eg-surface="report"] .donut .hole .t {
  font-size: 18px !important;
}

body[data-eg-surface="report"] .owner-card h2 {
  font-size: var(--eg-type-body) !important;
}

body[data-eg-surface="report"] :where(.manual-check span, .source-badge) {
  font-weight: var(--eg-weight-emphasis) !important;
}

body[data-eg-surface="report"] .bars .bgrp .t {
  font-size: var(--eg-type-body) !important;
}

body[data-eg-surface="report"] :where(.manual-head h3, .manual-close) {
  font-size: 18px !important;
}

body[data-eg-surface="report"] .dialog-close {
  font-size: 20px !important;
}

/* Rate card, owner studio and OTP: normalize the legacy 9.5–14px ladder. */
body:is([data-eg-surface="rates"], [data-eg-surface="rates-studio"]) :where(.gate-opt, .gate-sub, .gate-input,
  .gate-consent, .gate-err, .gate-ok, .gate-btn, .rc-sec-sub,
  .rc-item-name, .rc-item-detail li, .rc-pkg-vol, .rc-pkg-hook,
  .rc-pkg-comp, .rc-pkg-benefits li, .rc-ztable-zone, .rc-ztable-area,
  .rc-td-policy, .rc-td-list li, .rc-term-lbl, .rc-term-content,
  .rc-footer .f-contact) {
  font-size: var(--eg-type-body) !important;
}

body:is([data-eg-surface="rates"], [data-eg-surface="rates-studio"]) :where(.gate-lang button, .gate-count,
  .gate-flabel, .gate-budget-ticks, .gate-enter, .rc-hero-mark,
  .rc-hero-meta small, .rc-prepared .lbl, .rc-sec-tag,
  .rc-group-head small, .rc-item-name small, .rc-item-hook,
  .rc-item-price small, .rc-hint, .rc-cat-tag, .rc-badge,
  .rc-pkg-cat, .rc-pkg-sample, .rc-pkg-more, .rc-pkg-complbl,
  .rc-ztable-head, .rc-ztable-fee small, .rc-zone-note,
  .rc-term-lbl small, .rc-terms-toggle, .rc-zonemap-legend,
  .rc-footer .tg, .cv-nav button, .cv-tip) {
  font-size: var(--eg-type-meta) !important;
}

body:is([data-eg-surface="rates"], [data-eg-surface="rates-studio"]) .gate-lang .on {
  font-weight: var(--eg-weight-emphasis) !important;
}

body:is([data-eg-surface="rates"], [data-eg-surface="rates-studio"]) :where(.gate-q, .gate-budget-val,
  .rc-hero h1, .rc-sec-title, .rc-group-head .gname, .rc-item-price,
  .rc-cat-name, .rc-pkg-name, .rc-pkg-tier b, .rc-pkg-final,
  .rc-ztable-fee) {
  font-weight: var(--eg-weight-display) !important;
}

body:is([data-eg-surface="rates"], [data-eg-surface="rates-studio"]) :where(.rc-pkg-name, .rc-pkg-tier b,
  .rc-pkg-final) {
  font-size: 22px !important;
}

body[data-eg-surface="rates-studio"] :where(.field > label,
  .acc-mover-lbl, .acc-head .count, .save-state, .ed-cat-head,
  .btn.tiny, .icon-btn, .card-edit-head .idx) {
  font-size: var(--eg-type-meta) !important;
}

body[data-eg-surface="rates-studio"] :where(.field input, .field textarea,
  .field select, .acc-head .ttl, .card-edit-head .nm, .add-line,
  .toggle-field label, .btn:not(.tiny)) {
  font-size: var(--eg-type-body) !important;
}

body[data-eg-surface="rate-code"] :where(.sub, .to, .err, .btn, .resend) {
  font-size: var(--eg-type-body) !important;
}

body[data-eg-surface="rate-code"] :where(.fine) {
  font-size: var(--eg-type-meta) !important;
}

/* Operations dashboard: title / table copy / metadata. */
body[data-eg-surface="ops"] :where(.subtitle, table, td, .note, .lead,
  ol li, .err, .archive-list) {
  font-size: var(--eg-type-body) !important;
}

body[data-eg-surface="ops"] :where(.eyebrow, .tab, h2, th, .env-badge,
  .st, td.ver, td.ver .date, td.ver .hint, code, .foot) {
  font-size: var(--eg-type-meta) !important;
}

@media (max-width: 420px) {
  :root {
    --eg-type-body: 15px;
    --eg-type-meta: 12px;
  }
}