/*! Copyright (c) 2026 Mark T. Fulwider. All rights reserved. */
/* TP. The gold button and the TP sheet. One look on every page.
   Every category is written like "Study Hall": Georgia, the same slate color, the same size. */

/* The TP button next to TheoreticalPhysics.ai: the mint pill picture (Mark, 23 October 2026). THE ONE PLACE its
   look is set, for every page (the button may be drawn by tp-map.js or by Study Hall as #synapse-trigger).
   The picture is in /assets/tp/ at three sizes so it stays sharp; the word TP stays in the button for screen readers. */
.tp-button,#synapse-trigger{flex:none;margin-left:16px;width:64px;height:34px;min-height:0;padding:0;border:0;border-radius:17px;
  background:url("/assets/tp/tp-pill.png?build=ce21de6c0bda") center/contain no-repeat;
  background-image:image-set(url("/assets/tp/tp-pill.png?build=ce21de6c0bda") 1x,url("/assets/tp/tp-pill@2x.png?build=b0340ea58d41") 2x,url("/assets/tp/tp-pill@3x.png?build=944e2c6acc76") 3x);
  color:transparent;font:16px/1 Georgia,'Times New Roman',serif;overflow:hidden;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.tp-button:hover,#synapse-trigger:hover{filter:brightness(1.04) saturate(1.05)}
.tp-button:focus-visible,#synapse-trigger:focus-visible{outline:3px solid #bc8d41;outline-offset:3px}
.ai-top h1 > .tp-button{vertical-align:middle;margin:0 0 0 18px}
#synapse-trigger.tp-button.is-corner{position:fixed;top:12px;left:12px;z-index:50;margin:0;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#synapse-trigger{touch-action:none}

/* The sheet */
dialog#tp-map{--side:min(470px,calc(100vw - 24px),calc(100dvh - 24px));position:fixed;inset:0;width:var(--side);height:var(--side);max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;color:#3d5560;filter:drop-shadow(0 4px 14px rgba(0,0,0,.18))}
dialog#tp-map::backdrop{background:rgba(36,49,56,.22);backdrop-filter:none}
#tp-map .tp-sheet{position:absolute;inset:0;border-radius:50%;border:1px solid #c9d6da;background:#f1efe2;container-type:size}

/* The categories around the outside: all written like "Study Hall" */
#tp-map .tp-place{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:4px 8px;border:0;border-bottom:2px solid transparent;background:transparent;color:#7d929b;font:400 clamp(11px,3.2cqw,15px)/1.1 Georgia,'Times New Roman',serif;text-align:center;white-space:nowrap;cursor:pointer;touch-action:none}
#tp-map .tp-place.tp-corner{white-space:normal;max-width:15cqw;line-height:1.05}
@container (max-width:340px){#tp-map .tp-place{white-space:normal;max-width:26cqw;line-height:1.05}}
#tp-map .tp-place{transition:color .12s,transform .12s}
#tp-map .tp-place:hover,#tp-map .tp-place.is-on{color:#1c2b32;transform:translate(-50%,-50%) scale(1.08)}
#tp-map .tp-place.is-on{border-bottom-color:#d1a56a}
#tp-map .tp-place:focus-visible,#tp-map .tp-circle:focus-visible,#tp-map .tp-hub:focus-visible{outline:3px solid #bc8d41;outline-offset:3px}

/* The wheel: the center takes the category's name, the circles are what is in it */
#tp-map .tp-ring{position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
#tp-map .tp-ring .tp-circle,#tp-map .tp-ring .tp-hub{pointer-events:auto}
#tp-map .tp-sheet:focus{outline:none}
#tp-map .tp-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#tp-map .tp-ring path{fill:none;stroke:#c5ced1;stroke-width:.5}
#tp-map .tp-circle,#tp-map .tp-hub{position:absolute;transform:translate(-50%,-50%);display:grid;place-content:center;border-radius:50%;text-align:center;cursor:pointer;touch-action:none}
#tp-map .tp-circle{hyphens:auto;-webkit-hyphens:auto;left:var(--x);top:var(--y);width:var(--size,20%);aspect-ratio:1;padding:2%;border:1px solid #c9d6da;background:#e3ecef;color:#2c4450;font:clamp(10px,var(--ink,2.45cqw),15px)/1.08 Georgia,'Times New Roman',serif;transition:background .12s,border-color .12s}
#tp-map .tp-circle:hover,#tp-map .tp-circle.is-hot{border-color:#8d7344;background:#f7f1e4;color:#1c2b32}
#tp-map .tp-hub{left:50%;top:50%;width:24%;aspect-ratio:1;padding:3%;border:1px solid #d4c08a;background:#e3d29f;color:#3d4e3a;font:clamp(11px,3.4cqw,17px)/1.1 Georgia,'Times New Roman',serif}
#tp-map .tp-hub:hover{background:#ecdcab}

/* The side box. Same add line the side bar uses, opened from the inner circle. */
#tp-map .tp-side{position:absolute;z-index:2;width:180px;padding:8px 6px;background:#102833;border:1px solid #35505d;box-shadow:0 8px 24px rgba(0,0,0,.28);color:#e4edef}
#tp-map .tp-side h3{margin:4px 6px 6px;font:10px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#d1a56a}
#tp-map .tp-side .fly-row{display:flex;width:100%;align-items:center;padding:6px;border:0;background:transparent;color:#e4edef;text-align:left;font:12px/1.3 Arial,Helvetica,sans-serif;cursor:pointer}
#tp-map .tp-side .fly-row:hover{background:#17384a}
#tp-map .tp-side .fly-add{margin:6px 4px 0}
#tp-map .tp-side{max-height:62%;overflow-y:auto}
#tp-map .tp-side .tp-side-note{margin:6px;font:11px/1.35 Arial,Helvetica,sans-serif;color:#f0c58a}
#tp-map .tp-side .fly-add input{width:100%;padding:6px;border:1px solid #c4a36a;background:#0c2633;color:#e4edef;font:12px Arial,Helvetica,sans-serif}
/* The class and project the wheel is working in, under the name in the center (Mark, 24 October 2026). */
#tp-map .tp-ring .tp-hub-in{position:absolute;left:50%;top:63.5%;transform:translateX(-50%);max-width:32%;padding:2px 9px;border:1px solid #d4c08a;border-radius:10px;text-align:center;background:#fbf6e6;font:clamp(10px,2.1cqw,13px)/1.25 Georgia,'Times New Roman',serif;color:#3d4e3a;pointer-events:none}
#tp-map .tp-ring .tp-hub-in span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-side .fly-row.chosen{outline:1px solid #bc8d41}

/* =====================================================================================================================
   THE LAYOUT, LOCKED (Mark, 26 October 2026). "Written in stone." Every Study Hall page, every sheet page and the AI
   Record use these measurements, on every screen at least 900px wide, and nothing else may change them. The numbers
   are measured from Mark's picture of 26 October (AI Record, "The Blue and the grey") and checked by
   scripts/layout-check.mjs on every `npm run check`. The full spec is LAYOUT.md. Change only when Mark asks.
     top bar ............ 54px tall (site name, TP, the AIs, Full Display, Menu); the side bars start right under it
     side bars .......... 192px wide each, flush to the window edges, from the top bar to the bottom of the window
     white gap .......... 18px between each side bar and the grey frame
     title row .......... page name (+ Record square, split symbol) then the edit strip on ONE line; the strip never
                          wraps and never scrolls with a bar: what does not fit is cut off at the right end, with a
                          small arrow to see the rest (a longer page name shows fewer tools)
     breadcrumbs ........ one line, directly under the page name, starting where the page name starts
     grey frame ......... 13px of grey (#8d8d8d) all around the white page, 10px below the breadcrumbs
     copyright .......... the transparent PNG, floating at the bottom; no band, no white strip over the side bars
   It lives here, in tp-map.css, because every one of these pages already loads TP. The arrow is in tp-map.js.
   ===================================================================================================================== */
@media (min-width:900px){
  html:not(.split-half):not(.pane-window) body:has(#left-rail) .masthead{height:54px!important;min-height:54px!important;max-height:54px!important;padding-block:0!important;align-items:center!important;box-sizing:border-box!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) .workspace{display:grid!important;grid-template-columns:192px minmax(0,1fr) 192px!important;max-width:none!important;width:100%!important;margin:0!important;min-height:calc(100vh - 54px)!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #left-rail,
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #right-rail{position:sticky!important;align-self:start!important;width:192px!important;min-width:192px!important;max-width:192px!important;top:54px!important;height:calc(100vh - 54px)!important;margin:0!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #main{padding:6px 18px 24px!important;margin:0!important;min-width:0!important;max-width:none!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #main .sheet-lock,
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #main .ai-record{margin:0!important;padding:0!important;width:100%!important;max-width:none!important}

  /* The two side bars are level, row for row (Mark, 26 October 2026): Study Hall with Desk Top, Classes with Outline,
     Free Study with Projects, Calendar with Notes, AI Record with AI Record. Below that both sides use the same row
     height (36px) and the same break lines (12px above, 1px line, 8px below), so the spacing follows the left side. */
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #left-rail .rail-inner{padding-top:20px!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #left-rail .hall-brand{box-sizing:border-box!important;height:51px!important;padding-bottom:16px!important;margin:0!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #left-rail .hall-brand strong{font:400 27px/34px Georgia,"Times New Roman",serif!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #left-rail .rail-nav > .rail-link{box-sizing:border-box!important;min-height:36px!important;padding-block:7px!important;line-height:22px!important;margin:0!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #left-rail .rail-divider{height:0!important;margin-top:12px!important;margin-bottom:8px!important;border-top-width:1px!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #right-rail .desk-rail{padding-top:20px!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #right-rail .desk-rail > h2{box-sizing:border-box!important;height:51px!important;margin:0!important;padding-top:0!important;padding-bottom:16px!important;font:400 27px/34px Georgia,"Times New Roman",serif!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #right-rail .desk-rail > .desk-link,
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #right-rail .desk-rail > .desk-branch > .desk-link{box-sizing:border-box!important;min-height:36px!important;padding-block:7px!important;line-height:22px!important;margin:0!important}
  html:not(.split-half):not(.pane-window) body:has(#left-rail) #right-rail .desk-rule{height:0!important;margin-top:12px!important;margin-bottom:8px!important;border-top-width:1px!important}
  html:not(.split-half):not(.pane-window) body[data-density=comfortable]:has(#left-rail) #left-rail .rail-nav > .rail-link,
  html:not(.split-half):not(.pane-window) body[data-density=comfortable]:has(#left-rail) #right-rail .desk-rail > .desk-link,
  html:not(.split-half):not(.pane-window) body[data-density=comfortable]:has(#left-rail) #right-rail .desk-rail > .desk-branch > .desk-link{padding-block:11px!important;min-height:44px!important}

}
/* The title row, the breadcrumbs, the grey frame and the strip's arrows hold at EVERY window width from 480px up, not
   only on wide screens (Mark, 27 October 2026: a narrow or detached window wrapped the strip, put the breadcrumbs
   beside the title, and showed the strip's arrows as two big bars). */
@media (min-width:480px){
  /* The title row: page name, then the edit strip, on one line. */
  html body:has(#left-rail) .sheet-lock .doc-top,
  html body:has(#left-rail) .ai-record .ai-top{display:grid!important;grid-template-columns:minmax(0,max-content) minmax(160px,1fr)!important;grid-template-rows:auto auto!important;column-gap:14px!important;row-gap:2px!important;align-items:center!important;margin:0 0 10px!important;padding:0!important;position:relative!important}
  html body:has(#left-rail) .sheet-lock .doc-top > h1,
  html body:has(#left-rail) .ai-record .ai-top > h1{grid-column:1!important;grid-row:1!important;margin:0!important;padding:0!important;white-space:nowrap!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html body:has(#left-rail) .sheet-lock .doc-top > .edit-strip,
  html body:has(#left-rail) .ai-record .ai-top > .ai-tools{grid-column:2!important;grid-row:1!important;display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;min-width:0!important;margin:0!important;padding:4px 0!important;scroll-behavior:smooth}
  html body:has(#left-rail) .sheet-lock .doc-top > .edit-strip::-webkit-scrollbar,
  html body:has(#left-rail) .ai-record .ai-top > .ai-tools::-webkit-scrollbar{display:none!important}
  html body:has(#left-rail) .sheet-lock .doc-top > .edit-strip > *,
  html body:has(#left-rail) .ai-record .ai-top > .ai-tools > *{flex-shrink:0!important}
  html body:has(#left-rail) .ai-record .ai-top > .ai-tools .edit-strip{display:flex!important;flex-wrap:nowrap!important;width:auto!important}
  html body:has(#left-rail) .ai-record .ai-top > .ai-tools .edit-strip > *{flex-shrink:0!important}
  html body:has(#left-rail) .sheet-lock .doc-top > .edit-strip .note-btn{flex:0 0 26px!important;width:26px!important;min-width:26px!important;max-width:26px!important}
  html body:has(#left-rail) .sheet-lock .doc-top > .edit-strip .note-btn[data-edit="pen"]{flex:0 0 32px!important;width:32px!important;min-width:32px!important;max-width:32px!important}
  html body:has(#left-rail) .sheet-lock .doc-top > .edit-strip .note-btn[data-edit="latex"]{flex:0 0 28px!important;width:28px!important;min-width:28px!important;max-width:28px!important}
  html body:has(#left-rail) .ai-record .ai-top .note-btn{flex:0 0 26px!important;width:26px!important;min-width:26px!important;max-width:26px!important}
  html body:has(#left-rail) .ai-record .ai-top .note-btn.ai-pen,
  html body:has(#left-rail) .ai-record .ai-top .note-btn[data-edit="pen"]{flex:0 0 32px!important;width:32px!important;min-width:32px!important;max-width:32px!important}
  /* The breadcrumbs: one line, directly under the page name, starting where it starts. */
  html body:has(#left-rail) .sheet-lock .doc-top > .breadcrumbs,
  html body:has(#left-rail) .ai-record .ai-top > .breadcrumbs{grid-column:1 / -1!important;grid-row:2!important;margin:0!important;padding:0!important;display:flex!important;flex-wrap:nowrap!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important}
  /* The grey frame: 13px all around the white page. */
  html body:has(#left-rail) .sheet-lock > .paper,
  html body:has(#left-rail) .sheet-lock .paper,
  html body:has(#left-rail) .ai-record .ai-paper{border:13px solid #8d8d8d!important;margin:0!important;box-sizing:border-box!important}
  /* The AI Record page by itself (no side bars): the same title row, the breadcrumbs under the page name, the same grey. */
  html:not(.split-half):not(.pane-window) body:not(:has(#left-rail)) .ai-record .ai-top{grid-template-columns:max-content minmax(0,1fr)!important;grid-template-rows:auto auto!important;align-items:center!important}
  html:not(.split-half):not(.pane-window) body:not(:has(#left-rail)) .ai-record .ai-top > h1{grid-row:1!important}
  html:not(.split-half):not(.pane-window) body:not(:has(#left-rail)) .ai-record .ai-top > .ai-tools{grid-column:2!important;grid-row:1!important}
  html:not(.split-half):not(.pane-window) body:not(:has(#left-rail)) .ai-record .ai-top > .breadcrumbs{grid-column:1 / -1!important;grid-row:2!important;padding-left:8px!important}
  html:not(.split-half):not(.pane-window) body:not(:has(#left-rail)) .ai-record .ai-paper{border:13px solid #8d8d8d!important;box-sizing:border-box!important}
  /* The small arrow at the right end of the strip (tp-map.js): only when some tools are out of sight. */
  .tp-strip-more{position:absolute;top:0;z-index:9;display:none;align-items:center;justify-content:center;width:20px;height:100%;padding:0;border:0;background:linear-gradient(90deg,rgba(245,247,247,0),#f5f7f7 45%);color:#24343c;font:16px/1 Georgia,'Times New Roman',serif;cursor:pointer}
  .tp-strip-more.is-on{display:flex}
  .tp-strip-more:hover{color:#bc8d41}
  .tp-strip-more.is-left{background:linear-gradient(270deg,rgba(245,247,247,0),#f5f7f7 45%)}
}
/* A narrow window: the page starts right under the top bar too (no gap). */
@media (min-width:480px) and (max-width:899.98px){
  html body:has(.sheet-lock .doc-top, .ai-record .ai-top) #main{padding-top:6px!important}
}
/* The copyright: the transparent PNG, floating; never a band across the bottom. */
html body .tp-copyright{background:transparent!important;border:0!important;box-shadow:none!important}

/* AIs at the top (Preferences): up to four. */
.ais-panel .ais-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 18px;margin:10px 0}
.ais-panel .ais-row{display:flex;align-items:center;gap:8px;font:15px Georgia,"Times New Roman",serif}
.ais-panel .ais-row input{width:auto;margin:0}
.ais-panel .ais-row:has(input:disabled){color:#9aa8ae}
.ais-panel .ais-said{font-size:13px;color:#5d737c}
.ais-panel .ais-default{min-height:48px;padding:10px 26px;border:2px solid #9d7434;border-radius:4px;background:#dbba8b;color:#0c1418;font:700 18px/1.2 Georgia,'Times New Roman',serif;letter-spacing:.01em;box-shadow:0 2px 0 rgba(0,0,0,.25);cursor:pointer}
.ais-panel .ais-default:hover{background:#efd1a5}
.ais-panel .ais-default:focus-visible{outline:3px solid #1d6f86;outline-offset:3px}

/* PHONES (Mark, 3 November 2026, 1.8.12). Below 480px the strip's arrows were two big full-width bars and the
   AI Record's tool strip ran off the screen. Now the arrows are the same small edge arrows as on a computer,
   and the strip slides sideways. */
@media (max-width:479.98px){
  html body .sheet-lock .doc-top,
  html body .ai-record .ai-top{position:relative}
  .tp-strip-more{position:absolute;top:0;z-index:9;display:none;align-items:center;justify-content:center;width:22px;height:100%;padding:0;border:0;background:linear-gradient(90deg,rgba(245,247,247,0),#f5f7f7 45%);color:#24343c;font:18px/1 Georgia,'Times New Roman',serif}
  .tp-strip-more.is-on{display:flex}
  .tp-strip-more.is-left{background:linear-gradient(270deg,rgba(245,247,247,0),#f5f7f7 45%)}
  html body .ai-record .ai-top > .ai-tools{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
  html body .ai-record .ai-top > .ai-tools::-webkit-scrollbar{display:none}
  html body .ai-record .ai-tools .edit-strip{flex-wrap:nowrap!important;width:max-content}
  html body .ai-record .ai-tools .edit-strip>*{flex-shrink:0}
}