/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 */
/* Hallmark · macrostructure: Workbench · modern-minimal · warm paper/navy/vermilion · shared category navigation */
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;min-width:0;overflow-x:clip}
body{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body)}
.site-header{display:flex;align-items:center;gap:var(--space-lg);padding:.5rem var(--space-lg);border-bottom:1px solid var(--color-rule);min-width:0}
.brand{display:flex;align-items:center;gap:.5rem;white-space:nowrap;color:var(--color-ink);text-decoration:none;min-width:0}
h1{font-size:1.15rem;margin:0;min-width:0;overflow-wrap:anywhere}
.kind-tabs{display:flex;align-items:center;gap:.25rem;margin-inline:auto}
.kind-tabs button{font:inherit;font-size:.95rem;font-weight:700;color:var(--color-ink-2);background:transparent;border:0;border-bottom:3px solid transparent;padding:.75rem 1rem;white-space:nowrap;cursor:pointer}
.kind-tabs button[aria-selected=true]{color:var(--color-accent);border-bottom-color:var(--color-accent)}
.kind-tabs button:hover{background:var(--color-paper-2)}
.history-link{white-space:nowrap;color:var(--color-ink-2);font-size:.8rem}
.header-links{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:flex-end}
.story-entry{color:var(--color-accent);font-size:.85rem;font-weight:700;text-underline-offset:.2em}
button:focus-visible,a:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
#workspace{position:relative;min-width:0;min-height:0;overflow:auto}
.view-host{height:100%;min-width:0}
[hidden]{display:none!important}
#status{position:absolute;z-index:1200;inset:1rem auto auto 50%;transform:translateX(-50%);max-width:calc(100% - 2rem);padding:.75rem 1rem;background:var(--color-paper);border:1px solid var(--color-rule);font-size:.9rem}
#status button{margin-left:.5rem;font:inherit;white-space:nowrap;cursor:pointer}
/* Header navigation stays visible while the workspace scrolls. */
.site-header{padding:.6rem 1.25rem;gap:1.25rem;background:var(--color-surface)}
.kind-tabs{gap:.2rem;padding:.2rem;border:1px solid var(--color-rule);border-radius:8px;background:var(--color-paper);flex-wrap:wrap}
.kind-tabs button{min-height:44px;padding:.55rem .85rem;border:0;border-radius:5px;font-size:.85rem;font-weight:600;transition:background 140ms ease,color 140ms ease}
.kind-tabs button[aria-selected=true]{background:var(--color-ink);color:var(--color-surface);box-shadow:0 1px 3px var(--color-shadow)}
.kind-tabs button:hover{background:var(--color-paper-2)}
.kind-tabs button[aria-selected=true]:hover{background:color-mix(in srgb,var(--color-ink) 88%,var(--color-surface))}
/* Category identity dot; the regional tab shows all five colors. */
.kind-tabs button::before{content:"";display:inline-block;width:.8rem;height:.8rem;margin-right:.4rem;border-radius:50%;background:var(--tab-color);vertical-align:.08em}
.kind-tabs button[aria-selected=true]::before{box-shadow:0 0 0 1.5px var(--color-surface)}
#tab-explore::before{width:.9rem;border-radius:.25rem;background:linear-gradient(90deg,var(--kind-shiseki) 0 14.29%,var(--kind-infrastructure) 14.29% 28.57%,var(--kind-omatsuri) 28.57% 42.86%,var(--kind-onsen) 42.86% 57.14%,var(--kind-tokusan) 57.14% 71.43%,var(--kind-geo) 71.43% 85.71%,var(--kind-landscape) 85.71%)}
#tab-shiseki{--tab-color:var(--kind-shiseki)}#tab-infrastructure{--tab-color:var(--kind-infrastructure)}#tab-omatsuri{--tab-color:var(--kind-omatsuri)}#tab-onsen{--tab-color:var(--kind-onsen)}#tab-tokusan{--tab-color:var(--kind-tokusan)}#tab-geo{--tab-color:var(--kind-geo)}
.header-links{gap:.35rem 1rem;max-width:23rem}
.story-entry{font-size:.75rem;text-decoration-color:var(--color-rule)}
.header-links a:hover{text-decoration-color:currentColor}
.workspace-tools{display:none}
#explore-detail{position:fixed;inset:0 0 0 auto;margin:0;width:min(25rem,calc(100% - 2rem));height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-left:1px solid var(--color-rule);background:var(--color-paper);color:var(--color-ink);overflow:hidden}
#explore-detail::backdrop{background:color-mix(in srgb,var(--color-ink) 18%,transparent)}
#explore-detail .view-host{height:100%}
#status{border-radius:6px;box-shadow:0 4px 20px var(--color-shadow)}
#status button{min-height:44px;border:1px solid var(--color-rule);border-radius:4px;background:var(--color-surface);padding:.4rem .75rem}
button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:1150px){
  .site-header{flex-wrap:wrap;gap:.65rem}
  .header-links{margin-left:auto;max-width:none}
  .kind-tabs{order:2;width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Mobile map controls: a compact masthead, disclosure navigation and thumb-level search. */
.mobile-kind,#mobile-menu-toggle,.mobile-story-label{display:none}
.workspace-tools svg,#mobile-menu-toggle svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media(max-width:768px){
  :root{--mobile-dock-space:calc(5.5rem + env(safe-area-inset-bottom))}
  body{position:relative;height:var(--viewport-height,100dvh);overflow:hidden}
  .site-header{position:relative;display:flex;flex-wrap:wrap;gap:.25rem .5rem;padding:.4rem .75rem}
  .brand{flex:1 0 auto;gap:.25rem;min-height:44px;white-space:nowrap}
  .brand h1{font-size:.8125rem}.brand img{width:22px;height:22px}
  .mobile-kind{display:block;flex:1 1 7rem;min-width:0;max-width:calc(100% - 3.25rem);font-size:0}
  .mobile-kind select{width:100%;min-width:0;min-height:44px;padding:.5rem .35rem;border:1px solid var(--color-rule);border-radius:6px;background:var(--color-paper);color:var(--color-ink);font:600 .8125rem var(--font-body)}
  #mobile-menu-toggle{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--color-rule);border-radius:6px;background:var(--color-surface);color:var(--color-ink);cursor:pointer}
  #mobile-menu-toggle[aria-expanded=true]{background:var(--color-paper-2)}
  .kind-tabs,.desktop-story-label{display:none}
  .mobile-story-label{display:inline}
  .header-links{display:none;position:absolute;z-index:1400;inset:calc(100% + .5rem) .75rem auto auto;min-width:min(15rem,calc(100% - 1.5rem));max-width:calc(100% - 1.5rem);padding:.5rem;margin:0;border:1px solid var(--color-rule);border-radius:8px;background:var(--color-surface);box-shadow:0 6px 24px var(--color-shadow)}
  .site-header[data-menu-open] .header-links{display:grid;gap:0;justify-content:stretch;text-align:left}
  .header-links a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:48px;padding:.5rem .75rem;font-size:.9375rem;color:var(--color-ink);font-weight:600;text-decoration:none;white-space:nowrap;border-radius:4px}
  .header-links a:hover{background:var(--color-paper-2)}
  .workspace-tools{display:flex;position:absolute;z-index:900;left:.75rem;right:.75rem;bottom:calc(1rem + env(safe-area-inset-bottom));gap:.5rem;padding:.35rem;border:1px solid var(--color-rule);border-radius:12px;background:var(--color-surface);box-shadow:0 4px 20px var(--color-shadow)}
  .workspace-tools button{display:flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:52px;padding:.45rem .75rem;border:0;border-radius:8px;font:700 .875rem var(--font-body);cursor:pointer}
  .workspace-tools [data-workspace-target=map]{flex:0 0 auto;flex-direction:column;gap:.15rem;min-width:4rem;background:transparent;color:var(--color-ink-2);font-size:.6875rem}
  .workspace-tools [data-workspace-target=map][aria-pressed=true]{background:var(--color-paper-2);color:var(--color-ink)}
  .workspace-tools [data-workspace-target=search]{flex:1;background:var(--color-ink);color:var(--color-surface);justify-content:flex-start}
  .workspace-tools [data-workspace-target=search][aria-expanded=true]{background:var(--color-accent)}
  .search-button-copy{display:grid;gap:.15rem;min-width:0;text-align:left}
  .tool-label{white-space:nowrap}
  #mobile-search-state{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;font-weight:400}
  #workspace{overflow:hidden}
  #explore-detail{z-index:1000;inset:auto 0 var(--mobile-dock-space);margin:0;width:100%;height:auto;max-height:min(44%,22rem);border:1px solid var(--color-rule);border-radius:12px 12px 0 0;box-shadow:0 -4px 20px var(--color-shadow)}
  #explore-detail:not(.sheet-expanded) .view-host{height:auto}
  #explore-detail.sheet-expanded{max-height:none;height:calc(var(--viewport-height,100dvh) - var(--mobile-dock-space) - 1rem)}
}

#tab-landscape{--tab-color:var(--kind-landscape)}

/* Map chrome follows the shared warm-paper Workbench; Blog owns its own surface. */
body:not(.story-page) .site-header{padding:var(--space-xs) var(--map-panel-padding);gap:var(--space-md);background:var(--color-paper)}
body:not(.story-page) .brand h1{font-size:var(--map-text-control);font-weight:700;line-height:1.4}
body:not(.story-page) .kind-tabs{padding:0;border:0;border-radius:0;background:transparent;gap:var(--space-xs)}
body:not(.story-page) .kind-tabs button{min-height:var(--map-control-height);padding:var(--space-sm);border-radius:var(--map-control-radius);font-size:var(--map-text-control);line-height:1.4;white-space:nowrap;box-shadow:none}
body:not(.story-page) .kind-tabs button[aria-selected=true]{background:var(--color-ink);color:var(--color-accent-ink);box-shadow:none}
body:not(.story-page) .header-links a{display:inline-flex;align-items:center;min-height:var(--map-control-height);font-size:var(--map-text-control);white-space:nowrap;text-underline-offset:.2em;color:var(--color-ink);font-weight:400;text-decoration:none}
body:not(.story-page) .header-links a:hover{color:var(--color-accent);text-decoration:underline}
body:not(.story-page) :is(.kind-tabs button,#mobile-menu-toggle,.workspace-tools button):focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
@media(max-width:768px){
  body:not(.story-page) .site-header{gap:var(--space-xs);padding:var(--space-xs) var(--space-sm)}
  body:not(.story-page) .brand h1{font-size:var(--map-text-control)}
  body:not(.story-page) .mobile-kind select{background:var(--color-surface);font-size:var(--map-text-control);border-radius:var(--map-control-radius)}
  body:not(.story-page) #mobile-menu-toggle{border-radius:var(--map-control-radius)}
  body:not(.story-page) .header-links{border-radius:var(--map-panel-radius);box-shadow:0 4px 16px var(--color-shadow)}
  body:not(.story-page) .workspace-tools{border-radius:var(--map-panel-radius);box-shadow:0 3px 12px var(--color-shadow)}
  body:not(.story-page) .workspace-tools button{padding:var(--space-xs) var(--space-sm);border-radius:var(--map-control-radius);font-size:var(--map-text-control);line-height:1.2}
  body:not(.story-page) .workspace-tools [data-workspace-target=map]{flex-direction:row;gap:var(--space-xs);font-size:var(--map-text-small)}
  body:not(.story-page) #mobile-search-state{font-size:var(--map-text-small);line-height:1.2}
}