/* ── status ──
 * The status bar.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Status bar ────────────────────────────────────── */
#status {
  height: var(--status-height);
  background: color-mix(in srgb, var(--bg-page) 96%, black);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  font-size: 11.5px;
  color: var(--fg-dim);
  flex-shrink: 0;
  z-index: 10;
}
#status .seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  transition: background 0.15s;
  white-space: nowrap;
}
#status .seg:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
#status .seg.mode {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 500;
}
#status .spacer { flex: 1; }
#status-url { cursor: pointer; }
#status-url .bar {
  display: inline-block;
  width: 54px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  position: relative;
  overflow: hidden;
}
#status-url .bar i {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s var(--ease), background 0.3s;
}
#status-url.amber .bar i { background: var(--warn); }
#status-url.red .bar i   { background: var(--danger); }

#status-hint { color: var(--fg-faint); font-size: 11px; }

#status-copied {
  color: var(--accent);
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
#status-copied.visible { opacity: 1; }