/* Embedded screens inherit the root design; layout improvements also serve standalone use. */
@font-face {font-family:"Noto Sans Myanmar";font-style:normal;font-weight:400;font-display:swap;src:url("/31-realms/assets/fonts/NotoSansMyanmar-Regular.ttf") format("truetype")}
@font-face {font-family:"Noto Sans Myanmar";font-style:normal;font-weight:700;font-display:swap;src:url("/31-realms/assets/fonts/NotoSansMyanmar-Bold.ttf") format("truetype")}
@font-face {font-family:"Noto Serif Myanmar";font-style:normal;font-weight:700;font-display:swap;src:url("/31-realms/assets/fonts/NotoSerifMyanmar-Bold.ttf") format("truetype")}

@media screen {
  :root[data-embedded="true"] {
    --bg:var(--site-page,#120807);--paper:var(--site-surface,#211211);--ink:var(--site-text,#fff7e8);--muted:var(--site-muted,#c9bdb0);
    --gold:var(--site-primary,#f7c62f);--gold2:var(--site-accent,#7de2c3);--line:var(--site-border,#8e681c);
    --green:var(--site-accent,#7de2c3);--blue:var(--site-primary,#f7c62f);--red:var(--site-accent,#7de2c3);--purple:var(--site-primary,#f7c62f);
    --green2:var(--site-surface-strong,#4a1a1a);--blue2:var(--site-surface-strong,#4a1a1a);--red2:var(--site-surface-strong,#4a1a1a);--purple2:var(--site-surface-strong,#4a1a1a);
    --shadow:0 8px 24px #0002;
    font-family:var(--site-body-font,"Noto Sans Myanmar",sans-serif);font-size:var(--custom-font-size,16px);
  }
  :root[data-embedded="true"] body {background:var(--bg);color:var(--ink);overflow-wrap:anywhere}
  :root[data-embedded="true"] :is(h1,h2,h3,h4) {font-family:var(--site-heading-font,"Noto Serif Myanmar",serif);color:var(--gold)}
  :root[data-embedded="true"] .shell {background:var(--bg);padding-bottom:calc(var(--carita-nav-height,90px) + 1rem)}
  :root[data-embedded="true"] :is(.header,.bottom-nav) {background:var(--paper);color:var(--ink);border-color:var(--line)}
  :root[data-embedded="true"] .brand > div {min-width:0}
  :root[data-embedded="true"] .logo {flex:0 0 48px;background:var(--site-surface-strong,#4a1a1a);box-shadow:none}
  :root[data-embedded="true"] :is(.progress,.bar) {background:var(--site-surface-strong,#4a1a1a)}
  :root[data-embedded="true"] :is(.progress>div,.bar span,.bar.green span,.bar.blue span) {background:linear-gradient(90deg,var(--gold),var(--gold2))}
  :root[data-embedded="true"] :is(.card,.metric,.source-item,.report-box,.finding) {background:var(--paper);color:var(--ink);border-color:var(--line)}
  :root[data-embedded="true"] :is(.notice,.notice.red,.notice.green,.notice.blue,.notice.purple,.submission-card,.finding.risk,.finding.good,.finding.info) {background:var(--site-surface-strong,#4a1a1a);color:var(--ink);border-color:var(--gold2)}
  :root[data-embedded="true"] :is(.badge,.tag,.source-layer,.badge.green,.badge.red,.badge.blue,.badge.purple,.tag.locked,.tag.green,.tag.blue,.tag.purple) {background:var(--site-surface-strong,#4a1a1a);color:var(--ink);border:1px solid var(--line)}
  :root[data-embedded="true"] :is(.btn,.choice,.scale button,.field input,.field select,.field textarea,.install-banner button) {min-width:0;max-width:100%;min-height:max(44px,var(--custom-button-height,44px));border:1px solid var(--line);border-radius:var(--custom-button-radius,10px);background:var(--paper);color:var(--site-on-surface,var(--ink));line-height:1.8;white-space:normal;overflow-wrap:anywhere}
  :root[data-embedded="true"] :is(.btn-primary,.btn-blue,.btn-gold,.scale button.active) {background:var(--site-button-bg,var(--site-surface-strong,#4a1a1a));color:var(--site-button-ink,var(--site-on-strong,#fff7e8));border-color:var(--site-button-border,var(--gold));box-shadow:none}
  :root[data-embedded="true"] .btn.btn-danger {background:var(--site-surface-strong,#4a1a1a);color:var(--site-on-strong,var(--ink));border-color:var(--gold2)}
  :root[data-embedded="true"] .choice.selected {color:var(--site-on-strong,var(--ink));background:var(--site-surface-strong,#4a1a1a);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
  :root[data-embedded="true"] .field input[type="checkbox"] {min-height:0;accent-color:var(--gold)}
  :root[data-embedded="true"] input[type="range"] {accent-color:var(--gold)}
  :root[data-embedded="true"] :is(.time-pill,.install-banner) {background:var(--site-surface-strong,#4a1a1a);color:var(--ink);border:1px solid var(--line)}
  :root[data-embedded="true"] :is(.submit-status,.submit-status.success,.submit-status.error) {color:var(--gold2)}
  :root[data-embedded="true"] :is(button,a,input,select,textarea,summary):focus-visible {outline:3px solid var(--site-focus,var(--gold2));outline-offset:3px}
  :root[data-embedded="true"] :is(.actions,.timer-controls) {flex-wrap:wrap}
  :root[data-embedded="true"] .actions {background:var(--bg);bottom:calc(var(--carita-nav-height,90px) + 8px);gap:.6rem;padding:.75rem 0}
  :root[data-embedded="true"] .actions .btn {flex:1 1 120px}
  :root[data-embedded="true"] .timer-controls button {flex:1 1 110px}
  :root[data-embedded="true"] .bottom-nav {grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
  :root[data-embedded="true"] .bottom-nav button {min-width:0;min-height:max(44px,var(--custom-button-height,44px));border-radius:var(--custom-button-radius,10px);line-height:1.8;overflow-wrap:anywhere}
  :root[data-embedded="true"] .bottom-nav button.active {background:var(--site-surface-strong,#4a1a1a);color:var(--site-on-strong,var(--ink))}
  :root[data-embedded="true"] .scale {grid-template-columns:repeat(5,minmax(0,1fr))}
  :root[data-embedded="true"] .scale button {font-size:.8rem;padding-inline:2px}
  :root[data-embedded="true"] .score-top > span {min-width:0}
  :root[data-embedded="true"] .score-top > strong {flex-shrink:0}
  :root[data-embedded="true"] .inline-check > span {min-width:0}
  @media(max-width:620px) {
    :root[data-embedded="true"] .hero {padding-inline:0}
    :root[data-embedded="true"] .brand {gap:8px}
    :root[data-embedded="true"] .bottom-nav button {font-size:.75rem}
  }
}

/* Shared structure. Every color resolves through the host or the document's existing tokens. */
@media screen {
  #app {
    --carita-gap:clamp(.7rem,2vw,1.1rem);
    overflow-wrap:anywhere;
    line-height:1.8;
  }
  #app :is(button,input,select,textarea) {font-family:inherit}
  #app :is(button,a,input,select,textarea,summary):focus-visible {
    outline:3px solid var(--site-focus,var(--gold2));
    outline-offset:3px;
  }
  #app :is(button,a,input,select,textarea) {touch-action:manipulation}
  #app :is(button,.btn,.record-open,.source-link,summary) {
    min-height:max(44px,var(--custom-button-height,44px));
  }
  #app :is(button,.btn) {
    min-width:0;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.8;
  }
  #app :is(.main,.card,.question,.finding,.field,.guide-card,.meditation-item,.result-summary) {min-width:0}
  #app :is(h1,h2,h3,h4,p,li,.subtle,.help,.tiny) {overflow-wrap:anywhere}
  #app :is(h2,h3,h4) {line-height:1.75}
  #app .card {padding:clamp(.9rem,2.4vw,1.3rem)}
  #app .hero {padding-block:1.5rem 1rem}
  #app .hero p {max-width:40rem}
  #app .hero .lotus {font-size:3.7rem}
  #app .home-actions {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
    gap:var(--carita-gap);
    margin-block:1.4rem .7rem;
  }
  #app .home-actions .btn {width:100%;padding:1rem}
  #app .quick-links {display:flex;flex-wrap:wrap;gap:.65rem;margin-block:1rem}
  #app .quick-links > :is(a,button) {flex:1 1 10rem;text-align:center}
  #app .quick-links .guide-card > :is(strong,span) {display:block}
  #app .quick-links .guide-card > strong {color:var(--gold);margin-bottom:.4rem}
  #app .quick-links .guide-card > span {font-size:.85rem;color:var(--muted)}
  #app .journey-overview {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
    gap:.85rem;
    padding:0;
    margin-block:1rem;
    list-style-position:inside;
  }
  #app .journey-overview > * {
    min-width:0;
    padding:1rem;
    border:1px solid var(--line);
    border-radius:var(--custom-button-radius,12px);
    background:var(--site-surface-strong,var(--paper));
  }
  #app .journey-overview :is(strong,b) {display:block;color:var(--gold)}
  #app :is(.survey-tools,.question-page-nav,.result-actions,.catalogue-toolbar) {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.65rem;
    margin-block:1rem;
  }
  #app :is(.survey-tools,.result-actions) > .btn {flex:1 1 12rem}
  #app .survey-tools {padding-bottom:1rem;border-bottom:1px solid var(--line)}
  #app .question-progress {
    display:block;
    padding:.8rem 1rem;
    background:var(--site-surface-strong,var(--paper));
    border:1px solid var(--line);
    border-radius:var(--custom-button-radius,10px);
    color:var(--ink);
    font-weight:700;
  }
  #app .question-progress > span {display:block;font-weight:400;margin-top:.35rem}
  #app .question {
    padding-block:1.2rem;
    margin-block:.5rem;
    border-bottom:1px solid var(--line);
    scroll-margin-block:1.5rem;
  }
  #app .question:last-child {border-bottom:0}
  #app .question h3 {margin-top:0;font-size:1rem}
  #app .question.unanswered {
    border:2px solid var(--site-accent,var(--gold2));
    border-radius:var(--custom-button-radius,12px);
    padding:1rem;
  }
  #app .unanswered :is(.question-status,.help) {color:var(--ink);font-weight:700}
  #app .scale {gap:.5rem}
  #app .scale button {
    min-height:max(52px,var(--custom-button-height,44px));
    padding:.7rem .45rem;
    font-size:.85rem;
  }
  #app .scale button:is(.active,[aria-pressed="true"]) {
    font-weight:700;
    border:2px solid var(--gold);
    box-shadow:inset 0 -3px 0 var(--gold);
  }
  #app .skip-answer {
    display:block;
    width:100%;
    margin-top:.65rem;
    padding:.6rem .8rem;
    border:1px dashed var(--line);
    border-radius:var(--custom-button-radius,10px);
    background:var(--paper);
    color:var(--muted);
    font-size:.88rem;
  }
  #app .skip-answer:is(.active,[aria-pressed="true"]) {
    border-style:solid;
    border-color:var(--gold);
    color:var(--site-on-strong,var(--ink));
    background:var(--site-surface-strong,var(--paper));
    font-weight:700;
  }
  #app .question-page-nav {justify-content:space-between;padding-block:.7rem}
  #app .question-page-nav > :is(button,.btn) {flex:1 1 8rem}
  #app .question-page-nav > :is(span,p) {flex:1 1 100%;text-align:center;margin:0}
  /* Flowing actions cannot obscure the final answer when text size is increased. */
  #app .actions {position:static;background:var(--bg);padding-block:1rem;gap:.65rem;flex-wrap:wrap}
  #app .actions .btn {flex:1 1 10rem}
  #app .guide-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
    gap:var(--carita-gap);
    margin-block:1rem;
  }
  #app .guide-card {
    padding:1.1rem;
    border:1px solid var(--line);
    border-radius:var(--custom-button-radius,14px);
    background:var(--paper);
    color:var(--ink);
  }
  #app .guide-card :is(h3,h4) {margin-top:0;color:var(--gold)}
  #app .guide-card p {margin-block:.5rem}
  #app .guide-card .btn {width:100%;margin-top:.7rem}
  #app .guide-steps {padding-inline-start:1.6rem;margin-block:1rem}
  #app .guide-steps li {padding-inline-start:.35rem;margin-block:.75rem;line-height:1.9}
  #app .guide-steps li::marker {color:var(--gold);font-weight:700}
  #app .catalogue-toolbar > * {flex:1 1 12rem;min-width:0}
  #app .catalogue-search {display:block;width:100%;margin-block:.5rem 1rem}
  #app :is(input.catalogue-search,.catalogue-search input) {
    width:100%;
    min-height:max(48px,var(--custom-button-height,44px));
    border:1px solid var(--line);
    border-radius:var(--custom-button-radius,10px);
    background:var(--paper);
    color:var(--ink);
    padding:.7rem .85rem;
  }
  #app :is(input,textarea)::placeholder {color:var(--muted);opacity:1}
  #app .meditation-group {margin-block:1.5rem}
  #app .meditation-group > :is(h3,h4) {padding-block:.7rem;border-bottom:1px solid var(--line)}
  #app .meditation-item {padding:1rem 0;border-bottom:1px solid var(--line)}
  #app .meditation-item:last-child {border-bottom:0}
  #app .meditation-item :is(h4,p) {margin-block:.4rem}
  #app .meditation-meta {display:flex;flex-wrap:wrap;gap:.45rem;color:var(--muted);font-size:.88rem}
  #app .meditation-meta > * {min-width:0;max-width:100%}
  #app .source-link {display:inline-flex;align-items:center;color:var(--site-primary,var(--gold));text-underline-offset:.22em;padding-block:.35rem}
  #app .result-summary {padding:1.15rem;border:1px solid var(--line);border-radius:var(--custom-button-radius,14px);background:var(--site-surface-strong,var(--paper))}
  #app .result-summary > :first-child {margin-top:0}
  #app .result-summary > :last-child {margin-bottom:0}
  #app .result-actions {padding-top:.7rem;border-top:1px solid var(--line)}
  #app .insight-label {display:block;font-size:.88rem;color:var(--muted);line-height:1.8;margin-block:.4rem}
  #app :is(.inline-status,.storage-notice) {
    padding:.75rem .9rem;
    margin-block:.8rem;
    border-inline-start:3px solid var(--site-accent,var(--gold2));
    background:var(--site-surface-strong,var(--paper));
    color:var(--ink);
    font-size:.9rem;
    line-height:1.85;
  }
  #app :is(.inline-status,.storage-notice):empty {display:none}
  #app .practice-session {padding:1rem;border:1px solid var(--line);border-radius:var(--custom-button-radius,14px);background:var(--paper);color:var(--ink)}
  #app .clock {font-size:clamp(2rem,12vw,3.5rem);line-height:1.6;overflow-wrap:normal}
  #app .record-open {display:flex;align-items:center;justify-content:center;width:100%;margin-top:.65rem;padding:.65rem 1rem;border:1px solid var(--line);border-radius:var(--custom-button-radius,10px);background:var(--paper);color:var(--ink);text-align:center}
  #app .bottom-nav {gap:3px}
  #app .bottom-nav button {line-height:1.8;overflow-wrap:anywhere}
  #app :is(.k40,.library) summary {padding-block:.5rem}
  #app details[open] > summary {color:var(--gold);margin-bottom:.5rem}
  #app :is(.source-item,.finding) p {line-height:1.85}
  #app :is(.timer-controls,.file-actions) {flex-wrap:wrap}
  #app :is(.timer-controls,.file-actions) > button {flex:1 1 10rem}
  @media(max-width:620px) {
    #app .header {position:static}
    #app .main {padding-inline:.75rem}
    #app .scale {grid-template-columns:1fr}
    #app .scale button {font-size:.95rem;padding:.6rem .85rem;text-align:start}
    #app .scale-labels {display:none}
    #app :is(.home-actions,.guide-grid,.journey-overview) {grid-template-columns:1fr}
    #app :is(.survey-tools,.result-actions) > .btn {flex-basis:100%}
    #app .bottom-nav button {padding-inline:2px;font-size:.78rem}
  }
  @media(prefers-reduced-motion:reduce) {
    :root {scroll-behavior:auto}
    #app *,#app *::before,#app *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  }
}

/* Browser Save PDF must remain legible even while the host uses a dark palette. */
@media print {
  #app :is(button,.survey-tools,.question-page-nav,.result-actions,.file-actions,.inline-status,.storage-notice) {display:none!important}
  #app details > summary {list-style:none;font-weight:700}
  :root[data-embedded="true"] {color-scheme:light!important;font-size:12pt}
  :root[data-embedded="true"] body,:root[data-embedded="true"] .shell {background:#fff;color:#111;padding-bottom:0;box-shadow:none}
  :root[data-embedded="true"] :is(.card,.notice,.finding,.metric,.report-box,.source-item,.badge,.tag,.source-layer,.time-pill,.guide-card,.meditation-item,.result-summary,.practice-session) {background:#fff;color:#111;border-color:#777;box-shadow:none}
  :root[data-embedded="true"] :is(h1,h2,h3,h4,p,small,a,.subtle,.tiny,.score-top) {color:#111}
}