/* FRAZIER × Sentaris Workspace — Operating System module styles
 * Prefix: fsw-   Uses the existing design tokens (--xcs-*) so light/dark
 * themes and density modes keep working. Severity over decoration:
 * overdue is dominant, blocked is muted, done collapses.
 * B5: palet dan sistem skin lama dicabut — token dasar sekarang hidup di
 * nova.css. Warna tetap disediakan untuk tingkat keparahan
 * (red = overdue/critical, green = on pace/approved, amber = waiting/QC).
 */
:root {
  --fsw-red: #D42B2B; --fsw-red-soft: rgba(212,43,43,.08);
  --fsw-amber: #C98A1B; --fsw-green: #2F9E5F; --fsw-blue: #1A1A1A; --fsw-violet: #6E6E6E;
  --fsw-radius: var(--xcs-radius, 12px);
  --fsw-line: var(--xcs-line-1, #E3E3E3);
  --fsw-card: var(--xcs-bg-2, #FFFFFF);
  --fsw-tint: var(--xcs-bg-tint, #F7F7F7);
  --fsw-ink: var(--xcs-ink-1, #0A0A0A);
  --fsw-ink-2: var(--xcs-ink-2, #3A3A3A);
  --fsw-ink-3: var(--xcs-ink-3, #6E6E6E);
  /* Sengaja dipetakan ke ink-3, BUKAN ink-4. --xcs-ink-4 adalah token
     "disabled" (#9A9A9A terang / #6E6E6E gelap) tetapi dipakai sebagai teks
     label hidup di 17 tempat — di bawah 4,5:1 di kedua tema. Tingkatan
     keempat ini tidak pernah benar-benar dibutuhkan. */
  --fsw-ink-4: var(--xcs-ink-3, #6E6E6E);

  /* ── Aksen Sentaris ────────────────────────────────────────────────
     #36DEFC diambil langsung dari wordmark SENTARIS (hue 189°). Ia sangat
     terang, jadi HANYA dipakai sebagai isian solid (dengan teks hitam,
     12,3:1) atau di atas permukaan gelap. Untuk teks/garis di atas latar
     terang dipakai turunan yang lebih gelap pada rona yang sama:
       --fsw-accent-ink  #197B8C  ≥4,6:1 di atas putih DAN tint → teks & link
       --fsw-accent-line #1F9CB2  ≥3,0:1 di atas putih DAN tint → border & garis UI
     Keduanya diuji terhadap #FFFFFF (kartu) sekaligus #F7F7F7 (tint), karena
     link dan bar progres muncul di atas kedua permukaan itu.
     Merah/amber/hijau tetap milik status, bukan aksen brand. */
  --fsw-accent:      #36DEFC;
  --fsw-accent-ink:  #197B8C;
  --fsw-accent-line: #1F9CB2;
  --fsw-accent-soft: rgba(54, 222, 252, .14);
  /* Tinta di ATAS isian aksen. Dulu ditulis #0A0A0A/#08222A langsung di
     belasan aturan, jadi skin yang memakai aksen gelap (kontras) membuat
     teksnya hilang. Sekarang satu token. */
  --fsw-on-accent: #08222A;   /* tinta di atas isian aksen; nilai persis seperti sebelum B4 */
  /* B4 lanjutan: titik setel per-skin yang dipakai layar (ops-today/ops-posted/
     ops-clients). Nilai bawaannya = fallback yang sudah dipakai, jadi skin Asli
     tidak bergeser; skin lain menimpanya di bloknya masing-masing. */
  --fsw-ell-klien: 22ch;
  --fsw-ell-judul: 38ch;
  --fsw-cell-gap: 8px;
  --fsw-cell-ws: nowrap;
  --fsw-sel-w: 190px;
  /* Nada teks sidebar — sebelumnya hanya hidup sebagai fallback var(). */
  --xcs-side-ink-2: #BFB6B6;
  --xcs-side-ink-3: #8F8F8F;
  /* Aksen versi sidebar: sidebar SELALU gelap, jadi skin beraksen gelap
     tetap butuh nada terang di sana. */
  --fsw-accent-side: var(--fsw-accent);

  /* ── Token bentuk / ruang / huruf ────────────────────────────────
     Nilai di sini hanyalah cadangan: nova.css dimuat belakangan dan
     menimpa semuanya. Dibiarkan supaya berkas ini tetap berdiri sendiri. */
  --fsw-radius-sm:    8px;
  --fsw-radius-md:    10px;
  --fsw-radius-input: 10px;
  --fsw-radius-chip:  999px;
  --fsw-bw:           1px;     /* garis kartu & tabel */
  --fsw-bw-strong:    1.5px;   /* garis isian & kontrol */
  --fsw-chip-bw:      1px;
  --fsw-shadow:       var(--xcs-shadow-sm);

  --fsw-card-pad:   18px 20px;
  --fsw-card-gap:   12px;
  --fsw-grid-gap:   14px;
  --fsw-kpi-pad:    12px 13px;
  --fsw-cell-pad:   10px 10px; /* th */
  --fsw-row-pad:    9px 10px;  /* td */
  --fsw-chip-pad:   2px 8px;

  /* 42px, BUKAN 26px: styles.css:13115 mengunci `.xcs-pagehead h1` ke
     42px !important, jadi selama ini judul halaman memang 42px dan nilai
     26px di sini tidak pernah dipakai. Token dipakai lagi (dengan
     !important, lihat blok "judul halaman ikut skin" di bawah); supaya
     skin Asli tidak bergeser satu piksel pun, bawaannya = 42px. */
  --fsw-fs-h1:      42px;
  --fsw-fs-cardh:   15px;
  --fsw-fs-sech:    14px;
  --fsw-fs-kpi:     26px;
  --fsw-fs-tbl:     13px;
  --fsw-fs-chip:    11.5px;
  --fsw-fs-micro:    10.5px;
  --fsw-fs-micro-lg: 11px;
  --fsw-stat-pad:    14px 16px;
  --fsw-fs-kpi-hp:   22px;   /* angka KPI di HP */

  --fsw-micro-tt:   uppercase;
  --fsw-micro-ls:   .08em;
  --fsw-micro-fw:   700;
  --fsw-micro-fw-b: 800;
  --fsw-th-ls:      .06em;
  --fsw-sech-ls:    .02em;
  --fsw-statl-ls:   normal;
  --fsw-statl-tt:   none;

  --fsw-th-bg:      var(--fsw-tint);
  --fsw-th-ink:     var(--fsw-ink-3);
  /* Garis baris tabel dipisah dari garis kartu: skin bergaris tebal
     (blok, kontras) butuh bingkai berat TANPA membuat tiap baris tabel
     ikut hitam setebal 2px — itu yang bikin tabel terlihat murahan. */
  --fsw-th-bw:      1px;
  --fsw-th-line:    var(--fsw-line);
  --fsw-bw-row:     1px;
  --fsw-line-row:   var(--fsw-line);
  --fsw-fs-h1-hp:   22px;   /* judul halaman di HP */

  --fsw-ic-sw:      1.6;
  --fsw-ic-cap:     round;
  --fsw-ic-join:    round;
  --fsw-ic-scale:   1;
}
/* Dark theme: near-white "blue", lighter grey violet, brighter semantic hues for contrast */
[data-theme="dark"] {
  --fsw-blue: #E6E6E6; --fsw-violet: #A0A0A0;
  --fsw-red: #F06060; --fsw-red-soft: rgba(240,96,96,.12);
  --fsw-amber: #E0A33A; --fsw-green: #4CC27B;
  --fsw-accent-ink:  #36DEFC;   /* di atas kartu gelap #141414 = 11,4:1 */
  --fsw-accent-line: #36DEFC;
  --fsw-accent-soft: rgba(54, 222, 252, .18);
}

/* --xcs-navy TIDAK pernah didefinisikan ulang untuk mode gelap (ia juga latar
   sidebar, jadi tidak boleh diubah global). Akibatnya elemen "primary" di
   bawah ini mengecat #0A0A0A di atas kartu #141414 — tab aktif dan tombol
   Ambil/Mulai/Submit praktis tak terlihat. Di mode gelap dibalik jadi terang. */
/* Hanya elemen yang MASIH memakai var(--xcs-navy) yang butuh pembalikan ini.
   .fsw-tab.on dan .fsw-kbtn.is-primary sudah pindah ke --fsw-accent (cyan +
   teks hitam, 12,3:1 di kedua tema), jadi kalau ikut di sini aturan ini malah
   menimpa aksennya dan mode gelap kehilangan warna. */
[data-theme="dark"] .fsw-group-b.on,
[data-theme="dark"] .fsw-brief-n,
[data-theme="dark"] .fsw-msg.is-q {
  background: #F2F2F2; border-color: #F2F2F2; color: #0A0A0A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fsw-blue: #E6E6E6; --fsw-violet: #A0A0A0;
    --fsw-red: #F06060; --fsw-red-soft: rgba(240,96,96,.12);
    --fsw-amber: #E0A33A; --fsw-green: #4CC27B;
  }
}

/* ── Layout ─────────────────────────────────────────────────────── */
.fsw-page { display: flex; flex-direction: column; gap: 20px; }
.fsw-page .xcs-pagehead h1 { font-size: var(--fsw-fs-h1); }
.fsw-head-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--fsw-ink-3); font-size: 13px; }
.fsw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fsw-grid-gap); }
.fsw-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fsw-grid-gap); }
.fsw-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fsw-grid-gap); }
.fsw-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fsw-cols > * { min-width: 0; }
/* Alasan sama seperti .fsw-row2 di atas. */
@media (max-width: 1200px) {
  .fsw-cols { grid-template-columns: minmax(0, 1fr); }
}
.fsw-card { background: var(--fsw-card); border: var(--fsw-bw) solid var(--fsw-line); border-radius: var(--fsw-radius); padding: var(--fsw-card-pad); display: flex; flex-direction: column; gap: var(--fsw-card-gap); box-shadow: var(--fsw-shadow); }
.fsw-card.is-soft { background: var(--fsw-tint); box-shadow: none; }
.fsw-card.is-danger { border-color: rgba(212,43,43,.45); background: var(--fsw-red-soft); }
.fsw-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fsw-card-h h3 { margin: 0; font-size: var(--fsw-fs-cardh); font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.fsw-card-h p { margin: 2px 0 0; color: var(--fsw-ink-3); font-size: 12.5px; }
.fsw-card-h .fsw-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); padding: 1px 8px; border-radius: 999px; color: var(--fsw-ink-3); }
.fsw-card-h.is-overdue h3 { color: var(--fsw-red); }
.fsw-sec { display: flex; flex-direction: column; gap: 8px; }
.fsw-sec h4 { margin: 0; font-size: var(--fsw-fs-micro-lg); letter-spacing: var(--fsw-micro-ls); text-transform: var(--fsw-micro-tt); color: var(--fsw-ink-4); font-weight: var(--fsw-micro-fw-b); }
.fsw-action-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.xcs-btn-primary.is-ok { background: var(--fsw-green); color: #FFFFFF; }
.xcs-btn-primary.is-danger { background: var(--fsw-red); color: #FFFFFF; }
.xcs-btn-ghost.is-danger { color: var(--fsw-red); border-color: rgba(212,43,43,.35); }
.xcs-btn-sm { padding: 6px 10px !important; font-size: 12.5px !important; border-radius: 8px !important; }
.fsw-more { align-self: flex-start; padding: 6px 0; }
.fsw-list-empty { color: var(--fsw-ink-4); font-size: 13px; padding: 10px 2px; }
.fsw-muted { color: var(--fsw-ink-3); font-size: 12.5px; }
.fsw-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.fsw-pre { white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
.fsw-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }

/* ── Chips / badges ─────────────────────────────────────────────── */
.fsw-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fsw-chip { display: inline-flex; align-items: center; gap: 4px; padding: var(--fsw-chip-pad); border-radius: var(--fsw-radius-chip); border: var(--fsw-chip-bw) solid; font-size: var(--fsw-fs-chip); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.fsw-chip-ico { font-size: 10px; display: inline-flex; align-items: center; line-height: 0; }
.fsw-chip.is-overdue { animation: fswPulse 1.6s ease-in-out infinite; }
@keyframes fswPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,43,43,.35);} 50% { box-shadow: 0 0 0 4px rgba(212,43,43,0);} }
.fsw-health { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--fsw-line); background: var(--fsw-tint); }
.fsw-health-dot { width: 9px; height: 9px; border-radius: 50%; background: #9A9A9A; }
.fsw-health.is-green .fsw-health-dot { background: var(--fsw-green); } .fsw-health.is-green { color: #2F9E5F; }
.fsw-health.is-yellow .fsw-health-dot { background: var(--fsw-amber); } .fsw-health.is-yellow { color: #C98A1B; }
.fsw-health.is-red .fsw-health-dot { background: var(--fsw-red); box-shadow: 0 0 0 3px rgba(212,43,43,.2); } .fsw-health.is-red { color: #D42B2B; }
.fsw-health.is-big { font-size: 14px; padding: 6px 14px; }
[data-theme="dark"] .fsw-health.is-green { color: #4CC27B; } [data-theme="dark"] .fsw-health.is-yellow { color: #E0A33A; } [data-theme="dark"] .fsw-health.is-red { color: #F06060; }
.fsw-avatar { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800; flex: none; letter-spacing: .02em; }
.fsw-avatar.is-empty, .fsw-avatar.is-sys { background: var(--fsw-tint); color: var(--fsw-ink-4); border: 1px dashed var(--fsw-line); font-size: 12px; }
.fsw-person { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.fsw-person.is-none { color: var(--fsw-ink-4); font-style: italic; }
.fsw-person.is-muted { color: var(--fsw-ink-3); }
.fsw-person-role { font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.fsw-person-prefix { color: var(--fsw-ink-4); font-size: 12px; }
.fsw-ref { appearance: none; background: transparent; border: 0; padding: 0 2px; color: var(--fsw-accent-ink); font-weight: 600; cursor: pointer; font-size: inherit; font-family: inherit; text-decoration: none; }
.fsw-ref:hover { text-decoration: underline; }
.fsw-auto { font-size: 11px; color: var(--fsw-ink-4); }
.fsw-tabs { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center;
  min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.fsw-tabs::-webkit-scrollbar { display: none; }
.fsw-tabs > .fsw-tab { flex: 0 0 auto; }
.fsw-tab { appearance: none; background: transparent; border: 0; padding: 7px 12px; border-radius: var(--fsw-radius-chip); font-weight: 600; font-size: 13px; cursor: pointer; color: var(--fsw-ink-3); display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.fsw-tab.on { background: var(--fsw-accent); color: var(--fsw-on-accent); }
.fsw-tab:hover:not(.on) { background: var(--xcs-bg-3, #EAEAEA); color: var(--fsw-ink); }
.fsw-tab-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: rgba(0,0,0,.14); padding: 1px 6px; border-radius: 999px; }
.fsw-tab:not(.on) .fsw-tab-n { background: var(--fsw-tint); color: var(--fsw-ink-3); border: 1px solid var(--fsw-line); }

/* ── Stat tiles ─────────────────────────────────────────────────── */
.fsw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fsw-stat { background: var(--fsw-card); border: var(--fsw-bw) solid var(--fsw-line); border-radius: var(--fsw-radius); padding: var(--fsw-stat-pad); display: flex; flex-direction: column; gap: 4px; cursor: default; }
.fsw-stat.is-click { cursor: pointer; } .fsw-stat.is-click:hover { border-color: var(--xcs-line-2, #CACACA); }
.fsw-stat-l { font-size: var(--fsw-fs-chip); color: var(--fsw-ink-3); font-weight: 600; letter-spacing: var(--fsw-statl-ls); text-transform: var(--fsw-statl-tt); }
.fsw-stat-v { font-size: var(--fsw-fs-kpi); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.fsw-stat-s { font-size: 12px; color: var(--fsw-ink-3); }
.fsw-stat.is-red .fsw-stat-v { color: var(--fsw-red); } .fsw-stat.is-amber .fsw-stat-v { color: var(--fsw-amber); } .fsw-stat.is-green .fsw-stat-v { color: var(--fsw-green); } .fsw-stat.is-blue .fsw-stat-v { color: var(--fsw-blue); }
.fsw-stat.is-red { border-color: rgba(212,43,43,.4); background: var(--fsw-red-soft); }

/* ── Task cards ─────────────────────────────────────────────────── */
.fsw-task-list { display: flex; flex-direction: column; gap: 8px; }
.fsw-task { appearance: none; text-align: left; font-family: inherit; cursor: pointer; display: grid; grid-template-columns: 5px 1fr auto; gap: 12px; align-items: center; background: var(--fsw-card); border: 1px solid var(--fsw-line); border-radius: 12px; padding: 10px 12px 10px 0; overflow: hidden; transition: border-color .12s, transform .08s, box-shadow .12s; color: var(--fsw-ink); width: 100%; }
.fsw-task:hover { border-color: var(--xcs-line-2, #CACACA); box-shadow: var(--xcs-shadow-md); transform: translateY(-1px); }
.fsw-task-bar { align-self: stretch; border-radius: 0 3px 3px 0; }
.fsw-task-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fsw-task-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--fsw-ink-3); }
.fsw-task-prio { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 10.5px; letter-spacing: .04em; }
.fsw-task-ctx { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fsw-task-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.fsw-task-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--fsw-ink-3); }
.fsw-task-due.is-late { color: var(--fsw-red); font-weight: 700; }
.fsw-task-due.is-none { color: var(--fsw-ink-4); font-style: italic; }
.fsw-task-block { color: var(--fsw-ink-3); }
.fsw-task-side { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-right: 4px; }
.fsw-task-reviewer { opacity: .7; }
/* Overdue: red left edge + very light red wash — severity stays dominant over the priority bar */
.fsw-task.is-overdue { border-color: rgba(212,43,43,.5); border-left: 3px solid var(--fsw-red); background: linear-gradient(90deg, var(--fsw-red-soft), var(--fsw-card) 40%); }
.fsw-task.is-overdue .fsw-task-title { color: #D42B2B; }
[data-theme="dark"] .fsw-task.is-overdue .fsw-task-title { color: #F06060; }
.fsw-task.is-muted { opacity: .62; }
.fsw-task.is-muted:hover { opacity: 1; }
.fsw-task.is-done { opacity: .7; }
.fsw-task.is-done .fsw-task-title { text-decoration: line-through; text-decoration-color: rgba(110,110,110,.6); }
.fsw-task.is-compact { padding: 7px 10px 7px 0; }
.fsw-task.is-compact .fsw-task-title { font-size: 13px; }
.fsw-task.is-compact .fsw-task-top { display: none; }

/* ── My Work sections ───────────────────────────────────────────── */
.fsw-section { display: flex; flex-direction: column; gap: 10px; }
.fsw-section-h { display: flex; align-items: center; gap: 10px; }
.fsw-section-h h3 { margin: 0; font-size: var(--fsw-fs-sech); font-weight: var(--fsw-micro-fw-b); letter-spacing: var(--fsw-sech-ls); text-transform: var(--fsw-micro-tt); display: flex; align-items: center; gap: 8px; }
.fsw-section-h .fsw-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); color: var(--fsw-ink-3); }
.fsw-section-h .fsw-sub { color: var(--fsw-ink-3); font-size: 12.5px; }
.fsw-section.is-overdue .fsw-section-h h3 { color: var(--fsw-red); }
.fsw-section.is-overdue .fsw-section-h .fsw-n { background: var(--fsw-red); color: #fff; border-color: var(--fsw-red); }
.fsw-section.is-waiting .fsw-task-list { opacity: .85; }
.fsw-section-toggle { appearance: none; background: transparent; border: 0; color: var(--fsw-ink-3); cursor: pointer; font-family: inherit; font-size: 12.5px; margin-left: auto; }
.fsw-approvals-strip { display: flex; flex-direction: column; gap: 8px; }
.fsw-approval { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: var(--fsw-card); border: 1px solid rgba(201,138,27,.5); border-radius: 12px; padding: 10px 12px; }
.fsw-approval.is-late { border-color: rgba(212,43,43,.6); }
.fsw-approval-t { font-weight: 700; font-size: 13.5px; }
.fsw-approval-m { font-size: 12px; color: var(--fsw-ink-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fsw-approval-a { display: flex; gap: 6px; }

/* ── Key/value, notes, links ────────────────────────────────────── */
.fsw-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.fsw-kv > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fsw-kv span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--fsw-ink-4); font-weight: 700; }
.fsw-kv b { font-weight: 600; font-size: 12.5px; color: var(--fsw-ink-2); overflow-wrap: anywhere; }
.fsw-kv b.is-late { color: var(--fsw-red); }
.fsw-kv b small { color: var(--fsw-ink-3); font-weight: 500; }
.fsw-note { background: var(--fsw-tint); border: 1px solid var(--fsw-line); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.fsw-note.is-block { border-style: dashed; color: var(--fsw-ink-3); }
.fsw-note.is-feedback { border-color: rgba(212,43,43,.4); background: var(--fsw-red-soft); }
.fsw-links { display: flex; gap: 8px; flex-wrap: wrap; }
.fsw-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--fsw-line); background: var(--fsw-card); color: var(--fsw-ink); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.fsw-links a:hover { border-color: var(--xcs-blue); color: var(--xcs-blue); }
.fsw-dep { font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fsw-dep.is-muted { color: var(--fsw-ink-3); }

/* ── Forms ──────────────────────────────────────────────────────── */
.fsw-form { display: flex; flex-direction: column; gap: 10px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); border-radius: 12px; padding: 14px; }
.fsw-form-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fsw-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; min-width: 0; }
.fsw-field.is-inline { flex-direction: row; align-items: center; gap: 8px; }
.fsw-field-l { font-size: 11.5px; font-weight: 700; color: var(--fsw-ink-2); letter-spacing: .02em; }
.fsw-field-l b { color: var(--fsw-red); }
.fsw-field-hint { color: var(--fsw-ink-4); font-size: 11.5px; }
.fsw-input { appearance: none; width: 100%; box-sizing: border-box; border: var(--fsw-bw-strong) solid var(--fsw-line); border-radius: var(--fsw-radius-input); background: var(--fsw-card); color: var(--fsw-ink); padding: 9px 12px; font-size: 13.5px; font-family: inherit; transition: border-color .12s, box-shadow .12s; }
.fsw-input:focus { outline: none; border-color: var(--xcs-line-focus, #7A7A7A); box-shadow: 0 0 0 3px rgba(0,0,0,.10); }
.fsw-input.is-sm { padding: 5px 8px; font-size: 12.5px; border-radius: 8px; }
textarea.fsw-input { resize: vertical; min-height: 40px; }
.fsw-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.fsw-err { color: var(--fsw-red); background: var(--fsw-red-soft); border: 1px solid rgba(212,43,43,.4); border-radius: 10px; padding: 8px 12px; font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fsw-ok { color: var(--fsw-green); background: rgba(47,158,95,.1); border: 1px solid rgba(47,158,95,.4); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.fsw-spinner { display: flex; align-items: center; gap: 10px; color: var(--fsw-ink-3); font-size: 13px; padding: 14px 0; }
.fsw-spin { width: 16px; height: 16px; border: 2px solid var(--fsw-line); border-top-color: var(--xcs-blue); border-radius: 50%; animation: fswSpin .8s linear infinite; display: inline-block; }
@keyframes fswSpin { to { transform: rotate(360deg); } }
.fsw-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 16px; color: var(--fsw-ink-3); }
.fsw-empty-ico { color: var(--fsw-ink-4); line-height: 0; }
.fsw-empty-ico .fsw-ic { width: 26px; height: 26px; }
.fsw-empty-title { font-weight: 800; font-size: 16px; color: var(--fsw-ink); }
.fsw-empty-sub { font-size: 13px; max-width: 460px; }

/* ── Modal ──────────────────────────────────────────────────────── */
.fsw-modal-scrim { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; animation: fswFade .15s ease-out; }
@keyframes fswFade { from { opacity: 0; } to { opacity: 1; } }
.fsw-modal { background: var(--fsw-card); border-radius: 16px; width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; animation: fswPop .18s cubic-bezier(.2,.9,.3,1.2); }
.fsw-modal.is-wide { max-width: 860px; }
@keyframes fswPop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.fsw-modal-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 8px; }
.fsw-modal-h h3 { margin: 0; font-size: 17px; font-weight: 800; }
.fsw-modal-h p { margin: 2px 0 0; color: var(--fsw-ink-3); font-size: 12.5px; }
.fsw-modal-b { padding: 8px 20px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.fsw-modal-f { padding: 12px 20px; border-top: 1px solid var(--fsw-line); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; background: var(--fsw-tint); }
/* Di ponsel drawer menutupi seluruh scrim, jadi tombol ini adalah SATU-SATUNYA
   jalan keluar; ukuran aslinya ~26x30px, di bawah ambang target sentuh 44px. */
.fsw-x { appearance: none; background: transparent; border: 0; font-size: 26px; line-height: 1; color: var(--fsw-ink-4); cursor: pointer; padding: 0; border-radius: 8px; min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.fsw-x:hover { background: var(--fsw-tint); color: var(--fsw-ink); }

/* ── Drawer ─────────────────────────────────────────────────────── */
.fsw-drawer-scrim { position: fixed; inset: 0; z-index: 1150; background: rgba(0,0,0,.35); animation: fswFade .15s ease-out; }
.fsw-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--xcs-bg-1, #F4F4F4); border-left: 1px solid var(--fsw-line); box-shadow: -20px 0 60px rgba(0,0,0,.25); display: flex; flex-direction: column; animation: fswSlide .2s cubic-bezier(.2,.9,.3,1); }
@keyframes fswSlide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.fsw-drawer-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--fsw-line); background: var(--fsw-card); }
.fsw-drawer-eyebrow { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--fsw-ink-3); flex-wrap: wrap; }
.fsw-drawer-b { padding: 16px 18px 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.fsw-drawer-title { margin: 0; font-family: 'Jost', system-ui, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: .02em; line-height: 1.25; }
.fsw-drawer-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fsw-drawer-desc { margin: 0; color: var(--fsw-ink-2); font-size: 13.5px; line-height: 1.5; }
.fsw-actions { background: var(--fsw-card); border: 1px solid var(--fsw-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 0; box-shadow: var(--xcs-shadow-md); }

/* ── Events & comments ──────────────────────────────────────────── */
.fsw-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fsw-event { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; }
.fsw-event-line { font-size: 13px; line-height: 1.4; }
.fsw-event-time { font-size: 11px; color: var(--fsw-ink-4); }
.fsw-event.kind-escalated .fsw-event-line, .fsw-event.kind-rejected .fsw-event-line { color: var(--fsw-red); }
.fsw-event.kind-approved .fsw-event-line { color: var(--fsw-green); }
.fsw-event-more { list-style: none; }
.fsw-comments { display: flex; flex-direction: column; gap: 10px; }
.fsw-comment { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.fsw-comment-h { display: flex; gap: 8px; font-size: 12px; color: var(--fsw-ink-3); }
.fsw-comment-h strong { color: var(--fsw-ink); }
.fsw-comment-t { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.fsw-comment-compose { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.fsw-md { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.5; }
.fsw-md-li { padding-left: 16px; position: relative; }
.fsw-md-li::before { content: '•'; position: absolute; left: 4px; color: var(--fsw-ink-4); }
.fsw-md-li.is-num::before { content: ''; }
.fsw-md-gap { height: 6px; }

/* ── Tables ─────────────────────────────────────────────────────── */
.fsw-table-wrap { overflow-x: auto; }
.fsw-table { width: 100%; border-collapse: collapse; font-size: var(--fsw-fs-tbl); }
.fsw-table th { text-align: left; font-size: var(--fsw-fs-micro); font-weight: var(--fsw-micro-fw-b); letter-spacing: var(--fsw-th-ls); text-transform: var(--fsw-micro-tt); color: var(--fsw-th-ink); padding: var(--fsw-cell-pad); border-bottom: var(--fsw-th-bw) solid var(--fsw-th-line); background: var(--fsw-th-bg); white-space: nowrap; }
.fsw-table td { padding: var(--fsw-row-pad); border-bottom: var(--fsw-bw-row) solid var(--fsw-line-row); vertical-align: middle; }
.fsw-table tr:last-child td { border-bottom: 0; }
.fsw-table tr.is-click { cursor: pointer; } .fsw-table tr.is-click:hover td { background: var(--fsw-tint); }
.fsw-table td.num, .fsw-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fsw-table .fsw-input { padding: 5px 8px; font-size: 12.5px; border-radius: 8px; min-width: 90px; }
.fsw-table tr.is-red td { background: var(--fsw-red-soft); }

/* ── Progress / bars ────────────────────────────────────────────── */
.fsw-bar { height: 8px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); border-radius: 999px; overflow: hidden; position: relative; }
.fsw-bar > i { display: block; height: 100%; background: var(--fsw-accent-line); border-radius: 999px; }
.fsw-bar > i.is-green { background: var(--fsw-green); } .fsw-bar > i.is-yellow { background: var(--fsw-amber); } .fsw-bar > i.is-red { background: var(--fsw-red); } .fsw-bar > i.is-grey { background: #9A9A9A; }
.fsw-bar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--fsw-ink); opacity: .6; }
.fsw-bar-legend { column-gap: 10px; flex-wrap: wrap; display: flex; justify-content: space-between; font-size: 11px; color: var(--fsw-ink-4); }
.fsw-contract { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--fsw-line); border-radius: 12px; background: var(--fsw-card); cursor: pointer; text-align: left; font-family: inherit; color: var(--fsw-ink); width: 100%; }
.fsw-contract:hover { border-color: var(--xcs-line-2, #CACACA); box-shadow: var(--xcs-shadow-md); }
.fsw-contract.is-red { border-color: rgba(212,43,43,.55); }
.fsw-contract-name { font-weight: 800; font-size: 14px; }
.fsw-contract-sub { font-size: 12px; color: var(--fsw-ink-3); }
.fsw-metric { display: flex; flex-direction: column; gap: 2px; }
.fsw-metric span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--fsw-ink-4); font-weight: 700; }
.fsw-metric b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fsw-metric small { font-size: 11.5px; color: var(--fsw-ink-3); }
.fsw-stage { display: grid; grid-template-columns: 150px 1fr 60px 60px; gap: 10px; align-items: center; font-size: 13px; }
.fsw-stage .fsw-bar { height: 10px; }
.fsw-capacity { display: grid; grid-template-columns: 170px 1fr 80px; gap: 10px; align-items: center; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--fsw-line); }
.fsw-capacity:last-child { border-bottom: 0; }
.fsw-capacity.is-over .fsw-bar > i { background: var(--fsw-red); }

/* ── Calendar ───────────────────────────────────────────────────── */
.fsw-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.fsw-cal-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fsw-ink-4); font-weight: 800; text-align: center; padding: 4px 0; }
.fsw-cal-d { min-width: 0; min-height: 96px; border: 1px solid var(--fsw-line); border-radius: 10px; background: var(--fsw-card); padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.fsw-cal-d.is-other { opacity: .45; }
.fsw-cal-d.is-today { border-color: var(--xcs-blue); box-shadow: inset 0 0 0 1px var(--xcs-blue); }
.fsw-cal-n { font-weight: 800; font-size: 12px; color: var(--fsw-ink-3); }
.fsw-cal-d.is-today .fsw-cal-n { color: var(--xcs-blue); }
/* Calendar items: silver-gray edge by default; grey for milestones, amber for meetings, red when late */
.fsw-cal-item { appearance: none; border: 0; text-align: left; font-family: inherit; cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fsw-ink); background: var(--fsw-tint); border-left: 3px solid #C4C4C4; }
.fsw-cal-item.is-ms { background: rgba(110,110,110,.12); border-left-color: var(--fsw-violet); }
.fsw-cal-item.is-meet { background: rgba(201,138,27,.14); border-left-color: var(--fsw-amber); }
.fsw-cal-item.is-late { background: var(--fsw-red-soft); border-left-color: var(--fsw-red); color: var(--fsw-red); }
.fsw-cal-item.is-done { opacity: .55; text-decoration: line-through; }
.fsw-cal-more { font-size: 11px; color: var(--fsw-ink-4); }

/* ── Brief / AI ─────────────────────────────────────────────────── */
.fsw-brief { display: flex; flex-direction: column; gap: 8px; }
.fsw-brief-item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--fsw-line); background: var(--fsw-card); font-size: 13.5px; line-height: 1.45; }
.fsw-brief-item.is-critical { border-color: rgba(212,43,43,.55); background: var(--fsw-red-soft); }
.fsw-brief-item.is-warning { border-color: rgba(201,138,27,.5); }
.fsw-brief-item.is-ok { border-color: rgba(47,158,95,.5); }
.fsw-brief-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--xcs-navy); color: #FFFFFF; }
.fsw-brief-refs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.fsw-chat { display: flex; flex-direction: column; gap: 12px; }
.fsw-msg { max-width: 92%; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.fsw-msg.is-q { align-self: flex-end; background: var(--xcs-navy); color: #FFFFFF; border-bottom-right-radius: 4px; }
.fsw-msg.is-a { align-self: flex-start; background: var(--fsw-card); border: 1px solid var(--fsw-line); border-bottom-left-radius: 4px; }
.fsw-msg-meta { font-size: 11px; color: var(--fsw-ink-4); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.fsw-msg.is-q .fsw-msg-meta { color: rgba(255,255,255,.6); }
.fsw-suggest { display: flex; gap: 6px; flex-wrap: wrap; }
.fsw-suggest button { appearance: none; border: 1px solid var(--fsw-line); background: var(--fsw-card); border-radius: 999px; padding: 6px 10px; font-size: 12px; cursor: pointer; font-family: inherit; color: var(--fsw-ink-2); }
.fsw-suggest button:hover { border-color: var(--xcs-blue); color: var(--xcs-blue); }
.fsw-ask { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

/* ── Settings ───────────────────────────────────────────────────── */
.fsw-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fsw-steps-editor .fsw-table td { padding: 5px 6px; }
.fsw-steps-editor .fsw-input { min-width: 70px; }
.fsw-steps-editor select.fsw-input { min-width: 132px; }
.fsw-install-log { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; }
.fsw-role-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; border: 1px solid; }

/* ── Report (printable) ─────────────────────────────────────────── */
.fsw-report { background: #fff; color: #0A0A0A; border: 1px solid var(--fsw-line); border-radius: 12px; padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; }
.fsw-report h2 { margin: 0; font-size: 22px; }
.fsw-report .fsw-report-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6E6E6E; font-weight: 800; }
.fsw-report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fsw-report-stat { border: 1px solid #E3E3E3; border-radius: 10px; padding: 10px 12px; }
.fsw-report-stat span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #6E6E6E; font-weight: 700; display: block; }
.fsw-report-stat b { font-size: 20px; }
.fsw-report table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fsw-report th, .fsw-report td { padding: 6px 8px; border-bottom: 1px solid #E3E3E3; text-align: left; }
.fsw-report td.num, .fsw-report th.num { text-align: right; }
@media print {
  .xcs-sidebar, .xcs-mobile-bar, .xcs-notif-bell, .xcs-fab-wa, .fsw-noprint, .xcs-footer, .xcs-tweaks-toggle { display: none !important; }
  .xcs-app { display: block !important; }
  .xcs-main-inner { padding: 0 !important; max-width: none !important; }
  .fsw-report { border: 0; padding: 0; }
  body { background: #fff !important; }
}

/* ── Sidebar additions ──────────────────────────────────────────── */
.xcs-nav-item.is-ops-primary { background: var(--xcs-chrome); color: #0A0A0A; border: 0; }
.xcs-nav-item .xcs-pill.is-red { background: #D42B2B; color: #FFFFFF; }
.xcs-nav-item .xcs-pill.is-amber { background: #C98A1B; color: #FFFFFF; }
.xcs-nav-group-header .xcs-nav-group-label { letter-spacing: .12em; }
.xcs-brand-sub.is-fsw { letter-spacing: .14em; font-size: 9.5px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .fsw-cols, .fsw-grid-3, .fsw-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .fsw-contract { grid-template-columns: 1fr 1fr; }
  .fsw-stage { grid-template-columns: 110px 1fr 50px 50px; }
  .fsw-capacity { grid-template-columns: 120px 1fr 70px; }
  .fsw-report-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fsw-grid-2, .fsw-kv { grid-template-columns: 1fr; }
  .fsw-cal { grid-template-columns: repeat(7, minmax(40px, 1fr)); gap: 2px; }
  .fsw-cal-d { min-height: 64px; padding: 3px; }

  /* ── Kalender bulan di HP ──────────────────────────────────────────
     Satu sel hanya ~48px di 390px. Chip agenda di dalamnya terpotong jadi
     dua huruf ("DA…", "JE …") — tidak memberi tahu apa pun — dan target
     tekannya 32×32. Di lebar ini chip diganti TITIK berwarna yang tidak
     bisa ditekan sendiri, dan yang menjadi target adalah seluruh sel:
     ia memang sudah membuka panel harian berisi daftar lengkap agenda
     beserta tombol-tombolnya (OpsDayModal). Tidak ada yang hilang —
     yang hilang hanya teks yang memang tidak terbaca. */
  .fsw-cal-d { flex-flow: row wrap; align-items: flex-start; align-content: flex-start;
               gap: 3px; padding: 5px 4px; }
  .fsw-cal-n { flex: 0 0 100%; }
  .fsw-cal .fsw-cal-item, .fsw-cal .fsw-cal-note {
    flex: 0 0 auto; width: 8px; height: 8px; min-height: 0; min-width: 0; max-height: 8px;
    padding: 0; border: 0; border-radius: 50%; display: block;
    font-size: 0; line-height: 0; overflow: hidden; pointer-events: none;
    background: var(--fsw-ink-3); color: transparent; box-shadow: none;
  }
  .fsw-cal .fsw-cal-item.is-ms   { background: var(--fsw-violet); }
  .fsw-cal .fsw-cal-item.is-meet { background: var(--fsw-amber); }
  .fsw-cal .fsw-cal-item.is-late { background: var(--fsw-red); }
  .fsw-cal .fsw-cal-item.is-done { opacity: .35; }
  .fsw-cal .fsw-cal-note { background: var(--n-line, var(--fsw-ink-4)); }
  .fsw-cal-more { flex: 0 0 100%; font-size: 11px; line-height: 1.2; }
  .fsw-drawer { width: 100%; }
  .fsw-task { grid-template-columns: 5px 1fr auto; }
  .fsw-approval { grid-template-columns: 1fr; }
  .fsw-comment-compose { grid-template-columns: 1fr; }
  .fsw-ask { grid-template-columns: 1fr; }
}

/* ── Monochrome polish ──────────────────────────────────────────── */
.fsw-input:focus { box-shadow: 0 0 0 3px rgba(0,0,0,.10); }
[data-theme="dark"] .fsw-input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.16); }
.fsw-ref { color: var(--xcs-ink-1); text-decoration: underline; text-decoration-color: #9A9A9A; text-underline-offset: 2px; }
.fsw-ref:hover { text-decoration-color: var(--xcs-ink-1); }
.fsw-stat.is-blue .fsw-stat-v { color: var(--xcs-ink-1); }

/* ════════════════════════════════════════════════════════════════════
 * KANBAN ROOMS — Ruang Script / Ruang Editor / Ruang Final Output
 * Monokrom (hitam / putih / silver); warna hanya untuk severity:
 * merah = terlambat/kritis, hijau = selesai, amber = menunggu QC.
 * ══════════════════════════════════════════════════════════════════ */
.fsw-room { display: flex; flex-direction: column; gap: 12px; }
.fsw-room.is-embedded { gap: 10px; }

/* Toolbar */
.fsw-room-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); border-radius: var(--fsw-radius); }
.fsw-room-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: -.01em; }
.fsw-room-title .fsw-room-ico { font-size: 17px; line-height: 1; }
.fsw-room-title .fsw-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--fsw-card); border: 1px solid var(--fsw-line); padding: 1px 8px; border-radius: 999px; color: var(--fsw-ink-3); }
.fsw-room-late { font-size: 12px; font-weight: 800; color: var(--fsw-red); background: var(--fsw-red-soft); border: 1px solid rgba(212,43,43,.35); border-radius: 999px; padding: 1px 8px; }
.fsw-room-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fsw-room-filters .fsw-input.is-sm { width: auto; min-width: 128px; max-width: 200px; }
.fsw-room-filters .fsw-check { white-space: nowrap; font-size: 12.5px; color: var(--fsw-ink-2); }
.fsw-group-sw { display: inline-flex; align-items: center; gap: 2px; background: var(--fsw-card); border: 1px solid var(--fsw-line); border-radius: 999px; padding: 2px 2px 2px 10px; }
.fsw-group-l { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--fsw-ink-4); margin-right: 4px; }
.fsw-group-b { appearance: none; border: 0; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--fsw-ink-3); padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.fsw-group-b:hover:not(.on) { background: var(--xcs-bg-3, #EAEAEA); color: var(--fsw-ink); }
.fsw-group-b.on { background: var(--xcs-navy, #0A0A0A); color: #FFFFFF; }
[data-theme="dark"] .fsw-group-b.on { background: #F2F2F2; color: #0A0A0A; }
.fsw-room-hint { margin: 0; font-size: 12px; color: var(--fsw-ink-4); }

/* Papan */
.fsw-board { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; align-items: flex-start; }
.fsw-board::-webkit-scrollbar { height: 9px; }
.fsw-board::-webkit-scrollbar-thumb { background: var(--fsw-line); border-radius: 999px; }
.fsw-col { flex: 0 0 auto; min-width: 280px; width: 280px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); border-radius: var(--fsw-radius); padding: 8px; max-height: 68vh; transition: border-color .12s, box-shadow .12s, background .12s; }
.fsw-col.is-unclaimed { border-style: dashed; border-color: #9A9A9A; background: linear-gradient(180deg, rgba(154,154,154,.10), rgba(154,154,154,.03)); }
.fsw-col.is-done .fsw-col-h .fsw-col-l { color: var(--fsw-green); }
.fsw-col.is-revision .fsw-col-h .fsw-col-l { color: var(--fsw-red); }
.fsw-col.is-review .fsw-col-h .fsw-col-l { color: var(--fsw-amber); }
.fsw-col.is-droppable { border-color: #9A9A9A; }
.fsw-col.is-dropzone { border-style: solid; border-color: #9A9A9A; background: var(--fsw-card); box-shadow: 0 0 0 3px rgba(154,154,154,.35), 0 8px 20px rgba(0,0,0,.12); }
.fsw-col.is-dropzone .fsw-col-h { background: var(--fsw-card); border-bottom-color: #9A9A9A; }
.fsw-col.is-dropzone .fsw-col-b::before { content: ''; display: block; height: 3px; border-radius: 999px; background: var(--xcs-chrome); margin: 1px 1px 5px; }
.fsw-col-h { z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 6px 8px; background: var(--fsw-tint); border-bottom: 1px solid var(--fsw-line); }
.fsw-col-h.is-muted { opacity: .55; }
.fsw-col-l { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; color: var(--fsw-ink-2); }
.fsw-col-n { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; color: var(--fsw-ink-3); background: var(--fsw-card); border: 1px solid var(--fsw-line); border-radius: 999px; padding: 1px 7px; }
.fsw-col-b { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 1px; min-height: 52px; }
.fsw-col-empty { font-size: 12px; color: var(--fsw-ink-4); padding: 8px 6px; }

/* Kartu */
.fsw-kcard { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--fsw-card); border: 1px solid var(--fsw-line); border-left: 3px solid var(--fsw-accent-line); border-radius: 10px; padding: 9px 10px; cursor: grab; font-family: inherit; transition: transform .1s, box-shadow .12s, border-color .12s; }
.fsw-kcard:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.10); border-color: #9A9A9A; }
.fsw-kcard:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fsw-accent-soft), 0 0 0 1px var(--fsw-accent-line); }
[data-theme="dark"] .fsw-kcard:focus-visible { box-shadow: 0 0 0 3px var(--fsw-accent-soft), 0 0 0 1px var(--fsw-accent); }
/* Satu cincin fokus untuk semua kontrol OS — dulu hanya kartu yang punya. */
.fsw-page :focus-visible, .fsw-modal :focus-visible, .fsw-drawer :focus-visible {
  outline: 2px solid var(--fsw-accent-line); outline-offset: 2px;
}
.fsw-kcard:active { cursor: grabbing; }
.fsw-kcard.is-late { border-left-color: var(--fsw-red); }
.fsw-kcard.is-dragging { opacity: .5; }
.fsw-kcard.is-busy { opacity: .6; pointer-events: none; }
.fsw-kcard.col-done { opacity: .75; border-left-color: var(--fsw-green); }
.fsw-kcard.col-blocked { opacity: .68; }
.fsw-kcard.col-review { border-left-color: var(--fsw-amber); }
.fsw-kcard.col-revision { border-left-color: var(--fsw-red); }
.fsw-kcard-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* Nama klien: konteks, bukan judul — kecil dan redup supaya mata langsung
   jatuh ke APA yang harus dikerjakan. */
.fsw-kclient { font-size: 11.5px; font-weight: 700; letter-spacing: .01em; color: var(--fsw-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fsw-kdeliv-in { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--fsw-ink-4); }
/* Brief: dua baris, sisanya dipotong. Cukup untuk tahu ini tugas apa tanpa
   membuat kartunya jadi paragraf. Teks penuhnya ada di tooltip & panel. */
/* Ikon garis inline: selalu sejajar dengan baseline teks di sekitarnya dan
   mewarisi warnanya, jadi satu ikon yang sama otomatis benar di tombol gelap,
   chip terang, maupun mode gelap. */
.fsw-ic {
  flex: none; vertical-align: -0.16em;
  /* Gaya ikon adalah bagian dari skin. stroke-width dari CSS mengalahkan
     atribut presentasi di <svg>, dan anak-anaknya mewarisi karena tidak
     punya atribut sendiri. `scale` dipakai (bukan width/height) supaya
     ukuran KOTAKNYA tidak berubah — tata letak tetap sama persis. */
  stroke-width: var(--fsw-ic-sw);
  stroke-linecap: var(--fsw-ic-cap);
  stroke-linejoin: var(--fsw-ic-join);
  scale: var(--fsw-ic-scale);
}
/* Judul halaman memakai gradient chrome lewat background-clip, jadi color-nya
   transparent — ikon di dalamnya akan ikut transparan alias tak terlihat.
   Di sini warnanya dikembalikan secara eksplisit. */
.xcs-pagehead h1 { display: flex; align-items: center; gap: 10px; }
.xcs-pagehead h1 > .fsw-ic { color: var(--fsw-ink); -webkit-text-fill-color: currentColor; }
[data-theme="dark"] .xcs-pagehead h1 > .fsw-ic { color: #F2F2F2; }
.fsw-kbtn, .xcs-btn-primary, .xcs-btn-ghost, .fsw-tab { display: inline-flex; align-items: center; gap: 6px; }
.fsw-tab-ic { display: inline-flex; align-items: center; gap: 6px; }
.fsw-kdue, .fsw-room-late { display: inline-flex; align-items: center; gap: 5px; }

/* Pemicu detail di dalam kartu: kecil, tidak ikut menarik perhatian, tapi
   target sentuhnya tetap layak (28px, dan 44px di layar sentuh). */
.fsw-kcard-titlerow, .fsw-task-titlerow { display: flex; align-items: flex-start; gap: 6px; }
.fsw-kcard-titlerow > .fsw-kcard-title, .fsw-task-titlerow > .fsw-task-title { flex: 1 1 auto; min-width: 0; }
.fsw-kmore { appearance: none; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--fsw-line); border-radius: 7px; background: var(--fsw-card); color: var(--fsw-ink-4); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; transition: transform .12s, color .12s, border-color .12s; }
.fsw-kmore { position: relative; }
.fsw-kmore::after { content: ''; position: absolute; inset: -9px; }
.fsw-kmore:hover { color: var(--fsw-ink); border-color: var(--fsw-accent-line); }
.fsw-kmore.is-open { transform: rotate(180deg); color: var(--fsw-accent-ink); border-color: var(--fsw-accent-line); }

/* Ringkasan yang bisa dilipat di atas tiap layar. */
.fsw-summary { display: flex; flex-direction: column; gap: 10px; }
.fsw-summary-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fsw-summary-tog { appearance: none; display: inline-flex; align-items: center; align-self: flex-start; min-height: 32px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--fsw-line); background: var(--fsw-card); color: var(--fsw-ink-3); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fsw-summary-tog:hover { border-color: var(--fsw-accent-line); color: var(--fsw-ink); }
.fsw-summary-peek { font-size: 12.5px; font-weight: 700; color: var(--fsw-ink-3); }
.fsw-summary-peek .is-late { color: var(--fsw-red); }

/* Brief di kartu daftar — sama seperti di kartu kanban: dua baris, sisanya dipotong. */
.fsw-task-brief { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--fsw-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
.fsw-kbrief { margin: 0; font-size: 12px; line-height: 1.45; color: var(--fsw-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fsw-kcard-title { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--fsw-ink); }
.fsw-kcard-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.fsw-kcard-meta > span { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; border: 1px solid var(--fsw-line); color: var(--fsw-ink-3); background: var(--fsw-tint); }
.fsw-kbatch { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsw-krev { color: var(--fsw-red) !important; border-color: rgba(212,43,43,.35) !important; background: var(--fsw-red-soft) !important; }
.fsw-kqc { color: var(--fsw-amber) !important; border-color: rgba(201,138,27,.35) !important; background: rgba(201,138,27,.10) !important; }
.fsw-kblock { cursor: help; }
.fsw-kdeliv { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--fsw-ink-2); background: var(--fsw-tint); border: 1px solid var(--fsw-line); border-radius: 6px; padding: 1px 6px; flex: none; }
.fsw-kcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fsw-kdue { font-size: 11.5px; color: var(--fsw-ink-3); }
.fsw-kdue.is-late { color: var(--fsw-red); font-weight: 800; }
.fsw-kunpic { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--fsw-ink-4); border: 1px dashed var(--fsw-line); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.fsw-kcard-act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Form kirim link Google Drive di dalam kartu kanban. */
.fsw-klink { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; padding: 8px; border: 1px solid var(--fsw-accent-line); border-radius: 8px; background: var(--fsw-accent-soft); cursor: default; }
.fsw-klink-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; padding: 8px 10px; min-height: 40px; border: 1px solid var(--fsw-line); border-radius: 7px; background: var(--fsw-card); color: var(--fsw-ink); }
.fsw-klink-in:focus { outline: 2px solid var(--fsw-accent-line); outline-offset: 1px; }
.fsw-klink-act { display: flex; gap: 6px; }
.fsw-klink-err { font-size: 11.5px; font-weight: 700; color: var(--fsw-red); }
.fsw-klink-open { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--fsw-accent-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.fsw-klink-open:hover { filter: brightness(1.1); }
.fsw-kbtn { appearance: none; font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--fsw-line); background: var(--fsw-card); color: var(--fsw-ink-2); cursor: pointer; }
.fsw-kbtn:hover { border-color: #9A9A9A; color: var(--fsw-ink); }
.fsw-kbtn:disabled { opacity: .5; cursor: default; }
/* Aksi utama kartu (Ambil / Mulai / Submit) = satu-satunya isian cyan di papan.
   Teks hitam di atas #36DEFC = 12,3:1, jadi sama terbacanya di kedua tema dan
   aturan dark-mode terpisah tidak diperlukan lagi. */
.fsw-kbtn.is-primary { background: var(--fsw-accent); border-color: var(--fsw-accent); color: var(--fsw-on-accent); }
.fsw-kbtn.is-primary:hover { filter: brightness(1.06); border-color: var(--fsw-accent); color: var(--fsw-on-accent); }
.fsw-kbtn.is-ok { background: var(--fsw-green); border-color: var(--fsw-green); color: #FFFFFF; }
.fsw-kbtn.is-danger { background: transparent; border-color: rgba(212,43,43,.40); color: var(--fsw-red); }
.fsw-kbtn-none { font-size: 11px; color: var(--fsw-ink-4); }

/* Client tag */
.fsw-clienttag { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.fsw-clienttag-n { font-size: 12px; font-weight: 800; color: var(--fsw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
button.fsw-clienttag-n { appearance: none; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
/* Tanpa min-width:0 elemen flex ini mempertahankan lebar teks penuhnya dan
   handle panjang (@namaklienyangsangatpanjang) menembus keluar kartu kanban. */
.fsw-clienttag-ig { font-size: 10.5px; color: var(--fsw-ink-4); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fsw-clienttag-ig:hover { color: var(--fsw-ink-2); text-decoration: underline; }
.fsw-clienttag.is-compact .fsw-clienttag-n { max-width: 130px; }

/* Swimlane */
.fsw-lanes { display: flex; flex-direction: column; gap: 10px; }
.fsw-lane { display: grid; grid-template-rows: auto auto; gap: 8px; border: 1px solid var(--fsw-line); border-radius: var(--fsw-radius); padding: 8px 10px 4px; background: var(--fsw-card); }
.fsw-lane.is-none { border-style: dashed; background: var(--fsw-tint); }
.fsw-lane.is-closed { padding-bottom: 8px; }
.fsw-lane-h { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.fsw-lane-tog { font-size: 11px; color: var(--fsw-ink-4); width: 12px; }
.fsw-lane-ig { font-size: 15px; }
.fsw-lane-name { font-size: 13.5px; letter-spacing: -.01em; }
.fsw-lane-sub { font-size: 11px; font-weight: 700; color: var(--fsw-ink-4); letter-spacing: .04em; }
.fsw-lane-counts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.fsw-lane-counts .fsw-n { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); padding: 1px 8px; border-radius: 999px; color: var(--fsw-ink-3); }
.fsw-lane-open { font-size: 11px; color: var(--fsw-ink-3); }
.fsw-lane-late { font-size: 11px; font-weight: 800; color: var(--fsw-red); }
.fsw-lane .fsw-board { max-height: 58vh; }
.fsw-lane .fsw-col { max-height: 52vh; }

/* Pengungkap filter — berlaku di semua lebar layar, bukan cuma HP. */
.fsw-filter-tog { display: inline-flex; align-items: center; align-self: flex-start; min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--fsw-line); background: var(--fsw-card); color: var(--fsw-ink-3); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fsw-filter-tog:hover { border-color: var(--fsw-accent-line); color: var(--fsw-ink); }
.fsw-room-filters.is-closed { display: none; }
.fsw-filter-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--fsw-ink); color: var(--fsw-card); font-size: 11px; font-weight: 800; }

@media (max-width: 900px) {
  /* Kepala halaman ruang memakan hampir satu layar penuh di HP sebelum kartu
     pertama terlihat. Judul dikecilkan dan subjudul disembunyikan — nama ruang
     sudah ada di tab tepat di bawahnya. */
  .fsw-roompage .xcs-pagehead h1 { font-size: 26px; line-height: 1.15; }
  .fsw-roompage .xcs-pagehead-sub { display: none; }
  .fsw-roompage .xcs-pagehead-cta { align-self: flex-start; }
  .fsw-roompage .xcs-pagehead-cta .xcs-btn-ghost { width: auto; min-height: 44px; }
  .fsw-filter-tog { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  /* Tombol kartu adalah SATU-SATUNYA cara memindahkan kerja di layar sentuh
     (drag & drop HTML5 tidak jalan di iOS), tapi tingginya cuma ~27px.
     Dinaikkan ke 44px sesuai ambang target sentuh. */
  .fsw-kbtn { padding: 11px 14px; font-size: 13px; min-height: 44px; }
  /* Dulu kotaknya ikut dibesarkan ke 44px demi target sentuh — hasilnya
     sebuah kotak sebesar seperempat kartu hanya untuk satu tanda panah.
     Kotaknya tetap kecil; yang diperluas area tekannya lewat ::after. */
  .fsw-kmore { width: 32px; height: 32px; font-size: 14px; }
  .fsw-kcard-act { gap: 8px; }
  .fsw-room-bar { align-items: stretch; }
  .fsw-room-filters { justify-content: flex-start; }
  .fsw-room-filters .fsw-input.is-sm { flex: 1 1 130px; max-width: none; }
}

/* Kolom full-bleed harus ikut breakpoint shell (sidebar jadi drawer di 768px,
   styles.css). Di 769–900px sidebar masih memakan 240px sehingga 84vw lebih
   lebar dari area kontennya dan tiap titik snap memotong kolom.
   .fsw-lane .fsw-board ikut dilepas capnya: .fsw-board overflow-y-nya hidden,
   jadi cap 58vh + kolom tanpa batas = kartu terpotong tanpa bisa di-scroll. */
@media (max-width: 768px) {
  .fsw-board { scroll-snap-type: x mandatory; }
  .fsw-col { min-width: 84vw; width: 84vw; max-height: none; }
  .fsw-lane .fsw-col { max-height: none; }
  .fsw-lane .fsw-board { max-height: none; }
}


/* ── Panel detail tugas: dua fakta di depan, sisanya dilipat ──────────
   Sebelumnya panel membuka dengan 9 baris label/nilai — tiga di antaranya
   hanya berisi "—". Yang dipakai saat bekerja cuma kapan dan siapa. */
.fsw-drawer-title { overflow-wrap: anywhere; }
.fsw-drawer-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--fsw-ink-3); margin-top: -8px; }
.fsw-drawer-sub .fsw-sep { color: var(--fsw-ink-4); }
.fsw-drawer-key { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--fsw-line); border-radius: 10px; background: var(--fsw-tint); }
.fsw-dk { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; color: var(--fsw-ink-2); }
.fsw-dk > .fsw-ic { color: var(--fsw-ink-3); }
.fsw-dk b { font-weight: 650; color: var(--fsw-ink); }
.fsw-dk b.is-none { font-weight: 500; color: var(--fsw-ink-4); }
.fsw-dk small { color: var(--fsw-ink-3); font-size: 12px; }
.fsw-dk.is-late > .fsw-ic, .fsw-dk.is-late b, .fsw-dk.is-late small { color: var(--fsw-red); }

.fsw-fold { display: flex; flex-direction: column; gap: 8px; }
.fsw-fold-t { appearance: none; background: transparent; border: 0; padding: 2px 0; margin: 0; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fsw-ink-4); min-height: 28px; }
.fsw-fold-t:hover { color: var(--fsw-ink-2); }
.fsw-fold-c { transition: transform .15s ease; }
.fsw-fold.is-open .fsw-fold-c { transform: rotate(180deg); }
.fsw-fold-n { font-size: 10px; font-weight: 700; letter-spacing: 0; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--fsw-line); color: var(--fsw-ink-3); }
.fsw-fold.is-open .fsw-fold-n { background: var(--fsw-accent-soft); color: var(--fsw-accent-ink); }
@media (prefers-reduced-motion: reduce) { .fsw-fold-c { transition: none; } }
.fsw-action-row.is-more { padding-top: 2px; }
.fsw-more .fsw-fold-c { transition: transform .15s ease; }
.fsw-more.is-open .fsw-fold-c { transform: rotate(180deg); }
.fsw-chip .fsw-dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; display: inline-block; }

/* ── Ruang tulis (Ruang Script & Ruang Brief) ────────────────────────
   Naskahnya diketik di sistem, bukan dikirim sebagai link Drive. Kotaknya
   tumbuh mengikuti isi supaya penulis tidak bekerja di jendela sempit. */
.fsw-write { display: flex; flex-direction: column; gap: 8px; }
.fsw-write-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fsw-write-bar h4 { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fsw-ink-4); font-weight: 800; }
.fsw-write-n { font-size: 11.5px; color: var(--fsw-ink-4); font-variant-numeric: tabular-nums; }
.fsw-write-n.is-err { color: var(--fsw-red); }
.fsw-write-ta { min-height: 180px; resize: vertical; line-height: 1.65; font-size: 14px; padding: 12px 14px; overflow-wrap: anywhere; }
.fsw-write-ta:focus { border-color: var(--fsw-accent-line); box-shadow: 0 0 0 3px var(--fsw-accent-soft); }
.fsw-read { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; color: var(--fsw-ink); background: var(--fsw-tint); border: 1px solid var(--fsw-line); border-radius: 10px; padding: 12px 14px; max-height: 60vh; overflow-y: auto; }
.fsw-klink-open.is-flat { border-style: dashed; cursor: default; color: var(--fsw-ink-3); }

/* ── Kelola User ─────────────────────────────────────────────────── */
.fsw-userbar { margin-bottom: 10px; }
.fsw-userbar .fsw-input { max-width: 280px; }
.fsw-passwrap { display: flex; gap: 8px; align-items: center; }
.fsw-passwrap .fsw-input { flex: 1; min-width: 0; }
.fsw-passtog { appearance: none; background: transparent; border: 0; padding: 4px 2px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fsw-accent-ink); cursor: pointer; white-space: nowrap; }
.fsw-passtog.is-alt { display: inline-flex; align-items: center; gap: 4px; color: var(--fsw-ink-3); }
.fsw-passtog.is-alt:hover { color: var(--fsw-ink); }
/* Jangan dibungkus: di kolom sempit keempat tombol menumpuk jadi empat baris
   dan menyeret tinggi SELURUH baris tabel ke 188px. Tabelnya sendiri sudah
   bisa digulir mendatar, jadi biarkan melebar ke samping. */
.fsw-rowact { display: flex; gap: 6px; flex-wrap: nowrap; }
.fsw-rowact > * { flex: none; }
.xcs-btn-ghost.is-sm { padding: 5px 9px; font-size: 12px; min-height: 32px; gap: 5px; }
.fsw-input.is-num { max-width: 78px; }

/* ── Nama klien memimpin panel tugas ─────────────────────────────────
   Judul tugas berulang di belasan kartu; nama kliennya yang unik. */
.fsw-drawer-client { font-family: 'Jost', system-ui, sans-serif; font-size: 27px; font-weight: 600; letter-spacing: .01em; line-height: 1.15; color: var(--fsw-ink); overflow-wrap: anywhere; }
.fsw-clientbtn { appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.fsw-clientbtn:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.fsw-drawer-title.is-sub { font-size: 14.5px; font-weight: 600; color: var(--fsw-ink-2); letter-spacing: .01em; margin-top: -10px; }
.fsw-drawer-sub { margin-top: -6px; }
/* Kartu: nama klien ikut dibesarkan — itu yang dipindai saat mencari tugas. */
.fsw-task-ctx { font-size: 14px; font-weight: 700; color: var(--fsw-ink); }
.fsw-task-title { font-size: 12.5px; font-weight: 600; color: var(--fsw-ink-2); }
.fsw-kclient { font-size: 13.5px; font-weight: 700; color: var(--fsw-ink); }
.fsw-kcard-title { font-size: 12px; font-weight: 600; color: var(--fsw-ink-2); }

/* ── Bilah bawah (HP) ────────────────────────────────────────────────
   Hanya di lima layar kerja. Di layar lebar tidak pernah muncul: di sana
   sidebar sudah terpampang dan bilah ini cuma memakan tempat. */
.fsw-bbar { display: none; }
@media (max-width: 768px) {
  .fsw-bbar {
    display: block; position: fixed; z-index: 75;
    left: 0; right: 0; bottom: 0;
    padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }
  .fsw-bbar-in {
    pointer-events: auto;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
    gap: 2px; padding: 6px 6px;
    background: var(--fsw-card); border: 1px solid var(--fsw-line);
    border-radius: 22px;
    box-shadow: 0 6px 24px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.06);
  }
  .fsw-bbar-it {
    appearance: none; background: transparent; border: 0; margin: 0;
    padding: 5px 2px 4px; font: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--fsw-ink-3); min-width: 0; border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
  }
  .fsw-bbar-ico {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 30px; border-radius: 999px;
    transition: background-color .16s ease, color .16s ease;
  }
  .fsw-bbar-it.is-on { color: var(--fsw-accent-ink); }
  .fsw-bbar-it.is-on .fsw-bbar-ico { background: var(--fsw-accent); color: var(--fsw-on-accent); }
  .fsw-bbar-it:active .fsw-bbar-ico { transform: scale(.94); }
  .fsw-bbar-l {
    font-size: 11px; font-weight: 700; letter-spacing: .01em; line-height: 1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .fsw-bbar-it.is-on .fsw-bbar-l { font-weight: 800; }
  /* Angka kecil di pojok ikon: cukup untuk tahu ada yang menunggu, tanpa
     mengubah bilah jadi papan statistik. */
  .fsw-bbar-n {
    position: absolute; top: -2px; right: 2px;
    min-width: 15px; height: 15px; padding: 0 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 800; line-height: 1;
    border-radius: 999px; background: var(--fsw-ink); color: var(--fsw-card);
    border: 1.5px solid var(--fsw-card);
  }
  .fsw-bbar-n.is-red { background: var(--fsw-red); color: #fff; }
  .fsw-bbar-it.is-on .fsw-bbar-n { background: var(--fsw-ink); color: var(--fsw-card); }
  /* Tombol WhatsApp mengambang tepat di atas menu kelima dan menutupinya
     sampai tidak bisa ditekan sama sekali. Selama bilah tampil, ia naik ke
     atas bilah. !important karena aturan aslinya juga memakainya. */
  body.has-fsw-bottombar .xcs-fab-wa {
    bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
    width: 46px !important; height: 46px !important;
  }
  body.has-fsw-bottombar .xcs-fab-wa svg,
  body.has-fsw-bottombar .xcs-fab-wa img { width: 24px; height: 24px; }
  /* Lonceng notifikasi tidak bertabrakan (ia di atas), tapi pastikan bilah
     selalu di atas tombol mengambang lain kalau ada yang tersisa di bawah. */
  .fsw-bbar-in { position: relative; z-index: 2; }

  /* Satu pekerjaan, satu alat: di HP pemilih ruang cukup bilah bawah. */
  body.has-fsw-bottombar .fsw-roomtabs { display: none; }

  /* Ruang ekstra supaya tombol terakhir di halaman tidak tertutup bilah. */
  /* !important terpaksa: styles.css:13471 mengunci padding konten dengan
     !important pada lebar ≤720px, jadi tanpa ini tombol terakhir di halaman
     tertutup bilah (terukur: padding bawah cuma 18px). */
  body.has-fsw-bottombar .xcs-main-inner { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Panel tugas / modal menutupi layar penuh — bilah tidak boleh
     mengambang di atasnya (lihat opsLockScroll di ops-ui.jsx). */
  body.fsw-overlay-open .fsw-bbar { display: none; }
  /* Sidebar HP terbuka: bilah juga mundur. */
  .xcs-app.nav-open ~ .fsw-bbar, .xcs-app.nav-open .fsw-bbar { display: none; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .fsw-bbar-ico { transition: none; }
}

/* ── White board brainstorming ───────────────────────────────────────
   ATURAN PENTING: seluruh isi kanvas TIDAK menerima pointer. Semua gerakan
   ditangani satu handler di .fsw-bd-canvas dan item mana yang kena ditentukan
   dari koordinat. Tanpa aturan ini, kotak teks catatan menelan klik (catatan
   jadi tak bisa dipilih) dan pena mati begitu kursor di atas gambar. */
.fsw-bd { display: flex; flex-direction: column; gap: 10px; }

.fsw-bd-batchbtn {
  appearance: none; width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border-radius: 16px; font: inherit;
  border: 2px solid var(--fsw-ink); background: var(--fsw-ink); color: var(--fsw-card);
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.fsw-bd-batchbtn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.20); }
.fsw-bd-batchbtn-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fsw-bd-batchbtn-k { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .62; }
.fsw-bd-batchbtn-v { font-family: 'Jost', system-ui, sans-serif; font-size: 25px; font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; }
.fsw-bd-batchbtn-s { font-size: 12.5px; opacity: .72; }
.fsw-bd-batchbtn-cta { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: var(--fsw-radius-chip); background: var(--fsw-accent); color: var(--fsw-on-accent); }

.fsw-bd-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fsw-bd-tools { display: flex; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid var(--fsw-line); border-radius: 999px; background: var(--fsw-card); }
.fsw-bd-tool { appearance: none; border: 0; background: transparent; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fsw-ink-3); font: inherit; font-size: 16px; font-weight: 700; }
.fsw-bd-tool:hover { background: var(--fsw-tint); color: var(--fsw-ink); }
.fsw-bd-tool.is-on { background: var(--fsw-accent); color: var(--fsw-on-accent); }
.fsw-bd-sep { width: 1px; height: 20px; background: var(--fsw-line); margin: 0 3px; }
.fsw-bd-ink { width: 34px; height: 34px; border-radius: 999px; border: 0; cursor: pointer; padding: 0; background-clip: content-box; border: 6px solid transparent; }
.fsw-bd-ink:hover { border-width: 5px; }
.fsw-bd-ink.is-on { border-width: 4px; box-shadow: 0 0 0 2px var(--fsw-ink); }
.fsw-bd-size { appearance: none; border: 0; background: transparent; width: 34px; height: 34px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.fsw-bd-size span { background: var(--fsw-ink-3); border-radius: 999px; display: block; }
.fsw-bd-size.is-on { background: var(--fsw-tint); }
.fsw-bd-size.is-on span { background: var(--fsw-ink); }
.fsw-bd-zoom { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--fsw-ink-3); min-width: 42px; text-align: center; }

.fsw-bd-lanes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.fsw-bd-lane { appearance: none; white-space: nowrap; border: 1px solid var(--fsw-line); background: var(--fsw-card); color: var(--fsw-ink-2); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; }
.fsw-bd-lane:hover { border-color: var(--fsw-accent-line); }
.fsw-bd-lane.is-on { background: var(--fsw-ink); color: var(--fsw-card); border-color: var(--fsw-ink); }
.fsw-bd-n { font-size: 11px; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--fsw-accent-soft); color: var(--fsw-accent-ink); display: inline-flex; align-items: center; justify-content: center; }
.fsw-bd-lane.is-on .fsw-bd-n { background: rgba(255,255,255,.22); color: #fff; }

.fsw-bd-canvas {
  position: relative; overflow: hidden; height: min(70vh, 720px);
  border: 1px solid var(--fsw-line); border-radius: 14px; background: var(--fsw-card);
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: contain;
}
.fsw-bd-canvas.tool-pilih { cursor: grab; }
.fsw-bd-canvas.tool-pilih.is-grab { cursor: grabbing; }
.fsw-bd-canvas.tool-pena  { cursor: crosshair; }
.fsw-bd-canvas.tool-teks  { cursor: cell; }
.fsw-bd-canvas.tool-hapus { cursor: pointer; }
.fsw-bd-grid { position: absolute; inset: 0; background-image: radial-gradient(var(--fsw-line) 1px, transparent 1px); opacity: .7; pointer-events: none; }
.fsw-bd-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }

.fsw-bd-item { position: absolute; border-radius: 10px; pointer-events: none; }
.fsw-bd-item.is-sel { outline: 2px solid var(--fsw-accent-line); outline-offset: 2px; }
.fsw-bd-item.is-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; display: block; background: var(--fsw-tint); pointer-events: none; -webkit-user-drag: none; }
.fsw-bd-item.is-note { box-shadow: 0 2px 8px rgba(0,0,0,.10); border: 1px solid rgba(0,0,0,.06); }
/* Kotak teks hanya hidup saat benar-benar diedit (klik dua kali). Di luar itu
   ia tembus pointer, sehingga klik jatuh ke hit-test kanvas. */
.fsw-bd-note { width: 100%; height: 100%; border: 0; background: transparent; resize: none; padding: 10px 11px; font: inherit; font-size: 13.5px; line-height: 1.45; color: #1A1A1A; border-radius: 10px; outline: none; pointer-events: none; cursor: default; }
.fsw-bd-item.is-edit { outline: 2px solid var(--fsw-accent); }
.fsw-bd-item.is-edit .fsw-bd-note { pointer-events: auto; cursor: text; }
.fsw-bd-grip { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; border-radius: 3px; background: var(--fsw-accent); border: 2px solid var(--fsw-card); pointer-events: none; }
.fsw-bd-ink-l { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.fsw-bd-ink-l.is-sel path { filter: drop-shadow(0 0 4px var(--fsw-accent)); }

.fsw-bd-selbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px; background: var(--fsw-card); border: 1px solid var(--fsw-line); box-shadow: 0 6px 20px rgba(0,0,0,.16); z-index: 5; }
.fsw-bd-swatch { width: 18px; height: 18px; border-radius: 999px; border: 1px solid rgba(0,0,0,.14); cursor: pointer; padding: 0; }

.fsw-bd-veil { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--fsw-card) 70%, transparent); }
.fsw-bd-toast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: var(--fsw-ink); color: var(--fsw-card); font-size: 12.5px; font-weight: 600; z-index: 6; }
.fsw-bd-toast.is-soft { background: var(--fsw-accent); color: var(--fsw-on-accent); }
.fsw-bd-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fsw-ink-3); text-align: center; padding: 20px; pointer-events: none; }
.fsw-bd-empty b { color: var(--fsw-ink); font-size: 14px; }
.fsw-bd-empty span { font-size: 12.5px; max-width: 360px; line-height: 1.55; }
.fsw-bd-empty kbd { font-family: ui-monospace, monospace; font-size: 11px; border: 1px solid var(--fsw-line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 4px; background: var(--fsw-tint); }

.fsw-bd-picklist { display: flex; flex-direction: column; gap: 6px; }
.fsw-bd-pick { appearance: none; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--fsw-line); background: var(--fsw-card); font: inherit; }
.fsw-bd-pick:hover { border-color: var(--fsw-accent-line); background: var(--fsw-tint); }
.fsw-bd-pick.is-on { border-color: var(--fsw-ink); }
.fsw-bd-pick-n { font-weight: 700; font-size: 14px; flex: 1; }
.fsw-bd-pick-m { font-size: 12px; color: var(--fsw-ink-3); }

@media (max-width: 768px) {
  .fsw-bd-canvas { height: min(58vh, 460px); }
  .fsw-bd-batchbtn { padding: 13px 14px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .fsw-bd-batchbtn-v { font-size: 21px; }
  .fsw-bd-batchbtn-cta { align-self: stretch; justify-content: center; }
}

/* ── Perapian akhir: target sentuh & perataan ────────────────────────
   Semua angka di bawah berasal dari pengukuran, bukan perkiraan. Ambangnya
   32px: di bawah itu jari orang dewasa mulai sering meleset. Sengaja hanya
   di layar sentuh — di desktop kontrol kecil justru terasa rapi. */
@media (max-width: 768px) {
  /* Dropdown & isian: terukur 28px, terlalu tipis untuk jempol. */
  .fsw-input { padding: 11px 12px; font-size: 14px; }
  .fsw-input.is-sm { padding: 9px 10px; font-size: 13px; }
  .fsw-input, select.fsw-input, select.fsw-input.is-sm { min-height: 40px; }
  textarea.fsw-input { min-height: 72px; }

  /* Tab: terukur 30px. */
  .fsw-tab { padding: 9px 14px; min-height: 38px; }

  /* Kotak centang 13x13 praktis mustahil ditekan tepat. */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--fsw-ink); }
  .fsw-table input[type="checkbox"] { margin: 6px; }

  /* Tautan dalam kalimat & tombol teks kecil: area tekan diperlebar tanpa
     mengubah tampilan, lewat padding vertikal + margin negatif. */
  /* button.fsw-cl-name — bukan .fsw-cl-name: gaya aslinya disuntik dari dalam
     ops-clients.jsx dengan padding:0 dan memenangkan kaskade. */
  .fsw-ref, .xcs-link, button.fsw-cl-name, .fsw-section-toggle {
    padding-top: 9px; padding-bottom: 9px; margin-top: -9px; margin-bottom: -9px;
  }
  .fsw-section-toggle { min-height: 34px; }
  .xcs-link { min-width: 34px; }
  /* Margin negatif di atas memperluas area tekan SATU tautan. Ketika dua
     tautan-tombol bertetangga di satu sel — tombol urut ↑/↓ pada tabel
     timeline — kotak 35px keduanya bertindih 17px, dan separuh tombol bawah
     menekan tombol atas. Di sel seperti itu area tekannya dibuat dari
     ukuran kotaknya sendiri, bukan dari margin negatif. */
  .fsw-table td .xcs-link + .xcs-link,
  .fsw-table td .xcs-link:has(+ .xcs-link) {
    margin-top: 0; margin-bottom: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; min-height: 36px; vertical-align: middle;
  }
  /* Label centang: tinggi mengikuti teksnya (20px). Diberi lantai. */
  .fsw-check, label:has(> input[type="checkbox"]) { min-height: 40px; }

  /* Kotak centang tetap terlihat 20px, tapi area tekannya 36px. */
  /* padding+margin pada checkbox NATIVE menggeser kotaknya 8px keluar dari
     labelnya dan menempelkannya ke kontrol sebelah. Area tekan sudah dijamin
     oleh label .fsw-check (min-height 38px), jadi trik ini murni merugikan. */
  .fsw-table input[type="checkbox"] { margin: 0; padding: 0; }

  /* Header HP: hamburger 36, tombol tutup 40, avatar 36 — dirapikan ke 40. */
  .xcs-mobile-bar button, .xcs-mobile-bar .xcs-avatar { min-height: 40px; min-width: 40px; }
  .xcs-mobile-bar { align-items: center; }

  /* Kalender: chip tugas terukur 14px — nyaris tidak bisa ditekan. */
  /* display:flex mematikan text-overflow:ellipsis. Chip ini satu baris,
     jadi display:block + line-height sudah cukup dan elipsisnya hidup lagi. */
  .fsw-cal-item { padding: 7px 5px; font-size: 12px; min-height: 32px; display: block; line-height: 18px; }

  /* Header HP: tombol brand 26px. */
  .xcs-mobile-brand { min-height: 40px; }

  /* Pil saran di Tanya Sistem. */
  .fsw-suggest button { min-height: 38px; padding: 9px 14px; }

  /* Papan: pena & warna ikut membesar di layar sentuh. */
  .fsw-bd-ink { width: 38px; height: 38px; border-width: 7px; }
  .fsw-bd-ink.is-on { border-width: 5px; }
  .fsw-bd-size, .fsw-bd-tool, .fsw-bd-ink { width: 40px; height: 40px; }
  .fsw-bd-lane { min-height: 38px; }
}

/* Sel centang: labelnya yang jadi target tekan, bukan kotak 20px-nya. */
.fsw-cbcell { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; margin: -8px -6px; cursor: pointer; border-radius: 8px; }
.fsw-cbcell:hover { background: var(--fsw-tint); }
/* Tombol + penjelasannya: bertingkat, bukan bersaing di satu baris flex. */
.fsw-action-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fsw-action-stack .fsw-muted { font-size: 12.5px; line-height: 1.5; }
/* select di dalam baris aksi: .fsw-input lebarnya 100%, jadi tombol di
   sebelahnya selalu terdorong ke baris berikutnya. Dibatasi agar sebaris. */
.fsw-action-row > select.fsw-input { width: auto; flex: 0 1 260px; min-width: 160px; }
/* Kontrol di kepala kartu: kalau ruang sisa tidak cukup, turun satu baris
   penuh dan rata kanan — bukan terjepit lalu membungkus setengah-setengah.
   Terukur: header 1054px memberi hanya 333px untuk tiga kontrol ~430px. */
.fsw-card-h { flex-wrap: wrap; }
.fsw-card-h > .fsw-action-row { flex: 1 1 100%; min-width: 0; justify-content: flex-start; flex-wrap: wrap; }
.fsw-action-row { max-width: 100%; }

/* HANYA di HP: pemilih timeline memuat penanda "★ default" dan "dipakai N
   batch" — justru info yang menentukan aman-tidaknya menghapus — jadi ia
   dapat satu baris penuh supaya tidak pernah terpotong. Di layar lebar
   aturan ini TIDAK boleh berlaku: selectnya akan memakan seluruh baris
   1054px dan mendorong "+ Timeline baru" ke baris kedua. */
@media (max-width: 768px) {
  .fsw-action-row > select.fsw-input { flex: 1 1 100%; min-width: 0; }
}

/* ── Tarik untuk refresh ─────────────────────────────────────────── */
.fsw-ptr { position: fixed; top: 6px; left: 50%; z-index: 78; pointer-events: none; transition: transform .16s ease-out; }
.fsw-ptr-ring {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: var(--fsw-card); color: var(--fsw-ink-3);
  border: 1px solid var(--fsw-line); box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.fsw-ptr-ring.is-ready { color: var(--fsw-accent-ink); border-color: var(--fsw-accent-line); }
.fsw-ptr-ring.is-busy { color: var(--fsw-accent-ink); border-color: var(--fsw-accent-line); animation: fsw-ptr-spin .7s linear infinite; }
@keyframes fsw-ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fsw-ptr { transition: none; }
  .fsw-ptr-ring.is-busy { animation-duration: 1.6s; }
}

/* ── Alur klien (rantai tahap) ───────────────────────────────────── */
.fsw-flow-card { display: flex; flex-direction: column; gap: 14px; }
.fsw-flow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fsw-flow-head h3 { margin: 0 0 2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fsw-ink-4); font-weight: 800; }
.fsw-flow-head p { margin: 0; font-size: 13.5px; color: var(--fsw-ink-2); }
.fsw-flow-pct { text-align: right; flex: none; }
.fsw-flow-pct b { display: block; font-family: 'Jost', system-ui, sans-serif; font-size: 26px; font-weight: 600; line-height: 1; }
.fsw-flow-pct span { font-size: 11.5px; color: var(--fsw-ink-4); }

.fsw-flow { position: relative; }
/* Rel di belakang titik-titik; terisi sampai tahap yang sedang berjalan. */
.fsw-flow-rail { position: absolute; left: 0; right: 0; top: 15px; height: 3px; border-radius: 999px; background: var(--fsw-line); overflow: hidden; }
.fsw-flow-rail i { display: block; height: 100%; background: var(--fsw-accent-line); transition: width .35s ease; }
.fsw-flow-steps { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.fsw-flow-step {
  appearance: none; background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer;
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.fsw-flow-node {
  width: 33px; height: 33px; border-radius: 999px; display: grid; place-items: center;
  background: var(--fsw-card); border: 2px solid var(--fsw-line); color: var(--fsw-ink-4);
  transition: background-color .18s, border-color .18s, color .18s;
}
.fsw-flow-step.is-done .fsw-flow-node { background: var(--fsw-green, #2F9E5F); border-color: var(--fsw-green, #2F9E5F); color: #fff; }
.fsw-flow-step.is-live .fsw-flow-node { background: var(--fsw-accent); border-color: var(--fsw-accent-line); color: var(--fsw-on-accent); box-shadow: 0 0 0 4px var(--fsw-accent-soft); }
.fsw-flow-step.is-lock .fsw-flow-node { border-style: dashed; }
.fsw-flow-step.is-late .fsw-flow-node { border-color: var(--fsw-red); color: var(--fsw-red); }
.fsw-flow-step.is-late.is-live .fsw-flow-node { background: var(--fsw-red); border-color: var(--fsw-red); color: #fff; box-shadow: 0 0 0 4px var(--fsw-red-soft); }
.fsw-flow-l { font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--fsw-ink-2); overflow-wrap: anywhere; }
.fsw-flow-step.is-lock .fsw-flow-l { color: var(--fsw-ink-4); font-weight: 600; }
.fsw-flow-step.is-live .fsw-flow-l { color: var(--fsw-ink); }
.fsw-flow-n { font-size: 10.5px; color: var(--fsw-ink-4); font-variant-numeric: tabular-nums; }
.fsw-flow-n b { color: var(--fsw-red); font-weight: 700; }
.fsw-flow-step:hover .fsw-flow-node { border-color: var(--fsw-accent-line); }

/* Versi ringkas di kartu klien: rel + titik, tanpa label. */
.fsw-flow.is-compact { padding: 4px 0 2px; }
.fsw-flow.is-compact .fsw-flow-rail { top: 6px; height: 3px; }
.fsw-flow-dots { position: relative; display: flex; justify-content: space-between; }
.fsw-flow-dot { width: 15px; height: 15px; border-radius: 999px; background: var(--fsw-card); border: 2px solid var(--fsw-line); }
.fsw-flow-dot.is-done { background: var(--fsw-green, #2F9E5F); border-color: var(--fsw-green, #2F9E5F); }
.fsw-flow-dot.is-live { background: var(--fsw-accent); border-color: var(--fsw-accent-line); box-shadow: 0 0 0 3px var(--fsw-accent-soft); }
.fsw-flow-dot.is-lock { border-style: dashed; }
.fsw-flow-dot.is-late { border-color: var(--fsw-red); }

@media (max-width: 768px) {
  .fsw-flow-steps { gap: 2px; }
  .fsw-flow-node { width: 30px; height: 30px; }
  .fsw-flow-l { font-size: 10px; }
  .fsw-flow-n { font-size: 9.5px; }
  .fsw-flow-pct b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .fsw-flow-rail i, .fsw-flow-node { transition: none; } }

/* ── Klien yang dikeluarkan dari batch ────────────────────────────────
   Dipisah di bawah garis, bukan disembunyikan: PM masih perlu melihat
   siapa yang keluar, tapi jumlah kartu di atas garis harus sama persis
   dengan angka "21 klien" di header dan di tab. */
.fsw-gone { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--fsw-line); }
.fsw-gone-h {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fsw-ink-3); margin-bottom: 10px;
}

/* ── Baris aksi di kepala halaman batch ───────────────────────────────
   styles.css memberi flex:1 ke setiap tombol di .xcs-pagehead-cta pada
   layar HP. Untuk baris 2–3 tombol itu rapi, tapi kepala batch punya
   lima: tombol jadi lebar-lebar tak seragam dan labelnya pecah dua baris
   ("White / board", "Sinkron / tugas"). Di sini tombol memakai lebar
   aslinya, tingginya sama, dan labelnya tidak pernah dilipat. */
@media (max-width: 768px) {
  .fsw-page > .xcs-pagehead .xcs-pagehead-cta { flex-wrap: wrap; gap: 8px; row-gap: 8px; }
  .fsw-page > .xcs-pagehead .xcs-pagehead-cta .xcs-btn-primary,
  .fsw-page > .xcs-pagehead .xcs-pagehead-cta .xcs-btn-ghost {
    flex: 0 0 auto; white-space: nowrap;
    min-height: 40px; padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13.5px; line-height: 1;
  }
}

/* Disembunyikan hanya di HP: aksinya tetap tersedia lewat gerakan atau
   tombol lain, jadi tidak ada fungsi yang benar-benar hilang. */
@media (max-width: 768px) { .fsw-hide-mobile { display: none !important; } }

@media (max-width: 768px) {
  /* Kepala halaman menyisakan 18px padding DI DALAM + 24px celah halaman =
     42px kosong di bawah tombol, dua kali lipat jarak antar blok lain.
     Di layar lebar tombolnya sebaris dengan judul jadi tidak terasa. */
  .fsw-page > .xcs-pagehead { padding-bottom: 0 !important; }

  /* Enam tab tidak muat satu baris di HP: ia melipat jadi dua baris, dan
     tombol WhatsApp mengambang persis menutupi tab terakhir di baris kedua.
     Satu baris yang bisa digeser menyelesaikan keduanya sekaligus. */
  .fsw-tabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fsw-tabs::-webkit-scrollbar { display: none; }
  .fsw-tab { flex: 0 0 auto; scroll-snap-align: start; min-height: 38px; }
}

/* ── Asisten mengambang ───────────────────────────────────────────────
   Menggantikan tombol WhatsApp hijau di pojok kanan bawah. Warnanya
   memakai tinta merek (hitam) dengan cincin aksen — bukan hijau — supaya
   tidak lagi terbaca sebagai "aplikasi lain". */
.fsw-assist-fab {
  position: fixed; right: 20px; bottom: 20px;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--fsw-ink); color: #FFFFFF;
  border: 0; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
  z-index: 40;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fsw-assist-fab::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--fsw-accent-line); pointer-events: none; opacity: .55;
}
.fsw-assist-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.34); }
.fsw-assist-fab:active { transform: scale(.96); }
.fsw-assist-fab:focus-visible { outline: 3px solid var(--fsw-accent); outline-offset: 3px; }

.fsw-assist-wrap { position: fixed; inset: 0; z-index: 120; }
.fsw-assist-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.fsw-assist {
  position: absolute; right: 20px; bottom: 20px;
  width: min(420px, calc(100vw - 40px)); max-height: min(640px, calc(100vh - 40px));
  max-height: min(640px, calc(100dvh - 40px));
  background: var(--fsw-card); color: var(--fsw-ink);
  border: 1px solid var(--fsw-line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.30);
  display: flex; flex-direction: column; overflow: hidden;
}
.fsw-assist-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--fsw-line); flex: 0 0 auto;
}
.fsw-assist-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fsw-assist-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fsw-green); flex: 0 0 auto; }
.fsw-assist-id b { display: block; font-size: 14px; line-height: 1.2; }
.fsw-assist-id span { display: block; font-size: 11.5px; color: var(--fsw-ink-3); line-height: 1.3; }
.fsw-assist-x {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid var(--fsw-line); color: var(--fsw-ink-2);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.fsw-assist-x:hover { background: var(--fsw-tint); }
/* Disamakan dengan .fsw-x yang dipakai semua modal lain. Area tekan lewat
   ::after sempat dicoba tapi terukur hanya terjangkau di 2 dari 4 sisi,
   jadi kotaknya sendiri yang diperbesar. */
.fsw-assist-x { min-width: 36px; min-height: 36px; }
@media (max-width: 860px) {
  .fsw-assist-x { min-width: 44px; min-height: 44px; }
}

.fsw-assist-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fsw-assist-intro p { margin: 0 0 10px; font-size: 13px; color: var(--fsw-ink-2); line-height: 1.5; }
.fsw-assist-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.fsw-assist-quick.is-row {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: 8px 14px; border-top: 1px solid var(--fsw-line); flex: 0 0 auto;
}
.fsw-assist-quick.is-row::-webkit-scrollbar { display: none; }
.fsw-assist-quick button {
  flex: 0 0 auto; appearance: none; cursor: pointer;
  background: var(--fsw-tint); border: 1px solid var(--fsw-line); color: var(--fsw-ink-2);
  border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; white-space: nowrap; min-height: 34px;
}
.fsw-assist-quick button:hover { background: var(--fsw-card); border-color: var(--fsw-ink-3); color: var(--fsw-ink); }

.fsw-assist-msg { max-width: 94%; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.55; }
.fsw-assist-msg.is-q { align-self: flex-end; background: var(--fsw-ink); color: #FFFFFF; border-bottom-right-radius: 4px; }
.fsw-assist-msg.is-a { align-self: flex-start; background: var(--fsw-tint); border: 1px solid var(--fsw-line); border-bottom-left-radius: 4px; }
.fsw-assist-msg.is-a p { margin: 0 0 6px; }
.fsw-assist-msg.is-a p:last-child { margin-bottom: 0; }
.fsw-assist-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fsw-assist-refs button {
  appearance: none; cursor: pointer; font-family: inherit;
  background: var(--fsw-card); border: 1px solid var(--fsw-line); color: var(--fsw-ink-2);
  border-radius: 8px; padding: 5px 9px; font-size: 11.5px; font-weight: 600;
}
.fsw-assist-refs button:hover { border-color: var(--fsw-accent-line); color: var(--fsw-ink); }
.fsw-assist-note { margin-top: 6px; font-size: 11px; color: var(--fsw-ink-3); }

.fsw-assist-ask { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--fsw-line); flex: 0 0 auto; }
.fsw-assist-ask .fsw-input { flex: 1 1 auto; min-width: 0; }
.fsw-assist-ask .xcs-btn-primary {
  flex: 0 0 auto; width: 44px; min-height: 44px; padding: 0;
  display: grid; place-items: center;
}
.fsw-assist-f {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  padding: 9px 14px; border-top: 1px solid var(--fsw-line);
  background: var(--fsw-tint); flex: 0 0 auto;
}
.fsw-assist-link {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--fsw-ink-3); text-decoration: underline; text-underline-offset: 2px;
}
.fsw-assist-link:hover { color: var(--fsw-ink); }

@media (max-width: 768px) {
  /* Di HP panel jadi lembar penuh dari bawah: mengetik di kotak 420px yang
     mengambang di atas keyboard tidak pernah nyaman. */
  .fsw-assist {
    right: 0; left: 0; bottom: 0; width: auto;
    max-height: 88vh; max-height: 88dvh;
    border-radius: 16px 16px 0 0; border-bottom: 0;
  }
  /* Bilah bawah sudah disembunyikan oleh .fsw-overlay-open (opsLockScroll),
     jadi lembar ini tidak perlu memberi ruang untuknya. */
  .fsw-assist-fab { right: 16px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; }
  body:not(.has-fsw-bottombar) .fsw-assist-fab { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  body.fsw-overlay-open .fsw-assist-fab { display: none; }
}

/* ── Catatan tempel kalender ──────────────────────────────────────────
   Warnanya sengaja pucat: kalender sudah memakai merah untuk terlambat
   dan kuning untuk meeting, jadi catatan harus terbaca sebagai lapisan
   berbeda, bukan bersaing dengan tanda keparahan. */
.fsw-note.is-kuning, .fsw-cal-note.is-kuning, .fsw-swatch.is-kuning { --n-bg: #FFF6D6; --n-line: #E8D48A; }
.fsw-note.is-biru,   .fsw-cal-note.is-biru,   .fsw-swatch.is-biru   { --n-bg: #E2F1FB; --n-line: #9CC9E4; }
.fsw-note.is-hijau,  .fsw-cal-note.is-hijau,  .fsw-swatch.is-hijau  { --n-bg: #E3F5E9; --n-line: #98CFAE; }
.fsw-note.is-merah,  .fsw-cal-note.is-merah,  .fsw-swatch.is-merah  { --n-bg: #FDE6E6; --n-line: #E5A2A2; }
.fsw-note.is-ungu,   .fsw-cal-note.is-ungu,   .fsw-swatch.is-ungu   { --n-bg: #EFE8F9; --n-line: #BCA7DE; }

/* Chip di dalam sel tanggal */
.fsw-cal-note {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--n-bg, #FFF6D6); border: 1px solid var(--n-line, #E8D48A);
  color: #1A1A1A; border-radius: 6px; padding: 3px 6px;
  font-size: 11px; line-height: 1.3; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fsw-cal-d.is-click { cursor: pointer; }
.fsw-cal-d.is-click:hover { background: var(--fsw-tint); }
.fsw-cal-d.is-click:focus-visible { outline: 2px solid var(--fsw-accent); outline-offset: -2px; }

/* Panel rincian hari */
.fsw-day { display: flex; flex-direction: column; gap: 18px; }
.fsw-day-h {
  margin: 0 0 8px; font-family: 'Jost', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fsw-ink-3);
}
.fsw-day-items { display: flex; flex-direction: column; gap: 5px; }
.fsw-day-empty { margin: 0; font-size: 13px; color: var(--fsw-ink-3); }
.fsw-notes { display: flex; flex-direction: column; gap: 10px; }
/* Hanya catatan berwarna (kalender / papan) — jangan menimpa .fsw-note generik di :196 (tema gelap jadi tak terbaca). */
.fsw-notes .fsw-note, .fsw-note.is-kuning, .fsw-note.is-biru, .fsw-note.is-hijau, .fsw-note.is-merah, .fsw-note.is-ungu {
  background: var(--n-bg, #FFF6D6); border: 1px solid var(--n-line, #E8D48A);
  border-radius: 10px; padding: 10px 12px; color: #1A1A1A;
}
.fsw-note-b { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.fsw-note-f {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--n-line, #E8D48A);
  font-size: 11.5px; color: #4A4A4A;
}
.fsw-note-t { color: #5E5E5E; }
.fsw-note-acts { margin-left: auto; display: flex; gap: 4px; }
.fsw-note-acts button {
  appearance: none; cursor: pointer; background: rgba(255,255,255,.7);
  border: 1px solid var(--n-line, #E8D48A); border-radius: 7px;
  width: 28px; height: 28px; display: grid; place-items: center; color: #3A3A3A; padding: 0;
}
.fsw-note-acts button:hover { background: #FFFFFF; color: #0A0A0A; }
/* Nama penulis memakai OpsPerson yang mewarisi tinta tema gelap — di atas
   kertas catatan yang selalu terang, tintanya harus dipaksa gelap juga. */
.fsw-note .fsw-person, .fsw-note .fsw-person * { color: #1A1A1A; }

.fsw-note-in { width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px; }
.fsw-note-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.fsw-note-colors { display: flex; gap: 6px; }
.fsw-swatch {
  appearance: none; cursor: pointer; padding: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--n-bg); border: 1px solid var(--n-line);
}
.fsw-swatch.is-on { box-shadow: 0 0 0 2px var(--fsw-ink); }
.fsw-swatch:focus-visible { outline: 2px solid var(--fsw-accent); outline-offset: 2px; }
.fsw-note-btns { display: flex; gap: 8px; margin-left: auto; }

/* ── Zoom paksa iOS saat mengetik ─────────────────────────────────────
   Safari di iPhone memperbesar seluruh halaman begitu fokus masuk ke
   field yang font-size-nya di bawah 16px — dan tidak pernah mengecilkan
   lagi. Itulah yang merusak tampilan saat mengetik ID dan password:
   halamannya benar, kacanya yang digeser.
   Jalan pintas yang sering dipakai — maximum-scale=1 di meta viewport —
   mematikan cubit-perbesar untuk semua orang, termasuk yang memang
   membutuhkannya. Jadi yang dinaikkan font-nya, bukan haknya.
   Diukur: 2 field di layar masuk + 109 di dalam aplikasi ada di bawah
   ambang ini sebelum aturan ini ditambahkan. */
@media (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  textarea,
  select {
    font-size: 16px !important;
  }
  /* Tinggi barisnya dijaga tetap padat: yang naik hanya ukuran huruf,
     bukan bantalannya, supaya tabel rapat tidak ikut memuai. */
  .fsw-input.is-sm { padding: 7px 9px; }
  .fsw-input.is-sm.is-num { padding: 7px 8px; }
}

/* Aksi merusak: merah hanya pada garis dan teks, latarnya tetap netral
   sampai disentuh — supaya tidak bersaing dengan penanda "terlambat". */
.fsw-btn-danger { color: var(--fsw-red) !important; border-color: rgba(212,43,43,.45) !important; }
.fsw-btn-danger:hover:not(:disabled) { background: var(--fsw-red-soft) !important; border-color: var(--fsw-red) !important; }

/* ═══ Perbaikan dari sapuan UI 20 Sep 2026 ═══════════════════════════ */

/* Semua <select> memakai appearance:none (dari .fsw-input) tapi tidak ada
   yang menggambar panahnya kembali — jadi dropdown tidak bisa dibedakan
   dari kotak teks biasa. Panah digambar sebagai latar, dan bantalan kanan
   dinaikkan supaya teks pilihan tidak tertimpa panahnya. */
select.fsw-input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236E6E6E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
select.fsw-input.is-sm { background-position: right 7px center; padding-right: 22px; }
/* Tabel step sudah sempit; panahnya dihitung ke dalam lebar minimumnya. */
.fsw-steps-editor select.fsw-input { padding-right: 26px; }

/* Tinggi tombol dalam satu baris aksi harus seragam. Emoji 🗑 punya
   tinggi baris sendiri dan membuat satu tombol 5px lebih jangkung. */
.fsw-action-row > button { min-height: 32px; line-height: 1; }

/* Baris tombol kepala halaman — di DESKTOP. Perbaikan sebelumnya hanya
   dipasang di @media HP, jadi di layar lebar labelnya masih pecah dua
   baris dan tingginya campur 39/56/73px. */
.fsw-page > .xcs-pagehead { align-items: flex-start; }
.fsw-page > .xcs-pagehead > div:first-child { min-width: 0; }
@media (min-width: 1201px) {
  .fsw-page > .xcs-pagehead > div:first-child { flex: 1 1 340px; }
}
.fsw-page > .xcs-pagehead .xcs-pagehead-cta {
  flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: 0 1 auto;
}
.fsw-page > .xcs-pagehead .xcs-pagehead-cta > button {
  flex: 0 0 auto; white-space: nowrap; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Di bawah ~1200px kepala halaman kehabisan ruang: blok judul terperas
   sampai 126px dan eyebrow-nya jadi enam baris. Tombolnya turun ke bawah
   judul dengan lebar penuh — pola yang sudah dipakai di HP. */
@media (max-width: 1200px) {
  .fsw-page > .xcs-pagehead { flex-direction: column; align-items: stretch; gap: 12px; }
  .fsw-page > .xcs-pagehead .xcs-pagehead-cta { justify-content: flex-start; }
}

/* Deretan tab melipat jadi dua baris begitu ruangnya kurang — bahkan di
   1440 (kurang 5px). Satu baris menggulir terbaca sebagai satu deret tab;
   dua baris terbaca seperti dua kelompok yang berbeda. */

/* Tinggi bilah bawah terukur 76.5px, tapi kaki halaman hanya menyisakan
   70px — baris kreditnya tertutup permanen, bahkan di gulir paling bawah.
   Tingginya disimpan sekali sebagai variabel supaya kalau bilahnya berubah
   tidak ada lagi angka yang harus dikejar di tempat lain. */
:root { --fsw-bbar-h: 78px; }
@media (max-width: 768px) {
  body.has-fsw-bottombar .xcs-footer {
    padding-bottom: calc(var(--fsw-bbar-h) + 18px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Tombol asisten mengambang di pojok KANAN bawah menutupi tombol ✎/🗑 tiap
   kartu — yang di seluruh aplikasi ini selalu berada di pojok kanan atas
   kartu. Terukur: FAB x 324–374, aksi kartu x 314–376. Menggesernya
   mendatar tidak menolong karena keduanya memperebutkan kolom yang sama;
   FAB-nya yang pindah ke kiri. Sisi kiri kartu hanya berisi badan kartu
   (target besar), jadi tertutup sebagian tidak menghalangi apa pun. */
@media (max-width: 768px) {
  .fsw-assist-fab { right: auto; left: 16px; }
}

/* Menu akun sebelumnya hanya bisa ditutup dengan mengenai tepat di luar
   kotaknya, sementara halaman di belakangnya tetap bergulir 717px dan
   bilah bawah tetap bisa ditekan tanpa sengaja. Scrim transparan ini
   menutupnya dengan satu ketukan di mana pun. z-index 200 = tepat di
   bawah menunya (201). */
.xcs-acctmenu-scrim { position: fixed; inset: 0; z-index: 200; background: transparent; }

/* ── Hasil tahap sebelumnya (dibaca, bukan ditulis) ───────────────────
   Premis hasil Zoom adalah BAHAN BAKU tahap berikutnya. Sebelum ini,
   begitu tugas Zoom ditandai selesai kartunya keluar dari papan dan
   isinya tidak bisa dibaca dari mana pun — orang yang menulis Brief
   script kehilangan satu-satunya sumbernya. Sengaja dibedakan tegas
   dari kotak tulis di bawahnya: bergaris kiri, latar redup, tanpa
   kolom isian, supaya tidak ada yang mengira bisa mengetik di sini. */
.fsw-up {
  border: 1px solid var(--fsw-line); border-left: 3px solid var(--fsw-ink-3);
  border-radius: 10px; background: var(--fsw-tint); margin: 0 0 14px; overflow: hidden;
}
.fsw-up-t {
  display: flex; align-items: center; gap: 8px; width: 100%;
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 10px 12px; font-family: inherit; text-align: left; color: var(--fsw-ink);
  min-height: 42px;
}
.fsw-up-t:hover { background: var(--fsw-card); }
.fsw-up-l {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fsw-ink-3); flex: none;
}
.fsw-up-t b { font-size: 13.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsw-up-n { margin-left: auto; flex: none; font-size: 11.5px; color: var(--fsw-ink-3); }
.fsw-up .fsw-fold-c { flex: none; transition: transform .15s ease; }
.fsw-up.is-open .fsw-fold-c { transform: rotate(180deg); }
.fsw-up-b { padding: 0 12px 12px; }
.fsw-up-sc { border-top: 1px solid var(--fsw-line); padding-top: 9px; margin-top: 9px; }
.fsw-up-sc:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.fsw-up-sc-h { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.fsw-up-sc-h span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--fsw-ink-3); }
.fsw-up-sc-h b { font-size: 13px; }
.fsw-up-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 600; }

/* Tugas yang belum ditulis tidak lagi merender kosong sama sekali —
   sebelumnya tugas Brief script tampak seolah tidak punya tempat menulis. */
.fsw-read.is-empty { color: var(--fsw-ink-3); font-style: italic; }

/* ═══ D2b — layar Today / Klien / Posted / Team (21 Sep 2026) ══════════
   Kosakata kelas ini didefinisikan di migrasi/D2-kontrak.md §6.1 supaya
   tiga agen UI memakai satu bahasa gaya. Semua warna lewat token, bukan
   hex, agar tema gelap ikut. */

/* ── KPI baris atas ─────────────────────────────────────────────────── */
.fsw-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.fsw-kpi {
  appearance: none; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--fsw-card); border: var(--fsw-bw) solid var(--fsw-line); border-radius: var(--fsw-radius);
  padding: var(--fsw-kpi-pad); min-width: 0; color: var(--fsw-ink);
  transition: border-color .15s ease, transform .08s ease;
}
.fsw-kpi:hover { border-color: var(--fsw-ink-3); }
.fsw-kpi:active { transform: translateY(1px); }
.fsw-kpi:focus-visible { outline: 2px solid var(--fsw-accent); outline-offset: 2px; }
.fsw-kpi.is-static { cursor: default; }
.fsw-kpi.is-static:hover { border-color: var(--fsw-line); }
.fsw-kpi-l { font-size: var(--fsw-fs-micro); font-weight: var(--fsw-micro-fw); letter-spacing: var(--fsw-micro-ls); text-transform: var(--fsw-micro-tt); color: var(--fsw-ink-3); }
.fsw-kpi-v { font-size: var(--fsw-fs-kpi); font-weight: 700; line-height: 1.15; margin: 5px 0 3px; font-variant-numeric: tabular-nums; }
.fsw-kpi-v small { font-size: 12px; font-weight: 500; color: var(--fsw-ink-3); }
.fsw-kpi-d { font-size: 11px; color: var(--fsw-ink-2); }
.fsw-kpi.is-crit { border-color: rgba(212,43,43,.5); background: linear-gradient(var(--fsw-red-soft), var(--fsw-red-soft)), var(--fsw-card); }
.fsw-kpi.is-crit .fsw-kpi-v { color: var(--fsw-red); }
.fsw-kpi.is-warn .fsw-kpi-v { color: var(--fsw-amber); }
.fsw-kpi.is-good .fsw-kpi-v { color: var(--fsw-green); }

/* ── Pace bulan ─────────────────────────────────────────────────────── */
.fsw-pace { display: flex; align-items: center; gap: 14px; padding-top: 10px; }
.fsw-pace-track { flex: 1 1 auto; height: 10px; background: var(--fsw-tint); border-radius: 4px; position: relative; min-width: 0; }
.fsw-pace-fill { position: absolute; inset: 0 auto 0 0; background: var(--fsw-ink); border-radius: 4px; }
.fsw-pace-plan { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--fsw-accent); }
.fsw-pace-plan::after { content: 'plan'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--fsw-ink-3); white-space: nowrap; }
/* Penanda di ujung jalur: labelnya dijepit ke dalam, kalau tidak ia keluar
   dari kartu (terlihat di 390px sebagai teks menempel tepi layar). */
.fsw-pace-plan.is-start::after { left: 0; transform: none; }
.fsw-pace-plan.is-end::after { left: auto; right: 0; transform: none; }
.fsw-pace-n { flex: none; font-size: 12px; color: var(--fsw-ink-3); font-variant-numeric: tabular-nums; }

/* ── Red list ───────────────────────────────────────────────────────── */
.fsw-nowrap { white-space: nowrap; }
.fsw-sev { width: 6px; padding: 0 !important; }
.fsw-sev i { display: block; width: 3px; height: 28px; border-radius: 2px; background: var(--fsw-line); }
.fsw-sev i.is-crit { background: var(--fsw-red); }
.fsw-sev i.is-warn { background: var(--fsw-amber); }

/* ── Bar bulan kecil & titik minggu (tabel klien) ─────────────────── */
.fsw-mbar { display: flex; align-items: center; gap: 8px; }
.fsw-mbar-track { width: 96px; height: 6px; border-radius: 3px; background: var(--fsw-tint); display: flex; gap: 2px; overflow: hidden; flex: none; }
.fsw-mbar-seg { height: 100%; }
.fsw-mbar-seg.is-posted { background: var(--fsw-ink); }
.fsw-mbar-seg.is-ready { background: var(--fsw-ink-3); }
.fsw-mbar-n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fsw-ink-2); }
.fsw-wdots { display: flex; gap: 3px; }
.fsw-wdots i { width: 12px; height: 8px; border-radius: 2px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); }
.fsw-wdots i.is-posted { background: var(--fsw-green); border-color: var(--fsw-green); }
.fsw-wdots i.is-missed { background: var(--fsw-red); border-color: var(--fsw-red); }
.fsw-wdots i.is-scheduled { background: var(--fsw-accent); border-color: var(--fsw-accent); }
.fsw-wdots i.is-today { background: var(--fsw-ink); border-color: var(--fsw-ink); }
.fsw-wdots i.is-ahead { background: var(--fsw-tint); }

/* ── Bar periode: Bulan N dari 6 ────────────────────────────────────── */
.fsw-periode { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.fsw-periode-l { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--fsw-ink-2); white-space: nowrap; }
.fsw-periode-bar { height: 10px; border-radius: 5px; background: var(--fsw-tint); overflow: hidden; position: relative; }
.fsw-periode-fill { height: 100%; background: var(--fsw-ink); border-radius: 5px; transition: width .3s ease; }
.fsw-periode-r { font-size: 12px; color: var(--fsw-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Siklus 4 minggu ────────────────────────────────────────────────── */
.fsw-cycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .9fr); gap: 2px; }
.fsw-wk { background: var(--fsw-tint); padding: 10px 11px; min-height: 96px; min-width: 0; }
.fsw-wk:first-child { border-radius: 8px 0 0 8px; }
.fsw-wk:last-child { border-radius: 0 8px 8px 0; background: transparent; border: 1px dashed var(--fsw-line); }
.fsw-wk.is-done { opacity: .55; }
.fsw-wk.is-now { background: var(--fsw-accent-soft); box-shadow: inset 0 0 0 1px var(--fsw-accent-line); }
.fsw-wk-t { display: block; font-weight: 700; font-size: 12.5px; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsw-wk-s { color: var(--fsw-ink-3); font-size: 11px; }
.fsw-wk-m { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--fsw-ink-2); }

/* ── Papan reel 6 kolom ─────────────────────────────────────────────── */
.fsw-reels { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: thin; }
.fsw-reel-col { background: var(--fsw-tint); border-radius: 10px; padding: 8px; min-width: 0; }
.fsw-reel-col-h { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fsw-ink-3); display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 700; }
.fsw-reel {
  display: block; width: 100%; text-align: left; font-family: inherit; color: var(--fsw-ink);
  background: var(--fsw-card); border: 1px solid var(--fsw-line); border-radius: 8px;
  padding: 8px 9px; margin-bottom: 6px; font-size: 11.5px; cursor: pointer;
}
.fsw-reel:hover { border-color: var(--fsw-ink-3); }
.fsw-reel:focus-visible { outline: 2px solid var(--fsw-accent); outline-offset: 1px; }
.fsw-reel-n { color: var(--fsw-ink-3); font-size: 10px; display: flex; justify-content: space-between; gap: 6px; }
.fsw-reel-t { margin: 3px 0 7px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.fsw-reel-f { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.fsw-reel-acts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.fsw-reel-acts .xcs-btn-ghost, .fsw-reel-acts .xcs-btn-primary { padding: 4px 9px; font-size: 11px; min-height: 30px; }
.fsw-reel.is-flash { animation: fsw-reel-flash 1s ease; }
@keyframes fsw-reel-flash { from { border-color: var(--fsw-accent); box-shadow: 0 0 0 3px var(--fsw-accent-soft); } to { } }

/* ── Progres bertumpuk & legenda ────────────────────────────────────── */
.fsw-stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; margin: 4px 0 10px; background: var(--fsw-tint); }
.fsw-stack span { height: 100%; min-width: 2px; }
.fsw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--fsw-ink-2); }
.fsw-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* ── Kalender tayang bulan (kecil, di dalam kartu) ──────────────────── */
.fsw-pcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; font-size: 11px; }
.fsw-pcal-h { color: var(--fsw-ink-3); text-align: center; padding-bottom: 2px; font-weight: 700; }
.fsw-pcal-d { background: var(--fsw-tint); border-radius: 6px; height: 34px; padding: 3px 5px; color: var(--fsw-ink-3); position: relative; min-width: 0; }
.fsw-pcal-d.is-x { background: transparent; }
.fsw-pcal-d.is-today { box-shadow: inset 0 0 0 1px var(--fsw-accent); color: var(--fsw-ink); }
.fsw-pcal-dot { position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border-radius: 50%; }
.fsw-pcal-dot.is-posted { background: var(--fsw-green); }
.fsw-pcal-dot.is-missed { background: var(--fsw-red); }
.fsw-pcal-dot.is-scheduled { box-shadow: inset 0 0 0 1.5px var(--fsw-accent); }
.fsw-pcal-dot.is-waiting { background: var(--fsw-amber); }
.fsw-pcal-dot.is-planned { box-shadow: inset 0 0 0 1.5px var(--fsw-ink-3); }

/* ── C1 §5 — Kalender operasi & jadwal tayang (satu halaman, banyak mode) ──
   Awalan sendiri: .fsw-cal-* milik mode Team dan .fsw-pcal-* milik kartu klien,
   jadi keduanya TIDAK boleh dipakai ulang. Metrik (kolom, jarak, radius, tinggi
   sel, ukuran huruf) disalin persis dari .fsw-cal supaya kisi tidak melompat
   saat pemakai berganti mode di halaman yang sama.
   Warna kotak = keputusan pemilik: putih belum diedit, biru sudah diedit
   (termasuk lolos QC), hijau sudah tayang. Semuanya lewat token supaya kembaran
   gelap cukup satu tempat. */
:root {
  --fsw-ccal-raw-bg:    var(--fsw-card);
  --fsw-ccal-raw-line:  var(--fsw-line);
  --fsw-ccal-raw-ink:   var(--fsw-ink-3);
  /* Nilai biru/hijau sama dengan catatan tempel kalender (baris ~1310) supaya
     satu halaman tidak memakai dua biru pucat yang berbeda. */
  --fsw-ccal-ed-bg:     #E2F1FB;
  --fsw-ccal-ed-line:   #9CC9E4;
  --fsw-ccal-ed-ink:    #1D6FA5;
  --fsw-ccal-post-bg:   #E3F5E9;
  --fsw-ccal-post-line: #98CFAE;
  --fsw-ccal-post-ink:  #2F7A4E;
}
.fsw-ccal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.fsw-ccal-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fsw-ink-4); font-weight: 800; text-align: center; padding: 4px 0; }
.fsw-ccal-d { min-width: 0; min-height: 96px; border: 1px solid var(--fsw-ccal-raw-line); border-radius: 10px; background: var(--fsw-ccal-raw-bg); padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.fsw-ccal-d.is-other { opacity: .45; }
.fsw-ccal-d.is-today { border-color: var(--xcs-blue); box-shadow: inset 0 0 0 1px var(--xcs-blue); }
.fsw-ccal-n { font-weight: 800; font-size: 12px; color: var(--fsw-ccal-raw-ink); }
.fsw-ccal-d.is-today .fsw-ccal-n { color: var(--xcs-blue); }
.fsw-ccal-d.is-raw { background: var(--fsw-ccal-raw-bg); border-color: var(--fsw-ccal-raw-line); }
.fsw-ccal-d.is-raw .fsw-ccal-n { color: var(--fsw-ccal-raw-ink); }
.fsw-ccal-d.is-edited { background: var(--fsw-ccal-ed-bg); border-color: var(--fsw-ccal-ed-line); }
.fsw-ccal-d.is-edited .fsw-ccal-n { color: var(--fsw-ccal-ed-ink); }
.fsw-ccal-d.is-posted { background: var(--fsw-ccal-post-bg); border-color: var(--fsw-ccal-post-line); }
.fsw-ccal-d.is-posted .fsw-ccal-n { color: var(--fsw-ccal-post-ink); }
/* Hari ini tetap menang atas warna keadaan: bingkainya penanda posisi, bukan status. */
.fsw-ccal-d.is-today { border-color: var(--xcs-blue); }
.fsw-ccal-d.is-click { cursor: pointer; }
.fsw-ccal-d.is-click:hover { filter: brightness(.97); }
.fsw-ccal-d.is-click:focus-visible { outline: 2px solid var(--fsw-accent); outline-offset: -2px; }
/* Chip reel: metrik .fsw-cal-item, tapi latarnya transparan supaya warna
   keadaan kotak tetap terbaca sebagai bidang utuh. */
.fsw-ccal-chip { appearance: none; border: 0; text-align: left; font-family: inherit; cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fsw-ink); background: rgba(10,10,10,.05); border-left: 3px solid var(--fsw-ccal-raw-line); }
.fsw-ccal-chip.is-raw { border-left-color: var(--fsw-ink-4); }
.fsw-ccal-chip.is-edited { border-left-color: var(--fsw-ccal-ed-ink); }
.fsw-ccal-chip.is-posted { border-left-color: var(--fsw-ccal-post-ink); }
.fsw-ccal-chip.is-more { color: var(--fsw-ink-4); background: transparent; border-left-color: transparent; cursor: default; }
.fsw-ccal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--fsw-ink-2); align-items: center; }
.fsw-ccal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--fsw-ccal-raw-line); background: var(--fsw-ccal-raw-bg); }
.fsw-ccal-legend i.is-edited { background: var(--fsw-ccal-ed-bg); border-color: var(--fsw-ccal-ed-line); }
.fsw-ccal-legend i.is-posted { background: var(--fsw-ccal-post-bg); border-color: var(--fsw-ccal-post-line); }
[data-theme="dark"] {
  --fsw-ccal-ed-bg:     rgba(54,150,220,.20);
  --fsw-ccal-ed-line:   rgba(124,192,240,.50);
  --fsw-ccal-ed-ink:    #8CC8F0;
  --fsw-ccal-post-bg:   rgba(76,194,123,.18);
  --fsw-ccal-post-line: rgba(76,194,123,.48);
  --fsw-ccal-post-ink:  #4CC27B;
}
[data-theme="dark"] .fsw-ccal-chip { background: rgba(255,255,255,.06); }
[data-theme="dark"] .fsw-ccal-d.is-click:hover { filter: brightness(1.18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fsw-ccal-ed-bg:     rgba(54,150,220,.20);
    --fsw-ccal-ed-line:   rgba(124,192,240,.50);
    --fsw-ccal-ed-ink:    #8CC8F0;
    --fsw-ccal-post-bg:   rgba(76,194,123,.18);
    --fsw-ccal-post-line: rgba(76,194,123,.48);
    --fsw-ccal-post-ink:  #4CC27B;
  }
  :root:not([data-theme]) .fsw-ccal-chip { background: rgba(255,255,255,.06); }
  :root:not([data-theme]) .fsw-ccal-d.is-click:hover { filter: brightness(1.18); }
}
/* ── Kalender operasi di HP ────────────────────────────────────────────
   Sama seperti .fsw-cal (~1316): di 360px satu sel hanya ~46px, jadi teks
   chip tinggal dua huruf. Chip diganti titik dan yang jadi target tekan
   adalah seluruh sel — warnanya sendiri sudah membawa informasi utama. */
@media (max-width: 640px) {
  .fsw-ccal { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .fsw-ccal-d { min-height: 64px; padding: 5px 4px; flex-flow: row wrap; align-items: flex-start; align-content: flex-start; gap: 3px; }
  .fsw-ccal-n { flex: 0 0 100%; }
  .fsw-ccal .fsw-ccal-chip {
    flex: 0 0 auto; width: 8px; height: 8px; min-height: 0; min-width: 0; max-height: 8px;
    padding: 0; border: 0; border-radius: 50%; display: block;
    font-size: 0; line-height: 0; overflow: hidden; pointer-events: none;
    background: var(--fsw-ink-3); color: transparent; box-shadow: none;
  }
  .fsw-ccal .fsw-ccal-chip.is-edited { background: var(--fsw-ccal-ed-ink); }
  .fsw-ccal .fsw-ccal-chip.is-posted { background: var(--fsw-ccal-post-ink); }
  .fsw-ccal .fsw-ccal-chip.is-more { flex: 0 0 100%; width: auto; height: auto; max-height: none; font-size: 11px; line-height: 1.2; background: transparent; color: var(--fsw-ink-4); border-radius: 0; }
  .fsw-ccal-legend { gap: 4px 12px; }
}

/* ── Tabel Posted: baris melebar & jejak approval ───────────────────── */
tr.fsw-exp td { background: var(--fsw-tint); white-space: normal; }
.fsw-expg { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); gap: 20px; padding: 6px 4px 10px; }
.fsw-trail { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; }
.fsw-trail > div { display: flex; gap: 10px; }
.fsw-trail > div > span:first-child { color: var(--fsw-ink-3); width: 96px; flex: none; font-variant-numeric: tabular-nums; }
.fsw-spark { display: block; }

/* ── Titik "approved hari ini" di kartu editor ──────────────────────── */
.fsw-dots { display: flex; gap: 3px; }
.fsw-dots i { width: 12px; height: 8px; border-radius: 2px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); }
.fsw-dots i.is-on { background: var(--fsw-ink); border-color: var(--fsw-ink); }

/* ── Responsif ──────────────────────────────────────────────────────── */
/* 6 KPI sebaris baru muat di atas ~1300px (sidebar 240px sudah dipotong).
   Di 1180px lebarnya 122px — labelnya membungkus dan kartunya memanjang. */
@media (max-width: 1300px) { .fsw-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .fsw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsw-kpi-v { font-size: var(--fsw-fs-kpi-hp); }
  .fsw-cycle { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; }
  .fsw-reels { grid-template-columns: repeat(7, minmax(160px, 1fr)); }
  .fsw-expg { grid-template-columns: 1fr; }
  .fsw-periode { grid-template-columns: 1fr auto; }
  .fsw-periode-l { grid-column: 1 / -1; }
  .fsw-mbar-track { width: 72px; }
}

/* ═══ B1 — cetak biru "Frazier Ops" (21 Sep 2026) ══════════════════════
   Kelas tambahan di atas kosakata D2b; didefinisikan di migrasi/B1-cetak-biru.md §4.
   Semua warna lewat token supaya tema gelap ikut. */

/* ── Tata letak dua kolom ───────────────────────────────────────────── */
.fsw-row2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.fsw-row2.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fsw-row2 > .fsw-card { min-width: 0; }
/* Kolom kiri .fsw-row2 berisi TABEL. Dengan sidebar 240px, di bawah ~1200px
   lebarnya jatuh di bawah ~520px dan kolom "Issue" pecah jadi 8-9 baris —
   satu baris tabel setinggi 180px (terukur di 1024px). Ditumpuk sebelum
   itu terjadi; di bawah 900px aturan lama tetap berlaku dan sama saja. */
@media (max-width: 1200px) {
  .fsw-row2, .fsw-row2.is-even { grid-template-columns: minmax(0, 1fr); }
}

/* ── Kepala klien ───────────────────────────────────────────────────── */
.fsw-hdr { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.fsw-hdr-ph { width: 52px; height: 52px; border-radius: 12px; background: var(--fsw-tint); border: 1px solid var(--fsw-line); display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--fsw-ink-2); flex: none; }
.fsw-hdr-b { flex: 1 1 240px; min-width: 0; }
.fsw-hdr-b h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fsw-hdr-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.fsw-kvl { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--fsw-ink-2); font-size: 12.5px; }
.fsw-kvl + .fsw-kvl { margin-top: 4px; }
.fsw-kvl b { color: var(--fsw-ink-3); font-weight: 600; margin-right: 4px; }
.fsw-kvl a { color: inherit; text-decoration: underline; text-decoration-color: var(--fsw-line); }

/* ── Filter (Tayang) ────────────────────────────────────────────────── */
.fsw-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fsw-sel, .fsw-filters .fsw-input { background: var(--fsw-card); border: 1px solid var(--fsw-line); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 12.5px; color: var(--fsw-ink); min-height: 34px; }
.fsw-sel:focus-visible, .fsw-tog:focus-visible { outline: 2px solid var(--fsw-accent); outline-offset: 2px; }
.fsw-tog { appearance: none; font: inherit; font-size: 12.5px; cursor: pointer; background: var(--fsw-card); border: 1px solid var(--fsw-line); border-radius: 8px; padding: 6px 10px; color: var(--fsw-ink-2); min-height: 34px; }
.fsw-tog.is-on { border-color: var(--fsw-accent-line); color: var(--fsw-accent-ink); background: var(--fsw-accent-soft); }
.fsw-filters .is-right { margin-left: auto; }

/* ── Daftar baris ringkas (slot hari ini, antrian, aktivitas) ───────── */
.fsw-list { display: flex; flex-direction: column; }
.fsw-it { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--fsw-line); min-height: 44px; font-size: 13px; }
.fsw-it:last-child { border-bottom: 0; }
.fsw-it-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsw-it-t.is-wrap { white-space: normal; }
.fsw-it-tm { flex: none; width: 96px; color: var(--fsw-ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fsw-it.is-click { cursor: pointer; }
.fsw-it.is-click:hover .fsw-it-t { color: var(--fsw-accent-ink); }
.fsw-it .fsw-it-acts { display: flex; gap: 6px; flex: none; }

/* ── Lompat ke klien ────────────────────────────────────────────────── */
.fsw-jump { position: relative; }
.fsw-jump input { width: 220px; max-width: 100%; background: var(--fsw-card); border: 1px solid var(--fsw-line); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; color: var(--fsw-ink); min-height: 36px; }
.fsw-jump input::placeholder { color: var(--fsw-ink-3); }

/* ── Grafik views & jalur tahap ─────────────────────────────────────── */
.fsw-chart { display: block; width: 100%; height: auto; }
.fsw-chart text { font-family: inherit; fill: var(--fsw-ink-3); }
.fsw-chart .is-grid { stroke: var(--fsw-line); }
.fsw-chart .is-bar { fill: var(--fsw-ink-3); }
.fsw-chart .is-bar.is-fyp { fill: var(--fsw-accent); }
.fsw-chart .is-fypline { stroke: var(--fsw-ink); stroke-dasharray: 3 3; }
.fsw-chart .is-avgline { stroke: var(--fsw-ink-3); }

/* ── C1 §6 — grafik garis banyak seri (OpsTrendChart) ──────────────────
   .fsw-chart di atas hanya menyiapkan batang + dua garis tunggal; grafik tren
   tim butuh satu garis per orang, jadi yang ditambahkan hanya: warna goresan
   per seri, garis target putus-putus, dan legenda kecil.
   CATATAN: nova-ui.css memuat SESUDAH berkas ini dan menulis ulang
   .is-bar/.is-fypline/.is-avgline. Kelas di bawah sengaja bernama lain
   (.is-ser*/.is-target) supaya tidak ikut tertimpa. */
:root {
  --fsw-ser-1: #1F6FB2; --fsw-ser-2: #C2561E; --fsw-ser-3: #2F7A4E;
  --fsw-ser-4: #8A4FBF; --fsw-ser-5: #B3236B; --fsw-ser-6: #6E6E6E;
}
.fsw-chart .is-ser { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fsw-chart .is-ser-1 { stroke: var(--fsw-ser-1); } .fsw-chart .is-ser-2 { stroke: var(--fsw-ser-2); }
.fsw-chart .is-ser-3 { stroke: var(--fsw-ser-3); } .fsw-chart .is-ser-4 { stroke: var(--fsw-ser-4); }
.fsw-chart .is-ser-5 { stroke: var(--fsw-ser-5); } .fsw-chart .is-ser-6 { stroke: var(--fsw-ser-6); }
.fsw-chart .is-ser.is-team { stroke: var(--fsw-ink); stroke-width: 2.5; }
.fsw-chart .is-dot { stroke: none; }
.fsw-chart .is-dot-1 { fill: var(--fsw-ser-1); } .fsw-chart .is-dot-2 { fill: var(--fsw-ser-2); }
.fsw-chart .is-dot-3 { fill: var(--fsw-ser-3); } .fsw-chart .is-dot-4 { fill: var(--fsw-ser-4); }
.fsw-chart .is-dot-5 { fill: var(--fsw-ser-5); } .fsw-chart .is-dot-6 { fill: var(--fsw-ser-6); }
/* Garis target: putus-putus dan lebih tipis supaya terbaca sebagai ambang,
   bukan sebagai seri ketujuh. */
.fsw-chart .is-target { fill: none; stroke: var(--fsw-ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fsw-chart .is-target-l { fill: var(--fsw-ink-3); font-size: 10px; }
.fsw-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--fsw-ink-2); align-items: center; margin-top: 6px; }
.fsw-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fsw-chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--fsw-ink-3); }
.fsw-chart-legend i.is-ser-1 { background: var(--fsw-ser-1); } .fsw-chart-legend i.is-ser-2 { background: var(--fsw-ser-2); }
.fsw-chart-legend i.is-ser-3 { background: var(--fsw-ser-3); } .fsw-chart-legend i.is-ser-4 { background: var(--fsw-ser-4); }
.fsw-chart-legend i.is-ser-5 { background: var(--fsw-ser-5); } .fsw-chart-legend i.is-ser-6 { background: var(--fsw-ser-6); }
.fsw-chart-legend i.is-team { background: var(--fsw-ink); }
[data-theme="dark"] {
  --fsw-ser-1: #6FB6F0; --fsw-ser-2: #F0A05A; --fsw-ser-3: #5CC98A;
  --fsw-ser-4: #C09BE8; --fsw-ser-5: #F07AB0; --fsw-ser-6: #B0B0B0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fsw-ser-1: #6FB6F0; --fsw-ser-2: #F0A05A; --fsw-ser-3: #5CC98A;
    --fsw-ser-4: #C09BE8; --fsw-ser-5: #F07AB0; --fsw-ser-6: #B0B0B0;
  }
}

/* ── C1 §7 — matriks KPI (Pengaturan) & dua kartu QC (halaman Tim) ─────
   Dua kartu QC berdampingan: .fsw-row2.is-even yang sudah ada sudah tepat
   (dua kolom sama lebar, menumpuk di ≤1200px) — tidak ada aturan baru.
   Tabelnya juga .fsw-table biasa; yang benar-benar kurang hanya lebar ruas
   angka (bawaan .fsw-table .fsw-input 90px terlalu lebar untuk 3 kolom
   angka + 1 kolom satuan) dan penanda di bawah/di atas target. */
.fsw-kpim .fsw-input { min-width: 0; width: 100%; max-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.fsw-kpim .fsw-input.is-unit { max-width: 160px; text-align: left; }
.fsw-kpim td.num, .fsw-kpim th.num { white-space: nowrap; }
.fsw-kpim-v { font-variant-numeric: tabular-nums; font-weight: 700; }
.fsw-kpim-v.is-over { color: var(--fsw-kpim-over); }
.fsw-kpim-v.is-under { color: var(--fsw-kpim-under); }
.fsw-kpim-v.is-none { color: var(--fsw-ink-4); font-weight: 600; }
.fsw-kpim-u { color: var(--fsw-ink-3); font-size: 11.5px; }
:root { --fsw-kpim-over: #2F9E5F; --fsw-kpim-under: #C98A1B; }
[data-theme="dark"] { --fsw-kpim-over: #4CC27B; --fsw-kpim-under: #E0A33A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --fsw-kpim-over: #4CC27B; --fsw-kpim-under: #E0A33A; }
}
.fsw-stagepath { display: flex; flex-wrap: wrap; gap: 6px; }
.fsw-stagepath .fsw-chip.is-past { opacity: .6; }
.fsw-stagepath .fsw-chip.is-ahead { background: transparent; border: 1px solid var(--fsw-line); color: var(--fsw-ink-3); }

/* ── Catatan / pengantar ────────────────────────────────────────────── */
.fsw-intro { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: linear-gradient(90deg, var(--fsw-accent-soft), transparent); border: 1px solid var(--fsw-accent-line); border-radius: 10px; padding: 10px 14px; color: var(--fsw-ink-2); font-size: 13px; }
.fsw-intro b { color: var(--fsw-accent-ink); font-weight: 600; }
.fsw-intro .is-right { margin-left: auto; }
.fsw-note { font-size: 12px; color: var(--fsw-ink-3); margin: 8px 0 0; }
.fsw-note.is-crit { color: var(--fsw-red); }

/* ── Tombol kecil di kartu/baris (selain .fsw-reel-acts) ───────────── */
.fsw-it .xcs-btn-ghost, .fsw-it .xcs-btn-primary, .fsw-table .xcs-btn-ghost, .fsw-table .xcs-btn-primary, .fsw-wk .xcs-btn-ghost { padding: 4px 9px; font-size: 11.5px; min-height: 30px; width: auto; }

@media (max-width: 900px) {
  .fsw-row2, .fsw-row2.is-even { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .fsw-jump input { width: 100%; }
  .fsw-it .xcs-btn-ghost, .fsw-it .xcs-btn-primary, .fsw-table .xcs-btn-ghost, .fsw-table .xcs-btn-primary, .fsw-reel-acts .xcs-btn-ghost, .fsw-reel-acts .xcs-btn-primary { min-height: 40px; }
  .fsw-filters .is-right { margin-left: 0; }
  .fsw-it-tm { width: 78px; }
}

/* ── B1 tambahan (permintaan agen, 21 Sep 2026 malam) ──────────────── */
.fsw-section-toggle { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.fsw-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fsw-kpis.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fsw-kpis.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.fsw-wdots i.is-waiting { background: var(--fsw-amber); border-color: var(--fsw-amber); }
.fsw-legend i.is-dot { border-radius: 50%; }
.fsw-filters .fsw-input { width: auto; min-width: 180px; flex: 1 1 180px; }
.fsw-cycle .fsw-wk.is-next:not(:last-child) { box-shadow: inset 0 0 0 1px var(--fsw-line); }
@media (max-width: 1100px) {
  .fsw-kpis.is-4, .fsw-kpis.is-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  /* Tiga kolom di HP membuat kartu KPI tinggal 129px pada 320px — angkanya
     masih terbaca, labelnya ("need action today") pecah tiga baris. Dua
     kolom menjaga lebarnya di atas ~150px. */
  .fsw-kpis.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsw-kpis.is-4, .fsw-kpis.is-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsw-sel, .fsw-tog, .fsw-tab, .fsw-filters .fsw-input, .fsw-wk .xcs-btn-ghost { min-height: 44px; }
  .fsw-page > .xcs-pagehead .xcs-pagehead-cta .xcs-btn-ghost,
  .fsw-page > .xcs-pagehead .xcs-pagehead-cta .xcs-btn-primary { min-height: 44px; }
  .fsw-filters .fsw-input { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .fsw-kpis.is-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ B2 — geser-taruh papan reel, menu ⋮, pemilih pod (22 Sep 2026) ═════
   Kosakata di migrasi/B2-spec.md §7 dan §5. */

/* ── Kartu reel yang bisa digeser ───────────────────────────────────── */
.fsw-reel { position: relative; }
.fsw-reel[draggable="true"] { cursor: grab; }
.fsw-reel[draggable="true"]:active { cursor: grabbing; }
.fsw-reel.is-drag { opacity: .45; outline: 1px dashed var(--fsw-ink-3); }
.fsw-reel-col.is-over { background: var(--fsw-accent-soft); box-shadow: inset 0 0 0 1px var(--fsw-accent-line); }
.fsw-reel-col.is-no { background: var(--fsw-red-soft); }
.fsw-reel-col { border-radius: var(--fsw-radius-sm); transition: background .12s ease, box-shadow .12s ease; }

/* ── Tombol ⋮ pada kartu ────────────────────────────────────────────── */
.fsw-reel-menu {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  appearance: none; background: transparent; border: 1px solid transparent; border-radius: 7px;
  width: 30px; height: 30px; min-height: 30px; padding: 0; cursor: pointer; color: var(--fsw-ink-3);
  display: inline-flex; align-items: center; justify-content: center; font: inherit; line-height: 1;
}
.fsw-reel-menu:hover { background: var(--fsw-tint); border-color: var(--fsw-line); color: var(--fsw-ink); }
.fsw-reel-menu:focus-visible { outline: 2px solid var(--fsw-accent); outline-offset: 1px; }
.fsw-reel-menu-dots { font-size: 16px; font-weight: 700; letter-spacing: 1px; }

/* ── Menu melayang (pindahkan ke …) ─────────────────────────────────── */
.fsw-menu-scrim { position: fixed; inset: 0; z-index: 60; background: transparent; }
.fsw-menu {
  position: fixed; z-index: 61; min-width: 210px; max-width: min(300px, 92vw);
  background: var(--fsw-card); border: var(--fsw-bw) solid var(--fsw-line); border-radius: var(--fsw-radius-md);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.45); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.fsw-menu-h { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fsw-ink-3); padding: 6px 8px 4px; }
.fsw-menu-item {
  appearance: none; text-align: left; font: inherit; font-size: 13px; cursor: pointer;
  background: transparent; border: 0; border-radius: 7px; padding: 9px 10px; min-height: 40px; color: var(--fsw-ink);
  display: flex; flex-direction: column; gap: 2px;
}
.fsw-menu-item:hover:not(.is-off) { background: var(--fsw-tint); }
.fsw-menu-item:focus-visible { outline: 2px solid var(--fsw-accent); outline-offset: -2px; }
.fsw-menu-item.is-off { color: var(--fsw-ink-3); cursor: not-allowed; }
.fsw-menu-reason { font-size: 11px; color: var(--fsw-ink-3); }
.fsw-menu-sep { height: 1px; background: var(--fsw-line); margin: 4px 2px; }

/* ── Pemilih pod di sidebar ─────────────────────────────────────────── */
.fsw-pods { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.fsw-pods-h { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--xcs-side-ink-3, #8F8F8F); padding: 0 8px 4px; }
.fsw-pod {
  appearance: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; width: 100%;
  background: transparent; border: 0; border-radius: 8px; padding: 8px 10px; min-height: 40px;
  color: var(--xcs-side-ink-2, #BFB6B6); display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.fsw-pod:hover { background: rgba(255,255,255,.06); color: #FFF; }
.fsw-pod.is-on { background: var(--fsw-accent-soft); color: var(--fsw-accent-side); }
.fsw-pod.is-off { opacity: .55; }
.fsw-pod-n { font-size: 10.5px; color: var(--xcs-side-ink-3, #8F8F8F); font-variant-numeric: tabular-nums; }
.fsw-pod.is-on .fsw-pod-n { color: inherit; }

@media (max-width: 768px) {
  .fsw-reel-menu { width: 44px; height: 44px; min-height: 44px; }
  .fsw-menu-item { min-height: 44px; }
  .fsw-pod { min-height: 44px; }
}

/* ═══ B3 — tahap "Shooting video" (22 Sep 2026) ════════════════════════
   Papan reel jadi 7 kolom (lihat migrasi/B3-spec.md §1). Di layar sempit
   papan tetap bergulir mendatar seperti sebelumnya. */
@media (min-width: 1600px) { .fsw-reels { grid-template-columns: repeat(7, minmax(170px, 1fr)); } }
/* Laci reel di HP: dua kontrol warisan masih di bawah 44px (temuan integrasi B3). */
@media (max-width: 768px) {
  .fsw-clientbtn { min-height: 44px; min-width: 44px; }
  .fsw-fold-t { min-height: 44px; }
}
@media (max-width: 768px) {
  /* Laci HP selalu lebih tinggi daripada layar (sudah begitu sebelum B4:
     nav + pod + kartu akun = 877px di layar 844px). .xcs-userblock dipatok
     `sticky; bottom:0` dengan latar pekat, jadi apa pun yang ada TEPAT
     sebelumnya dalam alur — yaitu pemilih skin — tertutup permanen selama
     laci belum digulir habis. Di laci (BUKAN di sidebar desktop) kartu akun
     dikembalikan ke alur biasa: pemilih skin jadi terlihat begitu laci
     dibuka, dan kartu akun tinggal satu geseran pendek. */
  .xcs-sidebar .xcs-userblock { position: static; }
  .xcs-sidebar { padding-bottom: 24px; }
}

/* Tombol Terang/Auto/Gelap terukur 26px di laci — di bawah ambang 44px. SUDAH
   DICOBA dinaikkan ke 44px dan DIBATALKAN: baris pemilih skin ikut terdorong
   18px sehingga tepi bawahnya melewati tinggi laci (853 > 844) dan tampak
   terpotong di posisi gulir awal — persis cacat yang baru saja diperbaiki di
   atas. Tombolnya milik styles.css dan sudah begitu sebelum B4; menaikkannya
   butuh ruang yang harus diambil dari tempat lain di laci, jadi diserahkan
   sebagai pekerjaan tersendiri, bukan ditempel di sini. */
@media (max-width: 768px) {
  /* Temuan sendiri saat memeriksa laci (B4-cacat.md §D): tombol "Keluar" di
     kartu akun terukur 30×30. sapu.js tidak pernah menangkapnya karena
     parkir() melewati keturunan .xcs-sidebar selama laci tertutup, dan laci
     hanya dibuka pada layar lain. Kartu akunnya tumbuh 62px → 70px, tidak
     ada limpahan mendatar (lebar isi tetap 269px). */
  .xcs-sidebar .xcs-userblock .xcs-icon-btn { min-width: 44px; min-height: 44px; }
}

/* ── A1 & A2 — ruang aman untuk lonceng dan tombol asisten ─────────────
   DESKTOP: keduanya dipindah ke satu "rel" kosong selebar 70px di tepi kanan
   jendela, dan isi halaman diberi padding selebar rel itu. Karena relnya
   kosong pada SEMUA posisi gulir (bukan cuma saat halaman belum digulir),
   tidak ada tombol yang bisa berada di bawah keduanya. max-width dinaikkan
   sebesar tambahan paddingnya supaya lebar isi tetap 1216px seperti semula.
   HP: tidak ada ruang untuk rel 70px di layar 360px, jadi kedua tombol
   melayang itu ditarik masuk ke bilah atas — solusi kedua yang disebut
   B4-cacat.md §A1 ("menaruh lonceng dalam alur bilah atas"). Blok merek
   diberi margin kanan seukuran keduanya supaya tidak ada yang tertimpa. */
@media (min-width: 769px) {
  .xcs-main-inner { padding-right: 70px !important; max-width: 1318px; }
  .xcs-footer { padding-right: 70px; }
  .fsw-assist-fab { width: 46px; height: 46px; right: 16px; bottom: 18px; }
}
@media (max-width: 768px) {
  .xcs-notif-bell {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: 56px !important;
    width: 44px !important; height: 44px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    z-index: 61 !important;
  }
  .xcs-notif-badge { border-color: var(--xcs-navy, #0A0A0A); }
  .fsw-assist-fab {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 104px; bottom: auto; left: auto;
    width: 44px; height: 44px; border-radius: 50%;
    background: transparent; color: #FFFFFF;
    box-shadow: none; z-index: 61;
  }
  .fsw-assist-fab:hover { transform: none; box-shadow: none; }
  .fsw-assist-fab::after { display: none; }
  body:not(.has-fsw-bottombar) .fsw-assist-fab { bottom: auto; }

  /* Bilah atas HP adalah GRID `1fr auto 1fr` (logo dipatok di tengah). Kolom
     tengahnya mengambil lebar max-content, jadi margin apa pun yang dipasang
     di blok merek hanya membuat bilahnya melimpah — bukan menyisihkan ruang.
     Dibatasi minmax(0,1fr) supaya blok merek benar-benar mengalah, lalu
     diberi margin kanan seukuran lonceng + asisten. */
  .xcs-mobile-bar { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  .xcs-mobile-bar > .xcs-mobile-brand {
    margin-right: 108px;
    padding-left: 0; padding-right: 0;
    min-width: 0;
  }
  .xcs-mobile-bar .fsw-lockup { min-width: 0; max-width: 100%; }
}
/* Di bawah ~394px blok merek (174px) tidak muat berdampingan dengan dua
   kontrol 44px. Gambar wordmark tidak bisa menyusut sendiri (min-content-nya
   = lebar aslinya), jadi tingginya yang diturunkan sedikit — jauh lebih baik
   daripada memotong tulisan SENTARIS di tengah huruf. */
@media (max-width: 400px) {
  /* logo.jsx menulis height lewat style inline, jadi hanya !important yang
     bisa menimpanya dari berkas gaya. */
  .xcs-mobile-bar .fsw-lockup-sm .fsw-wordmark-frazier  { height: 14px !important; }
  .xcs-mobile-bar .fsw-lockup-sm .fsw-wordmark-sentaris { height: 8px !important; }
  /* TERUKUR di 320px: kolom merek tinggal 92px sementara lockup 147px, dan
     `justify-self: center` membagi kelebihannya ke KEDUA sisi — 23px di
     antaranya jatuh tepat di atas tombol menu, sehingga garis hamburger
     menembus tulisan FRAZIER. Dua koreksi: sisa ruang yang dipesan untuk
     lonceng + tombol asisten dikembalikan ke ukuran sebenarnya (108 → 76px),
     dan blok merek dirapatkan ke KIRI supaya sisa luapan mengarah ke ruang
     kosong yang memang dipesan, bukan ke tombol. */
  .xcs-mobile-bar > .xcs-mobile-brand { margin-right: 76px; justify-self: start; }
}
@media (max-width: 360px) {
  .xcs-mobile-bar > .xcs-mobile-brand { margin-right: 72px; }
  .xcs-mobile-bar .fsw-lockup-sm .fsw-wordmark-frazier  { height: 12px !important; }
  .xcs-mobile-bar .fsw-lockup-sm .fsw-wordmark-sentaris { height: 7px !important; }
  .xcs-mobile-bar .fsw-lockup { gap: .35em; }
  .xcs-mobile-bar .fsw-lockup-line { gap: .3em; }
}

/* ── Judul halaman di HP ikut skin ─────────────────────────────────────
   styles.css mengunci h1 ke 22px !important di ≤768px, jadi tanpa baris ini
   skin "huruf besar" tidak terasa sama sekali di HP. */
@media (max-width: 768px) {
  .fsw-page > .xcs-pagehead h1 { font-size: var(--fsw-fs-h1-hp) !important; }
}

/* ── Kepala & baris tabel di MODE GELAP ───────────────────────────────
   styles.css punya aturan global `[data-theme="dark"] thead th` dan
   `[data-theme="dark"] tbody td` yang spesifisitasnya (0,1,2) mengalahkan
   `.fsw-table th` (0,1,1). Akibatnya kepala tabel di mode gelap tidak pernah
   mengikuti token sama sekali — tanpa baris ini semua skin punya tabel gelap
   yang identik. Nilai bawaannya disalin PERSIS dari aturan lama supaya skin
   "Asli" tidak berubah satu piksel pun. */
[data-theme="dark"] {
  --fsw-th-bg-d:     rgba(255, 255, 255, 0.02);
  --fsw-th-ink-d:    var(--xcs-ink-3);
  --fsw-th-line-d:   rgba(255, 255, 255, 0.08);
  --fsw-th-ls-d:     .10em;
  --fsw-th-fw-d:     700;
  --fsw-cell-pad-d:  12px 14px;
  --fsw-row-pad-d:   12px 14px;
  --fsw-line-row-d:  rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .fsw-table thead th {
  background: var(--fsw-th-bg-d);
  color: var(--fsw-th-ink-d);
  border-bottom: var(--fsw-th-bw) solid var(--fsw-th-line-d);
  font-size: var(--fsw-fs-micro);
  letter-spacing: var(--fsw-th-ls-d);
  text-transform: var(--fsw-micro-tt);
  font-weight: var(--fsw-th-fw-d);
  padding: var(--fsw-cell-pad-d);
}
[data-theme="dark"] .fsw-table tbody td {
  border-bottom: var(--fsw-bw-row) solid var(--fsw-line-row-d);
  padding: var(--fsw-row-pad-d);
}

/* ═══ B4 — pembenahan lanjutan (uji-balik putaran 2) ═══════════════════
   Semua di bawah ini SENGAJA ditaruh paling akhir: beberapa aturan harus
   menang atas styles.css maupun atas aturan .fsw-* di atasnya, dan urutan
   berkas adalah satu-satunya alat yang tersedia tanpa menyentuh styles.css. */

/* ── Sidebar: kontrol tampilan tidak ikut digencet ─────────────────────
   .xcs-theme-switch milik styles.css (0,1,0) dan ikut menyusut 38px → 34px
   di laci HP, jadi spesifisitasnya dinaikkan lewat .xcs-sidebar.
   (Pemilih skin yang dulu berpasangan dengan aturan ini sudah dicabut — B5.) */
.xcs-sidebar .xcs-theme-switch { flex: 0 0 auto; }

/* ── Judul halaman ikut skin JUGA di desktop ───────────────────────────
   styles.css:13113 `.xcs-pagehead h1 { font-size: 42px !important }`
   mengalahkan `.fsw-page .xcs-pagehead h1` di atas, jadi tanpa baris ini
   token --fsw-fs-h1 mati total di ≥769px dan kelima skin berjudul sama
   besar. Pola !important-nya sama persis dengan yang sudah dipakai untuk
   ≤768px. Bawaan token = 42px, jadi skin Asli tetap 42px. */
@media (min-width: 769px) {
  :root .fsw-page > .xcs-pagehead h1 { font-size: var(--fsw-fs-h1) !important; }
}

/* ── Bentuk pil ikut skin ──────────────────────────────────────────────
   Radius ketiga kelompok ini ditulis keras (999px di ops-theme.css, 999px
   !important di styles.css untuk tombol kepala halaman), jadi di skin
   radius 0/2px hasilnya campur bentuk: kartu bersudut tajam berdampingan
   dengan badge dan tombol bulat. Semua dipindah ke --fsw-radius-chip yang
   bawaannya 999px — skin Asli tidak berubah. */
.fsw-card-h .fsw-n,
.fsw-section-h .fsw-n,
.fsw-room-title .fsw-n,
.fsw-lane-counts .fsw-n,
.fsw-tab-n,
.fsw-col-n,
.fsw-filter-n,
.fsw-fold-n,
.fsw-health,
.fsw-role-pill,
.fsw-room-late,
.fsw-kunpic,
.fsw-kcard-meta > span,
.fsw-links a,
.fsw-suggest button,
.fsw-summary-tog,
.fsw-filter-tog,
.fsw-group-sw,
.fsw-group-b,
.fsw-bar,
.fsw-bar > i { border-radius: var(--fsw-radius-chip); }
/* styles.css:13150/13179 memasang 999px !important pada kedua tombol kepala
   halaman; hanya !important yang bisa menimpanya dari sini. */
.fsw-page > .xcs-pagehead .xcs-pagehead-cta > button { border-radius: var(--fsw-radius-chip) !important; }
/* Kotak "Lompat ke klien…" sebelumnya 8px sendirian sementara semua kolom
   isian lain 10px — sekarang satu token bersama .fsw-input. */
.fsw-jump input { border-radius: var(--fsw-radius-input); }

/* ── Petunjuk gulir pada tabel yang lebih lebar dari kartunya ──────────
   .fsw-table-wrap memang menggulir sendiri (halaman tidak pernah rusak),
   tapi tanpa batang gulir yang terlihat, kolom terakhir dan chip status
   tampak terpotong di tengah tanpa sebab — persis kesan "keluar dari
   kontainer". Teknik latar-ganda: dua bidang warna kartu ikut menggulir
   bersama isi (background-attachment: local) sehingga menutupi bayangan
   saat sudah mentok, dua bayangan radial dipatok ke tepi penggulung
   (scroll). Murni CSS, tidak ada DOM atau perilaku yang berubah. */
:root { --fsw-scroll-shade: rgba(10, 10, 10, .17); }
/* Di mode gelap bayangan HITAM di atas kartu #141414/#1B1B1B praktis tidak
   terlihat — terukur hanya 7 tingkat abu (27 → 20) sementara di mode terang
   42 tingkat (255 → 213). Jadi di sana petunjuknya dibalik jadi cahaya, pola
   biasa untuk tepi gulir di tema gelap. Terukur ulang sesudahnya: 27 → 56
   (29 tingkat), sekelas dengan petunjuk di mode terang. */
[data-theme="dark"] { --fsw-scroll-shade: rgba(255, 255, 255, .20); }
.fsw-table-wrap {
  background-image:
    linear-gradient(to right, var(--fsw-card), rgba(255, 255, 255, 0)),
    linear-gradient(to left,  var(--fsw-card), rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%,   var(--fsw-scroll-shade), rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 100% 50%, var(--fsw-scroll-shade), rgba(255, 255, 255, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 22px 100%, 22px 100%, 11px 100%, 11px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ═══ B4 lanjutan — temuan integrasi ═══════════════════════════════════
   Pita 769–1100 px tidak terlindungi aturan ≤768 px: lima sel siklus dipaksa
   muat di sisa lebar dan menyusut sampai 77 px. Ambang alat 96 px, minimum
   yang enak dibaca 150 px — di bawah itu papannya yang menggulir. */
@media (min-width: 769px) and (max-width: 1100px) {
  .fsw-cycle { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; }
}

/* Tablet 769–900px tetap perangkat sentuh, tetapi tidak terjangkau aturan
   ukuran kontrol di blok ≤768px: tab, sakelar, dan tombol kecil di sana
   tersisa 30–34px. Diberi lantai 40px seperti di HP. */
@media (min-width: 769px) and (max-width: 900px) {
  .fsw-sel, .fsw-tog, .fsw-tab, .fsw-filters .fsw-input,
  select.fsw-input, select.fsw-input.is-sm,
  .xcs-btn-ghost.is-sm, .xcs-btn-ghost.xcs-btn-sm, .xcs-btn-primary.xcs-btn-sm { min-height: 40px; }
  .fsw-reel-menu { width: 40px; height: 40px; min-height: 40px; }
  /* Selektor disalin PERSIS dari aturan ≤768px di atas: tombol di dalam
     tabel/daftar dikunci 30px oleh `.fsw-table .xcs-btn-ghost` (0,2,0), yang
     mengalahkan daftar di atas. Tanpa baris ini tombol "Open" di tablet
     tetap 30px. */
  .fsw-it .xcs-btn-ghost, .fsw-it .xcs-btn-primary,
  .fsw-table .xcs-btn-ghost, .fsw-table .xcs-btn-primary,
  .fsw-reel-acts .xcs-btn-ghost, .fsw-reel-acts .xcs-btn-primary,
  .fsw-wk .xcs-btn-ghost { min-height: 40px; }
  .fsw-tabs .fsw-tab, .fsw-tab.on { min-height: 40px; }
  /* Lebar ikut diberi lantai: tab "AI" dan tombol ikon kecil hanya 36–37px. */
  .fsw-tab, .xcs-btn-ghost.is-sm, .xcs-btn-ghost.xcs-btn-sm { min-width: 44px; }
  .xcs-btn-primary, .xcs-btn-ghost,
  .xcs-forum-compose .xcs-btn-primary, .xcs-forum .xcs-btn-primary { min-height: 40px; }
}

/* Kontrol bawah sidebar (tema, kartu akun) tidak boleh ikut hanyut ke bawah
   lipatan ketika grup "LAINNYA" dibuka pada layar setinggi 1000 px.
   B5: pemilih skin dicabut, jadi tumpukannya tinggal dua. Offset tema turun
   dari 96px ke 56px — 96px dulu menyediakan tempat untuk baris skin. */
@media (min-width: 769px) {
  .xcs-sidebar .xcs-theme-switch { margin-top: auto; bottom: 56px; }
  .xcs-sidebar .xcs-userblock    { bottom: 0; padding-bottom: 8px; }
}

/* Wadah tabel WAJIB benar-benar memotong isinya. Tanpa ini tombol aksi di baris
   terakhir bisa tergambar di luar kartunya dan bertabrakan dengan tombol
   melayang — persis keluhan "keluar dari kontainer". */
.fsw-table-wrap { position: relative; overflow-x: auto; overflow-y: hidden; }

/* Rel kanan diperlebar pada 769–1200 px: di pita itu kartu paling mepet ke tepi
   sehingga 70 px tidak selalu cukup untuk tombol melayang. */
@media (min-width: 769px) and (max-width: 1200px) {
  .xcs-main-inner { padding-right: 84px !important; }
  .xcs-footer { padding-right: 84px; }
}

/* ═══ Lantai ukuran kontrol pada lebar sentuh (≤900px) ════════════════
   Target interaktif di bawah 40px sulit ditekan dengan jempol. Alih-alih
   menambal satu per satu kelas yang terukur terlalu kecil (tab 32, sakelar
   34, pemilih 32, alat papan 38, tombol kecil 32), satu lantai dipasang di
   sini untuk seluruh kontrol yang terlibat. Yang sudah ≥40px tidak berubah.
   DIKECUALIKAN dengan sengaja: .fsw-cal-item pada ≤640px — di sana ia bukan
   tombol lagi melainkan titik penanda, dan selnyalah yang jadi target. */
@media (max-width: 900px) {
  .fsw-tab, .fsw-tog, .fsw-sel, .fsw-ref, .fsw-section-toggle,
  .fsw-bd-tool, .fsw-bd-ink, .fsw-bd-size, .fsw-bd-lane,
  .fsw-reel-menu, .fsw-ask button, .fsw-filters .fsw-input,
  select.fsw-input, select.fsw-input.is-sm, input.fsw-input,
  .xcs-btn-ghost, .xcs-btn-primary, .xcs-btn-ghost.is-sm,
  .xcs-btn-ghost.xcs-btn-sm, .xcs-btn-primary.xcs-btn-sm,
  .xcs-forum-sort-btn, .xcs-forum-image-btn, .xcs-notif-bell {
    min-height: 40px;
  }
  /* Tombol ikon: selain tinggi, lebarnya juga harus cukup. */
  .fsw-bd-tool, .fsw-bd-ink, .fsw-bd-size, .fsw-reel-menu, .xcs-notif-bell { min-width: 40px; }
  /* Panah bulan ‹ › terukur 36px lebarnya. */
  .fsw-page .xcs-pagehead-cta .xcs-btn-ghost, .fsw-monthnav .xcs-btn-ghost { min-width: 40px; }
  /* Tautan-tombol di dalam tabel (nama klien) — area tekannya dari padding
     di blok ≤768px; lantainya disamakan supaya barisnya konsisten. */
  .fsw-table .xcs-link, .fsw-table button.fsw-cl-name { min-height: 40px; }
  /* Tautan-tombol yang berdiri sendiri sebagai satu baris (bukan di tengah
     kalimat): "See N more activity", "Show all". */
  .fsw-card > .xcs-link, .fsw-events > .xcs-link, .fsw-card > p > .xcs-link,
  .fsw-more > .xcs-link { min-height: 40px; display: inline-flex; align-items: center; }
  /* Sakelar filter selebar 37px ("All") — lebarnya juga diberi lantai. */
  .fsw-tog { min-width: 44px; }
  /* Tombol saran pada "Ask the System" dan tombol "See N more activity". */
  .fsw-suggest button, .fsw-event-more .xcs-link { min-height: 40px; }
  .fsw-event-more .xcs-link { display: inline-flex; align-items: center; }
  /* Semua isian teks, tanggal, dan pencarian — banyak yang tidak memakai
     kelas .fsw-input dan tersisa 38px. */
  /* Semua isian kecuali kotak centang/radio — apa pun kelas dan tipenya. */
  .fsw-page input:not([type="checkbox"]):not([type="radio"]),
  .xcs-main input:not([type="checkbox"]):not([type="radio"]) { min-height: 40px; }
  /* Chip agenda kalender pada 641–900px masih berupa tombol teks. */
  .fsw-cal .fsw-cal-item { min-height: 40px; }
}
@media (max-width: 640px) {
  /* Kembalikan: di sini chip sudah menjadi titik (lihat blok kalender HP). */
  .fsw-cal .fsw-cal-item { min-height: 0; }
}

/* Kartu tim Meet Us: tombol 🎁 26×26, ✎ 21×25 dan tombol WA 26px tingginya
   jauh di bawah ambang sentuh, di SEMUA lebar. */
.xcs-tcard-gift, .xcs-tcard-edit, .xcs-tcard-wa { min-height: 36px; min-width: 36px; }
@media (max-width: 900px) {
  .xcs-tcard-gift, .xcs-tcard-edit, .xcs-tcard-wa { min-height: 40px; min-width: 40px; }
}

/* ════════════════════════════════════════════════════════════════════
 * C2 §6 — SLIDER (.fsw-slider) — batch & bulan digeser, tidak diketik
 * ──────────────────────────────────────────────────────────────────
 * input[type=range] BAWAAN sistem tampil sebagai kontrol OS di tengah
 * desain ini (rel biru macOS / abu Windows) — itu langsung terlihat murahan,
 * jadi rel dan tombolnya digambar sendiri untuk KEDUA mesin: ::-webkit-* dan
 * ::-moz-*. Keduanya WAJIB ditulis di aturan yang TERPISAH — satu selektor
 * pseudo yang tidak dikenal membuat seluruh aturan dibuang oleh mesin lain.
 *
 * Tingginya 40px di SEMUA lebar, bukan hanya ≤900px: blok "Lantai ukuran
 * kontrol" di atas menyaring lewat .fsw-page / .xcs-main, sedangkan slider
 * ini hidup di dalam modal yang dipasang di luar keduanya.
 *
 * Warna lewat token --fsw-sl-* (pola yang sama dengan --fsw-kpim-*), supaya
 * kembaran gelapnya cukup ditulis sekali di [data-theme="dark"] dan sekali
 * di @media (prefers-color-scheme: dark) :root:not([data-theme]).
 * ══════════════════════════════════════════════════════════════════ */
:root {
  --fsw-sl-track:      var(--fsw-line);
  --fsw-sl-track-line: var(--fsw-line);
  --fsw-sl-fill:       var(--fsw-accent-line);
  --fsw-sl-thumb:      var(--fsw-accent);
  --fsw-sl-thumb-line: var(--fsw-accent-line);
  --fsw-sl-ring:       var(--fsw-accent-soft);
  --fsw-sl-v:          var(--fsw-ink);
  --fsw-sl-u:          var(--fsw-ink-3);
  --fsw-sl-end:        var(--fsw-ink-4);
}
[data-theme="dark"] {
  --fsw-sl-track:      rgba(255, 255, 255, .16);
  --fsw-sl-track-line: rgba(255, 255, 255, .22);
  --fsw-sl-fill:       #36DEFC;
  --fsw-sl-thumb:      #36DEFC;
  --fsw-sl-thumb-line: #36DEFC;
  --fsw-sl-ring:       rgba(54, 222, 252, .28);
  --fsw-sl-v:          #F2F2F2;
  --fsw-sl-u:          #B4B4B4;
  --fsw-sl-end:        #8F8F8F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fsw-sl-track:      rgba(255, 255, 255, .16);
    --fsw-sl-track-line: rgba(255, 255, 255, .22);
    --fsw-sl-fill:       #36DEFC;
    --fsw-sl-thumb:      #36DEFC;
    --fsw-sl-thumb-line: #36DEFC;
    --fsw-sl-ring:       rgba(54, 222, 252, .28);
    --fsw-sl-v:          #F2F2F2;
    --fsw-sl-u:          #B4B4B4;
    --fsw-sl-end:        #8F8F8F;
  }
}

.fsw-slider { display: flex; align-items: center; gap: 12px; width: 100%; }
.fsw-slider-rail {
  flex: 1 1 auto; min-width: 0; width: 100%;
  height: 40px; min-height: 40px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  cursor: pointer; touch-action: pan-y;
}
.fsw-slider-rail:focus { outline: none; }
.fsw-slider-v {
  flex: 0 0 auto; min-width: 58px; text-align: right; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--fsw-sl-v);
}
.fsw-slider-u { margin-left: 5px; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--fsw-sl-u); }
/* Ujung rentang dicetak di bawah relnya; padding kanan = lebar angka + gap,
   supaya "18" mendarat tepat di ujung rel, bukan di bawah angka terpilih. */
.fsw-slider-ends {
  display: flex; justify-content: space-between; padding-right: 70px;
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fsw-sl-end);
}

/* Rel & tombol — WebKit / Blink */
.fsw-slider-rail::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: var(--fsw-sl-track); border: 1px solid var(--fsw-sl-track-line);
}
.fsw-slider-rail::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 999px;
  /* (tinggi rel 6 + 2 garis − tinggi tombol 22 − 4 garis) / 2 = −9px */
  margin-top: -9px;
  background: var(--fsw-sl-thumb); border: 2px solid var(--fsw-sl-thumb-line);
  box-shadow: var(--fsw-shadow); cursor: grab;
}
.fsw-slider-rail:active::-webkit-slider-thumb { cursor: grabbing; }
.fsw-slider-rail:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--fsw-sl-ring), 0 0 0 1px var(--fsw-sl-thumb-line); }

/* Rel & tombol — Gecko */
.fsw-slider-rail::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: var(--fsw-sl-track); border: 1px solid var(--fsw-sl-track-line);
}
.fsw-slider-rail::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--fsw-sl-fill); }
.fsw-slider-rail::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--fsw-sl-thumb); border: 2px solid var(--fsw-sl-thumb-line);
  box-shadow: var(--fsw-shadow); cursor: grab;
}
.fsw-slider-rail:active::-moz-range-thumb { cursor: grabbing; }
.fsw-slider-rail:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--fsw-sl-ring), 0 0 0 1px var(--fsw-sl-thumb-line); }

/* Kembaran gelap yang eksplisit: token di atas sudah membalik sendiri, tapi
   aturan pseudo-element ditulis ulang di sini supaya sebuah skin yang menimpa
   --fsw-line / --fsw-accent tidak diam-diam menghapus kontras relnya. */
[data-theme="dark"] .fsw-slider-rail::-webkit-slider-runnable-track { background: var(--fsw-sl-track); border-color: var(--fsw-sl-track-line); }
[data-theme="dark"] .fsw-slider-rail::-webkit-slider-thumb { background: var(--fsw-sl-thumb); border-color: var(--fsw-sl-thumb-line); }
[data-theme="dark"] .fsw-slider-rail::-moz-range-track { background: var(--fsw-sl-track); border-color: var(--fsw-sl-track-line); }
[data-theme="dark"] .fsw-slider-rail::-moz-range-progress { background: var(--fsw-sl-fill); }
[data-theme="dark"] .fsw-slider-rail::-moz-range-thumb { background: var(--fsw-sl-thumb); border-color: var(--fsw-sl-thumb-line); }
[data-theme="dark"] .fsw-slider-v { color: var(--fsw-sl-v); }
[data-theme="dark"] .fsw-slider-u { color: var(--fsw-sl-u); }
[data-theme="dark"] .fsw-slider-ends { color: var(--fsw-sl-end); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .fsw-slider-rail::-webkit-slider-runnable-track { background: var(--fsw-sl-track); border-color: var(--fsw-sl-track-line); }
  :root:not([data-theme]) .fsw-slider-rail::-webkit-slider-thumb { background: var(--fsw-sl-thumb); border-color: var(--fsw-sl-thumb-line); }
  :root:not([data-theme]) .fsw-slider-rail::-moz-range-track { background: var(--fsw-sl-track); border-color: var(--fsw-sl-track-line); }
  :root:not([data-theme]) .fsw-slider-rail::-moz-range-progress { background: var(--fsw-sl-fill); }
  :root:not([data-theme]) .fsw-slider-rail::-moz-range-thumb { background: var(--fsw-sl-thumb); border-color: var(--fsw-sl-thumb-line); }
  :root:not([data-theme]) .fsw-slider-v { color: var(--fsw-sl-v); }
  :root:not([data-theme]) .fsw-slider-u { color: var(--fsw-sl-u); }
  :root:not([data-theme]) .fsw-slider-ends { color: var(--fsw-sl-end); }
}

/* Lantai sentuh ≤900px — ditulis ulang di sini karena penyaring .fsw-page /
   .xcs-main di blok lantai tidak menjangkau modal. */
@media (max-width: 900px) {
  .fsw-slider-rail { min-height: 40px; }
  .fsw-slider-v { min-width: 64px; font-size: 16px; }
  .fsw-slider-ends { padding-right: 76px; }
}