/* Opening section: profile card, cobe globe and the explorer, matched to the
   Direction H mockup. Colors come from the theme tokens (the hero is navy in
   both themes); --relation is the green for "made in -> studied" lines.
   Default layout is the stacked one (mobile, reduced motion, short screens);
   js/profile-globe.js adds .is-pinned on desktop for the two-phase scroll. */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hero.profile { padding: clamp(36px, 6vw, 80px) var(--gutter) clamp(48px, 6vw, 90px); background: #060708; overflow: clip; }
.profile-pin {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  max-width: var(--max);
  margin: 0 auto;
}
.profile-copy { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(10px, 2vh, 18px); }
.globe-wrap { grid-column: 2; grid-row: 1; aspect-ratio: 1 / 1; max-height: 640px; }
.explorer { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }

/* ---- profile card ---- */
.profile-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--section-dark) 94%, transparent);
}
/* the [AL] logo mark replaces the old round initials badge */
.pc-avatar { display: inline-flex; align-items: center; height: 50px; color: var(--on-dark); }
.pc-avatar svg { display: block; height: 36px; width: auto; }
.pc-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-name { margin: 0; font-size: 19px; font-weight: 700; color: var(--on-dark); }
.pc-role { margin: 0; font-size: 13px; color: var(--on-dark-muted); }
.pc-clock { font-family: var(--mono); white-space: nowrap; }
.pc-clock time { font-variant-numeric: tabular-nums; }
.pc-status { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--on-dark-muted); }
.pc-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.pc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pc-book { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--blue); color: var(--on-fill); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pc-book:hover { background: var(--blue-hover); }
.pc-cred { min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--coral); font: 500 12px var(--mono); letter-spacing: 0.12em; cursor: pointer; }
.pc-cred:focus-visible, .pc-book:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.pc-panel {
  position: absolute; z-index: 20; left: 0; top: calc(100% + 8px); width: min(380px, 100%); max-height: min(60vh, 460px); overflow: auto; margin: 0; padding: 18px;
  display: grid; gap: 12px; border: 1px solid color-mix(in srgb, var(--on-dark) 24%, transparent); border-radius: 14px;
  background: var(--section-dark); box-shadow: 0 12px 28px rgba(4, 8, 18, 0.55); font-size: 13px;
}
.pc-panel[hidden] { display: none; }
.pc-panel dt { color: var(--on-dark-muted); font: 500 12px var(--mono); letter-spacing: 0.14em; }
.pc-panel dd { margin: 4px 0 0; color: var(--on-dark); line-height: 1.5; }
.pc-panel dd b { color: var(--coral); font: 500 13px var(--mono); }

/* ---- headline block ---- */
.hero.profile .eyebrow { margin: 0; color: var(--on-dark-muted); font: 500 12px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.hero.profile h1 { margin: 0; font: 500 clamp(24px, min(2.64vw, 4.5vh), 38px) / 1.14 var(--mono); letter-spacing: -0.035em; text-wrap: balance; }
.hero.profile h1 .accent { display: block; margin-top: clamp(10px, 2vh, 18px); font-size: clamp(15px, min(1.46vw, 2.5vh), 21px); line-height: 1.35; letter-spacing: -0.02em; }
.hero.profile h1 .hero-dot { animation-duration: 2.6s; }
.hero.profile .hero-copy { margin: 0; max-width: 560px; color: var(--on-dark-soft); font-size: clamp(13px, 1.9vh, 15px); line-height: 1.6; }
.hero.profile .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.hero.profile .button { min-height: 44px; padding: 0 22px; font-family: var(--sans); font-size: 14px; cursor: pointer; background: transparent; }
.hero.profile .button:hover, .hero.profile .button.secondary:hover { background: var(--on-dark); color: var(--section-dark); }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-left: 6px; font-size: 13px; }
.hero-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); text-decoration: none; }
.hero-links a:hover { color: var(--coral); }
.hero.profile .hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent); max-width: none; }
.hero.profile .hero-meta .meta-label { color: var(--on-dark-muted); font: 500 12px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.hero.profile .hero-meta strong { margin-top: 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.hero.profile .hero-meta span:not(.meta-label) { margin-top: 4px; font-size: 12px; color: var(--on-dark-muted); }

/* ---- globe ---- */
.globe-wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.globe-stage { position: relative; flex: 0 0 auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.globe-stage.is-dragging { cursor: grabbing; }
.globe-stage > div { isolation: isolate; }
.globe-stage #globe-canvas { display: block; width: 100%; height: 100%; }
.globe-stage #globe-surface { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.globe-stage.has-surface #globe-surface { visibility: visible; }
/* Black cobe land becomes transparent; its original markers and arcs stay intact. */
.globe-stage.has-surface #globe-canvas { position: relative; mix-blend-mode: screen; }
.globe-stage #globe-fx, .globe-stage #globe-night { position: absolute; inset: 0; pointer-events: none; }
/* The night side takes the amber hue of the dots under it and leaves their brightness alone. */
.globe-stage #globe-night { mix-blend-mode: color; }
.globe-stage.has-surface #globe-night { opacity: 0.18; }
.globe-stage.has-surface .globe-label { background: rgba(6, 7, 8, 0.82); }
.globe-stage.has-surface .globe-label.is-selected { background: var(--coral); }
.globe-flight {
  margin: 10px 0 0; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--on-dark) 22%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--section-dark) 84%, transparent); color: var(--coral);
  font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.globe-label {
  position: absolute; display: inline-flex; align-items: center; gap: 6px; min-height: 26px;
  padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--on-dark) 24%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--section-dark) 94%, transparent);
  color: var(--on-dark); font: 600 13px/1.2 var(--mono); white-space: nowrap; pointer-events: auto; cursor: pointer;
  transition: opacity 0.3s, border-color 0.2s, background 0.2s;
}
span.globe-label { cursor: default; pointer-events: none; }
.globe-label i { color: var(--coral); font-style: normal; }
.globe-label:hover { border-color: var(--coral); }
.globe-label.is-selected { border-color: var(--coral); background: var(--coral); color: var(--section-dark); }
.globe-label.is-selected i { color: inherit; opacity: 0.75; }
.globe-label:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.globe-label.is-subject { border-color: var(--relation); background: color-mix(in srgb, var(--section-dark) 84%, transparent); color: var(--relation); }
.globe-label.is-subject u { color: var(--relation); text-decoration: none; }
/* JS-positioned fallback: the label is centred on the point, then nudged to its side. */
.globe-label.side-top    { translate: -50% calc(-100% - 10px); }
.globe-label.side-bottom { translate: -50% 10px; }
.globe-label.side-left   { translate: calc(-100% - 10px) -50%; }
.globe-label.side-right  { translate: 10px -50%; }
/* With CSS anchor positioning (stage not flagged .no-anchor) the label sits against cobe's anchor for its marker. */
.globe-stage:not(.no-anchor) .globe-label { translate: none; }
.globe-stage:not(.no-anchor) .globe-label.side-top    { bottom: anchor(top);   left: anchor(center); translate: -50% -10px; }
.globe-stage:not(.no-anchor) .globe-label.side-bottom { top: anchor(bottom);   left: anchor(center); translate: -50% 10px; }
.globe-stage:not(.no-anchor) .globe-label.side-left   { right: anchor(left);   top: anchor(center);  translate: -10px -50%; }
.globe-stage:not(.no-anchor) .globe-label.side-right  { left: anchor(right);   top: anchor(center);  translate: 10px -50%; }

.globe-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0; padding: 0; list-style: none; color: var(--on-dark-muted); font: 500 12px var(--mono); letter-spacing: 0.04em; }
.globe-legend li { display: inline-flex; align-items: center; gap: 6px; }
.globe-legend i { display: inline-block; font-style: normal; }
.lg-route, .lg-rel { width: 16px; height: 0; border-top: 2px solid var(--coral); }
.lg-rel { border-top-color: var(--relation); border-top-style: dashed; }
.lg-dia { color: var(--relation); }

/* ---- explorer ---- */
.panel {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 16px; color: var(--on-dark);
  border: 1px solid color-mix(in srgb, var(--on-dark) 20%, transparent);
  background: color-mix(in srgb, var(--section-dark) 94%, transparent);
}
.panel-list { overflow: hidden; }
.panel-head { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 12px; border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent); }
.panel-bar { margin: 0; color: var(--coral); font: 500 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.panel-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.panel-intro { margin: 0; color: var(--on-dark-muted); font-size: 12px; line-height: 1.5; }
.tabs { display: flex; gap: 6px; margin-top: 4px; }
.tabs button { flex: 1; min-height: 44px; border: 1px solid color-mix(in srgb, var(--on-dark) 24%, transparent); border-radius: 999px; background: transparent; color: var(--on-dark); font: 600 12px var(--mono); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--on-dark); border-color: var(--on-dark); color: var(--section-dark); }
.tabs button:focus-visible, .rows button:focus-visible, .d-projects button:focus-visible, .d-back:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }
.search { margin-top: 2px; color: var(--on-dark-muted); font: 500 12px var(--mono); }
#explorer-search { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--on-dark) 24%, transparent); border-radius: 10px; background: var(--section-dark); color: var(--on-dark); font: 500 13px var(--sans); }
#explorer-search::placeholder { color: var(--on-dark-muted); }
#explorer-search:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }
.rows-wrap { flex: 1; min-height: 0; max-height: 360px; overflow: auto; overscroll-behavior: contain; }
.rows { margin: 0; padding: 0; list-style: none; }
.rows button {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; min-height: 48px;
  padding: 10px 18px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent); border-left: 3px solid transparent;
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.rows button:hover { background: color-mix(in srgb, var(--on-dark) 6%, transparent); }
.rows button[aria-pressed="true"] { background: color-mix(in srgb, var(--on-dark) 8%, var(--section-dark)); border-left-color: var(--relation); }
.r-code { padding-top: 2px; color: var(--coral); font: 700 12px var(--mono); }
.rows button[aria-pressed="true"] .r-code { color: var(--relation); }
.r-main b { display: block; font-size: 13px; font-weight: 600; }
.rows button[aria-pressed="true"] .r-main b { font-weight: 700; }
.r-main i { display: block; margin-top: 2px; color: var(--on-dark-muted); font-size: 12px; font-style: normal; }
.r-empty { padding: 14px 18px; color: var(--on-dark-muted); font-size: 12px; }

.panel-detail { overflow: auto; overscroll-behavior: contain; padding: 18px; gap: 14px; }
.d-head { margin: -18px -18px 0; padding: 18px 18px 12px; border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent); }
.d-kicker { margin: 0; color: var(--on-dark-muted); font: 500 12px var(--mono); letter-spacing: 0.14em; }
.d-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.d-count { color: var(--coral); font: 500 12px var(--mono); }
.d-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.panel-detail .d-top + .d-title { font-size: 21px; margin-top: -4px; }
.d-sub { margin: 0; color: var(--on-dark-muted); font-size: 12px; line-height: 1.5; }
.d-back { min-height: 44px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--on-dark) 24%, transparent); border-radius: 999px; background: transparent; color: var(--on-dark); font: 500 12px var(--mono); cursor: pointer; }
.d-back:hover { border-color: var(--on-dark); }
.d-projects { margin: 0 -18px; padding: 0; list-style: none; }
.d-projects li { display: flex; align-items: stretch; min-width: 0; border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent); }
.d-projects button { display: flex; flex: 1; min-width: 0; justify-content: space-between; gap: 10px; align-items: center; min-height: 48px; padding: 6px 18px 6px 18px; border: 0; background: none; color: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.d-projects button b { font-weight: 600; }
.d-projects button b { min-width: 0; overflow-wrap: anywhere; }
.d-projects button span { flex: 0 1 46%; min-width: 0; color: var(--on-dark-muted); font: 500 12px var(--mono); text-align: right; overflow-wrap: anywhere; }
.d-projects a + button, .d-projects button:has(+ a) { padding-right: 0; }
.d-projects button:hover b { color: var(--coral); }
.d-projects a { display: grid; place-items: center; width: 44px; color: var(--on-dark-muted); text-decoration: none; }
.d-projects a:hover { color: var(--coral); }
.d-empty { margin: 0; color: var(--on-dark-muted); font-size: 13px; }
.d-note { margin: 0; color: var(--on-dark-muted); font-size: 12px; }
.dg { position: relative; width: 284px; max-width: 100%; height: 196px; margin: 0 auto; }
.dg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dg-line { stroke: color-mix(in srgb, var(--on-dark) 28%, transparent); stroke-width: 1.5; }
.dg-line.is-made { stroke: var(--coral); }
.dg-line.is-rel { stroke: var(--relation); stroke-dasharray: 5 5; }
.dg-line.is-off { stroke-dasharray: 3 4; opacity: 0.5; }
.dg-box { position: absolute; width: 118px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--on-dark) 24%, transparent); border-radius: 10px; background: var(--section-dark); }
.dg-box span { display: block; color: var(--on-dark-muted); font: 500 12px var(--mono); }
.dg-box b { display: block; margin-top: 1px; font-size: 12px; overflow-wrap: anywhere; }
.b-made { left: 0; top: 0; border-color: var(--coral); } .b-made span { color: var(--coral); }
.b-study { right: 0; top: 0; border-color: var(--relation); } .b-study span { color: var(--relation); }
.b-study.is-off { border-color: color-mix(in srgb, var(--on-dark) 24%, transparent); opacity: 0.6; } .b-study.is-off span { color: var(--on-dark-muted); }
.b-key { left: 0; bottom: 0; } .b-files { right: 0; bottom: 0; }
.dg-core { position: absolute; left: 112px; top: 68px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--coral); color: var(--section-dark); font: 700 12px var(--mono); }
.d-links { display: flex; flex-wrap: wrap; gap: 6px; }
.d-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--on-dark) 26%, transparent); border-radius: 999px; color: var(--on-dark); font-size: 12px; text-decoration: none; }
.d-links a:hover { border-color: var(--on-dark); }
.d-links .d-open { border-color: var(--on-dark); background: var(--on-dark); color: var(--section-dark); font-weight: 700; }

/* ---- pinned two-phase layout (desktop) ---- */
.hero.profile.is-pinned { padding: 0 var(--gutter); }
.is-pinned .profile-pin { position: relative; display: block; height: calc(100vh - var(--hdr, 82px)); }
.is-pinned .profile-copy { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: min(47%, 600px); justify-content: center; will-change: transform, opacity; }
.is-pinned .profile-copy { text-shadow: 0 1px 4px #060708, 0 0 18px rgba(6, 7, 8, 0.8); }
.is-pinned .globe-wrap { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 50%; max-height: none; aspect-ratio: auto; will-change: transform; }
.is-pinned .globe-stage.has-surface { transform: scale(var(--planet-scale, 1)); will-change: transform; }
.is-pinned .has-surface .globe-label {
  font-size: calc(13px / var(--planet-scale, 1));
  min-height: calc(26px / var(--planet-scale, 1));
  padding: calc(6px / var(--planet-scale, 1)) calc(11px / var(--planet-scale, 1));
  gap: calc(6px / var(--planet-scale, 1));
}
.is-pinned .has-surface #globe-fx { opacity: calc(1.5 - var(--planet-scale, 1) / 2); }
.is-pinned .globe-flight { position: absolute; z-index: 1; bottom: 58px; margin-top: 0 !important; }
.is-pinned .explorer { position: absolute; z-index: 3; inset: 0; display: grid; grid-template-columns: 300px 1fr 320px; align-items: start; gap: 0; padding: 28px 0; opacity: 0; pointer-events: none; will-change: opacity; }
.is-pinned .panel-list { grid-column: 1; align-self: stretch; will-change: transform; }
.is-pinned .panel-detail { grid-column: 3; max-height: 100%; will-change: transform; }
.is-pinned .rows-wrap { max-height: none; }
.is-pinned .explorer.is-live .panel { pointer-events: auto; }
.is-pinned .globe-legend { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; }

@media (max-width: 899px) {
  .profile-pin { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .profile-copy, .globe-wrap, .explorer { grid-column: 1; }
  .profile-copy { grid-row: 1; } .globe-wrap { grid-row: 2; max-height: 440px; } .explorer { grid-row: 3; grid-template-columns: minmax(0, 1fr); }
  .rows-wrap { max-height: 300px; }
  .profile-card { grid-template-columns: auto minmax(0, 1fr); }
  .pc-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .hero.profile .hero-meta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .globe-label { padding: 4px 8px; font-size: 13px; }
  .globe-label i { display: none; }
}
/* Tap targets: the pills stay small, but their touch area is at least 44px. */
.globe-label::after { content: ''; position: absolute; inset: -12px -6px; }
span.globe-label::after { content: none; }
@media (prefers-reduced-motion: reduce) { .globe-label { transition: none; } }