/* see CLAUDE_notes.md */

/* Closed: out of the flow entirely. */
#model-viewer[hidden] { display: none !important; }

/* Open — promoted by FullPage adding body.mv-fullpage. */
body.mv-fullpage { overflow: hidden; }

body.mv-fullpage #model-viewer {
  position: fixed;
  inset: 0;
  z-index: var(--fadb-fp-z, 900);
  display: flex;
  flex-direction: column;
  background: var(--bg-body, #ffffff);
  font-family: 'DM Mono', monospace;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.mv-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border-color, #e2e6f0);
  background: var(--bg-card, #ffffff);
  min-height: 48px;
}

.mv-head-left {
  display: flex;
  /* Stretched, so the border-right below spans the whole header rather than
     just the text. That is also why the items are centred rather than
     baseline-aligned: baseline items in a stretched box hang from the top. */
  align-self: stretch;
  align-items: center;
  gap: 0.6rem;
  min-width: min(15rem, 38vw);
  padding: 0 0.9rem;
  margin-right: 0.9rem;
  border-right: 1px solid var(--border-color, #e2e6f0);
}

.mv-head-left .pqfa-trigger {
  margin-left: 0;          /* the flex gap already spaces it off the name */
  align-self: center;      /* the row is baseline-aligned; an icon-only button
                              has no text baseline to align to */
}

/* The name is the long text here, so it carries the weight and the truncation. */
.mv-fa-name {
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color, #2a2e42);
}

.mv-fa-notation {
  font-size: .78rem;
  color: var(--text-muted, #7a8199);
  white-space: nowrap;
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
/* Directly after the fatty-acid name, reading as "this acid, these views" —
   not pushed to the far right where it reads as unrelated page chrome. */
.mv-tabs {
  display: flex;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mv-tabs::-webkit-scrollbar { display: none; }

.mv-tab {
  display: inline-flex;
  flex: 0 0 auto;          /* inside a scroller the buttons keep their size */
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-size: .78rem;
  color: var(--text-muted, #7a8199);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.mv-tab:hover { color: var(--text-color, #2a2e42); }
.mv-tab.is-active {
  color: var(--accent-primary, #1d5390);
  border-bottom-color: var(--primary-color, #1d5390);
  font-weight: 600;
}

/* ─── Close ──────────────────────────────────────────────────────────────── */
/* margin-left:auto lives here, so the close button is the only thing on the
   right edge. */
.mv-head-right {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 0.75rem;
  padding-right: 0.9rem;      /* the header does not supply this */
}

/* Standard icon button off the --icon-* ramp (fa.css), NOT a danger button:
   red is reserved for delete/remove — see .toolBtn--danger. */
.mv-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted, #7a8199);
  background: var(--icon-bg);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mv-close:hover {
  background: var(--icon-bg-hover);
  color: var(--primary-color);
}
.mv-close:active { background: var(--icon-bg-active); }

/* ─── Body / panes ───────────────────────────────────────────────────────── */
.mv-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  position: relative;
  background: var(--bg-card, #ffffff);
}

.mv-pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mv-pane[hidden] { display: none !important; }

/* The 2D model fills its pane; FattyModel2D's own flex chain takes it from
   there and the camera re-frames on the resize. */
.mv-fm2d {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.mv-fm2d > .fm2d-model {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.mv-fim3d,
.mv-pll3d {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
}

/* ─── Placeholder / loading states ───────────────────────────────────────── */
.mv-empty,
.mv-loading {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-size: .8rem;
  color: var(--text-muted, #9da3b8);
  text-align: center;
}

/* ─── Trigger button (pages put this on a card header) ───────────────────── */
.mv-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-size: .72rem;
  color: var(--text-muted, #7a8199);
  background: transparent;
  border: 1px solid var(--border-color, #e2e6f0);
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.mv-expand-btn:hover {
  background: var(--hover-bg, rgba(0, 0, 0, .04));
  color: var(--text-color, #2a2e42);
  border-color: var(--text-muted, #9da3b8);
}

/* ── MOBILE ──────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .mv-header {
    flex-wrap: nowrap;
    padding: 0;
    gap: 0;
  }

  .mv-head-left {
    min-width: 0;               /* lets the name actually truncate */
    padding: 0 0.6rem;
    margin-right: 0.5rem;
    gap: 0.4rem;
  }
  .mv-fa-name { max-width: 34vw; }
  .mv-fa-notation { display: none; }   /* it is the first line of the 2D pane */

  .mv-header > .tabcol {
    margin: 0;                  /* the component's own stacking margin is for
                                   a block context, not a header row */
    min-width: 0;
  }
  .mv-header > .tabcol > .tabcol-btn {
    max-width: 44vw;
    font-size: var(--fs-sm);
    padding: 0.35rem 0.6rem;
  }

  /* Anchored to the button's RIGHT edge: the button sits mid-header, and a
     panel wide enough for "Phospholipid Lab" opened leftward from there would
     run off the screen. */
  .mv-header > .tabcol > .tabcol-strip.tabcol-strip {
    left: auto;
    right: 0;
    min-width: 12rem;
    max-width: min(17rem, calc(100vw - 1.2rem));
  }
}