/* ============================================================
   A VIEW FROM NO ONE — SPEC THEME
   ------------------------------------------------------------
   A second skin for the same machine: graph paper, thin rules,
   monospace capitals, reference numbers. A technical document
   for an instrument that indexes perspectives.

   Loaded after styles.css and scoped to #root.spec, so nothing
   here is destructive — press T to go back to the dark theme.

   In this theme HERE is not a neon sign. It is a printed label
   in a boxed field, and it fails the way printing fails:
   the ink starves, the plate slips, the register breaks.

   #root.spec.mono removes the green entirely (press G).
   ============================================================ */

#root.spec{
  --paper:      #f2f2ef;   /* panel stock            */
  --paper-2:    #e9e9e5;   /* panel header stock     */
  --paper-3:    #dededa;
  --board:      #e4e4e0;   /* the drafting table     */
  --ink:        #111111;
  --ink-dim:    #111111;
  --ink-faint:  #8a8a84;
  --ink-hi:     #111111;
  --line:       #111111;
  --line-soft:  #c9c9c3;
  --bg:         var(--board);
  --chrome:     var(--paper);
  --chrome-2:   var(--paper-2);

  /* the only chromatic value in the system */
  --here:       #7bdc82;
  --here-soft:  #7bdc82;
  --here-ink:   #111111;
  --here-deep:  #2f9d40;   /* the word once it has left its box */

  --rule: 1.5px;
  --side: 348px;   /* the file names carry the meaning — give them room */

  background:var(--board);
  color:var(--ink);
  font-size:12px;
}

/* achromatic variant — HERE becomes the only inverted mark */
#root.spec.mono{
  --here:      #111111;
  --here-ink:  #f2f2ef;
  --here-deep: #111111;
}

/* ── the drafting table ─────────────────────────────────── */

#root.spec::before{
  background-image:
    linear-gradient(to right,  rgba(17,17,17,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,17,.10) 1px, transparent 1px),
    linear-gradient(to right,  rgba(17,17,17,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,17,.05) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px, 24px 24px, 24px 24px;
  opacity:1;
}

#root.spec *{ border-radius:0 !important; }
#root.spec .mb-mark,
#root.spec .win-dots i,
#root.spec .notice-dot{ border-radius:50% !important; }

/* everything is monospace capitals unless it is a filename */
#root.spec .mb-title,
#root.spec .mb-menu,
#root.spec .seg-label,
#root.spec .segmented .seg,
#root.spec .side-title,
#root.spec .side-cols,
#root.spec .dirrow .state,
#root.spec .meter-row,
#root.spec .tray-title,
#root.spec .thumb .tlabel,
#root.spec .notice-src,
#root.spec #statusbar,
#root.spec .here,
#root.spec .boot-bar,
#root.spec #bootbtn,
#root.spec .end-lines p,
#root.spec .end-title{
  text-transform:uppercase;
}

/* ── menu bar ───────────────────────────────────────────── */

#root.spec #menubar{
  --bar:34px; height:34px; flex:0 0 34px;
  background:var(--paper);
  border-bottom:var(--rule) solid var(--ink);
  padding:0 12px 0 14px;
}
#root.spec .mb-mark{
  width:11px; height:11px; background:var(--ink);
  border:var(--rule) solid var(--ink); box-shadow:none;
}
#root.spec .mb-title{
  font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--ink);
}
#root.spec .mb-menu{
  font-size:11px; letter-spacing:.1em; color:var(--ink); cursor:pointer;
  border:var(--rule) solid transparent; padding:2px 6px;
}
#root.spec .mb-menu:hover{ border-color:var(--ink); background:transparent; }
#root.spec .mb-clock{ color:var(--ink); font-size:11px; letter-spacing:.12em; }

#root.spec .seg-label{ color:var(--ink-faint); font-size:9px; letter-spacing:.2em; }
#root.spec .segmented{ gap:6px; }
#root.spec .segmented .seg{
  font-size:10.5px; font-weight:700; letter-spacing:.18em;
  background:var(--paper); color:var(--ink);
  border:var(--rule) solid var(--ink);
  padding:5px 15px 4px;
  margin-right:0;
}
#root.spec .segmented .seg:hover{ background:var(--paper-3); }
#root.spec .segmented .seg[aria-pressed="true"]{
  background:var(--ink); color:var(--paper); box-shadow:none;
}

#root.spec .segmented.sub{ margin-right:10px; }

/* ── directory ──────────────────────────────────────────── */

#root.spec #sidebar{
  background:var(--paper);
  border-right:var(--rule) solid var(--ink);
}
#root.spec .side-head{ padding:12px 14px 8px; }
#root.spec .side-title{ font-weight:700; font-size:11px; letter-spacing:.22em; }
#root.spec .side-count{ color:var(--ink-faint); font-size:10px; }
#root.spec .side-cols{
  border-bottom:var(--rule) solid var(--ink);
  color:var(--ink-faint); font-size:9px; letter-spacing:.16em; padding:0 14px 6px;
}
#root.spec #directory{ padding:0; }
#root.spec .dirrow{
  padding:6px 14px; gap:9px;
  border-left:3px solid transparent;
  border-bottom:1px solid var(--line-soft);
}
#root.spec .dirrow:hover{ background:var(--paper-3); }
#root.spec .dirrow .ref{
  flex:0 0 auto; font-size:9px; letter-spacing:.06em;
  color:var(--ink-faint);
}
#root.spec .dirrow .glyph{
  width:10px; height:12px; flex:0 0 10px; border:var(--rule) solid var(--ink);
}
#root.spec .dirrow .glyph::after{
  left:2px; top:3px;
  border-left:4px solid var(--ink);
  border-top:2.5px solid transparent; border-bottom:2.5px solid transparent;
}
#root.spec .dirrow .name{ color:var(--ink); font-size:11px; }
#root.spec .dirrow .state{
  font-size:9px; letter-spacing:.12em; color:var(--ink-faint);
  border:1px solid transparent; padding:1px 4px;
}
#root.spec .dirrow.on{ border-left-color:var(--ink); background:transparent; }
#root.spec .dirrow.on .name{ color:var(--ink); }
#root.spec .dirrow.on .ref{ color:var(--ink); }
#root.spec .dirrow.on .glyph{ border-color:var(--ink); background:var(--here); }
#root.spec .dirrow.on .state{
  color:var(--here-ink); background:var(--here);
  border:1px solid var(--ink); font-weight:700;
}

#root.spec .side-foot{ border-top:var(--rule) solid var(--ink); padding:15px 14px 16px; }
#root.spec .meter-row{ font-size:10px; letter-spacing:.18em; color:var(--ink); }
#root.spec .meter-row span:last-child{
  font-size:19px; font-weight:700; letter-spacing:0;
}
#root.spec .meter-row:first-child span:last-child{ color:var(--ink); }
#root.spec .meter{
  height:11px; margin-top:11px;
  border:var(--rule) solid var(--ink); background:var(--paper);
}
#root.spec #meterfill{ background:var(--here); }
#root.spec.mono #meterfill{ background:var(--ink); }

#root.spec #directory::-webkit-scrollbar,
#root.spec #traystrip::-webkit-scrollbar{ width:12px; height:12px; }
#root.spec #directory::-webkit-scrollbar-track,
#root.spec #traystrip::-webkit-scrollbar-track{
  background-color:var(--paper);
  background-image:radial-gradient(circle at 1px 1px, rgba(17,17,17,.5) 1px, transparent 1.5px);
  background-size:4px 4px;
  border-left:var(--rule) solid var(--ink);
}
#root.spec #directory::-webkit-scrollbar-thumb,
#root.spec #traystrip::-webkit-scrollbar-thumb{
  background:var(--paper); border:var(--rule) solid var(--ink);
}

/* ── windows: specimen panels ───────────────────────────── */

#root.spec #desktop{ padding:18px; }
#root.spec #stage{ gap:14px; }

#root.spec .win{
  background:var(--paper);
  border:var(--rule) solid var(--ink);
  box-shadow:4px 4px 0 rgba(17,17,17,.9);
}
#root.spec .win.tiny{ box-shadow:3px 3px 0 rgba(17,17,17,.9); }

#root.spec .win-bar{
  flex:0 0 25px; height:25px;
  background:var(--paper);
  border-bottom:var(--rule) solid var(--ink);
  padding:0 9px;
}
#root.spec .win.tiny .win-bar{ flex:0 0 21px; height:21px; }
#root.spec .win-dots{ display:none; }
#root.spec .win-ref{
  flex:0 0 auto; font-size:9.5px; letter-spacing:.08em;
  color:var(--ink); font-weight:700;
  border:1px solid var(--ink); padding:1px 4px;
}
#root.spec .win-name{ color:var(--ink); font-size:10.5px; letter-spacing:.02em; }
#root.spec .win-meta{ color:var(--ink-faint); font-size:9.5px; letter-spacing:0; }
/* at five columns the file name needs the whole header — the
   duration steps aside rather than truncating the name */
#root.spec .win.tiny .win-meta{ display:block; font-size:8.5px; }
#root.spec #stage[data-count="17"] .win-meta,
#root.spec #stage[data-count="18"] .win-meta,
#root.spec #stage[data-count="19"] .win-meta,
#root.spec #stage[data-count="20"] .win-meta,
#root.spec #stage[data-count="21"] .win-meta,
#root.spec #stage[data-count="22"] .win-meta,
#root.spec #stage[data-count="23"] .win-meta,
#root.spec #stage[data-count="24"] .win-meta,
#root.spec #stage[data-count="25"] .win-meta{ display:none; }
#root.spec .win-view{ background:var(--paper); }
#root.spec .win-view::after{ box-shadow:none; }

/* ── halftone (D) ───────────────────────────────────────── */

#root.spec.halftone .win-view video{
  filter:grayscale(1) contrast(1.42) brightness(1.2);
}
#root.spec.halftone .win-view::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:radial-gradient(circle at center, #000 46%, transparent 47%);
  background-size:3.2px 3.2px;
  mix-blend-mode:color-burn;
  opacity:.9;
}
#root.spec.halftone .win.tiny .win-view::before{ background-size:2.6px 2.6px; }

/* without halftone the footage still sits on paper, not on black */
#root.spec .win-view video{ filter:contrast(1.02) saturate(.95); }

/* ── the boxed HERE ─────────────────────────────────────── */

#root.spec .here{
  font-weight:700; letter-spacing:.2em;
  color:var(--here-ink);
  background:var(--here);
  border:var(--rule) solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  backdrop-filter:none; text-shadow:none;
  padding:5px 10px 4px;
  left:12px; bottom:12px;
}
#root.spec .win.solo .here{ font-size:18px; padding:8px 15px 7px; letter-spacing:.24em; box-shadow:4px 4px 0 var(--ink); }
#root.spec .win.small .here{ font-size:11px; padding:4px 8px 3px; left:9px; bottom:9px; }
#root.spec .win.tiny  .here{ font-size:9.5px; padding:3px 6px 2px; left:7px; bottom:7px; box-shadow:2px 2px 0 var(--ink); }

/* print failures, not electrical ones */
#root.spec .here.f-dim{ opacity:.16; }                        /* ink starved    */
#root.spec .here.f-off{ opacity:0; }
#root.spec .here.f-burn{                                      /* overprinted    */
  background:var(--ink); color:var(--here);
  box-shadow:3px 3px 0 var(--here);
}
#root.spec.mono .here.f-burn{ background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--ink); }
#root.spec .here.f-skew{ transform:skewX(-6deg) translateX(-3px); }
#root.spec .here.f-slip{ transform:translate(4px,-3px); filter:none; }
#root.spec .here.f-ghost::after{                              /* mis-registered */
  color:var(--ink); mix-blend-mode:normal; opacity:.35;
  left:10px; top:5px; transform:translate(-5px,3px);
}
#root.spec .here.f-hide{ visibility:hidden; }

/* ── elsewhere tray ─────────────────────────────────────── */

#root.spec #tray{ border-top:var(--rule) solid var(--ink); padding-top:12px; }
#root.spec .tray-title{ font-size:10px; letter-spacing:.24em; color:var(--ink); }
#root.spec .tray-count{ color:var(--ink-faint); font-size:9.5px; }
#root.spec #traystrip{ padding-bottom:8px; }
/* the tray stays legible: dormant, printed light, never solid black */
#root.spec .thumb{
  position:relative;
  border:var(--rule) solid var(--ink);
  background:var(--paper);
  box-shadow:3px 3px 0 rgba(17,17,17,.9);
  filter:grayscale(1) brightness(1.3) contrast(.78);
  margin:0 2px 4px 0;
}
#root.spec .thumb:hover{ filter:grayscale(1) brightness(1.12) contrast(1.05); }
#root.spec .thumb:active{ transform:translate(1px,1px); }
#root.spec .thumb .tname{ top:auto; bottom:4px; left:auto; right:5px; }
#root.spec .thumb .tlabel{ left:5px; bottom:4px; }
#root.spec .thumb .tlabel{
  font-size:7.5px; font-weight:700; letter-spacing:.14em;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--ink); padding:1px 4px;
}
#root.spec .thumb .tname{
  color:var(--ink); font-size:8px; background:var(--paper);
  padding:1px 3px; width:max-content; max-width:calc(100% - 10px);
  overflow:hidden; text-overflow:ellipsis; border:1px solid var(--ink);
}

/* ── system notice ──────────────────────────────────────── */

#root.spec .notice{
  background:var(--paper);
  border:var(--rule) solid var(--ink);
  box-shadow:5px 5px 0 rgba(17,17,17,.9);
  width:316px;
}
#root.spec .notice-bar{ background:var(--ink); border-bottom:none; padding:5px 9px; }
#root.spec .notice-dot{ background:var(--here); width:7px; height:7px; }
#root.spec.mono .notice-dot{ background:var(--paper); }
#root.spec .notice-src{ color:var(--paper); font-size:9px; letter-spacing:.2em; }
#root.spec .notice p{ color:var(--ink); font-size:12px; line-height:1.6; }

/* ── status bar ─────────────────────────────────────────── */

#root.spec #statusbar{
  flex:0 0 26px; height:26px;
  background:var(--paper);
  border-top:var(--rule) solid var(--ink);
  color:var(--ink); font-size:10px; letter-spacing:.1em;
}
#root.spec #st-mode{ font-weight:700; }
#root.spec #st-msg{ color:var(--ink-faint); text-transform:none; letter-spacing:.02em; }
#root.spec .st-sep{ background:var(--ink); width:var(--rule); height:13px; }

/* ── boot: a specification sheet ────────────────────────── */

#root.spec #boot{ background:var(--board); }
#root.spec .boot-panel{
  background:var(--paper);
  border:var(--rule) solid var(--ink);
  box-shadow:8px 8px 0 rgba(17,17,17,.9);
  width:min(470px, calc(100vw - 34px));
}
#root.spec .boot-bar{
  background:var(--paper); color:var(--ink);
  border-bottom:var(--rule) solid var(--ink);
  font-size:9px; letter-spacing:.24em; padding:6px 12px;
}
#root.spec .boot-body{ padding:28px 26px 24px; }
#root.spec .boot-body h1{
  font-size:26px; font-weight:700; letter-spacing:.02em; color:var(--ink);
  border-bottom:var(--rule) solid var(--ink); padding-bottom:14px; margin-bottom:12px;
}
#root.spec .boot-sub{ color:var(--ink-faint); font-size:11px; letter-spacing:.14em; }
#root.spec .boot-log{
  color:var(--ink-faint); font-size:10px;
  border:1px solid var(--line-soft); padding:8px 10px; height:auto; margin-bottom:18px;
}
#root.spec #bootbtn{
  font-size:11px; font-weight:700; letter-spacing:.2em;
  background:var(--here); color:var(--here-ink);
  border:var(--rule) solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  padding:10px 22px;
}
#root.spec #bootbtn:hover{ filter:brightness(1.06); }
#root.spec #bootbtn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
#root.spec .boot-hint{ color:var(--ink-faint); letter-spacing:.1em; }

/* ── after the erasure ──────────────────────────────────── */
/* the accent leaves the system with HERE. the paper stays. */

#root.spec.erased .dirrow.on{ border-left-color:transparent; }
#root.spec.erased .dirrow.on .glyph{ background:var(--paper); }
#root.spec.erased .dirrow.on .state{ background:transparent; border-color:transparent; color:var(--ink-faint); }
#root.spec.erased #meterfill{ background:var(--line-soft); }
#root.spec.erased .notice-dot{ background:var(--paper); }

/* ── end card ───────────────────────────────────────────── */

#root.spec #endcard{ background:var(--paper); }
#root.spec .end-lines p{
  color:var(--ink); font-weight:700;
  font-size:clamp(22px, 3vw, 46px); letter-spacing:.26em; line-height:1.7;
}
#root.spec .end-title{ color:var(--ink-faint); letter-spacing:.5em; font-size:10.5px; }

/* the badge lets go of being a badge */
#root.spec .here.loose{
  background:transparent; border-color:transparent;
  box-shadow:0 0 0 rgba(0,0,0,0);
  color:var(--here-deep);
}

/* ── ending: dissolution ────────────────────────────────── */

#root.spec .side-note{
  color:var(--ink-faint); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase;
  border-top:1px solid var(--line-soft); padding-top:8px; margin-top:10px;
}
#root.spec.saturated .meter-row:first-child{ color:var(--ink); }
#root.spec.saturated .meter-row:first-child span:last-child{
  background:var(--here); color:var(--here-ink);
  border:var(--rule) solid var(--ink); padding:0 7px; font-weight:700;
}
#root.spec.erased .meter-row:first-child span:last-child{
  background:transparent; border-color:transparent; color:var(--ink-faint);
}


/* ── small screens ──────────────────────────────────────── */

@media (max-width:900px){
  #root.spec #gate[hidden]{ background:var(--board); }
  #root.spec .gate-panel{
    background:var(--paper);
    border:var(--rule) solid var(--ink);
    box-shadow:6px 6px 0 rgba(17,17,17,.9);
  }
  #root.spec .gate-bar{
    background:var(--paper); color:var(--ink);
    border-bottom:var(--rule) solid var(--ink);
    text-transform:uppercase; letter-spacing:.22em;
  }
  #root.spec .gate-body h2{ font-weight:700; letter-spacing:.2em; color:var(--ink); }
  #root.spec .gate-body p{ color:var(--ink); }
  #root.spec #gatego{
    border:var(--rule) solid var(--ink); color:var(--ink);
    text-transform:uppercase; letter-spacing:.18em; font-weight:700;
  }
}

/* identical to MOUNT ARCHIVE */
#root.spec #remount{
  font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase;
  background:var(--here); color:var(--here-ink);
  border:var(--rule) solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  padding:10px 22px;
}
#root.spec #remount:hover{ filter:brightness(1.06); background:var(--here); }
#root.spec #remount:active{ transform:translateX(-50%) translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }


/* strain reads as a printing wobble, not an electrical one */
#root.spec .here.s-dim  { opacity:.4; }
#root.spec .here.s-ghost{ text-shadow:2px -1px 0 rgba(17,17,17,.32); }