/* ===== Theme tokens — forest/paper palette (the source of truth for every colour) =====
   Imported from the approved Studio design (docs/redesign/reference, MANIFEST); token names
   unchanged. Day = paper surfaces; night = neutral dark greys with the forest-green sidebar. UI font stack: --font-ui
   (Inter + Sarabun). The theme follows the OS unless the person picks one: app.js stamps
   data-theme="light|dark" on <html>. */
:root{color-scheme:light;
  --font-ui:Inter,Sarabun,system-ui,sans-serif;
  --bg:#f7f5f0;--surface:#ffffff;--surface-2:#f2f6f0;--topbar-bg:#f7f5f0;--ink:#1d1d1f;--ink-2:#5f5f64;--muted:#676a6c;--line:#e8e9e7;--line-2:#7e8882;
  --act:#285853;--act-hover:#1b3f3b;--on-act:#ffffff;--act-text:#1b3f3b;--act-soft:#e9efec;--focus:#285853;
  --ok-bg:#e6f1e9;--ok-ink:#24683f;--warn-bg:#fdf0e7;--warn-ink:#a8470f;--warn-line:#d4652c;--bad-bg:#fdecea;--bad-ink:#b42318;--bad-line:#b42318;--info-bg:#eef1fb;--info-ink:#3b4fa8;
  --sidebar-bg:#173733;--sidebar-ink:#d9e4e1;--sidebar-muted:#a9c2bc;--sidebar-active:rgba(255,255,255,.12);--sidebar-mark:#d4652c;--sidebar-hover:rgba(255,255,255,.06);--sidebar-line:rgba(255,255,255,.12);
  --nav-alert-bg:#a8470f;--avatar-bg:#d9c7a8;--avatar-ink:#173733;
  --toast-bg:#ffffff;--toast-ink:#1d1d1f;--pop-border:rgba(0,0,0,.14);--shadow:0 12px 36px rgba(0,0,0,.16);--scrim:rgba(10,22,17,.42);
  --zebra:#fbfaf7;--cell-auto:#f7f5f0;--flash:#fff0ce;--grey-bg:#eef0f3;--grey-ink:#454c57;--peer-1:#0a60d0;--peer-2:#8a3fc4;--peer-3:#b05300;--peer-4:#0b7285;--peer-5:#c2255c;--peer-6:#2b7a0b;
  --shell-side:248px;--shell-top:64px;--content-max:1560px;--radius-control:6px;--radius-panel:10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:#17181a;--surface:#202124;--surface-2:#2a2b2e;--topbar-bg:#1c1d20;--ink:#e4e4e0;--ink-2:#c4c6c8;--muted:#a3a6a8;--line:#34363a;--line-2:#6e7276;
  --act:#2e7d52;--act-hover:#276b46;--on-act:#ffffff;--act-text:#8fcba6;--act-soft:#253029;--focus:#b4dec6;
  --ok-bg:#203c2b;--ok-ink:#a3d5af;--warn-bg:#402d20;--warn-ink:#f3b58b;--warn-line:#c38863;--bad-bg:#402724;--bad-ink:#ffb4aa;--bad-line:#d58f86;--info-bg:#273047;--info-ink:#b8c6ff;
  --sidebar-bg:#173733;--sidebar-ink:#e5efea;--sidebar-muted:#a9c2bc;--sidebar-active:rgba(255,255,255,.12);--sidebar-mark:#ee9a6b;--sidebar-hover:rgba(255,255,255,.06);--sidebar-line:rgba(255,255,255,.12);
  --nav-alert-bg:#a8470f;--avatar-bg:#d9c7a8;--avatar-ink:#173733;
  --toast-bg:#202124;--toast-ink:#e4e4e0;--pop-border:rgba(255,255,255,.14);--shadow:0 8px 24px rgba(0,0,0,.4);--scrim:rgba(0,0,0,.6);
  --zebra:#1c1d20;--cell-auto:#1b1c1e;--flash:#443719;--grey-bg:#2c2e31;--grey-ink:#b8bbbe;--peer-1:#82b7ff;--peer-2:#d1a6ff;--peer-3:#efba7b;--peer-4:#7dcbd6;--peer-5:#f3a4c4;--peer-6:#add78a}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#17181a;--surface:#202124;--surface-2:#2a2b2e;--topbar-bg:#1c1d20;--ink:#e4e4e0;--ink-2:#c4c6c8;--muted:#a3a6a8;--line:#34363a;--line-2:#6e7276;
  --act:#2e7d52;--act-hover:#276b46;--on-act:#ffffff;--act-text:#8fcba6;--act-soft:#253029;--focus:#b4dec6;
  --ok-bg:#203c2b;--ok-ink:#a3d5af;--warn-bg:#402d20;--warn-ink:#f3b58b;--warn-line:#c38863;--bad-bg:#402724;--bad-ink:#ffb4aa;--bad-line:#d58f86;--info-bg:#273047;--info-ink:#b8c6ff;
  --sidebar-bg:#173733;--sidebar-ink:#e5efea;--sidebar-muted:#a9c2bc;--sidebar-active:rgba(255,255,255,.12);--sidebar-mark:#ee9a6b;--sidebar-hover:rgba(255,255,255,.06);--sidebar-line:rgba(255,255,255,.12);
  --nav-alert-bg:#a8470f;--avatar-bg:#d9c7a8;--avatar-ink:#173733;
  --toast-bg:#202124;--toast-ink:#e4e4e0;--pop-border:rgba(255,255,255,.14);--shadow:0 8px 24px rgba(0,0,0,.4);--scrim:rgba(0,0,0,.6);
  --zebra:#1c1d20;--cell-auto:#1b1c1e;--flash:#443719;--grey-bg:#2c2e31;--grey-ink:#b8bbbe;--peer-1:#82b7ff;--peer-2:#d1a6ff;--peer-3:#efba7b;--peer-4:#7dcbd6;--peer-5:#f3a4c4;--peer-6:#add78a}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font:16px/1.5 var(--font-ui)}button,input,select,textarea{font:inherit}button{cursor:pointer}button,a,input,select,textarea{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus,select:focus,textarea:focus{outline:3px solid var(--focus);outline-offset:2px}button{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:8px;padding:10px 16px;font-weight:600}button:hover{background:var(--surface-2)}button:disabled{opacity:.55;cursor:wait}.primary{background:var(--act);color:var(--on-act);border-color:var(--act)}.primary:hover{background:var(--act)}.quiet{border:0;background:transparent;color:var(--ink-2)}.demo-bar{background:var(--act-soft);border-bottom:1px solid var(--line);min-height:38px;padding:6px 24px;display:flex;gap:16px;align-items:center;font-size:13px}.demo-bar strong{color:var(--act-text);letter-spacing:.09em;font-size:12px}.demo-bar button{margin-left:auto;padding:2px 5px;font-size:13px;background:transparent;border:0}.demo-bar.reference{background:var(--warn-bg);border-bottom-color:var(--warn-line)}.demo-bar.reference strong{color:var(--warn-ink)}.shell{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - 39px)}aside{background:var(--sidebar-bg);color:var(--sidebar-ink);padding:32px 20px;display:flex;flex-direction:column}.brand{text-decoration:none;color:var(--sidebar-ink);font-size:32px;letter-spacing:-2px;font-weight:750;padding:0 15px}.brand span{display:block;font-size:10px;letter-spacing:2px;font-weight:500;color:var(--sidebar-muted);margin-top:3px}nav{margin-top:48px;display:grid;gap:8px}nav button{text-align:left;background:transparent;border:0;color:var(--sidebar-ink);padding:13px 18px;font-size:18px}nav button span{font-size:15px;margin-left:12px}nav button.active{background:var(--sidebar-active);color:var(--sidebar-ink)}nav button:hover{background:var(--sidebar-active)}.sidebar-foot{margin-top:auto;padding:50px 12px 0;font-size:13px}.sidebar-foot span{font-size:12px;color:var(--sidebar-muted)}.workspace{min-width:0}header{background:var(--surface);padding:21px 36px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px}header p{margin:2px 0 0;font-weight:600;font-size:14px}.eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--ink-2);font-weight:700}.persona{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}select,input,textarea{border:1px solid var(--line-2);border-radius:7px;background:var(--surface);padding:10px 12px;color:var(--ink);min-width:0}main{max-width:1450px;margin:auto;padding:24px 36px 48px}h1{font-size:29px;letter-spacing:-.7px;margin:0 0 6px}h2{font-size:19px;margin:0}h3{font-size:16px;margin:0}.muted{color:var(--ink-2)}.heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.heading p{margin:0;color:var(--ink-2);font-size:14px}.stats{display:flex;gap:0;margin:25px 0 28px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}.stat{flex:1;border-right:1px solid var(--line);padding:0 24px}.stat:last-child{border:0}.stat strong{font-size:30px;font-weight:650;display:block;line-height:1.2}.stat span{font-size:13px;color:var(--ink-2)}.section-title{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px}.count{background:var(--act-soft);color:var(--act-text);padding:3px 9px;border-radius:6px;font-size:12px;font-weight:700}.news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.news{background:var(--surface);border:1px solid var(--line);border-left:1px solid var(--line);border-radius:9px;padding:19px;text-align:left;font-weight:400}.news .top{display:flex;justify-content:space-between;gap:10px;margin-bottom:9px}.news h3{font-size:17px;margin:4px 0}.news .price{font-size:20px;font-weight:650}.news p{font-size:13px;color:var(--ink-2);margin:7px 0 0}.pill{display:inline-block;font-size:12px;border-radius:5px;padding:3px 7px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}.pill.green{background:var(--ok-bg);color:var(--ok-ink)}.pill.amber{background:var(--warn-bg);color:var(--warn-ink)}.pill.blue{background:var(--info-bg);color:var(--info-ink)}.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}th{background:var(--surface-2);color:var(--ink-2);font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:650}th,td{padding:16px;border-bottom:1px solid var(--line)}tr:last-child td{border:0}td small{display:block;color:var(--ink-2);font-size:12px;margin-top:3px}td button{font-size:13px;padding:6px 11px}.link{border:0;padding:0;background:none;color:var(--act-text);text-align:left;font-weight:650}.link:hover{background:none;text-decoration:underline}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.toolbar input{flex:1;min-width:220px}.tabs{display:flex;gap:5px}.tabs button{padding:9px 17px}.tabs .selected{background:var(--act);color:var(--on-act);border-color:var(--act)}.empty{padding:32px;text-align:center;color:var(--ink-2)}.task-reason{max-width:300px;font-size:12px;color:var(--ink-2)}.activity-row{display:flex;gap:18px;padding:19px 22px;border-bottom:1px solid var(--line)}.activity-row:last-child{border:0}.time{min-width:55px;color:var(--muted);font-size:12px}.activity-row p{margin:4px 0;font-size:14px}.activity-row small{font-size:12px;color:var(--ink-2)}dialog{border:0;border-radius:15px;padding:0;width:min(640px,94vw);max-height:90vh;box-shadow:0 20px 60px rgba(0,0,0,.18);color:var(--ink)}dialog::backdrop{background:var(--scrim)}dialog.detail{width:min(1050px,96vw)}.dialog-head{padding:24px 28px 18px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--line);gap:18px}.dialog-body{padding:24px 28px}.close{padding:3px 11px;font-size:22px;background:transparent;border:0}.detail-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px}.detail-block{margin-bottom:24px}.detail-block h3{margin-bottom:12px}.facts{display:flex;gap:22px;margin:16px 0}.facts span{font-size:12px;color:var(--ink-2)}.facts strong{display:block;font-size:17px;color:var(--ink)}.contact{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.contact small{display:block;color:var(--ink-2)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}.full{grid-column:1/-1}textarea{resize:vertical;min-height:85px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.error{background:var(--bad-bg);border:1px solid var(--bad-line);border-radius:7px;color:var(--bad-ink);padding:12px;font-size:14px;margin-bottom:15px}.notice{background:var(--act-soft);color:var(--act-text);padding:14px;border-radius:7px;font-size:13px}.history{font-size:13px;border-left:2px solid var(--line);padding:0 0 18px 15px;margin-left:3px}.history p{margin:3px 0}.history small{font-size:12px;color:var(--muted)}.offer-summary{padding:18px;border:1px solid var(--line);border-radius:8px;margin-top:14px}.offer-summary strong{font-size:27px}.offer-summary .actions{margin-top:16px;display:flex;gap:8px}.checklist{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}.checklist button{font-size:12px;padding:7px 9px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-ink);padding:13px 24px;border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.16);z-index:100;display:none;font-size:14px}.help-list{padding-left:22px}.help-list li{margin:16px 0}.footer-note{margin-top:18px;font-size:12px;color:var(--ink-2)}@media(max-width:1000px){.shell{grid-template-columns:170px 1fr}aside{padding:28px 10px}header{padding:18px 22px}main{padding:24px 22px}.stat{padding:0 15px}.detail-grid{grid-template-columns:1fr}.news-grid{grid-template-columns:1fr 1fr}}@media(max-width:700px){.shell{display:block}aside{padding:12px 15px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.brand{font-size:24px;padding:0}.brand span,.sidebar-foot{display:none}nav{margin:0;display:flex;gap:3px}nav button{padding:9px;font-size:0}nav button span{font-size:13px;margin:0}.demo-bar{padding:5px 12px;font-size:12px;gap:8px}.demo-bar span{display:none}header{padding:13px 16px}.persona{font-size:0}.persona select{max-width:195px;font-size:13px}main{padding:22px 16px}.heading{align-items:flex-start}h1{font-size:25px}.heading .primary{padding:10px;font-size:13px}.stats{padding:16px 2px}.stat{padding:0 12px}.stat strong{font-size:25px}.stat span{font-size:12px}.news-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.dialog-body,.dialog-head{padding:20px}.full{grid-column:auto}.toolbar{gap:8px}.toolbar input{min-width:100%;width:100%}.facts{flex-wrap:wrap}.activity-row{padding:16px;gap:10px}}
/* ===== BRP Studio theme — DESIGN.md (forest green + Inter) ===== */
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui)}
button{border-color:var(--line);color:var(--ink)}button:hover{background:var(--surface-2)}
.primary{background:var(--act);border-color:var(--act);color:var(--on-act)}.primary:hover{background:var(--act-hover);border-color:var(--act-hover)}
button:focus-visible,a:focus-visible,input:focus,select:focus,textarea:focus{outline-color:var(--act)}
select,input,textarea{border-color:var(--line-2);color:var(--ink)}
a,.link{color:var(--act-text)}.muted,.eyebrow{color:var(--ink-2)}
aside{background:var(--sidebar-bg)}nav button{color:var(--sidebar-ink)}nav button:hover{background:var(--sidebar-active)}nav button.active{background:var(--sidebar-active);box-shadow:inset 3px 0 0 var(--sidebar-mark)}
.brand span{color:var(--sidebar-muted)}.sidebar-foot span{color:var(--sidebar-muted)}
header{border-bottom-color:var(--line)}.stats,.stat{border-color:var(--line)}.stat span{color:var(--ink-2)}.heading p{color:var(--ink-2)}
.count{background:var(--act-soft);color:var(--act-text)}
.news{border-color:var(--line);border-left-color:var(--act)}.news p{color:var(--ink-2)}
.pill{background:var(--surface-2);color:var(--ink-2)}.pill.green{background:var(--ok-bg);color:var(--ok-ink)}.pill.amber{background:var(--warn-bg);color:var(--warn-ink)}.pill.blue{background:var(--info-bg);color:var(--info-ink)}
.panel{border-color:var(--line)}th{background:var(--surface-2);color:var(--ink-2)}th,td{border-bottom-color:var(--line)}td small{color:var(--ink-2)}
.tabs .selected{background:var(--act);border-color:var(--act)}.empty{color:var(--ink-2)}
.dialog-head{border-bottom-color:var(--line)}.facts strong{color:var(--ink)}.facts span{color:var(--ink-2)}.contact{border-bottom-color:var(--line)}
.notice{background:var(--act-soft);color:var(--act-text)}.error{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-ink)}
.history{border-left-color:var(--line)}.history small{color:var(--muted)}.offer-summary{border-color:var(--line)}
#toast{background:var(--toast-bg)}.activity-row{border-bottom-color:var(--line)}.time{color:var(--muted)}.task-reason{color:var(--ink-2)}
.demo-bar{background:var(--act-soft);border-bottom-color:var(--line)}.demo-bar strong{color:var(--act-text)}
.demo-bar.reference{background:var(--warn-bg);border-bottom-color:var(--warn-line)}.demo-bar.reference strong{color:var(--warn-ink)}
fieldset{border:1px solid var(--line);border-radius:8px;margin:0;padding:15px}legend{font-size:12px;color:var(--ink-2);padding:0 6px}[hidden]{display:none!important}.offer-summary .task-title{font-size:15px}.small-label{font-size:12px;display:flex;align-items:center;gap:7px}.small-label select{font-size:13px;padding:6px;max-width:150px}.detail-block>h3{margin-top:23px}fieldset:disabled{opacity:.5}
.spreadsheet-check{padding:14px;border:1px solid var(--line);border-radius:8px}.form-grid .spreadsheet-check label{display:flex;flex-direction:row;gap:10px;align-items:center;font-size:14px}.spreadsheet-check input{width:18px;height:18px;accent-color:var(--act)}.spreadsheet-check small,.photo-picker small{display:block;color:var(--ink-2);font-size:12px;margin-top:6px}.photo-picker>label{font-size:14px;font-weight:600}.photo-picker input{display:block;width:100%;margin-top:8px;padding:12px;background:var(--surface-2)}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.photo-grid figure{margin:0;min-width:0;padding:6px;border:1px solid var(--line);border-radius:7px}.photo-grid img{width:100%;height:100px;object-fit:cover;border-radius:4px;background:var(--surface-2)}.photo-grid figcaption{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}.photo-grid button{font-size:12px;padding:4px 9px;margin-top:5px}.spreadsheet-status{font-size:13px;color:var(--ink-2);margin:0 0 12px}#photo-error{font-size:13px;color:var(--bad-ink);margin-top:8px}@media(max-width:500px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.property-picker{position:relative}.property-picker>label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}.property-picker>input[type=text]{width:100%}#property-results{max-height:270px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;margin-top:5px;background:var(--surface);box-shadow:0 8px 20px rgba(0,0,0,.08)}.property-option{padding:11px 13px;border-bottom:1px solid var(--line);cursor:pointer}.property-option:last-child{border:0}.property-option:hover,.property-option[aria-selected=true]{background:var(--act-soft)}.property-option strong{display:block;font-size:14px}.property-option strong span{font-weight:400;color:var(--ink-2)}.property-option small{display:block;font-size:12px;color:var(--ink-2);margin-top:3px}.picker-status,.picker-empty{font-size:12px;color:var(--ink-2);margin:7px 0}.picker-empty{padding:10px}#choose-new-property{font-size:13px;padding:7px 12px;margin-top:4px}

/* ===== Modernization pass (Mobbin-informed, within DESIGN.md tokens) ===== */

/* 1. Listing detail: centered modal (kept reordered blocks + collapsed contacts) */
dialog.detail[open]{width:min(720px,94vw);max-height:90vh;display:flex;flex-direction:column;border-radius:15px;animation:brp-pop-in .18s ease-out}
dialog.detail::backdrop{background:var(--scrim)}
dialog.detail .dialog-body{overflow-y:auto;flex:1}
dialog.detail .detail-grid{display:block}
@keyframes brp-pop-in{from{transform:translateY(8px);opacity:.6}to{transform:translateY(0);opacity:1}}
@media(max-width:700px){dialog.detail[open]{width:96vw;max-height:92vh}}

/* 2. Owner & contacts collapsed by default — privacy on shared office/home PCs */
.owner-contacts summary{cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:0;list-style:revert}
.owner-contacts[open] summary{margin-bottom:12px}

/* 4. Demote Try-as / Language to a muted utility cluster so ＋ New listing is the visual anchor */
.persona,.language{font-size:12px;color:var(--muted)}
.persona select,.language select{font-size:12px;padding:6px 9px;border-color:var(--line)}

/* 5. Today stat strip — slim single row, not a dashboard hero */
.stats{padding:12px 20px}
.stat{padding:0 20px}
.stat strong{font-size:20px}
.stat span{font-size:12px}

/* 6. Team board — hairline dividers + surface-tint headers instead of heavy card borders */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.team-grid .section-title{background:var(--surface-2);padding:9px 14px;border-radius:9px 9px 0 0;margin:0}
.team-grid .panel{border-top:0;border-radius:0 0 14px 14px}
.team-card{padding:16px 18px;border-bottom:1px solid var(--line)}
.team-card:last-child{border-bottom:0}
@media(max-width:900px){.team-grid{grid-template-columns:1fr}}

/* 7. Activity log — date-grouped headings (label scale per DESIGN.md) */
.activity-date-heading{padding:10px 22px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-2)}

/* 8. Chip normalization — Rationed Gold Rule: gold is for premium/complete only, never a routine status (Rented/In progress/Draft) */
.pill.amber{background:var(--warn-bg);color:var(--warn-ink)}
.attendance{margin:18px 0;padding:18px}.attendance-actions{margin:10px 0 14px}.attendance-team{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:6px}.attendance-team>div{display:flex;justify-content:space-between;gap:16px}

/* Typography system: calm, dense enough for daily operations. */
:root{--text-body:.875rem;--text-control:.875rem;--text-meta:.75rem;--text-section:1rem;--text-page:1.625rem}
body{font-size:var(--text-body);line-height:1.5}
button{font-size:var(--text-control);line-height:1.25;padding:9px 14px}
.brand{font-size:28px;letter-spacing:-1.5px}
nav button{font-size:16px;padding:11px 16px}
nav button span{font-size:14px}
header p,.heading p{font-size:13px}
.eyebrow{font-size:9px;letter-spacing:1.4px}
.persona,.language{font-size:12px}
.persona select,.language select{font-size:12px}
h1{font-size:var(--text-page);line-height:1.2;letter-spacing:-.5px}
h2{font-size:var(--text-section);line-height:1.3}
h3{font-size:15px;line-height:1.35}
.news h3{font-size:16px}.news .price{font-size:18px}
.offer-summary strong{font-size:24px}.facts strong{font-size:16px}
.activity-row p,table{font-size:13px}
@media(max-width:700px){
 .brand{font-size:23px}h1{font-size:24px}.heading .primary{font-size:12px;padding:9px 11px}
 input,select,textarea{font-size:16px}
 header{flex-wrap:wrap;align-items:flex-start;gap:8px}
 header>div:first-child{flex:1 0 100%}
 .persona,.language{flex:1 1 calc(50% - 4px);font-size:12px;min-width:0}
 .persona select,.language select{width:100%;max-width:none}
}
@media(max-width:430px){
 aside{padding:10px 12px}
 nav{gap:2px}
 nav button{padding:9px 10px;font-size:16px}
 nav button span{display:none}
}

/* ===== Attendance: compact operational table ===== */
main{max-width:1240px}
.attendance{margin:14px 0 18px;padding:0;overflow:hidden}
.attendance-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;border-bottom:1px solid var(--line)}
.attendance-header h2{margin:0 0 3px}
.attendance-header p,.attendance-team-head p{margin:0;font-size:12px}
.attendance-action .primary{min-width:108px}
.attendance-team{border:0;padding:16px 20px 18px;gap:12px}
.attendance-team-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.attendance-team-head h3{margin:0 0 3px}
.attendance-updated{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:12px;font-weight:600;white-space:nowrap}
.attendance-updated::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--ok-ink)}
.attendance-team>.attendance-table{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.attendance-columns,.attendance-row{display:grid;grid-template-columns:minmax(130px,1.2fr) minmax(120px,.8fr) minmax(100px,.8fr);align-items:center;column-gap:16px}
.attendance-columns{padding:8px 13px;background:var(--surface-2);color:var(--ink-2);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.attendance-row{padding:11px 13px;border-top:1px solid var(--line);font-size:13px}
.attendance-row strong{font-size:13px;font-weight:650}
.attendance-status{justify-self:start;display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap}
.attendance-status.working{background:var(--act-soft);color:var(--act-text)}
.attendance-status.clocked-out{background:var(--surface-2);color:var(--ink-2)}
.attendance-status.not-started{background:var(--warn-bg);color:var(--warn-ink)}
.attendance-time{color:var(--ink-2);font-size:12px;white-space:nowrap}
.news{border-left-width:1px}
dialog{box-shadow:0 20px 60px rgba(0,0,0,.18)}
@media(max-width:700px){
 .attendance-header{padding:16px}
 .attendance-team{padding:14px 16px 16px}
 .attendance-columns{display:none}
 .attendance-row{grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;padding:12px}
 .attendance-row strong{min-width:0}
 .attendance-time{grid-column:1/-1;font-size:12px}
 .attendance-status{justify-self:end}
}

/* ===== Activity: dense, auditable event feed ===== */
.toolbar{margin:0 0 20px}
.activity-filter{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.activity-filter label{display:grid;gap:5px;color:var(--ink-2);font-size:12px;font-weight:600}
.activity-filter select,.activity-filter input{height:38px;padding:7px 10px;font-size:13px}
.activity-filter .quiet{height:38px;padding:7px 10px;color:var(--act-text)}
.activity-feed{display:grid;gap:10px;max-width:980px}
.activity-day{display:flex;align-items:center;gap:10px;margin:10px 0 0;color:var(--ink-2);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.activity-day::after{content:"";height:1px;flex:1;background:var(--line)}
.activity-row{display:grid;grid-template-columns:64px 18px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.activity-time{padding-top:3px;color:var(--ink-2);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.activity-marker{position:relative;margin-top:5px;width:12px;height:12px;border:3px solid var(--line);border-radius:50%;background:var(--act)}
.activity-marker::after{content:"";position:absolute;top:12px;left:2px;width:2px;height:48px;background:var(--line)}
.activity-row:last-child .activity-marker::after{display:none}
.activity-content{min-width:0}
.activity-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.35}
.activity-title strong{font-size:14px;color:var(--ink)}
.activity-kind{display:inline-flex;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:600}
.activity-content p{margin:4px 0 0;color:var(--ink);font-size:13px;line-height:1.45}
.activity-content small{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}
.activity-ref{font-size:13px;vertical-align:baseline}
.activity-separator{color:var(--muted)}
@media(max-width:700px){
 .activity-filter{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
 .activity-filter label{min-width:0}
 .activity-filter select,.activity-filter input{width:100%}
 .activity-filter .quiet{justify-self:start}
 .activity-feed{gap:8px}
 .activity-row{grid-template-columns:48px 14px minmax(0,1fr);gap:9px;padding:13px}
 .activity-marker{width:10px;height:10px;border-width:2px}
 .activity-marker::after{top:10px;height:48px}
}

/* ===== Production additions: auth screens, account cluster, manage, photo requests, contacts ===== */
body{font-family:var(--font-ui)}
.boot-loading{padding:40px;color:var(--ink-2);font-size:14px;text-align:center}
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:24px}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:32px 28px;box-shadow:0 20px 60px rgba(0,0,0,.08)}
.auth-card h1{margin-top:4px}
.auth-card .brand-mark{font-size:26px;letter-spacing:-1.2px;font-weight:750;color:var(--act-text)}
.auth-card .brand-mark span{display:block;font-size:10px;letter-spacing:2px;font-weight:600;color:var(--ink-2);margin-top:2px}
.auth-card form{display:grid;gap:14px;margin-top:18px}
.auth-card label{display:grid;gap:5px;font-size:13px;font-weight:600}
.auth-card button{margin-top:4px}
.account-cluster{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.account-name{font-size:13px;color:var(--ink);font-weight:600;white-space:nowrap}
@media(max-width:700px){.account-cluster{width:100%;justify-content:flex-start}}
.manage-tabs{margin-bottom:18px}
.contact-actions{margin-top:6px;display:flex;gap:8px}
.contact-actions button{font-size:12px;padding:5px 10px}
.task-history{margin-top:10px;font-size:12px;color:var(--ink-2);line-height:1.6}
.team-alert{display:flex;align-items:center;gap:10px;padding:14px 18px;margin-bottom:18px;background:var(--act-soft);border-color:var(--line)}
.team-alert span{background:var(--surface);color:var(--act-text);padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700}
.team-alert button{margin-left:auto}
.heading-actions{display:flex;gap:10px}
.manage-actions{margin-top:16px;justify-content:flex-start}
#toast.show{display:block}

/* ===== Report work — 3-tap flow ===== */
.mobile-report-bar{display:none}
dialog.sheet[open]{width:min(480px,94vw)}
dialog.sheet .dialog-body{overflow-y:auto}
dialog.sheet .dialog-body>label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;margin-bottom:14px}
dialog.sheet .dialog-body>label input,dialog.sheet .dialog-body>label textarea{width:100%}
.report-search input{width:100%}
.report-question{font-weight:600;font-size:14px;margin:0 0 10px}
.report-group{margin:16px 0}
.report-group h3{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);margin:0 0 8px;font-weight:700}
.report-offer-row{display:block;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface);margin-bottom:8px;font-weight:400}
.report-offer-row strong{display:block;font-size:14px;font-weight:650}
.report-offer-row strong span{font-weight:400;color:var(--ink-2)}
.report-offer-row small{display:block;color:var(--ink-2);font-size:12px;margin-top:2px}
.report-context{margin:0 0 14px}
.report-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.report-choice{min-height:56px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-weight:650;font-size:14px;padding:10px}
.report-choice.selected{background:var(--act-soft);border-color:var(--act);color:var(--act-text)}
.report-more{margin:6px 0 20px;border:1px solid var(--line);border-radius:9px;padding:10px 14px}
.report-more summary{cursor:pointer;font-weight:650;font-size:13px;color:var(--act-text);list-style:revert}
.report-more[open] summary{margin-bottom:10px}
.report-more .form-grid{grid-template-columns:1fr;gap:12px}
.report-note{width:100%;resize:none;overflow:hidden;min-height:43px}
@media(max-width:480px){.report-choices{grid-template-columns:1fr}}
@keyframes brp-sheet-up{from{transform:translateY(16px);opacity:.7}to{transform:translateY(0);opacity:1}}
@media(max-width:700px){
 .mobile-report-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
 .mobile-report-bar .primary{width:100%;height:48px;box-shadow:0 6px 15px rgba(30,77,69,.18)}
 main{padding-bottom:88px}
 .heading-actions [data-action=report]{display:none}
 dialog.sheet[open]{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;width:100%;max-width:100%;max-height:85vh;border-radius:16px 16px 0 0;animation:brp-sheet-up .18s ease-out}
 dialog.sheet::backdrop{background:var(--scrim)}
}

/* Wide (horizontal) layout for the work form: four columns on desktop so the form fits without scrolling. */
#form-dialog.wide .dialog-body{overflow-y:auto;max-height:calc(90vh - 80px)}
#form-dialog.wide .notice{padding:10px 14px;margin-bottom:14px}

/* Record work / Correct record: same horizontal treatment. */
#work-form .form-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px}
#work-form .contact-field{grid-column:span 2}
#work-form #availability-fields{grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 16px 16px}
#work-form .note-field{grid-column:span 2}
#work-form textarea{min-height:60px}
@media(max-width:1000px){#work-form .form-grid,#work-form #availability-fields{grid-template-columns:repeat(2,minmax(0,1fr))}#work-form .contact-field,#work-form .note-field{grid-column:1/-1}}
@media(max-width:700px){#work-form .form-grid,#work-form #availability-fields{grid-template-columns:1fr}}

/* ===== Daily report (owner), change diffs, pinned announcements, correction history ===== */
.report-controls{gap:8px;flex-wrap:wrap;align-items:center}
.report-controls input[type=date]{flex:0 0 auto;width:auto;height:38px;padding:6px 10px;font-size:13px;font-variant-numeric:tabular-nums}
.report-controls button{height:38px;min-width:38px;padding:0 13px;line-height:1}
#report-today{padding:0 16px;font-weight:600}
.nowrap{white-space:nowrap}
#report-body table{font-variant-numeric:tabular-nums}
.report-attendance th,.report-rows th{padding:10px 14px}
.report-attendance td,.report-rows td{padding:12px 14px}
.report-person-head .muted{background:var(--surface);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:650;color:var(--act-text)}
.report-attendance th:first-child,.report-attendance td:first-child{width:220px}
.report-attendance td:first-child strong{font-weight:650}
.report-attendance td:nth-child(2){white-space:nowrap}
.report-attendance th:nth-child(3),.report-attendance td:nth-child(3){text-align:right}
.report-person{margin:0 0 18px}
.report-person-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:var(--surface-2);padding:9px 14px;border-radius:9px 9px 0 0}
.report-person-head strong{font-size:14px}
.report-person .panel{border-top:0;border-radius:0 0 10px 10px}
.report-rows th:first-child,.report-rows td:first-child{width:64px;white-space:nowrap;color:var(--ink-2);font-weight:400}
.report-rows th:nth-child(3),.report-rows td:nth-child(3){width:240px}
.report-changes{font-size:12px;line-height:1.9}
.activity-changes{margin-top:5px;font-size:12px;color:var(--ink-2);line-height:1.9}
/* Team board cards: consistent rhythm and control rows */
.team-card>.top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.team-card>.top small{color:var(--ink-2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-card h3{margin:0}
.team-card p{margin:6px 0 0}
.team-card-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.ack{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--act-text);background:var(--act-soft);border-radius:999px;padding:4px 11px}
.who-read-names{margin-top:10px}
.who-read-names summary{cursor:pointer;font-size:12px;font-weight:650;color:var(--act-text);list-style-revert:none}
.who-read-names summary::after{content:" ▾";font-size:10px;color:var(--muted)}
.who-read-names[open] summary{margin-bottom:6px}
.who-read-names small{display:block;font-size:12px;line-height:1.6;color:var(--ink-2)}
.task-controls{display:flex;gap:8px;align-items:stretch;margin-top:14px;flex-wrap:wrap}
.task-controls select{flex:0 0 auto;width:auto}
.task-controls input{flex:1 1 180px;min-width:0}
.task-controls button{white-space:nowrap}
.task-controls>*{min-height:40px}
.team-card.pinned{background:var(--warn-bg)}
.pinned-alert{display:grid;gap:10px;margin:0 0 18px}
.pinned-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pinned-row small{color:var(--ink-2)}
.pinned-row button{margin-left:auto}
.correction-history summary{cursor:pointer;color:var(--act-text);font-weight:600;font-size:12px}
.correction-history small{display:block;line-height:1.6;margin-top:6px}
.correction-history hr{border:0;border-top:1px solid var(--line);margin:8px 0}
@media(max-width:700px){.pinned-row button{margin-left:0}}

/* ===== My day + due-grouped work queue + report redesign ===== */
.myday{margin:16px 0 20px;padding:13px 18px 12px}
.myday-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.myday-head h2,.attendance-header h2{font-size:.875rem;font-weight:700}
.myday-attendance{font-size:12px;color:var(--ink-2);font-weight:600}
.myday-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px}
.myday-grid .stat{padding:0 14px;border-right:1px solid var(--line)}
.myday-grid .stat:first-child{padding-left:0}
.myday-grid .stat:last-child{border:0}
.myday-grid .stat strong{font-size:15px;font-weight:650;line-height:1.15;font-variant-numeric:tabular-nums}
.myday-grid .stat span{font-size:11px}
.myday-next{margin:10px 0 0;padding-top:9px;border-top:1px dashed var(--line);font-size:12px;color:var(--act-text);font-weight:600}
.work-group{margin-bottom:18px}
.work-group-head{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.work-group-head h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin:0;font-weight:700}
.work-group-head .count{padding:2px 7px;font-size:11px}
.work-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:8px}
.work-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.work-card-title{font-size:13.5px;font-weight:600;letter-spacing:-.1px}
.work-card-title span{font-weight:400;color:var(--ink-2)}
.work-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2);margin-top:3px}
.work-card-task{margin-top:7px;font-size:12.5px}
.work-card-task strong{font-weight:600}
.work-card-task small{display:block;color:var(--ink-2);margin-top:2px;font-size:11.5px;line-height:1.45}
.work-card-last{margin-top:7px;font-size:11px;color:var(--ink-2)}
.work-card-actions{display:flex;gap:8px;margin-top:10px}
.work-card-actions button{font-size:12.5px;padding:7px 12px}
.due-chip{display:inline-flex;align-items:center;min-height:20px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap}
.due-chip.overdue{background:var(--bad-bg);color:var(--bad-ink)}
.due-chip.today{background:var(--act-soft);color:var(--act-text)}
.due-chip.later{background:var(--info-bg);color:var(--info-ink)}
.due-chip.none{background:var(--surface-2);color:var(--ink-2)}
.draft-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:10px 14px;margin:0 0 16px}
.draft-banner small{display:block;color:var(--warn-ink);margin-top:2px}
.draft-actions{display:flex;gap:8px}
.draft-actions button{font-size:12.5px;padding:7px 12px}
.report-context-block{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin:0 0 14px;background:var(--surface-2)}
.report-context-block strong{font-size:13.5px}
.report-context-block strong span{font-weight:400;color:var(--ink-2)}
.report-context-block>small{display:block;color:var(--ink-2);font-size:11.5px;margin-top:2px}
.report-context-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.report-context-task{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.report-context-task strong{font-weight:600}
.report-context-task small{width:100%;color:var(--ink-2);margin:0}
.report-alt-search{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.report-alt-search>label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.report-offer-row .row-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.report-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:12px 0}
.report-divider::before,.report-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.report-photo-cta{width:100%;min-height:46px;font-size:14px}
.report-effects{margin:4px 0 12px}
.report-effects ul{margin:5px 0 0;padding-left:16px;font-size:12.5px}
.report-effects li{margin:2px 0}
@media(max-width:700px){
 .myday-grid{grid-template-columns:1fr 1fr;gap:8px 0}
 .myday-grid .stat{border:0;padding:0 12px}
 .work-card-actions{flex-wrap:wrap}
 .work-card-actions .primary{flex:1}
}

/* ===== Theme surfaces that had no colour of their own (native defaults) ===== */
dialog,.dialog-body{background:var(--surface);color:var(--ink)}
#toast{border:1px solid var(--pop-border);box-shadow:var(--shadow)}
nav button.active{color:var(--sidebar-ink)}
.theme select{font-size:12px;padding:6px 9px;border-color:var(--line)}
.theme{font-size:12px;color:var(--muted)}
/* ===== Listings sheet (grid.js) — the WPS-style grid. Scoped under .lg / .lg-*; resets the
   global button/table/th rules above so cells stay spreadsheet-sized. ===== */
body.lg-page main{max-width:none;padding-bottom:16px}
body.lg-page .heading{margin-bottom:10px}
@media(min-width:701px){ /* desktop: the page fills the viewport left under the top bar; a wrapped toolbar grows the page instead of covering rows or the status line */
 body.lg-page main{display:flex;flex-direction:column;height:calc(100vh - var(--shell-top));min-height:0;flex:none}
 body.lg-page .heading{flex:none}
 .lg-page #lg-root{flex:1;min-height:0;display:flex;flex-direction:column}
}
.lg{display:flex;flex-direction:column;gap:10px;font-size:14.5px;font-variant-numeric:tabular-nums;flex:1;min-height:0}
.lg button,.lg-pop button,.lg-drawer button,.lg-modal button,.lg-toast button{padding:7px 13px;font-size:14px;border-radius:var(--radius-control)}
.lg-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lg-sp{flex:1}
.lg-kinds{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.lg .lg-kinds button{border:0;background:transparent;border-radius:7px;padding:6px 14px;font-weight:600;color:var(--ink-2)}
.lg .lg-kinds button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px var(--pop-border)}
.lg-kinds .n{font-weight:500;color:var(--muted);margin-left:5px}
.lg-search{flex:1 1 240px;min-width:0;padding:8px 12px;border-radius:var(--radius-control)}
.lg .lg-chip{border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink-2);font-weight:500}
.lg .lg-chip[aria-pressed="true"]{background:var(--act-soft);border-color:var(--act-text);color:var(--act-text);font-weight:700}
.lg-keys{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.lg kbd,.lg-pop kbd{font:600 11.5px/1 inherit;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:2px 5px;background:var(--surface);color:var(--ink)}
.lg-wrap{flex:1;min-height:360px;overflow:auto;border:1px solid var(--line-2);border-radius:var(--radius-panel);background:var(--surface);position:relative}
.lg-wrap:focus{outline:none}
table.lg-grid{border-collapse:separate;border-spacing:0;table-layout:fixed;width:auto;font-size:14px}
.lg-grid th,.lg-grid td{height:38px;padding:0 9px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;vertical-align:middle;letter-spacing:0;text-transform:none}
.lg-grid td{cursor:cell;background:var(--surface);color:var(--ink)}
.lg-grid tr.z td{background:var(--zebra)}
.lg-grid th{position:sticky;top:0;z-index:3;background:var(--surface-2);font-size:12.5px;font-weight:700;color:var(--ink);height:40px;user-select:none;border-bottom:1px solid var(--line-2)}
.lg .lg-grid th button{all:unset;cursor:pointer;display:flex;gap:4px;align-items:center;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lg-grid th .arr{color:var(--act-text)}
.lg-grid th.req button::after{content:"*";color:var(--bad-ink)}
.lg-grid th.auto{color:var(--ink-2);font-weight:600}
.lg-grid .stick{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--line-2);background:var(--surface)}
.lg-grid th.stick{z-index:4}
.lg-grid td.num{text-align:right}
.lg-grid td.auto{background:var(--cell-auto);cursor:pointer}
.lg-grid tr.newrow td,.lg-grid tr.newrow td.auto{background:var(--act-soft)}
.lg-grid td.active{outline:2.5px solid var(--focus);outline-offset:-2.5px}
.lg-grid td.editing{padding:0;overflow:visible}
.lg-grid td.editing input,.lg-grid td.editing select{width:100%;height:38px;border:0;outline:2.5px solid var(--focus);outline-offset:-2.5px;padding:0 9px;background:var(--surface);border-radius:0;font-size:14px}
.lg-grid td.bad{box-shadow:inset 0 0 0 2px var(--bad-ink)}
.lg-grid tr.flash td{animation:lg-flash 2.4s ease-out}
@keyframes lg-flash{0%,40%{background:var(--flash)}}
.lg-grid tr.spacer td{height:auto;border:0;padding:0;background:transparent}
.lg-grid td.lg-empty{height:80px;text-align:center;color:var(--ink-2)}
.lg .ghost,.lg-drawer .ghost,.lg-modal .ghost{color:var(--muted)}
.lg-grid .pill,.lg-modal .pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12.5px;font-weight:700;line-height:1.35}
.lg-grid .pill.ok{background:var(--ok-bg);color:var(--ok-ink)}
.lg-grid .pill.unknown,.lg-modal .pill.unknown{background:var(--warn-bg);color:var(--warn-ink)}
.lg-grid .pill.off{background:var(--grey-bg);color:var(--grey-ink)}
.lg-grid .pill.small,.lg-modal .pill.small{font-size:11.5px;padding:1px 7px}
.lg-grid td.plat{font-weight:800;text-align:center;font-size:15px}
.lg-grid td.plat.current{color:var(--ok-ink)}
.lg-grid td.plat.needs_update{color:var(--warn-ink);background:var(--warn-bg)}
.lg-grid td.plat.not_posted{color:var(--muted)}
.lg-grid td.plat.removed{color:var(--muted);text-decoration:line-through}
.lg-grid .meta{font-size:12.5px;color:var(--ink-2)}
.lg-grid .meta b{color:var(--ink)}
.lg-grid a.lnk{color:var(--act-text);text-decoration:underline;text-underline-offset:2px}
.lg-grid .tick{color:var(--act-text);font-weight:800}
.lg .lg-grid .lg-sib{margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--info-bg);color:var(--info-ink);border:0;vertical-align:1px}
.lg .lg-grid .lg-sib:hover{text-decoration:underline}
/* Live: per-cell save state, someone else's recent change, someone editing now. */
.lg-grid td[data-tag]:not(.stick){position:relative}
.lg-grid td[data-tag]::after{content:attr(data-tag);position:absolute;top:2px;right:3px;font:700 10px/1.4 inherit;padding:0 4px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);pointer-events:none;max-width:calc(100% - 6px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-grid td.saved::after{background:var(--ok-bg);color:var(--ok-ink)}
.lg-grid td.offline{box-shadow:inset 0 0 0 2px var(--warn-ink)}
.lg-grid td.offline::after{background:var(--warn-bg);color:var(--warn-ink)}
.lg-grid td.remote,.lg-grid td.peer{box-shadow:inset 0 0 0 2px var(--peer)}
.lg-grid td.peer{box-shadow:inset 0 0 0 2px var(--peer),inset 0 0 0 5px color-mix(in srgb,var(--peer) 18%,transparent)}
.lg-grid td.remote::after,.lg-grid td.peer::after{background:var(--surface-2);color:var(--peer)}
.lg-net{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:75;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--pop-border);border-radius:999px;padding:6px 13px;font-size:12.5px;box-shadow:var(--shadow);color:var(--ink-2)}
.lg-net .dot{width:8px;height:8px;border-radius:50%;background:var(--ok-ink);flex:none}
.lg-net.off{color:var(--warn-ink)}
.lg-net.off .dot{background:var(--warn-ink)}
.lg-net .who{display:inline-flex;gap:4px;flex-wrap:wrap}
.lg-net .who span{border-radius:4px;padding:0 5px;font-size:11px;font-weight:700;background:var(--surface-2);color:var(--peer)}
@media(max-width:700px){.lg-net{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}
/* Floating editors, suggestions, toasts */
.lg-pop{position:fixed;z-index:120;background:var(--surface);color:var(--ink);border:1px solid var(--pop-border);border-radius:var(--radius-panel);box-shadow:var(--shadow);padding:11px;display:flex;flex-direction:column;gap:8px;min-width:230px;max-width:min(370px,calc(100vw - 32px));font-size:14px}
.lg-pop.wide{width:350px}
.lg-pop h4{margin:0;font-size:13px;color:var(--ink-2);font-weight:700}
.lg-pop .opts{display:grid;gap:6px}
.lg-pop .opt{display:flex;align-items:center;gap:8px;background:transparent;text-align:left;font-weight:500}
.lg-pop .opt[aria-selected="true"]{border-color:var(--act-text);background:var(--act-soft)}
.lg-pop .opt kbd{margin-left:auto}
.lg-pop input,.lg-pop textarea{padding:8px 10px;width:100%}
.lg-pop input.bad{border-color:var(--bad-ink)}
.lg-pop textarea{min-height:120px}
.lg-pop .row{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.lg-pop .hint,.lg-pop .note{font-size:12px;color:var(--ink-2);margin:0}
/* Station pickers: the transit cell's popover and the add-building form (grid.js) */
.lg-pop .lg-st-list{max-height:min(240px,40vh);overflow:auto}
.lg-pop .opt.st{flex-direction:column;align-items:flex-start;gap:1px}
.lg-pop .opt.st b{font-weight:600}
.lg-pop .opt.st small{color:var(--ink-2);font-size:12px}
.lg-sugg{position:fixed;z-index:125;background:var(--surface);color:var(--ink);border:1px solid var(--pop-border);border-radius:var(--radius-panel);box-shadow:var(--shadow);max-height:260px;overflow:auto;min-width:250px;padding:4px;font-size:14px}
.lg-sugg div{padding:7px 10px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column}
.lg-sugg div small{color:var(--ink-2);font-size:12px}
.lg-sugg div[aria-selected="true"]{background:var(--act-soft)}
/* the room-kind badge (Rent/Sale/Rent+Sale) on suggestion items */
.lg-sugg div b.kinds{display:block;width:max-content;margin:2px 0;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;background:var(--grey-bg);color:var(--grey-ink);vertical-align:1px}
.lg-telhint{position:fixed;z-index:125;background:var(--surface);color:var(--ink);border:1px solid var(--pop-border);border-radius:var(--radius-panel);box-shadow:var(--shadow);max-width:min(360px,calc(100vw - 32px));padding:10px 12px;font-size:14px}
.lg-telhint p{margin:0 0 8px;font-size:13px}
.lg-telhint .row{display:flex;gap:8px;flex-wrap:wrap}
.lg-telhint button{padding:7px 13px;font-size:13.5px}
.lg-errtip{position:fixed;z-index:130;background:var(--bad-ink);color:var(--surface);font-size:12.5px;font-weight:600;border-radius:6px;padding:5px 9px;pointer-events:none;max-width:340px}
.lg-toasts{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:110;width:max-content;max-width:calc(100vw - 32px)}
.lg-toast{background:var(--toast-bg);color:var(--toast-ink);border:1px solid var(--pop-border);border-radius:var(--radius-panel);padding:10px 14px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow);font-size:13.5px}
.lg-toast button{border:0;background:transparent;color:var(--act-text);font-weight:800;padding:0}
/* Side panel (history, paste history) and the paste window */
.lg-scrim{position:fixed;inset:0;background:var(--scrim);z-index:100}
.lg-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--surface);color:var(--ink);border-left:1px solid var(--line);border-radius:var(--radius-panel) 0 0 var(--radius-panel);box-shadow:var(--shadow);z-index:105;display:flex;flex-direction:column}
.lg-drawer header,.lg-modal header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.lg-drawer header h3,.lg-modal header h3{margin:0;font-size:17px}
.lg-drawer header p,.lg-modal header p{margin:3px 0 0;color:var(--ink-2);font-size:13px;font-weight:400}
.lg-drawer .x,.lg-modal .x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--ink-2);padding:4px 8px}
.lg-hist{list-style:none;margin:0;padding:14px 18px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.lg-hist li{border-left:3px solid var(--line-2);padding-left:12px}
.lg-hist li small{display:block;color:var(--ink-2);font-size:12.5px;margin-bottom:2px}
.lg-hist .chg{font-size:14px}
.lg-hist .chg s{color:var(--muted)}
.lg-hist .warn{font-size:12.5px;color:var(--warn-ink)}
.lg-hist button{margin-top:6px}
/* ===== Studio links drawer ===== */
.lg-drawer #lg-sl-q{margin:14px 18px 0}
/* ===== Studio column ===== */
.lg .lg-grid .lg-send{padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--act-soft);color:var(--act-text);border:0;vertical-align:1px}
.lg .lg-grid .lg-send:hover{text-decoration:underline}
.lg-grid td[data-k="studio"] .warn{color:var(--warn-ink);font-weight:600}
.lg-panel .lg-send{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;background:var(--act-soft);color:var(--act-text);border:0}
.lg-panel .fld[data-f="studio"] .warn{color:var(--warn-ink);font-weight:600}
.lg-panel .fld[data-f="studio"] .lnk{text-decoration:underline;text-underline-offset:2px}
/* Photos column cell + the photos drawer (grid.js) */
.lg-grid td.photos{cursor:pointer}
.lg-grid .lg-ph{font-weight:700}
.lg-grid .lg-ph.none{color:var(--muted);font-weight:400}
.lg-ph-body{padding:14px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px;flex:1}
.lg-ph-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lg-ph-count{font-size:13px;color:var(--ink-2)}
.lg-ph-msg,.lg-ph-progress,.lg-ph-sum{font-size:13px;margin:0}
.lg-ph-msg{color:var(--bad-ink);font-weight:600}
.lg-ph-progress{color:var(--ink-2)}
.lg-ph-sum{font-weight:600;color:var(--ok-ink)}
.lg-ph-msg:empty,.lg-ph-progress:empty,.lg-ph-sum:empty,.lg-ph-fails:empty{display:none}
.lg-ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.lg-ph-grid a{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.lg-ph-grid img{display:block;width:100%;height:100%;object-fit:cover}
.lg-ph-fails{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lg-ph-fails li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-radius:8px;padding:8px 10px;background:var(--bad-bg);color:var(--bad-ink);font-size:13px}
.lg-ph-fails li .nm{font-weight:700;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-ph-fails li .why{flex:1;min-width:120px}
.lg-ph-fails li button{background:transparent;border-color:var(--bad-ink);color:var(--bad-ink);font-weight:700}
.lg-ph-sumrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lg-ph-sumrow[hidden]{display:none} /* display:flex above would otherwise cancel the hidden attribute */
.lg-ph-cam,#lg-ph-back{min-height:44px} /* "Take another" camera button (touch only) and "Back to list" (a failed new-listing photo save): thumb-sized targets right next to the summary */
@media(max-width:700px){.lg-ph-body{padding:12px 14px}}
.lg-modal{position:fixed;inset:max(16px,4vh) max(16px,4vw);background:var(--surface);color:var(--ink);border-radius:var(--radius-panel);box-shadow:var(--shadow);z-index:105;display:flex;flex-direction:column;overflow:hidden;font-size:14px}
.lg-modal .body{padding:14px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px;flex:1}
.lg-modal .row{display:flex;gap:8px;flex-wrap:wrap}
.lg-modal footer{display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.lg-modal footer .sum{margin-right:auto;color:var(--ink-2);font-size:13px}
.lg-modal textarea{width:100%;min-height:120px;padding:9px;font:12.5px/1.45 ui-monospace,Consolas,monospace;background:var(--surface-2)}
.lg-modal .steps{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.lg-modal .steps span{background:var(--surface-2);border-radius:999px;padding:3px 11px}
.lg-modal .steps span.on{background:var(--act);color:var(--on-act);font-weight:700}
.lg-modal .lbl{font-size:12.5px;font-weight:700;color:var(--ink-2);margin:0}
.lg-modal .note{font-size:13px;color:var(--ink-2);margin:0}
.lg-modal .block{margin:0;padding:9px 12px;border-radius:8px;background:var(--bad-bg);color:var(--bad-ink);font-weight:700;font-size:13.5px}
.lg-modal .pv{overflow:auto;border:1px solid var(--line);border-radius:8px}
.lg-modal .pv table{border-collapse:collapse;font-size:13px;min-width:100%;width:auto}
.lg-modal .pv th,.lg-modal .pv td{border-bottom:1px solid var(--line);padding:6px 9px;white-space:nowrap;text-align:left;font-size:13px;letter-spacing:0;text-transform:none}
.lg-modal .pv th{background:var(--surface-2);color:var(--ink);position:sticky;top:0;z-index:1;font-weight:700}
.lg-modal .pv select{font-size:12px;padding:2px 4px;max-width:160px}
.lg-modal .maphead{display:flex;flex-direction:column;gap:3px}
.lg-modal .pv td.src{color:var(--ink-2);max-width:220px;overflow:hidden;text-overflow:ellipsis}
.lg-modal .pv .why{color:var(--bad-ink);font-size:12.5px;white-space:normal;min-width:200px;font-weight:600}
.lg-modal .pv .why.w{color:var(--warn-ink)}
.lg-modal .pv .why.g{color:var(--ok-ink)}
.lg-modal .pv .why.i{color:var(--info-ink)}
.lg-modal .pv tr.other td{background:var(--warn-bg)}
.lg-modal .pv td.old{color:var(--ink-2);text-decoration:line-through}
.lg-modal .pv td.win{font-weight:700}
.lg-modal .pv label.take{display:inline-flex;gap:6px;align-items:center;cursor:pointer;white-space:nowrap}
@media(max-width:700px){.lg-keys{display:none}.lg-wrap{height:calc(100vh - 300px)}.lg-search{flex-basis:100%}}
/* ===== Listings sheet on phones (≤700px, grid.js): card list + full-screen row editor ===== */
.lg-cards{display:flex;flex-direction:column;gap:8px}
.lg-cards .lg-empty{margin:24px 0;text-align:center;color:var(--ink-2)}
.lg-card{display:flex;flex-direction:column;gap:3px;width:100%;min-height:44px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel);padding:11px 13px;font-weight:400}
.lg-card:active{background:var(--surface-2)}
.lg-card .l1{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.lg-card .l1 .bd{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-card .l1 .pr{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.lg-card .l2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink-2);font-size:13px}
.lg-card .l2 .ph{margin-left:auto;font-weight:700;white-space:nowrap}
.lg-card .l2 .ph .none{color:var(--muted);font-weight:400}
.lg-cards .pill,.lg-panel .pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12.5px;font-weight:700;line-height:1.35}
.lg-cards .pill.ok,.lg-panel .pill.ok{background:var(--ok-bg);color:var(--ok-ink)}
.lg-cards .pill.rented,.lg-panel .pill.rented{background:var(--info-bg);color:var(--info-ink)}
.lg-cards .pill.unknown,.lg-panel .pill.unknown{background:var(--warn-bg);color:var(--warn-ink)}
.lg-cards .pill.off,.lg-panel .pill.off{background:var(--grey-bg);color:var(--grey-ink)}
.lg-card.new{flex-direction:row;justify-content:center;align-items:center;gap:8px;background:var(--act-soft);border-color:var(--act-text);color:var(--act-text);font-weight:700}
.lg-card.new .meta{color:var(--act-text);font-weight:500}
.lg-card.flash{animation:lg-flash 2.4s ease-out}
.lg-card:focus-visible{outline:3px solid var(--focus);outline-offset:2px} /* cards are real buttons: keyboard focus must be visible */
/* The row editor: full screen, one field per row, saves per field like a grid cell */
.lg-panel{position:fixed;inset:0;z-index:99;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;font-size:15px;padding:0;align-items:stretch;justify-content:flex-start} /* the panel is an <aside>: without this reset the sidebar's aside{} rules bleed in (padding 32px 20px; on ≤700px also align-items:center), which pads the full-screen panel and shrinks+centres its header/footer — invisible behind a long edit-mode title, obvious with the short New-listing one */
.lg-panel header{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;gap:4px 10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.lg-panel header>div:first-child{flex:1;min-width:0} /* beats the app-wide phone rule header>div:first-child{flex:1 0 100%} that pushed × onto its own row: title (and the ⇄ chip under it) left, × top-right */
.lg-panel header h3{margin:0;font-size:17px;min-width:0;overflow-wrap:anywhere}
.lg-panel .lg-sib{margin-top:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--info-bg);color:var(--info-ink);border:0}
.lg-panel .x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--ink-2);padding:6px 12px;min-width:44px;min-height:44px}
.lg-panel .body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 24px;display:flex;flex-direction:column;gap:18px}
.lg-panel .grp{border:1px solid var(--line);border-radius:var(--radius-panel);margin:0;padding:12px 14px;background:var(--surface)}
.lg-panel .grp h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:700}
.lg-panel .grp .flds{display:grid;gap:10px}
.lg-panel .grp .lg-ph-body{padding:0;overflow:visible}
.lg-panel .lg-ph-bar button{min-height:44px}
.lg-panel .fld{display:flex;flex-direction:column;gap:4px;position:relative}
.lg-panel .fld>.fl{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.lg-panel .fld input,.lg-panel .fld select,.lg-panel .fld textarea{width:100%;font-size:16px;padding:10px 12px;min-height:44px;border-radius:8px}
.lg-panel .fld textarea{min-height:70px;resize:vertical}
.lg-panel .stbtn,.lg-panel .boolbtn{width:100%;min-height:44px;text-align:left;background:var(--surface-2);border-color:var(--line-2)}
.lg-panel .boolbtn.on{background:var(--act-soft);border-color:var(--act-text);color:var(--act-text);font-weight:700}
.lg-panel .plats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2px}
.lg-panel .pfld{position:relative;display:inline-block}
.lg-panel .pchip{min-height:44px;padding:8px 14px;border-radius:999px;font-weight:700;background:var(--surface-2);color:var(--ink-2)}
.lg-panel .pchip.current{background:var(--ok-bg);color:var(--ok-ink)}
.lg-panel .pchip.needs_update{background:var(--warn-bg);color:var(--warn-ink)}
.lg-panel .pchip.removed{color:var(--muted);text-decoration:line-through}
.lg-panel details.more{border:1px solid var(--line);border-radius:var(--radius-panel);padding:0}
.lg-panel details.more summary{cursor:pointer;list-style:revert;padding:12px 14px;font-weight:700;font-size:13px;color:var(--ink-2)}
.lg-panel details.more[open] summary{border-bottom:1px solid var(--line)}
.lg-panel details.more .flds{padding:12px 14px}
.lg-panel .histbtn{width:100%;min-height:44px;text-align:left;background:var(--surface-2);border-color:var(--line-2);font-weight:400;color:var(--ink-2)}
.lg-panel .histbtn b{color:var(--ink)}
.lg-panel footer{display:flex;flex-wrap:wrap;gap:10px;padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface)}
.lg-panel footer .primary{flex:1;width:100%;min-height:48px;font-size:16px}
.lg-panel .lg-panel-err{flex:1 0 100%;margin:0;font-size:13.5px;font-weight:650;color:var(--bad-ink)} /* a refused save is never silent: the message rides the always-visible footer, next to the Save button */
.lg-panel .ghost{color:var(--muted);font-size:13px}
body.lg-panel-open{overflow:hidden}
body.lg-panel-open .mobile-report-bar{display:none} /* the editor's save bar owns the bottom edge */
@media(max-width:700px){body.lg-panel-open .lg-toasts{top:calc(var(--lg-head,58px) + 10px);bottom:auto;left:16px;right:16px;transform:none;width:auto;max-width:none}} /* while the editor owns the screen, toasts sit under its header instead of over the form */
/* Per-field live marks, mirroring the grid's cell marks (saving/saved/offline/peer/remote) */
.lg-panel .fld[data-tag]::after,.lg-panel .pfld[data-tag]::after{content:attr(data-tag);position:absolute;top:20px;right:10px;font:700 10.5px/1.4 inherit;padding:2px 6px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);pointer-events:none;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:1}
.lg-panel .pfld[data-tag]::after{top:-8px;right:-4px}
.lg-panel .fld[data-tag] input,.lg-panel .fld[data-tag] select,.lg-panel .fld[data-tag] textarea{padding-right:74px}
.lg-panel .fld.saved::after,.lg-panel .pfld.saved::after{background:var(--ok-bg);color:var(--ok-ink)}
.lg-panel .fld.offline input,.lg-panel .fld.offline select,.lg-panel .fld.offline textarea,.lg-panel .pfld.offline .pchip{border-color:var(--warn-ink)}
.lg-panel .fld.offline::after,.lg-panel .pfld.offline::after{background:var(--warn-bg);color:var(--warn-ink)}
.lg-panel .fld.remote input,.lg-panel .fld.peer input,.lg-panel .fld.remote select,.lg-panel .fld.peer select,.lg-panel .fld.remote textarea,.lg-panel .fld.peer textarea,.lg-panel .pfld.remote .pchip,.lg-panel .pfld.peer .pchip{border-color:var(--peer)}
.lg-panel .fld.remote::after,.lg-panel .fld.peer::after,.lg-panel .pfld.remote::after,.lg-panel .pfld.peer::after{background:var(--peer);color:var(--on-act)}
.lg-panel .fld.bad input,.lg-panel .fld.bad select,.lg-panel .fld.bad textarea{border-color:var(--bad-ink);box-shadow:inset 0 0 0 1px var(--bad-ink)}
/* Photos picked in NEW mode (kept locally until the listing is saved) */
.lg-newph-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.lg-newph-grid:empty{display:none}
.lg-newph-grid figure{margin:0;min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.lg-newph-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.lg-newph-grid figcaption{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:5px 6px;font-size:11px;color:var(--ink-2)}
.lg-newph-grid figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-newph-grid figcaption button{font-size:11px;padding:5px 9px}
.lg-newph-cam{width:100%} /* under the thumbnails: one tap per extra camera shot before the listing is saved */
@media(max-width:700px){.lg-toasts{bottom:calc(84px + env(safe-area-inset-bottom,0px))}} /* clear of the report bar / save bar */
@media (prefers-reduced-motion:reduce){.lg-grid tr.flash td,.lg-card.flash{animation:none;background:var(--flash)}}
/* ===== Phone shell (redesign ticket 8, ≤700px): one 56px header row (menu · page title ·
   account); all navigation lives in the menu drawer. Phones render different shell markup
   (renderShell in app.js); desktop (>700px) never enters this block. Class selectors here
   out-specify the old element-level nav rules in the base. ===== */
@media(max-width:700px){
.shell{display:flex;flex-direction:column}
.m-head{display:flex;align-items:center;gap:8px;height:56px;padding:6px 16px 6px 8px;background:var(--topbar-bg);border-bottom:1px solid var(--line)}
.m-menu{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;font-size:19px;line-height:1;color:var(--ink)}
#m-title{flex:1;min-width:0;margin:0;font-size:17px;font-weight:700;letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-account{flex:none;width:44px;height:44px;padding:0;border-radius:50%;border-color:var(--act);background:var(--act);color:var(--on-act);font-size:16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.m-date{margin:0 0 2px;font-size:13px;font-weight:600;color:var(--ink-2)}
#main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))} /* the fixed .mobile-report-bar never covers the last content */
#account-dialog[open]{width:min(340px,92vw)}
.m-account-body{display:grid;gap:10px;padding:16px 20px 20px}
/* Language/Theme are segmented buttons, not selects: iOS WebKit frequently drops a <select>
   choice made inside a showModal() dialog, so the value never lands and no change fires. */
.m-account-body .m-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:14px;font-weight:600}
.m-segs{display:flex;gap:6px;flex-wrap:wrap}
.m-seg{min-height:40px;padding:8px 14px;border-radius:999px;background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2);font-weight:600}
.m-seg.on{background:var(--act);border-color:var(--act);color:var(--on-act)}
.m-line{width:100%;min-height:46px;text-align:left;display:flex;align-items:center;font-weight:600}
.m-line.danger{color:var(--bad-ink);border-color:var(--bad-line)}
/* menu drawer: the sidebar surface as a full-height left drawer (a native <dialog> opened by
   openPhonePanel — Esc, backdrop tap and focus return stay in app.js) */
#menu-dialog[open]{display:flex;flex-direction:column;left:0;top:0;right:auto;bottom:auto;margin:0;width:min(300px,84vw);height:100dvh;max-height:none;border-radius:0;background:var(--sidebar-bg);color:var(--sidebar-ink);box-shadow:var(--shadow);animation:brp-menu-in .18s ease-out}
#menu-dialog .dialog-head{padding:16px 12px 12px 20px;border-bottom-color:var(--sidebar-line)}
#menu-dialog .dialog-head h2{color:var(--sidebar-ink)}
#menu-dialog .close{border-color:transparent;background:transparent;color:var(--sidebar-ink)}
#menu-dialog .close:hover{background:var(--sidebar-hover);color:var(--sidebar-ink)}
#menu-dialog .dialog-body{flex:1;min-height:0;overflow-y:auto;padding:10px 10px 20px;background:transparent;color:var(--sidebar-ink)}
.m-menu-list{display:grid;gap:2px;margin:0}
.m-menu-list .nav-group{margin:14px 6px 6px;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--sidebar-muted)}
.m-menu-list .nav-group:first-child{margin-top:0}
.m-menu-list button{display:flex;align-items:center;gap:11px;min-height:44px;width:100%;padding:10px 12px;text-align:left;background:transparent;border:0;border-radius:var(--radius-control);color:var(--sidebar-ink);font-size:.9375rem;font-weight:600}
.m-menu-list button span{display:inline;font-size:inherit;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-menu-list button:hover{background:var(--sidebar-hover)}
.m-menu-list button.active{background:var(--sidebar-active);box-shadow:inset 3px 0 0 var(--sidebar-mark);color:var(--sidebar-ink)}
}
@keyframes brp-menu-in{from{transform:translateX(-102%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){#menu-dialog[open]{animation:none}}

/* ===== Shell (redesign): forest sidebar + pale top bar (approved mock-v1). Everything is
   scoped under .app-shell (the desktop wrapper also keeps .shell for the JS shell-existence
   checks), so the element-level aside/header/nav rules above keep applying only to the old
   markup, and the grid/editor's own <aside>/<header> elements are untouched. ===== */
.app-shell{display:grid;grid-template-columns:var(--shell-side) 1fr;min-height:100vh}
.app-shell .side{background:var(--sidebar-bg);color:var(--sidebar-ink);display:flex;flex-direction:column;padding:22px 14px 16px;position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}
.app-shell .side .brand{text-decoration:none;color:var(--sidebar-ink);font-size:1.75rem;letter-spacing:-1.5px;font-weight:750;padding:2px 12px 0}
.app-shell .side .brand span{display:block;font-size:.6875rem;letter-spacing:.06em;font-weight:500;color:var(--sidebar-muted);margin-top:3px}
.app-shell .side nav{margin:26px 0 0;display:grid;gap:2px;align-content:start}
.app-shell .side .nav-group{margin:14px 4px 6px;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--sidebar-muted)}
.app-shell .side nav .nav-group:first-child{margin-top:0}
.app-shell .side nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;color:var(--sidebar-ink);padding:10px 12px;font-size:.9375rem;font-weight:600;border-radius:var(--radius-control)}
.app-shell .side nav button span{font-size:inherit;margin-left:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .side nav button:hover{background:var(--sidebar-active)}
.app-shell .side nav button.active{background:var(--sidebar-active);box-shadow:inset 3px 0 0 var(--sidebar-mark);color:var(--sidebar-ink)}
.app-shell .side .sidebar-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--sidebar-line);display:grid;gap:10px}
.app-shell .side .sidebar-foot .language,.app-shell .side .sidebar-foot .theme{font-size:.75rem;font-weight:600;color:var(--sidebar-muted)}
.app-shell .side .sidebar-foot select{font-size:.8125rem;padding:6px 9px;max-width:100%}
.app-shell .side .sidebar-foot .account-name{font-size:.8125rem;color:var(--sidebar-ink)}
.app-shell .side .sidebar-foot .quiet{border:0;background:transparent;color:var(--sidebar-muted);text-align:left;padding:6px 2px;font-size:.8125rem;border-radius:0}
.app-shell .side .sidebar-foot .quiet:hover{background:transparent;color:var(--sidebar-ink);text-decoration:underline}
.app-shell .workspace{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.app-shell .app-top{position:sticky;top:0;z-index:5;height:var(--shell-top);flex:none;display:flex;align-items:center;gap:14px;padding:0 28px;background:var(--topbar-bg);border-bottom:1px solid var(--line)}
.app-shell .breadcrumb{display:flex;align-items:center;gap:8px;margin:0;font-size:.9375rem;font-weight:600;color:var(--ink-2);min-width:0}
.app-shell .crumb-sep{color:var(--muted)}
.app-shell #crumb-page{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .top-date{margin-left:auto;font-size:.8125rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.app-shell main{flex:1;width:100%;max-width:var(--content-max);margin:0 auto;padding:26px 32px 48px}
.app-shell main.app-full{max-width:none}
@media(max-width:700px){ /* the phone shell is different markup (renderShell); this covers a desktop shell still mounted while the swap waits for a dialog to close */
  .app-shell{display:block}
  .app-shell .side,.app-shell .app-top{display:none}
}

/* ===== Primitives (redesign ticket 3) ===== */
/* The :not(:where(...)) guard skips the Listings sheet (.lg and its .lg-* overlays);
   :where keeps every rule at base specificity so earlier component rules still win. */
button:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)){min-height:38px;border-color:var(--line-2);border-radius:var(--radius-control)}
button:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)):hover{background:var(--surface-2)}
button:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)):active{background:var(--surface-2)}
button:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)):disabled{opacity:.55}
button:focus-visible:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)),a:focus-visible:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)),input:focus:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)),select:focus:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)),textarea:focus:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)){outline:3px solid var(--focus);outline-offset:2px}
.primary:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)){background:var(--act);border-color:var(--act);color:var(--on-act)}
.primary:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)):hover,.primary:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)):active{background:var(--act-hover);border-color:var(--act-hover)}
.quiet:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)){border:0;background:transparent;color:var(--ink-2)}
.quiet:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)):hover{background:transparent;color:var(--ink)}
.danger:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)){color:var(--bad-ink);border-color:var(--bad-line)}
.pill:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)){border-radius:999px;font-size:12px;padding:3px 9px;font-weight:600}
.pill.grey:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)){background:var(--grey-bg);color:var(--grey-ink)}
.tabs{display:inline-flex;gap:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-panel);padding:3px}
.tabs button{border:0;background:transparent;color:var(--ink-2);padding:6px 14px;border-radius:var(--radius-control)}
.tabs .selected{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px var(--pop-border)}
.m-seg{border-radius:999px;background:var(--surface);border-color:var(--line-2);color:var(--ink-2)}
.m-seg.on{background:var(--act);border-color:var(--act);color:var(--on-act)}
select:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)),input:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)),textarea:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)){border:1px solid var(--line-2);border-radius:var(--radius-control);background:var(--surface);color:var(--ink)}
input[aria-invalid="true"]:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)),select[aria-invalid="true"]:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)),textarea[aria-invalid="true"]:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)){border-color:var(--bad-line)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel)}
#toast{background:var(--toast-bg);color:var(--toast-ink);border:1px solid var(--pop-border);border-radius:var(--radius-panel);box-shadow:var(--shadow)}
@media(max-width:700px){
 button:not(:where(.lg *, [class^="lg-"]:not(body) *, [class*=" lg-"]:not(body) *)){min-height:44px}
 .m-seg{min-height:44px}
}

/* ===== Pages: Properties + Activity (redesign ticket 4) ===== */
/* One bordered panel per page: the filters sit in the panel's own toolbar and the
   rows are list rows with hairline separators. Scoped under .props-panel /
   .activity-panel, which occur only on these two pages. */
.props-panel .toolbar,.activity-panel .toolbar{margin:0;padding:12px 14px;border-bottom:1px solid var(--line)}
.activity-panel .activity-filter{padding:0;background:transparent;border:0;border-radius:0}
.activity-panel .activity-feed{max-width:none;gap:0;padding:2px 0 8px}
.activity-panel .activity-day{margin:14px 18px 2px}
.activity-panel .activity-day:first-child{margin-top:8px}
.activity-panel .activity-row{display:grid;grid-template-columns:56px minmax(150px,auto) minmax(0,1fr);column-gap:14px;row-gap:3px;align-items:start;padding:12px 18px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
.activity-panel .activity-row:last-child{border-bottom:0}
.activity-panel .activity-title{min-width:0}
.activity-panel .activity-listing{margin:0;min-width:0;font-size:13px;line-height:1.45}
.activity-panel .activity-changes,.activity-panel .activity-note{grid-column:2/-1}
.activity-panel .activity-changes{margin-top:4px}
.activity-panel .activity-note{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}
.activity-panel .activity-empty{padding:22px 18px}
@media(max-width:700px){
 .props-panel .table-scroll{overflow:visible}
 .props-panel table,.props-panel tbody{display:block}
 .props-panel thead{display:none}
 .props-panel tr{display:block;padding:13px 16px 11px;border-bottom:1px solid var(--line)}
 .props-panel tr:last-child{border-bottom:0}
 .props-panel td{display:block;padding:1px 0;border:0}
 .props-panel td.empty{padding:20px 16px}
 .props-panel td small{display:inline;margin-left:6px}
 .props-panel td:nth-child(2),.props-panel td:nth-child(3),.props-panel td:nth-child(4){display:inline-block;margin:0 14px 0 0;vertical-align:top}
 .props-panel td:nth-child(6){margin-top:6px}
 .activity-panel .toolbar{padding:10px 12px}
 .activity-panel .activity-row{grid-template-columns:48px minmax(0,1fr);column-gap:10px;padding:11px 14px}
 .activity-panel .activity-listing{grid-column:2}
 .activity-panel .activity-changes,.activity-panel .activity-note{grid-column:1/-1}
}
/* ===== Pages: Today + Team (redesign ticket 5) ===== */
/* Today desktop: draft banner + My-day strip on top, then two columns — work queue and
   New listings in the main column; attendance, photo requests and pinned/unread team
   notices in the side column. Below 900px the page stacks (draft/notices, attendance,
   queue, the rest). */
.today-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);grid-template-areas:"draft draft" "strip strip" "main side";gap:18px;align-items:start}
.today-grid>*{min-width:0}
.today-grid :is(.myday,.attendance,.draft-banner,.team-alert,.pinned-alert,.work-group,.section-title){margin:0}
.tg-draft{grid-area:draft}
.tg-strip{grid-area:strip}
.tg-main{grid-area:main;display:flex;flex-direction:column;gap:18px}
.tg-side{grid-area:side;display:flex;flex-direction:column;gap:18px}
.tg-notices,.tg-photos{display:flex;flex-direction:column;gap:10px}
.tg-strip .myday{padding:11px 16px 10px}
.tg-main .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tg-main .news-grid .empty{grid-column:1/-1}
.tg-side .attendance-columns{display:none}
.tg-side .attendance-row{grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;padding:12px}
.tg-side .attendance-row strong{min-width:0}
.tg-side .attendance-time{grid-column:1/-1}
.tg-side .attendance-status{justify-self:end}
@media(max-width:900px){
 .today-grid{display:flex;flex-direction:column;gap:18px;align-items:stretch}
 .tg-side{display:contents}
 .tg-draft{order:1}.tg-notices{order:2}.tg-attendance{order:3}.tg-main{order:4}.tg-photos{order:5}.tg-strip{order:6}
}
@media(max-width:700px){
 .tg-main .news-grid{grid-template-columns:1fr}
}
/* Team board: announcements and assigned tasks side by side (base .team-grid), photo
   requests full width below; owners create from the page heading. */
.staff-hint{margin:0 0 16px;font-size:13px}
.team-grid+.section-title{margin-top:24px}
/* ===== Pages: Daily report + Settings (redesign ticket 6) ===== */
/* The Daily report carries its date controls beside the heading (.report-heading), not in a toolbar. */
.heading.report-heading{flex-wrap:wrap;row-gap:12px}
.report-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#report-body .stats{margin:0 0 20px;padding:14px 20px}
#report-body .stat{padding:0 20px}
#report-body .stat:first-child{padding-left:0}
#report-body .stat:last-child{border-right:0}
#report-body .stat strong{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}
#report-body .section-title{margin:22px 0 10px}
/* Settings tabs use the reference's underline pattern, not the pill .tabs primitive. */
.manage-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:2px 0 18px;overflow-x:auto}
.manage-tabs button{border:0;background:transparent;border-radius:0;padding:9px 14px;font-size:.8438rem;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.manage-tabs button:hover{background:transparent;color:var(--ink)}
.manage-tabs button.selected{color:var(--ink);border-bottom-color:var(--act)}
.manage-actions{margin:0 0 14px}
@media(max-width:700px){
 .heading.report-heading .heading-actions{flex:1 1 100%;justify-content:flex-start}
 #report-body .stats{display:grid;grid-template-columns:1fr 1fr;padding:10px}
 #report-body .stat,#report-body .stat:first-child{border-right:0;padding:10px 12px}
}
/* ===== Dialogs (redesign ticket 7) ===== */
/* Shared native <dialog> chrome: #detail, #form-dialog, #report-dialog plus the phone
   account/menu panels. The Listings-sheet overlays are role="dialog" elements, not
   <dialog>, so the .lg-* rules above are untouched. */
dialog{border:0;border-radius:14px;padding:0;width:min(640px,94vw);max-height:90vh;box-shadow:var(--shadow);color:var(--ink);background:var(--surface)}
dialog::backdrop{background:var(--scrim)}
dialog[open]{display:flex;flex-direction:column}
.dialog-head{padding:20px 24px 16px;gap:14px;border-bottom:1px solid var(--line);flex:none}
.dialog-head .muted{margin:4px 0 0;font-size:.8125rem;line-height:1.5}
.close{color:var(--ink-2)}
.close:hover{background:var(--surface-2);color:var(--ink)}
#detail .dialog-body,#form-dialog .dialog-body,#report-dialog .dialog-body{padding:20px 24px;overflow-y:auto;flex:1}
#report-dialog .dialog-head{align-items:center}
.report-offer-row:hover{background:var(--surface-2)}
#form-dialog[open]{width:min(760px,92vw)}
#form-dialog.wide[open]{width:min(1180px,94vw)}
/* #detail: right-side drawer, full height, header fixed above the scrolling body */
@keyframes brp-drawer-in{from{transform:translateX(28px);opacity:.7}to{transform:translateX(0);opacity:1}}
dialog.detail[open]{position:fixed;inset:0 0 0 auto;margin:0;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;width:min(1100px,92vw);border-radius:0;display:flex;flex-direction:column;animation:brp-drawer-in .2s ease-out}
dialog.detail .dialog-body{display:flex;flex-direction:column}
dialog.detail .detail-block{margin:22px 0 0;border-top:1px solid var(--line);padding-top:18px}
dialog.detail .detail-block>h3{margin-top:0}
/* Desktop (>700px) widths and text sizes (DIALOG-WIDTH, Tom 2026-10-13): the report sheet,
   form dialog and detail drawer use more of a wide screen and read larger. The phone rules
   below keep the exact full-screen / bottom-sheet treatment — nothing here applies ≤700px. */
@media(min-width:701px){
 #report-dialog[open]{width:min(760px,92vw)}
 #report-dialog .report-offer-row strong{font-size:15px}
 #report-dialog .report-offer-row small{font-size:13px}
 #report-dialog .report-group h3{font-size:12px}
 #report-dialog .due-chip{font-size:12px}
 #detail .dialog-body{font-size:15px}
 #detail .eyebrow{font-size:12px}
 #detail .facts span{font-size:13px}
 #detail .small-label{font-size:13px}
 #detail .task-reason{font-size:13px}
 #detail .contact{font-size:15px}
 #detail .checklist button{font-size:14px}
 .dialog-head{padding:22px 28px 18px}
 #detail .dialog-body,#form-dialog .dialog-body,#report-dialog .dialog-body{padding:22px 28px}
}
/* The detail drawer in two columns from 1280px: price/status/actions + next actions left,
   owner/photos/ads/history right. Narrower screens keep today's stacked order (the wrapper
   divs are inert blocks without this rule). */
@media(min-width:1280px){
 #detail .drawer-cols{display:grid;grid-template-columns:minmax(360px,5fr) minmax(0,7fr);gap:28px;align-items:start}
 #detail .offer-summary .actions{flex-wrap:wrap}
}
@media(max-width:700px){ /* full-screen phone treatment; the report sheet keeps its own bottom-sheet rules above */
 .dialog-head{padding:14px 16px}
 #detail .dialog-body,#form-dialog .dialog-body,#report-dialog .dialog-body{padding:16px}
 dialog.detail[open]{inset:0;width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}
 #detail .dialog-body{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
 #form-dialog[open],#form-dialog.wide[open]{position:fixed;inset:0;margin:0;width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0}
 #form-dialog .dialog-body{padding:16px 16px 0}
 #form-dialog .form-actions{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);margin:16px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))} /* submit buttons stay reachable while the form body scrolls */
}
@media (prefers-reduced-motion:reduce){dialog[open],dialog.detail[open],dialog.sheet[open]{animation:none}}

/* ===== Redesign integration fixes ===== */
/* Phone shell: #main fills the shell's column so a wide table scrolls inside its
   .table-scroll, and the page heading stacks its action buttons under the title. */
@media(max-width:700px){
 #main{width:100%;min-width:0}
 #main>.heading{flex-direction:column;align-items:stretch;gap:12px}
 #main>.heading .heading-actions{width:100%;display:flex;flex-wrap:wrap;gap:8px}
 #main>.heading .heading-actions>button{flex:1 1 0;min-height:44px}
}
@media(min-width:701px) and (max-width:1023px){:root{--shell-side:200px}} /* SPEC: the sidebar narrows below 1024px */