/* Terbitkan: the issuance wizard. Progress header, step 1 drop zones, the plan, the review of
   safe-sentence variants, the publish step and the result. Builds on the components in tapak.css. */

/* ---------------------------------------------------------------- progress header */

.alur-stepper .stepper-num svg { width: 14px; height: 14px; }
/* on a narrow screen only the current label shows; once every step is done, the last one does */
.alur-stepper:not(:has([aria-current])) .stepper-item:last-child .stepper-label {
  position: static; width: auto; height: auto; overflow: visible; clip: auto;
}

/* ---------------------------------------------------------------- step 1 */

.drop-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container main (min-width: 640px) {
  /* the two zones share rows, so they stay the same height even when one shows an error */
  .drop-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; row-gap: 0; }
  .drop-pair > .field { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 6px; }
}
.drop-pair .dropzone { align-content: center; min-height: 128px; font-weight: 400; }
.drop-pair [id^="err-"]:empty { display: none; }

.field-penerbit { max-width: 30rem; }

/* background profile: the print warning shows only while "Cetak" is chosen (where :has() is
   unsupported the selector is dropped and the warning always shows); it eases in when shown */
.latar .choices { max-width: 46rem; }
.latar-peringatan { max-width: 46rem; margin-top: 6px; animation: latar-masuk 180ms var(--ease-out); }
.latar:not(:has(input[value="cetak"]:checked)) .latar-peringatan { display: none; }
@keyframes latar-masuk { from { opacity: 0; transform: translateY(-4px); } }
.latar [id^="err-"]:empty { display: none; }
.param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; align-items: start; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* scoped to idle forms: the same specificity as tapak.css's `.htmx-request .idle-label` would
   otherwise win (this file loads later) and keep the idle label visible beside the busy one */
form:not(.htmx-request) .form-actions .idle-label { display: inline-flex; align-items: center; gap: 8px; }
@container main (max-width: 559px) {
  .form-actions > .btn, .publish-form, .publish-form > .btn { width: 100%; }
}

/* ---------------------------------------------------------------- step 2: plan */

.plan-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@container main (min-width: 760px) {
  .plan-body { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
}
.plan-preview { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.gate { display: flex; flex-direction: column; gap: 8px; }
.gate-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
@container main (max-width: 759px) {
  .plan-preview { flex-direction: row; align-items: flex-start; }
  .plan-preview .thumb { --thumb-w: 104px; }
  .gate { flex: 1; min-width: 0; }
  .gate-head { justify-content: flex-start; }
}
.plan-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.plan .stats { grid-template-columns: repeat(auto-fit, minmax(min(136px, 100%), 1fr)); }
/* retype-surviving bits: a strip under the four tiles (updated by the review steps) */
.plan .stat-wide { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.plan .stat-wide .stat-value { font-size: var(--fs-title); }
.plan .stat-wide .stat-note { flex: 1 1 16rem; }
.plan .stat-wide .stat-explain { flex-basis: 100%; }

.channels th[scope="row"] {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  vertical-align: middle;
}
.channels tbody tr:last-child th { border-bottom: none; }
.channels td { vertical-align: middle; }
.channels .cov-head { width: 42%; }
@container main (max-width: 559px) {
  .channels .cov-head { width: 46%; }
  .cov { gap: 8px; }
}
.ch-name { display: block; font-weight: 500; }
.ch-note { display: block; font-size: var(--fs-sm); color: var(--ink-muted); }
.ch-profil { font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
/* the print-profile warning sits in its own row under the background channel */
.channels tr.has-note > * { border-bottom: 0; }
.channels .ch-peringatan td { padding: 0 0 14px; }
.cov { display: flex; align-items: center; gap: 12px; }
.cov .bar { flex: 1 1 auto; width: auto; min-width: 40px; height: 8px; border-radius: 4px; margin: 0; }
.cov .bar::before { border-radius: 4px; }
.cov-num { min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.cov-none { font-size: var(--fs-sm); color: var(--ink-muted); }

/* scanned pages: the mode of every page, then what those pages carry (counts and a digest, never
   their words) */
.pindaian { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.mode-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: 8px;
}
/* static facts, not controls: a sunken row like the stat tiles, no border */
.mode {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-1);
  background: var(--surface-sunken);
  font-size: var(--fs-ui);
  font-variant-numeric: tabular-nums;
}
.mode .icon { flex: none; color: var(--ink-muted); }
.mode-pindaian .icon { color: var(--accent-text); }
.pindaian .notes { max-width: 72ch; }

/* ---------------------------------------------------------------- step 3: safe sentences */

.sem-form { gap: 16px; }
.sentences { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sentences > legend { padding: 0; margin-bottom: 8px; }
.sentence {
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.sentence:hover { background: var(--surface-sunken); }
.sentence:has(> input:checked) { border-color: var(--accent-line); background: color-mix(in oklch, var(--accent-soft) 35%, var(--surface)); }
.sentence:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.sentence > input:focus-visible { outline: none; }
.sentence-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sentence-page { font: 500 var(--fs-label)/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.sentence-text { max-width: 72ch; }

.held-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.held-list li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid var(--border-strong); }
.held-list .sentence-text { color: var(--ink-muted); }

.review { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.review-head h3 { font-size: var(--fs-lead); }
.review-progress { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); }
.review-progress .bar { width: 112px; }

.unit-review { border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--surface); }
.unit-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--r-2) - 1px) calc(var(--r-2) - 1px) 0 0;
  background: var(--surface-sunken);
}
.original { display: flex; flex-direction: column; gap: 4px; flex: 1 1 22rem; min-width: 0; }
.original-text { max-width: 72ch; }

.variant-list { list-style: none; margin: 0; padding: 0; }
.variant-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 14px;
  padding: 16px 18px;
  border-top: 1px solid var(--border);
}
.variant-row:first-child { border-top: 0; }
.variant-num { padding-top: 3px; font: 500 var(--fs-label)/1.4 var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.variant-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.variant-text { max-width: 72ch; }
.variant-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--fs-sm); color: var(--ink-muted); }
.judge { min-width: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.judge-label { margin-right: 6px; font: 500 var(--fs-label)/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.original .judge { margin-top: 4px; }
.original .judge-label { display: block; margin: 0; }
.variant-row.is-ditolak .variant-text { color: var(--ink-muted); }
.variant-row.is-ditolak mark.diff { background: var(--hover); text-decoration-color: var(--border-strong); }
.variant-row .segmented { align-self: start; }
.unit-review > .empty, .unit-review > details.more { margin: 0; padding: 14px 18px; }
.unit-review > .empty + details.more, .variant-list + details.more { border-top: 1px solid var(--border); }
details.dropped > summary { font-size: var(--fs-sm); }

@container main (max-width: 619px) {
  .variant-row { grid-template-columns: 16px minmax(0, 1fr); padding: 14px; }
  .variant-row .segmented { grid-column: 2; display: flex; }
  .variant-row .segmented > button { flex: 1; justify-content: center; }
  .unit-review-head { padding: 14px; }
  .unit-review-head > .btn { width: 100%; }
}

/* a master whose pages are all scans: step 3 says it does not apply, in one quiet card */
.teks-na { background: var(--surface-sunken); }
.teks-na > .lead { margin-bottom: 8px; color: var(--ink); }
/* mixed master: the text channels skip the scanned pages (a line under the card's lead) */
.teks-saja { margin: 0; }
.card > .teks-saja { margin: -14px 0 20px; }

/* ---------------------------------------------------------------- step 3b: word choice */

.lex-draft { margin-bottom: 20px; }
/* the opt-out reads as a text action: its label lines up with the content edge */
.lex > .card-head > .btn-ghost { margin: -4px -12px 0; }
.lex-optin { gap: 16px; }
.lex-zero { display: flex; flex-direction: column; gap: 12px; }
.lex-zero > details.more { border-top: 0; padding-top: 0; }

/* the point list leads; the capacity column sits on the right, in view while the issuer works
   down the list, once there is room for two columns (below that it follows the list and the
   one-line .lex-live summary stays in view instead) */
.lex-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@container main (min-width: 880px) {
  .lex-body { grid-template-columns: minmax(0, 1fr) 296px; gap: 32px; align-items: start; }
  /* sticky where the counter (about 500 px) fits below the banner; with the refusal list open
     the column can outgrow the window, so it scrolls on its own (4 px of room for focus rings) */
  @media (min-height: 640px) {
    .lex-aside {
      position: sticky;
      top: calc(var(--banner-h) + 12px);
      max-height: calc(100dvh - var(--banner-h) - 24px);
      overflow-y: auto;
      overscroll-behavior: contain;
      margin: -4px;
      padding: 4px;
    }
  }
}
.lex-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lex-main > .review-head { position: relative; }

/* keyboard shortcut past a long list: shown only while it has focus */
.lex-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.lex-skip:focus {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 6;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-1);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: var(--fs-ui);
  font-weight: 500;
}

.lex-live { display: none; }
@container main (max-width: 879px) {
  .lex-live {
    position: sticky;
    top: var(--banner-h);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-height: 44px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: var(--fs-ui);
  }
  .lex-live-n { color: var(--ink); font-variant-numeric: tabular-nums; }
  .lex-live-n b { font-weight: 600; }
  .lex-live-pending { margin-left: auto; font-variant-numeric: tabular-nums; }
}
/* focus moved to a control near the top of the window must not sit under that line (it is
   shown while the main column is under 880 px, i.e. a window under 1208 px) */
@media (max-width: 1207px) {
  html:has(.lex-live) { scroll-padding-top: calc(var(--banner-h) + 60px); }
}

.lex-rule { border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--surface); }
.lex-rule-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--r-2) - 1px) calc(var(--r-2) - 1px) 0 0;
  background: var(--surface-sunken);
}
.lex-rule-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 16rem; min-width: 0; }
.lex-rule-forms { font-size: var(--fs-body); font-weight: 600; }
.lex-rule-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.lex-points { list-style: none; margin: 0; padding: 0; }
/* the sentence takes the full row width; status and the decision sit under it */
.lex-point { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-top: 1px solid var(--border); }
.lex-point:first-child { border-top: 0; }
.lex-context { max-width: 72ch; }
.lex-point.is-ditolak .lex-context { color: var(--ink-muted); }
.lex-point.is-ditolak mark.diff { background: var(--hover); text-decoration-color: var(--border-strong); }
.lex-point-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.lex-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.lex-repeated { font-size: var(--fs-sm); color: var(--warn); max-width: 72ch; }

.lex-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lex-counter { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r-2); background: var(--surface-sunken); }
.lex-tally { display: flex; flex-direction: column; gap: 2px; }
.lex-total-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.lex-total-row .stamp { white-space: normal; }
.lex-total { color: var(--ink-muted); font-size: var(--fs-ui); }
.lex-total-n { margin-right: 2px; color: var(--ink); font-size: var(--fs-stat); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lex-sum { font-size: var(--fs-ui); font-weight: 500; font-variant-numeric: tabular-nums; }
.lex-counter .meter { margin: 4px 0 2px; }
.lex-counter .meter-legend { justify-content: flex-end; }
.lex-verdict { color: var(--ink); }
.lex-caveat { padding-top: 10px; border-top: 1px solid var(--border); }
.lex-aside > details.more { border-top: 0; padding-top: 0; }
.lex-refused { list-style: none; margin: 0 0 8px; padding: 0; }
.lex-refused li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-ui);
}
.lex-refused b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* two sample copies side by side: page, copy 1, copy 2 */
.lex-sample { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.lex-sample h3 { font-size: var(--fs-lead); }
.lex-sample > .small { color: var(--ink); }
.lex-sample-table { border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--surface); }
.lex-sample-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 24px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.lex-sample-row:first-child { border-top: 0; }
.lex-sample-cols {
  border-radius: calc(var(--r-2) - 1px) calc(var(--r-2) - 1px) 0 0;
  background: var(--surface-sunken);
  padding-block: 8px;
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lex-sample-page { padding-top: 2px; font: 400 var(--fs-sm)/1.5 var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lex-sample-line { min-width: 0; }
/* a point whose form is the same in both samples: located, not highlighted */
mark.lex-same {
  background: none;
  color: inherit;
  text-decoration: underline dotted var(--ink-faint) 1.5px;
  text-underline-offset: 4px;
}
.lex-sample-tag { display: none; }
.lex-sample-same > .lex-sample-table { margin-top: 4px; }
@container main (max-width: 699px) {
  /* one column: the page on its own line, then each copy under a plain label */
  .lex-sample-row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 12px 14px; }
  .lex-sample-page, .lex-sample-tag { font: 500 var(--fs-label)/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
  .lex-sample-page { padding: 0; }
  .lex-sample-tag { display: inline; }
  .lex-sample-line > .lex-sample-tag { display: block; margin-bottom: 2px; }
  /* the column heads stay for screen readers; sighted readers get the labels instead */
  .lex-sample-cols { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .lex-sample-cols + .lex-sample-row { border-top: 0; }
}

@container main (max-width: 619px) {
  .lex-point { padding: 14px; }
  .lex-point .segmented { display: flex; width: 100%; }
  .lex-point .segmented > button { flex: 1; justify-content: center; }
  .lex-rule-head { padding: 14px; }
  .lex-rule-actions { width: 100%; }
  .lex-rule-actions > .btn { flex: 1 1 auto; }
  .lex-counter { padding: 16px; }
}

/* ---------------------------------------------------------------- step 4: publish */

.publish-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.publish-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 24rem; min-width: 0; }
.publish-text .lead.is-blocked { color: var(--warn); }
.publish-text .lead .icon { margin-right: 8px; vertical-align: -0.15em; }
.publish-form { gap: 10px; align-items: flex-start; }
/* the busy line wraps instead of widening the form, so the button stays where it was clicked */
.publish-form .busy { max-width: 26rem; }
.publish.is-ready { border-color: var(--accent-line); }
.publish > .notice { margin-top: 20px; }

/* ---------------------------------------------------------------- result */

.issued-body { display: flex; align-items: flex-start; gap: 28px; }
.issued-main { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.issued-registry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.issued h2 { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -0.015em; }
.issued-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.issued-retype { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.issued-retype-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.issued-retype-head b { font-weight: 500; }
.issued-scan { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.issued-scan .notes { max-width: 72ch; }
.issued-main > .notice { margin-top: 8px; max-width: 65ch; }
@container main (max-width: 559px) {
  .issued-body { flex-direction: column; gap: 18px; }
  .issued .thumb { --thumb-w: 88px; }
  .issued-actions .btn { flex: 1 1 100%; }
}

/* twenty rows of one name and a download: a denser row than the default table */
.copies td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.copies .seq { width: 1%; color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-sm); }
.who { font-weight: 500; }
.who-id { margin-left: 8px; font-size: var(--fs-label); color: var(--ink-muted); white-space: nowrap; }
.copies .hash { max-width: 15ch; }
.copies .dl { width: 1%; text-align: right; white-space: nowrap; }