/* The work view's own chrome: the outline on the part under the cursor, the guide that points at
   what to click next, and the pulse on a belt button or a screen button the guide names.
   (js/work/outline.js, js/work/guide.js; the work HUD's own rules are in hangar.css.) */

.wkol { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.wkol-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wkol-glow, .wkol-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }

/* the part under the cursor: a clean outline, white where the tool in hand works it, grey where it does not */
.wkol-hover .wkol-glow { stroke: rgba(10,11,13,.55); stroke-width: 6; }
.wkol-hover .wkol-line { stroke: #f4f7fa; stroke-width: 2.5; fill: rgba(244,247,250,.10); }
.wkol-hover.no .wkol-line { stroke: rgba(205,212,222,.75); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }

/* the guide: a pulsing amber outline (never confused with the hover's white one) */
.wkol-guide .wkol-glow { stroke: #ffc72c; stroke-width: 9; opacity: .32; animation: wkol-glow 1.3s ease-in-out infinite; }
.wkol-guide .wkol-line { stroke: #ffd24a; stroke-width: 3; fill: rgba(255,199,44,.10); animation: wkol-line 1.3s ease-in-out infinite; }
@keyframes wkol-glow { 0%, 100% { opacity: .18; stroke-width: 7; } 50% { opacity: .5; stroke-width: 13; } }
@keyframes wkol-line { 0%, 100% { stroke-opacity: .75; } 50% { stroke-opacity: 1; } }

.wkol-labels { position: absolute; inset: 0; }
.wkol-tag { position: absolute; left: 0; top: 0; max-width: 260px; padding: 5px 10px; border-radius: 8px; background: rgba(10,11,13,.92); color: #fff7dc;
  border: 1.5px solid #ffc72c; font: 600 14px/1.25 var(--body, system-ui, sans-serif); box-shadow: 0 4px 14px rgba(0,0,0,.35); white-space: normal; }
.wkol-tag[hidden] { display: none; }
.wkol-banner { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(10,11,13,.92); color: #fff7dc;
  border: 1.5px solid #ffc72c; font: 600 15px/1.2 var(--body, system-ui, sans-serif); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.wkol-banner[hidden] { display: none; }

/* an arrow at the edge of the screen for what is off the screen */
.wkol-arrow { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.wkol-arrow-head { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; display: block;
  background: #ffc72c; clip-path: polygon(100% 50%, 18% 4%, 36% 50%, 18% 96%); filter: drop-shadow(0 0 5px rgba(0,0,0,.7)); animation: wkol-arrow 1.1s ease-in-out infinite; }
@keyframes wkol-arrow { 0%, 100% { opacity: .8; scale: 1; } 50% { opacity: 1; scale: 1.15; } }
.wkol-arrow-t { position: absolute; top: -13px; padding: 4px 9px; border-radius: 8px; background: rgba(10,11,13,.92); color: #fff7dc; border: 1.5px solid #ffc72c;
  font: 600 13px/1.2 var(--body, system-ui, sans-serif); white-space: nowrap; transform: translateX(26px); }
.wkol-arrow.left .wkol-arrow-t { transform: translateX(calc(-100% - 26px)); }
.wkol-arrow.mid .wkol-arrow-t { transform: translate(-50%, 26px); top: -6px; }
.wkol-arrow-t:empty { display: none; }

/* a belt button or a screen button the guide names */
.wk-guide { animation: wk-guide 1.2s ease-in-out infinite; position: relative; z-index: 1; }
@keyframes wk-guide {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,199,44,.9), 0 0 0 0 rgba(255,199,44,.55); }
  50% { box-shadow: 0 0 0 3px #ffd24a, 0 0 18px 6px rgba(255,199,44,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .wk-guide { animation: none; box-shadow: 0 0 0 3px #ffd24a, 0 0 14px 4px rgba(255,199,44,.5); }
  .wkol-guide .wkol-glow, .wkol-guide .wkol-line, .wkol-arrow-head { animation: none; }
  .wkol-guide .wkol-glow { opacity: .4; stroke-width: 10; }
}
.wk-tag.no { opacity: .82; }

/* the ways to move the view: small, bottom left, never in the way */
.wk-viewkeys { position: absolute; left: 16px; bottom: 14px; margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; max-width: 280px; pointer-events: none;
  font: 500 12px/1.3 var(--body, system-ui, sans-serif); color: rgba(238,241,244,.82); text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.6); }
.wk-vk b { font-weight: 700; color: #fff; }
@media (max-width: 1100px) { .wk-viewkeys { display: none; } }