/* A light companion to Atlas. Loaded only by the traditional landscape view. */
body {
  --bg: oklch(97.5% .006 272);
  --panel: oklch(99.3% .003 272);
  --text: oklch(25% .025 272);
  --muted: oklch(52% .023 270);
  --muted-strong: oklch(43% .025 270);
  --line: oklch(90% .012 272);
  --line-strong: oklch(83% .023 272);
  --accent: oklch(53% .16 278);
  --accent-dark: oklch(46% .16 278);
  --accent-soft: oklch(95% .022 278);
  background: var(--bg);
}

.is-landscape-page .landscape-hero {
  background-image: linear-gradient(110deg, oklch(15.5% .022 272 / .91), oklch(19% .035 278 / .58)), url('/static/landscape-hero.png');
  background-color: oklch(15.5% .022 272);
}
.is-landscape-page .landscape-hero h1 { font-weight: 650; letter-spacing: -.035em; }
.is-landscape-page .landscape-hero .page-copy { color: oklch(81% .025 270); }
.is-landscape-page .landscape-hero :is(.stat-pill, .landscape-tag-pill) {
  border-color: oklch(74% .027 268 / .22);
  background: oklch(24% .025 272 / .5);
  color: oklch(83% .02 270);
}
.is-landscape-page .landscape-hero :is(.landscape-connect-cta, .landscape-hero-secondary-link, .landscape-hero-anchor) {
  border-radius: 6px;
  border-color: oklch(74% .027 268 / .28);
  background: oklch(20% .024 272 / .7);
  font-weight: 550;
}
.is-landscape-page .landscape-hero :is(.landscape-connect-cta, .landscape-hero-secondary-link, .landscape-hero-anchor):is(:hover, :focus-visible) {
  border-color: oklch(80% .1 278 / .65);
  background: oklch(26% .035 278);
  transform: none;
}
.is-landscape-page .landscape-hero-footer { flex-wrap: wrap; }
.landscape-atlas-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 12px 5px 8px;
  border: 1px solid oklch(73% .11 278 / .6);
  border-radius: 6px;
  background: oklch(29% .065 278);
  color: oklch(90% .055 278);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease;
}
.landscape-atlas-link:is(:hover, :focus-visible) {
  background: oklch(35% .085 278);
  border-color: oklch(83% .1 278);
}
.landscape-atlas-link:focus-visible { outline: 2px solid oklch(83% .1 278); outline-offset: 3px; }
.landscape-atlas-link svg { width: 38px; height: 30px; flex: none; overflow: visible; }
.landscape-atlas-link .material-symbols-outlined { font-size: 16px; opacity: .8; }
.landscape-atlas-orbit { animation: landscape-atlas-orbit 24s linear infinite; transform-origin: 0 0; }
@keyframes landscape-atlas-orbit { to { transform: rotate(360deg); } }

.is-landscape-page .section-kicker { font-weight: 550; letter-spacing: .14em; }
.is-landscape-page :is(.landscape-ordering-control, .landscape-category-control) { font-weight: 500; }
.is-landscape-page :is(.landscape-ordering-control, .landscape-category-control) select {
  border-radius: 6px;
  background-color: var(--panel);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  box-shadow: none;
  font-weight: 500;
}
.is-landscape-page :is(.landscape-ordering-control, .landscape-category-control) select:focus-visible {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}
.is-landscape-page .category-panel {
  background: transparent;
  border-color: color-mix(in oklch, var(--line) 65%, transparent);
  border-radius: 12px;
  box-shadow: none;
}
.is-landscape-page .category-panel:hover { transform: none; box-shadow: none; }
.is-landscape-page .category-title-row h2 { font-weight: 600; letter-spacing: -.025em; }
.is-landscape-page .category-meta-pills .meta-pill { background: oklch(94% .01 272); font-weight: 500; }
.is-landscape-page .company-card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}
.is-landscape-page .company-card:hover {
  border-color: color-mix(in oklch, var(--accent) 28%, var(--line));
  box-shadow: 0 5px 18px oklch(25% .025 272 / .045);
}
.is-landscape-page .company-card::after { opacity: .08; }
.is-landscape-page .company-card > .company-card-top .company-logo-frame {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: none;
  border-radius: 8px;
}
.is-landscape-page .company-name-block h3 { font-weight: 600; }
.is-landscape-page .company-domain { font-weight: 400; }
.is-landscape-page .company-description { line-height: 1.55; }
.is-landscape-page .company-card-facts { border-color: var(--line); }
.is-landscape-page .company-card-fact + .company-card-fact::before { background: var(--line); opacity: .65; }
.is-landscape-page .company-card-fact-icon { background: transparent; color: oklch(60% .027 270); }
.is-landscape-page .company-card-fact-value { font-weight: 600; }
.is-landscape-page .company-card-fact-label { font-weight: 500; letter-spacing: .065em; }
.is-landscape-page .company-signal {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}
.is-landscape-page .company-signal-label {
  color: var(--muted);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .1em;
}
.is-landscape-page .company-signal-icon-frame {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  background: transparent;
  border-color: var(--line-strong);
}
.is-landscape-page .company-signal-icon { font-size: 1.65rem; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 32; }
.is-landscape-page .company-strength-segment { background: oklch(92% .012 272); box-shadow: none; }
.is-landscape-page .company-strength-segment.is-filled { background: var(--strength-fill); box-shadow: none; }
.is-landscape-page .company-strength-text { font-weight: 550; }
.is-landscape-page .company-signal-confidence-line { color: var(--muted); font-size: .76rem; font-weight: 400; }

/* Atlas maturity hues, with darker companion text for a light surface. */
.company-strength-1, .company-card:has(.company-strength-1) { --strength-fill: oklch(72% .065 255); --strength-text: oklch(43% .075 255); }
.company-strength-2, .company-card:has(.company-strength-2) { --strength-fill: oklch(76% .13 235); --strength-text: oklch(42% .095 235); }
.company-strength-3, .company-card:has(.company-strength-3) { --strength-fill: oklch(79% .12 165); --strength-text: oklch(42% .09 165); }
.company-strength-4, .company-card:has(.company-strength-4) { --strength-fill: oklch(85% .13 92); --strength-text: oklch(43% .085 80); }
.company-strength-5, .company-card:has(.company-strength-5) { --strength-fill: oklch(78% .14 50); --strength-text: oklch(45% .1 50); }
.company-strength-6, .company-card:has(.company-strength-6) { --strength-fill: oklch(78% .15 305); --strength-text: oklch(45% .12 305); }
.company-logo-frame.has-planet-fallback::before,
.company-logo-frame:has(> .company-logo-fallback:not([hidden]))::before {
  content: "";
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 24%, oklch(98% .008 270 / .4), transparent 50%),
    radial-gradient(circle at 32% 30%, transparent 25%, oklch(15% .025 272 / .5) 100%),
    repeating-linear-gradient(170deg, transparent 0 5px, oklch(97% .008 270 / .14) 6px 7px, transparent 8px 11px),
    var(--strength-fill, oklch(72% .065 255));
}
.company-logo-frame { position: relative; }
.company-logo-frame.has-planet-fallback::before,
.company-logo-frame:has(> .company-logo-fallback:not([hidden]))::before { width: 32px; height: 32px; }
.company-logo-frame.has-planet-fallback > *,
.company-logo-frame > .company-logo-fallback { display: none; }

.company-drawer {
  border-color: var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 24px 70px oklch(20% .025 272 / .14);
}
.company-drawer-header { border-color: var(--line); }
.company-drawer-header h2 { font-weight: 650; letter-spacing: -.035em; }
.company-drawer .company-logo-frame { background: transparent; border-color: var(--line); border-radius: 8px; }
.company-drawer .section-kicker,
.company-drawer .company-assessment-label { font-weight: 550; letter-spacing: .13em; }
.company-drawer .company-assessment-card { background: var(--panel); border-radius: 8px; box-shadow: none; }
.company-drawer .meta-pill { background: oklch(95% .01 272); font-weight: 500; }
.company-drawer .company-assessment-stage { background: oklch(95% .01 272); }
.is-landscape-page .button, .company-drawer .button { border-radius: 6px; box-shadow: none; }
.is-landscape-page .button-primary, .company-drawer .button-primary { background: var(--accent); }

.landscape-atlas-tooltip {
  position: fixed;
  z-index: 200;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 13px;
  border: 1px solid oklch(32% .025 273);
  border-radius: 6px;
  background: oklch(18% .023 272);
  color: oklch(94% .01 270);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 16px oklch(15% .022 272 / .12);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce), (max-width: 767px), (pointer: coarse) {
  .landscape-atlas-orbit { animation: none; }
}

@media (max-width: 650px) {
  .is-landscape-page :is(.landscape-ordering-control, .landscape-category-control) { width: 100%; max-width: 100%; }
  .is-landscape-page :is(.landscape-ordering-control, .landscape-category-control) select { flex: 1 1 0; width: 0; max-width: none; }
  .company-drawer { inset: 12px 10px; width: auto; max-height: calc(100dvh - 24px); padding: 20px 18px; transform: none; }
  .company-drawer-body { min-height: 0; }
  .company-drawer .company-assessment-grid { grid-template-columns: minmax(0, 1fr); }
  .company-drawer-header, .company-drawer-headline { flex-direction: row; }
  .company-drawer-headline { gap: 12px; }
  .company-drawer-headline > div:last-child { min-width: 0; }
  .company-drawer-logo { width: 48px; height: 48px; flex-basis: 48px; }
  .company-drawer-header h2 { font-size: 1.7rem; overflow-wrap: anywhere; }
}