/* Writing Labs — a light, document-first workspace inside the dark dashboard.
   Cards, tinted stat tiles and underlined tabs follow the dashboard mockup
   reference; the editor page is a white sheet on a grey desk like a word processor. */

.wl {
    --wl-bg: #f3f5f9;
    --wl-card: #ffffff;
    --wl-line: #e3e8f0;
    --wl-ink: #1f2a3d;
    --wl-muted: #6b7a90;
    --wl-blue: #2563eb;
    --wl-blue-soft: #eef4ff;
    --wl-pink: #db2777;
    --wl-pink-soft: #fff0f6;
    --wl-green: #15803d;
    --wl-green-soft: #ecfdf3;
    --wl-amber: #b45309;
    --wl-amber-soft: #fff7e6;
    --wl-red: #b91c1c;
    --wl-red-soft: #fef2f2;
    background: var(--wl-bg);
    color: var(--wl-ink);
    min-height: 100%;
    flex: 1;
}
.wl * { box-sizing: border-box; }
.wl a { color: inherit; }
.wl-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; }
@media (min-width: 768px) { .wl-wrap { padding: 28px 28px 48px; } }

.wl-card { background: var(--wl-card); border: 1px solid var(--wl-line); border-radius: 14px; }
.wl-card-pad { padding: 16px; }
@media (min-width: 640px) { .wl-card-pad { padding: 20px; } }

.wl-h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; color: var(--wl-ink); }
.wl-sub { color: var(--wl-muted); font-size: .875rem; }
.wl-label { display: block; font-size: .75rem; font-weight: 600; color: var(--wl-muted); margin-bottom: 4px; }
.wl-muted { color: var(--wl-muted); }

.wl-input, .wl-select, .wl-textarea {
    width: 100%; min-height: 40px; border: 1px solid var(--wl-line); border-radius: 10px;
    background: #fff; color: var(--wl-ink); padding: 8px 12px; font-size: .875rem;
}
.wl-textarea { min-height: 84px; resize: vertical; }
.wl-input:focus, .wl-select:focus, .wl-textarea:focus { outline: 2px solid #bfd4ff; border-color: var(--wl-blue); }

.wl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: .8125rem; font-weight: 600;
    border: 1px solid var(--wl-line); background: #fff; color: var(--wl-ink); cursor: pointer; white-space: nowrap;
}
.wl-btn:hover { border-color: #c7d2e3; background: #f8fafc; }
.wl-btn:disabled { opacity: .55; cursor: not-allowed; }
.wl-btn-primary { background: var(--wl-blue); border-color: var(--wl-blue); color: #fff; }
.wl-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.wl-btn-pink { background: #f9a8d4; border-color: #f9a8d4; color: #fff; }
.wl-btn-pink:hover { background: #f472b6; border-color: #f472b6; }
.wl-btn-ghost { border-color: transparent; background: transparent; }
.wl-btn-sm { min-height: 32px; padding: 0 10px; font-size: .75rem; border-radius: 8px; }
.wl-btn-danger { color: var(--wl-red); }

.wl-tile { border-radius: 12px; padding: 12px 14px; border: 1px solid; }
.wl-tile-blue { background: var(--wl-blue-soft); border-color: #dbe6ff; }
.wl-tile-pink { background: var(--wl-pink-soft); border-color: #fbd5e6; }
.wl-tile-green { background: var(--wl-green-soft); border-color: #c9f0d6; }
.wl-tile-amber { background: var(--wl-amber-soft); border-color: #fde4b8; }
.wl-tile-k { font-size: .75rem; font-weight: 600; }
.wl-tile-blue .wl-tile-k { color: #4b6fb5; }
.wl-tile-pink .wl-tile-k { color: var(--wl-pink); }
.wl-tile-green .wl-tile-k { color: var(--wl-green); }
.wl-tile-amber .wl-tile-k { color: var(--wl-amber); }
.wl-tile-v { font-size: 1.35rem; font-weight: 700; color: var(--wl-ink); }

.wl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wl-line); overflow-x: auto; scrollbar-width: none; }
.wl-tabs::-webkit-scrollbar { display: none; }
.wl-tab { padding: 10px 12px; font-size: .8125rem; font-weight: 600; color: var(--wl-muted); border-bottom: 3px solid transparent; white-space: nowrap; background: none; cursor: pointer; }
.wl-tab[aria-selected="true"] { color: var(--wl-pink); border-color: var(--wl-pink); }

.wl-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 9px; font-size: .6875rem; font-weight: 600; border: 1px solid var(--wl-line); color: var(--wl-muted); background: #fff; white-space: nowrap; }
.wl-pill-blue { color: var(--wl-blue); border-color: #c7d7fe; background: var(--wl-blue-soft); }
.wl-pill-pink { color: var(--wl-pink); border-color: #fbcfe8; background: var(--wl-pink-soft); }
.wl-pill-green { color: var(--wl-green); border-color: #bbf7d0; background: var(--wl-green-soft); }
.wl-pill-amber { color: var(--wl-amber); border-color: #fde68a; background: var(--wl-amber-soft); }
.wl-pill-red { color: var(--wl-red); border-color: #fecaca; background: var(--wl-red-soft); }

.wl-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wl-project:hover { border-color: #b9c8e6; box-shadow: 0 6px 20px rgba(30, 50, 90, .06); }

/* Wizard */
.wl-steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.wl-step { flex: 1 0 auto; display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--wl-muted); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.wl-step b { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: #e9eef6; color: var(--wl-muted); font-size: .7rem; }
.wl-step.is-on b { background: var(--wl-blue); color: #fff; }
.wl-step.is-done b { background: var(--wl-green); color: #fff; }
.wl-choice { border: 1px solid var(--wl-line); border-radius: 12px; padding: 12px; text-align: left; background: #fff; cursor: pointer; width: 100%; }
.wl-choice[aria-pressed="true"] { border-color: var(--wl-blue); background: var(--wl-blue-soft); box-shadow: inset 0 0 0 1px var(--wl-blue); }

.wl-modal { position: fixed; inset: 0; z-index: 60; background: rgba(10, 18, 34, .45); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .wl-modal { align-items: center; padding: 24px; } }
.wl-modal-box { background: #fff; color: var(--wl-ink); width: 100%; max-width: 760px; max-height: 92vh; overflow: auto; border-radius: 16px 16px 0 0; }
@media (min-width: 640px) { .wl-modal-box { border-radius: 16px; } }

/* Editor shell — a word processor: title bar, ribbon, then the page.
   Side panels are drawers the ribbon opens; nothing sits beside the page
   until the author asks for it. */
.wle { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
@media (max-width: 1023px) { .wle { height: auto; min-height: calc(100vh - 56px); } }
.wle-top { background: #fff; border-bottom: 1px solid var(--wl-line); padding: 6px 12px; display: flex; align-items: center; gap: 8px; }
.wle-top-main { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.wle-top-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.wle-title { font-weight: 700; font-size: 1rem; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; min-width: 0; flex: 1 1 160px; background: transparent; color: var(--wl-ink); }
.wle-title:hover, .wle-title:focus { border-color: var(--wl-line); outline: none; background: #fff; }
.wle-tb { min-width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: #3c4a60; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: .82rem; padding: 0 6px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.wle-tb:hover { background: #e8eef8; }
.wle-tb:disabled { opacity: .45; cursor: default; background: transparent; }
.wle-tb.is-on { background: #dbe6ff; color: var(--wl-blue); }
.wle-sep { width: 1px; height: 22px; background: var(--wl-line); margin: 0 6px; flex: 0 0 auto; }

/* Ribbon */
.wle-ribbon { background: #fff; border-bottom: 1px solid var(--wl-line); }
.wle-ribbon-tabs { display: flex; align-items: center; gap: 2px; padding: 4px 10px 0; border-bottom: 1px solid var(--wl-line); overflow-x: auto; scrollbar-width: none; }
.wle-ribbon-tabs::-webkit-scrollbar { display: none; }
.wle-rtab { padding: 7px 12px; font-size: .8125rem; font-weight: 600; color: var(--wl-muted); border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; white-space: nowrap; border-radius: 6px 6px 0 0; }
.wle-rtab:hover { color: var(--wl-ink); background: #f6f8fc; }
.wle-rtab[aria-selected="true"] { color: var(--wl-blue); border-color: var(--wl-blue); }
.wle-ribbon-view { display: flex; align-items: center; gap: 4px; padding-bottom: 3px; flex: 0 0 auto; }
.wle-ribbon-body { background: #f8fafd; padding: 6px 10px; overflow-x: auto; scrollbar-width: thin; }
.wle-rrow { display: flex; align-items: stretch; gap: 4px; min-width: max-content; }
.wle-rgroup { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 8px; border-right: 1px solid var(--wl-line); }
.wle-rgroup:last-child { border-right: 0; }
.wle-rgroup small { font-size: .62rem; color: var(--wl-muted); font-weight: 600; letter-spacing: .02em; }
.wle-rtools { display: flex; align-items: center; gap: 2px; }
.wle-tb-lg { flex-direction: column; height: 50px; min-width: 56px; padding: 4px 8px; gap: 2px; font-size: .68rem; font-weight: 600; color: #33415a; }
.wle-tb-lg i { font-size: 1rem; }
.wle-tb-lg span { line-height: 1.1; white-space: nowrap; }
.wle-rbadge { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--wl-blue-soft); color: var(--wl-blue); font-size: .62rem; }
.wle-rsel { height: 30px; border: 1px solid var(--wl-line); border-radius: 8px; background: #fff; color: var(--wl-ink); font-size: .78rem; padding: 0 6px; max-width: 150px; }
.wle-rsel:focus { outline: 2px solid #bfd4ff; border-color: var(--wl-blue); }
/* WL-FIX-CORE: the comment filter in the side panel shows its whole label ("Hanya belum selesai" was cut at 150 px). */
.wle-rsel.wle-cmt-filter { max-width: 100%; }
.wle-rstat { font-size: .78rem; font-weight: 600; color: #33415a; padding: 0 4px; white-space: nowrap; }
.wle-panel-toggle { position: relative; }
.wle-panel-toggle .wl-pill { position: absolute; top: -4px; right: -4px; }

/* Body: the page takes the whole width; drawers add columns only when open */
.wle-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
    .wle-body.has-outline { grid-template-columns: 240px minmax(0, 1fr); }
    .wle-body.has-side { grid-template-columns: minmax(0, 1fr) 400px; }
    .wle-body.has-outline.has-side { grid-template-columns: 240px minmax(0, 1fr) 400px; }
    .wle-body:not(.has-outline) .wle-outline { display: none; }
    .wle-body:not(.has-side) .wle-side { display: none; }
}
.wle-outline, .wle-side { background: #fff; overflow: auto; min-height: 0; }
.wle-outline { border-right: 1px solid var(--wl-line); padding: 12px; }
.wle-side { border-left: 1px solid var(--wl-line); display: flex; flex-direction: column; }
.wle-side-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--wl-ink); }
.wle-side-head > i { color: var(--wl-blue); }
@media (max-width: 1023px) {
    .wle-outline, .wle-side { position: fixed; z-index: 55; top: 0; bottom: 0; width: min(92vw, 400px); transition: transform .2s ease; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
    .wle-outline { left: 0; transform: translateX(-105%); }
    .wle-side { right: 0; transform: translateX(105%); }
    .wle-outline.is-open, .wle-side.is-open { transform: translateX(0); }
}
.wle-desk { overflow: auto; min-height: 0; padding: 16px 8px 80px; background: #eceff4; }
@media (min-width: 640px) { .wle-desk { padding: 24px 24px 120px; } }
.wle-page { --wle-page-w: 1100px; max-width: var(--wle-page-w); margin: 0 auto; background: #fff; box-shadow: 0 1px 3px rgba(20, 30, 60, .12), 0 8px 24px rgba(20, 30, 60, .06); border-radius: 4px; padding: 28px 20px 48px; }
.wle-page.is-a4 { --wle-page-w: 816px; }
.wle-page.is-wide { --wle-page-w: none; }
@media (min-width: 640px) { .wle-page { padding: 56px 72px 80px; } }
@media (min-width: 1280px) { .wle-page.is-fit { --wle-page-w: 1180px; } }

.wle-o-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border-radius: 8px; padding: 6px 8px; font-size: .8125rem; color: #33415a; background: none; border: 0; cursor: pointer; }
.wle-o-item:hover { background: #f1f5fb; }
.wle-o-item.is-on { background: var(--wl-blue-soft); color: var(--wl-blue); font-weight: 600; }
.wle-o-item small { margin-left: auto; color: var(--wl-muted); font-size: .68rem; }

.wle-doc-title { font-size: 1.6rem; font-weight: 700; line-height: 1.25; color: #111827; margin-bottom: 18px; }
.wle-sec { position: relative; margin-bottom: 18px; border-radius: 6px; }
.wle-sec.is-active::before { content: ""; position: absolute; left: -14px; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--wl-blue); }
/* WL-BUG-DUP: the manuscript's own "Declarations" / "References" section holds the system block (editor.js
   placeHosted): one heading, no "Bagian ini kosong." above the statements, the block reads as its body. */
.wle-sec.is-host { margin-bottom: 4px; }
.wle-sec.is-host > .wle-rich:empty { min-height: 1.2em; }
.wle-sec.is-host > .wle-rich:empty::before { content: none; }
.wle-sec.is-hosted:not(#wle-sec-references) > .wle-sec-h, #wle-sec-declarations.is-hosted > p.wl-sub { display: none; }
#wle-sec-references.is-hosted > .wle-sec-h { justify-content: flex-end; }
#wle-sec-references.is-hosted > .wle-sec-h > input { display: none; }
.wlf > section.wle-sec.is-hosted { margin-top: 8px; }
/* A statement's title on the white sheet: page colours in dark mode too (selectors under .wle-page keep). */
.wle-page .wle-decl-t { color: #1b2433; }
.wle-page .wle-decl-t .wl-pill-pink { color: #be185d; border-color: #fbcfe8; background: #fdf2f8; }
.wle-sec-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wle-sec-h input { font-weight: 700; color: #111827; border: 0; padding: 0; background: transparent; flex: 1 1 200px; min-width: 0; }
.wle-sec-h input:focus { outline: none; border-bottom: 1px dashed #c7d2e3; }
.wle-sec-h.l1 input { font-size: 1.2rem; }
.wle-sec-h.l2 input { font-size: 1.05rem; }
.wle-sec-h.l3 input { font-size: .98rem; font-style: italic; }
.wle-meta { font-size: .68rem; color: var(--wl-muted); white-space: nowrap; }

.wle-rich { font-family: var(--wle-font, Georgia, 'Times New Roman', serif); font-size: calc(var(--wle-size, 1.02rem) * var(--wle-zoom, 1) * var(--wle-ts, 1)); line-height: var(--wle-lh, 1.7); color: #1b2433; min-height: 2.2em; outline: none; overflow-wrap: anywhere; }
.wle-rich hr { border: 0; border-top: 1px solid #c9d3e2; margin: 1.2em 0; }
.wle-rich p.wl-al-c, .wle-rich h3.wl-al-c, .wle-rich h4.wl-al-c, .wle-rich figcaption.wl-al-c { text-align: center; }
.wle-rich p.wl-al-r, .wle-rich h3.wl-al-r, .wle-rich h4.wl-al-r { text-align: right; }
.wle-rich .wl-al-j { text-align: justify; }
.wle-rich:empty::before { content: attr(data-placeholder); color: #a0abbc; font-style: italic; }
.wle-rich p { margin: 0 0 .7em; }
.wle-rich h3 { font-family: Inter, sans-serif; font-size: 1rem; font-weight: 700; margin: 1em 0 .4em; }
.wle-rich h4 { font-family: Inter, sans-serif; font-size: .95rem; font-weight: 600; font-style: italic; margin: .9em 0 .3em; }
.wle-rich ul, .wle-rich ol { padding-left: 1.4em; margin: 0 0 .7em; }
.wle-rich ul { list-style: disc; } .wle-rich ol { list-style: decimal; }
.wle-rich blockquote { border-left: 3px solid #d6deea; padding-left: 12px; color: #4b5870; }
.wle-rich cite { font-style: normal; color: var(--wl-blue); background: #eef4ff; border-radius: 4px; padding: 0 3px; cursor: default; white-space: nowrap; }
/* Tables and pictures. Numbers come from counters in reading order, so the
   caption holds only the title (the DOCX export numbers the same way). */
.wle-page { position: relative; counter-reset: wltab wlfig wlscheme wlbox wleq wltabs wlfigs;
    --wl-lbl-table: "Tabel"; --wl-lbl-figure: "Gambar"; --wl-lbl-scheme: "Skema"; --wl-lbl-box: "Boks"; --wl-lbl-equation: "Persamaan"; --wl-lbl-table_s: "Tabel S"; --wl-lbl-figure_s: "Gambar S"; }
.wle-page[data-lang="en"] { --wl-lbl-table: "Table"; --wl-lbl-figure: "Figure"; --wl-lbl-scheme: "Scheme"; --wl-lbl-box: "Box"; --wl-lbl-equation: "Equation"; --wl-lbl-table_s: "Table S"; --wl-lbl-figure_s: "Figure S"; }
.wle-sug-html { counter-reset: wltab wlfig wlscheme wlbox wleq wltabs wlfigs;
    --wl-lbl-table: "Tabel"; --wl-lbl-figure: "Gambar"; --wl-lbl-scheme: "Skema"; --wl-lbl-box: "Boks"; --wl-lbl-equation: "Persamaan"; --wl-lbl-table_s: "Tabel S"; --wl-lbl-figure_s: "Gambar S"; }
.wle-rich figure { margin: 1.4em 0; padding: 0; border: 0; position: relative; }
.wle-rich figure.wl-fig-table:not([data-kind]), .wle-rich figure.wl-fig[data-kind="table"] { counter-increment: wltab; }
.wle-rich figure.wl-fig-image:not([data-kind]):has(img), .wle-rich figure.wl-fig[data-kind="figure"] { counter-increment: wlfig; }
/* WL-06: every caption kind counts on its own (Skema 1., Persamaan 2., Tabel S1.); the words come
   from the template (labelStyle sets --wl-lbl-* on the page). */
.wle-rich figure.wl-fig[data-kind="scheme"] { counter-increment: wlscheme; }
.wle-rich figure.wl-fig[data-kind="box"] { counter-increment: wlbox; }
.wle-rich figure.wl-fig[data-kind="equation"] { counter-increment: wleq; }
.wle-rich figure.wl-fig[data-kind="table_s"] { counter-increment: wltabs; }
.wle-rich figure.wl-fig[data-kind="figure_s"] { counter-increment: wlfigs; }
.wle-rich figure.wl-fig[data-kind="scheme"] figcaption::before { content: var(--wl-lbl-scheme) " " counter(wlscheme) ". "; font-weight: 700; }
.wle-rich figure.wl-fig[data-kind="box"] figcaption::before { content: var(--wl-lbl-box) " " counter(wlbox) ". "; font-weight: 700; }
.wle-rich figure.wl-fig[data-kind="equation"] figcaption::before { content: var(--wl-lbl-equation) " " counter(wleq) ". "; font-weight: 700; }
.wle-rich figure.wl-fig[data-kind="table_s"] figcaption::before { content: var(--wl-lbl-table_s) counter(wltabs) ". "; font-weight: 700; }
.wle-rich figure.wl-fig[data-kind="figure_s"] figcaption::before { content: var(--wl-lbl-figure_s) counter(wlfigs) ". "; font-weight: 700; }
.wle-rich figure.wl-fig[data-kind="equation"] { text-align: center; }
.wle-rich figure.wl-fig[data-kind="box"] { border: 1px solid #d6deea; border-radius: 8px; padding: 10px 14px; background: #f8fafd; }
.wle-rich figure.wl-fig[data-kind]:not([data-kind="table"]):not([data-kind="figure"]) figcaption { text-align: left; }
/* A caption paragraph of an imported Word file keeps its typed "Tabel 1."; it is a target too. */
.wle-rich p.wl-caption { font-family: Inter, sans-serif; font-size: .84rem; }
.wle-rich figure.wl-fig { border-radius: 8px; outline: 1px solid transparent; outline-offset: 6px; transition: outline-color .15s; }
.wle-rich figure.wl-fig:hover { outline-color: #e3e9f3; }
.wle-fsel { position: absolute; z-index: 5; pointer-events: none; border: 2px solid #93b4fb; border-radius: 10px; margin: -7px; box-sizing: content-box; padding: 5px; }
.wle-rich figcaption { font-family: Inter, sans-serif; font-size: .84rem; line-height: 1.45; color: #1b2433; margin: 0 0 8px; min-height: 1.2em; }
.wle-rich figure > img + figcaption, .wle-rich figure > table + figcaption { margin: 8px 0 0; }
.wle-rich .wl-fig-image figcaption { text-align: center; }
.wle-rich .wl-fig-table:not([data-kind]) figcaption::before, .wle-rich figure.wl-fig[data-kind="table"] figcaption::before { content: var(--wl-lbl-table) " " counter(wltab) ". "; font-weight: 700; }
.wle-rich .wl-fig-image:not([data-kind]):has(img) figcaption::before, .wle-rich figure.wl-fig[data-kind="figure"] figcaption::before { content: var(--wl-lbl-figure) " " counter(wlfig) ". "; font-weight: 700; }
.wle-rich figcaption:empty::after { content: attr(data-placeholder); color: #a0abbc; font-weight: 400; font-style: italic; }
.wle-rich .wl-fig-table { overflow-x: auto; }

/* Default = academic three-line table (APA style): rule above and below the
   header, rule at the end, no vertical lines. */
.wle-rich table { border-collapse: collapse; width: 100%; font-family: Inter, sans-serif; font-size: .82rem; font-variant-numeric: tabular-nums; border-top: 1.5px solid #1b2433; border-bottom: 1.5px solid #1b2433; }
.wle-rich th, .wle-rich td { padding: 6px 10px; text-align: left; vertical-align: top; min-width: 48px; }
.wle-rich thead th, .wle-rich thead td { font-weight: 600; border-bottom: 1px solid #1b2433; background: transparent; }
.wle-rich tbody th { font-weight: 600; background: transparent; }
.wle-rich table.wl-tbl-grid { border: 1px solid #c9d3e2; }
.wle-rich table.wl-tbl-grid th, .wle-rich table.wl-tbl-grid td { border: 1px solid #c9d3e2; }
.wle-rich table.wl-tbl-grid thead th { background: #f1f5fb; border-bottom-color: #c9d3e2; }
.wle-rich table.wl-tbl-zebra { border-top: 0; border-bottom: 0; }
.wle-rich table.wl-tbl-zebra thead th { background: #1f2a3d; color: #fff; border-bottom: 0; }
.wle-rich table.wl-tbl-zebra tbody tr:nth-child(even) td { background: #f3f5f9; }
.wle-rich table.wl-tbl-zebra thead th:first-child { border-top-left-radius: 6px; }
.wle-rich table.wl-tbl-zebra thead th:last-child { border-top-right-radius: 6px; }
.wle-rich .wl-al-c { text-align: center; }
.wle-rich .wl-al-r { text-align: right; }

.wle-rich .wl-fig-image img { display: block; margin: 0 auto; width: 100%; height: auto; border-radius: 4px; cursor: pointer; }
.wle-rich .wl-fig-image { margin-left: auto; margin-right: auto; }
/* WL-DATA-GUIDE: a chart capped to the sheet (editor.js fitTallFigures) keeps its aspect ratio. */
.wle-rich .wl-fig-image img[data-wlfit], .wle-rich figure.wl-fig[data-kind="figure"] img[data-wlfit] { object-fit: contain; max-width: 100%; }
.wle-rich .wl-w-40 { width: 40%; } .wle-rich .wl-w-60 { width: 60%; } .wle-rich .wl-w-80 { width: 80%; } .wle-rich .wl-w-100 { width: 100%; }
@media (max-width: 639px) { .wle-rich .wl-w-40, .wle-rich .wl-w-60 { width: 80%; } }
.wle-rich img { max-width: 100%; height: auto; }
.wle-rich .wl-note { font-family: Inter, sans-serif; font-size: .74rem; line-height: 1.45; color: var(--wl-muted); margin: 6px 0 0; font-style: italic; }
.wle-rich .wl-xref { color: var(--wl-pink); background: var(--wl-pink-soft); border-radius: 4px; padding: 0 3px; white-space: nowrap; cursor: default; }
.wle-rich .wl-xref.is-broken { color: var(--wl-red); background: var(--wl-red-soft); text-decoration: line-through wavy; }
/* WL-06: a locked field (never refreshed) shows a small padlock; section references share the look. */
.wle-rich .wl-xref.is-locked, .wle-rich cite.is-locked { outline: 1px dashed #e9a3c4; outline-offset: 1px; }
.wle-rich cite.is-locked { outline-color: #a9bff0; }
.wle-rich .wl-xref.is-locked::after, .wle-rich cite.is-locked::after { content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .6em; margin-left: 3px; vertical-align: 1px; opacity: .7; }
.wle-sec-num { font-family: Inter, sans-serif; font-weight: 700; color: #111827; flex: 0 0 auto; }
.wle-sec-h.l1 .wle-sec-num { font-size: 1.2rem; } .wle-sec-h.l2 .wle-sec-num { font-size: 1.05rem; } .wle-sec-h.l3 .wle-sec-num { font-size: .98rem; font-style: italic; }
.wle-xref-cols { display: grid; grid-template-columns: 1fr; gap: 14px; max-height: 60vh; overflow: auto; }
@media (min-width: 640px) { .wle-xref-cols { grid-template-columns: 1fr 1fr; } }

/* Contextual toolbar above the selected table or picture */
.wle-fctx { position: absolute; z-index: 30; transform: translateY(-100%); }
.wle-fctx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--wl-line); border-radius: 12px; padding: 4px; box-shadow: 0 6px 20px rgba(20, 30, 60, .14); }
.wle-fctx .wle-tb { height: 30px; min-width: 30px; font-size: .78rem; }
.wle-fctx .wle-sep { height: 18px; margin: 0 3px; }
.wle-fctx .wle-fctx-cap { color: var(--wl-blue); font-weight: 600; padding: 0 8px; }
.wle-fctx-alt { height: 30px; border: 1px solid var(--wl-line); border-radius: 8px; padding: 0 8px; font-size: .78rem; width: 130px; min-width: 0; }
.wle-chip { height: 28px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--wl-line); background: #fff; color: #3c4a60; font-size: .74rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.wle-chip:hover { background: #f1f5fb; }
.wle-chip.is-on { background: var(--wl-blue-soft); border-color: #c7d7fe; color: var(--wl-blue); }
@media (max-width: 639px) {
    .wle-fctx { left: 0 !important; right: 0; max-width: none !important; }
    .wle-fctx-alt { flex: 1 1 120px; }
}

/* Insert dialogs */
.wle-dlg-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wle-dlg-grid { grid-template-columns: auto 1fr; } }
.wle-sizer { display: grid; grid-template-columns: repeat(8, 22px); gap: 3px; }
.wle-sizer button { width: 22px; height: 22px; border-radius: 4px; border: 1px solid #d5dde9; background: #fff; cursor: pointer; padding: 0; }
.wle-sizer button.is-on { background: var(--wl-blue-soft); border-color: var(--wl-blue); }
.wle-style-pick { display: grid; gap: 6px; }
.wle-style-pick button { display: flex; align-items: center; gap: 10px; border: 1px solid var(--wl-line); border-radius: 10px; padding: 6px 10px; background: #fff; font-size: .8rem; cursor: pointer; text-align: left; }
.wle-style-pick button.is-on { border-color: var(--wl-blue); background: var(--wl-blue-soft); box-shadow: inset 0 0 0 1px var(--wl-blue); }
.wle-style-demo { display: grid; grid-template-rows: repeat(4, 6px); width: 44px; flex: 0 0 44px; }
.wle-style-demo i { display: block; }
.wle-style-demo.is-academic { border-top: 2px solid #1b2433; border-bottom: 2px solid #1b2433; }
.wle-style-demo.is-academic i:first-child { border-bottom: 1px solid #1b2433; }
.wle-style-demo.is-grid { border: 1px solid #9aa8bd; }
.wle-style-demo.is-grid i { border-bottom: 1px solid #9aa8bd; background: linear-gradient(90deg, transparent 32%, #9aa8bd 32% 34%, transparent 34% 65%, #9aa8bd 65% 67%, transparent 67%); }
.wle-style-demo.is-zebra i:first-child { background: #1f2a3d; }
.wle-style-demo.is-zebra i:nth-child(odd):not(:first-child) { background: #e6eaf1; }
.wle-drop { display: grid; place-items: center; text-align: center; min-height: 170px; border: 2px dashed #c7d2e3; border-radius: 14px; padding: 14px; cursor: pointer; background: #f8fafd; transition: border-color .15s, background .15s; }
.wle-drop:hover, .wle-drop.is-drag { border-color: var(--wl-blue); background: var(--wl-blue-soft); }
.wle-drop img { max-height: 260px; object-fit: contain; border-radius: 6px; }
.wle-asset-thumb { width: 44px; height: 32px; object-fit: cover; border-radius: 6px; border: 1px solid var(--wl-line); flex: 0 0 44px; background: #fff; }
.wle-kw { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.wle-status { font-size: .72rem; color: var(--wl-muted); display: inline-flex; align-items: center; gap: 6px; }
.wle-dot { width: 7px; height: 7px; border-radius: 999px; background: #94a3b8; }
.wle-dot.ok { background: #22c55e; } .wle-dot.busy { background: #f59e0b; } .wle-dot.err { background: #ef4444; }

.wle-side-body { flex: 1; overflow: auto; padding: 12px; min-height: 0; }
.wle-sug { border: 1px solid var(--wl-line); border-radius: 12px; padding: 10px; margin-bottom: 10px; background: #fff; }
.wle-sug.is-pending { border-color: #fbcfe8; background: #fffafc; }
.wle-sug-html { font-family: Georgia, serif; font-size: .9rem; line-height: 1.55; max-height: 260px; overflow: auto; border-radius: 8px; background: #f8fafc; padding: 8px 10px; }
.wle-sug-html p { margin: 0 0 .5em; }
.wle-diff del { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.wle-diff ins { background: #dcfce7; color: #14532d; text-decoration: none; }
.wle-chat-msg { border-radius: 12px; padding: 8px 10px; font-size: .84rem; line-height: 1.5; margin-bottom: 8px; overflow-wrap: anywhere; }
.wle-chat-msg.user { background: var(--wl-blue-soft); margin-left: 24px; }
.wle-chat-msg.assistant { background: #f4f6fa; margin-right: 12px; }
.wle-chat-msg pre { white-space: pre-wrap; }
.wle-finding { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; padding: 7px 0; border-bottom: 1px solid #f0f3f8; }
/* Periksa naskah (WL-12): findings grouped by rule, the same row look as the Validasi panel. */
.wle-proof-group { margin-top: 10px; border: 1px solid var(--wl-line); border-radius: 12px; padding: 2px 10px 4px; background: #fff; }
.wle-proof-head { display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.wle-proof-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; text-align: left; font-size: .8rem; color: var(--wl-ink); cursor: pointer; }
.wle-proof-toggle > i { font-size: 10px; color: var(--wl-muted); transition: transform .15s; flex: 0 0 auto; }
.wle-proof-toggle > i.is-open { transform: rotate(90deg); }
.wle-proof-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 1023px) {
    .wle-proof-toggle { flex-wrap: wrap; row-gap: 2px; }
    .wle-proof-title { white-space: normal; overflow: visible; flex: 1 1 100%; order: 1; }
}
.wle-proof-item { padding: 6px 0; }
.wle-proof-item:last-child { border-bottom: 0; }
.wle-proof-item .wl-btn { white-space: nowrap; }
.wle-proof-jump { display: block; width: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--wl-ink); font: inherit; overflow-wrap: anywhere; }
.wle-proof-jump:hover .wle-proof-snip, .wle-proof-jump:hover .wle-proof-where { text-decoration: underline; }
.wle-proof-snip { background: var(--wl-amber-soft); border-radius: 4px; padding: 0 4px; white-space: pre-wrap; font-weight: 600; }
.wle-proof-sug { color: var(--wl-green); margin-left: 4px; font-weight: 600; white-space: pre-wrap; }
.wle-proof-where { font-weight: 600; }
/* The mobile bar lives inside the status bar now (WL-05, end of file). */
@media (min-width: 1024px) { .wle .wle-mobile-only { display: none !important; } }
.wle-scrim { position: fixed; inset: 0; background: rgba(10, 18, 34, .35); z-index: 50; }

/* Reference list and citation styles */
.wle-rich cite.wl-cite-sup { vertical-align: super; font-size: .7em; line-height: 0; padding: 0 1px; }
.wle-rich cite.is-unknown { color: var(--wl-red); background: var(--wl-red-soft); }
.wle-bib { font-family: Georgia, 'Times New Roman', serif; font-size: .95rem; line-height: 1.6; color: #1b2433; margin-top: 6px; }
.wle-bib-item { display: flex; gap: 8px; margin-bottom: .55em; overflow-wrap: anywhere; }
.wle-bib.is-hanging .wle-bib-item > div { padding-left: 1.6em; text-indent: -1.6em; }
.wle-bib-n { flex: 0 0 auto; min-width: 2em; color: #475569; }
.wle-bib-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; text-indent: 0; }
/* WL-REFS: the page's reference list edited in place (refs_inline.js, _ref_inline.html). The list sits on the
   white sheet: every selector starts with .wle-page (the dark-mode keep list), so it keeps the paper's light look.
   The tools are the editor's, never the article's: the final view and print leave them out. */
.wle-page .wle-bib-item[data-ref-id] { position: relative; border-radius: 4px; cursor: pointer; transition: background-color .15s; }
.wle-page .wle-bib-item[data-ref-id]:hover { background-color: rgba(37, 99, 235, .05); }
.wle-page .wle-bib-item.is-editing { cursor: default; background: none; }
.wle-page .wle-bib.is-hanging .wle-bib-item.is-editing > div { padding-left: 0; text-indent: 0; }
.wle-page .wle-bib-acts { flex: 0 0 auto; display: inline-flex; gap: 2px; align-self: flex-start; opacity: .35; transition: opacity .15s; }
.wle-page .wle-bib-item:hover .wle-bib-acts, .wle-page .wle-bib-acts:focus-within { opacity: 1; }
.wle-page .wle-bib-acts button { width: 28px; height: 28px; border-radius: 6px; color: #475569; font-size: .8rem; font-family: Inter, system-ui, sans-serif; }
.wle-page .wle-bib-acts button:hover { background: #e8eefb; color: #1d4ed8; }
.wle-page .wle-bib-acts .wle-bib-del:hover { background: #fdecec; color: #b91c1c; }
.wle-page .wle-bib-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .4em; font-family: Inter, system-ui, sans-serif; }
.wle-page .wle-bib-add button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px dashed #93a8d6; border-radius: 8px; background: #f5f8ff; color: #1d4ed8; font-size: .78rem; font-weight: 600; }
.wle-page .wle-bib-add button:hover { background: #e8eefb; border-style: solid; }
.wle-page .wle-bib-add button.is-quiet { border-color: #d5dce8; background: #fff; color: #475569; font-weight: 500; }
.wle-page .wle-ref-inline { margin: 2px 0 6px; padding: 10px 12px; border: 1px solid #c7d4ee; border-radius: 10px; background: #f8faff; color: #1b2433; font-family: Inter, system-ui, sans-serif; font-size: .8rem; line-height: 1.35; text-indent: 0; cursor: default; }
.wle-page .wle-ref-inline-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.wle-page .wle-ref-inline-doi { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.wle-page .wle-ref-inline-doi .wle-ref-inline-f { flex: 1 1 220px; }
.wle-page .wle-ref-inline-or { margin: 6px 0 4px; color: #64748b; font-size: .72rem; }
.wle-page .wle-ref-inline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wle-page .wle-ref-inline-f { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: #475569; font-size: .72rem; font-weight: 600; }
.wle-page .wle-ref-inline-f small { font-weight: 400; color: #64748b; }
.wle-page .wle-ref-inline-f.is-wide { grid-column: 1 / -1; }
.wle-page .wle-ref-inline .wl-input { width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #1b2433; font-size: .8rem; font-weight: 400; }
.wle-page .wle-ref-inline textarea.wl-input { resize: vertical; }
.wle-page .wle-ref-inline .wl-input:focus { outline: 2px solid rgba(37, 99, 235, .35); border-color: #2563eb; }
.wle-page .wle-ref-inline .wl-btn { background: #fff; color: #1b2433; border-color: #cbd5e1; }
.wle-page .wle-ref-inline .wl-btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.wle-page .wle-ref-inline .wl-btn-ghost { background: transparent; border-color: transparent; color: #475569; }
.wle-page .wle-ref-inline .wl-pill { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.wle-page .wle-ref-inline-err { margin: 6px 0 0; padding: 6px 8px; border-radius: 7px; background: #fdecec; color: #b91c1c; overflow-wrap: anywhere; }
.wle-page .wle-ref-inline-note { margin: 6px 0 0; color: #64748b; font-size: .7rem; }
.wle-page .wle-ref-inline-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 560px) { .wle-page .wle-ref-inline-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wle-page.is-final-view .wle-bib-acts, .wle-page.is-final-view .wle-bib-add, .wle-page.is-final-view .wle-ref-inline { display: none !important; }
@media print { .wle-page .wle-bib-acts, .wle-page .wle-bib-add, .wle-page .wle-ref-inline { display: none !important; } }
.wle-sec-h .wle-chip { font-family: Inter, sans-serif; }
.wle-style-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--wl-line); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; background: var(--wl-blue-soft); }
.wle-style-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .wle-style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wle-style-grid .wl-choice { padding: 9px 10px; }
.wle-bib-preview { border: 1px solid var(--wl-line); border-radius: 12px; padding: 10px 12px; background: #fbfcfe; font-family: Georgia, serif; font-size: .88rem; line-height: 1.55; overflow-wrap: anywhere; min-height: 64px; }
.wl-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── v5: contributors, page view, find bar, symbols ── */
.wle-authors { margin: 4px 0 6px; padding: 6px 8px; border-radius: 8px; cursor: pointer; text-align: center; border: 1px dashed transparent; }
.wle-authors:hover, .wle-authors:focus-visible { border-color: #c9d3e2; background: #f8fafc; outline: none; }
.wle-authors.is-empty { border-color: #d6dde8; }
.wle-au-names { font-family: var(--wle-font, Georgia, serif); font-size: calc(var(--wle-size, 1.02rem) * var(--wle-zoom, 1) * var(--wle-ts, 1)); color: #1b2433; font-weight: 600; }
.wle-au-names sup { font-weight: 400; margin-left: 1px; }
.wle-au-aff { font-family: var(--wle-font, Georgia, serif); font-size: calc(var(--wle-size, 1.02rem) * var(--wle-zoom, 1) * var(--wle-ts, 1) * .85); color: #3b4556; line-height: 1.5; }
.wle-au-empty { font-size: .78rem; color: #64748b; }
.wle-au-card { border: 1px solid var(--wl-line); border-radius: 12px; padding: 10px; background: #fff; }
.wle-au-card.is-open { border-color: #a9c4ee; box-shadow: 0 0 0 3px rgba(43, 111, 237, .08); }
.wle-role { border: 1px solid var(--wl-line); border-radius: 999px; padding: 3px 9px; font-size: .7rem; color: #475569; background: #fff; }
.wle-role[aria-pressed="true"] { border-color: #2b6fed; background: #eaf1fe; color: #1d4fb8; font-weight: 600; }
/* V10 K1: the automatic declaration of Bantuan AI use (editor.js aiDiscSync), read-only next to the author's statement.
   The page is paper in both themes, so its colours stay light. Its statement's template guidance is not shown beside it. */
.wle-aidisc { margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; background: #f3f6fb; border-left: 3px solid #c7d2e3; font-family: var(--wle-font, Georgia, 'Times New Roman', serif); font-size: calc(var(--wle-size, 1.02rem) * var(--wle-zoom, 1) * var(--wle-ts, 1)); line-height: var(--wle-lh, 1.7); overflow-wrap: anywhere; color: #1b2433; user-select: text; cursor: default; }
.wle-aidisc-t { margin: 0; }
.wle-aidisc-cap { margin: 4px 0 0; font-family: Inter, sans-serif; font-size: .68rem; font-style: normal; color: #64748b; }
.wle-rich.has-aidisc:empty::before, .wlf .wle-rich.has-aidisc[data-wlf-ph]:empty::before { content: none; display: none; }
@media print { .wle-aidisc { background: none; border: 0; padding: 0; color: inherit; } .wle-aidisc-cap { display: none; } }
.wle-credit-preview { margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: #f6f8fc; color: #475569; font: .78rem/1.5 inherit; white-space: pre-wrap; }
.wle-page.is-pages { --wle-page-w: 816px; min-height: var(--wle-ph); padding-bottom: 96px;
  background-image: linear-gradient(to bottom, transparent calc(var(--wle-ph) - 2px), #e2e8f0 calc(var(--wle-ph) - 2px), #e2e8f0 var(--wle-ph)); background-size: 100% var(--wle-ph); background-repeat: repeat-y; }
.wle-pagemarks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.wle-pagemark { position: absolute; left: 0; right: 0; height: 0; }
.wle-pagemark span { position: absolute; right: 16px; top: -20px; font: 600 .66rem Inter, sans-serif; color: #94a3b8; letter-spacing: .08em; }
.wle-rich hr.wl-pagebreak { border-top: 2px dashed #94a3b8; position: relative; margin: 1.6em 0; }
.wle-rich hr.wl-pagebreak::after { content: "Halaman baru"; position: absolute; left: 50%; top: -0.75em; transform: translateX(-50%); background: #fff; padding: 0 8px; font: 600 .62rem Inter, sans-serif; color: #94a3b8; letter-spacing: .08em; text-transform: uppercase; }
.wle-findbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--wl-line); background: #fffdf5; }
.wle-findbar .wl-input { width: 180px; }
.wle-pop { position: absolute; top: 100%; left: 0; z-index: 40; margin-top: 4px; display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; padding: 6px; border: 1px solid var(--wl-line); border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(20,30,60,.15); }
.wle-sym { height: 32px; border-radius: 6px; font-size: 1rem; color: #1b2433; }
.wle-sym:hover { background: #eaf1fe; }
@media print {
  .wle-top, .wle-ribbon, .wle-findbar, .wle-outline, .wle-side, .wle-pagemarks, .wle-au-empty, .wl-toast, .wle-statusbar, .wle-mini, .wle-goto, .wle-wc, nav, aside { display: none !important; }
  .wle-body { display: block !important; }
  .wle-desk { overflow: visible; padding: 0; background: #fff; }
  .wle-page, .wle-page.is-pages { max-width: none; box-shadow: none; padding: 0; background-image: none; }
  .wle-rich hr.wl-pagebreak { break-after: page; border: 0; }
  .wle-rich hr.wl-pagebreak::after { content: none; }
}

/* ── v7: full-window app, template page, Word Home tools, header/footer, drafting, comments ── */
.wl-appbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--wl-line); position: sticky; top: 0; z-index: 30; }
.wl-appbar-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--wl-ink); text-decoration: none; }
.wl-appbar-logo, .wle-brand { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--wl-pink-soft); color: var(--wl-pink); font-size: .8rem; flex: 0 0 auto; }
@media (max-width: 639px) { .wle-brand { display: none; } }
.wle { height: 100vh; height: 100dvh; }
@media (max-width: 1023px) { .wle { height: auto; min-height: 100vh; } }

/* Drafting banner */
/* WX-DRAFT: the drafting run in the side panel's "Draf" tab (_draft_panel.html) and its status-bar indicator */
.wle-dp-head { border: 1px solid #fde4b8; background: #fffbeb; color: #78350f; border-radius: 12px; padding: 10px 12px; }
.wle-dp-head.is-done { background: var(--wl-green-soft); border-color: #bbf7d0; color: #14532d; }
.wle-dp-head.is-failed, .wle-dp-head.is-interrupted, .wle-dp-head.is-cancelled { background: var(--wl-red-soft); border-color: #fecaca; color: #7f1d1d; }
.wle-dp-count { font-size: .75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wle-dp-bar { height: 6px; border-radius: 99px; background: rgba(180, 83, 9, .15); margin-top: 8px; overflow: hidden; }
.wle-dp-bar i { display: block; height: 100%; background: var(--wl-amber); border-radius: 99px; transition: width .4s; }
.wle-dp-head.is-done .wle-dp-bar i { background: var(--wl-green); }
.wle-dp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wle-dp-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--wl-line); background: var(--wl-card, #fff); min-width: 0; }
.wle-dp-steps li > i { margin-top: 2px; width: 14px; text-align: center; flex: none; }
.wle-dp-step { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wle-dp-step .truncate { flex: 1; min-width: 0; }
.wle-dp-step small { flex: none; opacity: .7; white-space: nowrap; }
.wle-dp-note { font-size: .7rem; opacity: .75; margin-top: 2px; overflow-wrap: anywhere; }
.wle-dp-steps li.is-waiting { opacity: .7; }
.wle-dp-steps li.is-waiting i { color: #9aa3b2; }
.wle-dp-steps li.is-writing { border-color: var(--wl-amber); font-weight: 600; }
.wle-dp-steps li.is-done i { color: var(--wl-green); }
.wle-dp-steps li.is-failed i { color: var(--wl-red); }
.wle-dp-steps li.is-none, .wle-dp-steps li.is-short { border-color: #fde4b8; background: #fffbeb; color: #78350f; }
.wle-dp-steps li.is-none i, .wle-dp-steps li.is-short i { color: var(--wl-amber); }
.wle-dp-sec { border: 1px solid var(--wl-line); border-radius: 10px; padding: 8px 10px; font-size: .78rem; }
.wle-dp-sec.is-warn { border-color: #fde4b8; }
.wle-dp-h { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; opacity: .75; margin-bottom: 4px; }
.wle-dp-sec ul { margin: 0; padding-left: 16px; list-style: disc; display: grid; gap: 4px; }
.wle-dp-sec li { overflow-wrap: anywhere; }
.wle-dp-secs { display: block; font-size: .7rem; opacity: .65; }
.wle-sb-draft { gap: 4px; }
.wle-sb-draft.is-done i { color: var(--wl-green); }
.wle-sb-draft.is-failed i, .wle-sb-draft.is-interrupted i, .wle-sb-draft.is-cancelled i { color: var(--wl-red); }
.wle-sb-draft.is-running i, .wle-sb-draft.is-cancelling i { color: var(--wl-amber); }
.wle.is-locked .wle-rich, .wle.is-locked .wle-sec-h input { cursor: not-allowed; }
.wle.is-locked .wle-page { opacity: .96; }
.wle-ribbon-body.is-disabled { opacity: .5; pointer-events: none; }

/* Ribbon: Word-like Home */
.wle-rtab.is-ctx { color: var(--wl-pink); }
.wle-rtab.is-ctx[aria-selected="true"] { border-color: var(--wl-pink); }
.wle-rcol { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.wle-tb-sm { height: 24px; font-size: .7rem; font-weight: 600; justify-content: flex-start; padding: 0 6px; gap: 5px; color: #33415a; }
.wle-tb-sm i { width: 14px; text-align: center; }
.wle-rgrid { display: grid; grid-template-rows: repeat(2, 24px); grid-auto-flow: column; gap: 2px 4px; }
.wle-rfont { display: inline-flex; align-items: center; height: 26px; min-width: 120px; padding: 0 8px; border: 1px solid var(--wl-line); border-radius: 6px; background: #fff; font-size: .76rem; color: var(--wl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.wle-rfont.is-size { min-width: 40px; justify-content: center; }
.wle-rpop { position: relative; display: inline-flex; }
.wle-menu { position: absolute; top: 100%; left: 0; z-index: 45; margin-top: 4px; min-width: 200px; padding: 4px; border: 1px solid var(--wl-line); border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(20,30,60,.15); display: grid; gap: 1px; }
.wle-menu > button { text-align: left; padding: 6px 10px; border-radius: 6px; font-size: .8rem; color: var(--wl-ink); background: none; border: 0; cursor: pointer; }
.wle-menu > button:hover { background: #eef4ff; }
.wle-swatches { grid-template-columns: repeat(5, 28px); min-width: 0; gap: 4px; padding: 8px; }
.wle-swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); cursor: pointer; }
.wle-swatch-none { grid-column: 1 / -1; font-size: .74rem; padding: 4px 6px; border-radius: 6px; background: #f6f8fc; border: 0; cursor: pointer; }
.wle-fc-a { font-weight: 700; text-decoration: underline; text-decoration-color: #c00000; text-decoration-thickness: 3px; }
.wle-rcheck { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: #33415a; padding: 0 6px; white-space: nowrap; }
.wle-tb-close { color: var(--wl-red); }
.wle-gallery { display: flex; gap: 3px; max-width: 400px; overflow-x: auto; padding: 2px; border: 1px solid var(--wl-line); border-radius: 8px; background: #fff; scrollbar-width: thin; }
.wle-gal-item { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 76px; flex: 0 0 76px; height: 46px; padding: 2px 6px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; overflow: hidden; }
.wle-gal-item:hover { background: #f1f5fb; }
.wle-gal-item[aria-selected="true"] { border-color: #93b4fb; background: var(--wl-blue-soft); }
.wle-gal-demo { font-size: .9rem; line-height: 1.2; color: #1b2433; white-space: nowrap; }
.wle-gal-name { font-size: .62rem; color: var(--wl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-family: Inter, sans-serif; font-style: normal; font-weight: 500; text-transform: none; }
.wle-style-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--wl-line); border-radius: 10px; background: #fff; cursor: pointer; position: relative; }
.wle-style-row:hover { border-color: #b9c8e6; }
.wle-style-row.is-on { border-color: var(--wl-blue); background: var(--wl-blue-soft); }
.wle-style-row:disabled { opacity: .55; cursor: default; }
.wle-style-row > i { position: absolute; right: 10px; top: 10px; }
.wle-style-name { font-size: .95rem; color: #1b2433; }
.wle-style-sum { font-size: .68rem; color: var(--wl-muted); font-family: Inter, sans-serif; }

/* Template page: margins come from the template; marks and highlights */
.wle-page.is-pages.has-layout { padding-bottom: 24px; }
.wle-page.show-marks .wle-rich p::after, .wle-page.show-marks .wle-rich h3::after, .wle-page.show-marks .wle-rich h4::after, .wle-page.show-marks .wle-rich li::after { content: "¶"; color: #93a8c9; margin-left: 2px; font-weight: 400; }
.wle-page.show-marks .wle-rich br::after { content: "↵"; color: #93a8c9; }
.wle-rich .wl-hl-yellow { background: #fde047; } .wle-rich .wl-hl-green { background: #86efac; } .wle-rich .wl-hl-blue { background: #93c5fd; }
.wle-rich .wl-hl-pink { background: #f9a8d4; } .wle-rich .wl-hl-grey { background: #d1d5db; }
.wle-rich .wl-fc-red { color: #c00000; } .wle-rich .wl-fc-blue { color: #1f4e79; } .wle-rich .wl-fc-green { color: #38761d; }
.wle-rich .wl-fc-orange { color: #c55a11; } .wle-rich .wl-fc-grey { color: #595959; }
.wle-rich .wl-caps { text-transform: uppercase; }

/* Header & footer: dimmed until double-clicked, like Word */
.wle-hf { position: relative; min-height: 28px; border: 1px dashed transparent; border-radius: 4px; padding: 2px 4px; cursor: default; }
.wle-hf-head { margin: -12px 0 18px; }
.wle-hf-foot { margin: 28px 0 -8px; }
.wle-page:not(.is-hf-mode) .wle-hf { opacity: .55; }
.wle-page:not(.is-hf-mode):not(.is-readonly) .wle-hf:hover { border-color: #c9d3e2; opacity: .8; }
.wle-hf.is-edit { border-color: var(--wl-pink); opacity: 1; background: #fff; }
.wle-page.is-hf-mode > :not(.wle-hf):not(.wle-sheets):not(.wle-fsel):not(.wle-fctx) { opacity: .4; }
.wle-hf-tag { position: absolute; left: 0; bottom: -18px; font: 600 .62rem Inter, sans-serif; color: #fff; background: var(--wl-pink); padding: 1px 6px; border-radius: 4px; z-index: 2; }
.wle-hf-tag:empty { display: none; }
.wle-hf-foot .wle-hf-tag { bottom: auto; top: -18px; }
.wle-hf-body { outline: none; min-height: 20px; font-size: .8rem; overflow-wrap: anywhere; }
.wle-hf-body:empty::before { content: attr(data-placeholder); color: #c0c8d6; font-style: italic; font-size: .72rem; }
.wle-page:not(.is-hf-mode) .wle-hf-body:empty::before { content: ""; }
.wle-hf-body p { margin: 0; }
.wle-hf-body img { max-height: 90px; width: auto; display: inline-block; vertical-align: middle; }
.wle-hf-body table { width: 100%; border-collapse: collapse; }
.wle-hf-body td { vertical-align: middle; padding: 2px 4px; }
.wle-hf-body .wl-al-c { text-align: center; } .wle-hf-body .wl-al-r { text-align: right; }
.wl-field { display: inline-block; min-width: 1.4em; text-align: center; background: #eef2f8; border-radius: 3px; color: #475569; font-family: Inter, sans-serif; font-size: .9em; }

/* Comments */
.wle-rich .wl-cmt { background: #fef3c7; border-bottom: 2px solid #f59e0b; cursor: pointer; }
.wle-page.hide-cmt .wle-rich .wl-cmt { background: none; border-bottom: 0; }
/* WL-BUG-CMT: the words of a comment on the front matter or a header/footer (no mark in the text: word.js paintCommentMarks) */
/* (under .wle-page: paper kept light in dark mode, data-ui-theme-keep) */
.wle-page ::highlight(wl-cmt) { background-color: #fef3c7; color: #1f2933; text-decoration: underline 2px #f59e0b; }
.wle-page ::highlight(wl-cmt-active) { background-color: #fcd34d; color: #1f2933; text-decoration: underline 2px #b45309; }
.wle-sheet-head.is-cmt-zone, .wle-sheet-foot.is-cmt-zone { outline: 2px dashed #f59e0b; outline-offset: 3px; border-radius: 2px; }
.wle-page .wl-cmt-part { outline: 2px solid #f59e0b; outline-offset: 3px; border-radius: 2px; }
.wle-page .wl-cmt-part.is-cmt-active { outline-color: #b45309; background-color: rgba(252, 211, 77, .22); }
.wle-cmt-place { font-size: 10px; font-weight: 600; color: var(--wl-amber, #b45309); margin-top: 4px; }
.wle-cmt { border: 1px solid var(--wl-line); border-left: 3px solid #f59e0b; border-radius: 10px; padding: 8px 10px; background: #fff; cursor: pointer; }
.wle-cmt.is-active { border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.wle-cmt.is-resolved { border-left-color: #cbd5e1; opacity: .85; }
.wle-cmt.is-new { cursor: default; border-left-color: var(--wl-blue); }
.wle-cmt-av { width: 26px; height: 26px; border-radius: 999px; background: #fde68a; color: #78350f; display: grid; place-items: center; font-size: .72rem; font-weight: 700; flex: 0 0 auto; }
.wle-cmt-quote { font-size: .74rem; color: var(--wl-muted); font-style: italic; margin: 6px 0 2px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wle-cmt-body { font-size: .82rem; color: var(--wl-ink); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.wle-cmt-reply { margin-top: 6px; padding: 6px 0 0 10px; border-top: 1px solid #f0f3f8; }
@media print { .wle-rich .wl-cmt { background: none; border: 0; } .wle-hf { opacity: 1 !important; border: 0 !important; } }
/* V11: the change markers are for the screen; the printed page reads as the clean file (inserted text plain, deleted text gone, no change bars or marks). */
@media print {
  .wle-rich ins { color: inherit !important; text-decoration: none !important; }
  .wle-rich del { display: none !important; }
  .wle-page .wle-rich [data-rev-ins]::after, .wle-page .wle-rich [data-rev-del]::after { content: none !important; }
  .wle-page .wle-rich :is(p, li, h2, h3, h4, blockquote):is(:has(ins), :has(del), [data-rev-ins], [data-rev-del])::before { content: none !important; }
}
@media (max-width: 639px) {
    .wle-top { padding: 6px 8px; gap: 4px; }
    .wle-top .wle-status { display: none; }
    .wle-hf-body img { max-height: 48px; }
}

/* The journal desk's copy of the editor (templates/desk/manuscript_editor.html). */
.wl-desk-note { display: flex; align-items: flex-start; gap: 8px; padding: 8px 16px; font-size: .78rem; line-height: 1.45; background: #fff8e6; color: #7c4a03; border-bottom: 1px solid #f3e1b5; }
.wl-desk-note i { margin-top: 2px; }
.wle-src-pill { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .wle-top-main .wle-src-pill { display: none !important; } }

/* ── v9: Word files as they are, sheets per page, menus over the page ── */
/* Direct alignment of a paragraph wins over its style, as in Word. */
.wle-rich .wl-al-c { text-align: center !important; }
.wle-rich .wl-al-r { text-align: right !important; }
.wle-rich .wl-al-j { text-align: justify !important; }
.wle-rich .wl-al-l { text-align: left !important; }
.wle-rich img[data-img] { max-width: 100%; height: auto; display: inline-block; vertical-align: bottom; }
.wle-rich table.wl-src-table { width: auto; max-width: 100%; border: 0; font: inherit; font-variant-numeric: normal; }
.wle-rich table.wl-src-table td { padding: 0 7px; vertical-align: top; min-width: 0; }
.wle-rich table.wl-src-table.wl-src-grid td { border: 1px solid #000; }
.wle-rich table.wl-src-table td > p:first-child { margin-top: 0; }
.wle-page.is-faithful .wle-rich p:empty::before { content: none; }
/* Print layout: the text flows over separate sheets with their own header and footer. */
.wle-page.is-sheets { background: transparent; box-shadow: none; border-radius: 0; isolation: isolate; background-image: none; }
/* A sheet keeps its paper width: a desk pane narrower than the page (both side panels open)
   scrolls sideways instead of reflowing the text, so the pages break where Word breaks them. */
.wle-page.is-sheets { width: var(--wle-page-w); max-width: none; flex: none; }
.wle-sheets { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wle-sheet { position: absolute; left: 0; right: 0; background: #fff; box-shadow: 0 1px 3px rgba(20, 30, 60, .14), 0 6px 18px rgba(20, 30, 60, .07); }
.wle-sheet-head, .wle-sheet-foot { position: absolute; left: var(--wle-ml, 72px); right: var(--wle-mr, 72px); min-height: 0; }
.wle-sheet-head { top: var(--wle-hd, 47px); }
.wle-sheet-foot { bottom: var(--wle-fd, 47px); }
.wle-sheet .is-hidden { visibility: hidden; }
.wle-sheet .wl-field { background: none; min-width: 0; color: inherit; font: inherit; }
.wle-page.is-sheets .wle-hf { position: absolute; left: var(--wle-ml, 72px); right: var(--wle-mr, 72px); margin: 0; z-index: 3; }
.wle-page.is-sheets .wle-hf:not(.is-edit) { display: none; }
.wle-page.is-sheets .wle-hf-foot .wle-hf-tag { top: auto; bottom: -18px; }
/* Ribbon menus are placed over the page (floatMenu), not clipped by the ribbon. */
.wle-menu, .wle-pop { z-index: 60; }
.wle-fmt { max-width: 15rem; }
@media print {
  .wle-sheets { display: none !important; }
  .wle-page.is-sheets { padding: 0 !important; min-height: 0 !important; width: auto; }
}
/* The dashboard sets Inter on every element; text inside the page takes its paragraph's font. */
.wle-rich :is(strong, b, em, i, u, s, sub, sup, span, a, cite, mark, small, code, ins, del, tbody, thead, tfoot, tr, td, th, li, div[data-ojsa]):not([class*="fa-"]),
.wle-hf-body :not([class*="fa-"]), .wle-sec-h input { font-family: inherit; }

/* ── v10: rulers, the template's page in dark mode ───────────────────────── */
.wle-ruler { --wle-r-bg: #f3f5f8; --wle-r-ink: #6b7686; position: relative; font: 9px/1 Inter, sans-serif; color: var(--wle-r-ink); user-select: none; pointer-events: none; }
.wle-ruler span { position: absolute; }
.wle-ruler-h { height: 18px; margin: 0 auto 6px; background:
    linear-gradient(to right, #d9dee6 var(--wle-r-a), #fff var(--wle-r-a), #fff calc(100% - var(--wle-r-b)), #d9dee6 calc(100% - var(--wle-r-b))),
    var(--wle-r-bg); border-radius: 2px; box-shadow: inset 0 0 0 1px #d4dae3; overflow: hidden; }
.wle-ruler-h::before { content: ""; position: absolute; left: var(--wle-r-a); right: var(--wle-r-b); top: 0; bottom: 0;
    background: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--wle-cm) / 2 - 1px), #9aa5b4 calc(var(--wle-cm) / 2 - 1px), #9aa5b4 calc(var(--wle-cm) / 2), transparent calc(var(--wle-cm) / 2), transparent var(--wle-cm));
    background-size: var(--wle-cm) 100%; background-position: 0 0; }
.wle-ruler-h::after { content: ""; position: absolute; inset: 0 var(--wle-r-b) 0 var(--wle-r-a);
    background: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--wle-cm) - 1px), #6b7686 calc(var(--wle-cm) - 1px), #6b7686 var(--wle-cm)); mask: linear-gradient(to bottom, transparent 70%, #000 70%); -webkit-mask: linear-gradient(to bottom, transparent 70%, #000 70%); }
.wle-ruler-h span { top: 3px; transform: translateX(-50%); }
.wle-desk.has-ruler { padding-top: 10px; }
.wle-desk.has-ruler .wle-ruler-h { position: sticky; top: 0; z-index: 4; }
.wle-ruler-v { position: absolute; left: -24px; top: 0; width: 18px; background:
    linear-gradient(to bottom, #d9dee6 var(--wle-r-a), #fff var(--wle-r-a), #fff calc(100% - var(--wle-r-b)), #d9dee6 calc(100% - var(--wle-r-b))),
    var(--wle-r-bg); border-radius: 2px; box-shadow: inset 0 0 0 1px #d4dae3; }
.wle-ruler-v::after { content: ""; position: absolute; inset: var(--wle-r-a) 0 var(--wle-r-b) 0;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--wle-cm) - 1px), #6b7686 calc(var(--wle-cm) - 1px), #6b7686 var(--wle-cm)); mask: linear-gradient(to right, transparent 70%, #000 70%); -webkit-mask: linear-gradient(to right, transparent 70%, #000 70%); }
.wle-ruler-v span { left: 3px; transform: translateY(-50%); }
@media (max-width: 899px) { .wle-ruler { display: none !important; } }
/* The template's header/footer: Word's own cell widths, borders and run colours. */
.wle-hf-body td { padding: 0; }
.wle-hf-body table.wl-hf-table { table-layout: fixed; width: 100%; }
.wle-hf-body .wl-field { font: inherit; color: inherit; }
@media print { .wle-ruler { display: none !important; } }

/* ── WordCraft WL-01/03/10: command palette, Undo history, Pintasan sheet ── */
.wle-palette { display: flex; align-items: center; gap: 2px; }
.wle-palette-q { height: 30px; width: 170px; max-width: 32vw; border: 1px solid var(--wl-line); border-radius: 8px; background: #fff; color: var(--wl-ink); font-size: .78rem; padding: 0 8px; }
.wle-palette-q:focus { outline: 2px solid #bfd4ff; border-color: var(--wl-blue); }
.wle-palette-btn { display: none; }
.wle-palette-menu { position: fixed; z-index: 62; max-width: calc(100vw - 16px); max-height: min(60vh, 420px); overflow: auto; padding: 4px; border: 1px solid var(--wl-line); border-radius: 10px; background: #fff; color: var(--wl-ink); box-shadow: 0 10px 30px rgba(20,30,60,.18); }
.wle-palette-in { display: none; align-items: center; gap: 6px; padding: 4px 6px 6px; border-bottom: 1px solid var(--wl-line); margin-bottom: 4px; color: var(--wl-muted); }
.wle-palette-in input { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--wl-line); border-radius: 8px; padding: 0 8px; font-size: .85rem; color: var(--wl-ink); background: #fff; }
.wle-palette-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--wl-ink); font-size: .8rem; cursor: pointer; min-width: 0; }
.wle-palette-row > i { width: 16px; text-align: center; color: var(--wl-muted); flex: 0 0 auto; }
.wle-palette-row.is-sel { background: var(--wl-blue-soft); }
.wle-palette-row.is-off .wle-palette-label { color: var(--wl-muted); }
.wle-palette-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wle-palette-label small { color: var(--wl-muted); font-size: .72rem; }
.wle-palette-reason { flex: 0 1 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: var(--wl-amber); }
.wle-palette-row kbd, .wle-keys kbd { flex: 0 0 auto; font: 600 .66rem/1 Inter, system-ui, sans-serif; color: var(--wl-muted); border: 1px solid var(--wl-line); border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; background: #f8fafd; white-space: nowrap; }
.wle-palette-empty { padding: 8px; font-size: .78rem; color: var(--wl-muted); }
@media (max-width: 639px) {
    .wle-palette-q { display: none; }
    .wle-palette-btn { display: inline-flex; }
    .wle-palette-in { display: flex; }
    .wle-palette-reason { display: none; }
}
.wle-undo { display: inline-flex; align-items: center; }
.wle-tb-caret { min-width: 16px; padding: 0 2px; }
.wle-undo-menu { min-width: 240px; max-width: calc(100vw - 16px); max-height: 60vh; overflow: auto; }
.wle-undo-menu > button { display: flex; align-items: center; gap: 8px; }
.wle-undo-menu > button small { width: 18px; color: var(--wl-muted); font-size: .68rem; text-align: right; }
.wle-undo-menu > button.is-sel { background: var(--wl-blue-soft); }
.wle-undo-foot { padding: 6px 10px 4px; border-top: 1px solid var(--wl-line); margin-top: 3px; font-size: .7rem; color: var(--wl-muted); overflow-wrap: anywhere; }
.wle-keys-grid { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wle-keys-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid #f0f3f8; font-size: .8rem; }
.wle-keys { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
/* Locked while the system drafts: dimmed, but every button keeps its own reason (no blanket inert). */
.wle-ribbon-body.is-disabled { opacity: .6; pointer-events: auto; }

/* ── Cari & ganti (WL-04): the find bar, the highlights, the side list ── */
.wle-findbar .wle-find-q, .wle-findbar .wle-find-r { flex: 1 1 140px; min-width: 90px; max-width: 280px; width: auto; }
.wle-findbar .wle-find-q.is-bad { border-color: var(--wl-red); }
.wle-find-count { min-width: 64px; }
.wle-find-break { flex-basis: 100%; height: 0; }
.wle-find-opts { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 6px; border-top: 1px dashed var(--wl-line); }
/* The sheet is white paper in both themes: its amber tokens stay the light ones. */
.wle-page { --wl-amber: #b45309; --wl-amber-soft: #fff7e6; }
.wle-rich::highlight(wle-find), .wle-bib::highlight(wle-find) { background-color: var(--wl-amber-soft); text-decoration: underline 2px var(--wl-amber); }
.wle-rich::highlight(wle-find-cur), .wle-bib::highlight(wle-find-cur) { background-color: var(--wl-amber); color: #fff; }
.wle-otabs { display: flex; gap: 2px; border-radius: 8px; background: #f1f5fb; padding: 2px; }
.wle-otab { height: 26px; padding: 0 10px; border-radius: 6px; border: 0; background: none; font-size: .75rem; font-weight: 600; color: #4b5a72; cursor: pointer; display: inline-flex; align-items: center; }
.wle-otab.is-on { background: #fff; color: var(--wl-blue); box-shadow: 0 1px 2px rgba(20, 30, 60, .12); }
.wle-slist { display: flex; flex-direction: column; gap: 1px; }
.wle-slist-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; padding-left: 8px; }
.wle-slist-row:hover { background: #f1f5fb; }
.wle-slist-row.is-on { background: var(--wl-blue-soft); }
.wle-slist-row.is-on .wle-slist-main { color: var(--wl-blue); font-weight: 600; }
.wle-slist-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 6px; padding: 5px 4px 5px 0; text-align: left; background: none; border: 0; cursor: pointer; font-size: .78rem; color: #33415a; line-height: 1.35; }
.wle-slist-main > i { font-size: 11px; color: var(--wl-muted); flex: none; width: 14px; text-align: center; margin-top: 3px; }
.wle-slist-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wle-slist-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wle-slist-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wle-slist-sub small { color: var(--wl-muted); font-size: .66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wle-slist-text mark { background: var(--wl-amber-soft); color: inherit; text-decoration: underline 2px var(--wl-amber); border-radius: 2px; padding: 0 1px; font-weight: 600; }
.wle-slist-act { height: 24px !important; min-width: 0 !important; padding: 0 7px !important; font-size: .7rem; margin-right: 4px; visibility: hidden; }
.wle-slist-row:hover .wle-slist-act, .wle-slist-row.is-on .wle-slist-act, .wle-slist-row:focus-within .wle-slist-act { visibility: visible; }
.wle-slist-empty { white-space: normal; padding: 4px 8px; }
@media (max-width: 639px) {
    .wle-findbar { padding: 6px 8px; }
    .wle-find-opt span { display: none; }   /* icon only: the search row stays one row at 390px */
    .wle-find-count { min-width: 0; font-size: .64rem; }
    .wle-findbar .wle-find-q, .wle-findbar .wle-find-r { flex-basis: 80px; min-width: 70px; }
}
/* ── WordCraft WL-08: typing like Word ─────────────────────────────────── */
/* Lettered and roman lists typed as 'a. ' / 'i. ' (exported as Word numbering overrides). */
.wle-rich ol.wl-ol-a { list-style: lower-alpha; }
.wle-rich ol.wl-ol-i { list-style: lower-roman; }
/* Justified prose may hyphenate once the sheet carries a lang attribute. */
.wle-rich .wl-al-j { hyphens: auto; }
/* The Pengetikan ribbon group: four toggles in two rows beside the batch button. */
.wle-rtyping { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 0 2px; align-items: center; }
.wle-rtyping .wle-rcheck { padding: 0 4px; font-weight: 500; }
.wle-rtyping .wle-tb { grid-row: 1 / span 2; }
/* Rapikan tipografi: the preview per section. */
.wle-tidy-list { max-height: 50vh; overflow: auto; display: grid; gap: 8px; }
.wle-tidy-item { border: 1px solid var(--wl-line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.wle-tidy-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wle-tidy-item.is-skipped .wle-tidy-sample { opacity: .45; text-decoration: line-through; }
.wle-tidy-sample { font-family: Georgia, 'Times New Roman', serif; font-size: .82rem; color: var(--wl-muted); margin: 3px 0 0; overflow-wrap: anywhere; }
.wle-tidy-sample i { font-size: .66rem; margin: 0 4px; color: var(--wl-blue); }
.wle-tidy-sample span:last-child { color: var(--wl-ink); }
/* ── WordCraft WL-11: comment threads — margin balloons, in-place edit ──────── */
/* The margin column hangs off the page's right edge; the page shifts left so page + balloons stay centred. */
.wle-margin { position: absolute; top: 0; left: calc(100% + 16px); width: 260px; height: 100%; pointer-events: none; }
.wle-margin .wle-cmt { position: absolute; left: 0; width: 260px; pointer-events: auto; transition: top .15s ease; box-shadow: 0 1px 2px rgba(20, 30, 60, .08); }
.wle-margin .wle-cmt::before { content: ""; position: absolute; left: -17px; top: 14px; width: 14px; border-top: 2px dotted #f59e0b; }
.wle-margin .wle-cmt.is-resolved::before { border-top-color: #cbd5e1; }
.wle-margin .wle-cmt.is-active { z-index: 2; }
.wle-desk.has-balloons .wle-page, .wle-desk.has-balloons .wle-ruler-h { margin-left: max(0px, calc((100% - var(--wle-page-w, 816px) - 276px) / 2)); }
@media (max-width: 1279px) { .wle-margin { display: none !important; } }
.wle-cmt-tool { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 6px; background: none; color: var(--wl-muted); font-size: .7rem; cursor: pointer; }
.wle-cmt-tool:hover { background: #f1f4f9; color: var(--wl-ink); }
.wle-cmt-edit { min-height: 64px; font-size: .82rem; margin-top: 2px; }
@media print { .wle-margin { display: none !important; } }
/* ── WL-CHANGES: who changed this paragraph — change cards in the margin (change_margin.js) ─────────── */
.wle-chg { position: relative; border: 1px solid var(--wl-line); border-left: 3px solid var(--chg, var(--wl-rev-1)); border-radius: 10px; padding: 6px 8px; background: #fff; color: var(--wl-ink); cursor: pointer; font-size: .78rem; min-width: 0; }
.wle-chg:hover { border-color: #c7d2e3; border-left-color: var(--chg, var(--wl-rev-1)); }
.wle-chg.is-active { box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.wle-chg:focus-visible { outline: 2px solid var(--wl-blue); outline-offset: 1px; }
.wle-chg-e + .wle-chg-e { margin-top: 6px; padding-top: 6px; border-top: 1px solid #edf0f5; }
.wle-chg-who { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
.wle-chg-who:focus-visible { outline: 2px solid var(--wl-blue); outline-offset: 2px; }
.wle-chg-who > span:last-child { display: block; }
.wle-chg-av { width: 22px; height: 22px; border-radius: 999px; background: var(--rev, var(--wl-rev-1)); color: #fff; display: grid; place-items: center; font-size: .66rem; font-weight: 700; flex: 0 0 auto; }
.wle-chg-name { margin: 0; font-size: .76rem; font-weight: 600; display: flex; align-items: center; gap: 5px; min-width: 0; }
.wle-chg-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wle-chg-role { flex: 0 0 auto; font-size: .62rem; font-weight: 600; padding: 0 5px; border-radius: 999px; border: 1px solid var(--rev, var(--wl-rev-1)); color: var(--rev, var(--wl-rev-1)); }
.wle-chg-meta { display: block; margin: 0; font-size: .66rem; color: var(--wl-muted); }
.wle-chg-diff { margin: 4px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: .76rem; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.wle-chg-diff > span + span::before { content: " "; }
.wle-chg-diff .is-insert { color: #15803d; background: #ecfdf3; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.wle-chg-diff .is-delete { color: #b91c1c; background: #fef2f2; text-decoration: line-through; }
.wle-chg-diff .is-equal { color: #64748b; }
.wle-chg-counts { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 3px 0 0; font-size: .66rem; color: var(--wl-muted); }
.wle-chg-counts:empty { display: none; }
.wle-chg-counts .is-plus { color: #15803d; font-weight: 600; }
.wle-chg-counts .is-minus { color: #b91c1c; font-weight: 600; }
.wle-chg-act { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.wle-chg-act .wl-btn { min-height: 0; height: 24px; padding: 0 8px; font-size: .7rem; border-radius: 7px; }
.wle-margin .wle-chg { position: absolute; left: 0; width: 260px; pointer-events: auto; transition: top .15s ease; box-shadow: 0 1px 2px rgba(20, 30, 60, .08); }
.wle-margin .wle-chg::before { content: ""; position: absolute; left: -17px; top: 14px; width: 14px; border-top: 2px dotted var(--chg, var(--wl-rev-1)); }
.wle-margin .wle-chg.is-active { z-index: 2; }
/* The paragraph a card points at: an overlay outside the text (nothing is written into the sheet). */
.wle-chg-hl { position: absolute; z-index: 3; pointer-events: none; border-radius: 6px; box-shadow: 0 0 0 2px var(--wl-blue); background: rgba(37, 99, 235, .07); opacity: 0; transition: opacity .35s ease; }
.wle-chg-hl.is-on { opacity: 1; }
/* (sticky at the foot of the page column: never over the side panel or the status bar) */
.wle-chg-fab { position: sticky; bottom: 12px; z-index: 6; display: flex; width: max-content; margin: 12px 0 0 auto; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--wl-line); border-radius: 999px; background: #fff; color: var(--wl-ink); font-size: .76rem; font-weight: 600; box-shadow: 0 4px 14px rgba(20, 30, 60, .18); cursor: pointer; }
.wle-chg-fab > i { color: var(--wl-blue); }
.wle-chg-fab-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media print { .wle-chg-fab, .wle-chg-hl { display: none !important; } }
/* WL-CHANGES part B: a phone's "Buka di panel" chip under the tapped author, keyword or citation (panel_links.js). */
.wle-link-chip { position: fixed; z-index: 61; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100vw - 16px); padding: 6px 12px; border: 1px solid var(--wl-line); border-radius: 999px; background: #fff; color: var(--wl-ink); font-size: .76rem; font-weight: 600; box-shadow: 0 4px 14px rgba(20, 30, 60, .18); cursor: pointer; }
.wle-link-chip > i { color: var(--wl-blue); }
@media print { .wle-link-chip { display: none !important; } }
/* WL-CHANGES part B: the panel row a click on the page opened (panel_links.js). */
.wle-kw-row { display: flex; align-items: center; gap: 4px; padding: 2px; border-radius: 8px; }
.wle-kw-row .wl-input { min-width: 0; flex: 1 1 auto; }
.wle-kw-n { flex: 0 0 18px; text-align: right; font-size: .7rem; color: var(--wl-muted); }
.wle-kw-row.is-focus, .wle-finding.is-focus { box-shadow: 0 0 0 2px rgba(37, 99, 235, .35); }
.is-linked { animation: wle-linked 2.4s ease; }
@keyframes wle-linked { 0%, 60% { box-shadow: 0 0 0 3px var(--wl-blue); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* WL-07: citation fields — the cite popover, the export option row, the file pill. */
.wle-rich cite[data-ref] { cursor: pointer; }
.wle-rich cite[data-ref]:hover { background: #dbe7ff; }
.wle-cite-pop { position: fixed; z-index: 62; width: 320px; max-width: calc(100vw - 16px); padding: 10px 12px; border: 1px solid var(--wl-line); border-radius: 12px; background: #fff; color: var(--wl-ink); box-shadow: 0 10px 30px rgba(20,30,60,.18); font-size: .8rem; }
.wle-cite-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.wle-cite-pop-label { font-weight: 600; color: var(--wl-blue); background: #eef4ff; border-radius: 4px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wle-cite-pop-title { margin: 4px 0 0; font-size: .72rem; color: var(--wl-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wle-cite-pop-row { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 8px; }
.wle-cite-pop-row > span { font-size: .72rem; color: var(--wl-muted); }
.wle-cite-pop-row .wl-input { padding: 4px 8px; font-size: .8rem; }
.wle-cite-pop-check { grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.wle-cite-pop-check > span { color: var(--wl-ink); font-size: .78rem; }
.wle-cite-pop-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wle-opt-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--wl-line); border-radius: 10px; font-size: .85rem; cursor: pointer; }
.wle-opt-row input { margin-top: 3px; }
.wle-fields-pill { cursor: pointer; border-style: solid; }
.wle-fields-pill:hover { background: #dbe7ff; }
/* ── WordCraft WL-09: the amber bar (conflict / local copy / shelf), status pill actions, version chips ── */
.wle-bar { background: var(--wl-amber-soft); border-bottom: 1px solid #fde4b8; color: #7c4a03; }
.wle-bar .wl-btn { color: var(--wl-ink); }
.wle-bar .wl-btn-primary { color: #fff; }
.wle-status-act { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border: 1px solid var(--wl-line); border-radius: 999px; background: #fff; color: var(--wl-blue); font: 600 .68rem/1 Inter, system-ui, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; }
.wle-status-act:hover { border-color: var(--wl-blue); }
.wle-label-chip { cursor: pointer; }
.wle-label-chip.is-picked { color: #fff; background: var(--wl-blue); border-color: var(--wl-blue); }
.wle-label-chip i { font-size: .6rem; }
/* ── WordCraft WL-05: status bar, Go To, word counts, mini toolbar, Fokus ── */
/* Sticky at the bottom: the dashboard shell scrolls as a whole document, so the bar stays in view either way. */
.wle-statusbar { display: flex; align-items: center; gap: 4px; height: 28px; flex: 0 0 28px; padding: 0 8px; border-top: 1px solid var(--wl-line); background: #fff; color: var(--wl-muted); font-size: .72rem; min-width: 0; overflow: hidden; white-space: nowrap; position: sticky; bottom: 0; z-index: 40; }
.wle-sb-msg { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.wle-sb-msg-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wle-sb-item { height: 22px; padding: 0 6px; border-radius: 6px; border: 0; background: transparent; color: inherit; font: inherit; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.wle-sb-item small { font-size: .62rem; color: var(--wl-muted); }
button.wle-sb-item { cursor: pointer; }
button.wle-sb-item:hover { background: #e8eef8; color: var(--wl-ink); }
button.wle-sb-item:disabled { opacity: .45; cursor: default; background: transparent; }
.wle-sb-item.is-on { background: #dbe6ff; color: var(--wl-blue); }
.wle-sb-item.is-over { color: var(--wl-red); font-weight: 600; }
.wle-sb-sec { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.wle-sb-sec-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wle-sb-fill { flex: 1 1 auto; min-width: 4px; }
.wle-sb-zoom { display: inline-flex; align-items: center; }
.wle-sb-zoom .wle-sb-item { min-width: 22px; justify-content: center; padding: 0 4px; }
.wle-sb-zoomv { min-width: 44px; }
.wle-sb-view { display: inline-flex; align-items: center; }
.wle-sb-ro { flex: 0 0 auto; }
/* The author's draft passed the hand-off's checks (author_draft.js readyHint): a button-sized pill. */
.wle-sb-ready { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font: inherit; font-size: 11px; line-height: 18px; }
.wle-sb-ready:hover { filter: brightness(.97); }
.wle-sb-ready:focus-visible { outline: 2px solid var(--wl-blue); outline-offset: 1px; }
.wle-statusbar .wle-mobilebar { display: none; }
@media (max-width: 1023px) {
    .wle-statusbar { height: 36px; flex-basis: 36px; }
    .wle-statusbar .wle-mobilebar { display: inline-flex; align-items: center; gap: 2px; padding-right: 4px; margin-right: 2px; border-right: 1px solid var(--wl-line); }
    .wle-statusbar .wle-mobilebar .wle-sb-item { position: relative; height: 28px; }
    .wle-statusbar .wle-mobilebar .wl-pill { position: absolute; top: -2px; right: -2px; }
}
@media (max-width: 639px) {
    .wle-statusbar { gap: 1px; padding: 0 4px; }
    .wle-statusbar .wle-mobilebar { gap: 0; padding-right: 2px; margin-right: 1px; }
    .wle-statusbar .wle-mobilebar .wle-sb-item { min-width: 26px; padding: 0 4px; }
    .wle-sb-lbl, .wle-sb-msg-t, .wle-sb-sec, .wle-sb-hf, .wle-sb-track, .wle-sb-view, .wle-sb-hint, .wle-sb-ts { display: none !important; }
    .wle-sb-ro, .wle-sb-ready { padding: 0 5px; }
    .wle-sb-item { padding: 0 3px; }
    .wle-sb-words { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 22px; }
    .wle-sb-zoomv { min-width: 36px; }
}
/* Status slot off (Tata letak › Bilah status): the panel buttons stay below 1024px, the bar goes away above. */
.wle-statusbar.is-min > :not(.wle-mobilebar) { display: none !important; }
.wle-statusbar.is-min .wle-mobilebar { border-right: 0; }
@media (min-width: 1024px) { .wle-statusbar.is-min { display: none !important; } }
.wle-goto, .wle-wc { position: fixed; z-index: 62; left: 8px; bottom: 34px; width: min(400px, calc(100vw - 16px)); padding: 10px; border: 1px solid var(--wl-line); border-radius: 12px; background: #fff; color: var(--wl-ink); box-shadow: 0 10px 30px rgba(20,30,60,.18); }
@media (max-width: 1023px) { .wle-goto, .wle-wc { bottom: 42px; } }
.wle-goto-hint { margin-top: 6px; font-size: .72rem; color: var(--wl-muted); overflow-wrap: anywhere; }
.wle-wc { max-height: min(60vh, 440px); overflow: auto; }
.wle-wc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 6px; border: 0; background: none; border-radius: 6px; font-size: .8rem; color: var(--wl-ink); text-align: left; cursor: pointer; }
.wle-wc-row small { flex: 0 0 auto; color: var(--wl-muted); font-variant-numeric: tabular-nums; }
button.wle-wc-row:hover { background: #eef4ff; }
.wle-wc-row.is-over small { color: var(--wl-red); font-weight: 700; }
.wle-wc-row.is-under small { color: var(--wl-amber); font-weight: 600; }
.wle-wc-row.is-total { border-top: 1px solid var(--wl-line); margin-top: 4px; padding-top: 7px; font-weight: 600; cursor: default; }
.wle-wc-sel { margin-top: 4px; font-size: .72rem; color: var(--wl-muted); }
.wle-mini { position: fixed; z-index: 61; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--wl-line); border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(20,30,60,.18); max-width: calc(100vw - 16px); }
.wle-mini .wle-tb { height: 30px; min-width: 30px; }
.wle-mini .wle-rsel { height: 28px; max-width: 130px; }
@media (max-width: 639px) {
    .wle-mini { padding: 2px; }
    .wle-mini .wle-mini-wide { display: none !important; }
    .wle-mini .wle-tb { height: 36px; min-width: 36px; }
}
.wle.is-focus .wle-ribbon, .wle.is-focus .wle-outline, .wle.is-focus .wle-side, .wle.is-focus .wle-mini { display: none !important; }
.wle.is-focus .wle-body { grid-template-columns: minmax(0, 1fr) !important; }
.wle-flash { animation: wle-flash 1.2s ease-out; }
@keyframes wle-flash { 0% { background-color: #fff3bf; } 100% { background-color: transparent; } }
/* ── WL-13: footnotes and endnotes ─────────────────────────────────────── */
.wle-rich sup.wl-fn { color: var(--wl-blue); font-weight: 700; padding: 0 2px; cursor: pointer; user-select: all; border-radius: 3px; }
.wle-rich sup.wl-fn.is-on { background: var(--wl-blue-soft); }
.wle-rich sup.wl-fn.is-broken { color: var(--wl-red); background: var(--wl-red-soft); }
.wle-o-note { font-size: .74rem; padding-top: 2px; padding-bottom: 2px; color: var(--wl-muted); }
.wle-o-note sup { color: var(--wl-blue); font-weight: 700; flex: 0 0 auto; }
.wle-notes-sheet .wle-note-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: .5em; font-size: .92em; line-height: 1.5; border-radius: 6px; padding: 2px 4px; cursor: pointer; overflow-wrap: anywhere; }
.wle-notes-sheet .wle-note-item:hover, .wle-notes-sheet .wle-note-item.is-on { background: var(--wl-blue-soft); }
.wle-note-n { color: var(--wl-blue); font-weight: 700; font-family: Inter, sans-serif; font-size: .78rem; flex: 0 0 auto; }
.wle-notes-sheet .wle-note-n { display: inline-block; vertical-align: top; line-height: inherit; font-size: .72em; min-width: 1.4em; text-align: right; }
.wle-notes-sheet .wle-note-item p { margin: 0; }
.wle-note-card { border: 1px solid var(--wl-line); border-left: 3px solid var(--wl-blue); border-radius: 10px; padding: 8px 10px; background: #fff; cursor: pointer; }
.wle-note-card.is-active { border-color: #c7d7fe; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.wle-note-card.is-orphan { border-left-color: #f59e0b; }
.wle-note-body { margin-top: 6px; min-height: 36px; font-size: .84rem; line-height: 1.5; color: var(--wl-ink); outline: none; border-radius: 6px; padding: 4px 6px; background: #f8fafc; overflow-wrap: anywhere; }
.wle-note-body:focus { background: #fff; box-shadow: inset 0 0 0 1px #c7d7fe; }
.wle-note-body:empty::before { content: attr(data-placeholder); color: var(--wl-muted); pointer-events: none; }
.wle-note-body p { margin: 0 0 .3em; }
@media print { .wle-rich sup.wl-fn { color: inherit; } }
/* ── Lacak perubahan (track changes, WL-02) ─────────────────────────────
   Six author colours from the brand tokens (teal first); markup modes on
   .wle-page: is-markup-all (underline / strike-through + bar), is-markup-simple
   (bar only), is-markup-none (deletions hidden, insertions plain: the page
   flows as the clean text). The sheet is always light, so no dark variants.
   V13: no pilcrow on a change (a changed paragraph mark shows as a dashed bar,
   track.js core.ownRules); one's own changes read as plain text (#wle-rev-css). */
.wl, .wle { --wl-rev-1: rgb(var(--ui-teal-600, 13 148 136)); --wl-rev-2: var(--wl-blue); --wl-rev-3: var(--wl-pink); --wl-rev-4: var(--wl-green); --wl-rev-5: var(--wl-amber); --wl-rev-6: var(--wl-red); }
.wle-rich ins { color: var(--rev, var(--wl-rev-1)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.wle-rich del { color: var(--rev, var(--wl-rev-1)); text-decoration: line-through; }
.wle-page:not(.is-markup-none) .wle-rich :is(p, li, h2, h3, h4, blockquote):is(:has(ins), :has(del), [data-rev-ins], [data-rev-del]) { position: relative; }
.wle-page:not(.is-markup-none) .wle-rich :is(p, li, h2, h3, h4, blockquote):is(:has(ins), :has(del), [data-rev-ins], [data-rev-del])::before { content: ""; position: absolute; left: -18px; top: 2px; bottom: 2px; width: 3px; box-sizing: content-box; border: 0 solid transparent; border-width: 0 8px; background: var(--wl-rev-1); background-clip: padding-box; }
.wle-page.is-markup-simple .wle-rich ins, .wle-page.is-markup-none .wle-rich ins { color: inherit; text-decoration: none; }
.wle-page.is-markup-simple .wle-rich del, .wle-page.is-markup-none .wle-rich del { display: none; }
/* V13: the note on someone else's change (track.js showRevNote): who, their role, what and when. */
.wle-revnote { position: fixed; z-index: 70; max-width: min(320px, calc(100vw - 16px)); padding: 6px 10px; border: 1px solid var(--wl-line); border-radius: 8px; background: #fff; color: var(--wl-ink); box-shadow: 0 8px 24px rgba(20, 30, 60, .16); font: 500 .75rem/1.35 Inter, system-ui, sans-serif; pointer-events: none; overflow-wrap: anywhere; }
.wle-revnote[hidden] { display: none; }
.wle-revnote-who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.wle-revnote-who b { font-weight: 600; }
.wle-revnote-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.wle-revnote-role { padding: 0 6px; border-radius: 999px; background: #eef4ff; color: #334155; font-size: .68rem; font-weight: 600; line-height: 1.5; }
.wle-revnote-meta { margin-top: 2px; color: var(--wl-muted); font-size: .7rem; }
.wle-revnote-meta span + span::before { content: " · "; }
@media print { .wle-revnote { display: none !important; } }
.wle-rsel-sm { height: 24px; font-size: .7rem; padding: 0 4px; max-width: 150px; }
/* The side panel's grouped list (writing_labs/_side_list.html). */
.wle-slist { display: flex; flex-direction: column; gap: 8px; }
.wle-sgroup-h { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 2px; font-size: .75rem; font-weight: 600; color: var(--wl-ink); background: none; border: 0; text-align: left; }
button.wle-sgroup-h { cursor: pointer; border-radius: 6px; }
button.wle-sgroup-h:hover { background: #eef4ff; }
.wle-sgroup-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wle-sdot { width: 10px; height: 10px; border-radius: 999px; background: var(--wl-muted); flex: 0 0 auto; }
.wle-srow { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 6px 8px; margin-top: 4px; border: 1px solid var(--wl-line); border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.wle-srow > i { width: 14px; margin-top: 3px; font-size: .75rem; text-align: center; flex: 0 0 auto; }
.wle-srow.is-active { border-color: var(--wl-amber); box-shadow: 0 0 0 3px var(--wl-amber-soft); }
.wle-srow-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.wle-srow-text { font-size: .8rem; color: var(--wl-ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wle-srow-meta { font-size: .68rem; color: var(--wl-muted); }
/* ── WL-14: the Word file's own look — sections, columns, tables, tabs; the Berkas tab ── */
/* A section box the page view adds (writing_page.section_layouts): the section's
   margins and columns; sheetHtml() removes it before the text is saved. */
.wle-rich .wle-sect { min-height: 1px; }
.wle-rich .wle-sect.is-cols { column-fill: balance; }
.wle-rich .wle-sect.is-cols > * { break-inside: avoid-column; }
.wle-rich .wle-sect.is-cols > p, .wle-rich .wle-sect.is-cols > blockquote, .wle-rich .wle-sect.is-cols > ul, .wle-rich .wle-sect.is-cols > ol { break-inside: auto; }
.wle-rich .wl-al-l { text-align: left; }
.wle-rich .wl-tab { white-space: pre; tab-size: 1.27cm; }
.wle-rich .wl-fnref { color: inherit; }
.wle-page.is-faithful .wle-sec-h.is-src { line-height: inherit; }
/* An opened file on sheets: its own author lines are in the text, the header
   paragraphs take the lines they take in Word. */
.wle-page.is-faithful.is-sheets .wle-authors.is-empty, .wle-page.is-faithful.is-sheets .wle-meta { display: none; }
.wle-page.is-faithful .wle-hf-body { line-height: 1.15; }
.wle-page.is-faithful .wle-hf-body td { padding: 0 4px; }
.wle-rich table[data-wlcont="rows"] { margin-top: 0; }
/* WL-DATA-GUIDE: the part of a table figure carried onto the next sheet (editor.js splitFigTable) is the same
   table, not a new one: no number of its own, no gap above. */
.wle-rich figure.wl-fig[data-wlcont] { counter-increment: none !important; margin-top: 0; }
/* WL-TABLE-PAGES (Nov 2026): the gap above is 0, but not !important. The page layout moves the continuation to
   the next sheet with an inline margin-top (editor.js push); "0 !important" won over it, so the rest of a long
   table stood right under its first part, over the footer, the gap between sheets and the next header. */
/* Every part of a table cut over sheets keeps the whole table's columns (editor.js freezeCols) and repeats its
   header rows (contHead); both are view-only and leave with the last join. */
.wle-rich table[data-wlfreeze] { table-layout: fixed; }
.wle-rich table > thead[data-wlrepeat] { user-select: none; }
.wle-rich figure.wl-fig[data-wlsplit] { margin-bottom: 0; }
/* A table wider than the text column (fitWideTables): its type steps down until it fits; last, its cells wrap. */
.wle-rich table[data-wlfit] :is(th, td) { min-width: 0 !important; }
.wle-rich table[data-wlfit="90"] { font-size: .74rem !important; }
.wle-rich table[data-wlfit="80"] { font-size: .66rem !important; }
.wle-rich table[data-wlfit="70"] { font-size: .58rem !important; }
.wle-rich table[data-wlfit="60"], .wle-rich table[data-wlfit="wrap"] { font-size: .5rem !important; }
.wle-rich table[data-wlfit="70"] :is(th, td), .wle-rich table[data-wlfit="60"] :is(th, td), .wle-rich table[data-wlfit="wrap"] :is(th, td) { padding-left: 3px !important; padding-right: 3px !important; }
.wle-rich table[data-wlfit="wrap"] { table-layout: fixed; width: 100% !important; }
.wle-rich table[data-wlfit="wrap"] :is(th, td) { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
.wle-rich p.wl-sb { height: 0; min-height: 0; margin: 0; padding: 0; line-height: 0; font-size: 0; overflow: hidden; }
.wle-page.is-faithful .wle-sec-h.is-src input { font: inherit; color: inherit; text-align: inherit; line-height: inherit; }
.wle-page.is-faithful.has-layout .wle-sec-h.is-src input, .wle-page.is-faithful.has-layout .wle-sec-h.is-src.l1 input, .wle-page.is-faithful.has-layout .wle-sec-h.is-src.l2 input, .wle-page.is-faithful.has-layout .wle-sec-h.is-src.l3 input { font-size: inherit; font-weight: inherit; font-style: inherit; font-family: inherit; }
/* A table of the file with its own borders: every edge comes from the cells' style. */
.wle-rich table.wl-src-table td > p { margin-top: 0; margin-bottom: 0; }
/* The heading of a multi-column section sits in the first column; the column box
   starts at its top and keeps its place with a spacer (editor.js wrapSections). */
.wle-rich .wle-sect-spacer { break-inside: avoid-column; }
.wle-page.is-faithful .wle-sec-h { position: relative; z-index: 1; }
.wle-sheet.is-landscape { box-shadow: 0 1px 3px rgba(20, 30, 60, .14), 0 6px 18px rgba(20, 30, 60, .07); }
/* Berkas › Info */
.wle-info-box { max-width: 640px; }
.wle-info-grid { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 6px 12px; font-size: .85rem; }
.wle-info-grid dt { color: var(--wl-muted); font-size: .75rem; font-weight: 600; padding-top: 2px; }
.wle-info-grid dd { min-width: 0; overflow-wrap: anywhere; }
.wle-info-notes { margin: 4px 0 0; padding-left: 1.2em; font-size: .8rem; line-height: 1.45; }
.wle-info-notes li { margin: 2px 0; }
@media (max-width: 639px) { .wle-info-grid { grid-template-columns: 1fr; gap: 2px 0; } .wle-info-grid dd { margin-bottom: 6px; } }

/* WX-00: contextual ribbon tabs (Word's Format Gambar, Desain Tabel …): the
   accent label of .is-ctx, an optional small set caption above it. */
.wle-rtab.has-set { position: relative; }
.wle-rtab-set { position: absolute; top: -3px; left: 0; right: 0; text-align: center; font-size: .5rem; line-height: 1; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* WX-00: the right-click menu (templates/writing_labs/_context_menu.html). */
.wle-cm-layer { display: contents; }
.wle-cm { position: fixed; z-index: 90; min-width: 232px; max-width: min(360px, calc(100vw - 16px)); padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: var(--wl-ink); border: 1px solid #d3d9e3; border-radius: 8px; box-shadow: 0 10px 28px rgba(20,30,60,.18), 0 1px 3px rgba(20,30,60,.08); font-size: .8125rem; outline: none; }
.wle-cm-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 14px; align-items: center; width: 100%; min-height: 30px; padding: 0 8px 0 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.wle-cm-item.is-sel, .wle-cm-item.is-open { background: #e8eff9; }
.wle-cm-item.is-off { color: #98a2b3; }
.wle-cm-item.is-off .wle-cm-icon { color: #b4bcc8; }
.wle-cm-icon { justify-self: center; width: 16px; text-align: center; font-size: .85rem; color: #3f4e66; }
.wle-cm-label { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wle-cm-label > span { overflow: hidden; text-overflow: ellipsis; }
.wle-cm-why { font-size: .7rem; color: var(--wl-muted); white-space: normal; line-height: 1.25; }
.wle-cm-key { padding-left: 20px; font-size: .72rem; color: var(--wl-muted); white-space: nowrap; }
.wle-cm-chev { justify-self: end; font-size: .6rem; color: var(--wl-muted); }
.wle-cm-sep { height: 1px; margin: 4px 6px 4px 34px; background: var(--wl-line); }
.wle-cm-grip { width: 36px; height: 4px; margin: 2px auto 6px; border-radius: 2px; background: #d3d9e3; }
.wle-cm-back { font-weight: 600; border-bottom: 1px solid var(--wl-line); margin-bottom: 2px; }
.wle-cm-scrim { position: fixed; inset: 0; z-index: 89; background: rgba(15,23,42,.28); }
.wle-cm.is-sheet { left: 0; right: 0; bottom: 0; top: auto; width: 100%; min-width: 0; max-width: none; max-height: 72vh; padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 14px 14px 0 0; border-width: 1px 0 0; box-shadow: 0 -10px 30px rgba(20,30,60,.2); }
.wle-cm.is-sheet .wle-cm-item { min-height: 44px; padding: 4px 14px 4px 8px; font-size: .9rem; grid-template-columns: 34px minmax(0, 1fr) auto 14px; }
.wle-cm.is-sheet .wle-cm-sep { margin-left: 42px; }
.wle-cm.is-sheet .wle-cm-key { display: none; }
@media print { .wle-cm, .wle-cm-scrim { display: none !important; } }

/* WX-STYLES: Word's Calibri and Cambria under their own names. A computer with
   Office uses its own; elsewhere Carlito and Caladea (metric-compatible, OFL,
   static/fonts/writing_labs/) set the text exactly as wide, so lines break where
   Word breaks them. Downloaded only when a page uses them (Writing Labs pages). */
@font-face { font-family: 'Calibri'; font-style: normal; font-weight: 400; font-display: swap; src: local('Calibri'), local('Carlito'), url('/static/fonts/writing_labs/carlito-regular.woff2') format('woff2'); }
@font-face { font-family: 'Calibri'; font-style: normal; font-weight: 700; font-display: swap; src: local('Calibri Bold'), local('Calibri-Bold'), local('Carlito Bold'), local('Carlito-Bold'), url('/static/fonts/writing_labs/carlito-bold.woff2') format('woff2'); }
@font-face { font-family: 'Calibri'; font-style: italic; font-weight: 400; font-display: swap; src: local('Calibri Italic'), local('Calibri-Italic'), local('Carlito Italic'), local('Carlito-Italic'), url('/static/fonts/writing_labs/carlito-italic.woff2') format('woff2'); }
@font-face { font-family: 'Calibri'; font-style: italic; font-weight: 700; font-display: swap; src: local('Calibri Bold Italic'), local('Calibri-BoldItalic'), local('Carlito Bold Italic'), local('Carlito-BoldItalic'), url('/static/fonts/writing_labs/carlito-bolditalic.woff2') format('woff2'); }
@font-face { font-family: 'Cambria'; font-style: normal; font-weight: 400; font-display: swap; src: local('Cambria'), local('Caladea'), url('/static/fonts/writing_labs/caladea-regular.woff2') format('woff2'); }
@font-face { font-family: 'Cambria'; font-style: normal; font-weight: 700; font-display: swap; src: local('Cambria Bold'), local('Cambria-Bold'), local('Caladea Bold'), local('Caladea-Bold'), url('/static/fonts/writing_labs/caladea-bold.woff2') format('woff2'); }
@font-face { font-family: 'Cambria'; font-style: italic; font-weight: 400; font-display: swap; src: local('Cambria Italic'), local('Cambria-Italic'), local('Caladea Italic'), local('Caladea-Italic'), url('/static/fonts/writing_labs/caladea-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cambria'; font-style: italic; font-weight: 700; font-display: swap; src: local('Cambria Bold Italic'), local('Cambria-BoldItalic'), local('Caladea Bold Italic'), local('Caladea-BoldItalic'), url('/static/fonts/writing_labs/caladea-bolditalic.woff2') format('woff2'); }
@font-face { font-family: 'Carlito'; font-style: normal; font-weight: 400; font-display: swap; src: local('Carlito'), url('/static/fonts/writing_labs/carlito-regular.woff2') format('woff2'); }
@font-face { font-family: 'Carlito'; font-style: normal; font-weight: 700; font-display: swap; src: local('Carlito Bold'), local('Carlito-Bold'), url('/static/fonts/writing_labs/carlito-bold.woff2') format('woff2'); }
@font-face { font-family: 'Caladea'; font-style: normal; font-weight: 400; font-display: swap; src: local('Caladea'), url('/static/fonts/writing_labs/caladea-regular.woff2') format('woff2'); }
@font-face { font-family: 'Caladea'; font-style: normal; font-weight: 700; font-display: swap; src: local('Caladea Bold'), local('Caladea-Bold'), url('/static/fonts/writing_labs/caladea-bold.woff2') format('woff2'); }
/* Word keeps every space it is given ("Vol. x  ·  pp."): the header/footer and a Word file's own text too. */
.wle-page.has-layout .wle-hf-body :is(p, td), .wle-page.is-faithful .wle-rich :is(p, li) { white-space: pre-wrap; }
/* Word kerns only runs that ask for it (w:kern): lines break where Word breaks them. */
.wle-page.has-layout { font-kerning: none; }
/* A right tab stop (header/footer "… ⇥ page 2"): the text after it sits at the stop
   (writing_import tab_split: margin-right = text width − stop). */
/* A tab of the text (writing_import: span.wl-tab) is not the page's tab button (.wl-tab above). */
:is(.wle-rich, .wle-hf-body, .wl-frame) span.wl-tab { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: inherit; white-space: pre; tab-size: 1.27cm; }
.wl-tabr { float: right; }
/* …and the line holding it is as tall as what floats there (an icon, a picture), as Word's line is. */
:is(p, li, h3, h4, .wl-txbx-p):has(> .wl-tabr) { display: flow-root; }
/* A Word text box in the flow where it is anchored, with its paragraphs as blocks. */
.wl-txbx { display: inline-block; vertical-align: top; box-sizing: border-box; overflow: hidden; text-indent: 0; }
.wl-txbx-p { display: block; }
/* Floating pictures/shapes of a header or footer: placed from its top-left corner. */
.wl-hf-anchor-box { position: relative; }
.wl-hf-anchor-box td { position: relative; } /* a picture anchored in a cell is placed from that cell (Word's layoutInCell) */
.wle-hf-body .wl-hf-anchor-box img { max-height: none; }
/* Header/footer tables from the Word file keep their own widths, padding and alignment. */
.wle-page.has-layout .wle-hf-body table[class*="wl-tst-"], .wle-page.has-layout .wle-hf-body table.wl-src-table { width: auto; table-layout: fixed; }
.wle-page.has-layout .wle-hf-body table td { padding: 0; }
.wle-page.has-layout .wle-hf-body img { max-height: none; }
/* WL-FIX-CORE: on a phone the page reflows to the screen (366 px at 390) and is no scaled sheet, but a
   running header's or footer's Word tables keep the paper's width (the journal masthead, its two-tone rule,
   the licence footer: 481.9 pt, 643 px): they ran off the page, "PUBLISHED BY" out of sight. They fit the
   page there, on every manuscript and template page (the V12 rule below did this for docgen drafts only);
   CSS only, the stored HTML and the file keep their widths. */
@media (max-width: 639px) {
    .wle-page .wle-hf-body table.wl-src-table, .wle-page .wle-hf-body table[class*="wl-tst-"] { width: 100% !important; max-width: 100%; table-layout: auto !important; }
    .wle-page .wle-hf-body table.wl-src-table td, .wle-page .wle-hf-body table[class*="wl-tst-"] td { width: auto !important; min-width: 0; overflow-wrap: anywhere; }
    .wle-page .wle-hf-body table.wl-src-table img { max-width: none; }
}
/* A paragraph's own alignment beats its style's (as in the body, above). */
.wle-hf-body .wl-al-c, .wl-frame .wl-al-c { text-align: center !important; }
.wle-hf-body .wl-al-r, .wl-frame .wl-al-r { text-align: right !important; }
.wle-hf-body .wl-al-j, .wl-frame .wl-al-j { text-align: justify !important; }
.wle-hf-body .wl-al-l, .wl-frame .wl-al-l { text-align: left !important; }
/* The Font box: Word's name of the caret's font, the list with the template's fonts first. */
select.wle-rfont { padding: 0 4px; font-family: inherit; cursor: pointer; }
/* ── WX-FRAME: the journal's Word template as the page (static/js/writing_labs/frame.js) ──
   The frame's own look comes inline from the template (writing_frame.py); these rules
   only hide the editor's plain blocks it replaces and dress the fields the author fills. */
.wle-page.is-framed > .wle-doc-title, .wle-page.is-framed > .wle-authors, .wle-page.is-framed > p.wle-meta,
.wle-page.is-framed > section.wle-sec { display: none !important; }
.wlf { color: #1F2933; overflow-wrap: anywhere; }
.wlf p { margin: 0; }
.wlf table { border-collapse: collapse; max-width: 100%; }
.wlf img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
/* Safari/WebKit: stabilize the front-matter info card (ARTICLE HISTORY | abstract) height so a few
   subpixels do not push the whole one-row table onto page 2 (Chrome stayed on page 1). */
.wlf > table.wlf-b { break-inside: avoid; page-break-inside: avoid; }
.wlf > table.wlf-b td { overflow-wrap: break-word; word-break: normal; }
.wlf > table.wlf-b img { width: auto; max-height: 1.1em; height: auto; flex-shrink: 0; }
.wlf.is-guide-off .wlf-guide { display: none !important; }
.wlf-main > section.wle-sec, .wlf-slot-body > section.wle-sec { position: relative; }
.wlf .wle-sec-h .wle-meta, .wlf .wle-sec > p.wl-sub, .wlf .wle-bib-tags, .wlf .wle-sec.is-active::before { display: none !important; }
.wlf .wle-sec-h { flex-wrap: nowrap; gap: .35em; }
.wlf .wle-sec-h input { flex: 1 1 auto; }
.wlf-slot-body > section.wle-sec > .wle-sec-h { display: none; }
.wlf .wle-rich { min-height: 1.3em; }
.wlf .wle-rich:empty::before, .wlf .wlf-f:empty::before { content: attr(data-placeholder); color: #808080; font-style: normal; }
.wlf .wle-rich[data-wlf-ph]:empty::before { content: attr(data-wlf-ph); white-space: pre-line; }
.wlf-f { outline: none; border-radius: 2px; }
.wlf-f[contenteditable="true"] { cursor: text; box-shadow: inset 0 -1px 0 transparent; transition: background-color .15s; }
.wlf-f[contenteditable="true"]:hover { background-color: rgba(4, 134, 123, .06); }
.wlf-f[contenteditable="true"]:focus { background-color: rgba(4, 134, 123, .1); box-shadow: inset 0 -1px 0 #04867B; }
.wlf-f[contenteditable="true"]:empty { display: inline-block; min-width: 4em; }
.wlf .is-toggle { cursor: pointer; }
.wlf [data-ojsa^="ojsa:credit."] { cursor: pointer; }
.wlf-guidance { color: #808080; font-style: normal; white-space: pre-line; }
/* V13 (frame.js frameHints): a statement nobody filled is a hint of the editor, never the article's text:
   the final view (Tanpa markup), read-only views and print leave its row (and an emptied panel's heading) out,
   as every export does; its grey placeholder never prints. */
.wle-page.is-final-view .is-unfilled { display: none !important; }
@media print {
  .wle-page .is-unfilled { display: none !important; }
  .wle-page .wle-rich:empty::before, .wle-page .wlf-guidance { content: none !important; display: none !important; }
}
.wlf-missing .wle-sec-h input { color: inherit; }
.wlf-slot[hidden] { display: none !important; }
/* Word's defaults inside the template: text takes its paragraph's font (not the dashboard's),
   cells start at the top, paragraphs keep the template's alignment, a tab is a tab. */
.wlf :where(p, div:not(.wle-rich), table, tbody, thead, tr, td, th, span, strong, em, b, i, u, s, sub, sup, a, li):where(:not([class*="fa-"]):not(.wl-pill)) { font-family: inherit; }
.wlf td, .wlf th { vertical-align: top; box-sizing: border-box; }
.wlf .wl-al-c { text-align: center; } .wlf .wl-al-r { text-align: right; } .wlf .wl-al-j { text-align: justify; } .wlf .wl-al-l { text-align: left; }
.wlf .wl-tab { padding: 0; border: 0; font-weight: inherit; font-size: inherit; color: inherit; white-space: pre; tab-size: 1.27cm; cursor: inherit; }
.wlf p.wlf-tabs { display: flex; align-items: baseline; flex-wrap: wrap; }
.wlf p.wlf-tabs > .wl-tab, .wlf p.wlf-tabs > :has(> .wl-tab) { flex: 1 1 0; }
/* writing_import.tab_split already set the text after the right tab in span.wl-tabr; a flex item ignores its float. */
.wlf p.wlf-tabs > .wl-tabr { margin-left: auto; }
.wle-frame-rt { display: flex; flex-direction: column; gap: 2px; font-size: .6875rem; color: var(--wl-muted); }
.wle-frame-rt input { width: 15rem; max-width: 60vw; font-size: .75rem; }
@media (max-width: 640px) {
    .wle-page.is-framed .wlf table { width: 100% !important; margin-left: 0 !important; table-layout: auto !important; }
    .wle-page.is-framed .wlf td { width: auto !important; }
    /* The author photo keeps its size (Word's 0.95 cm, zoomed): with max-width 100% it gave the auto-sized table no
       minimum for its cell, and the name column squeezed it to a 9 px dot at 170%. */
    .wle-page.is-framed .wlf [data-ojsa="ojsa:author.photo"] img { max-width: none; }
}
/* WX-SECT: Word sections. A section break is invisible with formatting marks
   off (the next section still starts a new sheet) and shows Word's marker
   with them on; while headers are open every sheet shows Word's tabs
   ("Header - Bagian 2", "Sama seperti Sebelumnya"). */
.wle-rich hr.wl-sectbreak { display: block; height: 0; margin: 0; padding: 0; border: 0; overflow: visible; }
.wle-page.show-marks .wle-rich hr.wl-sectbreak { position: relative; height: 1.25em; margin: .35em 0; border: 0; border-top: 3px double #7b8fa8; }
.wle-page.show-marks .wle-rich hr.wl-sectbreak::after { position: absolute; left: 50%; top: -.72em; transform: translateX(-50%); padding: 0 6px; background: #fff; color: #5b6b82; font: 600 .62rem/1.2 Inter, sans-serif; letter-spacing: .02em; white-space: nowrap; content: "::::::::::  Hentian Bagian (Halaman Berikutnya)  ::::::::::"; }
.wle-page.show-marks .wle-rich hr.wl-sectbreak[data-kind="continuous"]::after { content: "::::::::::  Hentian Bagian (Bersambung)  ::::::::::"; }
.wle-page.show-marks .wle-rich hr.wl-sectbreak[data-kind="evenPage"]::after { content: "::::::::::  Hentian Bagian (Halaman Genap)  ::::::::::"; }
.wle-page.show-marks .wle-rich hr.wl-sectbreak[data-kind="oddPage"]::after { content: "::::::::::  Hentian Bagian (Halaman Ganjil)  ::::::::::"; }
@media print { .wle-rich hr.wl-sectbreak { border: 0 !important; height: 0 !important; } .wle-rich hr.wl-sectbreak::after { content: none !important; } }
.wle-sheet-band { position: absolute; height: 0; border-top: 1px dashed #8a99b0; pointer-events: none; z-index: 2; }
.wle-band-tag, .wle-band-same { position: absolute; top: 0; padding: 1px 6px; font: 600 .6rem/1.35 Inter, sans-serif; white-space: nowrap; border-radius: 0 0 4px 4px; }
.wle-band-tag { left: 0; color: #fff; background: #5b6b82; }
.wle-band-same { right: 0; color: #33415a; background: #e3e9f2; }
.wle-sheet-band.is-foot .wle-band-tag, .wle-sheet-band.is-foot .wle-band-same { top: auto; bottom: 0; border-radius: 4px 4px 0 0; }
.wle-hf-same { position: absolute; right: 0; bottom: -18px; font: 600 .6rem Inter, sans-serif; color: #33415a; background: #e3e9f2; padding: 1px 6px; border-radius: 4px; z-index: 2; }
.wle-hf-foot .wle-hf-same { bottom: auto; top: -18px; }
.wle-page.is-sheets .wle-hf-tag, .wle-page.is-sheets .wle-hf-same { display: none; }
.wle-menu-h { margin: 4px 6px 2px; font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wl-muted); }
.wle-menu > hr { border: 0; border-top: 1px solid var(--wl-line); margin: 3px 4px; }
.wle-menu > button small { display: block; font-size: .68rem; color: var(--wl-muted); font-weight: 400; }
.wle-menu > button.is-on { background: var(--wl-blue-soft); font-weight: 600; }
.wle-menu > button:disabled { color: var(--wl-muted); opacity: .7; cursor: default; background: none; }
.wle-sect-menu { min-width: 250px; }
.wle-sect-form { min-width: 240px; max-width: min(320px, calc(100vw - 16px)); padding: 6px 8px; }
.wle-sect-row { display: flex; align-items: center; gap: 6px; padding: 4px 2px; font-size: .78rem; color: var(--wl-ink); }
.wle-sect-row .wle-rsel { margin-left: auto; }
.wle-sect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 2px 4px 4px; font-size: .76rem; }
.wle-sect-grid label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wle-sect-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 6px 2px 2px; }
input.wle-rnum { width: 64px; height: 26px; padding: 0 4px; border: 1px solid var(--wl-line); border-radius: 6px; background: var(--wl-card); color: var(--wl-ink); font-size: .76rem; }
.wle-rdist { justify-content: space-between; gap: 6px; }
.wle-rdist i { color: #5b6b82; font-size: .7rem; }
.wle-o-sect { margin: 0 0 6px; padding: 0 8px; }
/* Pagination measures blocks against the page's top while it pushes them: the
   browser's scroll anchoring would move the page under it (a section break far
   down the manuscript sent the next section several sheets too far). */
.wle-desk { overflow-anchor: none; }
/* The sheet stays white in dark mode: so does a page-number field in a header or footer. */
:root[data-theme="dark"] .wle-page .wle-hf-body .wl-field { background: #eef2f8; color: #475569; }
/* The list's status pills sit on the white page: page colours in dark mode too. */
:root[data-theme="dark"] .wle-page .wle-bib .wl-pill { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
:root[data-theme="dark"] .wle-page .wle-bib .wl-pill-amber { background: #fffbeb; color: #92400e; border-color: #fde68a; }
:root[data-theme="dark"] .wle-page .wle-bib .wl-pill-green { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
:root[data-theme="dark"] .wle-page .wle-bib .wl-pill-blue { background: #eff6ff; color: #1d4ed8; border-color: #c7d7fe; }
/* A section wider than the first one (landscape) is centred on the page like
   Word; the page moves right just enough for its sheets to stay on the desk
   (ribbon.js applyScale: --wle-zl is at least sectWideLeft × scale + 8 px). */
/* ── WX-RIBBON: Word's ribbon on one strip, chrome that stays put, the page centred and zoomed as one ──
   Restyles the markup vocabulary of HOOKS2 (.wle-rgroup, .wle-tb-lg, .wle-tb-sm, .wle-rcol, .wle-gallery …)
   for every tab, the contextual ones included. A 4 px grid: the strip is 96 px (4 + 88 + 4); a group is
   68 px of tools over a 20 px label; large buttons are a 32 px icon over at most two label lines; small
   buttons are 22 px rows (a 16 px icon and a label), three to a column. */
.wle { --rb-bg: #f7f8fa; --rb-ink: #2b3445; --rb-muted: #5d6778; --rb-line: #d7dde6; --rb-sep: #dde2ea;
       --rb-hover: #e7ebf1; --rb-press: #d6dde7; --rb-on: #dfe8f7; --rb-on-line: #b7c9e8; --rb-field: #ffffff; --rb-field-line: #c6cdd8; }
/* Full-window editor: the top bar, tabs, ribbon, bars and ruler stay; only the canvas (.wle-desk) scrolls. */
.wle, .wle.wle { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; min-height: 0; overflow: hidden; }
.wle > .wle-top, .wle > .wle-ribbon, .wle > .wle-findbar, .wle > .wle-bar, .wle > .wle-statusbar { flex: none; }
.wle > .wle-body { flex: 1 1 auto; min-height: 0; }
.wle-ribbon { position: relative; z-index: 20; background: var(--rb-bg); border-bottom: 1px solid var(--rb-line); }

/* Tabs: one row, the selected one underlined like Word's; scrolls sideways on a phone. */
.wle-ribbon-tabs { height: 34px; padding: 0 8px; gap: 0; background: var(--rb-bg); border-bottom: 0; }
.wle-rtab { position: relative; height: 34px; padding: 0 10px; border: 0; border-radius: 4px 4px 0 0; font: 500 13px/34px Inter, system-ui, sans-serif; color: var(--rb-muted); background: none; }
.wle-rtab:hover { color: var(--rb-ink); background: var(--rb-hover); }
.wle-rtab[aria-selected="true"] { color: var(--rb-ink); font-weight: 600; border: 0; background: none; }
.wle-rtab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--wl-blue); }
.wle-rtab.is-ctx { color: var(--wl-pink); }
.wle-rtab.is-ctx[aria-selected="true"]::after { background: var(--wl-pink); }
.wle-rtab .wl-pill { height: 16px; padding: 0 5px; font-size: 10px; line-height: 14px; vertical-align: 1px; }
.wle-rtab-set { top: 1px; }
.wle-ribbon-view { position: sticky; right: 0; height: 34px; padding: 0 0 0 8px; background: var(--rb-bg); gap: 2px; }
.wle-ribbon-view .wle-tb { height: 26px; min-width: 28px; border-radius: 4px; }
.wle-palette-q { height: 26px; border-radius: 4px; border-color: var(--rb-field-line); font-size: 12px; }

/* The strip: ONE row of groups at every width; ‹ › and the wheel scroll it (ribbon.js). */
.wle-rbody-wrap { position: relative; padding-right: 24px; background: var(--rb-bg); border-top: 1px solid var(--rb-line); }
.wle-ribbon-body { height: 96px; padding: 4px 0; background: var(--rb-bg); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.wle-ribbon-body::-webkit-scrollbar { display: none; }
.wle-ribbon-body .wle-rrow { display: flex; flex-wrap: nowrap; align-items: stretch; height: 88px; gap: 0; min-width: max-content; padding: 0 6px; }
.wle-ribbon-body .wle-rgroup { position: relative; flex: none; display: grid; grid-template-rows: 68px 20px; justify-items: center; align-items: center; gap: 0; height: 88px; padding: 0 6px; border: 0; }
.wle-ribbon-body .wle-rgroup::after { content: ""; position: absolute; right: 0; top: 6px; bottom: 6px; width: 1px; background: var(--rb-sep); }
.wle-ribbon-body .wle-rgroup:not(:has(~ .wle-rgroup:not([style*="display: none"])))::after { display: none; }
.wle-ribbon-body .wle-rgroup > :first-child { grid-row: 1; align-self: stretch; }
.wle-ribbon-body .wle-rgroup > small { grid-row: 2; align-self: center; position: relative; padding: 0 16px; font: 400 11px/16px Inter, system-ui, sans-serif; letter-spacing: 0; color: var(--rb-muted); white-space: nowrap; }
.wle-ribbon-body .wle-rtools { display: flex; align-items: center; gap: 2px; height: 100%; }
.wle-ribbon-body .wle-rcol { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 1px; height: 100%; }
.wle-ribbon-body .wle-rcol > .wle-rtools { height: 22px; }
.wle-ribbon-body .wle-rcol + .wle-rcol, .wle-ribbon-body .wle-tb-lg + .wle-rcol, .wle-ribbon-body .wle-rcol + .wle-tb-lg { margin-left: 2px; }
/* Dialog launcher: Word's small ↘ at the right of a group label. */
.wle-rlaunch { position: absolute; right: 0; top: 1px; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--rb-muted); display: inline-grid; place-items: center; cursor: pointer; }
.wle-rlaunch svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.wle-rlaunch:hover { background: var(--rb-hover); color: var(--rb-ink); }

/* Buttons: one weight of one icon family; the same hover / pressed / checked / disabled everywhere. */
.wle-ribbon-body .wle-tb { height: 22px; min-width: 22px; padding: 0 3px; gap: 4px; border: 0; border-radius: 3px; background: transparent; color: var(--rb-ink); font: 400 12px/1 Inter, system-ui, sans-serif; text-decoration: none; }
.wle-ribbon-body .wle-tb > i:not(.fa-caret-down) { width: 16px; font-size: 14px; line-height: 16px; text-align: center; }
.wle-ribbon .fa-regular { font-weight: 900; }
.wle-ribbon-body .wle-tb:hover:not(:disabled) { background: var(--rb-hover); }
.wle-ribbon-body .wle-tb:active:not(:disabled) { background: var(--rb-press); }
.wle-ribbon-body .wle-tb.is-on { background: var(--rb-on); color: var(--rb-ink); box-shadow: inset 0 0 0 1px var(--rb-on-line); }
.wle-ribbon-body .wle-tb.is-on:hover:not(:disabled) { background: #d3e0f5; }
.wle-ribbon-body .wle-tb:disabled { opacity: .38; cursor: default; background: transparent; box-shadow: none; }
.wle-ribbon-body .wle-tb:focus-visible, .wle-rlaunch:focus-visible, .wle-gal-btn:focus-visible { outline: 2px solid var(--wl-blue); outline-offset: -1px; }
.wle-ribbon-body .wle-tb .fa-caret-down { font-size: 9px; width: auto; margin-left: 1px; opacity: .75; }
.wle-ribbon-body .wle-tb-close { color: var(--wl-red); }
/* Large: a 32 px icon over the label (two lines at most), the full height of the tools area. */
.wle-ribbon-body .wle-tb-lg { position: relative; flex-direction: column; justify-content: flex-start; align-self: stretch; height: auto; min-width: 44px; max-width: 84px; padding: 4px 4px 2px; gap: 2px; font-weight: 400; color: var(--rb-ink); }
.wle-ribbon-body .wle-tb-lg > i:first-child { width: 32px; height: 32px; font-size: 24px; line-height: 32px; flex: none; }
.wle-ribbon-body .wle-tb-lg > span:not(.wl-pill) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; text-wrap: balance; text-align: center; font-size: 12px; line-height: 14px; max-width: 76px; }
.wle-ribbon-body .wle-tb-lg .wl-pill { position: absolute; top: 2px; right: 2px; }
/* Small: a 16 px icon and its label on a 22 px row. */
.wle-ribbon-body .wle-tb-sm { justify-content: flex-start; height: 22px; padding: 0 6px 0 3px; gap: 5px; font-weight: 400; color: var(--rb-ink); }
.wle-ribbon-body .wle-tb-sm > span { white-space: nowrap; }
.wle-ribbon-body .wle-rgrid { display: grid; grid-template-rows: repeat(3, 22px); grid-auto-flow: column; gap: 1px 4px; align-content: center; height: 100%; }
/* Split button: the main part and the caret share one outline on hover, as in Word. */
.wle-ribbon-body .wle-rpop { position: relative; display: inline-flex; align-items: stretch; }
.wle-ribbon-body .wle-rpop:has(> .wle-tb-caret) > .wle-tb:first-child { border-radius: 3px 0 0 3px; }
.wle-ribbon-body .wle-rpop > .wle-tb-caret { min-width: 13px; padding: 0 1px; border-radius: 0 3px 3px 0; }
.wle-ribbon-body .wle-rpop:has(> .wle-tb-caret):hover > .wle-tb:not(:disabled) { box-shadow: inset 0 0 0 1px var(--rb-field-line); }
.wle-ribbon-body .wle-rpop > .wle-tb-lg { align-self: stretch; }
/* Fields: font name / size boxes, selects and checkboxes on the 22 px rows, on the buttons' baseline. */
.wle-ribbon-body .wle-rfont, .wle-ribbon-body .wle-rsel { height: 22px; border: 1px solid var(--rb-field-line); border-radius: 3px; background: var(--rb-field); color: var(--rb-ink); font: 400 12px/20px Inter, system-ui, sans-serif; padding: 0 6px; }
.wle-ribbon-body .wle-rfont { min-width: 124px; max-width: 150px; }
.wle-ribbon-body .wle-rfont.is-size { min-width: 44px; }
.wle-ribbon-body .wle-rsel { padding-right: 2px; }
.wle-ribbon-body .wle-rsel:focus, .wle-ribbon-body .wle-rfont:focus { outline: 2px solid #bfd4ff; outline-offset: -1px; border-color: var(--wl-blue); }
.wle-ribbon-body .wle-rcheck { height: 22px; gap: 6px; padding: 0 6px 0 3px; font: 400 12px/22px Inter, system-ui, sans-serif; color: var(--rb-ink); border-radius: 3px; }
.wle-ribbon-body .wle-rcheck:hover { background: var(--rb-hover); }
.wle-ribbon-body .wle-rcheck input { width: 13px; height: 13px; margin: 0; accent-color: var(--wl-blue); }
.wle-ribbon-body .wle-rstat { font: 400 12px/22px Inter, system-ui, sans-serif; color: var(--rb-muted); }
.wle-ribbon-body .wle-rtyping { grid-template-rows: repeat(2, 34px); gap: 0 2px; height: 100%; }
.wle-ribbon-body .wle-rtyping .wle-tb-lg { grid-row: 1 / -1; }
.wle-ribbon-body .wle-rbadge { margin-left: 3px; padding: 0 4px; font-size: 10px; line-height: 14px; vertical-align: 1px; }
.wle-ribbon-body .wle-tb-lg .wle-rbadge { position: absolute; top: 2px; left: calc(50% + 8px); margin: 0; min-width: 14px; text-align: center; vertical-align: 0; box-shadow: 0 0 0 1.5px var(--rb-bg); }
.wle-ribbon-body .wle-tb > i.wle-ico-txt { font: 400 24px/32px "Times New Roman", Georgia, serif; font-style: normal; }
.wle-ribbon-body .wle-tb-sm > i.wle-ico-txt { font-size: 15px; line-height: 16px; }
/* Gallery (Gaya, and the contextual ones): one row of 72 × 62 tiles, ▲ ▼ ⌄ beside it; ⌄ opens every row. */
.wle-ribbon-body .wle-gallery { display: grid; grid-template-columns: repeat(5, 72px); grid-auto-rows: 62px; gap: 2px; align-content: start; height: 66px; max-width: none; padding: 1px; overflow: hidden; border: 1px solid var(--rb-line); border-right: 0; border-radius: 4px 0 0 4px; background: var(--rb-field); }
.wle-ribbon-body .wle-gallery .wle-gal-item { width: 72px; height: 62px; flex: none; border-radius: 3px; padding: 4px 6px; justify-content: center; }
.wle-ribbon-body .wle-gallery .wle-gal-item:hover { background: var(--rb-hover); }
.wle-ribbon-body .wle-gallery .wle-gal-item[aria-selected="true"] { background: var(--rb-on); border-color: var(--rb-on-line); }
.wle-gallery > .wle-meta { grid-column: 1 / -1; align-self: center; }
.wle-gal-nav { display: inline-flex; flex-direction: column; align-self: center; width: 16px; height: 66px; margin-right: 4px; border: 1px solid var(--rb-line); border-radius: 0 4px 4px 0; background: var(--rb-field); overflow: hidden; flex: none; }
.wle-gal-btn { flex: 1 1 0; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--rb-muted); font-size: 9px; cursor: pointer; }
.wle-gal-btn + .wle-gal-btn { border-top: 1px solid var(--rb-sep); }
.wle-gal-btn:hover:not(:disabled) { background: var(--rb-hover); color: var(--rb-ink); }
.wle-gal-btn:disabled { opacity: .35; cursor: default; }
.wle-gal-ph { display: inline-block; flex: none; }
.wle-ribbon-body .wle-gallery.is-open, .wle-gallery.is-open { position: fixed; z-index: 70; height: auto; max-height: min(60vh, 420px); overflow-y: auto; grid-template-columns: repeat(auto-fill, 72px); border: 1px solid var(--rb-field-line); border-radius: 4px; box-shadow: 0 10px 28px rgba(20, 30, 60, .18); padding: 4px; }
/* ‹ › appear only on the side that has more; the chevron collapses the ribbon (Ctrl+F1). */
.wle-rscroll { position: absolute; top: 5px; bottom: 5px; z-index: 3; width: 20px; padding: 0; border: 1px solid var(--rb-line); border-radius: 4px; background: var(--rb-bg); color: var(--rb-ink); font-size: 10px; display: grid; place-items: center; cursor: pointer; }
.wle-rscroll::before { content: ""; position: absolute; top: -6px; bottom: -6px; width: 18px; pointer-events: none; }
.wle-rscroll.is-left::before { left: 100%; background: linear-gradient(to right, var(--rb-bg), transparent); }
.wle-rscroll.is-right::before { right: 100%; background: linear-gradient(to left, var(--rb-bg), transparent); }
.wle-rscroll.is-left { left: 0; }
.wle-rscroll.is-right { right: 24px; }
.wle-rscroll:hover { background: var(--rb-hover); }
.wle-rcollapse { position: absolute; right: 4px; bottom: 4px; z-index: 3; width: 20px; height: 18px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--rb-muted); font-size: 10px; display: grid; place-items: center; cursor: pointer; }
.wle-rcollapse:hover { background: var(--rb-hover); color: var(--rb-ink); }
/* Collapsed: tabs only; a tab click shows the groups over the page until the next click in the document. */
.wle-ribbon.is-min.is-peek .wle-rbody-wrap { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; border-bottom: 1px solid var(--rb-line); box-shadow: 0 8px 20px rgba(20, 30, 60, .14); }
.wle-ribbon.is-min .wle-rcollapse { color: var(--wl-blue); }
/* Ribbon menus: Word's tidy dropdown rows. */
.wle-menu { min-width: 200px; padding: 4px; border-color: var(--rb-field-line); border-radius: 6px; box-shadow: 0 8px 24px rgba(20, 30, 60, .16); }
.wle-menu > button { min-height: 28px; padding: 4px 12px; border-radius: 4px; font-size: 13px; }
.wle-menu > button:hover { background: var(--rb-hover); }

/* The canvas: the page stack centred to the pixel (ribbon.js applyScale sets the box's margin and the page's
   transform inline; the rulers and the float toolbar carry --wle-s / --wle-zl in their own style), Word's grey desk. */
/* --wle-band: the canvas colour behind the sticky ruler (a plain colour variable, so the dark theme turns it). */
.wle-desk { --wle-gut: 12px; --wle-band: #eceff4; position: relative; overflow: auto; padding: 16px var(--wle-gut) 48px; overscroll-behavior: contain; }
@media (min-width: 640px) { .wle-desk { padding: 20px var(--wle-gut) 64px; } }
.wle-desk.has-ruler { --wle-gut: 30px; padding-top: 0; }
.wle-zoom { position: relative; }
.wle-desk .wle-zoom.is-scaled > .wle-page.wle-page { margin: 0; transform-origin: 0 0; }
.wle-desk .wle-zoom.is-measuring > .wle-page.wle-page { transform: none !important; }
/* The horizontal ruler: the page's own ruler, CSS-zoomed with the page, its thickness and numbers kept. */
.wle-desk.has-ruler .wle-ruler-h.wle-ruler-h { position: sticky; top: 0; z-index: 6; zoom: var(--wle-s, 1);
    height: calc(18px / var(--wle-s, 1)); font-size: calc(9px / var(--wle-s, 1)); line-height: 1;
    margin: 0 0 calc(10px / var(--wle-s, 1)) calc(var(--wle-zl, 0px) / var(--wle-s, 1));
    box-shadow: inset 0 0 0 calc(1px / var(--wle-s, 1)) #d4dae3, 0 0 0 100vw var(--wle-band); clip-path: inset(calc(-8px / var(--wle-s, 1)) -100vw calc(-8px / var(--wle-s, 1)) -100vw); }
.wle-desk.has-ruler .wle-ruler-h.wle-ruler-h span { top: calc(4px / var(--wle-s, 1)); }
/* The vertical ruler hugs the sheet's left edge at every zoom, at its own size. */
.wle-zoom.is-scaled .wle-ruler-v { left: calc(-24px / var(--wle-s, 1)); width: calc(18px / var(--wle-s, 1)); font-size: calc(9px / var(--wle-s, 1)); }
.wle-zoom.is-scaled .wle-ruler-v span { left: calc(4px / var(--wle-s, 1)); }
/* Tools over the page keep their own size (the float toolbar); the paper and everything on it scales. */
.wle-zoom.is-scaled .wle-fctx { transform: translateY(-100%) scale(calc(1 / var(--wle-s, 1))); transform-origin: 0 100%; }

/* Status bar: Word's − slider + 162% and the Perbesaran box. */
.wle-sb-slider { width: 96px; height: 22px; margin: 0 2px; accent-color: var(--wl-blue); cursor: pointer; }
@media (max-width: 639px) { .wle-sb-slider { display: none; } }
.wle-zoomdlg { position: fixed; z-index: 62; right: 8px; bottom: 34px; width: min(330px, calc(100vw - 16px)); padding: 10px 12px 12px; border: 1px solid var(--wl-line); border-radius: 10px; background: #fff; color: var(--wl-ink); box-shadow: 0 10px 30px rgba(20, 30, 60, .18); font-size: 12px; white-space: normal; }
@media (max-width: 1023px) { .wle-zoomdlg { bottom: 42px; } }
.wle-zoomdlg-h { font-weight: 600; font-size: 13px; margin: 0 0 8px; }
.wle-zoomdlg-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.wle-zoomdlg-grid .wle-chip { display: inline-flex; align-items: center; gap: 6px; }
.wle-zoomdlg-grid .wle-chip:disabled { opacity: .45; cursor: default; }
.wle-zoomdlg-pct { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--wl-muted); }
.wle-zoomdlg-pct .wl-input { width: 76px; min-height: 30px; padding: 4px 8px; }
.wle-zoomdlg-pct .wl-btn { margin-left: auto; }
@media print {
  .wle, .wle.wle { height: auto; overflow: visible; }
  .wle-desk.wle-desk { overflow: visible; padding: 0; }
  .wle-zoom, .wle-zoom.is-scaled { width: auto !important; height: auto !important; margin: 0 !important; }
  .wle-desk .wle-zoom.is-scaled > .wle-page.wle-page { transform: none !important; }
  .wle-rscroll, .wle-rcollapse, .wle-zoomdlg { display: none !important; }
}
/* ── WX-RULER: a working ruler, tabs in the text, the Paragraph and Tabs dialogs ── */
.wle-ruler-h.is-live { pointer-events: auto; overflow: visible; height: 20px; touch-action: none; }
.wle-ruler-h.is-live > span { top: 5px; pointer-events: none; }
.wle-ruler-h.is-drag, .wle-ruler-h.is-drag * { cursor: col-resize; }
.wle-rl-type { position: absolute; left: -27px; top: 0; width: 20px; height: 20px; padding: 0; border: 1px solid #c3cbd7; border-radius: 3px; background: #fff; display: grid; place-items: center; cursor: pointer; }
.wle-rl-type:hover { border-color: var(--wl-blue); background: #f2f6fd; }
.wle-rl-type svg, .wle-rl-tab svg { width: 14px; height: 14px; fill: none; stroke: #263142; stroke-width: 1.6; stroke-linecap: square; }
.wle-rl-type svg .is-fill { fill: #fff; stroke-width: 1; }
.wle-rl-marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wle-rl-m, .wle-rl-tab { position: absolute; pointer-events: auto; cursor: default; }
.wle-rl-m { width: 11px; margin-left: -5.5px; }
.wle-rl-m svg { display: block; width: 11px; height: 100%; fill: #fff; stroke: #556072; stroke-width: 1; }
.wle-rl-m:hover svg { fill: #dce8fb; }
.wle-rl-m.is-left:hover { background: #dce8fb; }
/* A 3px gap between ▽ and △ leaves the margin boundary under them grabbable, as in Word. */
.wle-rl-m.is-first { top: -1px; height: 7px; }
.wle-rl-m.is-hang, .wle-rl-m.is-right { top: 9px; height: 6px; }
.wle-rl-m.is-left { top: 15px; height: 5px; background: #fff; border: 1px solid #556072; box-sizing: border-box; }
.wle-rl-tab { top: 6px; width: 14px; height: 14px; margin-left: -7px; }
.wle-rl-tab.is-l { margin-left: -5px; }
.wle-rl-tab.is-r { margin-left: -9px; }
.wle-rl-tab.is-style svg { stroke: #7d8899; }
.wle-rl-tab.is-off { opacity: .3; }
.wle-rl-tab.is-ghost { opacity: .55; pointer-events: none; }
.wle-rl-def { position: absolute; bottom: 0; width: 1px; height: 3px; background: #8f9aaa; pointer-events: none; }
.wle-rl-mh { position: absolute; z-index: 1; top: 0; bottom: 0; width: 8px; margin-left: -4px; cursor: col-resize; }
.wle-rl-mh.is-left { left: var(--wle-r-a); }
.wle-rl-mh.is-right { left: calc(100% - var(--wle-r-b)); }
.wle-rl-mh.is-off, .wle-rl-vm.is-off { cursor: not-allowed; }
.wle-rl-vm { position: absolute; z-index: 1; left: 0; right: 0; height: 8px; margin-top: -4px; cursor: row-resize; pointer-events: auto; }
.wle-rl-vm.is-top { top: var(--wle-r-a); }
.wle-rl-vm.is-bottom { top: calc(100% - var(--wle-r-b)); }
.wle-rl-guide { position: fixed; z-index: 70; width: 0; border-left: 1px dashed #2b3442; pointer-events: none; }
.wle-rl-guide.is-horiz { height: 0; border-left: 0; border-top: 1px dashed #2b3442; }
.wle-rl-tip { position: fixed; z-index: 71; transform: translateX(-50%); padding: 4px 8px; border-radius: 4px; background: #1f2a3d; color: #fff; font: 500 11px/1.25 Inter, sans-serif; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(15,23,42,.25); }
.wle-rl-tip b { margin-left: 6px; font-weight: 700; }
@media print { .wle-rl-guide, .wle-rl-tip { display: none !important; } }

/* A tab in the text: as wide as ruler.js layoutTabs() draws it to its stop (never saved). */
.wle-rich span.wl-tab, .wle-hf-body span.wl-tab { position: relative; display: inline-block; width: 1.27cm; height: 1em; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; white-space: pre; tab-size: 1; text-indent: 0; letter-spacing: 0; vertical-align: baseline; overflow: hidden; cursor: text; }
.wle-rich span.wl-tab[data-lead="dot"], .wle-hf-body span.wl-tab[data-lead="dot"], .wle-tdlg-lead.is-dot { background: radial-gradient(circle, currentColor .07em, transparent .085em) 0 calc(100% - .02em) / .32em .2em repeat-x; }
.wle-rich span.wl-tab[data-lead="middleDot"], .wle-hf-body span.wl-tab[data-lead="middleDot"] { background: radial-gradient(circle, currentColor .07em, transparent .085em) 0 60% / .32em .2em repeat-x; }
.wle-rich span.wl-tab[data-lead="hyphen"], .wle-hf-body span.wl-tab[data-lead="hyphen"], .wle-tdlg-lead.is-hyphen { background: linear-gradient(to right, currentColor 55%, transparent 55%) 0 70% / .45em 1px repeat-x; }
.wle-rich span.wl-tab[data-lead="underscore"], .wle-hf-body span.wl-tab[data-lead="underscore"], .wle-tdlg-lead.is-underscore { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.wle-rich span.wl-tab[data-lead="heavy"], .wle-hf-body span.wl-tab[data-lead="heavy"] { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
.wle-page.show-marks .wle-rich span.wl-tab::after { content: "→"; position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-size: .8em; line-height: 1.2; color: #93a8c9; }
.wle-rich .wl-al-l { text-align: left !important; }
/* The tail of a paragraph the page view carried to the next sheet (editor.js splitBlock) goes on
   its lines: no second first-line or hanging indent, as Word continues a paragraph on a new page. */
.wle-rich [data-wlcont="1"] { text-indent: 0 !important; }
/* "Jangan tambahkan spasi antar paragraf bergaya sama" (contextual spacing). */
.wle-rich [data-ctx-spacing]:has(+ [data-ctx-spacing]) { margin-bottom: 0 !important; }
.wle-rich [data-ctx-spacing] + [data-ctx-spacing]:not([data-wlpush]) { margin-top: 0 !important; }

/* Beranda › Paragraf: Word's dialog launcher in the group's corner is WX-RIBBON's .wle-rlaunch. */

/* Paragraf… and Tab… dialogs */
.wle-pdlg { max-width: 560px; padding: 16px; }
.wle-pdlg-head { display: flex; align-items: center; gap: 8px; }
.wle-pdlg-tabs { display: flex; gap: 2px; margin: 10px 0 2px; border-bottom: 1px solid var(--wl-line); overflow-x: auto; }
.wle-pdlg-tabs button { padding: 7px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--wl-muted); font-size: .8rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.wle-pdlg-tabs button[aria-selected="true"] { color: var(--wl-blue); border-bottom-color: var(--wl-blue); }
.wle-pdlg-set { min-width: 0; margin: 10px 0 0; padding: 6px 0 0; border: 0; border-top: 1px solid var(--wl-line); }
.wle-pdlg-set legend { padding-right: 6px; font-size: .72rem; font-weight: 700; color: var(--wl-ink); }
.wle-pdlg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.wle-pdlg-grid label, .wle-pdlg-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: .75rem; font-weight: 600; color: var(--wl-muted); }
.wle-pdlg-grid .wl-select, .wle-pdlg-grid .wl-input, .wle-pdlg-num .wl-input { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
.wle-pdlg-num { display: flex; align-items: center; gap: 6px; }
.wle-pdlg-num .wl-input { flex: 1; min-width: 0; }
.wle-pdlg-num i { width: 18px; font-style: normal; font-size: .75rem; color: var(--wl-muted); }
.wle-pdlg-check { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .8rem; color: var(--wl-ink); }
.wle-pdlg-prev { height: 112px; overflow: hidden; padding: 8px 10px; border: 1px solid var(--wl-line); background: #fff; color: #1b2433; font: 6.5px/6px Georgia, serif; }
.wle-pdlg-prev p { margin: 0 0 3px; }
.wle-pdlg-prev .is-grey { color: #a5adba; }
.wle-pdlg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.wle-tdlg { max-width: 520px; }
.wle-tdlg-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.wle-tdlg-list { height: 128px; margin-top: 6px; overflow: auto; border: 1px solid var(--wl-line); border-radius: 6px; }
.wle-tdlg-list button { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 4px 8px; border: 0; background: none; color: var(--wl-ink); font-size: .8rem; text-align: left; cursor: pointer; }
.wle-tdlg-list button small { color: var(--wl-muted); }
.wle-tdlg-list button[aria-selected="true"] { background: var(--wl-blue-soft); color: var(--wl-blue); }
.wle-tdlg-lead { flex: 1; max-width: 64px; height: .9em; margin-left: 4px; color: var(--wl-muted); }
.wle-tdlg-err { margin-top: 4px; font-size: .75rem; color: var(--wl-red); }
@media (max-width: 480px) {
    .wle-pdlg-grid, .wle-tdlg-body { grid-template-columns: minmax(0, 1fr); }
    .wle-pdlg { padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
}
/* WX-PICTURE: Word's picture selection (templates/writing_labs/picture/_frame.html, picture.js).
   The frame pieces are drawn on the white sheet: their selectors start with .wle-page, which the editor's
   data-ui-theme-keep list exempts from the dark-mode turn, so they keep Word's light look in dark mode. */
.wle-page.wle-pic-behind { isolation: isolate; }
/* WY-PICTURE2 (figure.js): Word's move cursor over a reachable part of a picture behind the text. */
.wle-page.wle-pic-hover .wle-rich, .wle-page.wle-pic-hover .wle-rich * { cursor: move; }
/* A moved / resized picture must not become the browser's scroll anchor: the page would follow it. */
.wle-page img[data-pic], .wle-picui, .wle-picui * { overflow-anchor: none; }
.wle-page .wle-picframe { position: absolute; z-index: 40; pointer-events: none; box-sizing: border-box; border: 1px solid #5b8fd6; transform-origin: 50% 50%; }
.wle-page .wle-picframe.is-owned { border-style: dashed; border-color: #8a96a8; }
.wle-page .wle-pic-h { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; background: #fff; border: 1px solid #5f6b7a; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.7); pointer-events: auto; touch-action: none; }
.wle-page .wle-picframe.is-owned .wle-pic-h { background: #e4e8ee; cursor: not-allowed !important; }
.wle-page .wle-pic-h.is-nw { left: 0; top: 0; cursor: nwse-resize; } .wle-page .wle-pic-h.is-n { left: 50%; top: 0; cursor: ns-resize; }
.wle-page .wle-pic-h.is-ne { left: 100%; top: 0; cursor: nesw-resize; } .wle-page .wle-pic-h.is-e { left: 100%; top: 50%; cursor: ew-resize; }
.wle-page .wle-pic-h.is-se { left: 100%; top: 100%; cursor: nwse-resize; } .wle-page .wle-pic-h.is-s { left: 50%; top: 100%; cursor: ns-resize; }
.wle-page .wle-pic-h.is-sw { left: 0; top: 100%; cursor: nesw-resize; } .wle-page .wle-pic-h.is-w { left: 0; top: 50%; cursor: ew-resize; }
.wle-page .wle-pic-rot { position: absolute; left: 50%; top: -26px; width: 18px; height: 18px; margin-left: -9px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #3f4e66; border: 1px solid #8a96a8; font-size: 9px; pointer-events: auto; cursor: grab; touch-action: none; }
.wle-page .wle-pic-rot::after { content: ''; position: absolute; left: 50%; top: 17px; height: 8px; border-left: 1px solid #8a96a8; }
@media (pointer: coarse) {
    .wle-page .wle-pic-h { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
    .wle-page .wle-pic-h::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }   /* a finger-sized hit area */
    .wle-page .wle-pic-rot { width: 26px; height: 26px; margin-left: -13px; top: -36px; font-size: 12px; }
    .wle-page .wle-pic-rot::after { top: 25px; height: 10px; }
}
/* Crop mode: the whole picture greyed, the kept part bright, Word's black crop handles. */
.wle-page .wle-picframe.is-crop { border-color: transparent; }
.wle-page .wle-pic-ghost { position: absolute; pointer-events: none; }
.wle-page .wle-pic-ghost > img { width: 100%; height: 100%; max-width: none; opacity: .38; filter: grayscale(.25); display: block; }
.wle-page .wle-pic-cropbox { position: absolute; outline: 1px solid #111; overflow: visible; }
.wle-page .wle-pic-ch { position: absolute; pointer-events: auto; touch-action: none; background: #111; }
.wle-page .wle-pic-ch.is-n, .wle-page .wle-pic-ch.is-s { left: 50%; width: 18px; height: 5px; margin-left: -9px; cursor: ns-resize; }
.wle-page .wle-pic-ch.is-n { top: -2px; } .wle-page .wle-pic-ch.is-s { bottom: -2px; }
.wle-page .wle-pic-ch.is-e, .wle-page .wle-pic-ch.is-w { top: 50%; width: 5px; height: 18px; margin-top: -9px; cursor: ew-resize; }
.wle-page .wle-pic-ch.is-e { right: -2px; } .wle-page .wle-pic-ch.is-w { left: -2px; }
.wle-page .wle-pic-ch.is-nw, .wle-page .wle-pic-ch.is-ne, .wle-page .wle-pic-ch.is-se, .wle-page .wle-pic-ch.is-sw { width: 14px; height: 14px; background: none; border: 0 solid #111; }
.wle-page .wle-pic-ch.is-nw { left: -2px; top: -2px; border-width: 5px 0 0 5px; cursor: nwse-resize; }
.wle-page .wle-pic-ch.is-ne { right: -2px; top: -2px; border-width: 5px 5px 0 0; cursor: nesw-resize; }
.wle-page .wle-pic-ch.is-se { right: -2px; bottom: -2px; border-width: 0 5px 5px 0; cursor: nwse-resize; }
.wle-page .wle-pic-ch.is-sw { left: -2px; bottom: -2px; border-width: 0 0 5px 5px; cursor: nesw-resize; }
@media (pointer: coarse) { .wle-page .wle-pic-ch.is-n, .wle-page .wle-pic-ch.is-s { width: 28px; height: 8px; margin-left: -14px; } .wle-page .wle-pic-ch.is-e, .wle-page .wle-pic-ch.is-w { width: 8px; height: 28px; margin-top: -14px; } .wle-page .wle-pic-ch.is-nw, .wle-page .wle-pic-ch.is-ne, .wle-page .wle-pic-ch.is-se, .wle-page .wle-pic-ch.is-sw { width: 22px; height: 22px; } }
/* Opsi Tata Letak: the button beside the picture and its flyout. */
.wle-pic-lo { position: absolute; z-index: 46; }
.wle-page .wle-pic-lobtn { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; background: #fff; border: 1px solid #c3cad5; border-radius: 4px; color: #3f4e66; box-shadow: 0 1px 3px rgba(20,30,60,.12); cursor: pointer; }
.wle-page .wle-pic-lobtn svg { width: 20px; height: 20px; }
.wle-page .wle-pic-lobtn:hover, .wle-page .wle-pic-lobtn.is-on { border-color: #5b8fd6; background: #eef4ff; }
.wle-pic-lomenu { position: absolute; top: 0; left: 32px; width: 236px; padding: 8px 10px 10px; background: #fff; color: #1b2433; border: 1px solid #d3d9e3; border-radius: 8px; box-shadow: 0 10px 28px rgba(20,30,60,.18); font-size: .78rem; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.35; }
.wle-pic-lohead { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 2px; }
.wle-pic-x { border: 0; background: none; color: #5f6b7a; cursor: pointer; padding: 2px 4px; }
.wle-pic-lonote { margin-top: 6px; color: #8a5a00; font-size: .72rem; }
.wle-pic-more { margin-top: 6px; border: 0; background: none; color: #2563eb; padding: 0; cursor: pointer; font-size: .76rem; }
.wle-pic-lomenu .wle-pic-radio { display: flex; margin-top: 4px; }
@media (max-width: 639px) { .wle-pic-lomenu { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; z-index: 80; } }
/* Guides while dragging (Word's alignment guides) and the drop caret of an in-line picture. */
.wle-page .wle-pic-guide { position: absolute; z-index: 41; pointer-events: none; background: #1aa36f; }
.wle-page .wle-pic-guide.is-v { width: 1px; } .wle-page .wle-pic-guide.is-h { height: 1px; }
.wle-page .wle-pic-drop { position: absolute; z-index: 41; width: 2px; background: #1f2933; pointer-events: none; }
body.wle-pic-dragging, body.wle-pic-dragging * { user-select: none !important; -webkit-user-select: none !important; }
/* Menus and grids of the Format Gambar tab and the flyout. */
.wle-pic-mhead { margin: 6px 4px 3px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--wl-muted, #5f6b7a); }
.wle-pic-mnote { margin: 2px 6px 6px; font-size: .74rem; color: var(--wl-muted, #5f6b7a); }
.wle-pic-grid { display: grid; grid-template-columns: repeat(3, 38px); gap: 4px; padding: 0 4px; }
.wle-pic-grid:not(.is-3) { grid-template-columns: 38px; }
.wle-pic-icon { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: #3f4e66; cursor: pointer; }
.wle-pic-icon:hover, .wle-pic-icon.is-on { border-color: #8fb1e3; background: #e8eff9; }
.wle-pic-icon:disabled { opacity: .45; cursor: not-allowed; }
.wle-menu > button.wle-pic-row { display: flex; align-items: center; gap: 8px; }
.wle-menu > button.wle-pic-row.is-on { background: #e8eff9; }
.wle-menu > button.wle-pic-row:disabled { opacity: .45; cursor: not-allowed; }
.wle-pic-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: #3f4e66; }
.wle-pic-ico svg { width: 22px; height: 22px; }
.wle-pic-hr { border: 0; border-top: 1px solid var(--wl-line); margin: 4px 2px; }
.wle-pic-sw { padding: 0 4px; display: flex; flex-wrap: wrap; gap: 3px; max-width: 220px; }
.wle-pic-sw .wle-swatch { width: 18px; height: 18px; border: 1px solid #c3cad5; }
.wle-pic-bmenu { min-width: 236px; }
.wle-pic-weights { display: grid; padding: 0 2px; }
.wle-pic-weights > button, .wle-menu > button.wle-pic-dash { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; padding: 4px 8px; border: 0; background: none; border-radius: 6px; font-size: .76rem; color: var(--wl-ink); cursor: pointer; text-align: left; }
.wle-menu > button.wle-pic-dash { grid-template-columns: 60px 1fr; width: 100%; }
.wle-pic-weights > button:hover, .wle-menu > button.wle-pic-dash:hover, .wle-pic-weights > button.is-on { background: #eef4ff; }
.wle-pic-weights i, .wle-pic-dash i { display: block; width: 100%; }
.wle-pic-ratios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0 4px; }
.wle-pic-ratios > button { padding: 5px 0; border: 1px solid var(--wl-line); border-radius: 5px; background: none; font-size: .74rem; color: var(--wl-ink); cursor: pointer; }
.wle-pic-ratios > button:hover { background: #eef4ff; }
.wle-menu > button.wle-pic-asset { display: flex; align-items: center; gap: 8px; }
.wle-pic-asset img { width: 38px; height: 28px; object-fit: cover; border-radius: 3px; flex: none; }
.wle-pic-asset span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.wle-pic-dims { gap: 4px; justify-content: center; }
.wle-pic-dim { display: flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--wl-ink); white-space: nowrap; }
.wle-pic-dim > i { width: 14px; color: #3f4e66; font-size: .74rem; }
.wle-pic-dim > span:first-of-type { min-width: 40px; }
.wle-pic-num { width: 66px; height: 26px; padding: 0 4px 0 6px; border: 1px solid var(--wl-line); border-radius: 5px; background: #fff; font-size: .76rem; color: var(--wl-ink); }
.wle-pic-num:disabled { opacity: .55; }
.wle-pic-unit { font-size: .7rem; color: var(--wl-muted); }
.wle-pic-border-btn > i:first-child { font-size: 1rem; }
/* The Tata Letak dialog. */
.wle-pic-dlg { width: min(560px, calc(100vw - 16px)); max-height: calc(100vh - 24px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.wle-pic-dlghead { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; }
.wle-pic-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--wl-line); overflow-x: auto; }
.wle-pic-tabs > button { padding: 7px 10px; border: 0; border-bottom: 2px solid transparent; background: none; font-size: .8rem; color: var(--wl-muted); cursor: pointer; white-space: nowrap; }
.wle-pic-tabs > button[aria-selected="true"] { color: var(--wl-ink); border-bottom-color: var(--wl-accent, #2563eb); font-weight: 600; }
.wle-pic-dlgbody { padding: 8px 14px 4px; overflow-y: auto; font-size: .8rem; }
.wle-pic-dsec { margin: 10px 0 4px; font-size: .72rem; font-weight: 700; color: var(--wl-muted); border-bottom: 1px solid var(--wl-line); padding-bottom: 2px; }
.wle-pic-drow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0; }
.wle-pic-dnum { width: 80px !important; height: 30px; min-height: 30px !important; padding: 0 6px !important; display: inline-block; }
.wle-pic-dnote { font-size: .74rem; color: var(--wl-muted); flex: 1; }
.wle-pic-dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.wle-pic-dgrid label { display: flex; align-items: center; gap: 6px; }
.wle-pic-dgrid label > input { margin-left: auto; }
.wle-pic-radio, .wle-pic-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .78rem; }
.wle-pic-check { display: flex; margin: 6px 0; }
.wle-pic-wrapgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wle-pic-wrapbtn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 1px solid var(--wl-line); border-radius: 6px; background: none; font-size: .7rem; color: var(--wl-ink); cursor: pointer; text-align: center; line-height: 1.2; }
.wle-pic-wrapbtn.is-on { border-color: #5b8fd6; background: #e8eff9; }
.wle-pic-dlgfoot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--wl-line); }
@media (max-width: 639px) { .wle-pic-wrapgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wle-pic-dgrid { grid-template-columns: 1fr; } }
/* Side panels: alt text, selection pane. */
.wle-pic-alt { width: 100%; resize: vertical; min-height: 96px; }
.wle-pic-panerow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid var(--wl-line); border-radius: 8px; background: #fff; font-size: .8rem; color: var(--wl-ink); text-align: left; cursor: pointer; }
.wle-pic-panerow.is-on { border-color: #5b8fd6; background: #e8eff9; }
.wle-pic-panewrap { font-size: .7rem; color: var(--wl-muted); white-space: nowrap; }
@media print { .wle-picui { display: none !important; } }
/* WX-MENU: the menu's paste row and glyphs, Font dialog runs, list styles, the table
   look options, the cell-selection paint, the two table tabs and the dialogs. */
.wle-cm-row { align-items: start; padding-top: 5px; padding-bottom: 5px; }
.wle-cm-row.is-sel { background: none; }
.wle-cm-row .wle-cm-icon { margin-top: 2px; }
.wle-cm-ibs { display: flex; gap: 4px; margin-top: 4px; }
.wle-cm-ib { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: #3f4e66; font-size: .9rem; cursor: default; }
.wle-cm-ib:hover, .wle-cm-ib.is-sel { background: #e8eff9; border-color: #b9cbe6; }
.wle-cm-ib.is-off { color: #b4bcc8; }
.wle-cm.is-sheet .wle-cm-ib { width: 46px; height: 40px; font-size: 1.05rem; }
.wle-cm-icon.wle-cm-dot, .wle-cm-dot { font-size: .5rem; }
.wle-al9 { position: relative; display: inline-block; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 1px; vertical-align: middle; }
.wle-al9::before { content: ""; position: absolute; width: 7px; height: 1.5px; background: currentColor; box-shadow: 0 3px 0 currentColor; }
.wle-al9.is-tl::before, .wle-al9.is-tc::before, .wle-al9.is-tr::before { top: 2px; }
.wle-al9.is-ml::before, .wle-al9.is-mc::before, .wle-al9.is-mr::before { top: 3.75px; }
.wle-al9.is-bl::before, .wle-al9.is-bc::before, .wle-al9.is-br::before { top: 5.5px; }
.wle-al9.is-tl::before, .wle-al9.is-ml::before, .wle-al9.is-bl::before { left: 2px; }
.wle-al9.is-tc::before, .wle-al9.is-mc::before, .wle-al9.is-bc::before { left: 2.5px; }
.wle-al9.is-tr::before, .wle-al9.is-mr::before, .wle-al9.is-br::before { right: 2px; }
.wle-bd { position: relative; display: inline-block; width: 14px; height: 14px; vertical-align: middle; border: 1px dotted #9aa5b4;
    background: linear-gradient(#b7c0cc, #b7c0cc) center / 1px 100% no-repeat, linear-gradient(#b7c0cc, #b7c0cc) center / 100% 1px no-repeat; }
.wle-bd.is-b { border-bottom: 2px solid currentColor; } .wle-bd.is-t { border-top: 2px solid currentColor; }
.wle-bd.is-l { border-left: 2px solid currentColor; } .wle-bd.is-r { border-right: 2px solid currentColor; }
.wle-bd.is-out, .wle-bd.is-all { border: 2px solid currentColor; }
.wle-bd.is-all, .wle-bd.is-in { background: linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.wle-bd.is-ih { background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.wle-bd.is-iv { background: linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
.wle-menu .wle-bd, .wle-menu .wle-al9 { margin-right: 8px; color: #3f4e66; }
.wle-menu > button { display: flex; align-items: center; }

/* Font dialog runs on the sheet (the page stays light: no dark variants). */
.wle-rich .wl-dstrike { text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-size: 100% 1px; background-position: 0 calc(50% + 0px), 0 calc(50% + 3px); background-repeat: no-repeat; }
.wle-rich .wl-vanish { display: none; }
.wle-page.show-marks .wle-rich .wl-vanish { display: inline; text-decoration: underline dotted #6b7686; }
.wle-rich a[href] { color: #0563c1; text-decoration: underline; }
.wle-rich ul.wl-ul-circle { list-style: circle; } .wle-rich ul.wl-ul-square { list-style: square; }
.wle-rich ul.wl-ul-dash { list-style: "– "; } .wle-rich ul.wl-ul-arrow { list-style: "➢ "; } .wle-rich ul.wl-ul-check { list-style: "✓ "; }
.wle-rich ol.wl-ol-ua { list-style: upper-alpha; } .wle-rich ol.wl-ol-ui { list-style: upper-roman; }
/* Opsi Gaya Tabel on the editor's own tables (a Word file's table keeps its own cell look). */
.wle-rich table.wl-lk-band:not(.wl-src-table) > tbody > tr:nth-child(even) > td { background-color: #f2f2f2; }
.wle-rich table.wl-lk-bandc:not(.wl-src-table) > tbody > tr > td:nth-child(odd) { background-color: #f2f2f2; }
.wle-rich table.wl-lk-first:not(.wl-src-table) tr > :first-child,
.wle-rich table.wl-lk-last:not(.wl-src-table) tr > :last-child { font-weight: 700; }
.wle-rich table.wl-lk-total:not(.wl-src-table) > tbody > tr:last-child > * { font-weight: 700; border-top: 1px solid #1b2433; }
.wle-rich tr.wl-hx > * { overflow: hidden; }
/* Tampilkan garis kisi: dashed guides where a cell draws no border (screen only). */
body.wle-tgrid .wle-rich td, body.wle-tgrid .wle-rich th { outline: 1px dashed rgba(70, 120, 200, .45); outline-offset: -1px; }
body.wle-painting .wle-rich td, body.wle-painting .wle-rich th { cursor: crosshair; }
/* Selected cells, painted over the page like Word. */
.wle-csel { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.wle-csel > i { position: absolute; background: rgba(46, 117, 182, .2); outline: 1px solid rgba(46, 117, 182, .35); outline-offset: -1px; }
@media print { .wle-csel { display: none !important; } body.wle-tgrid .wle-rich td, body.wle-tgrid .wle-rich th { outline: 0; } }

/* The table tabs and the Font group's dialog launcher. */
.wle-rgrid.wle-rgrid-3 { grid-template-rows: repeat(3, 22px); gap: 0 6px; }
.wle-rgrid-3 .wle-rcheck { padding: 0 2px; font-weight: 500; }
.wle-tgallery { max-width: 268px; }
.wle-tgallery .wle-gal-item { align-items: center; gap: 3px; }
.wle-ral9 { display: grid; grid-template-columns: repeat(3, 26px); grid-auto-rows: 22px; gap: 1px; }
.wle-ral9 .wle-tb { width: 26px; height: 22px; min-width: 0; padding: 0; justify-content: center; }
label.wle-rnum { display: inline-flex; align-items: center; gap: 5px; height: 26px; font-size: .74rem; color: var(--wl-ink); white-space: nowrap; }
.wle-rnum > span { min-width: 36px; }
.wle-rnum > small { font-size: .7rem; color: var(--wl-muted); }
.wle-rnum input { width: 58px; height: 24px; border: 1px solid var(--wl-line); border-radius: 6px; padding: 0 4px; font-size: .74rem; background: var(--wl-card); color: var(--wl-ink); }
.wle-rnum input:disabled { opacity: .55; }
/* Group dialog launchers (Font, Paragraf): WX-RIBBON's .wle-rlaunch; disabled while the dialog cannot open. */
.wle-rlaunch:disabled { opacity: .45; cursor: default; }

/* The WX-MENU dialogs (wl-modal: a bottom sheet on phones). */
.wle-mdlg { max-width: 620px; }
.wle-mdlg.wle-mdlg-sm { max-width: 420px; }
.wle-mtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--wl-line); }
.wle-mtabs > button { padding: 6px 12px; border: 0; border-bottom: 2px solid transparent; background: none; font-size: .8rem; font-weight: 600; color: var(--wl-muted); cursor: pointer; }
.wle-mtabs > button.is-on { color: var(--wl-blue); border-bottom-color: var(--wl-blue); }
.wle-mgrid { display: grid; gap: 8px 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
    .wle-mgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wle-mgrid-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); }
    .wle-mgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 559px) { .wle-mgrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wle-mgrid .wl-label { margin-bottom: 0; }
.wle-mswatches { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wle-mswatches.is-off { opacity: .5; }
.wle-mswatch { width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .18); cursor: pointer; padding: 0; }
.wle-mswatch.is-on, .wle-mswatch-auto.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wl-blue); }
.wle-mswatch-auto { height: 22px; padding: 0 6px; border: 1px solid var(--wl-line); border-radius: 4px; background: #f6f8fc; font-size: .7rem; cursor: pointer; color: var(--wl-ink); }
.wle-mswatch-pick { width: 26px; height: 22px; padding: 0; border: 1px solid var(--wl-line); border-radius: 4px; background: #fff; cursor: pointer; }
.wle-mfield { border: 1px solid var(--wl-line); border-radius: 8px; padding: 6px 10px 10px; min-width: 0; }
.wle-mfield > legend { padding: 0 4px; font-size: .72rem; font-weight: 700; color: var(--wl-muted); }
.wle-mchecks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
@media (min-width: 560px) { .wle-mchecks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wle-mchecks label, .wle-mcheck, .wle-mradios label { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--wl-ink); min-width: 0; }
.wle-mradios { display: grid; gap: 6px; }
.wle-mradios.is-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.wle-mradios label i { color: #3f4e66; }
.wle-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wle-mnum { width: 96px !important; flex: 0 0 auto; }
/* A white paper sample, as the sheet (".wle-sheet" keeps it light in dark mode). */
.wle-mpreview.wle-sheet-preview { display: flex; align-items: center; justify-content: center; min-height: 64px; max-height: 120px; overflow: hidden; padding: 8px 12px; border: 1px solid var(--wl-line); border-radius: 8px; background: #fff; color: #000; text-align: center; word-break: break-word; }

/* ── WY-COLS: text columns like Word (columns.js). Blocks get inline left/width per column;
      the line between columns (w:sep) is drawn per sheet from sh.rules. ── */
.wle-sheet .wle-colrule { position: absolute; width: 0; border-left: .75px solid #000; pointer-events: none; z-index: 0; }
.wle-rich hr.wl-colbreak { display: block; height: 0; margin: 0; padding: 0; border: 0; overflow: visible; background: none; }
.wle-page.show-marks .wle-rich hr.wl-colbreak { position: relative; height: 1.1em; margin: .3em 0; border-top: 1px dotted #7b8fa8; }
.wle-page.show-marks .wle-rich hr.wl-colbreak::after { content: "Hentian Kolom"; position: absolute; left: 50%; top: -.65em; transform: translateX(-50%); padding: 0 6px; background: #fff; color: #7b8fa8; font: 600 9px/1.2 system-ui, sans-serif; letter-spacing: .02em; }
.wlf .wlf-sectmark { display: block; height: 0; margin: 0; padding: 0; overflow: hidden; }
.wle-cols-ic { display: inline-flex; gap: 3px; width: 24px; height: 18px; padding: 2px; border: 1px solid currentColor; border-radius: 2px; vertical-align: middle; opacity: .8; flex: none; }
.wle-cols-ic > i { display: block; flex: 1 1 0; min-width: 0; background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 3px); opacity: .75; }
.wle-cols-ic.is-left > i:first-child, .wle-cols-ic.is-right > i:last-child { flex: .5 1 0; }
.wle-cols-menu > button { display: flex; align-items: center; gap: 8px; }
.wle-menu > button.wle-menu-sep { border-top: 1px solid var(--wl-line); margin-top: 3px; padding-top: 7px; }
.wle-cdlg { width: min(460px, calc(100vw - 32px)); }
.wle-cdlg-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.wle-cdlg-presets > button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 6px 8px; border: 1px solid var(--wl-line); border-radius: 6px; background: transparent; color: var(--wl-ink); font-size: .72rem; }
.wle-cdlg-presets > button[aria-checked="true"] { border-color: var(--wl-accent, #2563eb); box-shadow: inset 0 0 0 1px var(--wl-accent, #2563eb); }
.wle-cdlg-presets .wle-cols-ic { width: 30px; height: 24px; }
.wle-cdlg-check { display: block; font-size: .75rem; }
.wle-cdlg-check span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--wl-ink); }
.wle-cdlg-table { display: flex; flex-direction: column; gap: 4px; }
.wle-cdlg-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; font-size: .75rem; }
.wle-cdlg-row.is-head { font-weight: 700; color: var(--wl-muted); }
.wle-cdlg-row .wl-input { min-height: 30px; padding-top: 3px; padding-bottom: 3px; min-width: 0; }
.wle-cdlg-preview { display: flex; height: 64px; padding: 6px; border: 1px solid var(--wl-line); border-radius: 4px; background: #fff; }
.wle-cdlg-pcol { position: relative; display: flex; flex-direction: column; justify-content: space-between; flex: none; }
.wle-cdlg-pcol > i { height: 3px; background: #9aa6b5; }
.wle-cdlg-pcol.has-sep::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; border-left: 1px solid #333; }
@media (max-width: 420px) {
    .wle-cdlg-presets > button { min-width: 52px; padding: 4px; }
}

/* ── WY-SCHOLAR: contributor photo (Kontributor penulis panel, template author row) ── */
/* A literal deep red (not var(--wl-red), lightness < 40 %), so ui_theme.js turns it into a readable dark-mode twin. */
.wle-au-err { margin-top: -2px; font-size: .7rem; line-height: 1.35; color: #991b1b; }
.wle-au-photo { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border: 1px dashed var(--wl-line); border-radius: 10px; }
.wle-au-avatar { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; background: #eef2f8; color: #64748b; font-size: 1.1rem; }
.wle-au-avatar.is-round { border-radius: 999px; }
.wle-au-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* Why the Scholar photo did not come: a calm callout (amber for "try later", plain for "no photo"),
   with "Coba ambil lagi" / "Unggah foto" in it. Token colours, so ui_theme.js turns them for dark mode. */
.wle-au-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; padding: 7px 8px; border: 1px solid #fde4b8; border-radius: 8px; background: var(--wl-amber-soft); color: var(--wl-ink); font-size: .72rem; line-height: 1.4; overflow-wrap: anywhere; }
.wle-au-note > i { flex: 0 0 auto; margin-top: 2px; color: var(--wl-amber); }
.wle-au-note[data-kind="none"] { border-color: var(--wl-line); background: var(--wl-bg); }
.wle-au-note[data-kind="none"] > i { color: var(--wl-muted); }
.wle-au-note .wl-btn { white-space: nowrap; }
/* COI (authors.js): a contributor e-mail of the journal's team. The deep red literal has a dark-mode twin
   (ui_theme.js), as .wle-au-err; the text wraps at any width (390 px). */
.wle-au-coi { display: flex; align-items: flex-start; gap: 6px; margin-top: -2px; padding: 6px 8px; border-radius: 8px;
              border: 1px solid rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .07); font-size: .72rem; line-height: 1.4;
              color: #991b1b; overflow-wrap: anywhere; }
.wle-au-coi > i { margin-top: 2px; flex: 0 0 auto; }
.wle-au-card .wl-input.is-bad { border-color: var(--wl-red); }
/* Canvas author photo = same look as Kontributor panel (.wle-au-avatar): fixed square, cover-crop,
   circular clip. Word only sets width (pt/calc); a raw Scholar JPEG with height:auto was stretching
   into a wide oval and cropping the crown of the head. */
.wle-page .wlf img.wlf-photo {
    box-sizing: border-box;
    object-fit: cover;
    object-position: center 40%;
    max-width: 100%;
}
.wle-page .wlf img.wlf-photo.is-round {
    display: inline-block !important;
    width: var(--wlf-photo-size, 48px) !important;
    height: var(--wlf-photo-size, 48px) !important;
    max-width: var(--wlf-photo-size, 48px) !important;
    max-height: var(--wlf-photo-size, 48px) !important;
    min-width: var(--wlf-photo-size, 48px) !important;
    min-height: var(--wlf-photo-size, 48px) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center 40% !important;
    vertical-align: middle;
}
/* Empty spacer paragraph between the author table and the journal info card: collapse the tall Word
   "after" spacing so ARTICLE HISTORY stays under the authors on page 1 instead of at the bottom / page 2. */
.wlf > p.wlf-b:empty:has(+ table.wlf-b),
.wlf > p:not([class]):empty:has(+ table.wlf-b) {
    margin-top: 0 !important;
    margin-bottom: 0.35em !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* ── WZ-AUTHOR: the template's contributor rows managed from the page (authors.js) ── */
/* The row number selects the row (Delete removes it); the selected row is tinted as Word's row selection. */
.wle-page .wlf tr[data-wlf-author]:not(.is-prompt) > td:first-child { cursor: pointer; }
.wle-page .wlf tr[data-wlf-author].is-rowsel > td { background-color: rgba(4, 134, 123, .14); }
/* The role label is a switch (Corresponding author / Author). */
.wle-page .wlf [data-ojsa="ojsa:author.role"].is-toggle { border-radius: 3px; transition: background-color .15s; }
.wle-page .wlf [data-ojsa="ojsa:author.role"].is-toggle:hover { background-color: rgba(4, 134, 123, .1); }
.wle-page .wlf [data-ojsa="ojsa:author.role"].is-toggle:focus-visible { outline: 2px solid #04867B; outline-offset: 1px; }

/* ── V7 Penilaian (reviewer) and Cek DOI referensi ───────────────────────── */
/* Under 1024 px the reviewer's comments open as a bottom sheet: the manuscript stays in view above it. */
@media (max-width: 1023px) {
    .wle-side.is-sheet { top: auto; left: 0; right: 0; width: auto; height: min(52vh, 460px); transform: translateY(105%);
        border-left: 0; border-top: 1px solid var(--wl-line); border-radius: 14px 14px 0 0; }
    .wle-side.is-sheet.is-open { transform: translateY(0); }
}
.wle-ra { align-items: flex-start; }
.wle-ra.is-focus { background: var(--wl-blue-soft); border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.wle-point .wle-cmt-body { margin-top: 4px; }

/* ── V7 Catatan editor (the author's and the partner's revision notes) ───── */
.wle-req { cursor: default; }
.wle-req.is-current { border-color: var(--wl-blue); box-shadow: 0 0 0 2px var(--wl-blue-soft); }
.wle-req-bar { height: 4px; border-radius: 999px; background: var(--wl-line); overflow: hidden; }
.wle-req-bar > i { display: block; height: 100%; background: var(--wl-green); }
.wle-req-where { display: flex; gap: 6px; align-items: flex-start; width: 100%; margin-top: 6px; padding: 6px 8px; border-radius: 8px;
    border: 1px dashed var(--wl-line); background: transparent; text-align: left; font-size: 12px; color: inherit; cursor: pointer; min-width: 0; }
.wle-req-where:hover { border-color: var(--wl-blue); }
.wle-req-where > i { color: var(--wl-blue); margin-top: 2px; }
.wle-req-where > span { min-width: 0; overflow-wrap: anywhere; }
.wle-req-where small { display: block; font-size: 10.5px; font-weight: 700; color: var(--wl-muted); text-transform: uppercase; letter-spacing: .02em; }
.wle-req-answer { margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--wl-green); background: var(--wl-blue-soft); border-radius: 6px; font-size: 12.5px; white-space: pre-line; }
.wle-req-checks { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wl-line); }
.wle-req-ok { color: var(--wl-green); }
.wle-req-no { color: var(--wl-amber); }
[data-requests-panel] .wl-sub { font-size: .75rem; }
/* V7b A3: the confirmation before the revision goes to the editor */
.wle-send-box { max-width: 540px; }
.wle-send-box .wl-sub { font-size: .75rem; }
.wle-send-box section + section { padding-top: 10px; border-top: 1px solid var(--wl-line); }
.wle-send-err { padding: 6px 8px; border-radius: 8px; background: var(--wl-red-soft); color: var(--wl-red); font-size: 12.5px; overflow-wrap: anywhere; }

/* ── V9 C2 Aktivitas: who changed which part, and when (writing_labs/_side_activity.html) ── */
[data-activity-panel] .wl-sub { font-size: .75rem; }
.wle-act-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.wle-act-sel { font-size: 11.5px; padding: 4px 6px; min-width: 0; }
.wle-act-err { color: var(--wl-red); }
.wle-act-day + .wle-act-day { margin-top: 10px; }
.wle-act-dayh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em; color: var(--wl-muted); }
.wle-act-group { padding: 6px 0; border-bottom: 1px solid var(--wl-line); }
.wle-act-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; }
.wle-act-who b { overflow-wrap: anywhere; }
.wle-act-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; flex: none; }
.wle-act-rows { list-style: none; margin: 4px 0 0; padding: 0 0 0 15px; border-left: 2px solid var(--wl-line); }
.wle-act-row { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: 12px; min-width: 0; }
.wle-act-row.is-fresh { background: var(--wl-blue-soft); border-radius: 6px; margin-left: -4px; padding-left: 4px; }
.wle-act-time { flex: none; width: 5.2em; color: var(--wl-muted); font-variant-numeric: tabular-nums; font-size: 11px; padding-top: 1px; }
.wle-act-line { margin: 0; overflow-wrap: anywhere; }
.wle-act-count { white-space: nowrap; }
.wle-act-link { background: none; border: 0; padding: 0; margin-left: 4px; color: var(--wl-blue); font: inherit; font-size: 11.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wle-act-link:hover { color: var(--wl-ink); }
.wle-act-editors { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; }
.wle-act-editors li { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 2px 0; min-width: 0; }
.wle-act-diff { --rev: var(--wl-rev-1); }
.wle-act-diff ins { color: var(--rev); background: color-mix(in srgb, var(--rev) 14%, transparent); text-decoration: none; }
.wle-act-diff del { color: var(--rev); background: color-mix(in srgb, var(--rev) 8%, transparent); text-decoration: line-through; opacity: .8; }
@media (max-width: 480px) { .wle-act-filters { grid-template-columns: 1fr 1fr; } .wle-act-filters .wle-act-sel:first-child { grid-column: 1 / -1; } }

/* ── V9 C3: presence stack, lease badge, per-section conflict bars (collab.js, _presence.html) ── */
.wle-presence { display: inline-flex; align-items: center; margin-right: 4px; }
.wle-presence-av { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--rev, var(--wl-rev-1)); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  border: 2px solid #ffffff; margin-left: -6px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06); cursor: default; }
.wle-presence-av:first-child { margin-left: 0; }
.wle-presence-av.is-typing { animation: wle-presence-pulse 1.6s ease-in-out infinite; }
@keyframes wle-presence-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgb(0 0 0 / .06); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rev, var(--wl-rev-1)) 35%, transparent); } }
.wle-presence-more { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--wl-muted); }
.wle-lease { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--rev, var(--wl-rev-1));
  padding: 1px 8px 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--rev, var(--wl-rev-1)) 12%, transparent); min-width: 0; max-width: 100%; }
.wle-lease-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--rev, var(--wl-rev-1)); flex: none; }
.wle-lease-act { background: none; border: 0; padding: 0; color: var(--wl-blue); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wle-lease-act:hover { color: var(--wl-ink); }
.wle-rich.is-leased { opacity: .72; cursor: not-allowed; }
.wle-collab-bar { display: block; }
.wle-collab-head { margin: 0 0 4px; }
.wle-collab-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wle-collab-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 4px 0; border-top: 1px solid rgb(0 0 0 / .06); min-width: 0; }
.wle-collab-what { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.wle-collab-what small { color: var(--wl-muted); }
.wle-collab-acts { display: flex; flex-wrap: wrap; gap: 4px; }

/* V9 C4: the offline chip strip (templates/writing_labs/_offline_chip.html, offline.js) and its sheets.
   The strip is one of the amber bars; the chip colour says the state; below 640 px it stacks. */
.wle-offline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 12px; font-size: .8rem; }
.wle-offline-chipwrap { position: relative; flex: 0 0 auto; max-width: 100%; }
.wle-offline-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 3px 10px; border: 1px solid var(--wl-line); border-radius: 999px; background: #fff; color: var(--wl-ink); font: 600 .75rem/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.wle-offline-chip .wle-offline-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wle-offline-chip.is-offline { border-color: #fcd34d; background: var(--wl-amber-soft); color: var(--wl-amber); }
.wle-offline-chip.is-syncing { border-color: #bfdbfe; background: var(--wl-blue-soft); color: var(--wl-blue); }
.wle-offline-chip.is-synced { border-color: #bbf7d0; background: var(--wl-green-soft); color: var(--wl-green); }
.wle-offline-chip.is-login, .wle-offline-chip.is-session, .wle-offline-chip.is-gone { border-color: #fecaca; background: var(--wl-red-soft); color: var(--wl-red); }
.wle-offline-chip.is-pending { border-color: #fcd34d; background: var(--wl-amber-soft); color: var(--wl-amber); }
.wle-offline-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--wl-ink); color: #fff; font-size: .66rem; font-weight: 700; }
.wle-offline-msg { flex: 1 1 240px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.wle-offline-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.wle-offline-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 55; min-width: 260px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--wl-line); border-radius: 12px; background: #fff; color: var(--wl-ink); box-shadow: 0 16px 36px -20px rgba(15, 23, 42, .45); display: flex; flex-direction: column; gap: 2px; }
.wle-offline-menu button, .wle-offline-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: 500 .8rem/1.3 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.wle-offline-menu button:hover, .wle-offline-opt:hover { background: var(--wl-blue-soft); }
.wle-offline-menu button:disabled { opacity: .55; cursor: not-allowed; }
.wle-offline-opt { align-items: flex-start; }
.wle-offline-opt input { margin-top: 3px; }
.wle-offline-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wle-offline-opt small, .wle-offline-note { color: var(--wl-muted); font-size: .7rem; }
.wle-offline-note { margin: 0; padding: 6px 10px; }
.wle-offsheet { max-width: 640px; }
.wle-offsheet-hint { margin: 8px 0 0; color: var(--wl-muted); font-size: .8rem; line-height: 1.5; }
.wle-offsheet-empty { margin: 14px 0 0; color: var(--wl-muted); font-size: .85rem; }
.wle-offsheet-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow: auto; }
.wle-offsheet-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--wl-line); border-radius: 12px; background: var(--wl-bg); min-width: 0; }
.wle-offsheet-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wle-offsheet-meta b { font-size: .85rem; overflow-wrap: anywhere; }
.wle-offsheet-meta small { color: var(--wl-muted); font-size: .72rem; }
.wle-offsheet-detail { color: var(--wl-red) !important; }
.wle-offsheet-preview { font-size: .78rem; line-height: 1.5; color: var(--wl-ink); overflow-wrap: anywhere; max-height: 4.5em; overflow: hidden; }
.wle-offsheet-acts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 639px) {
    .wle-offline-acts { margin-left: 0; width: 100%; }
    .wle-offline-acts .wl-btn { flex: 1 1 auto; justify-content: center; }
    .wle-offsheet-acts .wl-btn { flex: 1 1 45%; justify-content: center; }
    .wle-offsheet-list { max-height: none; }
    .wl-modal-box.wle-offsheet { max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; border-radius: 0; }
}

/* ── V12: Document Generator placeholder chips (SPEC_V12 §2.1). Editor chrome only: the export
   writes a plain run "${key}" with the surrounding formatting, never this look. The page is paper
   (white in dark mode too), so the chip keeps light colours there. ── */
.wl-ph { display: inline; padding: 0 3px; border-radius: 3px; background: #e8f0fe; color: inherit; outline: 1px solid transparent; outline-offset: 0; white-space: nowrap; cursor: default; }
.wl-ph:hover { outline: 1px dashed var(--wl-blue); }
.wl-ph[data-block] { box-shadow: inset 3px 0 0 var(--wl-blue); padding-left: 6px; }
.wl-ph.is-unknown { outline: 1px solid var(--wl-red, #dc2626); background: #fdecec; }
.wle-hf-body .wl-ph { font: inherit; }

/* ── V12 W2: the Document Generator designer's Placeholder panel (dgfields, docgen_mode.js) and the
   features this kind never shows (§5.6: their ribbon buttons get .wle-dg-off at init). ── */
.wle-dg-off { display: none !important; }
.wle-dg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wle-dg-note { margin: 0; font-size: .72rem; line-height: 1.45; color: var(--wl-muted); }
.wle-dg-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wle-dg-count { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.wle-dg-count.is-ok { background: var(--wl-green-soft); color: var(--wl-green); }
.wle-dg-count.is-miss { background: var(--wl-pink-soft); color: var(--wl-pink); }
.wle-dg-rep { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--wl-amber-soft); color: var(--wl-amber); font-size: .75rem; font-weight: 600; }
.wle-dg-group { margin-top: 6px; }
.wle-dg-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; padding: 6px 8px; border: 1px solid var(--wl-line); border-radius: 8px; background: var(--wl-card); min-width: 0; transition: box-shadow .3s; }
.wle-dg-row.is-focus { border-color: var(--wl-blue); box-shadow: 0 0 0 3px var(--wl-blue-soft); }
.wle-dg-row.is-unknown { border-color: var(--wl-red-soft); }
.wle-dg-tick { flex: 0 0 auto; width: 14px; margin-top: 3px; font-size: .75rem; color: #c3cad6; }
.wle-dg-row.is-present .wle-dg-tick { color: var(--wl-green); }
.wle-dg-row:not(.is-present) .wle-dg-tick.fa-circle-exclamation { color: var(--wl-pink); }
.wle-dg-main { flex: 1; min-width: 0; }
.wle-dg-top { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.wle-dg-top .wl-pill { font-size: 10px; padding: 0 6px; line-height: 16px; }
.wle-dg-key { font: 600 .75rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--wl-ink); overflow-wrap: anywhere; }
.wle-dg-desc { margin: 2px 0 0; font-size: .7rem; line-height: 1.4; color: var(--wl-muted); overflow-wrap: anywhere; }
.wle-dg-acts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wle-dg-acts .wl-btn { white-space: nowrap; }
.wle-dg-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wl-line); }
@media (max-width: 639px) {
    .wle-dg-row { padding: 8px; }
    .wle-dg-acts .wl-btn { min-height: 36px; }
}
/* The chip on the paper: selectors under .wle-page are on the editor's data-ui-theme-keep list,
   so in dark mode the chip keeps its light look on the white sheet (the bare .wl-ph rule is turned dark). */
.wle-page .wl-ph { background: #e8f0fe; color: inherit; }
.wle-page .wl-ph:hover { outline: 1px dashed #1d4ed8; }
.wle-page .wl-ph[data-block] { box-shadow: inset 3px 0 0 #1d4ed8; }
.wle-page .wl-ph.is-unknown { outline: 1px solid #dc2626; background: #fdecec; }

/* ── V12 W3 Pemeriksaan (dgcheck, SPEC_V12 §5.3): the install gate's rows (templates/writing_labs/_side_dg_check.html).
   The shared docgen dialogs are teleported to the body and sit above the editor's side sheet. ── */
.wle-dg-dialogs .docgen-sheet-wrap { z-index: 80; }
.wle-dgc-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wle-dgc-count { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--wl-line); background: var(--wl-card); min-width: 0; }
.wle-dgc-count b { font-size: 1.05rem; line-height: 1.2; }
.wle-dgc-count span { font-size: .66rem; line-height: 1.25; color: var(--wl-muted); overflow-wrap: anywhere; }
.wle-dgc-count.is-block { background: var(--wl-red-soft); border-color: #fecaca; }
.wle-dgc-count.is-block b { color: var(--wl-red); }
.wle-dgc-count.is-warn { background: var(--wl-amber-soft); border-color: #fde4b8; }
.wle-dgc-count.is-warn b { color: var(--wl-amber); }
.wle-dgc-count.is-ok { background: var(--wl-green-soft); border-color: #bbf7d0; }
.wle-dgc-count.is-ok b { color: var(--wl-green); }
.wle-dgc-count.is-zero { background: var(--wl-card); border-color: var(--wl-line); }
.wle-dgc-count.is-zero b { color: var(--wl-muted); }
.wle-dgc-ok { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--wl-green-soft); color: var(--wl-green); font-size: .78rem; font-weight: 600; }
.wle-dgc-rows { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wle-dgc-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid var(--wl-line); border-left-width: 3px; border-radius: 8px; background: var(--wl-card); min-width: 0; }
.wle-dgc-row > i { flex: 0 0 auto; margin-top: 2px; font-size: .8rem; }
.wle-dgc-row.is-blocking { border-left-color: var(--wl-red); }
.wle-dgc-row.is-blocking > i { color: var(--wl-red); }
.wle-dgc-row.is-warning { border-left-color: #d97706; }
.wle-dgc-row.is-warning > i { color: var(--wl-amber); }
.wle-dgc-row.is-info { border-left-color: var(--wl-blue); }
.wle-dgc-row.is-info > i { color: var(--wl-blue); }
.wle-dgc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wle-dgc-main b { font-size: .76rem; line-height: 1.3; color: var(--wl-ink); }
.wle-dgc-main small { font-size: .7rem; line-height: 1.4; color: var(--wl-muted); overflow-wrap: anywhere; }
.wle-dgc-acts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wle-dgc-acts .wl-btn { white-space: nowrap; }
.wle-dgc-link { border: 0; background: none; padding: 0; margin-left: 4px; color: var(--wl-blue); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.wle-dgc-installed { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wl-line); font-size: .72rem; color: var(--wl-muted); }
.wle-dgc-installed i { color: var(--wl-green); }
@media (max-width: 420px) {
    .wle-dgc-row { flex-wrap: wrap; }
    .wle-dgc-acts { flex-direction: row; width: 100%; justify-content: flex-end; }
}

/* ── V12 review: on a phone the page reflows to the screen (366 px at 390), but a letter's tables are
   fixed to the paper (481.9 pt DETAILS / amount / signature tables, the letterhead band): they ran off
   the sheet and the right column could not be seen. On a docgen draft (.wle-docgen, docgen_mode.js)
   they fit the page there; CSS only, the stored HTML and the file keep their widths. ── */
@media (max-width: 639px) {
    .wle-docgen .wle-rich table.wl-src-table,
    .wle-docgen .wle-page .wle-hf-body table.wl-src-table { width: 100% !important; max-width: 100%; table-layout: auto !important; }
    .wle-docgen .wle-rich table.wl-src-table td,
    .wle-docgen .wle-page .wle-hf-body table.wl-src-table td { width: auto !important; min-width: 0; }
    .wle-docgen .wle-rich table.wl-src-table .wl-ph { white-space: normal; overflow-wrap: anywhere; }
    .wle-docgen .wle-page .wle-hf-body table.wl-src-table img { max-width: none; }
}

/* WL-FIX-DESK: "Tunjukkan di halaman" of the Kata kunci panel lights up the Word page's own keywords line. */
.wle-kw-flash { outline: 2px solid var(--wl-blue); outline-offset: 2px; border-radius: 3px; }

/* ── WL-FIX-DESK: the same on a manuscript opened from a Word file (the editorial desk, a reviewer's copy, an import):
   below 640 px the editor shows the web layout (no sheets) and the page reflows to the screen, but the file's
   tables keep their paper width (an inline 481.9pt + table-layout:fixed, writing_import) and ran 300 px past the
   sheet (journal header band, author grid, abstract box). In the web layout they fit the page; print layout
   (is-sheets) keeps the paper widths. CSS only, the stored HTML and the export keep them. ── */
@media (max-width: 639px) {
    .wle-page:not(.is-sheets) .wle-rich table.wl-src-table,
    .wle-page:not(.is-sheets) .wle-hf-body table.wl-src-table { width: 100% !important; max-width: 100%; table-layout: auto !important; margin-left: 0 !important; }
    .wle-page:not(.is-sheets) .wle-rich table.wl-src-table td,
    .wle-page:not(.is-sheets) .wle-hf-body table.wl-src-table td { width: auto !important; min-width: 0; overflow-wrap: anywhere; }
    /* (the header band's logo keeps its size: with max-width 100% the auto-sized cell squeezed it to a sliver) */
    .wle-page:not(.is-sheets) .wle-hf-body table.wl-src-table img { max-width: none; }
}

/* "Rapikan sitasi" (manual_cites.js, _manual_cites.html): one dialog, before → after rows; a quiet notice bar.
   Colours come from the tokens and the pills, so ui_theme.js turns them for dark mode. */
/* What the author still has to supply ([perlu input penulis: …], [rujukan diperlukan]) — needs.js paints it with
   the Custom Highlight API: nothing is written into the text, so exports and OJS never see the mark. */
::highlight(wl-need) { background-color: #fde68a; color: #7c2d12; text-decoration: underline wavy #d97706; }
/* "Dokumen baru" wizard: the research data box (step 5). */
.wl-wiz-data { border: 1px dashed var(--wl-line); }
.wle-bar.wle-bar-quiet { background: var(--wl-blue-soft); border-bottom-color: #dbe6ff; color: var(--wl-ink); }
.wle-bar-quiet .fa-quote-right { color: var(--wl-blue); }
.wl-mc { max-width: 720px; }
.wl-mc-icon { color: var(--wl-blue); }
.wl-mc-err { color: var(--wl-red); }
.wl-mc-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-mc-sum .wl-pill { white-space: normal; }
.wl-mc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wl-line); overflow-x: auto; scrollbar-width: none; }
.wl-mc-tabs button { padding: 8px 10px; font-size: .8125rem; font-weight: 600; color: var(--wl-muted); border-bottom: 3px solid transparent; background: none; white-space: nowrap; cursor: pointer; }
.wl-mc-tabs button[aria-selected="true"] { color: var(--wl-blue); border-color: var(--wl-blue); }
.wl-mc-tabs b { font-weight: 700; margin-left: 2px; }
.wl-mc-list { max-height: min(48vh, 420px); overflow-y: auto; overflow-x: hidden; padding: 6px 0; }
.wl-mc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2px 8px; width: 100%;
    text-align: left; padding: 8px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--wl-ink); cursor: pointer; font-size: .8125rem; }
.wl-mc-row:hover, .wl-mc-row:focus-visible { background: var(--wl-blue-soft); border-color: #dbe6ff; outline: none; }
.wl-mc-where { grid-column: 1 / -1; font-size: .6875rem; color: var(--wl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-mc-before { color: var(--wl-muted); text-decoration: line-through; text-decoration-color: rgba(185, 28, 28, .45); overflow-wrap: anywhere; }
.wl-mc-arrow { color: var(--wl-muted); font-size: .7rem; }
.wl-mc-after { font-weight: 600; color: var(--wl-blue); overflow-wrap: anywhere; }
.wl-mc-why { color: var(--wl-amber); font-size: .75rem; overflow-wrap: anywhere; grid-column: 2 / -1; }
.wl-mc-row:has(.wl-mc-why) .wl-mc-before { text-decoration: none; color: var(--wl-ink); }
.wl-mc-ref { padding: 8px; border-bottom: 1px solid var(--wl-line); font-size: .8125rem; }
.wl-mc-ref:last-child { border-bottom: 0; }
.wl-mc-ref .wl-pill { white-space: normal; }
.wl-mc-raw { margin-top: 4px; color: var(--wl-muted); font-size: .75rem; overflow-wrap: anywhere; }
.wl-mc-after-ref { margin-top: 2px; overflow-wrap: anywhere; }
@media (max-width: 520px) {
    .wl-mc-row { grid-template-columns: minmax(0, 1fr); }
    .wl-mc-arrow { transform: rotate(90deg); justify-self: start; }
    .wl-mc-why { grid-column: 1 / -1; }
    .wl-mc-list { max-height: 52vh; }
}

/* WL-ROLES: the role tab (Penulis, Mitra, Editorial desk, Reviewer) carries its role's icon and the brand
   blue, so the viewer finds their own toolbar next to Berkas; the label never wraps (the strip scrolls). */
.wle-rtab.is-role { display: inline-flex; align-items: center; gap: 6px; color: var(--wl-blue); font-weight: 600; }
.wle-rtab.is-role .wle-rtab-ico { font-size: 12px; opacity: .85; }
.wle-rtab.is-role:hover { color: var(--wl-blue); }
.wle-role-empty p { max-width: 320px; white-space: normal; text-align: center; }
/* The role label wraps to two lines like every large button; set here, not inline, because the dark theme
   rewrites the word "white" inside style attributes. */
.wle-ribbon-body .wle-tb-lg .wle-role-lbl { white-space: normal; }

/* WL-GUEST: Writing Labs without an account (guest.js, _guest.html). A tool that needs an account stays
   clickable (it opens the login prompt) and carries a small lock; its title ends with the reason. */
.wle-guest .wle-tb[title*="Masuk untuk memakai fitur ini"], .wle-guest .wle-tb[title*="Sign in to use this feature"],
.wle-guest .wl-btn[title*="Masuk untuk memakai fitur ini"], .wle-guest .wl-btn[title*="Sign in to use this feature"] { position: relative; opacity: .62; }
.wle-guest .wle-tb[title*="Masuk untuk memakai fitur ini"]::after, .wle-guest .wle-tb[title*="Sign in to use this feature"]::after {
    content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 2px; right: 2px;
    font-size: 8px; line-height: 1; color: var(--wl-muted, #64748b); }
/* WL-FIX-CORE: a small button's label runs to its right edge: the lock gets its own room there ("Buka kembal"). */
.wle-guest .wle-ribbon-body .wle-tb-sm[title*="Masuk untuk memakai fitur ini"], .wle-guest .wle-ribbon-body .wle-tb-sm[title*="Sign in to use this feature"] { padding-right: 12px; }
.wle-guest-bar p { overflow-wrap: anywhere; }
.wle-guest-pill { display: none; }
@media (min-width: 1024px) { .wle-guest-pill { display: inline-flex; } }
.wle-guest-box { max-width: 440px; }
/* A phone keeps room for the manuscript title: "Daftar akun" moves from the top bar into the guest bar. */
.wle-guest-bar-reg { display: none; margin-left: 4px; white-space: nowrap; }
@media (max-width: 639px) {
    .wle-guest .wle-top-actions .wle-guest-reg { display: none !important; }
    .wle-guest-bar-reg { display: inline; }
}
@media (max-width: 480px) {
    .wle-guest .wle-top-actions { gap: 2px; }
    .wle-guest-bar { font-size: 12px; }
}

/* ── WL-TPLSEC (template_guide.js): the template's guidance shown, hidden or removed ──
   "Tampilkan petunjuk template" off (.wle-page.is-guide-off) hides all of it on every sheet, in the
   template frame and the plain view: the style guide and template key, the grey text of an empty
   section or statement, the guidance of a missing section and of the reference list, the CRediT note.
   A block removed for this manuscript (.is-guide-del) goes the same way. The text and the export are untouched. */
.wle-page.is-guide-off .wlf-guide, .wle-page.is-guide-off .wlf-guidance, .wle-page.is-guide-off .wlf-guide-note,
.wle-page.is-guide-off .wle-tpl-guide,
.wle-page .wlf-guide.is-guide-del, .wle-page .wlf-guidance.is-guide-del, .wle-page .wlf-guide-note.is-guide-del,
.wle-page .wle-tpl-guide.is-guide-del { display: none !important; }
.wle-page.is-guide-off .wle-rich[data-wlf-ph]:empty::before, .wle-page.is-guide-off .wle-rich[data-tpl-ph]:empty::before,
.wle-page .wle-rich.is-guide-del:empty::before { content: none !important; display: none !important; }
/* "Tambah bagian" with the template's sections the manuscript no longer has. */
.wle-addsec { position: relative; }
.wle-addsec > .wl-btn { justify-content: center; }
.wle-addsec-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px; padding: 4px; display: grid; gap: 1px;
  border: 1px solid var(--wl-line); border-radius: 10px; background: var(--wl-card); box-shadow: 0 10px 30px rgba(20, 30, 60, .15); }
.wle-addsec-menu > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 8px; border: 0; border-radius: 6px;
  background: none; color: var(--wl-ink); font-size: .8125rem; text-align: left; cursor: pointer; }
.wle-addsec-menu > button:hover, .wle-addsec-menu > button:focus-visible { background: var(--wl-blue-soft); color: var(--wl-blue); outline: none; }
.wle-addsec-menu > button > i:first-child { width: 14px; text-align: center; color: var(--wl-muted); }
.wle-addsec-h { padding: 4px 8px 2px; font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: var(--wl-muted); }
.wle-o-del:disabled { opacity: .4; cursor: not-allowed; }
/* WL-FIX-TRACK: tracked keywords and sections (keyword_revs, sec.rev); a refused save on every width. */
.wle-kw-rev { flex: none; padding: 0 6px; border-radius: 999px; font-size: .68rem; line-height: 18px; background: var(--wl-blue-soft); color: var(--wl-blue); }
.wle-kw-row.is-rev-del .wle-kw-rev { background: var(--wl-amber-soft); color: var(--wl-amber); }
.wle-kw-row.is-rev-del .wl-input, .wl-pill.is-rev-del > span { text-decoration: line-through; opacity: .7; }
.wle-kw-row.is-rev-ins .wl-input, .wl-pill.is-rev-ins > span { text-decoration: underline; text-underline-offset: 2px; }
.wle-sec-rev { flex: none; font-size: .68rem; }
.wle-bar.wle-bar-refused { background: var(--wl-red-soft); color: var(--wl-ink); }
.wle-bar-refused .fa-triangle-exclamation { color: var(--wl-red); }

/* ── WL-HEAD: the outline panel, as the chat's history sidebar (templates/partials/chat_history_sidebar.html) ──
   A clean list (levels indented, a thin guide line under a section), the active row highlighted,
   the word counts as chips; minimised, only the edge tab (templates/partials/edge_tab.html) shows
   and the page takes the room. Colours are the --wl-* tokens (dark mode redefines them). */
.wle-body { position: relative; }
.wle-outline { background: var(--wl-card); padding: 10px 8px 16px; scrollbar-width: thin; }
.wle-o-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 8px; padding: 0 2px 8px; border-bottom: 1px solid var(--wl-line); }
.wle-o-min { width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--wl-muted); font-size: 11px; cursor: pointer; }
.wle-o-min:hover, .wle-o-min:focus-visible { background: var(--wl-bg); border-color: var(--wl-line); color: var(--wl-ink); outline: none; }
#wle-outline-struktur .wle-o-item { min-height: 30px; padding-top: 5px; padding-bottom: 5px; border: 1px solid transparent; font-size: .8rem; color: var(--wl-ink); line-height: 1.3; transition: background .12s ease, border-color .12s ease; }
#wle-outline-struktur .wle-o-item:hover { background: var(--wl-bg); }
#wle-outline-struktur .wle-o-item.is-on { background: var(--wl-blue-soft); border-color: var(--wl-blue-soft); color: var(--wl-blue); font-weight: 600; }
#wle-outline-struktur .wle-o-item.is-l1 { font-weight: 600; color: var(--wl-ink); }
#wle-outline-struktur .wle-o-item.is-l1.is-on { color: var(--wl-blue); }
.wle-o-num { flex: none; color: var(--wl-muted); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }
.wle-o-item.is-on .wle-o-num, .wle-slist-row.is-on .wle-o-num { color: var(--wl-blue); }
#wle-outline-struktur .wle-o-chip { flex: none; margin-left: auto; padding: 1px 6px; border-radius: 999px; background: var(--wl-bg); color: var(--wl-muted); font-size: .64rem; font-weight: 600; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }
#wle-outline-struktur .wle-o-chip.is-over { background: var(--wl-red-soft); color: var(--wl-red); }
#wle-outline-struktur .wle-o-chip.is-under { background: var(--wl-amber-soft); color: var(--wl-amber); }
#wle-outline-struktur .wle-o-item.is-on .wle-o-chip { background: var(--wl-card); }
/* The subheadings and captions of a section: a guide line on the left, as nested items. */
#wle-outline-struktur .wle-slist { margin: 1px 0 3px 14px; padding-left: 2px; border-left: 1px solid var(--wl-line); gap: 0; }
#wle-outline-struktur .wle-slist:not(:has(.wle-slist-row)) { display: none; }
#wle-outline-struktur .wle-slist-main { font-size: .76rem; padding-top: 4px; padding-bottom: 4px; }
/* Numbered headings: the numbers say the level, so a subheading row starts where a section of its level does
   (2.1 Desain, the section 2.2 and 2.3 Kriteria one under the other); the guide line stays, drawn behind the rows. */
#wle-outline-struktur.is-numbered .wle-slist { margin-left: 0; padding-left: 1px; border-left: 0; background: linear-gradient(var(--wl-line), var(--wl-line)) 14px 0 / 1px 100% no-repeat; }
/* The number and its title: one gap in a section row (flex gap) as in a subheading row (the number's margin). */
.wle-o-item > .wle-o-num { margin-right: 0; }
/* The tools of the active section: one tidy row of small buttons. */
.wle-o-acts { display: flex; gap: 2px; margin: 2px 0 4px 8px; padding: 2px; width: max-content; max-width: 100%; border: 1px solid var(--wl-line); border-radius: 8px; background: var(--wl-card); }
.wle-o-acts .wle-tb { border-radius: 6px; }

/* The edge tab: a slim rounded tab with a chevron on the panel's edge (chat: .chat-sidebar-edge). */
.ui-edge-tab { position: absolute; top: 50%; z-index: 30; width: 16px; height: 44px; margin-top: -22px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--wl-line, #e3e8f0); background: var(--wl-bg, #f3f5f9); color: var(--wl-muted, #6b7a90); font-size: 10px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(20, 30, 60, .08); transition: left .25s cubic-bezier(.4, 0, .2, 1), background .12s ease, color .12s ease; }
.ui-edge-tab[data-side="left"] { left: 0; border-left: 0; border-radius: 0 10px 10px 0; }
.ui-edge-tab[data-side="right"] { right: 0; border-right: 0; border-radius: 10px 0 0 10px; }
.ui-edge-tab:hover, .ui-edge-tab:focus-visible { background: var(--wl-card, #ffffff); color: var(--wl-ink, #1f2a3d); outline: none; }
.ui-edge-tab:focus-visible { box-shadow: 0 0 0 2px var(--wl-blue-soft, #eef4ff), 0 0 0 3px var(--wl-blue, #2563eb); }
@media (min-width: 1024px) { .wle-o-edge.is-open { left: 240px; } }
/* On a phone the panel is a sheet over the page (its own button closes it): the tab shows only while it is closed,
   in the desk's gutter, so it never covers the text. */
@media (max-width: 1023px) {
  .wle-o-edge { width: 14px; height: 40px; margin-top: -20px; top: 45%; }
  .wle-o-edge.is-open { display: none; }
  .wle-body:has(.wle-o-edge) .wle-desk { padding-left: 16px; }
}
.wle.is-focus .ui-edge-tab { display: none; }
@media print { .ui-edge-tab { display: none !important; } }
/* A long title keeps its words (two lines at most); the chip goes under it when the row is too narrow. */
#wle-outline-struktur .wle-o-item { flex-wrap: wrap; row-gap: 2px; }
#wle-outline-struktur .wle-o-item > .truncate { flex: 0 1 auto; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; }