/* Illustrated problem picker. Scoped so the existing journey keeps its layout. */
.royal-motto.problem-motto { margin-top:22px; line-height:1.55; }
.problem-motto span { display:inline-block; }
.problem-motto span + span { color:var(--gold); }
.problem-explorer { margin:10px auto 0; padding:30px 0 0; border-top:1px solid #d1a45a55; scroll-margin-top:24px; }
.problem-heading { text-align:center; margin:0 auto 27px; }
.problem-heading h2 { color:var(--gold); font:400 clamp(32px,4vw,48px)/1.25 var(--serif); letter-spacing:-1.3px; text-wrap:balance; }
.problem-heading>p { color:var(--light); font-size:21px; line-height:1.7; margin:14px auto 0; }
.problem-jump { display:inline-flex; gap:9px; align-items:center; margin-top:12px; min-height:44px; padding:4px 12px; color:var(--gold); font-size:12px; text-decoration:none; border-bottom:1px solid #c9a65b70; }
.problem-jump b { display:grid; place-items:center; min-width:25px; height:25px; padding:0 5px; border:1px solid #bd9559; border-radius:50%; font-size:11px; }
.problem-layout { display:block; position:relative; }
.problem-sides { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; min-width:0; }
.problem-side { min-width:0; }
.problem-side-heading { min-height:83px; padding:0 0 16px; }
.problem-side-heading h3 { color:var(--gold); font:400 24px/1.35 var(--serif); letter-spacing:-.5px; }
.problem-side-heading p { font-size:12px; color:var(--muted); margin-top:7px; }
.problem-area { margin-bottom:12px; border:1px solid #ba925b99; border-radius:14px; background:linear-gradient(135deg,#62472d66,#34261e88); overflow:clip; transition:border-color .18s; }
.problem-area:hover,.problem-area.has-selection { border-color:#efc770; }
.problem-area>summary { display:grid; grid-template-columns:65px minmax(0,1fr) 20px; column-gap:11px; align-items:center; padding:17px 13px; }
.problem-area-art { width:65px; height:78px; object-fit:contain; grid-row:1; transition:transform .2s; }
.problem-area>summary:hover .problem-area-art { transform:translateY(-3px); }
.problem-area-copy { min-width:0; }
.problem-area-name { display:block; color:var(--gold); font:400 23px/1.3 var(--serif); margin-bottom:8px; }
.problem-area-intro { display:block; font-size:12px; line-height:1.65; color:var(--light); text-wrap:pretty; }
.problem-area-meta { display:block; margin-top:9px; color:#d5bf97; font-size:10px; line-height:1.5; }
.problem-area-meta b { font-weight:400; }
.problem-expand { align-self:start; margin-top:5px; font:400 23px/1 var(--sans); color:var(--gold); }
.problem-expand::before { content:'+'; }
.problem-area[open] .problem-expand::before { content:'−'; }
.problem-area-body { padding:0 9px 9px; display:grid; gap:9px; }
.problem-bubble { border:1px solid #d3b37c; border-radius:12px 12px 12px 3px; background:linear-gradient(125deg,#fcf2da,#f3e4c0); color:#392b1e; box-shadow:0 3px 9px #170b051c; overflow:clip; transition:border-color .18s,background .18s; }
.problem-bubble:has(input:checked) { border-color:#83b49b; background:linear-gradient(125deg,#edf3df,#dce9cf); box-shadow:inset 0 0 0 1px #65886a; }
.problem-choice { display:grid; grid-template-columns:44px minmax(0,1fr) 19px; gap:10px; align-items:center; padding:13px 11px 4px; cursor:pointer; min-height:70px; }
.problem-choice>img { display:block; width:44px; height:53px; object-fit:contain; }
.problem-choice>span { min-width:0; font-size:12px; font-weight:600; line-height:1.65; text-wrap:pretty; }
.problem-choice input { appearance:auto; accent-color:#44674e; width:18px; height:18px; margin:0; cursor:pointer; }
.problem-examples { padding:0 12px; }
.problem-examples>summary { display:flex; align-items:center; min-height:38px; gap:6px; color:#78532d; font-size:11px; font-weight:600; padding-left:53px; }
.problem-examples>summary::before { content:'+'; font-size:16px; font-weight:400; }
.problem-examples[open]>summary::before { content:'−'; }
.problem-examples ul { margin:2px 0 13px; padding:11px 0 0 17px; border-top:1px solid #b3966055; }
.problem-examples li { font-size:12px; line-height:1.75; margin:0 0 8px; padding-left:2px; color:#4d3c29; }
.problem-theory-list { display:grid; gap:10px; }
.problem-theory-list .problem-choice { grid-template-columns:44px minmax(0,1fr) 19px; }
.problem-selection { margin-top:24px; padding:12px 18px; border:1px solid #cba45d; border-radius:13px; background:linear-gradient(145deg,#56402b,#36271d); box-shadow:0 5px 22px #1b0d0855,inset 0 0 0 4px #d6ad5010; scroll-margin-top:24px; }
.problem-selection-top { display:flex; align-items:center; gap:18px; min-height:44px; }
.problem-selection-title { display:flex; align-items:center; gap:10px; flex:none; }
.problem-selection h3 { font:400 21px/1.35 var(--serif); color:var(--gold); letter-spacing:-.4px; outline-offset:5px; }
.problem-selection-total { flex:none; display:grid; place-items:center; min-width:29px; height:29px; border:1px solid #bc995d; border-radius:50%; color:var(--gold); font-size:12px; }
.problem-selection-preview { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 14px/1.6 var(--sans); color:var(--light); margin:0; }
.problem-selection-toggle { display:flex; align-items:center; justify-content:center; gap:12px; min-height:44px; flex:none; margin-left:auto; padding:9px 13px; border:1px solid #c19c60; border-radius:8px; background:#ebd39a; color:#49321d; font:600 13px/1.5 var(--sans); }
.problem-selection-toggle i { display:block; width:8px; height:8px; border-left:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:translateY(2px) rotate(45deg); }
.problem-selection-toggle[aria-expanded="true"] i { transform:translateY(-2px) rotate(225deg); }
.problem-selection-panel { margin-top:12px; padding-top:14px; border-top:1px solid #bc995d55; max-height:none; overflow:visible; scrollbar-width:thin; scrollbar-color:#b58b44 transparent; }
.problem-selection-empty { display:flex; align-items:center; gap:16px; padding:4px 0 10px; }
.problem-selection-empty img { display:block; width:54px; height:60px; object-fit:contain; flex:none; }
.problem-selection-empty p { font-size:14px; line-height:1.75; color:var(--muted); }
.problem-selection-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:20px; list-style:none; margin:0; padding:0; }
.problem-selection-list li { display:grid; grid-template-columns:29px minmax(0,1fr) 36px; gap:6px; align-items:center; padding:7px 0; border-bottom:1px solid #bc995d44; }
.problem-selection-list img { width:29px; height:35px; object-fit:contain; }
.problem-selection-list span { color:var(--light); font-size:14px; line-height:1.6; }
.problem-selection-list button { display:grid; place-items:center; width:36px; height:44px; border:0; border-radius:5px; padding:0; background:transparent; color:var(--muted); font:400 22px/1 var(--sans); }
.problem-selection-list button:hover { background:#efd89e1a; color:#fff0cb; }
.problem-selection-actions { padding-top:16px; display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:center; }
.problem-selection-copy,.problem-selection-link { display:flex; align-items:center; justify-content:center; min-height:44px; padding:10px 12px; text-align:center; border:1px solid #bd9559; border-radius:8px; background:#ebd39a; color:#49321d; text-decoration:none; font:600 13px/1.5 var(--sans); }
.problem-selection-link { background:#a62f27; color:#fff0cb; }
.problem-selection-clear { min-height:44px; padding:8px; border:0; background:none; color:var(--muted); font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.problem-copy-fallback { grid-column:1/-1; }
.problem-copy-fallback label { display:block; color:var(--muted); font-size:11px; margin-bottom:6px; }
.problem-copy-fallback textarea { width:100%; min-height:140px; padding:9px; border:1px solid #bd9559; border-radius:6px; color:#392b1e; background:#fcf2da; font-size:12px; }
.problem-selection-note { border-top:1px solid #bc995d44; margin-top:14px; padding-top:11px; color:var(--muted); font-size:12px; line-height:1.7; }
.problem-selection [hidden] { display:none!important; }
.problem-selection :is(button,a):focus-visible { outline:3px solid #f4d17d; outline-offset:3px; }
.problem-trinity { margin-top:15px; border-top:1px solid #d1a45a55; }
.problem-trinity>summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:49px; font-size:12px; color:var(--muted); }
.problem-trinity>summary::after { content:'+'; font-size:20px; }
.problem-trinity[open]>summary::after { content:'−'; }
.problem-trinity .trinity-intro { padding:7px 0 0; border:0; margin:0; }
.problem-trinity .visual-section-heading { margin-bottom:7px; }
.problem-trinity .visual-section-heading h2 { font-size:21px; }
.problem-trinity .trinity-scene { margin:0; }
.problem-trinity .trinity-captions { grid-template-columns:1fr; text-align:left; gap:0; margin-top:7px; }
.problem-trinity .trinity-captions li { display:flex; flex-wrap:wrap; gap:4px 10px; padding:4px 0; }
.problem-trinity .trinity-captions strong,.problem-trinity .trinity-captions span { font-size:11px; margin:0; }
.motivation-question { text-align:center; margin:36px auto 0; max-width:850px; padding:30px 28px 25px; border-top:1px solid #caa05b66; border-bottom:1px solid #caa05b66; background:radial-gradient(ellipse at 50% 50%,#b38b4020,transparent 70%); }
.motivation-question>img { width:65px; height:76px; object-fit:contain; margin:0 auto 12px; }
.motivation-question blockquote { font:400 clamp(20px,2.6vw,29px)/1.6 var(--serif); color:var(--light); margin:0 auto 20px; max-width:740px; letter-spacing:-.5px; text-wrap:balance; }
.motivation-question .motivation-result { color:var(--gold); font:400 24px/1.5 var(--serif); margin:0 0 10px; }
.motivation-question>p:not(.motivation-result) { font-size:14px; color:var(--muted); }
.motivation-question>a { display:inline-flex; align-items:center; gap:12px; color:var(--gold); min-height:48px; margin:18px 0 0; font:400 clamp(22px,3vw,32px)/1.4 var(--serif); text-decoration:none; border-bottom:1px solid #cba45d; }
.problem-explorer ~ .clarity-promise { border-top:0; margin-top:10px; }
@media(max-width:1099px) {
  .problem-selection-empty { display:flex; align-items:center; justify-content:center; gap:15px; padding:15px 0 0; }
  .problem-selection-empty img { width:55px; height:60px; margin:0; }
  .problem-selection-empty p { text-align:left; max-width:320px; }
  .problem-selection-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .problem-selection-actions { grid-template-columns:1fr 1fr; }
  .problem-selection-clear,.problem-copy-fallback { grid-column:1/-1; }
  .problem-selection-list li { grid-template-columns:34px minmax(0,1fr) 44px; }
  .problem-selection-list button { width:44px; height:44px; }
  .problem-choice>span { font-size:13px; }
}
@media(max-width:699px) {
  .problem-motto span { display:block; }
  .problem-explorer { padding-top:23px; margin-top:0; }
  .problem-heading { margin-bottom:23px; }
  .problem-heading h2 { font-size:32px; }
  .problem-heading>p { font-size:18px; }
  .problem-sides { grid-template-columns:1fr; gap:23px; }
  .problem-side-heading { min-height:0; padding-bottom:14px; }
  .problem-side-heading h3 { font-size:25px; }
  .problem-area>summary { grid-template-columns:65px minmax(0,1fr) 20px; padding:14px 13px; gap:12px; }
  .problem-area-art { height:76px; }
  .problem-area-intro { font-size:12px; }
  .problem-area-name { margin-bottom:5px; }
  .problem-choice { padding:12px 11px 3px; min-height:75px; }
  .problem-examples>summary { min-height:44px; }
  .problem-selection { padding:16px; }
  .problem-selection-panel { max-height:none; overflow:visible; }
  .problem-selection-list { grid-template-columns:1fr; }
  .problem-selection-list span { font-size:12px; }
  .problem-selection-actions { grid-template-columns:1fr; }
  .problem-selection-copy,.problem-selection-link { font-size:12px; min-height:46px; }
  .motivation-question { padding:26px 6px 24px; margin-top:28px; }
  .motivation-question blockquote { font-size:21px; }
  .motivation-question>a { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) {
  .problem-area,.problem-area-art,.problem-bubble { transition:none; }
}
@media(min-width:900px) {
  .problem-heading { margin-bottom:34px; }
  .problem-side-heading { min-height:94px; padding-bottom:19px; }
  .problem-side-heading h3 { font-size:clamp(28px,2.3vw,32px); }
  .problem-side-heading p { font-size:14px; margin-top:9px; }
  .problem-area>summary { grid-template-columns:80px minmax(0,1fr) 22px; gap:15px; padding:20px 18px; }
  .problem-area-art { width:80px; height:94px; }
  .problem-area-name { font-size:28px; }
  .problem-area-intro { font-size:15px; }
  .problem-area-meta { font-size:12px; }
  .problem-choice,.problem-theory-list .problem-choice { grid-template-columns:53px minmax(0,1fr) 20px; gap:13px; padding:16px 16px 4px; }
  .problem-choice>img { width:53px; height:62px; }
  .problem-choice>span { font-size:15px; }
  .problem-examples { padding-inline:16px; }
  .problem-examples>summary { min-height:44px; padding-left:66px; font-size:13px; }
  .problem-examples li { font-size:14px; }
  .problem-theory-list { gap:14px; }
  .problem-selection { position:static; }
  .problem-selection-actions { grid-template-columns:1fr 1fr auto; }
  .problem-selection-clear { grid-column:auto; }
}