/* Wah-Kit Run sheets: the planner's grid and timeline, and the helpers' page. Uses the panels and forms in meds.css. */
.rs-listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rs-listhead h2 { margin: 0; font: 800 21px var(--font-display); }
.rs-empty p { margin: 0; }

/* toolbars */
.rs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs-tools .btn { min-height: 38px; padding: 0 12px; font-size: 14px; }
.rs-tools .btn[disabled] { opacity: .4; cursor: default; }
.rs-tools select { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; font: 14px var(--font-body); background: #fff; color: var(--ink); max-width: 100%; }
.rs-tz { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--font-body); color: var(--ink-soft); min-width: 0; }
.rs-tz select { max-width: 250px; }
.rs-tlb.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rs-saved { margin-left: auto; font-size: 13px; color: #15803D; font-weight: 700; }
.rs-saved.busy { color: var(--muted); }
.rs-sum { margin: 0; font-size: 14px; color: var(--ink-soft); }
.rs-note { margin: 0; font-size: 13px; color: #92400E; background: #FEF3C7; border-radius: 10px; padding: 6px 10px; }
.rs-legend { font-size: 12.5px; color: var(--muted); margin: 0; }
.rs-crit-k { display: inline-block; width: 18px; height: 8px; border-radius: 4px; background: #fff; border: 2px solid #DC2626; vertical-align: middle; }

/* live strip */
.rs-live { border: 2px solid #FCA5A5; background: #FFF7F7; border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rs-live-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.rs-pill { border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: 13px; }
.rs-pill.ok { background: #DCFCE7; color: #15803D; } .rs-pill.late { background: #FEE2E2; color: #B91C1C; } .rs-pill.early { background: #DBEAFE; color: #1D4ED8; }
.rs-prog { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.rs-prog .trk { display: block; width: 100px; height: 8px; border-radius: 4px; background: #E5E7EB; overflow: hidden; }
.rs-prog .trk i { display: block; height: 100%; background: #16A34A; }
.rs-prog small { color: var(--ink-soft); }
.rs-live-i { display: flex; align-items: baseline; gap: 6px; text-align: left; border: 0; background: #fff; border-radius: 10px; padding: 6px 10px; font: 14px var(--font-body); color: var(--ink); cursor: pointer; flex-wrap: wrap; }
.rs-live-i small { color: var(--ink-soft); margin-left: auto; }
.rs-live-i.bad { background: #FEE2E2; } .rs-live-i.on { background: #DBEAFE; }

/* the grid: one scroll box; the table sticks on the left while the timeline scrolls */
.rs-grid { position: relative; overflow: auto; max-height: calc(100vh - 150px); min-height: 220px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: flex; align-items: flex-start; overscroll-behavior: contain; }
.rs-left { position: sticky; left: 0; z-index: 3; background: #fff; flex: none; }
.rs-grid.with-tl .rs-left { box-shadow: 4px 0 8px -6px rgba(0, 0, 0, .25); }
.rs-grid:not(.with-tl) .rs-left { flex: 1; }
.rs-t { border-collapse: separate; border-spacing: 0; font-size: 13.5px; width: 100%; }
.rs-t th { position: sticky; top: 0; z-index: 2; background: #F8F8FB; height: 44px; box-sizing: border-box; text-align: left; font-weight: 800; font-size: 12px; color: var(--ink-soft); padding: 0 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rs-t td { height: 36px; box-sizing: border-box; padding: 0 8px; border-bottom: 1px solid #EEEEF4; white-space: nowrap; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rs-t tr.rs-row:hover td, .rs-t tr.rs-ph:hover td { background: #FAFAFD; }
.rs-t tr.sel td { background: #EEF4FF !important; }
.rs-t tr.dragging td { opacity: .45; }
.c-n { width: 62px; min-width: 62px; } .c-t { width: 250px; min-width: 150px; } .c-o { width: 110px; } .c-a { width: 70px; } .c-s { width: 132px; } .c-d { width: 58px; } .c-e { width: 84px; } .c-s2 { width: 92px; color: var(--ink-soft); } .c-st { width: 104px; } .c-x { width: 34px; padding: 0 2px !important; }
.rs-t td.c-n { display: table-cell; color: var(--ink-soft); }
.rs-t td.c-n b { font-weight: 700; margin-left: 2px; }
.rs-grip { cursor: grab; touch-action: none; user-select: none; color: #A3A3B8; font-size: 12px; letter-spacing: -3px; padding: 8px 5px 8px 0; }
.rs-grip:active { cursor: grabbing; }
.rs-cell { display: block; cursor: text; overflow: hidden; text-overflow: ellipsis; min-height: 20px; line-height: 20px; border-radius: 6px; padding: 0 2px; }
.rs-cell:hover { background: #F1F1F7; box-shadow: inset 0 0 0 1px #DFDFE8; }
.c-t { position: relative; }
.c-t .rs-cell { padding-right: 24px; }
.rs-note-b { position: absolute; right: 4px; top: 7px; border: 0; background: none; cursor: pointer; font-size: 13px; padding: 2px; }
.rs-dia { font-style: normal; color: #7C3AED; margin-right: 4px; }
.rs-who { display: flex; align-items: center; gap: 5px; }
.rs-who i { font-style: normal; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--pc); color: #fff; display: grid; place-items: center; font: 800 10px var(--font-body); }
.rs-f { margin-left: 3px; font-size: 12px; cursor: help; }
.rs-late { color: #B91C1C; font-weight: 700; margin-left: 4px; } .rs-early { color: #1D4ED8; font-weight: 700; margin-left: 4px; }
.rs-stb { border: 0; background: none; cursor: pointer; font: 13px var(--font-body); color: var(--ink); padding: 3px 4px; border-radius: 8px; white-space: nowrap; }
.rs-stb:hover { background: #F1F1F7; }
.rs-stb small { color: var(--ink-soft); font-size: 12px; }
.rs-more { border: 0; background: none; cursor: pointer; font-size: 17px; width: 28px; height: 28px; border-radius: 8px; color: var(--ink-soft); }
.rs-more:hover { background: #F1F1F7; }
.rs-row.crit td.c-n b { color: #DC2626; }
.rs-row.st-done td:not(.c-st):not(.c-n):not(.c-x) { color: #6B7280; }
.rs-row.st-done .c-t .rs-cell { text-decoration: line-through; text-decoration-color: #9CA3AF; }
.rs-row.st-doing td.c-n { box-shadow: inset 4px 0 0 #2563EB; }
.rs-row.st-problem td { background: #FFF1F2; }
.rs-row.st-problem td.c-n { box-shadow: inset 4px 0 0 #DC2626; }
.rs-row.chk td { background: #FAF7FF; }
.rs-ph td { background: color-mix(in srgb, var(--pc) 9%, #fff); border-bottom: 1px solid color-mix(in srgb, var(--pc) 25%, #fff); }
.rs-ph td.c-n { box-shadow: inset 4px 0 0 var(--pc); }
.rs-ph .c-ph { max-width: none; }
.rs-ph .c-ph > * { vertical-align: middle; }
.rs-ph .c-ph b.rs-cell { display: inline-block; max-width: 45%; font-weight: 800; color: var(--pc); font-size: 14px; }
.rs-ph .c-ph small { color: var(--ink-soft); margin-left: 8px; }
.rs-fold { border: 0; background: none; cursor: pointer; font-size: 14px; width: 24px; color: var(--pc); }
.rs-none { text-align: center; color: var(--muted); height: 80px !important; }
td.editing { padding: 2px 3px !important; overflow: visible !important; }
.rs-in { width: 100%; min-width: 140px; height: 30px; box-sizing: border-box; border: 2px solid var(--blue); border-radius: 6px; padding: 0 6px; font: 14px var(--font-body); background: #fff; color: var(--ink); }
td.c-s.editing .rs-in, td.c-e.editing .rs-in { min-width: 190px; }
.rs-dropline { position: absolute; height: 3px; background: var(--blue); z-index: 50; pointer-events: none; border-radius: 2px; }

/* timeline */
.rs-tl { position: relative; flex: none; }
.rs-tlh { position: sticky; top: 0; z-index: 2; height: 44px; background: #F8F8FB; border-bottom: 1px solid var(--line); }
.rs-day { position: absolute; top: 4px; font: 800 12px var(--font-body); color: var(--ink); padding-left: 4px; white-space: nowrap; border-left: 2px solid var(--ink-soft); }
.rs-hr { position: absolute; top: 25px; font-size: 11px; color: var(--muted); padding-left: 3px; border-left: 1px solid #D4D4DE; height: 18px; line-height: 18px; }
.rs-tlb { position: relative; }
.rs-tlbg { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.rs-night { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #F1F1F8 0 6px, #F7F7FB 6px 12px); }
.rs-mid { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #C7C7D6; }
.rs-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #DC2626; z-index: 1; }
.rs-now::before { content: 'now'; position: absolute; top: -2px; left: 3px; font: 800 10px var(--font-body); color: #DC2626; }
.rs-phb { position: absolute; left: 0; right: 0; height: 36px; background: color-mix(in srgb, var(--pc) 6%, transparent); pointer-events: none; }
.rs-phbar { position: absolute; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--pc) 45%, #fff); pointer-events: none; }
.rs-ghost { position: absolute; height: 18px; border-radius: 6px; border: 1.5px dashed #A3A3B8; box-sizing: border-box; pointer-events: none; }
.rs-bar { position: absolute; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--pc) 22%, #fff); border: 1.5px solid var(--pc); box-sizing: border-box; cursor: grab; touch-action: none; user-select: none; z-index: 1; }
.rs-bar:active { cursor: grabbing; }
.rs-bar.crit { border: 2px solid #DC2626; }
.rs-bar.st-done { background: #DCFCE7; border-color: #16A34A; }
.rs-bar.st-doing { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pc) 35%, #fff) 0 6px, color-mix(in srgb, var(--pc) 18%, #fff) 6px 12px); }
.rs-bar.st-problem { background: #FEE2E2; border-color: #DC2626; }
.rs-bar.st-skip { opacity: .5; }
.rs-bar.sel, .rs-bar.drop { box-shadow: 0 0 0 3px rgba(31, 95, 209, .35); }
.rs-bar.chk { background: none; border: 0; width: 22px; }
.rs-bar.chk .rs-dia { position: absolute; left: 0; top: -3px; font-size: 22px; line-height: 1; color: #7C3AED; }
.rs-bar.chk.st-done .rs-dia { color: #16A34A; } .rs-bar.chk.st-problem .rs-dia { color: #DC2626; } .rs-bar.chk.crit .rs-dia { text-shadow: 0 0 0 #DC2626, 0 0 2px #DC2626; }
.rs-bl { position: absolute; left: calc(100% + 6px); top: 2px; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; pointer-events: none; }
.rs-h-r { position: absolute; right: -4px; top: 0; bottom: 0; width: 9px; cursor: ew-resize; }
.rs-h-l { position: absolute; right: -6px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--pc); cursor: crosshair; opacity: 0; transition: opacity .1s; box-sizing: border-box; }
.rs-bar:hover .rs-h-l, .rs-bar.sel .rs-h-l { opacity: 1; }
.rs-bar.chk .rs-h-l { right: -8px; }
.rs-links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.rs-links path.l { fill: none; stroke: #94A3B8; stroke-width: 1.4; }
.rs-links path.l.c { stroke: #DC2626; stroke-width: 1.8; }
.rs-links .rs-tmp { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 5 4; }
.rs-drag-tip { position: fixed; z-index: 200; background: var(--ink); color: #fff; border-radius: 10px; padding: 7px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; max-width: 260px; pointer-events: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.rs-drag-tip .warn { color: #FCD34D; }

/* menus, panels */
.rs-menu { position: absolute; z-index: 150; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); padding: 5px; display: flex; flex-direction: column; min-width: 200px; }
.rs-menu button { border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 8px; font: 14.5px var(--font-body); color: var(--ink); cursor: pointer; }
.rs-menu button:hover { background: #F1F1F7; }
.rs-menu button.on { font-weight: 800; background: #EEF4FF; }
.rs-next { display: flex; flex-direction: column; gap: 8px; }
.rs-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rs-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); }
.rs-tpl span { font-size: 22px; } .rs-tpl b { font-size: 14px; } .rs-tpl small { font-size: 12px; color: var(--muted); }
.rs-tpl.on { border-color: var(--blue); background: #EEF4FF; }
.md-sheet-in textarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 15px var(--font-body); color: var(--ink); width: 100%; box-sizing: border-box; resize: vertical; }
.rs-imp { display: flex; flex-direction: column; gap: 10px; }
.rs-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.rs-map label { display: flex; flex-direction: column; gap: 3px; font: 700 12px var(--font-body); color: var(--ink-soft); }
.rs-map select { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; font: 14px var(--font-body); background: #fff; }
.rs-chk { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.rs-chk input { width: 20px; height: 20px; }
.rs-prev { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.rs-prev table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.rs-prev th, .rs-prev td { padding: 5px 8px; border-bottom: 1px solid #EEEEF4; text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.rs-prev th { background: #F8F8FB; }
.rs-prev tr.ph td { font-weight: 800; background: #F4F4FA; }

/* people */
.rs-people { display: flex; flex-direction: column; gap: 10px; }
.rs-pcard { border: 1px solid var(--line); border-left: 5px solid var(--pc); border-radius: 14px; background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rs-ph1 { display: flex; align-items: center; gap: 10px; }
.rs-ph1 > i { font-style: normal; width: 38px; height: 38px; border-radius: 50%; background: var(--pc); color: #fff; display: grid; place-items: center; font: 800 16px var(--font-body); flex: none; }
.rs-ph1 > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rs-ph1 small { color: var(--ink-soft); }
.rs-pmeta { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* report and log */
.rs-report { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rs-kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.rs-kpi b { font: 800 18px var(--font-display); } .rs-kpi small { color: var(--ink-soft); font-size: 12.5px; }
.rs-kpi.late b { color: #B91C1C; } .rs-kpi.ok b { color: #15803D; }
.rs-h3 { margin: 6px 0 0; font: 800 16px var(--font-display); }
.rs-log { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; max-height: 60vh; overflow: auto; }
.rs-li { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #EEEEF4; font-size: 14px; align-items: baseline; }
.rs-li time { color: var(--ink-soft); font-size: 13px; } .rs-li small { color: var(--muted); }

/* phones: the grid keeps the essentials */
@media (max-width: 720px) {
  .rs-t .c-a, .rs-t .c-e, .rs-t .c-s2, .rs-t .c-d { display: none; }
  .c-t { width: auto; min-width: 130px; } .c-o { width: 34px; } .c-s { width: 92px; } .c-st { width: 40px; }
  .rs-t td.c-o .rs-who { font-size: 0; } .rs-who i { font-size: 10px; }
  .rs-stb small { display: none; }
  .rs-grid.with-tl .rs-left { max-width: 70vw; }
  .rs-report { grid-template-columns: 1fr 1fr; }
  .rs-li { grid-template-columns: 1fr; gap: 0; }
  .rs-tz select { max-width: 190px; }
  .rs-c2 { display: none; }
  .rs-saved { margin-left: 0; }
  .rs-tools { gap: 4px; }
  .rs-tools .btn { min-height: 34px; padding: 0 9px; font-size: 13px; }
  .rs-tools select { min-height: 34px; font-size: 13px; }
  .rs-sum { font-size: 13px; }
}
@media print {
  .site-header, .site-footer, .page-intro, .ts-bar .btn, .ts-tabs, .rs-tools, .rs-live, .rs-legend, .rs-tl, .c-x, .rs-grip { display: none !important; }
  .rs-grid { max-height: none; overflow: visible; border: 0; display: block; }
  .rs-left { position: static; box-shadow: none !important; }
  .rs-t th { position: static; }
  .rs-t td { max-width: none; white-space: normal; height: auto; padding: 4px 6px; }
}

/* ---------- the helper's page (/rs/<code>) ---------- */
body.rs-helper { background: var(--ground); }
#rs { max-width: 640px; margin: 0 auto; padding: 14px 14px 30px; display: flex; flex-direction: column; gap: 12px; }
.rs-load { text-align: center; color: var(--muted); padding: 40px 0; }
.rs-foot { text-align: center; font-size: 13px; color: var(--muted); padding: 0 14px 24px; }
.rs-hh { display: flex; flex-direction: column; gap: 4px; }
.rs-hh .t { font: 700 14px var(--font-body); color: var(--ink-soft); margin: 0; }
.rs-hh h1 { margin: 0; font: 800 24px var(--font-display); }
.rs-hh .rs-tz select { max-width: 100%; }
.rs-seg { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.rs-seg button { flex: 1; min-height: 42px; border: 0; border-radius: 10px; background: none; font: 700 14px var(--font-body); color: var(--ink-soft); cursor: pointer; }
.rs-seg button.on { background: var(--ink); color: #fff; }
.rs-card { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--pc, #64748B); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rs-card.st-done { opacity: .75; border-left-color: #16A34A; }
.rs-card.st-doing { border-left-color: #2563EB; box-shadow: 0 0 0 2px #BFDBFE; }
.rs-card.st-problem { border-left-color: #DC2626; background: #FFF7F7; }
.rs-card.now { box-shadow: 0 0 0 2px #FDE68A; }
.rs-card .top { display: flex; gap: 10px; align-items: flex-start; }
.rs-card .top b.n { font: 800 13px var(--font-body); color: var(--ink-soft); background: var(--ground); border-radius: 8px; padding: 3px 7px; }
.rs-card .top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-card .top strong { font-size: 17px; }
.rs-card .top small { color: var(--ink-soft); font-size: 14px; }
.rs-card .wait { font-size: 13.5px; color: #92400E; background: #FEF3C7; border-radius: 8px; padding: 5px 8px; margin: 0; }
.rs-card .notes { font-size: 14px; color: var(--ink-soft); white-space: pre-wrap; margin: 0; }
.rs-card .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-card .acts .btn { flex: 1; min-height: 46px; font-size: 15px; }
.rs-cd { font: 800 13px var(--font-body); color: #1D4ED8; }
.rs-cd.late { color: #B91C1C; }
.rs-mini { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rs-mini .ph { padding: 7px 12px; font: 800 13px var(--font-body); background: color-mix(in srgb, var(--pc) 10%, #fff); color: var(--pc); }
.rs-mini .r { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 8px 12px; border-top: 1px solid #EEEEF4; font-size: 14px; align-items: baseline; }
.rs-mini .r small { color: var(--ink-soft); white-space: nowrap; }
.rs-mini .r.me { background: #F5F9FF; }
.rs-mini .r.st-done span { text-decoration: line-through; color: #6B7280; }
.md.rs-page { max-width: none; }
main.wrap:has(> #runsheets) { max-width: min(1760px, 100%); }
main.wrap:has(> #runsheets) .page-intro p { max-width: 820px; }
.rs-dk { color: var(--ink-soft); font-size: 11.5px; font-weight: 700; }