/* ==========================================================================
   samisee.design, SYSTEM SPECS WIDGET (top right of the desktop).
   Oscilloscope, Vienna clock (with its pin), availability pill,
   "currently" rows from the about page, ticker of the home page prose.
   Behaviour: js/widget.js. The scope itself: js/oscilloscope.js.
   ========================================================================== */

.specs { position: fixed; z-index: var(--z-rail); top: 52px; right: 24px; width: 304px; padding: 12px; --lg-r: 28px; --lg-tint: 30%; transition-delay: 320ms; display: flex; flex-direction: column; gap: 12px; }
.specs__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 0; font: 500 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--os-ink-dim); }
.specs__head b { font-weight: 500; color: var(--os-ink); display: inline-flex; align-items: center; gap: 7px; }
.specs__head b i { width: 6px; height: 6px; border-radius: 50%; background: var(--os-accent); box-shadow: 0 0 10px var(--os-accent); }

.scope { position: relative; height: 96px; border-radius: 18px; overflow: hidden; cursor: crosshair; background: var(--os-inset); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--shade) 45%, transparent), inset 0 0 0 1px var(--os-wash); }
.scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.scope__glow { position: absolute; inset: 15%; z-index: 2; pointer-events: none; mix-blend-mode: screen; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--os-accent-2) 55%, transparent) 0%, color-mix(in srgb, var(--os-accent) 14%, transparent) 45%, transparent 70%); filter: blur(22px); opacity: .4; transition: transform .6s ease, opacity .6s ease; }
.scope.is-hover .scope__glow { transform: scale(1.15); opacity: 1; }
.scope__label { position: absolute; right: 12px; bottom: 9px; z-index: 3; font: 400 var(--text-micro)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--os-ink-dim); transition: opacity .3s; }   /* dim ink: AA on the scope in every look */
.scope.is-hover .scope__label { opacity: 0; }

/* -3px: Syne's digits sit low in their line box, so the gap above the clock read bigger than the rest */
.specs__now { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 6px; margin-top: -3px; }
.specs__clock b { display: block; font: var(--weight-display) var(--text-display)/.95 var(--font-display); letter-spacing: -.01em; }
.specs__clock span { display: flex; align-items: center; gap: 5px; margin-top: 5px; font: 400 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--os-ink-dim); }
/* where she is: the pin, in the secondary accent */
.specs__pin { width: 10px; height: 10px; margin-left: -1px; fill: var(--os-accent-2); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--os-accent-2) 45%, transparent)); }

.pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 7px 9px; border-radius: 999px; white-space: nowrap; cursor: default; font: 600 var(--text-caption)/1 var(--font-body); color: var(--os-ink); background: var(--os-accent-wash); box-shadow: inset 0 0 0 1px var(--os-accent-line), inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent); }
.pill__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--os-accent); }
.pill__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--os-accent); opacity: 0; }
.pill__more { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; opacity: 0; color: var(--os-ink); font-weight: 500; transition: max-width .45s var(--ease-enter), opacity .3s; }
.pill:hover .pill__more, .pill:focus-visible .pill__more { max-width: 220px; opacity: 1; }
/* nothing hovers on touch: there, "· part-time" is simply always shown */
@media (hover: none) { .pill .pill__more { max-width: 220px; opacity: 1; } }


.currently { display: grid; grid-template-columns: 12px 70px 1fr; align-items: center; gap: 8px; padding: 0 6px; height: 12px;
  font: 400 var(--text-caption)/1 var(--font-mono); }
.currently > * { transition: opacity .35s, translate .35s; }
.currently.is-out > :not(.currently__g) { opacity: 0; translate: 0 -6px; }
/* line icons on one 16px grid (js/widget.js morphs between them), drawn 14px and allowed to
   spill 1px past the 12px row, so the row keeps its spacing */
.currently__g { color: var(--os-accent-2); }
.currently__g svg { display: block; width: 14px; height: 14px; margin: -1px 0 0 -1px; overflow: visible; }
.currently__g polyline { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.currently__l { color: var(--os-ink-dim); letter-spacing: .1em; text-transform: uppercase; font-size: 9px; }
.currently__v { color: var(--os-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.currently__v em { font-style: normal; color: var(--os-accent-2); }

.ticker { overflow: hidden; margin: 0 -12px -12px; padding: 9px 0 11px; border-top: 1px solid var(--os-border); border-radius: 0 0 28px 28px; -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.ticker__track { display: flex; align-items: center; width: max-content; animation: tick 10s linear infinite; }   /* duration set from a px/s pace in js/ticker.js */
.ticker span { font: 400 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--os-ink); padding-right: 22px; }
/* same font as the words: the dots used to fall back to the body line height, which made the row
   taller and pinned the text to its top, so it sat off-centre in the strip */
.ticker b { font: 400 9.5px/1 var(--font-mono); color: var(--os-accent); padding-right: 22px; }
@keyframes tick { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}