/* Behind the Sets — a production-office ledger: calm surfaces, condensed headings, one teal accent. */
:root {
  --bg: #F1F2EF; --surface: #FFFFFF; --sunk: #F7F8F5; --line: #DADDD6; --ink: #1A1E21; --muted: #646B6E;
  --accent: #1F5A60; --accent-ink: #FFFFFF; --accent-soft: #E3EEEE;
  --brass: #A87418; --warn: #9A3B12; --warn-soft: #FBEDE5; --ok: #2F6B3A; --ok-soft: #E6F1E7;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131618; --surface: #1B1F22; --sunk: #171A1D; --line: #2C3236; --ink: #E7EAE6; --muted: #9AA2A4;
    --accent: #6FB3B8; --accent-ink: #0E1416; --accent-soft: #1E3133;
    --brass: #E0AE52; --warn: #F09A72; --warn-soft: #3A2219; --ok: #7CC48A; --ok-soft: #1C2C20;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131618; --surface: #1B1F22; --sunk: #171A1D; --line: #2C3236; --ink: #E7EAE6; --muted: #9AA2A4;
  --accent: #6FB3B8; --accent-ink: #0E1416; --accent-soft: #1E3133;
  --brass: #E0AE52; --warn: #F09A72; --warn-soft: #3A2219; --ok: #7CC48A; --ok-soft: #1C2C20;
  color-scheme: dark;
}
[dir="rtl"] { --body: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; --display: "IBM Plex Sans Arabic", "Barlow Condensed", sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); font-weight: 600; cursor: pointer; text-decoration: none; color: var(--ink);
  white-space: nowrap; min-height: 42px; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--warn); border-color: var(--warn); background: transparent; }
.btn.small { padding: 6px 11px; min-height: 34px; font-size: 13px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn .g { width: 18px; height: 18px; flex: none; }

.field { display: grid; gap: 6px; }
.field > label, .field > .lbl { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .field > label, [dir="rtl"] .field > .lbl { letter-spacing: 0; text-transform: none; font-size: 13px; }
.input, select.input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunk); min-height: 42px; }
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.hint { font-size: 13px; color: var(--muted); margin: 0; }
.err { font-size: 13px; color: var(--warn); background: var(--warn-soft); border-radius: var(--radius); padding: 9px 12px; margin: 0; }
.okmsg { font-size: 14px; color: var(--ok); background: var(--ok-soft); border-radius: var(--radius); padding: 10px 12px; margin: 0; }

/* ---------- Public pages (sign in, invite, welcome) ---------- */
.public { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.public .side { background: var(--ink); color: var(--bg); padding: 48px clamp(24px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
:root[data-theme="dark"] .public .side, :root:not([data-theme="light"]) .public .side { }
.public .side::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 340px; height: 340px;
  background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.06) 22px 44px); transform: rotate(-8deg); border-radius: 8px; }
[dir="rtl"] .public .side::after { inset: auto auto -60px -40px; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
[dir="rtl"] .wordmark { letter-spacing: .04em; }
.wordmark .mark { width: 28px; height: 22px; border: 2px solid currentColor; border-radius: 3px; position: relative; flex: none; }
.wordmark .mark::before { content: ""; position: absolute; left: -2px; right: -2px; top: -9px; height: 7px; border: 2px solid currentColor; border-radius: 2px;
  background: repeating-linear-gradient(110deg, currentColor 0 4px, transparent 4px 9px); }
.public .side h1 { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5.2vw, 68px); line-height: .98; margin: 0 0 18px; max-width: 12ch; text-wrap: balance; }
.public .side p { font-size: 17px; max-width: 40ch; opacity: .78; margin: 0; }
.public .side .foot { font-size: 13px; opacity: .6; position: relative; z-index: 1; }
.public .main { display: grid; place-items: center; padding: 40px 20px; }
.card { width: min(420px, 100%); display: grid; gap: 18px; }
.card h2 { font-family: var(--display); font-size: 34px; font-weight: 700; margin: 0; line-height: 1.05; }
.card .lead { color: var(--muted); margin: 0; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.langswitch { position: fixed; top: 14px; inset-inline-end: 14px; z-index: 5; }
.invite-badge { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 16px; display: grid; gap: 4px; }
.invite-badge b { font-family: var(--display); font-size: 24px; }
@media (max-width: 860px) {
  .public { grid-template-columns: 1fr; }
  .public .side { padding: 28px 20px 32px; min-height: auto; gap: 28px; }
  .public .side h1 { font-size: 38px; }
  .public .side .foot { display: none; }
}

/* ---------- App shell ---------- */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .in { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar .wordmark { font-size: 18px; color: var(--ink); text-decoration: none; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { padding: 8px 12px; border-radius: var(--radius); text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; }
.topbar nav a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); }
.topbar .spacer { flex: 1; }
.wsselect { max-width: 220px; min-height: 36px; padding: 6px 10px; }
.usermenu { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.who { display: grid; line-height: 1.2; font-size: 13px; max-width: 200px; }
.who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; display: grid; gap: 24px; }
.eyebrow { font-family: var(--display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: var(--muted); }
[dir="rtl"] .eyebrow { letter-spacing: 0; }
.page h1 { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; margin: 4px 0 6px; }
.page .lead { color: var(--muted); margin: 0; max-width: 60ch; }
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
@media (max-width: 720px) {
  .who { display: none; }
  .topbar nav { order: 5; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: 8px 10px; white-space: nowrap; flex: none; }
  .page h1 { font-size: 34px; }
  .wsselect { max-width: 160px; }
}

/* ---------- Home tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; align-content: start; position: relative; }
.tile h3 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 700; }
.tile p { margin: 0; color: var(--muted); font-size: 14px; }
.tile .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.tile .ico { width: 40px; height: 40px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pill.lvl-manage { border-color: var(--accent); color: var(--accent); }
.pill.lvl-edit { border-color: var(--brass); color: var(--brass); }
.pill.lvl-view { border-color: var(--muted); }
.pill.lvl-none { opacity: .7; border-style: dashed; }
.pill.role-owner { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill.role-admin { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* ---------- Team ---------- */
.panelbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panelbox > header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--accent-soft); gap: 10px; flex-wrap: wrap; }
.panelbox > header h2 { margin: 0; font-family: var(--display); font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
[dir="rtl"] .panelbox > header h2 { letter-spacing: 0; }
.rows .row { display: grid; grid-template-columns: minmax(0, 2fr) 110px minmax(0, 1.3fr) minmax(0, 1.5fr) 190px; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.rows .row .c-a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rows .row:first-child { border-top: 0; }
.rows .colhead { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-block: 8px; }
.person { display: flex; gap: 10px; align-items: center; min-width: 0; }
.person .nm { font-weight: 600; overflow-wrap: anywhere; }
.person .em { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.access { display: grid; gap: 3px; font-size: 13px; justify-items: start; }
.access small { color: var(--muted); }
.empty { padding: 22px 16px; color: var(--muted); text-align: center; }
.mlabel { display: none; }
@media (max-width: 820px) {
  .rows .colhead { display: none; }
  .rows .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p a" "r r" "c c" "b b"; gap: 8px; }
  .rows .row .c-p { grid-area: p; } .rows .row .c-r { grid-area: r; } .rows .row .c-c { grid-area: c; }
  .rows .row .c-b { grid-area: b; } .rows .row .c-a { grid-area: a; }
  .mlabel { display: inline-block; min-width: 96px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .access { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
}

/* ---------- Drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10,12,14,.45); z-index: 30; }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(480px, 100%); background: var(--surface); z-index: 31; display: flex; flex-direction: column; border-inline-start: 1px solid var(--line); }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); gap: 10px; }
.drawer h3 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 700; }
.drawer form, .drawer .body { flex: 1; overflow: auto; padding: 18px 20px; display: grid; gap: 18px; align-content: start; }
.drawer footer { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.x { all: unset; cursor: pointer; padding: 8px; border-radius: var(--radius); color: var(--muted); line-height: 1; }
.x:hover { background: var(--accent-soft); color: var(--ink); }
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg label { position: relative; text-align: center; padding: 9px 6px; cursor: pointer; font-size: 13px; font-weight: 600; border-inline-start: 1px solid var(--line); background: var(--sunk); }
.seg label:first-child { border-inline-start: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -3px; }
.sysblock { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 12px; }
.sysblock h4 { margin: 0; font-family: var(--display); font-size: 20px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.projlist { display: grid; gap: 6px; max-height: 180px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunk); }
.linkbox { font-family: var(--mono); font-size: 13px; padding: 12px; background: var(--sunk); border: 1px dashed var(--line); border-radius: var(--radius); overflow-wrap: anywhere; user-select: all; }
.sharebtns { display: grid; gap: 8px; }

/* ---------- Toast & misc ---------- */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg);
  padding: 11px 16px; border-radius: var(--radius); font-weight: 500; z-index: 60; max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.toast.bad { background: var(--warn); color: #fff; }
.center { min-height: 60vh; display: grid; place-items: center; text-align: center; color: var(--muted); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
@media (prefers-reduced-motion: no-preference) { .drawer { animation: slide .18s ease-out; } @keyframes slide { from { transform: translateX(24px); opacity: .6; } } [dir="rtl"] .drawer { animation-name: slidertl; } @keyframes slidertl { from { transform: translateX(-24px); opacity: .6; } } }

/* ---------- Shared bits ---------- */
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.linkish { all: unset; cursor: pointer; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.linkish:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.empty.big { padding: 40px 20px; display: grid; gap: 14px; justify-items: center; }
.empty.big p { margin: 0; max-width: 46ch; }
.center.small { min-height: 120px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.three { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.inline { display: flex; gap: 8px; }
.inline .input { min-height: 36px; padding: 6px 10px; }
textarea.input { resize: vertical; min-height: 84px; }
.drawer.wide { width: min(720px, 100%); }
@media (max-width: 520px) { .two, .three { grid-template-columns: 1fr; } }

/* ---------- Banner (ownership offer) ---------- */
.banner { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px;
  border: 1px solid var(--brass); background: color-mix(in srgb, var(--brass) 10%, var(--surface)); border-radius: var(--radius); }
.banner.muted { border-color: var(--line); background: var(--surface); }
.banner b { display: block; }
.stepper { margin: 0; padding-inline-start: 22px; display: grid; gap: 12px; }
.stepper li { display: grid; gap: 2px; }

/* ---------- Crew Book ---------- */
.toolbar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center;
  position: sticky; top: 57px; z-index: 5; background: var(--bg); padding: 6px 0; }
@media (max-width: 720px) { .toolbar { grid-template-columns: 1fr 1fr; top: 0; position: static; } .toolbar #crewQ { grid-column: 1 / -1; } }
#crewList { display: grid; gap: 16px; }
.crows .crow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.7fr) minmax(0, .8fr); gap: 14px; align-items: start; padding: 11px 16px; border-top: 1px solid var(--line); }
.crows.with-rates .crow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .7fr) 190px; }
.crows .crow:first-child { border-top: 0; }
.crows .colhead { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-block: 8px; }
[dir="rtl"] .crows .colhead { letter-spacing: 0; font-size: 12px; }
.crow .c-n { display: grid; gap: 2px; min-width: 0; }
.crow .c-n small { color: var(--muted); font-size: 13px; }
.crow .c-n .note { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .c-ct { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; min-width: 0; }
.crow .c-ct a { color: var(--ink); text-decoration: none; }
.crow .c-ct a:hover { color: var(--accent); text-decoration: underline; }
.crow .c-ct .em { overflow-wrap: anywhere; color: var(--muted); }
.ph { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 13px; }
.ph .wa { font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--ok); color: var(--ok) !important; }
.wa-user { all: unset; cursor: pointer; color: var(--ok); font-size: 13px; font-weight: 600; }
.wa-user:hover { text-decoration: underline; }
.crow .c-co, .crow .c-rt { font-size: 14px; }
.crow .c-rt small { color: var(--muted); margin-inline-start: 4px; }
.starbox { display: grid; gap: 2px; grid-template-columns: auto auto; align-items: center; justify-content: start; column-gap: 10px; }
.starbox .overall { grid-row: 1 / span 2; grid-column: 2; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--brass); }
.stars { display: inline-flex; align-items: center; gap: 0; line-height: 1; }
.stars .k { font-size: 10px; font-weight: 700; color: var(--muted); width: 14px; }
.stars button, .stars i { all: unset; font-style: normal; font-size: 16px; color: var(--line); padding: 1px; cursor: default; }
.stars button { cursor: pointer; }
.stars button:hover, .stars button:focus-visible { color: var(--brass); outline: none; }
.stars .on { color: var(--brass); }
.stars.big button { font-size: 26px; padding: 2px 3px; }
.stars button:disabled { cursor: default; }
@media (max-width: 860px) {
  .crows .colhead { display: none; }
  .crows .crow, .crows.with-rates .crow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .crow .mlabel { display: inline-block; min-width: 84px; }
}

/* ---------- Crew form ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--sunk); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:disabled + span { cursor: default; opacity: .8; }
.dupbox { border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 6px; font-size: 14px; }
.dupbox ul { margin: 0; padding-inline-start: 18px; }
.dupbox.block { background: var(--warn-soft); border: 1px solid var(--warn); }
.dupbox.block b { color: var(--warn); }
.dupbox.soft { background: color-mix(in srgb, var(--brass) 10%, var(--surface)); border: 1px solid var(--brass); }
.hint.lock { font-size: 12px; }

/* ---------- Import ---------- */
.steps { display: grid; gap: 14px; }
.ticks { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.dropzone { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 26px 16px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--sunk); cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#tplBtn { justify-self: start; }
.filename { font-size: 14px; color: var(--muted); }
.sumcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sumcards .sc { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 2px; background: var(--surface); }
.sumcards .sc b { font-family: var(--display); font-size: 30px; line-height: 1; }
.sumcards .sc span { font-size: 12px; color: var(--muted); }
.sumcards .sc.ok { border-color: var(--ok); background: var(--ok-soft); }
.sumcards .sc.ok b { color: var(--ok); }
.sumcards .sc.bad { border-color: var(--warn); }
@media (max-width: 560px) { .sumcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skiplist h4 { margin: 4px 0 6px; font-family: var(--display); font-size: 18px; }
.skiplist ol, .newlist ol { margin: 0; padding: 0; list-style: none; max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.skiplist li, .newlist li { padding: 7px 12px; border-top: 1px solid var(--line); font-size: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.skiplist li:first-child, .newlist li:first-child { border-top: 0; }
.skiplist .where { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 64px; }
.skiplist .why { color: var(--muted); font-size: 13px; }
.newlist summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }

/* ---------- Duplicate warning (same look as the Focus prototype) ---------- */
.dupe { border: 1px solid var(--warn); background: var(--warn-soft); color: var(--ink); border-radius: 5px; padding: 10px 12px; display: grid; gap: 8px; font-size: 13px; }
.dupe b { color: var(--warn); }
.dupe.soft { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 10%, var(--surface)); }
.dupe.soft b { color: var(--brass); }
.dupe .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dupe .hint { font-size: 12px; }
.okline { font-size: 12px; color: var(--ok); }
#dupBox:empty { display: none; }
.crow .c-n .co { color: var(--accent); font-weight: 600; }
.drawer:focus { outline: none; }
.tile .accesstext { font-size: 13px; color: var(--muted); }
.invitewrap { display: grid; gap: 6px; justify-items: end; max-width: 340px; } .invitewrap .hint { text-align: end; } [dir="rtl"] .invitewrap { justify-items: start; }

/* ---------------------------------------------------------------- budget */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap table { border-collapse: collapse; width: 100%; font-size: 14px; }
.tablewrap th, .tablewrap td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tablewrap thead th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; background: var(--sunk); }
.tablewrap .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num.neg, .stat.neg b { color: var(--warn); }
.num.pos, .stat.pos b { color: var(--ok); }
.roletable th[scope="row"] { font-weight: 600; white-space: nowrap; }
.rolecell { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--sunk); color: var(--ink); white-space: nowrap; }
.rolecell.rc-none, .rolecell.rc-no { color: var(--muted); background: transparent; border: 1px dashed var(--line); }
.rolecell.rc-edit, .rolecell.rc-send, .rolecell.rc-yes, .rolecell.rc-company { background: var(--accent-soft); color: var(--accent); }
.rolecell.rc-switch, .rolecell.rc-limit, .rolecell.rc-pay, .rolecell.rc-with_margin { color: var(--brass); }

.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.stat span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat b { font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; }
.stat small { font-size: 12px; color: var(--muted); }
.note-box { padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.crumbs a { text-decoration: none; font-weight: 600; font-size: 14px; }
.banner.muted { background: var(--sunk); border-color: var(--line); }

.ptable tbody tr { cursor: pointer; }
.ptable tbody tr:hover { background: var(--sunk); }
.ptable .plink { font-weight: 600; text-decoration: none; color: var(--ink); }
.ptable td small { display: block; color: var(--muted); font-size: 12px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs > * { padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs [aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs .soon { opacity: .6; cursor: default; }
.tabs .soon small { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }

.panelbox header .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ovr { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ovr .input { width: 130px; min-height: 34px; padding: 6px 8px; }

.ltable .grouprow th { background: var(--accent-soft); color: var(--accent); font-size: 13px; letter-spacing: .04em; }
.ltable .grouprow th { display: table-cell; }
.ltable .grouprow .gsum { font-weight: 500; color: var(--muted); margin-inline: 12px; font-size: 12px; }
.ltable { min-width: max-content; }
.ltable .grouprow .addl { font-size: 13px; font-weight: 600; }
.ltable td { padding: 4px 6px; }
.cell { width: 100%; min-width: 80px; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 6px 8px; font: inherit; color: inherit; }
.cell.num { text-align: end; min-width: 100px; font-variant-numeric: tabular-nums; }
.cell.ccy { min-width: 74px; }
.cell.notes { min-width: 160px; }
.cell:hover { border-color: var(--line); }
.cell:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.cell.saving { opacity: .6; }
.cell.saved { box-shadow: 0 0 0 2px var(--ok-soft); border-color: var(--ok); }
.ltable td.drag { cursor: grab; color: var(--muted); width: 18px; user-select: none; }
.ltable tr.dragging { opacity: .4; }
.ltable tr.drag-over td { border-top: 2px solid var(--accent); }
.paybtn { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 5px 9px; font: inherit; cursor: pointer; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paybtn:hover { border-color: var(--accent); }
.paybtn small { color: var(--muted); }

.btable tr.main th { font-weight: 700; }
.btable tr.sub th { font-weight: 400; padding-inline-start: 26px; color: var(--muted); }
.btable tr.total th, .btable tr.total td { font-weight: 700; border-top: 2px solid var(--ink); }

.expense { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; }
.expense h3 { margin: 0; font-size: 15px; }
.expgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.expgrid .wide { grid-column: span 2; }
.expact { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chip-file { font-size: 13px; padding: 4px 10px; background: var(--sunk); border-radius: 99px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint.warn { color: var(--warn); }

.paysum { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.paysum b { color: var(--ink); }
.paylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.paylist li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.paylist li small { display: block; color: var(--muted); font-size: 12px; }
.paylist .acts { display: flex; gap: 6px; align-items: center; }
.payform { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.payform h4 { margin: 0; }
.raterow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.raterow .input { width: 140px; }
@media (max-width: 640px) {
  .expgrid { grid-template-columns: 1fr 1fr; }
  .stat b { font-size: 17px; }
}
.ltable select.cell[data-k="category_id"] { min-width: 0; width: 140px; }
.ltable input.cell[data-k="item"] { min-width: 0; width: 165px; }
.ltable input.cell[data-k="vendor"] { min-width: 0; width: 125px; }
.ltable input.cell.num { min-width: 0; width: 92px; }
.ltable select.cell.ccy { min-width: 0; width: 70px; }
.ltable input.cell.notes { min-width: 0; width: 120px; }
.ltable th, .ltable td { padding-inline: 4px; }
.ltable thead th { font-size: 10px; letter-spacing: .04em; }
.ltable tr.emptyrow td { color: var(--muted); font-size: 13px; padding: 10px 14px; }

/* ---------------------------------------------------------------- PQs */
.tabs .count { font-size: 11px; background: var(--sunk); border-radius: 99px; padding: 1px 7px; margin-inline-start: 4px; color: var(--muted); }
.crumbs.sub { margin-top: -6px; }
.panelbox.pad { padding: 16px; display: grid; gap: 14px; }
.pqrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pill.pq-draft { border-style: dashed; }
.pill.pq-sent { border-color: var(--brass); color: var(--brass); }
.pill.pq-changes_requested { border-color: var(--warn); color: var(--warn); }
.pill.pq-approved { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.pill.pq-rejected, .pill.pq-expired { color: var(--muted); text-decoration: line-through; }
.pill.pq-superseded { color: var(--muted); opacity: .75; }

.pqlist { display: grid; }
.pqcard { padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; gap: 8px; }
.pqcard:last-child { border-bottom: 0; }
.pqcard:hover { background: var(--sunk); }
.pqtop { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.pqnum { font-weight: 700; text-decoration: none; color: var(--ink); font-variant-numeric: tabular-nums; margin-inline-end: 6px; }
.pqtitle { font-weight: 600; margin: 4px 0 2px; }
.pqamt { text-align: end; display: grid; gap: 2px; }
.pqamt b { font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; }
.pqamt small { color: var(--muted); font-size: 12px; }
.pqversions { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.pqhead h2.pqnumber { margin: 0; display: flex; gap: 10px; align-items: center; font-variant-numeric: tabular-nums; }
.statusnote { margin: 6px 0 0; padding: 8px 12px; background: var(--sunk); border-radius: var(--radius); font-size: 14px; }
.pqgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.pqmain { display: grid; gap: 16px; min-width: 0; }
.pqside { position: sticky; top: 76px; display: grid; gap: 12px; }
.pqtotals { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; }
.pqtotals h3 { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.totals { margin: 0; display: grid; gap: 6px; }
.totals > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.totals dt { color: var(--muted); font-size: 14px; display: grid; }
.totals dt small { font-size: 11px; }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals .net { border-top: 1px solid var(--line); padding-top: 8px; }
.totals .net dt, .totals .net dd { color: var(--ink); font-weight: 700; }
.totals .grand { border-top: 2px solid var(--ink); padding-top: 8px; }
.totals .grand dt, .totals .grand dd { color: var(--ink); font-weight: 700; font-size: 16px; }
.internalbox { border: 1px dashed var(--brass); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; font-size: 14px; }
.internalbox .pill { justify-self: start; border-color: var(--brass); color: var(--brass); }
.internalbox div { display: flex; justify-content: space-between; gap: 10px; }
.internalbox b.neg { color: var(--warn); } .internalbox b.pos { color: var(--ok); }
.field.internal { border-inline-start: 3px solid var(--brass); padding-inline-start: 12px; }
.field.internal .pill { border-color: var(--brass); color: var(--brass); margin-inline-start: 6px; text-transform: none; letter-spacing: 0; }
.pqactions { display: grid; gap: 8px; }
.pqactions .btn { width: 100%; justify-content: center; }

.methods { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.methods legend { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.methodcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; cursor: pointer; background: var(--sunk); }
.methodcard:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.methodcard input { margin-top: 3px; accent-color: var(--accent); }
.methodcard span { display: grid; gap: 2px; }
.methodcard b { font-size: 14px; }
.methodcard small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.stageblock { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.stageblock:last-of-type { border-bottom: 0; }
.stageblock h3 { margin: 0; font-size: 15px; display: flex; justify-content: space-between; gap: 10px; }
.pqtable td { padding: 4px 4px; }
.pqtable .cell.desc { min-width: 200px; }
.pqtable .cell.unit { min-width: 70px; width: 90px; }
.pqtable .cell.num { min-width: 0; width: 100px; }
.pqtable select.cell { min-width: 120px; }
.input.big { font-size: 20px; min-height: 52px; font-variant-numeric: tabular-nums; }

.clientview h3 { margin: 0; }
table.cv { width: 100%; border-collapse: collapse; font-size: 14px; }
table.cv th, table.cv td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
table.cv th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
table.cv .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.cv small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.totals.cvt { max-width: 340px; margin-inline-start: auto; width: 100%; }
.cnote h4 { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.cnote p { margin: 0; white-space: normal; }

@media (max-width: 900px) {
  .pqgrid { grid-template-columns: 1fr; }
  .pqside { position: static; }
  .pqrow { grid-template-columns: 1fr 1fr; }
  .pqrow > :first-child { grid-column: 1 / -1; }
}

#printArea { display: none; }
@media print {
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing #printArea { display: block; color: #000; background: #fff; font-size: 12px; }
  body.printing { background: #fff; }
  #printArea .ph { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #000; padding-bottom: 12px; margin-bottom: 14px; }
  #printArea .co { font-size: 20px; font-weight: 700; }
  #printArea .meta, #printArea .to { display: grid; gap: 3px; }
  #printArea .meta div, #printArea .to div { display: flex; gap: 10px; justify-content: space-between; }
  #printArea .to { margin-bottom: 14px; max-width: 360px; }
  #printArea span { color: #555; }
  #printArea .panelbox { border: 0; padding: 0; }
  #printArea .pf { margin-top: 24px; font-size: 10px; color: #555; border-top: 1px solid #ccc; padding-top: 8px; }
  @page { margin: 16mm; }
}
.tabs a { text-decoration: none; }

/* ---------------------------------------------------------------- company logo */
.wslogo { height: 22px; width: auto; vertical-align: middle; margin-inline-end: 8px; border-radius: 3px; }
.coprofile { display: flex; gap: 18px; align-items: center; padding: 16px; flex-wrap: wrap; }
.logobox { width: 160px; height: 88px; border: 1px dashed var(--line); border-radius: var(--radius); display: grid; place-items: center; background: var(--sunk); overflow: hidden; padding: 8px; }
.logobox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cometa { display: grid; gap: 6px; flex: 1; min-width: 220px; }
.cometa .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pqlogo { max-height: 56px; max-width: 200px; object-fit: contain; display: block; }
.pqlogo.screen { margin: 4px 0 2px; max-height: 44px; }
#printArea .brand { display: flex; gap: 14px; align-items: center; }

/* ---------------------------------------------------------------- activity */
.actfilters { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--sunk); }
.actday { margin: 0; padding: 12px 16px 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.actlist { list-style: none; margin: 0; padding: 0; }
.actlist li { display: grid; grid-template-columns: 52px 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.actlist time { color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 4px; font-size: 13px; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.actline { padding-top: 3px; line-height: 1.45; overflow-wrap: anywhere; }
.actline small { display: block; margin-top: 2px; }
.actmore { padding: 14px; display: grid; justify-items: center; }
.actmore [hidden] { display: none; }
.pill.area-crew { border-color: var(--accent); color: var(--accent); }
.pill.area-budget, .pill.area-pqs { border-color: var(--brass); color: var(--brass); }
.pill.area-team { border-color: var(--ink); color: var(--ink); }
.pill.area-session { border-style: dashed; }
@media (max-width: 640px) {
  .actlist li { grid-template-columns: 44px minmax(0, 1fr); }
  .actlist .avatar, .actlist .pill { display: none; }
}
.arclist { list-style: none; margin: 0; padding: 8px 0; }
.arclist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.arclist li:last-child { border-bottom: 0; }
.arclist small { display: block; }

/* ---------------------------------------------------------------- outside access: public pages */
.pubbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.pubbar .in { max-width: 860px; margin: 0 auto; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pubbrand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pubbrand img { max-height: 40px; max-width: 160px; object-fit: contain; }
.pubbrand b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pubpage { max-width: 860px; margin: 0 auto; display: grid; gap: 16px; }
.pubfoot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px 16px 32px; }
.pubhead h1 { margin: 2px 0; }
.banner.ok { border-color: var(--ok); background: var(--ok-soft); }
.banner.ok b { color: var(--ok); }
.pubactions .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.verify h2, .signbox h2, .pubpage .panelbox.pad h2 { margin: 0; font-size: 18px; }
.codefield .input { max-width: 220px; letter-spacing: .3em; text-align: center; }
.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.thread li { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); max-width: 88%; }
.thread li.staff { background: var(--accent-soft); border-color: transparent; justify-self: end; }
.thread li.k-changes { border-color: var(--warn); }
.thread li.k-approval { border-color: var(--ok); background: var(--ok-soft); }
.thread .who { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.thread p { margin: 4px 0 0; overflow-wrap: anywhere; }
#sgPad { width: 100%; max-width: 640px; height: 200px; border: 1px dashed var(--line); border-radius: var(--radius); background: #fff; touch-action: none; display: block; }
.typedsig { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 40px; min-height: 64px; padding: 8px 12px; border-bottom: 2px solid var(--ink); color: var(--ink); }
.mine { list-style: none; margin: 0; padding: 0; }
.mine li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mine li small { display: block; }
.pill.sub-approved { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.pill.sub-rejected { border-color: var(--warn); color: var(--warn); }
.pill.sub-pending { border-color: var(--brass); color: var(--brass); }
@media print {
  #app.extpage .pubbar, #app.extpage .pubfoot, #app.extpage .pubactions, #app.extpage #stepBox, #app.extpage .actions, #app.extpage .banner,
  #app.extpage section[aria-labelledby="convH"] { display: none !important; }
  #app.extpage .pubpage { max-width: none; }
}

/* ---------------------------------------------------------------- outside access: staff panels */
.sendblock { display: grid; gap: 12px; }
.sendblock .inline { display: flex; gap: 8px; }
.sendblock .inline .input { flex: 1; font-size: 13px; }
.sendbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.linklist li:last-child { border-bottom: 0; }
.linklist small { display: block; }
.pqextra { display: grid; gap: 16px; margin-top: 16px; }
.pqextra h3 { margin: 0; font-size: 15px; }
.sigrecord { border-color: var(--ok); }
.sigrow { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.sigimg { max-width: 280px; max-height: 100px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; }
.kv { margin: 0; display: grid; gap: 4px; font-size: 14px; }
.kv > div { display: flex; gap: 10px; }
.kv dt { color: var(--muted); min-width: 90px; }
.kv dd { margin: 0; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; }
.replybox { display: flex; gap: 8px; align-items: flex-end; }
.replybox textarea { flex: 1; }
.approvals { border-color: var(--brass); }
.approvals > header { background: #fbf3e3; }
:root[data-theme="dark"] .approvals > header { background: #2b2414; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .approvals > header { background: #2b2414; } }
.sublist { list-style: none; margin: 0; padding: 0; }
.sublist li { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.3fr) minmax(160px, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sublist li:last-child { border-bottom: 0; }
.sublist small { display: block; }
.subwhat p { margin: 4px 0; font-size: 14px; }
.subact { display: flex; gap: 6px; }
@media (max-width: 760px) { .sublist li { grid-template-columns: 1fr; } }
.segbtn button { all: unset; text-align: center; padding: 9px 6px; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--sunk); border-inline-start: 1px solid var(--line); }
.segbtn button:first-child { border-inline-start: 0; }
.segbtn button.on { background: var(--accent); color: var(--accent-ink); }
.segbtn button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.signbox .seg { max-width: 320px; }

/* ---------------------------------------------------------------- clients */
.toolbar.clientbar { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 720px) { .toolbar.clientbar { grid-template-columns: 1fr; } }
.clientgroup > header h2 { text-transform: none; letter-spacing: .01em; font-size: 19px; }
.clientgroup > header h2 .linkish { font: inherit; color: inherit; }
.clientgroup > header h2 .alt { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.clientgroup .cohead { display: grid; gap: 2px; min-width: 0; }
.clientgroup .coright { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.clientgroup.archived { opacity: .7; }
.clientgroup > .hint.pad { margin: 0; padding: 12px 16px; }
.clientrows .crow .wa-user b { font-weight: 600; color: var(--muted); }
.peoplelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.otherrow { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) auto; gap: 8px; margin-bottom: 8px; }
.clientpick { display: grid; gap: 0; }
.newbox { border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 12px 0; margin: -4px 0 14px; background: var(--surface); }
.billto { display: grid; gap: 2px; font-size: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.billto .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
[dir="rtl"] .billto .lbl { letter-spacing: 0; }
.billto b { font-size: 16px; }
.billto .attn { margin-top: 4px; }
.addressee { margin: 0; font-size: 14px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.addressee b { color: var(--ink); }
@media print { #printArea .billto { border: 0; margin-bottom: 12px; } #printArea .billto div { display: block; } }

/* ---------------------------------------------------------------- crew on budget lines */
.vendorcell { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 150px; }
.vendorcell .cell { flex: 1 1 110px; min-width: 0; }
.crewbtn { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; padding: 0; }
.crewbtn:hover { color: var(--accent); border-color: var(--accent); }
.vendorcell.linked .crewbtn { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.vendorcell.pending .crewbtn { color: var(--brass); border-color: var(--brass); }
.crewwait { flex-basis: 100%; color: var(--brass); font-size: 11px; font-weight: 600; }
.banner.compact { padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.crewpick { list-style: none; margin: 0 0 14px; padding: 0; max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.crewpick li + li { border-top: 1px solid var(--line); }
.crewpick .pad { display: block; padding: 12px; }
.pickrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; text-align: start; background: none; border: 0; padding: 10px 12px; cursor: pointer; color: var(--ink); font: inherit; }
.pickrow:hover, .pickrow:focus-visible { background: var(--accent-soft); }
.pickrow.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pickrow small { grid-column: 1; color: var(--muted); font-size: 13px; }
.pickrow .rate { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; color: var(--muted); }
.newcrew { border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 12px; }
.newcrew summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.newcrew[open] summary { margin-bottom: 8px; }
.crewreq { margin-bottom: 16px; border-color: var(--brass); }
.crewreq > header { background: color-mix(in srgb, var(--brass) 12%, var(--surface)); }
.crewreq > header h2 { text-transform: none; letter-spacing: .01em; font-size: 18px; }
.crewreq ul { list-style: none; margin: 0; padding: 0; }
.crewreq li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); }
.crewreq li:first-child { border-top: 0; }
.crewreq .reqwho { display: grid; gap: 2px; min-width: 0; }
.crewreq .reqwho small { color: var(--muted); font-size: 13px; }
.crewreq .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.navbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 6px; border-radius: 9px; background: var(--brass); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }

/* ---------------------------------------------------------------- PQ document (screen, client page, PDF) */
/* A document is paper: it stays white with dark text in dark mode too. --brand comes from the company's colour. */
.docwrap { background: var(--sunk, #e9e7e2); border-radius: var(--radius); padding: 20px; overflow-x: auto; }
.docfor { margin: 0 0 8px; }
.pqdoc, .printdoc { --brand: #2B5C5A; --ink-d: #1b1b1b; --muted-d: #666; --line-d: #cfcfcf;
  color: var(--ink-d); background: #fff; font: 14px/1.55 var(--body); }
.pqdoc { max-width: 820px; margin: 0 auto; padding: 40px 48px 28px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06); border-radius: 4px; }
.pqdoc .dpagehead, .printdoc .dpagehead { text-align: center; display: grid; justify-items: center; gap: 2px; padding-bottom: 10px; width: 100%; margin-inline: auto; }
.dlogo { max-height: 64px; max-width: 220px; object-fit: contain; margin-bottom: 4px; }
.dco { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.dlegal { font-size: 12px; color: var(--muted-d); }
.dpagehead::after { content: ""; display: block; width: 62%; border-bottom: 1px solid var(--line-d); margin-top: 8px; }
.dband { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 12px auto 14px; padding: 7px 18px; max-width: 260px; text-align: center;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; border-radius: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dnum { text-align: center; font-weight: 700; font-size: 15px; letter-spacing: .02em; margin-bottom: 14px; }
.dmeta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dtax { display: grid; justify-items: end; gap: 4px; }
.dtax small { font-size: 10px; color: var(--muted-d); }
.dtax b { border: 1.5px solid var(--ink-d); padding: 4px 14px; font-size: 17px; letter-spacing: .04em; font-weight: 600; }
.dto { margin: 0 0 22px; display: grid; gap: 2px; }
.dto div { display: flex; gap: 6px; }
.dto dt { font-weight: 700; }
.dto dd { margin: 0; font-weight: 600; }
.dto small { color: var(--muted-d); font-weight: 400; }
.dsec { margin-top: 20px; break-inside: auto; }
.dsec h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink-d); padding-bottom: 6px; border-bottom: 1px solid var(--line-d); break-after: avoid; }
.dsec h3::before { content: ""; display: inline-block; width: 4px; height: 13px; background: var(--brand); margin-inline-end: 8px; vertical-align: -1px; border-radius: 1px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dbody p { margin: 0 0 6px; }
.dbody ul { margin: 2px 0 6px; padding-inline-start: 22px; }
.dbody ul ul { list-style-type: circle; margin: 2px 0; }
.dbody ul ul ul { list-style-type: square; }
.dbody li { margin: 3px 0; }
.dbody li::marker { color: var(--brand); }
.dtable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.dtable th, .dtable td { border: 1px solid var(--line-d); padding: 8px 10px; text-align: start; vertical-align: top; }
.dtable thead th { background: #f4f4f2; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dtable .n, .dtable .q { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dtable thead th.n, .dtable thead th.q { white-space: normal; }
.pqdoc [dir="auto"] { text-align: start; }
.dtable td small { display: block; color: var(--muted-d); font-size: 12px; margin-top: 2px; }
.dtable tfoot th { font-weight: 700; }
.dtable tfoot td { font-weight: 600; }
.dtable tfoot tr.tot th, .dtable tfoot tr.tot td { border-top: 2px solid var(--ink-d); }
.dtable tfoot tr.grand th, .dtable tfoot tr.grand td { font-weight: 800; background: #f4f4f2; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dexcl { margin: 8px 0 0; font-weight: 600; }
.dfoot { margin-top: 30px; text-align: center; justify-items: center; width: 100%; font-size: 11.5px; color: var(--muted-d); display: grid; gap: 1px; }
.dfoot::before { content: ""; display: block; width: 46%; margin: 0 auto 8px; border-top: 1px solid var(--line-d); }
@media (max-width: 640px) {
  .docwrap { padding: 8px; margin: 0 -8px; border-radius: 0; }
  .pqdoc { padding: 22px 12px 16px; }
  .dtable { font-size: 11px; table-layout: auto; }
  .dtable th, .dtable td { padding: 5px 4px; }
  .dtable td small { font-size: 10.5px; }
}
@media print {
  @page { size: A4; margin: 12mm 14mm 10mm; }
  body.printing #printArea .printdoc { box-shadow: none; padding: 0; max-width: none; }
  body.printing #printArea .pwrap { width: 100%; border-collapse: collapse; }
  body.printing #printArea .pwrap > thead td, body.printing #printArea .pwrap > tbody > tr > td, body.printing #printArea .pwrap > tfoot td { padding: 0; border: 0; }
  body.printing #printArea .pqbody { padding: 0; }
  body.printing #printArea .dfoot { margin: 14px 0 0; }
  body.printing #printArea .dband span { color: #fff; }
  body.printing #printArea .dtax small, body.printing #printArea .dfoot span { color: inherit; }
  body.printing #printArea .dpagehead { padding-bottom: 6px; }
  body.printing #printArea .dsec h3 { break-after: avoid; }
  body.printing #printArea .dtable tr { break-inside: avoid; }
}

/* sections editor */
.docedit .dochint h3 { margin: 0; font-size: 16px; }
.docedit .dochint .hint { margin: 2px 0 0; }
.seccard { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: grid; gap: 6px; background: var(--surface); }
.seccard + .seccard { margin-top: 10px; }
.sechead { display: flex; gap: 8px; align-items: center; }
.sechead .sech { flex: 1; font-weight: 600; }
.secbtns { display: flex; gap: 2px; }
.secbtns .btn { padding: 4px 8px; min-width: 30px; }
.sectools { display: flex; gap: 4px; flex-wrap: wrap; }
.sectools button { border: 1px solid var(--line); background: var(--sunk, transparent); color: var(--ink); border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; min-height: 26px; }
.sectools button:hover { border-color: var(--accent); color: var(--accent); }
.secb { font-family: var(--body); font-size: 14px; line-height: 1.5; resize: vertical; }
.secadd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.secadd select.small { max-width: 260px; padding: 6px 10px; font-size: 13px; }
.langpick .segbtn { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.langpick .segbtn label { position: relative; cursor: pointer; }
.langpick .segbtn input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.langpick .segbtn span { display: block; padding: 8px 18px; font-size: 13px; font-weight: 600; background: var(--sunk); color: var(--muted); }
.langpick .segbtn label + label span { border-inline-start: 1px solid var(--line); }
.langpick .segbtn input:checked + span { background: var(--accent); color: #fff; }
.langpick .segbtn input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

.salfield select { max-width: 200px; }
.salfield input { max-width: 200px; margin-top: 6px; }
.crow .c-n .sal { color: var(--muted); font-weight: 500; }

/* invoices */
.pill.inv-draft { border-style: dashed; }
.pill.inv-issued { border-color: var(--brass); color: var(--brass); }
.pill.inv-partly_paid { border-color: var(--brass); color: var(--brass); background: var(--sunk); }
.pill.inv-paid { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.pill.inv-overdue { border-color: var(--warn); color: var(--warn); }
.pill.inv-void { color: var(--muted); text-decoration: line-through; }
.pill.area-invoices { border-color: var(--ok); color: var(--ok); }
.invsource { display: grid; gap: 2px; margin-bottom: 12px; }
.quickamt { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.quickamt .inline { display: inline-flex; gap: 6px; align-items: center; }
.bankcard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; margin: 0 0 12px; }
.bankcard legend { font-weight: 600; padding: 0 6px; }
.bankcard.isarch { opacity: .65; }
.ddates { display: grid; gap: 3px; }
.dbank dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 20px; margin: 0; }
.dbank dl div { display: flex; gap: 6px; }
.dbank dt { font-weight: 700; white-space: nowrap; }
.dbank dt::after { content: ":"; }
.dbank dd { margin: 0; overflow-wrap: anywhere; }
.isvoid { position: relative; }
.dvoid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1;
  font-size: 110px; font-weight: 800; letter-spacing: .1em; color: rgba(200, 16, 46, .14); transform: rotate(-24deg); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media (max-width: 640px) { .dvoid { font-size: 64px; } }

/* cast book */
.toolbar.casttools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar.casttools #caQ { flex: 2 1 240px; }
.toolbar.casttools select, .toolbar.casttools input { flex: 1 1 130px; width: auto; }
.toolbar.casttools.pro { position: static; margin-top: -4px; }
.toolbar.casttools.pro .lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.toolbar.casttools.locked { opacity: .7; }
.prolock { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; background: var(--brass); color: #fff; vertical-align: 1px; }
.castgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.castcard { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.castcard:hover { border-color: var(--accent); }
.castcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.castcard.inactive { opacity: .6; }
.castcard .ph { position: relative; aspect-ratio: 4 / 5; background: var(--sunk); display: grid; place-items: center; overflow: hidden; }
.castcard .ph img { width: 100%; height: 100%; object-fit: cover; }
.castcard .ini { font-family: var(--display); font-size: 42px; font-weight: 700; color: var(--muted); }
.castcard .tags { position: absolute; inset: 8px 8px auto 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; }
.tag.kid { background: var(--brass); }
.tag.bad { background: var(--warn); }
.tag.muted { background: #666; }
.tag.drive { background: #1a73e8; }
.castcard .info { padding: 10px 12px 12px; display: grid; gap: 2px; }
.castcard .info b { font-size: 15px; }
.castcard .info small { color: var(--muted); font-size: 12.5px; }
.castcard .stars i { opacity: .25; font-style: normal; }
.castcard .rates { color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.castphotos { margin-bottom: 14px; }
.castphotos .secthead { display: flex; justify-content: space-between; align-items: baseline; }
.castphotos h4 { margin: 0 0 8px; }
.photostrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.pthumb { position: relative; margin: 0; flex: 0 0 120px; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--sunk); border: 1px solid var(--line); }
.pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pthumb .tag { position: absolute; top: 6px; inset-inline-start: 6px; }
.pthumb .tag.drive { top: auto; bottom: 6px; }
.pthumb .pacts { position: absolute; top: 4px; inset-inline-end: 4px; display: flex; gap: 4px; }
.pthumb .pacts .btn { padding: 2px 7px; min-height: 0; font-size: 12px; background: rgba(255,255,255,.9); }
.photoadd { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.photoadd label.btn { cursor: pointer; }
.drivebox { display: grid; gap: 6px; margin-top: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius); }
.drivebox .btn { justify-self: start; }
.reel { position: relative; aspect-ratio: 16 / 9; margin-top: 8px; border-radius: var(--radius); overflow: hidden; background: #000; }
.reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ratetable { width: 100%; border-collapse: collapse; }
.ratetable th, .ratetable td { padding: 4px; text-align: start; font-size: 13px; }
.ratetable th[scope=row] { font-weight: 600; white-space: nowrap; }
.ratetable td.margin { font-variant-numeric: tabular-nums; color: var(--ok); white-space: nowrap; }
.ratetable td.margin.neg { color: var(--warn); }
.ratetable .input { min-width: 80px; }
.profields { border: 1px solid var(--line); border-radius: var(--radius); }
.profields legend h4 { margin: 0; }
.profields.locked { opacity: .65; }
.profields h5, .sysblock h5 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.quickcontact { display: flex; gap: 6px; flex-wrap: wrap; }
.books { display: grid; gap: 4px; }
.books .booklbl { min-width: 46px; color: var(--muted); }
.pill.area-cast { border-color: var(--accent); color: var(--accent); }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.9); display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 84vh; object-fit: contain; }
.lightbox .lbbar { position: absolute; top: 12px; inset-inline: 12px; display: flex; justify-content: flex-end; gap: 8px; align-items: center; color: #fff; }
.lightbox .lbbar span { margin-inline-end: auto; }
.lbnav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); color: #fff; border: 0; font-size: 34px; width: 48px; height: 64px; border-radius: 6px; cursor: pointer; }
.lbnav.prev { inset-inline-start: 10px; } .lbnav.next { inset-inline-end: 10px; }
@media (max-width: 640px) { .castgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ratetable .input { min-width: 64px; } }
.toolbar.casttools.pro select { flex: 0 1 240px; }

.crows .crow.inactive { opacity: .6; }
.toolbar.crewtools { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
@media (max-width: 720px) { .toolbar.crewtools { grid-template-columns: 1fr 1fr; } }

.exportopts { display: grid; gap: 10px; margin: 14px 0; }
.exportopts .btn { display: grid; gap: 2px; justify-items: start; text-align: start; padding: 12px 14px; height: auto; white-space: normal; }
.exportopts .btn small { color: var(--muted); font-weight: 400; }

.pastimports { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.pastimports h4 { margin: 0 0 6px; }

.backupbox { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--line); }
.backupbox p { margin: 2px 0 0; }

.photopick { border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; }
.photopick .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.photopick label.btn { cursor: pointer; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.pager .pnums { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pager .pnums .btn { min-width: 34px; padding-inline: 8px; }
.pager .psize { display: flex; gap: 6px; align-items: center; }
.pager .psize select { width: auto; padding-block: 4px; }

/* ---------- Cast numbers & casting shortlists ---------- */
.casttabs { margin: 0 0 16px; }
.casttabs button { all: unset; cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; }
.casttabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.casttabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.casttabs .n:not(:empty) { font-size: 11px; background: var(--sunk); border-radius: 99px; padding: 1px 7px; margin-inline-start: 4px; }
.castcard { position: relative; }
.castno { font-family: var(--mono); font-weight: 600; letter-spacing: .02em; }
.castno.badge { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; background: rgba(15,18,20,.78); color: #fff; font-size: 12px; padding: 2px 7px; border-radius: 4px; }
.castno.badge.big { font-size: 15px; padding: 4px 10px; }
.pickmark { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #fff; background: rgba(15,18,20,.35); color: transparent; font-weight: 700; }
.castcard.picked { outline: 3px solid var(--accent); outline-offset: -3px; }
.castcard.picked .pickmark { background: var(--accent); color: var(--accent-ink); }
.pickbar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--radius); margin: 0 0 12px; }
.pickbar .btn.ghost { color: var(--bg); border-color: transparent; background: transparent; }
.sltop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sltop .hint { margin: 0; max-width: 60ch; }
.sllist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slrow { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.slrow:hover { border-color: var(--accent); }
.slrow:focus-visible { outline: 2px solid var(--accent); }
.slrow b { display: block; font-size: 16px; }
.slnums { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.pill.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.pill.muted { opacity: .75; }
.slhead { margin-bottom: 14px; }
.slhrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.slhrow h2 { margin: 0; font-family: var(--display); font-size: 26px; }
.slhrow .hint { margin: 2px 0 0; }
.slsees { margin: 10px 0 0; font-size: 13px; color: var(--muted); background: var(--sunk); border: 1px dashed var(--line); border-radius: var(--radius); padding: 8px 12px; }
.slanswers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.slanswers li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.slanswers li:first-child { border-top: 0; padding-top: 0; }
.slanswers small { display: block; }
.slnote { margin: 6px 0 0; font-style: italic; }
.slcounts { display: flex; gap: 6px; align-items: flex-start; }
.pk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--sunk); }
.pk.yes { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.pk.maybe { border-color: var(--brass); color: var(--brass); }
.pk.no { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.sladd .crewpick { max-height: 320px; overflow: auto; }
.sladd .pickrow { display: flex; gap: 10px; align-items: center; }
.slfilter { gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.chipbtn { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); }
.chipbtn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chipbtn:focus-visible { outline: 2px solid var(--accent); }
.slgroup { margin-bottom: 18px; }
.slgroup > header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.slgroup > header h3 { margin: 0; font-family: var(--display); font-size: 20px; }
.slpeople { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slpeople li { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.slpeople li.inactive { opacity: .65; }
.slthumb { width: 56px; height: 70px; border-radius: 4px; overflow: hidden; background: var(--sunk); display: block; flex: none; }
.slthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pickrow .slthumb { width: 40px; height: 50px; }
.slwho b { display: block; }
.slwho .linkish { font-weight: 600; }
.slpicks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.slctl { display: grid; gap: 6px; }
.slbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.input.small { padding: 6px 8px; font-size: 13px; min-height: 34px; }
.slfoot { margin-top: 16px; }
.slroles { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 6px; }
.slroles li { display: flex; align-items: center; gap: 8px; background: var(--sunk); border-radius: var(--radius); padding: 6px 10px; }
.slroles li .btn { margin-inline-start: auto; }
.slfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-bottom: 8px; }
.slphotopick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.slphotopick .pthumb { all: unset; position: relative; cursor: pointer; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sunk); outline: 2px solid transparent; }
.slphotopick .pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slphotopick .pthumb.on { outline: 3px solid var(--accent); outline-offset: -3px; }
.slphotopick .ord:not(:empty) { position: absolute; top: 6px; inset-inline-end: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; }
@media (max-width: 720px) {
  .slpeople li { grid-template-columns: 48px minmax(0, 1fr); }
  .slctl { grid-column: 1 / -1; }
  .slfields { grid-template-columns: 1fr; }
}

/* client shortlist page */
.pcgroup { margin: 0 0 22px; }
.pcgroup > header h2 { margin: 0 0 4px; font-family: var(--display); font-size: 24px; }
.pcgroup > header .hint { margin: 0 0 10px; }
.pcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pccard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.pccard.p-yes { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.pccard.p-maybe { border-color: var(--brass); }
.pccard.p-no { opacity: .72; }
.pcph { position: relative; aspect-ratio: 4 / 5; background: var(--sunk); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pcph img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.pcph .ini { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 28px; color: var(--muted); }
.wm { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; color: rgba(255,255,255,.42);
  font: 700 clamp(14px, 4vw, 22px)/1.25 var(--display); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-24deg);
  text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pcthumbs { display: flex; gap: 4px; padding: 4px; background: var(--sunk); overflow-x: auto; }
.pcthumbs button { all: unset; cursor: pointer; width: 46px; height: 56px; border-radius: 3px; overflow: hidden; flex: none; }
.pcthumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcinfo { padding: 10px 12px 0; font-size: 14px; }
.pcinfo p { margin: 0 0 6px; }
.pcinfo .rate b { font-family: var(--mono); }
.pcreel summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.pcpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 12px 6px; margin-top: auto; }
.pcpick .pk { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 9px 4px; border-radius: var(--radius); font-weight: 600; font-size: 14px;
  border: 1px solid var(--line); background: var(--surface); }
.pcpick .pk:disabled { opacity: .5; cursor: not-allowed; }
.pcpick .pk:focus-visible { outline: 2px solid var(--accent); }
.pcpick .pk.yes.on { background: var(--ok); color: #fff; border-color: var(--ok); }
.pcpick .pk.maybe.on { background: var(--brass); color: #fff; border-color: var(--brass); }
.pcpick .pk.no.on { background: var(--warn); color: #fff; border-color: var(--warn); }
.pccard [data-pnote] { margin: 0 12px 12px; width: calc(100% - 24px); }
.pcsend { margin-top: 10px; }
.lbimg { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lbimg .wm { font-size: clamp(20px, 5vw, 44px); }
.toolbar.slfilter { display: flex; flex-wrap: wrap; grid-template-columns: none; }
@media (max-width: 720px) { .pcgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .pcpick .pk { font-size: 13px; padding: 8px 2px; } }

/* ---------- Header with menu ---------- */
.topbar .in { flex-wrap: nowrap; gap: 10px; }
.menubtn { all: unset; position: relative; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); color: var(--ink); flex: none; }
.menubtn:hover { background: var(--sunk); }
.menubtn:focus-visible { outline: 2px solid var(--accent); }
.menudot { position: absolute; top: 7px; inset-inline-end: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); border: 2px solid var(--surface); }
.topbar .here { color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar .here .sep { margin: 0 10px 0 2px; opacity: .5; }
.topbar .helplink { width: 36px; min-height: 36px; padding: 0; font-weight: 700; font-size: 16px; border-radius: 50%; }
.menuscrim { position: fixed; inset: 0; background: rgba(10,12,14,.35); z-index: 40; }
.sidemenu { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(300px, 86vw); z-index: 41; background: var(--surface); border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
@media (prefers-reduced-motion: no-preference) { .sidemenu { animation: menuin .16s ease-out; } @keyframes menuin { from { transform: translateX(-16px); opacity: .5; } }
  [dir="rtl"] .sidemenu { animation-name: menuinrtl; } @keyframes menuinrtl { from { transform: translateX(16px); opacity: .5; } } }
.sidemenu .smhead { padding: 18px 16px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.sidemenu .smhead .lbl { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sidemenu .wsselect { max-width: none; width: 100%; }
.sidemenu nav { display: flex; flex-direction: column; padding: 10px 8px; gap: 2px; flex: 1; }
.sidemenu nav a { display: flex; align-items: center; padding: 10px 12px; border-radius: var(--radius); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; }
.sidemenu nav a:hover { background: var(--sunk); }
.sidemenu nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.sidemenu nav a .navbadge { margin-inline-start: auto; }
.sidemenu .smgroup { margin: 12px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sidemenu .smfoot { border-top: 1px solid var(--line); padding: 14px 16px; display: grid; gap: 10px; }
.sidemenu .who { display: grid; min-width: 0; }
.sidemenu .who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
body.menuopen { overflow: hidden; }
@media (max-width: 560px) { .topbar .here { display: none; } .topbar .wordmark { font-size: 16px; } .topbar > .in > .avatar { display: none; } }

/* ---------- Help: "?" buttons, side panel, Help page ---------- */
.helpbtn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--muted);
  vertical-align: middle; flex: none; }
.helpbtn:hover { color: var(--accent); background: var(--accent-soft); }
.helpbtn:focus-visible { outline: 2px solid var(--accent); }
.helpbtn.h1 { width: 30px; height: 30px; margin-inline-start: 8px; vertical-align: 6px; }
.helpbtn.h1 svg { width: 20px; height: 20px; }
.helpbtn.bar { width: 34px; height: 34px; border: 1px solid var(--line); }
.pagehead h1 { display: inline-block; vertical-align: middle; }
.hwrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.helpscrim { position: fixed; inset: 0; z-index: 70; background: rgba(10,12,14,.3); }
.helppanel { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(440px, 100%); z-index: 71; background: var(--surface); border-inline-start: 1px solid var(--line);
  display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.helppanel:focus { outline: none; }
.helppanel > header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.helppanel .helpbody { padding: 18px 20px; overflow-y: auto; flex: 1; }
.helppanel > footer { padding: 12px 18px; border-top: 1px solid var(--line); }
.guidet { margin: 0 0 4px; font-family: var(--display); font-size: 24px; line-height: 1.15; }
.guidelead { margin: 0 0 14px; color: var(--muted); }
.guidesteps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; }
.guidesteps li { counter-increment: st; position: relative; padding-inline-start: 36px; line-height: 1.55; }
.guidesteps li::before { content: counter(st); position: absolute; inset-inline-start: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.guidetips { margin-top: 16px; background: var(--sunk); border-radius: var(--radius); padding: 12px 14px; font-size: 14px; }
.guidetips ul { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.helpwrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 18px; }
.helptoc { position: sticky; top: 76px; display: grid; gap: 14px; max-height: calc(100vh - 96px); overflow-y: auto; padding-bottom: 12px; }
.helptoc b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.helptoc ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.helptoc a { display: block; padding: 5px 8px; border-radius: var(--radius); text-decoration: none; color: var(--ink); font-size: 14px; }
.helptoc a:hover { background: var(--sunk); }
.helpall { display: grid; gap: 22px; }
.helpgroup { display: grid; gap: 12px; }
.helpgroup > h2 { margin: 0; }
.guide { scroll-margin-top: 80px; }
.guide.flash { box-shadow: 0 0 0 2px var(--accent); }
.guide .guidet { font-size: 22px; }
.docbox { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--line); }
.docbox p { margin: 2px 0 0; }
@media (max-width: 820px) { .helpwrap { grid-template-columns: 1fr; } .helptoc { position: static; max-height: none; } .helptoc .tocgroup { display: none; } }

/* menu kept open beside the page on a computer */
.smhide { display: none; justify-self: end; margin-bottom: 2px; }
@media (min-width: 1100px) {
  body.menudocked .sidemenu { width: 260px; box-shadow: none; animation: none; }
  body.menudocked .smhide { display: inline-flex; }
  body.menudocked #app { padding-inline-start: 260px; }
  body.menudocked .menudot { display: none; }
}

/* ---------- Preliminary estimates ---------- */
.pill.est-draft { border-style: dashed; }
.pill.est-sent { border-color: var(--brass); color: var(--brass); }
.pill.est-go_ahead { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.pill.est-converted { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.pill.est-declined, .pill.est-expired { color: var(--muted); text-decoration: line-through; }
.estcard { border-style: dashed; }
.estbox { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-soft); display: grid; gap: 4px; }
.estbox span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.estbox b { font-size: 20px; }
.estbox small { color: var(--muted); }
.estopts h3 { margin: 0 0 10px; }
.segbtn.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.estline { display: block; color: var(--accent); font-size: 12px; margin-top: 2px; }
.pqdoc .dest .dtable td.n { white-space: nowrap; }

.slwho .onbudget { margin-top: 4px; }
.slwho [data-book] { font-size: 13px; margin-top: 2px; }
/* a choice inside a field reads as normal text, not as the field's label */
.field > label.check { font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; }

/* ---------------------------------------------------------------- document design (add-on) */
.df-montserrat { font-family: "Montserrat", "IBM Plex Sans Arabic", sans-serif; }
.df-poppins { font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif; }
.df-cairo { font-family: "Cairo", sans-serif; }
.df-tajawal { font-family: "Tajawal", sans-serif; }
.dcover { margin: -40px -48px 34px; aspect-ratio: 3 / 2; background: #222 center / cover no-repeat; border-radius: 4px 4px 0 0; display: grid; place-items: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dcover { position: relative; overflow: hidden; }
.dcover .dshade { position: absolute; inset: 0; background: rgba(0,0,0,.55); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dcover img, .dcover b { position: relative; }
.dcover img { max-width: 46%; max-height: 34%; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.dcover b { color: #fff; font-size: 30px; letter-spacing: .06em; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
/* icon footer */
.dfoot.dficons { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; gap: 10px 34px; text-align: start; justify-items: start; }
.dficons .fi { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.dficons .fi i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; flex: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dficons .fi i svg { width: 13px; height: 13px; }
.dficons .fi > span { white-space: nowrap; }
/* bold: strong colour, header on one side */
.d-bold .dpagehead { justify-items: start; text-align: start; }
.d-bold .dpagehead::after { width: 100%; border-bottom: 3px solid var(--brand); }
.d-bold .dband { max-width: none; justify-content: flex-start; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 16px; border-radius: 0; }
.d-bold .dnum { text-align: end; margin-top: -48px; padding-inline-end: 16px; color: #fff; position: relative; }
.d-bold .dtable thead th { background: var(--brand); color: #fff; border-color: var(--brand); }
.d-bold .dtable tfoot tr.grand th, .d-bold .dtable tfoot tr.grand td { background: var(--brand); color: #fff; border-color: var(--brand); }
.d-bold .dsec h3 { border-bottom: 2px solid var(--brand); }
/* minimal: hairlines, no fills */
.d-minimal .dpagehead::after { width: 100%; }
.d-minimal .dband { background: none; color: var(--brand); max-width: none; font-size: 20px; font-weight: 300; letter-spacing: .18em; text-transform: uppercase; padding: 4px 0; }
.d-minimal .dtable th, .d-minimal .dtable td { border-width: 0 0 1px; }
.d-minimal .dtable thead th { background: none; border-bottom: 1.5px solid var(--ink-d); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-d); }
.d-minimal .dtable tfoot tr.grand th, .d-minimal .dtable tfoot tr.grand td { background: none; border-top: 1.5px solid var(--brand); color: var(--brand); }
.d-minimal .dsec h3 { border: 0; font-weight: 600; }
.d-minimal .dsec h3::before { display: none; }
.d-minimal .dficons .fi i { background: none; color: var(--brand); border: 1px solid var(--brand); }
/* a made-for-you company template: black pages */
.pqdoc.d-dark, .printdoc.d-dark { --ink-d: #fff; --muted-d: #bdbdbd; --line-d: #fff; background: #000; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.d-dark .dsec h3 { color: #fff; border-color: #3a3a3a; }
.d-dark .dtable thead th { background: #d9d9d9; color: #000; border-color: #d9d9d9; }
.d-dark .dtable td, .d-dark .dtable th { border-color: #fff; }
.d-dark .dtable tfoot tr.grand th, .d-dark .dtable tfoot tr.grand td, .d-dark .dtable tfoot tr.tot th, .d-dark .dtable tfoot tr.tot td { background: #e6e6e6; color: #000; border-color: #fff; }
.d-dark .dtable tfoot tr.tot th, .d-dark .dtable tfoot tr.tot td { border-top: 1px solid #fff; }
.d-dark .dficons .fi i { background: none; color: var(--brand); width: 20px; }
.d-dark .dficons .fi i svg { width: 18px; height: 18px; }
.d-dark .dfoot::before { display: none; }
.d-dark .dvoid { color: #ff6b6b; }
.dfhead { display: flex; align-items: center; gap: 12px; margin: 4px 0 22px; }
.dficon { height: 34px; width: auto; flex: none; }
.d-dark .dftitle { color: #fff; }
.dftitle { font-weight: 600; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.dfline { flex: 1; border-top: 2px solid var(--brand); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dfmeta { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.dfmeta .dto { margin: 0; }
.d-focus .dto { gap: 4px; font-size: 15px; }
.d-focus .dto dt { font-weight: 400; }
.d-focus .dto dd { color: var(--brand); font-weight: 400; }
.d-focus .dfright { font-size: 15px; gap: 4px; }
.d-focus .dfright dd { color: var(--brand); font-weight: 600; }
.d-focus .dbody p { text-align: justify; }
.dfright { margin: 0; display: grid; gap: 2px; justify-items: end; }
.dfright div { display: flex; gap: 6px; }
.dfright dt { font-weight: 700; text-transform: uppercase; }
.dfright dd { margin: 0; }
.d-focus .dsec h3 { border: 0; padding-bottom: 0; margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.d-focus .dsec h3::before { display: none; }
@media (max-width: 640px) {
  .dcover { margin: -22px -12px 22px; }
  .dfoot.dficons { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 14px; }
  .dficons .fi > span { white-space: normal; overflow-wrap: anywhere; }
  .dfright { justify-items: start; }
  .dftitle { font-size: 15px; }
  .d-bold .dnum { margin-top: 0; text-align: center; color: inherit; }
}
@media print {
  html.printedge body.printing #printArea .printdoc { padding: 0 14mm; }
  html.printedge body.printing #printArea .pwrap > thead td { padding-top: 12mm; }
  html.printedge body.printing #printArea .pwrap > tfoot td { padding-bottom: 9mm; }
  html.printdark, html.printdark body.printing, html.printdark body.printing #printArea { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html.printdark body.printing #printArea { color: #fff; }
  body.printing #printArea .dcover.pcover { margin: 0; width: 210mm; height: 296mm; border-radius: 0; aspect-ratio: auto; break-after: page; page-break-after: always; }
  body.printing #printArea .d-bold .dnum { color: #fff; }
}
.dfoot.dficons::before { grid-column: 1 / -1; justify-self: center; width: 46%; }
.dtable .oq { color: var(--muted-d); font-weight: 400; white-space: nowrap; }
.dtotalonly tfoot td.n, .dtotalonly tfoot td:last-child { width: 30%; }

/* print: footers at the bottom of the page */
.pmeasure { position: absolute; left: -10000px; top: 0; width: 210mm; box-sizing: border-box; padding: 0 14mm; visibility: hidden; }
.pfixfoot { display: none; }
.plastspace > i { display: block; height: 8px; }
@page edge { size: A4; margin: 0; }
@media print {
  html.printedge body.printing #printArea { page: edge; }
  body.printing #printArea .pfixfoot { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0; max-width: none; box-shadow: none; background: transparent; }
  html.printedge body.printing #printArea .pfixfoot { padding: 0 14mm; bottom: 9mm; }
  body.printing #printArea .pfixfoot .dfoot { margin: 0; }
  body.printing #printArea .pcoverwrap { position: relative; z-index: 2; }
  body.printing #printArea .plastspace + .dfoot { margin-top: 0; }
  body.printing #printArea .plastspace > i { display: block; height: 8px; }
}
@media print { body.printing #printArea .dtable tfoot { display: table-row-group; } }

/* "start on a new page": a dashed line on screen, a real page break in the PDF */
.pqdoc .dsec.dbreak { position: relative; margin-top: 34px; padding-top: 18px; border-top: 1.5px dashed var(--line-d); }
.pqdoc .dsec.dbreak::before { content: attr(data-break); position: absolute; top: -9px; inset-inline-start: 50%; transform: translateX(-50%); padding: 0 8px;
  background: #fff; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-d); }
.pqdoc.d-dark .dsec.dbreak::before { background: #000; }
.sectools .secbreak { margin-inline-start: auto; }
.sectools .secbreak.on { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
@media print {
  body.printing #printArea .dsec.dbreak { break-before: page; page-break-before: always; margin-top: 0; padding-top: 0; border: 0; }
  body.printing #printArea .dsec.dbreak::before { content: none; display: none; }
}

/* my profile */
.profileform { max-width: 560px; display: grid; gap: 14px; }
.pfemail { padding: 9px 0; font-weight: 600; }
a.avatar { text-decoration: none; }
a.avatar:hover, a.avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.usermenu { color: inherit; text-decoration: none; border-radius: var(--radius); padding: 4px; margin: -4px; }
a.usermenu:hover, a.usermenu[aria-current="page"] { background: var(--sunk); }
.row .em.jt { color: var(--ink); }

/* ---------------------------------------------------------------- plans */
.planbars:empty { display: none; }
.planbar { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--sunk); }
body.menudocked .planbars { padding-inline-start: 260px; }
.planbar.notice { background: #eef4ff; color: #1d3a6e; }
.planbar.notice.warn, .planbar.grace { background: #fff6e0; color: #5a4100; border-color: #f0d88a; }
.planbar.grace.failed { background: #fde8e6; color: #6d1b13; border-color: #f2b8b0; }
.planbar .pbtxt { flex: 1 1 360px; display: grid; gap: 2px; }
.planbar .pbtxt ul { margin: 4px 0 0; padding-inline-start: 20px; font-size: 13px; }
.planbar .pbcount { display: grid; text-align: center; padding: 4px 12px; border-radius: var(--radius); background: rgba(255,255,255,.6); }
.planbar .pbcount .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.planbar .pbcount b { font-size: 18px; font-variant-numeric: tabular-nums; }
.planbar .pbact { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
@media (prefers-color-scheme: dark) {
  .planbar.notice { background: #1b2a44; color: #cfe0ff; }
  .planbar.notice.warn, .planbar.grace { background: #3a2f12; color: #ffe7a6; border-color: #5c4a14; }
  .planbar.grace.failed { background: #3d1814; color: #ffc9c1; border-color: #6a2a22; }
  .planbar .pbcount { background: rgba(0,0,0,.25); }
}
.curplan .cphead { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.curplan h2 { margin: 2px 0; font-size: 26px; }
.curplan .cpwhen { display: grid; gap: 2px; text-align: end; color: var(--muted); font-size: 13px; }
.curplan .cpuse { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
.curplan .cpuse > div { display: grid; gap: 4px; }
.curplan .lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.meter { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--accent); }
.cppending, .cprequests { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cyclepick { display: inline-flex; margin: 18px 0 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cyclepick label { position: relative; cursor: pointer; }
.cyclepick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cyclepick span { display: block; padding: 8px 18px; font-size: 13px; font-weight: 600; background: var(--sunk); color: var(--muted); }
.cyclepick label + label span { border-inline-start: 1px solid var(--line); }
.cyclepick input:checked + span { background: var(--accent); color: #fff; }
.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.plancard { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--card, var(--bg)); }
.plancard.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plancard h3 { margin: 0; font-size: 19px; }
.plancard .hint { margin: 0; }
.plancard .price { display: grid; gap: 1px; }
.plancard .price b { font-size: 28px; line-height: 1.1; }
.plancard .price span { color: var(--muted); font-size: 13px; }
.plancard .price small { color: var(--muted); }
.pfeat { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.pfeat li::before { content: "✓"; color: var(--accent); font-weight: 700; margin-inline-end: 8px; }
.pfeat li.no { color: var(--muted); text-decoration: line-through; }
.pfeat li.no::before { content: "–"; color: var(--muted); }
.plancard .pact { margin-top: auto; padding-top: 6px; }
.sechead { margin: 28px 0 10px; font-size: 18px; }
.plfoot { margin-top: 18px; }
.warnbox { border: 1px solid #f0d88a; background: #fff6e0; color: #5a4100; border-radius: var(--radius); padding: 12px 14px; margin: 10px 0; }
.warnbox ul { margin: 6px 0; padding-inline-start: 20px; }
@media (prefers-color-scheme: dark) { .warnbox { background: #3a2f12; color: #ffe7a6; border-color: #5c4a14; } }
.planlock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border: 1px dashed var(--line); border-radius: var(--radius); margin: 10px 16px; color: var(--muted); }
.lockscreen { min-height: 60vh; display: grid; place-items: center; padding: 30px 0; }
.lockcard { max-width: 520px; text-align: center; display: grid; gap: 10px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card, var(--bg)); }
.lockcard.wide { max-width: 680px; text-align: start; }
body.locked .page, body.locked .sidemenu nav { filter: grayscale(1); }
body.locked .sidemenu nav { opacity: .5; pointer-events: none; }
.seatpick { display: grid; gap: 6px; }
.seatrow { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.seatrow span { display: grid; }
.seatrow small { color: var(--muted); }
.needline { font-weight: 600; }
.hintlist { margin: 6px 0; padding-inline-start: 20px; color: var(--muted); }

/* ---------------------------------------------------------------- admin (admin.behindthesets.com) */
.adm { min-height: 100vh; }
.admtop { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.admtop .spacer { flex: 1; }
.admnav { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 20px; border-bottom: 1px solid var(--line); background: var(--sunk); }
.admnav a { padding: 6px 12px; border-radius: var(--radius); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.admnav a[aria-current="page"] { background: var(--accent); color: #fff; }
.admmain { max-width: 1200px; margin: 0 auto; padding: 20px; display: grid; gap: 16px; }
.admmain h1 { margin: 0; }
.admstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.admstats .stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 2px; }
.admstats .stat span { font-size: 12px; color: var(--muted); }
.admstats .stat b { font-size: 22px; }
.admtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admtable th, .admtable td { text-align: start; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admtable th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.admtable tr.muted td { opacity: .55; }
.admtable code { font-size: 11.5px; overflow-wrap: anywhere; }
.admbar { display: flex; gap: 10px; flex-wrap: wrap; }
.admbar .input { max-width: 420px; }
.admform, .admgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; align-items: end; }
.admform .full, .admgrid .full { grid-column: 1 / -1; }
.admrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.admrow:last-child { border-bottom: 0; }
.admrow .input { width: auto; }
.panelbox.danger { border-color: #e4a29b; }
.admgate { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.admcard { width: min(440px, 100%); display: grid; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); }
.admcard .qr { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; justify-self: center; }
.codein { font-size: 24px; letter-spacing: .3em; text-align: center; }
.pill.warn { background: #fff0d1; color: #6b4a00; }