/* THE MAP — how you find your way around a campus.
 *
 * Fred, 1 Sep 2026: "This is going to be a large and complicated website, and we have
 * to make navigation as simple and easy as possible... an interactive sidebar. It
 * opens when you hover over it and treats each room as something of a chapter, with an
 * intuitive title and short description, with a hot link that brings you to it. And
 * possibly like a table of contents — when each chapter heading opens, it provides the
 * subheadings... I don't know how doable that is... We have to do something."
 *
 * WHAT THE RECORD ALREADY SETTLED, AND WHERE IT ARGUES WITH THE SIDEBAR IDEA
 *
 * Fred, 24 April 2026: "Above, is not the room for expansion, that would be the bean
 * counter failed logic. HORIZONTALLY, with beautiful bridges with comfortable, open
 * meeting spaces with great water coolers and coffee machines to facilitate
 * communication."
 *
 * And the rule that came out of it: "Beside, not above. Between, not within. Walking,
 * not ascending."
 *
 * A table of contents is a ranked tree — chapter over section over subsection. That is
 * thinking in floors, which is the exact thing the campus metaphor exists to refuse.
 * And separately: "Not a tree. Not a funnel. Not a menu."
 *
 * So this takes everything Fred asked for and drops the one part that fights the
 * scheme:
 *
 *   KEPT  · opens on hover, stays out of the way otherwise
 *   KEPT  · every place has an intuitive title AND a short description, because a
 *           bare label is the "fucking listing" that got the first attempt rejected
 *   KEPT  · a place expands to show what is inside it
 *   KEPT  · one click takes you there
 *   DROPPED · rank. Everything sits at one level. Expanding a place shows what is
 *           inside that place, not a floor beneath it.
 *   ADDED · where you are now, at the top, with the current page's own sections —
 *           because on a large site "where am I" is asked more often than "what else
 *           is there".
 *
 * And the hard rule it must not break: "A normal link sends you to a new page and
 * abandons you there." Nothing here navigates. Everything opens in place, over the
 * campus, and closing returns the reader exactly where they were.
 */

/* The panel is positioned, NOT laid out in flow. It was a flex child, and a flex
   child still occupies its width when it is translated off-screen — so the tab sat
   21rem in from the edge, on top of the reading column, covering the very sentences
   it was meant to help someone find. */
#map{
  position:fixed;left:0;top:0;bottom:0;width:0;z-index:70;
  font:400 17px/1.55 Georgia,'Iowan Old Style','Palatino Linotype',serif;
  pointer-events:none;                 /* only the tab and panel are live */
}

/* The tab. Always present, never loud. Vertical so it costs almost no width. */
.map-tab{
  pointer-events:auto;
  position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  white-space:nowrap;height:max-content;
  font:inherit;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass-deep,#8A6222);
  background:var(--paper-raised,#FBFAF5);
  border:1px solid var(--edge,#ded5c4);border-left:0;
  border-radius:0 4px 4px 0;
  padding:1.1rem .42rem;cursor:pointer;
  box-shadow:2px 0 10px rgba(24,33,59,.06);
}
.map-tab:hover,.map-tab:focus-visible{color:var(--ink,#18213B);border-color:var(--brass,#B8863B)}

/* Below this width the reading column reaches the edge and a mid-height tab clips
   it. Dock the tab in the bottom-left corner instead — opposite the note button, out
   of the reading path, and where a thumb can reach it on a phone. */
@media(max-width:62rem){
  .map-tab{
    top:auto;bottom:1.1rem;transform:none;
    writing-mode:horizontal-tb;
    /* #map is zero-width so an absolutely positioned child shrink-to-fits against
       nothing and breaks after every word. It rendered as three stacked lines. */
    white-space:nowrap;width:max-content;
    border-radius:0 999px 999px 0;
    padding:.5rem .95rem .5rem .7rem;
  }
}

.map-panel{
  pointer-events:auto;
  position:absolute;left:0;top:0;bottom:0;
  width:min(21rem,86vw);
  background:var(--paper-raised,#FBFAF5);
  border-right:1px solid var(--edge,#ded5c4);
  box-shadow:6px 0 32px rgba(24,33,59,.14);
  overflow-y:auto;
  padding:1.3rem 1.25rem 2rem;
  transform:translateX(-102%);
  transition:transform .18s ease;
}
#map.open .map-panel{transform:none}
/* THE TAB MUST NOT DISAPPEAR WHEN THE PANEL IS OPEN.
 * Fred, 1 Sep 2026: "this doesn't collapse on command... both can become intrusive."
 * It was hidden with opacity:0 and pointer-events:none the moment the panel opened —
 * which removed the one control a reader would reach for to shut it, leaving only a
 * button at the bottom of a scrolling panel and the Escape key. A thing that opens
 * itself and cannot be shut is not a convenience.
 * So it stays, moves to the panel's edge, and becomes the close handle. */
#map.open .map-tab{left:min(21rem,86vw)}

/* An X at the top as well, because the reader who wants this gone should not have to
 * work out that the tab is now a close button. */
.map-x{
  position:absolute;top:.75rem;right:.8rem;
  font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;
  color:var(--say-soft,#5c6274);background:none;border:0;
  padding:.15rem .35rem;border-radius:3px;
}
.map-x:hover,.map-x:focus-visible{color:var(--ink,#18213B);background:var(--paper,#F2EFE6)}
@media (forced-colors: active){ .map-x{border:2px solid ButtonBorder;color:ButtonText} }
@media(prefers-reduced-motion:reduce){.map-panel{transition:none}}

.map-panel h2{
  margin:0 0 .2rem;font-size:1.05rem;font-weight:400;color:var(--navy,#1F3864);
}
/* The widen control. Sits under the title because it changes what the whole panel is
   about, not what one entry does. */
.map-wide{
  display:block;margin:.45rem 0 0;
  font:inherit;font-size:.82rem;cursor:pointer;
  color:var(--brass-deep,#8A6222);background:none;border:0;padding:.1rem 0;
  border-bottom:1px dotted var(--brass,#B8863B);
}
.map-wide:hover,.map-wide:focus-visible{color:var(--ink,#18213B)}
@media (forced-colors: active){ .map-wide{color:LinkText;text-decoration:underline;border-bottom:0} }

.map-lead{
  margin:0 0 1.2rem;font-size:.87rem;line-height:1.5;color:var(--soft,#5c6274);
  padding-bottom:.9rem;border-bottom:1px solid var(--edge,#ded5c4);
}
.map-group{
  margin:1.3rem 0 .55rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-deep,#8A6222);
}
.map-group:first-of-type{margin-top:0}

.map-item{border-left:2px solid var(--edge,#ded5c4);padding-left:.8rem;margin:0 0 .85rem}
.map-item:hover,.map-item.here{border-left-color:var(--brass,#B8863B)}
.map-go{
  display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:none;border:0;padding:0;color:var(--navy,#1F3864);font-size:1rem;
  line-height:1.3;
}
.map-go:hover{color:var(--brass-deep,#8A6222)}
.map-desc{margin:.2rem 0 0;font-size:.85rem;line-height:1.45;color:var(--soft,#5c6274)}
.map-soon{
  display:inline-block;margin-left:.4rem;vertical-align:.1em;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-deep,#8A6222);border:1px solid var(--edge,#ded5c4);
  border-radius:2px;padding:.05rem .3rem;
}

/* "When each chapter heading opens, it provides the subheadings" — Fred's words. The
 * one change: what opens is what is INSIDE that place, at the same level, not a rank
 * beneath it. Hover locates, click opens: the same contract as depth everywhere else. */
.map-more{
  font:inherit;font-size:.78rem;cursor:pointer;margin:.3rem 0 0;
  background:none;border:0;padding:0;color:var(--soft,#5c6274);
  border-bottom:1px dotted var(--edge,#ded5c4);
}
.map-item:hover .map-more{color:var(--brass-deep,#8A6222);border-bottom-color:var(--brass,#B8863B)}
.map-sections{display:none;margin:.5rem 0 0;padding:0;list-style:none}
.map-sections.on{display:block}
.map-sections li{margin:0 0 .3rem}
.map-sec{
  font:inherit;font-size:.86rem;text-align:left;cursor:pointer;
  background:none;border:0;padding:0;color:var(--soft,#5c6274);
}
.map-sec:hover{color:var(--ink,#18213B)}
.map-sec::before{content:"\2022";margin-right:.45rem;color:var(--brass,#B8863B)}

.map-here-note{margin:.35rem 0 0;font-size:.78rem;color:var(--brass-deep,#8A6222)}
.map-close{
  margin:1.6rem 0 0;font:inherit;font-size:.86rem;cursor:pointer;
  background:none;border:0;padding:0;color:var(--brass-deep,#8A6222);
  border-bottom:1px dotted var(--brass,#B8863B);
}

@media (forced-colors: active){
  .map-tab{border:2px solid ButtonBorder;background:ButtonFace;color:LinkText;
           text-decoration:underline;box-shadow:none}
  .map-panel{border-right:3px solid CanvasText;background:Canvas;box-shadow:none}
  .map-item{border-left:3px solid CanvasText}
  .map-go,.map-sec,.map-more,.map-close{color:LinkText;text-decoration:underline}
  .map-desc,.map-lead{color:CanvasText}
  .map-soon{border:1px solid CanvasText;color:CanvasText}
}
@media print{#map{display:none!important}}

/* THE GUIDE — the ask box, and the correction that matters more than the guess.
 *
 * Fred, 1 Sep 2026: "...allowing them, once they're there, to just say thanks, but
 * this isn't it, what I really meant was — and have it move to the next most
 * appropriate heading."
 *
 * So "Not it" is not a dismissal control tucked in a corner. It sits beside the
 * accept, at the same weight, because a guide that looks confident is a guide nobody
 * corrects — and "we don't know where the meandering mind is going" is the whole
 * premise. */
.ask{
  margin:0 0 1.3rem;padding:0 0 1.1rem;
  border-bottom:1px solid var(--edge,#ded5c4);
}
.ask-q{
  display:block;font-size:.86rem;line-height:1.45;
  color:var(--soft,#5c6274);margin:0 0 .45rem;
}
#ask-in{
  width:100%;font:inherit;font-size:.95rem;
  padding:.5rem .65rem;border-radius:4px;
  color:var(--ink,#18213B);background:var(--paper,#F2EFE6);
  border:1px solid var(--edge,#ded5c4);
}
#ask-in:focus{
  outline:none;border-color:var(--brass,#B8863B);
  box-shadow:0 0 0 3px rgba(184,134,59,.18);
}
.ask-out{margin:.85rem 0 0}
.ask-out[hidden]{display:none}
.ask-lead{margin:0 0 .2rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep,#8A6222)}
.ask-hit{margin:0;font-size:1rem;line-height:1.3;color:var(--navy,#1F3864)}
.ask-hit b{font-weight:normal}
.ask-sec{display:block;font-size:.88rem;color:var(--soft,#5c6274);margin-top:.1rem}
.ask-desc{margin:.25rem 0 0;font-size:.84rem;line-height:1.45;color:var(--soft,#5c6274)}
.ask-acts{display:flex;flex-wrap:wrap;gap:.45rem;margin:.7rem 0 0}
.ask-acts button{
  font:inherit;font-size:.85rem;cursor:pointer;
  padding:.4rem .7rem;border-radius:4px;
  border:1px solid var(--edge,#ded5c4);
  background:var(--paper,#F2EFE6);color:var(--ink,#18213B);
}
.ask-acts button:hover{border-color:var(--brass,#B8863B)}
.ask-yes{background:var(--navy,#1F3864)!important;color:var(--paper-raised,#FBFAF5)!important;border-color:var(--navy,#1F3864)!important}
:root[data-theme="dark"] .ask-yes{color:#171410!important}
.ask-none{margin:0;font-size:.86rem;line-height:1.5;color:var(--soft,#5c6274)}
.ask-none b{color:var(--ink,#18213B);font-weight:normal}

@media (forced-colors: active){
  #ask-in{border:2px solid CanvasText}
  .ask-q,.ask-desc,.ask-none{color:CanvasText}
  .ask-acts button{border:2px solid ButtonBorder;background:ButtonFace;color:ButtonText}
  .ask-yes{border:3px solid Highlight!important;background:Highlight!important;color:HighlightText!important}
}

/* THE TIER 1 BAND. Added 4 Sep 2026.
   Fred, 30 Sep 2025: "If there is any question, get to the E.R. Key question: which
   mistake do you want to make?" So it is loud, it is first, and it is never behind a
   control. Bordered and bold as well as coloured, so it survives greyscale, a
   colour-blind reader and a printed page - red raises the volume, it does not carry
   the meaning on its own. */
.ask-urgent{border:2px solid #a01722;border-left-width:6px;background:#fdf6f6;
  color:#1a1a1a;border-radius:3px;padding:.7rem .85rem;margin:0 0 .8rem;
  font-size:.95rem;line-height:1.5}
.ask-urgent b{color:#a01722}
.ask-ladder{display:inline-block;margin-top:.5rem;font:inherit;font-size:.9em;
  background:none;border:1px solid #a01722;color:#a01722;border-radius:2px;
  padding:.2rem .55rem;cursor:pointer}
.ask-ladder:hover,.ask-ladder:focus-visible{background:#a01722;color:#fff}
@media (prefers-color-scheme: dark){
  .ask-urgent{background:#241416;border-color:#e8737f;color:#eae6dd}
  .ask-urgent b,.ask-ladder{color:#e8737f;border-color:#e8737f}
  .ask-ladder:hover,.ask-ladder:focus-visible{background:#e8737f;color:#241416}
}
@media (forced-colors: active){
  .ask-urgent{border-color:CanvasText;color:CanvasText}
  .ask-urgent b{color:CanvasText}
}

/* WHERE A MISS GOES. Added 4 Sep 2026. Three destinations, never a wall of links -
   a wall at three in the morning is another way of saying "work it out yourself". */
.ask-elsewhere{margin:.5rem 0 .7rem;padding-left:1.1rem;font-size:.93rem;line-height:1.5}
.ask-elsewhere li{margin:.4rem 0}

/* AIMING THE MISS. Added 4 Sep 2026. Her sentence is shown back unchanged - "structure,
   not skew or edit" - and only the aim is negotiated. Quiet styling on purpose: this is
   a question being asked, not a menu being sold. */
.ask-aim{margin:.9rem 0 .2rem;padding:.75rem .9rem;border:1px solid var(--edge,#dfe3e8);
  border-radius:4px;background:rgba(31,78,107,.035)}
.ask-aim-q{margin:0 0 .35rem;font-size:.95rem}
.ask-aim-l{margin:0 0 .55rem;font-size:.9rem;line-height:1.5;opacity:.85}
.ask-aim ul{list-style:none;margin:0;padding:0}
.ask-aim li{margin:.3rem 0}
.ask-aim-b{display:block;width:100%;text-align:left;font:inherit;font-size:.93rem;
  background:none;border:1px solid var(--edge,#dfe3e8);border-radius:3px;
  padding:.42rem .6rem;cursor:pointer;color:inherit}
.ask-aim-b:hover,.ask-aim-b:focus-visible{border-color:#1f4e6b;background:rgba(31,78,107,.07)}
@media (prefers-color-scheme: dark){
  .ask-aim{background:rgba(142,196,228,.05);border-color:#333a42}
  .ask-aim-b{border-color:#333a42}
  .ask-aim-b:hover,.ask-aim-b:focus-visible{border-color:#8ec4e4;background:rgba(142,196,228,.1)}
}

/* THE NAMING PASS. Added 4 Sep 2026. Quiet, and clearly a suggestion rather than a
   verdict - the textarea is editable because the sentence is hers, not ours. */
.ask-name{margin:.9rem 0;padding:.75rem .9rem;border:1px solid #c5b58a;
  border-left:4px solid #b8863b;border-radius:4px;background:rgba(184,134,59,.05)}
.ask-name-h{margin:0 0 .35rem;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:#8a6222;font-weight:600}
.ask-name-b{margin:.4rem 0;font-size:.92rem;line-height:1.55}
.ask-name-q{width:100%;font:inherit;font-size:.92rem;line-height:1.5;padding:.5rem .6rem;
  border:1px solid #c5b58a;border-radius:3px;background:#fff;color:#1a1d21;resize:vertical}
.ask-name-ok{font:inherit;font-size:.92rem;background:#1f4e6b;color:#fff;border:0;
  border-radius:3px;padding:.4rem .8rem;cursor:pointer}
.ask-name-ok[disabled]{background:#7d8794;cursor:default}
.ask-name-f{margin:.6rem 0 0;font-size:.9rem;line-height:1.5}
@media (prefers-color-scheme: dark){
  .ask-name{background:rgba(184,134,59,.09);border-color:#6d5c2e;border-left-color:#c99a4a}
  .ask-name-h{color:#d8ae63}
  .ask-name-q{background:#1c2026;color:#eae6dd;border-color:#6d5c2e}
  .ask-name-ok{background:#8ec4e4;color:#15181c}
}