/* The world: weather card and chips, the regional map and the drive, the temperament card, barn-event vignettes. */

/* ---------- hub: weather ---------- */
.hud-chip.wx { cursor: pointer; min-width: 5.6em; font: inherit; color: inherit; text-align: left; border-color: color-mix(in srgb, var(--wt, #fff) 45%, transparent) }
.hud-chip.wx:hover { filter: brightness(1.12) }
.hud-chip.wx b { display: flex; align-items: center; gap: .3em }
.wx-mini { display: inline-flex; width: 1.15em; height: 1.15em }
.wx-mini svg, .wx-ico svg, .wm-wxi svg, .wx-fc span svg, .wx-chip span svg, .wm-delay span svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round }
.world { position: absolute; left: 2.6%; top: 5.8em; width: min(20em, 27%); z-index: 2; animation: pop .5s .1s var(--ease-pop) both }
.wx-card { background: var(--glass); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .09); border-radius: 1.1em; padding: .7em .9em .8em; display: grid; gap: .5em; box-shadow: 0 .3em 0 rgba(0, 0, 0, .35); border-top: .22em solid var(--wt, var(--amber)) }
.wx-now { display: grid; grid-template-columns: 2.6em 1fr; gap: .7em; align-items: center }
.wx-ico { width: 2.6em; height: 2.6em; display: block }
.wx-card h4 { margin: 0; font-size: 1.15em; font-weight: 850; font-stretch: 75%; color: var(--cream) }
.wx-card h4 small { font-weight: 600; color: var(--muted); margin-left: .3em; font-size: .8em }
.wx-card p { margin: .1em 0 0; font-size: .78em; line-height: 1.3; color: #cfc4b8 }
.wx-fc { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em }
.wx-fc > div { background: rgba(255, 255, 255, .05); border-radius: .7em; padding: .3em .2em; display: grid; justify-items: center; position: relative; gap: .05em }
.wx-fc i { font-style: normal; font-size: .66em; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: var(--mono) }
.wx-fc span { width: 1.5em; height: 1.5em; display: block }
.wx-fc b { font-size: .82em; font-weight: 800; color: var(--cream) }
.wx-fc em { position: absolute; top: .1em; right: .45em; font-style: normal; font-weight: 900; color: var(--amber); font-size: .8em }
.wx-fc .unsure span { opacity: .65 }
.wx-map { justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: .5em }

/* ---------- map ---------- */
.w-map { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(10, 6, 4, .78); backdrop-filter: blur(6px); animation: wmIn .28s ease both }
@keyframes wmIn { from { opacity: 0 } to { opacity: 1 } }
.wm-frame { width: min(96vw, 190vh); height: min(90vh, 51vw); display: grid; grid-template-columns: minmax(0, 1fr) min(20em, 28%); grid-template-rows: auto minmax(0, 1fr) auto; gap: .6em .8em; padding: .8em 1em .7em; background: linear-gradient(#2a1d15, #1b130e); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.3em; box-shadow: 0 1.4em 3em rgba(0, 0, 0, .55), inset 0 .1em 0 rgba(255, 255, 255, .08); position: relative }
.wm-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 1em }
.wm-title { display: flex; align-items: baseline; gap: .6em; color: var(--cream) }
.wm-title svg { align-self: center; color: var(--amber) }
.wm-title h3 { margin: 0; font-size: 1.5em; font-weight: 900; font-stretch: 70% }
.wm-title span { color: var(--muted); font-size: .85em }
.wm-wx { margin-left: auto; display: flex; align-items: center; gap: .5em; font-size: .9em; background: rgba(255, 255, 255, .06); padding: .25em .9em .25em .6em; border-radius: 2em }
.wm-wx b { color: var(--cream) } .wm-wx em { font-style: normal; color: var(--muted); font-size: .85em }
.wm-wxi { width: 1.6em; height: 1.6em; display: block }
.wm-stage { grid-column: 1; grid-row: 2; position: relative; background: #1a0f08; align-self: center; aspect-ratio: 16 / 9; border-radius: 1em; overflow: hidden; border: 3px solid #6a4a28; box-shadow: inset 0 0 0 2px #1a0f08, 0 .3em 0 #0f0a09 }
.wm-stage svg { width: 100%; height: 100%; display: block }
.wm-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.wm-pin { cursor: pointer; transition: transform .15s }
.wm-pin:hover { filter: brightness(1.12) }
.wm-pin:focus-visible { outline: none; filter: drop-shadow(0 0 6px #f2c14e) }
.wm-pin-in.sel path:first-child { stroke: #f2c14e; stroke-width: 4.5 }
.wm-pin-in.sel { animation: pinBob .9s ease-in-out infinite alternate }
@keyframes pinBob { to { transform: translateY(-5px) } }
.wm-route { animation: routeFlow 1.1s linear infinite }
@keyframes routeFlow { to { stroke-dashoffset: -32 } }
.wm-pulse { animation: wmPulse 1.8s ease-out infinite; transform-origin: center; transform-box: fill-box }
@keyframes wmPulse { from { transform: scale(.6); opacity: .5 } to { transform: scale(1.6); opacity: 0 } }
.wm-panel { grid-column: 2; grid-row: 2; background: var(--clipt-bg, #fff8f1); color: var(--clipt-ink, #2b1e24); border-radius: 1em; padding: .9em 1em; display: flex; flex-direction: column; gap: .6em; overflow: auto; box-shadow: 0 .3em 0 rgba(0, 0, 0, .35) }
.wm-panel h4 { margin: 0; font-size: 1.35em; font-weight: 900; font-stretch: 68%; line-height: 1.05 }
.wm-ph { display: flex; gap: .7em; align-items: center } .wm-ph img { width: 3.2em; height: 3.2em; border-radius: 50%; object-fit: cover; border: 2px solid #f0e1d6 } .wm-ph span { color: var(--clipt-mut, #8a7580); font-size: .8em; font-weight: 600 }
.wm-note { margin: 0; font-size: .85em; line-height: 1.35; color: #5a4650 }
.wm-route-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em }
.wm-route-info > div { background: #f6ece1; border-radius: .7em; padding: .35em .5em; display: grid }
.wm-route-info i { font-style: normal; font-size: .64em; text-transform: uppercase; letter-spacing: .08em; color: #8a7580; font-family: var(--mono) } .wm-route-info b { font-size: 1em; font-weight: 850 }
.wm-delay { display: flex; align-items: center; gap: .5em; font-size: .82em; font-weight: 700; background: #fdeee0; border-radius: .7em; padding: .35em .6em; color: #8a4a10 }
.wm-delay span { width: 1.4em; height: 1.4em; display: block } .wm-delay.ok { background: #e8f3e6; color: #3a6a42 }
.wm-jobmeta { display: flex; gap: .4em; flex-wrap: wrap; font-size: .82em; font-weight: 700 } .wm-jobmeta span { background: #f6ece1; border-radius: .6em; padding: .2em .6em } .wm-jobmeta .cash { background: #def0de; color: #2a6a3a } .wm-jobmeta .ot { background: #fde0d8; color: #a2402a }
.wm-hint { margin: 0; font-size: .78em; color: var(--clipt-mut, #8a7580) }
.wm-panel .btn.primary { margin-top: auto }
.wm-legend { grid-column: 1; grid-row: 3; display: flex; gap: 1.2em; font-size: .78em; color: #bfae9c }
.wm-legend .lg { display: inline-block; width: .9em; height: .9em; border-radius: 50%; margin-right: .4em; vertical-align: -.1em } .lg.offer { background: #e95b93 } .lg.diary { background: #f2c14e } .lg.road { background: #ead7a8; border-radius: 2px; height: .35em; vertical-align: .15em; width: 1.3em }
.wm-drive { position: absolute; left: 50%; bottom: 1.2em; transform: translateX(-50%); background: rgba(18, 13, 12, .88); color: var(--cream); padding: .7em 1.4em; border-radius: 1em; text-align: center; display: grid; gap: .1em; box-shadow: 0 .3em 0 rgba(0, 0, 0, .4); animation: pop .4s var(--ease-pop) both }
.wm-drive b { font-size: 1.2em; font-weight: 850 } .wm-drive span { font-size: .85em; color: #e8d9c0 } .wm-drive em { font-style: normal; font-size: .7em; color: var(--muted); font-family: var(--mono) }
.w-map.driving .wm-panel, .w-map.driving .wm-legend, .w-map.driving #wm-close { display: none }
.w-map.driving .wm-frame { grid-template-columns: minmax(0, 1fr) } .w-map.driving .wm-stage { grid-column: 1 }
@media (max-width: 1000px) { .wm-frame { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 96vh } .wm-panel { grid-column: 1; grid-row: 3; max-height: 14em } .wm-legend { grid-row: 4 } .world { position: static; width: auto; margin: .6em 1em } }

/* ---------- brief ---------- */
.wx-chip { display: inline-flex; align-items: center; gap: .45em } .wx-chip span { width: 1.3em; height: 1.3em; display: block }
.w-temper { display: grid; grid-template-columns: 2.1em 1fr; gap: .6em; align-items: start; background: #f6ece1; border-radius: .8em; padding: .5em .7em; margin-top: .1em }
.w-temper .wt-ico { width: 2em; height: 2em; display: grid; place-items: center; border-radius: 50%; background: #2b1e24; color: #f2c14e; padding: .35em } .w-temper .wt-ico svg { width: 100%; height: 100% }
.w-temper b { font-size: .98em; font-weight: 900; display: block; color: #2b1e24 }
.w-temper span.wt-line { display: block; font-size: .8em; font-style: italic; color: #5a4650; line-height: 1.3 }
.w-temper span.wt-tip { display: block; font-size: .74em; color: #8a5a10; font-weight: 700; margin-top: .15em }
.w-temper span.wt-mem { display: block; font-size: .74em; margin-top: .25em; color: #5a4650; font-weight: 600 } .w-temper .wt-mem.bad { color: #a2402a } .w-temper .wt-mem.good { color: #2a6a3a }
.w-temper span.wt-wx { display: block; font-size: .72em; margin-top: .15em; color: #4a6a8a; font-weight: 700 }
.t-kicker .wt-ico { color: #ff9a4d } .t-nervous .wt-ico { color: #ffe27a } .t-sweet .wt-ico { color: #ff8fb8 } .t-calm .wt-ico { color: #8fd39a } .t-vocal .wt-ico { color: #8fc1ec } .t-stubborn .wt-ico { color: #c9a37a } .t-escape .wt-ico { color: #c59aff }

/* ---------- barn events ---------- */
.w-event { position: absolute; left: 1.6em; top: calc(50% + .2em); width: min(19em, 22vw); z-index: 12; display: grid; gap: .5em; background: linear-gradient(#fff8f1, #f6ece1); color: #2b1e24; border-radius: 1.1em; padding: .65em .85em .7em; box-shadow: 0 .35em 0 rgba(0, 0, 0, .4), 0 1em 2em rgba(0, 0, 0, .35); transform-origin: left center; animation: weIn .42s var(--ease-pop) both }
@keyframes weIn { from { transform: translateX(-120%) rotate(-4deg); opacity: 0 } to { transform: none; opacity: 1 } }
.w-event .we-art { width: 100%; height: 4.9em; border-radius: .7em; background: linear-gradient(#f4d9a8, #e5c08a); overflow: hidden; display: grid; place-items: end center; transition: transform .3s }
.w-event.ev-powercut .we-art { background: linear-gradient(#3a3f55, #1c2030) } .w-event.ev-rainroof .we-art { background: linear-gradient(#a9c3da, #6f90ae) } .w-event.ev-coffee .we-art { background: linear-gradient(#e9c9a0, #d3a574) }
.we-art svg { height: 100%; animation: weBob 1.2s ease-in-out infinite alternate } @keyframes weBob { to { transform: translateY(-.25em) } }
.we-art.out svg { animation: none }
.we-body h5 { margin: 0 0 .15em; font-size: 1.1em; font-weight: 900; font-stretch: 70% }
.we-body p { margin: 0; font-size: .82em; line-height: 1.3; color: #4a3640 }
.we-choices { display: grid; gap: .35em; margin-top: .55em }
.we-choices button { text-align: left; border: 0; background: #2b1e24; color: #fff8f1; border-radius: .7em; padding: .45em .7em; cursor: pointer; display: grid; gap: .05em; box-shadow: 0 .18em 0 #0f0a09; transition: transform .08s }
.we-choices button:hover { background: #3d2c34; transform: translateY(-.05em) } .we-choices button:active { transform: translateY(.14em); box-shadow: none }
.we-choices button b { font-size: .88em; font-weight: 800 } .we-choices button span { font-size: .7em; color: #d8c8b8; line-height: 1.25 }
.we-timer { height: .28em; border-radius: .2em; background: rgba(0, 0, 0, .12); overflow: hidden; margin-top: .45em } .we-timer u { display: block; height: 100%; width: 100%; background: #e95b93; transition: width .25s linear }
.w-event.done .we-art { height: 3.6em }
.we-out { font-style: italic } .we-fx { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .5em }
.we-fx span { font-size: .72em; font-weight: 800; padding: .15em .6em; border-radius: 1em; background: #eee } .we-fx .good { background: #def0de; color: #2a6a3a } .we-fx .bad { background: #fde0d8; color: #a2402a }
.w-dark { position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0, 0, 0, .25) 0, rgba(5, 6, 12, .86) 38%, rgba(3, 4, 8, .94) 100%) }
.w-dark.on { opacity: 1; animation: wdFlick 1.6s steps(1) 1 } @keyframes wdFlick { 0% { opacity: .2 } 12% { opacity: 1 } 20% { opacity: .35 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .w-event, .wm-route, .wm-pin-in.sel, .wm-pulse, .we-art svg, .w-map { animation: none } .w-dark.on { animation: none } }
@media (max-width: 1000px) { .w-event { top: auto; bottom: 7em; width: min(22em, 70vw) } }