/* Workspace-only styling; purchase, authentication and exported reports retain their own presentation. */
.app-shell, .workspace-dialog, .geocode-choice-panel {
  --workspace-sage: #edf3ef;
  --surface-soft: var(--workspace-sage);
}
.app-shell {
  --wt-sans: "Avenir Next", Avenir, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--wt-sans);
  background: #fff;
}
.app-shell *, .app-shell *::before, .app-shell *::after { letter-spacing: 0; }
.app-shell :is(button, input, select, textarea) { font-family: inherit; }
.app-shell :is(strong, button) { font-weight: 600; }
.app-shell :is(.map-events-label, .pin-detail span) { font-size: 12px; font-weight: 500; text-transform: none; }
.app-shell .account-summary-label { font-weight: 500; }
.app-shell :is(h2, h3, h4) { font-family: var(--wt-sans); font-weight: 600; }
.app-shell .sidebar { background: var(--workspace-sage); box-shadow: none; }
.app-shell .brand-logo { object-fit: contain; }
.app-shell .workspace-nav-link { font-weight: 500; border-radius: 4px; }
.app-shell .case-card { padding: 18px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.app-shell .case-card h2 { font-size: 16px; }
.app-shell .case-card label { font-weight: 500; }
.app-shell .topbar { background: #fff; box-shadow: none; backdrop-filter: none; border-bottom: 1px solid var(--line); }
.app-shell .topbar h2 { font-size: 26px; line-height: 1.3; }
.app-shell .eyebrow { font-weight: 500; text-transform: none; }
.app-shell :is(.map-panel, .tool-panel) { border: 0; border-radius: 0; box-shadow: none; background: #fff; padding: 24px 18px; }
.app-shell .tool-panel { border-top: 1px solid var(--line); }
.app-shell .panel-heading h3 { font-size: 18px; line-height: 1.4; }
.app-shell .dashboard-grid { gap: 0; }
.app-shell .details-panel { border-radius: 4px; box-shadow: none; background: #fff; }
.app-shell .details-panel > summary { font-weight: 600; }
.app-shell :is(.mini-button, .text-button) { font-weight: 600; }
.app-shell :is(.context-summary-grid, .station-weather-summary) > div { box-shadow: none; }
.app-shell .context-summary-grid { border-radius: 4px; }
.app-shell :is(th, .map-events-label) { font-weight: 600; }
.app-shell th { text-transform: none; }
.app-shell :is(button, a, input, select, summary):focus-visible { outline: 2px solid #426d91; outline-offset: 3px; }
.app-shell .unified-review-period { margin: 16px 0 20px; border-top: 1px solid var(--line); min-width: 0; }
.unified-review-period .event-reference-controls { display: grid; gap: 10px; padding: 14px 0 0; margin: 0; border: 0; background: transparent; }
.unified-review-period .event-review-modes { display: flex; gap: 26px; padding: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; width: 100%; }
.unified-review-period .event-review-modes button { min-width: 0; min-height: 44px; padding: 10px 0; font-size: 13px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; box-shadow: none; background: transparent; color: var(--muted); font-weight: 500; white-space: normal; }
.unified-review-period .event-review-modes button.active { border-bottom-color: var(--green-dark); color: var(--green-dark); font-weight: 600; }
.unified-review-period #event-map-primary-controls { margin: 0; padding: 14px 0; background: transparent; border: 0; }
.unified-review-period #event-map-view-controls { width: 100%; border: 0; padding: 0; background: none; }
.unified-review-period .event-view-choice { border: 0; padding: 0; background: none; box-shadow: none; }
.unified-review-period .map-events-window { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.unified-review-period .mini-segmented:not(.event-review-modes) { border-radius: 4px; }
.unified-review-period .mini-segmented:not(.event-review-modes) button { min-width: 62px; min-height: 36px; border-radius: 3px; font-weight: 500; }
.unified-review-period .historical-review-range { border: 0; background: transparent; padding: 16px 0; margin: 0; }
.review-period-summary { background: var(--workspace-sage); border-left: 3px solid #8fae8f; padding: 12px 16px; min-height: 72px; }
.review-period-summary #review-period-dates { margin: 0; font-size: 13px; font-weight: 600; color: var(--green-dark); line-height: 1.6; overflow-wrap: anywhere; }
.review-period-summary #review-period-scope { font-size: 12px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
.review-period-summary #align-review-period { margin-top: 10px; }
.app-shell .iem-panel[hidden] { display: none !important; }
/* Match the approved concept's proportions while retaining the live evidence and actions. */
.app-shell { grid-template-columns: 270px minmax(0, 1fr); font-size: 14px; line-height: 1.5; }
.app-shell .sidebar { padding: 26px 22px; gap: 25px; }
.app-shell .brand-logo { width: 100%; height: auto; max-height: none; }
.app-shell .workspace { padding: 0 32px 36px; }
.app-shell .topbar { position: relative; margin: 0; padding: 24px 0; min-height: 110px; }
.app-shell .topbar #save-case { background: white; color: var(--green-dark); border: 1px solid #bdcbc2; border-radius: 4px; }
.app-shell .case-library-summary { gap: 12px; }
.app-shell .case-library-summary span { font-size: 12px; font-weight: 500; text-transform: none; }
.app-shell .case-library-summary strong { font-weight: 500; line-height: 1.5; }
.app-shell :is(.map-panel, .tool-panel) { padding: 24px 0; }
.app-shell .panel-heading { padding-bottom: 0; margin-bottom: 18px; border: 0; }
.app-shell .unified-review-period { margin-top: 0; }
.unified-review-period .event-reference-controls > .map-events-label { font-size: 14px; font-weight: 600; color: var(--green-dark); }
.unified-review-period #event-map-primary-controls button[aria-selected="true"] { background: #1f3b2e; color: white; box-shadow: none; }
.app-shell .map-workspace { grid-template-columns: 190px minmax(0, 1fr); grid-template-areas: "context map"; gap: 0; align-items: stretch; border: 1px solid var(--line); border-radius: 4px; }
.app-shell .map-context { padding: 20px 16px; background: var(--workspace-sage); border-right: 1px solid var(--line); }
.app-shell .map-context .pin-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; border: 0; border-radius: 0; padding: 0; background: transparent; }
.app-shell .pin-detail strong { font-weight: 500; line-height: 1.5; }
.app-shell #pin-detail-title { font-size: 17px; font-weight: 600; }
.app-shell .pin-detail-field-heading { flex-direction: column; align-items: flex-start; gap: 2px; }
.app-shell .pin-detail-action { white-space: normal; line-height: 1.4; padding: 3px 0; background: transparent; color: var(--green-dark); text-align: left; border: 0; }
.app-shell #lookup-elevation { min-width: 100px; min-height: 32px; margin: 4px 0 6px; padding: 5px 10px; border: 1px solid var(--green-dark); border-radius: 4px; background: var(--surface-soft); text-align: center; font-size: 12px; }
.app-shell #lookup-elevation:not(:disabled):hover { background: var(--green-dark); color: #fff; }
.app-shell #lookup-elevation:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }
.app-shell #lookup-elevation:disabled { border-color: var(--line); color: var(--muted); cursor: default; }
.app-shell .map-stage { height: 520px; min-height: 330px; border: 0; border-radius: 0 4px 4px 0; box-shadow: none; }
.app-shell .station-weather-summary { border-radius: 0; padding: 0; border-left: 0; border-right: 0; background: var(--workspace-sage); gap: 0; }
.app-shell .station-weather-summary .context-summary-card { padding: 16px; border-left: 0; border-right: 1px solid var(--line); }
.app-shell .station-weather-summary .context-summary-card:last-child { border-right: 0; }
.app-shell .context-summary-card span { font-size: 12px; font-weight: 500; text-transform: none; }
.app-shell .station-weather-summary .context-summary-card strong { font-size: 15px; font-weight: 500; line-height: 1.4; }
.app-shell .details-panel { border-radius: 0; border-left: 0; border-right: 0; }
/* A single, restrained type hierarchy across the working tools, not only the map. */
.app-shell { --ink: #2e3333; --muted: #62726b; --line: #d8dfdc; color: var(--ink); }
.app-shell :is(input, select, textarea) { font-size: 13px; font-weight: 400; border-radius: 4px; box-shadow: none; }
.app-shell :is(.mini-button, .text-button) { border-radius: 4px; box-shadow: none; }
.app-shell .workspace-nav { gap: 3px; }
.app-shell .workspace-nav-link { min-height: 40px; padding: 8px 12px; font-size: 14px; }
.app-shell .workspace-nav-link[href="#case"] { border-left: 3px solid #1f3b2e; padding-left: 9px; background: #e0e9e3; color: #1f3b2e; }
.app-shell :is(.account-grid span, .wind-rose-meta-grid span, .wind-rose-context span,
  .wind-rose-detail-heading > span:first-child, .weather-source-strip > div > span) {
  font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.app-shell :is(.account-grid strong, .wind-rose-meta-grid strong, .wind-rose-context strong) { font-weight: 500; line-height: 1.5; }
.app-shell .access-pill { border-radius: 3px; font-weight: 500; text-transform: none; }
.app-shell :is(.control-row label, .control-row output, .history-controls label,
  .iem-controls label, .local-controls label, .source-form label, .tree-edit-grid label,
  .loading-controls > span, .history-radius-input > span) { font-weight: 500; letter-spacing: 0; text-transform: none; }
.app-shell .source-note { font-weight: 400; line-height: 1.5; }
.app-shell :is(.interpretive-card > span, .interpretive-detail > span, .history-advanced-settings > summary) { font-weight: 500; }
.app-shell .interpretive-card small { font-weight: 400; }
.app-shell #primary-tree-id { font-weight: 600; }
.app-shell :is(.pin-label, .station-marker-dot, .station-rainfall) { font-weight: 600; }
.app-shell .station-distance { font-weight: 500; }
.app-shell :is(.incident-weather, .wind-rose-panel) { padding: 24px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app-shell .incident-weather { margin-top: 0; }
.app-shell .incident-weather-title > div > span { font-size: 18px; font-weight: 600; line-height: 1.4; }
.app-shell .incident-weather-title small { font-size: 12px; line-height: 1.5; }
.app-shell #precipitation-qualification { font-size: 12px; font-weight: 400; line-height: 1.5; }
.app-shell .incident-weather-information-label { font-weight: 500; text-transform: none; letter-spacing: 0; }
.app-shell .station-weather-summary { margin-top: 20px; }
.app-shell .wind-rose-panel { margin-top: 24px; border-top: 1px solid var(--line); }
.app-shell .wind-rose-header h4 { font-size: 18px; line-height: 1.4; }
.app-shell .wind-rose-meta-grid { gap: 0; background: var(--workspace-sage); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.app-shell .wind-rose-meta-grid > div { padding: 16px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.app-shell .wind-rose-meta-grid > div:last-child { border-right: 0; }
.app-shell .wind-rose-detail { border-radius: 4px; box-shadow: none; background: var(--workspace-sage); }
.app-shell .wind-rose-figure { background: var(--workspace-sage); }
.app-shell .wind-rose-detail-heading > span:first-child { letter-spacing: 0; }
.app-shell :is(.wind-rose-detail-state, .wind-rose-legend-item) { font-weight: 500; }
.app-shell .wind-rose-loading-copy strong { font-weight: 600; }
.app-shell .wind-rose-note.is-loading { border: 0; border-left: 3px solid #8fae8f; border-radius: 0; background: var(--workspace-sage); }
.app-shell .details-panel { margin-top: 0; border-bottom: 0; background: transparent; }
.app-shell .details-panel > summary { min-height: 44px; padding: 13px 0; font-size: 13px; font-weight: 500; gap: 12px; }
.app-shell .details-panel > summary > span { font-weight: 400; line-height: 1.5; }
.app-shell .details-panel .details-panel { margin: 0 14px; }
.app-shell :is(.wind-rose-evidence-details summary, .wind-rose-data-quality summary) { font-size: 13px; font-weight: 500; }
.app-shell .tree-table-wrap { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.app-shell table { font-size: 13px; }
.app-shell th { font-size: 12px; font-weight: 500; background: var(--workspace-sage); }
.app-shell :is(th, td) { line-height: 1.5; }
.app-shell :is(.winter-evidence-table caption, .station-basis-summary, .raw-observation-toolbar strong) { font-weight: 600; }
.app-shell .map-events-review-heading > div > .map-events-label { font-size: 18px; font-weight: 600; color: #1f3b2e; }
.app-shell .report-action-band { margin-top: 24px; padding: 20px 0 0; }
.app-shell :is(.weather-source-strip, .manual-weather-inputs) { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 0; background: transparent; box-shadow: none; }
.app-shell :is(.weather-source-strip strong, .weather-source-strip label) { font-weight: 500; }
.app-shell :is(.map-events-context, .iem-panel) { box-shadow: none; }
/* Workspace dialogs live outside .app-shell; keep sign-in and purchase screens untouched. */
.workspace-dialog, .geocode-choice-panel {
  --ink: #2e3333; --muted: #62726b; --line: #d8dfdc;
  font-family: "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.5;
}
.workspace-dialog *, .geocode-choice-panel * { letter-spacing: 0; }
.workspace-dialog :is(h2, h3, h4, strong, button), .geocode-choice-panel :is(h3, strong, button) { font-family: inherit; font-weight: 600; }
.workspace-dialog { background: rgba(23, 32, 29, .36); backdrop-filter: blur(2px); }
.workspace-dialog .modal-panel, .geocode-choice-panel { background: #fff; border-radius: 6px; border-color: var(--line); color: var(--ink); }
.workspace-dialog .modal-panel { max-width: 100%; max-height: calc(100dvh - 48px); }
.workspace-dialog .modal-heading { padding: 20px 24px 16px; gap: 16px; }
.workspace-dialog .modal-heading > div { min-width: 0; }
.workspace-dialog .modal-heading h3 { font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.workspace-dialog .eyebrow { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.workspace-dialog .modal-note { margin: 18px 24px; font-size: 14px; font-weight: 400; line-height: 1.6; }
.workspace-dialog :is(input, select, textarea) { font-family: inherit; font-size: 14px; font-weight: 400; }
.workspace-dialog :is(.text-button, .mini-button) { min-height: 40px; padding: 9px 14px; font-size: 14px; line-height: 1.4; border-radius: 4px; box-shadow: none; white-space: normal; }
.workspace-dialog .modal-heading > .icon-button { flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; font-size: 18px; font-weight: 400; border-radius: 4px; background: #fff; box-shadow: none; }
.workspace-dialog :is(button, a, input, select, textarea, summary):focus-visible, .geocode-choice-panel :is(button, a):focus-visible { outline: 2px solid #426d91; outline-offset: 3px; }
.workspace-dialog .case-switch-actions { padding: 4px 24px 24px; flex-wrap: wrap; }
.geocode-choice-panel { padding: 24px; }
.geocode-choice-panel::backdrop { background: rgba(23, 32, 29, .36); backdrop-filter: blur(2px); }
/* Leaflet has its own font defaults; apply the workspace hierarchy to its overlays too. */
.app-shell :is(.leaflet-tooltip, .leaflet-popup-content-wrapper, .leaflet-popup-content, .iem-report-type-tooltip), .app-shell .info-button::after {
  font-family: var(--wt-sans); font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--ink); letter-spacing: 0;
}
.app-shell :is(.leaflet-tooltip, .leaflet-popup-content-wrapper, .iem-report-type-tooltip), .app-shell .info-button::after {
  background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 16px rgba(23, 45, 34, .14); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.app-shell .leaflet-tooltip { padding: 10px 12px; }
.app-shell .leaflet-popup-content { margin: 16px; max-width: calc(100vw - 80px); overflow-wrap: anywhere; }
.app-shell .leaflet-popup-content p { margin: 10px 0; }
.app-shell :is(.leaflet-tooltip, .leaflet-popup-content) strong { font-weight: 600; }
.app-shell :is(.leaflet-tooltip, .leaflet-popup-content) a { color: #245f78; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.app-shell .leaflet-tooltip.windward-event-tooltip .event-source-link { color: #245f78; font-weight: 500; }
.app-shell .leaflet-tooltip.windward-event-tooltip { overflow: auto; box-sizing: border-box; }
.app-shell .event-tooltip-period { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 6px; }
.app-shell .event-tooltip-magnitude { font-weight: 600; margin: 5px 0; }
.app-shell .event-source-details { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.app-shell .event-source-details summary { cursor: pointer; font-weight: 500; }
.app-shell .event-source-details > div { margin-top: 6px; }
.app-shell .event-tooltip-repositioned::before { display: none; }
.app-shell #map .map-overlay-controls button[aria-pressed="true"] { background: var(--green-dark); color: #fff; border-color: var(--green-dark); box-shadow: none; }
.app-shell #map .map-overlay-controls button[aria-pressed="false"] { background: #fff; color: var(--muted); border-color: var(--line); box-shadow: none; }
.app-shell #map .map-overlay-controls button[aria-disabled="true"] { background: #edf0ee; color: #68766e; border-style: dashed; }
.workspace-dialog :is(label, legend) { font-weight: 500; text-transform: none; }
.workspace-dialog :is(.report-export-note, .report-export-option small, .source-note) { font-weight: 400; line-height: 1.5; }
.app-shell .leaflet-tooltip.windward-event-tooltip .event-tooltip-dismiss { width: 28px; min-width: 28px; height: 28px; min-height: 28px; border-radius: 4px; font-family: inherit; font-weight: 400; }
.app-shell .leaflet-popup-close-button { font-family: var(--wt-sans); color: var(--muted); }
.app-shell .leaflet-popup-tip { background: #fff; }
.app-shell .leaflet-tooltip-top::before { border-top-color: #fff; }
.app-shell .leaflet-tooltip-bottom::before { border-bottom-color: #fff; }
.app-shell .leaflet-tooltip-left::before { border-left-color: #fff; }
.app-shell .leaflet-tooltip-right::before { border-right-color: #fff; }
@media (max-width: 680px) {
  .workspace-dialog { padding: 12px; }
  .workspace-dialog .modal-panel { max-height: calc(100dvh - 24px); }
  .workspace-dialog .modal-heading { padding: 18px 18px 14px; }
  .workspace-dialog .modal-note { margin: 16px 18px; }
  .workspace-dialog .case-switch-actions { padding: 4px 18px 18px; }
}
#account-overview-dialog :is(dt, label), #feedback-dialog label { font-weight: 500; text-transform: none; letter-spacing: 0; }
#account-overview-dialog dd { font-weight: 500; }
#account-overview-dialog :is(input, select, textarea), #feedback-dialog :is(input, select, textarea) { font-family: inherit; border-radius: 4px; }
#account-overview-dialog .account-overview-grid > div { border-radius: 4px; box-shadow: none; }
/* Keep case intake and the guide as readable sections, not stacks of cards. */
.app-shell .case-library-form-state { gap: 8px; }
.app-shell .case-library-section-title { margin: 14px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.app-shell .case-library-open-state .mini-actions { grid-template-columns: minmax(0, 1fr); }
.app-shell .case-library-open-state .wt-select-button { font-size: 13px; font-weight: 400; border-radius: 4px; box-shadow: none; }
.app-shell #load-case { min-height: 38px; }
.app-shell .case-location-fields { display: grid; gap: 8px; min-width: 0; }
.app-shell .case-location-fields[hidden] { display: none; }
.app-shell .case-location-method { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 4px; padding: 3px; gap: 3px; margin-bottom: 4px; }
.app-shell .case-location-method button { min-width: 0; min-height: 36px; padding: 6px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; }
.app-shell .case-location-method button[aria-pressed="true"] { background: var(--green-dark); color: white; }
.app-shell .case-form-section {
  display: grid; gap: 8px; min-width: 0; margin: 18px 0 0; padding: 14px 0 0;
  border: 0; border-top: 1px solid var(--line);
}
.app-shell .case-form-section legend { padding: 0 10px 0 0; color: var(--green-dark); font-size: 14px; font-weight: 600; }
.app-shell .case-library-form-state label { font-size: 12px; margin-top: 4px; }
.app-shell .case-library-form-state :is(input:not([type="checkbox"]):not([type="hidden"]), select:not(.wt-native-select)) { min-width: 0; width: 100%; min-height: 40px; }
.app-shell .case-library-form-state .wt-select-button { border-radius: 4px; box-shadow: none; font-size: 13px; font-weight: 400; padding-top: 8px; padding-bottom: 8px; }
.app-shell .case-library-form-state .wt-select-menu { border-radius: 4px; }
.app-shell .case-library-form-state .wt-select-option { font-weight: 500; }
.app-shell .case-library-form-state .empty-case-guidance { margin: 0 0 8px; padding: 0; border: 0; border-radius: 0; background: none; }
.app-shell .case-location-preview { justify-content: flex-start; padding: 2px 0; }
.app-shell .case-location-preview-button { min-height: 36px; }
.app-shell .case-location-data-note { margin: 2px 0 0; text-align: left; font-size: 11px; line-height: 1.5; }
.app-shell .case-location-data-note a { font-weight: 500; }
.app-shell .incident-date-display { padding: 8px 0; border: 0; border-radius: 0; background: none; }
.app-shell .incident-date-display strong { font-weight: 500; line-height: 1.5; }
.app-shell .incident-date-editor { padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.app-shell .date-time-fields { grid-template-columns: minmax(0, 1.2fr) minmax(0, .75fr) minmax(0, 1fr); gap: 8px; }
.app-shell .date-time-fields span { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.app-shell .incident-picker-button { min-width: 0; min-height: 40px; border-radius: 4px; padding-left: 8px; padding-right: 20px; }
.app-shell .incident-picker-button span { color: var(--ink); font-size: 13px; font-weight: 400; }
.app-shell .incident-picker-menu { border-radius: 4px; }
.app-shell .incident-picker-option { min-height: 36px; border-radius: 3px; font-weight: 500; }
.app-shell .incident-picker-year .incident-picker-menu { right: 0; left: auto; }
.app-shell .incident-time-unknown { padding: 8px 0; border: 0; border-radius: 0; background: none; }
.app-shell .incident-time-unknown small { font-weight: 400; line-height: 1.5; }
.app-shell .case-library-form-state .field-helper { font-weight: 400; line-height: 1.5; }
.app-shell .case-time-zone-correction { min-width: 0; }
.app-shell .case-time-zone-correction[open] { padding: 8px 0; border: 0; border-radius: 0; background: none; }
.app-shell .case-time-zone-correction summary { font-weight: 500; }
.app-shell .case-time-zone-correction label[for="case-time-zone"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.app-shell .case-library-form-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.app-shell .case-library-form-actions button { min-height: 40px; padding: 8px; }
#workspace-guide-dialog { --muted: #62726b; --line: #d8dfdc; }
#workspace-guide-dialog .workspace-guide-panel { width: min(720px, 96vw); }
#workspace-guide-dialog .modal-heading { padding: 24px 28px 18px; }
#workspace-guide-dialog .modal-heading h3 { font-size: 23px; line-height: 1.3; }
#workspace-guide-dialog .workspace-guide-intro { margin: 20px 28px 0; }
#workspace-guide-dialog :is(.workspace-guide-section, .workspace-guide-more) { margin: 24px 28px; }
#workspace-guide-dialog h4 { color: #1f3b2e; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; }
#workspace-guide-dialog .workspace-guide-steps { gap: 0; }
#workspace-guide-dialog .workspace-guide-steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
#workspace-guide-dialog .workspace-guide-step-number { border: 0; border-radius: 4px; background: var(--workspace-sage); font-weight: 500; }
#workspace-guide-dialog .workspace-guide-steps strong { margin-bottom: 3px; }
#workspace-guide-dialog .workspace-guide-more-heading { margin-bottom: 12px; }
#workspace-guide-dialog .workspace-guide-more details { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
#workspace-guide-dialog .workspace-guide-more details + details { margin-top: 0; }
#workspace-guide-dialog .workspace-guide-more summary { padding: 14px 0; font-weight: 500; }
#workspace-guide-dialog .workspace-guide-more details[open] summary { border: 0; }
#workspace-guide-dialog .workspace-guide-more details p { padding: 0 0 16px; line-height: 1.6; }
#workspace-guide-dialog .workspace-guide-periods { margin: 0 0 16px; font-size: 13px; }
#workspace-guide-dialog .workspace-guide-periods > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; padding: 8px 0; }
#workspace-guide-dialog .workspace-guide-periods dt { font-weight: 600; }
#workspace-guide-dialog .workspace-guide-periods dd { margin: 0; color: var(--muted); line-height: 1.6; }
#workspace-guide-dialog .workspace-guide-purpose { margin: 0 28px 24px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
#workspace-guide-dialog .workspace-guide-actions { padding: 18px 28px; background: var(--workspace-sage); }
#workspace-guide-dialog .workspace-guide-actions .text-button { border-radius: 4px; }
#workspace-guide-dialog :is(button, a, summary):focus-visible { outline: 2px solid #426d91; outline-offset: 3px; }
@media (max-width: 760px) {
  #workspace-guide-dialog .modal-heading { padding: 20px; }
  #workspace-guide-dialog .workspace-guide-intro { margin: 18px 20px 0; }
  #workspace-guide-dialog :is(.workspace-guide-section, .workspace-guide-more) { margin: 22px 20px; }
  #workspace-guide-dialog .workspace-guide-purpose { margin: 0 20px 22px; }
  #workspace-guide-dialog .workspace-guide-actions { padding: 16px 20px; }
  #workspace-guide-dialog .workspace-guide-periods > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (min-width: 1700px) { .app-shell .workspace { padding-left: 48px; padding-right: 48px; } }
@media (min-width: 761px) and (max-width: 1100px) {
  .app-shell .workspace { padding-left: 22px; padding-right: 22px; }
  .app-shell .map-workspace { grid-template-columns: 160px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .app-shell .sidebar { position: relative; height: auto; padding: 16px 20px; gap: 14px; }
  .app-shell .brand-logo { width: min(235px, 100%); height: auto; max-height: none; }
  .app-shell .workspace { padding: 0 20px 28px; }
  .app-shell .topbar { min-height: 0; }
  .app-shell .map-workspace { grid-template-columns: minmax(0, 1fr); grid-template-areas: "context" "map"; }
  .app-shell .map-context { padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-shell .map-context .pin-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .app-shell .map-context .pin-detail > div:nth-child(2) { grid-column: auto; }
  .app-shell .map-stage { height: 420px; min-height: 300px; border-radius: 0 0 4px 4px; }
  .app-shell .workspace-nav { flex-wrap: wrap; }
  .app-shell .workspace-nav-link { padding: 8px; font-size: 13px; }
  .app-shell .station-weather-summary { grid-template-columns: minmax(0, 1fr); }
  .app-shell .station-weather-summary .context-summary-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .app-shell .station-weather-summary .context-summary-card:last-child { border-bottom: 0; }
  .app-shell .wind-rose-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .wind-rose-meta-grid > div { padding: 12px; border-bottom: 1px solid var(--line); }
  .app-shell .wind-rose-meta-grid > div:nth-child(2n) { border-right: 0; }
  .app-shell .wind-rose-meta-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .app-shell .details-panel > summary { flex-wrap: wrap; gap: 6px; }
  .app-shell .details-panel > summary > span { overflow-wrap: anywhere; }
}
@media (max-width: 680px) {
  .app-shell .topbar h2 { font-size: 21px; }
  .app-shell :is(.map-panel, .tool-panel) { padding: 24px 0; }
  .app-shell .panel-heading h3 { font-size: 16px; }
  .unified-review-period .event-review-modes { gap: 12px; }
  .unified-review-period .event-review-modes button { flex: 1; font-size: 12px; }
  .unified-review-period .map-events-window { gap: 10px; }
  .review-period-summary { padding: 10px 12px; }
  .app-shell #map .map-overlay-controls { left: 10px; width: calc(100% - 20px); max-width: none; }
  .app-shell #map .map-overlay-controls button { padding: 8px 6px; font-size: 12px; }
  .app-shell #map .map-controls { top: 62px; right: 10px; }
}
.app-shell .map-key {
  display: flex;
  align-items: baseline;
  gap: 8px 18px;
  padding: 12px 0 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.app-shell .map-key[hidden] { display: none; }
.map-key-title { flex: 0 0 auto; font-weight: 600; }
.map-key ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.map-key li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.map-key-symbol { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 16px; color: var(--key-color); font-size: 9px; font-weight: 600; line-height: 1; }
.map-key-site::before { content: ""; width: 12px; height: 12px; background: var(--key-color); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.map-key-site::after { content: ""; position: absolute; width: 5px; height: 5px; background: white; border-radius: 50%; }
.map-key-station { border: 2px solid var(--key-color); border-radius: 20px; background: white; }
.map-key-rain { border: 1px solid #c4d5e1; border-radius: 3px; background: #f1f7fa; }
.map-key-dot::before, .map-key-ring::before, .map-key-tree::before { content: ""; width: 11px; height: 11px; border: 2px solid var(--key-color); border-radius: 50%; }
.map-key-dot::before { background: var(--key-color); }
.map-key-tree::before { box-shadow: 0 0 2px #62726b; }
.map-key-cluster, .map-key-cluster-ring { border: 2px solid var(--key-color); border-radius: 20px; }
.map-key-cluster { background: var(--key-color); color: white; }
.map-key-cluster-ring { background: white; }
.map-key-area { border: 1px solid #2b687d; background: rgba(57, 124, 145, .28); border-radius: 2px; }
.map-key-boundary::before { content: ""; width: 24px; border-top: 2px dashed var(--key-color); }
.map-key-wind::before { content: ""; width: 23px; border-top: 2px solid var(--key-color); }
.map-key-wind::after { content: ""; position: absolute; right: 1px; width: 6px; height: 6px; border-top: 2px solid var(--key-color); border-right: 2px solid var(--key-color); transform: rotate(45deg); }
@media (max-width: 760px) {
  .app-shell .map-key { flex-direction: column; gap: 6px; }
  .map-key ul { gap: 8px 16px; }
}
/* Keep retrieval feedback beside the action after transient notices close. */
.site-context-status {
  margin: 12px 0;
  padding: 12px 14px;
  border: 0;
  background: var(--workspace-sage);
  color: var(--green-dark);
  font-size: 13px;
  line-height: 1.5;
}
.site-context-status strong { display: block; font-size: 14px; }
.site-context-working { display: block; color: var(--muted); }
.site-context-status.is-loading strong::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid var(--line);
  border-top-color: var(--green-dark);
  border-radius: 50%;
  animation: site-context-spin 1s linear infinite;
}
@keyframes site-context-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .site-context-status.is-loading strong::before { animation: none; } }