/* =====================================================================================================
   Portal UI layer 2: cards, forms, notes, lists, photos, dialogs, mobile.
   Same colours and theme as portal.css. It only changes the shape, spacing and hierarchy, and it works in dark
   mode because it uses the same variables. Old class names keep working (.card .ch .rows .banner .warnbox).
   ===================================================================================================== */
:root{
  --r-card:16px;--r-ctl:10px;
  --sh-card:0 1px 2px rgba(15,23,42,.04),0 10px 28px -14px rgba(15,23,42,.14);
  --n-info-bg:#eff6ff;--n-info-bd:#bfdbfe;--n-info-tx:#1e3a8a;
  --n-warn-bg:#fffbeb;--n-warn-bd:#fde68a;--n-warn-tx:#78350f;
  --n-bad-bg:#fef2f2;--n-bad-bd:#fecaca;--n-bad-tx:#7f1d1d;
  --n-ok-bg:#f0fdf4;--n-ok-bd:#bbf7d0;--n-ok-tx:#14532d;
}
html[data-theme="dark"]{
  --sh-card:0 1px 2px rgba(0,0,0,.5),0 12px 30px -14px rgba(0,0,0,.7);
  --n-info-bg:rgba(59,130,246,.12);--n-info-bd:rgba(96,165,250,.35);--n-info-tx:#bfdbfe;
  --n-warn-bg:rgba(245,158,11,.12);--n-warn-bd:rgba(251,191,36,.35);--n-warn-tx:#fde68a;
  --n-bad-bg:rgba(239,68,68,.13);--n-bad-bd:rgba(248,113,113,.4);--n-bad-tx:#fecaca;
  --n-ok-bg:rgba(34,197,94,.12);--n-ok-bd:rgba(74,222,128,.35);--n-ok-tx:#bbf7d0;
}

/* ---------- cards ---------- */
.card{border-radius:var(--r-card);padding:24px;box-shadow:var(--sh-card)}
.card.pad0{padding:0}
.card.pad0 > .ch,.card.pad0 > .card-head{padding:20px 24px 16px;margin:0;border-bottom:1px solid var(--line)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.card-head > div{min-width:0}
.card-title{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.card-sub{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:3px;line-height:1.45}
.card-head .head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ch{margin-bottom:18px}
.ch h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.count-pill{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:9999px;background:var(--surface-3);color:var(--ink2);font-size:12px;font-weight:700}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:9999px;font-size:11.5px;font-weight:700;background:var(--surface-3);color:var(--ink2)}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status-pill.ok{background:var(--n-ok-bg);color:var(--n-ok-tx)}
.status-pill.warn{background:var(--n-warn-bg);color:var(--n-warn-tx)}
.status-pill.bad{background:var(--n-bad-bg);color:var(--n-bad-tx)}
.status-pill.info{background:var(--n-info-bg);color:var(--n-info-tx)}
.project-chip{display:inline-flex;align-items:center;max-width:100%;padding:4px 12px;border-radius:9999px;background:var(--surface-3);color:var(--ink2);font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* two columns that become one on a phone. Always start at the top, never stretch a short card */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.split.wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split > *{min-width:0}
.stack-lg{display:grid;gap:24px}
@media(max-width:900px){.split,.split.wide-left{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ---------- notes (banners) ---------- */
.note,.banner,.warnbox{--n-bg:var(--n-info-bg);--n-bd:var(--n-info-bd);--n-tx:var(--n-info-tx);--n-ic:"i";
  position:relative;display:block;padding:13px 16px 13px 50px;margin-bottom:16px;border-radius:12px;
  background:var(--n-bg);border:1px solid var(--n-bd);color:var(--n-tx);font-size:13px;font-weight:500;line-height:1.55}
.note::before,.banner::before,.warnbox::before{content:var(--n-ic);position:absolute;left:16px;top:13px;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;background:var(--n-tx);color:var(--surface);font-size:13px;font-weight:800;font-style:normal;line-height:1}
.note b,.banner b,.warnbox b{font-weight:700;color:inherit}
.note.warn,.warnbox{--n-bg:var(--n-warn-bg);--n-bd:var(--n-warn-bd);--n-tx:var(--n-warn-tx);--n-ic:"!"}
.note.bad,.banner.error{--n-bg:var(--n-bad-bg);--n-bd:var(--n-bad-bd);--n-tx:var(--n-bad-tx);--n-ic:"!"}
.note.ok{--n-bg:var(--n-ok-bg);--n-bd:var(--n-ok-bd);--n-tx:var(--n-ok-tx);--n-ic:"\2713"}
.banner.readonly{--n-bg:var(--surface-2);--n-bd:var(--line);--n-tx:var(--ink2);--n-ic:"\1F512"}
.banner.readonly::before{background:transparent;color:inherit;font-size:15px}
.banner,.warnbox{border-left-width:1px}
.note a,.banner a,.warnbox a{text-decoration:underline;font-weight:600}

/* ---------- key and value lists (details pages) ---------- */
.kvlist,.rows{display:grid;margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.kvlist .kvrow,.rows .row{display:grid;grid-template-columns:minmax(110px,190px) minmax(0,1fr);align-items:baseline;gap:4px 24px;padding:14px 18px;border-bottom:1px solid var(--row-line);min-width:0}
.kvlist .kvrow:last-child,.rows .row:last-child{border-bottom:0}
.kvlist .kvrow:nth-child(even),.rows .row:nth-child(even){background:var(--surface-2)}
.kvlist dt,.rows .rl{color:var(--muted);font-size:13px;font-weight:500}
.kvlist dd,.rows .rv{margin:0;color:var(--ink);font-size:14px;font-weight:600;text-align:left;min-width:0;overflow-wrap:anywhere}
.rows .row.total{background:var(--surface-3)}
.rows .row.total .rl,.rows .row.total .rv{color:var(--ink);font-weight:700}
.kvgrid{gap:18px 28px}
.kvgrid .kv2{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
@media(max-width:560px){
  .kvlist .kvrow,.rows .row{grid-template-columns:1fr;gap:3px;padding:12px 14px}
  .kvlist dt,.rows .rl{max-width:100%}
  .kvlist dd,.rows .rv{text-align:left}
}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.flabel{font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:7px}
.inp{min-height:44px;border-radius:var(--r-ctl);border:1.5px solid var(--inp-line);padding:0 14px;font-size:14px;font-weight:500;background:var(--input-bg);color:var(--ink);transition:border-color var(--ease),box-shadow var(--ease)}
textarea.inp{min-height:96px;padding:11px 14px;line-height:1.5;resize:vertical}
.inp:hover{border-color:var(--field-hover)}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(220,38,38,.14);outline:none}
.inp::placeholder{color:var(--faint);font-weight:400}
.fhelp{font-size:12px;margin-top:6px;color:var(--muted);line-height:1.45}
.field-note{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:12px;color:var(--muted)}
.form-section{padding:0;margin:0 0 6px}
.form-section + .form-section{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.form-section > h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-bottom:14px}
.form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.formbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
@media(max-width:560px){
  .inp{font-size:16px}  /* 16px stops iOS from zooming into a field */
  .card{padding:18px 16px;border-radius:14px}
  .card.pad0 > .ch,.card.pad0 > .card-head{padding:16px}
  .formbtns .btn{flex:1 1 140px}
  .form-actions .fhelp{flex:1 1 100%}
}

/* ---------- buttons ---------- */
.btn{min-height:44px;border-radius:var(--r-ctl);padding:0 20px;font-weight:700;letter-spacing:.005em}
.btn.small{min-height:34px;padding:0 12px;border-radius:8px;font-size:12.5px}
.btn.dark{background:#111827;color:#fff;border-color:#111827}
.btn.dark:hover{background:#1f2937}
html[data-theme="dark"] .btn.dark{background:#e6eaf0;color:#0b111b;border-color:#e6eaf0}
.btn.danger{background:var(--surface);color:var(--red-text);border:1.5px solid var(--danger-line)}
.btn.danger.solid{background:#dc2626;color:#fff;border-color:#b91c1c}
.btn.danger.solid:hover{background:#b91c1c}
.btn.block{display:flex;width:100%}
.rowactions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- tables: words left, money and numbers right ---------- */
td.num,th.r,th.num,td.r,.tscroll td.num,.tscroll th.r{text-align:right}
td.num,td.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.tscroll{border-radius:0 0 var(--r-card) var(--r-card)}
.tscroll th{background:var(--surface-2)}
tfoot td{font-weight:700;background:var(--surface-2);border-top:2px solid var(--line)}

/* ---------- empty state ---------- */
.empty-state,.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:36px 20px;text-align:center;color:var(--muted)}
.empty-state b,.empty b{color:var(--ink);font-size:15px;font-weight:700}
.empty-state p,.empty p{max-width:380px;font-size:13px;line-height:1.55;margin:0}
.empty-state.compact{padding:22px 16px}
.empty-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface-3);color:var(--muted);margin-bottom:6px}
.empty-ic .ic,.empty-ic svg{width:30px;height:30px}

/* ---------- photos ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:6px}
.photo-tile{position:relative;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--sh)}
.photo-link{display:block;aspect-ratio:4/3;background:var(--surface-3);overflow:hidden}
.photo-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.photo-link:hover img{transform:scale(1.04)}
.photo-tile figcaption{padding:10px 12px 12px;display:grid;gap:2px}
.photo-tile figcaption b{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-tile figcaption span{font-size:11.5px;color:var(--muted);line-height:1.4}
.tile-remove{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(15,23,42,.7);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.tile-remove:hover{background:#dc2626}
.photo-cell{position:relative}
.filelist{display:grid;gap:10px;margin-top:12px}
.filelist .fi{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.filelist .fi small{flex:1 1 100%;order:3}
.upload-bar{margin-top:18px;padding-top:18px;border-top:1px dashed var(--field)}
@media(max-width:560px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ---------- danger zone ---------- */
.card.danger-zone{border-color:var(--n-bad-bd)}
.card.danger-zone .card-title{color:var(--n-bad-tx)}
details.inline-danger{border:1px solid var(--n-bad-bd);border-radius:14px;background:var(--surface);overflow:hidden}
details.inline-danger > summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;font-weight:700;color:var(--n-bad-tx)}
details.inline-danger > summary::-webkit-details-marker{display:none}
details.inline-danger > summary::after{content:"Open";margin-left:auto;font-size:12px;font-weight:700;padding:5px 12px;border-radius:8px;border:1.5px solid var(--n-bad-bd)}
details.inline-danger[open] > summary::after{content:"Close"}
details.inline-danger > .inline-body{padding:0 18px 18px}
details.inline-danger > summary small{display:block;font-weight:500;color:var(--muted)}

/* ---------- confirm dialog ---------- */
dialog.cdlg-back{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:18px;border:0;background:transparent;color:inherit;align-items:center;justify-content:center;overflow:auto}
dialog.cdlg-back[open]{display:flex}
dialog.cdlg-back::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(2px);animation:cdfade .15s ease-out}
.cdlg{width:440px;max-width:100%;background:var(--surface);color:var(--ink);border-radius:18px;padding:24px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5),0 0 0 1px var(--line);animation:cdpop .18s cubic-bezier(.16,1,.3,1)}
.cdlg-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:14px;font-weight:800;font-size:20px;background:var(--n-info-bg);color:var(--n-info-tx)}
.cdlg.danger .cdlg-ic{background:var(--n-bad-bg);color:var(--n-bad-tx)}
.cdlg.warn .cdlg-ic{background:var(--n-warn-bg);color:var(--n-warn-tx)}
.cdlg h2{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px}
.cdlg p{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:0 0 20px;white-space:pre-line}
.cdlg-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:480px){.cdlg{padding:20px}.cdlg-actions .btn{flex:1 1 100%}.cdlg-actions{flex-direction:column-reverse}}
@keyframes cdfade{from{opacity:0}to{opacity:1}}
@keyframes cdpop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cdlg,.cdlg-back{animation:none}}

/* ---------- small things ---------- */
.crumbs{margin-bottom:18px}
.page-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin:0 0 16px}
.diff{display:grid;grid-template-columns:1fr 24px 1fr;gap:6px;align-items:center}
.diff .old{color:var(--red-text);text-decoration:line-through;overflow-wrap:anywhere}
.diff .new{font-weight:700;overflow-wrap:anywhere}
.diff .arrow{color:var(--muted);text-align:center}
@media print{.cdlg-back{display:none}}

/* ---------- record header (audit and detail pages) ---------- */
.record-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.record-head h2{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.record-head p{color:var(--muted);font-size:13px;margin-top:4px}
.record-head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.audit-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:start}
.audit-col{display:flex;flex-direction:column;gap:24px;min-width:0}
.audit-col .card{margin-bottom:0}
@media(max-width:900px){
  .audit-layout{display:flex;flex-direction:column;align-items:stretch;gap:18px}
  .audit-col{display:contents}
  .order-cur{order:1}.order-edit{order:2}.order-del{order:3}.order-hist{order:4}
}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0;padding:8px 24px 18px;position:relative}
.timeline::before{content:"";position:absolute;left:31px;top:20px;bottom:24px;width:2px;background:var(--line)}
.tl-item{position:relative;display:flex;gap:16px;padding:12px 0}
.tl-dot{flex:0 0 16px;width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--surface);border:3px solid var(--edge-hover);z-index:1}
.tl-item.create .tl-dot{border-color:var(--st-ok)}
.tl-item.fix .tl-dot{border-color:var(--brand)}
.tl-body{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.tl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tl-when{font-size:12px;color:var(--muted);font-weight:600}
.tl-who{font-size:12.5px;color:var(--ink2);margin:6px 0 0}
.tl-change{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--row-line)}
.tl-field{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:4px}
.tl-reason{margin:10px 0 0;font-size:13px;font-style:italic;color:var(--ink2);line-height:1.5}
@media(max-width:560px){.timeline{padding:6px 14px 14px}.timeline::before{left:21px}.tl-item{gap:12px}.diff{grid-template-columns:1fr}.diff .arrow{display:none}}

/* ---------- forms that are cards: one look, a sticky action bar at the bottom ---------- */
form.card{padding:24px}
form.card > .ch{margin:0 0 18px;padding:0;border-bottom:0;background:none;border-radius:0}
form.card > :not(.ch){margin-left:0;margin-right:0}
form.card > :first-child:not(.ch){margin-top:0}
form.card > :last-child:not(.formbtns){margin-bottom:0}
form.card > .fintro{margin-top:0}
form.card > .formbtns{position:sticky;bottom:0;z-index:4;margin:22px -24px -24px;padding:14px 24px;background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 -12px 16px -14px rgba(15,23,42,.22)}
/* pop-up forms keep their own header band and footer */
dialog.modal > form.card{padding:0}
dialog.modal > form.card > .ch{margin:0 0 22px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--surface-2);border-radius:14px 14px 0 0}
dialog.modal > form.card > :not(.ch){margin-left:24px;margin-right:24px}
dialog.modal > form.card > :first-child:not(.ch){margin-top:22px}
dialog.modal > form.card > :last-child:not(.formbtns){margin-bottom:24px}
dialog.modal > form.card > .formbtns{margin:8px 0 0;padding:14px 22px;background:var(--surface-2);border-radius:0;box-shadow:none}
@media(max-width:560px){
  form.card{padding:18px 16px}
  form.card > .formbtns{margin:18px -16px -18px;padding:12px 16px}
  form.card > .form-actions{margin-top:18px}
  form.card > .form-actions .btn{flex:1 1 100%}
  dialog.modal > form.card{padding:0}
}

/* ---------- chips (long lists of names) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.chip{display:inline-flex;padding:3px 10px;border-radius:9999px;background:var(--surface-3);color:var(--ink2);font-size:12px;font-weight:600;white-space:nowrap}
details.more-chips{margin-top:8px}
details.more-chips > summary{display:inline-flex;cursor:pointer;list-style:none;padding:3px 10px;border-radius:9999px;border:1.5px solid var(--field);font-size:12px;font-weight:700;color:var(--ink2)}
details.more-chips > summary::-webkit-details-marker{display:none}
details.more-chips[open] > summary{margin-bottom:8px}
@media(max-width:560px){.chips{justify-content:flex-start}}

/* ---------- Admin lists (expense heads, work types) ---------- */
.catlist{display:flex;flex-direction:column}
.catrow{display:grid;grid-template-columns:minmax(0,1fr) 190px 90px auto;gap:10px;align-items:center;padding:12px 20px;border-top:1px solid var(--line)}
.catrow:first-child{border-top:0}
.catrow.off .inp{opacity:.6}
.catrow .rowactions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.catrow.mat{grid-template-columns:minmax(0,1fr) 120px 110px auto}
.catrow.act{grid-template-columns:minmax(0,1fr) 90px auto}
.catrow.add{background:var(--surface-2)}
.catrow .tag{display:block;font-size:12px;color:var(--ink3);margin-top:3px}
.catrow label.mini{display:none;font-size:12px;font-weight:700;color:var(--ink2)}
.actcard{margin-top:18px}
.actcard .card-head{padding-bottom:14px}
.empty-line{padding:14px 20px;color:var(--ink3);font-size:14px}
@media(max-width:720px){
  .catrow,.catrow.mat,.catrow.act{grid-template-columns:1fr 1fr;padding:14px 16px}
  .catrow > :first-child{grid-column:1 / -1}
  .catrow .rowactions{grid-column:1 / -1;justify-content:stretch}
  .catrow .rowactions .btn{flex:1 1 auto}
  .catrow label.mini{display:block}
}


/* ---------- Keyboard: one clear focus ring, reduced motion ---------- */
:root{--focus-ring:#b91c1c}
html[data-theme="dark"]{--focus-ring:#fca5a5}
:where(a,button,summary,input,select,textarea,[tabindex],label.fmt-opt input):focus-visible{
  outline:3px solid var(--focus-ring) !important;outline-offset:2px !important}
.inp:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px !important}
.nav:focus-visible,button.navsec:focus-visible,.pm-item:focus-visible,.um-item:focus-visible,.np-tab:focus-visible,
.dp-day:focus-visible,.dp-mon:focus-visible{outline-offset:-3px !important}
#content:focus-visible{outline:none !important}
.fmt-opt input:focus-visible + span{outline:3px solid var(--focus-ring);outline-offset:2px}

/* optional folded section: a visible Show / Hide word and a hint while it has focus */
details.fold > summary{padding:8px 70px 8px 10px;margin:-8px -10px}
details.fold > summary::after{right:46px;top:15px}
details.fold > summary .fold-state{position:absolute;right:10px;top:9px;font-size:12px;font-weight:700;color:var(--ink2)}
details.fold > summary .fold-hint{display:none;margin-top:4px;font-size:12px;font-weight:600;color:var(--ink2)}
details.fold > summary:focus-visible .fold-hint{display:block}
details.fold[open] > summary .fold-hint{display:none !important}

/* keyboard help */
dialog.kbd{border:1px solid var(--line);border-radius:14px;padding:0;max-width:460px;width:calc(100% - 32px);background:var(--surface);color:var(--ink)}
dialog.kbd::backdrop{background:rgba(15,23,42,.45)}
dialog.kbd .kbd-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
dialog.kbd h2{margin:0;font-size:16px}
dialog.kbd dl{margin:0;padding:8px 22px 18px}
dialog.kbd .kbd-row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
dialog.kbd .kbd-row:last-child{border-bottom:0}
dialog.kbd dt{font-weight:700}
dialog.kbd kbd{display:inline-block;padding:1px 7px;border:1px solid var(--field);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);font:600 12px inherit}
.kbd-link{background:none;border:0;padding:0;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- Settings: keyboard shortcuts ---------- */
.sc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px;margin:8px 0 4px}
.sc-row{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:2px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sc-row label{font-weight:600;font-size:14px}
.sc-row small{grid-column:1 / -1;color:var(--muted);font-size:12px}
.sc-key{text-align:center;text-transform:uppercase;font-weight:800;padding:8px 0}
@media(max-width:720px){.sc-list{grid-template-columns:1fr}}

/* project documents */
.doc-add{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:end;padding:16px 20px;border-top:1px solid var(--line)}
.doc-add .flabel{grid-column:1 / -1;margin:0}
@media(max-width:560px){.doc-add{grid-template-columns:1fr}}

/* videos */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:16px 20px}
.video-tile{margin:0;display:flex;flex-direction:column;gap:6px}
.video-tile video{width:100%;max-height:260px;border-radius:10px;background:#000}
.video-tile figcaption{display:flex;flex-direction:column;font-size:13px}
.video-tile figcaption span{color:var(--muted);font-size:12px}
.photo{position:relative}
.photo video{width:100%;height:100%;object-fit:cover;display:block}
.vid-badge{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:9999px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:700}

/* wide pop-up: the form on the left, what the work type fills in on the right */
dialog.modal.wide{width:min(1080px,calc(100vw - 24px))}
.eq-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:24px;align-items:start}
.eq-template{position:sticky;top:0;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.eq-template .fsec-head{margin-bottom:12px}
.eq-template .tchip{display:inline-block;margin:0 6px 6px 0}
@media(max-width:860px){.eq-split{grid-template-columns:1fr}.eq-template{position:static}}

/* project menu: code and sales person */
.pm-code{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:6px;background:var(--surface-3);color:var(--ink2);font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:1px}
.pm-item.active .pm-code{background:rgba(220,38,38,.12);color:var(--red-text)}
.pm-sales{color:var(--ink2)}

.kvlist .chips,.kvlist .more-chips{justify-content:flex-start}

/* list pop-up (View all): a clean two-column list with a search box */
dialog.modal.list{width:min(620px,calc(100vw - 24px))}
dialog.modal.list .md-body{padding:16px 20px 20px}
dialog.modal.list .vlist{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
dialog.modal.list .vlist li{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
dialog.modal.list .vlist.two{grid-template-columns:1fr}
dialog.modal.list .vlist.two li{flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px}
dialog.modal.list .vlist.two li span{color:var(--muted);font-weight:500;font-size:13px;text-align:right}
dialog.modal.list .vlist li[hidden]{display:none}
@media(max-width:560px){dialog.modal.list .vlist{grid-template-columns:1fr}dialog.modal.list .vlist.two li{flex-direction:column;gap:2px}dialog.modal.list .vlist.two li span{text-align:left}}

/* tabs */
.tabbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:5px;background:var(--surface-3);border-radius:12px;width:fit-content;max-width:100%}
.tabbtn{border:0;background:none;padding:9px 16px;border-radius:9px;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer;min-height:40px}
.tabbtn:hover{background:var(--surface)}
.tabbtn.on{background:var(--surface);color:var(--red-text);box-shadow:0 1px 3px rgba(15,23,42,.12)}
[data-tabs] > [hidden]{display:none !important}

.budget-form .bi{max-width:150px;margin-left:auto;text-align:right}
.budget-actions{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.budget-actions[hidden]{display:none}

/* Tom Select in the portal's look */
.ts-wrapper .ts-control{min-height:44px;padding:0 12px;border:1px solid var(--field);border-radius:var(--r-ctl,10px);background:var(--input-bg);color:var(--ink);box-shadow:none;font-size:14px;display:flex;align-items:center;flex-wrap:nowrap}
.ts-wrapper.inp{min-height:0;padding:0;border:0;background:none;box-shadow:none}
.ts-wrapper.single .ts-control,.ts-wrapper.single.input-active .ts-control{background:var(--input-bg);color:var(--ink)}
.ts-wrapper.single .ts-control .item{color:var(--ink);white-space:normal;overflow:hidden;text-overflow:ellipsis}
.ts-wrapper.focus .ts-control{border-color:var(--brand);box-shadow:0 0 0 4px rgba(220,38,38,.14)}
.ts-wrapper .ts-control input{color:var(--ink);font-size:14px}
.ts-dropdown{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);box-shadow:0 12px 28px -10px rgba(15,23,42,.35);z-index:50}
.ts-dropdown .option{padding:10px 12px}
.ts-dropdown .active{background:var(--soft-red);color:var(--ink)}
.ts-wrapper.single .ts-control:after{border-color:var(--muted) transparent transparent}

/* edit user page */
.user-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px;align-items:start}
@media(max-width:900px){.user-grid{grid-template-columns:1fr}}
.access-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 14px;justify-content:flex-start}
.access-add{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.access-add .btn{justify-self:start}
.ts-wrapper.multi .ts-control{flex-wrap:wrap;padding:6px 8px;min-height:44px}
.ts-wrapper.multi .ts-control > div{background:var(--soft-red);color:var(--red-text);border:0;border-radius:8px;padding:3px 8px;font-weight:600}
/* sign in details after a reset */
.cred-list{display:grid;gap:10px;margin:0 0 16px}
.cred{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px dashed var(--field);border-radius:10px;background:var(--surface-2)}
.cred-l{color:var(--muted);font-size:13px;font-weight:600}
.cred code{font:600 18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;user-select:all}
@media(max-width:560px){.cred{grid-template-columns:1fr}}