/* Pharos — the lamp room (renderer/pharos/pharos.js).
 *
 * Direction: a lighthouse's lamp room at night. Black glass panes, a brass
 * instrument rail, and ONE light source — Pharos's own beacon orange — that
 * lights what is live and leaves what is dark, dark. The beam sweeps once
 * when the room opens (the reveal), then holds still; the data does the
 * moving after that. Pharos's own type (Outfit, the font its beta UI wears,
 * already shipped with the HearthSeek bundle) for the headings; Hearth's
 * body face for everything else, so the room reads as Pharos's instrument
 * mounted inside Hearth's house.
 *
 * COLOUR. The three series hues were stepped in OKLCH inside the dark band
 * and run through the dataviz validator against this surface (#0c0a0e):
 * lightness band, chroma floor, CVD separation (worst ΔE 13.9), normal-vision
 * floor (23.6) and contrast all PASS. Do not re-pick by eye — re-run it.
 * Identity never rides on colour alone: every series is named in the legend
 * and on its last point, every state plate carries its word.
 */
@font-face {
  font-family: 'Pharos Outfit';
  src: url('../hearthseek/assets/outfit.ttf') format('truetype');
  font-weight: 300 800;
  font-display: swap;
}

.pharos {
  --ph-bg:        #0c0a0e;
  --ph-bg-2:      #110e14;
  --ph-glass:     rgba(255, 255, 255, .035);
  --ph-glass-2:   rgba(255, 255, 255, .06);
  --ph-line:      rgba(255, 255, 255, .075);
  --ph-line-2:    rgba(255, 255, 255, .14);
  --ph-beacon:    #ff8c1a;
  --ph-beacon-2:  #ff6000;
  --ph-beacon-rgb: 255, 140, 26;
  --ph-brass:     #d9b26a;
  --ph-brass-dim: #8e7542;
  --ph-ink:       #f3efe9;
  --ph-dim:       #a69f95;
  --ph-mute:      #6d6760;
  --ph-s-searches:  #25a08c;
  --ph-s-downloads: #e06a0c;
  --ph-s-completed: #8a6fe6;
  --ph-head: 'Pharos Outfit', 'Outfit', system-ui, sans-serif;
  --ph-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ph-ease: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  z-index: 1;
  height: calc(100vh - 60px - 41px - var(--np-h, 0px));
  overflow: hidden;
  display: flex;
  color: var(--ph-ink);
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(var(--ph-beacon-rgb), .13), transparent 60%),
    radial-gradient(700px 400px at 100% 110%, rgba(217, 178, 106, .07), transparent 60%),
    linear-gradient(180deg, var(--ph-bg-2), var(--ph-bg) 45%, #09080b);
}
.pharos.hidden { display: none; }
.pharos-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 30px 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── the beam: one sweep across the room when it opens ──────────────── */
.pharos::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: conic-gradient(from 200deg at 8% 0%, transparent 0deg, rgba(var(--ph-beacon-rgb), .16) 10deg, rgba(255, 210, 140, .22) 16deg, transparent 28deg, transparent 360deg);
}
.pharos.ph-enter::before { animation: ph-beam 1.5s var(--ph-ease) 1 both; }
@keyframes ph-beam {
  0%   { opacity: 0; transform: rotate(-30deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(60deg); }
}
.pharos-scroll > * { position: relative; z-index: 1; }

/* ── lane bar: Overview / Configuration / Logs ──────────────────────── */
.pharos-lanes { margin-bottom: 2px; }
.pharos-lanes .vlane-btn { background: var(--ph-glass); border-color: var(--ph-line); color: var(--ph-dim); }
.pharos-lanes .vlane-btn:hover { border-color: var(--ph-line-2); color: var(--ph-ink); }
.pharos-lanes .vlane-btn.active {
  color: var(--ph-ink);
  border-color: rgba(var(--ph-beacon-rgb), .55);
  background: linear-gradient(180deg, rgba(var(--ph-beacon-rgb), .18), rgba(var(--ph-beacon-rgb), .07));
  box-shadow: 0 0 0 1px rgba(var(--ph-beacon-rgb), .18), 0 6px 22px rgba(var(--ph-beacon-rgb), .14);
}
.pharos-lanes .vlane-btn:focus-visible { outline: 2px solid var(--ph-beacon); outline-offset: 2px; }

/* ── head ───────────────────────────────────────────────────────────── */
.ph-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--ph-line);
}
.ph-head-mark {
  width: 64px; height: 64px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 18px rgba(var(--ph-beacon-rgb), .45));
}
.ph-head-text { min-width: 0; flex: 1 1 auto; }
.ph-title {
  margin: 0;
  font: 600 30px/1.05 var(--ph-head);
  letter-spacing: -.01em;
  text-wrap: balance;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.ph-title small { font: 400 15px/1 var(--ph-head); color: var(--ph-dim); letter-spacing: .02em; }
.ph-sub { margin: 6px 0 0; color: var(--ph-dim); font-size: 13.5px; text-wrap: pretty; max-width: 70ch; }
.ph-head-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.ph-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--ph-line-2);
  font: 600 12px/1 var(--ph-head);
  letter-spacing: .02em;
  color: var(--ph-dim);
  white-space: nowrap;
}
.ph-chip::before { content: ''; width: 14px; height: 14px; border-radius: 3px; background: var(--ph-mute); flex: 0 0 auto; }
.ph-chip.is-lit { color: var(--ph-ink); border-color: rgba(var(--ph-beacon-rgb), .5); }
.ph-chip.is-lit::before { background: linear-gradient(180deg, #ffc06a, var(--ph-beacon-2)); box-shadow: 0 0 10px rgba(var(--ph-beacon-rgb), .7); }
.ph-asof { font-size: 12px; color: var(--ph-mute); white-space: nowrap; }
.ph-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--ph-line-2);
  background: var(--ph-glass);
  color: var(--ph-ink);
  font: 600 13px/1 var(--ph-head);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, background .2s, transform .2s var(--ph-ease);
}
.ph-btn:hover { border-color: rgba(var(--ph-beacon-rgb), .5); background: var(--ph-glass-2); }
.ph-btn:active { transform: translateY(1px); }
.ph-btn:focus-visible { outline: 2px solid var(--ph-beacon); outline-offset: 2px; }
.ph-btn.is-primary { background: linear-gradient(180deg, #ff9a33, var(--ph-beacon-2)); border-color: transparent; color: #1a0d02; }
.ph-btn.is-primary:hover { filter: brightness(1.06); }
.ph-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ph-link { background: none; border: 0; color: var(--ph-brass); font: 600 13px/1 var(--ph-head); cursor: pointer; padding: 10px 0 0; text-align: left; }
.ph-link:hover { color: var(--ph-beacon); }
.ph-link:focus-visible { outline: 2px solid var(--ph-beacon); outline-offset: 2px; border-radius: 4px; }

/* ── room swap ──────────────────────────────────────────────────────── */
.ph-room { display: flex; flex-direction: column; gap: 20px; }
.ph-room-in > * { animation: ph-rise .5s var(--ph-ease) both; }
.ph-room-in > *:nth-child(2) { animation-delay: .06s; }
.ph-room-in > *:nth-child(3) { animation-delay: .12s; }
.ph-room-in > *:nth-child(4) { animation-delay: .18s; }
.ph-room-in > *:nth-child(5) { animation-delay: .24s; }
@keyframes ph-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── notices, skeleton, the dark lamp ───────────────────────────────── */
.ph-notice {
  padding: 18px 20px;
  border: 1px solid rgba(var(--ph-beacon-rgb), .35);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--ph-beacon-rgb), .09), transparent);
}
.ph-notice-t { margin: 0 0 6px; font: 600 16px/1.2 var(--ph-head); }
.ph-notice-p { margin: 0 0 12px; color: var(--ph-dim); font-size: 13.5px; max-width: 70ch; text-wrap: pretty; }
.ph-skel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ph-skel-tile, .ph-skel-wide { border-radius: 14px; background: var(--ph-glass); animation: ph-pulse 1.4s ease-in-out infinite; }
.ph-skel-tile { height: 96px; }
.ph-skel-wide { grid-column: 1 / -1; height: 260px; }
@keyframes ph-pulse { 50% { opacity: .55; } }
.ph-empty { padding: 26px 16px; text-align: center; color: var(--ph-mute); font-size: 13px; }
.ph-connect {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--ph-line);
  border-radius: 18px;
  background: var(--ph-glass);
}
.ph-connect-art { display: grid; place-items: center; min-height: 220px; border-radius: 14px; background: radial-gradient(260px 220px at 50% 60%, rgba(var(--ph-beacon-rgb), .18), transparent 70%); }
.ph-connect-lh { width: 160px; height: 160px; filter: saturate(.3) brightness(.7); transition: filter .6s; }
.ph-connect:hover .ph-connect-lh { filter: none; }
.ph-connect-t { margin: 0 0 8px; font: 600 26px/1.1 var(--ph-head); }
.ph-connect-p { margin: 0 0 14px; color: var(--ph-dim); font-size: 14px; max-width: 62ch; text-wrap: pretty; }
.ph-connect-steps { margin: 0; padding-left: 20px; color: var(--ph-ink); font-size: 13.5px; display: grid; gap: 6px; }
.ph-connect-steps li::marker { color: var(--ph-beacon); font-weight: 700; }

/* ── health plates ──────────────────────────────────────────────────── */
/* A row of plates that never ends on a gap: the plates share the row, and a short last
   row stretches its plates to the edge instead of leaving blank space beside one. */
.ph-health { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-health .ph-plate { flex: 1 1 190px; }
.ph-plate {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--ph-line);
  background: var(--ph-glass);
  min-width: 0;
}
.ph-plate-ico { width: 26px; height: 26px; flex: 0 0 auto; opacity: .55; }
.ph-plate.is-lit { border-color: rgba(var(--ph-beacon-rgb), .42); background: linear-gradient(180deg, rgba(var(--ph-beacon-rgb), .12), rgba(var(--ph-beacon-rgb), .03)); box-shadow: inset 0 1px 0 rgba(255, 210, 140, .12); }
.ph-plate.is-lit .ph-plate-ico { opacity: 1; filter: drop-shadow(0 0 6px rgba(var(--ph-beacon-rgb), .5)); }
.ph-plate.is-dark { border-style: dashed; }
.ph-plate-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ph-plate-l { font: 600 12px/1 var(--ph-head); letter-spacing: .04em; text-transform: uppercase; color: var(--ph-dim); white-space: nowrap; }
.ph-plate.is-lit .ph-plate-l { color: var(--ph-brass); }
.ph-plate-s { font-size: 13px; color: var(--ph-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-plate.is-dark .ph-plate-s { color: var(--ph-dim); }

/* ── stat tiles: one shape, one size, a grid that never ends ragged ─── */
.ph-stats { display: grid; gap: 12px; grid-template-columns: repeat(6, 1fr); }
.ph-stats[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.ph-stat {
  position: relative;
  min-height: 108px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--ph-line);
  background: var(--ph-glass);
  overflow: hidden;
  min-width: 0;
}
.ph-stat::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--ph-brass-dim);
}
.ph-stat.is-searches::after { background: var(--ph-s-searches); }
.ph-stat.is-downloads::after { background: var(--ph-s-downloads); }
.ph-stat.is-completed::after { background: var(--ph-s-completed); }
.ph-stat-n { font: 600 32px/1 var(--ph-head); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ph-stat-l { margin-top: 8px; font: 600 12.5px/1.2 var(--ph-head); color: var(--ph-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-stat-s { margin-top: 4px; font-size: 12px; color: var(--ph-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── rows of panels that end together ───────────────────────────────── */
.ph-row { display: grid; gap: 16px; align-items: stretch; }
.ph-row-chart { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ph-row-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-panel {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 100%;
  padding: 16px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--ph-line);
  background: var(--ph-glass);
}
.ph-panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ph-panel-t { margin: 0; font: 600 16px/1.2 var(--ph-head); white-space: nowrap; }
.ph-panel-s { font-size: 12.5px; color: var(--ph-dim); }
.ph-chart-note { margin: 10px 0 0; font-size: 12px; color: var(--ph-mute); }

/* charts */
.ph-chart-wrap { position: relative; }
.ph-svg { display: block; max-width: 100%; height: auto; }
.ph-hours .ph-chart-wrap { margin-top: auto; }
.ph-grid { stroke: var(--ph-line); stroke-width: 1; }
.ph-axis { fill: var(--ph-mute); font-size: 11px; font-family: var(--ph-mono); }
.ph-dlabel { fill: var(--ph-ink); font-size: 11px; font-weight: 600; font-family: var(--ph-head); paint-order: stroke; stroke: var(--ph-bg); stroke-width: 4px; stroke-linejoin: round; }
.ph-area { opacity: .10; }
.ph-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ph-enter .ph-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: ph-draw 1.4s var(--ph-ease) forwards; }
.ph-enter .ph-line[data-i="1"] { animation-delay: .15s; }
.ph-enter .ph-line[data-i="2"] { animation-delay: .3s; }
@keyframes ph-draw { to { stroke-dashoffset: 0; } }
.ph-cross { stroke: var(--ph-line-2); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity .15s; }
.ph-mark { stroke: var(--ph-bg); stroke-width: 2; transition: opacity .15s; }
.ph-tip {
  position: absolute; top: 6px; left: 0;
  width: 150px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ph-line-2);
  background: rgba(16, 13, 20, .96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  font-size: 12px;
  pointer-events: none;
  z-index: 2;
}
.ph-tip-t { font: 600 12px/1.2 var(--ph-head); margin-bottom: 6px; }
.ph-tip-r { display: flex; align-items: center; gap: 6px; color: var(--ph-dim); }
.ph-tip-r b { margin-left: auto; color: var(--ph-ink); font-variant-numeric: tabular-nums; }
.ph-tip-x { margin-top: 4px; color: var(--ph-mute); font-size: 11px; }
.ph-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.ph-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--ph-dim); }
.ph-legend-i { display: inline-flex; align-items: center; gap: 6px; }
.ph-table { margin-top: 8px; font-size: 12px; color: var(--ph-dim); }
.ph-table summary { cursor: pointer; color: var(--ph-mute); }
.ph-table summary:focus-visible { outline: 2px solid var(--ph-beacon); outline-offset: 2px; }
.ph-table table { width: 100%; border-collapse: collapse; margin-top: 8px; max-height: 240px; display: block; overflow: auto; font-variant-numeric: tabular-nums; }
.ph-table th, .ph-table td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--ph-line); }
.ph-table th:first-child, .ph-table td:first-child { text-align: left; }
.ph-bar { fill: var(--ph-brass-dim); transition: fill .2s; }
.ph-bar:hover { fill: var(--ph-brass); }
.ph-bar.is-now { fill: var(--ph-beacon); filter: drop-shadow(0 0 6px rgba(var(--ph-beacon-rgb), .6)); }
.ph-hours .ph-svg { margin-top: auto; }

/* sources / library bars */
.ph-src-list, .ph-dl-list, .ph-lib-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ph-src { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.ph-src-ico { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto; object-fit: contain; }
.ph-src-fallback { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto; display: grid; place-items: center; background: var(--ph-glass-2); color: var(--ph-dim); font: 700 11px/1 var(--ph-head); }
.ph-src-body { flex: 1 1 auto; min-width: 0; }
.ph-src-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ph-src-name { font: 600 13px/1.2 var(--ph-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ph-src-n { margin-left: auto; font-size: 12px; color: var(--ph-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-tag { font: 600 10.5px/1 var(--ph-head); letter-spacing: .04em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; background: var(--ph-glass-2); color: var(--ph-dim); white-space: nowrap; flex: 0 0 auto; }
.ph-tag.is-private { color: var(--ph-brass); background: rgba(217, 178, 106, .12); }
.ph-rail { margin-top: 6px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.ph-rail-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--ph-brass-dim), var(--ph-brass)); transition: width .8s var(--ph-ease); }
.ph-rail-fill.is-lib { background: linear-gradient(90deg, #5e4a9e, var(--ph-s-completed)); }
.ph-rail.is-live .ph-rail-fill { background: linear-gradient(90deg, var(--ph-beacon-2), #ffb366); position: relative; }
.ph-rail.is-live .ph-rail-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: ph-sheen 2.2s linear infinite; }
@keyframes ph-sheen { to { transform: translateX(100%); } }
.ph-src-list.is-plain .ph-rail { display: none; }
.ph-sources .ph-src-list, .ph-lib-list.is-fill { flex: 1 1 auto; justify-content: space-evenly; }
.ph-library .ph-chart-note { margin-top: 12px; }

/* downloading now */
.ph-dl { min-width: 0; display: flex; gap: 12px; align-items: flex-start; }
.ph-dl-body { flex: 1 1 auto; min-width: 0; }
.ph-dl-top { display: flex; gap: 10px; align-items: baseline; }
.ph-dl-name { font: 600 13px/1.25 var(--ph-head); min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-dl-pct { font-variant-numeric: tabular-nums; color: var(--ph-beacon); font: 600 13px/1 var(--ph-head); }
.ph-dl-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--ph-dim); }
.ph-dl-meta span { white-space: nowrap; }

/* the mascot: art that fills a quiet panel and withdraws when rows arrive */
.ph-empty-art { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; text-align: center; }
/* Cherry: the same part placement as HearthSeek's mascot component (body 408×612; eyes,
   mouth and hands cut smaller and placed over it), so the glove is a glove, not a cover. */
.ph-mascot { position: relative; width: 120px; height: 180px; animation: ph-breath 4s ease-in-out infinite; }
.ph-mascot img { position: absolute; height: auto; object-fit: contain; }
.ph-mascot-body { inset: 0; width: 100%; height: 100%; }
.ph-mascot-eyes-open { top: 14%; left: 10%; width: 80%; }
.ph-mascot-mouth-smile { top: 24%; left: 20%; width: 60%; }
.ph-mascot-fist-left { top: 42%; left: -6%; width: 34%; }
.ph-mascot-hand-wave-right { top: 42%; left: 72%; width: 34%; transform-origin: top center; animation: ph-wave 2.6s ease-in-out infinite; }
@keyframes ph-breath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes ph-wave { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(14deg); } 94% { transform: rotate(-8deg); } }
.ph-empty-t { font: 600 15px/1.2 var(--ph-head); }
.ph-empty-p { font-size: 12.5px; color: var(--ph-dim); max-width: 36ch; text-wrap: pretty; }

/* ledger */
.ph-ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ph-row-l {
  display: grid;
  grid-template-columns: 58px 92px 30px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  min-height: 40px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--ph-line);
  font-size: 13px;
}
.ph-ledger-mini .ph-row-l { grid-template-columns: 70px 92px 30px minmax(0, 1fr) auto; min-height: 36px; padding: 6px 2px; }
/* the art column: a poster when the title has one, the kind's mark when it does not */
.ph-l-art { width: 30px; height: 45px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; background: var(--ph-glass-2); border: 1px solid var(--ph-line); }
.ph-l-art.has-art { border-color: rgba(var(--ph-beacon-rgb), .28); }
.ph-l-poster { width: 30px; height: 45px; object-fit: cover; display: block; }
.ph-l-kindico { width: 18px; height: 18px; opacity: .6; }
.ph-row-l:last-child { border-bottom: 0; }
.ph-l-time { font-family: var(--ph-mono); font-size: 12px; color: var(--ph-mute); white-space: nowrap; }
.ph-l-kind { font: 600 10.5px/1 var(--ph-head); letter-spacing: .05em; text-transform: uppercase; color: var(--ph-dim); white-space: nowrap; padding: 4px 0; border-left: 3px solid var(--ph-brass-dim); padding-left: 8px; }
.kind-search .ph-l-kind { border-color: var(--ph-s-searches); }
.kind-download .ph-l-kind { border-color: var(--ph-s-downloads); }
.kind-completed .ph-l-kind { border-color: var(--ph-s-completed); }
.kind-rss .ph-l-kind, .kind-autograb .ph-l-kind { border-color: var(--ph-beacon); }
.kind-hearth .ph-l-kind { border-color: var(--accent-warm, #f59e0b); }
.ph-l-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ph-l-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-l-detail { font-size: 12px; color: var(--ph-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-l-user { font-size: 12px; color: var(--ph-brass); white-space: nowrap; }
.ph-ledger-day { padding: 14px 6px 6px; font: 600 12px/1 var(--ph-head); letter-spacing: .05em; text-transform: uppercase; color: var(--ph-mute); }
.ph-ledger-day:first-child { padding-top: 2px; }

/* logs room */
.ph-logbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ph-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.ph-chip-k {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ph-line);
  background: var(--ph-glass);
  color: var(--ph-dim);
  font: 600 12.5px/1 var(--ph-head);
  cursor: pointer; white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.ph-chip-k:hover { color: var(--ph-ink); border-color: var(--ph-line-2); }
.ph-chip-k.active { color: var(--ph-ink); border-color: rgba(var(--ph-beacon-rgb), .55); background: rgba(var(--ph-beacon-rgb), .12); }
.ph-chip-k:focus-visible { outline: 2px solid var(--ph-beacon); outline-offset: 2px; }
.ph-chip-n { font-size: 11px; color: var(--ph-mute); font-variant-numeric: tabular-nums; }
.ph-chip-k.active .ph-chip-n { color: var(--ph-brass); }
.ph-search { flex: 0 1 300px; min-width: 200px; }
.ph-search-in {
  width: 100%; min-height: 38px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--ph-line-2);
  background: rgba(0, 0, 0, .35); color: var(--ph-ink);
  font-size: 16px; font-family: inherit;
}
.ph-search-in:focus { outline: 2px solid var(--ph-beacon); outline-offset: 1px; border-color: transparent; }
.ph-loglist { border: 1px solid var(--ph-line); border-radius: 16px; background: var(--ph-glass); padding: 6px 14px; }
.ph-console { font-family: var(--ph-mono); font-size: 12px; max-height: 60vh; overflow: auto; padding: 8px 0; }
.ph-console-l { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, .03); }
.ph-console-t { color: var(--ph-mute); white-space: nowrap; }
.ph-console-m { color: var(--ph-dim); overflow-wrap: anywhere; }

/* configuration */
.ph-cfg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ph-cfg { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--ph-line); background: var(--ph-glass); }
.ph-cfg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ph-cfg-ico { width: 30px; height: 30px; flex: 0 0 auto; }
.ph-cfg-ht { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-kvs { margin: 0; display: flex; flex-direction: column; }
.ph-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ph-line); font-size: 13px; }
.ph-kv:last-child { border-bottom: 0; }
.ph-kv dt { color: var(--ph-dim); white-space: nowrap; }
.ph-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.ph-kv dd.is-mono { font-family: var(--ph-mono); font-size: 12.5px; }
.ph-grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ph-grid-table th { text-align: left; font: 600 11px/1 var(--ph-head); letter-spacing: .05em; text-transform: uppercase; color: var(--ph-mute); padding: 6px 8px 8px; border-bottom: 1px solid var(--ph-line-2); white-space: nowrap; }
.ph-grid-table td { padding: 8px; border-bottom: 1px solid var(--ph-line); min-width: 0; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-grid-table td:first-child { width: 40%; }
.ph-grid-table tr:last-child td { border-bottom: 0; }
.ph-grid-table tr.is-unset td { color: var(--ph-mute); }
.ph-warn { margin: 0; padding-left: 18px; color: var(--ph-dim); font-size: 13px; font-family: var(--ph-mono); }

/* ── widths ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .ph-stats { grid-template-columns: repeat(3, 1fr); }
  .ph-row-chart { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .pharos-scroll { padding: 18px 16px 48px; }
  .ph-row-half, .ph-cfg-grid { grid-template-columns: 1fr; }
  .ph-connect { grid-template-columns: 1fr; }
  .ph-connect-art { min-height: 160px; }
  .ph-head { flex-wrap: wrap; }
  .ph-head-right { width: 100%; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .ph-stats, .ph-stats[data-count="3"] { grid-template-columns: repeat(2, 1fr); }
  .ph-stats[data-count="3"] .ph-stat:last-child { grid-column: 1 / -1; }
  .ph-title { font-size: 24px; }
  .ph-head-mark { width: 48px; height: 48px; }
  .ph-row-l { grid-template-columns: 48px minmax(0, 1fr); row-gap: 2px; }
  .ph-row-l .ph-l-kind { grid-column: 2; }
  .ph-row-l .ph-l-art { grid-column: 1; grid-row: 2 / span 2; }
  .ph-row-l .ph-l-body { grid-column: 2; }
  .ph-row-l .ph-l-user { grid-column: 2; }
  .ph-ledger-mini .ph-row-l { grid-template-columns: 60px minmax(0, 1fr); }
  .ph-kv { grid-template-columns: 1fr; gap: 2px; }
  .ph-search { flex-basis: 100%; }
  .ph-health { grid-template-columns: 1fr 1fr; }
  .ph-grid-table { font-size: 12.5px; }
  .ph-grid-table td { white-space: normal; max-width: none; overflow-wrap: anywhere; padding: 6px 4px; }
  .ph-grid-table th { padding: 4px 4px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .pharos.ph-enter::before, .ph-room-in > *, .ph-enter .ph-line, .ph-mascot, .ph-mascot-hand-wave-right, .ph-rail.is-live .ph-rail-fill::after, .ph-skel-tile, .ph-skel-wide { animation: none !important; }
  .ph-enter .ph-line { stroke-dashoffset: 0; }
  .ph-rail-fill { transition: none; }
}

/* ── configuration notes ─────────────────────────────────────────────── */
.ph-cfg-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ph-dim); max-width: 60ch; text-wrap: pretty; }
.ph-cfg-note b { color: var(--ph-ink); font-weight: 600; }
.ph-cfg-note .ph-link { display: inline; padding: 0; font-size: inherit; }
.ph-cfg-cats { margin: 0; font-size: 13px; color: var(--ph-mute); }

/* ── Tracked shows: a poster wall, every tile one shape ─────────────── */
.ph-tk-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; }
.ph-tk { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ph-tk-art { position: relative; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--ph-line); background: var(--ph-glass-2); display: grid; place-items: center; }
.ph-tk-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-tk-mark { width: 40px; height: 40px; opacity: .5; }
.ph-tk-state { position: absolute; left: 8px; bottom: 8px; }
.ph-tk.is-paused .ph-tk-art { filter: saturate(.4); }
.ph-tk.is-paused .ph-tk-art, .ph-tk.is-error .ph-tk-art { border-style: dashed; }
.ph-tk.is-watching .ph-tk-art { border-color: rgba(var(--ph-beacon-rgb), .35); }
.ph-tk-name { font: 600 13px/1.25 var(--ph-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-tk-where, .ph-tk-last { font-size: 12px; color: var(--ph-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-tk.is-error .ph-tk-last { color: #ff8a65; }
@media (max-width: 560px) { .ph-tk-wall { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px 10px; } }

/* ── People: the accounts on the paired server, edited in place ──────── */
.ph-people-box { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ph-people-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ph-people-msg { font-size: 12.5px; color: var(--ph-dim); }
.ph-people-msg.is-err { color: #ff8a65; }
.ph-person-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ph-person { border-top: 1px solid var(--ph-line); padding: 10px 0; }
.ph-person:first-child { border-top: 0; }
.ph-person-top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.ph-person-chip { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; background: var(--ph-glass-2); border: 1px solid var(--ph-line); color: var(--ph-brass); font: 700 12px/1 var(--ph-head); letter-spacing: .04em; }
.ph-person.is-admin .ph-person-chip { border-color: rgba(var(--ph-beacon-rgb), .42); background: linear-gradient(180deg, rgba(var(--ph-beacon-rgb), .14), rgba(var(--ph-beacon-rgb), .04)); }
.ph-person-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ph-person-name { font: 600 13.5px/1.2 var(--ph-head); display: flex; align-items: center; gap: 8px; min-width: 0; }
.ph-person-name .ph-tag { font-size: 9.5px; }
.ph-person-sub { font-size: 12px; color: var(--ph-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-person-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ph-tag.is-live { color: var(--ph-beacon); border: 1px solid rgba(var(--ph-beacon-rgb), .4); }
.ph-btn-sm { padding: 6px 12px; font-size: 12.5px; min-height: 34px; }
.ph-btn.is-danger { border-color: rgba(255, 110, 80, .45); color: #ff9a80; margin-left: auto; }
.ph-btn.is-danger:hover { background: rgba(255, 110, 80, .1); }
.ph-person-edit { margin: 10px 0 2px 48px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ph-line); background: var(--ph-glass-2); }
.ph-people-head + .ph-person-edit { margin-left: 0; }
.ph-person-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ph-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ph-field-l { font: 600 11px/1 var(--ph-head); letter-spacing: .05em; text-transform: uppercase; color: var(--ph-dim); }
.ph-field-h { font-size: 11.5px; color: var(--ph-mute); }
.ph-in { width: 100%; min-height: 38px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--ph-line); background: var(--ph-glass); color: var(--ph-ink); font: inherit; font-size: 13.5px; }
.ph-in:focus-visible { outline: 2px solid var(--ph-beacon); outline-offset: 1px; }
.ph-person-checks { grid-column: 1 / -1; display: flex; gap: 20px; flex-wrap: wrap; }
.ph-check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; flex-wrap: wrap; }
.ph-check input { width: 18px; height: 18px; accent-color: var(--ph-beacon); }
.ph-check .ph-field-h { flex-basis: 100%; margin-left: 26px; }
.ph-person-edit .ph-btn-row { align-items: center; }
.ph-btn-row.is-busy .ph-btn { opacity: .6; pointer-events: none; }
@media (max-width: 560px) {
  .ph-person-fields { grid-template-columns: 1fr; }
  .ph-person-edit { margin-left: 0; }
  .ph-person-top { flex-wrap: wrap; }
}

/* ── Tracked: the form and each tile's two buttons ───────────────────── */
.ph-tracked .ph-people-head { margin-bottom: 12px; }
.ph-tk-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: end; margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ph-line); background: var(--ph-glass-2); }
.ph-tk-form .ph-btn-row { grid-column: 1 / -1; margin-top: 0; }
.ph-tk-actions { display: flex; gap: 6px; margin-top: 2px; }
.ph-tk-actions .ph-btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .ph-tk-form { grid-template-columns: 1fr 1fr; } .ph-tk-form .ph-field:first-child { grid-column: 1 / -1; } }

/* ─── Top: the red star (Staff Picks / Fresh / Hot) ─────────────────────────
 * A ranked ledger, not a poster wall: these are RELEASES, and what decides a
 * grab is the source, the seeders and the size beside the name. Tracked is the
 * poster wall; this room reads like a chart. */
.ph-top-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ph-top-modes { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--ph-glass); border: 1px solid var(--ph-line); }
.ph-top-mode { min-height: 36px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ph-dim); font: 600 13.5px/1 var(--ph-head); cursor: pointer; white-space: nowrap; transition: background .18s, color .18s; }
.ph-top-mode:hover { color: var(--ph-ink); }
.ph-top-mode.is-on { background: linear-gradient(180deg, #ff9a33, var(--ph-beacon-2)); color: #1a0d02; }
.ph-top-mode:focus-visible, .ph-top-src:focus-visible { outline: 2px solid var(--ph-beacon); outline-offset: 2px; }
.ph-top-bar .ph-btn { margin-left: auto; }
.ph-top-sources { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 14px; }
.ph-top-sources::-webkit-scrollbar { display: none; }
.ph-top-src { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ph-line); background: var(--ph-glass); color: var(--ph-dim); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ph-top-src b { color: var(--ph-ink); font-variant-numeric: tabular-nums; font-weight: 650; }
.ph-top-src.is-on { border-color: rgba(var(--ph-beacon-rgb), .6); color: var(--ph-ink); background: rgba(var(--ph-beacon-rgb), .1); }
.ph-top-src-ico { width: 18px; height: 18px; border-radius: 4px; }
.ph-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: none; }
.ph-top-row { display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 12px; border: 1px solid var(--ph-line); background: var(--ph-glass); transition: border-color .15s, background .15s; }
.ph-top-row:hover { border-color: rgba(var(--ph-beacon-rgb), .35); background: var(--ph-glass-2); }
.ph-top-rank { font: 700 18px/1 var(--ph-head); color: var(--ph-mute); text-align: center; font-variant-numeric: tabular-nums; }
.ph-top-row:nth-child(-n+3) .ph-top-rank { color: var(--ph-beacon); }
.ph-top-art { width: 46px; height: 69px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; background: var(--ph-glass-2); border: 1px solid var(--ph-line); }
.ph-top-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-top-mark { width: 30px; height: 30px; opacity: .85; object-fit: contain; }
.ph-top-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ph-top-name { font: 600 14.5px/1.25 var(--ph-head); color: var(--ph-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-top-rel { font-size: 11.5px; color: var(--ph-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ph-top-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ph-dim); flex-wrap: wrap; }
.ph-top-ico { width: 16px; height: 16px; border-radius: 4px; }
.ph-tag.is-private { background: rgba(var(--ph-beacon-rgb), .14); color: var(--ph-beacon); }
.ph-top-stats { display: grid; grid-auto-flow: column; gap: 14px; align-items: center; font-size: 12.5px; color: var(--ph-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-top-seed { color: #8fdc8a; font-weight: 650; }
.ph-top-seed::before { content: '\25B2'; font-size: 9px; margin-right: 4px; vertical-align: 1px; }
.ph-top-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 104px; }
.ph-top-msg { font-size: 11.5px; color: #8fdc8a; max-width: 220px; text-align: right; }
.ph-top-msg.is-err { color: #ff9a80; }
.ph-top-skel { display: flex; flex-direction: column; gap: 6px; }
.ph-top-skel-row { height: 87px; border-radius: 12px; background: linear-gradient(90deg, var(--ph-glass), var(--ph-glass-2), var(--ph-glass)); background-size: 200% 100%; animation: ph-top-shimmer 1.4s linear infinite; }
@keyframes ph-top-shimmer { to { background-position: -200% 0; } }
@media (max-width: 760px) {
  .ph-top-row { grid-template-columns: 26px 46px minmax(0, 1fr); row-gap: 8px; }
  .ph-top-stats { grid-column: 2 / -1; justify-content: start; }
  .ph-top-act { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; }
  .ph-top-act .ph-btn { order: 2; min-height: 44px; flex: 1 1 auto; }
  .ph-top-msg { text-align: left; }
  .ph-top-bar .ph-btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ph-top-skel-row { animation: none; } .ph-top-row, .ph-top-mode { transition: none; } }

/* ── Who added what (pharos.js addedPanel, 2026-10-24) ─────────────────────
   The household's arrivals out of the download ledger: the account that asked
   for each grab, its profile picture, and what it brought — a film, a whole
   season as one row, or a single episode. It borrows the ledger's columns, so
   the time, the art and the title line up with the panel above it; the kind
   column is the person instead. */
.ph-added-list .ph-row-l { grid-template-columns: 68px 148px 30px minmax(0, 1fr); }
.ph-added-by { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ph-added-face { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ph-brass-dim); background: var(--ph-glass-2); }
.ph-added-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ph-brass); }
.ph-row-added.kind-download .ph-l-detail { color: var(--ph-s-downloads); }
@media (max-width: 760px) { .ph-added-list .ph-row-l { grid-template-columns: 62px 112px 30px minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ph-added-list .ph-row-l { grid-template-columns: 48px minmax(0, 1fr); }
  .ph-row-added .ph-added-by { grid-column: 2; }
  .ph-row-added .ph-l-art { grid-column: 1; grid-row: 2 / span 2; }
  .ph-row-added .ph-l-body { grid-column: 2; }
}