/* CeVine · Comunitate — shared tokens and components (step 0, frozen; from crowd/ux/mock/crowd.css). Loaded after
   app.css: everything sits on its tokens (--surface, --line, --muted, --ok/--warn/--danger…). Each package styles its
   own components in crowd-b.css / crowd-c.css / crowd-d.css. */

/* ---------- tokens: light, then dark twice (system setting, and the app's own theme switch), as in app.css ---------- */
:root {
  /* crowding, four levels: text/glyph colour on a tinted background, all ≥ 4.6:1 */
  --c1: #0b7a47; --c1-bg: #dcf4e8;   /* Locuri libere */
  --c2: #8a5800; --c2-bg: #fcefd2;   /* În picioare */
  --c3: #a33a00; --c3-bg: #ffe8d6;   /* Aglomerat */
  --c4: #b42318; --c4-bg: #fde7e4;   /* Arhiplin */
  --ctl: #1b1c20; --ctl-bg: #e9e9ec; /* controlori: ink, neutral — information, not alarm */
  /* map badges (drawn on canvas): white glyph on these fills, white ring; the same in both themes */
  --map-ink: #1b1c20; --map-c3: #c75400; --map-c4: #d92d20; --map-amber: #b26b00;
  /* the report button keeps the light brand red in dark mode too: white label 5.9:1 (#ef4552 would give 3.7:1) */
  --fab-bg: #c8102e;
  --mine: color-mix(in srgb, var(--info) 8%, var(--surface));
  --kb: 0px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c1: #5ad69c; --c1-bg: #133526; --c2: #f5c56b; --c2-bg: #3a2c10; --c3: #ffb27a; --c3-bg: #3d2312;
    --c4: #ff8a7e; --c4-bg: #3b1714; --ctl: #f2f2f4; --ctl-bg: #303137;
  }
}
:root[data-theme="dark"] {
  --c1: #5ad69c; --c1-bg: #133526; --c2: #f5c56b; --c2-bg: #3a2c10; --c3: #ffb27a; --c3-bg: #3d2312;
  --c4: #ff8a7e; --c4-bg: #3b1714; --ctl: #f2f2f4; --ctl-bg: #303137;
}

/* ---------- glyphs (icons.js icon()) ---------- */
.ci { flex: none; display: inline-block; vertical-align: middle; }

/* ---------- crowd meter: four segments, filled = level (the colour comes from the parent) ---------- */
/* markup: <span class="cm l3" aria-hidden="true"><i></i><i></i><i></i><i></i></span> */
.cm { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.cm i { display: block; width: 4px; height: 11px; border-radius: 1.5px; background: currentColor; opacity: .24; }
.cm.l1 i:nth-child(-n+1), .cm.l2 i:nth-child(-n+2), .cm.l3 i:nth-child(-n+3), .cm.l4 i { opacity: 1; }
.cm.sm i { width: 3px; height: 9px; }
.cm.lg { gap: 3px; } .cm.lg i { width: 7px; height: 18px; border-radius: 2.5px; }

/* ---------- crowd / report tags (same geometry as .tag) ---------- */
.tag.hot { background: var(--c3-bg); color: var(--c3); }
.ctag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; flex: none; }
.ctag .ci { width: 14px; height: 14px; }
.ctag.l1 { color: var(--c1); background: var(--c1-bg); } .ctag.l2 { color: var(--c2); background: var(--c2-bg); }
.ctag.l3 { color: var(--c3); background: var(--c3-bg); } .ctag.l4 { color: var(--c4); background: var(--c4-bg); }
.ctag.ctl { color: var(--ctl); background: var(--ctl-bg); }
.ctag.warn { color: var(--warn); background: var(--warn-bg); } .ctag.ok { color: var(--ok); background: var(--ok-bg); }
.ctag.danger { color: var(--danger); background: var(--danger-bg); }
.ctag.mini { height: 20px; padding: 0 6px 0 5px; gap: 4px; }   /* departure rows: glyph + meter, no words */
.ctag.mini .ci { width: 13px; height: 13px; }
.brow .veh .ctag, .arr.c .veh .ctag { flex: none; }

/* ---------- overlay (overlay.js): one modal sheet over everything, the tab bar included ---------- */
.ov-bg { position: fixed; inset: 0; z-index: 14; background: rgba(10, 11, 13, .42); cursor: pointer; }
.ov { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; flex-direction: column; max-height: calc(100% - var(--safe-t) - 24px);
  background: var(--surface); color: var(--text); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-3); outline: none; }
.ov-grip { flex: none; height: 24px; display: grid; place-items: center; }
.ov-grip::before { content: ''; width: 40px; height: 5px; border-radius: 3px; background: var(--surface-3); }
.ov-x { position: absolute; top: 9px; right: 12px; z-index: 1; width: 34px; height: 34px; border: 0; border-radius: 17px; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; font-size: 14px; cursor: pointer; }
.ov-x::after { content: ''; position: absolute; inset: -5px; } /* 44 pt to the finger */
.ov-x:active { background: var(--surface-3); }
.ov-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 16px calc(14px + var(--safe-b)); }
/* a first row that reaches the right edge leaves room for ✕ */
.ov-body > h2:first-child, .ov-body > .ov-head:first-child { padding-right: 44px; }
.ov-head { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 8px; }
.ov-head h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; flex: 1; }
/* typing in a field of the overlay: it sits on the on-screen keyboard (--kb, kept by sheet.js / overlay.js) */
html.ov-typing .ov { bottom: var(--kb, 0px); max-height: calc(100% - var(--kb, 0px) - var(--safe-t) - 8px); }
html.ov-typing .ov-body { padding-bottom: 14px; }
@media (min-width: 900px) {
  .ov { left: 0; right: auto; width: 420px; }   /* over the side panel, like the sheet */
}
@media (prefers-reduced-motion: no-preference) {
  .ov { animation: ov-up .22s cubic-bezier(.2, .8, .2, 1); }
  @keyframes ov-up { from { transform: translateY(28px); opacity: .5; } }
}

/* the toast sizes to its text, not to half the screen (left: 50% made long messages wrap word by word) */
.toast { width: max-content; }