/* ------------------------------------------------------------
   dossier.css, the About page

   Every other page on this site is evidence: here is a problem, here is
   what I did, here is the product, go and use it. About is the one page
   that has to answer a different question, which is who is this and do I
   want to work with him, and it was answering it with five sections of
   careful prose. Nobody reads five sections of careful prose about a
   stranger. They look at the person for two seconds and decide.

   So this page is built the other way round. It opens as an observation
   panel around an identification card: the record, in the green of the
   equipment doing the looking. No photograph and no found text since
   v7.31, by Shad's decision (17 Oct 2026); the panel is one column.
   ------------------------------------------------------------ */


/* --- the skin ------------------------------------------------------

   Another file skin alongside ds / astrato / nhs, which is why
   it is a token swap and not a set of hard-coded colours: the house rule
   is one accent per view, and this view's accent is a phosphor green.
   The page body still follows the reader's theme. Only the panel is
   unconditionally dark, because a surveillance feed in light mode is not
   a surveillance feed. */
[data-file="dossier"]{
  /* a neutral stone with a green cast since v7.46, where it was a warm one */
  --bg:#eff1ef;--bg-raised:#fafbfa;--bg-sunken:#e3e7e3;--bg-hover:#e5e9e5;
  --line:rgba(16,24,16,.13);--line-strong:rgba(16,24,16,.24);
  --text:#101810;--text-2:#434c43;--text-3:#606860;
  /* #2ea52e is the mark; text drops to #176b17 to clear 4.5:1 on paper */
  --accent:#2ea52e;--btn:#258425;--accent-text:#176b17;--accent-soft:rgba(46,165,46,.1);
  --ground:#06090a;--ground-2:#0d1310;--on-ground:#e4e8e2;
  --shadow:0 12px 40px -18px rgba(16,30,16,.2);--grid:rgba(16,24,16,.05);
  --hl-weight:800;--hl-stretch:92%;--hl-track:-.028em;
}
[data-theme="dark"][data-file="dossier"],[data-theme="dark"] [data-file="dossier"]{
  --bg:#070b08;--bg-raised:#0d130e;--bg-sunken:#040706;--bg-hover:#141c15;
  --line:rgba(220,235,220,.1);--line-strong:rgba(220,235,220,.2);
  --text:#e4e8e2;--text-2:#9aa89a;--text-3:#778179;
  --accent:#3ff03f;--btn:#238423;--accent-text:#5cf55c;--accent-soft:rgba(63,240,63,.15);
  --ground:#030504;--ground-2:#080d09;--on-ground:#e4e8e2;
  --grid:rgba(220,235,220,.04);
}


/* --- the observation panel ----------------------------------------- */

.watch{
  position:relative;
  margin:calc(var(--docy) * -1) calc(var(--docx) * -1) 0;
  padding:0;
  background:var(--ground);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  --dither-ink:var(--on-ground);
  --dither-paper:var(--ground);
}

/* The rail across the top. Equipment labels itself; this is the only
   place on the site where a technical caption is in character rather
   than in the way. */
.watch .wrail{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:9px 16px;border-bottom:1px solid var(--line);
  font:500 max(9.5px,var(--floor)) var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb, var(--on-ground) 62%, transparent);
}
.watch .wrail .rec{display:inline-flex;align-items:center;gap:7px;color:var(--accent)}
.watch .wrail .rec::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:rec-blink 1.6s steps(1) 8;
}
@keyframes rec-blink{0%,55%{opacity:1}56%,99%{opacity:.15}100%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .watch .wrail .rec::before{animation:none} }
/* The coordinates are set dressing. On a phone the rail is three columns in
   340px and they pushed the file number onto a third line. */
@media (max-width:600px){ .watch .wrail .coord{display:none} }

.watch .wbody{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.95fr);
  align-items:stretch;
}
@media(max-width:900px){ .watch .wbody{grid-template-columns:minmax(0,1fr)} }
/* One column since v7.31: the card is the panel. */
.watch .wbody.solo{grid-template-columns:minmax(0,1fr)}
.watch .wbody.solo .idcard{padding:clamp(20px,4vh,40px) clamp(16px,3vw,44px);max-width:880px}
.watch .wbody.solo .idbar{font-size:12px;padding:7px 11px}
.watch .wbody.solo .idfields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
@media(max-width:600px){ .watch .wbody.solo .idfields{grid-template-columns:minmax(0,1fr)} }


/* --- the identification card ---------------------------------------- */

.idcard{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:0;
  padding:16px;
  background:var(--ground);
}

/* The green bars. Solid fill, black type, hard edges: a label printed by
   the system rather than styled by a designer. */
.idbar{
  background:var(--accent);color:#04120a;
  padding:5px 9px;
  font:600 max(10.5px,var(--floor)) var(--mono);letter-spacing:.13em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
}

.idfields{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.idfields div{
  display:flex;justify-content:space-between;gap:12px;
  background:var(--accent);color:#04120a;padding:4px 9px;
  font:600 max(10px,var(--floor)) var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
/* .78 blended the ink to 4.41:1 on the green at 10px; .9 reads 5.3. */
.idfields div span:last-child{font-weight:500;opacity:.9}

/* The progress bar from the reference, repurposed to something true:
   how much of the work on this site you can actually open and run. */
.idmeter{
  display:flex;align-items:center;gap:9px;
  background:var(--accent);color:#04120a;padding:4px 9px;margin-top:3px;
  font:600 max(10px,var(--floor)) var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
.idmeter i{flex:1;height:9px;background:#04120a;position:relative;display:block}
.idmeter i::before{content:'';position:absolute;inset:1px auto 1px 1px;width:var(--pct,100%);background:#2f6bff}


/* --- the window chrome ---------------------------------------------

   Lifted from the one-bit desktop graphics this page's look comes from:
   a title bar, a name in caps, three box glyphs on the right. It frames
   the things on this page that are artefacts rather than prose, and it
   is the one piece of deliberate nostalgia here, which is the correct
   number of pieces of deliberate nostalgia. */
.winframe{
  border:1.5px solid var(--line-strong);
  background:var(--bg-raised);
  margin:28px 0 0;
}
.winframe > figcaption,
.winframe > .wintitle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:5px 8px;border-bottom:1.5px solid var(--line-strong);
  font:600 max(10px,var(--floor)) var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);
}
.winframe .btns{display:flex;gap:3px;flex:none}
.winframe .btns i{
  width:12px;height:11px;border:1.5px solid var(--line-strong);display:block;
}
.winframe .winin{padding:0;position:relative}
.winframe canvas{display:block;width:100%;height:100%}
.cloudbox{
  position:relative;height:clamp(180px,26vh,260px);background:#06090a;
  --dither-ink:#e8ece6;--dither-paper:#06090a;
}
.cloudbox canvas{position:absolute;inset:0}


/* --- the short sections --------------------------------------------

   The old page had five of these running to about nine hundred words.
   The CV has every one of those facts in a form built for scanning, and
   this page is not the CV. What is left is what somebody deciding
   whether to talk to me actually needs, which turns out to be four
   lines and a way to get in touch. */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0;margin:0;border-top:1px solid var(--line);
}
.facts > div{
  padding:17px 0 19px;border-bottom:1px solid var(--line);
  padding-inline-end:22px;
}
.facts dt{
  font:600 max(9.5px,var(--floor)) var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:7px;
}
.facts dd{margin:0;font:400 13.5px/1.55 var(--ui);color:var(--text-2)}
.facts dd b{display:block;font:700 17px/1.2 var(--display);color:var(--text);letter-spacing:-.015em;margin-bottom:4px}

@media print{
  .watch{background:none;border:1px solid #999}
  .watch .wrail .rec::before{animation:none}
  .idbar,.idfields div,.idmeter{background:none;color:#111;border:1px solid #999}
  .cloudbox{display:none}
}




/* On paper the cloud is not drawn, so its title bar is a window frame
   with no window: the About page printed the word "Source.exe" over
   nothing. The rule lives here rather than in site.css because this
   sheet loads after it and sets display on the same selector at the
   same specificity, so the same line written there loses. */
@media print{ .winframe > figcaption, .winframe > .wintitle{display:none} }

/* the ask, in the CV's words, under the four roles (v7.25) */
.seek{margin:18px 0 0;padding:10px 14px;border-left:2px solid var(--accent);background:var(--accent-soft);font:400 14px/1.55 var(--ui);color:var(--text)}
.seek .k{font:600 max(9.5px,var(--floor))/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);margin-right:8px}


/* ---- v7.48: the cool layer on the observation panel ----------------- */
/* a scan line crosses the panel with the scroll (a view timeline on the
   panel, one pass, held where the reader holds); the card's lines decode
   on arrival and the card tilts toward the hand (stagecraft 16 and 20);
   the fields and the facts answer the hand; a logo sharpens when pointed at */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .watch{view-timeline-name:--watch}
    .watch::after{
      content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;
      background:color-mix(in srgb, var(--accent) 60%, transparent);box-shadow:0 0 14px var(--accent);
      animation:watch-scan linear both;animation-timeline:--watch;animation-range:exit 0% exit 100%;
    }
  }
}
@keyframes watch-scan{to{top:100%}}
@media(hover:hover){
  .idfields div{transition:filter var(--snap)}
  .idfields:has(div:hover) div:not(:hover){filter:brightness(.9)}
  .facts dd{transition:color var(--snap)}
  .facts:has(> div:hover) > div:not(:hover) dd{color:var(--text-3)}
  .facts > div dt{transition:color var(--snap)}
  .facts > div:hover dt{color:var(--accent-text)}
  .seek{transition:border-color var(--snap),background-color var(--snap)}
  .seek:hover{border-left-color:var(--accent-text)}
}
@media print{.watch::after{display:none}}

/* ------------------------------------------------------------
   v7.50: About's own pieces (site.css carries the shared ones and the
   law; the spotlight on the watch panel is site.css 21)
   ------------------------------------------------------------ */
@media(hover:hover){
  /* the id fields: the pointed field's value takes the ink, the rest
     recede a step (ink, not brightness) */
  .idfields div span:last-child{transition:color var(--snap)}
  .idfields:has(div:hover) div:not(:hover) span:last-child{color:var(--text-3)}
  /* the logos: the pointed logo keeps its colour, the others go grey */
  .logostrip img{transition:opacity var(--snap),translate var(--snap),filter var(--snap)}
  .logostrip:has(img:hover) img:not(:hover){filter:grayscale(1)}
  :root:not([data-theme="dark"]) .logostrip:has(img:hover) img.inv:not(:hover){filter:brightness(0) grayscale(1)}
  [data-theme="dark"] .logostrip:has(img:hover) img.inv:not(:hover){filter:brightness(0) invert(1) grayscale(1)}
  /* the sources: the pointed source keeps its ink (here and on the case
     files, which carry the same list) */
  .sources li{transition:color var(--snap)}
  .sources ul:has(li:hover) li:not(:hover){color:var(--text-3)}
  /* a plate number steps forward with its light */
  .dossier .plateno .pn{display:inline-block;transition:color var(--snap),translate var(--snap)}
  .dossier .sec:hover .plateno .pn{translate:3px 0}
  /* the foot's role lights with the name */
  .pagefoot .who small{transition:color var(--snap)}
  .pagefoot .who:hover small{color:var(--accent-text)}
}
/* the keyboard twins */
.idfields:has(div:focus-within) div:not(:focus-within) span:last-child{color:var(--text-3)}
.sources ul:has(li:focus-within) li:not(:focus-within){color:var(--text-3)}
.dossier .sec:focus-within .plateno .pn{display:inline-block;translate:3px 0}
/* a drop cap opens the first section, the way the essays open */
.dossier .seek + .sec .prose > p:first-of-type::first-letter{
  float:left;margin:.1em .14em 0 0;
  font:800 3.1em/.8 var(--display);letter-spacing:-.02em;color:var(--accent-text);
}