/* ============================================================
   Sherpii Clinic Platform — Product Book Stylesheet
   Design language: shadcn/ui · Slate + Teal
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: 'Zain';
  src: url('./fonts/Zain-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Zain';
  src: url('./fonts/Zain-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Zain';
  src: url('./fonts/Zain-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

/* ---- Variables ---- */
:root {
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;

  --amber-100: #fef3c7;
  --amber-500: #f59e0b;
  --amber-700: #b45309;
  --rose-100:  #ffe4e6;
  --rose-500:  #f43f5e;
  --rose-700:  #be123c;
  --emerald-100: #dcfce7;
  --emerald-500: #10b981;
  --emerald-700: #15803d;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-700: #1d4ed8;
  --violet-100: #ede9fe;
  --violet-500: #8b5cf6;
  --violet-700: #6d28d9;

  --bg:        #F5F4EF;
  --surface:   #ffffff;
  --border:    #e2e8f0;
  --text:      #0f172a;
  --text-2:    #374151;
  --text-3:    #64748b;
  --sherpii-dark: #1C1008;

  --r-xs: 4px;
  --r-sm: 6px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Zain', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ======================================================
   PRODUCT BOOK LAYOUT
   ====================================================== */

.layout {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar / Book Nav ---- */
.book-sidebar {
  width: 256px;
  min-width: 256px;
  background: var(--sherpii-dark);
  min-height: 100vh;
  position: fixed;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 50;
}

.book-brand {
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.book-brand-icon { display: none; }

.book-brand-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  line-height: 1.2;
}

.book-brand-label {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-weight: 400;
  margin-top: 2px;
}

.book-nav {
  padding: 16px 12px;
  flex: 1;
}

.book-nav-section {
  margin-bottom: 20px;
}

.book-nav-heading {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-600);
  padding: 0 8px;
  margin-bottom: 6px;
}

.book-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-xs);
  color: var(--slate-400);
  font-size: 13px;
  font-weight: 450;
  margin-bottom: 1px;
  transition: all 0.12s;
}

.book-nav a:hover  { background: rgba(255,255,255,0.06); color: white; }
.book-nav a.active { background: rgba(255,255,255,0.1);  color: white; font-weight: 550; }

.book-nav .n-icon { font-size: 13px; width: 16px; text-align: center; opacity: 0.7; }
.book-nav a.active .n-icon { opacity: 1; }
.book-nav .n-num  { margin-left: auto; font-size: 10px; color: var(--slate-600); }

/* ---- Main / Content ---- */
.book-main {
  margin-left: 256px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Page header */
.ph {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 36px 52px 28px;
}

.ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--teal-700);
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: 20px;
  padding: 4px 11px;
  margin-bottom: 14px;
}

.ph h1 {
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--slate-900);
  margin-bottom: 10px;
  line-height: 1.2;
}

.ph-sub {
  font-size: 16px;
  color: var(--text-2);
  max-width: 620px;
  line-height: 1.55;
}

/* Content area */
.content {
  padding: 44px 52px;
  flex: 1;
}

/* ---- Sections ---- */
.sec {
  margin-bottom: 52px;
}

.sec-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--slate-800);
  margin-bottom: 6px;
}

.sec-sub {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 22px;
  line-height: 1.55;
}

/* ---- Cards ---- */
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}

.card-sm  { padding: 16px 20px; }
.card-xs  { padding: 12px 16px; }

.card-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--slate-800);
  margin-bottom: 6px;
}

.card-body {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.65;
}

/* ---- Grids ---- */
.g2 { display: grid; grid-template-columns: 1fr 1fr;     gap: 20px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.g4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 550;
}
.badge-teal    { background: var(--teal-50);     color: var(--teal-700);    border: 1px solid var(--teal-100); }
.badge-slate   { background: var(--slate-100);   color: var(--slate-600);   border: 1px solid var(--slate-200); }
.badge-amber   { background: var(--amber-100);   color: var(--amber-700);   border: 1px solid #fde68a; }
.badge-rose    { background: var(--rose-100);    color: var(--rose-700);    border: 1px solid #fecdd3; }
.badge-emerald { background: var(--emerald-100); color: var(--emerald-700); border: 1px solid #bbf7d0; }
.badge-blue    { background: var(--blue-100);    color: var(--blue-700);    border: 1px solid #bfdbfe; }
.badge-violet  { background: var(--violet-100);  color: var(--violet-700);  border: 1px solid #ddd6fe; }

/* ---- Feature list ---- */
.flist { list-style: none; }
.flist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--slate-100);
  font-size: 14px; color: var(--text-2);
}
.flist li:last-child { border-bottom: none; }
.fcheck {
  width: 18px; height: 18px;
  background: var(--teal-50); border: 1.5px solid var(--teal-500);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px; color: var(--teal-600); font-size: 9px;
}

/* ---- Persona cards ---- */
.persona {
  background: white; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px 24px; text-align: center;
}
.persona-icon {
  width: 68px; height: 68px; border-radius: 50%;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.persona-name { font-size: 15px; font-weight: 700; color: var(--slate-800); margin-bottom: 3px; }
.persona-role { font-size: 12px; color: var(--text-3); margin-bottom: 14px; }
.persona-desc { font-size: 13px; color: var(--text-2); text-align: left; line-height: 1.65; }

/* ---- Use cases ---- */
.usecase {
  background: var(--slate-50); border: 1px solid var(--border);
  border-left: 3px solid var(--teal-500);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 18px 22px; margin-bottom: 14px;
}
.usecase-title  { font-size: 14px; font-weight: 650; color: var(--slate-800); margin-bottom: 3px; }
.usecase-actor  { font-size: 11.5px; color: var(--teal-600); font-weight: 550; margin-bottom: 10px; }
.usecase-steps  { list-style: none; counter-reset: step; }
.usecase-steps li {
  counter-increment: step;
  display: flex; gap: 9px;
  font-size: 13px; color: var(--text-2);
  padding: 4px 0;
}
.usecase-steps li::before {
  content: counter(step);
  width: 18px; height: 18px;
  background: var(--teal-600); color: white;
  border-radius: 50%; font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}

/* ---- User flow ---- */
.flow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 18px 0; }
.flow-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.flow-box {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 9px 16px;
  font-size: 12.5px; font-weight: 550; color: var(--slate-700);
  text-align: center; min-width: 90px; white-space: nowrap;
}
.flow-box-dark  { background: var(--slate-900); border-color: var(--slate-900); color: white; }
.flow-box-teal  { background: var(--teal-600);  border-color: var(--teal-600);  color: white; }
.flow-box-amber { background: #fffbeb; border-color: var(--amber-500); color: var(--amber-700); }
.flow-box-rose  { background: #fff1f2; border-color: var(--rose-500); color: var(--rose-700); }

.flow-label { font-size: 10px; color: var(--text-3); text-align: center; }
.flow-arr   { color: var(--slate-300); font-size: 18px; margin: 0 2px; line-height: 1; }

/* ---- Module cards ---- */
.module-card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.module-icon {
  width: 40px; height: 40px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.module-name  { font-size: 14px; font-weight: 650; color: var(--slate-800); }
.module-desc  { font-size: 13px; color: var(--text-2); line-height: 1.6; flex: 1; }
.module-phase { margin-top: 6px; }

/* ---- Timeline ---- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px;
  width: 1px; background: var(--border);
}
.tl-item { position: relative; padding-bottom: 22px; }
.tl-dot {
  position: absolute; left: -20px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal-500); border: 2px solid white;
  box-shadow: 0 0 0 1.5px var(--teal-200);
}
.tl-date  { font-size: 11px; color: var(--text-3); margin-bottom: 3px; }
.tl-title { font-size: 13.5px; font-weight: 600; color: var(--slate-800); margin-bottom: 3px; }
.tl-body  { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }

/* ======================================================
   APP MOCKUP FRAME
   ====================================================== */

.mockup-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
  background: var(--slate-100);
  margin: 24px 0;
}

.mockup-chrome {
  background: #e8ecf0;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
}

.mockup-dots { display: flex; gap: 5px; }
.mdot { width: 11px; height: 11px; border-radius: 50%; }
.mdot-r { background: #ff5f57; }
.mdot-y { background: #febc2e; }
.mdot-g { background: #28c840; }

.mockup-url {
  flex: 1; max-width: 320px;
  background: white; border: 1px solid #d1d5db;
  border-radius: 5px; padding: 4px 10px;
  font-size: 11px; color: #6b7280; font-family: monospace;
}

/* ---- App shell inside mockup ---- */
.app { display: flex; height: 580px; background: white; }

/* App sidebar */
.a-side {
  width: 196px; min-width: 196px;
  background: var(--slate-900); color: white;
  display: flex; flex-direction: column; overflow: hidden;
}

.a-brand {
  padding: 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 10px;
}

.a-brand-icon { display: none; }

.a-brand-name { font-size: 13px; font-weight: 600; }
.a-brand-clinic { font-size: 10px; color: var(--slate-500); margin-top: 1px; }

.a-nav { padding: 10px 8px; flex: 1; overflow: hidden; }

.a-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 5px;
  font-size: 12px; color: var(--slate-400);
  margin-bottom: 1px; cursor: pointer;
}
.a-nav-item.on  { background: rgba(255,255,255,0.1); color: white; }
.a-nav-item .ai { font-size: 13px; width: 15px; text-align: center; }

.a-side-foot {
  padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 8px;
}
.a-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal-700); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
}
.a-foot-name { font-size: 11.5px; color: var(--slate-300); }

/* App main area */
.a-main {
  flex: 1; display: flex; flex-direction: column;
  background: var(--slate-50); overflow: hidden;
}

.a-topbar {
  background: white; border-bottom: 1px solid var(--border);
  padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}

.a-topbar-title { font-size: 13.5px; font-weight: 650; color: var(--slate-800); }

.a-topbar-right { display: flex; align-items: center; gap: 8px; }

.a-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 6px;
  font-size: 11.5px; font-weight: 550; cursor: pointer; border: none;
}
.a-btn-primary   { background: var(--slate-900); color: white; }
.a-btn-secondary { background: white; color: var(--slate-700); border: 1px solid var(--border); }
.a-btn-teal      { background: var(--teal-600); color: white; }
.a-btn-ghost     { background: transparent; color: var(--slate-500); }

.a-icon-btn {
  width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid var(--border); background: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--slate-500); cursor: pointer;
}

.a-body { flex: 1; padding: 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }

/* App card */
.a-card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px;
}

.a-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}

.a-card-title { font-size: 12px; font-weight: 650; color: var(--slate-700); }

/* Stats */
.a-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }

.a-stat {
  background: white; border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 14px;
}
.a-stat-val   { font-size: 22px; font-weight: 750; color: var(--slate-900); line-height: 1.1; }
.a-stat-lbl   { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.a-stat-trend { font-size: 10.5px; color: var(--emerald-500); margin-top: 4px; }
.a-stat-warn  { font-size: 10.5px; color: var(--amber-500); margin-top: 4px; }

/* Two-col grid inside app */
.a-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* Row items */
.a-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; border-bottom: 1px solid var(--slate-100);
  font-size: 11.5px;
}
.a-row:last-child { border-bottom: none; }

.a-av {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; flex-shrink: 0;
}
.av-teal   { background: var(--teal-100);   color: var(--teal-700); }
.av-violet { background: var(--violet-100); color: var(--violet-700); }
.av-blue   { background: var(--blue-100);   color: var(--blue-700); }
.av-amber  { background: var(--amber-100);  color: var(--amber-700); }
.av-rose   { background: var(--rose-100);   color: var(--rose-700); }

.a-row-name { font-weight: 550; color: var(--slate-700); flex: 1; }
.a-row-meta { color: var(--text-3); font-size: 10.5px; }

.a-tag {
  display: inline-flex; padding: 2px 7px;
  background: var(--slate-100); color: var(--slate-600);
  border-radius: 4px; font-size: 10px; font-weight: 500;
}
.a-tag-teal   { background: var(--teal-50);   color: var(--teal-700); }
.a-tag-amber  { background: var(--amber-100); color: var(--amber-700); }
.a-tag-rose   { background: var(--rose-100);  color: var(--rose-700); }
.a-tag-violet { background: var(--violet-100); color: var(--violet-700); }
.a-tag-blue   { background: var(--blue-100);  color: var(--blue-700); }

.a-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-teal    { background: var(--teal-500); }
.dot-amber   { background: var(--amber-500); }
.dot-rose    { background: var(--rose-500); }
.dot-emerald { background: var(--emerald-500); }

/* Toggle */
.a-toggle {
  width: 30px; height: 16px; background: var(--teal-500);
  border-radius: 8px; position: relative; cursor: pointer; flex-shrink: 0;
}
.a-toggle::after {
  content: ''; position: absolute;
  width: 12px; height: 12px; background: white;
  border-radius: 50%; top: 2px; right: 2px;
}
.a-toggle.off { background: var(--slate-300); }
.a-toggle.off::after { right: auto; left: 2px; }

/* Input / form */
.a-input {
  width: 100%; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 5px;
  font-size: 11.5px; color: var(--slate-700);
  background: white; outline: none;
}
.a-input:focus { border-color: var(--teal-500); }
.a-label { font-size: 10.5px; font-weight: 550; color: var(--slate-600); margin-bottom: 3px; }
.a-fg { margin-bottom: 10px; }
.a-textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 5px;
  font-size: 11.5px; color: var(--slate-700);
  background: white; resize: none; outline: none; min-height: 80px;
}

/* Progress */
.a-progress {
  height: 4px; background: var(--slate-100);
  border-radius: 2px; overflow: hidden; margin-top: 6px;
}
.a-progress-fill { height: 100%; background: var(--teal-500); border-radius: 2px; }
.a-progress-fill-amber { background: var(--amber-500); }

/* Signal bars */
.sig-chart { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.sig-bar {
  flex: 1; background: var(--teal-100);
  border-radius: 2px 2px 0 0; min-height: 4px;
}
.sig-bar.hi { background: var(--emerald-500); }
.sig-bar.md { background: var(--amber-500); opacity: 0.8; }
.sig-bar.lo { background: var(--rose-400); opacity: 0.8; }

/* Calendar */
.a-cal {
  display: grid;
  grid-template-columns: 42px repeat(5,1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; font-size: 10.5px;
}
.cal-hd { background: var(--slate-50); padding: 5px 4px; text-align: center; font-weight: 600; color: var(--slate-600); }
.cal-time { background: var(--slate-50); padding: 5px 6px; text-align: right; color: var(--text-3); font-size: 9.5px; }
.cal-cell { background: white; min-height: 44px; padding: 3px; }

.cal-evt {
  background: var(--teal-100); color: var(--teal-800);
  border-left: 2px solid var(--teal-500);
  border-radius: 2px; padding: 2px 5px;
  font-size: 9.5px; font-weight: 550; margin-bottom: 2px;
}
.cal-evt-v { background: var(--violet-100); color: var(--violet-700); border-left-color: var(--violet-500); }
.cal-evt-b { background: var(--blue-100);   color: var(--blue-700);   border-left-color: var(--blue-500); }
.cal-evt-a { background: var(--amber-100);  color: var(--amber-700);  border-left-color: var(--amber-500); }

/* Alert item */
.a-alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--rose-100); margin-bottom: 6px;
}
.a-alert-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.a-alert-title { font-size: 11.5px; font-weight: 600; color: var(--rose-700); }
.a-alert-sub   { font-size: 10.5px; color: var(--slate-500); margin-top: 2px; }

.a-notif {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--amber-100); margin-bottom: 6px;
}
.a-notif-icon  { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.a-notif-title { font-size: 11.5px; font-weight: 600; color: var(--amber-700); }
.a-notif-sub   { font-size: 10.5px; color: var(--slate-500); margin-top: 2px; }

/* Escalation step */
.esc-step {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--slate-50);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 4px; font-size: 11.5px;
}
.esc-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal-600); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; flex-shrink: 0;
}
.esc-channel { font-weight: 550; color: var(--slate-700); flex: 1; }
.esc-delay   { font-size: 10.5px; color: var(--text-3); }

/* Recording button */
.rec-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--rose-500); border: 3px solid #fca5a5;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer;
}

/* Split pane */
.split { display: flex; gap: 12px; flex: 1; overflow: hidden; }
.split-left  { width: 44%; display: flex; flex-direction: column; }
.split-right { flex: 1; display: flex; flex-direction: column; }

/* Divider */
.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ---- Utility ---- */
.mt4 { margin-top: 4px; }  .mt8 { margin-top: 8px; }
.mt12{ margin-top: 12px; } .mt16{ margin-top: 16px; }
.mt24{ margin-top: 24px; } .mb4 { margin-bottom: 4px; }
.mb8 { margin-bottom: 8px; } .mb12{ margin-bottom: 12px; }
.mb16{ margin-bottom: 16px; }

.flex   { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap4  { gap: 4px; }  .gap8  { gap: 8px; }
.gap12 { gap: 12px; } .gap16 { gap: 16px; }

.text-sm   { font-size: 12.5px; }
.text-xs   { font-size: 11px; }
.text-2    { color: var(--text-2); }
.text-3    { color: var(--text-3); }
.fw-600    { font-weight: 600; }
.fw-700    { font-weight: 700; }

.w-full { width: 100%; }
.rounded { border-radius: var(--r); }

/* ======================================================
   LANGUAGE SWITCH  (sidebar footer)
   ====================================================== */

.lang-switch {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-btn {
  font-size: 12px;
  font-weight: 650;
  padding: 4px 9px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.12s;
  letter-spacing: 0.02em;
}

.lang-btn-active  { background: rgba(255,255,255,0.15); color: white; }
.lang-btn-inactive { color: var(--slate-500); }
.lang-btn-inactive:hover { color: var(--slate-300); background: rgba(255,255,255,0.07); }
.lang-sep { color: var(--slate-700); font-size: 11px; }

/* index-page lang toggle (hero corner) */
.hero-lang {
  position: absolute;
  top: 20px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero { position: relative; }
.hlang-btn {
  font-size: 12px;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.12s;
}
.hlang-active   { background: rgba(255,255,255,0.15); color: white; }
.hlang-inactive { color: rgba(255,255,255,0.45); }
.hlang-inactive:hover { color: white; background: rgba(255,255,255,0.1); }
.hlang-sep { color: rgba(255,255,255,0.25); font-size: 11px; }

/* ======================================================
   RTL / HEBREW SUPPORT
   ====================================================== */

[dir="rtl"] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arial Hebrew',
               'David', sans-serif;
}

/* Layout flip */
[dir="rtl"] .book-sidebar { left: auto; right: 0; }
[dir="rtl"] .book-main    { margin-left: 0; margin-right: 256px; }

/* Sidebar nav */
[dir="rtl"] .book-brand    { text-align: right; }
[dir="rtl"] .book-nav a    { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .book-nav .n-num { margin-left: 0; margin-right: auto; }

/* Page content */
[dir="rtl"] .ph     { text-align: right; }
[dir="rtl"] .ph-sub { direction: rtl; }
[dir="rtl"] .content { text-align: right; }
[dir="rtl"] .sec-title, [dir="rtl"] .sec-sub  { text-align: right; }
[dir="rtl"] .card-title, [dir="rtl"] .card-body { text-align: right; }

/* Feature list */
[dir="rtl"] .flist li { flex-direction: row-reverse; text-align: right; }

/* Use cases */
[dir="rtl"] .usecase {
  border-left: none;
  border-right: 3px solid var(--teal-500);
  border-radius: var(--r) 0 0 var(--r);
}
[dir="rtl"] .usecase-steps li { flex-direction: row-reverse; text-align: right; }

/* Timeline */
[dir="rtl"] .timeline         { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .timeline::before { left: auto; right: 8px; }
[dir="rtl"] .tl-dot           { left: auto; right: -20px; }

/* Flow diagrams */
[dir="rtl"] .flow { flex-direction: row-reverse; }
[dir="rtl"] .flow-arr { transform: scaleX(-1); display: inline-block; }

/* App mockup shell */
[dir="rtl"] .app            { flex-direction: row-reverse; }
[dir="rtl"] .a-brand        { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .a-nav-item     { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .a-side-foot    { flex-direction: row-reverse; }
[dir="rtl"] .a-topbar       { flex-direction: row-reverse; }
[dir="rtl"] .a-topbar-right { flex-direction: row-reverse; }
[dir="rtl"] .a-card-hd      { flex-direction: row-reverse; }
[dir="rtl"] .a-row          { text-align: right; }
[dir="rtl"] .a-row-name     { text-align: right; }
[dir="rtl"] .esc-step       { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .split          { flex-direction: row-reverse; }
[dir="rtl"] .a-stats        { direction: rtl; }
[dir="rtl"] .a-grid2        { direction: rtl; }
[dir="rtl"] .a-fg           { text-align: right; }
[dir="rtl"] .a-label        { text-align: right; display: block; }
[dir="rtl"] .a-input, [dir="rtl"] .a-textarea { text-align: right; direction: rtl; }

/* Persona cards */
[dir="rtl"] .persona-desc { text-align: right; }
[dir="rtl"] .persona-role { direction: rtl; }

/* Module cards */
[dir="rtl"] .module-name, [dir="rtl"] .module-desc { text-align: right; }