/* autolike — Mode Panggung (Addendum K2). Loaded by base.html and login.html; every rule below is scoped to
 * html.is-presentation, which ui.js sets from `me.presentation_mode` (same value for admin and operator).
 *
 * THIS FILE IS A DISPLAY LAYER (K3). It may enlarge type, calm the background and hide vendor/internal
 * details — it must NEVER hide a number: success/failed/skipped counts, progress rings, bars, badges and
 * table rows stay exactly as they are with the mode off. Nothing here is allowed to hide a failure.
 * ------------------------------------------------------------------------------------------------- */

/* ---- K2.1 stage typography: every --fs-* token up one step (base 14 → 16, stat numerals +20 %) -------
   The tokens are used across components.css / fx.css / pages/*.css, so one override rescales the whole UI. */
html.is-presentation {
  --fs-12: 13px;
  --fs-13: 15px;
  --fs-14: 16px;
  --fs-16: 18px;
  --fs-20: 23px;
  --fs-28: 32px;
  --fs-40: 48px;
  --fs-48: 58px;
  --fs-56: 66px;
  --fs-display: clamp(32px, 3.1vw, 48px);
  --fs-display-lg: clamp(46px, 4.3vw, 66px);
  --lh-normal: 1.55;
}

/* Table rows +4 px so a projector row is easy to follow; the row itself is unchanged. */
html.is-presentation .table th,
html.is-presentation .table td { padding-top: 11px; padding-bottom: 11px; }
html.is-presentation .table-compact th,
html.is-presentation .table-compact td { padding-top: 8px; padding-bottom: 8px; }
html.is-presentation .table th { font-size: 12px; }
/* Badges read from the back row: a touch more tracking and weight, same text and same colour. */
html.is-presentation .badge { letter-spacing: .06em; font-weight: 650; }
html.is-presentation .chip { letter-spacing: .02em; }
/* Numbers are the point of the whole screen — never shrink them. */
html.is-presentation .stat .num,
html.is-presentation .display-num,
html.is-presentation .progress-num,
html.is-presentation .status-row .num { font-variant-numeric: tabular-nums; }
html.is-presentation .progress-num,
html.is-presentation .progress-legend { font-size: var(--fs-13); }
html.is-presentation .ring-label { letter-spacing: .04em; }
html.is-presentation .empty-title { font-size: var(--fs-20); }

/* Keep 1280×800 intact: the sidebar keeps its width, long cells wrap instead of pushing the table wider. */
@media (max-width: 1440px) {
  html.is-presentation .table .cell-truncate { max-width: 220px; }
  html.is-presentation .table td.actions .login-reason { max-width: 220px; }
}

/* ---- K2.3 internal & vendor details -----------------------------------------------------------------
   Hidden with CSS only. Every row, badge and count these sit next to stays in the DOM and on screen. */
/* Akun: proxy column (vendor host + "Tes" button) and the raw Instagram id / device profile under the name. */
html.is-presentation .col-proxy,
html.is-presentation .proxy-cell,
html.is-presentation .acct-ig-id,
html.is-presentation .device-label { display: none !important; }
/* Job detail: raw media_pk / shortcode rows (the post link itself stays). */
html.is-presentation .tech-row { display: none !important; }
/* Aktivitas: the raw `kind` tag button (job/account filters stay — they are readable names). */
html.is-presentation .log-kind { display: none !important; }
/* Clock: local time only. */
html.is-presentation .clock-utc { display: none !important; }
/* Footer: no build number on the projector. */
html.is-presentation .foot-build { display: none !important; }

/* ---- K2.4 compact failure summary -------------------------------------------------------------------
   The per-row technical message is hidden; the honest count ("N item perlu diulang") is rendered by the
   page scripts and shown here. The failed rows themselves keep their red badge and stay in the list. */
/* The summary line is built by the page scripts (they re-render on the `ui:presentation` event) so its N is
   always the live failure count; this only styles it. Failed rows keep their red badge and their place. */
.stage-retry { color: var(--warn); font-weight: 600; }
html.is-presentation .timeline-item.is-failed .ti-msg { display: none; }

/* ---- K2.5 visual calm ------------------------------------------------------------------------------- */
/* Half-strength living background so the projector stays responsive and the text keeps the contrast. */
html.is-presentation #fx-bg { opacity: .5; }
html.is-presentation .toast.is-muted { display: none !important; }

/* ---- K1 topbar chip ---------------------------------------------------------------------------------
   Amber, admin-only, visible only while the mode is on (ui.js unhides it). Click = turn the mode off. */
.presentation-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--warn); background: rgb(var(--warn-rgb) / .14); border: 1px solid rgb(var(--warn-rgb) / .5);
  box-shadow: 0 0 0 0 rgb(var(--warn-rgb) / .35);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.presentation-chip:hover { background: rgb(var(--warn-rgb) / .26); transform: translateY(-1px); }
.presentation-chip:active { transform: none; }
.presentation-chip:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
.presentation-chip[hidden] { display: none !important; }
.presentation-chip .icon { width: 14px; height: 14px; }
html.is-presentation .presentation-chip { font-size: 12px; padding: 6px 12px; animation: stage-chip-pulse 2.6s var(--ease) infinite; }
@keyframes stage-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--warn-rgb) / .34); }
  50% { box-shadow: 0 0 0 6px rgb(var(--warn-rgb) / 0); }
}
html.is-reduced .presentation-chip { animation: none; }
@media (max-width: 900px) { .presentation-chip span:not(.icon) { display: none; } .presentation-chip { padding: 5px 7px; } }