/* Final blog mockup: panel-style shell (owner S1). Port of dash-mockup-v3-ref/mockup.css (dock, rail, bottom bar, More sheet, topbar).
   Kit tokens only. Logical properties only. jp-app colours (canvas, dock, topbar) on the frame; text keeps the editorial colours. */

[hidden] { display: none !important; }
:root { --sb-w: 15rem; --sb-w-min: 4.5rem; --sb-t: calc(var(--jp-motion-duration-medium) * 1.1); --pad-x: var(--jp-size-space-800); --bar-h: 0px; }
html { min-block-size: 100%; scroll-padding-block: calc(var(--top-h, 4.5rem) + var(--jp-size-space-200)) calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + var(--jp-size-space-200)); } /* keyboard focus never lands under the sticky topbar or the phone bar */
body { background: transparent; }
a { text-decoration: none; }

/* ===== App frame: dock | main ===== */
.app { display: grid; grid-template-columns: auto minmax(0, 1fr); min-block-size: 100dvh; background: var(--jp-app-canvas); --rw: var(--sb-w-min); }
.app[data-sb="open"] { --rw: var(--sb-w); }
.side-slot { position: sticky; inset-block-start: 0; z-index: 6; align-self: start; block-size: 100dvh; inline-size: calc(var(--sb-w-min) + var(--jp-size-space-200)); }
.dock { position: absolute; inset-block: var(--jp-size-space-200); inset-inline-start: var(--jp-size-space-200); z-index: 6; inline-size: var(--rw); overflow: hidden; border-radius: var(--jp-size-radius-400); background: var(--jp-bg); box-shadow: inset 0 0 0 100vmax var(--jp-app-card); color: var(--jp-tx); transition: inline-size var(--sb-t) var(--jp-motion-ease-out), box-shadow var(--sb-t) var(--jp-motion-ease-out); }
.dock::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line); }
.app[data-sb="open"] .dock { box-shadow: var(--jp-effects-shadows-drop-shadow-400), inset 0 0 0 100vmax var(--jp-app-card); }
.side { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 2; inline-size: var(--rw); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--jp-size-space-200); padding: var(--jp-size-space-300); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; min-block-size: 0; transition: inline-size var(--sb-t) var(--jp-motion-ease-out); }
.side::-webkit-scrollbar { display: none; }
.sb-top { display: grid; gap: var(--jp-size-space-100); }
.sb-brand, .tb-brand { --m: var(--jp-size-icon-medium); padding-inline: var(--jp-size-space-200); overflow: hidden; }
.sb-brand .blog-name, .tb-brand .blog-name { margin-inline-start: var(--jp-size-space-100); color: var(--jp-tx2); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/1 var(--jp-font-ui); white-space: nowrap; }
.sb-brand .jp-brand-name { font-size: var(--jp-typography-scale-01); }
.sb-nav, .sb-bot, .sb-ser { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jp-size-space-100); align-content: start; }
.sb-nav { flex: 1; }
.sb-bot { padding-block-start: var(--jp-size-space-200); }

.sb-item { position: relative; display: flex; align-items: center; gap: var(--jp-size-space-300); inline-size: 100%; min-block-size: var(--jp-size-control-medium); padding-inline: var(--jp-size-space-300); border: 0; border-radius: var(--jp-size-radius-200); background: none; color: var(--jp-tx2); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/var(--jp-lh-label-x) var(--jp-font-ui); text-align: start; white-space: nowrap; overflow: hidden; cursor: pointer; box-sizing: border-box; transition: background-color var(--jp-t-hover), color var(--jp-t-hover), box-shadow var(--jp-t-hover); }
.sb-item > .jp-ic { flex: none; box-sizing: border-box; padding: var(--jp-size-space-100); inline-size: var(--jp-size-icon-small); block-size: var(--jp-size-icon-small); color: currentColor; }
@media (hover: hover) { .sb-item:hover { color: var(--jp-tx); background: var(--jp-app-card-h); } }
.sb-item:active { background: var(--jp-app-card-a); }
.sb-item:focus-visible, .bar-i:focus-visible, .sb-brand:focus-visible, .tb-brand:focus-visible { outline: var(--jp-size-stroke-focus-ring) solid var(--jp-ring); outline-offset: var(--jp-size-stroke-focus-offset); }
.sb-item[aria-current] { color: var(--jp-tx); background: var(--jp-color-background-default-raised); box-shadow: var(--jp-effects-shadows-drop-shadow-200), 0 0 0 var(--jp-size-stroke-border) var(--jp-line); }
.sb-l { display: inline-block; flex: none; }
.sb-acct { margin-block-start: var(--jp-size-space-100); }

/* series: collapsed = its icon; expanded = icon, name, count */
.sb-n { margin-inline-start: auto; flex: none; font: var(--jp-typography-weight-ui) var(--jp-typography-scale-01)/1 var(--jp-font-ui); font-variant-numeric: tabular-nums; }

/* section headings: text when open, a short rule when collapsed */
.sb-h { position: relative; margin: 0; block-size: var(--jp-size-space-600); display: flex; align-items: center; padding-inline: var(--jp-size-space-300); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-01)/1 var(--jp-font-ui); color: var(--jp-tx2); white-space: nowrap; }
.sb-h::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; border-block-start: var(--jp-size-stroke-border) solid var(--jp-color-border-default-secondary); opacity: 0; transition: opacity var(--jp-t-hover); }
.sb-nav > .sb-h:first-child::after { display: none; }
.sb-nav > .sb-h:not(:first-child) { margin-block-start: var(--jp-size-space-300); }
.sb-nav > .sb-h:not(:first-child)::after { inset-block-start: calc(50% - var(--jp-size-space-300) / 2); }
.sb-l, .sb-n, .jp-brand-name, .blog-name, .sb-h > span { opacity: 1; transition: opacity var(--jp-motion-duration-medium) var(--jp-motion-ease-out) calc(var(--sb-t) * .5); }
@media (min-width: 641px) {
  .app:not([data-sb="open"]) :is(.sb-l, .sb-n, .jp-brand-name, .blog-name, .sb-h > span) { opacity: 0; transition-delay: 0s; transition-duration: var(--jp-motion-duration-short); }
  .app:not([data-sb="open"]) .sb-h::after { opacity: 1; transition-delay: calc(var(--sb-t) * .5); }
}
.sb-theme, .tb-brand { display: none; }

/* ===== Main + topbar ===== */
.main { container: main / inline-size; min-inline-size: 0; display: flex; flex-direction: column; min-block-size: 100dvh; }
.main > main { flex: 1; outline: 0; }
/* Reading sheet (D-020 + link contrast): main and footer sit on Bone (--jp-bg); canvas, dock and topbar keep jp-app colours. Dark: --jp-bg is the canvas, so only the hairline shows. */
.main > main, .main > .jp-foot { background: var(--jp-bg); margin-inline-end: var(--jp-size-space-200); border: var(--jp-size-stroke-border) solid var(--jp-line); border-block: 0; }
.main > .jp-foot { margin-block-end: var(--jp-size-space-200); border-block-end: var(--jp-size-stroke-border) solid var(--jp-line); border-end-start-radius: var(--jp-size-radius-400); border-end-end-radius: var(--jp-size-radius-400); }
.view { padding-block: var(--jp-size-space-800) var(--jp-size-space-1600); padding-inline: var(--pad-x); }
.topbar { position: sticky; inset-block-start: 0; z-index: 3; display: flex; align-items: center; gap: var(--jp-size-space-400); min-block-size: calc(var(--jp-size-icon-large) + var(--jp-size-space-600)); padding: var(--jp-size-space-300) var(--pad-x); background: var(--jp-bg); box-shadow: inset 0 0 0 100vmax var(--jp-app-canvas); border-block-end: var(--jp-size-stroke-border) solid var(--jp-line); }
.mk-top-t { display: flex; align-items: center; gap: var(--jp-size-space-300); min-inline-size: 0; margin: 0; font: var(--jp-typography-weight-ui) var(--jp-typography-scale-03)/var(--jp-lh-label-x) var(--jp-font-ui); }
.mk-top-t > span, .mk-top-t > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-top-t .jp-ic { flex: none; color: var(--jp-color-icon-default-secondary); }
.mk-top-t a { color: var(--jp-tx); }
.crumb > a { display: inline-flex; align-items: center; min-block-size: var(--jp-size-control-small); }
.crumb > span[aria-hidden] { color: var(--jp-tx2); }
.tb-no { color: var(--jp-tx2); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/1 var(--jp-font-ui); font-variant-numeric: tabular-nums; }
.mk-search { position: relative; flex: 1; max-inline-size: 26rem; min-inline-size: 0; margin-inline-start: auto; }
.mk-search .jp-input { inline-size: 100%; padding-inline: var(--jp-size-space-1200) var(--jp-size-space-1600); }
.mk-search > .jp-ic { position: absolute; inset-inline-start: var(--jp-size-space-300); inset-block-start: 50%; translate: 0 -50%; color: var(--jp-color-icon-default-secondary); pointer-events: none; z-index: 1; }
.mk-search kbd { position: absolute; inset-inline-end: var(--jp-size-space-300); inset-block-start: 50%; translate: 0 -50%; pointer-events: none; font: var(--jp-typography-weight-ui) var(--jp-typography-scale-01)/1 var(--jp-font-ui); color: var(--jp-tx2); }
@media (hover: none) { .mk-search kbd { display: none; } }

/* footer: inside main, aligned with the content */
.main > .jp-foot { padding-inline: max(var(--pad-x), calc((100% - 112rem) / 2)); margin-block-start: 0; padding-block-end: var(--jp-size-space-600); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jp-size-space-300) var(--jp-size-space-600); }
.foot-row > p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--jp-size-space-100) var(--jp-size-space-600); }
.foot-links a { display: inline-flex; align-items: center; min-block-size: var(--jp-size-control-small); min-inline-size: var(--jp-size-control-small); }

/* ===== Phone: dock hidden, bottom bar of 4, More sheet (the same aside) ===== */
.bar { display: none; }
@media (max-width: 640px) {
  :root { --pad-x: var(--jp-page-margin-l); --bar-h: 3rem; } /* 3rem = the bar before shell.js measures it */
  .app { grid-template-columns: minmax(0, 1fr); padding-block-end: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
  .main { min-block-size: calc(100dvh - var(--bar-h) - env(safe-area-inset-bottom, 0px)); } /* D1: padding sat inside 100dvh, so short pages scrolled by the bar height */
  .side-slot, .dock { display: contents; }
  .view { padding-block: var(--jp-size-space-400) var(--jp-size-space-800); padding-inline: var(--jp-page-margin-l) var(--jp-page-margin-r); }
  .topbar { flex-wrap: wrap; gap: var(--jp-size-space-100) var(--jp-size-space-200); padding-block: var(--jp-size-space-100); min-block-size: 0; padding-inline: var(--jp-page-margin-l) var(--jp-page-margin-r); }
  .tb-brand { display: flex; align-items: center; min-block-size: var(--jp-size-control-medium); }
  .mk-top-t { display: none; }
  .mk-search { flex: 1 1 100%; max-inline-size: none; }
  .main > main, .main > .jp-foot { margin-inline: 0; border-inline: 0; border-radius: 0; }
  .main > .jp-foot { margin-block-end: 0; border-block-end: 0; padding-inline: var(--jp-page-margin-l) var(--jp-page-margin-r); }
  .side { position: fixed; inset-block: auto calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); inset-inline: 0; z-index: 5; display: none; inline-size: auto; max-block-size: 70dvh; border-radius: var(--jp-size-radius-400) var(--jp-size-radius-400) 0 0; background: var(--jp-bg); box-shadow: inset 0 0 0 100vmax var(--jp-app-card); border-block-start: var(--jp-size-stroke-border) solid var(--jp-line); padding-inline: max(var(--jp-size-space-300), var(--jp-page-margin-l)) max(var(--jp-size-space-300), var(--jp-page-margin-r)); }
  .app[data-more] .side { display: flex; }
  .side .sb-top, .side .sb-pri, .side .sb-cycle { display: none; }
  .sb-nav > .sb-h:first-child { display: none; } /* "Read" is on the bar; its items are hidden here */
  .sb-nav > .sb-h:not(:first-child) { margin-block-start: 0; }
  .side .sb-bot { padding-block-start: var(--jp-size-space-200); border-block-start: var(--jp-size-stroke-border) solid var(--jp-line); }
  .sb-theme { display: flex; align-items: center; justify-content: space-between; gap: var(--jp-size-space-300); padding-inline: var(--jp-size-space-300); }
  .sb-theme-l { color: var(--jp-tx2); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/var(--jp-lh-label-x) var(--jp-font-ui); }
  .bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block-end: env(safe-area-inset-bottom, 0px); background: var(--jp-bg); box-shadow: inset 0 0 0 100vmax var(--jp-app-canvas); border-block-start: var(--jp-size-stroke-border) solid var(--jp-line); }
  .bar-i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--jp-size-space-100); min-block-size: var(--jp-size-control-medium); padding-block: var(--jp-size-space-200); border: 0; border-radius: var(--jp-size-radius-200); background: none; color: var(--jp-tx2); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-01)/1 var(--jp-font-ui); cursor: pointer; transition: background-color var(--jp-t-hover), color var(--jp-t-hover); }
  .bar-i .jp-ic { inline-size: var(--jp-size-glyph-medium); block-size: var(--jp-size-glyph-medium); }
  .bar-i[aria-current], .bar-i[aria-expanded="true"] { color: var(--jp-tx); background: var(--jp-color-background-default-raised); box-shadow: var(--jp-effects-shadows-drop-shadow-200); }
  .app[data-more] .bar-i[aria-current]:not([aria-expanded]) { background: none; box-shadow: none; color: var(--jp-tx2); }
}
/* D-021: Falu is the icon of the current navigation item only (never label or tile). The kit rule reaches jp-pill; the dock and bar items are custom. Forced colours keep system colours. */
@media (forced-colors: none) {
  .sb-item[aria-current] > .jp-ic, .bar-i[aria-current] .jp-ic { color: var(--jp-color-icon-accent-default); }
  .app[data-more] .bar-i[aria-current]:not([aria-expanded]) .jp-ic { color: inherit; } /* de-selected while the More sheet is open */
}
/* Blog-level request (not kit 3.1.0, which keeps the label in the text colour): on hover or keyboard focus a nav item's label and icon take the accent.
   Dark gate: label text needs 4.5:1, so --nav-hv (hover, and focus on a raised tile or hover tile) exists in light only; dark measured 4.19:1 on the hover tile and 3.05:1 on the raised tile. */
:root { --nav-hv: var(--jp-color-icon-accent-default); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-hv: initial; } }
:root[data-theme="dark"] { --nav-hv: initial; }
@media (forced-colors: none) {
  .sb-item:not([aria-current]):focus-visible, .bar-i:not([aria-current], [aria-expanded="true"]):focus-visible { color: var(--jp-color-icon-accent-default); }
  .sb-item[aria-current]:focus-visible, .bar-i[aria-current]:focus-visible, .bar-i[aria-expanded="true"]:focus-visible { color: var(--nav-hv, var(--jp-tx)); }
}
@media (hover: hover) and (forced-colors: none) {
  .sb-item:hover { color: var(--nav-hv, var(--jp-tx)); }
  .bar-i:not([aria-current], [aria-expanded="true"]):hover { color: var(--jp-color-icon-accent-default); }
  .bar-i[aria-current]:hover, .bar-i[aria-expanded="true"]:hover { color: var(--nav-hv, var(--jp-tx)); }
}
@media (prefers-reduced-motion: reduce) { .side, .side-slot, .dock, .sb-l, .sb-n, .jp-brand-name, .blog-name, .sb-h > span, .sb-h::after { transition: none !important; } }

/* 404 (error-404.hbs): the lockup is content here, centred in the main area, never mirrored */
.view:has(> .gate-nf) { display: grid; align-content: center; }
.gate-nf { padding-block: 0; gap: var(--jp-size-space-400); }
.gate-nf-logo { --m: 72px; margin-block-end: var(--jp-size-space-400); }
.app:not([data-sb="open"]) .gate-nf-logo :is(.jp-brand-name, .blog-name) { opacity: 1; } /* the dock rules above fade these classes when collapsed */
.gate-nf-logo .blog-name { margin-inline-start: var(--jp-size-space-100); color: var(--jp-tx2); font: var(--jp-typography-weight-ui) calc(var(--m) * .3)/1 var(--jp-font-ui); }
@media (max-width: 640px) { .gate-nf-logo { --m: 48px; } }