:root{--ink:#514a42;--muted:#7f766d;--faint:#aaa198;--line:rgba(118,97,78,.18);--line2:rgba(118,97,78,.32);--paper:rgba(255,255,255,.58);--paper2:rgba(255,255,255,.94);--warm:#f5eadb;--rose:#f4e6df;--green:#eaf0e5;--shadow:0 15px 38px rgba(103,82,62,.08);--danger:#7c5048}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.98),rgba(255,255,255,0) 33%),linear-gradient(180deg,#fbf7ef,#eee3d2)}button,textarea{font:inherit}.app-shell{min-height:100vh;padding:20px 14px 42px}.topbar{width:min(100%,980px);margin:0 auto 26px;display:flex;justify-content:space-between;gap:14px;align-items:center}.brand-button{border:0;background:transparent;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;font-size:12px;cursor:pointer}.language-switch{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.language-switch button,.connection-badge{min-height:37px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.46);color:var(--muted)}.language-switch button{cursor:pointer}.language-switch button.active{background:var(--paper2);border-color:var(--line2);color:var(--ink)}
.screen{width:min(100%,980px);margin:0 auto;min-height:650px;display:flex;align-items:flex-start;justify-content:center;padding-top:28px}.panel{width:100%;padding:34px;border:1px solid var(--line);border-radius:34px;background:var(--paper);box-shadow:var(--shadow);text-align:center}.panel.narrow{max-width:860px}.eyebrow{margin:0 0 14px;font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--faint)}h1,h2{margin:0;letter-spacing:-.04em;line-height:1.42;word-break:keep-all}h1{font-size:clamp(36px,6vw,58px)}h2{font-size:clamp(28px,4vw,40px)}.lead{max-width:720px;margin:15px auto 0;color:var(--muted);font-size:16px;line-height:1.9;word-break:keep-all}.quiet-note{max-width:720px;margin:18px auto 0;padding:15px 17px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.38);color:var(--muted);font-size:14px;line-height:1.78;word-break:keep-all}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}.primary,.secondary,.quiet-link{min-height:50px;padding:0 21px;border-radius:999px;cursor:pointer}.primary{border:1px solid var(--line2);background:var(--paper2);color:var(--ink);box-shadow:0 10px 24px rgba(105,84,64,.09);font-size:17px}.secondary{border:1px solid var(--line);background:rgba(255,255,255,.44);color:var(--muted)}.quiet-link{border:0;background:transparent;color:var(--faint)}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}.mode-card{position:relative;min-height:190px;padding:27px 56px 27px 27px;border:1px solid var(--line2);border-radius:30px;color:var(--ink);cursor:pointer;text-align:left;transition:transform .2s ease,box-shadow .2s ease}.mode-card.positive{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(235,242,228,.88))}.mode-card.difficult{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,229,221,.88))}.mode-card:hover,.mode-card:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);outline:none}.mode-symbol{display:block;font-size:28px;color:var(--faint);margin-bottom:18px}.mode-title{display:block;font-size:23px;line-height:1.45;font-weight:700;letter-spacing:-.03em;word-break:keep-all}.mode-lead{display:block;margin-top:10px;color:var(--muted);font-size:14px;line-height:1.75;word-break:keep-all}.mode-arrow{position:absolute;right:23px;bottom:22px;color:var(--faint);font-size:22px}
.input-card{position:relative;z-index:10;pointer-events:auto!important;margin-top:22px;text-align:left;transform:none!important;opacity:1!important;animation:none!important}.input-card textarea,.editable-draft,.focus-custom textarea{position:relative;z-index:11;width:100%;padding:19px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--ink);resize:vertical;outline:none;line-height:1.9;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;touch-action:auto;caret-color:var(--ink);cursor:text;word-break:keep-all;overflow-wrap:break-word}.input-card textarea{min-height:210px;font-size:17px}.editable-draft{min-height:185px;font-size:18px}.focus-custom textarea{min-height:110px;font-size:16px}.input-card textarea:focus,.editable-draft:focus,.focus-custom textarea:focus{background:rgba(255,255,255,.96);border-color:var(--line2);outline:2px solid rgba(118,97,78,.13);outline-offset:2px}.input-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}.example-button{border:0;background:transparent;color:var(--muted);padding:5px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.counter{font-size:12px;color:var(--faint)}
.mirror-card,.letter-card{margin-top:22px;padding:26px;border:1px solid var(--line2);border-radius:28px;background:var(--paper2);text-align:left}.card-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}.mirror-text,.letter-text{margin:13px 0 0;font-size:19px;line-height:1.95;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word}.mirror-confirm{margin-top:22px;font-size:22px}.comfort-card{margin-top:22px;padding:30px;border-radius:30px;border:1px solid rgba(151,116,82,.22);box-shadow:0 18px 44px rgba(126,91,58,.09);text-align:left}.comfort-card.positive{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(235,242,228,.82))}.comfort-card.difficult{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,235,217,.8))}.comfort-card p{margin:0;font-size:20px;line-height:2;word-break:keep-all;overflow-wrap:break-word}
.focus-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.focus-option{min-height:112px;padding:20px;border:1px solid var(--line);border-radius:25px;background:rgba(255,255,255,.5);color:var(--ink);cursor:pointer;text-align:left;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;font-size:16px;line-height:1.7;word-break:keep-all;transition:transform .18s ease,border-color .18s ease,background .18s ease}.focus-option:hover,.focus-option:focus-visible{transform:translateY(-1px);border-color:var(--line2);outline:none}.focus-option.selected{background:var(--paper2);border-color:var(--line2);box-shadow:var(--shadow)}.focus-check{flex:0 0 auto;color:var(--faint)}.focus-option.selected .focus-check{color:var(--ink)}.focus-custom{margin-top:14px;padding:20px;border-radius:25px;border:1px solid var(--line2);background:rgba(255,255,255,.52);text-align:left}.focus-custom label{display:block;margin-bottom:10px;color:var(--muted);font-size:14px}.focus-summary{margin-top:20px;padding:17px 20px;border-radius:22px;border:1px solid rgba(151,116,82,.22);background:rgba(247,235,217,.55);text-align:left}.focus-summary p{margin:9px 0 0;font-size:16px;line-height:1.75;word-break:keep-all}
.review-grid{display:grid;grid-template-columns:1fr;gap:13px;margin-top:14px}.review-card{padding:22px;border-radius:27px;border:1px solid var(--line);background:rgba(255,255,255,.47);text-align:left}.review-card.main{background:var(--paper2);border-color:var(--line2);box-shadow:var(--shadow)}.review-card p{margin:12px 0 0;white-space:pre-wrap;font-size:17px;line-height:1.95;word-break:keep-all;overflow-wrap:break-word}.craft-card{margin-top:14px;padding:20px 22px;border-radius:24px;border:1px dashed var(--line2);background:rgba(255,255,255,.38);text-align:left}.craft-card p{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.85;word-break:keep-all;overflow-wrap:break-word}.safety-audit{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}.safety-audit span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.38);font-size:12px;color:var(--muted)}.status-line{min-height:27px;margin:14px 0 0;color:var(--muted);font-size:14px;line-height:1.75}.quiet-wait{padding:48px 20px}.quiet-wait-main{font-size:21px;line-height:1.85;word-break:keep-all}.quiet-wait-support{color:var(--muted);line-height:1.8;word-break:keep-all}.ending-card{padding:20px 0 8px}
.quiet-footer{width:min(100%,980px);margin:20px auto 0;display:flex;justify-content:space-between;gap:14px;align-items:center;color:var(--faint);font-size:12px;line-height:1.65}.connection-badge{display:inline-flex;align-items:center;white-space:nowrap}.connection-badge[data-state="error"]{color:var(--danger);border-color:rgba(124,80,72,.25)}.build-label{display:inline-flex;align-items:center;justify-content:center;padding:.28rem .55rem;border:1px solid rgba(87,77,67,.14);border-radius:999px;font-size:.72rem;letter-spacing:.04em;color:rgba(87,77,67,.54);background:rgba(255,255,255,.34);white-space:nowrap}
.screen[data-rhythm="slow"] .panel{animation:roomIn .62s ease both}.screen[data-rhythm="slow"] .eyebrow{animation:softIn .62s .14s ease both}.screen[data-rhythm="slow"] h1,.screen[data-rhythm="slow"] h2{animation:softIn .68s .28s ease both}.screen[data-rhythm="slow"] .lead,.screen[data-rhythm="slow"] .quiet-note,.screen[data-rhythm="slow"] .mode-grid,.screen[data-rhythm="slow"] .input-card,.screen[data-rhythm="slow"] .mirror-card,.screen[data-rhythm="slow"] .comfort-card,.screen[data-rhythm="slow"] .focus-options,.screen[data-rhythm="slow"] .focus-summary,.screen[data-rhythm="slow"] .review-grid,.screen[data-rhythm="slow"] .craft-card{animation:softIn .7s .44s ease both}.screen[data-rhythm="slow"] .actions{animation:softIn .68s .64s ease both}@keyframes roomIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes softIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:760px){.app-shell{padding:18px 12px 36px}.topbar{align-items:flex-start}.screen{padding-top:18px;min-height:580px}.panel{padding:24px 17px;border-radius:28px}.mode-grid,.focus-options{grid-template-columns:1fr}.mode-card{min-height:160px}.quiet-footer{align-items:flex-start;flex-direction:column}.language-switch button{padding:0 10px}.mirror-text,.letter-text{font-size:18px}.comfort-card p{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* v0.6.1 Input Reliability Fix */
.screen[data-view="input"] .panel{pointer-events:auto!important}
.screen[data-view="input"] .input-card{animation:none!important;transform:none!important;opacity:1!important}
.screen[data-view="input"] textarea,.editable-draft,.focus-custom textarea{pointer-events:auto!important;-webkit-user-select:text!important;user-select:text!important;touch-action:auto!important}

/* v0.6.2 Language Switch + Input Stability Fix */
.screen[data-view="input"] .panel,
.screen[data-view="input"] .eyebrow,
.screen[data-view="input"] h2,
.screen[data-view="input"] .lead,
.screen[data-view="input"] .input-card,
.screen[data-view="input"] .actions {
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}
.screen[data-view="input"] textarea#words {
  display:block!important;
  position:relative!important;
  z-index:auto!important;
  pointer-events:auto!important;
  -webkit-user-select:text!important;
  user-select:text!important;
  touch-action:manipulation!important;
  -webkit-appearance:none;
  appearance:none;
  caret-color:var(--ink)!important;
  cursor:text!important;
}
.screen[data-view="input"] textarea#words[disabled],
.screen[data-view="input"] textarea#words[readonly] {
  opacity:1!important;
}

/* v0.6.3 Persistent Native Input Fix */
[hidden]{display:none!important}
.persistent-input-screen{padding-top:28px}
.persistent-input-screen,
.persistent-input-screen .panel,
.persistent-input-screen .eyebrow,
.persistent-input-screen h2,
.persistent-input-screen .lead,
.persistent-input-screen .input-card,
.persistent-input-screen .actions{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}
.persistent-input-screen .input-card{
  position:relative;
  z-index:1;
  pointer-events:auto!important;
}
.persistent-input-screen textarea#words{
  display:block!important;
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  min-height:210px!important;
  pointer-events:auto!important;
  user-select:text!important;
  -webkit-user-select:text!important;
  touch-action:auto!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  caret-color:var(--ink)!important;
  cursor:text!important;
}
.persistent-input-screen .input-card.has-focus textarea#words{
  background:rgba(255,255,255,.98)!important;
  border-color:var(--line2)!important;
  outline:2px solid rgba(118,97,78,.16)!important;
  outline-offset:2px!important;
}

/* v0.6.8 Messy Heart Dual Anchor + Return Gate */
.mirror-guide{max-width:760px;margin:18px auto 0;padding:16px 18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.42);text-align:left;display:grid;gap:6px;color:var(--muted);line-height:1.75;word-break:keep-all}.mirror-guide strong{color:var(--ink);font-size:15px}.mirror-guide span{font-size:14px}.mirror-gate-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.mirror-gate-actions .primary,.mirror-gate-actions .secondary,.mirror-gate-actions .quiet-link{width:100%;min-height:54px}.mirror-gate-actions .quiet-link{grid-column:1/-1}.source-words-card{margin-top:20px;padding:20px 22px;border:1px dashed var(--line2);border-radius:24px;background:rgba(255,255,255,.38);text-align:left}.source-words-card p{margin:10px 0 0;max-height:250px;overflow:auto;white-space:pre-wrap;color:var(--muted);font-size:15px;line-height:1.85;word-break:keep-all;overflow-wrap:break-word}.mirror-feedback-box{margin-top:16px}.anchor-section{margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.3);text-align:left}.anchor-section h3{margin:0;font-size:21px;letter-spacing:-.03em;line-height:1.55;word-break:keep-all}.anchor-lead{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.75;word-break:keep-all}.anchor-section .focus-options{margin-top:16px}.direction-section{background:rgba(247,235,217,.36)}.direction-option{background:rgba(255,255,255,.62)}.direction-summary{margin-top:14px!important;padding-top:13px;border-top:1px solid var(--line);color:var(--muted)}.direction-summary strong{color:var(--ink);font-size:13px;letter-spacing:.02em}.screen[data-rhythm="slow"] .mirror-guide,.screen[data-rhythm="slow"] .anchor-section,.screen[data-rhythm="slow"] .source-words-card{animation:softIn .7s .38s ease both}
@media(max-width:760px){.mirror-gate-actions{grid-template-columns:1fr}.mirror-gate-actions .quiet-link{grid-column:auto}.anchor-section{padding:18px 14px}.source-words-card p{max-height:210px}.mirror-guide{padding:14px 15px}}


/* v0.6.8.3 Silent Onboarding Gate */
.silent-welcome{min-height:560px;display:flex;align-items:center;justify-content:center;padding-top:72px;padding-bottom:72px}
.silent-welcome-inner{width:min(100%,620px);margin:0 auto}
.silent-welcome h1{max-width:560px;margin-left:auto;margin-right:auto}
.silent-welcome .lead{max-width:560px;margin-left:auto;margin-right:auto;line-height:1.95}
.silent-welcome .actions{margin-top:38px}
.silent-welcome .primary{min-width:240px}
.screen[data-view="welcome"] .quiet-footer{opacity:.76}
@media(max-width:760px){.silent-welcome{min-height:600px;padding:70px 20px}.silent-welcome .actions{margin-top:34px}.silent-welcome .primary{width:100%;min-width:0}}


/* v0.6.8.4 Silent Reveal · breathing rhythm, not show UI */
.silent-title-line{display:block}
.screen[data-rhythm="silent"] .silent-stage{
  animation:silentRoomIn .88s cubic-bezier(.22,.61,.36,1) both;
}
.screen[data-rhythm="silent"] .silent-reveal-item{
  opacity:0;
  visibility:hidden;
  transform:translateY(2px);
  animation:silentBreatheIn 1.02s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:var(--silent-delay,0ms);
}
.screen[data-rhythm="silent"] .silent-reveal-item.actions{
  animation-duration:.9s;
}
.screen[data-rhythm="silent"] .mode-card.silent-reveal-item{
  animation-duration:1.08s;
}
@keyframes silentRoomIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes silentBreatheIn{
  0%{opacity:0;visibility:hidden;transform:translateY(2px)}
  1%{visibility:visible}
  100%{opacity:1;visibility:visible;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .screen[data-rhythm="silent"] .silent-stage,
  .screen[data-rhythm="silent"] .silent-reveal-item{
    animation:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
}


/* v0.6.8.5 Bilingual Meaning Lock · Cross the Bridge */
.bridge-source-card,.bridge-result-card{margin-top:22px;padding:24px 25px;border:1px solid var(--line);border-radius:27px;background:rgba(255,255,255,.48);text-align:left}
.bridge-source-card{border-style:dashed;background:rgba(255,255,255,.36)}
.bridge-source-card p,.bridge-result-card p{margin:13px 0 0;white-space:pre-wrap;font-size:17px;line-height:1.92;word-break:keep-all;overflow-wrap:break-word}
.bridge-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--faint);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.bridge-language-section,.bridge-pronoun-section{margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.28);text-align:left}
.bridge-language-section h3,.bridge-pronoun-section h3{margin:0;font-size:20px;letter-spacing:-.03em}
.bridge-language-grid,.bridge-pronoun-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:15px}
.bridge-language-option,.bridge-pronoun-option{min-height:70px;padding:16px 18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.54);color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer;text-align:left;font-size:16px}
.bridge-language-option.selected,.bridge-pronoun-option.selected{background:var(--paper2);border-color:var(--line2);box-shadow:var(--shadow)}
.bridge-result-stack{display:grid;gap:14px;margin-top:22px}
.bridge-result-card{margin-top:0}
.bridge-result-card.source{background:rgba(255,255,255,.38);border-style:dashed}
.bridge-result-card.translated{background:var(--paper2);border-color:var(--line2);box-shadow:var(--shadow)}
.bridge-result-card.meaning{background:rgba(235,242,228,.48)}
.bridge-meaning-lead{color:var(--muted)!important;font-size:13px!important;line-height:1.7!important;margin-bottom:3px!important}
.bridge-verification{margin-top:18px;padding:17px 19px;border-radius:22px;text-align:left;line-height:1.75}
.bridge-verification.ready{border:1px solid rgba(99,124,91,.24);background:rgba(235,242,228,.56)}
.bridge-verification.review{border:1px solid rgba(124,80,72,.24);background:rgba(244,230,223,.62)}
.bridge-verification strong{display:block;font-size:15px}.bridge-verification p{margin:7px 0 0;color:var(--muted);font-size:14px}
.bridge-audit span.pass{border-color:rgba(99,124,91,.22)}.bridge-audit span.fail{color:var(--danger);border-color:rgba(124,80,72,.24);background:rgba(244,230,223,.48)}
@media(max-width:760px){.bridge-language-grid,.bridge-pronoun-grid{grid-template-columns:1fr}.bridge-source-card,.bridge-result-card{padding:20px 18px}.bridge-meta{align-items:flex-start;flex-direction:column}.bridge-language-section,.bridge-pronoun-section{padding:18px 15px}}


/* v0.6.8.6 Recipient Reference Lock + quiet working signal */
.bridge-reference-section{margin-top:24px;padding:22px;border:1px solid rgba(124,80,72,.20);border-radius:28px;background:rgba(244,230,223,.32);text-align:left}
.bridge-reference-section h3{margin:0;font-size:20px;letter-spacing:-.03em}
.bridge-reference-found{margin:14px 0 0;padding:11px 13px;border-radius:16px;background:rgba(255,255,255,.46);color:var(--muted);font-size:14px;line-height:1.65}
.bridge-reference-found span{display:block;color:var(--faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.bridge-reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:15px}
.bridge-reference-option{min-height:70px;padding:16px 18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.58);color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer;text-align:left;font-size:16px}
.bridge-reference-option.selected{background:var(--paper2);border-color:var(--line2);box-shadow:var(--shadow)}
.bridge-working-dots{display:flex;justify-content:center;gap:7px;margin:19px 0 5px}
.bridge-working-dots i{width:5px;height:5px;border-radius:50%;background:var(--faint);opacity:.24;animation:bridgeQuietPulse 1.7s ease-in-out infinite}
.bridge-working-dots i:nth-child(2){animation-delay:.25s}.bridge-working-dots i:nth-child(3){animation-delay:.5s}
@keyframes bridgeQuietPulse{0%,100%{opacity:.20;transform:translateY(0)}50%{opacity:.72;transform:translateY(-2px)}}
@media(max-width:760px){.bridge-reference-grid{grid-template-columns:1fr}.bridge-reference-section{padding:18px 15px}}
@media(prefers-reduced-motion:reduce){.bridge-working-dots i{animation:none;opacity:.55}}


/* v0.6.8.7 Meaning Checkpoint Lock · deep inspection, quiet display */
.meaning-checkpoint-section{margin-top:22px;padding:23px;border:1px solid rgba(99,124,91,.22);border-radius:28px;background:rgba(235,242,228,.42);text-align:left}
.meaning-checkpoint-section h3,.bridge-difference-section h3{margin:0;font-size:20px;letter-spacing:-.03em}
.meaning-checkpoint-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}
.meaning-checkpoint-card{padding:16px 17px;border:1px solid rgba(99,124,91,.17);border-radius:20px;background:rgba(255,255,255,.48)}
.meaning-checkpoint-card span,.bridge-difference-card span{display:block;color:var(--faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.meaning-checkpoint-card p{margin:8px 0 0;color:var(--ink);font-size:15px;line-height:1.75;white-space:pre-wrap}
.bridge-difference-section{margin-top:20px;padding:22px;border:1px solid rgba(124,80,72,.22);border-radius:28px;background:rgba(244,230,223,.45);text-align:left}
.bridge-difference-list{display:grid;gap:11px;margin-top:15px}
.bridge-difference-card{padding:17px;border:1px solid rgba(124,80,72,.16);border-radius:20px;background:rgba(255,255,255,.52)}
.bridge-difference-card>div+div{margin-top:12px}
.bridge-difference-card p{margin:5px 0 0;white-space:pre-wrap;line-height:1.72}
.bridge-difference-card strong{display:block;margin-top:13px;color:var(--danger);font-size:14px;line-height:1.72}
.bridge-full-meaning{margin-top:18px;padding:0;border:1px dashed var(--line2);border-radius:22px;background:rgba(255,255,255,.28);text-align:left;overflow:hidden}
.bridge-full-meaning summary{padding:16px 18px;cursor:pointer;color:var(--muted);font-size:15px;list-style-position:inside}
.bridge-full-meaning[open] summary{border-bottom:1px solid var(--line)}
.bridge-full-meaning>p{margin:0;padding:15px 19px 19px;white-space:pre-wrap;line-height:1.86}
.bridge-full-meaning .bridge-meaning-lead{padding-bottom:0!important;font-size:13px;color:var(--muted)}
@media(max-width:760px){.meaning-checkpoint-grid{grid-template-columns:1fr}.meaning-checkpoint-section,.bridge-difference-section{padding:18px 15px}}


/* v0.6.8.8 Actor & Time Range Lock · clarification budget */
.bridge-clarification-intro {
  margin: 22px 0 10px;
  padding: 12px 14px;
  border-left: 2px solid rgba(80, 69, 55, .24);
  color: var(--ink-soft, #665f55);
}
.bridge-clarification-intro p { margin: 0; line-height: 1.65; }
.bridge-reference-section + .bridge-reference-section { margin-top: 18px; }


/* v0.6.8.8.1 Context Anchor · full source sentence with quiet focus */
.bridge-context-anchor{padding:14px 15px}
.bridge-context-anchor .bridge-context-sentence{display:block;color:var(--ink);font-size:15px;line-height:1.82;letter-spacing:-.01em;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word}
.bridge-context-anchor .bridge-context-sentence strong{font-weight:750;color:var(--ink);background:rgba(228,205,176,.42);border-radius:6px;padding:1px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media(max-width:760px){.bridge-context-anchor .bridge-context-sentence{font-size:14px;line-height:1.78}}


/* v0.6.8.8.3 Same-Language Send · native share sheet, never auto-send */
.final-send-section{margin-top:28px;padding-top:23px;border-top:1px solid var(--line)}
.final-send-note{max-width:660px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.78;word-break:keep-all}
.final-send-actions{margin-top:15px}
.final-send-actions .primary{min-width:220px}
.bridge-adjust-actions{margin-top:12px}
.primary[aria-busy="true"]{opacity:.62;cursor:wait}
@media(max-width:760px){.final-send-actions{display:grid;grid-template-columns:1fr;gap:9px}.final-send-actions .primary,.final-send-actions .secondary,.final-send-actions .quiet-link{width:100%;min-width:0}}


/* v0.6.8.8.3 Same-Language Send · two clear send paths */
.presend-send-section{margin-top:24px}
.presend-send-actions{margin-top:0}
.presend-send-actions .primary{min-width:220px}
.presend-send-note{max-width:680px;margin:12px auto 0;color:var(--muted);font-size:13px;line-height:1.75;word-break:keep-all}
.presend-support-actions{margin-top:12px}
@media(max-width:760px){.presend-send-actions{display:grid;grid-template-columns:1fr;gap:9px}.presend-send-actions .primary{width:100%;min-width:0}.presend-support-actions{margin-top:10px}}


/* v0.6.8.8.12 · Quiet Source Clarification Gate */
.bridge-source-clarification-list{display:grid;gap:18px;margin:22px 0}
.bridge-source-clarification-card{padding:18px;border:1px solid rgba(73,58,40,.16);border-radius:20px;background:rgba(255,255,255,.46)}
.bridge-source-clarification-card label{display:block;margin:14px 0 8px;font-weight:700;line-height:1.55}
.bridge-source-clarification-answer{box-sizing:border-box;width:100%;min-height:118px;padding:14px 15px;border:1px solid rgba(73,58,40,.22);border-radius:16px;background:rgba(255,255,255,.78);font:inherit;line-height:1.6;resize:vertical;color:inherit}
.bridge-source-clarification-answer:focus{outline:2px solid rgba(109,86,54,.28);outline-offset:2px}


/* v0.6.8.8.37.4 QA-only Actor Render Trace. Remove before RC. */
.qa-actor-trace{margin:18px 0 8px;padding:14px 16px;border:1px dashed #b8a993;border-radius:16px;background:rgba(255,250,242,.72);font-size:12px;line-height:1.45}
.qa-actor-trace summary{cursor:pointer;font-weight:700;letter-spacing:.08em}
.qa-actor-trace-flags{margin:10px 0;color:#6f6358}
.qa-actor-trace-row{padding:9px 0;border-top:1px solid rgba(120,105,90,.16)}
.qa-actor-trace-row strong{display:block;margin-bottom:5px;font-size:11px;letter-spacing:.06em}
.qa-actor-trace-row pre{white-space:pre-wrap;word-break:break-word;margin:0;font:inherit;color:#4f4740}

/* ======================================================================
   SayBridge · Visual Candidate 01 · Result Meaning Hierarchy
   CLASSIFICATION: A. BUILDABLE PREVIEW
   LOGIC BASELINE: v0.6.8.8.38.18 · LOCKED
   SCOPE: View layer only — bridge_result hierarchy / composition / type / spacing
   PURPOSE: Source → Meaning → Recipient relationship becomes the visual protagonist.
   VISUAL CONFIDENCE MUST NOT EXCEED MEANING CONFIDENCE.
   ====================================================================== */

/* Result room: quieter container, stronger text hierarchy, fewer nested-card signals. */
.screen[data-view="bridge_result"]{padding-top:18px}
.screen[data-view="bridge_result"] .panel{
  max-width:940px;
  padding:38px 42px 40px;
  border-radius:28px;
  background:rgba(255,255,255,.50);
  box-shadow:0 18px 56px rgba(93,74,56,.07);
}
.screen[data-view="bridge_result"] .eyebrow{margin-bottom:11px}
.screen[data-view="bridge_result"] h2{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  font-size:clamp(30px,4vw,43px);
  line-height:1.38;
}
.screen[data-view="bridge_result"] > .panel > .lead{
  max-width:650px;
  margin-top:13px;
  font-size:15px;
  line-height:1.82;
}

/* Same dignity on both sides: the translated output must not look more authoritative. */
.screen[data-view="bridge_result"] .bridge-result-stack{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:42px;
  margin-top:34px;
  align-items:stretch;
}
.screen[data-view="bridge_result"] .bridge-result-stack::before{
  content:"";
  position:absolute;
  left:50%;
  top:19px;
  bottom:19px;
  width:1px;
  background:linear-gradient(180deg,transparent 0%,rgba(118,97,78,.22) 20%,rgba(118,97,78,.22) 80%,transparent 100%);
  transform:translateX(-.5px);
  pointer-events:none;
}
.screen[data-view="bridge_result"] .bridge-result-stack::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  border:1px solid rgba(118,97,78,.30);
  background:#f5eee3;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.screen[data-view="bridge_result"] .bridge-result-card.source,
.screen[data-view="bridge_result"] .bridge-result-card.translated{
  position:relative;
  z-index:1;
  min-height:235px;
  padding:25px 26px 27px;
  border:1px solid rgba(118,97,78,.20);
  border-radius:22px;
  border-style:solid;
  background:rgba(255,255,255,.64);
  box-shadow:none;
}
.screen[data-view="bridge_result"] .bridge-result-card.source::before,
.screen[data-view="bridge_result"] .bridge-result-card.translated::before{
  content:"";
  position:absolute;
  left:26px;
  right:26px;
  top:51px;
  height:1px;
  background:rgba(118,97,78,.12);
}
.screen[data-view="bridge_result"] .bridge-meta{
  min-height:28px;
  align-items:flex-start;
  color:rgba(81,74,66,.62);
  font-size:11px;
  letter-spacing:.10em;
}
.screen[data-view="bridge_result"] .bridge-result-card p{
  margin-top:21px;
  font-size:18px;
  line-height:1.96;
  color:var(--ink);
}

/* Meaning is the bridge, not a green success box. */
.screen[data-view="bridge_result"] .meaning-checkpoint-section{
  position:relative;
  margin-top:34px;
  padding:30px 0 5px;
  border:0;
  border-top:1px solid rgba(118,97,78,.20);
  border-radius:0;
  background:transparent;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-section::before{
  content:"MEANING BRIDGE";
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  padding:0 12px;
  background:#f8f2e8;
  color:rgba(81,74,66,.44);
  font-size:10px;
  letter-spacing:.17em;
  white-space:nowrap;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-section h3{
  text-align:center;
  font-size:19px;
  font-weight:720;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-section > .anchor-lead{
  max-width:620px;
  margin:8px auto 0;
  text-align:center;
  font-size:13px;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-grid{
  grid-template-columns:1fr 1fr;
  gap:0 30px;
  margin-top:24px;
  border-top:1px solid rgba(118,97,78,.12);
}
.screen[data-view="bridge_result"] .meaning-checkpoint-card{
  min-height:98px;
  padding:17px 2px 18px;
  border:0;
  border-bottom:1px solid rgba(118,97,78,.12);
  border-radius:0;
  background:transparent;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-card span{
  color:rgba(81,74,66,.48);
  font-size:10px;
  letter-spacing:.10em;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-card p{
  margin-top:7px;
  font-size:14px;
  line-height:1.72;
}

/* Verification communicates state without visually becoming 'the truth'. */
.screen[data-view="bridge_result"] .bridge-verification{
  margin-top:26px;
  padding:17px 0 0;
  border-radius:0;
  background:transparent;
  border:0;
  border-top:1px solid rgba(118,97,78,.18);
  text-align:center;
}
.screen[data-view="bridge_result"] .bridge-verification.ready,
.screen[data-view="bridge_result"] .bridge-verification.review{
  background:transparent;
  border-left:0;
  border-right:0;
  border-bottom:0;
}
.screen[data-view="bridge_result"] .bridge-verification.ready{border-top-color:rgba(99,124,91,.30)}
.screen[data-view="bridge_result"] .bridge-verification.review{border-top-color:rgba(124,80,72,.34)}
.screen[data-view="bridge_result"] .bridge-verification strong{
  font-size:14px;
  letter-spacing:-.01em;
}
.screen[data-view="bridge_result"] .bridge-verification p{
  max-width:680px;
  margin:7px auto 0;
  font-size:13px;
}

/* Evidence stays available, but the pill wall no longer dominates the result. */
.screen[data-view="bridge_result"] .bridge-audit{
  gap:0;
  margin:16px auto 0;
  max-width:760px;
}
.screen[data-view="bridge_result"] .bridge-audit span{
  position:relative;
  padding:4px 9px;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(81,74,66,.54);
  font-size:11px;
  line-height:1.55;
}
.screen[data-view="bridge_result"] .bridge-audit span+span::before{
  content:"·";
  position:absolute;
  left:-2px;
  color:rgba(81,74,66,.24);
}
.screen[data-view="bridge_result"] .bridge-audit span.fail{
  color:var(--danger);
  background:rgba(244,230,223,.50);
  border-radius:7px;
}

.screen[data-view="bridge_result"] .bridge-full-meaning{
  max-width:760px;
  margin:18px auto 0;
  border-radius:16px;
  background:rgba(255,255,255,.24);
}
.screen[data-view="bridge_result"] .final-send-section{
  margin-top:32px;
  padding-top:26px;
}
.screen[data-view="bridge_result"] .final-send-note{
  max-width:590px;
  font-size:13px;
}
.screen[data-view="bridge_result"] .final-send-actions .primary{
  min-width:230px;
  border-color:rgba(81,74,66,.30);
  box-shadow:0 9px 20px rgba(105,84,64,.07);
}
.screen[data-view="bridge_result"] .bridge-adjust-actions{
  margin-top:14px;
}

@media(max-width:760px){
  .screen[data-view="bridge_result"] .panel{padding:27px 18px 30px}
  .screen[data-view="bridge_result"] .bridge-result-stack{
    grid-template-columns:1fr;
    gap:30px;
    margin-top:28px;
  }
  .screen[data-view="bridge_result"] .bridge-result-stack::before{
    left:22px;
    right:22px;
    top:50%;
    bottom:auto;
    width:auto;
    height:1px;
    transform:none;
  }
  .screen[data-view="bridge_result"] .bridge-result-stack::after{
    left:50%;
    top:50%;
  }
  .screen[data-view="bridge_result"] .bridge-result-card.source,
  .screen[data-view="bridge_result"] .bridge-result-card.translated{
    min-height:0;
    padding:21px 18px 23px;
    border-radius:18px;
  }
  .screen[data-view="bridge_result"] .bridge-result-card.source::before,
  .screen[data-view="bridge_result"] .bridge-result-card.translated::before{
    left:18px;
    right:18px;
    top:47px;
  }
  .screen[data-view="bridge_result"] .bridge-result-card p{font-size:17px;line-height:1.90}
  .screen[data-view="bridge_result"] .meaning-checkpoint-grid{grid-template-columns:1fr;gap:0}
  .screen[data-view="bridge_result"] .meaning-checkpoint-section::before{font-size:9px;letter-spacing:.14em}
  .screen[data-view="bridge_result"] .bridge-audit{justify-content:flex-start}
}

/* =========================================================
   BUILDABLE PREVIEW · Visual Candidate 02 · Quiet Mirror Bridge
   Visual-only sanding on top of .38.18 locked meaning logic.
   Intent: a quiet private writing/mirror space; less generic card UI.
   ========================================================= */

body{
  background:
    radial-gradient(ellipse at 50% -8%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.70) 28%,rgba(255,255,255,0) 58%),
    linear-gradient(90deg,rgba(210,197,178,.08) 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,rgba(210,197,178,.08) 100%),
    #f4f0e8;
}

.screen[data-view="bridge_result"]{
  width:min(100%,1100px);
  padding-top:12px;
}
.screen[data-view="bridge_result"] > .panel{
  position:relative;
  max-width:1040px;
  padding:48px 52px 46px;
  border:1px solid rgba(103,91,76,.13);
  border-radius:24px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.62) 47%,rgba(255,255,255,.72) 53%,rgba(255,255,255,.80));
  box-shadow:
    0 26px 65px rgba(94,78,59,.055),
    inset 0 1px 0 rgba(255,255,255,.85);
  overflow:hidden;
}
.screen[data-view="bridge_result"] > .panel::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:120px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  pointer-events:none;
}

/* Smaller introduction: the user's words become the hero, not the headline. */
.screen[data-view="bridge_result"] .quiet-mirror-intro{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0 auto 8px;
  text-align:left;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro .eyebrow{
  margin-bottom:10px;
  color:rgba(81,74,66,.48);
  font-size:10px;
  letter-spacing:.16em;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro h2{
  max-width:none;
  margin:0;
  font-size:clamp(27px,3.2vw,36px);
  line-height:1.42;
  letter-spacing:-.045em;
  font-weight:680;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro .lead{
  max-width:650px;
  margin:10px 0 0;
  color:rgba(81,74,66,.68);
  font-size:14px;
  line-height:1.85;
}

/* One shared writing surface, two equal voices. */
.screen[data-view="bridge_result"] .quiet-mirror-spread{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;
  margin-top:32px;
  padding:0;
  border-top:1px solid rgba(103,91,76,.18);
  border-bottom:1px solid rgba(103,91,76,.18);
  background:rgba(255,255,255,.28);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::before{
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(103,91,76,.16);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::after{
  content:"";
  position:absolute;
  z-index:3;
  left:50%;
  top:24px;
  width:8px;
  height:8px;
  border:1px solid rgba(103,91,76,.32);
  border-radius:50%;
  background:#f7f3ec;
  box-shadow:0 0 0 7px rgba(247,243,236,.78);
  transform:translate(-50%,-50%);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.source,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated{
  min-height:0;
  margin:0;
  padding:28px 34px 34px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.source{
  padding-right:42px;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated{
  padding-left:42px;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.source::before,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated::before{
  display:none;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta{
  min-height:0;
  padding-bottom:16px;
  border-bottom:1px solid rgba(103,91,76,.10);
  color:rgba(81,74,66,.50);
  font-size:10px;
  letter-spacing:.09em;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta span:last-child{
  letter-spacing:.14em;
  text-transform:uppercase;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p{
  margin-top:24px;
  font-size:17.5px;
  line-height:2.02;
  letter-spacing:-.015em;
}

/* Evidence as a quiet editorial spine rather than another card system. */
.screen[data-view="bridge_result"] .quiet-evidence-spine{
  max-width:860px;
  margin:38px auto 0;
  padding:28px 0 0;
  border-top:1px solid rgba(103,91,76,.16);
}
.screen[data-view="bridge_result"] .quiet-evidence-spine::before{
  content:"뜻이 그대로 남아 있는지";
  top:-9px;
  padding:0 14px;
  background:#f7f3ec;
  color:rgba(81,74,66,.42);
  font-size:10px;
  letter-spacing:.12em;
}
.screen[data-view="bridge_result"] .quiet-evidence-spine h3{
  font-size:18px;
  font-weight:650;
}
.screen[data-view="bridge_result"] .quiet-evidence-spine > .anchor-lead{
  max-width:560px;
  margin-top:7px;
  font-size:13px;
}
.screen[data-view="bridge_result"] .quiet-evidence-spine .meaning-checkpoint-grid{
  display:block;
  max-width:760px;
  margin:24px auto 0;
  border-top:0;
}
.screen[data-view="bridge_result"] .quiet-evidence-spine .meaning-checkpoint-card{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:24px;
  min-height:0;
  padding:14px 0 15px;
  border-bottom:1px solid rgba(103,91,76,.10);
}
.screen[data-view="bridge_result"] .quiet-evidence-spine .meaning-checkpoint-card span{
  padding-top:2px;
  color:rgba(81,74,66,.48);
  font-size:10px;
  line-height:1.65;
  letter-spacing:.08em;
}
.screen[data-view="bridge_result"] .quiet-evidence-spine .meaning-checkpoint-card p{
  margin:0;
  color:rgba(81,74,66,.86);
  font-size:13.5px;
  line-height:1.78;
}

/* Confirmation is calm and readable; not a triumphant AI success state. */
.screen[data-view="bridge_result"] .bridge-verification{
  max-width:760px;
  margin:28px auto 0;
  padding-top:18px;
  text-align:left;
}
.screen[data-view="bridge_result"] .bridge-verification strong{
  font-size:14px;
  font-weight:650;
}
.screen[data-view="bridge_result"] .bridge-verification p{
  margin:6px 0 0;
  font-size:12.5px;
}
.screen[data-view="bridge_result"] .bridge-audit{
  max-width:760px;
  margin-top:13px;
  justify-content:flex-start;
}
.screen[data-view="bridge_result"] .bridge-audit span{
  padding:3px 8px 3px 0;
  font-size:10.5px;
}

.screen[data-view="bridge_result"] .bridge-full-meaning{
  max-width:760px;
  margin-top:16px;
  border:0;
  border-top:1px dashed rgba(103,91,76,.16);
  border-radius:0;
  background:transparent;
}
.screen[data-view="bridge_result"] .bridge-full-meaning summary{
  padding:14px 0;
  font-size:13px;
}
.screen[data-view="bridge_result"] .bridge-full-meaning>p{
  padding-left:0;
  padding-right:0;
}

/* Less pill/SaaS language at the decision point. */
.screen[data-view="bridge_result"] .final-send-section{
  max-width:760px;
  margin:34px auto 0;
  padding-top:24px;
}
.screen[data-view="bridge_result"] .final-send-note{
  max-width:540px;
  margin-left:0;
  text-align:left;
  font-size:12.5px;
}
.screen[data-view="bridge_result"] .final-send-actions{
  justify-content:flex-start;
  margin-top:16px;
}
.screen[data-view="bridge_result"] .final-send-actions .primary,
.screen[data-view="bridge_result"] .final-send-actions .secondary{
  min-height:46px;
  border-radius:13px;
  padding:0 18px;
  font-size:14px;
  box-shadow:none;
}
.screen[data-view="bridge_result"] .final-send-actions .primary{
  min-width:180px;
  background:#565047;
  border-color:#565047;
  color:#fffdf8;
}
.screen[data-view="bridge_result"] .final-send-actions .secondary{
  background:transparent;
}
.screen[data-view="bridge_result"] .final-send-actions .quiet-link{
  min-height:46px;
  border-radius:0;
  padding:0 10px;
  font-size:13px;
}

/* Language controls read as quiet text navigation, not a pill collection. */
.screen[data-view="bridge_result"] ~ *{}
body:has(.screen[data-view="bridge_result"]) .language-switch{
  gap:18px;
  align-items:center;
}
body:has(.screen[data-view="bridge_result"]) .language-switch button{
  min-height:32px;
  padding:0 2px 4px;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  background:transparent;
  font-size:13px;
}
body:has(.screen[data-view="bridge_result"]) .language-switch button.active{
  border-bottom-color:rgba(81,74,66,.45);
  background:transparent;
}

body:has(.screen[data-view="bridge_result"]) .quiet-footer{
  max-width:1040px;
  padding:0 4px;
  opacity:.72;
}
body:has(.screen[data-view="bridge_result"]) .build-label{
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
}

@media(max-width:760px){
  .screen[data-view="bridge_result"] > .panel{
    padding:30px 20px 34px;
    border-radius:20px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-intro{
    text-align:left;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-intro h2{
    font-size:28px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread{
    grid-template-columns:1fr;
    gap:0;
    margin-top:27px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread::before{
    left:0;
    right:0;
    top:50%;
    bottom:auto;
    width:auto;
    height:1px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread::after{
    left:24px;
    top:50%;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.source,
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated{
    padding:24px 2px 30px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated{
    padding-top:30px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p{
    font-size:16.5px;
    line-height:1.95;
  }
  .screen[data-view="bridge_result"] .quiet-evidence-spine .meaning-checkpoint-card{
    grid-template-columns:1fr;
    gap:5px;
    padding:13px 0 14px;
  }
  .screen[data-view="bridge_result"] .final-send-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .screen[data-view="bridge_result"] .final-send-actions .primary,
  .screen[data-view="bridge_result"] .final-send-actions .secondary,
  .screen[data-view="bridge_result"] .final-send-actions .quiet-link{
    width:100%;
  }
  body:has(.screen[data-view="bridge_result"]) .language-switch{
    gap:12px;
  }
}

/* =========================================================
   BUILDABLE PREVIEW · Visual Candidate 04 · Open Quiet Room Light
   Single-gap sanding: background atmosphere only.
   Candidate 02 openness / typography / bridge hierarchy remain protected.
   Candidate 03 large white reading container is explicitly removed.
   Intent: the whole viewport should feel like one quiet private room, not a card.
   ========================================================= */

body:has(.screen[data-view="bridge_result"]){
  position:relative;
  isolation:isolate;
  background:#f0e9df;
}

body:has(.screen[data-view="bridge_result"])::before,
body:has(.screen[data-view="bridge_result"])::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}

/* Broad daylight from upper-left, with warmer room depth toward the edges.
   The transitions are intentionally large so they read as light, not a UI gradient. */
body:has(.screen[data-view="bridge_result"])::before{
  z-index:-2;
  background:
    radial-gradient(ellipse 82% 62% at 22% 2%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.56) 29%, rgba(255,255,255,.16) 53%, rgba(255,255,255,0) 75%),
    radial-gradient(ellipse 68% 78% at 90% 88%, rgba(164,135,101,.085) 0%, rgba(164,135,101,.032) 42%, rgba(164,135,101,0) 74%),
    radial-gradient(ellipse 78% 62% at 50% 42%, rgba(255,253,248,.60) 0%, rgba(255,253,248,.24) 48%, rgba(255,253,248,0) 78%),
    linear-gradient(112deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 33%, rgba(121,99,74,.025) 100%);
}

/* Almost imperceptible wall/paper grain. No image assets and no decorative pattern. */
body:has(.screen[data-view="bridge_result"])::after{
  z-index:-1;
  opacity:.22;
  background-image:
    repeating-linear-gradient(0deg, rgba(91,75,58,.020) 0, rgba(91,75,58,.020) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.032) 0, rgba(255,255,255,.032) 1px, transparent 1px, transparent 7px);
  mix-blend-mode:multiply;
}

/* The page is the room. Remove the large white card/container entirely. */
.screen[data-view="bridge_result"] > .panel{
  max-width:1100px;
  padding:44px 34px 48px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.screen[data-view="bridge_result"] > .panel::before,
.screen[data-view="bridge_result"] > .panel::after{
  display:none;
}

/* Keep the two texts on one shared field, but let the room show through. */
.screen[data-view="bridge_result"] .quiet-mirror-spread{
  background:
    linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.055) 45%, rgba(255,255,255,.055) 55%, rgba(255,255,255,.16));
  box-shadow:
    0 1px 0 rgba(255,255,255,.42) inset,
    0 18px 50px rgba(82,66,48,.018);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::after{
  background:#f4eee5;
  box-shadow:
    0 0 0 7px rgba(244,238,229,.70),
    0 2px 9px rgba(83,67,49,.035);
}

/* Evidence remains part of the same room; its label does not punch a white hole into it. */
.screen[data-view="bridge_result"] .quiet-evidence-spine::before{
  background:#f1ebe2;
}

/* Slightly wider breathing field now that there is no card edge. */
body:has(.screen[data-view="bridge_result"]) .topbar,
body:has(.screen[data-view="bridge_result"]) .quiet-footer{
  width:min(100%,1120px);
}

@media(max-width:760px){
  body:has(.screen[data-view="bridge_result"])::before{
    background:
      radial-gradient(ellipse 125% 48% at 18% 0%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.46) 36%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 95% 72% at 96% 88%, rgba(158,130,97,.065) 0%, rgba(158,130,97,0) 74%),
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(117,94,68,.02));
  }
  body:has(.screen[data-view="bridge_result"])::after{
    opacity:.15;
  }
  .screen[data-view="bridge_result"] > .panel{
    padding:28px 8px 36px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread{
    background:rgba(255,255,255,.09);
    box-shadow:none;
  }
  .screen[data-view="bridge_result"] .quiet-evidence-spine::before{
    background:#f2ece3;
  }
}

/* =========================================================
   BUILDABLE PREVIEW · Visual Candidate 05 · Private Writing Table
   Single-gap sanding: composition only.
   Candidate 04 room light is locked and untouched below this layer.
   Intent: move from a 50/50 comparison document to an intimate shared writing place.
   ========================================================= */

/* Pull the whole result experience closer, like two pages on one quiet table. */
.screen[data-view="bridge_result"] > .panel{
  max-width:980px;
  padding-left:26px;
  padding-right:26px;
}

.screen[data-view="bridge_result"] .quiet-mirror-intro{
  max-width:610px;
  margin-left:72px;
  margin-right:auto;
  margin-bottom:4px;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro h2{
  font-size:clamp(25px,2.65vw,32px);
  line-height:1.46;
  letter-spacing:-.04em;
  font-weight:650;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro .lead{
  max-width:580px;
  font-size:13.5px;
  line-height:1.82;
}

/* No table frame, no 50/50 spreadsheet rhythm. Two equal voices breathe independently. */
.screen[data-view="bridge_result"] .quiet-mirror-spread{
  width:min(100%,860px);
  margin:42px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:86px;
  align-items:start;
  border-top:0;
  border-bottom:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::before{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:46%;
  bottom:auto;
  width:1px;
  height:104px;
  transform:translate(-50%,-50%);
  background:linear-gradient(to bottom, transparent, rgba(103,91,76,.22) 20%, rgba(103,91,76,.22) 80%, transparent);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::after{
  left:50%;
  top:46%;
  width:7px;
  height:7px;
  background:#f2ece3;
  box-shadow:0 0 0 8px rgba(242,236,227,.72);
}

.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.source,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated{
  padding:0;
  min-width:0;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.source{
  padding-right:0;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated{
  padding-left:0;
  margin-top:42px;
}

/* Meta labels become margin notes, not table headers. */
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta{
  min-height:auto;
  padding:0 0 12px;
  border-bottom:0;
  color:rgba(81,74,66,.48);
  font-size:9.5px;
  letter-spacing:.085em;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta::after{
  content:"";
  display:block;
  width:42px;
  height:1px;
  margin-top:11px;
  background:rgba(103,91,76,.18);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta span:last-child{
  color:rgba(81,74,66,.40);
}

/* The writing itself carries the visual weight. */
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p{
  max-width:360px;
  margin-top:18px;
  font-size:17px;
  line-height:2.08;
  letter-spacing:-.012em;
  color:rgba(72,65,57,.95);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated p{
  margin-left:auto;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated .bridge-meta{
  text-align:right;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated .bridge-meta::after{
  margin-left:auto;
}

/* Evidence follows the shared writing place rather than looking like a report appendix. */
.screen[data-view="bridge_result"] .quiet-evidence-spine{
  max-width:740px;
  margin-top:56px;
}
.screen[data-view="bridge_result"] .quiet-evidence-spine .meaning-checkpoint-grid,
.screen[data-view="bridge_result"] .bridge-verification,
.screen[data-view="bridge_result"] .bridge-audit,
.screen[data-view="bridge_result"] .bridge-full-meaning,
.screen[data-view="bridge_result"] .final-send-section{
  max-width:680px;
}

/* Keep the room generous, but stop the desktop from reading like a wide report. */
body:has(.screen[data-view="bridge_result"]) .topbar,
body:has(.screen[data-view="bridge_result"]) .quiet-footer{
  width:min(100%,980px);
}

@media(max-width:760px){
  .screen[data-view="bridge_result"] > .panel{
    max-width:none;
    padding-left:16px;
    padding-right:16px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-intro{
    margin-left:0;
    max-width:100%;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-intro h2{
    font-size:27px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread{
    width:100%;
    margin-top:32px;
    grid-template-columns:1fr;
    row-gap:40px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread::before{
    left:24px;
    top:50%;
    width:74px;
    height:1px;
    transform:translateY(-50%);
    background:linear-gradient(to right, transparent, rgba(103,91,76,.22) 20%, rgba(103,91,76,.22) 80%, transparent);
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread::after{
    left:24px;
    top:50%;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated{
    margin-top:0;
    padding-top:0;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p,
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated p{
    max-width:none;
    margin-left:0;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated .bridge-meta{
    text-align:left;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated .bridge-meta::after{
    margin-left:0;
  }
  .screen[data-view="bridge_result"] .quiet-evidence-spine{
    margin-top:44px;
  }
}


/* =========================================================
   BUILDABLE PREVIEW · Visual Candidate 06
   Dusk Indigo · Calm Reading Balance
   Selected identity direction: Dusk Indigo Bridge.
   Single-gap sanding: visual stability / reading balance.
   Candidate 04 quiet-room openness remains protected.
   Candidate 05's unstable offsets are explicitly corrected.
   ========================================================= */

:root{
  --sb-ink:#403b43;
  --sb-muted:#6e6873;
  --sb-faint:#96909b;
  --sb-indigo:#595d82;
  --sb-indigo-deep:#4e5275;
  --sb-indigo-soft:rgba(89,93,130,.17);
  --sb-indigo-haze:rgba(89,93,130,.075);
  --sb-porcelain:#f4f3f2;
  --sb-porcelain-2:#efedf1;
}

body:has(.screen[data-view="bridge_result"]){
  color:var(--sb-ink);
  background:var(--sb-porcelain);
}

body:has(.screen[data-view="bridge_result"])::before{
  background:
    radial-gradient(ellipse 86% 62% at 18% 0%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.62) 28%, rgba(255,255,255,.18) 53%, rgba(255,255,255,0) 76%),
    radial-gradient(ellipse 70% 78% at 92% 90%, rgba(89,93,130,.095) 0%, rgba(89,93,130,.036) 44%, rgba(89,93,130,0) 76%),
    radial-gradient(ellipse 78% 64% at 50% 43%, rgba(250,249,251,.78) 0%, rgba(250,249,251,.28) 48%, rgba(250,249,251,0) 78%),
    linear-gradient(136deg, rgba(255,255,255,.20), rgba(89,93,130,.028));
}

body:has(.screen[data-view="bridge_result"])::after{
  opacity:.16;
  background-image:
    repeating-linear-gradient(0deg, rgba(63,59,67,.016) 0, rgba(63,59,67,.016) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 8px);
}

body:has(.screen[data-view="bridge_result"]) .brand-button,
body:has(.screen[data-view="bridge_result"]) .quiet-footer,
body:has(.screen[data-view="bridge_result"]) .build-label{
  color:rgba(64,59,67,.56);
}

body:has(.screen[data-view="bridge_result"]) .language-switch button{
  color:rgba(64,59,67,.63);
}
body:has(.screen[data-view="bridge_result"]) .language-switch button.active{
  color:var(--sb-indigo-deep);
  border-color:rgba(89,93,130,.22);
  background:rgba(255,255,255,.40);
  box-shadow:none;
}

/* Stabilise the reading field: shared top rhythm, shared start line, shared weight. */
.screen[data-view="bridge_result"] > .panel{
  max-width:1000px;
  padding-left:28px;
  padding-right:28px;
}

.screen[data-view="bridge_result"] .quiet-mirror-intro{
  max-width:690px;
  margin:0 auto;
  text-align:left;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro h2{
  font-size:clamp(26px,2.65vw,32px);
  line-height:1.44;
  font-weight:650;
  color:var(--sb-ink);
}
.screen[data-view="bridge_result"] .quiet-mirror-intro .lead{
  max-width:650px;
  margin-left:0;
  margin-right:0;
  color:var(--sb-muted);
}
.screen[data-view="bridge_result"] .quiet-mirror-intro .eyebrow{
  color:rgba(89,93,130,.60);
}

.screen[data-view="bridge_result"] .quiet-mirror-spread{
  position:relative;
  width:min(100%,850px);
  margin:44px auto 0;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:66px;
  align-items:start;
}

/* Bridge point is attached to the common reading start, not floating in empty space. */
.screen[data-view="bridge_result"] .quiet-mirror-spread::before{
  left:50%;
  top:24px;
  bottom:auto;
  width:1px;
  height:92px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom, rgba(89,93,130,.08), rgba(89,93,130,.32) 28%, rgba(89,93,130,.20) 74%, transparent 100%);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::after{
  left:50%;
  top:24px;
  width:7px;
  height:7px;
  transform:translate(-50%,-50%);
  background:var(--sb-indigo);
  border:1px solid rgba(78,82,117,.38);
  box-shadow:0 0 0 7px rgba(244,243,246,.96),0 0 0 13px rgba(89,93,130,.065);
}

.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.source,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated{
  margin-top:0;
  padding:0;
}

/* Both labels read from the same direction and sit on the same baseline. */
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated .bridge-meta{
  min-height:34px;
  padding:0 0 12px;
  text-align:left;
  color:rgba(64,59,67,.47);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta::after,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated .bridge-meta::after{
  width:36px;
  margin:10px 0 0;
  background:rgba(89,93,130,.22);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta span:last-child{
  color:rgba(89,93,130,.56);
}

/* Equal line length and equal visual gravity. */
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated p{
  max-width:370px;
  margin:18px 0 0;
  font-size:17px;
  line-height:2.04;
  letter-spacing:-.012em;
  color:rgba(57,53,61,.96);
}

/* Evidence carries the selected identity without becoming a status dashboard. */
.screen[data-view="bridge_result"] .quiet-evidence-spine{
  max-width:760px;
  margin-top:54px;
}
.screen[data-view="bridge_result"] .quiet-evidence-spine::before{
  background:var(--sb-porcelain);
  color:rgba(89,93,130,.52);
}
.screen[data-view="bridge_result"] .meaning-checkpoint-section{
  border-color:rgba(89,93,130,.16);
  background:rgba(239,237,244,.34);
}
.screen[data-view="bridge_result"] .meaning-checkpoint-card{
  border-color:rgba(89,93,130,.10);
}
.screen[data-view="bridge_result"] .bridge-verification.ready{
  border-color:rgba(89,93,130,.22);
  background:rgba(89,93,130,.085);
}
.screen[data-view="bridge_result"] .bridge-audit span.pass{
  border-color:rgba(89,93,130,.16);
  background:rgba(255,255,255,.28);
}

/* Dusk Indigo is reserved for bridge / confirmed action, not decorative saturation. */
.screen[data-view="bridge_result"] .final-send-section .primary{
  background:var(--sb-indigo-deep);
  border-color:var(--sb-indigo-deep);
  color:#fff;
  box-shadow:0 11px 24px rgba(78,82,117,.14);
}
.screen[data-view="bridge_result"] .final-send-section .secondary{
  border-color:rgba(89,93,130,.18);
  color:var(--sb-muted);
  background:rgba(255,255,255,.28);
}
.screen[data-view="bridge_result"] .final-send-section .quiet-link{
  color:rgba(64,59,67,.54);
}

@media(max-width:760px){
  .screen[data-view="bridge_result"] > .panel{
    padding-left:16px;
    padding-right:16px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-intro{
    max-width:none;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread{
    width:100%;
    margin-top:32px;
    grid-template-columns:1fr;
    row-gap:38px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread::before{
    left:22px;
    top:50%;
    width:72px;
    height:1px;
    transform:translateY(-50%);
    background:linear-gradient(to right, rgba(89,93,130,.08), rgba(89,93,130,.30) 30%, rgba(89,93,130,.18) 76%, transparent);
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread::after{
    left:22px;
    top:50%;
    transform:translate(-50%,-50%);
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p,
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated p{
    max-width:none;
  }
}


/* =========================================================
   BUILDABLE PREVIEW · Visual Candidate 07
   Quiet Stay · North Star Translation
   NORTH STAR: third approved SayBridge mood reference (2026-08-19)
   Single biggest gap: "keep wanting to stay, write, and read".
   No logic changes. No dashboard / report styling. No generic beige identity.
   Dusk Indigo remains the meaning-bridge signature; Mineral Teal is a
   low-saturation environmental counterpoint, never a status colour.
   ========================================================= */
:root{
  --sb-room:#f6f7f5;
  --sb-room-cool:#eef4f2;
  --sb-room-warm:#f8f5f1;
  --sb-human-ink:#343840;
  --sb-reading-ink:#3e4045;
  --sb-mineral:#5f8584;
  --sb-mineral-soft:rgba(95,133,132,.12);
  --sb-mineral-faint:rgba(95,133,132,.065);
  --sb-dusk:#595d82;
  --sb-dusk-deep:#4b5076;
  --sb-dusk-soft:rgba(89,93,130,.14);
  --sb-rose:#c9868d;
  --sb-rose-soft:rgba(201,134,141,.10);
}

body:has(.screen[data-view="bridge_result"]){
  background:var(--sb-room);
  color:var(--sb-human-ink);
}

/* The room reads as daylight + quiet mineral depth, not a visible gradient. */
body:has(.screen[data-view="bridge_result"])::before{
  background:
    radial-gradient(ellipse 90% 62% at 46% -2%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.74) 30%, rgba(255,255,255,.22) 56%, transparent 78%),
    radial-gradient(ellipse 54% 48% at 2% 82%, rgba(95,133,132,.105) 0%, rgba(95,133,132,.035) 47%, transparent 77%),
    radial-gradient(ellipse 48% 44% at 98% 92%, rgba(89,93,130,.075) 0%, rgba(89,93,130,.022) 48%, transparent 78%),
    linear-gradient(180deg, var(--sb-room-warm) 0%, var(--sb-room) 42%, var(--sb-room-cool) 100%);
}

/* Very soft paper/wall grain so the UI feels inhabited without using an image asset. */
body:has(.screen[data-view="bridge_result"])::after{
  opacity:.13;
  background-image:
    repeating-linear-gradient(0deg, rgba(43,54,56,.014) 0, rgba(43,54,56,.014) 1px, transparent 1px, transparent 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0, rgba(255,255,255,.026) 1px, transparent 1px, transparent 9px);
}

/* Environmental presence stays at the edges; the text remains the hero. */
body:has(.screen[data-view="bridge_result"]) .app-shell{
  position:relative;
  overflow:hidden;
}
body:has(.screen[data-view="bridge_result"]) .app-shell::before,
body:has(.screen[data-view="bridge_result"]) .app-shell::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:-1;
  filter:blur(.2px);
}
body:has(.screen[data-view="bridge_result"]) .app-shell::before{
  width:210px;
  height:360px;
  left:-122px;
  bottom:-110px;
  border-radius:48% 52% 42% 58%;
  background:
    radial-gradient(circle at 64% 34%, rgba(255,255,255,.26), transparent 24%),
    linear-gradient(155deg, rgba(74,115,114,.13), rgba(62,86,87,.025) 62%, transparent 78%);
  transform:rotate(-10deg);
}
body:has(.screen[data-view="bridge_result"]) .app-shell::after{
  width:270px;
  height:150px;
  right:-96px;
  bottom:-60px;
  border-radius:60% 40% 0 0;
  background:radial-gradient(ellipse at 28% 22%, rgba(89,93,130,.07), rgba(95,133,132,.035) 40%, transparent 72%);
}

body:has(.screen[data-view="bridge_result"]) .topbar{
  padding-top:3px;
}
body:has(.screen[data-view="bridge_result"]) .brand-button{
  color:rgba(66,101,102,.72);
  letter-spacing:.19em;
}
body:has(.screen[data-view="bridge_result"]) .language-switch button{
  border:0;
  border-radius:0;
  background:transparent;
  padding:0 3px 8px;
  min-height:auto;
  color:rgba(52,56,64,.58);
}
body:has(.screen[data-view="bridge_result"]) .language-switch button.active{
  color:var(--sb-dusk-deep);
  border-bottom:1px solid rgba(89,93,130,.54);
  background:transparent;
}

/* Intimate header: present, but never more important than the two messages. */
.screen[data-view="bridge_result"] .quiet-mirror-intro{
  max-width:720px;
  margin:6px auto 0;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro .eyebrow{
  color:rgba(65,105,106,.68);
  letter-spacing:.08em;
  text-transform:none;
  font-size:11px;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro h2{
  max-width:620px;
  font-size:clamp(27px,2.8vw,34px);
  line-height:1.46;
  font-weight:640;
  letter-spacing:-.045em;
  color:var(--sb-human-ink);
}
.screen[data-view="bridge_result"] .quiet-mirror-intro .lead{
  max-width:650px;
  margin-top:12px;
  color:rgba(52,56,64,.62);
  font-size:13.5px;
  line-height:1.9;
}

/* The reading table is open, stable, and gently framed by whitespace only. */
.screen[data-view="bridge_result"] .quiet-mirror-spread{
  width:min(100%,900px);
  margin-top:52px;
  column-gap:82px;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::before{
  top:28px;
  height:118px;
  background:linear-gradient(to bottom, rgba(89,93,130,.06), rgba(89,93,130,.30) 28%, rgba(95,133,132,.18) 72%, transparent 100%);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::after{
  top:28px;
  background:var(--sb-dusk);
  border:1px solid rgba(75,80,118,.30);
  box-shadow:0 0 0 7px rgba(246,247,245,.97),0 0 0 13px rgba(95,133,132,.07);
}

.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated .bridge-meta{
  color:rgba(52,56,64,.46);
  font-size:10px;
  letter-spacing:.06em;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta span:last-child{
  color:rgba(65,105,106,.72);
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta::after,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated .bridge-meta::after{
  width:44px;
  background:linear-gradient(90deg,rgba(95,133,132,.26),rgba(89,93,130,.12));
}

/* Reading comfort: slightly softer weight, generous leading, restrained line length. */
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated p{
  max-width:388px;
  margin-top:22px;
  font-size:17.5px;
  line-height:2.08;
  letter-spacing:-.015em;
  font-weight:430;
  color:var(--sb-reading-ink);
  text-wrap:pretty;
}

/* Meaning evidence feels like a quiet continuation of reading, not a report box. */
.screen[data-view="bridge_result"] .quiet-evidence-spine{
  max-width:790px;
  margin-top:70px;
  padding-top:0;
}
.screen[data-view="bridge_result"] .quiet-evidence-spine::before{
  background:var(--sb-room);
  color:rgba(65,105,106,.64);
  letter-spacing:.04em;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-section{
  padding:28px 0 0;
  border:0;
  border-top:1px solid rgba(95,133,132,.17);
  border-radius:0;
  background:transparent;
  text-align:center;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-section h3{
  font-size:20px;
  font-weight:630;
  color:var(--sb-human-ink);
}
.screen[data-view="bridge_result"] .meaning-checkpoint-section .anchor-lead{
  max-width:620px;
  margin:8px auto 0;
  color:rgba(52,56,64,.58);
}
.screen[data-view="bridge_result"] .meaning-checkpoint-grid{
  margin-top:26px;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-card{
  border:0;
  border-top:1px solid rgba(52,56,64,.075);
  border-radius:0;
  background:transparent;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-card span{
  color:rgba(65,105,106,.58);
}
.screen[data-view="bridge_result"] .meaning-checkpoint-card p{
  color:rgba(52,56,64,.76);
}

.screen[data-view="bridge_result"] .bridge-verification.ready{
  border:0;
  border-top:1px solid rgba(89,93,130,.15);
  border-radius:0;
  background:transparent;
  padding-left:0;
  padding-right:0;
}
.screen[data-view="bridge_result"] .bridge-verification.ready strong{
  color:var(--sb-dusk-deep);
}

/* Audit stays visible but stops reading like badges on a dashboard. */
.screen[data-view="bridge_result"] .bridge-audit{
  gap:0;
  margin-top:12px;
}
.screen[data-view="bridge_result"] .bridge-audit span,
.screen[data-view="bridge_result"] .bridge-audit span.pass{
  border:0;
  border-radius:0;
  background:transparent;
  padding:5px 9px;
  color:rgba(52,56,64,.54);
  position:relative;
}
.screen[data-view="bridge_result"] .bridge-audit span + span::before{
  content:"·";
  position:absolute;
  left:-2px;
  color:rgba(95,133,132,.34);
}

.screen[data-view="bridge_result"] .bridge-full-meaning{
  border:0;
  border-top:1px solid rgba(52,56,64,.085);
  border-radius:0;
  background:transparent;
}
.screen[data-view="bridge_result"] .bridge-full-meaning[open] summary{
  border-bottom-color:rgba(52,56,64,.075);
}

/* Final action feels like leaving the room when ready, not finishing a workflow. */
.screen[data-view="bridge_result"] .final-send-section{
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid rgba(95,133,132,.16);
}
.screen[data-view="bridge_result"] .final-send-note{
  color:rgba(52,56,64,.60);
}
.screen[data-view="bridge_result"] .final-send-section .primary{
  background:var(--sb-dusk-deep);
  border-color:var(--sb-dusk-deep);
  border-radius:14px;
  box-shadow:0 10px 22px rgba(75,80,118,.12);
}
.screen[data-view="bridge_result"] .final-send-section .secondary{
  border-radius:14px;
  border-color:rgba(95,133,132,.16);
  background:rgba(255,255,255,.30);
}
.screen[data-view="bridge_result"] .final-send-section .quiet-link{
  color:rgba(52,56,64,.50);
}

@media(max-width:760px){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    width:150px;height:240px;left:-98px;bottom:-90px;opacity:.65;
  }
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{
    width:190px;height:100px;right:-78px;bottom:-48px;opacity:.65;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread{
    margin-top:36px;
    row-gap:42px;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread::before{
    background:linear-gradient(to right,rgba(89,93,130,.05),rgba(89,93,130,.28) 32%,rgba(95,133,132,.16) 72%,transparent);
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p,
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated p{
    font-size:16.5px;
    line-height:2;
  }
  .screen[data-view="bridge_result"] .quiet-evidence-spine{
    margin-top:52px;
  }
}


/* =========================================================
   BUILDABLE PREVIEW · Visual Candidate 08 · Quiet Room Presence
   Single-gap sanding: spatial presence only.
   North Star translation: the third reference is PLACE, not decoration.
   Keep Candidate 07 reading hierarchy + Dusk Indigo bridge;
   add only quiet human traces at the outer edges of the room.
   ========================================================= */

/* Remove Candidate 07 abstract corner blobs: use concrete-but-quiet room traces instead. */
body:has(.screen[data-view="bridge_result"]) .app-shell::before,
body:has(.screen[data-view="bridge_result"]) .app-shell::after{
  display:none;
}

body:has(.screen[data-view="bridge_result"]) .app-shell{
  isolation:isolate;
  overflow:clip;
}
body:has(.screen[data-view="bridge_result"]) .topbar,
body:has(.screen[data-view="bridge_result"]) .screen,
body:has(.screen[data-view="bridge_result"]) .quiet-footer{
  position:relative;
  z-index:3;
}

.quiet-room-presence{display:none}
body:has(.screen[data-view="bridge_result"]) .quiet-room-presence{
  display:block;
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
body:has(.screen[data-view="bridge_result"]) .quiet-room-object{
  position:absolute;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* A barely-there writing surface: enough to imply a room, never a panel. */
body:has(.screen[data-view="bridge_result"]) .quiet-room-surface{
  position:absolute;
  left:-4vw;
  right:-4vw;
  bottom:-9vh;
  height:27vh;
  min-height:170px;
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(226,234,231,.10) 18%,rgba(204,220,216,.22) 70%,rgba(187,207,202,.27) 100%);
  border-top:1px solid rgba(95,133,132,.055);
  transform:skewY(-.35deg);
  transform-origin:right top;
  opacity:.62;
}

/* Human traces live outside the reading field. They should be noticed second, not first. */
body:has(.screen[data-view="bridge_result"]) .quiet-room-plant{
  width:clamp(86px,8.8vw,138px);
  left:max(-24px,calc((100vw - 1180px)/2 - 118px));
  bottom:2.5vh;
  opacity:.50;
  filter:saturate(.82) contrast(.94);
  transform:rotate(-2deg);
}
body:has(.screen[data-view="bridge_result"]) .quiet-room-cup{
  width:clamp(100px,8.6vw,142px);
  right:max(-25px,calc((100vw - 1180px)/2 - 118px));
  bottom:1.6vh;
  opacity:.48;
  filter:saturate(.78) contrast(.94);
  transform:rotate(1deg);
}
body:has(.screen[data-view="bridge_result"]) .quiet-room-pen{
  width:clamp(120px,11.5vw,178px);
  right:max(46px,calc((100vw - 980px)/2 - 52px));
  bottom:4.5vh;
  opacity:.42;
  filter:saturate(.72);
  transform:rotate(-7deg);
}

/* Preserve a clear text sanctuary: spatial traces cannot compete with the words. */
.screen[data-view="bridge_result"] > .panel{
  position:relative;
  z-index:2;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread,
.screen[data-view="bridge_result"] .quiet-evidence-spine{
  position:relative;
  z-index:2;
}

/* The mineral-teal traces belong to the room; Dusk Indigo remains the meaning bridge. */
.screen[data-view="bridge_result"] .quiet-mirror-spread::after{
  background:var(--sb-dusk);
  box-shadow:0 0 0 7px rgba(247,248,246,.98),0 0 0 13px rgba(95,133,132,.07);
}

@media(max-width:980px){
  body:has(.screen[data-view="bridge_result"]) .quiet-room-plant{left:-42px;opacity:.34}
  body:has(.screen[data-view="bridge_result"]) .quiet-room-cup{right:-48px;opacity:.31}
  body:has(.screen[data-view="bridge_result"]) .quiet-room-pen{right:8px;opacity:.28}
}

@media(max-width:760px){
  body:has(.screen[data-view="bridge_result"]) .quiet-room-surface{
    bottom:-5vh;
    height:20vh;
    min-height:120px;
    opacity:.48;
  }
  body:has(.screen[data-view="bridge_result"]) .quiet-room-plant{
    width:70px;
    left:-35px;
    bottom:5vh;
    opacity:.27;
  }
  body:has(.screen[data-view="bridge_result"]) .quiet-room-cup{
    width:68px;
    right:-30px;
    bottom:3.5vh;
    opacity:.24;
  }
  body:has(.screen[data-view="bridge_result"]) .quiet-room-pen{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  body:has(.screen[data-view="bridge_result"]) .quiet-room-object{transform:none}
}


/* =========================================================
   BUILDABLE PREVIEW · Visual Candidate 09 · Real Quiet Writing Place
   Single-gap sanding: replace synthetic room-object illustrations with one
   real photographic workspace presence. The photograph is environmental,
   never the hero; words and Dusk Indigo meaning bridge stay dominant.
   Photo: Angela Roma / Pexels, photo 7319188 (Free to use).
   ========================================================= */

/* Candidate 08's drawn room traces are explicitly retired. */
body:has(.screen[data-view="bridge_result"]) .quiet-room-presence{display:none!important}

.quiet-room-real-presence{display:none}
body:has(.screen[data-view="bridge_result"]) .quiet-room-real-presence{
  display:block;
  position:fixed;
  z-index:1;
  left:0;
  right:0;
  bottom:-1px;
  height:clamp(180px,25vh,300px);
  pointer-events:none;
  overflow:hidden;
  opacity:.84;
}
body:has(.screen[data-view="bridge_result"]) .quiet-room-real-presence img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 68%;
  filter:saturate(.82) contrast(.97) brightness(1.03);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.10) 10%,rgba(0,0,0,.68) 42%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.10) 10%,rgba(0,0,0,.68) 42%,#000 100%);
}
/* A porcelain wash keeps the photo a room trace rather than a stock-photo hero. */
body:has(.screen[data-view="bridge_result"]) .quiet-room-real-presence::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(248,249,247,.52),rgba(248,249,247,.16) 54%,rgba(238,242,241,.08));
}
/* Content remains above the photographic room layer. */
body:has(.screen[data-view="bridge_result"]) .topbar,
body:has(.screen[data-view="bridge_result"]) .screen,
body:has(.screen[data-view="bridge_result"]) .quiet-footer{
  position:relative;
  z-index:3;
}
/* Give first-view text sanctuary enough air so the photo reads at the edge, not behind words. */
.screen[data-view="bridge_result"] .quiet-evidence-spine{
  position:relative;
  z-index:4;
}

@media(max-width:980px){
  body:has(.screen[data-view="bridge_result"]) .quiet-room-real-presence{
    height:clamp(145px,21vh,220px);
    opacity:.70;
  }
  body:has(.screen[data-view="bridge_result"]) .quiet-room-real-presence img{
    object-position:center 72%;
  }
}
@media(max-width:760px){
  body:has(.screen[data-view="bridge_result"]) .quiet-room-real-presence{
    height:118px;
    opacity:.44;
  }
  body:has(.screen[data-view="bridge_result"]) .quiet-room-real-presence img{
    object-position:center 78%;
  }
}
@media(prefers-reduced-transparency:reduce){
  body:has(.screen[data-view="bridge_result"]) .quiet-room-real-presence{opacity:.32}
}


/* =========================================================
   NORTH STAR PARITY PASS 01 · Edge Presence
   North Star: locked third visual reference.
   Single-gap target: photographic PLACE should live at the outer edges,
   while the central reading sanctuary stays clean and dominant.

   Rollback anchor: Visual Candidate 09 · Real Quiet Writing Place.
   If this pass is FARTHER from the North Star, return to Candidate 09.
   Meaning Preservation / QA .38.18 / Production v0.7.2 untouched.
   ========================================================= */

/* Retire Candidate 09's full-width photographic floor without deleting it. */
body:has(.screen[data-view="bridge_result"]) .quiet-room-real-presence{
  display:none!important;
}

/* Reuse the same licensed real photo only as peripheral room evidence. */
body:has(.screen[data-view="bridge_result"]) .app-shell::before,
body:has(.screen[data-view="bridge_result"]) .app-shell::after{
  display:block!important;
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:1;
  background-repeat:no-repeat;
  background-image:url("./quiet_room_real_workspace.webp");
  filter:saturate(.72) contrast(.96) brightness(1.055);
}

/* Left edge: plant + a small trace of the real timber surface. */
body:has(.screen[data-view="bridge_result"]) .app-shell::before{
  left:-18px;
  bottom:-26px;
  width:clamp(220px,21vw,340px);
  height:clamp(260px,37vh,390px);
  border-radius:0;
  background-size:760px auto;
  background-position:left bottom;
  opacity:.50;
  transform:none;
  -webkit-mask-image:linear-gradient(132deg,#000 0%,#000 43%,rgba(0,0,0,.84) 59%,rgba(0,0,0,.34) 77%,transparent 94%);
  mask-image:linear-gradient(132deg,#000 0%,#000 43%,rgba(0,0,0,.84) 59%,rgba(0,0,0,.34) 77%,transparent 94%);
}

/* Right edge: cup + only a quiet hint of the writing surface / pen. */
body:has(.screen[data-view="bridge_result"]) .app-shell::after{
  right:-20px;
  bottom:-24px;
  width:clamp(250px,24vw,390px);
  height:clamp(235px,34vh,350px);
  border-radius:0;
  background-size:790px auto;
  background-position:right bottom;
  opacity:.47;
  transform:none;
  -webkit-mask-image:linear-gradient(228deg,#000 0%,#000 43%,rgba(0,0,0,.82) 60%,rgba(0,0,0,.30) 78%,transparent 95%);
  mask-image:linear-gradient(228deg,#000 0%,#000 43%,rgba(0,0,0,.82) 60%,rgba(0,0,0,.30) 78%,transparent 95%);
}

/* Porcelain air between the real objects and the writing field. */
body:has(.screen[data-view="bridge_result"]) .screen{
  position:relative;
  z-index:3;
}
body:has(.screen[data-view="bridge_result"]) .screen::before{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  left:16vw;
  right:16vw;
  top:8vh;
  bottom:8vh;
  background:radial-gradient(ellipse at center,rgba(249,250,248,.70) 0%,rgba(249,250,248,.48) 48%,transparent 78%);
}

/* The actual words and evidence remain visually above the room traces. */
body:has(.screen[data-view="bridge_result"]) .topbar,
body:has(.screen[data-view="bridge_result"]) .screen,
body:has(.screen[data-view="bridge_result"]) .quiet-footer{
  position:relative;
  z-index:3;
}

@media(max-width:1100px){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    left:-70px;opacity:.35;background-size:700px auto;
  }
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{
    right:-76px;opacity:.33;background-size:730px auto;
  }
}

@media(max-width:760px){
  /* Mobile keeps only a whisper of place; reading remains primary. */
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    width:138px;height:175px;left:-62px;bottom:-28px;
    background-size:480px auto;opacity:.20;
  }
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{
    width:146px;height:150px;right:-72px;bottom:-25px;
    background-size:500px auto;opacity:.18;
  }
  body:has(.screen[data-view="bridge_result"]) .screen::before{
    left:4vw;right:4vw;top:6vh;bottom:6vh;opacity:.72;
  }
}

@media(prefers-reduced-transparency:reduce){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before,
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{
    opacity:.16;
  }
}


/* =========================================================
   NORTH STAR PARITY PASS 02 · Real Still Life
   Locked reference: third / final approved SayBridge still-life North Star.
   Goal: reproduce the real-room presence in the actual browser UI, not as
   a screenshot and not as generated decoration.

   - one existing licensed real workspace photograph only
   - real plant / real mug / real pen live at the peripheral edges
   - the center remains a clean reading sanctuary
   - Dusk Indigo remains the meaning bridge
   - mineral teal belongs to brand / room atmosphere
   - no card wall, dashboard grammar, or AI theatre
   ========================================================= */

:root{
  --sb-dusk:#5c5d8c;
  --sb-teal:#477b7b;
  --sb-teal-soft:rgba(71,123,123,.18);
  --sb-porcelain:#f7f4ed;
  --sb-ink:#292f33;
  --sb-muted:#727673;
}

body:has(.screen[data-view="bridge_result"]){
  background:#f7f4ed;
  color:var(--sb-ink);
}

/* Soft wall light: warm-neutral, not beige-as-brand. */
body:has(.screen[data-view="bridge_result"])::before{
  background:
    radial-gradient(ellipse 78% 46% at 52% 1%, rgba(255,255,255,.97) 0%, rgba(255,255,255,.62) 37%, rgba(255,255,255,.10) 72%, transparent 86%),
    radial-gradient(ellipse 64% 62% at 10% 76%, rgba(120,151,145,.055), transparent 72%),
    radial-gradient(ellipse 58% 64% at 92% 79%, rgba(90,91,140,.035), transparent 74%),
    linear-gradient(180deg,#faf8f3 0%,#f6f3ec 67%,#f0ece4 100%);
}
body:has(.screen[data-view="bridge_result"])::after{
  opacity:.12;
}

/* Retire previous parity edge crops and rebuild them with stronger real presence. */
body:has(.screen[data-view="bridge_result"]) .app-shell::before,
body:has(.screen[data-view="bridge_result"]) .app-shell::after{
  background-image:url("./quiet_room_real_workspace.webp")!important;
  filter:saturate(.86) contrast(.98) brightness(1.045)!important;
  z-index:1!important;
}

/* Left: real foliage + ceramic plant vessel + timber edge.
   Larger and clearer than Pass 01, but masked away before the reading field. */
body:has(.screen[data-view="bridge_result"]) .app-shell::before{
  left:-44px!important;
  bottom:-34px!important;
  width:clamp(285px,23vw,390px)!important;
  height:clamp(355px,47vh,510px)!important;
  background-size:900px auto!important;
  background-position:left bottom!important;
  opacity:.78!important;
  -webkit-mask-image:linear-gradient(122deg,#000 0%,#000 48%,rgba(0,0,0,.87) 61%,rgba(0,0,0,.34) 78%,transparent 94%)!important;
  mask-image:linear-gradient(122deg,#000 0%,#000 48%,rgba(0,0,0,.87) 61%,rgba(0,0,0,.34) 78%,transparent 94%)!important;
}

/* Right: real ceramic mug + a trace of pen / writing surface.
   Keep the photograph natural; teal identity stays in UI, not fake recolouring. */
body:has(.screen[data-view="bridge_result"]) .app-shell::after{
  right:-38px!important;
  bottom:-34px!important;
  width:clamp(320px,25vw,430px)!important;
  height:clamp(300px,42vh,455px)!important;
  background-size:910px auto!important;
  background-position:right bottom!important;
  opacity:.80!important;
  -webkit-mask-image:linear-gradient(238deg,#000 0%,#000 49%,rgba(0,0,0,.86) 63%,rgba(0,0,0,.32) 80%,transparent 95%)!important;
  mask-image:linear-gradient(238deg,#000 0%,#000 49%,rgba(0,0,0,.86) 63%,rgba(0,0,0,.32) 80%,transparent 95%)!important;
}

/* A real writing surface without bringing the notebook photo under the text. */
body:has(.screen[data-view="bridge_result"]) .screen::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:1;
  left:0;
  right:0;
  bottom:0;
  height:clamp(90px,13vh,145px);
  background:
    linear-gradient(to bottom,rgba(247,244,237,0) 0%,rgba(247,244,237,.34) 18%,rgba(236,229,218,.82) 62%,rgba(226,216,203,.92) 100%);
  border-top:1px solid rgba(110,96,79,.05);
  box-shadow:0 -24px 70px rgba(80,68,53,.035) inset;
}

/* Clear central sanctuary: no white card, no translucent SaaS panel. */
body:has(.screen[data-view="bridge_result"]) .screen::before{
  left:17vw!important;
  right:17vw!important;
  top:5vh!important;
  bottom:4vh!important;
  background:radial-gradient(ellipse at center,rgba(250,249,245,.92) 0%,rgba(250,249,245,.78) 48%,rgba(250,249,245,.18) 75%,transparent 90%)!important;
}

/* Match the approved reference composition: centred invitation, then equal voices. */
.screen[data-view="bridge_result"] > .panel{
  max-width:1180px!important;
  padding:28px 34px 62px!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro{
  max-width:820px!important;
  margin:28px auto 0!important;
  text-align:center!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro .eyebrow{
  color:var(--sb-teal)!important;
  font-size:11px!important;
  letter-spacing:.09em!important;
  margin-bottom:14px!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro h2{
  max-width:760px!important;
  margin:0 auto!important;
  font-size:clamp(31px,3.1vw,42px)!important;
  line-height:1.34!important;
  font-weight:590!important;
  letter-spacing:-.045em!important;
  color:#252b2f!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro .lead{
  max-width:700px!important;
  margin:15px auto 0!important;
  font-size:14px!important;
  line-height:1.85!important;
  color:rgba(57,64,66,.66)!important;
}

.screen[data-view="bridge_result"] .quiet-mirror-spread{
  width:min(100%,1000px)!important;
  margin:45px auto 0!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:116px!important;
  align-items:start!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.source,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated{
  margin-top:0!important;
  padding:0!important;
}

/* The two voice labels sit on one horizon like the reference image. */
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  padding:0 0 13px!important;
  color:rgba(47,73,74,.62)!important;
  font-size:10px!important;
  letter-spacing:.075em!important;
  text-align:left!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta::after{
  content:""!important;
  display:block!important;
  flex:1!important;
  width:auto!important;
  height:1px!important;
  margin:0!important;
  background:rgba(71,123,123,.24)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta span:last-child{
  order:3;
  color:var(--sb-teal)!important;
  font-weight:600!important;
  letter-spacing:.12em!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated .bridge-meta{
  text-align:left!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated .bridge-meta::after{
  margin:0!important;
}

/* Quiet reading rhythm: equal weight, no 'AI answer' dominance. */
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated p{
  max-width:410px!important;
  margin:20px 0 0!important;
  font-size:17.2px!important;
  line-height:2.02!important;
  letter-spacing:-.012em!important;
  font-weight:470!important;
  color:rgba(38,44,47,.94)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated p{
  margin-left:auto!important;
}

/* Dusk Indigo is reserved for the point where meaning crosses. */
.screen[data-view="bridge_result"] .quiet-mirror-spread::before{
  top:38px!important;
  height:132px!important;
  background:linear-gradient(to bottom,rgba(92,93,140,.04),rgba(92,93,140,.36) 30%,rgba(92,93,140,.28) 72%,transparent)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::after{
  top:38px!important;
  width:8px!important;
  height:8px!important;
  background:var(--sb-dusk)!important;
  box-shadow:0 0 0 7px rgba(247,244,237,.98),0 0 0 13px rgba(92,93,140,.08)!important;
}

/* Evidence is a quiet continuation, not an explanatory dashboard. */
.screen[data-view="bridge_result"] .quiet-evidence-spine{
  max-width:760px!important;
  margin-top:58px!important;
  padding-top:24px!important;
  border-top:1px solid rgba(71,123,123,.22)!important;
  background:transparent!important;
}
.screen[data-view="bridge_result"] .quiet-evidence-spine::before{
  background:#f7f4ed!important;
  color:rgba(71,123,123,.66)!important;
}
.screen[data-view="bridge_result"] .quiet-evidence-spine h3{
  font-size:22px!important;
  font-weight:560!important;
  letter-spacing:-.03em!important;
}

/* Brand and active language echo mineral teal; never turn into a loud theme. */
body:has(.screen[data-view="bridge_result"]) .brand-button{
  color:var(--sb-teal)!important;
  letter-spacing:.19em!important;
}
body:has(.screen[data-view="bridge_result"]) .language-switch button.active{
  color:#315f62!important;
  border-color:rgba(71,123,123,.46)!important;
}

@media(max-width:980px){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    left:-94px!important;opacity:.48!important;background-size:760px auto!important;
  }
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{
    right:-106px!important;opacity:.48!important;background-size:780px auto!important;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread{column-gap:74px!important;}
}

@media(max-width:760px){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    width:145px!important;height:190px!important;left:-75px!important;bottom:-34px!important;
    background-size:520px auto!important;opacity:.22!important;
  }
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{
    width:155px!important;height:175px!important;right:-78px!important;bottom:-34px!important;
    background-size:540px auto!important;opacity:.22!important;
  }
  body:has(.screen[data-view="bridge_result"]) .screen::after{height:78px!important;opacity:.62;}
  .screen[data-view="bridge_result"] > .panel{padding:24px 16px 48px!important;}
  .screen[data-view="bridge_result"] .quiet-mirror-intro{margin-top:18px!important;text-align:left!important;}
  .screen[data-view="bridge_result"] .quiet-mirror-intro h2{font-size:29px!important;margin-left:0!important;}
  .screen[data-view="bridge_result"] .quiet-mirror-intro .lead{margin-left:0!important;}
  .screen[data-view="bridge_result"] .quiet-mirror-spread{
    width:100%!important;margin-top:34px!important;grid-template-columns:1fr!important;row-gap:42px!important;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread::before{
    left:23px!important;top:50%!important;width:74px!important;height:1px!important;
    transform:translateY(-50%)!important;
    background:linear-gradient(to right,transparent,rgba(92,93,140,.30),transparent)!important;
  }
  .screen[data-view="bridge_result"] .quiet-mirror-spread::after{left:23px!important;top:50%!important;}
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p,
  .screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated p{
    max-width:none!important;margin-left:0!important;font-size:16.5px!important;line-height:1.96!important;
  }
}


/* =========================================================
   NORTH STAR PARITY PASS 03 · Approved Color Still Life
   Source: already-approved SayBridge North Star image.
   No new image generation. We reuse only the still-life edge regions:
   left = vase / branches / stone, right = teal cup / pen / paper.

   Single-gap target:
   bring the North Star's warmer colour presence and real-feeling room trace
   into the build without allowing imagery to compete with the two voices.

   Rollback anchors preserved:
   - North Star Parity Pass 02 · Real Still Life
   - Visual Candidate 09 · Real Quiet Writing Place
   Meaning Preservation / QA .38.18 / Production v0.7.2 untouched.
   ========================================================= */

:root{
  --sb-ns-wall:#f7f2e9;
  --sb-ns-wall-top:#fbf8f2;
  --sb-ns-surface:#eee5d8;
  --sb-ns-ink:#303334;
  --sb-ns-muted:#74716c;
  --sb-ns-teal:#2f7376;
  --sb-ns-teal-soft:rgba(47,115,118,.22);
  --sb-ns-dusk:#5c5e8b;
}

body:has(.screen[data-view="bridge_result"]){
  background:var(--sb-ns-wall)!important;
  color:var(--sb-ns-ink)!important;
}

/* Warm wall light from the approved North Star: cream is atmosphere, not brand. */
body:has(.screen[data-view="bridge_result"])::before{
  background:
    radial-gradient(ellipse 70% 43% at 51% 0%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.62) 42%,rgba(255,255,255,.06) 78%,transparent 90%),
    radial-gradient(ellipse 42% 58% at 8% 66%,rgba(175,194,184,.075) 0%,transparent 72%),
    radial-gradient(ellipse 46% 58% at 94% 67%,rgba(53,112,113,.045) 0%,transparent 74%),
    linear-gradient(180deg,var(--sb-ns-wall-top) 0%,var(--sb-ns-wall) 70%,#f1e9df 100%)!important;
}
body:has(.screen[data-view="bridge_result"])::after{
  opacity:.10!important;
}

/* Replace stock-photo crops with the already-approved North Star still-life crops. */
body:has(.screen[data-view="bridge_result"]) .app-shell::before,
body:has(.screen[data-view="bridge_result"]) .app-shell::after{
  filter:none!important;
  background-repeat:no-repeat!important;
  z-index:1!important;
}

body:has(.screen[data-view="bridge_result"]) .app-shell::before{
  background-image:url("./north_star_left_still_life.webp")!important;
  left:-8px!important;
  bottom:-18px!important;
  width:clamp(210px,17vw,285px)!important;
  height:clamp(460px,66vh,690px)!important;
  background-size:100% auto!important;
  background-position:left bottom!important;
  opacity:.92!important;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 56%,rgba(0,0,0,.86) 70%,rgba(0,0,0,.34) 86%,transparent 99%)!important;
  mask-image:linear-gradient(100deg,#000 0%,#000 56%,rgba(0,0,0,.86) 70%,rgba(0,0,0,.34) 86%,transparent 99%)!important;
}

body:has(.screen[data-view="bridge_result"]) .app-shell::after{
  background-image:url("./north_star_right_still_life.webp")!important;
  right:-8px!important;
  bottom:-10px!important;
  width:clamp(285px,22vw,390px)!important;
  height:clamp(300px,43vh,430px)!important;
  background-size:100% auto!important;
  background-position:right bottom!important;
  opacity:.96!important;
  -webkit-mask-image:linear-gradient(260deg,#000 0%,#000 56%,rgba(0,0,0,.88) 70%,rgba(0,0,0,.36) 86%,transparent 99%)!important;
  mask-image:linear-gradient(260deg,#000 0%,#000 56%,rgba(0,0,0,.88) 70%,rgba(0,0,0,.36) 86%,transparent 99%)!important;
}

/* Let the bottom feel like a real desk without importing a giant photo floor. */
body:has(.screen[data-view="bridge_result"]) .screen::after{
  background:
    linear-gradient(to bottom,rgba(247,242,233,0) 0%,rgba(247,242,233,.30) 18%,rgba(239,230,218,.72) 64%,rgba(231,219,204,.90) 100%)!important;
  border-top:1px solid rgba(95,80,63,.035)!important;
  box-shadow:0 -28px 72px rgba(83,68,50,.035) inset!important;
}

/* Keep the reading sanctuary luminous but not white-card bright. */
body:has(.screen[data-view="bridge_result"]) .screen::before{
  left:18vw!important;
  right:18vw!important;
  top:5vh!important;
  bottom:4vh!important;
  background:radial-gradient(ellipse at center,rgba(252,249,244,.94) 0%,rgba(250,246,240,.78) 50%,rgba(250,246,240,.20) 76%,transparent 91%)!important;
}

/* Colour role: teal = human room / language relation, dusk = meaning bridge. */
body:has(.screen[data-view="bridge_result"]) .brand-button,
.screen[data-view="bridge_result"] .quiet-mirror-intro .eyebrow,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta span:last-child{
  color:var(--sb-ns-teal)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta::after{
  background:rgba(47,115,118,.26)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::before{
  background:linear-gradient(to bottom,transparent,var(--sb-ns-teal-soft) 22%,var(--sb-ns-teal-soft) 78%,transparent)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::after{
  background:var(--sb-ns-dusk)!important;
  box-shadow:0 0 0 7px rgba(247,243,237,.96),0 0 0 14px rgba(92,94,139,.075)!important;
}

/* Typography stays buildable sans-serif; only rhythm and warmth change. */
.screen[data-view="bridge_result"] .quiet-mirror-intro h2{
  color:#2f3232!important;
  font-weight:580!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro .lead{
  color:rgba(67,68,65,.67)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card p,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-result-card.translated p{
  color:rgba(45,47,47,.95)!important;
}

/* Evidence should feel like the next page of reading, not a dashboard card. */
.screen[data-view="bridge_result"] .meaning-checkpoint-section{
  background:rgba(250,247,241,.44)!important;
  border-color:rgba(47,115,118,.16)!important;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-card{
  border-color:rgba(47,115,118,.10)!important;
}

@media(max-width:1100px){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    left:-78px!important;opacity:.58!important;width:250px!important;
  }
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{
    right:-94px!important;opacity:.62!important;width:330px!important;
  }
}

@media(max-width:760px){
  /* Mobile retains only peripheral colour traces; reading remains primary. */
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    left:-106px!important;bottom:-18px!important;width:185px!important;height:330px!important;opacity:.28!important;
  }
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{
    right:-128px!important;bottom:-12px!important;width:235px!important;height:245px!important;opacity:.30!important;
  }
  body:has(.screen[data-view="bridge_result"]) .screen::before{
    left:3vw!important;right:3vw!important;
  }
}

@media(prefers-reduced-transparency:reduce){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before,
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{opacity:.24!important}
}


/* =========================================================
   NORTH STAR PARITY PASS 04 · Full-Height Botanical Presence
   Single-gap refinement from approved Pass 03.

   LOCKED / KEEP:
   - approved warm porcelain colour world
   - approved colour still-life assets
   - right teal cup / pen / paper crop
   - central reading sanctuary
   - Dusk Indigo meaning bridge
   - Meaning Preservation / QA .38.18 / Production v0.7.2

   ONLY GAP ADDRESSED:
   The left botanical branch must no longer feel cut off mid-screen.
   It now rises naturally from the vase through the upper-left room edge,
   matching the approved North Star's vertical botanical continuity.
   ========================================================= */

@media (min-width: 901px){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    left:-6px!important;
    top:0!important;
    bottom:auto!important;
    width:clamp(218px,14.5vw,252px)!important;
    height:min(100vh,930px)!important;
    background-size:auto 100%!important;
    background-position:left top!important;
    opacity:.94!important;
    -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 57%,rgba(0,0,0,.88) 72%,rgba(0,0,0,.34) 88%,transparent 100%)!important;
    mask-image:linear-gradient(100deg,#000 0%,#000 57%,rgba(0,0,0,.88) 72%,rgba(0,0,0,.34) 88%,transparent 100%)!important;
  }
}

/* On narrower screens, keep the botanical as atmosphere rather than content. */
@media (min-width: 641px) and (max-width: 900px){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    left:-18px!important;
    top:28px!important;
    bottom:auto!important;
    width:190px!important;
    height:78vh!important;
    background-size:auto 100%!important;
    background-position:left top!important;
    opacity:.54!important;
  }
}


/* =========================================================
   NORTH STAR PARITY PASS 05 · Seamless Room Integration
   APPROVED REFERENCE: the final warm room North Star accepted 2026-08-19.

   LOCKED / KEEP:
   - Pass 04 composition and full-height botanical presence
   - warm porcelain wall
   - teal ceramic / pen / paper presence
   - Dusk Indigo meaning bridge
   - two voices remain the protagonist
   - Meaning Preservation / QA .38.18 / Production v0.7.2 untouched

   ONLY GAP ADDRESSED:
   remove the visual seam between photographic still-life and interface.
   The room must read as one continuous place, not UI plus pasted images.
   ========================================================= */

:root{
  --sb-ns05-wall:#f2eadf;
  --sb-ns05-wall-light:#fbf7f0;
  --sb-ns05-surface:#c9a77f;
  --sb-ns05-ink:#303233;
  --sb-ns05-muted:#74706b;
  --sb-ns05-teal:#2f7376;
  --sb-ns05-dusk:#5c5e8b;
}

body:has(.screen[data-view="bridge_result"]){
  background:var(--sb-ns05-wall)!important;
  color:var(--sb-ns05-ink)!important;
}

/* One continuous warm wall. The room colour is shared by UI and photos. */
body:has(.screen[data-view="bridge_result"])::before{
  background:
    radial-gradient(ellipse 66% 40% at 52% -2%,rgba(255,255,255,.97) 0%,rgba(255,255,255,.64) 44%,rgba(255,255,255,.10) 79%,transparent 91%),
    radial-gradient(ellipse 44% 58% at 7% 43%,rgba(199,180,151,.12) 0%,rgba(199,180,151,.04) 48%,transparent 76%),
    radial-gradient(ellipse 40% 55% at 95% 59%,rgba(62,118,117,.055) 0%,transparent 74%),
    linear-gradient(180deg,var(--sb-ns05-wall-light) 0%,#f7f0e6 51%,var(--sb-ns05-wall) 78%,#eadcca 100%)!important;
}
body:has(.screen[data-view="bridge_result"])::after{
  opacity:.07!important;
}

/* Botanical edge: retain full height, but feather farther into the shared wall. */
@media (min-width:901px){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    left:-3px!important;
    top:0!important;
    bottom:auto!important;
    width:clamp(235px,15.5vw,292px)!important;
    height:min(100vh,950px)!important;
    background-image:url("./north_star_left_still_life.webp")!important;
    background-size:auto 100%!important;
    background-position:left top!important;
    opacity:.99!important;
    -webkit-mask-image:linear-gradient(96deg,#000 0%,#000 42%,rgba(0,0,0,.97) 58%,rgba(0,0,0,.82) 70%,rgba(0,0,0,.42) 84%,rgba(0,0,0,.10) 94%,transparent 100%)!important;
    mask-image:linear-gradient(96deg,#000 0%,#000 42%,rgba(0,0,0,.97) 58%,rgba(0,0,0,.82) 70%,rgba(0,0,0,.42) 84%,rgba(0,0,0,.10) 94%,transparent 100%)!important;
  }
}

/* Clean approved right still-life: no baked text, no rectangular crop boundary. */
body:has(.screen[data-view="bridge_result"]) .app-shell::after{
  background-image:url("./north_star_right_still_life_clean.webp")!important;
  right:-4px!important;
  top:0!important;
  bottom:auto!important;
  width:clamp(285px,22vw,390px)!important;
  height:100vh!important;
  background-size:100% auto!important;
  background-position:right bottom!important;
  background-repeat:no-repeat!important;
  opacity:.98!important;
  -webkit-mask-image:linear-gradient(264deg,#000 0%,#000 48%,rgba(0,0,0,.96) 61%,rgba(0,0,0,.76) 73%,rgba(0,0,0,.34) 86%,rgba(0,0,0,.08) 95%,transparent 100%)!important;
  mask-image:linear-gradient(264deg,#000 0%,#000 48%,rgba(0,0,0,.96) 61%,rgba(0,0,0,.76) 73%,rgba(0,0,0,.34) 86%,rgba(0,0,0,.08) 95%,transparent 100%)!important;
}

/* Real photographed wood surface across the room: softened into the wall. */
body:has(.screen[data-view="bridge_result"]) .screen::after{
  height:clamp(150px,19vh,220px)!important;
  bottom:0!important;
  left:0!important;
  right:0!important;
  background:
    linear-gradient(to bottom,rgba(242,234,223,1) 0%,rgba(242,234,223,.82) 18%,rgba(242,234,223,.18) 43%,rgba(241,231,218,.02) 55%),
    linear-gradient(90deg,rgba(236,224,208,.32),rgba(255,255,255,0) 26%,rgba(255,255,255,0) 74%,rgba(228,214,196,.27)),
    url("./north_star_real_wood_surface.webp") center bottom/100% 100% no-repeat!important;
  opacity:.82!important;
  border-top:0!important;
  box-shadow:0 -40px 84px rgba(84,64,42,.055) inset!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 15%,rgba(0,0,0,.72) 43%,#000 68%,#000 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 15%,rgba(0,0,0,.72) 43%,#000 68%,#000 100%)!important;
}

/* The reading sanctuary is light, but no longer a separate white rectangle. */
body:has(.screen[data-view="bridge_result"]) .screen::before{
  left:15vw!important;
  right:15vw!important;
  top:4vh!important;
  bottom:12vh!important;
  background:radial-gradient(ellipse at 51% 43%,rgba(255,252,247,.84) 0%,rgba(252,247,240,.60) 48%,rgba(248,241,232,.17) 72%,transparent 91%)!important;
}

/* A subtle photographic light rhythm helps the wall and objects belong together. */
body:has(.screen[data-view="bridge_result"]) .screen{
  background:
    radial-gradient(ellipse 28% 42% at 10% 46%,rgba(255,255,255,.17),transparent 72%),
    radial-gradient(ellipse 24% 34% at 88% 60%,rgba(255,255,255,.11),transparent 75%)!important;
}

/* Evidence card follows the approved North Star: one quiet page, not a dashboard. */
.screen[data-view="bridge_result"] .meaning-checkpoint-section{
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border:1px solid rgba(47,115,118,.16)!important;
  border-radius:20px!important;
  background:rgba(251,247,241,.75)!important;
  box-shadow:0 18px 54px rgba(82,65,46,.055)!important;
  backdrop-filter:blur(2px)!important;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-section::before{
  background:var(--sb-ns05-wall)!important;
}

/* Keep the approved colour grammar. */
body:has(.screen[data-view="bridge_result"]) .brand-button,
.screen[data-view="bridge_result"] .quiet-mirror-intro .eyebrow,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta span:last-child{
  color:var(--sb-ns05-teal)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::after{
  background:var(--sb-ns05-dusk)!important;
  box-shadow:0 0 0 7px rgba(247,242,235,.96),0 0 0 14px rgba(92,94,139,.07)!important;
}

/* Desktop content sits above room presence. */
body:has(.screen[data-view="bridge_result"]) .topbar,
body:has(.screen[data-view="bridge_result"]) .screen,
body:has(.screen[data-view="bridge_result"]) .quiet-footer{
  position:relative!important;
  z-index:4!important;
}

@media(max-width:1100px){
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    left:-74px!important;width:250px!important;opacity:.70!important;
  }
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{
    right:-90px!important;width:325px!important;opacity:.70!important;
  }
}

@media(max-width:760px){
  /* Mobile: atmosphere remains peripheral; reading remains primary. */
  body:has(.screen[data-view="bridge_result"]) .app-shell::before{
    left:-112px!important;top:48px!important;width:190px!important;height:52vh!important;opacity:.25!important;
  }
  body:has(.screen[data-view="bridge_result"]) .app-shell::after{
    right:-136px!important;top:auto!important;bottom:0!important;width:240px!important;height:44vh!important;opacity:.27!important;
  }
  body:has(.screen[data-view="bridge_result"]) .screen::after{
    height:120px!important;opacity:.42!important;
  }
  body:has(.screen[data-view="bridge_result"]) .screen::before{
    left:2vw!important;right:2vw!important;bottom:5vh!important;
  }
}

@media(prefers-reduced-transparency:reduce){
  .screen[data-view="bridge_result"] .meaning-checkpoint-section{backdrop-filter:none!important}
}


/* =========================================================
   NORTH STAR PARITY PASS 06 · One Continuous Room
   NORTH STAR: approved warm room reference, locked 2026-08-19.

   SINGLE GAP ADDRESSED:
   Stop compositing left object / wall / table / right object as separate
   browser layers.  Use one pre-composited room plate so the space reads
   as a single photographed place behind the live UI.

   LOCKED / UNCHANGED:
   - live source/target text
   - Dusk Indigo meaning bridge
   - typography direction and hierarchy
   - Meaning Preservation / verifier / QA .38.18
   - Production v0.7.2
   ========================================================= */

:root{
  --sb-ns06-ink:#303233;
  --sb-ns06-muted:#77716a;
  --sb-ns06-teal:#2f7376;
  --sb-ns06-dusk:#5c5e8b;
  --sb-ns06-paper:#f8f3eb;
}

/* One room plate, not three CSS layers. */
body:has(.screen[data-view="bridge_result"]){
  background:#f3eadf url("./north_star_room_continuous_v06.webp") center bottom / cover no-repeat fixed!important;
  color:var(--sb-ns06-ink)!important;
}
body:has(.screen[data-view="bridge_result"])::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    radial-gradient(ellipse 54% 56% at 50% 40%,rgba(255,252,247,.56) 0%,rgba(255,252,247,.33) 48%,rgba(255,252,247,.06) 74%,transparent 90%)!important;
}
body:has(.screen[data-view="bridge_result"])::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 58%,rgba(67,47,28,.035) 100%)!important;
  opacity:1!important;
}

/* Kill previous independent still-life/table layers completely. */
body:has(.screen[data-view="bridge_result"]) .app-shell::before,
body:has(.screen[data-view="bridge_result"]) .app-shell::after,
body:has(.screen[data-view="bridge_result"]) .screen::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

/* The middle is a calm reading sanctuary, not an opaque panel. */
body:has(.screen[data-view="bridge_result"]) .screen::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:17vw!important;
  right:17vw!important;
  top:7vh!important;
  bottom:11vh!important;
  pointer-events:none!important;
  z-index:-1!important;
  background:radial-gradient(ellipse 72% 62% at 50% 43%,rgba(255,253,249,.48) 0%,rgba(255,252,247,.24) 52%,rgba(255,252,247,.04) 78%,transparent 92%)!important;
  filter:blur(.25px)!important;
}

body:has(.screen[data-view="bridge_result"]) .topbar,
body:has(.screen[data-view="bridge_result"]) .screen,
body:has(.screen[data-view="bridge_result"]) .quiet-footer{
  position:relative!important;
  z-index:3!important;
}

/* Keep the words darker than the room. */
.screen[data-view="bridge_result"] .quiet-mirror-intro h1,
.screen[data-view="bridge_result"] .quiet-mirror-copy,
.screen[data-view="bridge_result"] .meaning-checkpoint-section h2{
  color:var(--sb-ns06-ink)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-intro p,
.screen[data-view="bridge_result"] .meaning-checkpoint-section p,
.screen[data-view="bridge_result"] .bridge-verification{
  color:var(--sb-ns06-muted)!important;
}

/* Brand / relationship cues: mineral teal. Meaning crossing: Dusk Indigo. */
body:has(.screen[data-view="bridge_result"]) .brand-button,
.screen[data-view="bridge_result"] .quiet-mirror-intro .eyebrow,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta,
.screen[data-view="bridge_result"] .quiet-mirror-spread .bridge-meta span:last-child{
  color:var(--sb-ns06-teal)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::before{
  background:linear-gradient(to bottom,transparent,rgba(92,94,139,.26) 20%,rgba(92,94,139,.24) 82%,transparent)!important;
}
.screen[data-view="bridge_result"] .quiet-mirror-spread::after{
  background:var(--sb-ns06-dusk)!important;
  box-shadow:0 0 0 7px rgba(248,244,238,.94),0 0 0 14px rgba(92,94,139,.075)!important;
}

/* Evidence rests on the tabletop as a quiet page, not a white SaaS card. */
.screen[data-view="bridge_result"] .meaning-checkpoint-section{
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border:1px solid rgba(47,115,118,.14)!important;
  border-radius:18px!important;
  background:rgba(249,245,238,.72)!important;
  box-shadow:0 16px 44px rgba(78,57,37,.06)!important;
  backdrop-filter:blur(3px)!important;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-section::before{
  background:rgba(244,236,225,.90)!important;
}
.screen[data-view="bridge_result"] .meaning-checkpoint-card{
  border-color:rgba(47,115,118,.09)!important;
}

@media (max-width:1100px){
  body:has(.screen[data-view="bridge_result"]){
    background-position:center bottom!important;
  }
  body:has(.screen[data-view="bridge_result"]) .screen::before{
    left:8vw!important;right:8vw!important;
  }
}

@media (max-width:760px){
  /* On phones the place becomes atmosphere; words remain primary. */
  body:has(.screen[data-view="bridge_result"]){
    background-size:auto 100%!important;
    background-position:center bottom!important;
  }
  body:has(.screen[data-view="bridge_result"])::before{
    background:linear-gradient(180deg,rgba(250,247,242,.62) 0%,rgba(250,247,242,.48) 68%,rgba(245,237,227,.30) 100%)!important;
  }
  body:has(.screen[data-view="bridge_result"]) .screen::before{
    left:0!important;right:0!important;top:3vh!important;bottom:3vh!important;
    background:rgba(251,249,245,.28)!important;
  }
  .screen[data-view="bridge_result"] .meaning-checkpoint-section{
    background:rgba(250,247,242,.84)!important;
    backdrop-filter:blur(4px)!important;
  }
}

@media (prefers-reduced-transparency:reduce){
  .screen[data-view="bridge_result"] .meaning-checkpoint-section{backdrop-filter:none!important}
}


/* ================================================================
   SAYBRIDGE · NORTH STAR LIVE ENGINE INTEGRATION v0.2
   FULL JOURNEY ROOM SKIN
   View-layer only. Meaning / worker / verifier logic untouched.
   North Star: one quiet real room from first screen to final result.
   ================================================================ */

:root{
  --ns-ink:#3d3d3b;
  --ns-muted:#77736d;
  --ns-faint:#9d9890;
  --ns-teal:#4f8588;
  --ns-indigo:#5b5c8e;
  --ns-line:rgba(74,111,111,.17);
  --ns-paper:rgba(255,253,249,.76);
}

/* One room across every live journey screen except the already-locked result room. */
body:not(:has(.screen[data-view="bridge_result"])){
  color:var(--ns-ink);
  background-color:#f4eee4;
  background-image:
    linear-gradient(90deg, rgba(255,253,249,.08) 0%, rgba(255,253,249,.88) 21%, rgba(255,253,249,.94) 50%, rgba(255,253,249,.88) 79%, rgba(255,253,249,.08) 100%),
    url('./north_star_room_continuous_v06.webp');
  background-position:center bottom;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

body:not(:has(.screen[data-view="bridge_result"])) .quiet-room-presence{display:none!important}
body:not(:has(.screen[data-view="bridge_result"])) .app-shell{
  position:relative;
  min-height:100vh;
  padding-top:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 58%);
}
body:not(:has(.screen[data-view="bridge_result"])) .topbar{
  width:min(100%,1120px);
  margin-bottom:8px;
  position:relative;
  z-index:10;
}
body:not(:has(.screen[data-view="bridge_result"])) .brand-button{
  color:#4e7f82;
  letter-spacing:.22em;
  font-weight:600;
}
body:not(:has(.screen[data-view="bridge_result"])) .language-switch{gap:18px}
body:not(:has(.screen[data-view="bridge_result"])) .language-switch button{
  min-height:34px;
  padding:0 2px 4px;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  background:transparent;
  color:#706c67;
}
body:not(:has(.screen[data-view="bridge_result"])) .language-switch button.active{
  background:transparent;
  border-color:rgba(72,126,130,.62);
  color:#356f74;
  box-shadow:none;
}

body:not(:has(.screen[data-view="bridge_result"])) .screen{
  width:min(100%,1080px);
  min-height:calc(100vh - 155px);
  padding-top:38px;
  position:relative;
  z-index:2;
}

/* Remove the old giant generic white card shell. */
body:not(:has(.screen[data-view="bridge_result"])) .screen > .panel,
body:has(#inputScreen:not([hidden])) #inputScreen > .panel{
  max-width:920px;
  padding:58px 52px 74px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

body:not(:has(.screen[data-view="bridge_result"])) .eyebrow,
body:has(#inputScreen:not([hidden])) .eyebrow{
  color:var(--ns-teal);
  letter-spacing:.11em;
  font-weight:600;
}
body:not(:has(.screen[data-view="bridge_result"])) h1,
body:not(:has(.screen[data-view="bridge_result"])) h2,
body:has(#inputScreen:not([hidden])) h2{
  color:var(--ns-ink);
  letter-spacing:-.045em;
}
body:not(:has(.screen[data-view="bridge_result"])) .lead,
body:has(#inputScreen:not([hidden])) .lead{
  color:var(--ns-muted);
}

/* Welcome: North Star first impression, no white SaaS panel. */
.screen[data-view="welcome"]{
  align-items:center;
  padding-top:0!important;
}
.screen[data-view="welcome"] > .panel{
  padding-top:10vh!important;
  padding-bottom:20vh!important;
}
.screen[data-view="welcome"] .silent-welcome{
  min-height:auto;
}
.screen[data-view="welcome"] .silent-welcome-inner{max-width:700px}
.screen[data-view="welcome"] h1{
  max-width:680px;
  font-size:clamp(40px,5.5vw,60px);
  line-height:1.36;
}
.screen[data-view="welcome"] .lead{
  max-width:610px;
  font-size:16px;
  line-height:1.95;
}
.screen[data-view="welcome"] .actions{margin-top:34px}
.screen[data-view="welcome"] .primary{
  min-width:220px;
  border-color:rgba(80,115,116,.28);
  background:rgba(255,253,249,.72);
  color:#454542;
  box-shadow:0 12px 30px rgba(94,75,54,.07);
}

/* Entrance choices read like two paths, not two gradient cards. */
.screen[data-view="entrance"] .mode-grid{
  margin:38px auto 0;
  max-width:790px;
  gap:0;
  border-top:1px solid var(--ns-line);
  border-bottom:1px solid var(--ns-line);
}
.screen[data-view="entrance"] .mode-card{
  min-height:170px;
  padding:30px 44px 28px 26px;
  border:0;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
}
.screen[data-view="entrance"] .mode-card + .mode-card{border-left:1px solid var(--ns-line)}
.screen[data-view="entrance"] .mode-card:hover,
.screen[data-view="entrance"] .mode-card:focus-visible{
  transform:none;
  background:rgba(255,253,249,.34)!important;
}
.screen[data-view="entrance"] .mode-symbol{color:var(--ns-teal);font-size:21px;margin-bottom:15px}
.screen[data-view="entrance"] .mode-title{font-size:22px}
.screen[data-view="entrance"] .mode-lead{color:var(--ns-muted)}
.screen[data-view="entrance"] .mode-arrow{color:var(--ns-indigo)}

/* Writing surfaces: paper in the room, never a floating app card wall. */
body:not(:has(.screen[data-view="bridge_result"])) .input-card textarea,
body:not(:has(.screen[data-view="bridge_result"])) .editable-draft,
body:not(:has(.screen[data-view="bridge_result"])) .focus-custom textarea,
body:has(#inputScreen:not([hidden])) textarea#words{
  border:1px solid rgba(90,108,104,.17)!important;
  border-radius:16px!important;
  background:rgba(255,254,251,.78)!important;
  color:var(--ns-ink)!important;
  box-shadow:0 18px 46px rgba(93,76,58,.05)!important;
  backdrop-filter:blur(5px);
}
body:not(:has(.screen[data-view="bridge_result"])) .input-card textarea:focus,
body:not(:has(.screen[data-view="bridge_result"])) .editable-draft:focus,
body:not(:has(.screen[data-view="bridge_result"])) .focus-custom textarea:focus,
body:has(#inputScreen:not([hidden])) textarea#words:focus{
  border-color:rgba(76,123,126,.38)!important;
  outline:2px solid rgba(76,123,126,.08)!important;
}

/* Secondary content becomes quiet sheets/lines instead of rounded-card walls. */
body:not(:has(.screen[data-view="bridge_result"])) .mirror-card,
body:not(:has(.screen[data-view="bridge_result"])) .letter-card,
body:not(:has(.screen[data-view="bridge_result"])) .source-words-card,
body:not(:has(.screen[data-view="bridge_result"])) .comfort-card,
body:not(:has(.screen[data-view="bridge_result"])) .focus-summary,
body:not(:has(.screen[data-view="bridge_result"])) .review-card,
body:not(:has(.screen[data-view="bridge_result"])) .craft-card,
body:not(:has(.screen[data-view="bridge_result"])) .mirror-guide,
body:not(:has(.screen[data-view="bridge_result"])) .anchor-section{
  border-color:rgba(83,111,108,.15)!important;
  border-radius:16px!important;
  background:rgba(255,253,249,.60)!important;
  box-shadow:none!important;
  backdrop-filter:blur(4px);
}
body:not(:has(.screen[data-view="bridge_result"])) .craft-card{border-style:solid!important}

/* Choice fields retain affordance, but lose generic pill/card excess. */
body:not(:has(.screen[data-view="bridge_result"])) .focus-options{gap:0}
body:not(:has(.screen[data-view="bridge_result"])) .focus-option{
  min-height:92px;
  border-width:1px 0 0 0;
  border-color:var(--ns-line);
  border-radius:0;
  background:rgba(255,253,249,.18);
}
body:not(:has(.screen[data-view="bridge_result"])) .focus-option:last-child{border-bottom:1px solid var(--ns-line)}
body:not(:has(.screen[data-view="bridge_result"])) .focus-option.selected{
  background:rgba(235,243,240,.52);
  border-color:rgba(79,133,136,.30);
  box-shadow:none;
}
body:not(:has(.screen[data-view="bridge_result"])) .focus-check{color:var(--ns-teal)}

/* Actions: restrained, human, unmistakably intentional. */
body:not(:has(.screen[data-view="bridge_result"])) .primary,
body:has(#inputScreen:not([hidden])) .primary{
  border-color:#5b5c87;
  background:#5b5c87;
  color:#fff;
  box-shadow:0 12px 28px rgba(69,70,111,.13);
}
body:not(:has(.screen[data-view="bridge_result"])) .secondary,
body:has(#inputScreen:not([hidden])) .secondary{
  border-color:rgba(86,106,101,.19);
  background:rgba(255,253,249,.57);
  color:#67645f;
}
body:not(:has(.screen[data-view="bridge_result"])) .quiet-link,
body:has(#inputScreen:not([hidden])) .quiet-link{color:#918b83}

/* QA clutter is still in the build, but not part of Sunny's experience. */
body:not(:has(.screen[data-view="bridge_result"])) .build-label{display:none}
body:not(:has(.screen[data-view="bridge_result"])) .quiet-footer{
  width:min(100%,1080px);
  color:rgba(84,82,78,.48);
  justify-content:center;
  padding-bottom:8px;
}
body:not(:has(.screen[data-view="bridge_result"])) .connection-badge{
  min-height:28px;
  padding:0 8px;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(78,120,122,.62);
}

@media(max-width:760px){
  body:not(:has(.screen[data-view="bridge_result"])){
    background-image:
      linear-gradient(90deg, rgba(255,253,249,.72), rgba(255,253,249,.91) 18%, rgba(255,253,249,.91) 82%, rgba(255,253,249,.72)),
      url('./north_star_room_continuous_v06.webp');
    background-size:auto 100vh;
    background-position:center bottom;
  }
  body:not(:has(.screen[data-view="bridge_result"])) .app-shell{padding:16px 12px 32px}
  body:not(:has(.screen[data-view="bridge_result"])) .topbar{margin-bottom:4px}
  body:not(:has(.screen[data-view="bridge_result"])) .language-switch{gap:10px}
  body:not(:has(.screen[data-view="bridge_result"])) .screen{padding-top:12px;min-height:620px}
  body:not(:has(.screen[data-view="bridge_result"])) .screen > .panel,
  body:has(#inputScreen:not([hidden])) #inputScreen > .panel{
    padding:44px 10px 72px;
  }
  .screen[data-view="welcome"] > .panel{padding-top:11vh!important;padding-bottom:18vh!important}
  .screen[data-view="welcome"] h1{font-size:clamp(36px,11vw,50px)}
  .screen[data-view="entrance"] .mode-grid{grid-template-columns:1fr}
  .screen[data-view="entrance"] .mode-card + .mode-card{border-left:0;border-top:1px solid var(--ns-line)}
  body:not(:has(.screen[data-view="bridge_result"])) .focus-options{grid-template-columns:1fr}
}

/* ================================================================
   SAYBRIDGE · MOBILE NORTH STAR PARITY 01
   2026-08-19

   PURPOSE
   Keep the approved desktop North Star untouched while reframing the
   SAME approved real-room assets for portrait phones. This is not a
   new art direction. It is the same SayBridge room with a vertical
   camera: botanical presence at upper-left, teal cup / pen at lower-right,
   a calm wall in the centre, and human words kept visually primary.

   HARD PROTECTION
   - Meaning / rewrite / verifier logic unchanged
   - QA .38.18 unchanged
   - Production v0.7.2 untouched
   - Desktop North Star room unchanged
   ================================================================ */

@media (max-width:760px){
  :root{
    --sb-mobile-wall:#f4eee5;
    --sb-mobile-ink:#343433;
    --sb-mobile-muted:#79736c;
    --sb-mobile-teal:#397b7e;
    --sb-mobile-dusk:#5c5e8b;
  }

  /*
     Portrait camera for the same approved room.
     Use the existing approved photographic crops instead of hiding the room
     behind a white wash or center-cropping the desktop 16:9 plate.
  */
  body,
  body:not(:has(.screen[data-view="bridge_result"])),
  body:has(.screen[data-view="bridge_result"]){
    min-height:100svh!important;
    color:var(--sb-mobile-ink)!important;
    background-color:var(--sb-mobile-wall)!important;
    background-image:
      linear-gradient(180deg,rgba(255,253,249,.03) 0%,rgba(255,253,249,.01) 55%,rgba(171,124,78,.075) 100%),
      linear-gradient(90deg,rgba(246,240,231,.03) 0%,rgba(246,240,231,.34) 24%,rgba(247,242,234,.74) 38%,rgba(247,242,234,.77) 62%,rgba(246,240,231,.33) 78%,rgba(246,240,231,.03) 100%),
      url('./north_star_left_still_life.webp'),
      url('./north_star_right_still_life_clean.webp'),
      linear-gradient(180deg,#f6f0e8 0%,#f5efe7 72%,#eadbc9 100%)!important;
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat!important;
    background-size:
      100% 100%,
      100% 100%,
      150px auto,
      174px auto,
      100% 100%!important;
    background-position:
      center,
      center,
      left -22px top 54px,
      right -30px bottom 18px,
      center!important;
    background-attachment:scroll!important;
  }

  /* Remove desktop room overlays that make the phone look washed out. */
  body:has(.screen[data-view="bridge_result"])::before,
  body:has(.screen[data-view="bridge_result"])::after{
    background:transparent!important;
    opacity:0!important;
  }

  body:not(:has(.screen[data-view="bridge_result"])) .app-shell,
  body:has(.screen[data-view="bridge_result"]) .app-shell{
    min-height:100svh!important;
    padding:12px 16px max(24px,env(safe-area-inset-bottom))!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.08),transparent 54%),
      linear-gradient(90deg,rgba(246,241,234,.08),rgba(246,241,234,.22) 42%,rgba(246,241,234,.22) 58%,rgba(246,241,234,.08))!important;
  }

  /* Header stays calm and compact; it should not consume the portrait room. */
  body:not(:has(.screen[data-view="bridge_result"])) .topbar,
  body:has(.screen[data-view="bridge_result"]) .topbar{
    width:100%!important;
    min-height:48px!important;
    margin:0 0 2px!important;
    padding:0 2px!important;
    align-items:center!important;
  }
  body:not(:has(.screen[data-view="bridge_result"])) .brand-button,
  body:has(.screen[data-view="bridge_result"]) .brand-button{
    font-size:12px!important;
    letter-spacing:.20em!important;
    color:var(--sb-mobile-teal)!important;
  }
  body:not(:has(.screen[data-view="bridge_result"])) .language-switch,
  body:has(.screen[data-view="bridge_result"]) .language-switch{
    gap:12px!important;
  }
  body:not(:has(.screen[data-view="bridge_result"])) .language-switch button,
  body:has(.screen[data-view="bridge_result"]) .language-switch button{
    min-height:31px!important;
    padding:0 1px 3px!important;
    font-size:14px!important;
    line-height:1.1!important;
  }

  body:not(:has(.screen[data-view="bridge_result"])) .screen,
  body:has(.screen[data-view="bridge_result"]) .screen{
    width:100%!important;
    min-height:calc(100svh - 96px)!important;
    padding-top:4px!important;
  }

  body:not(:has(.screen[data-view="bridge_result"])) .screen > .panel,
  body:has(#inputScreen:not([hidden])) #inputScreen > .panel{
    max-width:100%!important;
    padding:34px 10px 64px!important;
  }

  /* Welcome: same room, less poster, more invitation. */
  .screen[data-view="welcome"]{
    min-height:calc(100svh - 92px)!important;
    align-items:flex-start!important;
  }
  .screen[data-view="welcome"] > .panel{
    padding-top:7.5vh!important;
    padding-bottom:17vh!important;
  }
  .screen[data-view="welcome"] .silent-welcome{
    min-height:auto!important;
    padding:0!important;
  }
  .screen[data-view="welcome"] .silent-welcome-inner{
    max-width:348px!important;
    margin:0 auto!important;
  }
  .screen[data-view="welcome"] .eyebrow{
    margin-bottom:17px!important;
    font-size:11px!important;
    letter-spacing:.13em!important;
  }
  .screen[data-view="welcome"] h1{
    max-width:340px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:clamp(34px,9.2vw,40px)!important;
    line-height:1.27!important;
    letter-spacing:-.055em!important;
  }
  .screen[data-view="welcome"] .lead{
    max-width:326px!important;
    margin-top:22px!important;
    font-size:15px!important;
    line-height:1.78!important;
    color:var(--sb-mobile-muted)!important;
  }
  .screen[data-view="welcome"] .actions{
    margin-top:30px!important;
    gap:8px!important;
  }
  .screen[data-view="welcome"] .primary{
    width:min(78vw,282px)!important;
    min-width:0!important;
    min-height:52px!important;
    padding:0 22px!important;
    background:var(--sb-mobile-dusk)!important;
    border-color:var(--sb-mobile-dusk)!important;
    color:#fff!important;
    box-shadow:0 12px 28px rgba(69,70,111,.14)!important;
  }
  .screen[data-view="welcome"] .quiet-link{
    min-height:42px!important;
    color:#928a80!important;
  }

  /* Make the rest of the journey feel like papers placed in the same room. */
  .screen[data-view="entrance"] .mode-grid{
    margin-top:28px!important;
    background:rgba(255,253,249,.26)!important;
    backdrop-filter:blur(1.5px)!important;
  }
  .screen[data-view="entrance"] .mode-card{
    min-height:142px!important;
    padding:24px 14px 22px!important;
  }

  body:not(:has(.screen[data-view="bridge_result"])) .input-card textarea,
  body:not(:has(.screen[data-view="bridge_result"])) .editable-draft,
  body:not(:has(.screen[data-view="bridge_result"])) .focus-custom textarea,
  body:has(#inputScreen:not([hidden])) textarea#words,
  body:not(:has(.screen[data-view="bridge_result"])) .mirror-card,
  body:not(:has(.screen[data-view="bridge_result"])) .letter-card,
  body:not(:has(.screen[data-view="bridge_result"])) .source-words-card,
  body:not(:has(.screen[data-view="bridge_result"])) .comfort-card,
  body:not(:has(.screen[data-view="bridge_result"])) .focus-summary,
  body:not(:has(.screen[data-view="bridge_result"])) .review-card,
  body:not(:has(.screen[data-view="bridge_result"])) .craft-card,
  body:not(:has(.screen[data-view="bridge_result"])) .mirror-guide,
  body:not(:has(.screen[data-view="bridge_result"])) .anchor-section{
    background:rgba(255,253,249,.73)!important;
    backdrop-filter:blur(3px)!important;
  }

  /* Result room: portrait framing retains real objects instead of hiding them. */
  body:has(.screen[data-view="bridge_result"]) .screen::before{
    left:4%!important;
    right:4%!important;
    top:1vh!important;
    bottom:2vh!important;
    background:radial-gradient(ellipse 72% 60% at 50% 38%,rgba(252,249,244,.52),rgba(252,249,244,.15) 68%,transparent 91%)!important;
  }
  .screen[data-view="bridge_result"] .meaning-checkpoint-section{
    background:rgba(249,245,238,.80)!important;
    backdrop-filter:blur(3px)!important;
  }

  body:not(:has(.screen[data-view="bridge_result"])) .quiet-footer,
  body:has(.screen[data-view="bridge_result"]) .quiet-footer{
    width:100%!important;
    margin-top:6px!important;
    padding-bottom:0!important;
    font-size:10.5px!important;
    color:rgba(79,76,70,.43)!important;
  }
}

/* A little more breathing room for compact phones without hiding the room. */
@media (max-width:390px){
  body,
  body:not(:has(.screen[data-view="bridge_result"])),
  body:has(.screen[data-view="bridge_result"]){
    background-size:100% 100%,100% 100%,138px auto,162px auto,100% 100%!important;
    background-position:center,center,left -25px top 58px,right -34px bottom 16px,center!important;
  }
  .screen[data-view="welcome"] h1{font-size:clamp(32px,9.1vw,37px)!important}
  .screen[data-view="welcome"] .lead{font-size:14.5px!important}
}


/* ================================================================
   SAYBRIDGE · MOBILE NORTH STAR PARITY 02 · SEAMLESS BLEND PASS
   2026-08-19

   PURPOSE
   Preserve the approved Mobile North Star framing from Parity 01,
   but remove the visible rectangular photo patches. The same approved
   photographic assets are pre-composited into ONE portrait room plate
   with feathered edges. No new art direction. No image generation.

   HARD PROTECTION
   - Meaning / rewrite / verifier logic unchanged
   - QA .38.18 unchanged
   - Production v0.7.2 untouched
   - Desktop North Star untouched
   ================================================================ */

@media (max-width:760px){
  body,
  body:not(:has(.screen[data-view="bridge_result"])),
  body:has(.screen[data-view="bridge_result"]){
    background-color:#f4eee5!important;
    background-image:
      linear-gradient(180deg,rgba(255,253,249,.035) 0%,rgba(255,253,249,.01) 62%,rgba(232,213,192,.055) 100%),
      url('./north_star_mobile_seamless_room_v04.webp')!important;
    background-repeat:no-repeat,no-repeat!important;
    background-size:100% 100svh,100% auto!important;
    background-position:center top,center top!important;
    background-attachment:scroll!important;
  }

  /* The room is now one plate; remove the extra shell wash that made seams visible. */
  body:not(:has(.screen[data-view="bridge_result"])) .app-shell,
  body:has(.screen[data-view="bridge_result"]) .app-shell{
    background:
      radial-gradient(ellipse 76% 46% at 50% 39%,rgba(252,249,244,.24),rgba(252,249,244,.08) 66%,transparent 88%)!important;
  }

  /* Keep the centre as a quiet reading zone while the real room lives at the edges. */
  .screen[data-view="welcome"] > .panel{
    background:transparent!important;
  }

  /* Never re-introduce separate object patches on compact phones. */
  body:has(.screen[data-view="bridge_result"])::before,
  body:has(.screen[data-view="bridge_result"])::after{
    background:transparent!important;
    opacity:0!important;
  }

  .screen[data-view="bridge_result"] .meaning-checkpoint-section{
    background:rgba(249,245,238,.72)!important;
    backdrop-filter:blur(2px)!important;
  }
}

@media (max-width:390px){
  body,
  body:not(:has(.screen[data-view="bridge_result"])),
  body:has(.screen[data-view="bridge_result"]){
    background-size:100% 100svh,100% auto!important;
    background-position:center top,center top!important;
  }
}

/* ================================================================
   SAYBRIDGE · MOBILE NORTH STAR PARITY 03 · CONTINUOUS ROOM MATCH
   2026-08-19

   PURPOSE
   Close the remaining mobile North Star gap seen on real iPhone:
   remove the last visible photo-panel edges, reveal more of the teal cup,
   and let the approved still-life materiality read as ONE continuous room.
   Visual-only. Same North Star. No new app logic.

   PROTECTION
   - Meaning / rewrite / verifier logic unchanged
   - QA v0.6.8.8.38.18 unchanged
   - Production v0.7.2 untouched
   - Desktop North Star unchanged
   ================================================================ */

@media (max-width:760px){
  body,
  body:not(:has(.screen[data-view="bridge_result"])),
  body:has(.screen[data-view="bridge_result"]){
    background-color:#f5efe7!important;
    background-image:url('./north_star_mobile_continuous_room_v05.webp')!important;
    background-repeat:no-repeat!important;
    background-size:100% 100svh!important;
    background-position:center top!important;
    background-attachment:scroll!important;
  }

  /* The plate itself carries the room. Do not place a second translucent UI sheet on top. */
  body:not(:has(.screen[data-view="bridge_result"])) .app-shell,
  body:has(.screen[data-view="bridge_result"]) .app-shell{
    background:transparent!important;
  }

  /* Preserve a clean reading centre without creating a visible rectangle. */
  .screen[data-view="welcome"]::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:8%;
    right:8%;
    top:15%;
    height:52%;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 46%,rgba(252,249,244,.22) 0%,rgba(252,249,244,.10) 48%,rgba(252,249,244,0) 76%);
    filter:blur(8px);
  }

  /* Slightly closer to the approved mobile North Star proportions. */
  .screen[data-view="welcome"] > .panel{
    padding-top:6.4vh!important;
    padding-bottom:13vh!important;
  }
  .screen[data-view="welcome"] .silent-welcome-inner{
    max-width:356px!important;
  }
  .screen[data-view="welcome"] h1{
    max-width:350px!important;
    font-size:clamp(33px,8.8vw,39px)!important;
    line-height:1.28!important;
  }
  .screen[data-view="welcome"] .lead{
    max-width:332px!important;
    margin-top:20px!important;
    line-height:1.76!important;
  }
  .screen[data-view="welcome"] .actions{
    margin-top:28px!important;
  }
  .screen[data-view="welcome"] .primary{
    width:min(76vw,286px)!important;
  }

  /* Result stays in the same photographic room; confidence UI remains subordinate. */
  body:has(.screen[data-view="bridge_result"]) .screen::before{
    background:radial-gradient(ellipse 72% 62% at 50% 40%,rgba(252,249,244,.34),rgba(252,249,244,.10) 68%,transparent 91%)!important;
  }
  .screen[data-view="bridge_result"] .meaning-checkpoint-section{
    background:rgba(249,245,238,.68)!important;
    backdrop-filter:blur(2px)!important;
  }
}

@media (max-width:390px){
  body,
  body:not(:has(.screen[data-view="bridge_result"])),
  body:has(.screen[data-view="bridge_result"]){
    background-size:100% 100svh!important;
    background-position:center top!important;
  }
}

/* ================================================================
   SAYBRIDGE · MOBILE NORTH STAR PARITY 04 · MATERIAL PRESENCE
   2026-08-19

   PURPOSE
   Keep the v0.5 continuous-room composition and restore a restrained
   amount of real material depth on phone screens. The centre remains
   quiet; only peripheral photographic evidence (botanical / stone /
   teal ceramic / pen) regains some colour, contrast and texture.

   RULE
   BLENDING STAYS. WASHED-OUT MATERIALITY GOES.

   PROTECTION
   - Same approved North Star composition
   - No new imagery / no new art direction
   - Meaning / rewrite / verifier logic unchanged
   - QA v0.6.8.8.38.18 unchanged
   - Production v0.7.2 untouched
   - Desktop North Star untouched
   ================================================================ */

@media (max-width:760px){
  body,
  body:not(:has(.screen[data-view="bridge_result"])),
  body:has(.screen[data-view="bridge_result"]){
    background-image:url('./north_star_mobile_material_presence_v06.webp')!important;
    background-color:#f5efe7!important;
    background-repeat:no-repeat!important;
    background-size:100% 100svh!important;
    background-position:center top!important;
  }

  /* Preserve the quiet centre; do not turn material restoration into a global saturation pass. */
  .screen[data-view="welcome"]::before{
    background:radial-gradient(
      ellipse at 50% 46%,
      rgba(252,249,244,.205) 0%,
      rgba(252,249,244,.085) 49%,
      rgba(252,249,244,0) 76%
    )!important;
    filter:blur(8px)!important;
  }

  /* The teal cup is an edge material anchor, not a hero. Keep layout and copy unchanged. */
  .screen[data-view="welcome"] > .panel,
  .screen[data-view="welcome"] .silent-welcome-inner,
  .screen[data-view="welcome"] h1,
  .screen[data-view="welcome"] .lead,
  .screen[data-view="welcome"] .actions,
  .screen[data-view="welcome"] .primary{
    transform:none!important;
  }
}

@media (max-width:390px){
  body,
  body:not(:has(.screen[data-view="bridge_result"])),
  body:has(.screen[data-view="bridge_result"]){
    background-size:100% 100svh!important;
    background-position:center top!important;
  }
}

/* ================================================================
   SAYBRIDGE · MOBILE NORTH STAR PARITY 05 · NATIVE MATERIAL RECOVERY
   2026-08-20

   PURPOSE
   Preserve the approved v0.6 mobile composition while recovering the
   photographic material depth that was lost through over-softening.
   This is not a saturation pass and not a redesign. It restores edge
   evidence (botanical / stone / teal ceramic / pen) while protecting
   the quiet reading centre.

   RULE
   LESS DESTRUCTION OF ORIGINAL MATERIAL. SAME ROOM. SAME WORDS.

   PROTECTION
   - Meaning / rewrite / verifier logic unchanged
   - QA v0.6.8.8.38.18 unchanged
   - Production v0.7.2 untouched
   - Desktop North Star untouched
   ================================================================ */

@media (max-width:760px){
  body,
  body:not(:has(.screen[data-view="bridge_result"])),
  body:has(.screen[data-view="bridge_result"]){
    background-image:url('./north_star_mobile_native_material_recovery_v07.webp')!important;
    background-color:#f5efe7!important;
    background-repeat:no-repeat!important;
    background-size:100% 100svh!important;
    background-position:center top!important;
  }

  /* Keep the centre quiet without laying a milky veil over the room. */
  .screen[data-view="welcome"]::before{
    background:radial-gradient(
      ellipse at 50% 46%,
      rgba(252,249,244,.115) 0%,
      rgba(252,249,244,.038) 50%,
      rgba(252,249,244,0) 76%
    )!important;
    filter:blur(2px)!important;
  }

  /* Do not compensate with UI movement: composition remains the v0.6 lock. */
  .screen[data-view="welcome"] > .panel,
  .screen[data-view="welcome"] .silent-welcome-inner,
  .screen[data-view="welcome"] h1,
  .screen[data-view="welcome"] .lead,
  .screen[data-view="welcome"] .actions,
  .screen[data-view="welcome"] .primary{
    transform:none!important;
  }
}

/* ================================================================
   SAYBRIDGE v0.8 · JOURNEY NORTH STAR PARITY 01 · TWO QUIET PATHS
   Scope: ENTRANCE VIEW ONLY. Welcome / engine / verifier untouched.
   Goal: keep the user in the same quiet room instead of entering a
   translucent UI card. Two choices read as paths separated by lines.
   ================================================================ */
@media (max-width:760px){
  .screen[data-view="entrance"] .mode-grid{
    width:calc(100% - 22px)!important;
    max-width:680px!important;
    margin:34px auto 0!important;
    gap:0!important;
    border-top:1px solid rgba(79,114,116,.24)!important;
    border-bottom:1px solid rgba(79,114,116,.24)!important;
    background:transparent!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:none!important;
  }

  .screen[data-view="entrance"] .mode-card{
    min-height:0!important;
    padding:30px 42px 30px 8px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:none!important;
  }

  .screen[data-view="entrance"] .mode-card + .mode-card{
    border-left:0!important;
    border-top:1px solid rgba(79,114,116,.20)!important;
  }

  .screen[data-view="entrance"] .mode-card:hover,
  .screen[data-view="entrance"] .mode-card:focus-visible,
  .screen[data-view="entrance"] .mode-card:active{
    transform:none!important;
    background:rgba(255,253,249,.10)!important;
    box-shadow:none!important;
  }

  .screen[data-view="entrance"] .mode-symbol{
    margin:0 0 12px!important;
    color:var(--ns-teal)!important;
    font-size:19px!important;
    line-height:1!important;
    opacity:.95!important;
  }

  .screen[data-view="entrance"] .mode-title{
    display:block!important;
    color:var(--ns-ink)!important;
    font-size:clamp(22px,6.3vw,27px)!important;
    line-height:1.42!important;
    font-weight:700!important;
    letter-spacing:-.035em!important;
  }

  .screen[data-view="entrance"] .mode-lead{
    display:block!important;
    max-width:31em!important;
    margin-top:9px!important;
    padding-right:4px!important;
    color:var(--ns-muted)!important;
    font-size:14.5px!important;
    line-height:1.78!important;
  }

  .screen[data-view="entrance"] .mode-arrow{
    right:8px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    color:var(--ns-indigo)!important;
    font-size:26px!important;
    line-height:1!important;
    opacity:.92!important;
  }

  .screen[data-view="entrance"] .actions{
    margin-top:23px!important;
  }
}


/* ================================================================
   SAYBRIDGE v0.9 · JOURNEY NORTH STAR PARITY 02 · COPY SANDING 01
   Scope: ENTRANCE VIEW ONLY. Engine/verifier/welcome untouched.
   Decisions locked from real-screen review:
   - Remove internal LANGUAGE MAGICIAN / review eyebrow from user view.
   - Keep the two quiet paths structure.
   - Improve path-copy readability without bringing cards back.
   ================================================================ */
@media (max-width:760px){
  .screen[data-view="entrance"] > .panel > .eyebrow{
    display:none!important;
  }

  .screen[data-view="entrance"] .mode-title,
  .screen[data-view="entrance"] .mode-lead{
    text-shadow:
      0 1px 10px rgba(250,247,241,.88),
      0 0 24px rgba(250,247,241,.72);
  }

  .screen[data-view="entrance"] .mode-lead{
    color:rgba(74,69,63,.86)!important;
    font-weight:520!important;
  }
}

/* ================================================================
   SAYBRIDGE v0.10 · JOURNEY NORTH STAR PARITY 03 · COPY SANDING 02
   Scope: WELCOME + ENTRANCE COPY SURFACE ONLY.
   Engine / verifier / protected logic untouched.
   - Remove redundant user-facing eyebrow labels.
   - Remove internal LANGUAGE MAGICIAN entrance label at source.
   - Replace app-category explanation with a direct product promise.
   - Replace regret framing with meaning-preservation framing.
   ================================================================ */
.screen[data-view="welcome"] > .panel > .eyebrow:empty,
.screen[data-view="entrance"] > .panel > .eyebrow:empty{
  display:none!important;
}
.screen .eyebrow:empty{
  display:none!important;
}


/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 04 · SCREEN 03 SANDING
   2026-08-20

   PURPOSE
   Keep the writing room unmistakably writable while removing internal
   taxonomy and generic web-form weight. No engine / verifier change.
   ================================================================ */

/* Internal mode taxonomy is not user-facing language. */
body:has(#inputScreen:not([hidden])) #inputEyebrow:empty{
  display:none!important;
}

/* Screen 03: a quiet writing sheet in the same room, not a floating card. */
body:has(#inputScreen:not([hidden])) #inputScreen > .panel{
  max-width:920px!important;
}
body:has(#inputScreen:not([hidden])) #inputTitle{
  margin-top:0!important;
}
body:has(#inputScreen:not([hidden])) .input-card{
  margin-top:26px!important;
}
body:has(#inputScreen:not([hidden])) textarea#words{
  border:1px solid rgba(78,111,108,.20)!important;
  border-radius:10px!important;
  background:rgba(255,254,251,.66)!important;
  box-shadow:0 10px 28px rgba(87,72,57,.025)!important;
  backdrop-filter:blur(1.5px)!important;
}
body:has(#inputScreen:not([hidden])) textarea#words:focus{
  background:rgba(255,254,251,.78)!important;
  border-color:rgba(66,117,120,.38)!important;
  outline:1px solid rgba(66,117,120,.10)!important;
  outline-offset:2px!important;
  box-shadow:0 12px 30px rgba(87,72,57,.035)!important;
}
body:has(#inputScreen:not([hidden])) .input-tools{
  margin-top:10px!important;
}
body:has(#inputScreen:not([hidden])) .example-button{
  color:#7b766f!important;
  text-decoration-thickness:1px!important;
  text-decoration-color:rgba(80,116,116,.35)!important;
}
body:has(#inputScreen:not([hidden])) .counter{
  color:rgba(91,87,80,.58)!important;
}

@media (max-width:760px){
  body:has(#inputScreen:not([hidden])) #inputScreen > .panel{
    padding-top:34px!important;
  }
  body:has(#inputScreen:not([hidden])) textarea#words{
    border-radius:8px!important;
    background:rgba(255,254,251,.70)!important;
    box-shadow:0 8px 22px rgba(87,72,57,.025)!important;
  }
}

/* ========================================================================== */
/* JOURNEY NORTH STAR PARITY 05 · SCREEN 04 · QUIET REFLECTION · v0.12       */
/* User view gets a calm reflection surface. QA trace remains opt-in via ?qa=1. */
/* ========================================================================== */

.screen[data-view="mirror"] > .panel{
  max-width:920px!important;
  padding-top:48px!important;
}

/* Internal stage names are implementation vocabulary, not user language. */
.screen[data-view="mirror"] > .panel > .eyebrow,
.screen[data-view="mirror"] .mirror-card .card-label{
  display:none!important;
}

/* The guide becomes a short, human orientation — not an explanatory card. */
.screen[data-view="mirror"] .mirror-guide{
  max-width:780px!important;
  margin:0 auto 34px!important;
  padding:0 0 28px!important;
  border:0!important;
  border-bottom:1px solid rgba(73,112,111,.16)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  text-align:center!important;
  gap:8px!important;
}
.screen[data-view="mirror"] .mirror-guide strong{
  color:var(--ns-ink)!important;
  font-size:18px!important;
  line-height:1.55!important;
  font-weight:650!important;
}
.screen[data-view="mirror"] .mirror-guide span{
  max-width:680px;
  margin:0 auto;
  color:var(--ns-muted)!important;
  font-size:15px!important;
  line-height:1.85!important;
}

/* Reflection is open reading space, not a floating report card. */
.screen[data-view="mirror"] .mirror-card{
  max-width:820px!important;
  margin:0 auto!important;
  padding:4px 0 34px!important;
  border:0!important;
  border-bottom:1px solid rgba(73,112,111,.16)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.screen[data-view="mirror"] .mirror-text{
  margin:0!important;
  color:var(--ns-ink)!important;
  font-size:20px!important;
  line-height:2!important;
  letter-spacing:-.018em!important;
}

/* QA evidence stays in the build, but never occupies the normal journey. */
.qa-actor-trace{display:none!important;}
body.qa-trace-visible .qa-actor-trace{
  display:block!important;
  max-width:920px;
  margin:28px auto 12px!important;
}

.screen[data-view="mirror"] .mirror-confirm{
  margin:38px auto 0!important;
  color:var(--ns-ink)!important;
  font-size:24px!important;
  letter-spacing:-.035em!important;
}
.screen[data-view="mirror"] .mirror-gate-actions{
  max-width:820px!important;
  margin:24px auto 0!important;
}

@media(max-width:760px){
  .screen[data-view="mirror"] > .panel{
    padding-top:32px!important;
  }
  .screen[data-view="mirror"] .mirror-guide{
    margin-bottom:26px!important;
    padding-bottom:22px!important;
  }
  .screen[data-view="mirror"] .mirror-guide strong{font-size:17px!important;}
  .screen[data-view="mirror"] .mirror-guide span{font-size:14px!important;}
  .screen[data-view="mirror"] .mirror-card{
    padding-bottom:28px!important;
  }
  .screen[data-view="mirror"] .mirror-text{
    font-size:18px!important;
    line-height:1.92!important;
  }
  .screen[data-view="mirror"] .mirror-confirm{
    margin-top:30px!important;
    font-size:22px!important;
  }
}

/* ========================================================================== */
/* JOURNEY NORTH STAR PARITY 06 · SCREEN 04 · NEUTRAL JUDGEMENT · v0.13      */
/* Reflection answers are peers: no answer is visually pre-recommended.       */
/* ========================================================================== */

/*
  Human judgement first:
  "가까워요" is not a CTA and must not look like the correct answer.
  All four judgement choices enter with equal visual weight.
*/
.screen[data-view="mirror"] .mirror-gate-actions #confirmMirror,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorMissing,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorDifferent,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorUnsure{
  background:rgba(255,254,251,.48)!important;
  color:var(--ns-ink)!important;
  border:1px solid rgba(73,112,111,.20)!important;
  box-shadow:none!important;
  font-weight:560!important;
}

.screen[data-view="mirror"] .mirror-gate-actions #confirmMirror:hover,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorMissing:hover,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorDifferent:hover,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorUnsure:hover{
  background:rgba(255,254,251,.68)!important;
  border-color:rgba(73,112,111,.34)!important;
  color:var(--ns-ink)!important;
  transform:none!important;
  box-shadow:none!important;
}

/* A tap may acknowledge the user's choice, but only after the user acts. */
.screen[data-view="mirror"] .mirror-gate-actions #confirmMirror:active,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorMissing:active,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorDifferent:active,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorUnsure:active{
  background:rgba(96,94,153,.12)!important;
  border-color:rgba(96,94,153,.38)!important;
}

.screen[data-view="mirror"] .mirror-gate-actions #confirmMirror:focus-visible,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorMissing:focus-visible,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorDifferent:focus-visible,
.screen[data-view="mirror"] .mirror-gate-actions #mirrorUnsure:focus-visible{
  outline:2px solid rgba(76,133,136,.38)!important;
  outline-offset:3px!important;
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 08
   SCREEN 07 · VOICE ROOM · OPEN REVIEW
   2026-08-20

   PURPOSE
   Keep the review capability strong while removing the stacked-card /
   dashboard feel. The engine may be complex; the room stays quiet.

   PROTECTION
   - Review / rewrite / verifier logic unchanged
   - Human-selected Heart Center unchanged
   - Dusk Indigo remains the true primary action colour
   - No new art direction or image assets
   ================================================================ */

.screen[data-view="review"] .panel{
  max-width:1040px!important;
}

.screen[data-view="review"] .eyebrow{
  color:var(--ns-teal)!important;
}

/* Selected focus becomes a quiet bridge line, not a status card. */
.screen[data-view="review"] .focus-summary{
  margin:30px auto 0!important;
  padding:18px 4px 20px!important;
  border:0!important;
  border-top:1px solid var(--ns-line)!important;
  border-bottom:1px solid var(--ns-line)!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
.screen[data-view="review"] .focus-summary .card-label{
  color:var(--ns-muted)!important;
}
.screen[data-view="review"] .focus-summary p{
  margin-top:9px!important;
  font-size:18px!important;
  color:var(--ns-ink)!important;
}

/* Review content is one open reading flow. The editable sentence keeps a
   paper affordance because it is an actual editing surface. */
.screen[data-view="review"] .review-grid{
  gap:0!important;
  margin-top:0!important;
}
.screen[data-view="review"] .review-card{
  padding:26px 4px 28px!important;
  border:0!important;
  border-bottom:1px solid var(--ns-line)!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
.screen[data-view="review"] .review-card.main{
  padding-top:30px!important;
}
.screen[data-view="review"] .review-card.main .editable-draft{
  margin-top:13px!important;
  border-radius:14px!important;
  background:rgba(255,254,251,.72)!important;
  box-shadow:0 14px 38px rgba(93,76,58,.04)!important;
}
.screen[data-view="review"] .review-card:not(.main) p{
  margin-top:12px!important;
  font-size:17px!important;
  line-height:1.9!important;
}

/* What was preserved reads as a quiet note, not another card. */
.screen[data-view="review"] .craft-card{
  margin:0!important;
  padding:24px 4px 18px!important;
  border:0!important;
  border-bottom:1px solid var(--ns-line)!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
.screen[data-view="review"] .craft-card p{
  color:var(--ns-muted)!important;
}

/* Keep trust evidence, remove dashboard pills. */
.screen[data-view="review"] .safety-audit{
  margin:14px 0 0!important;
  gap:0!important;
  justify-content:flex-start!important;
  color:rgba(90,86,80,.58)!important;
}
.screen[data-view="review"] .safety-audit span{
  padding:3px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  font-size:11px!important;
  color:inherit!important;
}
.screen[data-view="review"] .safety-audit span + span::before{
  content:" · ";
  padding:0 7px;
  color:rgba(90,86,80,.34);
}

.screen[data-view="review"] .actions{
  margin-top:28px!important;
}

@media(max-width:760px){
  .screen[data-view="review"] .focus-summary,
  .screen[data-view="review"] .review-card,
  .screen[data-view="review"] .craft-card{
    padding-left:2px!important;
    padding-right:2px!important;
  }
  .screen[data-view="review"] .focus-summary p{
    font-size:16px!important;
  }
  .screen[data-view="review"] .review-card.main .editable-draft{
    min-height:170px!important;
  }
  .screen[data-view="review"] .safety-audit{
    display:block!important;
    line-height:1.8!important;
  }
  .screen[data-view="review"] .safety-audit span{
    display:inline!important;
  }
}


/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 09
   SCREEN 07 · VOICE ROOM · READING FLOW
   2026-08-20

   PURPOSE
   Preserve the editable draft as the only true surface. Everything else
   should read as one quiet sequence in the same room, not stacked result cards.

   PROTECTION
   - Review/rewrite/verifier logic unchanged
   - Heart Center selection unchanged
   - Trust evidence retained
   - Dusk Indigo reserved for the true forward action
   ================================================================ */

.screen[data-view="review"] .panel.narrow{
  max-width:1040px!important;
}

/* The room title and lead stay open. */
.screen[data-view="review"] .lead{
  max-width:780px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Selected center: a quiet bridge between rooms, never a card. */
.screen[data-view="review"] .focus-summary{
  display:block!important;
  margin:30px 0 0!important;
  padding:18px 4px 22px!important;
  border:0!important;
  border-top:1px solid rgba(72,120,121,.18)!important;
  border-bottom:1px solid rgba(72,120,121,.18)!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Review sections: no shells, no panels, no status-card geometry. */
.screen[data-view="review"] .review-grid{
  display:block!important;
  margin:0!important;
  gap:0!important;
  background:none!important;
}
.screen[data-view="review"] .review-card,
.screen[data-view="review"] .review-card.main,
.screen[data-view="review"] .craft-card{
  width:100%!important;
  margin:0!important;
  padding:28px 4px!important;
  border:0!important;
  border-bottom:1px solid rgba(72,120,121,.16)!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Only the editable sentence keeps a paper affordance. */
.screen[data-view="review"] .review-card.main .editable-draft{
  display:block!important;
  width:100%!important;
  margin:14px 0 0!important;
  padding:22px 24px!important;
  border:1px solid rgba(72,120,121,.19)!important;
  border-radius:14px!important;
  background:rgba(255,254,251,.74)!important;
  box-shadow:0 12px 34px rgba(93,76,58,.035)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.screen[data-view="review"] .review-card:not(.main) p,
.screen[data-view="review"] .craft-card p{
  max-width:900px!important;
}

/* Trust evidence stays available without becoming a dashboard. */
.screen[data-view="review"] .safety-audit{
  margin:14px 4px 0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* True next action keeps Dusk Indigo. Secondary routes remain quiet. */
.screen[data-view="review"] .actions .btn.primary{
  box-shadow:0 12px 30px rgba(73,70,125,.09)!important;
}

@media(max-width:760px){
  .screen[data-view="review"] .focus-summary,
  .screen[data-view="review"] .review-card,
  .screen[data-view="review"] .review-card.main,
  .screen[data-view="review"] .craft-card{
    padding-left:0!important;
    padding-right:0!important;
  }
  .screen[data-view="review"] .review-card.main .editable-draft{
    padding:18px 17px!important;
    border-radius:12px!important;
  }
}


/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 10
   SCREEN 07 · VOICE ROOM · FINAL SANDING 01
   2026-08-20

   PURPOSE
   Let the room recede further so the user can stay with their own words.
   Retire residual result-shell geometry while keeping the editable sentence
   as the only true surface. Trust evidence is phrased as a narrow promise
   about what SayBridge did not add, not as an absolute judgement of the user.

   PROTECTION
   - Review/rewrite/verifier logic unchanged
   - Heart Center selection unchanged
   - VOICE ROOM room name preserved
   - Dusk Indigo remains reserved for the true forward action
   - Retired UI remains in project lineage; not deleted from history
   ================================================================ */

/* Open selected center and preservation note completely. */
.screen[data-view="review"] .focus-summary,
.screen[data-view="review"] .craft-card{
  padding:24px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  outline:0!important;
}
.screen[data-view="review"] .focus-summary{
  margin-top:30px!important;
  border-top:1px solid rgba(72,120,121,.14)!important;
}
.screen[data-view="review"] .craft-card{
  border-top:1px solid rgba(72,120,121,.14)!important;
}

/* Non-editable review text is reading content, never a card. */
.screen[data-view="review"] .review-card:not(.main){
  padding:25px 0!important;
  border:0!important;
  border-top:1px solid rgba(72,120,121,.14)!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* The editable draft alone keeps a quiet paper boundary. */
.screen[data-view="review"] .review-card.main{
  padding:28px 0 30px!important;
  border:0!important;
  border-top:1px solid rgba(72,120,121,.14)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.screen[data-view="review"] .review-card.main .editable-draft{
  border-color:rgba(72,120,121,.17)!important;
  background:rgba(255,254,251,.66)!important;
  box-shadow:0 10px 28px rgba(93,76,58,.025)!important;
}

/* Evidence stays readable but visually subordinate. */
.screen[data-view="review"] .safety-audit{
  margin-top:15px!important;
  color:rgba(90,86,80,.54)!important;
  letter-spacing:.01em!important;
}
.screen[data-view="review"] .safety-audit span{
  font-size:10.5px!important;
}

@media(max-width:760px){
  .screen[data-view="review"] .focus-summary,
  .screen[data-view="review"] .review-card,
  .screen[data-view="review"] .review-card.main,
  .screen[data-view="review"] .craft-card{
    padding-left:0!important;
    padding-right:0!important;
  }
  .screen[data-view="review"] .safety-audit span{
    font-size:10px!important;
  }
}


/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 11
   HEART CENTER · RESPONSIVE CTA
   2026-08-21

   PURPOSE
   The forward action should become primary only after the user has made
   the required human judgement. Before selection, the CTA is instructional
   and visually neutral. After selection, the same room quietly acknowledges
   the choice and the CTA becomes the true Dusk Indigo forward action.

   PROTECTION
   - Meaning Preservation / verifier worker logic unchanged
   - Selection semantics unchanged
   - No automatic choice or default recommendation
   - VOICE ROOM behavior unchanged
   ================================================================ */

.screen[data-view="focus"] #focusContinue.focus-awaiting,
.screen[data-view="focus"] #focusContinue:disabled{
  border-color:rgba(86,106,101,.18)!important;
  background:rgba(255,253,249,.52)!important;
  color:#8b867f!important;
  box-shadow:none!important;
  cursor:default!important;
  opacity:1!important;
}

.screen[data-view="focus"] #focusContinue.primary{
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 12
   HEART CENTER · FOUR + CUSTOM
   2026-08-21

   PURPOSE
   Keep the four common difficult-heart anchors as a balanced 2x2 choice
   field, while moving "write my own center" into a separate user-defined
   path. This removes the orphan fifth cell without inventing a sixth choice.

   PROTECTION
   - Focus keys and payload semantics unchanged
   - Custom focus remains the same `custom` key and textarea flow
   - Responsive CTA behavior from Parity 11 preserved
   - VOICE ROOM unchanged
   ================================================================ */

@media (min-width:761px){
  .screen[data-view="focus"] .focus-options.focus-options-four{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0!important;
  }
  .screen[data-view="focus"] .focus-options.focus-options-four .focus-option{
    border-top:1px solid var(--ns-line)!important;
    border-bottom:0!important;
    min-height:104px!important;
  }
  .screen[data-view="focus"] .focus-options.focus-options-four .focus-option:nth-child(odd){
    border-right:1px solid var(--ns-line)!important;
  }
  .screen[data-view="focus"] .focus-options.focus-options-four .focus-option:nth-last-child(-n+2){
    border-bottom:1px solid var(--ns-line)!important;
  }
}

.screen[data-view="focus"] .focus-custom-entry{
  width:100%;
  margin-top:14px;
  padding:15px 4px 13px;
  border:0;
  border-bottom:1px solid var(--ns-line);
  border-radius:0;
  background:transparent;
  color:#716d67;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font:inherit;
  font-size:15px;
  line-height:1.6;
  text-align:left;
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.screen[data-view="focus"] .focus-custom-entry:hover,
.screen[data-view="focus"] .focus-custom-entry:focus-visible{
  color:var(--ink);
  border-color:rgba(79,133,136,.32);
  outline:none;
}
.screen[data-view="focus"] .focus-custom-entry.selected{
  color:var(--ink);
  background:rgba(235,243,240,.30);
  border-color:rgba(79,133,136,.30);
}
.screen[data-view="focus"] .focus-custom-entry .focus-check{color:var(--ns-teal)}

@media (max-width:760px){
  .screen[data-view="focus"] .focus-options.focus-options-four{
    grid-template-columns:1fr!important;
  }
  .screen[data-view="focus"] .focus-options.focus-options-four .focus-option{
    border-right:0!important;
    border-bottom:0!important;
  }
  .screen[data-view="focus"] .focus-options.focus-options-four .focus-option:last-child{
    border-bottom:1px solid var(--ns-line)!important;
  }
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 13
   HEART CENTER · SELECTION CONNECTION + ALIGNMENT + TYPE PRESENCE
   2026-08-21

   PURPOSE
   Refine only the Heart Center choice field observed on the real screen:
   - keep each selection marker close to its label
   - stabilize the 2x2 reading columns
   - give choice text enough visual presence to feel like an important judgement
   - keep the separate custom path visually related without merging its role

   PROTECTION
   - Four common difficult-heart anchors unchanged
   - Custom focus semantics unchanged
   - Responsive CTA behavior unchanged
   - Meaning Preservation / worker / verifier logic unchanged
   - VOICE ROOM unchanged
   ================================================================ */

/* The whole row is still the tap/click target. The visible marker now sits
   beside the words instead of at the far edge, so label and control read as
   one decision. */
.screen[data-view="focus"] .focus-options.focus-options-four .focus-option{
  justify-content:flex-start!important;
  align-items:center!important;
  gap:14px!important;
  padding:24px 28px!important;
  font-size:18px!important;
  line-height:1.55!important;
  font-weight:520!important;
  letter-spacing:-.018em!important;
}
.screen[data-view="focus"] .focus-options.focus-options-four .focus-option > span:first-child{
  flex:0 1 auto!important;
  min-width:0!important;
}
.screen[data-view="focus"] .focus-options.focus-options-four .focus-option .focus-check{
  order:-1!important;
  flex:0 0 20px!important;
  width:20px!important;
  margin:0!important;
  text-align:center!important;
  font-size:17px!important;
  line-height:1!important;
}

/* Keep the two columns optically aligned: the marker and label begin from
   the same inset inside every cell. */
@media (min-width:761px){
  .screen[data-view="focus"] .focus-options.focus-options-four{
    align-items:stretch!important;
  }
  .screen[data-view="focus"] .focus-options.focus-options-four .focus-option{
    min-height:106px!important;
  }
}

/* Custom entry is a separate path, but uses the same marker/label grammar so
   it belongs to the same room rather than looking like an unrelated footer. */
.screen[data-view="focus"] .focus-custom-entry{
  justify-content:flex-start!important;
  align-items:center!important;
  gap:14px!important;
  padding:18px 28px!important;
  font-size:17.5px!important;
  line-height:1.55!important;
  font-weight:520!important;
  letter-spacing:-.018em!important;
}
.screen[data-view="focus"] .focus-custom-entry .focus-check{
  order:-1!important;
  flex:0 0 20px!important;
  width:20px!important;
  margin:0!important;
  text-align:center!important;
  font-size:17px!important;
  line-height:1!important;
}

@media (max-width:760px){
  .screen[data-view="focus"] .focus-options.focus-options-four .focus-option{
    min-height:82px!important;
    padding:19px 18px!important;
    gap:12px!important;
    font-size:17px!important;
  }
  .screen[data-view="focus"] .focus-custom-entry{
    padding:17px 18px!important;
    gap:12px!important;
    font-size:16.5px!important;
  }
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 14
   HOME + HEART CENTER · RHYTHM SANDING
   2026-08-21

   SOURCE OF OBSERVATION
   Dennis real-iPhone + MacBook visual review.

   PURPOSE
   1) Lower only the mobile Welcome content group slightly so the words and
      CTA sit more naturally inside the approved photographic North Star room.
   2) Center the separate custom Heart Center path as a deliberate user-defined
      route rather than an optically orphaned fifth cell.
   3) Tighten Heart Center mobile card→CTA spacing and stabilize the two-row
      action rhythm without changing choice or progression semantics.

   PROTECTION
   - Desktop Welcome composition unchanged
   - HEART CENTER choice keys / payload semantics unchanged
   - Responsive CTA behavior unchanged
   - VOICE ROOM unchanged
   - Meaning Preservation / worker / verifier logic unchanged
   - QA v0.6.8.8.38.18 untouched
   - Production v0.7.2 untouched
   ================================================================ */

/* The custom route spans the full row, so center its marker+label group
   instead of visually attaching it to the left column. */
.screen[data-view="focus"] .focus-custom-entry{
  justify-content:center!important;
  text-align:center!important;
  min-height:78px!important;
}

/* Empty status copy must not create invisible vertical space between the
   Heart Center choice field and the next-action area. */
.screen[data-view="focus"] .status-line:empty{
  display:none!important;
  min-height:0!important;
  margin:0!important;
}

@media (max-width:760px){
  /* Dennis observation: on iPhone the Welcome words/button sat slightly too
     high relative to the room. Move only the content, never the topbar or room. */
  .screen[data-view="welcome"] .silent-welcome-inner{
    transform:translateY(16px)!important;
  }

  .screen[data-view="focus"] .focus-custom-entry{
    min-height:76px!important;
    padding-top:18px!important;
    padding-bottom:18px!important;
    justify-content:center!important;
  }

  /* Primary action belongs close to the choice field. Secondary/exit actions
     form a calmer second row with deliberate separation. */
  .screen[data-view="focus"] .actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:12px 10px!important;
    margin-top:18px!important;
    align-items:center!important;
  }
  .screen[data-view="focus"] .actions #focusContinue{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
  }
  .screen[data-view="focus"] .actions .secondary,
  .screen[data-view="focus"] .actions .quiet-link{
    width:100%!important;
    min-width:0!important;
  }
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 15
   HOME + INPUT · MOBILE WARMTH + KEYBOARD GUARD
   2026-08-21

   SOURCE OF OBSERVATION
   Dennis full real-iPhone sweep + MacBook comparison.

   PURPOSE
   1) Keep the improved mobile Welcome vertical balance, while moving the
      botanical edge presence slightly away from the small explanatory copy.
   2) Restore restrained SayBridge warmth in the writing room without adding
      a new room name, card wall, or decorative UI noise.
   3) Clarify the writing surface → action transition with one quiet divider.
   4) Add a mobile visual-viewport guard so the native textarea remains visible
      when the software keyboard changes the usable viewport.

   PROTECTION
   - HEART CENTER layout and choice semantics untouched
   - VOICE ROOM untouched
   - Meaning Preservation / worker / verifier logic untouched
   - QA v0.6.8.8.38.18 untouched
   - Production v0.7.2 untouched
   ================================================================ */

/* The Korean writing room intentionally has no internal taxonomy label.
   Warmth comes from a restrained teal trace, not from reintroducing jargon. */
body:has(#inputScreen:not([hidden])) #inputTitle::after{
  content:"";
  display:block;
  width:38px;
  height:2px;
  margin:15px auto 0;
  border-radius:999px;
  background:rgba(79,133,136,.62);
}
body:has(#inputScreen:not([hidden])) #inputLead{
  color:#6f6a63!important;
}
body:has(#inputScreen:not([hidden])) .example-button{
  color:#4f8588!important;
  text-decoration-color:rgba(79,133,136,.44)!important;
}
body:has(#inputScreen:not([hidden])) .input-card > .actions{
  margin-top:15px!important;
  padding-top:16px!important;
  border-top:1px solid rgba(79,133,136,.14);
}
body:has(#inputScreen:not([hidden])) .input-card.has-focus textarea#words{
  border-color:rgba(79,133,136,.46)!important;
  outline-color:rgba(79,133,136,.11)!important;
  box-shadow:0 14px 34px rgba(71,109,109,.055)!important;
}

@media (max-width:760px){
  /* HOME only: a tiny crop correction keeps the botanical edge from reading
     through the small lead copy. The cup/pen remain visible and peripheral. */
  body:has(.screen[data-view="welcome"]){
    background-size:103.5% 100svh!important;
    background-position:52% top!important;
  }
  .screen[data-view="welcome"] .lead{
    text-shadow:0 1px 10px rgba(251,248,242,.52);
  }

  /* Writing-room keyboard safety. The active writing sheet gets enough scroll
     runway to remain visible above a reduced visual viewport without changing
     the desktop composition or inventing a sticky CTA. */
  body:has(#inputScreen:not([hidden])) #inputScreen > .panel{
    padding-bottom:max(104px,calc(72px + env(safe-area-inset-bottom)))!important;
  }
  body:has(#inputScreen:not([hidden])) textarea#words{
    scroll-margin-top:104px!important;
    scroll-margin-bottom:48svh!important;
  }
  body:has(#inputScreen:not([hidden])) .input-card > .actions{
    margin-top:14px!important;
    padding-top:15px!important;
  }
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 16
   HOME + QUIET MIRROR · MOBILE SAFE READING ZONE
   2026-08-21

   SOURCE OF OBSERVATION
   Dennis real-iPhone review of v0.22.

   PURPOSE
   1) HOME: keep the improved vertical balance, but move the photographed
      botanical edge farther away from the small explanatory copy.
   2) QUIET MIRROR: restore the room-name cue as a restrained mineral-teal
      identity anchor instead of making the screen read like a document.
   3) QUIET MIRROR mobile: keep long Korean text left-aligned, while moving
      the reading zone itself rightward so the words do not fight the left
      botanical material and unused right-side air becomes intentional.
   4) Retire remaining card-like visual authority from guide/reflection
      surfaces. The room carries warmth; the words carry meaning.

   PROTECTION
   - HEART CENTER untouched
   - VOICE ROOM untouched
   - Existing mobile keyboard guard preserved
   - Meaning Preservation / worker / verifier logic untouched
   - QA v0.6.8.8.38.18 untouched
   - Production v0.7.2 untouched
   ================================================================ */

/* QUIET MIRROR is a named room. Restore the room cue as quiet orientation,
   not as taxonomy or AI capability language. */
.screen[data-view="mirror"] > .panel > .eyebrow{
  display:block!important;
  margin:0 auto 18px!important;
  color:var(--ns-teal)!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:1.4!important;
  letter-spacing:.10em!important;
  font-weight:650!important;
}

/* Force guide + reflection back into open reading grammar. These are not
   separate report cards. One quiet divider is enough to show sequence. */
.screen[data-view="mirror"] .mirror-guide{
  border:0!important;
  border-bottom:1px solid rgba(73,112,111,.15)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.screen[data-view="mirror"] .mirror-card{
  border:0!important;
  border-bottom:1px solid rgba(73,112,111,.15)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

@media (max-width:760px){
  /* HOME: preserve the approved v0.21/v0.22 vertical composition. Shift only
     the photographic plate left so the small explanatory copy has a calmer
     field. The cup/pen remain present on the right edge. */
  body:has(.screen[data-view="welcome"]){
    background-size:103.5% 100svh!important;
    background-position:calc(50% - 22px) top!important;
  }
  .screen[data-view="welcome"] .lead{
    text-shadow:0 1px 12px rgba(251,248,242,.64)!important;
  }

  /* QUIET MIRROR: the photograph already has a strong left-hand object mass.
     Shift the plate slightly left and give the words a safe reading inset.
     The text remains left-aligned; only its home moves. */
  body:has(.screen[data-view="mirror"]){
    background-position:calc(50% - 18px) top!important;
  }
  .screen[data-view="mirror"] > .panel > .eyebrow{
    margin-bottom:16px!important;
    font-size:11.5px!important;
  }
  .screen[data-view="mirror"] .mirror-guide{
    width:calc(100% - 24px)!important;
    margin-left:24px!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:8px!important;
    text-align:left!important;
  }
  .screen[data-view="mirror"] .mirror-guide strong,
  .screen[data-view="mirror"] .mirror-guide span{
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }
  .screen[data-view="mirror"] .mirror-card{
    width:calc(100% - 24px)!important;
    margin-left:24px!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:8px!important;
  }
  .screen[data-view="mirror"] .mirror-text{
    text-align:left!important;
    max-width:none!important;
  }

  /* Keep the human-judgement question and equal answer buttons geometrically
     centred. Only the reading column needs optical compensation. */
  .screen[data-view="mirror"] .mirror-confirm,
  .screen[data-view="mirror"] .mirror-gate-actions{
    transform:none!important;
  }
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 17
   MOBILE KEYBOARD SETTLE · NATIVE-FIRST PERFORMANCE PASS
   2026-08-21

   PURPOSE
   Stop fighting iOS Safari while its keyboard animates. The room should remain
   visually stable; Safari owns the keyboard transition, SayBridge only performs
   one post-settle visibility correction if the writing surface is still clipped.

   PROTECTION
   - Meaning / payload / worker / verifier logic unchanged
   - HOME / QUIET MIRROR visual decisions preserved
   - HEART CENTER untouched
   - VOICE ROOM untouched
   ================================================================ */

@media (max-width:760px){
  /* iOS Safari repaints fixed photographic backgrounds while the visual viewport
     is animating. Use a normal scrolling room plate on mobile to avoid that cost. */
  body:not(:has(.screen[data-view="bridge_result"])){
    background-attachment:scroll!important;
  }

  /* Do not ask Safari for an enormous 48svh scroll margin while it is already
     resizing for the keyboard. Keep only a modest native focus margin. */
  body:has(#inputScreen:not([hidden])) textarea#words{
    scroll-margin-top:88px!important;
    scroll-margin-bottom:24px!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 18
   VOICE ROOM · STABLE ANCHOR + CENTERED MEASURE
   2026-08-21

   SOURCE OF OBSERVATION
   Dennis real-iPhone review: the review cards felt as if they were changing
   position / wobbling, and the all-left-aligned micro hierarchy read too much
   like a document rather than a quiet room.

   PURPOSE
   1) Keep VOICE ROOM on one stable spatial anchor while its content changes.
   2) Remove entrance/re-render translate motion from the review stack.
   3) Centre the small section labels as room cues.
   4) Keep long body copy left-aligned for reading, but place that measure in
      the optical centre of the room.
   5) Preserve one editable writing surface and the existing action hierarchy.

   PROTECTION
   - Meaning / payload / worker / verifier logic unchanged
   - HEART CENTER untouched
   - QUIET MIRROR untouched
   - Mobile keyboard settle preserved
   - QA v0.6.8.8.38.18 untouched
   - Production v0.7.2 untouched
   ================================================================ */

/* Stable anchor: VOICE ROOM should feel settled, not animated into place. */
.screen[data-view="review"],
.screen[data-view="review"] .panel,
.screen[data-view="review"] .focus-summary,
.screen[data-view="review"] .review-grid,
.screen[data-view="review"] .review-card,
.screen[data-view="review"] .craft-card,
.screen[data-view="review"] .safety-audit,
.screen[data-view="review"] .actions{
  overflow-anchor:none!important;
}
.screen[data-view="review"][data-rhythm] .panel,
.screen[data-view="review"][data-rhythm] .eyebrow,
.screen[data-view="review"][data-rhythm] h1,
.screen[data-view="review"][data-rhythm] h2,
.screen[data-view="review"][data-rhythm] .lead,
.screen[data-view="review"][data-rhythm] .focus-summary,
.screen[data-view="review"][data-rhythm] .review-grid,
.screen[data-view="review"][data-rhythm] .review-card,
.screen[data-view="review"][data-rhythm] .craft-card,
.screen[data-view="review"][data-rhythm] .actions{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
}

/* One repeated horizontal anchor for every review section. */
body:not(:has(.screen[data-view="bridge_result"])) .screen[data-view="review"] .focus-summary,
body:not(:has(.screen[data-view="bridge_result"])) .screen[data-view="review"] .review-card,
body:not(:has(.screen[data-view="bridge_result"])) .screen[data-view="review"] .review-card.main,
body:not(:has(.screen[data-view="bridge_result"])) .screen[data-view="review"] .craft-card{
  width:min(100%,860px)!important;
  max-width:860px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Micro headings become quiet centred room cues instead of document labels. */
.screen[data-view="review"] .focus-summary .card-label,
.screen[data-view="review"] .review-card .card-label,
.screen[data-view="review"] .craft-card .card-label{
  display:block!important;
  width:100%!important;
  text-align:center!important;
  color:var(--ns-teal)!important;
  letter-spacing:.09em!important;
  font-weight:650!important;
}

/* Centre the reading measure, not the paragraph alignment. */
.screen[data-view="review"] .review-card:not(.main) p,
.screen[data-view="review"] .craft-card p{
  max-width:680px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:left!important;
}
.screen[data-view="review"] .focus-summary p{
  max-width:680px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
.screen[data-view="review"] .review-card.main .editable-draft{
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Trust evidence follows the same centre line while staying subordinate. */
.screen[data-view="review"] .safety-audit{
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:center!important;
  text-align:center!important;
}

@media(max-width:760px){
  body:not(:has(.screen[data-view="bridge_result"])) .screen[data-view="review"] .focus-summary,
  body:not(:has(.screen[data-view="bridge_result"])) .screen[data-view="review"] .review-card,
  body:not(:has(.screen[data-view="bridge_result"])) .screen[data-view="review"] .review-card.main,
  body:not(:has(.screen[data-view="bridge_result"])) .screen[data-view="review"] .craft-card{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin-left:14px!important;
    margin-right:14px!important;
  }
  .screen[data-view="review"] .review-card:not(.main) p,
  .screen[data-view="review"] .craft-card p,
  .screen[data-view="review"] .focus-summary p,
  .screen[data-view="review"] .review-card.main .editable-draft,
  .screen[data-view="review"] .safety-audit{
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin-left:12px!important;
    margin-right:12px!important;
  }
  .screen[data-view="review"] .focus-summary p{
    text-align:center!important;
  }
}


/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 19
   FINAL SCREEN · ACTION HIERARCHY
   2026-08-22

   SOURCE OF OBSERVATION
   Dennis real-iPhone full-journey QA exposed three recovery/navigation actions
   at the bottom of the final result for the first time. They are useful, but
   when permanently visible they read as a utility stack and make the ending
   feel like a workflow console.

   PURPOSE
   - Keep the three immediate human decisions visible:
       Send / Copy / Not send now.
   - Preserve every recovery path without presenting it as a default next step.
   - Place Translate again / Change language or pronouns / Return to final
     message behind one quiet disclosure: "Other options".
   - No function is removed; only hierarchy changes.

   PROTECTION
   - Meaning / payload / worker / verifier logic untouched
   - Native share / copy / no-send behavior untouched
   - HEART CENTER untouched
   - QUIET MIRROR untouched
   - VOICE ROOM stable-anchor pass preserved
   - QA v0.6.8.8.38.18 untouched
   - Production v0.7.2 untouched
   ================================================================ */

.screen[data-view="bridge_result"] .bridge-more-actions{
  max-width:760px!important;
  margin:20px auto 0!important;
  padding-top:15px!important;
  border:0!important;
  border-top:1px solid rgba(95,133,132,.13)!important;
  border-radius:0!important;
  background:transparent!important;
}
.screen[data-view="bridge_result"] .bridge-more-actions summary{
  list-style:none!important;
  cursor:pointer!important;
  text-align:center!important;
  color:rgba(52,56,64,.50)!important;
  font-size:13px!important;
  line-height:1.6!important;
  font-weight:560!important;
  letter-spacing:-.01em!important;
  padding:5px 12px!important;
}
.screen[data-view="bridge_result"] .bridge-more-actions summary::-webkit-details-marker{
  display:none!important;
}
.screen[data-view="bridge_result"] .bridge-more-actions summary::before{
  content:"＋";
  display:inline-block;
  margin-right:7px;
  color:rgba(95,133,132,.76);
  font-weight:500;
  transform:translateY(-.5px);
}
.screen[data-view="bridge_result"] .bridge-more-actions[open] summary::before{
  content:"−";
}
.screen[data-view="bridge_result"] .bridge-more-actions .bridge-adjust-actions{
  margin-top:8px!important;
  padding-top:4px!important;
  gap:4px!important;
}
.screen[data-view="bridge_result"] .bridge-more-actions .quiet-link{
  min-height:40px!important;
  padding:0 12px!important;
  color:rgba(52,56,64,.48)!important;
  font-size:12.5px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

@media(max-width:760px){
  .screen[data-view="bridge_result"] .final-send-section{
    margin-top:36px!important;
    padding-top:22px!important;
  }
  .screen[data-view="bridge_result"] .final-send-actions{
    gap:9px!important;
  }
  .screen[data-view="bridge_result"] .final-send-actions .quiet-link{
    min-height:48px!important;
  }
  .screen[data-view="bridge_result"] .bridge-more-actions{
    width:calc(100% - 10px)!important;
    margin-top:18px!important;
    padding-top:12px!important;
  }
  .screen[data-view="bridge_result"] .bridge-more-actions summary{
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:13.5px!important;
  }
  .screen[data-view="bridge_result"] .bridge-more-actions .bridge-adjust-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    margin-top:3px!important;
  }
  .screen[data-view="bridge_result"] .bridge-more-actions .quiet-link{
    width:100%!important;
    min-height:46px!important;
    border-radius:0!important;
    border-bottom:1px solid rgba(95,133,132,.10)!important;
    text-align:center!important;
  }
  .screen[data-view="bridge_result"] .bridge-more-actions .quiet-link:last-child{
    border-bottom:0!important;
  }
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 20
   FINAL SCREEN · CLEANUP / RELEASE-FACING FOOTER
   2026-08-22

   SOURCE OF OBSERVATION
   Dennis real-device + Mac review found two release-facing issues at the
   very bottom of the final result:
   1) the important send-safety sentence had become too visually faint/small;
   2) QA/build labels compressed the footer and collapsed the safety sentence
      into a one-character-wide vertical column on wide screens.

   PURPOSE
   - Keep the final human decision note readable, not footnote-sized.
   - Keep only the actual safety sentence visible in the normal footer.
   - Hide QA connection/build provenance unless ?qa=1 is explicitly used.
   - Preserve the v0.26 Send / Copy / Not-send / Other-options hierarchy.

   PROTECTION
   - CSS + index metadata only
   - app_v068.js unchanged
   - _worker.js + worker/** unchanged
   - Meaning QA v0.6.8.8.38.18 unchanged
   - Production v0.7.2 untouched
   ================================================================ */

/* This sentence is part of the user's final decision, not a legal footnote. */
.screen[data-view="bridge_result"] .final-send-note{
  max-width:760px!important;
  font-size:16px!important;
  line-height:1.72!important;
  font-weight:520!important;
  color:rgba(52,56,64,.72)!important;
  letter-spacing:-.012em!important;
}

/* Normal users see only the stable safety footer. QA provenance remains
   available explicitly through ?qa=1. */
body:not(.qa-trace-visible) .quiet-footer .connection-badge,
body:not(.qa-trace-visible) .quiet-footer .build-label{
  display:none!important;
}
body.qa-trace-visible .quiet-footer .connection-badge{
  display:inline-flex!important;
}
body.qa-trace-visible .quiet-footer .build-label{
  display:inline-flex!important;
}

body:not(.qa-trace-visible) .quiet-footer{
  width:min(100%,760px)!important;
  margin:34px auto 0!important;
  padding:0 18px 10px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-direction:row!important;
  gap:0!important;
  font-size:12.5px!important;
  line-height:1.7!important;
  color:rgba(79,76,70,.50)!important;
  text-align:center!important;
}
body:not(.qa-trace-visible) .quiet-footer #safetyLine{
  display:block!important;
  width:100%!important;
  max-width:680px!important;
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
  text-align:center!important;
}

@media(max-width:760px){
  .screen[data-view="bridge_result"] .final-send-note{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin-left:10px!important;
    margin-right:10px!important;
    font-size:15.5px!important;
    line-height:1.75!important;
    text-align:left!important;
  }
  body:not(.qa-trace-visible) .quiet-footer{
    width:100%!important;
    margin-top:28px!important;
    padding:0 22px calc(10px + env(safe-area-inset-bottom))!important;
    font-size:12.5px!important;
    line-height:1.72!important;
  }
  body:not(.qa-trace-visible) .quiet-footer #safetyLine{
    max-width:100%!important;
  }
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 21
   PRONOUN CLARITY + RESULT READABILITY / MOBILE SAFE TEXT BOUNDARY
   2026-08-22

   SOURCE OF OBSERVATION
   Dennis real-iPhone + Mac Chrome QA of v0.27.

   PURPOSE
   1) Korean-facing Vietnamese pronoun choices must explain the relationship
      meaning in Korean; raw Vietnamese pairs alone are not enough.
   2) Final meaning verification copy on desktop was slightly too small.
      Restore one restrained readability step without turning evidence into
      a dashboard or primary content.
   3) On iPhone, meaning-checkpoint text needs a visible inner safe boundary
      so Korean lines do not feel clipped against the card edge.

   PROTECTION
   - Internal pronoun keys unchanged
   - Translation / verifier / worker meaning logic unchanged
   - HEART CENTER / VOICE ROOM / keyboard settle unchanged
   - QA v0.6.8.8.38.18 untouched
   - Production v0.7.2 untouched
   ================================================================ */

/* Pronoun labels remain Vietnamese, while the Korean helper carries the
   relationship meaning. The pair key sent to the engine does not change. */
.bridge-pronoun-option .bridge-pronoun-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  line-height:1.35;
}
.bridge-pronoun-option .bridge-pronoun-copy strong{
  font-size:17px;
  line-height:1.35;
  font-weight:640;
  color:var(--ink);
}
.bridge-pronoun-option .bridge-pronoun-copy small{
  display:block;
  max-width:100%;
  color:rgba(52,56,64,.58);
  font-size:12.5px;
  line-height:1.55;
  font-weight:480;
  letter-spacing:-.012em;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* Desktop final evidence: one modest readability step, not a hierarchy reset. */
@media(min-width:761px){
  .screen[data-view="bridge_result"] .meaning-checkpoint-card span{
    font-size:11px!important;
    line-height:1.55!important;
  }
  .screen[data-view="bridge_result"] .meaning-checkpoint-card p{
    font-size:14.5px!important;
    line-height:1.76!important;
  }
  .screen[data-view="bridge_result"] .bridge-verification strong{
    font-size:15.5px!important;
    line-height:1.6!important;
  }
  .screen[data-view="bridge_result"] .bridge-verification p{
    font-size:13.5px!important;
    line-height:1.7!important;
  }
  .screen[data-view="bridge_result"] .bridge-audit span,
  .screen[data-view="bridge_result"] .bridge-audit span.pass{
    font-size:11.5px!important;
    line-height:1.65!important;
  }
  .screen[data-view="bridge_result"] .bridge-full-meaning summary{
    font-size:14px!important;
  }
}

/* iPhone checkpoint safe boundary. Keep the short evidence centred, but give
   every line a real inner measure so it cannot visually run into the shell. */
@media(max-width:760px){
  .bridge-pronoun-option{
    min-height:82px!important;
    padding:16px 18px!important;
  }
  .bridge-pronoun-option .bridge-pronoun-copy strong{
    font-size:17px!important;
  }
  .bridge-pronoun-option .bridge-pronoun-copy small{
    font-size:12.5px!important;
  }

  .screen[data-view="bridge_result"] .meaning-checkpoint-section{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin-left:14px!important;
    margin-right:14px!important;
    padding:24px 18px 10px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }
  .screen[data-view="bridge_result"] .meaning-checkpoint-grid{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .screen[data-view="bridge_result"] .meaning-checkpoint-card{
    width:100%!important;
    min-width:0!important;
    padding:20px 10px 21px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  .screen[data-view="bridge_result"] .meaning-checkpoint-card span{
    width:100%!important;
    max-width:100%!important;
    padding:0 6px!important;
    box-sizing:border-box!important;
    text-align:center!important;
    font-size:12px!important;
    line-height:1.55!important;
  }
  .screen[data-view="bridge_result"] .meaning-checkpoint-card p{
    width:100%!important;
    max-width:100%!important;
    margin:10px auto 0!important;
    padding:0 6px!important;
    box-sizing:border-box!important;
    color:rgba(52,56,64,.78)!important;
    font-size:15px!important;
    line-height:1.72!important;
    letter-spacing:-.018em!important;
    text-align:center!important;
    word-break:keep-all!important;
    overflow-wrap:break-word!important;
  }
}

/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 22
   GLOBAL SAFE READING ZONE + DELIVERY PARAGRAPH BREATH
   2026-08-22

   SOURCE OF OBSERVATION
   - Sunny real-device feedback: long copy sat too close to card boundaries.
   - Dennis independently saw the same crowding / clipped-reading impression.
   - Real message-share QA showed that a long final message arrived as one
     uninterrupted block, undermining the care built through the journey.

   PURPOSE
   1) Give repeated reading surfaces one stable inner safe zone.
   2) Centre the reading measure while keeping long body copy left-aligned.
   3) Preserve exact approved wording while allowing whitespace-only paragraph
      breaks at existing sentence boundaries in final preview/share/copy.

   PROTECTION
   - No worker / verifier / meaning rule changes
   - No word insertion, deletion, reordering, tone change, or strength change
   - HEART CENTER structure protected
   - Vietnamese pronoun clarity protected
   - QA v0.6.8.8.38.18 protected
   - Production v0.7.2 untouched
   ================================================================ */

/* Shared reading inset: cards should hold text, never crowd it. */
.mirror-card,
.letter-card,
.comfort-card,
.review-card,
.craft-card,
.focus-summary,
.bridge-source-card,
.bridge-language-section,
.bridge-pronoun-section,
.bridge-reference-section,
.bridge-source-clarification-card,
.bridge-verification{
  padding-left:clamp(26px,3vw,36px)!important;
  padding-right:clamp(26px,3vw,36px)!important;
}

/* Long prose lives in a centred measure; paragraph alignment stays natural. */
.mirror-text,
.letter-text,
.comfort-card>p,
.review-card>p,
.craft-card>p,
.bridge-source-card>p,
.bridge-verification>p{
  width:100%;
  max-width:760px;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:left!important;
  overflow-wrap:break-word;
  word-break:keep-all;
}

/* Editing surfaces need the same visual breathing room as read-only cards. */
.input-card textarea,
.editable-draft,
.focus-custom textarea,
.bridge-source-clarification-answer{
  padding-left:22px!important;
  padding-right:22px!important;
}

/* Choice cards: enough inset that the label does not visually collide with
   the selection mark or outer shell. */
.focus-option,
.bridge-language-option,
.bridge-pronoun-option,
.bridge-reference-option{
  padding-left:22px!important;
  padding-right:22px!important;
}

/* The approved final message now visibly previews the same paragraph breathing
   that the share/copy payload receives. */
.letter-text,
.screen[data-view="bridge_result"] .bridge-result-card p{
  white-space:pre-wrap!important;
}

@media(max-width:760px){
  .mirror-card,
  .letter-card,
  .comfort-card,
  .review-card,
  .craft-card,
  .focus-summary,
  .bridge-source-card,
  .bridge-language-section,
  .bridge-pronoun-section,
  .bridge-reference-section,
  .bridge-source-clarification-card,
  .bridge-verification{
    padding-left:24px!important;
    padding-right:24px!important;
  }

  .mirror-text,
  .letter-text,
  .comfort-card>p,
  .review-card>p,
  .craft-card>p,
  .bridge-source-card>p,
  .bridge-verification>p{
    max-width:none!important;
  }

  .focus-option,
  .bridge-language-option,
  .bridge-pronoun-option,
  .bridge-reference-option{
    padding-left:22px!important;
    padding-right:22px!important;
  }

  /* Final checkpoint shell keeps a true text-safe inset on iPhone. */
  .screen[data-view="bridge_result"] .meaning-checkpoint-section{
    padding-left:22px!important;
    padding-right:22px!important;
  }
  .screen[data-view="bridge_result"] .meaning-checkpoint-card{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}

/* Landscape phones can exceed the portrait breakpoint but still need the same
   safe reading inset. */
@media (pointer:coarse) and (orientation:landscape){
  .mirror-card,
  .letter-card,
  .comfort-card,
  .review-card,
  .craft-card,
  .focus-summary{
    padding-left:max(34px,5vw)!important;
    padding-right:max(34px,5vw)!important;
  }
  .mirror-text,
  .letter-text,
  .comfort-card>p,
  .review-card>p,
  .craft-card>p{
    max-width:780px!important;
  }
}


/* ================================================================
   SAYBRIDGE · JOURNEY NORTH STAR PARITY 23
   LOCAL DRAFT MEMORY + RESUME
   2026-08-22

   PURPOSE
   - "오늘은 여기까지" pauses the journey instead of erasing the user's words.
   - Active draft stays only on this device and can be resumed later.
   - No cloud archive, account, search library, or cross-device restore yet.
   ================================================================ */
.draft-memory-note{
  width:min(100%,520px);
  margin:28px auto 0;
  padding:20px 10px 0;
  border-top:1px solid rgba(62,132,137,.22);
  text-align:center;
}
.draft-memory-note strong{
  display:block;
  color:var(--ink);
  font-size:17px;
  line-height:1.55;
  font-weight:700;
}
.draft-memory-note span{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
  word-break:keep-all;
}
.draft-memory-kept{
  margin:18px auto 0;
  color:var(--teal, #3e8489);
  font-size:14px;
  line-height:1.75;
  text-align:center;
  word-break:keep-all;
}
.screen[data-view="welcome"] .silent-welcome .actions:has(#resumeDraft){
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.screen[data-view="welcome"] #startFresh{
  background:rgba(255,255,255,.48);
}
@media(max-width:760px){
  .draft-memory-note{
    width:calc(100% - 12px);
    margin-top:24px;
    padding-top:18px;
  }
  .draft-memory-note strong{font-size:16px}
  .draft-memory-note span{font-size:13.5px}
  .screen[data-view="welcome"] .silent-welcome .actions:has(#resumeDraft){
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  .screen[data-view="welcome"] #resumeDraft,
  .screen[data-view="welcome"] #startFresh{
    width:100%;
  }
}