:root {
  --bg: #f6f5f1; --card: #fff; --ink: #2b2b30; --muted: #75757d; --line: #e6e3da;
  --gold: #c3ba93; --gold-ink: #8c7c48; --gold-soft: #f4f0e2;
  --steel: #949399; --charcoal: #3d3d44;
  --ok: #2f7d55; --warn: #a06d12; --danger: #b3261e;
  --radius: 10px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Assistant", "Segoe UI", Arial, sans-serif; font-size: 16px; }
a { color: var(--gold-ink); }
h1, h2, h3 { font-family: "Suez One", "Frank Ruhl Libre", "Assistant", serif; font-weight: 400; }

/* header */
.topbar { background: #fff; border-bottom: 3px solid var(--gold); padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { height: 44px; }
.brand .en { font-family: "Cormorant Garamond", serif; letter-spacing: 3px; color: var(--gold-ink);
  font-size: 15px; line-height: 1.1; direction: ltr; }
.brand .he { font-size: 13px; color: var(--muted); }
.topbar nav { display: flex; gap: 16px; }
.topbar nav a { color: var(--charcoal); text-decoration: none; font-size: 14px; }
.topbar nav a:hover { color: var(--gold-ink); }
.topbar-quick { display: none; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 22px;
  line-height: 1; padding: 6px 11px; cursor: pointer; color: var(--charcoal); }
/* narrow screens (a phone): the options fold into a menu that opens from ☰ */
@media (max-width: 1100px) {
  .topbar.has-menu { flex-wrap: wrap; }
  .has-menu .nav-toggle { display: block; }
  .has-menu .topbar-quick { display: flex; }
  .has-menu .topbar-quick .nav-new { padding: 7px 14px; font-size: 15px; text-decoration: none; }
  .has-menu nav .nav-new { display: none; }  /* "+ task" sits by the menu button, always at hand */
  .has-menu nav { display: none; width: 100%; flex-direction: column; gap: 0; padding-top: 6px; }
  .has-menu.nav-open nav { display: flex; }
  .has-menu nav > a, .has-menu nav > span { padding: 11px 4px; border-top: 1px solid var(--line); font-size: 16px; }
}
.hero-logo { display: block; margin: 28px auto 6px; width: 230px; max-width: 70%; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 22px 16px 120px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(40,35,20,.04); }
.card h2 { margin: 0 0 14px; font-size: 20px; }
.card h3 { margin: 0 0 10px; font-size: 16px; }
label { display: block; font-size: 14px; color: var(--muted); margin: 0 0 5px; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=file], input[inputmode] {
  width: 100%; padding: 10px 12px; border: 1px solid #d9d5c8; border-radius: 7px;
  font: inherit; background: #fff; color: var(--ink); }
input:focus { outline: 2px solid var(--gold-soft); border-color: var(--gold); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 7px;
  padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--charcoal); color: #fff; }
.btn:hover { background: #2a2a30; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.gold { background: var(--gold); color: #2b2b30; }
.btn.gold:hover { background: #b5ab80; }
.btn.secondary { background: var(--gold-soft); color: var(--charcoal); }
.btn.secondary:hover { background: #ebe4cc; }
.btn.green { background: #25a35a; }
.btn.danger { background: transparent; color: var(--danger); padding: 6px 8px; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.link { background: none; color: var(--gold-ink); padding: 4px 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); font-size: 14px; }
.error { color: var(--danger); font-size: 14px; min-height: 20px; }
.check { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); font-size: 15px; margin: 0; }
.check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--charcoal); }
.consent-check { margin-top: 12px; font-size: 13.5px; line-height: 1.45; }
.consent-check input { flex-shrink: 0; }

/* integrations status */
.status-line { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; background: #ccc; }
.dot.on { background: var(--ok); }

/* signer rows in upload form */
.signer-row { border: 1px solid var(--line); border-inline-start: 4px solid var(--c, var(--gold));
  border-radius: 8px; padding: 14px; margin-bottom: 12px; background: #fdfcf9; }
.signer-row .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.signer-row .opts { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }

/* document list */
.doc { border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; margin-bottom: 12px; }
.doc .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc .title { font-weight: 700; font-size: 16px; }
.signer-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0 0;
  margin-top: 8px; border-top: 1px dashed var(--line); font-size: 14px; }
.signer-line .who { min-width: 140px; font-weight: 600; }
.signer-line .who::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c); margin-inline-end: 7px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge.draft { background: #eee; color: #555; }
.badge.sent, .badge.pending { background: #fcf2dc; color: var(--warn); }
.badge.viewed, .badge.partial { background: #eef0f6; color: #4a5378; }
.badge.signed, .badge.completed { background: #e1f2e8; color: var(--ok); }
.badge.finalizing { background: #eef0f6; color: #4a5378; }
.badge.awaiting_attest { background: var(--gold-soft); color: var(--gold-ink); }
.empty { text-align: center; color: var(--muted); padding: 30px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: right; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }

/* PDF viewer */
.pdf-pages { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.pdf-page { position: relative; box-shadow: 0 2px 12px rgba(40,35,20,.12); background: #fff; max-width: 100%; }
.pdf-page canvas { display: block; width: 100%; height: auto; }
.pdf-page .pnum { position: absolute; top: 6px; left: 8px; font-size: 11px; color: #999; }
.place-box { position: absolute; border: 2px dashed var(--c, var(--charcoal)); border-radius: 6px;
  background: color-mix(in srgb, var(--c, #3d3d44) 14%, transparent);
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1;
  color: var(--c, var(--charcoal)); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px; }
.place-box.target { --c: #b08a1e; border-color: #d4a72c; background: rgba(240,200,80,.22); color: #7a5d0c;
  animation: pulse 1.6s infinite; }
.place-box.other { cursor: default; opacity: .6; border-style: dotted; }
.place-box.filled { border: 0; background: transparent; animation: none; }
.place-box img { max-width: 100%; max-height: 100%; }
@keyframes pulse { 50% { background: rgba(240,200,80,.4); } }
.clickable .pdf-page { cursor: crosshair; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { border: 2px solid var(--c); color: var(--ink); background: #fff; border-radius: 99px; padding: 6px 14px;
  font: inherit; font-size: 14px; cursor: pointer; }
.tab.active { background: var(--c); color: #fff; }
.tab small { opacity: .8; }

/* signature pad */
.pad-wrap { position: relative; border: 2px dashed #cfc8b0; border-radius: 10px; background: #fffef9; touch-action: none; }
.pad-wrap canvas { display: block; width: 100%; height: 190px; border-radius: 10px; }
.pad-wrap .hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #b8b19a; pointer-events: none; font-size: 18px; }
.pad-line { position: absolute; left: 24px; right: 24px; bottom: 40px; border-bottom: 1px solid #ddd6c0; pointer-events: none; }

.sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line);
  padding: 12px 16px; display: flex; justify-content: center; align-items: center; gap: 12px; z-index: 10;
  box-shadow: 0 -4px 12px rgba(40,35,20,.06); flex-wrap: wrap; }
.linkbox { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.linkbox input { flex: 1; min-width: 200px; direction: ltr; text-align: left; font-family: monospace; font-size: 12px; }
.center-msg { max-width: 520px; margin: 30px auto; text-align: center; }
.center-msg .icon { font-size: 50px; }
.otp-input { font-size: 28px !important; letter-spacing: 10px; text-align: center; direction: ltr; max-width: 240px; margin: 0 auto; display: block; }
.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 20px; }

@media (max-width: 640px) {
  .brand .en, .brand .he { display: none; }
  .signer-line .who { min-width: 0; width: 100%; }
}

/* field placement toolbar */
.place-tools { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.tool-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.tool { border: 1px solid #d9d5c8; background: #fff; color: var(--ink); border-radius: 7px; padding: 7px 12px;
  font: inherit; font-size: 14px; cursor: pointer; }
.tool.active { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.clickable .pdf-page { user-select: none; -webkit-user-select: none; }
.place-box.kind-text, .place-box.kind-date { font-size: 10px; font-weight: 600; border-width: 1.5px; justify-content: flex-start; padding: 0 4px; overflow: hidden; white-space: nowrap; }
.place-box.kind-checkbox { font-size: 10px; border-width: 1.5px; padding: 0; border-radius: 3px; }

/* signer side: fillable fields */
.place-box.fill { --c: #b08a1e; border: 1.5px dashed #d4a72c; background: rgba(240,200,80,.16); color: #7a5d0c;
  font-size: 11px; font-weight: 600; justify-content: flex-start; padding: 0 4px; overflow: hidden; white-space: nowrap; }
.place-box.fill.has-value { border-style: solid; background: rgba(240,200,80,.08); color: #0f2973; font-weight: 400; }
.place-box.fill.kind-checkbox { justify-content: center; padding: 0; font-size: 12px; }
.place-box.fill.kind-date { color: #0f2973; font-weight: 400; }
.fields-list { display: grid; gap: 12px; margin-bottom: 18px; }
.fields-list .req { color: var(--danger); }
.field-hl { outline: 3px solid #d4a72c !important; }
.cc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 20px; }
.cc-list .muted { font-size: 12px; }
.video-card { border-top: 3px solid var(--gold); }
.video-status { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: #fcf2dc; color: var(--warn); font-weight: 600; }
.video-status.open { background: #e1f2e8; color: var(--ok); }
.place-box.office-val { border: 0; background: transparent; color: #0f2973; font-weight: 400; font-size: 11px;
  justify-content: flex-start; padding: 0 3px; cursor: default; white-space: nowrap; overflow: hidden; }
.place-box.office-val.kind-checkbox { justify-content: center; }

/* office photo behind every page (fixed layer, so it also works on iPhone where background-attachment: fixed doesn't) */
html { background: #2a2622; }
body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,18,16,.30), rgba(20,18,16,.55)), var(--bg-photo, url("bg-boardroom.jpg")) center 45% / cover no-repeat; }
body[data-tod="day"]::before { background-image: linear-gradient(180deg, rgba(20,18,16,.15), rgba(20,18,16,.40)), var(--bg-photo, url("bg-boardroom.jpg")); }
body.bg-building::before { background-image: linear-gradient(180deg, rgba(15,18,28,.25), rgba(15,18,28,.55)), var(--bg-photo, url("bg-building.jpg")); background-position: center 60%; }
body.bg-reception::before { background-image: linear-gradient(180deg, rgba(20,18,16,.30), rgba(20,18,16,.58)), var(--bg-photo, url("bg-reception.jpg")); background-position: center 40%; }
body.bg-building[data-tod="day"]::before { background-image: linear-gradient(180deg, rgba(15,18,28,.12), rgba(15,18,28,.42)), var(--bg-photo); }
body.bg-reception[data-tod="day"]::before { background-image: linear-gradient(180deg, rgba(20,18,16,.15), rgba(20,18,16,.45)), var(--bg-photo); }

/* see-through panels: the photo shows behind every box */
.card, .tile, .list-item, .t-group, details.response {
  background: rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.tile:hover, .card:hover { background: rgba(255,255,255,.74) !important; }
.footer, .wrap > .muted, .pdf-pages > .muted { color: #efe9da; }
.hero-logo { filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); background: rgba(255,255,255,.92); padding: 14px 18px; border-radius: 12px; }

/* home tiles */
.home-head { text-align: center; color: #fff; margin: 34px 0 26px; }
.home-head h1 { font-size: 30px; margin: 0 0 6px; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.home-head p { margin: 0; color: #e8e1cf; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; max-width: 1040px; margin: 0 auto; }
.tile { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink);
  background: rgba(255,255,255,.94); border-radius: 14px; padding: 24px 22px; min-height: 210px;
  border-top: 4px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.32); }
.tile .ico { font-size: 34px; }
.tile h2 { margin: 0; font-size: 20px; }
.tile p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; flex: 1; }
.tile .meta { font-size: 13px; color: var(--gold-ink); font-weight: 600; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 16px; color: #fff; }
.page-head h1 { margin: 0; font-size: 24px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.page-head a { color: #f1e7c8; }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; margin-bottom: 10px; background: #fff; }
.list-item .title { font-weight: 700; }
/* office-filled fields in the editor: type straight onto the document */
.place-box.office-edit { border: 1.5px solid #6b6b72; background: rgba(255,255,255,.85); padding: 0; overflow: visible; cursor: text; }
.place-box.office-edit.kind-checkbox { cursor: pointer; color: #0f2973; font-size: 12px; justify-content: center; }
.place-box.office-edit input { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 3px;
  font: inherit; color: #0f2973; text-align: right; outline: none; }
.place-box .box-del { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border-radius: 50%;
  border: 0; background: #6b6b72; color: #fff; font-size: 12px; line-height: 18px; padding: 0; cursor: pointer; }
.tool:disabled { opacity: .35; cursor: not-allowed; }

/* questionnaire builder */
.textarea, textarea.textarea { width: 100%; padding: 10px 12px; border: 1px solid #d9d5c8; border-radius: 7px; font: inherit; }
select { padding: 9px 10px; border: 1px solid #d9d5c8; border-radius: 7px; font: inherit; background: #fff; }
.field-row { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 10px; background: #fdfcf9; }
.field-row.is-heading { background: var(--gold-soft); }
.field-row.is-heading .f-label { font-weight: 700; }
.field-main { flex: 1; }
.field-move { display: flex; flex-direction: column; gap: 2px; }
.field-move .mv { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; padding: 2px 4px; }
.q-list { display: grid; gap: 16px; margin: 6px 0 18px; }
.q-heading { margin: 10px 0 -4px; color: var(--gold-ink); font-size: 17px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.req { color: var(--danger); }
details.response { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 10px; background: #fff; }
details.response summary { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; cursor: pointer; list-style: none; }
details.response summary .title { font-weight: 700; }
details.response table { margin: 0 14px 12px; width: calc(100% - 28px); }
.hp { position: absolute !important; width: 1px !important; height: 1px !important; inset-inline-start: 0; padding: 0 !important; border: 0 !important; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
input[type=date] { padding: 9px 10px; border: 1px solid #d9d5c8; border-radius: 7px; font: inherit; }

/* meeting planner week view */
.cal-legend { display: flex; gap: 18px; font-size: 13px; color: var(--muted); margin: 12px 0 8px; }
.cal-legend .lg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-inline-end: 5px; }
.lg.free, .cal-c.free { background: #d6f0fb; }
.lg.busy, .cal-c.busy { background: repeating-linear-gradient(45deg, #d9d6cf, #d9d6cf 4px, #e8e5de 4px, #e8e5de 8px); }
.lg.chosen, .cal-c.chosen { background: var(--gold); }
.cal-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.cal { display: grid; grid-template-columns: 52px repeat(7, minmax(78px, 1fr)); min-width: 620px; user-select: none; }
.cal-h { position: sticky; top: 0; background: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 6px 2px;
  border-bottom: 1px solid var(--line); z-index: 1; }
.cal-h.weekend { color: var(--muted); }
.cal-t { font-size: 11px; color: var(--muted); text-align: center; border-top: 1px solid #f0ede5; padding-top: 1px; }
.cal-c { height: 20px; border-top: 1px solid #fff; border-inline-start: 1px solid #fff; cursor: pointer; }
.cal-c.unknown { background: #f6f5f1; }
.cal-c.past { background: #efeee9; cursor: not-allowed; }
.cal-c.weekend:not(.chosen) { opacity: .65; }
.cal-c.free:hover, .cal-c.unknown:hover { background: #a9dcf2; }
.cal-c.busy:hover { outline: 2px solid #c9a23a; outline-offset: -2px; }
.opt-list { display: grid; gap: 8px; }
.opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line);
  border-inline-start: 4px solid var(--gold); border-radius: 8px; padding: 8px 12px; background: #fdfcf9; }
.opt.warn { border-inline-start-color: #c9772a; }

/* meeting voting page */
.vote-opt { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; background: #fff; font-size: 16px; }
.vote-opt:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.vote-opt input { width: 20px; height: 20px; accent-color: var(--charcoal); }
.vote-opt.past { opacity: .45; pointer-events: none; }
.vote-opt.taken { background: #ecebe8; color: #8a8a8a; border-color: #dcdad5; pointer-events: none; }
.vote-opt span { display: flex; flex-direction: column; }
.taken-note { font-size: 12px; color: #8a8a8a; margin-top: 2px; }
.vote-opt.none-opt { border-style: dashed; }
.timer { display: inline-block; background: #fcf2dc; color: var(--warn); border-radius: 8px; padding: 6px 12px; font-weight: 700; }
.meta-line { color: var(--muted); margin: 4px 0; }
.lawyer-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.lawyer-opt { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; background: #fff; color: var(--ink); font-size: 15px; margin: 0; }
.lawyer-opt:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.lawyer-opt img { height: 54px; max-width: 90px; object-fit: contain; }
.lawyer-opt input { accent-color: var(--charcoal); }
.steps { line-height: 1.9; padding-inline-start: 22px; }
.steps li { margin-bottom: 6px; }
.code-box { position: relative; margin: 8px 0; }
.code-box pre { background: #1f1d1a; color: #e9e3d0; border-radius: 8px; padding: 14px; font-size: 12px; max-height: 240px;
  overflow: auto; text-align: left; white-space: pre; }
.code-box button { margin-bottom: 6px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip { border: 1px solid #d9d5c8; background: #fff; border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--gold); background: var(--gold-soft); }
.preset-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 2px; }
.chip.on { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.chip.contact { border-style: dashed; }
.room-opt { margin-top: 10px; background: var(--gold-soft); border-radius: 8px; padding: 8px 10px; }
/* dashed preview of the field that a click / drag will create */
.place-ghost { position: absolute; pointer-events: none; border: 2px dashed var(--c, #3d3d44); border-radius: 5px;
  background: color-mix(in srgb, var(--c, #3d3d44) 8%, transparent); color: var(--c, #3d3d44);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; opacity: .85; z-index: 2; }
.place-ghost.dragging { background: color-mix(in srgb, var(--c, #3d3d44) 16%, transparent); opacity: 1; }

/* ================= task system (monday-style) ================= */
.wrap.wide { max-width: 1400px; }
.t-board-head { padding: 16px 20px; }
.t-board-name { margin: 2px 0; font-size: 26px; outline: none; border-radius: 6px; padding: 0 4px; }
.t-board-desc { outline: none; border-radius: 6px; padding: 0 4px; min-height: 18px; }
.t-board-desc:empty::before { content: attr(data-ph); color: #b8b4a8; }
.t-board-name:hover, .t-board-desc:hover, .t-group-name:hover, .t-name:hover { background: #f4f2ec; }
.t-toolbar { margin-top: 12px; gap: 10px; }
.t-views { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.t-view { border: 0; background: #fff; padding: 7px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--muted); }
.t-view.active { background: var(--gold-soft); color: var(--ink); font-weight: 700; }

.t-group { background: #fff; border-radius: 10px; margin-bottom: 16px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.t-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.t-group-name { color: var(--g); font-weight: 700; font-size: 17px; outline: none; border-radius: 5px; padding: 0 4px; }
.t-caret { border: 0; background: none; color: var(--g); cursor: pointer; font-size: 12px; }
.t-count { font-size: 13px; }
.t-more { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 5px; }
.t-more:hover { background: #f0eee8; }

.t-table { border: 1px solid #e8e5dc; border-radius: 6px; overflow-x: auto; }
.t-row { display: grid; grid-template-columns: minmax(220px, 1fr) 120px 140px 120px 110px 70px 40px; align-items: stretch;
  border-bottom: 1px solid #ece9e1; border-inline-start: 6px solid var(--g, #ccc); min-width: 840px; background: #fff; }
.t-mywork .t-row { grid-template-columns: 42px minmax(220px, 1fr) 200px 140px 120px 110px 70px; }
.t-row > div { display: flex; align-items: center; justify-content: center; border-inline-start: 1px solid #ece9e1; min-height: 38px; }
.t-row > div:first-child { justify-content: flex-start; padding: 0 8px; border-inline-start: 0; }
.t-mywork .t-row > div:nth-child(2) { justify-content: flex-start; padding: 0 8px; }
.t-row:hover { background: #fafaf7; }
.t-hrow { background: #faf9f6; font-size: 13px; color: var(--muted); font-weight: 600; }
.t-hrow > div { min-height: 32px; }
.t-addrow { border-bottom: 0; }
.t-add-input { border: 0 !important; background: transparent !important; padding: 8px 4px !important; }
.t-name { outline: none; border-radius: 5px; padding: 4px 6px; width: 100%; font-size: 15px; }
.t-name:focus { background: #fff; box-shadow: 0 0 0 2px #579bfc inset; }

.t-pill { border: 0; color: #fff; font: inherit; font-size: 13px; font-weight: 600; width: 100%; height: 100%; min-height: 38px;
  cursor: pointer; padding: 0 8px; transition: filter .1s; }
.t-pill:hover { filter: brightness(1.06); }
.t-pill-sm { font-size: 12px; }
.t-pop .t-pill { min-height: 32px; border-radius: 4px; margin: 3px 0; width: 150px; display: block; }

.t-people { border: 0; background: none; cursor: pointer; display: flex; justify-content: center; padding: 0; }
.t-avatar { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; border: 2px solid #fff; margin-inline-start: -6px; }
.t-avatar:first-child { margin-inline-start: 0; }
.t-avatar.sm { width: 22px; height: 22px; font-size: 9px; margin: 0; }
.t-avatar.t-avatar-add { background: #e8e5dc; color: #8a8a90; font-size: 15px; }
.t-person-opt { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--ink); font-size: 14px; margin: 0; white-space: nowrap; }
.t-person-opt:hover { background: #f4f2ec; }

.t-date { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; margin: 0; color: var(--ink); }
.t-date input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.t-date.overdue span { color: #e2445c; font-weight: 700; }
.t-date.overdue span::before { content: "⚠ "; }
.t-date.today span { color: #00a35c; font-weight: 700; }

.t-open { border: 0; background: none; cursor: pointer; font-size: 16px; position: relative; opacity: .55; }
.t-open:hover { opacity: 1; }
.t-badge { position: absolute; top: -4px; left: -8px; background: #579bfc; color: #fff; border-radius: 99px; font-size: 10px; padding: 0 5px; }
.t-done-check { width: 18px; height: 18px; accent-color: #00c875; cursor: pointer; }
.t-boardlink { color: var(--ink); font-size: 13px; text-decoration: none; padding: 0 8px; }
.t-boardlink:hover { text-decoration: underline; }

.t-pop { position: absolute; z-index: 50; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.t-pop-list { min-width: 200px; }
.t-menu-item { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; text-align: right; padding: 7px 8px;
  border-radius: 6px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.t-menu-item:hover { background: #f4f2ec; }
.t-menu-item.danger { color: var(--danger); }
.t-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.t-colors { display: grid; grid-template-columns: repeat(4, 26px); gap: 6px; padding: 4px; margin-bottom: 6px; }
.t-colors button { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; }

/* kanban */
.t-kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.t-col { background: rgba(255,255,255,.92); border-radius: 10px; min-height: 200px; display: flex; flex-direction: column; }
.t-col.over { outline: 3px dashed #579bfc; }
.t-col-head { color: #fff; font-weight: 700; padding: 10px 12px; border-radius: 10px 10px 0 0; display: flex; justify-content: space-between; }
.t-col-body { padding: 10px; display: grid; gap: 8px; align-content: start; flex: 1; }
.t-card { background: #fff; border-radius: 8px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); cursor: grab;
  border-inline-start: 4px solid var(--g, #ccc); }
.t-card.dragging { opacity: .4; }
.t-card-name { font-weight: 600; margin-bottom: 8px; }
.t-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.t-card-date { background: #f0eee8; border-radius: 4px; padding: 1px 6px; }
.t-card-date.overdue { background: #fde3e7; color: #c2223f; font-weight: 700; }

/* side panel */
.t-panel { position: fixed; top: 0; bottom: 0; left: 0; width: min(520px, 100vw); background: #fff; z-index: 40;
  box-shadow: 4px 0 30px rgba(0,0,0,.2); padding: 18px 22px; overflow-y: auto; }
.t-panel-head { display: flex; gap: 12px; align-items: flex-start; flex-direction: row-reverse; justify-content: space-between; }
.t-panel-title { margin: 2px 0 0; font-size: 20px; }
.t-panel-name { font-size: 20px; font-weight: 700; }
.t-panel-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.t-cellpair { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.t-cellpair > .muted { font-size: 12px; padding: 4px 8px; background: #faf9f6; }
.t-cellpair > :last-child { min-height: 38px; }
.t-new-update { display: grid; gap: 8px; }
.t-new-update .btn { justify-self: start; }
.t-updates { display: grid; gap: 10px; margin-top: 12px; }
.t-update { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.t-update-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.t-update-head .muted { font-size: 12px; margin-inline-start: auto; }

/* boards list */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.board-card { background: rgba(255,255,255,.95); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--ink);
  border-top: 4px solid var(--gold); box-shadow: 0 6px 20px rgba(0,0,0,.18); display: grid; gap: 6px; }
.board-card:hover { transform: translateY(-2px); }
.board-title { font-weight: 700; font-size: 17px; }
.board-bar { height: 6px; background: #ece9e1; border-radius: 99px; overflow: hidden; }
.board-bar span { display: block; height: 100%; background: #00c875; }

/* ---------------- real estate */
.small { font-size: 12px; }
.span2 { grid-column: 1 / -1; }
.nowrap { white-space: nowrap; }
.grid2 { display: grid; grid-template-columns: minmax(230px, 1fr) 2.2fr; gap: 18px; }
.re-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.re-side { position: sticky; top: 14px; }
.re-num { display: inline-block; background: var(--charcoal); color: #fff; font-weight: 700; letter-spacing: 1px;
  border-radius: 6px; padding: 2px 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.re-num.big { font-size: 20px; padding: 6px 12px; }
.inline-input { font-size: 18px !important; font-weight: 700; border-color: transparent !important; padding: 4px 6px !important; }
.inline-input:hover, .inline-input:focus { border-color: #d9d5c8 !important; }
.re-table tbody tr.re-row { cursor: pointer; }
.re-table tbody tr.re-row:hover { background: var(--gold-soft); }
.re-table th, .re-table td { padding: 11px 12px; }
.re-bar { height: 7px; background: #ece9e1; border-radius: 99px; overflow: hidden; display: inline-block; width: 120px; vertical-align: middle; margin-inline-end: 6px; }
.re-bar span { display: block; height: 100%; background: linear-gradient(90deg, #00c875, #2f7d55); }
.re-field-row { display: grid; grid-template-columns: auto 1fr 140px auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.party-add { display: grid; grid-template-columns: 150px 1fr 1.3fr 130px auto auto; gap: 8px; align-items: center; margin-top: 12px; }
.party-add input, .cell-input { width: 100%; padding: 7px 9px; border: 1px solid #e3dfd2; border-radius: 6px; font: inherit; font-size: 14px; background: #fff; }
.cell-input:not(:focus) { border-color: transparent; background: transparent; }
.cell-input:hover { border-color: #e3dfd2; }
table.parties td { padding: 6px 4px; }
.role-tag { display: inline-block; border-inline-start: 4px solid var(--c); background: color-mix(in srgb, var(--c) 10%, #fff);
  padding: 3px 8px; border-radius: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.perm-cell { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.perm { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--ink); margin: 0; white-space: nowrap; }
.perm input { accent-color: var(--charcoal); }
.cubes { display: flex; flex-wrap: wrap; gap: 6px; }
.cube { border: 1.5px dashed color-mix(in srgb, var(--c) 55%, #fff); background: #fff; color: #9a9aa0; border-radius: 8px;
  padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column;
  align-items: flex-start; line-height: 1.2; min-width: 84px; }
.cube small { font-weight: 400; font-size: 11px; }
.cube.on { background: var(--c); border: 1.5px solid var(--c); color: #fff; }
.cube.on::before { content: "✓ גישה"; font-size: 10px; opacity: .85; }
.re-doc { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 10px; }
.re-doc.signed { border-color: #9fd4b4; background: #f3fbf6; }
.re-doc-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.re-doc a { color: var(--ink); text-decoration: none; }
.pay-row { display: grid; grid-template-columns: minmax(140px, 1.4fr) 150px 120px auto auto; gap: 6px; align-items: center; border-bottom: 1px dashed var(--line); padding: 4px 0; }
.pay-row.paid .cell-input { color: var(--ok); }
input[type=datetime-local] { padding: 9px 10px; border: 1px solid #d9d5c8; border-radius: 7px; font: inherit; }
/* progress ring + timeline */
.ring { position: relative; width: 150px; height: 150px; margin: 0 auto 14px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring .bg { stroke: #ece9e1; }
.ring .fg { stroke: #00c875; stroke-linecap: round; transition: stroke-dashoffset .5s; }
.ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring b { font-size: 32px; font-family: "Frank Ruhl Libre", serif; }
.ring span { font-size: 12px; color: var(--muted); }
.timeline { list-style: none; margin: 0 0 10px; padding: 0; }
.timeline li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; position: relative; padding-bottom: 14px; }
.timeline li::before { content: ""; position: absolute; top: 28px; bottom: 0; inset-inline-start: 14px; width: 2px; background: #e6e3da; }
.timeline li:last-child::before { display: none; }
.timeline li.done::before { background: #00c875; }
.timeline .dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #d4d0c4; background: #fff; color: #888;
  font: inherit; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 1; }
.timeline.readonly .dot { cursor: default; }
.timeline li.done .dot { background: #00c875; border-color: #00c875; color: #fff; }
.timeline li.na { opacity: .45; }
.timeline li.na .lbl { text-decoration: line-through; }
.timeline .lbl { font-size: 14px; font-weight: 600; padding-top: 4px; }
.small-check { font-size: 12px; color: var(--muted); }
.small-check input { width: 13px; height: 13px; margin-top: 2px; }
/* security log */
.sec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sec-stats .card { display: flex; flex-direction: column; align-items: center; padding: 14px; }
.sec-stats b { font-size: 28px; font-family: "Frank Ruhl Libre", serif; }
.sec-stats span { font-size: 13px; color: var(--muted); }
.sec-stats .warn b { color: var(--danger); }
.sec-filter { gap: 8px; padding: 14px; }
.sec-table td { font-size: 13px; vertical-align: top; }
.sec-table tr.bad { background: #fdf0ee; }
.sec-table .ua { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-staff { font-weight: 700; }
.who-external { font-weight: 700; color: #3b6db3; }
.who-guest { color: var(--muted); }
@media (max-width: 900px) {
  .re-layout, .grid2 { grid-template-columns: 1fr; }
  .re-side { position: static; order: -1; }
  .party-add, .re-field-row, .pay-row { grid-template-columns: 1fr 1fr; }
  .sec-stats { grid-template-columns: 1fr; }
}

.btn.danger.boxed { background: #fff; }

.id-error { color: var(--danger); font-size: 13px; margin-top: 3px; }
input.invalid { border-color: var(--danger) !important; }

/* real estate v2 */
.re-num.light { background: var(--gold-soft); color: var(--gold-ink); }
.num-pair { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.num-pair small { font-size: 11px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid #d9d5c8; border-radius: 8px; overflow: hidden; }
.seg label { display: flex; align-items: center; gap: 6px; padding: 7px 12px; margin: 0; color: var(--ink); font-size: 14px; cursor: pointer; }
.seg label + label { border-inline-start: 1px solid #d9d5c8; }
.seg label:has(input:checked) { background: var(--charcoal); color: #fff; }
.seg input { accent-color: var(--gold); }
.grid2.even { grid-template-columns: 1fr 1fr; }
.chip.on { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.contact-group h3 { font-size: 14px; color: var(--gold-ink); margin: 10px 0 4px; }
.contact { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.contact-links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.contact-links a { color: var(--ink); text-decoration: none; }
.contact-links .wa-link { display: inline-flex; align-items: center; gap: 4px; color: #128C4B; font-weight: 600; }
.req { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; background: #fffdf6; }
.req.done { background: #f3fbf6; border-color: #cde9d7; }
.req-state { font-size: 12px; font-weight: 700; white-space: nowrap; }
.req .up-form { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.req-add { display: grid; grid-template-columns: 1fr 200px; gap: 8px; margin-top: 10px; align-items: center; }
.req-add .cubes { grid-column: 1 / -1; }
.sec-card.done { border-inline-start: 4px solid #00c875; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.slot { border: 1px dashed #d9d5c8; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.slot-up { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.slot-up input[type=file] { font-size: 12px; padding: 4px; flex: 1; min-width: 0; }
.tl-edit .tl-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; margin-bottom: 4px; align-items: center; }
.tl-edit input { padding: 6px 8px; border: 1px solid #d9d5c8; border-radius: 6px; font: inherit; font-size: 13px; }
.status-line-item { padding: 5px 0; }
@media (max-width: 900px) { .grid2.even, .req-add { grid-template-columns: 1fr; } }

.t-mywork.all .t-row { grid-template-columns: 42px minmax(200px, 1fr) 170px 130px 130px 110px 100px 60px; }
.nav-new { background: var(--gold); color: #2b2b30 !important; padding: 3px 10px; border-radius: 6px; font-weight: 700; }
.qt-back { position: fixed; inset: 0; background: rgba(20,20,25,.45); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; }
.qt { width: 100%; max-width: 520px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.qt-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--charcoal); color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 210; }
.qt-toast a { color: var(--gold); }
.timeline:not(.readonly) li .small-check { display: none; }
.timeline:not(.readonly) li:hover .small-check, .timeline li.na .small-check { display: flex; }

/* drag to reorder (questionnaires, deal fields, timeline steps) */
.drag-handle { cursor: grab; touch-action: none; user-select: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 6px 4px; border-radius: 6px; }
.drag-handle:hover { background: var(--gold-soft); color: var(--gold-ink); }
.dragging { opacity: .85; box-shadow: 0 8px 24px rgba(0,0,0,.18); background: #fff; position: relative; z-index: 5; }
.dragging .drag-handle { cursor: grabbing; }
.field-row { align-items: center; }
.field-row .row { flex-wrap: nowrap; }
.field-row .f-type { min-width: 150px; }
@media (max-width: 640px) { .field-row .row { flex-wrap: wrap; } }

.form-pick { display: inline-flex; gap: 4px; align-items: center; }
.form-pick select { max-width: 220px; padding: 6px 8px; font-size: 13px; }
.registry { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.registry .row { gap: 18px; }
.pw-rules { list-style: none; padding: 0; margin: 0 0 10px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: var(--ok); }
.pw-rules li.ok::before { content: "✓ "; }

/* deal: sides, extras, approval */
.side-box h3 { margin: 0 0 8px; }
.side-person { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: #fdfcf9; }
.extra { margin-bottom: 10px; }
.extra .row { gap: 14px; }
.extra-items { display: grid; gap: 6px; margin-top: 8px; }
.extra-item { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 8px; align-items: center; }
.extra-item input, .extra-item select { padding: 7px 9px; border: 1px solid #d9d5c8; border-radius: 6px; font: inherit; font-size: 14px; }
.alert-ok { border: 2px solid #00c875; background: #f1fbf5; }
.presign-box { margin-top: 14px; padding: 12px; border: 1px dashed var(--gold); border-radius: 8px; background: var(--gold-soft); }
@media (max-width: 640px) { .extra-item { grid-template-columns: 1fr; } }
.approve-card { border: 2px solid var(--gold); }
.approve-card.done { border-color: #00c875; }
.approve-card .approved { color: var(--ok); font-weight: 700; }

.approve-btn { display: flex; width: 100%; justify-content: center; margin-top: 14px; padding: 14px 18px; font-size: 17px;
  background: #00a35c; color: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,163,92,.25); }
.approve-btn:hover { background: #008a4e; }
.approve-card a { display: inline-block; padding: 3px 0; }
.req .up-form { flex-wrap: wrap; }
.req .up-form input[type=file] { flex: 1; min-width: 0; }
.up-form .btn, .slot-up .btn { white-space: nowrap; }
@media (max-width: 900px) {
  .portal-layout .re-side { order: 2; }   /* clients: actions and documents first, the timeline after them */
  .req { flex-wrap: wrap; }
}

/* personal area: notifications (right) · content (middle) · timeline (left) */
.wrap.wider { max-width: 1500px; }
.portal-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.portal-grid.no-side { grid-template-columns: 300px minmax(0, 1fr); }
.portal-alerts, .portal-side { position: sticky; top: 14px; }
.alerts-card h2 { margin-bottom: 10px; }
.alert-item { border: 1px solid var(--line); border-inline-start: 4px solid var(--gold); border-radius: 8px; padding: 10px 12px;
  margin-bottom: 10px; background: #fffdf6; }
.alert-item p { margin: 6px 0; }
.alert-item.req-alert { border-inline-start-color: #579bfc; background: #f5f9ff; }
.alert-item.pay-alert { border-inline-start-color: #fdab3d; }
.alert-item.pay-alert.late { border-inline-start-color: #e2445c; background: #fdf0ee; }
.alert-item.approve-card { border: 2px solid var(--gold); border-inline-start-width: 4px; }
.alert-item.approve-card.done { border-color: #00c875; background: #f1fbf5; }
.alert-item .up-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.alert-item .up-form input[type=file] { font-size: 12px; }
.alert-item .approve-btn { font-size: 15px; padding: 12px; }
.details-table th { width: 42%; color: var(--muted); font-weight: 600; }
.preview-bar { background: #3d3d44; color: #fff; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.preview-bar a { color: var(--gold); }
@media (max-width: 1100px) {
  .portal-grid, .portal-grid.no-side { grid-template-columns: minmax(0, 1fr); }
  .portal-alerts, .portal-side { position: static; }
}

.exp-row { display: grid; grid-template-columns: minmax(160px, 1.6fr) 150px 120px auto auto; gap: 6px; margin-bottom: 6px; }
.exp-row input { padding: 7px 9px; border: 1px solid #d9d5c8; border-radius: 6px; font: inherit; font-size: 14px; }
.show-client { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--muted); margin: 0 8px 0 0; }
.re-tiles-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.exp-table tr.client-row { cursor: pointer; }
.exp-table tr.client-row:hover { background: var(--gold-soft); }
.exp-table tr.detail td { background: #fdfcf9; font-size: 13px; padding-inline-start: 28px; }
.exp-table tfoot td { font-weight: 700; border-top: 2px solid var(--charcoal); }
@media (max-width: 640px) { .exp-row { grid-template-columns: 1fr 1fr; } }

.portal-grid.no-alerts { grid-template-columns: minmax(0, 1fr) 300px; }
.portal-grid.no-alerts.no-side { grid-template-columns: minmax(0, 1fr); }
.side-table td { font-size: 13px; padding: 6px 4px; }
.perm-cell { max-width: 420px; }
@media (max-width: 1100px) { .portal-grid.no-alerts, .portal-grid.no-alerts.no-side { grid-template-columns: minmax(0, 1fr); } }
.perm-cell { display: grid; grid-template-columns: repeat(3, auto); gap: 3px 12px; max-width: none; justify-content: start; }

/* client file: read-only by default, a floating button switches to edit mode and back */
.edit-fab { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 60; writing-mode: vertical-rl;
  padding: 14px 8px; border: 0; border-radius: 10px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  background: rgba(61,61,68,.55); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: background .2s, opacity .2s; }
.edit-fab:hover { background: rgba(61,61,68,.92); }
.edit-fab.saving-mode { background: rgba(0,163,92,.75); }
.edit-fab.saving-mode:hover { background: rgba(0,163,92,.95); }
.view-mode input:disabled, .view-mode select:disabled, .view-mode textarea:disabled {
  background: transparent; border-color: transparent; color: var(--ink); opacity: 1; -webkit-text-fill-color: var(--ink); cursor: default; }
.view-mode select:disabled { appearance: none; -webkit-appearance: none; }
.view-mode input[type=file]:disabled, .view-mode .party-add, .view-mode .req-add, .view-mode .slot-up,
.view-mode #docForm, .view-mode .presign-box button, .view-mode #addExp, .view-mode #addPay, .view-mode #savePay,
.view-mode .exp-row .danger, .view-mode .pay-row .danger, .view-mode .side-box .add, .view-mode .side-person .rm,
.view-mode #tlEdit, .view-mode #saveSigning, .view-mode #clearSigning { display: none !important; }
.view-mode button:disabled { opacity: .55; cursor: default; }
.view-mode .cube:disabled { opacity: 1; }
@media (max-width: 640px) { .edit-fab { writing-mode: horizontal-tb; top: auto; bottom: 14px; transform: none; right: 14px; } }

/* home page: smaller tiles (75%), one row of five on a wide screen */
.home-tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; max-width: 1040px; }
.home-tiles .tile { min-height: 158px; padding: 18px 16px; gap: 8px; border-radius: 11px; }
.home-tiles .tile .ico { font-size: 26px; }
.home-tiles .tile h2 { font-size: 16px; }
.home-tiles .tile p { font-size: 12.5px; }
.home-tiles .tile .meta { font-size: 12px; }
.sub-links { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sub-links a { display: block; text-decoration: none; color: var(--ink); padding: 7px 9px; border-radius: 8px;
  background: rgba(255,255,255,.45); border: 1px solid rgba(195,186,147,.5); transition: background .15s; }
.sub-links a:hover { background: rgba(244,240,226,.95); }
.sub-links b { display: block; font-size: 13px; }
.sub-links span { font-size: 11.5px; color: var(--gold-ink); font-weight: 600; }

/* client file: documents checklist on the right, the timeline on the left */
.re-layout.has-check { grid-template-columns: 280px minmax(0, 1fr) 300px; }
.re-sidecol { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; }
.re-sidecol .card { margin-bottom: 14px; }
.re-alerts h2 { font-size: 18px; margin-bottom: 8px; }
.alert-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13.5px; }
.alert-row:last-of-type { border-bottom: 0; }
.alert-ic { font-size: 16px; line-height: 1.3; }
.alert-rm { border: 0; background: none; cursor: pointer; font-size: 12px; color: var(--muted); padding: 2px 5px; border-radius: 5px; white-space: nowrap; }
.alert-rm:hover { background: rgba(0,0,0,.06); color: var(--danger); }
.re-check h2 { font-size: 18px; }
.check-count { font-size: 12px; font-weight: 700; color: var(--gold-ink); margin-bottom: 6px; }
.check-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2px 4px;
  padding: 5px 4px; border-bottom: 1px solid rgba(0,0,0,.06); }
.check-row label { display: flex; gap: 7px; align-items: center; margin: 0; font-size: 14px; color: var(--ink); cursor: pointer; }
.check-row input { width: 17px; height: 17px; accent-color: #25a35a; flex: none; }
.check-row.done span { color: #2f7d55; }
.check-row button { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--muted); padding: 2px 5px; border-radius: 5px; }
.check-row button:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.check-row .rm:hover { color: var(--danger); }
.check-doc { grid-column: 1 / -1; font-size: 11.5px; margin-inline-start: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-add { display: flex; gap: 6px; margin-top: 10px; }
.check-add input { padding: 7px 9px; font-size: 13px; }
.view-mode .check-add, .view-mode .check-row button { display: none !important; }
.view-mode .check-row input:disabled { opacity: 1; }
@media (max-width: 1250px) {
  .re-layout.has-check { grid-template-columns: minmax(0, 1fr) 300px; }
  .re-sidecol { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 900px) { .re-layout.has-check { grid-template-columns: 1fr; } }

/* client document requests: personal area form + list in the client file */
.doc-request { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.doc-request h3 { margin: 0 0 8px; font-size: 15px; }
.req-line { padding: 3px 0; }
.client-reqs { margin-top: 12px; padding: 10px 12px; border: 1px solid #f0d9a0; background: rgba(255,248,230,.75); border-radius: 9px; }
.client-req { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed #ecdcb4; }
.client-req.done { opacity: .6; }

/* client file: blocks that can be reordered, collapsed and reached from the chips on top */
.blocks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.blocks > .card { margin: 0; }
.block { grid-column: 1 / -1; }
.block.half { grid-column: auto; }
.block > h2 { display: flex; align-items: center; gap: 8px; }
.blk-handle { cursor: grab; color: var(--muted); font-size: 17px; user-select: none; touch-action: none; line-height: 1; }
.blk-handle:active { cursor: grabbing; }
.blk-toggle { margin-inline-start: auto; border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--muted);
  padding: 2px 8px; border-radius: 6px; transition: transform .2s, background .15s; }
.blk-toggle:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.block.collapsed .blk-toggle { transform: rotate(90deg); }
.block.collapsed > :not(h2) { display: none !important; }
.block.collapsed > h2 { margin-bottom: 0; }
.block.collapsed { padding-top: 14px; padding-bottom: 14px; }
.block-nav { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; margin-bottom: 8px; }
.block-nav button { border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.42); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 8px; padding: 5px 11px; font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.block-nav button:hover { background: rgba(255,255,255,.85); }
.view-mode .block-nav button:disabled, .view-mode .blk-toggle:disabled { opacity: 1; cursor: pointer; }
@media (max-width: 900px) { .block.half { grid-column: 1 / -1; } }

.beta-note { text-align: center; font-size: 12px; color: rgba(255,255,255,.75); padding: 4px 0 18px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.save-pw { margin-top: 10px; font-size: 14px; }

/* questionnaires: buyers / sellers list */
.people-box .person { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 8px 0; background: rgba(255,255,255,.55); }
.person-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.person-grid, .person-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; }
.person-extra { margin-bottom: 8px; }
.pf label { font-size: 13px; margin-bottom: 3px; }
.f-cond-row .f-cond { padding: 6px 8px; font-size: 13px; }
/* client file: blocks move only in edit mode */
.view-mode .blk-handle { display: none; }
/* the required-field asterisk (span.req) is not a document-request row (div.req) */
span.req { display: inline; padding: 0; border: 0; margin: 0; background: none; border-radius: 0; color: var(--danger); }
.multi-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.multi-opts .check { margin: 0; }

/* questionnaires: tables with rows, one set of questions per seller */
.rows-list .trow { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 8px; margin: 6px 0;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.55); }
.trow .tcell { flex: 1 1 140px; }
.trow .tcell label { font-size: 12px; margin-bottom: 2px; }
.pp-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 16px 0 6px; padding: 10px; border-radius: 10px;
  background: rgba(195,186,147,.18); position: sticky; top: 0; z-index: 5; }
.pp-tabs button { border: 1px solid var(--gold); background: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.pp-tabs button.on { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.pp-off { display: none; }
.already { font-size: 13px; color: #2f7d55; background: rgba(47,125,85,.08); border-radius: 7px; padding: 5px 9px; margin: 2px 0 6px; }

/* meeting planner: staff calendars on the board */
.cal { position: relative; }
.cal-ev { position: absolute; z-index: 2; pointer-events: none; overflow: hidden; border-radius: 4px; padding: 1px 4px;
  font-size: 10.5px; line-height: 1.25; color: #fff; opacity: .9; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.cal-ev.pending { background: repeating-linear-gradient(45deg, #f6dfa6, #f6dfa6 5px, #fbecc6 5px, #fbecc6 10px); color: #6b4f0e;
  border: 1px dashed #c9a23a; }
.lg.pending { background: repeating-linear-gradient(45deg, #f6dfa6, #f6dfa6 3px, #fbecc6 3px, #fbecc6 6px); border: 1px dashed #c9a23a; }
.cal-legend { flex-wrap: wrap; }
@media (min-width: 901px) { #dealRoot { padding-inline-start: 60px; } }  /* room for the floating save button */
.intake { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.intake h3 { margin: 0 0 6px; font-size: 15px; }
.intake .details-table th { width: 45%; }
.docs-req { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.docs-req h3 { margin: 0 0 8px; }
.trust { margin-top: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }

/* document preview panel */
.doc-preview { position: fixed; top: 0; bottom: 0; left: 0; width: min(46vw, 760px); z-index: 80; background: #fff;
  box-shadow: 8px 0 30px rgba(0,0,0,.25); display: flex; flex-direction: column; transform: translateX(-105%);
  transition: transform .25s ease; }
.doc-preview.open { transform: none; }
.dp-head { display: flex; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.dp-head .dp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-body { flex: 1; overflow: auto; background: #f3f2ee; }
.dp-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.dp-body img { display: block; max-width: 100%; margin: 12px auto; }
.dp-none { text-align: center; padding: 50px 20px; }
@media (max-width: 760px) { .doc-preview { width: 100vw; } }

.pay-row { grid-template-columns: minmax(130px, 1.3fr) 140px minmax(110px, 1fr) 110px auto auto auto; }
.pay-total { margin-top: 8px; font-size: 14px; }
.pay-total.warn { color: var(--danger); }
.pay-alert { font-weight: 700; }
#fromContacts { grid-column: 1 / -1; }
input[readonly] { background: #f4f2ec; color: var(--ink); cursor: default; }
.ok-text { color: var(--ok); }

/* English pages for clients (left to right) */
html[dir="ltr"] th, html[dir="ltr"] td { text-align: left; }
html[dir="ltr"] input[dir="ltr"] { text-align: left !important; }
html[dir="ltr"] .card h2 { word-spacing: 4px; }
.en-box { margin-top: 8px; padding: 8px 10px; border-inline-start: 3px solid #8fb3e8; background: rgba(143,179,232,.10); border-radius: 6px; }
.en-box input, .en-box textarea { text-align: left; }
.ro-item .ro-value { padding: 9px 12px; border-radius: 8px; background: rgba(244,240,226,.7); border: 1px solid var(--line); font-weight: 600; }
.sig-box .pad-wrap { margin-top: 4px; }
.or-line { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted); font-size: 13px; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.google-btn { width: 100%; justify-content: center; gap: 10px; text-decoration: none; }
.side-statuses { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.side-statuses h3 { margin: 0 0 6px; }
.notify-bar { justify-content: space-between; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: rgba(195,186,147,.18); }
.pay-proof { flex-basis: 100%; }
.req-form { display: grid; gap: 6px; margin-top: 10px; }
.proof-cell .proof-form { display: inline-block; margin-top: 2px; }
.proof-cell label.btn { cursor: pointer; }
.lang-switch { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px solid var(--gold, #c3ba93);
  border-radius: 999px; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.7); }
.lang-switch:hover { background: #fff; }

/* meetings: a slot typed in by date and time */
.manual-slot { margin: 10px 0 2px; gap: 8px; }
.manual-slot input[type=date], .manual-slot input[type=time] { width: auto; flex: 0 0 auto; }

/* tasks: idle-board question and the archive */
.idle-ask { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 2px solid var(--gold); background: #fffaf0; padding: 14px 18px; }
.archive-box summary { cursor: pointer; font-weight: 700; }
.archive-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.archive-row a { font-weight: 600; color: var(--ink); }
.archive-row button { margin-inline-start: auto; }
.alert-warn { border: 2px solid var(--gold); background: #fffaf0; }

/* a file over 10MB is shrunk before upload: the status note */
.shrink-note { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 9999; max-width: 92vw;
  background: #2b2b30; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.shrink-note.ok { background: #1f7a4d; }

/* client file: the personal-area box – a card per person, so the email field always has room */
.party-list { display: flex; flex-direction: column; gap: 10px; }
.party-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.6); }
.party-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.party-actions { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.party-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 8px 0; }
.party-fields label { font-size: 12px; color: var(--muted); margin: 0; display: flex; flex-direction: column; gap: 3px; }
.party-fields input { width: 100%; padding: 7px 9px; border: 1px solid #e3dfd2; border-radius: 6px; font: inherit; font-size: 14px; background: #fff; }
.party-card .perm-cell { display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: none; align-items: center; }
.party-add { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* meetings: video meeting */
.video-chip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.video-chip input { width: 15px; height: 15px; margin: 0; }
.video-box { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--gold); border-radius: 10px; background: #fffaf0; }
.video-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.video-link a { direction: ltr; unicode-bidi: isolate; word-break: break-all; }

/* tasks: a task with notes / updates is marked; an update someone else wrote that I have not seen yet stands out */
.t-open.t-has-notes { opacity: 1; background: #fff3d6; border-radius: 8px; padding: 2px 6px; }
.t-open.t-new-notes { background: #e2445c; color: #fff; animation: tPulse 1.6s ease-in-out 3; }
.t-open.t-new-notes .t-badge { background: #fff; color: #e2445c; }
.t-row.t-row-new { box-shadow: inset 4px 0 0 #e2445c; }
.t-card-notes { font-size: 12px; background: #fff3d6; border-radius: 6px; padding: 1px 6px; }
.t-card-notes.new { background: #e2445c; color: #fff; }
@keyframes tPulse { 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .t-open.t-new-notes { animation: none; } }

/* clients: the client list and the client file */
.client-table { width: 100%; border-collapse: collapse; }
.client-table th, .client-table td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); font-size: 14px; }
.client-table tbody tr { cursor: pointer; }
.client-table tbody tr:hover { background: rgba(184,151,90,.08); }
.cf-sub { font-size: 15px; margin: 12px 0 6px; color: var(--gold-ink); }
.cf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.cf-side { position: sticky; top: 14px; }
@media (max-width: 900px) { .cf-layout { grid-template-columns: 1fr; } .cf-side { position: static; } }
.tl-step { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin: 0; }
.tl-step input { display: none; }
.cf-group { margin-top: 10px; }
.cf-group h3 { font-size: 15px; margin: 6px 0; }
.cf-doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.cf-doc a:first-child { font-weight: 600; color: var(--ink); text-decoration: none; }
.eng-state { margin-top: 10px; font-size: 14px; line-height: 1.8; }
.ok-text { color: #2f7d55; font-weight: 600; }
.timeline li > .tl-step { grid-column: 1 / -1; }

/* expenses: "paid" mark */
.exp-paid { margin: 0; font-size: 13px; white-space: nowrap; align-items: center; }
.exp-paid.on { color: #2f7d55; font-weight: 700; }

/* video signing room */
.vr-room { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.vr-tile { position: relative; background: #111; border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; }
.vr-tile video { width: 100%; height: 100%; object-fit: contain; display: block; }
.vr-tile span { position: absolute; bottom: 8px; inset-inline-start: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 3px 9px; border-radius: 8px; }
.vr-tile.small { grid-column: 1 / -1; max-width: 240px; aspect-ratio: 4/3; }
.vr-grid { display: grid; grid-template-columns: 1fr 140px; gap: 8px; margin-top: 10px; }
.vr-grid video { width: 100%; background: #111; border-radius: 10px; }
@media (max-width: 700px) { .vr-room { grid-template-columns: 1fr; } }

/* real-estate home: tasks banner on the right */
.re-home { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.re-tasks { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; }
.rt-group { border-top: 1px solid var(--line, #e6e3da); padding: 8px 0; }
.rt-group summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
.rt-group summary::-webkit-details-marker { display: none; }
.rt-count { min-width: 24px; text-align: center; border-radius: 12px; padding: 1px 8px; font-size: 13px; background: #eee; }
.rt-late .rt-count { background: #e2445c; color: #fff; }
.rt-today .rt-count { background: #fdab3d; color: #fff; }
.rt-week .rt-count { background: #579bfc; color: #fff; }
.rt-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; margin-top: 6px; border-radius: 10px; background: rgba(255,255,255,.55); text-decoration: none; color: inherit; border-inline-start: 3px solid #c4c4c4; }
.rt-late .rt-item { border-inline-start-color: #e2445c; }
.rt-today .rt-item { border-inline-start-color: #fdab3d; }
.rt-week .rt-item { border-inline-start-color: #579bfc; }
.rt-item:hover { background: rgba(255,255,255,.9); }
.rt-item a { flex: 1; text-decoration: none; color: inherit; min-width: 0; }
.rt-done { margin-top: 3px; width: 17px; height: 17px; accent-color: #00c875; cursor: pointer; flex: none; }
.rt-item.done { opacity: .5; }
.rt-item.done .rt-name { text-decoration: line-through; }
.rt-item[hidden] { display: none; }
.rt-name { display: block; font-weight: 600; }
.rt-empty { margin: 6px 0 0; }
@media (max-width: 900px) { .re-home { grid-template-columns: 1fr; } .re-tasks { position: static; max-height: none; } }

/* deal file: the blocks open as tabs from the menu on the right */
#blocks > .block { display: none; grid-column: 1 / -1; }
#blocks > .block.tab-on { display: block; }
#blocks .blk-handle, #blocks .blk-toggle { display: none; }
.tab-menu { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.tab-menu button { text-align: start; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer; border-inline-start: 3px solid transparent; }
.tab-menu button:hover { background: rgba(255,255,255,.7); }
.tab-menu button.on { background: #fff; font-weight: 700; border-inline-start-color: var(--gold, #b8975a); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.tab-empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: 17px; }
.tab-empty[hidden] { display: none; }
@media (max-width: 1200px) { .tab-menu { flex-direction: row; flex-wrap: wrap; } }
.tab-grip { cursor: grab; color: var(--muted); margin-inline-end: 8px; opacity: 0; touch-action: none; user-select: none; }
.tab-menu button:hover .tab-grip { opacity: 1; }
.tab-menu button.dragging { opacity: .6; }
.re-home .tiles { margin: 0; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 1100px) { .re-home { grid-template-columns: 290px minmax(0, 1fr); } }
.vr-grid .vr-tile.small { grid-column: auto; max-width: none; }
tr.flash td { animation: payflash 2.4s ease-out 1; }
@keyframes payflash { 0%, 40% { background: #fff3c4; } 100% { background: transparent; } }
.pay-bell { font-size: 16px; padding: 2px 6px; }
.pay-mark { margin-inline-start: 6px; padding: 3px 9px; font-size: 12.5px; }
.vr-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #ddd; text-align: center; padding: 20px; }
.vr-empty[hidden] { display: none; }
.vr-empty p { margin: 0; max-width: 420px; line-height: 1.5; }
.btn.pulse { animation: btnpulse 1.2s ease-in-out infinite; }
@keyframes btnpulse { 50% { box-shadow: 0 0 0 6px rgba(184,151,90,.35); } }
.vr-ask-corner { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; }
.inv-box { border-top: 1px solid var(--line, #e6e3da); margin-top: 14px; }
.tabu-res h3 { font-size: 15px; margin: 12px 0 4px; }
.tabu-res > div { padding: 2px 0; }
.wa-thread { max-height: 360px; overflow-y: auto; background: #efeae2; border-radius: 12px; padding: 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.wa-msg { max-width: 75%; padding: 7px 10px; border-radius: 10px; background: #fff; align-self: flex-end; box-shadow: 0 1px 1px rgba(0,0,0,.08); white-space: pre-wrap; }
.wa-msg.out { background: #d9fdd3; align-self: flex-start; }
.wa-msg span { display: block; font-size: 11px; color: #777; margin-top: 3px; }
.let-tpl { border: 1px solid var(--line, #e6e3da); border-radius: 10px; padding: 8px 12px; margin-top: 8px; background: rgba(255,255,255,.5); }
.let-tpl summary { cursor: pointer; padding: 4px 0; }
.chip-row .chip { font-size: 12.5px; }
/* personal area: tax calculator */
.tax-calc .tc-tabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.tax-calc .tc-tabs button { border: 1px solid var(--line, #e6e3da); background: #fff; border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; }
.tax-calc .tc-tabs button.on { background: var(--ink, #2b2b30); color: #fff; border-color: transparent; }
.tax-calc .seg { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0; }
.tax-calc .seg label { display: flex; gap: 6px; align-items: center; margin: 0; font-weight: normal; }
.tc-result { margin-top: 14px; }
.tc-total { font-size: 18px; padding: 10px 14px; background: #f6f1e2; border-radius: 10px; }
.tc-total b { font-size: 22px; }
.tc-table { width: 100%; margin-top: 8px; font-size: 14px; border-collapse: collapse; }
.tc-table td { padding: 5px 8px; border-bottom: 1px solid #eee; }
.tc-disclaimer { font-size: 12px; color: #7a6f5a; background: #fbf8ef; border-radius: 8px; padding: 10px 12px; margin: 16px 0 0; line-height: 1.55; }
.court-preview { margin-top: 12px; padding: 14px; border: 1px solid var(--line, #e6e3da); border-radius: 12px; background: rgba(255,255,255,.65); }
.seg-radio { display: flex; gap: 18px; flex-wrap: wrap; }

/* client file: the blocks open as tabs from the menu on the right, the timeline under it */
.cf-tabs-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.cf-sidecol { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; }
.cf-sidecol .cf-side { position: static; }
@media (max-width: 900px) { .cf-tabs-layout { grid-template-columns: 1fr; } .cf-sidecol { position: static; } }
.cf-tl .lbl { color: var(--ink); text-decoration: none; font-weight: 600; }
.cf-tl .lbl:hover { color: var(--gold-ink); text-decoration: underline; }
.cf-tl .dot[disabled] { cursor: default; opacity: 1; }
.kid-row { display: grid; grid-template-columns: minmax(140px, 1fr) 160px 110px auto; gap: 6px; align-items: center; margin-bottom: 6px; }
@media (max-width: 640px) { .kid-row { grid-template-columns: 1fr 1fr; } }
.fin-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fin-sum > div { background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.fin-sum span { color: var(--muted); font-size: 13px; }
.fin-sum b { font-size: 21px; }
.fin-sum .due b { color: var(--danger); }
.fin-sum a { font-size: 12px; color: var(--gold-ink); }
.fin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fin-table th, .fin-table td { text-align: start; padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,.06); }
.req-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.req-group { display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,.55); border-radius: 10px; padding: 10px 12px; }
.req-group .check { margin: 0; font-size: 14px; }
.req-item { border-top: 1px solid var(--line); padding: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.req-item .check { margin: 0; }
.req-list { background: #fbf8ef; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.req-list ul { margin: 6px 0; padding-inline-start: 20px; }
.chip.off { opacity: .5; }
.quest-ans { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 8px; background: rgba(255,255,255,.55); }
.quest-ans summary { cursor: pointer; }
.quest-files { margin-top: 6px; }
.gen-pick .chip.on { background: var(--gold-soft); border-color: var(--gold); }
.gen-panel { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 12px; background: rgba(255,255,255,.5); }
.gen-panel h3 { margin: 0 0 8px; font-size: 16px; }
.gen-item { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 8px; }
.kid-row { grid-template-columns: minmax(130px, 1fr) 120px 150px 120px auto; }
.kid-head { margin-bottom: 2px; }
.kid-row.minor input, .kid-row.minor .kid-age { color: #1d1d22; font-weight: 700; }
.kid-row.adult input, .kid-row.adult .kid-age { color: #8b8a86; }
.kid-age { font-size: 13px; white-space: nowrap; }
.wa-send { display: inline-block; margin-top: 4px; font-size: 13px; color: #1f8f4e; font-weight: 600; text-decoration: none; }
.wa-send:hover { text-decoration: underline; }
.id-up .btn { cursor: pointer; }
@media (max-width: 640px) { .kid-row { grid-template-columns: 1fr 1fr; } .kid-head { display: none; } }
.debt-badge { margin-inline-start: auto; margin-inline-end: 14px; background: #fdecea; color: #a12a1f; border: 1px solid #f3c2bc;
  border-radius: 99px; padding: 6px 14px; font-size: 14px; text-decoration: none; white-space: nowrap; }
.debt-badge span { font-size: 12.5px; opacity: .85; }
.debt-badge[hidden] { display: none; }

.cd-new { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line, #d8d4c4); border-radius: 10px; background: rgba(195, 186, 147, .07); }

/* the personal area's payment schedule on a phone: one small card per payment instead of a 6-column table */
@media (max-width: 640px) {
  .pay-table thead { display: none; }
  .pay-table, .pay-table tbody, .pay-table tr, .pay-table td { display: block; width: auto; }
  .pay-table tr { border: 1px solid var(--line, #e6e3da); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: rgba(255, 255, 255, .55); }
  .pay-table td { border: 0; padding: 3px 0; text-align: start; }
  .pay-table td.pay-name { font-weight: 700; font-size: 15px; }
  .pay-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
  .pay-table td.pay-note:empty { display: none; }
  .pay-table td.pay-status, .pay-table td.proof-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
}

/* home page: the areas of the system as tabs on the side; a box opens only when its tab is clicked */
.home-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; align-items: start; }
.home-tabs { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 14px; }
.home-tab { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; font: inherit; color: var(--ink); cursor: pointer;
  background: rgba(255,255,255,.9); border: 1px solid rgba(195,186,147,.55); border-inline-start: 4px solid transparent; border-radius: 11px;
  padding: 11px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: background .15s ease, border-color .15s ease, transform .1s ease; }
.home-tab:hover { background: rgba(255,255,255,.98); }
.home-tab:active { transform: scale(.98); }
.home-tab.on { background: #fff; border-inline-start-color: var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,.26); }
.home-tab .ico { font-size: 22px; flex: none; }
.home-tab b { display: block; font-size: 15px; }
.home-tab small { display: block; font-size: 12px; color: var(--gold-ink); font-weight: 600; margin-top: 2px; }
.home-panels { min-width: 0; }
.home-panel.tile { min-height: 0; padding: 26px 26px 24px; }
.home-panel.tile:hover { transform: none; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.home-panel.tile p { flex: none; font-size: 15px; }
.home-panel .sub-links a { padding: 11px 13px; }
.home-panel .sub-links b { font-size: 15px; }
.home-panel .sub-links span { font-size: 12.5px; }
.home-go { align-self: flex-start; margin-top: 6px; text-decoration: none; }
.home-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; color: #fff;
  border: 2px dashed rgba(255,255,255,.45); border-radius: 14px; background: rgba(0,0,0,.18); text-align: center; }
.home-hint .ico { font-size: 30px; }
.home-hint p { margin: 0; font-size: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
@media (max-width: 760px) {
  .home-layout { grid-template-columns: minmax(0, 1fr); }
  .home-tabs { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .home-tab { padding: 10px; gap: 8px; }
  .home-tab b { font-size: 13.5px; }
  .home-hint .ico { transform: rotate(-90deg); }
  .home-hint { min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .home-tab { transition: none; } .home-tab:active { transform: none; } }

/* settings: each box closed, its title opens it */
.card.fold > h2 { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; user-select: none; }
.card.fold > h2 .fold-arrow { margin-inline-start: auto; font-size: 18px; color: var(--gold-ink); transition: transform .2s ease; transform: rotate(90deg); }
.card.fold.open > h2 .fold-arrow { transform: none; }
.card.fold.open > h2 { margin-bottom: 12px; }
.card.fold > h2:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .card.fold > h2 .fold-arrow { transition: none; } }

.eng-slot .eng-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #e6e3da); }
.kyc-card details summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
.kyc-card .kyc-sec { font-size: 15px; margin: 14px 0 6px; }
.serve-panel .sv-h { margin: 14px 0 6px; font-size: 14.5px; }
.serve-panel .sv-item { display: flex; gap: 6px; align-items: center; margin: 3px 0; flex-wrap: wrap; }
.serve-panel .sv-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-top: 6px; background: #fff; }
.serve-panel .sv-group + .sv-group { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.serve-panel .sv-gh { font-size: 13.5px; margin-bottom: 2px; }
.serve-panel .sv-gh a { font-size: 12px; }
.serve-panel .sv-manual { margin-top: 10px; }
.serve-panel .sv-mrow { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; margin: 4px 0; }
.gen-panel .g-fields { margin-top: 8px; }
.serve-panel .sv-note { flex-basis: 100%; padding-inline-start: 22px; margin-top: -2px; }
.kyc-box { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; } .kyc-box h3 { margin: 0 0 4px; font-size: 15px; }
/* home: office-management box with its three parts */
.office-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 6px; }
.office-box { background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.office-box h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.office-box p { margin: 0; font-size: 13.5px !important; }
.office-box .row { margin-top: auto; }
.home-panel .office-box .sub-links a { padding: 8px 10px; }
.ico-s { display: inline-block; font-size: 20px; }
/* home: each emoji has its own small, gentle motion (with pauses between) */
.home-tab .ico, .home-panel .ico, .ico-s { display: inline-block; will-change: transform; }
.anim-house { animation: hHouse 4s ease-in-out infinite; transform-origin: 50% 100%; }
.anim-people { animation: hPeople 3.6s ease-in-out infinite; }
.anim-office { animation: hOffice 4.4s ease-in-out infinite; transform-origin: 50% 100%; }
.anim-check { animation: hCheck 3.2s cubic-bezier(.3,1.4,.5,1) infinite; }
.anim-point { animation: hPoint 1.6s ease-in-out infinite; }
.anim-cal { animation: hCal 3.8s ease-in-out infinite; transform-origin: 50% 0; }
.anim-pen { animation: hPen 2.8s ease-in-out infinite; transform-origin: 20% 80%; }
.anim-clip { animation: hClip 4.2s ease-in-out infinite; }
@keyframes hHouse { 0%, 60%, 100% { transform: translateY(0) scaleY(1); } 70% { transform: translateY(0) scaleY(.88); } 80% { transform: translateY(-6px) scaleY(1.05); } 90% { transform: translateY(0) scaleY(.97); } }
@keyframes hPeople { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-10deg); } 75% { transform: rotate(8deg); } 85% { transform: rotate(-4deg); } }
@keyframes hOffice { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hCheck { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.28); } 90% { transform: scale(.94); } }
@keyframes hPoint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@keyframes hCal { 0%, 60%, 100% { transform: rotateX(0); } 75% { transform: rotateX(55deg); } }
@keyframes hPen { 0%, 100% { transform: rotate(0) translateX(0); } 25% { transform: rotate(-12deg) translateX(-2px); } 50% { transform: rotate(4deg) translateX(2px); } 75% { transform: rotate(-8deg) translateX(-1px); } }
@keyframes hClip { 0%, 65%, 100% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-4px) rotate(-6deg); } 85% { transform: translateY(0) rotate(3deg); } }
.home-tab:hover .ico { animation-duration: 1.2s; }
@media (max-width: 760px) { .anim-point { animation-name: hPointDown; } @keyframes hPointDown { 0%, 100% { transform: rotate(-90deg) translateX(0); } 50% { transform: rotate(-90deg) translateX(6px); } } }
@media (prefers-reduced-motion: reduce) { .home-tab .ico, .home-panel .ico, .ico-s { animation: none !important; } }
/* home (v3): four big tiles in the middle of the screen; the chosen area's box opens under them */
.home-layout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; max-width: 1080px;
  margin: 0 auto; min-height: calc(100vh - 260px); grid-template-columns: none; }
.home-tabs { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: 100%; }
.home-tab { flex-direction: column; justify-content: center; text-align: center; gap: 10px; min-height: 190px; padding: 22px 16px;
  border-inline-start: 1px solid rgba(195,186,147,.55); border-bottom: 4px solid transparent; border-radius: 16px; }
.home-tab:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.home-tab.on { border-inline-start-color: rgba(195,186,147,.55); border-bottom-color: var(--gold); }
.home-tab .ico { font-size: 48px; line-height: 1; }
.home-tab b { font-size: 18px; }
.home-tab small { font-size: 13px; margin-top: 4px; }
.home-panels { width: 100%; }
.home-panels:not(:has(.home-panel:not([hidden]))) { display: none; }
@media (max-width: 900px) { .home-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .home-layout { min-height: 0; }
  .home-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home-tab { min-height: 140px; padding: 16px 10px; gap: 8px; }
  .home-tab .ico { font-size: 38px; }
  .home-tab b { font-size: 15px; }
}
.sign-link-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding: 8px; background: #fbf6e6; border-radius: 8px; }
.sign-link-row input { flex: 1 1 220px; min-width: 0; font-size: 12.5px; }
.anim-clock { animation: hClock 3s ease-in-out infinite; transform-origin: 50% 55%; }
@keyframes hClock { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(10deg); } 93% { transform: rotate(-4deg); } }
@media (min-width: 900px) { .office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .anim-clock { animation: none !important; } }

/* client list: sortable headers */
.client-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.client-table th.sortable span { font-size: 11px; opacity: .55; margin-inline-start: 3px; }
.client-table th.sortable.on span { opacity: 1; color: var(--gold-ink); }
/* the client's debt at the top of the file: a solid badge (the page-head link colour must not wash it out) */
.page-head a.debt-badge { background: #b3261e; color: #fff; border: 1px solid #8e1c16; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.page-head a.debt-badge span { color: #fff; opacity: .95; }
/* delete a document: a clear red x */
.doc-del { border: 1px solid #e3b6b1; background: #fff; color: #b3261e; border-radius: 6px; width: 24px; height: 24px; line-height: 1; font-size: 13px; cursor: pointer; padding: 0; flex: none; }
.doc-del:hover { background: #b3261e; color: #fff; border-color: #b3261e; }
.case-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.case-row input { flex: 1; min-width: 0; }
a.home-tab { text-decoration: none; }

/* serial numbers (settings → הצג מספרי שדות) */
.fn-tag { display: inline-block; font: 600 10px/14px Arial, sans-serif; color: #fff; background: #4a5a7a; border-radius: 4px; padding: 0 3px;
  margin-inline-start: 5px; cursor: copy; direction: ltr; vertical-align: middle; opacity: .88; letter-spacing: 0; text-shadow: none; }
.fn-tag:hover { opacity: 1; background: #1d2a44; }
.fn-tag.fn-abs { position: absolute; z-index: 30; margin-inline-start: -14px; margin-top: -6px; }

.fn-tag.fn-name { background: #7a6420; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; cursor: pointer; }
.fn-tag.fn-name:hover { background: #4f3f12; }
.fn-tag.fn-name.fn-empty { background: transparent; color: #7a6420; border: 1px dashed #b9a765; opacity: 1; }
.doc-pdf { padding: 1px 7px; font-size: 11.5px; font-weight: 700; text-decoration: none; }

/* document preview: half of the screen, the page stays usable beside it */
.gen-preview { position: fixed; inset-block: 0; left: 0; width: 50vw; min-width: 420px; max-width: 100vw; z-index: 200; display: flex; flex-direction: column;
  background: #fff; box-shadow: 8px 0 30px rgba(0,0,0,.35); }
html[dir="ltr"] .gen-preview { left: auto; right: 0; }
.dp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dp-x { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.dp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #e9e7e1; }
.dp-body iframe { flex: 1; width: 100%; border: 0; }
.dp-wait { text-align: center; margin-top: 40px; }
.dp-open { padding: 4px 12px; background: #fff; }
.dp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); }
.dp-foot .muted { margin-inline-end: auto; }
@media (max-width: 860px) { .gen-preview { width: 100vw; min-width: 0; } }

/* client file: the forums and their subjects, the other side's lawyer, the ID demand, the lawyer's signature, hours */
.forum-box { display: flex; flex-direction: column; gap: 8px; }
.forum-topics { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 10px; margin-inline-start: 22px; background: #faf8f2; border-radius: 8px; }
.forum-topics .check { margin: 0; font-size: 14px; }
.id-field { display: flex; gap: 6px; align-items: center; }
.id-field input { flex: 1; min-width: 0; }
.id-field .btn { white-space: nowrap; }
.sign-box { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.sign-box .check { margin: 0; }
.cf-hours-form { display: grid; grid-template-columns: 160px minmax(0, 2fr) 110px minmax(0, 2fr) auto; gap: 8px; align-items: end; }
.cf-hours-row { display: grid; grid-template-columns: 90px 60px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.cf-hours-row .dur { font-weight: 700; direction: ltr; text-align: center; }
@media (max-width: 760px) { .cf-hours-form { grid-template-columns: 1fr 1fr; } .cf-hours-form .wide2 { grid-column: 1 / -1; } }

/* the preview: the pages of the PDF, as sheets of paper */
.dp-pages { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dp-pages img { width: 100%; max-width: 820px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.dp-count { padding: 4px 12px; background: #fff; display: flex; justify-content: space-between; }

/* background music */
.music-btn { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 15px; line-height: 1.2; cursor: pointer; }
.music-btn.off { opacity: .5; }
.music-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.music-grid button { text-align: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; }
.music-grid button.on { border-color: var(--gold); background: var(--gold-soft, #f6efdb); font-weight: 700; }

/* a long form in the document generator */
.pf-form { margin-top: 8px; }
.pf-sec { border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; background: #fff; }
.pf-sec > summary { padding: 9px 12px; font-weight: 700; cursor: pointer; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 12px; padding: 4px 12px 12px; }
.pf-grid .pf-wide { grid-column: 1 / -1; }
.pf-grid [hidden] { display: none; }
.pf-check { margin: 0; align-self: center; }
.music-link { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.music-link [type=url] { flex: 1; }
.music-link [type=url].bad { border-color: var(--danger, #c0392b); }
/* the generator opened from the home page: only the generator, with a way to change the client */
.gen-focus .cf-sidecol { display: none; }
.gen-focus .cf-tabs-layout { display: block; }
.gen-focus-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; }
.gen-focus-bar b { margin-inline-end: auto; }
.pf-menu { position: absolute; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 4px; min-width: 240px; }
.pf-menu button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; background: none; padding: 7px 10px; border-radius: 8px; cursor: pointer; font: inherit; text-align: start; }
.pf-menu button:hover { background: var(--gold-soft, #f6efdb); }
.pf-menu span { font-size: 12px; color: var(--muted); }
.pf-grid > div { position: relative; }
.g-mode { display: inline-flex; gap: 10px; }
.fee-choices { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.fee-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.fee-inline input[type=text] { width: 70px; }
.fee-inline #feeAdvance { width: 110px; }