/* ═══════════════════════════════════════════════════════════════════
   SHELL — the page furniture every instrument shares.

   THE PROMISE, KEPT. hanger.css carried this chrome "for now", with a
   note that it moves to a shared shell the day a second instrument
   exists, and not a day before. Riemann was the second instrument.
   This file is that day.

   WHAT LIVES HERE: the page column, the head, the mark that walks you
   home, the card an instrument stands in, the row beneath it, the
   quiet text button, and the switch. Nothing that draws mathematics —
   a machine's own geometry stays in its folder, under its own prefix.

   THE PREFIX IS .sh-, and only .sh-. Same law as the folders: one
   prefix per file, so nothing here can ever fight with an instrument
   over a class.
   ═══════════════════════════════════════════════════════════════════ */

.sh-page{max-width:980px;margin:0 auto;padding:30px 22px 44px;
         display:flex;flex-direction:column;gap:16px}

.sh-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
         padding:2px 6px 12px;border-bottom:1px solid var(--line)}
.sh-head h1{font-family:var(--serif);font-weight:600;font-size:29px;letter-spacing:-.01em}
.sh-head p{margin-top:4px;color:var(--muted);font-size:13.5px;line-height:1.5}

/* the mark is the way home — the only navigation an instrument has */
.sh-mark{font-size:11px;letter-spacing:.18em;color:var(--faint);
         text-transform:uppercase;white-space:nowrap}
a.sh-mark{text-decoration:none;transition:color .15s}
a.sh-mark:hover{color:var(--muted)}

.sh-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
         padding:10px 12px 0;overflow:hidden}

.sh-row{display:flex;align-items:center;gap:22px;padding:0 8px}

/* the quiet button — for the verb that clears, never for the verb
   that matters */
.sh-empty{margin-right:auto;border:none;background:none;color:var(--faint);
          font-family:var(--sans);font-size:12.5px;cursor:pointer;padding:6px 2px;
          transition:color .15s}
.sh-empty:hover{color:var(--muted)}

.sh-tog{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.sh-switch{position:relative;width:38px;height:22px;border-radius:99px;border:none;
           background:var(--line);cursor:pointer;transition:background .2s;flex:none}
.sh-switch::after{content:"";position:absolute;top:2.5px;left:2.5px;width:17px;height:17px;
                  border-radius:50%;background:#fff;transition:left .2s;
                  box-shadow:0 1px 3px rgba(0,0,0,.18)}
.sh-switch.on{background:var(--machine)}
.sh-switch.on::after{left:18.5px}

/* the way back: always at the window's top left, wherever the page is
   scrolled, back to the instruments page, where Functions and Probability
   are (machines/function/room.js puts it there). Where the window is too
   narrow for it to sit beside the page's column, the page makes room for
   it above its head */
.sh-back{position:fixed;top:12px;left:12px;z-index:30;display:flex;align-items:center;gap:6px;
         padding:6px 13px 7px 11px;border:1px solid var(--line);border-radius:99px;
         background:color-mix(in srgb,var(--surface) 88%,transparent);
         -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
         color:var(--muted);font-family:var(--sans);font-size:12.5px;letter-spacing:.03em;cursor:pointer;
         text-decoration:none;box-shadow:0 1px 4px rgba(38,38,43,.07);transition:color .15s,border-color .15s}
.sh-back span{font-size:14px;line-height:1}
.sh-back:hover{color:var(--ink);border-color:var(--faint)}
@media (max-width:1110px){ .sh-has-back .sh-page{padding-top:60px} }