/* Standalone shell styles — the local host chrome around the converter.
   Replaces what a Bootstrap/Django host would normally provide: a CSS reset,
   the app navbar, the footer, and font-sized inline SVG icons (no Font Awesome).
   All colours come from the --cz-* variables defined in css/csv-zulip.css.   */

/* ── Standalone base (replaces Bootstrap reset + css/fonts.css) ───────────── */
html, body { margin: 0; padding: 0; }
:root {
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto,
                         "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
:where(button, input, select) { font-family: inherit; }

/* ── Standalone header (replaces Applications/_app_navbar.html) ───────────── */
.app-navbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--cz-strip-bg);
  border-bottom: 1px solid var(--cz-border);
  color: var(--cz-text);
}
.app-navbar .cz-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em;
}
.app-navbar .cz-brand .cz-ico { color: var(--cz-accent); font-size: 1.15rem; }
.app-navbar .cz-brand-sub {
  font-size: 0.72rem; font-weight: 600; color: var(--cz-text-faint);
  border-left: 1px solid var(--cz-border-strong); padding-left: 10px;
}
.cz-theme-btn {
  margin-left: auto; font: inherit; font-size: 0.78rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--cz-border); background: var(--cz-surface);
  color: var(--cz-text); transition: border-color 0.15s, background 0.15s;
}
.cz-theme-btn:hover { border-color: var(--cz-accent); }
.cz-theme-btn:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; }

/* ── Standalone footer ────────────────────────────────────────────────────── */
.cz-footer {
  flex-shrink: 0;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--cz-text-faint);
  background: var(--cz-strip-bg);
  border-top: 1px solid var(--cz-border);
}
html[data-bs-theme="dark"] .cz-ico-sun,
html:not([data-bs-theme="dark"]) .cz-ico-moon { display: none; }

/* Inline SVG icons (replace Font Awesome; sized/coloured like a font glyph). */
.cz-ico {
  width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 560px) {
  .app-navbar .cz-brand-sub { display: none; }
}