/* indusmova — additions on top of the design system.
 *
 * styles.css is the original indusmova design system, kept intact. Everything
 * in this file is either a new component the rebuild introduced (the language
 * menu, the offline strip's spacing) or a small correction to a rule that did
 * not survive the move from a captured page to a live app.
 */

/* --------------------------------------------------------- corrections */

/* The bottom bar carries five destinations, not four. */
.bottom-nav { grid-template-columns: repeat(5, 1fr); }

/* The placeholder tile in Saved/History centres an icon. */
.saved-ph { display: grid; place-items: center; color: var(--forest-ink); }
.saved-ph svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* .dash-action headings are styled as h3 in the design system; make the
   h2 fallback look identical wherever an older template still emits one. */
.dash-action h2 { margin: 0; font-size: 15px; font-family: var(--font-display); letter-spacing: -0.01em; }

/* Give the reading-progress bar room to breathe above the sticky topbar. */
.read-progress { z-index: 61; }

/* Article body: keep infobox/figure removal from leaving a gap. */
.panel .prose > .mw-parser-output:empty { display: none; }

/* --------------------------------------------------------- language menu */

.lang-menu {
  position: fixed;
  z-index: 300;
  min-width: 190px;
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: rise 0.16s var(--ease) both;
}

.lang-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.lang-menu-item:hover { background: var(--surface-2); }

.lang-menu-item.is-active {
  background: color-mix(in srgb, var(--forest) 14%, var(--surface));
  color: var(--text);
  font-weight: 650;
}

.lang-menu-item.is-active::after { content: " ✓"; color: var(--copper-ink); }

/* --------------------------------------------------------- offline strip */

.status-strip { letter-spacing: 0.01em; }

/* --------------------------------------------------------- tiny helpers */

/* Buttons that carry an icon and a label inside .article-actions. */
.article-actions .btn svg,
.md-actions .btn svg,
.row-cta .btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}

/* The bookmark toggle shows its on-state clearly. */
.btn.is-on { border-color: var(--accent); color: var(--copper-ink); }

/* Feedback form controls reuse the searchbar shell, full width. */
form.panel .searchbar,
form.panel .select {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}

form.panel .select { cursor: pointer; }

/* A skeleton line used by the rail and cards. */
.rail-card .sk-line { display: block; height: 12px; border-radius: 6px; margin: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  .lang-menu { animation: none; }
}

/* Suggest rows: title above description, thumbnail fixed size. */
.suggest-item > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suggest-item .si-title { display: block; font-weight: 600; }
.suggest-item .si-desc { display: block; color: var(--muted); font-size: 13px; }
.suggest-item img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--surface-2); }

/* The article rail is the narrow column; the prose is the wide one. The design
   system moved the rail with `order:-1` for a DOM that had it last, so pin the
   order now that the rail is appended after the panel. */
.article-grid.rail-open .toc-rail { order: 0; }
.article-grid.rail-open .panel { order: -1; }
.toc-rail .factbox { margin-top: 0; }

/* ---------------------------------------------------------- icon sizing */

/* Icons injected from JS carry a viewBox but no width/height, so anywhere the
   design system does not already set a size they would stretch to fill. Pin
   the few containers that rely on the markup's own width/height. */
.dash-hero-badge svg { width: 14px; height: 14px; flex: 0 0 auto; }
.hero-clock svg { width: 17px; height: 17px; }
.state .ic svg { width: 34px; height: 34px; }
.saved-ph svg { width: 20px; height: 20px; }
.src-mark svg { width: 14px; height: 14px; }

/* --------------------------------------------------- the hero gradient */

/* In the captured stylesheet `.dash-grad` kept `background-clip: text` and
   `color: transparent` but lost its gradient, which left the second half of
   the headline invisible. Restore it. */
.dash-hero h1 .dash-grad {
  background-image: linear-gradient(100deg, var(--copper) 0%, #d08a62 45%, var(--accent-2) 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme="dark"] .dash-hero h1 .dash-grad {
  background-image: linear-gradient(100deg, #d08a62 0%, #e0a271 45%, var(--accent-2) 100%);
}

/* ------------------------------------------------------- small screens */

@media (max-width: 700px) {
  .dash-hero-badge { align-self: center; text-align: center; }
  /* Keep every navigation option reachable; just tighten it so it wraps
     neatly instead of overflowing. */
  .topbar-inner { gap: 6px; }
  .topnav { margin-left: auto; }
  .topnav a { padding: 7px 8px; font-size: 12.5px; }
}


/* ======================================================================
   The hero assumes a dark panel
   ======================================================================
   The design system styles every control inside .dash-hero for a dark
   background — white text on translucent white. The hero itself is not
   dark (it inherits the page background, and its own gradient was lost in
   the capture), so in light mode the depth buttons, the meaning switch, the
   chips and the clock were white on cream and effectively invisible.
   Restore the theme-aware styling for all of them. */

.dash-hero .searchbar { background: var(--surface); border-color: var(--border-2); }
.dash-hero .depth-btn { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.dash-hero .depth-btn:hover { background: var(--surface-2); color: var(--text); }
.dash-hero .depth-btn.is-active,
.dash-hero .depth-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dash-hero .depth-bar { background: var(--surface-2); border-color: var(--border-2); }
.dash-hero .mode-btn { color: var(--muted); }
.dash-hero .mode-btn.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.dash-hero .chip-btn { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.dash-hero .chip-btn:hover { background: var(--surface-2); color: var(--text); }
.dash-hero .chip-btn.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dash-hero .chips .chip { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.dash-hero .chips .chip:hover { background: var(--surface-2); color: var(--accent); }
.dash-hero .chips > span { color: var(--faint) !important; }
.dash-hero .trust-strip { color: var(--muted); }
.dash-hero .trust-strip li::before { color: var(--forest-ink); }
.dash-hero .hero-clock { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.dash-hero .hero-clock span { color: var(--muted); }
.dash-hero .example-prompts button { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.dash-hero .example-prompts button:hover { background: var(--surface-2); color: var(--accent); }

/* ------------------------------------------------------------ depth bar */

/* A thin bar under the depth control showing where Quick / Detailed / Deep
   sits, so the current setting reads at a glance. */
.depth-bar {
  position: relative;
  height: 4px;
  margin: 10px 0 0;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  overflow: hidden;
  max-width: 260px;
}
.depth-bar > span {
  display: block;
  height: 100%;
  width: 66%;
  background: linear-gradient(90deg, var(--forest), var(--copper));
  transition: width 0.28s var(--ease);
}
.depth[data-level="quick"] ~ .depth-bar > span { width: 33%; }
.depth[data-level="detailed"] ~ .depth-bar > span { width: 66%; }
.depth[data-level="deep"] ~ .depth-bar > span { width: 100%; }

/* ------------------------------------------------------- topic breakdown */

/* Each topic block opens short, with one control to read the whole section. */
.topic-block .topic-short { margin: 0 0 10px; color: var(--text); font-size: 16px; line-height: 1.7; }
.topic-block .topic-full[hidden] { display: none; }
.topic-block .topic-more {
  margin-top: 10px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--copper-ink);
  border-radius: 999px;
  padding: 5px 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.topic-block .topic-more:hover { border-color: var(--accent); }
.topic-block .topic-more::after { content: " ▾"; }
.topic-block.is-open .topic-more::after { content: " ▴"; }
.topic-block .topic-short strong { font-weight: 600; }

/* --------------------------------------------------------------- feedback */

/* The emoji feedback row on answers and articles. */
.fb-btn { font-family: var(--font-body); font-size: 13.5px; color: var(--text); }
.fb-emoji { font-family: var(--font-body); }

/* --------------------------------------------------------- language bar */

.langbar { border-radius: var(--radius); margin: 0 0 18px; border: 1px solid var(--border-2); }
.langbar-inner { flex-wrap: wrap; gap: 8px; }
.langbar .pill { cursor: pointer; }

/* ------------------------------------------------------------ scope note */

.scope-note {
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  max-width: var(--measure);
}

/* -------------------------------------------------------- article tables */

.prose .table-scroll { margin: 18px 0; }
.prose .table-scroll > table { margin: 0; border-collapse: collapse; font-size: 14px; }
.prose .table-scroll th,
.prose .table-scroll td { padding: 8px 12px; border: 1px solid var(--border-2); text-align: left; }
.prose .table-scroll th { background: var(--surface-2); font-weight: 650; }

/* ----------------------------------------------------------- feedback box */

.feedback { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.feedback .panel-head { margin-bottom: 10px; }
.feedback .fb-note textarea { font: inherit; font-size: 14.5px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); resize: vertical; }
.btn-sm { padding: 8px 13px; font-size: 13.5px; }

/* Keep the topbar tidy when the wrapped rows appear on a narrow screen. */
.topbar-inner { row-gap: 6px; }

/* The depth bar is a flex item; without a basis it collapses to nothing. */
.depth-bar { flex: 0 0 auto; width: min(240px, 55vw); }

/* ======================================================================
   Reading views use the whole width
   ======================================================================
   An article is the point of the page, so the discover rail steps aside and
   the reading column takes the space. On a laptop the article is then the
   full width of the shell; on a phone it is the single column. */
[data-view="article"] .app-rail,
[data-view="library"] .app-rail,
[data-view="work"] .app-rail { display: none !important; }

[data-view="article"] .app-shell,
[data-view="article"] .app-shell:has(.app-rail:not(:empty)),
[data-view="library"] .app-shell,
[data-view="library"] .app-shell:has(.app-rail:not(:empty)),
[data-view="work"] .app-shell,
[data-view="work"] .app-shell:has(.app-rail:not(:empty)) { grid-template-columns: 236px minmax(0, 1fr); }

[data-view="article"] .wrap { max-width: var(--maxw); }
[data-view="article"] .panel .prose { max-width: 78ch; }

@media (max-width: 900px) {
  /* The :has() variants carry a higher specificity than the plain selector,
     so they have to be listed here too or the sidebar column survives on a
     phone even though the sidebar itself is hidden. */
  [data-view="article"] .app-shell,
  [data-view="article"] .app-shell:has(.app-rail:not(:empty)),
  [data-view="library"] .app-shell,
  [data-view="library"] .app-shell:has(.app-rail:not(:empty)),
  [data-view="work"] .app-shell,
  [data-view="work"] .app-shell:has(.app-rail:not(:empty)) { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------- section jumper */

.toc-open { margin: 0 0 18px; }

.toc-jump {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px 18px 18px;
  margin: 0 0 22px;
  max-height: 62vh;
  overflow: auto;
}
.toc-jump[hidden] { display: none; }
.toc-jump-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.toc-jump-head h2 {
  margin: 0; font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--copper-ink);
}
.toc-jump-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc-jump-list a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-xs); color: var(--text); font-size: 14.5px;
}
.toc-jump-list a:hover { background: var(--surface-2); text-decoration: none; }
.toc-jump-list .topic-num { width: 22px; height: 22px; font-size: 11.5px; }

/* --------------------------------------------------- pictures in topics */

.topic-figure { margin: 0 0 12px; display: grid; gap: 6px; }
.topic-figure img {
  display: block; width: auto; max-width: 100%; max-height: 300px;
  border-radius: var(--radius); border: 1px solid var(--border-2); background: var(--surface-2);
}
.topic-figure figcaption { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ----------------------------------------------------------- library */

.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-meta-extra { font-size: 11.5px; color: var(--faint); }
.chip.is-active {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600;
}
.chip.is-active:hover { color: var(--on-primary); }