/* ==========================================================================
   Product mockups in the real Ornool app's style (tracker item 33, live since 10 Oct 2026).
   The page keeps its Sunrise skin (end of styles.css); only the "product" pictures follow the app:
   white cards, grey hairlines, 10px corners, system font, brand blue #1F6FEB,
   colour-blind-safe chart colours (#0072B2 blue, #D55E00 vermillion, #009E73 green).
   Loaded on every page after styles.css.
   ========================================================================== */

.radar, .gantt, .app, .card-ui {
  --surface: #ffffff; --surface-2: #f7f8fa; --bg: #ffffff; --bg-2: #f1f3f7;
  --line: #e5e8ef; --line-2: #cdd3de;
  --ink: #111726; --ink-2: #111726; --muted: #4e576b; --faint: #6d7484;
  --accent: #1f6feb; --accent-ink: #ffffff; --accent-soft: #e8f0fe; --accent-line: #b9cffa;
  --good: #046c4e; --good-soft: #e6f4ee; --warn: #ca8a04; --warn-soft: #fdf5e3; --bad: #b91c1c; --bad-soft: #fceded;
  --heading-teal: #1f6feb;
  --c1: #0072b2; --c2: #d55e00; --c3: #009e73; --c2-ink: #aa4b00; /* darker vermillion for text (WCAG AA) */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.radar, .gantt, .app { background: #ffffff !important; border: 1px solid #e5e8ef !important; border-radius: 10px !important;
  box-shadow: 0 1px 2px #1117260d, 0 12px 28px -14px #11172629 !important; }
.card-ui { background: #f7f8fa !important; border-color: #e5e8ef !important; border-radius: 10px !important; }
.radar *, .gantt *, .app *, .card-ui * { font-family: inherit; }

/* ---------- Hero radar ---------- */
.radar-seg { background: #f1f3f7 !important; border-radius: 7px; }
.radar-seg .thumb { border-radius: 6px; box-shadow: 0 1px 2px #1117260d; }
.radar-seg button { border-radius: 6px; }
.radar-week { color: #1f6feb !important; }
.rk-stats { display: none !important; }
.rolling { display: grid; gap: 8px; }
.rolling h6, .rolling-h { margin: 0; font-size: 13px; font-weight: 650; color: #111726; letter-spacing: -0.01em; }
.rolling-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rolling-tiles div { border: 1px solid #e5e8ef; border-radius: 10px; padding: 10px 12px; background: #fff; }
.rolling-tiles small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: #6d7484; }
.rolling-tiles b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: #111726; line-height: 1.15; margin-top: 2px; }
.rolling-tiles span { font-size: 11px; color: #4e576b; }
.rk-cur { background: color-mix(in srgb, var(--c1) 82%, white) !important; border-color: transparent !important; border-radius: 4px !important; }
.rk-after { border-radius: 4px !important; }
.rk-after.gap { background: repeating-linear-gradient(-45deg, #fbe5d6 0 5px, transparent 5px 10px) !important; border: 1px dashed var(--c2) !important; color: var(--c2-ink) !important; }
.rk-after.next { background: #e3f4ee !important; border: 1px solid color-mix(in srgb, var(--c3) 55%, transparent) !important; color: #046c4e !important; }
.rk-horizon { border-left-color: #1f6feb !important; }
.rk-horizon::before { color: #1f6feb !important; }
.rk-head { border-left-color: #111726 !important; }
.rk-head b { background: #111726 !important; color: #fff !important; }
.rk-feed li { background: #fff !important; border-color: #e5e8ef !important; border-radius: 8px !important; }
.rk-feed li.warn b { background: #fbe5d6 !important; color: var(--c2-ink) !important; }
.rk-feed li.good b { background: #e3f4ee !important; color: #046c4e !important; }
.rk-quote { font-family: Georgia, serif !important; font-weight: 400 !important; color: #17252d !important; }
.rk-quote span { color: #1f6feb !important; }
.rb-list li { background: #fff !important; border-color: #e5e8ef !important; border-radius: 8px !important; }

/* ---------- Roll-off timeline ("The one that sells it") ---------- */
.g-bar { background: var(--c1) !important; border-color: transparent !important; color: #fff !important; border-radius: 4px !important; }
.g-bar.next { background: #e3f4ee !important; border: 1px solid color-mix(in srgb, var(--c3) 55%, transparent) !important; color: #046c4e !important; }
.g-bar.gap { background: repeating-linear-gradient(-45deg, #fbe5d6 0 6px, transparent 6px 12px) !important; border: 1px dashed var(--c2) !important; color: var(--c2-ink) !important; }
.g-horizon { border-left-color: #1f6feb !important; }
.g-horizon::before { background: #1f6feb !important; color: #fff !important; }
.g-now::before { background: #111726 !important; color: #fff !important; }
.g-stat { background: #fff !important; border: 1px solid #e5e8ef !important; border-radius: 10px !important; }
.g-stat b { color: #111726 !important; font-weight: 700 !important; letter-spacing: -0.03em; }
.g-stat.good b { color: #046c4e !important; } .g-stat.warn b { color: var(--c2-ink) !important; }
.gantt-legend span:nth-child(1) i { background: #0072b2 !important; }
.gantt-legend span:nth-child(2) i { background: #e3f4ee !important; outline: 1px solid #009e73; }
.gantt-legend span:nth-child(3) i { background: repeating-linear-gradient(-45deg, #d55e00 0 3px, transparent 3px 6px) !important; }

/* ---------- "What it does" mini screens and Product page app windows ---------- */
.mini-bar i { background: var(--c1) !important; } .mini-bar i.warn { background: var(--c2) !important; }
.flow-step.on .flow-dot { background: #1f6feb !important; border-color: #1f6feb !important; }
.flow-line::after { background: #1f6feb !important; }
.app-bar { background: #f7f8fa !important; border-bottom-color: #e5e8ef !important; }
.app-tabs span.on { background: #e8f0fe !important; color: #1f6feb !important; }
.bars .b { background: #dbe9f6 !important; border-color: #b7d3ea !important; } .bars .b.hot { background: var(--c1) !important; border-color: var(--c1) !important; }
.kcard { border-radius: 8px !important; } .kcard.mover { border-color: #b9cffa !important; } .kcard.hired { background: #e6f4ee !important; }
.inv-day:hover, .inv-day.sel { border-color: #1f6feb !important; background: #e8f0fe !important; }
.trace-pop { background: #f7f8fa !important; border-color: #b9cffa !important; } .trace-step i { background: #1f6feb !important; }
.floor-meter i { background: var(--c3) !important; } .floor-meter i.low { background: var(--c2) !important; }
.app .btn { --b: #1f6feb; --c: #fff; border-radius: 7px; } .app .btn-ghost { --b: #fff; --c: #111726; border-color: #cdd3de; }
.chip { border-radius: 6px !important; }
.radar .chip.good, .app .chip.good { background: #e6f4ee !important; color: #046c4e !important; }
.app .chip.warn { background: #fbe5d6 !important; color: var(--c2-ink) !important; }