/* Shared masthead for directories, investigations and reading pages. */
body:has(#app) > .top {
  --mast-gold: #cbb382;
  --mast-light: #e6d0a0;
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-areas: "brand nav tools" !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center;
  width: calc(100% - 32px);
  max-width: 1416px;
  min-height: 0;
  margin: 12px auto 0;
  padding: 8px 20px !important;
  gap: 0 18px !important;
  box-sizing: border-box;
  border: 1px solid #a88c5140 !important;
  border-radius: 2px;
  color: var(--mast-gold);
  background: linear-gradient(110deg, #111f19f0, #08130ff2 58%, #102019ed);
  box-shadow: inset 0 1px #e3c18409, 0 5px 16px #0003;
}
body:has(#app) > .top::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border: 0;
  border-radius: 0;
  background: linear-gradient(#bfa37155, #bfa37155) left top / 12px 1px no-repeat,
    linear-gradient(#bfa37155, #bfa37155) left top / 1px 12px no-repeat,
    linear-gradient(#bfa37155, #bfa37155) right bottom / 12px 1px no-repeat,
    linear-gradient(#bfa37155, #bfa37155) right bottom / 1px 12px no-repeat;
  pointer-events: none;
  animation: none;
}
body:has(#app) > .top::after {
  content: "";
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c2a36336 20%, #c2a36336 80%, transparent);
  pointer-events: none;
  animation: none;
}
body:has(#app) > .top .brand {
  grid-area: brand !important;
  display: flex;
  align-items: center;
  justify-self: start !important;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  margin: 0 !important;
  gap: 8px !important;
  text-decoration: none;
}
body:has(#app) > .top .brand-mark {
  display: block !important;
  flex: 0 0 auto;
  width: 38px;
  height: 42px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: url("assets/brand/icon-192.png") center / contain no-repeat;
  /* The existing dark-backed insignia blends into the masthead rather than a tile. */
  mix-blend-mode: lighten;
  filter: contrast(1.4) saturate(.65) brightness(.86);
  font-size: 0 !important;
  color: transparent;
  box-shadow: none;
}
body:has(#app) > .top .brand-copy {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 1px;
}
body:has(#app) > .top .brand-name {
  display: block;
  writing-mode: horizontal-tb;
  padding: 0;
  border: 0;
  color: var(--mast-light);
  font: 500 1.75rem/1.1 var(--font-heading);
  letter-spacing: .18em;
  text-shadow: 0 1px 2px #0009;
  white-space: nowrap;
}
body:has(#app) > .top .brand small {
  display: block;
  align-items: flex-start !important;
  margin: 0;
  gap: 0 !important;
}
body:has(#app) > .top .brand-wordmark {
  display: block;
  font: 400 .75rem/1.2 Georgia, "Times New Roman", serif !important;
  letter-spacing: .16em !important;
  color: #af986d;
  text-shadow: none;
  animation: none !important;
  white-space: nowrap;
}
body:has(#app) > .top :is(.brand-parent, .brand-divider) { display: none; }
html[lang="en"] body:has(#app) > .top .brand-name {
  font-size: 1.5rem;
  letter-spacing: .02em;
}
html[lang="en"] body:has(#app) > .top .brand-wordmark { display: none; }

/* Navigation shares the masthead baseline; only the current section carries a gold rule. */
body:has(#app) > .top nav {
  grid-area: nav !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
body:has(#app) > .top nav a {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #aea98f;
  font: 500 1rem/1.5 var(--font-heading) !important;
  letter-spacing: .12em !important;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
  transition: color .18s, text-shadow .18s;
}
body:has(#app) > .top nav a::before { content: none; }
body:has(#app) > .top nav a.active {
  color: #e7cd92 !important;
  background: transparent !important;
  box-shadow: none;
  text-shadow: 0 0 12px #d2b16c24;
}
body:has(#app) > .top nav a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 1px;
  width: min(72px, 76%);
  height: 2px;
  transform: translateX(-50%);
  background: #d4b775;
  box-shadow: 0 2px 8px #c1a36326;
  pointer-events: none;
}
html[lang="en"] body:has(#app) > .top nav a { letter-spacing: .02em !important; }

/* Keep real hit areas while reducing the visual weight of the four controls. */
body:has(#app) > .top .header-tools {
  grid-area: tools !important;
  position: static;
  display: flex;
  align-items: center;
  justify-self: end;
  justify-content: flex-end;
  flex-wrap: nowrap;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body:has(#app) > .top :is(.music-label, .refresh-label) { display: none; }
body:has(#app) > .top .header-tools :is(#music-toggle, #refresh-page, #startrail-account) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  min-width: 40px;
  inline-size: 40px;
  min-inline-size: 40px;
  height: 44px;
  min-height: 44px;
  block-size: 44px;
  min-block-size: 44px;
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 0;
  padding: 8px;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c8b585;
  box-shadow: none;
  transition: color .18s;
}
body:has(#app) > .top .account-trigger>span,
body:has(#app) > .top :is(.account-label, .account-state) { display: none; }
body:has(#app) > .top .header-tools #startrail-account {
  margin-left: 8px;
  border-left: 1px solid #a58c513d;
}
body:has(#app) > .top .account-trigger::before {
  content: "";
  position: absolute;
  inset: 9px 6px;
  border: 1px solid #bca06a66;
  border-radius: 50%;
  pointer-events: none;
}
body:has(#app) > .top .account-trigger::after { display: none; }
body:has(#app) > .top .account-trigger svg { width: 16px; height: 16px; }
body:has(#app) > .top .account-dot {
  position: absolute;
  right: 5px;
  top: 8px;
  width: 4px;
  height: 4px;
  margin: 0;
}
body:has(#app) > .top .language-picker select {
  width: 84px;
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  padding: 8px 19px 8px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: .875rem;
  line-height: 1.4;
  color: #c8bda3;
}
body:has(#app) > .top .language-picker>svg { right: 4px; width: 11px; stroke: #b59c6b; }
body:has(#app) > .top .music-toggle .record-icon { width: 22px; height: 22px; flex-basis: 22px; }
body:has(#app) > .top .refresh-icon { width: 19px; height: 19px; flex-basis: 19px; }
body:has(#app) > .top .header-tools #music-toggle[data-state="playing"] { color: #ecd39b; background: transparent; }
body:has(#app) > .top :is(a, button, select):focus-visible { outline: 2px solid #e0c48c; outline-offset: 2px; }
@media (hover: hover) {
  body:has(#app) > .top nav a:not(.active):hover { color: #e4c98f !important; background: transparent !important; }
  body:has(#app) > .top .header-tools :is(#music-toggle, #refresh-page, #startrail-account):hover { color: #f0d59c; background: transparent; }
  body:has(#app) > .top .language-picker select:hover { color: #f0d59c; }
}

/* Keep desktops on one row, including common reduced-width / zoomed windows. */
@media (max-width: 800px) {
  body:has(#app) > .top {
    grid-template-areas: "brand tools" "nav nav" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 6px 14px 0 !important;
    gap: 4px 10px !important;
  }
  body:has(#app) > .top nav {
    max-width: none;
    border-top: 1px solid #a78d5130 !important;
    gap: 0 !important;
  }
  body:has(#app) > .top nav a { font-size: .9375rem !important; letter-spacing: .05em !important; }
  body:has(#app) > .top nav a.active::after { bottom: -1px; }
}
@media (max-width: 480px) {
  body:has(#app) > .top {
    width: calc(100% - 16px);
    margin-top: 8px;
    padding: 6px 9px 0 !important;
    gap: 3px 4px !important;
  }
  body:has(#app) > .top .brand { gap: 5px !important; }
  body:has(#app) > .top .brand-mark { width: 28px; height: 36px; }
  body:has(#app) > .top .brand-name { font-size: 1.375rem; letter-spacing: .16em; }
  body:has(#app) > .top .brand-wordmark { letter-spacing: .04em !important; }
  html[lang="en"] body:has(#app) > .top .brand-name { font-size: 1.25rem; letter-spacing: 0; }
  body:has(#app) > .top .header-tools :is(#music-toggle, #refresh-page, #startrail-account) {
    width: 34px;
    min-width: 34px;
    inline-size: 34px;
    min-inline-size: 34px;
    padding: 6px;
  }
  body:has(#app) > .top .header-tools #startrail-account { margin-left: 4px; }
  body:has(#app) > .top .account-trigger::before { inset: 9px 4px; }
  body:has(#app) > .top .account-dot { right: 3px; }
  body:has(#app) > .top .language-picker select { width: 76px; padding-right: 15px; padding-left: 4px; }
  body:has(#app) > .top .language-picker>svg { right: 1px; }
  body:has(#app) > .top .music-toggle .record-icon { width: 21px; height: 21px; flex-basis: 21px; }
  body:has(#app) > .top nav a { font-size: .875rem !important; padding: 8px 2px !important; letter-spacing: .025em !important; }
}
@media (max-width: 360px) {
  body:has(#app) > .top { width: calc(100% - 12px); padding-left: 6px !important; padding-right: 6px !important; }
  body:has(#app) > .top .brand { gap: 4px !important; }
  body:has(#app) > .top .brand-mark { width: 24px; }
  html[lang="en"] body:has(#app) > .top .brand-name { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  body:has(#app) > .top :is(a, button, select) { transition: none !important; }
}
body[data-motion="reduce"]:has(#app) > .top :is(a, button, select) { transition: none !important; }


/* One content inset; shell.css must not add a second directory gutter. */
body:has(#app > .main-directory) > #app{max-width:1416px;width:100%;padding:0 0 48px}
/* Section titles start on the same inset below the shared masthead. */
#app > .main-directory{width:100%;max-width:1320px;margin:0 auto;padding:38px 32px 28px;box-sizing:border-box}
#app > .main-directory > .directory-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:none;min-width:0;margin:0 0 24px;padding:0;background:none;border:0;text-align:left;animation:none}
#app > .main-directory > .directory-heading>div:first-child{min-width:0;max-width:44em}
#app > .main-directory > .directory-heading h1{margin:0;font:500 clamp(1.65rem,3.1vw,2.5rem)/1.4 var(--font-heading);letter-spacing:.06em;color:#e4d9c1;text-shadow:0 3px 20px #0008}
#app > .main-directory > .directory-heading p{margin:10px 0 0;font-size:1rem;line-height:1.8;letter-spacing:0;color:#b4bcae}
#app > .main-directory > .directory-heading :is(.deck-eyebrow,.room-overline){display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 9px;font:400 .75rem/1.6 Georgia,"Songti SC",serif;letter-spacing:.13em;color:#d3b77e}
#app > .main-directory > .directory-heading>a{flex:none;align-self:center;margin:0;padding:10px 0;border:0;color:#d3b77e;font-size:.875rem;line-height:1.7;white-space:normal}
#app > .main-directory .deck-season-progress>span{font-size:.875rem}
#app > .main-directory .deck-season-progress small{font-size:.875rem}
@media(max-width:740px){
 #app > .main-directory{padding:24px 16px}
 #app > .main-directory > .directory-heading{align-items:flex-start;gap:18px;margin-bottom:18px;flex-wrap:wrap}
 #app > .main-directory > .directory-heading>div:first-child{flex:1 1 100%}
 #app > .main-directory > .directory-heading h1{font-size:1.8rem;letter-spacing:.06em}
 #app > .main-directory > .directory-heading :is(.deck-eyebrow,.room-overline){gap:8px;letter-spacing:.08em}
 #app > .main-directory .deck-season-progress{flex:0 1 220px;display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:0;border:0;align-items:center}
 #app > .main-directory .deck-season-progress strong{font-size:1.35rem}
}

body:has(#app) > footer{max-width:1256px;width:calc(100% - 48px);padding:24px 0 34px;color:#a6b0a4;border-color:#b49a6238;font-size:12px;letter-spacing:.04em}
body:has(#app) > footer #footer-brand{font-family:Georgia,serif;color:#c0a879;letter-spacing:.12em}
@media(max-width:600px){body:has(#app) > footer{width:calc(100% - 32px);padding-bottom:25px}}
/* Keep visual and keyboard order identical, including the legacy refresh control. */
body:has(#app) > .top .header-tools>*{order:0}
@media(max-width:360px){html[lang="ja"] body:has(#app)>.top nav a{font-size:13px!important;letter-spacing:0!important;white-space:nowrap}}

/* Story reading: a quiet bar; all existing tools remain accessible. */
.top .reading-back,.top .reading-current{display:none}
body.story-reading:has(#app)>.top{
 position:sticky;top:0;z-index:50;width:100%;max-width:none;margin:0;
 grid-template-areas:"back current tools"!important;grid-template-columns:44px minmax(0,1fr) auto!important;
 min-height:56px;padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))!important;gap:0 10px!important;
 border:0!important;border-bottom:1px solid #b39a6a2b!important;border-radius:0;background:#0c1814f5;box-shadow:none;
 transition:transform .2s ease;
}
body.story-reading:has(#app)>.top::before,body.story-reading:has(#app)>.top::after{display:none!important}
body.story-reading:has(#app)>.top>.brand,body.story-reading:has(#app)>.top>nav{display:none!important}
body.story-reading:has(#app)>.top .reading-back{grid-area:back;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#cfbb91;font-size:1.5rem;text-decoration:none}
body.story-reading:has(#app)>.top .reading-current{grid-area:current;display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.9375rem;color:#c1b496;font-weight:400;letter-spacing:.025em}
body.story-reading:has(#app)>.top .header-tools{grid-area:tools;gap:0!important;flex-wrap:nowrap;border:0;padding:0;margin:0}
body.story-reading:has(#app)>.top .header-tools button{min-width:44px!important;width:44px!important;height:44px!important;padding:8px!important;border:0!important}
body.story-reading:has(#app)>.top :is(.music-label,.refresh-label,.account-trigger>span){display:none!important}
body.story-reading:has(#app)>.top .language-picker{min-width:68px;width:68px;margin:0;padding:0;border:0}
body.story-reading:has(#app)>.top #interface-language{min-width:68px;width:68px;max-width:68px;min-height:44px;padding:6px 17px 6px 6px;font-size:.875rem}
body.story-reading:has(#app)>.top .language-picker>svg{right:2px}
body.story-reading.reading-header-hidden:has(#app)>.top:not(:focus-within){transform:translateY(-110%)}
@media(max-width:360px){body.story-reading:has(#app)>.top{gap:0 2px!important;padding-inline:4px!important}}
@media(prefers-reduced-motion:reduce){body.story-reading:has(#app)>.top{transition:none}}