/* OpenBatterySim — component layer.
   Ports design-import/components/{core,navigation,surfaces,data}/*.jsx to plain CSS
   classes. Every value comes from tokens/*.css via var(); no raw hex, no accent hue,
   no shadow, no blur, no gradient. Interaction rules follow design-import/readme.md
   "Visual foundations" (States / Animation / Transparency & blur). */

/* ---------- core ---------- */

/* Button.jsx — ghost pill CTA. 18/24 padding, 32px radius, >=44px touch target. */
.obs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--button-pad-y) var(--button-pad-x);
  border-radius: var(--radius-pill);
  min-height: var(--touch-min);
  font-family: var(--font-ui);
  font-size: var(--button-cap-size);
  line-height: var(--button-cap-lh);
  letter-spacing: var(--button-cap-ls);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-none);
  transition: opacity 160ms linear, background 160ms linear;
}
.obs-btn--ghost-dark {
  background: transparent;
  color: var(--on-primary);
  border: var(--hairline) solid var(--on-primary);
}
.obs-btn--ghost-light {
  background: transparent;
  color: var(--ink);
  border: var(--hairline) solid var(--ink);
}
.obs-btn--filled-cool {
  background: var(--canvas-cool);
  color: var(--ink);
  border: var(--hairline) solid var(--canvas-cool);
}
.obs-btn--compact {
  padding: var(--space-sm) var(--space-lg);
  min-height: 0;
}
.obs-btn:hover { opacity: 0.7; }
.obs-btn--filled-cool:hover { opacity: 0.85; }
.obs-btn[disabled], .obs-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }

/* Eyebrow.jsx — all-caps micro label. */
.obs-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--micro-cap-size);
  line-height: var(--micro-cap-lh);
  letter-spacing: var(--micro-cap-ls);
  text-transform: uppercase;
  color: var(--on-primary-mute);
}
.obs-eyebrow--on-light { color: var(--ink-mute); }

/* TextLink.jsx — persistent underline. */
.obs-link { color: var(--link-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.obs-link--on-light { color: var(--link-on-light); }
.obs-link:hover { opacity: 0.7; }

/* Wordmark.jsx — no logo file exists; the mark is set in display type. */
.obs-wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 1.6px;
  color: var(--on-primary);
  text-decoration: none;
}
.obs-wordmark--on-light { color: var(--ink); }

/* DisplayHeading tones (sizes live in tokens/typography.css). */
.obs-display-xxl, .obs-display-xl, .obs-display-lg { color: var(--on-primary); }
.obs-on-light { color: var(--ink); }
.obs-body-lg, .obs-body-md, .obs-caption { font-family: var(--font-ui); }
.obs-lead { max-width: 560px; color: var(--on-primary-mute); }
.obs-lead--on-light { color: var(--ink-mute); }

/* ---------- navigation ---------- */

/* NavBarOverlay.jsx — transparent over photography, sticky, 24/32 padding. */
.obs-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xxl);
  padding: var(--nav-pad-y) var(--nav-pad-x);
  background: transparent;
  color: var(--on-primary);
}
/* Light pages keep the dark nav bar rather than inventing a light chrome. */
.obs-nav--solid { background: var(--canvas-night); }
.obs-nav__items { display: flex; align-items: center; gap: var(--space-xxl); }
.obs-nav__item {
  font-family: var(--font-ui);
  font-size: var(--button-cap-size);
  line-height: var(--button-cap-lh);
  letter-spacing: var(--button-cap-ls);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
  padding-bottom: 2px;
  border-bottom: var(--hairline) solid transparent;
  transition: opacity 160ms linear;
}
.obs-nav__item:hover { opacity: 1; }
.obs-nav__item[aria-current="page"] { opacity: 1; border-bottom-color: currentColor; }
/* Hamburger below 768px, dark overlay kept. No blur, no slide animation. */
.obs-nav__menu { position: relative; }
.obs-nav__toggle { display: none; }
@media (max-width: 767px) {
  .obs-nav__toggle {
    display: inline-block;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-family: var(--font-ui);
    font-size: var(--button-cap-size);
    letter-spacing: var(--button-cap-ls);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    min-height: var(--touch-min);
  }
  .obs-nav__toggle[aria-expanded="false"] + .obs-nav__items { display: none; }
  .obs-nav__items {
    position: absolute;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: var(--canvas-night);
    border: var(--hairline) solid var(--hairline-on-dark);
    min-width: 220px;
  }
}

/* FooterDark.jsx — site-wide dark footer. */
.obs-footer {
  background: var(--canvas-night);
  color: var(--on-primary);
  padding: var(--space-xxl) var(--space-xl);
  font-family: var(--font-ui);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
}
.obs-footer__cols {
  max-width: var(--reading-column);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-huge);
}
.obs-footer__col { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 160px; }
.obs-footer__col a { color: var(--on-primary-mute); text-decoration: none; font-size: var(--caption-size); }
.obs-footer__col a:hover { opacity: 0.7; }
.obs-footer__legal {
  max-width: var(--reading-column);
  margin: var(--space-xxl) auto 0;
  padding-top: var(--space-md);
  border-top: var(--hairline) solid var(--hairline-on-dark);
  color: var(--on-primary-mute);
  opacity: 0.7;
}

/* ---------- surfaces ---------- */

/* PhotoBand.jsx — full-viewport photographic band, no vertical padding of its own. */
.obs-band {
  position: relative;
  min-height: var(--band-min-height);
  background: var(--canvas-night);
  color: var(--on-primary);
  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.obs-band--center { justify-content: center; }
/* First band sits under the transparent nav. */
.obs-band--under-nav { margin-top: -88px; padding-top: 88px; border-radius: 0; }
.obs-band--short { min-height: 72vh; }
.obs-band__inner {
  position: relative;
  width: 100%;
  max-width: var(--reading-column);
  margin: 0 auto;
  padding: var(--space-huge) var(--space-xxl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
}

/* PhotoPlate.jsx — labelled slot until real graded photography lands. */
.obs-plate {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--canvas-night-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--hairline) solid var(--hairline-on-dark);
  font-family: var(--font-ui);
  font-size: var(--micro-cap-size);
  letter-spacing: var(--micro-cap-ls);
  text-transform: uppercase;
  color: var(--hairline-on-dark);
}
.obs-plate--sm { border-radius: var(--radius-sm); }
.obs-plate img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-grade); }
.obs-plate--strong img { filter: var(--photo-grade-strong); }

/* ContentCard.jsx — light surface, hairline, 8px radius, no shadow, no hover lift. */
.obs-card {
  background: var(--canvas-light);
  border: var(--hairline) solid var(--hairline-on-light);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--shadow-none);
}
.obs-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--canvas-night-soft);
}
.obs-card__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--micro-cap-size);
  letter-spacing: var(--micro-cap-ls);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.obs-card__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  letter-spacing: var(--body-md-ls);
  font-weight: var(--font-weight-bold);
  color: var(--ink);
}
.obs-card__body { margin: 0; font-family: var(--font-ui); font-size: var(--caption-size); line-height: 1.6; color: var(--ink-mute); }
.obs-card__meta { font-family: var(--font-ui); font-size: var(--caption-size); color: var(--ink-mute); }
.obs-card__footer { margin-top: auto; padding-top: var(--space-sm); }

/* VideoFrame.jsx — 16:9 well, outlined play ring, typographic control. */
.obs-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--canvas-night);
}
.obs-video__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  border: var(--hairline) solid var(--on-primary);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary);
  font-family: var(--font-ui);
  font-size: var(--button-cap-size);
  letter-spacing: var(--button-cap-ls);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 160ms linear;
}
.obs-video__ring:hover { opacity: 0.7; }
.obs-video__duration {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--micro-cap-size);
  letter-spacing: var(--micro-cap-ls);
  text-transform: uppercase;
  color: var(--on-primary);
}

/* ---------- data (visual only — no sweep data source is wired yet) ---------- */

/* DataTable.jsx — hairline-ruled, caps headers, no fills. */
.obs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--caption-size);
  color: var(--ink);
}
.obs-table th {
  font-size: var(--micro-cap-size);
  letter-spacing: var(--micro-cap-ls);
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
  font-weight: var(--font-weight-regular);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--hairline) solid var(--hairline-on-light);
}
.obs-table td {
  padding: var(--space-sm);
  border-bottom: var(--hairline) solid var(--hairline-on-light);
  white-space: nowrap;
}

/* MetricReadout.jsx — display-tier figure over a caps label. */
.obs-metric { display: flex; flex-direction: column; gap: var(--space-xxs); }
.obs-metric__label {
  font-family: var(--font-ui);
  font-size: var(--micro-cap-size);
  letter-spacing: var(--micro-cap-ls);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.obs-metric__value {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-lh);
  letter-spacing: var(--display-lg-ls);
  text-transform: uppercase;
  color: var(--ink);
}
.obs-metric__unit { font-size: 0.4em; letter-spacing: var(--micro-cap-ls); margin-left: 0.35em; }
.obs-metric--on-dark .obs-metric__label { color: var(--on-primary-mute); }
.obs-metric--on-dark .obs-metric__value { color: var(--on-primary); }

/* ---------- layout ---------- */

.obs-section { background: var(--canvas-light); padding: var(--space-section-app) var(--space-xxl); }
.obs-section--dark-soft { background: var(--canvas-night-soft); color: var(--on-primary); padding: var(--space-huge) var(--space-xxl); }
.obs-section--dark { background: var(--canvas-night); color: var(--on-primary); padding: var(--space-section-app) var(--space-xxl); }
.obs-column { width: 100%; max-width: var(--reading-column); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-xxl); }
.obs-rule-top { border-top: var(--hairline) solid var(--hairline-on-dark); padding-top: var(--space-huge); }
/* width:100% keeps `margin:0 auto` from cancelling flex stretch inside .obs-column. */
.obs-metric-row { width: 100%; max-width: var(--reading-column); margin: 0 auto; display: flex; gap: var(--space-huge); flex-wrap: wrap; }
/* Card grid stair-steps 4-up -> 2-up -> 1-up. */
.obs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xxl); }
.obs-grid--split { grid-template-columns: 1.4fr 1fr; align-items: start; }
@media (max-width: 960px) { .obs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .obs-grid, .obs-grid--split { grid-template-columns: 1fr; } }

/* Scale ladder — four model viewports divided by hairlines (website-main template).
   The 3D geometry asset (assets/3d/battery-models.js) is owned by software-dev; each
   cell renders a labelled slot with the same hook name until that asset is wired in. */
.obs-ladder { flex: 1; min-height: 56vh; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: var(--hairline) solid var(--hairline-on-dark); }
.obs-ladder__cell { position: relative; display: flex; flex-direction: column; padding: var(--space-xs) 0 var(--space-xl); }
.obs-ladder__cell + .obs-ladder__cell { border-left: var(--hairline) solid var(--hairline-on-dark); }
.obs-ladder__slot { position: relative; flex: 1; min-height: 0; }
.obs-ladder__label { position: relative; padding: 0 var(--space-xl); font-size: var(--micro-cap-size); line-height: 1.6; letter-spacing: var(--micro-cap-ls); text-transform: uppercase; color: var(--on-primary); }
@media (max-width: 767px) {
  .obs-ladder { grid-template-columns: repeat(2, 1fr); }
  .obs-ladder__cell:nth-child(odd) { border-left: 0; }
}

/* Profile card (website-main "OpenBatterySim administrator" band). */
.obs-profile { display: flex; flex-direction: column; gap: var(--space-sm); }
.obs-profile__photo {
  width: 104px;
  height: 104px;
  border-radius: var(--radius-full);
  border: var(--hairline) solid var(--hairline-on-dark);
  background: var(--canvas-night-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--micro-cap-size);
  letter-spacing: var(--micro-cap-ls);
  text-transform: uppercase;
  color: var(--hairline-on-dark);
}
.obs-profile__name { font-size: var(--body-md-size); font-weight: var(--font-weight-bold); letter-spacing: var(--body-md-ls); color: var(--on-primary); }
.obs-profile__role { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--on-primary-mute); opacity: 0.65; }
.obs-profile__bio { margin: 0; font-size: var(--caption-size); line-height: 1.6; color: var(--on-primary-mute); opacity: 0.8; }
.obs-profile__tags { font-size: var(--micro-cap-size); line-height: 1.7; letter-spacing: var(--micro-cap-ls); text-transform: uppercase; color: var(--on-primary-mute); opacity: 0.5; }
.obs-profile__links { display: flex; gap: var(--space-md); }
.obs-profile__links a { font-size: var(--micro-cap-size); letter-spacing: var(--micro-cap-ls); text-transform: uppercase; color: var(--on-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Form fields — native inputs at token scale (inputs pad 12/16, radius 4px).
   components/forms is out of scope for this task, so no TextInput/SelectField port. */
.obs-field { display: flex; flex-direction: column; gap: var(--space-xxs); }
.obs-field__label { font-family: var(--font-ui); font-size: var(--micro-cap-size); letter-spacing: var(--micro-cap-ls); text-transform: uppercase; color: var(--ink-mute); }
.obs-field input, .obs-field textarea {
  font-family: var(--font-ui);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--ink);
  background: var(--canvas-light);
  border: var(--hairline) solid var(--hairline-on-light);
  border-radius: var(--radius-xs);
  padding: var(--input-pad-y) var(--input-pad-x);
  min-height: var(--touch-min);
}
.obs-field textarea { resize: vertical; }
.obs-status { font-family: var(--font-ui); font-size: var(--caption-size); color: var(--ink-mute); }

.obs-stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.obs-row { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* The component classes below set `display`, which outranks the UA rule for [hidden].
   Without this, hiding a pane with the attribute silently does nothing. */
[hidden] { display: none !important; }

/* ---------- nav dropdown (website-main: SIMULATION / LECTURE / HUB submenus) ----------
   Template opens these on hover; a click toggle is kept alongside so keyboard and touch
   reach the same items. Panel is the night-soft surface with a hairline, no blur. */
.obs-menu { position: relative; display: flex; align-items: center; }
.obs-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-xs);
  min-width: 180px;
  background: var(--canvas-night-soft);
  border: var(--hairline) solid var(--hairline-on-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
}
.obs-menu:hover .obs-menu__panel,
.obs-menu__trigger[aria-expanded="true"] + .obs-menu__panel { display: flex; }
.obs-menu__panel a {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--caption-size);
  letter-spacing: var(--body-md-ls);
  text-transform: none;
  color: var(--on-primary-mute);
  text-decoration: none;
  border-radius: var(--radius-xs);
}
.obs-menu__panel a:hover { color: var(--on-primary); opacity: 1; }
/* Roadmap entries and not-yet-wired controls: shown, dated, not reachable. One rule for
   every surface so a dated item never navigates to "#" and dirties the URL. */
a[aria-disabled="true"] { opacity: 0.32; pointer-events: none; }
.obs-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Signed-in identity chip in the nav. */
.obs-nav__user { display: flex; align-items: center; gap: var(--space-xs); }
.obs-nav__avatar {
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--hairline-on-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 11px; color: var(--on-primary);
}
.obs-nav__nick { font-family: var(--font-ui); font-size: var(--caption-size); color: var(--on-primary); opacity: .85; text-transform: none; letter-spacing: 0; }

/* ---------- modal (login / download) ----------
   Scrim + centred card. No blur, no motion beyond the 160ms opacity the buttons use. */
.obs-modal {
  position: fixed;
  inset: 0;
  background: var(--canvas-night);
  opacity: 0.92;
  display: none;
  z-index: 100;
}
.obs-modal[open], .obs-modal--open { display: block; }
.obs-modal__wrap {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  z-index: 101;
}
.obs-modal__wrap--open { display: flex; }
.obs-modal__card {
  background: var(--canvas-night-soft);
  border: var(--hairline) solid var(--hairline-on-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-xxl);
  width: 380px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--on-primary);
}
.obs-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--micro-cap-ls);
  font-size: 14px;
  line-height: 1.4;
}
.obs-modal__card input {
  font-family: var(--font-ui);
  font-size: var(--caption-size);
  color: var(--on-primary);
  background: var(--canvas-night);
  border: var(--hairline) solid var(--hairline-on-dark);
  border-radius: var(--radius-xs);
  padding: var(--space-sm);
  min-height: var(--touch-min);
}
.obs-modal__error { font-family: var(--font-ui); font-size: var(--micro-cap-size); color: var(--on-primary); }
.obs-modal__error[hidden] { display: none; }
.obs-btn--filled-light { background: var(--canvas-light); color: var(--ink); border: var(--hairline) solid var(--canvas-light); }
.obs-rule-or { display: flex; align-items: center; gap: var(--space-xs); }
.obs-rule-or::before, .obs-rule-or::after { content: ""; flex: 1; height: var(--hairline); background: var(--hairline-on-dark); }
.obs-rule-or span { font-family: var(--font-ui); font-size: var(--micro-cap-size); letter-spacing: var(--micro-cap-ls); color: var(--on-primary-mute); opacity: .5; }
.obs-modal__spec { border-top: var(--hairline) solid var(--hairline-on-dark); padding-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xxs); }
.obs-spec-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xxs) var(--space-sm); font-family: var(--font-ui); font-size: var(--micro-cap-size); line-height: 1.6; color: var(--on-primary-mute); }
.obs-spec-grid dt { opacity: .6; margin: 0; }
.obs-spec-grid dd { margin: 0; }
.obs-list__item {
  padding: var(--space-xs) var(--space-sm);
  border: var(--hairline) solid var(--hairline-on-dark);
  border-radius: var(--radius-xs);
  font-family: var(--font-ui);
  font-size: var(--caption-size);
  color: var(--on-primary-mute);
  text-decoration: none;
}
.obs-modal__links { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: var(--micro-cap-size); }
.obs-modal__links a { color: var(--on-primary-mute); }

/* ---------- home hero: headline column + 2x2 scale grid (website-main second band) ----
   The template's four scale cells are a hairline-divided 2x2 block; each cell opens an
   overlay listing the sub-models available at that scale. */
.obs-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-huge); align-items: center; width: 100%; max-width: var(--reading-column); margin: 0 auto; padding: var(--space-huge) var(--space-xxl); }
@media (max-width: 960px) { .obs-hero { grid-template-columns: 1fr; } }
.obs-scale-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hairline);
  background: var(--hairline-on-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.obs-scale {
  position: relative;
  background: var(--canvas-night);
  padding: var(--space-md);
  aspect-ratio: 1;
  cursor: pointer;
  border: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  color: var(--on-primary);
}
.obs-scale__stage { position: relative; width: 100%; height: 75%; }
/* Slot for assets/3d/battery-models.js (owned by software-dev, not wired in this build). */
.obs-scale__slot { position: absolute; inset: 0; }
.obs-scale__label { padding-top: var(--space-xs); font-family: var(--font-ui); font-size: var(--micro-cap-size); line-height: 1.6; letter-spacing: var(--micro-cap-ls); text-transform: uppercase; color: var(--on-primary); }
.obs-scale__subs {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--canvas-night);
  z-index: 40;
}
.obs-scale[aria-expanded="true"] .obs-scale__subs { display: flex; }
.obs-scale__subs > div {
  background: var(--canvas-night-soft);
  border: var(--hairline) solid var(--hairline-on-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 70%;
  max-height: 92%;
  overflow-y: auto;
}
.obs-scale__subs a {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--caption-size);
  color: var(--on-primary);
  text-decoration: none;
  border-radius: var(--radius-xs);
}

/* ---------- news list (website-news) ---------- */
.obs-news-top { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-xl); }
@media (max-width: 960px) { .obs-news-top { grid-template-columns: 1fr; } }
.obs-feature { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 10; display: block; text-decoration: none; color: var(--on-primary); }
.obs-feature__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-xl);
  background: var(--canvas-night);
  opacity: 0.88;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  z-index: 2;
}
.obs-feature__title { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: 26px; line-height: 1.1; color: var(--on-primary); }
.obs-meta { font-family: var(--font-ui); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--on-primary-mute); opacity: .6; }
.obs-byline { font-family: var(--font-ui); font-size: var(--caption-size); color: var(--on-primary-mute); opacity: .7; }
.obs-side { display: flex; flex-direction: column; gap: var(--space-md); }
.obs-side__item { display: flex; gap: 14px; text-decoration: none; color: var(--on-primary); flex: 1; min-height: 0; }
.obs-side__thumb { width: 170px; aspect-ratio: 4 / 3; flex: none; border-radius: var(--radius-sm); overflow: hidden; position: relative; background: var(--canvas-night-soft); }
.obs-news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
@media (max-width: 960px) { .obs-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .obs-news-grid { grid-template-columns: 1fr; } }
.obs-news-item { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--on-primary); }
.obs-news-item__thumb { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; position: relative; background: var(--canvas-night-soft); }
.obs-news-item__title, .obs-side__title { font-family: var(--font-ui); font-size: 13px; font-weight: var(--font-weight-bold); line-height: 1.3; text-wrap: pretty; color: var(--on-primary); }
.obs-news-item__date, .obs-side__date { font-family: var(--font-ui); font-size: 11px; color: var(--on-primary-mute); opacity: .55; }

/* ---------- article page (website-news-page) ---------- */
.obs-article { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--space-xl) var(--space-xxl) 80px; display: flex; flex-direction: column; gap: var(--space-xl); }
.obs-article__back { font-family: var(--font-ui); font-size: var(--micro-cap-size); letter-spacing: .6px; color: var(--on-primary-mute); text-decoration: none; opacity: .6; }
.obs-article__head { display: flex; flex-direction: column; gap: var(--space-sm); }
.obs-article__title { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: 34px; line-height: 1.1; color: var(--on-primary); }
.obs-article__byline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.obs-article__hero { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; position: relative; background: var(--canvas-night-soft); }
.obs-article__body { display: flex; flex-direction: column; gap: var(--space-md); font-family: var(--font-ui); font-size: 15px; line-height: 1.7; color: var(--on-primary-mute); opacity: .9; }
.obs-article__body p { margin: 0; }
.obs-share { position: relative; }
.obs-share__panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-xs);
  min-width: 180px;
  background: var(--canvas-night-soft);
  border: var(--hairline) solid var(--hairline-on-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}
.obs-share__trigger[aria-expanded="true"] + .obs-share__panel { display: flex; }
.obs-share__panel a { padding: var(--space-xs) var(--space-sm); font-family: var(--font-ui); font-size: var(--caption-size); color: var(--on-primary-mute); text-decoration: none; border-radius: var(--radius-xs); }
.obs-share__panel a:hover { color: var(--on-primary); opacity: 1; }