/* Hydrogen's native ORBITAL entry point. The imported files are the canonical
   design-system payload; this layer only names PureScript typography roles and
   supplies baseline keyboard/disabled behaviour for native controls. */
@import url('styles.css');

.orbital-display{
  font-family:var(--font-display);font-size:var(--size-display);font-weight:400;
  letter-spacing:var(--track-display);line-height:1.1;color:var(--text-strong)
}
.orbital-section-title{
  font-family:var(--font-display);font-size:var(--size-h2);font-weight:400;
  letter-spacing:-.035em;line-height:1.1;color:var(--text-strong)
}
.orbital-card-title{
  font-family:var(--font-display);font-size:var(--size-h3);font-weight:500;
  letter-spacing:var(--track-title);line-height:1.3;color:var(--text-strong)
}
.orbital-eyebrow{
  font-family:var(--font-ui);font-size:var(--size-label);font-weight:600;
  letter-spacing:var(--track-eyebrow);line-height:1.4;text-transform:uppercase;
  color:var(--text-accent)
}
.orbital-body{
  font-family:var(--font-ui);font-size:var(--size-body);line-height:1.7;
  color:var(--text-body)
}
.orbital-prose{
  max-width:58ch;font-family:var(--font-prose);font-size:1.05rem;
  font-weight:400;line-height:1.75;color:var(--text-body)
}

/* The source guide uses its faintest ink on some sub-12px labels. The native
   preset keeps their hierarchy but promotes readable text one step so it meets
   WCAG AA in both token sets. Decorative hairlines remain faint. */
.tag,.progress-head,.statband .k,.pull cite{color:var(--ink-m)}
.metarow .my{color:var(--accent)}
.cv-meta{color:var(--ink-m)}
.term-bar .tt{color:hsla(var(--hue),20%,99%,.62)}
.term .cm{color:hsla(var(--hue),18%,92%,.62)}
.badge2.is-warn{color:hsl(38,58%,32%)}
html[data-theme='onosendai'] .badge2.is-success{color:hsl(150,46%,66%)}
html[data-theme='onosendai'] .badge2.is-warn{color:hsl(38,70%,68%)}
html[data-theme='onosendai'] .badge2.is-error{color:hsl(2,64%,72%)}

.btn:focus-visible,.link-cta:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:2px
}
.btn:disabled,.btn[aria-disabled='true'],.link-cta[aria-disabled='true']{
  opacity:.4;cursor:not-allowed;pointer-events:none
}

/* Viewport application chrome. The shell, not the document, owns overflow. */
.orbital-app-shell{
  height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;background:var(--surface-page)
}
.orbital-app-shell-header{min-width:0;min-height:0}
.orbital-app-shell-main{display:flex;min-width:0;min-height:0;overflow:hidden}
.orbital-app-shell-status{
  height:30px;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;overflow:hidden;padding:0 var(--space-4);border-top:1px solid var(--line-faint);
  background:color-mix(in srgb,var(--surface-raised) 90%,transparent);
  font-size:var(--size-micro);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-body);white-space:nowrap
}
.orbital-app-shell-status-left,.orbital-app-shell-status-right{
  min-width:0;display:flex;align-items:center;gap:var(--space-4);overflow:hidden;text-overflow:ellipsis
}

/* Federated navigation, breadcrumbs, and tabs. */
.orbital-nav{
  height:54px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:0 var(--gutter);border-bottom:1px solid var(--line-faint);
  background:color-mix(in srgb,var(--surface-raised) 90%,transparent);
  backdrop-filter:blur(28px) saturate(1.3)
}
.orbital-nav-brand,.orbital-nav-links{display:flex;align-items:center;min-width:0}
.orbital-nav-links{gap:1.5rem;overflow-x:auto;scrollbar-width:none}
.orbital-nav-links::-webkit-scrollbar{display:none}
.orbital-nav-link{
  position:relative;flex:none;font-size:var(--size-label);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-body);outline:none;
  transition:color var(--dur-ui)
}
.orbital-nav-link::after{
  content:'';position:absolute;inset:auto 0 -3px;height:1px;background:var(--interactive);
  transform:scaleX(0);transform-origin:right;transition:transform var(--dur-ui) var(--ease)
}
.orbital-nav-link:hover,.orbital-nav-link[data-state='active']{color:var(--interactive)}
.orbital-nav-link:hover::after,.orbital-nav-link[data-state='active']::after{transform:scaleX(1);transform-origin:left}
.orbital-nav-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.orbital-nav-divider{width:1px;height:13px;flex:none;background:var(--line)}
.orbital-breadcrumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;font-size:var(--size-label);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-body)
}
.orbital-breadcrumb-item{display:inline-flex;align-items:center;gap:.6rem}
.orbital-breadcrumbs a:hover{color:var(--interactive)}
.orbital-breadcrumb-current{color:var(--text-strong)}
.orbital-breadcrumb-separator{color:var(--text-faint)}
.orbital-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line-faint)}
.orbital-tab{
  margin-bottom:-1px;padding:.7rem 1rem;border:0;border-bottom:2px solid transparent;
  background:none;font:600 var(--size-label)/1 var(--font-ui);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--text-body);cursor:pointer;outline:none;
  transition:color var(--dur-ui),border-color var(--dur-ui)
}
.orbital-tab:hover{color:var(--text-strong)}
.orbital-tab[data-state='active']{color:var(--interactive);border-bottom-color:var(--interactive)}
.orbital-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.orbital-tab-count{margin-left:.4rem;color:var(--text-body);font-weight:500}

/* Native source lines for Hydrogen.Orbital.Code. */
.orbital-code-viewer{display:flex;min-width:0;min-height:0;flex-direction:column}
.orbital-code-viewer .cv-scroll{min-height:0;max-height:100%;flex:1}
.orbital-code-lines{display:table;min-width:100%;padding:var(--space-3) 0;font-size:.78rem;line-height:1.7}
.orbital-code-line{display:table-row;position:relative}
.orbital-code-line[data-state='selected']{background:color-mix(in srgb,var(--interactive) 9%,transparent);box-shadow:inset 2px 0 var(--interactive)}
.orbital-code-line-number{
  position:sticky;left:0;display:table-cell;width:1%;padding:0 .8rem 0 1rem;
  border-right:1px solid var(--line-faint);background:var(--surface-code);
  color:var(--text-body);text-align:right;user-select:none;font-variant-numeric:tabular-nums
}
.orbital-code-source{display:table-cell;padding:0 1.1rem;white-space:pre;color:var(--text-strong)}
.orbital-syntax-comment{color:var(--text-body);font-style:italic}
.orbital-syntax-keyword{color:var(--text-accent);font-weight:600}
.orbital-syntax-type{color:color-mix(in srgb,var(--interactive) 76%,var(--text-strong))}
.orbital-syntax-string{color:hsl(31,48%,38%)}
.orbital-syntax-number{color:hsl(257,30%,47%)}
.orbital-syntax-operator{color:var(--interactive)}
.orbital-syntax-punctuation{color:var(--text-body)}
.orbital-syntax-diff-added{color:hsl(150,48%,31%)}
.orbital-syntax-diff-removed{color:hsl(2,53%,43%)}
.orbital-syntax-diff-meta{color:var(--text-accent);font-weight:600}
html[data-theme='onosendai'] .orbital-syntax-comment{color:var(--text-body)}
html[data-theme='onosendai'] .orbital-syntax-string{color:hsl(38,58%,68%)}
html[data-theme='onosendai'] .orbital-syntax-number{color:hsl(266,54%,76%)}
html[data-theme='onosendai'] .orbital-syntax-diff-added{color:hsl(150,52%,68%)}
html[data-theme='onosendai'] .orbital-syntax-diff-removed{color:hsl(2,64%,72%)}

@media(max-width:600px){
  .orbital-nav{padding:0 var(--space-4)}
  .orbital-nav-brand .brand span:last-child{font-size:0}
  .orbital-nav-links{gap:.9rem}
  .orbital-nav-link{letter-spacing:.1em}
  .orbital-app-shell-status{padding-inline:var(--space-3)}
}

@media(prefers-reduced-motion:reduce){
  .btn,.link-cta,.glass,.orbital-lift,.orbital-sweep::before,
  .orbital-nav-link,.orbital-nav-link::after,.orbital-tab{transition:none}
  .statusdot-dot.is-pulse::after,.progress-track.is-indeterminate .progress-bar,
  .spinner,.skeleton,.term .cur{animation:none}
}