/* The planner's framework step continues the approved teaching-context design.
   Scope the treatment to selection screens; the working planner stays intact. */
body[data-planning-view="setup"] {
  background:linear-gradient(#fffdf952,#fffdf952),#f7f3e9 url('../feature-pages/context-petals/paper.jpg') center/cover fixed;
  color:#244437;
}
body[data-planning-view="setup"] .site-header {
  background:#fffdf9e8;border-color:#dce2d1;box-shadow:none;
}
body[data-planning-view="setup"] .site-footer {
  background:transparent;border-color:#dce2d1;color:#687365;
}
body[data-planning-view="setup"] #main {position:relative;isolation:isolate;}
body[data-planning-view="setup"] .setup {
  width:min(1025px,calc(100% - 56px));padding:clamp(34px,5vh,65px) 0 36px;
  color:#244437;background:transparent;
}
/* Original six-petal mark, cropped into the outer paper, clear of all choices. */
body[data-planning-view="setup"] .setup::before,
body[data-planning-view="setup"] .setup::after {
  content:"";position:fixed;pointer-events:none;z-index:-1;top:150px;bottom:0;
  width:max(16px,calc((100vw - 1145px)/2));opacity:.26;
  background-image:url('assets/favicon.svg');background-repeat:no-repeat;background-size:900px 900px;
}
body[data-planning-view="setup"] .setup::before {left:0;background-position:right 16px top -210px;}
body[data-planning-view="setup"] .setup::after {right:0;background-position:left 16px bottom -210px;}
body[data-planning-view="setup"] .setup>.eyebrow,
html body .framework-dialog .eyebrow {
  display:block;font:700 11px/1.2 Lato,Arial,sans-serif;letter-spacing:.18em;color:#71816d;
}
body[data-planning-view="setup"] .setup h1 {
  font:700 clamp(36px,3.7vw,52px)/1.06 Lato,Arial,sans-serif;letter-spacing:-.045em;
  color:#234436;margin:16px 0 18px;text-wrap:balance;
}
body[data-planning-view="setup"] .setup>.intro {
  display:block;max-width:620px;font:400 17px/1.5 Lato,Arial,sans-serif;color:#687365;margin:0 auto 32px;
}
html body :is(.setup,.framework-dialog) .framework-options {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px;
}
html body :is(.setup,.framework-dialog) .framework-option {
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  min-width:0;width:100%;min-height:198px;margin:0;padding:31px 33px;
  border:1px solid #dce2d1;border-radius:25px;background:#fffefb;color:#244437;
  box-shadow:0 5px 16px #34452a05;text-align:left;transform:none!important;
  font-family:Lato,Arial,sans-serif;transition:border-color .2s,box-shadow .2s;
}
html body :is(.setup,.framework-dialog) .framework-option strong {
  color:#244437;font:700 35px/1.2 Lato,Arial,sans-serif;letter-spacing:-.035em;
}
html body :is(.setup,.framework-dialog) .framework-option small {
  display:block;max-width:358px;margin-top:12px;color:#596b5d;
  font:400 19px/1.5 Lato,Arial,sans-serif;
}
html body :is(.setup,.framework-dialog) .framework-choice-arrow {
  display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;
  color:#fff;background:#297d77;transition:translate .2s;
}
html body :is(.setup,.framework-dialog) .framework-choice-arrow svg {display:block;width:27px;height:27px;fill:currentColor;stroke:none;}
html body :is(.setup,.framework-dialog) .framework-option[aria-pressed="true"] {
  color:#244437;background:#e5edcb!important;border-color:#b3c68a;box-shadow:inset 0 0 0 1px #b3c68a;
}
html body :is(.setup,.framework-dialog) .framework-option:focus-visible {
  outline:3px solid #297d77;outline-offset:4px;border-color:#297d77;
}
@media(hover:hover) and (pointer:fine) {
  html body :is(.setup,.framework-dialog) .framework-option:not([aria-pressed="true"]):not(:disabled):hover {border-color:#297d77;background:#fffefb;color:#244437;box-shadow:0 7px 22px #284d3910;}
  html body :is(.setup,.framework-dialog) .framework-option:hover .framework-choice-arrow {translate:3px 0;}
}
html body :is(.setup,.framework-dialog) .no-framework {
  display:block;min-height:44px;margin:20px auto 0;padding:10px 12px;border-radius:12px;
  color:#297d77;font:700 14px/1.5 Lato,Arial,sans-serif;text-underline-offset:4px;
}
html body :is(.setup,.framework-dialog) .no-framework:hover {background:#e5edcb66;color:#244437;}
body[data-planning-view="setup"] .setup .footnote {display:block;font:400 13px/1.5 Lato,Arial,sans-serif;color:#798372;margin:12px 0 0;}
html body .framework-dialog {
  width:min(1125px,calc(100% - 48px));max-height:calc(100dvh - 40px);padding:30px;
  border:1px solid #dce2d1;border-radius:24px;color:#244437;
  background:linear-gradient(#fffdf9a8,#fffdf9a8),#f7f3e9 url('../feature-pages/context-petals/paper.jpg') center/cover;
  box-shadow:0 24px 70px #1f3a3326;
}
html body .framework-dialog h2 {color:#234436;font:700 36px/1.12 Lato,Arial,sans-serif;letter-spacing:-.04em;margin:18px 0 12px;}
html body .framework-dialog>p {color:#687365;font:400 16px/1.5 Lato,Arial,sans-serif;margin-bottom:26px;}
@media(max-width:559px) {
  body[data-planning-view="setup"] .setup {width:calc(100% - 32px);padding:30px 0;}
  body[data-planning-view="setup"] .setup h1 {font-size:36px;margin:14px 0 16px;}
  body[data-planning-view="setup"] .setup>.eyebrow {font-size:9px;}
  body[data-planning-view="setup"] .setup>.intro {font-size:15px;margin-bottom:26px;}
  html body :is(.setup,.framework-dialog) .framework-options {grid-template-columns:1fr;gap:14px;}
  html body :is(.setup,.framework-dialog) .framework-option {padding:25px 26px;min-height:155px;gap:18px;border-radius:21px;}
  html body :is(.setup,.framework-dialog) .framework-option strong {font-size:31px;}
  html body :is(.setup,.framework-dialog) .framework-option small {font-size:17.5px;margin-top:10px;}
  html body :is(.setup,.framework-dialog) .framework-choice-arrow {width:40px;height:40px;}
  html body .framework-dialog {width:calc(100% - 28px);padding:22px 18px;border-radius:20px;}
  html body .framework-dialog h2 {font-size:29px;}
  html body .framework-dialog>p {font-size:15px;}
  body[data-planning-view="setup"] .setup .footnote {font-size:11px;}
}
@media(min-width:560px) and (max-width:760px) {
  html body :is(.setup,.framework-dialog) .framework-options {grid-template-columns:1fr;}
  body[data-planning-view="setup"] .setup {width:min(540px,calc(100% - 44px));}
}
@media(prefers-reduced-motion:reduce) {
  html body :is(.setup,.framework-dialog) .framework-option,
  html body :is(.setup,.framework-dialog) .framework-choice-arrow {transition:none;}
  html body :is(.setup,.framework-dialog) .framework-option:hover .framework-choice-arrow {translate:0 0;}
}