/* Film style (journey-film/linkedin/retrofit-solar-pitch.html, the app in the project film and the submission deck):
   same tokens, ink outlines, no gradients. Status text is 19px bold, so the film's status colours pass AA as large text
   on white. The answer is one card, as in the film: status, roof, use, money, one next step and the house's 7 facts. */
:root { --bg: #EAF2FF; --surface: #FFFFFF; --surface2: #F7F6FD; --ink: #1D1D2B; --muted: #55586E; --line: #E3E5EC; --line2: #DADDE6;
  --blue: #2F5BEA; --yellow: #FFD21F; --coral: #FF5A5F; --teal: #2EC4A0; --green: #18A86B; --orange: #F39A00; --lav: #C9C2F4;
  --metaBg: #ECEAFD; --metaInk: #4B3FC0; --link: #2F5BEA;
  --stY: #18A86B; --stC: #C77A00; --stN: #E5484D;          /* status text, from the film's card mock */
  --pillY: #DDF5E9; --pillC: #FFF0D6; --pillN: #FFE3E4;
  --sunBg: #FFF4DC; --onBlue: #FFFFFF; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; color-scheme: light; }
:root[data-theme="dark"] { --bg: #1D1D2B; --surface: #1D1D2B; --surface2: #2A2433; --ink: #F7F6FD; --muted: #DADDE6; --line: #3A3A46; --line2: #55586E;
  --metaBg: #2A2433; --metaInk: #C9C2F4; --link: #EAF2FF; --stY: #18A86B; --stC: #F39A00; --stN: #FF5A5F;
  --pillY: transparent; --pillC: transparent; --pillN: transparent; --sunBg: transparent; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #1D1D2B; --surface: #1D1D2B; --surface2: #2A2433; --ink: #F7F6FD; --muted: #DADDE6; --line: #3A3A46; --line2: #55586E;
    --metaBg: #2A2433; --metaInk: #C9C2F4; --link: #EAF2FF; --stY: #18A86B; --stC: #F39A00; --stN: #FF5A5F;
    --pillY: transparent; --pillC: transparent; --pillN: transparent; --sunBg: transparent; color-scheme: dark; }
}

html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: "Bricolage Grotesque", system-ui, sans-serif; font-optical-sizing: auto; }
body { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
button, input, select, textarea { font-family: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.hid { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono, .eyebrow, .hint, .ind, #traceBody, .src, .eye { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* header, as in the laptop mock */
#top { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--bg); border-bottom: 1.5px solid var(--line2); min-width: 0; }
.logo svg { display: block; }
.brandName { font-size: 24px; font-weight: 800; white-space: nowrap; }
.search { flex: 1; max-width: 600px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--line2); border-radius: 999px; padding: 4px 4px 4px 16px; color: var(--muted); }
.search input { flex: 1; min-width: 0; background: transparent; border: 0; font-size: 17px; font-weight: 500; color: var(--ink); outline: none; padding: 6px 0; }
.search:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.here { flex: 1; max-width: 600px; margin: 0 auto; background: var(--surface); border: 1.5px solid var(--line2); border-radius: 999px; padding: 8px 18px; font-size: 17px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go { background: var(--blue); color: var(--onBlue); border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 15px; padding: 7px 16px; cursor: pointer; }
.go.small { padding: 6px 14px; font-size: 14px; }
.meta { background: var(--metaBg); color: var(--metaInk); font-size: 15px; font-weight: 600; border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.theme { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); font-size: 18px; cursor: pointer; flex: none; }
#help { font-weight: 800; }

/* map, panel and trace in the laptop mock's places */
#app { display: grid; grid-template-columns: minmax(0, 1fr) 460px; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
#stage { position: relative; grid-column: 1; grid-row: 1; min-height: 0; background: var(--bg); }
#map { position: absolute; inset: 0; }
.cesium-viewer-bottom { left: 12px; bottom: 8px; }
#ctrl { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; z-index: 2; }
.cb { height: 40px; min-width: 40px; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; padding: 0 10px; }
.cb.txt { font-size: 14px; font-weight: 700; }
.hint { position: absolute; top: 64px; left: 14px; z-index: 2; font-size: 12px; font-weight: 500; color: var(--ink); background: var(--surface); border: 1.5px solid var(--ink); padding: 4px 10px; border-radius: 999px; max-width: calc(100% - 60px); }
.ind { position: absolute; right: 14px; bottom: 30px; z-index: 2; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); padding: 3px 9px; border-radius: 999px; }
.mapTap { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 3; background: var(--yellow); color: #1D1D2B; border: 2px solid #1D1D2B; border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 700; white-space: nowrap; pointer-events: none; }

#panel { grid-column: 2; grid-row: 1 / span 2; overflow-y: auto; background: var(--surface); border-left: 1.5px solid var(--line2); padding: 20px 24px 28px; box-sizing: border-box; min-height: 0; }
.eyebrow { display: inline-block; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.q { font-size: 26px; line-height: 1.15; font-weight: 800; margin: 12px 0 8px; }
.ex { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.ex button { font-size: 14px; font-weight: 700; color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.ex button.on { background: var(--ink); color: var(--surface); }
.tap { display: none; margin: 8px 0; padding: 10px 14px; border-radius: 14px; background: var(--yellow); color: #1D1D2B; border: 2px solid #1D1D2B; font-size: 15px; font-weight: 700; }
.tap.on { display: block; }
#err { display: none; background: var(--coral); color: #1D1D2B; border: 2px solid #1D1D2B; border-radius: 14px; padding: 10px 14px; font-size: 15px; font-weight: 600; margin-top: 10px; }

.place { font-size: 24px; font-weight: 800; margin: 16px 0 2px; }
.factsLine { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 0; font-size: 15px; font-weight: 500; color: var(--muted); cursor: pointer; line-height: 1.4; }
.factsLine b { color: var(--link); font-weight: 700; white-space: nowrap; }
.facts { background: var(--surface2); border: 1.5px solid var(--line2); border-radius: 18px; padding: 12px 16px 14px; margin: 8px 0 12px; }
.h { font-size: 17px; font-weight: 800; margin: 2px 0 8px; }
.facts dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.facts .f { border-top: 1px solid var(--line2); padding-top: 8px; }
.facts dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.facts dd { margin: 1px 0 0; font-size: 15px; font-weight: 600; }
.facts dd .s { display: block; font: 500 12px "IBM Plex Mono", monospace; color: var(--muted); margin-top: 2px; }
.facts .f.you dd { color: var(--ink); }
.elec { margin: 12px 0 6px; }
.elec label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.elec input, .note textarea { flex: 1; min-width: 0; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; padding: 7px 10px; font-size: 15px; }
.link { background: none; border: 0; color: var(--link); font-size: 14px; font-weight: 700; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.note { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; flex-wrap: wrap; }

/* the decision card, as in the film: the strongest outline on the page */
#card { display: flex; flex-direction: column; gap: var(--s3); margin-top: 12px; }
.card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 2.5px solid var(--ink); border-radius: 22px; padding: 16px 18px 18px; }
.cardTop { display: flex; align-items: center; gap: var(--s3); margin-bottom: 2px; }
.sun { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sunBg); color: var(--ink); }
.cardTop h3 { flex: 1; margin: 0; font-size: 22px; font-weight: 800; }
.st { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; }
.st.y { color: var(--stY); } .st.c { color: var(--stC); } .st.n { color: var(--stN); }
.cond { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.line { margin: 0; font-size: 15px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.line.strong { color: var(--ink); font-weight: 700; }
.ifYes { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--stC); }
.money { margin: 0; font-size: 16px; line-height: 1.4; }
.money b { font-weight: 800; white-space: nowrap; }
.recRow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: 8px; }
.rec { display: inline-block; font-size: 15px; font-weight: 700; padding: 5px 13px; border-radius: 999px; border: 2px solid var(--ink); color: var(--ink); background: var(--surface); }
.rec.rc-go { background: var(--pillY); border-color: var(--stY); } .rec.rc-ask { background: var(--pillC); border-color: var(--stC); } .rec.rc-no { background: var(--pillN); border-color: var(--stN); }
.cta { display: inline-flex; align-items: center; gap: 6px; background: var(--blue); color: var(--onBlue); border: 2px solid var(--ink); border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 700; padding: 5px 13px; }
.nextTx { margin: 2px 0 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.eye { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.card .eye { margin-top: 12px; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.chip { font-size: 13px; font-weight: 600; line-height: 1.3; padding: 6px 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--surface); color: var(--ink); text-align: left; overflow-wrap: anywhere; }
button.chip { cursor: pointer; color: var(--link); border-style: dashed; font-family: inherit; }
details.x { border-top: 1.5px solid var(--line); padding-top: 10px; margin-top: 10px; }
details.x + details.x { margin-top: 0; }
details.x > summary, details.more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s2); font-size: 15px; font-weight: 700; color: var(--link); }
details.x > summary::-webkit-details-marker, details.more > summary::-webkit-details-marker { display: none; }
details.x > summary::before, details.more > summary::before { content: ""; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s; }
details[open] > summary::before { transform: rotate(90deg); }
.xb { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; font-size: 15px; line-height: 1.5; }
.xb p { margin: 0; }
details.more { padding: 4px 4px 0; }
details.more .xb { padding-left: 16px; }
.conf { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; flex-wrap: wrap; }
.bar { width: 120px; height: 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--surface); padding: 2px; box-sizing: border-box; flex: none; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.sub { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.chain { font: 500 12px/1.5 "IBM Plex Mono", monospace; color: var(--muted); background: var(--surface2); border-radius: 10px; padding: 8px 10px; }
.moneyRows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 15px; }
.moneyRows span:nth-child(odd) { color: var(--muted); font-weight: 500; }
.moneyRows span:nth-child(even) { font-weight: 700; }
.lims { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.src { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.45; }
.src a { color: var(--link); }
.src b { color: var(--ink); font-weight: 600; }
.who { font: 500 12px "IBM Plex Mono", monospace; color: var(--muted); }
.old { font-size: 15px; color: var(--muted); margin: 0; }
.next { font-size: 14px; font-weight: 600; color: var(--muted); margin: 14px 0 0; }
.foot { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 10px; }

/* Welcome: shown on the first visit, ? in the header opens it again */
#welcome { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 48px 16px; background: rgba(29, 29, 43, .55); box-sizing: border-box; }
.wCard { position: relative; width: 100%; max-width: 580px; background: var(--surface); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 22px; padding: 26px 28px 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.wCard .eyebrow { align-self: flex-start; }
.wCard h2 { margin: 6px 0 0; font-size: 30px; font-weight: 800; line-height: 1.15; }
.wLead { margin: 0 0 8px; font-size: 17px; line-height: 1.5; color: var(--muted); font-weight: 500; }
.wCard h3.eye { margin: 12px 0 0; }
.wNeed, .wSteps { margin: 0; padding-left: 22px; font-size: 16px; line-height: 1.5; font-weight: 500; display: flex; flex-direction: column; gap: 4px; }
.wSteps b { font-weight: 800; }
.wElec { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1.5px solid var(--line); }
.wElec label { font-size: 15px; font-weight: 700; }
.wElec input { max-width: 220px; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; font-size: 16px; }
.wElec input[aria-invalid="true"] { border-color: var(--stN); }
.wHelp { margin: 0; font-size: 14px; color: var(--muted); }
.wHelp.bad { color: var(--stN); font-weight: 700; }
.wBtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.wBtns .go { font-size: 16px; padding: 10px 20px; }
.wBtns { align-items: center; }
.wBtns .link { font-size: 15px; }
.ex.pick button { animation: pick 1.1s ease-in-out 3; }
@keyframes pick { 50% { box-shadow: 0 0 0 5px var(--yellow); } }
.wAlt { background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; font-size: 16px; font-weight: 700; padding: 10px 20px; cursor: pointer; }
.wClose { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.wFoot { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* How we checked, as the mock's live trace */
#trace { grid-column: 1; grid-row: 2; background: var(--bg); border-top: 1.5px solid var(--line2); display: flex; flex-direction: column; max-height: 36vh; min-height: 0; }
#traceToggle { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; font-weight: 800; font-size: 20px; padding: 12px 20px; cursor: pointer; }
#traceDot { width: 13px; height: 13px; border-radius: 50%; background: var(--coral); flex: none; }
#traceDot.live { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
#traceCount { font: 500 13px "IBM Plex Mono", monospace; color: var(--muted); }
.every { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--muted); }
#traceBody { list-style: none; margin: 0; padding: 0 20px 12px; overflow-y: auto; font-size: 13px; line-height: 1.45; }
#trace.closed #traceBody { display: none; }
.ev { display: grid; grid-template-columns: 30px 96px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line2); }
.ev .no { color: var(--muted); }
.ag { display: inline-block; text-align: center; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: #1D1D2B; background: var(--lav); }
.ag.planner { background: var(--blue); color: #FFFFFF; } .ag.analyst { background: var(--yellow); } .ag.evaluator { background: var(--coral); }
.ag.reporter { background: var(--teal); } .ag.critic { background: var(--orange); } .ag.memory { background: var(--lav); }
.ev .tx { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.ev .kind { font: 600 11px "IBM Plex Mono", monospace; color: var(--muted); margin-right: 6px; text-transform: uppercase; }
.ev .tag { display: inline-block; font: 600 11px "IBM Plex Mono", monospace; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; margin-left: 6px; border: 1.5px solid var(--ink); color: var(--ink); }
.ev .tag.challenge { background: var(--coral); color: #1D1D2B; border-color: #1D1D2B; } .ev .tag.again { background: var(--teal); color: #1D1D2B; border-color: #1D1D2B; }
.ev .tag.bad { background: var(--coral); color: #1D1D2B; border-color: #1D1D2B; } .ev .tag.soft { background: var(--yellow); color: #1D1D2B; border-color: #1D1D2B; }
.ev.challenge, .ev.requery { background: var(--surface2); }
.ev details summary { cursor: pointer; font: 500 12px "IBM Plex Mono", monospace; color: var(--muted); }
.ev pre { white-space: pre-wrap; margin: 4px 0 0; color: var(--muted); font: 500 12px "IBM Plex Mono", monospace; }

/* phone and narrow windows: one column, the page scrolls */
@media (max-width: 900px) {
  body { display: block; overflow: auto; height: auto; }
  #top { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .brandName { font-size: 21px; }
  .meta { margin-left: auto; font-size: 13px; padding: 5px 10px; }
  .search, .here { order: 5; flex-basis: 100%; max-width: none; }
  #app { display: block; }
  #stage { height: 46vh; min-height: 280px; }
  .hint { top: 62px; font-size: 11px; max-width: calc(100% - 44px); }
  #panel { border-left: 0; padding: 18px 16px 22px; }
  #trace { max-height: none; }
  #traceBody { max-height: 60vh; padding: 0 16px 12px; }
  .every { display: none; }
  .ev { grid-template-columns: 24px 84px minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 420px) {
  #welcome { padding: 16px 12px; }
  .wCard { padding: 22px 18px 18px; }
  .wCard h2 { font-size: 24px; }
  .meta { display: none; }
  .q { font-size: 23px; }
  .card { padding: 14px 14px 16px; }
  .chips { grid-template-columns: 1fr; }
  .ev { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ev .no { display: none; }
}