/* glass-edge-tab.css — the one edge tab, both edges.
 *
 * Dan, 2026-09-08: "When hidden, it should be a small tab on the side of the
 * screen like we see the glass menu. Uniform design language is important.
 * Reduce redundancy and duplicate code."
 *
 * Everything a tab IS lives here, once: the vertical writing mode, the 44px
 * face, the amber ground and its reversed ink, the offset from the edge, the
 * hover, the focus ring and the one pulse a first visit gets. `--side` is the
 * only thing the two differ by, and it decides an edge and a corner and
 * nothing else.
 *
 * WHY THE CONTENTS TAB MOVED. It was a horizontal strip at the top-left,
 * which put it exactly where §19's line now runs — a second bar on the one
 * row the frame owns. Mid-height on the edge is where the notes tab has
 * always sat, so the two now read as the same control on opposite sides of
 * the page rather than as two unrelated affordances.
 *
 * WHY THE NOTES TAB CHANGED COLOUR. §20: "the same amber/on-amber face". The
 * lavender was the notes panel's own hue leaking onto its handle; the handle
 * is not the panel. What a tab means is written in its words.
 *
 * BELOW 900px NOTHING CHANGES: the phone's contents are a chip shelf that is
 * never folded, and §15 already took the notes tab off the paper down there
 * (glass-phone.css). Neither tab is drawn on a phone, so neither is styled
 * for one.
 */
.edge-tab {
  position: fixed; top: 40%; z-index: 95;
  /* the writing mode is the whole shape: a tab is a word standing on its
     edge, and it is stated exactly once in the kit */
  writing-mode: vertical-rl;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--on-amber); background: var(--amber); border: none;
  min-width: 44px; width: 44px; padding: 0.9rem 0; cursor: pointer;
  /* ONE EXTENT, both edges. A tab whose length is its own word is two
     different controls: CONTENTS 147 measured 146.5 and GLASS 94.5, on the
     same page, at the same height, facing each other. `min-height` rather
     than `height` because a tab must never clip its own name — every label
     this kit ships is inside it, so today the two measure the same, and a
     longer one would grow rather than lose a letter. */
  min-height: var(--edge-tab-h, 10rem);
  transition: filter var(--t-sweep) ease;
}
/* the corner it does NOT touch is the one that faces the page */
.edge-tab--left  { left: 0;  border-radius: 0 var(--elbow-w) var(--elbow-w) 0; }
.edge-tab--right { right: 0; border-radius: var(--elbow-w) 0 0 var(--elbow-w); }
.edge-tab .et-n { font-family: var(--font-data); font-size: 0.9em;
  letter-spacing: 0.04em; color: var(--on-amber); opacity: 0.8; }
.edge-tab .et-c { display: inline-block; font-size: 1.1em; line-height: 1;
  /* upright inside a vertical line: a chevron that turns with the text is
     pointing at the floor, and it is pointing at the panel */
  writing-mode: horizontal-tb; }
.edge-tab:hover { filter: brightness(1.08); }
.edge-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ONE pulse, on a first visit, and never again — glass-nearby.js writes the
 * key that says so. A reader who has already opened or shut the contents is
 * not told where they are. Motion that repeats is decoration, and this
 * surface does not carry decoration; this one says "the contents went here". */
@keyframes edge-tab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 176, 46, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 176, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 176, 46, 0); }
}
.edge-tab.pulse { animation: edge-tab-pulse 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .edge-tab.pulse { animation: none; } }

/* the rail is its own handle when it is open, and the notes panel is its own
   handle when it is up — each tab is the control for the state it is NOT in */
body:not(.toc-shut) #toc-tab { display: none; }
@media (max-width: 900px) { .edge-tab { display: none; } }