/* ============================================================
   WORKSPACE-LIST-KIT.CSS — Sarpras Intelligence shared workspace kit (V2.0.18)

   Scoped under `.wlk-root`, nested inside Sarpras Intelligence's
   `.sic-root` (sarpras-intelligence.css) — same non-goal as nor-center.css:
   deliberately does NOT redeclare the design-token palette, every colour
   here is inherited by cascade from the ancestor `.sic-root`. Backs
   js/v2/ui/shared/workspace-list-kit.js's generic renderers, reused by
   Archive Center, Knowledge Center and Learning Dashboard (nor-center.js
   keeps its own `.nc-*` styles for now — migrating it onto this kit is a
   V2.0.19 hardening task, not a V2.0.18 one).
   ============================================================ */

.wlk-root *,.wlk-root *::before,.wlk-root *::after{box-sizing:border-box;}

/* ── shell: tab bar + content ─────────────────────────────────────── */
.wlk-shell{display:flex;flex-direction:column;min-height:100%;}
.wlk-tabbar{
  display:flex;gap:4px;padding:0 24px;border-bottom:1px solid var(--border);
  overflow-x:auto;flex-shrink:0;
}
.wlk-tab{
  appearance:none;background:none;border:none;cursor:pointer;
  font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text-faint);
  padding:14px 14px 12px;border-bottom:2px solid transparent;white-space:nowrap;
}
.wlk-tab:hover{color:var(--text-dim);}
.wlk-tab--active{color:var(--accent-fg);border-bottom-color:var(--accent);}

.wlk-content{flex:1;}

.wlk-page{
  max-width:var(--workspace-max-width, 1180px);
  padding:var(--workspace-pad-top, 28px) var(--workspace-pad-inline, 24px) var(--workspace-pad-bottom, 40px);
}

.wlk-page-head{margin-bottom:8px;}
.wlk-page-crumb{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;}
.wlk-page-title{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.025em;margin:0;color:var(--text);}
.wlk-page-lede{font-size:14px;color:var(--text-dim);margin:8px 0 0;max-width:680px;line-height:1.6;}

/* ── generic section ─────────────────────────────────────────────── */
.wlk-sec{margin-top:32px;}
.wlk-sec-title{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-.01em;color:var(--text);margin-bottom:12px;}

/* ── "Hari Ini Platform Mempelajari" executive card (Autonomous
   Experience, Part 10) — calm, real, no chart junk; a short list of plain
   sentences reusing the same .wlk-sec-title/.wlk-page rhythm as every
   other section, just with a quiet accent edge to read as the headline. */
.ld-today-card{
  border-left:3px solid var(--accent);background:var(--canvas);
  border-radius:0 14px 14px 0;padding:18px 20px;
}
.ld-today-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.ld-today-list li{
  font-size:14.5px;color:var(--text);line-height:1.5;padding-left:20px;position:relative;
}
.ld-today-list li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent);}

/* ── empty state ─────────────────────────────────────────────────── */
.wlk-empty{
  background:var(--surface);border:1px dashed var(--border);border-radius:14px;
  padding:28px 20px;text-align:center;color:var(--text-faint);
}
.wlk-empty-icon{width:28px;height:28px;margin:0 auto 10px;opacity:.6;}
.wlk-empty-title{font-size:13.5px;font-weight:700;color:var(--text-dim);}
.wlk-empty-sub{font-size:12.5px;margin-top:4px;color:var(--text-faint);}

/* ── row list ─────────────────────────────────────────────────────── */
.wlk-row-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.wlk-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border);cursor:default;}
.wlk-row:first-child{border-top:none;}
.wlk-row[data-clickable="1"]{cursor:pointer;}
.wlk-row[data-clickable="1"]:hover{background:var(--canvas);}
.wlk-row-primary{font-size:13.5px;font-weight:600;color:var(--text);}
.wlk-row-secondary{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);}

/* ── status / stat grid ──────────────────────────────────────────── */
.wlk-status-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
.wlk-status-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px;}
.wlk-status-count{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--text);}
.wlk-status-label{font-size:11.5px;color:var(--text-faint);font-weight:600;}

/* ── filter bar ───────────────────────────────────────────────────── */
.wlk-filter-bar{display:flex;flex-wrap:wrap;gap:8px;}
.wlk-filter-chip{
  appearance:none;cursor:pointer;font-family:var(--font-sans);font-size:12.5px;font-weight:700;
  color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:7px 14px;
}
.wlk-filter-chip:hover{border-color:var(--accent);}
.wlk-filter-chip--active{color:#fff;background:var(--accent);border-color:var(--accent);}

/* ── search box ───────────────────────────────────────────────────── */
.wlk-search-box{
  width:100%;font-family:var(--font-sans);font-size:14px;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;
}
.wlk-search-box:focus{outline:none;border-color:var(--accent);}

/* ── detail drawer (Metadata / Evidence / Relationships / History / Diff) ── */
.wlk-detail{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;}
.wlk-detail-sec{margin-top:18px;}
.wlk-detail-sec:first-child{margin-top:0;}
.wlk-detail-sec-title{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;}
.wlk-kv-list{list-style:none;margin:0;padding:0;}
.wlk-kv-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:6px 0;border-top:1px solid var(--border);}
.wlk-kv-row:first-child{border-top:none;}
.wlk-kv-key{font-size:12.5px;color:var(--text-faint);font-weight:600;}
.wlk-kv-val{font-size:13px;color:var(--text);font-weight:600;text-align:right;word-break:break-word;}
/* Phase 10, Sprint 10.3 — Document Editor's inline-edit row: the input +
   Save/Cancel buttons need their own line, not squeezed into the same
   flex row as key/value. */
.wlk-kv-row--editing{flex-direction:column;align-items:stretch;}
.wlk-kv-row--editing .wlk-form-row{display:flex;gap:8px;align-items:center;margin-bottom:0;}
.wlk-kv-row--editing .wlk-input{width:auto;flex:1;}

/* ── diff table ───────────────────────────────────────────────────── */
.wlk-diff-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.wlk-diff-table th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);padding:8px 10px;border-bottom:1px solid var(--border);}
.wlk-diff-table td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top;}
.wlk-diff-table tr:last-child td{border-bottom:none;}
.wlk-diff-added{color:var(--c-green);}
.wlk-diff-removed{color:var(--accent-fg);text-decoration:line-through;}
.wlk-diff-modified{color:var(--c-blue);}
.wlk-diff-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;}

/* ── buttons / form controls (V2.1 — Dataset Import Center is the first
   write-capable workspace; no prior wlk-* consumer needed these) ──────── */
.wlk-btn{
  appearance:none;cursor:pointer;font-family:var(--font-sans);font-size:12.5px;font-weight:700;
  color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:10px;
  padding:8px 14px;margin:0 8px 8px 0;
}
.wlk-btn:hover{opacity:.9;}
.wlk-btn:disabled{opacity:.4;cursor:not-allowed;}
.wlk-btn--ghost{color:var(--text-dim);background:var(--surface);border-color:var(--border);}

.wlk-form-row{margin-bottom:14px;}
.wlk-form-row label{display:block;font-size:11.5px;font-weight:700;color:var(--text-faint);margin-bottom:6px;}
.wlk-input,.wlk-select{
  width:100%;font-family:var(--font-sans);font-size:13.5px;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:9px 12px;
}
.wlk-input:focus,.wlk-select:focus{outline:none;border-color:var(--accent);}
.wlk-file-input{font-family:var(--font-sans);font-size:13px;color:var(--text);margin-bottom:12px;display:block;}
/* V2, Part A1 — a field the parser genuinely could not determine; shown
   only while it's still blank, never a validation error. */
.wlk-hint{font-size:11.5px;color:var(--text-faint);margin-top:5px;font-style:italic;}

/* ── V2.1 — Zero-Configuration Dataset Import: drag & drop, progress ──── */
.dic-dropzone{
  border:2px dashed var(--border-strong, var(--border));border-radius:14px;
  padding:32px 20px;text-align:center;background:var(--surface);
}
.dic-dropzone.dic-dropzone--active{border-color:var(--accent);background:var(--canvas);}
.dic-progress-bar{width:100%;height:8px;border-radius:999px;background:var(--border);overflow:hidden;margin:8px 0 16px;}
.dic-progress-fill{height:100%;background:var(--accent);transition:width .2s ease;}

/* ── V2.1.2 — Upload Recovery banner ──────────────────────────────── */
.dic-resume-banner{
  border:1px solid var(--accent);border-radius:14px;padding:20px;
  background:var(--c-neutral-weak, var(--surface));
}

/* ── V2.1.2 — Document Preview (Part L) ───────────────────────────── */
.dic-pdf-preview{width:100%;height:640px;border:1px solid var(--border);border-radius:10px;}

/* ============================================================
   Phase 2 (Autonomous Learning Pipeline) — Apple-style Upload Center,
   Unified Import Workspace, live pipeline stages. Every colour below is
   an EXISTING token from this kit / sarpras-intelligence.css — nothing
   new invented, so light/dark mode stay consistent with the rest of the
   platform (Part 4).
   ============================================================ */

/* Redesigned dropzone: generous whitespace, minimal borders, large
   typography, calm — replaces the old dense/HTML-like file chooser. */
.dic-dropzone{
  border:1.5px dashed var(--border-strong, var(--border));border-radius:20px;
  padding:56px 32px;text-align:center;background:var(--surface);
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.dic-dropzone.dic-dropzone--active{border-color:var(--accent);background:var(--canvas);transform:scale(1.005);}
.dic-dropzone-icon{
  width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--accent-fg);background:var(--c-neutral-weak);
}
.dic-dropzone-title{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--text);}
.dic-dropzone-sub{font-size:13.5px;color:var(--text-dim);margin-top:6px;}
.dic-dropzone-actions{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap;}
.dic-dropzone-btn{margin:0;padding:11px 22px;border-radius:999px;font-size:13px;}
.dic-dropzone-hint{font-size:12px;color:var(--text-faint);margin-top:18px;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.5;}
.dic-dropzone-domain{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:12.5px;color:var(--text-faint);}
.dic-dropzone-domain label{font-weight:700;}
.dic-dropzone-domain select{width:auto;padding:6px 10px;}

/* Visually hidden but fully functional (real click target, folder
   support unchanged) — never the raw browser file-chooser look. */
.dic-file-input-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Utilities menu (Part 5 — Level 2 nav, de-emphasized) ──────────── */
.dic-utilities-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.dic-utilities{position:relative;margin-left:auto;}
.dic-utilities-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:5;min-width:220px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-sm);padding:6px;display:flex;flex-direction:column;gap:2px;
}
.dic-utilities-item{
  appearance:none;text-align:left;cursor:pointer;border:none;background:none;
  font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text-dim);
  padding:9px 10px;border-radius:8px;width:100%;
}
.dic-utilities-item:hover{background:var(--canvas);}
.dic-utilities-item--active{color:var(--accent-fg);}

/* ── Normal/Developer presentation mode toggle (Phase 2 Follow-up) ──── */
.dic-mode-toggle{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:2px;background:var(--surface);}
.dic-mode-btn{
  appearance:none;cursor:pointer;border:none;background:none;border-radius:999px;
  font-family:var(--font-sans);font-size:12px;font-weight:700;color:var(--text-faint);padding:6px 14px;
}
.dic-mode-btn--active{color:#fff;background:var(--accent);}

/* ── Per-row persisted stage badge (Phase 2 Follow-up) ──────────────── */
.dic-stage-badge{
  display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:700;
  color:var(--c-blue);background:var(--c-blue-weak);border-radius:999px;padding:2px 8px;
  vertical-align:middle;margin-left:4px;
}

/* ── Live pipeline stage checklist (Part 1) ─────────────────────────── */
.dic-stage-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;}
.dic-stage{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-faint);}
.dic-stage-dot{width:8px;height:8px;border-radius:50%;background:var(--border);flex-shrink:0;}
.dic-stage--done .dic-stage-dot{background:var(--c-green);}
.dic-stage--done{color:var(--text-dim);}
.dic-stage--active .dic-stage-dot{background:var(--accent);animation:dic-pulse 1.1s ease-in-out infinite;}
.dic-stage--active{color:var(--text);}

/* ── Success state + a completed progress bar turns green (Part 4) ── */
.dic-progress--done .dic-progress-fill{background:var(--c-green);}
.dic-success{
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;
  background:var(--c-green-weak);color:var(--c-green);font-size:13.5px;font-weight:700;
  margin-bottom:14px;animation:dic-success-in .3s ease-out;
}
.dic-success-check{
  width:24px;height:24px;border-radius:50%;background:var(--c-green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
}
@keyframes dic-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(1.3);}}
@keyframes dic-success-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* ── Progressive Import Queue (Autonomous Experience, Part 2) — each
   phase collapses to a single count row; only an expanded bucket's row
   cards ever enter the DOM, so a 500-file batch stays a handful of nodes
   until the operator asks to see one bucket. Reused as-is (Phase 8,
   Experience Architecture) for the Smart Import Feed's "Selesai" group and
   for Grouped Exceptions below — one visual idiom for "collapsed by
   default", not a third one invented per section. ────────────────────── */
.dic-queue-buckets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.dic-queue-bucket{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;}
.dic-queue-bucket-head{
  appearance:none;cursor:pointer;border:none;background:none;width:100%;
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--text-dim);text-align:left;
}
.dic-queue-bucket-chevron{
  display:inline-block;width:12px;flex-shrink:0;color:var(--text-faint);
  transition:transform .15s ease;
}
.dic-queue-bucket--open .dic-queue-bucket-chevron{transform:rotate(90deg);}
.dic-queue-bucket-label{flex:1;}
.dic-queue-bucket-count{
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent-fg);
  background:var(--c-blue-weak);border-radius:999px;padding:2px 10px;
}
.dic-queue-bucket-body{padding:0 8px 8px;animation:dic-bucket-in .18s ease-out;}
@keyframes dic-bucket-in{from{opacity:0;}to{opacity:1;}}

/* ── Smart Import Feed (Phase 8, Part 1) ─────────────────────────────── */
.dic-feed-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.dic-feed-head .dic-queue-bucket-head{flex:1;min-width:160px;}
.dic-feed-actions{display:flex;gap:6px;padding:0 10px;flex-wrap:wrap;}
.dic-feed-checkbox{margin-right:8px;vertical-align:middle;}
.dic-feed-row--pinned{background:var(--c-blue-weak);}
.dic-feed-pin-badge{font-size:11px;}

/* ── Consensus Experience (Phase 8, Part 4) ──────────────────────────── */
.dic-consensus-note{
  border-left:2px solid var(--accent);padding:8px 10px;margin-top:8px;
  background:var(--c-blue-weak);border-radius:0 8px 8px 0;
}

/* ── Live Document Workspace (Phase 11 Course Correction) ─────────────
   The rendered NOR itself as the primary review interface — a real
   document look (centered letterhead, serif body), not a field list.
   Confidence highlighting reuses the platform's ONE color-tone system
   (services/unified-scoring.js#scoreColor -> --ok/--warn/--danger, never
   a hardcoded hex) collapsed to exactly 3 states per the product owner's
   Grammarly-style ask. ────────────────────────────────────────────── */
.rw-doc{
  max-width:680px;margin:0 auto;padding:48px 56px;background:var(--surface);
  border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow-sm);
  font-family:var(--font-serif, Georgia, 'Times New Roman', serif);color:var(--text);
  line-height:1.7;
}

/* Phase 3, Stage 1 (Living Document Workspace) — Canvas. Opening a
   document no longer sits under the list page's own title/lede/list
   (see review-workspace.js#renderOpenDocumentPage) — this quiet text
   link is the only thing above the document, reusing the EXISTING
   rw-doc-row toggle handler (no new state). Deliberately NO mount
   animation on `.rw-open-page` itself: render() replaces host.innerHTML
   wholesale on every edit commit too (not just on first opening a
   document), so a container-level animation here would replay on every
   single autosave, not once — the opposite of "calm." The smaller,
   genuinely infrequent suggestion pill/panel below keeps its own
   pre-existing fade (unchanged, out of this stage's scope). */
.rw-back-link{
  appearance:none;cursor:pointer;font-family:var(--font-sans);font-size:12.5px;
  color:var(--text-dim);background:none;border:none;padding:0;margin-bottom:12px;
  display:block;
}
.rw-back-link:hover{color:var(--accent-fg);}

/* Quick document switcher — same rw-doc-row click contract as the full
   list, just small pills instead of full rows, so jumping between drafts
   stays possible without the list competing with the open document for
   attention. */
.rw-doc-switcher{display:flex;gap:6px;overflow-x:auto;padding-bottom:20px;margin-bottom:0;}
.rw-doc-chip{
  appearance:none;cursor:pointer;flex:0 0 auto;font-family:var(--font-sans);font-size:11.5px;font-weight:600;
  color:var(--text-faint);background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:5px 12px;white-space:nowrap;
}
.rw-doc-chip:hover{color:var(--text-dim);border-color:var(--text-faint);}
.rw-doc-chip--active{color:var(--accent-fg);border-color:var(--accent);background:var(--c-blue-weak, rgba(59,91,169,.08));}

/* Metadata / Riwayat Keputusan / Developer-only sections — real
   governance record, but not what a reviewer needs to see to read the
   document itself ("everything unnecessary disappears"). A native
   <details> disclosure: zero new JS/state, content stays fully present
   for anything that inspects the rendered markup, only the on-screen
   collapse is native-browser. Open by default in Developer Mode (see
   review-workspace.js#renderDocDetail), collapsed in Normal Mode. */
.rw-detail-disclosure{margin-top:24px;}
.rw-detail-disclosure > summary{
  cursor:pointer;font-family:var(--font-sans);font-size:11.5px;font-weight:700;
  color:var(--text-faint);list-style:none;
}
.rw-detail-disclosure > summary::-webkit-details-marker{display:none;}
.rw-detail-disclosure > summary:hover{color:var(--text-dim);}
.rw-detail-disclosure > summary::before{content:'▸ ';}
.rw-detail-disclosure[open] > summary::before{content:'▾ ';}
.rw-detail-disclosure > .wlk-detail{margin-top:10px;}

/* Phase 3, Stage 1 — Toolbar. The layout knob and the suggestion pill
   used to be two independently-stacked blocks with their own margin-top;
   grouped onto one row now so they read as "minor tools," visually
   subordinate to the one primary action (Terbitkan NOR) below them —
   same elements, same gating, only the grouping changed. */
.rw-toolbar{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin-top:16px;}
.rw-toolbar > *{margin-top:0;}
.rw-doc-title{text-align:center;font-weight:700;font-size:16px;letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 20px;font-family:var(--font-serif, Georgia, serif);}
.rw-doc-dateline{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:13.5px;flex-wrap:wrap;}
.rw-doc-meta{margin-bottom:18px;}
.rw-doc-meta-row{display:flex;gap:8px;font-size:13.5px;margin-bottom:4px;}
.rw-doc-meta-label{flex:0 0 140px;color:var(--text-dim);}
.rw-doc-meta-value{flex:1;min-width:0;}
.rw-doc-body{margin-top:20px;}
.rw-doc-para{font-size:13.5px;margin:0 0 12px;white-space:pre-wrap;}
.rw-doc-signoff{margin-top:32px;font-size:13px;color:var(--text-dim);font-style:italic;}

/* Inline-editable spans — Word-like: no border/box until hovered/focused,
   a click-target the whole time. */
.rw-editable{
  display:inline-block;min-width:24px;border-radius:3px;padding:1px 3px;margin:-1px -3px;
  outline:none;cursor:text;transition:background-color .12s ease;
}
.rw-editable:hover{background:var(--c-blue-weak, rgba(59,91,169,.08));}
.rw-editable:focus{background:var(--c-blue-weak, rgba(59,91,169,.12));box-shadow:0 0 0 1px var(--accent);}
.rw-editable--empty{color:var(--text-faint);font-style:italic;}
.rw-editable--empty::before{content:attr(data-placeholder);}
/* Sprint 11 UAT gap-closure (Finding 1) — the placeholder is a ::before
   pseudo-element gated on the render-time `.rw-editable--empty` class.
   Typing into a contenteditable never triggers a re-render, so without
   this rule the class (and its pseudo-element placeholder) stayed visible
   next to the typed text — the reported "Klik untuk mengisi…a" corruption,
   and Ctrl+A appearing to select the placeholder. Clearing it (and
   restoring normal text style) on :focus makes it behave like a real
   placeholder: click → it disappears → the field is genuinely empty →
   typing/Ctrl+A act on empty content. Pure CSS, no re-render; the data was
   never affected (textContent — what onFocusOut commits — never included
   the pseudo-element). */
.rw-editable--empty:focus{color:var(--text);font-style:normal;}
.rw-editable--empty:focus::before{content:'';}

/* Confidence highlighting — a subtle underline, never a loud badge; the
   number itself only ever appears in Developer Mode (rw-conf-detail). */
.rw-conf-green{border-bottom:2px solid var(--ok);}
.rw-conf-yellow{border-bottom:2px solid var(--warn);}
.rw-conf-red{border-bottom:2px solid var(--danger);}
.rw-conf-detail{font-size:10.5px;color:var(--text-faint);margin-left:4px;font-family:var(--font-sans);font-style:normal;}
.rw-conf-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--text-dim);
  font-family:var(--font-sans);margin:0 0 14px;align-items:center;}
.rw-conf-legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.rw-conf-legend-dot--green{background:var(--ok);}
.rw-conf-legend-dot--yellow{background:var(--warn);}
.rw-conf-legend-dot--red{background:var(--danger);}

.rw-edit-error{font-size:11px;color:var(--danger);margin-top:2px;font-family:var(--font-sans);}

/* Sprint 11.10 — an ACTUAL visual signature area in the Live Document
   preview (see review-workspace.js#renderSignatureArea), matching what
   the PDF/Word export now renders: honest blank signing lines driven by
   nor-generator.js's real suggested count, never a fabricated name. */
.rw-sig-area{margin-top:32px;font-family:var(--font-serif, Georgia, serif);}
.rw-sig-row{display:flex;flex-wrap:wrap;gap:24px;margin-top:20px;}
.rw-sig-slot{flex:1 1 140px;min-width:120px;text-align:center;}
.rw-sig-line{border-bottom:1px solid var(--text-dim);height:34px;}
.rw-sig-hint{font-size:11px;color:var(--text-faint);font-family:var(--font-sans);margin-top:4px;}

/* Phase 12.8.x — real, editable signatory grid (label/position/[gap]/name,
   matching doc-theme.js#signatureBlock's own printed shape) and the real
   PBSI logo + editable recipients/cc role lists, in the on-screen Live
   Document — closing the gap with the official letterhead. */
.rw-doc-logo{display:block;margin:0 auto 6px;}
.rw-sig-slot--editable{display:flex;flex-direction:column;gap:2px;}
.rw-sig-field{display:block;min-height:1.3em;}
.rw-sig-field--label{font-size:13.5px;}
.rw-sig-field--position{font-size:13.5px;font-weight:700;text-transform:uppercase;}
.rw-sig-field--name{margin-top:34px;font-size:13.5px;font-weight:700;text-decoration:underline;}
.rw-doc-meta-row--list{align-items:flex-start;}
.rw-role-list{flex:1;min-width:0;}
.rw-role-row{display:flex;align-items:baseline;gap:6px;margin-bottom:2px;}
.rw-role-index{color:var(--text-faint);font-size:13.5px;flex:0 0 auto;}
.rw-role-entry{flex:1;min-width:60px;}
.rw-role-remove{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:13px;padding:0 4px;}
.rw-role-remove:hover{color:var(--danger);}
.rw-role-add{
  font-family:var(--font-sans);font-size:11.5px;color:var(--accent-fg);background:none;border:1px dashed var(--border);
  border-radius:6px;padding:3px 8px;cursor:pointer;margin-top:4px;
}

/* Sprint 11.6 (Reviewer Experience) — Google Docs-style save status. Every
   edit already commits on focusout (Sprint 11.3); this only makes that
   already-real save visible, so the reviewer never wonders whether a click
   away was "safe". Neutral by default, a brief accent flash right after a
   real commit — never a loud banner. */
.rw-save-status{
  font-size:11px;color:var(--text-faint);font-family:var(--font-sans);
  margin:0 0 10px;transition:color .2s ease;
}
.rw-save-status--active{color:var(--ok);font-weight:600;}
.rw-add-section-btn{
  font-family:var(--font-sans);font-size:11.5px;color:var(--accent-fg);background:none;border:1px dashed var(--border);
  border-radius:6px;padding:3px 8px;cursor:pointer;margin-left:8px;
}
.rw-mode-toggle-hint{font-size:11.5px;color:var(--text-faint);font-family:var(--font-sans);margin-top:24px;}

/* Single "Terbitkan NOR" publish action (Workstream 7) */
.rw-publish-bar{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap;}
.rw-publish-status{font-size:12.5px;color:var(--text-dim);font-family:var(--font-sans);}

/* Phase 12.8.4/12.8.6 — Live Suggestion panel: secondary, dismissible,
   never louder than the document itself (matches this file's own
   "invisible AI" framing for confidence highlighting above). */
.rw-suggestion-panel{
  margin-top:20px;padding:12px 14px;border:1px solid var(--border);border-radius:6px;
  background:var(--surface-alt, rgba(0,0,0,.02));font-family:var(--font-sans);
}
.rw-suggestion-panel--error{color:var(--danger);font-size:12px;}
.rw-suggestion-panel-title{font-size:11.5px;font-weight:600;color:var(--text-dim);margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;justify-content:space-between;}
.rw-suggestion-collapse{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:12px;padding:0 2px;}
/* Phase 12.8.x, Sprint 2 — collapsed-by-default pill: quiet, small, never
   competing with the document for attention ("invisible AI"). */
.rw-suggestion-pill{
  margin-top:16px;padding:5px 12px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface-alt, rgba(0,0,0,.02));font-family:var(--font-sans);font-size:12px;
  color:var(--text-dim);cursor:pointer;transition:background-color .15s ease,color .15s ease;
}
.rw-suggestion-pill:hover{background:var(--c-blue-weak, rgba(59,91,169,.08));color:var(--text);}

/* Phase 12.8.x — the layout-knob panel (logo/margin adjustment, saved
   immediately into the Document Design System). Quiet by default, same
   "invisible until wanted" treatment as the suggestion pill above. */
.rw-layout-toggle{
  margin-top:12px;padding:5px 12px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface-alt, rgba(0,0,0,.02));font-family:var(--font-sans);font-size:12px;
  color:var(--text-dim);cursor:pointer;
}
.rw-layout-toggle:hover{background:var(--c-blue-weak, rgba(59,91,169,.08));color:var(--text);}
.rw-layout-panel{
  margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:6px;
  background:var(--surface-alt, rgba(0,0,0,.02));font-family:var(--font-sans);max-width:320px;
}
.rw-layout-panel-title{font-size:11.5px;font-weight:600;color:var(--text-dim);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;letter-spacing:.03em;}
.rw-layout-panel-hint{font-weight:400;text-transform:none;letter-spacing:normal;color:var(--text-faint);}
.rw-layout-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.rw-layout-row label{font-size:12.5px;color:var(--text-dim);}
.rw-layout-row input{width:70px;}
/* Phase 12.8.x, Sprint 6 (Workspace Polish) — a calm fade-in rather than
   the panel/pill snapping into existence. Sprint 1's auto-advance-on-Enter
   (review-workspace.js) already lands on a `.rw-editable`, whose existing
   `:focus` rule (box-shadow ring, above) already makes the new position
   visible — nothing new needed there. Pure presentation. */
.rw-suggestion-panel,.rw-suggestion-pill{animation:rw-fade-in .18s ease;}
@keyframes rw-fade-in{from{opacity:0;}to{opacity:1;}}
.rw-suggestion-row{padding:8px 0;border-top:1px solid var(--border);}
.rw-suggestion-row:first-of-type{border-top:none;}
.rw-suggestion-row-main{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.rw-suggestion-label{font-size:13px;color:var(--text);}
.rw-suggestion-confidence{font-size:11px;color:var(--text-faint);}
.rw-suggestion-actions{display:flex;gap:6px;margin-top:6px;}
.rw-suggestion-why{margin-top:8px;font-size:12px;color:var(--text-dim);}

@media (max-width: 640px) {
  .wlk-page-title{font-size:21px;}
  .wlk-tabbar{padding:0 16px;}
  .dic-dropzone{padding:40px 18px;}
  .dic-utilities{margin-left:0;}
  .rw-doc{padding:28px 20px;}
  .rw-doc-meta-label{flex-basis:110px;}
}