/*
  Author: Igor Davinci
  Version: 1.10.0
  Shared instrument chrome: the parts of the browser's own UI that would
  otherwise look like the operating system instead of the machine. Linked by
  every page, so the treatment cannot drift from one screen to the next
  (it already had: only the manual carried it).
*/

/* ---------- one panel, several screens ----------
   The sheets share a header and a title block, so moving between them should
   read like switching screens on the same panel, not like leaving a page and
   loading another. The browser morphs the shell for us where it can; where it
   cannot, nothing changes and navigation stays exactly as it was. */
@view-transition { navigation: auto; }
#hmi-head{view-transition-name:shell-head;}
#tblock{view-transition-name:shell-foot;}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none !important;}
}

/* ---------- focus: authored, like every other state ----------
   The panel draws a hover state for everything it can be touched by, and then
   left the keyboard with the browser's own ring, which reads as an operating
   system artifact on an instrument that authors all its other states. Amber is
   already the colour of "this one is selected" on the drawing, so it is the
   honest choice here too. :focus-visible only, so a pointer never sees it. */
:focus-visible{outline:2px solid rgba(232,137,12,0.9);outline-offset:2px;}
/* The station callouts are SVG groups: light the drawn circle as well, so the
   mark is visible even where an outline around a group reads oddly. They use
   :focus with a :focus-visible opt-out rather than :focus-visible alone,
   because support for it on focusable SVG groups is uneven and this control
   is the way into the CV - it may not be the one that loses its ring. */
.co:focus circle{stroke:#E8890C;stroke-width:2.5;}
.co:focus text{fill:#E8890C;}
.co:focus:not(:focus-visible) circle{stroke:var(--cy-dim,rgba(120,190,205,0.55));stroke-width:1.2;}
.co:focus:not(:focus-visible) text{fill:var(--cy-dim,rgba(120,190,205,0.55));}
.co:focus:not(:focus-visible){outline:none;}

/* ---------- scrollbars: instrument rails, not OS chrome ----------
   A thin cyan rail on a recessed, graduated track, like the scale etched
   beside a sight glass. The thumb lights up under the hand and burns
   brighter while dragged: the same language as the panel sliders. */
*{scrollbar-width:thin;scrollbar-color:rgba(120,190,205,0.32) transparent;}

::-webkit-scrollbar{width:10px;height:10px;}

/* the graduations are what make it read as an instrument and not a bar */
::-webkit-scrollbar-track{
  background:
    repeating-linear-gradient(180deg,
      rgba(120,190,205,0.11) 0 1px, rgba(0,0,0,0) 1px 9px),
    rgba(120,190,205,0.035);
  border-left:1px solid rgba(120,190,205,0.10);
}
::-webkit-scrollbar-track:horizontal{
  background:
    repeating-linear-gradient(90deg,
      rgba(120,190,205,0.11) 0 1px, rgba(0,0,0,0) 1px 9px),
    rgba(120,190,205,0.035);
  border-left:0;
  border-top:1px solid rgba(120,190,205,0.10);
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(120,190,205,0.42),rgba(120,190,205,0.20));
  border:1px solid rgba(120,190,205,0.32);
  transition:background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(150,225,240,0.65),rgba(120,190,205,0.35));
  border-color:rgba(150,225,240,0.55);
  box-shadow:0 0 10px rgba(120,190,205,0.35);
}
::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg,rgba(150,225,240,0.85),rgba(120,190,205,0.50));
  border-color:rgba(150,225,240,0.85);
  box-shadow:0 0 14px rgba(150,225,240,0.50);
}
::-webkit-scrollbar-corner{background:transparent;}

@media (prefers-reduced-motion: reduce){
  ::-webkit-scrollbar-thumb{transition:none;}
}

/* ---------- document references in the title block ----------
   On a real drawing the title block is where the sheet declares which
   documents belong to it. The CV and the profile live there on every page:
   one tap, visible on a phone, never behind an exploration. */
.tb-doc{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  color:rgba(120,190,205,0.75);letter-spacing:0.1em;
  transition:color .18s ease, text-shadow .18s ease;}
.tb-doc b{font-weight:400;color:#78BECD;transition:color .18s ease;}
.tb-doc:hover,.tb-doc:focus-visible{color:#96E1F0;outline:none;}
.tb-doc:hover b,.tb-doc:focus-visible b{color:#96E1F0;
  text-shadow:0 0 10px rgba(150,225,240,0.45);}
.tb-doc svg{width:10px;height:10px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* The drawn size of these links is right for a title block, and their hit area
   is not: 35x13 for the CV, which is the single most valuable control on the
   site and the smallest one on the page, against the 24px minimum. The mark
   keeps its size; the target grows around it. Every pointer, not just touch -
   a mouse has to aim too, and a 13px-tall target is aimed at, not clicked. */
.tb-doc{position:relative;}
.tb-doc::after{content:"";position:absolute;left:-8px;right:-8px;top:-7px;bottom:-7px;}
/* the way home is a control too, and it was the one this treatment skipped:
   11-13px with no padding, in the header and in the title block */
.home-link{position:relative;display:inline-block;}
.home-link::after{content:"";position:absolute;left:-8px;right:-8px;top:-8px;bottom:-8px;}

/* A finger is not a mouse pointer: on a touch screen the same links take the
   full height of the title block. Nothing moves. */
@media (pointer:coarse){
  .tb-doc::after{left:-6px;right:-6px;top:-13px;bottom:-13px;}
  /* the way out of the CV card has to be reachable with a thumb: the glyph
     keeps its drawn size, the hit area grows around it */
  .fp-close{position:relative;}
  .fp-close::after{content:"";position:absolute;left:-10px;right:-10px;top:-10px;bottom:-10px;}
}

/* The document cells are what a visitor came for and must survive every
   width. The descriptive cells are decoration, so they are the ones that
   step aside, and the title block never wraps onto a second line. */
#tblock{white-space:nowrap;}
@media (max-width:1020px){#tblock > div.hide-m{display:none;}}
/* On a narrow phone the row still spills by a few pixels, so the cells give
   up padding rather than the links giving up their place. The page sheets
   set their own padding with a body-qualified rule at their own breakpoint;
   this has to outweigh it, hence the extra html. */
@media (max-width:420px){
  html body #tblock > div{padding:0 7px;}
}
/* Once the sheet's own navigation moved in here, the row stopped fitting a
   phone: it measured 474 against 375 and pushed LINKEDIN off the screen, which
   is the overflow this file already fixed once. The row now scrolls INSIDE
   itself rather than dragging the document sideways, and fades at the right
   edge so it is visible that it continues - the same language the station
   strip uses. Nothing is dropped: every one of these cells is a destination. */
@media (max-width:760px){
  #tblock{overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),rgba(0,0,0,0.2) 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),rgba(0,0,0,0.2) 100%);}
  #tblock::-webkit-scrollbar{display:none;}
  #tblock > div{flex:0 0 auto;}
}