/* @version hub-chrome-2026.09.05 */
/* ============================================================
   SHARED DOOR CHROME
   ------------------------------------------------------------
   One sheet, linked by the hub and by all four doors AFTER that
   page's own stylesheets:

       <link rel="stylesheet" href="/ds-chrome.css">

   It styles THREE components and nothing else:

       .ds-bar      the 56px sticky header
       .ds-routes   the four-row routing table (plus .ds-route-note)
       .ds-foot     the footer, nav on the left, stamps on the right

   It names no brand token and no hex. Every value it paints with
   comes from ELEVEN custom properties that each page sets from its
   own tokens, in its own style block:

       --dsc-bg      the ground the component sits on
       --dsc-ink     primary text
       --dsc-muted   secondary text (labels, stamps, folder paths)
       --dsc-rule    hairline colour
       --dsc-accent  hover, current, and the "this one" marker
       --dsc-mono    mono face for every label
       --dsc-body    body face for row text and the note
       --dsc-label   font-size for every uppercase mono label
       --dsc-track   letter-spacing for those labels
       --dsc-max     inner max-width (the element's own max-width)
       --dsc-pad     inner horizontal padding, inside that max-width

   One optional knob on top of the eleven: --dsc-z, the bar's
   z-index, which defaults to 50.

   A routing table or a footer that sits on a different ground than
   the bar re-sets the properties on the component itself, for
   example .ds-routes { --dsc-bg: var(--paper); }.

   Row text and the note deliberately inherit their font-size, so
   each system's own small size governs. A page that wants to pin it
   sets font-size on .ds-routes.
   ============================================================ */

/* ---- 1 - .ds-bar ------------------------------------------ */
/* The cross-document view transition names the bar on every page,
   so the morph is set here once and no page carries its own
   view-transition-name. The navigation opt-in itself
   (@view-transition) stays in each page's style block. */
.ds-bar {
  position: sticky;
  top: 0;
  z-index: var(--dsc-z, 50);
  background: var(--dsc-bg);
  border-bottom: 1px solid var(--dsc-rule);
  view-transition-name: site-nav;
}
.ds-bar-in {
  max-width: var(--dsc-max);
  margin: 0 auto;
  padding: 0 var(--dsc-pad);
  height: 56px;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
}
/* Optional leading control, for example the dashboards rail toggle. */
.ds-bar-lead { flex: none; display: flex; align-items: center; }

.ds-bar-home {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-decoration: none;
}
.ds-bar-home img { height: 28px; width: auto; display: block; flex: none; }
.ds-bar-home span {
  font-family: var(--dsc-mono);
  font-size: var(--dsc-label);
  font-weight: 600;
  letter-spacing: var(--dsc-track);
  text-transform: uppercase;
  color: var(--dsc-muted);
  white-space: nowrap;
}
.ds-bar-home:hover span { color: var(--dsc-ink); }

.ds-bar-sep {
  font-family: var(--dsc-mono);
  font-size: var(--dsc-label);
  color: var(--dsc-rule);
  flex: none;
}
.ds-bar-system {
  font-family: var(--dsc-mono);
  font-size: var(--dsc-label);
  font-weight: 700;
  letter-spacing: var(--dsc-track);
  text-transform: uppercase;
  color: var(--dsc-ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The screens scroll spy keeps writing the section name into
   .appbar-section. On a door that span now sits INSIDE
   .ds-bar-system, after the system name, behind a middot. */
.ds-bar-system .appbar-section {
  font-family: var(--dsc-mono);
  font-size: var(--dsc-label);
  font-weight: 400;
  letter-spacing: var(--dsc-track);
  text-transform: uppercase;
  color: var(--dsc-muted);
}
.ds-bar-system .appbar-section:not(:empty)::before {
  content: "\00B7";
  margin: 0 0.55em;
  color: var(--dsc-rule);
}

.ds-bar-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.7vw, 24px);
}
.ds-bar-nav a {
  font-family: var(--dsc-mono);
  font-size: var(--dsc-label);
  font-weight: 600;
  letter-spacing: var(--dsc-track);
  text-transform: uppercase;
  color: var(--dsc-muted);
  text-decoration: none;
  white-space: nowrap;
  /* the underline is always there, transparent at rest, so lighting
     a link never moves the row */
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color 150ms ease, border-color 150ms ease;
}
.ds-bar-nav a:hover,
.ds-bar-nav a:focus-visible,
.ds-bar-nav a.on {
  color: var(--dsc-accent);
  border-bottom-color: var(--dsc-accent);
}

/* ---- 2 - .ds-routes --------------------------------------- */
/* The one routing table. Four canon rows, fixed text, never
   renumbered. .is-this marks the row for the page you are on; the
   hub carries no .is-this because the hub is all four. */
.ds-routes {
  max-width: 900px;
  border: 1px solid var(--dsc-rule);
  background: var(--dsc-bg);
}
.ds-routes-head,
.ds-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 170px;
  gap: 14px;
  align-items: baseline;
  padding: 13px 18px;
  border-top: 1px solid var(--dsc-rule);
  border-left: 3px solid transparent;
}
.ds-routes-head:first-child,
.ds-route:first-child { border-top: 0; }

.ds-routes-head {
  font-family: var(--dsc-mono);
  font-size: var(--dsc-label);
  font-weight: 600;
  letter-spacing: var(--dsc-track);
  text-transform: uppercase;
  color: var(--dsc-muted);
}

.ds-route {
  text-decoration: none;
  font-family: var(--dsc-body);
  color: var(--dsc-ink);
  line-height: 1.45;
  transition: background-color 150ms ease;
}
.ds-route b {
  font-family: var(--dsc-mono);
  font-weight: 700;
  letter-spacing: var(--dsc-track);
  text-transform: uppercase;
  color: var(--dsc-ink);
  transition: color 150ms ease;
}
.ds-route code {
  font-family: var(--dsc-mono);
  color: var(--dsc-muted);
  overflow-wrap: anywhere;
}
.ds-route:hover b,
.ds-route:focus-visible b { color: var(--dsc-accent); }
.ds-route:focus-visible { outline: 2px solid var(--dsc-accent); outline-offset: -2px; }

.ds-route.is-this { border-left-color: var(--dsc-accent); }
.ds-route.is-this b { color: var(--dsc-accent); }
.ds-route.is-this b::after {
  content: ", this one";
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* The one line that settles Print against Documents, which is the
   only pair in the table a builder can genuinely mistake. */
.ds-route-note {
  font-family: var(--dsc-body);
  color: var(--dsc-muted);
  max-width: 70ch;
  line-height: 1.5;
  margin: 12px 0 0;
}

/* ---- 3 - .ds-foot ----------------------------------------- */
.ds-foot {
  background: var(--dsc-bg);
  border-top: 1px solid var(--dsc-rule);
  padding-block: 34px;
}
.ds-foot-in {
  max-width: var(--dsc-max);
  margin: 0 auto;
  padding: 0 var(--dsc-pad);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 18px;
}
.ds-foot-nav,
.ds-foot-stamps {
  font-family: var(--dsc-mono);
  font-size: var(--dsc-label);
  letter-spacing: var(--dsc-track);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
}
.ds-foot-nav a {
  color: var(--dsc-ink);
  text-decoration: none;
  transition: color 150ms ease;
}
.ds-foot-nav a:hover,
.ds-foot-nav a:focus-visible,
.ds-foot-nav a[aria-current] { color: var(--dsc-accent); }
.ds-foot-stamps span { color: var(--dsc-muted); }

/* ---- 4 - under 720px -------------------------------------- */
@media (max-width: 720px) {
  /* the screens law: the bar keeps the identity and drops the nav */
  .ds-bar-nav { display: none; }
  /* three columns become three stacked cells, so the column key
     above them has nothing left to label and drops out with them */
  .ds-routes-head { display: none; }
  .ds-route {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .ds-foot-in {
    flex-direction: column;
    align-items: flex-start;
  }
}