/* ============================================================
   Verio — product UI previews for the public website
   Lightweight HTML/CSS renderings of the real office, carer,
   family and client screens (partials/ui.php). They replace the
   placeholder SVG screenshots. Data shown is illustrative.
   ============================================================ */

.ui-fig { margin: 0; }
.ui-fig figcaption { font-size: 12px; color: var(--ink-3); text-align: right; margin-top: 8px; }
.feat-hero .ui-fig { margin-bottom: -40px; }
@media (max-width: 920px) { .feat-hero .ui-fig { margin-bottom: 0; } }

/* ---- Desktop window ---- */
.ui {
  --u-navy: #12233F; --u-teal: #087F78; --u-bg: #F2F5F8; --u-line: #E3E9EF;
  --u-ink: #16232E; --u-ink2: #475467; --u-ink3: #7D8DA0;
  background: var(--u-bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(22,35,46,.16); font-size: 11.5px; line-height: 1.4; color: var(--u-ink);
  text-align: left; user-select: none; min-width: 0;
}
.ui * { box-sizing: border-box; }
.ui-chrome { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--u-line); }
.ui-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #E4E7EC; display: block; flex-shrink: 0; }
.ui-chrome i:nth-child(1) { background: #F97066; } .ui-chrome i:nth-child(2) { background: #FDB022; } .ui-chrome i:nth-child(3) { background: #32D583; }
.ui-chrome span { margin-left: 8px; flex: 1; min-width: 0; background: var(--u-bg); border-radius: 6px; padding: 3px 10px; color: var(--u-ink3); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; background: var(--u-navy); color: #fff; }
.ui-bar .ub-brand { font-weight: 800; letter-spacing: .04em; font-size: 11px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ui-bar .ub-brand::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #5FE0D4; }
.ui-bar .ub-tabs { display: flex; gap: 2px; overflow: hidden; flex: 1; min-width: 0; }
.ui-bar .ub-tabs b, .ui-bar .ub-tabs span { font-size: 10.5px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; color: rgba(255,255,255,.72); font-weight: 600; }
.ui-bar .ub-tabs b { background: rgba(255,255,255,.14); color: #fff; }
.ui-bar .ub-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#2563eb,#1d4ed8); font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-body { padding: 12px; display: grid; gap: 10px; }
.ui-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ui-title h5 { font-size: 13.5px; font-weight: 800; letter-spacing: -.1px; }
.ui-title small { color: var(--u-ink3); font-size: 10.5px; display: block; font-weight: 500; }

/* ---- Building blocks ---- */
.ui-card { background: #fff; border: 1px solid var(--u-line); border-radius: 10px; padding: 10px; min-width: 0; }
.ui-card > h6 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--u-ink3); font-weight: 800; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 6px; }
.ui-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-cols.c3 { grid-template-columns: 1.3fr 1fr; }
.ui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.ui-kpi { background: #fff; border: 1px solid var(--u-line); border-radius: 10px; padding: 8px 10px; position: relative; overflow: hidden; }
.ui-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--u-teal); }
.ui-kpi.warn::before { background: #DC6803; } .ui-kpi.bad::before { background: #D92D20; } .ui-kpi.info::before { background: #2F6FED; } .ui-kpi.purple::before { background: #7A5AF8; }
.ui-kpi span { display: block; color: var(--u-ink3); font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-kpi b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.4px; margin-top: 1px; }
.ui-kpi em { font-style: normal; font-size: 9.5px; color: var(--u-ink3); }

.ui-rows { display: grid; gap: 6px; }
.ui-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #FAFBFC; border: 1px solid var(--u-line); border-radius: 8px; min-width: 0; }
.ui-row .ur-av { width: 22px; height: 22px; border-radius: 50%; background: var(--u-teal); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-row .ur-ico { width: 22px; height: 22px; border-radius: 6px; background: #E8F6F3; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.ui-row .ur-t { flex: 1; min-width: 0; }
.ui-row .ur-t b { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-row .ur-t small { display: block; color: var(--u-ink3); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-row .ur-time { font-size: 10px; color: var(--u-ink2); font-weight: 700; flex-shrink: 0; }

.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; background: #F2F4F7; color: #475467; }
.pill.ok { background: #D1FADF; color: #05603A; } .pill.warn { background: #FEF0C7; color: #93370D; }
.pill.bad { background: #FEE4E2; color: #912018; } .pill.info { background: #D1E9FF; color: #194185; }
.pill.purple { background: #EBE9FE; color: #4A1FB8; } .pill.teal { background: #CCFBEF; color: #0B6E66; }
.pill.solid { background: var(--u-teal); color: #fff; }

.ui-meter { height: 6px; border-radius: 99px; background: #EEF2F6; overflow: hidden; }
.ui-meter i { display: block; height: 100%; border-radius: 99px; background: var(--u-teal); }
.ui-meter.warn i { background: #DC6803; } .ui-meter.bad i { background: #D92D20; } .ui-meter.info i { background: #2F6FED; }
.ui-mrow { display: grid; grid-template-columns: 92px 1fr 30px; gap: 8px; align-items: center; font-size: 10.5px; color: var(--u-ink2); padding: 3px 0; }
.ui-mrow b { text-align: right; color: var(--u-ink); font-size: 10.5px; }

.ui-bars { display: flex; align-items: flex-end; gap: 5px; height: 74px; padding-top: 4px; }
.ui-bars > div { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.ui-bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--u-teal); display: block; }
.ui-bars i.b { background: #B2DDFF; } .ui-bars i.w { background: #FDB022; }
.ui-axis { display: flex; gap: 5px; font-size: 9px; color: var(--u-ink3); margin-top: 4px; }
.ui-axis span { flex: 1; text-align: center; }
.ui-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 9.5px; color: var(--u-ink2); margin-top: 6px; }
.ui-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; background: var(--u-teal); }
.ui-legend i.b { background: #B2DDFF; } .ui-legend i.w { background: #FDB022; }

/* Steps / ladders / flows */
.ui-steps { display: grid; gap: 0; }
.ui-step { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; padding: 0 0 10px; position: relative; }
.ui-step:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--u-line); }
.ui-step .us-n { width: 22px; height: 22px; border-radius: 50%; background: #EEF2F6; color: var(--u-ink2); font-weight: 800; font-size: 10px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.ui-step.done .us-n { background: var(--u-teal); color: #fff; }
.ui-step.now .us-n { background: #DC6803; color: #fff; box-shadow: 0 0 0 4px #FEF0C7; }
.ui-step b { display: block; font-size: 11px; } .ui-step small { color: var(--u-ink3); font-size: 10px; display: block; }
.ui-flow { display: flex; gap: 4px; flex-wrap: wrap; }
.ui-flow span { flex: 1; min-width: 58px; text-align: center; font-size: 9.5px; font-weight: 800; padding: 6px 4px; border-radius: 6px; background: #EEF2F6; color: var(--u-ink2); position: relative; }
.ui-flow span.done { background: #D1FADF; color: #05603A; } .ui-flow span.now { background: var(--u-teal); color: #fff; }

/* Checklists */
.ui-checks { display: grid; gap: 4px; }
.ui-check { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--u-ink2); }
.ui-check::before { content: "✓"; width: 15px; height: 15px; border-radius: 4px; background: #D1FADF; color: #05603A; font-size: 9px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-check.x::before { content: "!"; background: #FEF0C7; color: #93370D; }
.ui-check.n::before { content: "–"; background: #EEF2F6; color: var(--u-ink3); }
.ui-check em { margin-left: auto; font-style: normal; font-size: 9.5px; color: var(--u-ink3); }

/* Banners */
.ui-banner { border-radius: 8px; padding: 7px 10px; font-size: 10.5px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.ui-banner.bad { background: #FEE4E2; color: #912018; } .ui-banner.warn { background: #FEF0C7; color: #93370D; }
.ui-banner.info { background: #D1E9FF; color: #194185; } .ui-banner.ok { background: #D1FADF; color: #05603A; }
.ui-banner.navy { background: var(--u-navy); color: #fff; }

/* Rota grid */
.ui-rota { display: grid; grid-template-columns: 70px repeat(5, 1fr); gap: 3px; font-size: 9.5px; }
.ui-rota > div { min-height: 22px; border-radius: 5px; padding: 3px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-rota .rh { color: var(--u-ink3); font-weight: 800; text-align: center; }
.ui-rota .rn { font-weight: 700; color: var(--u-ink); background: #fff; border: 1px solid var(--u-line); }
.ui-rota .s { background: #CCFBEF; color: #0B6E66; font-weight: 700; }
.ui-rota .s.n { background: #E0EAFF; color: #2D31A6; } .ui-rota .s.o { background: #FEF0C7; color: #93370D; border: 1px dashed #DC6803; }
.ui-rota .s.l { background: #F2F4F7; color: var(--u-ink3); } .ui-rota .s.x { background: #FEE4E2; color: #912018; }

/* QR */
.ui-qr { display: grid; grid-template-columns: repeat(21, 1fr); width: 116px; aspect-ratio: 1; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--u-line); gap: 0; flex-shrink: 0; }
.ui-qr i { display: block; background: transparent; }
.ui-qr i.k { background: var(--u-navy); }

/* Chat / AI */
.ui-msg { max-width: 88%; padding: 7px 10px; border-radius: 10px; font-size: 10.5px; line-height: 1.45; }
.ui-msg.me { background: var(--u-teal); color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
.ui-msg.ai { background: #fff; border: 1px solid var(--u-line); border-bottom-left-radius: 3px; }
.ui-action { border: 1px dashed #7A5AF8; background: #F4F3FF; border-radius: 10px; padding: 8px 10px; font-size: 10.5px; }
.ui-action b { color: #4A1FB8; }
.ui-btns { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.ui-btn { font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 6px; background: var(--u-teal); color: #fff; }
.ui-btn.g { background: #fff; color: var(--u-ink2); border: 1px solid var(--u-line); }

/* Gallery */
.ui-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ui-ph { aspect-ratio: 4/3; border-radius: 8px; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 5px; }
.ui-ph.a { background: linear-gradient(135deg,#A6F4C5,#32D583); } .ui-ph.b { background: linear-gradient(135deg,#B2DDFF,#53B1FD); }
.ui-ph.c { background: linear-gradient(135deg,#FEDF89,#FDB022); } .ui-ph.d { background: linear-gradient(135deg,#D9D6FE,#9B8AFB); }
.ui-ph.e { background: linear-gradient(135deg,#FECDCA,#F97066); } .ui-ph.f { background: linear-gradient(135deg,#99F6E0,#2ED3B7); }
.ui-ph .pill { font-size: 8.5px; }

/* ---- Phone ---- */
.ui-phones { display: flex; gap: 14px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.ui-phone {
  --u-navy: #12233F; --u-teal: #087F78; --u-bg: #F2F5F8; --u-line: #E3E9EF; --u-ink: #16232E; --u-ink2: #475467; --u-ink3: #7D8DA0;
  width: 236px; max-width: 100%; border-radius: 30px; background: #0B1220; padding: 8px; box-shadow: 0 22px 50px rgba(22,35,46,.22);
  font-size: 11px; line-height: 1.4; color: var(--u-ink); text-align: left; user-select: none; flex-shrink: 0;
}
.ui-phone .up-screen { background: var(--u-bg); border-radius: 23px; overflow: hidden; min-height: 360px; display: flex; flex-direction: column; }
.ui-phone .up-status { display: flex; justify-content: space-between; padding: 7px 16px 3px; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--u-navy); }
.ui-phone .up-head { background: var(--u-navy); color: #fff; padding: 6px 14px 12px; }
.ui-phone .up-head b { font-size: 13px; display: block; } .ui-phone .up-head small { opacity: .75; font-size: 10px; }
.ui-phone .up-head.teal, .ui-phone .up-status.teal { background: var(--u-teal); }
.ui-phone .up-head.red, .ui-phone .up-status.red { background: #B42318; }
.ui-phone .up-body { padding: 10px; display: grid; gap: 8px; flex: 1; align-content: start; }
.ui-phone .up-nav { display: flex; justify-content: space-around; padding: 8px 4px 10px; background: #fff; border-top: 1px solid var(--u-line); font-size: 9px; color: var(--u-ink3); font-weight: 700; }
.ui-phone .up-nav span.on { color: var(--u-teal); }

/* Three phones side by side */
.ui-phones.trio { gap: 10px; flex-wrap: nowrap; }
.ui-phones.trio .ui-phone { width: 33%; min-width: 0; padding: 6px; border-radius: 24px; }
.ui-phones.trio .up-screen { min-height: 300px; border-radius: 19px; }
.ui-phones.trio .ui-row .ur-ico { display: none; }
.ui-phones.trio .up-head b { font-size: 11.5px; }

/* ---- Portal strip ("Where it lives") ---- */
.portals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.portals span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.portals span.on { background: var(--brand-light); border-color: #A7DCD5; color: var(--brand-dark); }

/* Text-only media row: bullets in two columns */
.media-row.solo { grid-template-columns: 1fr; }
.media-row.solo .media-txt { max-width: 860px; }
.media-row.solo ul { columns: 2; column-gap: 40px; }
.media-row.solo ul li { break-inside: avoid; }
@media (max-width: 600px) { .media-row.solo ul { columns: 1; } }

/* ---- Safeguard rule cards ---- */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; text-align: left; }
.rule { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.rule .rk { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--c-teal); background: var(--c-teal-bg); border-radius: 6px; padding: 3px 8px; margin-bottom: 10px; }
.rule h3 { font-size: 16.5px; margin-bottom: 6px; letter-spacing: -.2px; }
.rule p { color: var(--ink-2); font-size: 14.5px; }
.dark .rule { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none; }
.dark .rule h3 { color: #fff; } .dark .rule p { color: rgba(255,255,255,.78); }
.dark .rule .rk { background: rgba(95,224,212,.14); color: #5FE0D4; }

/* ---- Feature hub groups ---- */
.hub-group { margin-top: 56px; text-align: left; }
.hub-group:first-of-type { margin-top: 40px; }
.hub-group > h3 { font-size: 22px; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; }
.hub-group > p { color: var(--ink-2); margin-top: 4px; max-width: 720px; }
.hub-group .grid { margin-top: 20px; }
.card .tag-new { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #fff; background: var(--c-purple); border-radius: 6px; padding: 2px 7px; vertical-align: 2px; }

/* ---- Mega menu (header) ---- */
.drop.mega { min-width: 640px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; padding: 14px; }
.drop.mega .dm-col h6 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 800; padding: 4px 12px 6px; }
.drop.mega .di-all { grid-column: 1 / -1; }
.drop.mega a { padding: 8px 12px; font-size: 14px; }

/* ---- Responsive ---- */
@media (max-width: 920px) {
  .rules { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .rules { grid-template-columns: 1fr; }
  .ui { font-size: 11px; }
  .ui-cols, .ui-cols.c3 { grid-template-columns: 1fr; }
  .ui-bar .ub-tabs span { display: none; }
  .ui-rota { grid-template-columns: 54px repeat(5, 1fr); }
  .ui-hide-sm { display: none !important; }
  .ui-phone { width: 220px; }
  .ui-phones.trio .ui-phone { width: 50%; }
}

/* Grid children must be allowed to shrink below their content width, otherwise a
   preview's nowrap address bar pushes the column wider than a phone screen. */
.feat-hero .wrap > *, .media-row > *, .hero.has-media .wrap > *, .ui-cols > *, .ui-body > * { min-width: 0; }