/* Meeting Attendance
 *
 * Konsep visual: lembar daftar hadir di atas kertas. Latar hangat (paper),
 * teks tinta hitam, dan SATU warna aksen -- biru pulpen -- yang juga warna
 * tanda tangan. Tanpa gradien, tanpa bayangan tebal; pemisah memakai garis
 * tipis. Font di-host sendiri (static/fonts) supaya tetap jalan di intranet.
 */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Font tanda tangan (style 1-4, lihat .sig-s1 dst.). font-display: block --
   lebih baik kosong sesaat daripada tanda tangan tampil sebagai huruf cetak
   biasa lalu "berubah". */
@font-face {
  font-family: "Signature";           /* 1: Mrs Saint Delafield */
  src: url("../fonts/signature.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Signature 2";         /* 2: Herr Von Muellerhoff */
  src: url("../fonts/signature-2.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Signature 3";         /* 3: La Belle Aurore */
  src: url("../fonts/signature-3.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Signature 4";         /* 4: Sacramento */
  src: url("../fonts/signature-4.woff2") format("woff2");
  font-display: block;
}

:root {
  --paper: #f4f2ec;
  --paper-deep: #ebe8df;
  --surface: #fff;
  --surface-hover: #fbfaf7;
  --ink: #1c1b18;
  --ink-2: #47453f;
  --muted: #77746b;
  --faint: #aaa69a;
  --line: #e2dfd5;
  --line-strong: #cdc9bc;

  --blue: #1e3a9a;          /* biru pulpen: aksen + warna tanda tangan */
  --blue-dark: #172d7a;
  --blue-wash: #eaedf7;
  --focus: rgba(30, 58, 154, .22);
  --green: #1b6e46;
  --green-wash: #e3f0e8;
  --red: #b0281c;
  --red-wash: #f9e9e7;
  --amber: #8a5a00;
  --amber-wash: #f8eedb;

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sig: "Signature", "Segoe Script", cursive;
  --radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(24px, 3.2vw, 30px); }
h2 { font-size: 17px; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--blue); text-underline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
svg.i {
  flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
  font-weight: 650; font-size: 16px; letter-spacing: -0.01em;
}
.brand svg { color: var(--blue); stroke-width: 2; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 14.5px;
}
.nav a:hover { color: var(--ink); background: rgba(28, 27, 24, .045); }
.nav a.is-active { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* ------------------------------------------------------------------- page */
.page { max-width: 1120px; margin: 0 auto; padding: 28px 24px 72px; }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.page-head-main { min-width: 0; flex: 1 1 420px; }
.page-head h1 { overflow-wrap: anywhere; }
.sub { margin-top: 4px; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
}
.back:hover { color: var(--ink); }
.notes {
  margin: -8px 0 22px; padding: 12px 14px; max-width: 760px;
  border-left: 2px solid var(--line-strong); color: var(--ink-2); white-space: pre-line;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 15px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 550; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--surface-hover); border-color: #bab5a6; }
.btn:active { transform: translateY(.5px); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: rgba(28, 27, 24, .05); border-color: transparent; color: var(--ink); }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-wash); border-color: #e3b9b3; }
.btn-sm { --h: 32px; padding: 0 11px; gap: 6px; font-size: 13px; }
.btn-lg { --h: 52px; font-size: 16px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: default; }
.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 7px; background: transparent; color: var(--faint); cursor: pointer;
}
.icon-btn:hover { background: var(--red-wash); color: var(--red); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--focus);
}
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--focus), inset 0 0 0 1px rgba(255,255,255,.35); }

/* ------------------------------------------------------------------ forms */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.form-card { padding: 24px; max-width: 680px; }
.form-title { margin-bottom: 18px; }
.field { display: grid; gap: 6px; margin-bottom: 18px; min-width: 0; }
.field > label, .label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.opt { font-weight: 400; color: var(--faint); margin-left: 2px; }
.hint { font-size: 13px; color: var(--muted); }
.error { font-size: 13px; color: var(--red); font-weight: 500; }
.input {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 16px; /* >= 16px: iOS tidak auto-zoom saat fokus */
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: #bab5a6; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus); }
.input-lg { height: 50px; font-size: 17px; }
textarea.input { height: auto; min-height: 104px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2377746b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
select.input:invalid { color: var(--faint); }
select.input option { color: var(--ink); }
input[type="date"].input, input[type="time"].input { font-family: var(--font); }
.has-error .input { border-color: var(--red); }
.has-error .input:focus { box-shadow: 0 0 0 3px rgba(176, 40, 28, .18); }
.grid-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0 12px; }
.form-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 550; color: var(--ink); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px;
  background: var(--line-strong); transition: background-color .15s;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s;
}
.switch input:checked + .switch-track { background: var(--blue); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--focus); }
.switch + .hint, .switch + .error { padding-left: 50px; }

/* ----------------------------------------------------------------- flashes */
.flashes { display: grid; gap: 8px; margin-bottom: 20px; }
.flash { padding: 11px 14px; border-radius: 8px; font-size: 14px; border: 1px solid; }
.flash-success { background: var(--green-wash); border-color: #bcd9c7; color: #13502f; }
.flash-danger { background: var(--red-wash); border-color: #ebc2bc; color: #7d1a11; }
.flash-info { background: var(--surface); border-color: var(--line); color: var(--ink-2); }

/* ------------------------------------------------------------ pills, misc */
.pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  background: var(--paper-deep); color: var(--muted);
  font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-open { background: var(--green-wash); color: var(--green); }
.pill-blue { background: var(--blue-wash); color: var(--blue); }
.count { font-family: var(--mono); font-size: 12px; font-weight: 450; color: var(--muted); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13.5px; }
.meta > span { display: inline-flex; align-items: center; gap: 6px; }
.meta-lg { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.meta-lg svg { color: var(--muted); }
.today { color: var(--blue); font-weight: 600; }
.empty {
  padding: 44px 24px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.empty p + p { margin-top: 4px; }
.empty .btn { margin-top: 16px; }
.empty-title { color: var(--ink); font-weight: 600; font-size: 16px; }
.note-warn {
  margin-top: 16px; padding: 10px 12px; border-radius: 8px;
  background: var(--amber-wash); color: var(--amber); font-size: 13px;
}
.note-warn a { color: inherit; font-weight: 600; }

/* ------------------------------------------------------ meetings: toolbar */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--paper-deep); }
.seg a {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 13px; border-radius: 7px;
  color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 550;
}
.seg a:hover { color: var(--ink); }
.seg a.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(28, 27, 24, .06); }
.search { position: relative; flex: 0 1 320px; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search .input { height: 40px; padding-left: 38px; font-size: 15px; }

/* --------------------------------------------------------- meetings: list */
.mlist, .rlist, .alist {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.mlist > li + li, .rlist > li + li { border-top: 1px solid var(--line); }
.mrow {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 14px 18px; color: inherit; text-decoration: none;
}
.mrow:hover { background: var(--surface-hover); }
.stamp {
  display: grid; justify-items: center; padding: 7px 0 6px; line-height: 1;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
}
.stamp-mon { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.stamp-day { margin: 4px 0 3px; font-family: var(--mono); font-size: 21px; font-weight: 450; letter-spacing: -0.02em; }
.stamp-sub { font-size: 11px; color: var(--muted); }
.stamp.is-today { background: var(--blue); border-color: var(--blue); color: #fff; }
.stamp.is-today .stamp-mon, .stamp.is-today .stamp-sub { color: rgba(255, 255, 255, .78); }
.mrow-title { font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
.mrow-body .meta { margin-top: 3px; }
.mrow-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.tally { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tally b { font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--ink); margin-right: 2px; }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.pager-at { font-size: 13px; color: var(--muted); }

/* ----------------------------------------------- simple rows (master data) */
.rrow {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 18px;
  color: inherit; text-decoration: none; min-height: 56px;
}
.rrow:hover { background: var(--surface-hover); }
.rrow > svg { color: var(--faint); }
.rrow-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.rrow-stack { display: grid; min-width: 0; }
.rrow-title { font-weight: 600; overflow-wrap: anywhere; }
.rrow-sub { font-size: 13px; color: var(--muted); }
.rrow-side { font-size: 13px; color: var(--muted); white-space: nowrap; }
.addbar { padding: 14px; margin-bottom: 16px; max-width: 680px; }
.addbar .field { margin: 0; }
.addbar-row { display: flex; gap: 8px; }
.addbar-row .input { flex: 1; min-width: 0; }
.addbar-row .btn { height: 44px; }

/* ------------------------------------------------------- meeting: detail */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.share { grid-column: 2; grid-row: 1; position: sticky; top: 84px; padding: 18px; }
.attendees { grid-column: 1; grid-row: 1; min-width: 0; }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.qr {
  max-width: 300px; margin: 0 auto; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.qr svg { display: block; width: 100%; height: auto; }
.qr { position: relative; }
.qr.is-closed svg { opacity: .12; }
.qr-closed {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px;
  padding: 24px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.linkbox { display: flex; gap: 8px; margin-top: 14px; }
.linkbox-url {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--paper);
  color: var(--ink-2); font-family: var(--mono); font-size: 12.5px;
}
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.share-actions .btn-primary { grid-column: 1 / -1; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 32px; }
.section-head h2 { display: inline-flex; align-items: baseline; gap: 8px; }
.section-head .count { font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: 13px; color: var(--ink-2);
}
.chip b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.live-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding: 9px 14px; border-radius: 8px;
  background: var(--blue-wash); color: var(--blue); font-size: 14px; font-weight: 550;
}
.live-banner a { font-weight: 650; }

.alist > li + li { border-top: 1px solid var(--line); }
.arow {
  display: grid; align-items: center; gap: 4px 14px; min-height: 66px; padding: 8px 10px 8px 16px;
  grid-template-columns: 24px minmax(0, 1.05fr) minmax(0, 1fr) 72px 30px;
  grid-template-areas: "no who sig time del";
}
.arow-no { grid-area: no; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.arow-who { grid-area: who; display: grid; min-width: 0; }
.arow-name { font-weight: 600; overflow-wrap: anywhere; }
.arow-sec { font-size: 13px; color: var(--muted); }
.arow-sig { grid-area: sig; min-width: 0; --sig-size: 38px; --sig-h: 54px; }
.arow-time { grid-area: time; font-family: var(--mono); font-size: 13px; color: var(--ink-2); text-align: right; white-space: nowrap; }
.tz { margin-left: 4px; font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--muted); }
.arow-del { grid-area: del; margin: 0; }

/* -------------------------------------------------------------- signature */
/* Ukuran diatur lewat --sig-size per tempat (daftar, cetak, pad, ...);
   --sig-scale per style menyamakan tinggi visual font yang metriknya berbeda,
   --sig-drop menaruh baseline-nya tepat di garis tanda tangan. */
.sig {
  display: block; max-width: 100%;
  font-family: var(--sig); font-weight: 400; line-height: 1.15;
  font-size: calc(var(--sig-size, 40px) * var(--sig-scale, 1));
  color: var(--blue); white-space: nowrap; letter-spacing: 0;
  padding: .12em .2em 0 .08em;
  transform: rotate(var(--tilt, -3deg)); transform-origin: 0 70%;
}
.sig-s1 { font-family: "Signature", cursive; --sig-scale: 1; --sig-drop: -.48; }
.sig-s2 { font-family: "Signature 2", cursive; --sig-scale: 1.04; --sig-drop: -.46; }
.sig-s3 { font-family: "Signature 3", cursive; --sig-scale: .66; --sig-drop: -.36; }
.sig-s4 { font-family: "Signature 4", cursive; --sig-scale: .8; --sig-drop: -.38; }

/* Tanda tangan gambar: path SVG dalam kotak 500x200. Tebal garis tetap
   (non-scaling-stroke) berapa pun ukuran tampilnya -- seperti pulpen. */
.sig-drawn {
  display: block; height: var(--sig-h, 52px); width: auto; max-width: 100%;
  aspect-ratio: 5 / 2; overflow: visible;
  fill: none; stroke: var(--blue); stroke-width: var(--pen, 1.6px);
  stroke-linecap: round; stroke-linejoin: round;
}
.sig-drawn path { vector-effect: non-scaling-stroke; }

/* ---------------------------------------------------------- danger zone */
.danger-zone { margin-top: 28px; max-width: 680px; }
.danger-zone h2 { font-size: 15px; margin-bottom: 10px; color: var(--ink-2); }
.danger-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.danger-row form { margin: 0; flex: none; }
.danger-title { font-weight: 600; margin-bottom: 2px; }

/* ------------------------------------------------------------- public */
body.public { min-height: 100vh; min-height: 100dvh; }
.pub { max-width: 480px; margin: 0 auto; padding: 32px 18px calc(36px + env(safe-area-inset-bottom)); }
.pub-org {
  margin-bottom: 22px; font-size: 11.5px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow {
  margin-bottom: 8px; font-size: 12px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue);
}
.pub-head h1 { font-size: 26px; overflow-wrap: anywhere; }
.pub-head .meta { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.pub-head .meta svg { color: var(--muted); }
.pub-card { margin-top: 24px; padding: 20px; }
.pub-state { text-align: center; padding: 32px 20px; }
.pub-state .hint { margin-top: 4px; }
.pub-foot { margin-top: 16px; font-size: 12.5px; color: var(--muted); text-align: center; text-wrap: balance; }

/* Kotak tanda tangan: garis tanda tangan dengan tanda "x" seperti di kertas. */
.sigpad {
  position: relative; height: 132px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 0 18px 30px 40px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.sigpad::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 30px;
  border-bottom: 1px solid var(--line-strong);
}
.sigpad-x { position: absolute; left: 20px; bottom: 33px; font-size: 18px; line-height: 1; color: var(--faint); }
/* margin dalam em supaya baseline tetap duduk di garis berapa pun ukuran
   font hasil fit() untuk nama panjang. */
.sigpad .sig { position: relative; z-index: 1; --sig-size: 60px; margin-bottom: calc(var(--sig-drop, -.48) * 1em); }
.sigpad .sig-drawn { position: relative; z-index: 1; height: 96px; margin-bottom: -26px; --pen: 2.2px; }

.sig-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.seg-radio { padding: 2px; border-radius: 8px; }
.seg-radio label { position: relative; display: inline-flex; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio span {
  padding: 4px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 550; color: var(--ink-2);
}
.seg-radio input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(28, 27, 24, .06); }
.seg-radio input:focus-visible + span { box-shadow: 0 0 0 3px var(--focus); }

.sig-styles-label { margin: 12px 0 6px; }
/* minmax(0, 1fr): tanpa ini nama panjang (nowrap) melebarkan kolom grid dan
   seluruh form jadi lebih lebar dari layar HP. */
.sig-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sig-option { position: relative; display: block; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sig-option input { position: absolute; opacity: 0; pointer-events: none; }
.sig-option-box {
  display: flex; align-items: center; height: 60px; padding: 0 10px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.sig-option-box .sig { --sig-size: 34px; }
.sig-option:hover .sig-option-box { border-color: var(--line-strong); }
.sig-option input:checked + .sig-option-box { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.sig-option input:focus-visible + .sig-option-box { box-shadow: 0 0 0 3px var(--focus); }

/* Pad gambar: coretan di <canvas>; touch-action none supaya jari yang
   menggambar tidak ikut menggulung halaman. */
.sigpad-draw { height: 172px; padding: 0; }
.sigpad-draw canvas {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  touch-action: none; cursor: crosshair;
}
.sigpad-draw .sigpad-placeholder { left: 40px; bottom: 40px; }
.draw-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.draw-tools .btn { flex: none; }

/* Input dengan teks di sisi kanan (mis. jam + "WIB"). */
.affix { position: relative; }
.affix .input { padding-right: 52px; font-variant-numeric: tabular-nums; }
.affix-text {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none;
}
.sigpad-placeholder {
  position: absolute; left: 40px; bottom: 40px; color: var(--faint); font-size: 14px;
  opacity: 0; transition: opacity .2s;
}
.sigpad.is-empty .sigpad-placeholder { opacity: 1; }

.done { text-align: center; padding-top: 12px; }
.done-mark, .state-mark {
  display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--green-wash); color: var(--green);
}
.done-mark svg { stroke-width: 2.25; }
.done .sub { font-size: 15px; }
.done-card { margin: 24px 0 14px; padding: 14px; text-align: left; }
.sigpad-done { border: 0; height: 128px; }
.done-facts { margin: 6px 4px 2px; display: grid; gap: 8px; }
.done-facts div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.done-facts dt { color: var(--muted); }
.done-facts dd { margin: 0; font-weight: 550; text-align: right; overflow-wrap: anywhere; }

/* Tanda tangan di halaman konfirmasi "ditulis" dari kiri ke kanan. */
.sig-write { animation: sig-write 1.1s cubic-bezier(.45, .05, .35, 1) .15s both; }
@keyframes sig-write {
  from { clip-path: inset(-20% 100% -20% 0); }
  to { clip-path: inset(-20% -10% -20% 0); }
}

.state { text-align: center; padding-top: 48px; }
.state-mark { background: var(--paper-deep); color: var(--ink-2); }
.state .sub { margin-top: 6px; }
.state .hint { margin: 14px auto 0; max-width: 360px; font-size: 14px; }
.state .btn { margin-top: 22px; }

.auth { min-height: 100dvh; display: grid; place-content: center; padding: 32px 16px; gap: 20px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 650; font-size: 18px; }
.auth-brand svg { color: var(--blue); stroke-width: 2; }
.auth-card { width: min(380px, calc(100vw - 32px)); padding: 28px 24px 24px; }
.auth-card .sub { margin-bottom: 22px; }
.auth-card .btn { margin-top: 4px; height: 44px; }
.auth-org { text-align: center; font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------------------- present */
body.present { min-height: 100vh; min-height: 100dvh; }
.present-bar { position: fixed; top: 12px; right: 12px; z-index: 5; display: flex; gap: 4px; opacity: .55; transition: opacity .2s; }
.present-bar:hover { opacity: 1; }
:fullscreen .present-bar { opacity: 0; }
:fullscreen .present-bar:hover { opacity: 1; }
.present-main {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(28px, 5vw, 96px); max-width: 1640px; min-height: 100dvh; margin: 0 auto;
  padding: clamp(28px, 5vw, 80px);
}
.present-info { min-width: 0; }
.present-info .eyebrow { font-size: clamp(12px, 1vw, 15px); margin-bottom: 14px; }
.present-info h1 { font-size: clamp(34px, 4.4vw, 72px); line-height: 1.04; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.meta-xl { margin-top: clamp(12px, 1.4vw, 22px); font-size: clamp(16px, 1.45vw, 22px); color: var(--ink-2); gap: 4px 24px; }
.present-url {
  display: inline-block; margin-top: clamp(20px, 2.4vw, 36px); padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  font-family: var(--mono); font-size: clamp(15px, 1.45vw, 22px); color: var(--ink); overflow-wrap: anywhere;
}
.present-tally { display: flex; align-items: baseline; gap: 12px; margin-top: clamp(28px, 4vw, 64px); }
.present-count { font-family: var(--mono); font-size: clamp(48px, 5.4vw, 96px); font-weight: 450; line-height: 1; letter-spacing: -0.04em; }
.present-count-label { font-size: clamp(16px, 1.4vw, 22px); color: var(--muted); }
.present-recent { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; max-width: 640px; }
.present-recent li { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.present-recent { --sig-size: clamp(26px, 2.4vw, 40px); --sig-h: clamp(38px, 3.4vw, 56px); }
.present-recent .sig { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: clip; }
.present-recent .sig-drawn { flex: none; }
.present-recent-sec { font-size: 14px; color: var(--muted); white-space: nowrap; }
.present-recent li.is-new { animation: fade-in .6s ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } }
.present-qr {
  position: relative; width: min(74vh, 44vw); padding: clamp(10px, 1.2vw, 20px);
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
}
.present-qr > svg { display: block; width: 100%; height: auto; }
.present-closed {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  border-radius: inherit; background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: clamp(20px, 2vw, 30px); font-weight: 600;
}

/* --------------------------------------------------------------- print */
body.print { background: var(--paper-deep); }
.print-toolbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.print-toolbar .hint { flex: 1; text-align: center; }
.sheet {
  width: 210mm; max-width: calc(100% - 32px); min-height: 297mm; margin: 24px auto;
  padding: 16mm 15mm; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sheet-org { font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.sheet-head h1 { font-size: 22px; letter-spacing: -0.01em; }
.sheet-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 14px 0 18px; font-size: 13px; }
.sheet-meta div { display: flex; gap: 10px; }
.sheet-meta dt { width: 64px; flex: none; color: var(--muted); }
.sheet-meta dd { margin: 0; font-weight: 550; }
.sheet-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.sheet-table th {
  padding: 7px 8px; text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.sheet-table td { padding: 0 8px; height: 13mm; border-bottom: 1px solid #d9d6cc; vertical-align: middle; overflow-wrap: anywhere; }
.sheet-table tr { break-inside: avoid; }
.sheet-table .c-no { width: 10mm; font-family: var(--mono); color: var(--muted); }
.sheet-table .c-time { width: 22mm; font-family: var(--mono); white-space: nowrap; }
.sheet-table .c-sig { width: 62mm; }
.sheet-table .c-sig { --sig-size: 30px; --sig-h: 11.5mm; --pen: 1.4px; }
.sheet-table .sig { padding-top: 4px; }
.sheet-empty { text-align: center; color: var(--muted); }
.sheet-foot { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; color: var(--muted); }

@page { size: A4; margin: 12mm; }
@media print {
  body.print { background: #fff; }
  .print-toolbar { display: none; }
  .sheet { width: auto; max-width: none; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  .sig, .sig-drawn { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 899px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .share, .attendees { grid-column: 1; grid-row: auto; }
  .share { position: static; }
  .present-main { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .present-qr { order: -1; width: min(100%, 62vh); margin: 24px auto 0; }
}

@media (max-width: 719px) {
  body.app { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .topbar-inner { height: 52px; padding: 0 16px; }
  /* Di HP navigasi pindah ke tab bar bawah -- terjangkau jempol. */
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; gap: 0;
    justify-content: space-around; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .nav a { flex: 1; flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 11px; font-weight: 550; }
  .nav a:hover { background: none; }
  .nav a.is-active { background: none; box-shadow: none; color: var(--blue); }
  .page { padding: 20px 16px 32px; }
  .page-head { align-items: stretch; margin-bottom: 18px; }
  .page-head > .btn, .page-head > form { align-self: flex-start; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .seg a { flex: 1; }
  .search { flex: none; }
  .form-card { padding: 18px 16px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-3 > :first-child { grid-column: 1 / -1; }
  .danger-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 599px) {
  .mrow { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 14px; padding: 14px; align-items: start; }
  .mrow-side { grid-column: 2; flex-direction: row; align-items: center; gap: 10px; }
  .stamp-day { font-size: 19px; }
  .arow {
    grid-template-columns: 20px minmax(0, 1fr) auto 30px;
    grid-template-areas: "no who time del" ". sig sig .";
    padding: 12px 6px 6px 12px;
  }
  .arow-no { align-self: start; padding-top: 3px; }
  .arow-time { align-self: start; padding-top: 2px; }
  .arow-del { align-self: start; }
  .arow-sig { --sig-size: 34px; --sig-h: 48px; }
  .pub { padding-top: 24px; }
  .pub-head h1 { font-size: 24px; }
  .pub-card { padding: 18px 16px; }
  .print-toolbar .hint { display: none; }
  .sheet { padding: 20px 16px; min-height: 0; }
  .sheet-meta { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}