/* REM Board Room — colors taken from reachingeuropeministries.com */
:root {
  --navy: #0A192F;
  --navy-2: #0F1A30;
  --navy-3: #1B2B47;
  --gold: #C5A059;
  --gold-deep: #B8912F;
  --cream: #FDFCFB;
  --sand: #F2ECE4;
  --ink: #14213A;
  --muted: #5B6578;
  --line: #E2DACD;
  --ok: #2E7D4F;
  --warn: #A86B00;
  --bad: #B3261E;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(10, 25, 47, .06), 0 4px 16px rgba(10, 25, 47, .06);
}

* { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; } /* "clip" (not "hidden") keeps the menu and header sticky */
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; color: var(--navy); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hidden { display: none !important; }
.loading { padding: 3rem 1rem; text-align: center; color: var(--muted); }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .6em 1.2em;
  font: inherit; font-weight: 600; font-size: 1rem;
  border-radius: 10px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  background: var(--gold); color: var(--navy);
}
.btn:hover { background: var(--gold-deep); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn.secondary:hover { background: var(--sand); }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn.link { background: none; border: none; color: var(--navy); text-decoration: underline; padding: .4em; min-height: 44px; }
.btn.small { min-height: 40px; padding: .35em .9em; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

label { display: block; font-weight: 600; margin: 0 0 .3em; }
.field { margin-bottom: 1.1rem; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
input[type=text], input[type=email], input[type=search], input[type=date], input[type=url],
input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; min-height: 48px; padding: .55em .75em;
  font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 10px;
}
textarea { min-height: 7em; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(197,160,89,.25); }
.check { display: flex; gap: .6em; align-items: flex-start; font-weight: 500; margin-bottom: .6em; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--navy); flex: none; }

/* ---------- sign-in ---------- */
.signin {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  background: var(--navy);
}
.signin-hero {
  background: var(--navy) url("/img/board-banner.jpg") left center / cover no-repeat;
  aspect-ratio: 4 / 3; max-height: 55vh; width: 100%;
}
.signin-panel { padding: 2rem 1.25rem 3rem; color: var(--cream); max-width: 520px; margin: 0 auto; width: 100%; min-width: 0; }
.signin-panel h1 { color: var(--cream); font-size: 1.6rem; margin-bottom: .2em; }
.signin-panel .kicker { color: var(--gold); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; font-size: .85rem; margin-bottom: 1.5rem; }
.signin-panel .notice { border-left: 3px solid var(--gold); padding: .25em 0 .25em 1em; color: rgba(253,252,251,.85); margin: 1.5rem 0 0; }
.btn.google { background: #fff; color: #1f1f1f; width: 100%; font-size: 1.05rem; min-height: 56px; }
.btn.google:hover { background: var(--sand); }
.btn.google svg { width: 22px; height: 22px; }
.signin-error { color: #FFB4AB; margin-top: 1rem; }
@media (min-width: 900px) {
  .signin { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-content: stretch; }
  .signin-hero { aspect-ratio: auto; max-height: none; height: 100%; }
  .signin-panel { align-self: center; padding: 3rem; }
}

/* ---------- denied ---------- */
.center-card { max-width: 560px; margin: 4rem auto; padding: 2rem 1.5rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- app shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  background: var(--navy); color: var(--cream);
  padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top));
}
.brand { font-weight: 700; letter-spacing: .02em; color: var(--cream); text-decoration: none; line-height: 1.15; }
.brand span { display: block; color: var(--gold); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.topbar .spacer { flex: 1; }
.menu-btn { background: none; border: 2px solid rgba(253,252,251,.3); color: var(--cream); border-radius: 10px; min-height: 48px; min-width: 48px; font: inherit; font-weight: 600; cursor: pointer; padding: 0 .8em; }
.who { font-size: .85rem; color: rgba(253,252,251,.8); text-align: right; display: none; }

.layout { display: block; }
.sidenav {
  display: none; background: var(--navy-2); padding: .5rem;
}
.sidenav.open { display: block; }
.sidenav a {
  display: flex; align-items: center; min-height: 52px; padding: .5em 1em;
  color: var(--cream); text-decoration: none; border-radius: 10px; font-weight: 500; font-size: 1.05rem;
}
.sidenav a:hover { background: var(--navy-3); }
.sidenav a.active { background: var(--gold); color: var(--navy); font-weight: 700; }
.sidenav .signout { margin-top: .5rem; border-top: 1px solid var(--navy-3); padding-top: .5rem; }
.sidenav .signout button { width: 100%; justify-content: flex-start; color: var(--cream); border-color: rgba(253,252,251,.3); }

main { padding: 1.25rem 1rem 4rem; max-width: 1100px; margin: 0 auto; }

@media (min-width: 900px) {
  .menu-btn { display: none; }
  .who { display: block; }
  .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 64px); }
  .sidenav { display: block; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
  main { padding: 2rem; width: 100%; }
}

/* ---------- content ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.card h2 { margin-bottom: .5em; }
.grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.empty { color: var(--muted); padding: .5rem 0; }

.badge { display: inline-block; padding: .1em .6em; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--sand); color: var(--navy); white-space: nowrap; }
.badge.gold { background: var(--gold); color: var(--navy); }
.badge.navy { background: var(--navy); color: var(--cream); }
.badge.ok { background: #DDF1E4; color: var(--ok); }
.badge.bad { background: #F9DEDC; color: var(--bad); }
.badge.warn { background: #FCEFD6; color: var(--warn); }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: none; }
.row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.row .grow { flex: 1 1 240px; min-width: 0; }
.badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }

.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: .3em 1em; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font-weight: 600; background: #fff; }
.tabs a.active { background: var(--navy); color: var(--cream); border-color: var(--navy); }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { color: var(--muted); font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* ---------- dialog ---------- */
dialog { border: none; border-radius: var(--radius); padding: 0; width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); box-shadow: 0 20px 60px rgba(10,25,47,.35); }
dialog::backdrop { background: rgba(10, 25, 47, .55); }
dialog .dlg-body { padding: 1.5rem; overflow-y: auto; }
dialog .dlg-foot { padding: 1rem 1.5rem; border-top: 1px solid var(--line); background: var(--cream); }

/* ---------- idle warning & toast ---------- */
.idle-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; background: var(--navy); color: var(--cream); border: 2px solid var(--gold); border-radius: var(--radius); padding: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; box-shadow: var(--shadow); }
#toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 60; }
#toast .t { background: var(--navy); color: var(--cream); padding: .8em 1.2em; border-radius: 10px; margin-top: .5rem; box-shadow: var(--shadow); max-width: calc(100vw - 2rem); }
#toast .t.bad { background: var(--bad); }

/* email sign-in link */
.email-link { margin-top: 1.25rem; }
.email-link .or { display: flex; align-items: center; gap: .75rem; color: rgba(253,252,251,.6); font-size: .85rem; margin-bottom: .5rem; }
.email-link .or::before, .email-link .or::after { content: ""; flex: 1; border-top: 1px solid rgba(253,252,251,.2); }
.btn.link.on-navy { color: var(--cream); text-decoration-color: var(--gold); width: 100%; font-weight: 500; }
.email-link label { color: var(--cream); }
.email-link input { margin-bottom: .75rem; }
.email-link .btn[type=submit] { width: 100%; }
.email-link .sent h2 { color: var(--cream); }
.email-link .sent { border: 1px solid var(--gold); border-radius: var(--radius); padding: 1rem; }

/* ---------- documents ---------- */
.filters { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-bottom: .75rem; }
@media (min-width: 700px) { .filters { grid-template-columns: 2fr 1fr 1fr; } }
.doc-row { display: flex; gap: .85rem; align-items: flex-start; text-decoration: none; color: inherit; padding: .2rem 0; min-height: 48px; }
.doc-row:hover strong { text-decoration: underline; text-decoration-color: var(--gold); }
.doc-row .grow { display: block; flex: 1; min-width: 0; }
.doc-row strong { display: block; font-size: 1.05rem; }
.doc-icon { font-size: 1.5rem; line-height: 1.2; }
.badge.tag { background: transparent; border: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.doc-meta { margin-bottom: 1rem; }
.doc-actions { margin: 1rem 0 .5rem; }
.notice-box { background: #FCEFD6; border: 1px solid #E9C98A; border-radius: 10px; padding: .85rem 1rem; margin: 1rem 0; }
/* The PDF scrolls inside its own box, so the menu and page stay put. */
.viewer { background: var(--sand); border-radius: var(--radius); padding: .5rem; margin: .5rem 0 1.5rem; min-height: 200px;
  height: 75vh; height: 75dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); }
@media (min-width: 900px) { .viewer { height: calc(100vh - 120px); } }
.pdf-page { background: #fff; margin: 0 auto .5rem; width: 100%; box-shadow: 0 1px 4px rgba(10,25,47,.15); }
.pdf-page canvas { display: block; width: 100%; height: auto; }
.viewer-img { display: block; max-width: 100%; margin: 0 auto; }
.form-error { color: var(--bad); font-weight: 500; }
progress { width: 100%; height: 14px; margin: .5rem 0 1rem; accent-color: var(--gold); }

/* ---------- dashboard ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pre { white-space: pre-wrap; }
.announcement { background: var(--navy); color: var(--cream); border-left: 6px solid var(--gold); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.announcement h2 { color: var(--cream); font-size: 1.2rem; margin-bottom: .35em; }
.announcement p { margin-bottom: .5em; }
.announcement .muted { color: rgba(253,252,251,.65); }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.quick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 96px; padding: .85rem .5rem; font: inherit; font-weight: 600; font-size: 1rem; text-align: center; color: var(--navy); background: #fff; border: 2px solid var(--gold); border-radius: var(--radius); cursor: pointer; box-shadow: var(--shadow); }
.quick-btn:hover { background: var(--sand); }
.quick-icon { font-size: 1.8rem; line-height: 1; }

/* ---------- meetings & videos ---------- */
.card.highlight { border: 2px solid var(--gold); }
.trail { padding-left: 1.2em; margin: .25rem 0 1rem; }
ul.plain { list-style: none; padding: 0; margin: 0 0 .75rem; }
ul.plain li { padding: .3rem 0; }
fieldset.box { border: 1.5px solid var(--line); border-radius: 10px; padding: .75rem 1rem 1rem; margin: 0 0 1.1rem; }
fieldset.box legend { font-weight: 600; padding: 0 .35em; }
fieldset.vote { background: var(--cream); }
fieldset.vote > input { margin-bottom: .6rem; }
.vote-nums { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: .5rem; margin-bottom: .6rem; }
.vote-nums label { font-weight: 500; font-size: .85rem; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 1rem; margin: .4rem 0 .6rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.discussion { border-left: 6px solid var(--gold); }
ol.thread { list-style: none; padding: 0; margin: 0 0 1rem; max-height: 60vh; overflow-y: auto; }
ol.thread li { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .85rem; margin-bottom: .5rem; }
ol.thread li p { margin: .25rem 0 0; }
.post-form { margin-bottom: 1.25rem; }
.post-form textarea { margin-bottom: .4rem; }
.video-box { background: #000; border-radius: var(--radius); overflow: hidden; margin: .5rem 0 1rem; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.video-box video, .video-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-box .loading { color: var(--cream); }
details.card summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.alert-link { display: block; text-decoration: none; color: var(--navy); background: #FCEFD6; border: 2px solid var(--gold); border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1rem; }
.alert-link span { display: block; font-size: .9rem; }

/* ---------- signatures ---------- */
.sign-panel { border: 2px solid var(--gold); }
.sign-panel .consent { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: .75rem; margin-bottom: 1rem; }
.sign-btn { width: 100%; font-size: 1.1rem; min-height: 56px; }
.fingerprint code { word-break: break-all; font-size: .8rem; }
.signer-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.signer-row select { width: auto; min-width: 190px; }

/* ---------- admin overview, activity, calendar ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.tile { display: flex; flex-direction: column; gap: .2rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); min-height: 96px; }
.tile:hover { background: var(--sand); }
.tile strong { color: var(--navy); font-size: 1.05rem; margin-bottom: .2rem; }
.tile span { font-size: .88rem; color: var(--muted); }
.activity-filters { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .activity-filters { grid-template-columns: 1fr 1fr 2fr 2fr; } }
.activity-filters label { font-weight: 500; font-size: .85rem; }
tr.row-bad td { background: #FDF0EF; }
.overdue { color: var(--bad); font-weight: 600; }
.ok-box { background: #DDF1E4; border-color: #9FD3B2; }

/* ---------- test mode ---------- */
.test-banner { background: #FFD24D; color: #2B2100; text-align: center; padding: .45rem 1rem; font-size: .9rem; }
.test-banner a { color: #2B2100; font-weight: 600; }
.test-card { border: 2px dashed #E0A800; }

/* ---------- signing steps & people picker ---------- */
.step-head { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin: 1rem 0 .25rem; color: var(--navy); }
.person-row { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.person-row .check { margin: 0; }
.person-opts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .2rem 2.1rem; }
.person-opts select { width: auto; min-width: 150px; }
.sig-toggle { background: var(--sand); border: 1.5px solid var(--gold); border-radius: 10px; padding: .75rem; margin-bottom: 1rem; }

/* ---------- PDF viewer: toolbar, thumbnails, pages ---------- */
.viewer.pdf-mode { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.pdf-toolbar { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .4rem .5rem; background: var(--navy); color: var(--cream); border-radius: var(--radius) var(--radius) 0 0; }
.pdf-tool { min-height: 40px; min-width: 40px; padding: 0 .7rem; font: inherit; font-weight: 600; font-size: .95rem; color: var(--cream); background: transparent; border: 1.5px solid rgba(253,252,251,.3); border-radius: 8px; cursor: pointer; }
.pdf-tool:hover, .pdf-tool[aria-pressed="true"] { background: var(--navy-3); border-color: var(--gold); }
.pdf-pageno { font-size: .9rem; padding: 0 .4rem; white-space: nowrap; }
.pdf-zoom { font-size: .85rem; min-width: 3.2em; text-align: center; }
.pdf-spacer { flex: 1; }
.pdf-body { flex: 1; min-height: 0; display: flex; }
.pdf-thumbs { flex: none; width: 128px; overflow-y: auto; overscroll-behavior: contain; background: #3A4150; padding: .6rem .5rem; display: flex; flex-direction: column; gap: .7rem; align-items: center; }
.pdf-thumb { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .25rem; color: #E8EAEE; font: inherit; font-size: .8rem; }
.pdf-thumb-pic { display: block; width: 96px; background: #fff; outline: 3px solid transparent; outline-offset: 2px; border-radius: 2px; }
.pdf-thumb-pic canvas { display: block; width: 100%; height: auto; }
.pdf-thumb.active .pdf-thumb-pic { outline-color: var(--gold); }
.pdf-thumb:focus-visible .pdf-thumb-pic { outline-color: #fff; }
.pdf-pages { position: relative; flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: .5rem; background: var(--sand); }
.pdf-pages .pdf-page { margin: 0 auto .6rem; }
@media (max-width: 640px) { .pdf-thumbs { position: absolute; z-index: 2; height: calc(100% - 52px); top: 52px; left: 0; box-shadow: 4px 0 16px rgba(0,0,0,.25); } .viewer.pdf-mode { position: relative; } }
.pdf-page { position: relative; }
.pdf-canvas canvas { display: block; width: 100%; height: auto; }
.pdf-box { position: absolute; border: 2px dashed var(--gold); background: rgba(197,160,89,.18); border-radius: 4px; display: flex; align-items: flex-end; padding: 2px 4px; pointer-events: none; }
.pdf-box span { font: 600 11px/1.2 Inter, sans-serif; color: var(--navy); background: rgba(253,252,251,.85); padding: 1px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pdf-box.mine { border: 3px solid #E0A800; background: rgba(255,210,77,.35); }
.pdf-box.done { border-style: solid; border-color: var(--ok); background: rgba(46,125,79,.12); }
.pdf-box.flash { animation: boxflash .5s ease-in-out 3; }
@keyframes boxflash { 50% { background: rgba(255,210,77,.8); } }

/* ---------- place signatures ---------- */
dialog.place-dialog { width: min(1000px, calc(100vw - 1rem)); height: calc(100dvh - 1rem); max-height: none; display: flex; flex-direction: column; }
dialog.place-dialog:not([open]) { display: none; }
.place-head { padding: 1rem 1.25rem .5rem; border-bottom: 1px solid var(--line); }
.place-head h2 { margin-bottom: .5rem; }
.place-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.place-chip, .place-kind { min-height: 40px; padding: .3em .8em; font: inherit; font-size: .9rem; font-weight: 600; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; gap: .4em; }
.place-chip .dot { width: .8em; height: .8em; border-radius: 50%; background: var(--c); }
.place-chip.active { border-color: var(--c); box-shadow: 0 0 0 2px var(--c) inset; }
.place-kind.active { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.place-hint { font-size: .85rem; color: var(--muted); margin: 0; }
.place-pages { flex: 1; overflow: auto; background: #5A6170; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.place-page { position: relative; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: crosshair; flex: none; }
.place-pageno { position: absolute; top: -1px; right: 0; transform: translateY(-100%); color: #fff; font-size: .75rem; }
.place-box { position: absolute; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); border-radius: 4px; cursor: move; touch-action: none; display: flex; align-items: flex-end; padding: 1px 3px; }
.place-box span { font: 600 11px/1.2 Inter, sans-serif; color: var(--c); background: rgba(255,255,255,.9); padding: 0 3px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-del { position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--c); color: #fff; font-weight: 700; line-height: 1; cursor: pointer; }
.place-foot { display: flex; flex-wrap: wrap; gap: .6rem; padding: .75rem 1.25rem; border-top: 1px solid var(--line); background: var(--cream); }
.place-grip { position: absolute; right: -7px; bottom: -7px; width: 18px; height: 18px; background: var(--c); border: 2px solid #fff; border-radius: 4px; cursor: nwse-resize; touch-action: none; }
.place-grip::after { content: ""; position: absolute; inset: 3px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
.pdf-box.clickable { pointer-events: auto; cursor: pointer; }
.pdf-box.clickable:hover, .pdf-box.clickable:focus-visible { background: rgba(255,210,77,.6); outline: none; }
.pdf-box.is-date { border-style: dotted; }
.pdf-box.typed span { font: italic 700 15px/1.1 "Times New Roman", Times, serif; color: var(--navy); background: transparent; }
.place-box.is-date { border-style: dashed; }
.sign-panel.in-dialog .sign-btn { margin-bottom: .5rem; }
/* signed spots look like the printed signature (text sized to the box) */
.pdf-box.printed { container-type: size; background: transparent; border: 1px dashed rgba(46,125,79,.55); flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0; padding: 0 3px 1px; }
.pdf-box.printed span { background: transparent; padding: 0; font: italic 700 15px/1.05 "Times New Roman", Times, serif; font-size: clamp(8px, 50cqh, 24px); color: #0A192F; }
.pdf-box.printed.is-date span { font: 500 12px/1.1 Inter, Helvetica, Arial, sans-serif; font-size: clamp(8px, 55cqh, 16px); font-style: normal; }
.pdf-box.printed small { font: 500 7px/1.1 Inter, Helvetica, Arial, sans-serif; font-size: clamp(5px, 17cqh, 9px); color: #5B6578; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- signature pad ---------- */
.sigpad { margin-bottom: 1rem; }
.sigpad-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--line); margin-bottom: .6rem; }
.sigpad-tab { min-height: 44px; padding: 0 1.1rem; font: inherit; font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; }
.sigpad-tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--gold); }
.sigpad-box { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; }
.sigpad-canvas { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; }
.sigpad-line { position: absolute; left: 6%; right: 6%; bottom: 34px; border-bottom: 1.5px solid #9AA3B2; pointer-events: none; }
.sigpad-x { position: absolute; left: 3%; bottom: 36px; color: #9AA3B2; font-size: 1.1rem; pointer-events: none; }
.sigpad-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.sigpad-upload-preview[src=""], .sigpad-upload-preview:not([src]) { display: none; }
.sigpad-upload-preview { display: block; max-width: 100%; max-height: 120px; margin-top: .5rem; background: #fff; border: 1px dashed var(--line); }
.sigpad-note { margin: .25rem 0 .5rem; }
.pdf-box img.sig-preview { max-width: 100%; max-height: 75%; object-fit: contain; object-position: left bottom; display: block; }
.pdf-box.printed img.sig-preview { max-height: 72%; }
dialog .sign-panel.in-dialog { min-width: min(520px, 80vw); }
.update-bar { position: fixed; left: 50%; transform: translateX(-50%); top: .75rem; z-index: 70; display: flex; gap: .75rem; align-items: center; background: var(--navy); color: var(--cream); border: 2px solid var(--gold); border-radius: var(--radius); padding: .6rem .9rem; box-shadow: var(--shadow); max-width: calc(100vw - 2rem); }
.sigpad-others { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .25rem; }
.sigpad-others .btn.link { min-height: 36px; padding: .2em 0; font-weight: 600; }

/* compact signer list */
.signers-card { padding: .75rem 1rem; }
.signers-head { font-size: .95rem; margin: 0 0 .35rem; }
ul.signers { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
ul.signers li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .3rem 0; border-top: 1px solid var(--line); }
ul.signers li:first-child { border-top: 0; }
ul.signers .sname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.signers .state { flex: none; font-size: .8rem; font-weight: 600; color: var(--warn); }
ul.signers .state.ok { color: var(--ok); }
.doc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; margin: .5rem 0; }
.doc-line .btn.link { min-height: 32px; padding: 0; }
details.fingerprint { flex-basis: 100%; }
details.fingerprint summary { cursor: pointer; width: fit-content; }
details.fingerprint code { word-break: break-all; }

/* ---------- video recorder ---------- */
dialog.rec-dialog { width: min(760px, calc(100vw - 1rem)); }
.rec-stage { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: .75rem; }
.rec-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.rec-live { transform: scaleX(-1); } /* mirror the live preview, like a mirror */
.rec-status { position: absolute; left: .6rem; top: .6rem; color: #fff; background: rgba(0,0,0,.55); padding: .25rem .6rem; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.rec-status:empty { display: none; }
.rec-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #E53935; animation: recblink 1s infinite; vertical-align: middle; }
@keyframes recblink { 50% { opacity: .3; } }
.rec-devices { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .5rem; }
.rec-devices label { font-weight: 500; font-size: .85rem; display: flex; align-items: center; gap: .4rem; }
.rec-devices select { width: auto; max-width: 260px; min-height: 40px; }
.rec-start { background: #C62828; color: #fff; }
.rec-start:hover { background: #A61F1F; }
.watch-status { margin: -.5rem 0 1rem; color: var(--warn); font-weight: 600; }
.watch-status.done { color: var(--ok); }
ul.signers .state.none { color: var(--muted); font-weight: 500; }
.watched-card { margin-top: 1rem; }
.your-turn { background: #FFF6D6; border: 2px solid #E0A800; border-radius: var(--radius); padding: .9rem 1rem; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.consent-note { color: var(--muted); margin: .25rem 0 .75rem; }

/* ---------- access guide ---------- */
.access-table th[scope="row"] { color: var(--navy); font-weight: 600; white-space: normal; min-width: 9rem; }
.access-table td { font-size: .88rem; }
ul.access-notes { padding-left: 1.2em; margin: 0; }
ul.access-notes li { margin-bottom: .5rem; font-size: .92rem; }

/* ---------- folders inside a section ---------- */
.folder-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .75rem; }
.folder-bar:empty { display: none; }
.folder-chip { min-height: 40px; padding: .25em .85em; font: inherit; font-size: .9rem; font-weight: 600; color: var(--navy); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; }
.folder-chip:hover { background: var(--sand); }
.folder-chip.active { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.folder-chip .count { font-weight: 500; opacity: .7; }
.folder-group + .folder-group { margin-top: .75rem; }
.folder-head { font-size: 1rem; margin: .5rem 0 0; padding-bottom: .3rem; border-bottom: 2px solid var(--gold); }
.pdf-box.signed-here { border-style: solid; border-color: var(--ok); background: rgba(46,125,79,.1); flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.pdf-box.signed-here small { font: 600 9px/1.1 Inter, sans-serif; color: var(--ok); }
.multi-progress { flex-basis: 100%; margin: 0; font-weight: 600; color: var(--navy); }
.multi-progress:empty { display: none; }
.adopted { background: #fff; border: 1px dashed var(--line); border-radius: 8px; padding: .75rem; margin-bottom: .75rem; min-height: 70px; display: flex; align-items: center; }
.adopted img { max-height: 90px; max-width: 100%; }
.typed-sig { font: italic 700 1.6rem "Times New Roman", Times, serif; color: var(--navy); }
.pending-card { padding: .75rem 1rem; border-left: 5px solid var(--gold); }