/* The Chart Table's drawer (#520 Sub 2 of #401, ruled at the #518 sitting, direction D): shut at rest behind a tab on the right edge; open, it slides up over the foot of the stage while the chart keeps its fit, and the gathered sheets lie loose on the walnut as cuttings with paper labels. `chart-drawer` throughout and never `drawer`: src/site/shell/drawer.ts is the site's phone nav (#520 ruling 2). */

/* Seated at 74% where the Broadside's own tab sits at 50% (atelier.css), so the two never share the edge when the Broadside is folded. Placed by translate and rotate, not transform: the house lift on a button writes transform and would otherwise replace the tab's seat. */
.chart-drawer-tab {
  position: fixed; right: 0; bottom: 1.5rem; rotate: 180deg; z-index: 19;
  writing-mode: vertical-rl; max-height: 11rem; overflow: hidden; padding: 0.9rem 0.45rem; cursor: pointer; appearance: none; border-radius: 0;
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--parchment); background: rgb(from var(--chart-ink) r g b / 0.5);
  border: 1px solid var(--line-tan); border-left: 0;
}
body:has(.chart-drawer.open) .chart-drawer-tab { display: none; }
button.chart-drawer-tab:is(:hover, :focus-visible) { background: var(--ink-dark); color: var(--parchment-bright); box-shadow: none; transform: none; }

:root { --chart-drawer-h: 15.5rem; --chart-drawer-head: 12.5rem; --chart-drawer-gap: 1.6rem; }

.chart-drawer {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 18;
  box-sizing: border-box; height: var(--chart-drawer-h); padding: 0.9rem var(--chrome-x); gap: var(--chart-drawer-gap); align-items: stretch;
  background: linear-gradient(to top, rgb(from var(--chart-ink) r g b / 0.97), rgb(from var(--chart-ink) r g b / 0.88));
  border-top: 1px solid var(--line-tan);
  box-shadow: 0 -18px 50px rgb(from var(--chart-ink) r g b / 0.55);
  animation: chart-drawer-up 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes chart-drawer-up { from { transform: translateY(100%); } }
.chart-drawer.open { display: flex; }

/* The chart keeps its fit (#518 ruling 1), so nothing here resizes the stage; only the furniture standing on the foot of it lifts above the open drawer. */
body:has(.chart-drawer.open) .corner.bl.folio,
body:has(.chart-drawer.open) .corner.br.zoomery { bottom: calc(var(--chart-drawer-h) + 1rem); }
body:has(.chart-drawer.open) .legend:not(.in-slip) { bottom: calc(var(--chart-drawer-h) + var(--chrome-y)); }

.chart-drawer-head { flex: 0 0 var(--chart-drawer-head); display: flex; flex-direction: column; }
.chart-drawer-head .card-verb { font-family: var(--font-flourish); font-style: italic; color: var(--parchment); font-size: 0.9rem; }
.chart-drawer-head .card-title { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.08em; line-height: 1.2; color: var(--parchment-bright); margin-top: 0.1rem; }
.chart-drawer-head .count { font-variant-caps: small-caps; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--parchment); margin-top: 0.4rem; }
.chart-drawer-head .shut { margin-top: auto; align-self: flex-start; }

/* The Broadside is fixed at z-index 20 against this drawer's 18 and reaches into its band, so a cutting laid under its footprint has its remove press eclipsed by the form behind: three of six were unreachable, hit-testing to a LABEL and a SELECT. The cuttings stand clear of it; the head and the road keep the seats the still gives them, and the road is already below the Broadside's own foot. */
body:has(.slip:not(.folded)) .cuttings {
  max-width: calc(100vw - var(--slip-w) - 2rem - var(--chart-drawer-head) - var(--chart-drawer-gap) - var(--chrome-x));
}
.cuttings { list-style: none; margin: 0; padding: 0.7rem 0 0; flex: 1 1 auto; min-width: 0; display: flex; gap: 0.4rem; align-items: flex-start; }
.cuttings li { position: relative; flex: 0 1 10.6rem; min-width: 0; rotate: var(--tilt, 0deg); margin-right: -0.5rem; transition: rotate 0.2s var(--ease-paper), translate 0.2s var(--ease-paper); }
.cuttings li:is(:hover, :focus-within) { rotate: 0deg; translate: 0 -4px; z-index: 2; }
.cuttings li.prospect { flex-basis: 9.4rem; }
.cuttings img { display: block; width: 100%; height: auto; border: 1px solid var(--line-tan); background: var(--chart-paper); box-shadow: 0 8px 22px rgb(from var(--chart-ink) r g b / 0.55); }
/* A prospect laid before its own page exists (ruled 2026-09-07): the cutting keeps its seat and its label, with the plate's place reserved rather than drawn. */
.cuttings .awaited { display: grid; place-items: center; aspect-ratio: 420 / 310; border: 1px dashed var(--line-tan); background: var(--chart-paper); color: var(--ink-brown); font-family: var(--font-flourish); font-style: italic; font-size: 0.72rem; }
.cuttings .label { position: absolute; left: 0.5rem; bottom: -0.85rem; max-width: calc(100% - 1rem); rotate: -1.2deg;
  background: var(--parchment-panel); border: 1px solid var(--line-tan); box-shadow: 0 3px 8px rgb(from var(--chart-ink) r g b / 0.35);
  padding: 0.18rem 0.5rem; font-size: 0.66rem; line-height: 1.3; color: var(--ink-dark); }
.cuttings .label b { display: block; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuttings .label i { font-family: var(--font-flourish); color: var(--ink-brown); }
.cuttings .off { position: absolute; top: 0.3rem; right: 0.3rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0; line-height: 1; font-size: 0.9rem;
  color: var(--parchment); background: var(--ink-dark); border: 1px solid var(--line-tan); }
.cuttings .off:is(:hover, :focus-visible) { background: var(--parchment-bright); color: var(--ink-dark); }

.chart-drawer-road { flex: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 0.5rem; padding-bottom: 0.3rem; }
.chart-drawer-road .full { font-variant-caps: small-caps; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--parchment); }
.chart-drawer-road .stamp { font-variant-caps: small-caps; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--line-tan); }
.chart-drawer-road .legend-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; transform: none; }

/* Two vertical tabs on one edge: the Broadside's is centred and this one is seated from the bottom, so on a short window they close on each other. Measured 2026-09-07 at 1280 wide with the Broadside folded: they touched at 500px tall before this block and clear by 27px after it; the gap crosses zero just under 440, so the edge carries both down to about 445 and no further. */
@media (max-height: 640px) {
  .chart-drawer-tab { max-height: 8.5rem; font-size: 0.62rem; letter-spacing: 0.1em; padding: 0.6rem 0.35rem; }
}

/* The dog-ear (#518 ruling 3): the committed survey's own top-right corner turned back. Drawn with a clip-path and a gradient, carrying no element of its own inside, because suite-region-detail reads the survey as [...querySelectorAll("#map .region-inset svg")].pop() and anything with an svg in it would become that element. It sits INSIDE the inset's box and changes none of it, since the place overlay positions by the same rect. */
.dog-ear {
  position: absolute; top: 0; right: 0; padding: 0; border: 0; cursor: pointer;
  /* Restored because the inset box is pointer-events: none (explorer/index.css), the same reason .pc-prospect restores it on the place card. Without this the handle is reachable by keyboard alone: a real click lands on the chart underneath. */
  pointer-events: auto;
  width: calc(3.4rem / var(--zoom-k, 1)); height: calc(3.4rem / var(--zoom-k, 1));
  appearance: none; border-radius: 0; z-index: 3;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: linear-gradient(225deg, var(--parchment-panel) 0%, var(--parchment) 46%, var(--chart-ink) 47%, var(--ink-dark) 100%);
  box-shadow: none;
  transition: width 0.18s var(--ease-paper), height 0.18s var(--ease-paper);
}
.dog-ear:is(:hover, :focus-visible) { width: calc(4.1rem / var(--zoom-k, 1)); height: calc(4.1rem / var(--zoom-k, 1)); }
.dog-ear:focus-visible { outline: 2px solid var(--parchment-bright); outline-offset: -2px; }

/* The phone is Sub 2a (#540), where the drawer becomes the bottom sheet's second leaf as #518 ruling 4 ruled it. Until that lands the desktop drawer stands DOWN here rather than shipping broken: measured at a true 390, its rigid head and road leave the cuttings row 4.34px wide, push the road 64px past the edge into body's overflow:hidden where nothing can reach or scroll to it, and paint the translucent walnut over the bottom third of the chart while the Broadside's own sheet paints back over the road. The table is unreachable on a phone in the interval, which is a stopgap and not the ruled design. */
@media (max-width: 900px) {
  .chart-drawer, .chart-drawer-tab { display: none; }
}