/* ---------- input area ---------- */
.input-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mode-tabs {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px clamp(10px, 3vw, 20px) 0;
  background: var(--panel);
}

.mode-tab {
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: var(--panel-2);
  color: var(--muted);
  /* Custom shadow (not the shared neumorphism-pass rule below, which this
     class is excluded from): horizontal-only, no vertical/bottom component,
     so the tab reads as flowing continuously down into the panel beneath it
     instead of having a shadow seam cutting across its bottom edge. */
  border-color: transparent;
  box-shadow: 3px 0 5px -1px var(--neu-dark), -3px 0 5px -1px var(--neu-light);
  transition: box-shadow .12s, transform .05s, background .12s, color .12s;
}

.mode-tab:hover {
  box-shadow: 4px 0 6px -1px var(--neu-dark), -4px 0 6px -1px var(--neu-light);
}

/* bottom of the left menu zone (pushed down via margin-top:auto).
   align-self:stretch overrides .menu-left's align-items:center (which would
   otherwise shrink-wrap and center this box), so its left padding lines up
   with .attr-legend's -- both spanning the same full-width box. */
.theme-toggle,
.font-toggle,
.fav-highlight-toggle {
  /* Explicit flex+gap instead of relying on inline-button whitespace, so the
     spacing between buttons is controlled and consistent (and can be widened
     without depending on markup whitespace). Vertical spacing between these
     three groups is margin (not padding) -- flex items never collapse
     margins, so each group's own top+bottom margin stacks with its
     neighbor's, keeping their raised shadows from crowding each other. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 clamp(10px, 3vw, 20px);
  margin: 12px 0;
}

.meta-description {
  margin-top: auto;
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  gap: 1rem;
}

.font-label {
  color: var(--muted);
  font-size: .78rem;
  margin-right: 2px;
  flex: none;
}

.theme-opt,
.font-opt,
.colormode-opt,
.fav-highlight-opt {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: .8rem;
}

.theme-opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.theme-opt-icon {
  font-size: .9em;
  line-height: 1;
}

.theme-opt.active,
.font-opt.active,
.colormode-opt.active,
.fav-highlight-opt.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  font-weight: 600;
}

.mode-tab.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  /* Flush with the panel below (same background, no border-bottom, and now
     no shadow either) -- reads as one continuous surface instead of a tab
     sitting on top of it. */
  box-shadow: none;
}

.panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}