/* 1st, 2nd and 3rd line support page: figure shapes, the four tools, the stacked tables and the related work tag */

/* ---------- figure text and shapes ---------- */
.su-tk path{fill:#F0FDFA;stroke:var(--teal-strong);stroke-width:1.5}
.su-tk text{font-size:12px;font-weight:600;fill:var(--teal-strong);text-anchor:middle}
.su-tk.orange path{fill:#FFF7ED;stroke:var(--orange)}
.su-tk.orange text{fill:var(--orange-strong)}
.su-day{fill:#fff;stroke:var(--line-strong);stroke-width:1}
.su-day.we{fill:#EEF2F6}
.su-biz{fill:#E0F7FA;stroke:none}
.su-run{fill:var(--orange)}
.su-pause{fill:#DDD6FE;stroke:var(--purple-strong);stroke-width:1.2;stroke-dasharray:3 3}
.su-plan{fill:#fff;stroke:var(--orange);stroke-width:1.5;stroke-dasharray:4 3}
.su-done{fill:var(--teal)}
.motion-svg .su-ax{font-family:var(--font-mono);font-size:11px;fill:var(--subtle)}
.motion-svg .su-rowt{font-size:14px;font-weight:600;fill:var(--ink);text-anchor:start}
.motion-svg .su-val{font-family:var(--font-mono);font-size:13px;font-weight:600;fill:var(--ink);text-anchor:start}
.su-track{fill:#EEF2F6}
.f-t{fill:var(--teal)}
.f-o{fill:var(--orange)}
.f-p{fill:var(--purple)}
.f-b{fill:var(--blue)}
.su-qbox{fill:#F8FAFC;stroke:var(--line-strong);stroke-width:1.5}
.su-slot{fill:#fff;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 3}

/* ---------- text helpers ---------- */
.su-small{font-size:.9rem;color:var(--muted);margin:12px 0 0;max-width:82ch}
.tag-rel{display:inline-block;margin-left:8px;padding:1px 8px;border:1px solid var(--orange-border);border-radius:999px;font:600 .68rem/1.6 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--orange-strong);vertical-align:middle}

/* the escalation note */
.su-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 18px;margin:14px 0 0;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius)}
.su-note dt{font-weight:700;color:var(--ink);font-size:.92rem}
.su-note dd{margin:2px 0 0;font-size:.9rem;color:var(--text)}
.su-note > dt:nth-of-type(n){grid-column:auto}

/* ---------- tools ---------- */
.su-tool{margin-top:28px;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.su-tool h3{font-size:var(--fs-h4);margin:0 0 6px}
.su-tool > .su-small{margin-top:0}
.su-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;margin-top:16px;align-items:start}
.su-tool-grid > *{min-width:0}
.su-in{display:grid;gap:12px;align-content:start}
.su-field{display:grid;gap:6px;min-width:0;font-size:.88rem;font-weight:600;color:var(--ink)}
.su-field select{width:100%;min-width:0;text-overflow:ellipsis}
.su-field select,.su-field input{font:inherit;font-weight:500;font-size:.92rem;padding:8px 10px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink);max-width:100%}
.su-field input[type=number],.su-field input[type=time]{width:9rem}
.su-in .sim-row{grid-template-columns:150px 1fr 56px}
.su-tool input[type=range]{width:100%;accent-color:var(--orange)}
.su-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:.92rem}
.su-dl dt{color:var(--muted)}
.su-dl dd{margin:0;font-weight:600;color:var(--ink)}
.su-out .su-dl dd{font-family:var(--font-mono);font-size:.88rem}
.su-verdict{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid #99F6E4;background:#F0FDFA}
.su-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.su-route-out{margin-top:14px}
.su-route-card{padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;background:#fff}
.su-route-card h4{margin:0 0 10px;font-size:1rem}
.su-route-card .su-dl dd{font-weight:500;color:var(--text)}
.su-js .su-field{max-width:34rem}
.su-nojs{display:none}
.no-js .su-nojs{display:block;margin-top:14px}
.no-js .su-js,.no-js .su-route-out{display:none}

/* ---------- tabs ---------- */
.su-tabs{margin-top:26px}
.su-panel .table-wrap{margin-top:12px}
.su-panel code{overflow-wrap:anywhere}

/* ---------- tables ---------- */
.su-stack td code{overflow-wrap:anywhere}

@media (max-width:860px){
  .su-tool-grid{grid-template-columns:minmax(0,1fr)}
  .su-note{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .su-tool{padding:16px 14px}
  .su-in .sim-row{grid-template-columns:110px 1fr 48px}
  .su-dl{grid-template-columns:1fr;gap:2px}
  .su-dl dd{margin-bottom:8px}
  .table-wrap > table.su-stack{min-width:0}
  .su-stack,.su-stack tbody,.su-stack tr,.su-stack td{display:block;width:100%}
  .su-stack thead{display:none}
  .su-stack tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .su-stack td{border:0;padding:3px 0}
  .su-stack td::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
  .su-stack td:first-child{font-weight:600;color:var(--ink)}
  .su-stack td:first-child::before{display:none}
}