/* redhat-v21 manual :: MODEL pages (step0..step6, case) :: B3 v21m1
   Component system: .step-badge .tf-rail .trade-ticket .confluence .callout--law/tip/warn/term
   Design blueprint: dark luxury #0a1512 + accent #00ab6b
   Cormorant Garamond (display) / IBM Plex Sans Thai (body) / JetBrains Mono (numbers)
   fallback Sarabun/Consolas. Scoped under .rh-model so existing appendix chapters are untouched. */
/* fonts loaded via <link> on every page (E1) */
.rh-model{
  --m-bg:#0a1512; --m-card:#0f1a16; --m-card-2:#13231b;
  --m-fg:#eaf3ee; --m-fg-dim:#9fb3a8; --m-fg-mut:#6f8579;
  --m-green:#00ab6b; --m-green-2:#0bd482; --m-green-deep:#123326; --m-line:rgba(0,171,107,0.28);
  --m-red:#c0392b; --m-red-bg:rgba(192,57,43,0.10);
  --m-gold:#D4A853; --m-yellow:#E8C547; --m-yellow-bg:rgba(232,197,71,0.10);
  --m-blue:#3FA7D6; --m-blue-bg:rgba(63,167,214,0.10);
  --m-font-display:"IBM Plex Sans Thai","Sarabun","Noto Sans Thai",system-ui,sans-serif;
  --m-font-body:"IBM Plex Sans Thai","Sarabun","Noto Sans Thai",system-ui,sans-serif;
  --m-font-mono:"JetBrains Mono","Consolas",monospace;
  --m-font-numeral:"Cormorant Garamond",serif;
  /* E1 ebook token layer (blueprint) */
  --ink:#0a1512; --ink-2:#0f1f18; --brand:#00ab6b; --gold:#c8a24a;
  --text:#e8f0ec; --text-dim:#9ab0a6; --entry:#2196F3; --stop:#F44336; --tp:#4CAF50;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px; --space-6:96px;
  --fs-display-1:3.4rem; --fs-display-2:2.6rem; --fs-display-3:2.0rem;
  --fs-h2:1.55rem; --fs-h3:1.25rem; --fs-body:1.0625rem; --fs-caption:0.875rem; --fs-mono:0.9375rem;
  font-family:var(--m-font-body);
}
.rh-model .prose{max-width:66ch;line-height:1.85}

.rh-model h1,.rh-model h2,.rh-model h3{font-family:var(--m-font-display);letter-spacing:-0.01em}
.rh-model .num,.rh-model .mono{font-family:var(--m-font-mono);font-variant-numeric:tabular-nums}
.rh-model-main{max-width:920px;margin:0 auto;padding:8px 0 64px}
.rh-model .back-index{display:inline-block;margin-bottom:24px;color:var(--m-green);font-weight:600}
/* STEP BADGE : circle number + step name (header eyebrow) */
.step-badge{display:inline-flex;align-items:center;gap:14px;padding:10px 18px 10px 12px;background:linear-gradient(135deg,rgba(0,171,107,0.14),rgba(10,21,18,0.55));border:1px solid var(--m-line);border-radius:999px}
.step-badge .step-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--m-green),var(--m-green-deep));color:#04130d;font-family:var(--m-font-mono);font-weight:700;font-size:18px;flex:none}
.step-badge .step-name{font-family:var(--m-font-display);font-size:20px;font-weight:600;color:var(--m-fg);letter-spacing:.2px}
.step-badge .step-name small{display:block;color:var(--m-fg-dim);font-family:var(--m-font-body);font-size:13px;font-weight:500;letter-spacing:0;margin-top:2px}
/* TF RAIL : D1 > H4 > H1 > M15 highlight current TF */
.tf-rail{display:flex;align-items:center;gap:0;margin:22px 0;padding:14px 18px;background:var(--m-card);border:1px solid var(--m-line);border-radius:14px;flex-wrap:wrap}
.tf-rail .tf-label{font-family:var(--m-font-mono);font-size:12px;color:var(--m-fg-mut);letter-spacing:1.5px;margin-right:14px;text-transform:uppercase}
.tf-rail .tf-step{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-family:var(--m-font-mono);font-size:14px;color:var(--m-fg-mut);border-right:1px solid var(--m-line)}
.tf-rail .tf-step:last-child{border-right:0}
.tf-rail .tf-step .tf-tf{font-weight:700;letter-spacing:.5px}
.tf-rail .tf-step.is-now{color:var(--m-green)}
.tf-rail .tf-step.is-now .tf-tf{color:var(--m-green-2)}
.tf-rail .tf-sep{color:var(--m-fg-mut);font-family:var(--m-font-mono);padding:0 6px}
/* TRADE TICKET : order-ticket card Entry/SL/TP1-3/R:R */
.trade-ticket{margin:26px 0;padding:24px 24px 22px;background:var(--m-card);border:1px solid var(--m-line);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,0.28)}
.trade-ticket .ticket-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px dashed var(--m-line)}
.trade-ticket .ticket-title{font-family:var(--m-font-display);font-size:22px;font-weight:600;color:var(--m-fg)}
.trade-ticket .ticket-pair{font-family:var(--m-font-mono);font-size:13px;color:var(--m-fg-mut);letter-spacing:1px}
.ticket-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid rgba(0,171,107,0.10)}
.ticket-row:last-child{border-bottom:0}
.ticket-row .t-mark{width:14px;height:14px;border-radius:4px;border-left:4px solid var(--m-green);background:var(--m-card-2)}
.ticket-row.t-entry .t-mark{border-color:#2196F3}
.ticket-row.t-sl .t-mark{border-color:#F44336}
.ticket-row.t-tp1 .t-mark{border-color:#4CAF50}
.ticket-row.t-tp2 .t-mark{border-color:#4CAF50;opacity:.7}
.ticket-row.t-tp3 .t-mark{border-color:#4CAF50;opacity:.45}
.ticket-row.t-rr .t-mark{border-color:var(--m-gold)}
.ticket-row .t-label{font-family:var(--m-font-body);font-size:15.5px;color:var(--m-fg);font-weight:600}
.ticket-row .t-label small{display:block;font-weight:500;color:var(--m-fg-dim);font-size:13px;margin-top:2px}
.ticket-row .t-val{font-family:var(--m-font-mono);font-size:16px;font-weight:700;color:var(--m-fg);text-align:right;white-space:nowrap}
.ticket-row.t-rr .t-val{color:var(--m-gold)}
/* CONFLUENCE : checklist green check / gray circle */
.confluence{margin:24px 0;padding:22px 24px;background:linear-gradient(135deg,rgba(0,171,107,0.08),rgba(10,21,18,0.5));border:1px solid var(--m-line);border-left:4px solid var(--m-green);border-radius:14px}
.confluence .conf-head{font-family:var(--m-font-display);font-size:19px;font-weight:600;color:var(--m-fg);margin-bottom:14px}
.confluence .conf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.confluence .conf-item{display:flex;align-items:center;gap:12px;font-family:var(--m-font-body);font-size:15.5px;color:var(--m-fg)}
.confluence .conf-item .conf-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;flex:none;font-size:14px;font-weight:700}
.confluence .conf-item.is-yes .conf-mark{background:var(--m-green);color:#04130d}
.confluence .conf-item.is-no .conf-mark{background:transparent;border:1.5px solid var(--m-fg-mut);color:var(--m-fg-mut)}
.confluence .conf-item.is-no{color:var(--m-fg-mut)}
/* CALLOUTS : 4 kinds */
.callout{margin:24px 0;padding:18px 22px;border-radius:14px;border:1px solid var(--m-line);border-left:4px solid var(--m-green);background:linear-gradient(135deg,rgba(0,171,107,0.07),rgba(10,21,18,0.5))}
.callout .callout-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.callout .callout-icon{font-size:18px;line-height:1;flex:none}
.callout .callout-label{font-family:var(--m-font-display);font-size:17px;font-weight:600;letter-spacing:.3px}
.callout .callout-body{font-family:var(--m-font-body);font-size:15.5px;color:var(--m-fg);line-height:1.65}
.callout--tip{border-left-color:var(--m-green);background:linear-gradient(135deg,rgba(0,171,107,0.10),rgba(10,21,18,0.5))}
.callout--tip .callout-icon{color:var(--m-green-2)}
.callout--tip .callout-label{color:var(--m-green-2)}
.callout--law{border-left-color:var(--m-red);background:linear-gradient(135deg,rgba(192,57,43,0.12),rgba(10,21,18,0.55))}
.callout--law .callout-icon{color:#e57368}
.callout--law .callout-label{color:#e57368}
.callout--warn{border-left-color:var(--m-yellow);background:linear-gradient(135deg,rgba(232,197,71,0.12),rgba(10,21,18,0.55))}
.callout--warn .callout-icon{color:var(--m-yellow)}
.callout--warn .callout-label{color:var(--m-yellow)}
.callout--term{border-left-color:var(--m-blue);background:linear-gradient(135deg,rgba(63,167,214,0.12),rgba(10,21,18,0.55))}
.callout--term .callout-icon{color:var(--m-blue)}
.callout--term .callout-label{color:var(--m-blue)}
.callout--term .callout-term-en{font-family:var(--m-font-mono);font-size:13px;color:var(--m-fg-dim);display:block;margin-top:2px}
/* model figure (inline annotated chart) */
.model-fig{margin:22px 0;border-radius:14px;overflow:hidden;border:1px solid var(--m-line);background:var(--m-card)}
.model-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.model-fig figcaption{color:var(--m-fg-mut);font-size:13.5px;padding:10px 14px;text-align:center}
.model-fig.is-stack{display:flex;flex-direction:column;gap:14px}
.model-note{margin:18px 0;padding:14px 18px;background:var(--m-card-2);border:1px dashed var(--m-line);border-radius:12px;font-size:14.5px;color:var(--m-fg-dim)}
.model-note strong{color:var(--m-green-2)}
.model-next{display:flex;align-items:center;gap:10px;margin:30px 0 0;padding:16px 20px;border:1px solid var(--m-line);border-radius:12px;color:var(--m-fg-dim);font-size:15px}
.model-next strong{color:var(--m-green-2);font-weight:700}
.model-next .model-next-arrow{margin-left:auto;color:var(--m-green);font-size:20px;font-weight:700;text-decoration:none}
/* TLDR lead + section headings */
.rh-model .tldr{font-family:var(--m-font-display);font-size:21px;line-height:1.5;color:var(--m-fg);margin:18px 0 26px;padding-left:14px;border-left:3px solid var(--m-green)}
.rh-model h2{font-size:30px;font-weight:600;color:var(--m-fg);margin:34px 0 14px}
.rh-model h3.block-h{font-family:var(--m-font-body);font-size:15px;font-weight:700;letter-spacing:.4px;color:var(--m-green-2);text-transform:uppercase;margin:22px 0 10px}
.rh-model p{font-size:16px;line-height:1.75;color:var(--m-fg);margin:14px 0}
/* ordered list (ทำอะไร) */
.rh-ol{margin:14px 0 18px;padding-left:0;list-style:none;counter-reset:rhli;display:flex;flex-direction:column;gap:12px}
.rh-ol>li{position:relative;padding:12px 14px 12px 52px;background:var(--m-card);border:1px solid var(--m-line);border-radius:12px;counter-increment:rhli}
.rh-ol>li::before{content:counter(rhli);position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--m-green),var(--m-green-deep));color:#04130d;font-family:var(--m-font-mono);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.rh-ol .li-main{display:block;color:var(--m-fg);font-size:16px;font-weight:600;line-height:1.6}
.rh-ol .li-sub{display:block;color:var(--m-fg-dim);font-size:14.5px;font-weight:500;line-height:1.6;margin-top:4px}
/* fib list + steps list (level + text rows) */
.fib-list,.rh-steps{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.fib-list li,.rh-steps li{display:flex;align-items:baseline;gap:14px;padding:10px 14px;background:var(--m-card);border:1px solid var(--m-line);border-radius:10px}
.fib-list .num,.rh-steps .num{font-family:var(--m-font-mono);font-weight:700;color:var(--m-green-2);min-width:96px;flex:none;font-size:15px}
.rh-steps .num{color:var(--m-fg)}
.fib-list li>span,.rh-steps li>span{color:var(--m-fg);font-size:15.5px;line-height:1.6}
/* stacked figures inner */
.model-fig.is-stack>figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--m-line);background:var(--m-card)}
.model-fig.is-stack>figure>img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.model-fig.is-stack>figure>figcaption{color:var(--m-fg-mut);font-size:13.5px;padding:10px 14px;text-align:center}
/* confluence summary + rule note */
.confluence .conf-summary{margin-top:14px;padding-top:12px;border-top:1px dashed var(--m-line);font-size:14.5px;color:var(--m-fg-dim)}
.model-note.rule{border-left:3px solid var(--m-gold);background:rgba(212,168,83,0.08)}
.model-note.rule strong{color:var(--m-gold)}
@media (max-width:640px){
  .rh-model-main{padding:8px 0 40px}
  .tf-rail{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .tf-rail .tf-step{border-right:0;border-bottom:1px solid var(--m-line);width:100%}
  .ticket-row{grid-template-columns:18px 1fr;gap:10px}
  .ticket-row .t-val{grid-column:2;text-align:left;white-space:normal;font-size:14px;padding-left:0}
  .trade-ticket .ticket-head{flex-wrap:wrap}
  .fib-list .num,.rh-steps .num{min-width:64px}
}