/* Vallorne — the frame both sides share.
   The header, the tabs across the top, the tab's pages down the left, "On this
   page" on the right, the music bar, and Where We Are pinned under the header.
   Both sides wear it: <body class="framed"> (plus "dmside" or "playerside").
   On a phone the tabs move to a bar along the bottom and the page list becomes
   a drop-down under the header.
   The DM side differs (see the end of this file): each tab opens a menu of its
   pages underneath, "On this page" takes the left, and Where We Are is a
   button in the header beside View as. */

[hidden] { display:none !important; }
.top-right .pill.door { text-decoration:none; display:inline-flex; align-items:center; }

/* View as: the DM's menu into the player side */
.view-as { position:relative; }
.view-as > summary { list-style:none; cursor:pointer; user-select:none; gap:5px; }
.view-as > summary::-webkit-details-marker { display:none; }
.view-as > summary::after { content:'▾'; font-size:10px; }
.view-as-menu {
  position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:190px; max-height:70vh; overflow-y:auto;
  display:flex; flex-direction:column; padding:6px; gap:1px;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.view-as-menu a { display:block; padding:6px 10px; border-radius:7px; color:var(--text); text-decoration:none; font-size:14.5px; }
.view-as-menu a:hover { background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); }
.view-as-menu .va-head { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:6px 10px 2px; }

/* -------------------------------------------------- Where We Are, above it all */
.where-strip {
  position:sticky; z-index:9; top:0;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:7px clamp(14px,3vw,26px);
  background:color-mix(in srgb, var(--surface-2) 92%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
  font-size:14px;
}
.ws-label {
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin-right:2px;
}
.where-strip .ws {
  padding:5px 9px; border:1px solid var(--rule); border-radius:8px;
  background:var(--surface); color:var(--text); font:inherit; min-width:0;
}
.where-strip .place { min-width:170px; }
.where-strip .note { min-width:200px; flex:1; }
.where-strip .season, .where-strip .day { width:104px; }
.where-strip .daynum { width:72px; }
@media (max-width:820px) { .where-strip .note { flex-basis:100%; } }

/* ============================================================ the frame */
.framed { --tabs-h:0px; --rail-top:72px; }
.framed .subnav { display:none; }
.framed .layout.has-rail {
  width:min(1380px, calc(100% - clamp(24px,4vw,72px)));
  grid-template-columns:212px minmax(0,1fr) 220px;
  column-gap:clamp(18px,2.4vw,32px);
}
.framed .layout.has-rail > .rail { grid-column:1; }
.framed .layout.has-rail > .content { grid-column:2; min-width:0; }
.framed .layout.has-rail > .aside { grid-column:3; }

.rail {
  position:sticky; top:var(--rail-top); align-self:start;
  max-height:calc(100vh - var(--rail-top) - var(--bar-h) - var(--tabs-h) - 16px); overflow-y:auto;
  padding:18px 4px 12px 0; font-size:14.5px; scrollbar-width:thin;
  border-right:1px solid var(--rule);
}
.rail:empty { display:none; }
.rail ul { list-style:none; margin:0; padding:0; }
.rail li { margin:0; }
.rail-group { margin:0 0 10px; }
.rail-group > summary {
  list-style:none; cursor:pointer; user-select:none;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding:4px 8px 4px 2px; display:flex; align-items:center; gap:6px;
}
.rail-group > summary::-webkit-details-marker { display:none; }
.rail-group > summary::before { content:'▸'; font-size:10px; transition:transform 150ms ease; }
.rail-group[open] > summary::before { transform:rotate(90deg); }
.rail-group > summary:hover { color:var(--accent); }
.rail-row { display:flex; align-items:stretch; padding-left:calc(var(--d, 0) * 13px); }
.rail-row a {
  flex:1; min-width:0; display:block; text-decoration:none; color:var(--text);
  padding:4px 8px 4px 10px; border-left:2px solid transparent; border-radius:0 6px 6px 0; line-height:1.3;
}
.rail-row a:hover { color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.rail li.onpath > .rail-row a { color:var(--accent); }
.rail li.on > .rail-row a {
  color:var(--accent); font-weight:700; border-left-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.rail-row .rail-fold + a { padding-left:2px; }
.rail-fold {
  flex:none; width:18px; margin-left:-4px; font:inherit; font-size:11px; line-height:1;
  color:var(--muted); background:none; border:0; padding:0; cursor:pointer;
}
.rail-fold:hover { color:var(--accent); }

/* a page's domain, beside its tab's name */
.pagehead .crumb[data-domain] { color:var(--muted); }

/* narrower: the page list stays, "On this page" goes, Related drops below */
@media (max-width:1100px) {
  .framed .layout.has-rail { grid-template-columns:196px minmax(0,1fr); }
  .framed .layout.has-rail > .aside {
    grid-column:2; order:1; position:static; max-height:none;
    border-top:1px solid var(--rule); border-bottom:0; padding:12px 0 0;
  }
  .framed .aside .toc { display:none; }
}

/* a phone: tabs along the bottom, pages as a drop-down, no "On this page" */
@media (max-width:720px) {
  .framed { --tabs-h:54px; --bar-h:64px; }
  /* no blur on the header here: a blurred parent would pin the bottom tabs to it */
  .framed .top {
    flex-wrap:nowrap; gap:8px; padding:7px 10px;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:color-mix(in srgb, var(--ground) 97%, transparent);
  }
  .framed .brand-name { font-size:19px; }
  .framed .brand-sub { display:none; }
  .framed .top-right { margin-left:auto; gap:6px; min-width:0; }
  .framed .search { padding:4px 7px; min-width:0; }
  .framed .search input { width:92px; }
  .framed .top-right .pill.door { padding:4px 9px; font-size:12.5px; white-space:nowrap; }
  .view-as-menu { position:fixed; right:10px; top:52px; }
  .framed .tabs {
    position:fixed; left:0; right:0; bottom:var(--bar-h); z-index:24; height:var(--tabs-h);
    order:0; flex-basis:auto; display:grid; grid-template-columns:repeat(var(--tab-count, 6), minmax(0,1fr)); gap:0;
    padding:4px;
    background:color-mix(in srgb, var(--ground) 96%, transparent); border-top:1px solid var(--glass-rule);
    overflow:visible;
  }
  .framed .tabs a {
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-size:12.5px; line-height:1.1; padding:4px 2px; border-radius:10px; min-width:0;
    overflow:hidden; text-overflow:ellipsis;
  }
  .framed .subnav {
    display:flex; position:sticky; top:48px; z-index:19; padding:6px 10px; overflow:visible;
  }
  .rail-pick { display:flex; align-items:center; gap:8px; width:100%; }
  .rail-pick-label { flex:none; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
  .rail-pick select {
    flex:1; min-width:0; font:inherit; font-size:15px; color:var(--text);
    background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:6px 8px;
  }
  .framed .layout.has-rail { grid-template-columns:minmax(0,1fr); width:calc(100% - 20px); }
  .framed .layout.has-rail > .rail { display:none; }
  .framed .layout.has-rail > .content, .framed .layout.has-rail > .aside { grid-column:1; }
  .framed { padding-bottom:calc(var(--bar-h) + var(--tabs-h) + 16px); }
  /* the music bar, smaller so it and the tabs both fit */
  .framed .musicbar { gap:8px; padding:0 8px; }
  .framed .yt { width:96px; height:54px; }
  .framed .controls { gap:5px; }
  .framed .ctl { padding:4px 8px; font-size:13px; }
  .framed .search-results { top:48px; }
  /* Where We Are: one line that scrolls sideways, not a block that fills the screen */
  .framed .where-strip { position:static; flex-wrap:nowrap; overflow-x:auto; padding:6px 10px; scrollbar-width:thin; }
  .framed .where-strip > * { flex:none; }
  .framed .where-strip .note { flex:none; min-width:180px; flex-basis:auto; }
  html:has(body.framed) { scroll-padding-top:100px; }
}

/* a tab with a single page has no list down the left */
.framed .layout:not(.has-rail) > .rail { display:none; }

/* ================================================================ the DM side
   Tabs open a menu of their pages; "On this page" sits on the left; Where We
   Are is a button in the header. */

/* the tabs, each with a little caret, and the menu that drops from one */
.dmside .tabs a { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.dmside .tabs a::after { content:'▾'; font-size:10px; opacity:.6; transition:transform 150ms ease; }
.dmside .tabs a.open { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, transparent); }
.dmside .tabs a.active.open { background:var(--accent); color:var(--on-accent); }
.dmside .tabs a.open::after { transform:rotate(180deg); opacity:1; }

.tab-menu {
  position:absolute; top:calc(100% + 6px); left:var(--tm-left, 16px); z-index:30;
  width:max-content; max-width:min(860px, calc(100vw - 16px));
  max-height:calc(100vh - 80px - var(--bar-h)); overflow-y:auto; scrollbar-width:thin;
  padding:12px 14px 14px;
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  box-shadow:0 22px 50px rgba(0,0,0,.28);
  animation:tm-drop 140ms ease-out both;
}
@keyframes tm-drop { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.tm-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; }
.tm-title { font-family:"Marcellus",serif; font-size:18px; color:var(--accent); }
.tm-close { font:inherit; font-size:13px; line-height:1; color:var(--muted); background:none; border:1px solid var(--rule); border-radius:6px; width:26px; height:26px; cursor:pointer; }
.tm-close:hover { color:var(--accent); border-color:var(--accent); }
.tm-groups { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 22px; }
.tm-group { width:220px; }
.tm-group.tall { width:460px; }
.tm-group.tall > ul { columns:2; column-gap:20px; }
.tm-group h6 {
  margin:4px 0 5px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding-bottom:4px; border-bottom:1px solid var(--rule);
}
.tm-group ul { list-style:none; margin:0; padding:0; }
.tm-group li { margin:0; padding-left:calc(var(--d, 0) * 14px); break-inside:avoid; }
.tm-group a {
  display:block; padding:4px 8px; border-radius:6px; line-height:1.3; font-size:14.5px;
  color:var(--text); text-decoration:none;
}
.tm-group li[style*="--d:1"] a, .tm-group li[style*="--d:2"] a { font-size:14px; color:color-mix(in srgb, var(--text) 82%, var(--muted)); }
.tm-group li[style*="--d:1"] a::before, .tm-group li[style*="--d:2"] a::before { content:'· '; color:var(--muted); }
.tm-group a:hover { background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--accent); }
.tm-group li.onpath > a { color:var(--accent); }
.tm-group li.on > a { color:var(--accent); font-weight:700; background:color-mix(in srgb, var(--accent) 12%, transparent); }

/* "On this page" on the left, where the page list used to be */
.framed.dmside .layout.has-rail > .rail { display:none; }
.framed.dmside .subnav { display:none; }
.framed.dmside .layout.has-rail { width:min(1180px, calc(100% - clamp(24px,4vw,72px))); grid-template-columns:212px minmax(0,1fr); }
.framed.dmside .layout.has-rail > .aside {
  grid-column:1; order:-1; position:sticky; top:var(--rail-top); align-self:start;
  max-height:calc(100vh - var(--rail-top) - var(--bar-h) - 16px); overflow-y:auto; scrollbar-width:thin;
  padding:18px 12px 12px 0; border-right:1px solid var(--rule); border-top:0; border-bottom:0;
}
.framed.dmside .layout.has-rail > .content { grid-column:2; }
.framed.dmside .aside .toc { display:block; }
.framed.dmside .aside:empty { display:none; }
@media (max-width:1100px) {
  .framed.dmside .layout.has-rail { grid-template-columns:190px minmax(0,1fr); }
}

/* Where We Are: a button in the header, and the form it opens */
.where-menu { position:relative; }
.where-menu > summary { list-style:none; cursor:pointer; user-select:none; gap:6px; max-width:280px; }
.where-menu > summary::-webkit-details-marker { display:none; }
.where-menu > summary::after { content:'▾'; font-size:10px; }
.where-menu .wm-pin { width:14px; height:14px; flex:none; }
.where-menu .wm-label { white-space:nowrap; }
.where-menu .wm-now { font-weight:500; letter-spacing:0; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.where-menu .wm-now:not(:empty)::before { content:'· '; }
.where-menu .where-strip {
  position:absolute; right:0; top:calc(100% + 6px); z-index:40; width:360px;
  display:grid; grid-template-columns:1fr; gap:8px; padding:12px;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.25);
  -webkit-backdrop-filter:none; backdrop-filter:none; font-size:14px;
}
.where-menu .where-strip .ws { width:100%; min-width:0; box-sizing:border-box; }
.where-menu .ws-when { display:grid; grid-template-columns:1fr 1fr 64px; gap:6px; }
.where-menu .ws-acts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.where-menu .ws-label { margin:0 0 2px; }

/* narrower screens: the place drops off the button, then the words do */
@media (max-width:1280px) { .where-menu .wm-now { display:none; } }

/* a phone: the menu rises from the tabs along the bottom; On this page goes */
@media (max-width:720px) {
  .tab-menu {
    position:fixed; left:8px; right:8px; top:auto; bottom:calc(var(--bar-h) + var(--tabs-h) + 6px);
    width:auto; max-width:none; max-height:calc(100vh - var(--bar-h) - var(--tabs-h) - 70px);
  }
  .tm-group, .tm-group.tall { width:100%; }
  .tm-group.tall > ul { columns:1; }
  .tm-group a { padding:7px 8px; font-size:15.5px; }
  .dmside .tabs a::after { display:none; }
  .framed.dmside .layout.has-rail { grid-template-columns:minmax(0,1fr); }
  .framed.dmside .layout.has-rail > .aside, .framed.dmside .layout.has-rail > .content { grid-column:1; }
  .framed.dmside .layout.has-rail > .aside { position:static; order:1; max-height:none; border-right:0; border-top:1px solid var(--rule); padding:12px 0 0; }
  .framed.dmside .aside .toc { display:none; }
  .where-menu .wm-label { display:none; }
  .where-menu > summary { padding:4px 8px; }
  .where-menu > summary::after { display:none; }
  .framed.dmside .search input { width:64px; }
  .where-menu .where-strip { position:fixed; right:8px; left:8px; top:52px; width:auto; }
}