/* Yusrr — Tutorial section styles.
   Reuses marketing-shared.css tokens for nav/footer/buttons (site green
   accent). The mockup device-frame below intentionally uses the REAL
   in-app color scheme (purple #7F56D9 on off-white), matching the actual
   POS/app UI rather than the marketing site's green — the mockups are
   meant to look exactly like the product screens. */

:root{
  --app-bg:      #F8F9FB;
  --app-surface: #FFFFFF;
  --app-surface2:#F2F4F7;
  --app-border:  #E4E7EC;
  --app-text:    #101828;
  --app-text2:   #475467;
  --app-text3:   #98A2B3;
  --app-accent:  #7F56D9;
  --app-accent-l:#F4EBFF;
  --app-success: #12B76A;
  --app-success-l:#ECFDF3;
  --app-warn:    #F79009;
  --app-warn-l:  #FFFAEB;
  --app-radius:  12px;
  --app-radius-sm:8px;
  --app-sidebar: #17131F;
}

/* ---- category grid (index page) ---- */
.tut-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
@media(max-width:860px){ .tut-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .tut-grid{ grid-template-columns:1fr; } }
.tut-card{
  display:flex; flex-direction:column; gap:10px; padding:22px;
  border-radius:var(--radius-lg); text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.tut-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.tut-card .tut-ic{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--accent-l); color:var(--accent-dark);
}
.tut-card h3{ font-size:16.5px; font-weight:700; margin:0; }
.tut-card p{ font-size:13px; color:var(--text2); margin:0; line-height:1.5; }
.tut-card .tut-arrow{ margin-top:auto; font-size:13px; font-weight:700; color:var(--accent-dark); }

/* ---- per-type page: step sections ----
   Batch 99 — the alternating layout used to be done with a `direction:
   rtl` flip-trick on .reverse, which breaks the moment the PAGE itself is
   already RTL (Arabic) since the two flips cancel out. Uses `order`
   instead (direction-agnostic — works identically under dir="ltr" and
   dir="rtl") now that each step's two halves are marked .tut-text/
   .tut-visual by the JS that builds them. */
.tut-step{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; padding:46px 0; border-bottom:1px solid var(--border); }
.tut-step:last-child{ border-bottom:none; }
.tut-step .tut-text{ order:1; }
.tut-step .tut-visual{ order:2; }
.tut-step.reverse .tut-text{ order:2; }
.tut-step.reverse .tut-visual{ order:1; }
@media(max-width:860px){
  .tut-step{ grid-template-columns:1fr; }
  .tut-step .tut-text, .tut-step.reverse .tut-text{ order:1; }
  .tut-step .tut-visual, .tut-step.reverse .tut-visual{ order:2; }
}
.tut-step-num{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--accent); color:#fff; font-size:12.5px; font-weight:800; margin-bottom:12px;
}
.tut-step h2{ font-size:21px; font-weight:800; margin:0 0 10px; letter-spacing:-.01em; }
.tut-step p{ font-size:14.5px; color:var(--text2); line-height:1.7; margin:0 0 10px; }
.tut-step ul{ margin:12px 0 0; padding-inline-start:20px; font-size:14px; color:var(--text2); line-height:1.8; }
.tut-step ul li b{ color:var(--text); }

/* ---- mockup device frame ---- */
.mock-wrap{ position:relative; }
.mock-frame{
  background:var(--app-bg); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg);
  border:1px solid rgba(0,0,0,.06); font-family:'Inter',sans-serif; color:var(--app-text);
  display:flex; min-height:340px; font-size:12px;
}
.mock-sidebar{
  width:140px; background:var(--app-sidebar); color:#B4AEC4; flex-shrink:0;
  padding:16px 12px; display:flex; flex-direction:column; gap:2px;
}
.mock-sidebar .mock-biz{ color:#fff; font-weight:700; font-size:12px; margin-bottom:2px; }
.mock-sidebar .mock-bizid{ color:#7A7390; font-size:9.5px; margin-bottom:14px; }
.mock-nav-item{ padding:7px 9px; border-radius:7px; font-size:11px; display:flex; align-items:center; gap:7px; }
.mock-nav-item.active{ background:rgba(127,86,217,.28); color:#fff; font-weight:600; }
.mock-main{ flex:1; padding:16px 18px; min-width:0; }
.mock-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:12px 0 14px; }
.mock-kpi{ background:var(--app-surface); border:1px solid var(--app-border); border-radius:9px; padding:9px 11px; }
.mock-kpi .mock-kpi-label{ font-size:9.5px; color:var(--app-text3); margin-bottom:3px; }
.mock-kpi .mock-kpi-val{ font-size:14px; font-weight:800; color:var(--app-text); }
.mock-actions{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.mock-action{
  background:var(--app-surface); border:1px solid var(--app-border); border-radius:9px;
  padding:10px 8px; text-align:center; font-size:10px; font-weight:600; color:var(--app-text2);
}
.mock-action .mock-action-ic{
  width:26px; height:26px; border-radius:8px; background:var(--app-accent-l); color:var(--app-accent);
  display:flex; align-items:center; justify-content:center; margin:0 auto 6px; font-size:13px;
}
.mock-h1{ font-size:15px; font-weight:800; margin-bottom:2px; }
.mock-sub{ font-size:10.5px; color:var(--app-text3); margin-bottom:2px; }
.mock-modal{
  position:absolute; inset:0; background:rgba(16,17,20,.35); display:flex; align-items:center; justify-content:center;
  border-radius:16px;
}
.mock-modal-card{ background:var(--app-surface); border-radius:14px; width:78%; max-width:280px; padding:16px; box-shadow:var(--shadow-lg); }
.mock-modal-card h4{ font-size:12.5px; font-weight:800; margin:0 0 12px; }
.mock-field{ margin-bottom:9px; }
.mock-field label{ display:block; font-size:9.5px; color:var(--app-text2); margin-bottom:3px; font-weight:600; }
.mock-field .mock-input{ background:var(--app-surface2); border:1px solid var(--app-border); border-radius:7px; padding:7px 9px; font-size:10.5px; color:var(--app-text3); }
.mock-btn{ display:inline-block; background:var(--app-accent); color:#fff; border-radius:7px; padding:7px 14px; font-size:10.5px; font-weight:700; text-align:center; }
.mock-btn-row{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.mock-cart{ background:var(--app-surface); border:1px solid var(--app-border); border-radius:10px; padding:12px; }
.mock-cart-item{ display:flex; justify-content:space-between; font-size:10.5px; padding:6px 0; border-bottom:1px solid var(--app-border); }
.mock-cart-total{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:800; padding-top:8px; }
.mock-pay-opts{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0; }
.mock-pay-opt{ border:1.5px solid var(--app-border); border-radius:8px; padding:7px; text-align:center; font-size:9.5px; font-weight:600; color:var(--app-text2); }
.mock-pay-opt.picked{ border-color:var(--app-accent); background:var(--app-accent-l); color:var(--app-accent); }
.mock-toast{ position:absolute; top:10px; left:50%; transform:translateX(-50%); background:var(--app-success-l); color:#067647; border:1px solid #ABEFC6; border-radius:8px; padding:6px 14px; font-size:10px; font-weight:700; }

/* ---- callout arrows/badges pointing at mockup elements ---- */
.callout{
  position:absolute; display:flex; align-items:center; gap:7px; z-index:5; pointer-events:none;
}
.callout-badge{
  width:22px; height:22px; border-radius:50%; background:#F04438; color:#fff; font-size:11.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(240,68,56,.4); flex-shrink:0;
}
.callout-label{
  background:#101828; color:#fff; font-size:10.5px; font-weight:600; padding:4px 9px; border-radius:6px;
  white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.callout-line{ position:absolute; border-top:2px dashed #F04438; opacity:.85; transform-origin:left center; }

/* ---- step legend list under mockup ---- */
.tut-legend{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.tut-legend-item{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--text2); }
.tut-legend-item .callout-badge{ position:static; width:19px; height:19px; font-size:10px; flex-shrink:0; margin-top:1px; }

/* ---- intro credentials / payment strip ---- */
.tut-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.tut-chip{ background:var(--surface2); border:1px solid var(--border); border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--text2); }

/* ---- breadcrumb ---- */
.tut-crumb{ font-size:13px; color:var(--text3); margin-bottom:10px; }
.tut-crumb a{ color:var(--text3); }
.tut-crumb a:hover{ color:var(--accent-dark); }

/* ---- type nav pills on index-of-a-guide pages (prev/next) ---- */
.tut-pillnav{ display:flex; justify-content:space-between; margin-top:40px; gap:12px; }
.tut-pillnav a{ flex:1; }
@media(max-width:560px){ .tut-pillnav{ flex-direction:column; } }

/* ---- deep-dive guide (Batch 101) ----
   Full-screen-real-estate walkthrough per business type, one section per
   real screen — see tutorial_deep_grocery.py's header comment for the
   content shape this renders. Reuses .tut-step/.tut-legend/.tut-chip-row
   from the basic 4-step guide for visual consistency; the pieces below
   are specific to the extra mocks a deep guide needs (inventory table,
   shift report, reports grid) that the basic guide never renders. */
/* Batch 107 — the quick 4-step walkthrough and the full deep-dive now
   share one page (see renderDeepGuideSections in tutorial-app.js); this
   divider marks where the full guide begins after the 4 quick steps. */
.tut-deep-divider{ padding-top:22px; margin-top:10px; border-top:2px solid var(--border); }
.tut-deep-nav{ display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 8px; }
.tut-deep-nav a{
  font-size:12px; font-weight:600; color:var(--text2); background:var(--surface2);
  border:1px solid var(--border); border-radius:999px; padding:6px 13px; text-decoration:none;
}
.tut-deep-nav a:hover{ color:var(--accent-dark); border-color:var(--accent); }
.tut-deep-solo{ padding:36px 0; border-bottom:1px solid var(--border); }
.tut-deep-solo:last-child{ border-bottom:none; }
.tut-deep-solo h2{ font-size:19px; font-weight:800; margin:0 0 10px; letter-spacing:-.01em; }
.tut-deep-solo p{ font-size:14px; color:var(--text2); line-height:1.75; margin:0 0 10px; }
.tut-deep-solo ul{ margin:10px 0 0; padding-inline-start:20px; font-size:13.5px; color:var(--text2); line-height:1.8; }

/* inventory table mock */
.mock-inv-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 0; border-bottom:1px solid var(--app-border); font-size:10.5px;
}
.mock-inv-row:last-child{ border-bottom:none; }
.mock-inv-name{ font-weight:600; color:var(--app-text); }
.mock-inv-stock{ color:var(--app-text3); font-size:9.5px; }
.mock-inv-badge{ font-size:9px; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.mock-inv-badge.ok{ background:var(--app-success-l); color:#067647; }
.mock-inv-badge.low{ background:var(--app-warn-l); color:#B54708; }
.mock-inv-badge.expiry{ background:#FEF3F2; color:#B42318; }

/* shift report mock */
.mock-shift-head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.mock-shift-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--app-accent-l); color:var(--app-accent);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0;
}
.mock-shift-name{ font-size:11.5px; font-weight:700; color:var(--app-text); }
.mock-shift-sub{ font-size:9.5px; color:var(--app-text3); }
.mock-shift-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mock-shift-stat{ background:var(--app-surface); border:1px solid var(--app-border); border-radius:9px; padding:9px 11px; }
.mock-shift-stat-label{ font-size:9px; color:var(--app-text3); margin-bottom:3px; }
.mock-shift-stat-val{ font-size:13px; font-weight:800; color:var(--app-text); }

/* reports mock */
.mock-report-bars{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.mock-report-bar-row{ display:flex; align-items:center; gap:8px; font-size:9.5px; }
.mock-report-bar-label{ width:64px; flex-shrink:0; color:var(--app-text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mock-report-bar-track{ flex:1; height:7px; background:var(--app-surface2); border-radius:999px; overflow:hidden; }
.mock-report-bar-fill{ height:100%; background:var(--app-accent); border-radius:999px; }
.mock-report-bar-val{ width:38px; flex-shrink:0; text-align:end; font-weight:700; color:var(--app-text); }

/* ---- restaurant/café deep-guide mocks (Batch 102) ---- */

/* menu — categories + items */
.mock-menu-cat{ font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--app-text3); margin:10px 0 4px; }
.mock-menu-cat:first-child{ margin-top:0; }
.mock-menu-item{ display:flex; justify-content:space-between; gap:8px; font-size:10.5px; padding:5px 0; border-bottom:1px solid var(--app-border); }
.mock-menu-item:last-child{ border-bottom:none; }
.mock-menu-item-name{ color:var(--app-text); }
.mock-menu-item-price{ color:var(--app-text3); font-weight:700; flex-shrink:0; }

/* modifiers — pickable chips under an item */
.mock-mod-group-label{ font-size:9px; font-weight:700; color:var(--app-text3); margin:10px 0 5px; }
.mock-mod-chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.mock-mod-chip{ border:1.5px solid var(--app-border); border-radius:999px; padding:5px 11px; font-size:9.5px; font-weight:600; color:var(--app-text2); }
.mock-mod-chip.picked{ border-color:var(--app-accent); background:var(--app-accent-l); color:var(--app-accent); }

/* table map */
.mock-table-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.mock-table{ aspect-ratio:1; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; }
.mock-table.free{ background:var(--app-success); }
.mock-table.occupied{ background:var(--app-accent); }
.mock-table.bill{ background:var(--app-warn); }
.mock-table-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; font-size:9.5px; color:var(--app-text2); }
.mock-table-legend-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end:5px; vertical-align:middle; }

/* kitchen ticket — deliberately plain/monospace, no prices, matches the
   real kitchen printout (items + table + time only) */
.mock-ticket{ background:#fff; border:1px dashed var(--app-border); border-radius:8px; padding:12px 14px; font-family:'Courier New',monospace; }
.mock-ticket-head{ font-size:11px; font-weight:800; color:var(--app-text); border-bottom:1px dashed var(--app-border); padding-bottom:6px; margin-bottom:6px; }
.mock-ticket-row{ display:flex; justify-content:space-between; font-size:10px; color:var(--app-text); padding:3px 0; }

/* order status pipeline */
.mock-order-pipeline{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.mock-order-stage{ font-size:9px; font-weight:700; padding:5px 10px; border-radius:999px; background:var(--app-surface2); color:var(--app-text3); }
.mock-order-stage.active{ background:var(--app-accent-l); color:var(--app-accent); }

/* running tab (café) — also reused as a generic label/value row by the
   Batch 103 mocks (bookings, bids, rental agreements) that don't need a
   dedicated class of their own. */
.mock-tab-row{ display:flex; justify-content:space-between; font-size:10.5px; padding:6px 0; border-bottom:1px solid var(--app-border); }
.mock-tab-row:last-child{ border-bottom:none; }

/* ---- pharmacy/freelancer/car-rental deep-guide mocks (Batch 103) ----
   Reuses .mock-inv-row/.mock-inv-badge (pharmacy prescriptions, car
   fleet listing type) and .mock-tab-row (freelancer quotes/bookings, car
   bids/rental agreement) rather than inventing a full parallel set of
   classes for what are structurally the same "row + status chip" and
   "label + value" layouts already built for grocery/café. Only genuinely
   new colour variants for the fleet listing-type badge. */
.mock-inv-badge.rent{ background:var(--app-accent-l); color:var(--app-accent); }
.mock-inv-badge.sale{ background:var(--app-warn-l); color:#B54708; }
.mock-inv-badge.both{ background:var(--app-success-l); color:#067647; }

/* ---- boutique/supermarket/salon/e-commerce/bakery deep-guide mocks
   (Batch 104) ---- Same reuse principle as Batch 103's comment above:
   only genuinely new pieces are the variant matrix (nothing existing
   fit a two-axis size×colour grid) and three more badge colour variants
   for order-shipping status. Everything else is .mock-inv-row/
   .mock-tab-row again. */
.mock-inv-badge.pending{ background:var(--app-warn-l); color:#B54708; }
.mock-inv-badge.shipped{ background:var(--app-accent-l); color:var(--app-accent); }
.mock-inv-badge.delivered{ background:var(--app-success-l); color:#067647; }

/* size × colour variant matrix (boutique) */
.mock-variant-table{ width:100%; border-collapse:collapse; font-size:9.5px; }
.mock-variant-table th{ font-weight:700; color:var(--app-text3); padding:4px 6px; text-align:center; }
.mock-variant-table th:first-child{ text-align:start; }
.mock-variant-table td{ padding:5px 6px; text-align:center; border-top:1px solid var(--app-border); color:var(--app-text); }
.mock-variant-table td:first-child{ text-align:start; font-weight:600; color:var(--app-text2); }
.mock-variant-table td.low{ color:#B54708; font-weight:800; }

/* ---- real POS screenshots (scripts/tutorial-shots.mjs) ---- */
.tut-shot{ margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.tut-phone{ width:100%; max-width:300px; padding:9px; border-radius:34px; background:#0b0f19; box-shadow:0 26px 50px -18px rgba(15,23,42,.45), inset 0 0 0 1px rgba(255,255,255,.08); position:relative; }
.tut-phone img{ display:block; width:100%; height:auto; border-radius:26px; background:#f3f4f6; }
.tut-shot figcaption{ font-size:13px; color:var(--text2); text-align:center; max-width:300px; line-height:1.5; }
.tut-visual-real{ display:flex; justify-content:center; }
.tut-gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px 22px; margin-top:22px; }
@media(max-width:820px){ .tut-gallery{ grid-template-columns:repeat(2, 1fr); gap:22px 14px; } .tut-phone{ border-radius:26px; padding:6px; } .tut-phone img{ border-radius:21px; } }
@media(max-width:420px){ .tut-gallery{ grid-template-columns:1fr; } }