/* =====================================================================
   Code Init — shared UI layer (loaded last on every page)
   ---------------------------------------------------------------------
   Link hover effects ported from Skiper UI "skiper40 / CssLink"
   (https://skiper-ui.com/v1/skiper40, inspired by cursor.com) to plain CSS.
   Attribution to Skiper UI as required by its free licence.

   Underlines are drawn with a background-image instead of ::before so they
   never clash with pseudo-elements the existing pages already use.
   ===================================================================== */

:root {
  --ui-accent: #ff5c00;
  --ui-accent-2: #ffb000;
  --ui-fill: #fff6eb;
  --ui-fill-ink: #120a04;
  --ui-ease: cubic-bezier(.4, 0, .2, 1);      /* skiper40 easing */
  --ui-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ui-dur: 300ms;                              /* skiper40 duration */
  --ui-line: .07em;
  --ui-ring: 0 0 0 3px rgba(255, 92, 0, .28);
}

/* ---------- Global polish ---------- */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: rgba(255, 92, 0, .35); color: #fff; }
:where(input[type="checkbox"], input[type="radio"], progress, input[type="range"]) { accent-color: var(--ui-accent); }

/* Slim modern scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 126, 26, .35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: rgba(255, 126, 26, .35) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 126, 26, .6); }

/* One consistent keyboard focus ring everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =====================================================================
   skiper40 link utilities (can be used on any <a>)
     .sk-link-001  underline in from left, out to right
     .sk-link-002  underline in from right, out to left
     .sk-link-003  underline grows from the centre
     .sk-link-004  block rises from the bottom (inverted text)
     .sk-link-005  block sweeps in from the left (inverted text)
     .sk-arrow     optional ↗ icon that fades/slides in on hover
   ===================================================================== */
.sk-link-001, .sk-link-002, .sk-link-003,
.nav-links a:not(.nav-cta),
.footer-inner a,
.track-link,
.workspace-card-link,
.action-link,
.login_box a,
.remember-forgot a,
.sk-underline {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% var(--ui-line);
  background-position: 100% 100%;           /* rest: anchor right -> shrinks out to the right */
  transition: background-size var(--ui-dur) var(--ui-ease), color 200ms var(--ui-ease);
}
/* 001 (default): grow in from the left */
.sk-link-001:hover, .sk-link-001:focus-visible,
.nav-links a:not(.nav-cta):hover, .nav-links a:not(.nav-cta):focus-visible,
.footer-inner a:hover, .footer-inner a:focus-visible,
.track-link:hover, .track-link:focus-visible,
.workspace-card-link:hover, .workspace-card-link:focus-visible,
.action-link:hover, .action-link:focus-visible,
.login_box a:hover, .login_box a:focus-visible,
.sk-underline:hover, .sk-underline:focus-visible {
  background-size: 100% var(--ui-line);
  background-position: 0% 100%;
  text-decoration: none !important;
}
/* 002: in from the right, out to the left */
.sk-link-002 { background-position: 0% 100%; }
.sk-link-002:hover, .sk-link-002:focus-visible { background-size: 100% var(--ui-line); background-position: 100% 100%; }
/* 003: from the centre (also used for footers) */
.sk-link-003, .footer-inner a { background-position: 50% 100%; }
.sk-link-003:hover, .sk-link-003:focus-visible,
.footer-inner a:hover, .footer-inner a:focus-visible { background-size: 100% var(--ui-line); background-position: 50% 100%; }

/* 004 / 005: white block with mix-blend-mode difference, as in skiper40 */
.sk-link-004, .sk-link-005 { position: relative; display: inline-flex; align-items: center; padding: 0 .4em; isolation: isolate; text-decoration: none; }
.sk-link-004::before, .sk-link-005::before {
  content: ""; position: absolute; left: 0; width: 100%; pointer-events: none;
  background: #fff; mix-blend-mode: difference;
  transition: all var(--ui-dur) var(--ui-ease);
}
.sk-link-004::before { bottom: 0; height: 0; }
.sk-link-004:hover::before, .sk-link-004:focus-visible::before { height: 1.4em; }
.sk-link-005::before { top: 0; height: 100%; transform: scaleX(0); transform-origin: left; }
.sk-link-005:hover::before, .sk-link-005:focus-visible::before { transform: scaleX(1); }

/* ↗ arrow that fades and slides in (skiper40 svg) */
.sk-arrow {
  display: inline-block; width: .55em; height: .55em; margin-left: .3em;
  opacity: 0; transform: translateY(.25em);
  transition: opacity var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease);
}
a:hover > .sk-arrow, a:focus-visible > .sk-arrow { opacity: 1; transform: none; }

/* Existing "→" arrows inside links nudge forward on hover (not nav icons) */
a > span[aria-hidden="true"]:not(.workspace-top-icon), button > span[aria-hidden="true"] { display: inline-block; transition: transform var(--ui-dur) var(--ui-spring); }
a:hover > span[aria-hidden="true"]:last-child:not(.workspace-top-icon),
button:hover > span[aria-hidden="true"]:last-child { transform: translateX(4px); }
.brand > span[aria-hidden="true"] { transform: none !important; }

/* Mobile menu rows: arrow rotates like skiper004 */
.mobile-menu a::after { transition: transform var(--ui-dur) var(--ui-spring); }
.mobile-menu a:hover::after { transform: rotate(45deg); }
.mobile-menu a { transition: border-color 200ms var(--ui-ease), background-color 200ms var(--ui-ease), transform 200ms var(--ui-ease); }
.mobile-menu a:hover { border-color: rgba(255, 126, 26, .35); transform: translateX(3px); }

/* =====================================================================
   Dashboard top navigation: skiper underline inside each pill
   ===================================================================== */
.workspace-top-link {
  position: relative;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: none !important;
  transition: color 200ms var(--ui-ease);
}
/* skiper40 underline: grows in from the left, leaves to the right */
.workspace-top-link::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--ui-dur) var(--ui-ease);
  pointer-events: none;
}
.workspace-top-link:hover::after, .workspace-top-link:focus-visible::after,
.workspace-top-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.workspace-top-link:hover, .workspace-top-link:focus-visible,
.workspace-top-link[aria-current="page"] { color: #fff !important; }

/* Icons: muted at rest, white (not orange) on hover and on the current page */
.workspace-top-link { gap: 7px !important; line-height: 1; }
.workspace-top-link > span:last-child { display: inline-block; line-height: 1; }
.workspace-top-link .workspace-top-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #8d8177 !important;
  line-height: 0;
  transition: color 200ms var(--ui-ease);
}
.workspace-top-link .workspace-top-icon svg { display: block; width: 16px; height: 16px; }
.workspace-top-link:hover .workspace-top-icon,
.workspace-top-link:focus-visible .workspace-top-icon,
.workspace-top-link[aria-current="page"] .workspace-top-icon { color: #fff !important; }
.workspace-top-icon svg { transition: none; }

/* =====================================================================
   Buttons — every primary / secondary / small button on every page
   ===================================================================== */
:where(button, input[type="submit"], input[type="button"],
  .primary-action, .secondary-action, .button-primary, .button-secondary,
  .nav-cta, .mobile-cta, .gate-login, .primary, .secondary,
  .btn-primary, .btn-ghost, .pill, .track-select, .strip-item) {
  transition:
    transform 220ms var(--ui-spring),
    box-shadow 260ms var(--ui-ease),
    background-color 220ms var(--ui-ease),
    background-size var(--ui-dur) var(--ui-ease),
    border-color 220ms var(--ui-ease),
    color 220ms var(--ui-ease),
    filter 220ms var(--ui-ease),
    opacity 220ms var(--ui-ease);
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
:where(button, input[type="submit"], input[type="button"]):disabled { cursor: not-allowed; opacity: .55; transform: none !important; box-shadow: none !important; }

/* Gradient / filled primaries: lift + glow */
.primary-action:hover, .button-primary:hover, .nav-cta:hover, .mobile-cta:hover,
.gate-login:hover, .primary:hover, .btn-primary:hover, .input-submit:hover,
.reset-submit:hover, .task-form button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 12px 30px -8px rgba(255, 92, 0, .45), 0 0 0 1px rgba(255, 176, 0, .18) inset;
}

/* Outline / ghost buttons: skiper005-style fill sweeping in from the left */
.secondary-action, .button-secondary, .secondary, .btn-ghost, .pill,
.track-select, .reset-cancel, .lab-cta, .logout, .toast-close, .task-delete {
  background-image: linear-gradient(var(--ui-fill), var(--ui-fill));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 100% 50%;
}
.secondary-action:hover, .button-secondary:hover, .secondary:hover, .btn-ghost:hover, .pill:hover,
.track-select:hover, .reset-cancel:hover, .logout:hover {
  background-image: linear-gradient(var(--ui-fill), var(--ui-fill));
  background-size: 100% 100%;
  background-position: 0% 50%;
  color: var(--ui-fill-ink) !important;
  border-color: var(--ui-fill) !important;
  transform: translateY(-1px);
}
/* Small icon / destructive buttons get a tint instead of a full fill */
.toast-close:hover, .task-delete:hover, .reset-close:hover {
  background-image: linear-gradient(rgba(255, 92, 0, .16), rgba(255, 92, 0, .16));
  background-size: 100% 100%;
  color: #ffb27a !important;
}
.track-select[aria-pressed="true"]:hover { color: var(--ui-fill-ink) !important; }

/* Press feedback for everything clickable */
:where(button, input[type="submit"], input[type="button"], .primary-action, .secondary-action,
  .button-primary, .button-secondary, .nav-cta, .primary, .secondary, .btn-primary, .btn-ghost,
  .pill, .track-select, .workspace-top-link, .strip-item, .gate-login):active:not(:disabled) {
  transform: translateY(0) scale(.97) !important;
  transition-duration: 90ms;
}

/* Profile avatar + hamburger */
.profile-trigger { transition: box-shadow 200ms var(--ui-ease); }
.profile-trigger:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.nav-toggle:hover { transform: scale(1.06); }

/* =====================================================================
   Inputs, textareas, selects
   ===================================================================== */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, select) {
  caret-color: var(--ui-accent);
  transition: border-color 200ms var(--ui-ease), box-shadow 200ms var(--ui-ease), background-color 200ms var(--ui-ease);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, select):focus {
  outline: none;
  border-color: rgba(255, 126, 26, .6) !important;
  box-shadow: var(--ui-ring);
}
:where(input, textarea)::placeholder { transition: opacity 200ms var(--ui-ease), transform 200ms var(--ui-ease); }
:where(input, textarea):focus::placeholder { opacity: .45; transform: translateX(3px); }

/* Checkboxes & radios: springy tick */
:where(input[type="checkbox"], input[type="radio"]) { cursor: pointer; transition: transform 200ms var(--ui-spring); }
:where(input[type="checkbox"], input[type="radio"]):active { transform: scale(.85); }
:where(input[type="checkbox"], input[type="radio"]):checked { animation: ui-pop 260ms var(--ui-spring); }
@keyframes ui-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Login page: floating fields get a soft glow */
.input-field:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .18) !important; border-color: #fff !important; }

/* =====================================================================
   Cards & small surfaces
   ===================================================================== */
:where(.workspace-card, .insight-card, .progress-tile, .roadmap-step, .system-panel,
  .audience-card, .metric-card, .architecture-node, .pillar-card, .course-card, .lesson, .lab-panel) {
  transition: transform 300ms var(--ui-ease), border-color 300ms var(--ui-ease), box-shadow 300ms var(--ui-ease);
}
:where(.workspace-card, .insight-card, .progress-tile, .roadmap-step, .audience-card, .metric-card, .pillar-card):hover {
  border-color: rgba(255, 126, 26, .28);
  box-shadow: 0 18px 40px -24px rgba(255, 92, 0, .35);
}
.progress-tile:hover, .roadmap-step:hover, .metric-card:hover { transform: translateY(-3px); }

/* Practice path cards: number badge springs on hover */
.track .track-number { transition: transform 300ms var(--ui-spring), background-color 300ms var(--ui-ease); }
.track:not([data-soon="true"]):hover .track-number { transform: rotate(-6deg) scale(1.08); }
.track-tags span { transition: border-color 200ms var(--ui-ease), color 200ms var(--ui-ease); }
.track:not([data-soon="true"]):hover .track-tags span { border-color: rgba(255, 255, 255, .14); color: #b2a69b; }
.path-status { transition: box-shadow 300ms var(--ui-ease); }
.track:not([data-soon="true"]):hover .path-status { box-shadow: 0 0 14px rgba(83, 230, 157, .25); }

/* JupyterLab panel slides in */
.lab-panel:not([hidden]) { animation: ui-rise 420ms var(--ui-ease) both; }
@keyframes ui-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Lists: rows highlight gently */
:where(.task-item, .activity-feed li, .games-list li, .leaderboard tbody tr, .profile-badges li) {
  transition: background-color 200ms var(--ui-ease), transform 200ms var(--ui-ease);
}
:where(.task-item, .games-list li, .leaderboard tbody tr):hover { background-color: rgba(255, 126, 26, .05); }

/* Profile dropdown & toasts animate in */
.profile-panel:not([hidden]) { animation: ui-drop 220ms var(--ui-ease) both; transform-origin: top right; }
@keyframes ui-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.toast { animation: ui-rise 300ms var(--ui-spring) both; }

/* Skip link slides down instead of popping */
.skip-link { transition: transform 200ms var(--ui-ease), opacity 200ms var(--ui-ease); }

/* =====================================================================
   Accessibility: respect reduced-motion (as skiper40 does)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}