/* Application header, three primary screens, analysis map, distributed-workspace banner, and responsive frame. */
.app-shell { --analysis-panel-width: clamp(390px, 34vw, 510px); --map-right-inset: 0px; display: grid; grid-template-rows: var(--header-height) minmax(0, 1fr); height: 100vh; height: 100dvh; min-height: 0; }
.app-shell[data-application-mode="analysis-map"]:has(.side-panel:not([hidden])) { --map-right-inset: var(--analysis-panel-width); }
.app-shell.has-workspace-session { grid-template-rows: var(--header-height) auto minmax(0, 1fr); }
.app-header { position: relative; z-index: 12; display: flex; align-items: center; min-width: 0; height: var(--header-height); padding: 0 1rem; color: var(--color-text); background: var(--color-surface); border-top: 3px solid var(--color-primary); border-bottom: 1px solid var(--color-line-strong); }
.app-header__start { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 100%; gap: .8rem; }
.app-brand { display: inline-flex; align-items: center; flex: 0 0 auto; height: 40px; }
.app-brand img { display: block; width: 168px; max-width: 100%; height: auto; }
.application-mode-tabs { display: inline-flex; align-items: stretch; flex: 0 0 auto; min-width: 0; height: 100%; margin-left: .4rem; gap: .25rem; padding-inline: .7rem; border-inline-start: 1px solid var(--color-line); }
.application-mode-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 118px; padding: .6rem .7rem; color: var(--color-muted); background: transparent; border-bottom: 3px solid transparent; border-radius: 0; font-size: .875rem; font-weight: 650; white-space: nowrap; }
.application-mode-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.application-mode-tab:last-child { border-right: 0; }
.application-mode-tab:hover { color: var(--color-primary); background: var(--color-surface-alt); }
.application-mode-tab[aria-selected="true"] { color: var(--color-primary); background: var(--color-primary-soft); border-bottom-color: var(--color-primary); font-weight: 750; }
.menubar-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 42px; min-height: 42px; padding: .5rem; color: var(--color-text); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); }
.menubar-button:hover:not(:disabled) { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-primary); }
.menubar-button--icon { width: 42px; }
.app-icon { display: block; flex: 0 0 auto; pointer-events: none; }
.app-workbench { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.workspace-session-banner { position: relative; z-index: 11; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; padding: .55rem .75rem; color: var(--color-text); background: var(--color-primary-soft); border-bottom: 1px solid var(--color-primary); }
.workspace-session-banner[hidden] { display: none; }
.workspace-session-banner p { min-width: 0; margin: 0; font-weight: 750; overflow-wrap: anywhere; }
.workspace-session-banner__actions { display: flex; flex: 0 0 auto; gap: .4rem; }
.map-canvas { position: absolute; inset: 0; }
.app-shell[data-application-mode="analysis-map"] .maplibregl-ctrl-top-left { top: .55rem; left: .55rem; }
.map-canvas .maplibregl-ctrl-bottom-right { right: var(--map-right-inset); max-width: calc(100% - var(--map-right-inset) - .5rem); }
.map-canvas .terragaze-source-attribution { max-height: min(45vh, 22rem, calc(var(--map-viewport-height, 100vh) * .4)); }
.analysis-tool-navigation { display: flex; flex: 0 1 auto; align-items: stretch; gap: .15rem; min-width: 0; max-width: 100%; margin-left: auto; padding-left: .6rem; border-left: 1px solid var(--color-line); }
.analysis-tool-navigation[hidden] { display: none; }
.analysis-tool-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: .35rem; min-width: 76px; min-height: 42px; padding: .4rem .45rem; color: var(--color-muted); background: transparent; border: 1px solid transparent; text-align: center; font-size: .82rem; font-weight: 650; white-space: nowrap; }
.analysis-tool-button:hover { background: var(--color-surface-hover); }
.analysis-tool-button[aria-pressed="true"] { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-primary); box-shadow: inset 0 -2px var(--color-primary); }
.map-base-layer-control { position: absolute; z-index: 6; bottom: calc(var(--map-attribution-height, 96px) + .5rem); left: .8rem; max-width: min(300px, calc(100vw - 1.6rem)); }
.map-view-mode-control { position: absolute; z-index: 6; bottom: calc(var(--map-attribution-height, 96px) + .5rem); left: 8rem; }
.map-base-layer-control[open] + .map-view-mode-control { display: none; }
.app-shell[data-compact-map="true"] .map-base-layer-control { left: 4rem; max-width: calc(100% - 4.5rem); }
.app-shell[data-compact-map="true"] .map-view-mode-control { left: 11.2rem; }
.app-shell[data-compact-map="true"] .map-base-layer-control[open] { top: .5rem; bottom: auto; }
.app-shell[data-compact-map="true"] .map-base-layer-control__menu { width: min(280px, calc(100vw - 4.5rem)); min-width: 0; max-height: max(3rem, calc(var(--map-viewport-height, 100vh) - 4rem)); }
.side-panel { position: absolute; z-index: 7; top: 0; right: 0; bottom: 0; display: flex; width: var(--analysis-panel-width); max-width: 100%; color: var(--color-text); background: var(--color-surface); border-left: 1px solid var(--color-line-strong); box-shadow: -3px 0 12px rgb(20 37 30 / 7%); overflow: hidden; }
.side-panel[hidden], .data-management-surface[hidden], .dashboard-surface[hidden], .map-edit-taskbar[hidden] { display: none; }
.panel-content, .panel-content > div { display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column; }
.data-management-surface, .dashboard-surface { position: absolute; z-index: 8; inset: 0; color: var(--color-text); background: var(--color-canvas); }
.data-management-surface { overflow: hidden; }
.dashboard-surface { overflow: auto; }
.map-edit-taskbar { position: absolute; z-index: 9; right: 1rem; bottom: 1rem; left: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); }
.map-edit-taskbar__identity { display: flex; align-items: center; min-width: 0; gap: .65rem; }
.map-edit-taskbar__identity div { min-width: 0; }
.map-edit-taskbar__identity strong, .map-edit-taskbar__identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-edit-taskbar__identity span { color: var(--color-muted); font-size: .8rem; }
.map-edit-taskbar__actions { display: flex; flex: 0 0 auto; gap: .45rem; }
.map-status { position: absolute; z-index: 4; top: .75rem; right: calc(var(--map-right-inset) + .75rem); max-width: min(480px, calc(100% - var(--map-right-inset) - 4.5rem)); margin: 0; }
.app-workbench:has(.map-instruction:not([hidden])) .map-status { display: none; }
.toast-region { position: absolute; z-index: 20; top: 1rem; left: 50%; width: min(520px, calc(100vw - 2rem)); transform: translateX(-50%); pointer-events: none; }
.navigation-drawer { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; color: var(--color-text); background: transparent; border: 0; overflow: hidden; }
.navigation-drawer::backdrop { background: rgb(19 38 30 / 44%); }
.navigation-drawer__surface { display: flex; width: min(340px, calc(100vw - 48px)); height: 100%; flex-direction: column; background: var(--color-surface); box-shadow: var(--shadow-drawer); overflow: hidden; animation: drawer-in .18s ease-out; }
.navigation-drawer__header { display: flex; align-items: center; flex: 0 0 68px; gap: .8rem; padding: 0 1rem; border-top: 3px solid var(--color-primary); border-bottom: 1px solid var(--color-line); }
.navigation-drawer__header img { display: block; width: 180px; max-width: 100%; height: auto; }
.drawer-navigation { flex: 1; min-height: 0; padding: .8rem; overflow-y: auto; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* 道具名は狭い画面でも表示し、タブと地図ツールを別の行へ置く。 */
@media (max-width: 1350px) and (min-width: 901px) {
    .app-header { padding-inline: .7rem; }
    .app-header__start { gap: .55rem; }
    .app-brand img { width: 140px; }
    .application-mode-tabs { margin-left: .15rem; padding-inline: .45rem; }
    .application-mode-tab { min-width: 104px; padding-inline: .45rem; font-size: .82rem; }
    .application-mode-tab .app-icon { display: none; }
    .analysis-tool-navigation { padding-left: .4rem; }
    .analysis-tool-button { min-width: 62px; min-height: 52px; flex-direction: column; gap: .15rem; padding: .3rem; font-size: .72rem; }
    .analysis-tool-button .app-icon { width: 18px; height: 18px; }
}

@media (max-width: 900px) {
    :root { --header-height: 116px; }
    .app-shell[data-application-mode="analysis-map"]:has(.side-panel:not([hidden])) { --map-right-inset: 0px; }
    .app-shell[data-application-mode="analysis-map"] { --header-height: 168px; }
    .app-header { align-items: stretch; padding: .4rem .65rem; }
    .app-header__start { display: grid; width: 100%; height: auto; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 42px 48px; align-content: center; gap: .25rem .65rem; }
    .app-shell[data-application-mode="analysis-map"] .app-header__start { grid-template-rows: 42px 46px 48px; }
    .app-brand img { width: 156px; }
    .application-mode-tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 100%; margin: 0; padding: 0; border-inline-start: 0; border-top: 1px solid var(--color-line); }
    .application-mode-tab { flex: 1 1 33.333%; min-width: 0; padding-inline: .35rem; font-size: .85rem; }
    .app-shell[data-application-mode="analysis-map"] .maplibregl-ctrl-top-left { top: .45rem; left: .45rem; }
    .analysis-tool-navigation { grid-column: 1 / -1; grid-row: 3; width: 100%; max-width: 100%; height: 48px; margin: 0; padding: 0; border-left: 0; }
    .analysis-tool-button { flex: 1 1 20%; min-width: 0; min-height: 44px; flex-direction: column; gap: .1rem; padding: .2rem; font-size: .72rem; }
    .analysis-tool-button .app-icon { width: 18px; height: 18px; }
    .side-panel { width: 100%; padding-top: 0; border-left: 0; }
    .map-edit-taskbar { right: .5rem; bottom: .5rem; left: .5rem; align-items: stretch; flex-direction: column; }
    .map-edit-taskbar__actions .button { flex: 1; }
    .map-status { right: .55rem; max-width: calc(100% - 4rem); }
    .map-base-layer-control { right: auto; left: .45rem; max-width: calc(100vw - .9rem); }
    .map-view-mode-control { left: 7.5rem; }
    .workspace-session-banner { align-items: stretch; flex-direction: column; padding: .55rem .65rem; }
    .workspace-session-banner__actions { display: flex; flex-wrap: wrap; }
    .workspace-session-banner__actions .button { flex: 1 1 auto; min-width: 0; white-space: normal; }
    .navigation-drawer__header { flex-basis: 62px; }
}

/* 横向きのスマホでは、ブランドと主画面切替を同じ行に置く。 */
@media (min-width: 601px) and (max-width: 900px) and (max-height: 540px) {
    .app-shell { --header-height: 64px; }
    .app-shell[data-application-mode="analysis-map"] { --header-height: 112px; }
    .app-header__start { grid-template-columns: 42px 156px minmax(0, 1fr); grid-template-rows: 44px; }
    .app-shell[data-application-mode="analysis-map"] .app-header__start { grid-template-rows: 44px 44px; }
    .application-mode-tabs { grid-column: 3; grid-row: 1; border-top: 0; border-inline-start: 1px solid var(--color-line); }
    .application-mode-tab { font-size: .8rem; }
    .application-mode-tab .app-icon { display: none; }
    .analysis-tool-navigation { grid-row: 2; height: 44px; }
    .analysis-tool-button { flex-direction: row; gap: .4rem; font-size: .8rem; }
    .map-base-layer-control { left: 4rem; }
    .map-view-mode-control { left: 11.2rem; }
}

@media (max-width: 600px) {
    .application-mode-tab .app-icon { display: none; }
}

@media (max-width: 390px) {
    .application-mode-tab { gap: .25rem; padding-inline: .2rem; font-size: .76rem; }
    .navigation-drawer__surface { width: min(330px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) { .navigation-drawer__surface { animation: none; } }