/* LeadMyFleet — in-page product mockups (rendered by site.js).
   Drawn on a fixed 900x520 canvas and scaled down proportionally by styles.css,
   so the same layout stays readable on phones. */

.mockup-root{width:100%;height:100%;min-height:410px;display:flex;align-items:center;justify-content:center;color:#d9e8ee;font-family:Inter,Arial,sans-serif}
.mockup-window{width:100%;height:100%;min-height:390px;border:1px solid #2b4655;border-radius:16px;background:linear-gradient(145deg,#0e1921,#081016);box-shadow:inset 0 0 0 1px rgba(255,255,255,.015),0 20px 50px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column}
.mock-top{height:38px;border-bottom:1px solid #223946;display:flex;align-items:center;padding:0 14px;gap:7px;background:#0c151c;flex:0 0 auto}
.mock-dot{width:7px;height:7px;border-radius:50%;background:#29414e}
.mock-dot:first-child{background:#13d9ff}
.mock-title{font-size:10px;font-weight:800;color:#8fa8b5;margin-left:5px;letter-spacing:.3px}
.mock-body{flex:1;display:grid;gap:9px;padding:11px;min-height:0}
.mock-card{border:1px solid #294450;border-radius:10px;background:linear-gradient(145deg,#111c24,#0a1218);min-width:0;min-height:0}
.mock-label{font-size:8px;font-weight:900;color:#e7f3f7;letter-spacing:.2px}
.mock-muted{font-size:7px;color:#718b98}
.mock-cyan{color:#20dcff}
.mock-green{color:#52dfad}
.mock-orange{color:#ffac49}
.mock-purple{color:#a26dff}
.mock-red{color:#ff5b71}
.mock-bar{height:7px;border-radius:99px;background:#19313a;overflow:hidden}
.mock-bar>i{display:block;height:100%;width:82%;background:linear-gradient(90deg,#20d9ff,#54deb0);border-radius:inherit}
.mock-chip{height:25px;border:1px solid #31515f;border-radius:7px;background:#0b151c;display:flex;align-items:center;padding:0 8px;font-size:7px;color:#9eb2bd}
.mock-chip.accent{border-color:#18cae7;color:#7eeeff}
.mock-count{font-size:13px;font-weight:900;color:#f2f8fa}
.mock-icon{width:24px;height:24px;border:1px solid #31515f;border-radius:7px;display:grid;place-items:center;color:#2edfff;font-size:12px;font-weight:900;background:#0b161d}
/* overview */
.mock-overview .mock-body{grid-template-columns:1.35fr .95fr .62fr;grid-template-rows:.82fr 1fr}
.mock-calendar{padding:9px;display:flex;flex-direction:column}
.mock-calendar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.mock-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;flex:1}
.mock-day{border:1px solid #2b414c;border-radius:4px;font-size:5px;color:#9bb0bb;padding:3px}
.mock-day.sel{border-color:#16d8f3;background:#12313a}
.mock-stats{padding:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;align-content:start}
.mock-stat{height:43px;border:1px solid #2e4a57;border-radius:7px;padding:5px;text-align:center}
.mock-health{grid-column:span 2;height:38px;padding:6px}
.mock-services{grid-row:1/span 2;grid-column:3;padding:8px}
.mock-services .mock-chip{height:18px;margin-top:5px}
.mock-notes{padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mock-page{border:1px solid #28434f;border-radius:5px;background:repeating-linear-gradient(#111c23 0 15px,#253540 16px,#111c23 17px)}
.mock-chartlogs{display:grid;grid-template-rows:1fr 1fr;gap:8px}
.mock-chart{padding:8px;position:relative}
.mock-semi{width:70%;height:65px;margin:13px auto 0;border-radius:100px 100px 0 0;background:conic-gradient(from 270deg at 50% 100%,#19cce6 0 35%,#4869ff 35% 48%,#ffae49 48% 72%,#ff5b71 72% 78%,transparent 78%);clip-path:inset(0 0 0 0)}
.mock-logs{padding:8px}
.mock-line{height:10px;border:1px solid #2d4855;border-radius:4px;margin-top:5px;position:relative}
.mock-line:after{content:"";position:absolute;left:5px;top:3px;width:55%;height:3px;background:#526b78;border-radius:3px}
/* planner */
.mock-planner .mock-body{grid-template-columns:1.65fr .75fr}
.mock-bigcal{padding:12px;display:flex;flex-direction:column}
.mock-bigcal .mock-days{gap:5px}
.mock-bigcal .mock-day{font-size:7px;padding:5px;border-radius:6px}
.mock-side-stack{display:grid;grid-template-rows:repeat(3,1fr);gap:8px}
.mock-reminder-card{padding:10px}
.mock-reminder-row{height:30px;border:1px solid #304b58;border-radius:7px;margin-top:7px;padding:6px;display:flex;justify-content:space-between;align-items:center}
.mock-badge{width:7px;height:7px;border-radius:50%;background:#19d9f5}
/* qr */
.mock-qr .mock-body{grid-template-columns:150px 1fr}
.mock-sidebar{padding:10px;display:flex;flex-direction:column;gap:8px}
.mock-brand{font-size:12px;font-weight:900;color:#29dfff;margin:6px 0 12px}
.mock-mainqr{padding:14px;display:flex;flex-direction:column}
.mock-inputrow{display:grid;grid-template-columns:1fr 180px;gap:8px;margin:10px 0 12px}
.mock-input{height:35px;border:1px solid #31515f;border-radius:8px;padding:9px;font-size:8px;color:#6e8794}
.mock-btn{height:35px;border:1px solid #1cdbfa;border-radius:8px;background:#0e303a;color:#96f2ff;font-size:8px;font-weight:900;display:grid;place-items:center}
.mock-qrcard{flex:1;padding:14px;display:grid;grid-template-columns:1fr 150px;gap:12px}
.mock-qrbox{aspect-ratio:1;background:#e8f0f2;border-radius:9px;padding:9px;display:grid;grid-template-columns:repeat(9,1fr);gap:2px}
.mock-qrbox i{background:#0b151b}
.mock-qrbox i:nth-child(3n),.mock-qrbox i:nth-child(5n){background:transparent}
.mock-status{height:34px;border:1px solid #16d9f3;border-radius:7px;color:#4ce8ff;font-size:8px;font-weight:800;padding:10px;margin-top:15px}
/* drivers */
.mock-drivers .mock-body{grid-template-columns:.75fr 1.25fr}
.mock-driverlist{padding:10px}
.mock-person{height:48px;border:1px solid #2c4956;border-radius:8px;margin-top:7px;display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:7px}
.mock-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,#173542,#0a161d);border:1px solid #1dd8f3;display:grid;place-items:center;font-size:10px}
.mock-assign{padding:10px}
.mock-vehicle-row{height:62px;border:1px solid #2b4754;border-radius:9px;margin-top:8px;display:grid;grid-template-columns:42px 1fr 110px;align-items:center;padding:8px;gap:8px}
.mock-carshape{width:36px;height:17px;border:2px solid #28dfff;border-radius:9px 12px 6px 6px;position:relative}
.mock-carshape:before{content:"";position:absolute;width:18px;height:9px;border:2px solid #28dfff;border-bottom:0;border-radius:10px 10px 0 0;left:7px;top:-9px}
.mock-assigned{height:28px;border:1px solid #3a5865;border-radius:7px;display:flex;align-items:center;padding:0 8px;font-size:7px;color:#a7bdc8}
/* activity/logs */
.mock-activity .mock-body,.mock-logsrecords .mock-body{grid-template-columns:.9fr 1.4fr}
.mock-filtercol{padding:10px}
.mock-filter{height:34px;border:1px solid #2f4e5b;border-radius:8px;margin-top:8px;padding:10px;font-size:8px;color:#9cb2bd}
.mock-timeline{padding:10px;overflow:hidden}
.mock-event{height:42px;border:1px solid #294653;border-radius:7px;margin-top:6px;display:grid;grid-template-columns:26px 1fr 58px;align-items:center;padding:6px;gap:7px}
.mock-event-dot{width:20px;height:20px;border-radius:6px;background:#11303a;border:1px solid #16d8f3;display:grid;place-items:center;color:#40e7ff;font-size:8px}
.mock-time{text-align:right;font-size:6px;color:#78929e}
/* notes */
.mock-noteschecks .mock-body{grid-template-columns:1.25fr .75fr}
.mock-notebook{padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mock-notepage{border:1px solid #2e4a56;border-radius:8px;background:repeating-linear-gradient(#101a21 0 19px,#273640 20px,#101a21 21px);padding:8px}
.mock-checklist{padding:10px}
.mock-checkrow{height:32px;border:1px solid #2e4b57;border-radius:7px;margin-top:6px;display:grid;grid-template-columns:18px 1fr auto;align-items:center;padding:6px;gap:6px}
.mock-checkmark{width:14px;height:14px;border-radius:4px;border:1px solid #3c5966;background:#10222a}
.mock-checkmark.ok{background:#12392f;border-color:#4ee0ad}
.mock-checkmark.ok:after{content:"✓";font-size:9px;color:#5ce5b3;display:grid;place-items:center}
/* health */
.mock-healthview .mock-body{grid-template-rows:auto 1fr}
.mock-healthtop{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.mock-healthmetric{height:58px;border:1px solid #304d59;border-radius:8px;padding:8px}
.mock-healthwide{grid-column:span 2}
.mock-fleetrows{padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mock-statusrow{height:56px;border:1px solid #2e4a57;border-radius:8px;padding:8px;display:grid;grid-template-columns:26px 1fr auto;gap:7px;align-items:center}
.mock-pill{height:20px;padding:0 7px;border-radius:9px;border:1px solid #31515f;display:flex;align-items:center;font-size:6px}
.mock-pill.good{border-color:#3ed7a2;color:#5ee4b5}
.mock-pill.warn{border-color:#ffb149;color:#ffbc62}
.mock-pill.bad{border-color:#ff6074;color:#ff798a}
/* Mockup typography/alignment refinement */
.mock-title{font-size:11px;line-height:1;white-space:nowrap}
.mock-label{font-size:8.5px;line-height:1.25}
.mock-muted{font-size:7.5px;line-height:1.3}
.mock-count{line-height:1}
.mock-chip,.mock-filter,.mock-input,.mock-btn,.mock-assigned{line-height:1.15}
.mock-card{overflow:hidden}
/* Planner */
.mock-bigcal{padding:11px}
.mock-calendar-head .mock-label{font-size:9px}
.mock-calendar-head .mock-cyan{font-size:14px;line-height:1}
.mock-bigcal .mock-day{font-size:7px;line-height:1;padding:6px 7px;display:flex;align-items:flex-start}
.mock-reminder-card{padding:10px 11px;display:flex;flex-direction:column;min-height:0}
.mock-reminder-card>.mock-label{font-size:8.5px;margin-bottom:5px;flex:0 0 auto}
.mock-reminder-row{height:auto;min-height:38px;margin-top:4px;padding:7px 8px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.mock-reminder-row>span:first-child,.mock-reminder-row>div:first-child{min-width:0}
.mock-reminder-row b,.mock-reminder-row .mock-cyan,.mock-reminder-row .mock-orange,.mock-reminder-row .mock-green{font-size:12px;line-height:1.05;display:block;white-space:normal}
.mock-reminder-row small{display:block;margin-top:3px;font-size:6.8px;line-height:1.15}
.mock-reminder-row .mock-badge{justify-self:end}
/* Drivers & assignments */
.mock-driverlist,.mock-assign{padding:11px}
.mock-driverlist>.mock-label,.mock-assign>.mock-label{font-size:8.5px;margin-bottom:4px}
.mock-person{height:52px;padding:8px 9px;gap:9px}
.mock-person .mock-label{font-size:8.7px}
.mock-person .mock-muted{font-size:6.8px}
.mock-avatar{font-size:9px}
.mock-vehicle-row{height:58px;padding:8px 9px;gap:10px}
.mock-vehicle-row .mock-label{font-size:8.7px}
.mock-vehicle-row .mock-muted{font-size:6.8px}
.mock-assigned{font-size:7.2px;line-height:1.1;justify-content:flex-start;white-space:nowrap}
/* Activity / logs */
.mock-filtercol,.mock-timeline{padding:11px}
.mock-filtercol>.mock-label,.mock-timeline>.mock-label{font-size:8.5px;margin-bottom:5px}
.mock-filter{height:36px;margin-top:7px;padding:0 10px;display:flex;align-items:center;font-size:7.6px}
.mock-event{height:44px;margin-top:6px;padding:6px 8px;gap:8px}
.mock-event .mock-label{font-size:8.4px}
.mock-event .mock-muted{font-size:6.6px}
.mock-time{font-size:6.4px;white-space:nowrap}
/* Notes & vehicle checks */
.mock-notebook,.mock-checklist{padding:11px}
.mock-notepage{padding:9px 10px}
.mock-notepage>.mock-label,.mock-checklist>.mock-label{font-size:8.5px}
.mock-notepage p{margin:0!important;padding-top:18px;font-size:7px!important;line-height:1.35}
.mock-notepage p+p{padding-top:3px}
.mock-checkrow{height:35px;padding:7px 8px}
.mock-checkrow .mock-muted{font-size:7.2px}
.mock-checkrow .mock-green,.mock-checkrow .mock-orange{font-size:11px;line-height:1}
/* Fleet status & health */
.mock-healthmetric{padding:9px 10px}
.mock-healthmetric .mock-muted{font-size:7px;margin-top:4px;display:block}
.mock-healthwide .mock-label{font-size:8.5px}
.mock-fleetrows{padding:10px 11px;gap:9px}
.mock-statusrow{height:58px;padding:9px 10px;gap:9px}
.mock-statusrow .mock-label{font-size:8.5px}
.mock-statusrow .mock-muted{font-size:6.8px}
.mock-pill{font-size:6.5px;white-space:nowrap}
/* QR */
.mock-mainqr{padding:15px}
.mock-brand{font-size:12px}
.mock-input{font-size:8px}
.mock-btn{font-size:8.5px}
.mock-qrcard .mock-label{font-size:9px}
.mock-status{font-size:7.5px;line-height:1.1;height:auto;min-height:34px;display:flex;align-items:center}
/* ===== GLOBAL EXPLANATORY MOCKUP READABILITY FIX ===== */
/* Give the visual mockup enough room to be readable on desktop. */
.feature-dialog{width:min(1480px,96vw)}
.mockup-root{min-height:480px}
.mockup-window{min-height:460px}
/* Global mockup typography: readable, consistent, and allowed to wrap. */
.mock-title{font-size:14px;line-height:1.2;white-space:normal}
.mock-label{font-size:12px;line-height:1.25;overflow-wrap:anywhere}
.mock-muted{font-size:10px;line-height:1.35;overflow-wrap:anywhere}
.mock-count{font-size:20px;line-height:1.05}
.mock-chip,.mock-filter,.mock-input,.mock-btn,.mock-assigned,.mock-time,.mock-pill{font-size:10px;line-height:1.25}
.mock-card{overflow:hidden}
/* Header and common controls */
.mock-top{height:48px;padding:0 18px;gap:9px}
.mock-dot{width:9px;height:9px}
.mock-body{gap:12px;padding:15px}
.mock-icon{width:32px;height:32px;font-size:15px;border-radius:9px}
.mock-chip{min-height:30px;height:auto;padding:7px 10px;white-space:normal}
/* Planner */
.mock-bigcal{padding:14px}
.mock-calendar-head{margin-bottom:10px}
.mock-calendar-head .mock-label{font-size:12px}
.mock-calendar-head .mock-cyan{font-size:19px}
.mock-bigcal .mock-day{font-size:10px;line-height:1.2;padding:7px;min-height:46px;height:auto}
.mock-side-stack{gap:10px}
.mock-reminder-card{padding:12px;min-height:0}
.mock-reminder-card>.mock-label{font-size:11px;margin-bottom:7px}
.mock-reminder-row{height:auto;min-height:54px;padding:9px 10px;margin-top:6px;grid-template-columns:minmax(0,1fr) auto}
.mock-reminder-row b,.mock-reminder-row .mock-cyan,.mock-reminder-row .mock-orange,.mock-reminder-row .mock-green{font-size:15px;line-height:1.15;white-space:normal}
.mock-reminder-row small{font-size:9px;line-height:1.25;margin-top:4px}
/* Drivers & assignments */
.mock-driverlist,.mock-assign{padding:14px}
.mock-driverlist>.mock-label,.mock-assign>.mock-label{font-size:11px;margin-bottom:7px}
.mock-person{height:auto;min-height:68px;padding:10px 12px;grid-template-columns:40px minmax(0,1fr) auto;gap:11px}
.mock-avatar{width:34px;height:34px;font-size:11px}
.mock-person .mock-label{font-size:12px}
.mock-person .mock-muted{font-size:9px}
.mock-vehicle-row{height:auto;min-height:76px;padding:10px 12px;grid-template-columns:48px minmax(0,1fr) minmax(100px,130px);gap:12px}
.mock-vehicle-row .mock-label{font-size:12px}
.mock-vehicle-row .mock-muted{font-size:9px}
.mock-assigned{height:auto;min-height:36px;padding:8px 10px;font-size:10px;white-space:normal}
/* Activity & Logs */
.mock-filtercol,.mock-timeline{padding:14px}
.mock-filtercol>.mock-label,.mock-timeline>.mock-label{font-size:11px;margin-bottom:8px}
.mock-filter{height:auto;min-height:46px;margin-top:9px;padding:10px 12px;font-size:10px;display:flex;align-items:center}
.mock-event{height:auto;min-height:58px;margin-top:8px;padding:9px 10px;grid-template-columns:34px minmax(0,1fr) 64px;gap:10px}
.mock-event-dot{width:28px;height:28px;font-size:11px}
.mock-event .mock-label{font-size:11.5px;line-height:1.2}
.mock-event .mock-muted{font-size:9px;line-height:1.2}
.mock-time{font-size:9px;white-space:nowrap}
/* Notes & vehicle checks */
.mock-notebook,.mock-checklist{padding:14px}
.mock-notepage{padding:11px 12px}
.mock-notepage>.mock-label,.mock-checklist>.mock-label{font-size:11px}
.mock-notepage p{font-size:9.5px!important;line-height:1.4!important;padding-top:22px!important;overflow-wrap:anywhere}
.mock-notepage p+p{padding-top:5px!important}
.mock-checkrow{height:auto;min-height:46px;padding:9px 10px;grid-template-columns:22px minmax(0,1fr) auto;gap:9px}
.mock-checkmark{width:18px;height:18px}
.mock-checkmark.ok:after{font-size:11px}
.mock-checkrow .mock-muted{font-size:10px}
.mock-checkrow .mock-green,.mock-checkrow .mock-orange{font-size:13px;white-space:nowrap}
/* Fleet status & health */
.mock-healthtop{gap:10px}
.mock-healthmetric{height:auto;min-height:74px;padding:11px 13px}
.mock-healthmetric .mock-muted{font-size:9px;margin-top:5px}
.mock-healthwide .mock-label{font-size:11px}
.mock-bar{height:9px}
.mock-fleetrows{padding:13px;gap:10px}
.mock-statusrow{height:auto;min-height:72px;padding:10px 12px;grid-template-columns:34px minmax(0,1fr) auto;gap:10px}
.mock-statusrow .mock-label{font-size:11.5px}
.mock-statusrow .mock-muted{font-size:9px}
.mock-pill{height:auto;min-height:27px;padding:6px 9px;font-size:9px;white-space:nowrap}
/* QR access */
.mock-qr .mock-body{grid-template-columns:170px 1fr}
.mock-sidebar{padding:13px;gap:10px}
.mock-brand{font-size:15px}
.mock-mainqr{padding:17px}
.mock-inputrow{grid-template-columns:minmax(0,1fr) 190px;gap:10px}
.mock-input,.mock-btn{height:auto;min-height:44px;padding:10px 12px;font-size:10px}
.mock-qrcard{padding:16px;grid-template-columns:minmax(0,1fr) 165px;gap:15px}
.mock-qrcard .mock-label{font-size:12px}
.mock-status{min-height:42px;font-size:10px;padding:10px 12px}
/* Overview */
.mock-calendar{padding:12px}
.mock-calendar-head{margin-bottom:9px}
.mock-days{gap:5px}
.mock-day{font-size:8px;line-height:1.15;padding:5px;min-height:28px}
.mock-stats{padding:11px;gap:7px}
.mock-stat{height:auto;min-height:54px;padding:7px}
.mock-health{height:auto;min-height:48px}
.mock-services{padding:11px}
.mock-services .mock-chip{min-height:25px;height:auto;margin-top:6px;font-size:8px}
.mock-notes{padding:11px;gap:8px}
.mock-chart{padding:11px}
.mock-logs{padding:11px}
.mock-line{height:13px;margin-top:7px}
.mockup-root{width:100%;height:100%;min-height:0;display:flex;align-items:stretch;justify-content:stretch}
.mockup-window{width:100%;height:100%;min-height:0;max-height:100%;overflow:hidden}
.mock-body{height:calc(100% - 54px);min-height:0;overflow:hidden}
/* Fleet Overview: keep every block inside its own cell */
.mock-overview .mock-body{grid-template-columns:1.28fr .88fr .60fr;grid-template-rows:48% 52%;gap:9px;padding:10px}
.mock-overview .mock-calendar{min-height:0;padding:8px}
.mock-overview .mock-calendar-head{margin-bottom:5px}
.mock-overview .mock-days{min-height:0;gap:3px;grid-auto-rows:minmax(0,1fr)}
.mock-overview .mock-day{min-height:0!important;height:auto!important;padding:2px 3px;font-size:6.2px;line-height:1}
.mock-overview .mock-stats{min-height:0;padding:7px;gap:4px;grid-auto-rows:minmax(0,1fr)}
.mock-overview .mock-stat{height:auto!important;min-height:0!important;padding:4px}
.mock-overview .mock-health{height:auto!important;min-height:0!important;padding:5px}
.mock-overview .mock-services{min-height:0;padding:7px;overflow:hidden}
.mock-overview .mock-services .mock-chip{height:16px!important;min-height:0;margin-top:4px;font-size:5.3px}
.mock-overview .mock-notes{min-height:0;padding:7px}
.mock-overview .mock-chartlogs{min-height:0;gap:6px}
.mock-overview .mock-chart,.mock-overview .mock-logs{min-height:0;padding:6px;overflow:hidden}
.mock-overview .mock-semi{height:48px;margin:7px auto 0}
.mock-overview .mock-line{height:8px;margin-top:4px}
/* Planner: compact enough to fit without a modal scrollbar */
.mock-planner .mock-body{grid-template-columns:minmax(0,1.72fr) minmax(220px,.78fr);gap:8px;padding:9px}
.mock-planner .mock-bigcal{min-height:0;padding:8px}
.mock-planner .mock-bigcal .mock-days{gap:4px;grid-auto-rows:minmax(0,1fr);min-height:0}
.mock-planner .mock-bigcal .mock-day{min-height:0!important;height:auto!important;font-size:6.5px;padding:3px;line-height:1}
.mock-planner .mock-reminders{min-height:0;display:grid;grid-template-rows:1.15fr .85fr .8fr;gap:7px}
.mock-planner .mock-reminder-card{min-height:0!important;padding:7px;overflow:hidden}
.mock-planner .mock-reminder-row{min-height:0!important;height:auto!important;padding:5px 6px;margin-top:4px}
.mock-planner .mock-reminder-row b,.mock-planner .mock-reminder-row .mock-cyan,.mock-planner .mock-reminder-row .mock-orange,.mock-planner .mock-reminder-row .mock-green{font-size:9px;line-height:1.05}
.mock-planner .mock-reminder-row small{font-size:5.8px;line-height:1.1}
/* Lists: fit all visible rows without expanding the whole dialog */
.mock-activity .mock-body,.mock-logsrecords .mock-body{grid-template-columns:.74fr 1.26fr;gap:9px;padding:9px}
.mock-filtercol,.mock-timeline{min-height:0;overflow:hidden;padding:9px}
.mock-filter{min-height:0!important;height:39px!important;padding:7px 9px;margin-top:8px;font-size:7px;display:flex;align-items:center}
.mock-event{min-height:0!important;height:46px!important;padding:5px 8px;grid-template-columns:27px minmax(0,1fr) 48px;align-items:center}
.mock-event .mock-label{font-size:8px;line-height:1.05}
.mock-event .mock-muted{font-size:5.8px;line-height:1}
.mock-time{font-size:5.8px}
/* Drivers / notes / health: stable readable sizing */
.mock-drivers .mock-body{grid-template-columns:.78fr 1.22fr;gap:9px;padding:9px}
.mock-person{min-height:0!important;height:50px!important;padding:6px 8px}
.mock-person .mock-label{font-size:8px}
.mock-person .mock-muted{font-size:5.8px}
.mock-vehicle-row{min-height:0!important;height:58px!important;padding:7px 8px;grid-template-columns:38px minmax(0,1fr) 112px}
.mock-vehicle-row .mock-label{font-size:8px}
.mock-vehicle-row .mock-muted{font-size:5.8px}
.mock-assigned{font-size:6.5px;min-height:28px}
.mock-noteschecks .mock-body{grid-template-columns:1.32fr .68fr;gap:9px;padding:9px}
.mock-notebook,.mock-checklist{min-height:0;overflow:hidden}
.mock-notepage p{font-size:6.5px!important;line-height:1.25}
.mock-checkrow{min-height:0!important;height:39px!important;padding:6px 8px}
.mock-checkrow .mock-muted{font-size:7px}
.mock-checkrow .mock-green,.mock-checkrow .mock-orange{font-size:9px}
.mock-healthview .mock-body{padding:9px;gap:9px}
.mock-healthmetric{min-height:0!important;height:52px!important;padding:7px}
.mock-statusrow{min-height:0!important;height:55px!important;padding:7px 9px}
.mock-statusrow .mock-label{font-size:8px}
.mock-statusrow .mock-muted{font-size:5.8px}
.mock-pill{font-size:5.8px;min-height:22px}
/* ===== TYPOGRAPHY-ONLY MOCKUP FIX — DO NOT CHANGE CARD GEOMETRY ===== */
/* This block intentionally changes only font metrics/alignment. */
.mock-title{font-size:13px!important;line-height:1.15!important;font-weight:850!important;letter-spacing:.2px!important}
.mock-label{font-size:10.5px!important;line-height:1.22!important;font-weight:850!important;letter-spacing:.05px!important}
.mock-muted{font-size:8.2px!important;line-height:1.25!important}
.mock-count{font-size:19px!important;line-height:1!important;font-weight:900!important}
.mock-chip,.mock-filter,.mock-input,.mock-btn,.mock-assigned{font-size:8.2px!important;line-height:1.15!important}
.mock-time,.mock-pill{font-size:7.5px!important;line-height:1.1!important}
.mock-icon{font-size:13px!important;line-height:1!important}
/* Fleet Overview */
.mock-overview .mock-calendar-head .mock-label{font-size:11px!important}
.mock-overview .mock-day{font-size:6.8px!important;line-height:1!important}
.mock-overview .mock-stat .mock-muted{font-size:7.6px!important}
.mock-overview .mock-health .mock-label{font-size:10px!important}
.mock-overview .mock-services>.mock-label{font-size:10.5px!important}
.mock-overview .mock-services .mock-chip{font-size:7.2px!important;line-height:1!important}
.mock-overview .mock-chart>.mock-label,.mock-overview .mock-logs>.mock-label{font-size:10.5px!important}
/* Reminders & Planner */
.mock-planner .mock-calendar-head .mock-label{font-size:11px!important}
.mock-planner .mock-calendar-head .mock-cyan{font-size:16px!important;line-height:1!important}
.mock-planner .mock-day{font-size:7.4px!important;line-height:1!important}
.mock-reminder-card>.mock-label{font-size:10.5px!important}
.mock-reminder-row b,.mock-reminder-row .mock-cyan,.mock-reminder-row .mock-orange,.mock-reminder-row .mock-green{font-size:11.5px!important;line-height:1.05!important}
.mock-reminder-row small{font-size:7.4px!important;line-height:1.15!important}
/* Drivers & Assignments */
.mock-driverlist>.mock-label,.mock-assign>.mock-label{font-size:10.5px!important}
.mock-person .mock-label,.mock-vehicle-row .mock-label{font-size:10.2px!important;line-height:1.1!important}
.mock-person .mock-muted,.mock-vehicle-row .mock-muted{font-size:7.7px!important;line-height:1.15!important}
.mock-avatar{font-size:9.5px!important;line-height:1!important}
.mock-assigned{font-size:8px!important;line-height:1.1!important}
/* Activity / History and Logs */
.mock-filtercol>.mock-label,.mock-timeline>.mock-label{font-size:10.5px!important}
.mock-filter{font-size:8.6px!important;line-height:1.1!important}
.mock-event .mock-label{font-size:10px!important;line-height:1.1!important}
.mock-event .mock-muted{font-size:7.5px!important;line-height:1.1!important}
.mock-event-dot{font-size:9px!important;line-height:1!important}
.mock-time{font-size:7.2px!important}
/* Notes & Vehicle Checks */
.mock-notepage>.mock-label,.mock-checklist>.mock-label{font-size:10.5px!important}
.mock-notepage p{font-size:8.3px!important;line-height:1.28!important}
.mock-checkrow .mock-muted{font-size:8.5px!important;line-height:1.1!important}
.mock-checkrow .mock-green,.mock-checkrow .mock-orange{font-size:10.5px!important;line-height:1!important}
.mock-checkmark.ok:after{font-size:10px!important}
/* Fleet Status & Health */
.mock-healthmetric .mock-muted{font-size:8px!important;line-height:1.1!important}
.mock-healthwide .mock-label{font-size:10.5px!important}
.mock-statusrow .mock-label{font-size:10.2px!important;line-height:1.1!important}
.mock-statusrow .mock-muted{font-size:7.6px!important;line-height:1.1!important}
.mock-pill{font-size:7.2px!important;line-height:1!important}
/* QR Access */
.mock-brand{font-size:13px!important;line-height:1.1!important}
.mock-qrcard .mock-label{font-size:10.5px!important}
.mock-status{font-size:8.4px!important;line-height:1.15!important}
/* ===== FINAL INDIVIDUAL MOCKUP TYPOGRAPHY PASS =====
   Card geometry is intentionally untouched. Only text sizing/alignment changes. */

/* 1. Fleet Overview */
.mock-overview .mock-title{font-size:13px!important}
.mock-overview .mock-calendar-head .mock-label{font-size:12px!important}
.mock-overview .mock-calendar-head .mock-cyan{font-size:12px!important}
.mock-overview .mock-day{font-size:7.5px!important;font-weight:700!important;display:flex;align-items:flex-start;justify-content:flex-start}
.mock-overview .mock-count{font-size:20px!important}
.mock-overview .mock-stat .mock-muted{font-size:8.2px!important}
.mock-overview .mock-health .mock-label{font-size:11px!important;text-align:center}
.mock-overview .mock-services>.mock-label{font-size:11px!important}
.mock-overview .mock-services .mock-chip{font-size:6.5px!important;font-weight:650!important;display:flex;align-items:center}
.mock-overview .mock-chart>.mock-label,.mock-overview .mock-logs>.mock-label{font-size:11px!important}
/* 2. Reminders & Planner */
.mock-planner .mock-title{font-size:13px!important}
.mock-planner .mock-calendar-head .mock-label{font-size:12px!important}
.mock-planner .mock-calendar-head .mock-cyan{font-size:15px!important}
.mock-planner .mock-day{font-size:7.2px!important;font-weight:700!important;display:flex;align-items:flex-start;justify-content:flex-start}
.mock-planner .mock-reminder-card>.mock-label{font-size:11px!important}
.mock-planner .mock-reminder-row{align-items:center!important}
.mock-planner .mock-reminder-row b,.mock-planner .mock-reminder-row .mock-cyan,.mock-planner .mock-reminder-row .mock-orange,.mock-planner .mock-reminder-row .mock-green{font-size:10.5px!important;line-height:1.05!important}
.mock-planner .mock-reminder-row small{font-size:6.8px!important;line-height:1.1!important}
/* 3. Driver QR Access */
.mock-qr .mock-title{font-size:13px!important}
.mock-qr .mock-brand{font-size:14px!important}
.mock-qr .mock-input,.mock-qr .mock-btn{font-size:9px!important}
.mock-qr .mock-qrcard .mock-label{font-size:11px!important}
.mock-qr .mock-qrcard .mock-muted{font-size:7.8px!important}
.mock-qr .mock-status{font-size:9px!important;font-weight:750!important}
/* 4. Drivers & Assignments */
.mock-drivers .mock-title{font-size:13px!important}
.mock-drivers .mock-driverlist>.mock-label,.mock-drivers .mock-assign>.mock-label{font-size:11px!important}
.mock-drivers .mock-person,.mock-drivers .mock-vehicle-row{align-items:center!important}
.mock-drivers .mock-person .mock-label,.mock-drivers .mock-vehicle-row .mock-label{font-size:10.5px!important;line-height:1.05!important}
.mock-drivers .mock-person .mock-muted,.mock-drivers .mock-vehicle-row .mock-muted{font-size:7.4px!important;line-height:1.05!important}
.mock-drivers .mock-avatar{font-size:10px!important}
.mock-drivers .mock-assigned{font-size:7.7px!important;display:flex;align-items:center;justify-content:flex-start}
/* 5. Activity & History */
.mock-activity .mock-title{font-size:13px!important}
.mock-activity .mock-filtercol>.mock-label,.mock-activity .mock-timeline>.mock-label{font-size:11px!important}
.mock-activity .mock-filter{font-size:9px!important;font-weight:650!important;display:flex;align-items:center}
.mock-activity .mock-event{align-items:center!important}
.mock-activity .mock-event .mock-label{font-size:10px!important;line-height:1.05!important}
.mock-activity .mock-event .mock-muted{font-size:7px!important;line-height:1!important}
.mock-activity .mock-time{font-size:6.8px!important;text-align:right}
.mock-activity .mock-event-dot{font-size:9px!important}
/* 6. Notes & Vehicle Checks */
.mock-noteschecks .mock-title{font-size:13px!important}
.mock-noteschecks .mock-notepage>.mock-label,.mock-noteschecks .mock-checklist>.mock-label{font-size:11px!important}
.mock-noteschecks .mock-notepage p{font-size:8px!important;line-height:1.2!important}
.mock-noteschecks .mock-checkrow{align-items:center!important}
.mock-noteschecks .mock-checkrow .mock-muted{font-size:8px!important}
.mock-noteschecks .mock-checkrow .mock-green,.mock-noteschecks .mock-checkrow .mock-orange{font-size:9px!important;font-weight:800!important}
/* 7. Fleet Status & Health */
.mock-healthview .mock-title{font-size:13px!important}
.mock-healthview .mock-count{font-size:19px!important}
.mock-healthview .mock-healthmetric .mock-muted{font-size:7.8px!important}
.mock-healthview .mock-healthwide .mock-label{font-size:10.8px!important}
.mock-healthview .mock-statusrow{align-items:center!important}
.mock-healthview .mock-statusrow .mock-label{font-size:9.8px!important;line-height:1.05!important}
.mock-healthview .mock-statusrow .mock-muted{font-size:6.8px!important;line-height:1!important}
.mock-healthview .mock-pill{font-size:6.6px!important;font-weight:800!important}
/* 8. Logs & Records */
.mock-logsrecords .mock-title{font-size:13px!important}
.mock-logsrecords .mock-filtercol>.mock-label,.mock-logsrecords .mock-timeline>.mock-label{font-size:11px!important}
.mock-logsrecords .mock-filter{font-size:9px!important;font-weight:650!important;display:flex;align-items:center}
.mock-logsrecords .mock-event{align-items:center!important}
.mock-logsrecords .mock-event .mock-label{font-size:9.6px!important;line-height:1.05!important}
.mock-logsrecords .mock-event .mock-muted{font-size:6.8px!important;line-height:1!important}
.mock-logsrecords .mock-time{font-size:6.6px!important;text-align:right}
.mock-logsrecords .mock-event-dot{font-size:9px!important}
.mock-top{height:52px}
.mock-body{height:calc(100% - 52px)}
.mock-title{font-size:17px!important;line-height:1.15!important}
.mock-label{font-size:13px!important;line-height:1.15!important}
.mock-muted{font-size:10px!important;line-height:1.2!important}
.mock-count{font-size:25px!important;line-height:1!important}
/* 01 — Fleet Overview */
.mock-overview .mock-calendar-head .mock-label{font-size:14px!important}
.mock-overview .mock-calendar-head .mock-cyan{font-size:15px!important}
.mock-overview .mock-day{font-size:9px!important;padding:3px 4px!important}
.mock-overview .mock-stat{display:flex;flex-direction:column;align-items:center;justify-content:center}
.mock-overview .mock-stat .mock-muted{font-size:9.5px!important;text-align:center}
.mock-overview .mock-health .mock-label{font-size:12px!important}
.mock-overview .mock-services>.mock-label,
.mock-overview .mock-chart>.mock-label,
.mock-overview .mock-logs>.mock-label{font-size:13px!important}
.mock-overview .mock-services .mock-chip{font-size:8px!important;line-height:1!important;padding-inline:6px!important}
/* 02 — Reminders & Planner */
.mock-planner .mock-calendar-head .mock-label{font-size:14px!important}
.mock-planner .mock-calendar-head .mock-cyan{font-size:16px!important}
.mock-planner .mock-day{font-size:9px!important;padding:4px!important}
.mock-planner .mock-reminder-card>.mock-label{font-size:13px!important}
.mock-planner .mock-reminder-row{grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important}
.mock-planner .mock-reminder-row b,
.mock-planner .mock-reminder-row .mock-cyan,
.mock-planner .mock-reminder-row .mock-orange,
.mock-planner .mock-reminder-row .mock-green{font-size:13px!important;line-height:1.05!important}
.mock-planner .mock-reminder-row small{font-size:8.5px!important;line-height:1.05!important}
/* 03 — Driver QR Access */
.mock-qr .mock-brand{font-size:18px!important;text-align:center}
.mock-qr .mock-sidebar .mock-chip{font-size:11px!important;display:flex;align-items:center}
.mock-qr .mock-mainqr>.mock-label{font-size:14px!important}
.mock-qr .mock-input,.mock-qr .mock-btn{font-size:11px!important;display:flex;align-items:center}
.mock-qr .mock-btn{justify-content:center;text-align:center}
.mock-qr .mock-qrcard .mock-label{font-size:14px!important}
.mock-qr .mock-qrcard .mock-muted{font-size:10px!important}
.mock-qr .mock-status{font-size:11px!important;line-height:1.15!important}
/* 04 — Drivers & Assignments */
.mock-drivers .mock-driverlist>.mock-label,.mock-drivers .mock-assign>.mock-label{font-size:14px!important}
.mock-drivers .mock-person,.mock-drivers .mock-vehicle-row{align-items:center!important}
.mock-drivers .mock-person .mock-label,.mock-drivers .mock-vehicle-row .mock-label{font-size:13px!important}
.mock-drivers .mock-person .mock-muted,.mock-drivers .mock-vehicle-row .mock-muted{font-size:9.5px!important}
.mock-drivers .mock-avatar{font-size:11px!important}
.mock-drivers .mock-assigned{font-size:10px!important;line-height:1.1!important;display:flex;align-items:center}
/* 05 and 08 — Activity / Logs */
.mock-activity .mock-filtercol>.mock-label,.mock-activity .mock-timeline>.mock-label,
.mock-logsrecords .mock-filtercol>.mock-label,.mock-logsrecords .mock-timeline>.mock-label{font-size:14px!important}
.mock-activity .mock-filter,.mock-logsrecords .mock-filter{font-size:11px!important;display:flex;align-items:center}
.mock-activity .mock-event,.mock-logsrecords .mock-event{align-items:center!important}
.mock-activity .mock-event .mock-label,.mock-logsrecords .mock-event .mock-label{font-size:12px!important;line-height:1.05!important}
.mock-activity .mock-event .mock-muted,.mock-logsrecords .mock-event .mock-muted{font-size:9px!important}
.mock-activity .mock-time,.mock-logsrecords .mock-time{font-size:8.5px!important;text-align:right}
.mock-activity .mock-event-dot,.mock-logsrecords .mock-event-dot{font-size:11px!important}
/* 06 — Notes & Vehicle Checks */
.mock-noteschecks .mock-notepage>.mock-label,.mock-noteschecks .mock-checklist>.mock-label{font-size:14px!important}
.mock-noteschecks .mock-notepage p{font-size:11px!important;line-height:1.25!important}
.mock-noteschecks .mock-checkrow{align-items:center!important}
.mock-noteschecks .mock-checkrow .mock-muted{font-size:11px!important}
.mock-noteschecks .mock-checkrow .mock-green,.mock-noteschecks .mock-checkrow .mock-orange{font-size:12px!important}
/* 07 — Fleet Status & Health */
.mock-healthview .mock-healthmetric{display:flex;flex-direction:column;justify-content:center}
.mock-healthview .mock-count{font-size:25px!important}
.mock-healthview .mock-healthmetric .mock-muted{font-size:10px!important}
.mock-healthview .mock-healthwide .mock-label{font-size:13px!important}
.mock-healthview .mock-statusrow{align-items:center!important}
.mock-healthview .mock-statusrow .mock-label{font-size:13px!important}
.mock-healthview .mock-statusrow .mock-muted{font-size:9.5px!important}
.mock-healthview .mock-pill{font-size:9px!important;font-weight:850!important;text-align:center}
/* Final overrides live here so the original visual system remains intact. */

.mock-real-notes {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr 1fr;
  gap: 7px !important;
}
.mock-note-entry,
.mock-mini-event {
  border: 1px solid #2d4855;
  border-radius: 6px;
  background: #0c171e;
  color: #9fb4bf;
  font-size: 9px;
  line-height: 1.25;
  padding: 7px 8px;
}
.mock-real-activity {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mock-mini-event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
}
.mock-mini-event b {
  color: #5ce8fa;
  font-size: 8px;
  white-space: nowrap;
}
.mock-driver-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.mock-driver-actions span {
  border: 1px solid #31515f;
  border-radius: 7px;
  color: #b8cad3;
  font-size: 9px;
  font-weight: 750;
  padding: 7px 9px;
}
.mock-healthwide .mock-green {
  float: right;
}
/* Keep every simulated app label readable at desktop sizes. */
.mock-title {
  font-size: 16px !important;
}
.mock-label {
  font-size: 12px !important;
}
.mock-muted {
  font-size: 10px !important;
}
.mock-chip,
.mock-filter,
.mock-input,
.mock-btn,
.mock-assigned {
  font-size: 9px !important;
}
.mock-event .mock-label,
.mock-statusrow .mock-label,
.mock-person .mock-label,
.mock-vehicle-row .mock-label {
  font-size: 11px !important;
}
.mock-event .mock-muted,
.mock-statusrow .mock-muted,
.mock-person .mock-muted,
.mock-vehicle-row .mock-muted {
  font-size: 8px !important;
}
.mock-time,
.mock-pill {
  font-size: 8px !important;
}
.mock-notepage p {
  font-size: 9px !important;
  line-height: 1.35 !important;
  margin-top: 18px;
}
.mock-reminder-row b,
.mock-reminder-row .mock-cyan,
.mock-reminder-row .mock-orange,
.mock-reminder-row .mock-green {
  font-size: 11px !important;
}
.mock-reminder-row small {
  font-size: 8px !important;
}
  height: 100%;
  min-height: 0;
}
/* --- canvas fit (overrides the old min-height rules above) --- */
.mockup-root{width:100%;height:100%;min-height:0;display:block}
.mockup-window{width:100%;height:100%;min-height:0;border-radius:14px}
.mock-health{display:flex;flex-direction:column;justify-content:center;gap:5px}
.mock-health .mock-bar{width:100%;align-self:stretch;flex:0 0 auto}

/* --- fixes: markup uses .mock-side-stack, older rules targeted .mock-reminders --- */
.mock-planner .mock-bigcal{min-height:0;overflow:hidden}
.mock-planner .mock-bigcal .mock-days{flex:1;min-height:0}
.mock-planner .mock-side-stack{min-height:0;display:grid;grid-template-rows:1.2fr .9fr .9fr;gap:7px}
.mock-planner .mock-side-stack>.mock-card{min-height:0;overflow:hidden}
.mock-planner .mock-reminder-row{min-height:0}
.mock-healthview .mock-fleetrows{grid-auto-rows:1fr}
.mock-healthview .mock-statusrow{height:100%!important;min-height:0!important}