/* A small doorway, a readable work surface. Scoped to this feature. */
.world-context-open,
.world-context-prelude {
    background: var(--panel, #101820);
    color: var(--text, #fff2ce);
    border: 1px solid var(--border, #285064);
    border-radius: 0;
    padding: 7px 10px;
    font: 600 12px/1.3 Arial, sans-serif;
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
}
.world-context-open[data-enabled="true"] { border-color: #08a4cb; }
.world-context-open { order: 0; }
.world-context-prelude { color: var(--gold, #ffb22c); font-size: 11px; }
.world-context-panel {
    --world-blue: #08a4cb;
    --world-orange: #ff9d00;
    box-sizing: border-box;
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    color: var(--text, #fff2ce);
    background: var(--bg, #060b11);
    border: 1px solid var(--world-blue);
    border-radius: 0;
    overflow: auto;
    font: 15px/1.5 Arial, sans-serif;
    box-shadow: 0 24px 90px #0009;
}
.world-context-panel::backdrop { background: #020509c9; }
.world-context-panel[open]:not([data-readonly="true"]) { display: flex; flex-direction: column; overflow: hidden; }
.world-context-panel:not([data-readonly="true"]) #world-context-body { overflow-y: auto; min-height: 0; }
.world-context-panel * { box-sizing: border-box; }
.world-context-panel h2,
.world-context-panel h3,
.world-context-panel h4,
.world-context-panel p { margin: 0; }
.world-context-panel h2 { font-size: 28px; line-height: 1.25; }
.world-context-panel h3 { font-size: 16px; }
.world-context-panel h4 { font-size: 14px; }
.world-context-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border, #285064);
    background: linear-gradient(115deg, #08a4cb10, transparent 65%);
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    position: static;
    width: 100%;
}
.world-context-eyebrow { display: block; color: var(--world-blue); font-size: 12px; margin-bottom: 4px; }
#world-context-body { padding: 20px 24px; display: grid; gap: 20px; }
.world-context-intro { max-width: 66ch; color: var(--sub, #d3c9ac); }
.world-context-basics { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; align-items: end; }
.world-context-panel label { display: grid; gap: 6px; font-size: 13px; min-width: 0; }
.world-context-panel input:not([type="checkbox"]):not([type="range"]),
.world-context-panel select {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid var(--border, #285064);
    border-radius: 0;
    font: inherit;
    color: inherit;
    background: var(--panel, #101820);
    color-scheme: dark;
}
.world-context-panel input[type="range"] { width: 100%; min-height: 28px; accent-color: var(--world-blue); }
.world-context-panel input[type="checkbox"] { accent-color: var(--world-blue); width: 18px; height: 18px; }
.world-context-panel .world-context-switch { display: flex; align-items: center; min-height: 42px; font-size: 13px; }
.world-context-panel button { font: 600 13px/1.3 Arial, sans-serif; padding: 10px 14px; min-height: 40px; color: inherit; background: var(--panel, #101820); border: 1px solid var(--border, #285064); border-radius: 0; cursor: pointer; }
.world-context-panel button:hover { border-color: var(--world-blue); }
.world-context-panel :focus-visible { outline: 2px solid var(--world-blue); outline-offset: 3px; }
.world-context-preview { padding: 16px; border: 1px solid #08a4cb66; background: linear-gradient(125deg, #08a4cb08, transparent 65%); }
.world-context-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.world-context-preview-head label { grid-template-columns: auto minmax(100px, 230px); align-items: center; }
#world-context-chart { margin-top: 12px; }
#world-context-chart svg { width: 100%; height: auto; display: block; color: var(--sub, #d3c9ac); }
#world-context-chart text { fill: currentColor; font: 12px Arial, sans-serif; }
#world-context-chart-note { font-size: 12px; color: var(--sub, #d3c9ac); }
.world-context-inspect { margin-top: 12px; }
.world-context-week-readout { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12px; }
.world-context-week-readout > strong, .world-context-week-readout > small { width: 100%; }
.world-context-week-readout small { color: var(--sub, #d3c9ac); font-size: 12px; }
.world-context-panel .world-context-breakdown { margin-top: 12px; }
.world-context-breakdown summary { font-size: 12px; }
#world-context-contributions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 0; font-size: 12px; }
#world-context-contributions > div { display: flex; justify-content: space-between; gap: 12px; }
#world-context-contributions dd { margin: 0; color: var(--world-blue); }
#world-context-contributions p { grid-column: 1/-1; color: var(--sub, #d3c9ac); }
.world-context-phases { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; border-top: 1px solid var(--border, #285064); padding-top: 10px; gap: 8px; font-size: 12px; }
.world-context-phases span { border-left: 2px solid var(--world-blue); padding-left: 8px; }
.world-context-phases span:first-child { border-color: var(--world-orange); }
.world-context-phases b { display: block; font-weight: 400; color: var(--sub, #d3c9ac); }
.world-context-factor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.world-factor > span { display: flex; justify-content: space-between; gap: 12px; }
.world-factor output { color: var(--world-blue); font-variant-numeric: tabular-nums; }
.world-factor small { color: var(--sub, #d3c9ac); font-size: 12px; line-height: 1.45; }
.world-context-panel details { border-top: 1px solid var(--border, #285064); padding-top: 12px; }
.world-context-panel summary { cursor: pointer; padding: 4px 0; font-size: 14px; font-weight: 600; }
.world-context-panel details[open] > summary { margin-bottom: 16px; }
.world-context-panel details > p { font-size: 13px; color: var(--sub, #d3c9ac); margin-bottom: 12px; }
.world-context-sensitivities { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.world-context-sensitivities h4, .world-context-sensitivities p { grid-column: 1 / -1; }
.world-context-sensitivities label { grid-template-columns: minmax(0, 1fr) 90px; align-items: center; }
.world-context-panel fieldset { min-width: 0; border: 1px solid var(--border, #285064); padding: 12px; margin: 0; }
.world-context-panel legend { padding: 0 6px; color: var(--world-orange); font-size: 12px; }
.world-context-event { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
#world-event-rows { display: grid; gap: 12px; margin-bottom: 12px; }
.world-context-empty { padding: 8px 0; font-size: 13px; color: var(--sub, #d3c9ac); }
.world-context-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.world-context-source-grid fieldset { display: grid; gap: 10px; }
.world-context-footer { padding: 16px 24px; border-top: 1px solid var(--border, #285064); display: flex; gap: 20px; align-items: center; justify-content: space-between; background: var(--panel, #101820); }
.world-context-footer { flex: 0 0 auto; }
.world-context-footer > div { display: flex; gap: 8px; flex-shrink: 0; }
.world-context-footer p { font-size: 12px; max-width: 56ch; }
.world-context-footer p[data-error="true"] { color: var(--world-orange); }
.world-context-panel .world-context-primary { color: #001019; background: var(--world-blue); border-color: var(--world-blue); }
.world-context-panel [hidden] { display: none !important; }
.world-context-panel[data-readonly="true"] { position: static; max-height: none; width: 100%; box-shadow: none; }
@media (max-width: 640px) {
    .world-context-panel { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); font-size: 14px; }
    .world-context-head { padding: 16px; }
    #world-context-body { padding: 16px; gap: 16px; }
    .world-context-basics { grid-template-columns: 1fr 1fr; gap: 12px; }
    .world-context-switch { grid-column: 1 / -1; }
    .world-context-preview { padding: 12px; }
    .world-context-preview-head { display: grid; gap: 10px; }
    .world-context-preview-head label { grid-template-columns: auto minmax(0, 1fr); }
    .world-context-factor-grid, .world-context-source-grid, .world-context-sensitivities { grid-template-columns: 1fr; }
    .world-context-event { grid-template-columns: 1fr 1fr; }
    .world-context-event label:first-of-type { grid-column: 1 / -1; }
    .world-context-event button { justify-self: start; }
    .world-context-footer { padding: 16px; flex-direction: column; align-items: stretch; gap: 12px; }
    .world-context-footer > div { justify-content: flex-end; }
    .world-context-panel input:not([type="range"]), .world-context-panel select { font-size: 16px; }
}