/* ============================================================
   INSPECT
   The photo and the role are the hero's two interactive elements. Each one
   hints on hover (grey construction guides draw out from its edges), opens an
   inspector on click, and closes from its Close button or Esc. There is
   no mode switch: the feature is found where it lives, and it works on the
   light and the dark palette alike.

   Off on phones (below 768px), where the buttons are pinned to the bottom of
   the first screen and there is no room for a panel: js/hero.js turns the two
   elements back into plain content there, and the headline centres instead.
   Colours for the dark palette live in css/dark.css.

   Every number in a panel is read from the live page by js/hero.js.
   ============================================================ */

/* the mono face, the guide greys and the selection blues are shared with the
   project cells' selection: css/redesign.css and css/color.css */

/* ---------- the two interactive elements ---------- */
[data-hero]{position:relative;}
[data-insp]{cursor:pointer;}
.insp-off [data-insp]{cursor:auto;}
[data-insp]:focus-visible{outline:2px solid var(--sel);outline-offset:4px;}
[data-hero][data-open="avatar"] .face{cursor:grab;touch-action:none;}
[data-hero].is-dragging .face{cursor:grabbing;}
[data-hero].is-dragging{user-select:none;-webkit-user-select:none;}

.guides{position:absolute;inset:0;pointer-events:none;z-index:2;}
.guides *{position:absolute;left:0;top:0;}

.gg{right:0;bottom:0;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s;}
.gg.is-on{opacity:1;visibility:visible;transition:opacity .2s ease;}

/* hint: guide lines run out from the element's edges, corner ticks mark it */
.gl-h{height:0;border-top:1px dashed var(--gd);}
.gl-v{width:0;border-left:1px dashed var(--gd);}
.tick{width:9px;height:9px;border:0 solid var(--gd-strong);}
.tick.tl{border-width:1.5px 0 0 1.5px;}
.tick.tr{border-width:1.5px 1.5px 0 0;}
.tick.bl{border-width:0 0 1.5px 1.5px;}
.tick.br{border-width:0 1.5px 1.5px 0;}
.g-tag{
  font:500 10.5px/1 var(--mono);white-space:nowrap;color:var(--gd-strong);
  letter-spacing:0;
}
@media (prefers-reduced-motion:no-preference){
  .gg.hint .gl-h{clip-path:inset(0 50% 0 50%);transition:clip-path .45s cubic-bezier(.2,.7,.3,1);}
  .gg.hint .gl-v{clip-path:inset(50% 0 50% 0);transition:clip-path .45s cubic-bezier(.2,.7,.3,1);}
  .gg.hint.is-on .gl-h,.gg.hint.is-on .gl-v{clip-path:inset(0);}
  .gg.hint .tick{transform:scale(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
  .gg.hint.is-on .tick{transform:none;}
}

/* open: a selection box with handles, the element's name and size */
.g-box{border:1px solid var(--sel);}
.g-h{width:7px;height:7px;background:var(--paper);border:1px solid var(--sel);}
.g-h.tl{left:-4px;top:-4px;} .g-h.tr{left:auto;right:-4px;top:-4px;}
.g-h.bl{left:-4px;top:auto;bottom:-4px;} .g-h.br{left:auto;right:-4px;top:auto;bottom:-4px;}
.g-name,.g-size{
  font:500 10.5px/1 var(--mono);white-space:nowrap;letter-spacing:0;
  color:var(--sel-ink);background:var(--sel-text);padding:3px 5px;border-radius:3px;
}
.g-size{transform:translateX(-50%);}
/* the portrait's full frame, faint, around the crop */
.g-ghost{background-repeat:no-repeat;opacity:.3;outline:1px dashed var(--sel-soft);}

/* ---------- inspector ---------- */
.insp{font:400 13px/1.65 var(--mono);color:var(--ink-2);letter-spacing:0;}
.insp[hidden],.insp-panel[hidden]{display:none;}
.insp.is-float{position:absolute;z-index:3;width:max-content;}

/* in and out: the panel fades and rises a little beside the sentence, and the
   sheet slides up from the bottom edge. js/hero.js adds .is-out to start from
   and to leave to, then hides it. */
.insp{transition:opacity .2s ease,transform .2s cubic-bezier(.2,.7,.3,1);}
.insp.is-out{opacity:0;pointer-events:none;}
.insp.is-float.is-out{transform:translateY(8px);}
.insp.is-sheet{transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .26s ease;}
.insp.is-sheet.is-out{transform:translateY(100%);opacity:1;}
@media (prefers-reduced-motion:reduce){ .insp,.insp.is-sheet{transition:opacity .2s ease;} .insp.is-out{transform:none;} .insp.is-sheet.is-out{opacity:0;} }

/* switching from one element to the other: the selection switches at once,
   so the groups swap without a fade */
.is-switching .gg.open{transition:none;}
/* beside the sentence, both panels share one grid cell: the panel keeps the
   width of the wider one, so Close does not jump sideways, and the contents
   crossfade. Only the showing one is visible or reachable. */
.insp.is-float:not([hidden]){display:grid;}
.insp.is-float .insp-head{grid-area:1 / 1;}
.insp.is-float .insp-panel{grid-area:2 / 1;align-self:start;transition:opacity .2s ease,visibility 0s linear 0s;}
.insp.is-float .insp-panel[hidden]{display:block;visibility:hidden;opacity:0;transition:opacity .16s ease,visibility 0s linear .16s;}
/* while switching: the old contents go quickly, the new ones fade in over
   the second half of the glide, so the movement leads and the text follows */
.is-switching .insp.is-float .insp-panel:not([hidden]){transition:opacity .24s ease .16s,visibility 0s linear 0s;}
.is-switching .insp.is-float .insp-panel[hidden]{transition:opacity .1s ease,visibility 0s linear .1s;}
.insp-name.is-swap{animation:insp-swap .4s ease both;}
@keyframes insp-swap{0%,40%{opacity:0;}100%{opacity:1;}}
@media (prefers-reduced-motion:reduce){ .insp-name.is-swap{animation:none;} }
.insp.is-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--ground);border-top:1px solid var(--rule-2);
  box-shadow:0 -16px 40px rgba(0,0,0,.12);
  padding:12px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  max-height:58vh;overflow:auto;overscroll-behavior:contain;
}

.insp-head{display:flex;align-items:center;gap:10px;}
.insp-name{
  font:500 11px/1 var(--mono);color:var(--sel-ink);background:var(--sel-text);
  padding:4px 6px;border-radius:3px;
}
.insp-x,.insp-ctl button{
  font:500 12px/1 var(--mono);color:var(--ink-2);
  background:transparent;border:1px solid var(--rule-2);border-radius:6px;cursor:pointer;
  transition:color var(--hover-t),border-color var(--hover-t),background-color var(--hover-t);
}
/* Close is the only way out besides Esc, so it is the one filled control in
   the panel: an ink tile with the x in the page colour (inverts in dark), and
   blue on hover like the filled hero button. Icon only; aria-label names it. */
.insp-x{
  display:grid;place-items:center;margin-left:auto;
  width:32px;height:32px;padding:0;
  color:var(--paper);background:var(--ink);border-color:var(--ink);border-radius:9px;
}
.insp-x svg{width:13px;height:13px;}
@media (hover:hover){.insp-x:hover{color:var(--paper);background:var(--accent-text);border-color:var(--accent-text);}}
@media (hover:hover){.insp-ctl button:hover{color:var(--sel-text);border-color:var(--sel);box-shadow:inset 0 0 0 1px var(--sel);}}   /* 2px hover stroke */
.insp-panel{margin-top:12px;}

.insp .c{margin:0;white-space:nowrap;}
.insp .sp{margin-top:.6em;}
.insp .k{color:var(--sel-text);}
.insp .p{color:var(--ink-2);}
.insp .cm{opacity:.55;}
.insp b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;}
.insp .small{font-size:11px;opacity:.6;}

.insp-list{list-style:none;margin:0;padding:0;}
.insp-list button{
  display:block;position:relative;
  font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  padding:0 0 0 2ch;text-align:left;white-space:nowrap;border-radius:3px;
}
.insp-list button::before{content:"";position:absolute;left:.6ch;top:50%;width:.5ch;height:.62em;transform:translateY(-50%);}
.insp-list button .i{opacity:.4;margin-right:1ch;}
@media (hover:hover){.insp-list button:hover{color:var(--sel-text);}}
.insp-list button[aria-current="true"]{color:var(--ink);}
.insp-list button[aria-current="true"]::before{background:var(--sel);}
.insp-list button[aria-current="true"] .s{color:var(--sel-text);}

.insp-ctl{display:flex;align-items:center;gap:6px;margin-top:10px;}
.insp-ctl button{width:28px;height:28px;display:grid;place-items:center;}
.insp-ctl button.wide{width:auto;padding:0 10px;}
.insp-ctl .i-play{display:none;}
.insp-ctl [aria-pressed="true"] .i-play{display:block;}
.insp-ctl [aria-pressed="true"] .i-pause{display:none;}
.insp-prog{flex:none;width:72px;height:2px;background:var(--rule-2);margin-left:6px;overflow:hidden;}
.insp-prog i{display:block;height:100%;width:0;background:var(--sel);}

.insp-ease{display:flex;align-items:center;gap:14px;margin-top:14px;}
.insp-ease svg{flex:none;overflow:visible;}
.insp-ease .axis{fill:none;stroke:var(--rule-2);stroke-width:1;}
.insp-ease .curve{fill:none;stroke:var(--sel-soft);stroke-width:1.5;}
.insp-ease circle{fill:var(--sel);}

@media (pointer:coarse){
  .insp-ctl button{width:44px;height:44px;}
  .insp-x{width:44px;height:44px;}
  .insp-x svg{width:15px;height:15px;}
  .insp-list button{padding-block:7px;}
}