/* =============================================================================
   Philosophy — the deep field
   -----------------------------------------------------------------------------
   The page is the instrument: shared nav, a slim header strip, and the field
   fills every remaining pixel. Everything else (detail, index) floats OVER the
   field rather than displacing it, so the chronology never reflows.

   Deep-space treatment is confined to the field surface, so the site's own
   chrome (nav, palette, admin edge) still reads as itself in both themes.
============================================================================= */

.phil-body {
  --phil-void:  #05070d;
  --phil-void2: #0a0e1c;
  --phil-star:  #dfe6ff;
  overflow: hidden;              /* the field pans; the page never scrolls */
}
/* The shared atmospheres are suppressed: this surface supplies its own.
   The grain goes too, and not for taste — MEASURED, it was the single most
   expensive thing on the page. A full-viewport overlay above a canvas that
   repaints every frame forces the compositor to re-blend the whole viewport
   every frame; on a software compositor that was 17ms of a 42ms frame, more
   than everything except the canvas itself. At .028 opacity over a starfield it
   was also very nearly invisible. Fields that animate do not get overlays. */
.phil-body::before { content: none; }
.phil-body::after  { content: none; }

:root[data-theme="light"] .phil-body {
  --phil-void:  #0c1120;                      /* the field stays night in both
                                                 themes — a lit star field is not
                                                 a star field. Chrome follows the
                                                 theme; the void does not. */
  --phil-void2: #141a2e;
  --phil-star:  #e8ecff;
}

.phil-main {
  max-width: none;
  padding: 0;
  height: calc(100dvh - var(--portal-chrome-h, 64px));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- the header strip (the only thing that is not field) ----------- */
.phil-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: .6rem var(--pad-x) .65rem;
  border-bottom: 1px solid var(--border);
  background: var(--mat-1);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  position: relative; z-index: 3;
}
.phil-back {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--fg-mute); white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.phil-back:hover { color: var(--accent); }

.phil-title { display: flex; align-items: baseline; gap: .8rem; min-width: 0; }
.phil-eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .17em;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: .45rem;
  white-space: nowrap;
}
.phil-eyebrow-dot {
  width: 6px; height: 6px; background: var(--accent);
  box-shadow: 0 0 9px var(--accent); transform: rotate(45deg);
}
.phil-head h1 {
  font-size: 19px; font-weight: 800; letter-spacing: -.03em;
  margin: 0; white-space: nowrap;
}

.phil-controls { margin-left: auto; display: flex; align-items: center; gap: .55rem; }

/* era jumps — segmented, the ranked binary/segment grammar */
.phil-seg { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.phil-seg button {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .42rem .62rem;
  background: transparent; border: none; color: var(--fg-mute);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.phil-seg button + button { border-left: 1px solid var(--border); }
.phil-seg button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.phil-seg button[aria-pressed="true"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

/* lifeline — a birth year, and the field answers what fell inside that life */
.phil-lifeline {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .5rem .3rem .62rem;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-soft);
  transition: border-color var(--t-fast) var(--ease);
}
.phil-lifeline:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.phil-lifeline-lab {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; color: var(--fg-mute);
}
.phil-lifeline-in {
  width: 5.2ch; padding: 0; border: none; background: none;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--fg);
  text-align: center; outline: none;
}
.phil-lifeline-in::placeholder { color: var(--fg-mute); font-weight: 400; }
.phil-lifeline-clear {
  border: none; background: none; cursor: pointer; padding: 0 .1rem;
  color: var(--fg-mute); font-size: 15px; line-height: 1;
}
.phil-lifeline-clear:hover { color: var(--fg); }

.phil-btn {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  padding: .48rem .8rem; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-soft);
  color: var(--fg-dim); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.phil-btn:hover { color: var(--fg); border-color: var(--border-hi); }
.phil-btn[aria-expanded="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ---------- the field ------------------------------------------------------ */
.phil-field {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background:
    radial-gradient(120% 90% at 50% 8%, var(--phil-void2), var(--phil-void) 62%);
  overflow: hidden;
  isolation: isolate;
}
#phil-canvas {
  display: block; width: 100%; height: 100%;
  position: relative; z-index: 1;
  cursor: grab; touch-action: none; outline: none;
}
#phil-canvas.dragging { cursor: grabbing; }
#phil-canvas.over     { cursor: pointer; }
#phil-canvas:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-coral-1) 45%, transparent); }

/* Vignette: the far edge of a volume falls off. Sits above the canvas and below
   every readout, so it darkens the field without ever dimming a control. The
   second gradient is a faint cold wash at the bottom — depth cueing by colour,
   the way distance reads blue in any real volume of anything. */
.phil-field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(122% 100% at 50% 42%, transparent 28%, rgba(2,4,10,.42) 72%, rgba(1,2,7,.82) 100%),
    linear-gradient(to top, rgba(46,78,150,.10), transparent 34%);
}
.phil-scale, .phil-hud, .phil-legend, .phil-tip, .phil-nav, .phil-hint, .phil-flash { z-index: 3; }

/* ---------- pointer readout ------------------------------------------------ */
/* A star is 3px across and its name may have been decluttered away. Hovering
   has to answer "who is that" without costing a click. */
.phil-tip {
  position: absolute; top: 0; left: 0; will-change: transform;
  pointer-events: none;
  max-width: 24ch;
  padding: .4rem .55rem;
  border: 1px solid rgba(190,201,230,.16);
  border-radius: 5px;
  /* Opaque, NOT backdrop-filter: a blur over a canvas that repaints every frame
     has to re-blur every frame, and it is the most expensive thing you can put
     on top of an animation. Same reason the flight controls are opaque. */
  background: rgba(9,12,24,.97);
  box-shadow: 0 12px 34px -18px rgba(0,0,0,.9);
  display: flex; flex-direction: column; gap: .1rem;
}
.phil-tip b { font-size: 13px; font-weight: 700; color: #f0f4ff; letter-spacing: -.01em; }
.phil-tip span { font-family: var(--mono); font-size: 10px; color: rgba(190,201,230,.62); }
.phil-tip .phil-tip-b { color: rgba(190,201,230,.42); }

/* ---------- flight controls ------------------------------------------------ */
.phil-nav {
  position: absolute; right: var(--pad-x); bottom: 62px;
  display: flex; flex-direction: column; gap: .3rem;
  transition: right var(--t-base) var(--ease);
}
/* Nothing dodges any more: the card is a floating object that sites itself
   beside its star, not a column pinned to the right edge. */
.phil-navbtn {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid rgba(190,201,230,.16); border-radius: 7px;
  background: rgba(10,14,28,.88);
  color: rgba(214,224,255,.72); font-size: 14px; line-height: 1; cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.phil-navbtn:hover { color: #fff; border-color: rgba(255,146,102,.5); background: rgba(255,138,91,.14); }
.phil-navbtn:active { transform: translateY(1px); }

.phil-hint {
  position: absolute; left: var(--pad-x); bottom: 62px;
  display: flex; flex-wrap: wrap; gap: .15rem .9rem;
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  color: rgba(190,201,230,.34); pointer-events: none;
}
.phil-hint b { color: rgba(214,224,255,.62); font-weight: 700; }

.phil-flash {
  position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  padding: .38rem .7rem; border-radius: 99px;
  border: 1px solid rgba(255,146,102,.4);
  background: rgba(26,15,11,.96); color: #ffd9c6;
  animation: phil-flash-in .22s var(--ease-out);
}
.phil-flash.bad { border-color: rgba(255,110,110,.5); color: #ffc9c9; }
@keyframes phil-flash-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- scale ruler + full-sweep overview ------------------------------ */
.phil-scale {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 0 .45rem;
  pointer-events: none;
  background: linear-gradient(to top, rgba(3,5,11,.85), transparent);
}
.phil-ruler { position: relative; height: 22px; }
/* left:0 + transform, never a `left` in px: the ruler moves on every frame of
   every pan, and transform is the only one of the two that doesn't relayout. */
.phil-tick {
  position: absolute; bottom: 0; left: 0; transform: translateX(-50%);
  will-change: transform;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  color: rgba(190,201,230,.5); white-space: nowrap;
}
.phil-tick::before {
  content: ""; position: absolute; left: 50%; bottom: 100%;
  width: 1px; height: 6px; background: rgba(190,201,230,.22);
}
.phil-tick.major { color: rgba(214,224,255,.8); }
.phil-tick.major::before { height: 10px; background: rgba(214,224,255,.4); }

.phil-sweep {
  position: relative; height: 20px;
  margin: .3rem var(--pad-x) 0;
  border: 1px solid rgba(190,201,230,.14);
  border-radius: 3px;
  background: rgba(10,14,28,.55);
  pointer-events: auto; cursor: pointer;
  overflow: hidden; touch-action: none;
  transition: border-color var(--t-fast) var(--ease);
}
.phil-sweep:hover { border-color: rgba(190,201,230,.3); }
/* geography, packed into rows across the whole span — the sweep is the only
   place on the page that shows all 2,700 years at once, so it is where the map
   of traditions belongs */
.phil-sweep-trad {
  position: absolute;
  background: hsla(var(--h), 70%, 55%, .34);
  border-top: 1px solid hsla(var(--h), 80%, 68%, .5);
}
.phil-sweep-mark { position: absolute; top: 4px; width: 1px; height: 5px; background: rgba(223,230,255,.5); }
.phil-sweep-mark.thr { top: 11px; height: 5px; background: rgba(255,138,91,.6); }
.phil-sweep-win {
  position: absolute; top: -1px; bottom: -1px;
  border: 1px solid color-mix(in srgb, var(--c-coral-1) 70%, transparent);
  background: color-mix(in srgb, var(--c-coral-1) 12%, transparent);
  border-radius: 3px;
  min-width: 8px;
  cursor: grab;
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--c-coral-1) 45%, transparent);
}
.phil-sweep:active .phil-sweep-win { cursor: grabbing; background: color-mix(in srgb, var(--c-coral-1) 20%, transparent); }

/* ---------- hud + legend --------------------------------------------------- */
.phil-hud {
  position: absolute; left: var(--pad-x); top: .85rem;
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  color: rgba(190,201,230,.62);
  pointer-events: none; max-width: min(48ch, 40vw);
}
.phil-hud b { color: rgba(232,238,255,.92); font-weight: 700; }
.phil-hud .phil-hud-life { color: var(--c-coral-1); }
.phil-hud .phil-hud-perf { color: rgba(150,220,190,.8); }

/* A thin top strip, not a floating panel: a panel in the corner sits ON the
   field and hides whoever happens to be under it (Hegel was, at full zoom).
   The canvas reads this box back and starts its first band below it, so the
   legend costs field height rather than field content. */
.phil-legend {
  position: absolute; right: var(--pad-x); top: .8rem;
  left: 34vw;              /* the geography key added a row; the canvas measures
                              this box and starts its lanes below it, so a wider
                              legend costs field height rather than field content */
  display: flex; flex-flow: row wrap; align-items: center;
  justify-content: flex-end; gap: .25rem 1.05rem;
  pointer-events: auto;
}
.phil-key {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: rgba(190,201,230,.52);
  background: none; border: none; padding: .1rem 0; cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.phil-key:hover, .phil-key[aria-pressed="true"] { color: rgba(232,238,255,.95); }
.phil-key[aria-pressed="false"] { color: rgba(190,201,230,.26); }
.phil-key-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--k); box-shadow: 0 0 8px var(--k); }
.phil-key-lum { width: 34px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(223,230,255,.14), rgba(223,230,255,1)); }

/* geography key: a full-width break so the traditions read as their own row */
.phil-key-break { flex-basis: 100%; height: 0; }
.phil-key-trad { color: rgba(190,201,230,.44); }
.phil-key-trad[aria-pressed="true"] { color: rgba(232,238,255,.98); }

/* the emphasis key mirrors the canvas mark: a ring with two fiducial ticks */
.phil-key-mark {
  position: relative; width: 9px; height: 9px; border-radius: 99px;
  border: 1px solid rgba(255,146,102,.85);
  flex: 0 0 auto;
}
.phil-key-mark::before, .phil-key-mark::after {
  content: ""; position: absolute; left: 50%; width: 1.5px; height: 3px;
  background: rgba(255,168,124,.95); transform: translateX(-50%);
}
.phil-key-mark::before { bottom: 100%; }
.phil-key-mark::after  { top: 100%; }
.phil-key-emph { color: rgba(255,196,168,.8); }
.phil-key-emph:hover { color: #ffd9c6; }
.phil-key-emph[aria-pressed="true"] { color: #ffd9c6; }

/* ---------- the specimen card ------------------------------------------------ */
/* Belongs to its star: placed beside it, tethered to it, scaled out of it. All
   motion is written by the render loop as one composed transform, so there is no
   CSS transition here to fight it — only the things the loop does not touch. */
.phil-card {
  position: absolute; top: 0; left: 0;
  width: 560px; max-height: min(80vh, 720px);
  z-index: 4;
  transform-origin: 0 0;
  will-change: transform, opacity;
  display: flex; flex-direction: column;
  border-radius: 16px;
  color: #dbe2f5;
  /* Two-tone edge: a lit top-left rim and a dark bottom-right one is what makes
     a rectangle read as a solid with thickness rather than a painted region. */
  border: 1px solid rgba(190,201,230,.12);
  border-top-color: rgba(226,236,255,.3);
  border-left-color: rgba(214,226,255,.2);
  /* Translucent enough for the blur to have something to work on, and carrying
     its figure's tradition hue in the outer glow, so the card is visibly the
     same object as the star it came out of. */
  background: linear-gradient(160deg, rgba(22,27,45,.975), rgba(8,11,21,.985) 62%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 40px 90px -30px rgba(0,0,0,.95),
    0 12px 32px -14px rgba(0,0,0,.8),
    0 0 70px -20px hsla(var(--h, 220), 75%, 58%, .55);
  overflow: hidden;
  will-change: transform, opacity, filter;
}
/* Worn only at rest — see the note in stepCard. */
.phil-card.is-still {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  background: linear-gradient(160deg, rgba(22,27,45,.93), rgba(8,11,21,.95) 62%);
}
.phil-card[hidden] { display: none; }
.phil-card-body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 1.15rem 1.4rem;
  scrollbar-width: thin;
  /* The card scrolls, so it has to say so: the last few lines fade out instead
     of being guillotined mid-sentence by the card's edge. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
.phil-card-body::-webkit-scrollbar { width: 7px; }
.phil-card-body::-webkit-scrollbar-thumb { background: rgba(190,201,230,.16); border-radius: 4px; }

/* a fixed sheen across the glass; the light does not move with the content */
.phil-card-sheen {
  position: absolute; inset: 0; pointer-events: none; border-radius: 16px;
  background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,0) 38%);
}
.phil-card-close {
  position: absolute; top: .5rem; right: .6rem; z-index: 3;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid rgba(190,201,230,.2); border-radius: 9px;
  background: rgba(8,11,22,.82); cursor: pointer;
  font-size: 17px; line-height: 1; color: rgba(214,224,255,.85);
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.phil-card-close:hover { color: #fff; background: rgba(255,138,91,.2); border-color: rgba(255,146,102,.5); }

/* ---------- the plate -------------------------------------------------------- */
/* Marble, oil and press photograph reconciled: exposure was normalised when the
   plates were built, and the tint here is the figure's TRADITION hue, so the
   thing that makes them consistent is also the thing that says where they are
   from. Hover dissolves it back to the original. */
/* Header: plate on the left, identity beside it. At 560px there is room for
   both, which stops the name and dates being pushed a screenful down the card
   by a full-width banner. */
.phil-d-head { display: flex; gap: 1rem; align-items: flex-start; padding-top: 1.15rem; }
.phil-d-id { min-width: 0; flex: 1; padding-top: .1rem; }
.phil-d-id .phil-t-row { margin-top: .75rem; }
.phil-sub {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(190,201,230,.34); margin: .5rem 0 .3rem;
}
.phil-sub:first-child { margin-top: 0; }
.phil-d-count {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  padding: .05rem .3rem; border-radius: 3px;
  background: rgba(190,201,230,.12); color: rgba(214,224,255,.7);
}
.phil-d-note {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-family: Inter, system-ui, sans-serif; font-size: 11px; color: rgba(190,201,230,.34);
}
/* chips carry their figure's geography, so a row of them reads as a map */
.phil-chip-dot { width: 5px; height: 5px; border-radius: 99px; flex: 0 0 auto; background: hsl(var(--h, 220), 68%, 64%); }
.phil-chip-y { color: rgba(190,201,230,.45); }

.phil-plate {
  position: relative; margin: 0; height: 236px; width: 188px; flex: 0 0 188px;
  border-radius: 11px;
  overflow: hidden; isolation: isolate; cursor: crosshair;
}
.phil-plate img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  display: block;
  filter: grayscale(1) contrast(1.06) brightness(.98);
  transform: scale(1.02);
  transition: filter .5s var(--ease), transform .8s var(--ease-out);
}
.phil-plate-tint {
  position: absolute; inset: 0; pointer-events: none;
  /* A gentle wash, not a filter. Grayscale is doing the heavy lifting of making
     marble, oil and photograph read as one kind of object; the hue only has to
     whisper where the figure is from. At .72 every plate came out as a solid
     monochrome poster. */
  background: hsl(var(--h), 58%, 50%);
  mix-blend-mode: color;
  opacity: .3;
  transition: opacity .5s var(--ease);
}
/* vignette + the fade into the card body, so the plate has no hard bottom edge */
.phil-plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 34%, transparent 42%, rgba(4,6,14,.62) 100%),
    linear-gradient(to bottom, transparent 58%, rgba(8,11,21,.9) 100%);
}
.phil-plate:hover img { filter: grayscale(0) contrast(1.02); transform: scale(1.06); }
.phil-plate:hover .phil-plate-tint { opacity: 0; }
.phil-plate figcaption {
  position: absolute; left: .5rem; right: .5rem; bottom: .4rem; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase;
}
.phil-plate-medium { color: rgba(226,236,255,.62); }
.phil-plate-cred { color: rgba(190,201,230,.34); white-space: nowrap; font-size: 7.5px; }
.phil-plate-cred:hover { color: rgba(226,236,255,.9); text-decoration: underline; }

.phil-d-kind {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--k, var(--c-coral-1));
  display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem;
}
.phil-d-kind::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.phil-d-name { font-size: 33px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: #f2f5ff; }
.phil-d-name.is-emph { color: #ffeee4; }
.phil-d-name.is-emph::after {
  content: ""; display: block; width: 34px; height: 2px; margin-top: .4rem;
  background: rgba(255,146,102,.75);
}
.phil-d-when {
  font-family: var(--mono); font-size: 12px; color: rgba(190,201,230,.62);
  margin-top: .22rem; display: flex; flex-wrap: wrap; gap: .55rem;
}
.phil-d-when span::after { content: "·"; margin-left: .55rem; color: rgba(190,201,230,.3); }
.phil-d-when span:last-child::after { content: none; }

/* role / geography / question-band chips under the name */
.phil-d-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.phil-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: .16rem .4rem; border-radius: 3px;
  border: 1px solid rgba(190,201,230,.16); color: rgba(190,201,230,.62);
}
.phil-tag-trad {
  border-color: hsla(var(--h), 70%, 62%, .45);
  background: hsla(var(--h), 70%, 55%, .13);
  color: hsl(var(--h), 72%, 80%);
}
.phil-tag-band { border-style: dashed; }

.phil-d-line { font-size: 17px; line-height: 1.6; margin: 1.05rem 0 0; color: #cdd6ee; }

.phil-d-block { margin-top: 1.25rem; }
.phil-d-h {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: rgba(190,201,230,.45); margin-bottom: .45rem;
  display: flex; align-items: center; gap: .5rem;
}
.phil-d-h::after { content: ""; flex: 1; height: 1px; background: rgba(190,201,230,.12); }

/* transmission readout — the epistemic instrument, not a badge */
.phil-t-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.phil-t-meter { flex: 1; height: 4px; border-radius: 2px; background: rgba(190,201,230,.12); overflow: hidden; }
.phil-t-fill { height: 100%; background: var(--phil-star); box-shadow: 0 0 10px rgba(223,230,255,.7); }
.phil-t-name { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: #eaf0ff; white-space: nowrap; }
.phil-t-gloss { font-size: 13px; line-height: 1.55; color: rgba(190,201,230,.72); }
.phil-t-note  { font-size: 14.5px; line-height: 1.62; color: #c2cce6; margin-top: .5rem; }

.phil-works { display: flex; flex-direction: column; gap: .18rem; }
.phil-work {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: 14.5px; color: #cdd6ee;
}
.phil-work-y { font-family: var(--mono); font-size: 10px; color: rgba(190,201,230,.5); min-width: 5.4ch; }

.phil-srcs { display: flex; flex-direction: column; gap: .45rem; }
.phil-src {
  display: block;
  padding: .5rem .6rem;
  border: 1px solid rgba(190,201,230,.12);
  border-left: 2px solid var(--tier-c, rgba(190,201,230,.4));
  border-radius: 4px;
  background: rgba(190,201,230,.035);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.phil-src:hover { background: rgba(190,201,230,.08); border-color: rgba(190,201,230,.24); border-left-color: var(--tier-c); }
.phil-src-top { display: flex; align-items: baseline; gap: .5rem; }
.phil-src-lab { font-size: 14.5px; font-weight: 600; color: #e6ecff; flex: 1; }
.phil-src-tier {
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--tier-c); white-space: nowrap;
}
.phil-src-note { font-size: 12.5px; line-height: 1.5; color: rgba(190,201,230,.66); margin-top: .28rem; }

.phil-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.phil-chip {
  font-family: var(--mono); font-size: 11.5px;
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .36rem .6rem; border-radius: 4px;
  border: 1px solid rgba(190,201,230,.16);
  color: rgba(214,224,255,.8); cursor: pointer;
  background: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.phil-chip:hover { background: rgba(190,201,230,.1); color: #fff; border-color: hsla(var(--h, 220), 70%, 62%, .55); }

/* admin-gated emphasis control — the one thing on this page that needs a user,
   so it is gated AND labelled, per the section rule */
.phil-admin-tag {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--c-admin);
  border: 1px solid color-mix(in srgb, var(--c-admin) 40%, transparent);
  background: color-mix(in srgb, var(--c-admin) 12%, transparent);
  padding: .12rem .35rem; border-radius: 3px;
  margin-left: -.15rem;
}
.phil-d-h .phil-admin-tag { text-transform: uppercase; }

/* One press, directly under the name it acts on. The mark itself is the
   button's glyph — the same ring-and-ticks the canvas draws — so the control
   and the thing it does are visibly the same object. */
.phil-mark-row { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.phil-mark {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .34rem .6rem; border-radius: 6px;
  border: 1px solid rgba(190,201,230,.18);
  background: rgba(190,201,230,.05);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: rgba(214,224,255,.72); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.phil-mark:hover { color: #ffd9c6; border-color: rgba(255,146,102,.45); background: rgba(255,138,91,.12); }
.phil-mark.on { color: #ffd9c6; border-color: rgba(255,146,102,.6); background: rgba(255,138,91,.18); }
.phil-mark kbd {
  font-family: var(--mono); font-size: 9px; padding: .05rem .22rem;
  border: 1px solid rgba(190,201,230,.22); border-radius: 3px;
  color: rgba(190,201,230,.5); background: rgba(0,0,0,.25);
}
.phil-mark .phil-key-mark { border-color: currentColor; }
.phil-mark .phil-key-mark::before, .phil-mark .phil-key-mark::after { background: currentColor; }
.phil-emph-state {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  color: rgba(190,201,230,.5);
}

/* rated-R gate */
.phil-rated {
  border: 1px solid rgba(255,138,91,.34);
  border-radius: 5px;
  background: rgba(255,138,91,.055);
  padding: .8rem .85rem;
}
.phil-rated-tag {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--c-coral-1); margin-bottom: .55rem;
}
.phil-rated p { font-size: 12.5px; line-height: 1.6; color: #ccd5ec; margin: 0 0 .6rem; }
.phil-rated p:last-of-type { margin-bottom: .85rem; }
.phil-rated-open {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .5rem .85rem; border-radius: 5px;
  border: 1px solid rgba(255,138,91,.5);
  background: rgba(255,138,91,.15); color: #ffb894;
  cursor: pointer; width: 100%;
  transition: background var(--t-fast) var(--ease);
}
.phil-rated-open:hover { background: rgba(255,138,91,.26); }

/* ---------- index overlay --------------------------------------------------- */
.phil-index {
  position: absolute; inset: 0;
  background: rgba(5,7,14,.93);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  overflow-y: auto; overscroll-behavior: contain;
  z-index: 5; padding: 1.4rem var(--pad-x) 3rem;
  animation: phil-fade .22s var(--ease-out);
}
@keyframes phil-fade { from { opacity: 0; } to { opacity: 1; } }
.phil-index-inner { max-width: 1100px; margin: 0 auto; color: #cbd4ec; }
.phil-ix-h {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: rgba(190,201,230,.45);
  margin: 1.6rem 0 .6rem; display: flex; align-items: center; gap: .6rem;
}
.phil-ix-h:first-child { margin-top: 0; }
.phil-ix-h::after { content: ""; flex: 1; height: 1px; background: rgba(190,201,230,.12); }
.phil-ix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .1rem .9rem; }
/* The row is a container, not a control: it holds the jump button and (for
   admin) the mark button, because marking a run of figures should never mean
   leaving the list. */
.phil-ix-row { display: flex; align-items: center; gap: .2rem; border-radius: 3px; }
.phil-ix-row:hover { background: rgba(190,201,230,.08); }
.phil-ix-go {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: .6rem;
  padding: .3rem .35rem; border-radius: 3px;
  background: none; border: none; text-align: left; cursor: pointer;
  color: inherit; font: inherit;
}
.phil-ix-mark {
  flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 5px;
  background: none; cursor: pointer; opacity: .3;
  color: rgba(255,168,124,.9);
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.phil-ix-row:hover .phil-ix-mark { opacity: .7; }
.phil-ix-mark:hover { opacity: 1; background: rgba(255,138,91,.14); border-color: rgba(255,146,102,.4); }
.phil-ix-mark[aria-pressed="true"] { opacity: 1; background: rgba(255,138,91,.16); border-color: rgba(255,146,102,.34); }
.phil-ix-mark .phil-key-mark { border-color: currentColor; }
.phil-ix-mark .phil-key-mark::before, .phil-ix-mark .phil-key-mark::after { background: currentColor; }
.phil-ix-y { font-family: var(--mono); font-size: 10.5px; color: rgba(190,201,230,.45); min-width: 9ch; }
.phil-ix-n { font-size: 13.5px; font-weight: 600; color: #e2e9ff; }
.phil-ix-lum { width: 26px; height: 3px; border-radius: 2px; background: rgba(223,230,255,var(--l)); margin-left: auto; flex: 0 0 auto; }
.phil-ix-row.rated .phil-ix-n { color: #ffb894; }
.phil-ix-row.emph { box-shadow: inset 2px 0 0 rgba(255,146,102,.85); }
.phil-ix-row.emph .phil-ix-n { color: #ffeee4; font-weight: 700; }
/* index nesting: a role heading, then question bands indented under it */
.phil-ix-role { color: rgba(226,236,255,.72); font-size: 11px; letter-spacing: .2em; margin-top: 2.1rem; }
.phil-ix-role:first-of-type { margin-top: 0; }
.phil-ix-n-count {
  font-size: 9px; padding: .1rem .3rem; border-radius: 3px;
  background: rgba(190,201,230,.12); color: rgba(214,224,255,.7); letter-spacing: .06em;
}
.phil-ix-gloss {
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 10.5px;
  color: rgba(190,201,230,.36); font-family: Inter, system-ui, sans-serif;
}
.phil-ix-sub { margin: 1rem 0 .4rem 1.1rem; font-size: 9px; color: rgba(190,201,230,.34); }
.phil-ix-sub::after { background: rgba(190,201,230,.07); }
.phil-ix-trad {
  width: 6px; height: 6px; border-radius: 99px; flex: 0 0 auto;
  background: hsl(var(--h), 68%, 62%);
  box-shadow: 0 0 6px hsla(var(--h), 70%, 60%, .8);
}
.phil-ix-also {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em;
  color: rgba(190,201,230,.4); border: 1px solid rgba(190,201,230,.14);
  border-radius: 3px; padding: 0 .22rem;
}
#phil-ix-emph-h { color: rgba(255,180,150,.7); }
#phil-ix-emph-h::after { background: rgba(255,146,102,.2); }

/* ---------- responsive ------------------------------------------------------ */
@media (max-width: 960px) {
  .phil-head { flex-wrap: wrap; gap: .6rem .9rem; padding-bottom: .55rem; }
  .phil-controls { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .phil-legend { display: none; }
}
@media (max-width: 640px) {
  .phil-head h1 { font-size: 16px; }
  .phil-seg button { padding: .38rem .48rem; font-size: 9.5px; }
  .phil-card { width: min(400px, calc(100vw - 20px)); max-height: 72vh; }
  .phil-d-head { flex-direction: column; }
  .phil-plate { width: 100%; flex-basis: auto; height: 190px; }
  .phil-hud { font-size: 10px; max-width: 30ch; }
  .phil-hint { display: none; }
}
/* Touch has no hover, so the mark button can never be revealed by one. */
@media (hover: none) {
  .phil-ix-mark { opacity: .75; }
  .phil-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .phil-index, .phil-flash { animation: none; }
}