/* Autom8Way design system (owner's design standard, 2026-10-08).
   Spec and measured colours: docs/superpowers/specs/2026-10-08-cost-library-design.md. Components: partials/design.html.
   Loaded after app.css. Every section built on the standard uses these classes (prefix ds-); one definition each.
   Screen widths: 1672 px is the reference; below 1600 the rail narrows and the type tightens; below 1180 one column;
   below 1050 the sidebar moves above the page; below 760 phone layout. Where a row of cards gets too narrow for a
   figure and its change side by side (1181-1599 px), every card in the row switches the same way. */

@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2")}

:root{
  --ds-ink:#0F1E33;--ds-text:#202E40;--ds-muted:#6B7D92;--ds-th:#6B7E9D;--ds-nav:#405A74;--ds-label:#61728D;
  --ds-blue:#255ADB;--ds-blue-h:#2257D6;--ds-active:#E9F1FE;--ds-page:#F7F9FC;--ds-side:#FDFDFD;--ds-line:#E8EDF3;--ds-line-2:#F0F3F7;
  --ds-t-blue:#ECF2FE;--ds-t-red:#FEEEEE;--ds-t-green:#EDF8F6;--ds-t-purple:#F2ECFE;--ds-t-amber:#FEF6EA;
  --ds-good:#1A8F5A;--ds-bad:#D64545;--ds-s1:#3A66FE;--ds-s2:#A545F8;--ds-s3:#FDA319;--ds-s4:#E5E6E9;--ds-avatar:#465D76;
  --ds-radius:12px;--ds-shadow:0 1px 3px rgba(25,55,86,.05);--ds-pop:0 24px 64px rgba(25,55,86,.12);--ds-rail:290px}

body{background:var(--ds-page)}

/* ---- shell and sidebar ------------------------------------------------------------------------------------------ */
.app-shell{grid-template-columns:240px minmax(0,1fr)}
.app-side{background:var(--ds-side);border-right:1px solid var(--ds-line);padding:14px 12px;display:flex;flex-direction:column}
.app-brand{padding:4px 8px 14px;font-size:18px;font-weight:800;color:var(--ds-ink);letter-spacing:-.01em}
.app-brand .logo-mark{width:34px;height:34px;flex:0 0 auto}
.workspace-switch{gap:10px;justify-content:flex-start;border:1px solid var(--ds-line);background:#fff;border-radius:12px;padding:10px;box-shadow:0 1px 2px rgba(25,55,86,.04)}
.workspace-switch .ws-tile{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,#649CFB,#2E68F4);display:grid;place-items:center;flex:0 0 auto}
.workspace-switch .ws-tile .icon{width:16px;height:16px;stroke:#fff}
.workspace-switch .ws-name{flex:1;min-width:0}
.workspace-switch strong{font-size:12.5px;font-weight:700;color:var(--ds-ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workspace-switch small{font-size:10.5px;color:var(--ds-muted);white-space:nowrap}
.workspace-switch>.icon{color:var(--ds-muted);width:14px;height:14px}
.ws-menu .dropdown-menu{left:0;right:0;top:calc(100% - 10px)}
.ws-menu .side-link{font-size:12.5px}
.side-label{color:var(--ds-label);font-size:10.5px;font-weight:700;letter-spacing:.09em;margin:18px 10px 6px}
.side-link{color:var(--ds-nav);font-weight:560;font-size:13px;padding:8px 10px;gap:9px;border-radius:9px;margin:1px 0}
.side-link .icon{color:#5B7089}
.side-link:hover{background:#F2F6FB;color:var(--ds-ink)}
.side-link.active{background:var(--ds-active);color:var(--ds-blue);font-weight:650}
.side-link.active .icon{color:var(--ds-blue)}
.side-foot{margin-top:auto;padding-top:10px}
.nav-dash,.ws-owner{display:none}
/* Fold the sidebar to icons: on every page, kept while the tab is open (sidebar_owner.html). */
.side-foot{display:flex;align-items:center;gap:4px}
.nav-collapse{display:grid;place-items:center;width:28px;height:28px;margin-inline-start:auto;border:0;background:transparent;color:var(--ds-muted);cursor:pointer;border-radius:8px}
.nav-collapse .icon{width:14px;height:14px;transform:rotate(90deg)}
.app-shell.nav-collapsed{grid-template-columns:64px minmax(0,1fr)}
.app-shell.nav-collapsed .side-link span,.app-shell.nav-collapsed .ws-name,.app-shell.nav-collapsed .side-label,
.app-shell.nav-collapsed .app-brand div,.app-shell.nav-collapsed .density-form{display:none}
.app-shell.nav-collapsed .nav-collapse .icon{transform:rotate(-90deg)}
.side-foot .lang-switch{margin:0 0 6px!important;border-color:var(--ds-line)!important;font-size:12px!important}
.account-menu{margin-top:8px;border-top:1px solid var(--ds-line)}
.account-menu .avatar{width:32px;height:32px;border-radius:50%;background:var(--ds-avatar);color:#fff;font-size:11px;font-weight:700}
.account-menu .user-tile strong{font-size:12.5px;font-weight:700;color:var(--ds-ink)}
.account-menu .user-tile small{font-size:10.5px}

/* ---- page, cards, type ------------------------------------------------------------------------------------------ */
.ds-page{color:var(--ds-text);font-size:13px}
.ds-card{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow);min-width:0}
.ds-pad{padding:16px}
.ds-card h2,.ds-card h3{margin:0;font-size:15px;font-weight:700;color:var(--ds-ink)}
.ds-note{color:var(--ds-muted);font-size:12px}
.ds-link{color:var(--ds-blue);font-weight:600}
.ds-empty{padding:28px;text-align:center;color:var(--ds-muted)}
.ds-flash{margin:12px 0 0}

/* ---- layout ----------------------------------------------------------------------------------------------------- */
.ds-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--ds-rail);gap:16px;margin-top:14px}
.ds-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.ds-rail{min-width:0;display:flex;flex-direction:column;gap:16px}
.ds-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px}
.ds-two-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

/* ---- icon tile -------------------------------------------------------------------------------------------------- */
.ds-tile{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.ds-tile .icon{width:26px;height:26px;stroke-width:1.7}
.ds-tile.blue{background:var(--ds-t-blue);color:var(--ds-blue)}
.ds-tile.red{background:var(--ds-t-red);color:#E0533F}
.ds-tile.green{background:var(--ds-t-green);color:#17866B}
.ds-tile.purple{background:var(--ds-t-purple);color:#8B4DF0}
.ds-tile.amber{background:var(--ds-t-amber);color:#E08A00}

/* ---- change indicator: arrow + % (green good, red bad, grey flat or no earlier figure) ----------------------------- */
.ds-chg{font-weight:650;white-space:nowrap}
.ds-chg.good{color:var(--ds-good)}
.ds-chg.bad{color:var(--ds-bad)}
.ds-chg.flat,.ds-chg.none{color:var(--ds-muted)}

/* ---- KPI card: tile | label over figure, change over caption beside the figure ---------------------------------- */
/* Cards are as wide as their content (as in the mock-up: the price card is the widest) and share what is left. */
.ds-kpis{display:flex;flex-wrap:wrap;gap:14px}
.ds-kpi{flex:1 0 auto;display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border:1px solid var(--ds-line);
  border-radius:var(--ds-radius);box-shadow:var(--ds-shadow);min-width:0}
.ds-kpi-body{min-width:0;display:grid;grid-template-columns:auto auto;justify-content:start;grid-template-areas:"label label" "value delta";
  column-gap:18px;align-items:center}
.ds-kpi-label{grid-area:label;font-size:12px;font-weight:600;color:var(--ds-text);white-space:nowrap;margin-bottom:2px}
.ds-kpi-value{grid-area:value;font-size:24px;line-height:1.2;font-weight:750;color:var(--ds-ink);letter-spacing:-.01em;white-space:nowrap}
.ds-kpi-delta{grid-area:delta;font-size:11.5px;line-height:1.3;white-space:nowrap}
.ds-kpi-delta>span:last-child{display:block;color:var(--ds-muted);font-size:10px;font-weight:500}

/* ---- buttons, selects, links -------------------------------------------------------------------------------------- */
.ds-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:8px;font-size:12.5px;font-weight:650;
  border:1px solid var(--ds-line);background:#fff;color:var(--ds-text);cursor:pointer;white-space:nowrap}
.ds-btn:hover{border-color:#C9D5E3}
.ds-btn.primary{background:var(--ds-blue);border-color:var(--ds-blue);color:#fff}
.ds-btn.primary:hover{background:var(--ds-blue-h)}
.ds-btn .icon{width:15px;height:15px}
.ds-sel{height:34px;border:1px solid var(--ds-line);border-radius:8px;background:#fff;padding:0 28px 0 11px;font-size:12.5px;color:var(--ds-text);max-width:100%}

/* ---- page header: back link, search, icons, title, info card, photo, tabs ------------------------------------------ */
.ds-head{position:relative;margin:-20px -24px 0;padding:14px 24px 0;overflow:hidden;min-height:150px}
.ds-photo{position:absolute;right:0;top:0;width:46%;height:158px;background:url("/static/img/costlib/header-site.jpg") 70% 42%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 26%,#000 62%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 26%,#000 62%)}
.ds-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(220,233,248,.30) 0,rgba(247,249,252,.10) 55%,rgba(247,249,252,.92) 100%)}
.ds-top{position:relative;display:flex;align-items:center;gap:16px;margin-bottom:6px}
.ds-back{display:inline-flex;align-items:center;gap:6px;color:var(--ds-muted);font-size:12.5px;font-weight:560}
.ds-back:hover{color:var(--ds-blue)}
.ds-back .icon{width:14px;height:14px;transform:rotate(90deg)}
.ds-search{position:relative;margin-left:auto;width:min(395px,40vw)}
.ds-search input{width:100%;height:36px;border:1px solid var(--ds-line);border-radius:9px;background:#fff;padding:0 70px 0 36px;font-size:12.5px;color:var(--ds-text);box-shadow:0 1px 2px rgba(25,55,86,.04)}
.ds-search>.icon{position:absolute;left:11px;top:10px;width:16px;height:16px;color:var(--ds-muted)}
.ds-search kbd{position:absolute;right:8px;top:7px;font:600 11px Inter,sans-serif;color:var(--ds-text);background:#F2F5F9;border:1px solid var(--ds-line);border-radius:6px;padding:2px 6px}
.ds-results{position:absolute;left:0;right:0;top:40px;background:#fff;border:1px solid var(--ds-line);border-radius:12px;box-shadow:var(--ds-pop);z-index:30;padding:6px;max-height:360px;overflow:auto}
.ds-results a{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;font-size:12.5px}
.ds-results a:hover,.ds-results a.on{background:var(--ds-active)}
.ds-results small{color:var(--ds-muted)}
.ds-icons{display:flex;align-items:center;gap:10px;color:var(--ds-text)}
.ds-icons a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 1px 2px rgba(25,55,86,.08)}
.ds-icons a:hover{background:#fff}
.ds-title{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ds-title h1{font-size:30px;line-height:1.15;font-weight:800;color:var(--ds-ink);letter-spacing:-.02em;margin:4px 0}
.ds-title p{margin:0;color:var(--ds-muted);font-size:13px}
.ds-weather{background:rgba(255,255,255,.95);border:1px solid var(--ds-line);border-radius:9px;padding:6px 10px;box-shadow:0 8px 24px rgba(25,55,86,.07);font-size:11px;margin-top:34px;flex:0 0 auto}
.ds-weather .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ds-weather b{font-size:12px;color:var(--ds-ink)}
.ds-weather small{display:block;color:var(--ds-muted);font-size:10.5px;margin-top:1px}
.ds-sun{display:inline-block;width:10px;height:10px;border-radius:50%;background:#FDB022;box-shadow:0 0 0 2px #FEF0C7;vertical-align:-1px;margin-right:5px}
.ds-tabs{position:relative;display:flex;gap:4px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.ds-tabs::-webkit-scrollbar{display:none}
.ds-tabs a{padding:9px 11px 10px;font-size:13px;font-weight:560;color:var(--ds-text);border-bottom:2px solid transparent;white-space:nowrap}
.ds-tabs a:hover{color:var(--ds-blue)}
.ds-tabs a.on{color:var(--ds-blue);border-bottom-color:var(--ds-blue);font-weight:650}
/* Stage 16: the tabs that join pages merged under one sidebar link (Purchases & stock, Inbox, Reports & tax) */
.ds-pagetabs{margin:0 0 16px;border-bottom:1px solid var(--ds-line)}
.ds-pagetabs a{margin-bottom:-1px}

/* ---- charts and legends ----------------------------------------------------------------------------------------- */
.ds-chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ds-chart{width:100%;height:auto;display:block}
.ds-chart text{font:11px Inter,sans-serif;fill:#5B6F84}
.ds-series{display:flex;gap:14px;font-size:11.5px;color:var(--ds-text);margin:10px 0 2px;flex-wrap:nowrap;overflow:hidden}
.ds-series span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ds-series i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.ds-donut{display:flex;align-items:center;gap:22px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.ds-donut svg{flex:0 0 auto}
.ds-legend{flex:1 1 250px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ds-legend a{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ds-text);white-space:nowrap}
.ds-legend a:hover{color:var(--ds-blue)}
.ds-legend i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.ds-legend b{margin-left:auto;font-weight:600;color:var(--ds-ink)}

/* ---- menus: row "···" menu and filter pill ------------------------------------------------------------------------ */
.ds-more{position:relative;display:inline-block}
.ds-more summary{list-style:none;width:30px;height:24px;border:1px solid var(--ds-line);border-radius:7px;display:grid;place-items:center;cursor:pointer;color:var(--ds-text);font-weight:800;letter-spacing:1px;line-height:1}
.ds-more summary::-webkit-details-marker{display:none}
.ds-more .menu{position:absolute;right:0;top:28px;background:#fff;border:1px solid var(--ds-line);border-radius:10px;box-shadow:var(--ds-pop);z-index:20;min-width:170px;padding:5px}
.ds-more .menu a,.ds-more .menu button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:7px;font-size:12.5px;color:var(--ds-text);background:none;border:0;cursor:pointer}
.ds-more .menu a:hover,.ds-more .menu button:hover{background:var(--ds-active);color:var(--ds-blue)}
.ds-more.ds-scope summary{width:auto;height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;font-weight:500;letter-spacing:0;font-size:12px;border-radius:8px}
.ds-more.ds-scope summary .icon{width:13px;height:13px;color:var(--ds-muted)}
.ds-scope .menu{width:230px;display:grid;gap:6px;padding:10px}
.ds-scope .menu .ds-sel{width:100%}

/* ---- rail lists: insights, quick actions, recent ------------------------------------------------------------------ */
.ds-rail h3{display:flex;align-items:center;gap:9px;font-size:15px;white-space:nowrap;min-width:0}
.ds-rail h3 .icon{color:var(--ds-blue);width:20px;height:20px}
.ds-rail h3 a{margin-left:auto;color:var(--ds-text);flex:0 0 auto;font-size:12px;font-weight:600}
.ds-ins{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--ds-line-2)}
.ds-ins:first-of-type{border-top:0}
.ds-ins .ds-tile{width:38px;height:38px;border-radius:9px}
.ds-ins .ds-tile .icon{width:20px;height:20px}
.ds-ins b{display:block;font-size:13px;color:var(--ds-ink);font-weight:650}
.ds-ins small{color:var(--ds-muted);font-size:11px}
.ds-ins .pct{margin-left:auto;font-weight:700;font-size:12.5px;white-space:nowrap}
.ds-ins .pct.up{color:var(--ds-bad)}
.ds-ins .pct.down{color:var(--ds-good)}
.ds-qa{display:flex;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--ds-line-2);font-size:13px;color:var(--ds-text);white-space:nowrap}
.ds-qa:first-of-type{border-top:0}
.ds-qa-box .ds-qa,.ds-qa-box summary.ds-qa{background:#F7F9FC;border:1px solid var(--ds-line-2)!important;border-radius:9px;padding:8px 10px;margin:6px 0}
.ds-qa:hover{color:var(--ds-blue)}
.ds-qa .q-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--ds-t-blue);color:var(--ds-blue);flex:0 0 auto}
.ds-qa .q-ico.amber{background:var(--ds-t-amber);color:#E08A00}
.ds-qa .q-ico .icon{width:17px;height:17px}
.ds-qa .go{margin-left:auto;width:14px;height:14px;color:var(--ds-muted);transform:rotate(-90deg)}
.ds-recent{display:flex;gap:12px;align-items:center;padding:8px 0}
.ds-recent b{display:block;font-size:13px;color:var(--ds-ink);font-weight:650}
.ds-recent small{color:var(--ds-muted);font-size:11.5px}
.ds-thumb{width:34px;height:34px;flex:0 0 auto;display:block;object-fit:contain}
.ds-thumb.sm{width:26px;height:26px}

/* ---- toolbar, sub-tabs, view switch ------------------------------------------------------------------------------- */
.ds-tools{display:flex;gap:10px;align-items:center;padding:16px 16px 0;flex-wrap:wrap}
.ds-tools>*{flex:0 0 auto}
.ds-tools .ds-search{margin:0;flex:1 1 180px;min-width:130px;width:auto}
.ds-tools .ds-search input{padding-right:12px}
.ds-tools .ds-sel{width:auto;min-width:0;max-width:170px}
.ds-tools .ds-btn select{border:0;background:none;font:inherit;color:inherit;padding:0 4px;cursor:pointer;max-width:112px}
.ds-subtabs{display:flex;align-items:center;gap:4px;padding:6px 16px 0;border-bottom:1px solid var(--ds-line);flex-wrap:wrap}
.ds-subtabs a{padding:9px 10px;font-size:12.5px;font-weight:560;color:var(--ds-text);border-bottom:2px solid transparent;margin-bottom:-1px}
.ds-subtabs a.on{color:var(--ds-blue);border-bottom-color:var(--ds-blue);font-weight:650}
.ds-view{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ds-muted);padding-bottom:6px}
.ds-view a{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--ds-line);border-radius:7px;color:var(--ds-text);font-weight:560;margin:0}
.ds-view a.on{background:var(--ds-active);border-color:#CFDDF8;color:var(--ds-blue)}
.ds-view .icon{width:14px;height:14px}
.ds-pager{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;color:var(--ds-muted);font-size:12px}
.ds-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:16px}
.ds-cards .ds-card{padding:14px;display:flex;flex-direction:column;gap:6px}
/* Projects, Cards: name, then stage + scope (may wrap), then the value on its own line, then who and where. */
.pcard{overflow:hidden;text-decoration:none}
.pcard-head{display:flex;gap:10px;align-items:center;min-width:0}
.pcard-head>div{min-width:0}
.pcard-head b{display:block;color:var(--ds-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;min-width:0}
.pcard-meta .ds-pill{flex:0 0 auto}
.pcard-meta small{min-width:0;overflow-wrap:anywhere}
.pcard-value{color:var(--ds-ink);font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-who{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- table: long names, categories and sources shorten with "…" (full text on hover) --------------------------- */
.ds-table-wrap{overflow-x:auto}
.ds-table{width:100%;border-collapse:collapse;font-size:12.5px}
.ds-table th{font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-th);text-align:left;padding:10px 8px;background:#FAFBFD;border-bottom:1px solid var(--ds-line);white-space:nowrap}
.ds-table td{padding:6px 8px;border-bottom:1px solid var(--ds-line-2);vertical-align:middle;color:var(--ds-text);white-space:nowrap}
.ds-table tr:hover td{background:#FAFCFF}
.ds-table .code{font-weight:560;letter-spacing:.02em}
.ds-table .nm{font-weight:560;color:var(--ds-ink);max-width:190px;overflow:hidden;text-overflow:ellipsis}
.ds-table .cat{color:var(--ds-muted);max-width:180px;overflow:hidden;text-overflow:ellipsis}
.ds-table .src{max-width:125px;overflow:hidden;text-overflow:ellipsis}
.ds-table .pr{font-weight:700;color:var(--ds-ink)}
.ds-table .wrap{white-space:normal}
.ds-table input[type=checkbox]{width:15px;height:15px;accent-color:var(--ds-blue)}

/* ---- choice chips: a tick-box option shown as a pill (tiers, items to compare) ------------------------------------ */
.ds-choices{display:flex;gap:8px;flex-wrap:wrap}
label.ds-choice{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 12px;max-width:100%;border:1px solid var(--ds-line);border-radius:8px;
  background:#fff;font-size:12.5px;font-weight:560;color:var(--ds-text);cursor:pointer;white-space:nowrap;margin:0}
@media (max-width:760px){label.ds-choice{white-space:normal;line-height:1.35}}
label.ds-choice input{width:15px;height:15px;margin:0;accent-color:var(--ds-blue);flex:0 0 auto}
label.ds-choice:has(input:checked){border-color:#B9CCF6;background:var(--ds-active);color:var(--ds-blue)}
.ds-form label.ds-choice{display:inline-flex;margin:0;font-size:12.5px;color:var(--ds-text)}

/* ---- forms and dialogs -------------------------------------------------------------------------------------------- */
.ds-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-items:end}
.ds-form label{display:block;font-size:11.5px;font-weight:650;color:var(--ds-nav);margin-bottom:4px}
.ds-form input,.ds-form select{width:100%;height:36px;border:1px solid var(--ds-line);border-radius:8px;padding:0 10px;font-size:12.5px;background:#fff;color:var(--ds-text)}
.ds-form .wide{grid-column:1/-1}
.ds-form input[type=checkbox],.ds-form input[type=radio]{width:15px;height:15px;padding:0;border:0;margin:0;accent-color:var(--ds-blue)}
.ds-form.cols-1{grid-template-columns:minmax(0,1fr)}
.ds-form textarea{width:100%;border:1px solid var(--ds-line);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;color:var(--ds-text);background:#fff}
.ds-pair{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:8px}
.ds-lines{display:grid;grid-template-columns:2fr .7fr .7fr 1fr;gap:6px;margin-bottom:6px}
@media (max-width:760px){.ds-lines{grid-template-columns:1fr 1fr}.ds-lines>:first-child{grid-column:1/-1}}
.ds-form.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ds-form.cols-5{grid-template-columns:1.35fr 1fr .8fr 1fr 1fr}
.ds-form .span-2{grid-column:span 2}
@media (max-width:1180px){.ds-form.cols-4,.ds-form.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ds-form.cols-4,.ds-form.cols-5{grid-template-columns:minmax(0,1fr)}.ds-form .span-2{grid-column:auto}}
dialog.ds-dialog{border:0;border-radius:14px;padding:0;width:min(680px,94vw);box-shadow:var(--ds-pop)}
dialog.ds-dialog::backdrop{background:rgba(15,30,51,.35)}
dialog.ds-dialog .ds-pad{padding:20px}
dialog.ds-dialog h2{font-size:18px;line-height:1.3;font-weight:700;color:var(--ds-ink);letter-spacing:-.01em;margin:0 0 4px}

/* ---- right panel: collapse and expand (every page with a ds-grid; remembered on the device) ------------------------ */
.ds-grid{position:relative}
.ds-rail-toggle{position:absolute;top:14px;right:calc(var(--ds-rail) + 2px);z-index:5;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--ds-line);background:#fff;box-shadow:0 2px 6px rgba(25,55,86,.12);display:grid;place-items:center;cursor:pointer;color:var(--ds-text);padding:0}
.ds-rail-toggle .icon{width:13px;height:13px;transform:rotate(-90deg)}
.ds-rail-toggle:hover{color:var(--ds-blue);border-color:#C9D5E3}
.ds-grid.rail-off{grid-template-columns:minmax(0,1fr)}
.ds-grid.rail-off>.ds-rail{display:none}
.ds-grid.rail-off>.ds-rail-toggle{right:-12px}
.ds-grid.rail-off>.ds-rail-toggle .icon{transform:rotate(90deg)}

/* ---- page header actions (large buttons beside the title) --------------------------------------------------------- */
.ds-actions{position:relative;display:flex;gap:10px;align-items:center;flex-wrap:nowrap;justify-content:flex-end;flex:0 0 auto}
.ds-title>div:first-child{flex:1 1 auto;min-width:0}
.ds-btn.lg{height:40px;padding:0 16px;font-size:13px;border-radius:9px;box-shadow:0 1px 2px rgba(25,55,86,.06)}
.ds-btn.lg .icon{width:17px;height:17px}

/* ---- stage pill ------------------------------------------------------------------------------------------------- */
.ds-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:650;white-space:nowrap}
.ds-pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ds-pill.grey{background:#F1F3F6;color:#3D4B5C}.ds-pill.blue{background:#EAF1FE;color:var(--ds-blue)}
.ds-pill.amber{background:#FEF4E2;color:#B7700F}.ds-pill.green{background:#E8F6EF;color:var(--ds-good)}.ds-pill.red{background:#FDECEC;color:var(--ds-bad)}

/* ---- info cards (a row of facts: label, value, detail or link) ------------------------------------------------------ */
.ds-infos{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
@media (max-width:1399px){.ds-infos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1180px){.ds-infos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ds-infos{grid-template-columns:minmax(0,1fr)}}
.ds-info{display:flex;gap:10px;align-items:center;padding:12px;background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow);min-width:0}
.ds-info .ds-tile{width:40px;height:40px;border-radius:10px}.ds-info .ds-tile .icon{width:20px;height:20px}
.ds-info>div{min-width:0}
.ds-info small{display:block;font-size:11.5px;color:var(--ds-muted);font-weight:500}
.ds-info b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;line-height:1.25;font-weight:700;color:var(--ds-ink);word-break:break-word}
.ds-info b.soft{font-weight:500;color:var(--ds-text)}
.ds-info .sub{display:block;font-size:11.5px;color:var(--ds-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-info a.sub,.ds-info button.sub{color:var(--ds-blue);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:11.5px}
.ds-info select{border:0;background:none;font:inherit;font-size:14px;font-weight:650;color:var(--ds-ink);padding:0;cursor:pointer;width:100%;min-width:0;max-width:100%}
.ds-info form{min-width:0}

/* ---- card head, detail rows, totals --------------------------------------------------------------------------------- */
.ds-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.ds-rows{display:flex;flex-direction:column}
.ds-row{display:grid;grid-template-columns:22px minmax(90px,130px) minmax(0,1fr);gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--ds-line-2);font-size:13px}
.ds-row:first-child{border-top:0}
.ds-row .icon{width:17px;height:17px;color:var(--ds-muted)}
.ds-row>span{color:var(--ds-muted)}
.ds-row>div{color:var(--ds-ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.ds-total{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:#F4F8FF;border:1px solid #E3ECFB;border-radius:10px;padding:14px 16px;margin-top:14px}
.ds-total small{display:block;font-size:12px;font-weight:600;color:var(--ds-text)}
.ds-total b{display:block;font-size:26px;font-weight:800;color:var(--ds-blue);letter-spacing:-.01em;white-space:nowrap}
.ds-total .ds-btn{margin-left:auto}

/* ---- checklist ---------------------------------------------------------------------------------------------------- */
.ds-check{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;color:var(--ds-text)}
.ds-check>.icon:first-child{width:18px;height:18px;color:var(--ds-blue)}
.ds-check .ds-tick{margin-left:auto;width:16px;height:16px;border-radius:50%;border:1.5px solid #C5CFDB;display:grid;place-items:center}
.ds-check.done .ds-tick{border:0;color:var(--ds-good)}
.ds-check.done .ds-tick .icon{width:16px;height:16px}
.ds-check.done>.icon:first-child{color:var(--ds-good)}

/* ---- activity feed with initials ----------------------------------------------------------------------------------- */
.ds-feed-item{display:flex;gap:10px;align-items:flex-start;padding:8px 0}
.ds-feed-item>div{min-width:0;flex:1}
.ds-feed-item b{display:block;font-size:12.5px;color:var(--ds-ink);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-feed-item small{display:block;font-size:11.5px;color:var(--ds-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-feed-item time{font-size:11px;color:var(--ds-muted);white-space:nowrap;flex:0 0 auto}
.ds-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 auto;background:#E8EEFB;color:var(--ds-blue)}
.ds-av.c1{background:#F3E8FD;color:#8B4DF0}.ds-av.c2{background:#FEF0DF;color:#C97A10}.ds-av.c3{background:#E5F5EE;color:#17866B}
.ds-pic{width:44px;height:36px;border-radius:7px;object-fit:cover;flex:0 0 auto;display:block}

/* ---- collapsible card (a form that opens in place) ------------------------------------------------------------------ */
details.ds-collapse>summary{list-style:none;display:flex;gap:14px;align-items:center;cursor:pointer}
details.ds-collapse>summary::-webkit-details-marker{display:none}
details.ds-collapse .plus{width:44px;height:44px;border-radius:10px;background:var(--ds-blue);color:#fff;display:grid;place-items:center;flex:0 0 auto}
details.ds-collapse .plus .icon{width:20px;height:20px;stroke:#fff}
details.ds-collapse .chev{margin-left:auto;width:32px;height:32px;border:1px solid var(--ds-line);border-radius:8px;display:grid;place-items:center}
details.ds-collapse .chev .icon{width:14px;height:14px;transition:transform .15s}
details.ds-collapse[open] .chev .icon{transform:rotate(180deg)}
details.ds-collapse>.body{margin-top:16px;padding-top:16px;border-top:1px solid var(--ds-line-2)}

/* ---- two-line table cells ----------------------------------------------------------------------------------------- */
.ds-table .two b{display:block;font-weight:600;color:var(--ds-ink);overflow:hidden;text-overflow:ellipsis}
.ds-table .two small{display:block;color:var(--ds-muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.ds-table .w-name{max-width:170px}.ds-table .w-party{max-width:150px}.ds-table .w-place{max-width:120px}.ds-table .w-last{max-width:160px}
/* a table answers to its own width (the right panel open or hidden, any screen): tighter columns first, then the
   optional columns (opt-1, then opt-2) step aside; what they show is on each row's own page */
.ds-table-wrap{container-type:inline-size}
@container (max-width:1000px){.ds-table .w-name{max-width:120px}.ds-table .w-party{max-width:108px}.ds-table .w-place{max-width:86px}.ds-table .w-last{max-width:108px}
  .ds-table.tall .ds-pic{width:36px;height:30px}.ds-table th,.ds-table td{padding-left:6px;padding-right:6px}}
@container (max-width:880px){.ds-table .opt-1{display:none}}
@container (max-width:800px){.ds-table .opt-2{display:none}}
.ds-table.tall td{padding-top:9px;padding-bottom:9px}
.ds-table tfoot td{font-weight:700;color:var(--ds-ink);background:#F4F8FF;border-bottom:0}

/* ---- screen widths ------------------------------------------------------------------------------------------------ */
@media (max-width:1600px){
  :root{--ds-rail:270px}
  .ds-btn.lg{height:38px;padding:0 12px;font-size:12.5px;gap:7px}
  .ds-info{gap:8px;padding:12px 10px}.ds-info .ds-tile{width:32px;height:32px;border-radius:8px}.ds-info .ds-tile .icon{width:17px;height:17px}
  .ds-info b{font-size:13.5px}.ds-info select{font-size:13px}
  .ds-tile{width:46px;height:46px}.ds-tile .icon{width:23px;height:23px}
  .ds-kpi{gap:12px;padding:14px}
  .ds-kpi-value{font-size:22px}
}
/* where a card is too narrow for figure and change side by side (four in a row on a mid-size screen, or a phone), the
   change moves under the figure in every card alike and a long label wraps */
@media (min-width:1441px) and (max-width:1599px), (max-width:760px){
  .ds-kpis{flex-wrap:nowrap}
  .ds-kpi{flex:1 1 auto}
  .ds-kpi-value{font-size:19px}
  .ds-kpi-label{white-space:normal;line-height:1.25}
  .ds-kpi-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "value" "delta"}
  .ds-kpi-delta{display:flex;gap:6px;align-items:baseline}
  .ds-kpi-delta>span:last-child{display:inline;overflow:hidden;text-overflow:ellipsis}
}
/* each card follows its own room, not the screen width (owner 2026-10-09: with the right panel collapsed the cards are
   wide, so the change sits beside the figure as on a wide screen; it drops under the figure only in a card too
   narrow for both, e.g. a long amount) */
@media (min-width:1181px) and (max-width:1599px), (max-width:760px){
  .ds-kpi-body{display:flex;flex-wrap:wrap;align-items:center;column-gap:18px}
  .ds-kpi-label{flex:0 0 100%}
  .ds-kpi-value{min-width:0}
  .ds-kpi-delta{display:block}
  .ds-kpi-delta>span:last-child{display:block}
}
@media (max-width:1600px){
  .ds-photo{width:38%}
  .ds-qa{font-size:12.5px;gap:10px}
  .ds-tools .ds-sel{max-width:140px}.ds-tools .ds-btn{padding:0 10px}
  .ds-table th,.ds-table td{padding-left:6px;padding-right:6px}
  .ds-table .nm{max-width:150px}.ds-table .cat{max-width:140px}.ds-table .src{max-width:90px}
}
@media (max-width:1440px){
  .ds-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-table .src{display:none}
  .ds-table .nm{max-width:125px}.ds-table .cat{max-width:115px}
}
@media (max-width:1180px){
  .ds-title{flex-wrap:wrap}.ds-actions{flex-wrap:wrap;justify-content:flex-start}
  .ds-grid,.ds-two,.ds-two-even{grid-template-columns:minmax(0,1fr)}
  .ds-rail-toggle{display:none}
  .ds-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-tools{flex-wrap:wrap}
  .ds-photo{opacity:.45}
}
@media (max-width:1050px){
  .app-shell{grid-template-columns:minmax(0,1fr)}
  .app-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--ds-line)}
}
@media (max-width:760px){
  .ds-head{margin:-20px -16px 0;padding:12px 16px 0}
  .ds-photo{display:none}
  .ds-top{flex-wrap:wrap}.ds-search{width:100%}.ds-icons{gap:4px}
  .ds-title{flex-direction:column}.ds-weather{margin-top:6px}
  .ds-kpis{grid-template-columns:minmax(0,1fr)}
  .ds-donut{flex-direction:column;align-items:stretch}
  .ds-donut svg{align-self:center}
  .ds-legend a{white-space:normal;flex-wrap:wrap}
}

/* the shared date picker inside design-system forms: same height and corners as the other fields */
.ds-form .drp-btn{min-height:36px;height:36px;padding:0 10px;border-radius:8px;border-color:var(--ds-line);font-size:12.5px;width:100%;justify-content:flex-start}
@media (max-width:1600px){.ds-info select{font-size:12.5px;letter-spacing:-.1px}}

/* earlier versions inside a dialog (Generate quote): one compact row each, the newest first */
.ds-history{border:1px solid var(--ds-line);border-radius:10px;margin:0 0 14px;max-height:190px;overflow:auto}
.ds-history-row{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:12.5px;color:var(--ds-ink)}
.ds-history-row+.ds-history-row{border-top:1px solid var(--ds-line-2)}
.ds-history-what{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ds-muted)}
.ds-history-row .pr{white-space:nowrap;font-weight:650}
.ds-btn.sm{height:28px;padding:0 10px;font-size:12px}
/* two fields that belong together share one full row, half each */
.ds-form .halves{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
@media (max-width:760px){.ds-history-row{flex-wrap:wrap}.ds-history-what{flex-basis:100%;order:5;white-space:normal}.ds-history-row .ds-btn{order:6}
  .ds-form .halves{grid-template-columns:minmax(0,1fr)}}

/* one-tap choice: a small figure under the label (price per sq ft); a choice that cannot be used is greyed */
label.ds-choice small{display:block;font-size:11px;font-weight:600;color:var(--ds-muted);margin-left:2px}
label.ds-choice:has(input:checked) small{color:var(--ds-blue)}
label.ds-choice.off{opacity:.5;cursor:not-allowed}
label.ds-choice .ds-pill{height:20px;padding:0 8px;font-size:11px}
/* the project's answers in one line, with Change */
.ds-brief{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 12px;margin:0 0 12px;border-radius:10px;
  background:var(--ds-bg-2,#F6F8FC);font-size:13px;color:var(--ds-ink)}
.ds-brief span{color:var(--ds-muted)}
.ds-brief .ds-link{margin-left:auto;background:none;border:0;cursor:pointer;font-weight:650;font-size:12.5px}
.ds-more-opts{margin-top:12px}
.ds-more-opts>summary{cursor:pointer;font-size:12.5px;font-weight:650;color:var(--ds-blue);list-style:none}
.ds-more-opts>summary::before{content:"+ "}
.ds-more-opts[open]>summary::before{content:"− "}

/* ---- Books overview components (design 2026-10-09, spec 2026-10-09-books-overview-design.md) --------------------------- */
/* a section home header: the section name in place of the back link, no photo */
.ds-head.plain{min-height:0;padding-bottom:2px}
.ds-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--ds-blue)}
.ds-eyebrow i{width:7px;height:7px;border-radius:50%;background:#1BB28A}
.ds-head.plain .ds-actions{margin-top:8px}
/* kpi card with its recent history drawn under it */
.ds-kpis.spark{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
.ds-kpi.spark{flex-wrap:wrap;row-gap:8px;padding-bottom:10px;align-items:flex-start}
/* figure and change side by side when the card has room, the change under the figure when it has not */
.ds-kpi.spark .ds-kpi-body{flex:1 1 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:12px;row-gap:2px;padding-top:2px}
.ds-kpi.spark .ds-kpi-label{flex:0 0 100%}
.ds-kpi.spark .ds-kpi-delta{text-align:right;margin-left:auto}
.ds-spark{flex:0 0 100%;width:100%;height:36px;display:block;overflow:visible}
.ds-spark .line{fill:none;stroke-width:2;stroke-linejoin:round}
.ds-spark .fill{opacity:.09}
.ds-kpi.blue .ds-spark .line{stroke:#3A66FE}.ds-kpi.blue .ds-spark .fill{fill:#3A66FE}
.ds-kpi.amber .ds-spark .line{stroke:#F08A24}.ds-kpi.amber .ds-spark .fill{fill:#F08A24}
.ds-kpi.purple .ds-spark .line{stroke:#A545F8}.ds-kpi.purple .ds-spark .fill{fill:#A545F8}
.ds-kpi.green .ds-spark .line{stroke:#19A97B}.ds-kpi.green .ds-spark .fill{fill:#19A97B}
/* card heading: icon tile, title and line under it, the card controls on the right */
.ds-chead{display:flex;align-items:center;gap:12px;margin-bottom:14px;min-width:0;flex-wrap:wrap}
.ds-tile.sm{width:42px;height:42px;border-radius:10px}.ds-tile.sm .icon{width:21px;height:21px}
.ds-chead-t{min-width:0}
.ds-card .ds-chead-t h2{font-size:17px;line-height:1.25;white-space:nowrap}
.ds-chead-t p{margin:2px 0 0;color:var(--ds-muted);font-size:12px}
.ds-chead-r{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.ds-go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.ds-go .icon{width:14px;height:14px}
/* filter buttons with counts (one choice), and tab buttons */
.ds-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--ds-line);border-radius:10px;background:#fff}
.ds-seg button{border:0;background:none;height:30px;padding:0 10px;border-radius:7px;font:inherit;font-size:12.5px;font-weight:560;color:var(--ds-text);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ds-seg button em{font-style:normal;font-size:11px;font-weight:700;min-width:20px;height:18px;padding:0 6px;border-radius:999px;background:#EEF1F5;color:var(--ds-text);display:inline-grid;place-items:center}
.ds-seg button em.red{background:#FDECEC;color:var(--ds-bad)}.ds-seg button em.amber{background:#FEF4E2;color:#B7700F}
.ds-seg button.on{background:var(--ds-blue);color:#fff}.ds-seg button.on em{background:rgba(255,255,255,.24);color:#fff}
.ds-pills{display:flex;gap:8px;flex-wrap:wrap}
.ds-pills button{height:30px;padding:0 12px;border:1px solid var(--ds-line);border-radius:8px;background:#fff;font:inherit;font-size:12px;font-weight:560;color:var(--ds-text);cursor:pointer;white-space:nowrap}
.ds-pills button.on{background:var(--ds-blue);border-color:var(--ds-blue);color:#fff}
/* a table in its own rounded box inside a card (row menus may open past its edge) */
.ds-boxed{border:1px solid var(--ds-line);border-radius:10px}
.ds-boxed .ds-table-wrap{overflow:visible}
.ds-boxed .ds-table thead th:first-child{border-top-left-radius:10px}.ds-boxed .ds-table thead th:last-child{border-top-right-radius:10px}
.ds-boxed .ds-table tbody tr:last-child td{border-bottom:0}
.ds-boxed .ds-table td,.ds-boxed .ds-table th{padding-top:9px;padding-bottom:9px}
.ds-table th[data-sort]{cursor:pointer;user-select:none}
.ds-table th[data-sort]:hover{color:var(--ds-blue)}
.ds-table th .icon{width:11px;height:11px;vertical-align:-1px;margin-left:2px}
.ds-table .ck{width:30px;padding-right:0}
.ds-table td.nm.wide{max-width:230px}
.ds-table .party{max-width:230px;overflow:hidden;text-overflow:ellipsis}
.ds-table .mn{width:40px;text-align:right}
.ds-table td a{color:inherit}.ds-table td a:hover{color:var(--ds-blue)}
.ds-pill.ring i{background:none;border:1.6px solid currentColor;width:9px;height:9px}
/* a card that sits beside the rail fills its height; its footer stays at the bottom */
.ds-main>.ds-card.fill{flex:1 1 auto;display:flex;flex-direction:column}
.ds-main>.ds-card.fill>.ds-cfoot{margin-top:auto;padding-top:12px}
.ds-cfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:12.5px;color:var(--ds-muted);flex-wrap:wrap}
.ds-sel-sum{font-weight:650;color:var(--ds-ink)}
/* quick insights (rail) */
.ds-qi-box{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ds-qi{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--ds-line);border-radius:10px;background:#fff;color:var(--ds-text)}
.ds-qi:hover{border-color:#C9D5E3}
.ds-qi>div{min-width:0}
.ds-qi .ds-tile{width:40px;height:40px;border-radius:9px}.ds-qi .ds-tile .icon{width:21px;height:21px}
.ds-qi b{display:block;font-size:13.5px;color:var(--ds-ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-qi small{color:var(--ds-muted);font-size:12px;white-space:nowrap}
.ds-qi .go{margin-left:auto;width:15px;height:15px;color:var(--ds-muted);transform:rotate(-90deg);flex:0 0 auto}
/* line chart in the rail */
.ds-h3-form{margin-left:auto;font-weight:400;min-width:0}
.ds-rail h3>.icon{flex:0 0 auto}
.ds-rail .ds-h3-form .ds-sel{width:110px;padding:0 20px 0 8px;font-size:11.5px;-webkit-appearance:none;appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23405A74' stroke-width='1.5'/%3E%3C/svg%3E") right 8px center/9px 6px no-repeat}
.ds-rail h3:has(.ds-h3-form){font-size:14px}
@media (min-width:1601px){.ds-rail h3:has(.ds-h3-form){flex-wrap:nowrap}}
.ds-rail h3:has(.ds-h3-form){gap:6px}
.ds-rail h3:has(.ds-h3-form){flex-wrap:wrap;row-gap:8px}
.ds-cm-fig{flex-wrap:wrap}
.ds-sel.sm{height:30px;font-size:12px;padding:0 24px 0 9px}
.ds-cm-fig{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 4px}
.ds-cm-fig b{font-size:23px;font-weight:800;color:var(--ds-ink);letter-spacing:-.01em;white-space:nowrap}
.ds-cm-fig .ds-kpi-delta{text-align:right;margin-left:auto}
.ds-line .grid,.ds-bars .grid{stroke:#EEF2F7;stroke-width:1}
.ds-line .ln{fill:none;stroke:#3A66FE;stroke-width:2.2;stroke-linejoin:round}
.ds-line .dot{fill:#3A66FE;stroke:#fff;stroke-width:1.5}
/* bars */
.ds-bars.cash .b0,.ds-bars.profit .b0{fill:#22B07D}.ds-bars.cash .b1{fill:#4F7BF7}.ds-bars.profit .b0.neg{fill:#EF4444}
.ds-bars.rec .b0{fill:#F5A524}.ds-bars.pay .b0{fill:#A545F8}
.ds-series-r{justify-content:flex-end;margin:0 0 4px}
.ds-chart.ds-bars text{font-size:14px}
/* due-date ring and its legend */
.ds-snap-total b{display:block;font-size:24px;font-weight:800;color:var(--ds-ink);letter-spacing:-.01em;white-space:nowrap}
.ds-snap-total small{color:var(--ds-muted);font-size:12px}
.ds-snap .ds-donut{flex-wrap:nowrap;justify-content:flex-start;gap:20px}
.ds-ring{width:150px;height:150px;flex:0 0 auto}
.ds-ring .track{fill:none;stroke:#EEF1F5;stroke-width:17}
.ds-ring .seg{fill:none;stroke-width:17}
.ds-ring .cur{font:700 10.5px Inter,sans-serif;fill:var(--ds-ink)}
.ds-ring .fig{font:800 15px Inter,sans-serif;fill:var(--ds-ink)}
.ds-snap .ds-legend{gap:14px}
.ds-snap .ds-legend .lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ds-snap .ds-legend .pc{width:38px;text-align:right;color:var(--ds-text)}
.ds-snap .ds-legend b{margin-left:0;min-width:104px;text-align:right}
.ds-snap-note{margin:10px 0 0}
/* small marks in tables: account icon, project picture, document type */
.ds-acc{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;vertical-align:middle;color:#17866B}
.ds-acc .icon{width:20px;height:20px}
.ds-acc.t1{color:#8B4DF0}.ds-acc.t2{color:var(--ds-blue)}.ds-acc.t3{color:#6B7D92}
.ds-pic.xs{width:36px;height:28px;display:inline-block;vertical-align:middle;margin-right:10px}
.ds-doc{display:inline-flex;align-items:center;gap:6px;font-weight:560}
.ds-doc .icon{width:16px;height:16px;color:var(--ds-muted)}
.ds-doc.green .icon{color:var(--ds-good)}.ds-doc.purple .icon{color:#8B4DF0}.ds-doc.blue .icon{color:var(--ds-blue)}.ds-doc.amber .icon{color:#E08A00}
.ds-noproj{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px 10px;color:var(--ds-muted);text-align:center}
.ds-noproj svg{width:150px;height:auto}
.ds-noproj p{margin:0}
/* rows of two cards under the grid */
.ds-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:16px;margin-top:16px}
.ds-split.wide-first{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.ds-gap-top{margin-top:16px}
/* a boxed table answers to its own width: names and parties shorten first, then the spacing tightens */
@container (max-width:640px){.ds-boxed .ds-table td.nm.wide{max-width:150px}.ds-boxed .ds-table .party{max-width:120px}
  .ds-boxed .ds-table th,.ds-boxed .ds-table td{padding-left:6px;padding-right:6px}}
@container (max-width:560px){.ds-boxed .ds-table td.nm.wide{max-width:120px}.ds-boxed .ds-table .party{max-width:96px}
  .ds-boxed .ds-table{font-size:12px}.ds-boxed .ds-table .ds-pic.xs{width:28px;height:22px;margin-right:6px}
  .ds-boxed .ds-table .ds-pill{padding:0 8px}.ds-boxed .ds-table .ds-acc{margin-right:6px}}
.ds-boxed .ds-table td.nm.wide{overflow:hidden;text-overflow:ellipsis}
@media (max-width:1600px){.ds-kpi.spark .ds-kpi-value{font-size:21px}.ds-snap .ds-legend b{min-width:92px}}
@media (max-width:1440px){.ds-kpis.spark{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1180px){.ds-split,.ds-split.wide-first{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .ds-kpis.spark{grid-template-columns:minmax(0,1fr)}
  .ds-boxed .ds-table-wrap{overflow-x:auto}
  .ds-snap .ds-donut{flex-direction:column;align-items:stretch}.ds-ring{align-self:center}.ds-snap .ds-legend{flex:0 0 auto}
  .ds-chead-r{margin-left:0;justify-content:flex-start}
}

/* ---- Quote page components (design 2026-10-09, spec 2026-10-09-quote-page-design.md) ---------------------------------- */
/* the path back, a small label over the title, a pill beside it */
.ds-crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ds-muted);min-width:0;flex-wrap:wrap}
.ds-crumbs a{color:var(--ds-muted);font-weight:560}.ds-crumbs a:hover{color:var(--ds-blue)}
.ds-crumbs span{color:var(--ds-text);font-weight:560}
.ds-crumbs a:first-child .icon{width:15px;height:15px;transform:rotate(180deg)}
.ds-crumbs>.icon{width:12px;height:12px;transform:rotate(-90deg);color:#9AA9BA}
.ds-title .ds-eyebrow{margin:6px 0 0}
.ds-title h1 .ds-pill{vertical-align:middle;margin-left:6px;font-size:12px;letter-spacing:0}
/* fact cards: tile, label, figure, a short line */
.ds-kpis.ds-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ds-stat-body{min-width:0}
.ds-stat-body small{display:block;color:var(--ds-muted);font-size:11.5px;margin-top:1px;white-space:nowrap}
.ds-stat .ds-kpi-value{font-size:22px}
/* shared link to send */
.ds-share{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;background:#F4F8FF;border-color:#DCE7FB}
.ds-share>div{flex:1 1 320px;min-width:0}.ds-share input{width:100%;margin-top:6px}
/* quote items with "how the rate was built" */
.ds-items td{vertical-align:top}
.ds-items .pos{width:36px;color:var(--ds-muted)}
.ds-items td.desc{white-space:normal;min-width:260px}
.ds-items td.desc>b{display:block;font-weight:650;color:var(--ds-ink);margin-bottom:4px}
.ds-table .num{text-align:right}
.ds-built summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--ds-nav);list-style:none;display:inline-flex;align-items:center;gap:6px}
.ds-built summary::-webkit-details-marker{display:none}
.ds-built summary::before{content:"";border:4px solid transparent;border-left-color:currentColor;margin-left:2px;transition:transform .15s}
.ds-built[open] summary::before{transform:rotate(90deg) translateX(2px)}
.ds-built-grid{display:grid;grid-template-columns:minmax(120px,max-content) minmax(110px,max-content) auto;gap:3px 22px;margin-top:6px;padding:8px 12px;
  background:#F7F9FC;border:1px solid var(--ds-line-2);border-radius:8px;font-size:12px;color:var(--ds-text);width:max-content;max-width:100%}
.ds-built-grid span:nth-child(3n){text-align:right;white-space:nowrap}
.ds-built-grid span.sum{grid-column:1 / span 2;color:var(--ds-muted);text-align:left}.ds-built-grid span.sum.v{grid-column:3;text-align:right}
.ds-built-grid .sum.tot{color:var(--ds-ink);font-weight:700;border-top:1px solid var(--ds-line);padding-top:3px}
.ds-items tfoot td{background:#fff;color:var(--ds-ink);font-weight:650;padding-top:11px;padding-bottom:11px}
.ds-items tfoot tr.grand td{background:#F4F8FF;font-weight:800;font-size:13.5px}
.ds-boxed .ds-table tfoot tr:last-child td:first-child{border-bottom-left-radius:10px}.ds-boxed .ds-table tfoot tr:last-child td:last-child{border-bottom-right-radius:10px}
/* commercial terms: six facts in two columns */
.ds-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ds-term{display:grid;grid-template-columns:auto 96px minmax(0,1fr);gap:14px;align-items:center;padding:10px 12px;border:1px solid var(--ds-line);border-radius:10px}
.ds-term .ds-tile{width:40px;height:40px;border-radius:9px}.ds-term .ds-tile .icon{width:20px;height:20px}
.ds-term .k{font-size:12.5px;font-weight:600;color:var(--ds-nav)}
.ds-term b{display:block;font-size:13px;color:var(--ds-ink);font-weight:700}
.ds-term small{display:block;font-size:11.5px;color:var(--ds-muted)}
/* accept / re-price */
.ds-decide{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ds-decide form{margin:0}
.ds-reprice{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ds-date{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--ds-line);border-radius:9px;background:#fff;margin:0}
/* the shared date picker replaces the field with its own button: that button is the chip */
.ds-date:has(.drp-btn){border:0;padding:0;height:auto;background:none}
.ds-date .drp-btn{height:40px;min-height:40px;padding:0 14px;border:1px solid var(--ds-line);border-radius:9px;background:#fff;font-size:13px;font-weight:600;color:var(--ds-ink)}
.ds-date .icon{width:16px;height:16px;color:var(--ds-text)}
.ds-date input{border:0!important;box-shadow:none!important;background:none;padding:0;height:auto;font:inherit;font-size:13px;font-weight:600;color:var(--ds-ink);width:132px}
/* rail: visibility states, summary rows, controls, notes */
.ds-vis{align-items:flex-start}
.ds-vis>div{flex:1}.ds-vis b{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:8px;white-space:normal;overflow:visible}
.ds-vis .ds-tile{width:36px;height:36px}.ds-vis .ds-tile .icon{width:19px;height:19px}
.ds-vis em{font-style:normal;font-size:12px;font-weight:650;white-space:nowrap}
.ds-vis em.good{color:var(--ds-good)}.ds-vis em.warn{color:#E07B00}.ds-vis em.muted{color:var(--ds-muted)}
.ds-vis small{white-space:normal}
.ds-sum{margin-top:12px;border:1px solid var(--ds-line);border-radius:10px;overflow:hidden}
.ds-sum>div{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:9px 12px;border-top:1px solid var(--ds-line-2);font-size:13px}
.ds-sum>div:first-child{border-top:0}
.ds-sum span{color:var(--ds-text);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ds-sum span .icon{width:15px;height:15px;color:var(--ds-muted)}
.ds-sum b{color:var(--ds-ink);font-weight:700;text-align:right;min-width:0}
.ds-sum b.soft{font-weight:560}
.ds-sum b small{display:block;color:var(--ds-muted);font-size:11.5px;font-weight:500}
.ds-sum .tot{background:#F4F8FF}.ds-sum .tot span,.ds-sum .tot b{font-weight:800;font-size:14px;color:var(--ds-ink)}
.ds-snaprows{border:0}.ds-snaprows>div{padding:9px 2px}
.ds-qa-btn{width:100%;font:inherit;cursor:pointer;text-align:left}
.ds-qa-box .ds-qa.on{background:var(--ds-active);border-color:#CFDDF8!important;color:var(--ds-blue);font-weight:650}
.ds-info-note{display:flex;gap:10px;margin-top:12px;padding:12px;background:#F4F8FF;border-radius:10px;font-size:12.5px;color:var(--ds-text)}
.ds-info-note .icon{width:20px;height:20px;color:var(--ds-blue);flex:0 0 auto}
.ds-info-note p{margin:0;line-height:1.45}
.ds-meta{display:flex;flex-direction:column;gap:8px;margin-top:12px;font-size:12.5px;color:var(--ds-text)}
.ds-meta span{display:inline-flex;align-items:center;gap:8px}.ds-meta .icon{width:15px;height:15px;color:var(--ds-muted)}
/* version history: steps along a line */
.ds-history{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.ds-history-h{display:flex;align-items:center;gap:10px;font-size:17px}
.ds-history-h .icon{width:22px;height:22px;color:var(--ds-blue)}
.ds-steps{list-style:none;margin:0;padding:0;display:flex;gap:0;overflow-x:auto}
.ds-steps li{position:relative;flex:1 1 0;min-width:200px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:4px 18px 4px 26px;font-size:12.5px}
.ds-steps li>i{position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--ds-blue);box-shadow:0 0 0 3px #fff}
.ds-steps li.pending>i{background:#fff;border:2px solid #B5C1CF}
.ds-steps .when{font-weight:700;color:var(--ds-ink);white-space:nowrap;padding-top:2px}
.ds-steps b{display:block;color:var(--ds-ink);font-weight:650}
.ds-steps small{display:block;color:var(--ds-muted);font-size:11.5px}
@media (max-width:1600px){.ds-stat .ds-kpi-value{font-size:19px}.ds-term{grid-template-columns:auto 84px minmax(0,1fr);gap:10px}}
@media (max-width:1440px){.ds-kpis.ds-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-terms{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1180px){.ds-history{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .ds-kpis.ds-stats{grid-template-columns:minmax(0,1fr)}
  .ds-term{grid-template-columns:auto minmax(0,1fr)}.ds-term .k{grid-column:2}.ds-term>div{grid-column:2}
  .ds-items td.desc{min-width:200px}
  .ds-steps{flex-direction:column}.ds-steps li{flex:0 0 auto;padding-bottom:14px}
}

/* ---- what a project is: scope and materials, one label (owner 2026-10-09, test_scope_visibility) ---------------------- */
.ds-table .w-scope{max-width:130px}
@container (max-width:1000px){.ds-table .w-scope{max-width:104px}}
/* the projects list's Location steps aside first when its table is narrow (it is on each project's page) */
@container (max-width:1180px){.ds-table .opt-3{display:none}}
@container (max-width:1000px){.ds-table:has(.w-scope) .opt-1{display:none}}
@container (max-width:900px){.ds-table:has(.w-scope) .w-name{max-width:96px}.ds-table:has(.w-scope) .w-party{max-width:90px}.ds-table:has(.w-scope) .w-last{max-width:92px}}
.ds-scope-tag{color:var(--ds-ink);font-weight:650}
/* an editing sheet (CSI BOQ): every cell an input, numbers to the right; a section heading row with its total */
.ds-table .r,.ds-sheet .r{text-align:right}
.ds-table td.nowrap{white-space:nowrap}
.ds-sheet td{padding:4px 6px}
.ds-sheet input,.ds-sheet select{width:100%;min-width:64px;height:30px;border:1px solid var(--ds-line);border-radius:7px;padding:0 8px;
  font:inherit;font-size:12.5px;color:var(--ds-ink);background:#fff}
.ds-sheet input:focus,.ds-sheet select:focus{outline:2px solid #CFDDF8;border-color:var(--ds-blue)}
.ds-sheet input.r{text-align:right}
.ds-sec-head{display:flex;align-items:center;gap:10px;padding:12px 16px 8px;border-top:1px solid var(--ds-line);font-size:13px;color:var(--ds-ink)}
.ds-sec-head .ds-note{margin-left:auto}
.ds-x{border:0;background:none;color:var(--ds-muted);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.ds-x:hover{background:#FDECEC;color:var(--ds-bad)}
.ds-upload{display:inline-flex;margin:0}
.ds-upload label{cursor:pointer}

/* a turnkey BOQ is grey structure only until finishing is priced (BOQ step 2) */
.ds-boq-partial{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0;padding:7px 10px;border-radius:8px;
  background:#FEF4E2;color:#8A5300;font-size:12.5px}
.ds-boq-partial .icon{width:15px;height:15px;color:#B7700F}
.ds-boq-partial .ds-link{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:650;color:var(--ds-blue)}

.ds-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600}
.ds-banner.ok{background:#EEF8F2;color:#1F7A4D}.ds-banner.warn{background:#FFF7E8;color:#A66500}

/* ---- Levels screens components (design 2026-10-10, spec 2026-10-10-levels-screens-design.md) ----------------------------- */
/* type tag in a table (Material, Labour, Equipment): a quiet label, not a status pill */
.ds-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;font-size:11.5px;font-weight:650;background:#EAF1FE;color:var(--ds-blue)}
.ds-tag.labour{background:#E8F6EF;color:var(--ds-good)}.ds-tag.plant{background:#F3E8FD;color:#8B4DF0}.ds-tag.other{background:#F1F3F6;color:#3D4B5C}
/* small facts beside a title: what the level covers, how it is priced */
.ds-fact-strip{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.ds-fact-strip>div{padding:2px 18px;border-left:1px solid var(--ds-line);min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center}
.ds-fact-strip>div:first-child{border-left:0;padding-left:0}
.ds-fact-strip small{font-size:11.5px;color:var(--ds-muted);font-weight:500}
.ds-fact-strip b{font-size:15px;color:var(--ds-ink);font-weight:750;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ds-fact-strip .ds-actions{margin-left:auto;padding:0;border:0;flex-wrap:wrap;justify-content:flex-end}
/* level column header in the comparison table: tone, icon, name, Edit, items counted */
.ds-lvl{text-align:center;padding:12px 8px 10px!important;vertical-align:top}
.ds-lvl .nm{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ds-ink)}
.ds-lvl .nm .icon{width:18px;height:18px}
.ds-lvl .ds-btn{margin:8px 0 6px;height:28px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.ds-lvl small{display:block;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ds-muted)}
.ds-lvl.blue{background:#EEF3FE!important}.ds-lvl.blue .nm{color:var(--ds-blue)}
.ds-lvl.green{background:#ECF8F3!important}.ds-lvl.green .nm{color:var(--ds-good)}
.ds-lvl.amber{background:#FEF6E7!important}.ds-lvl.amber .nm{color:#C27C0A}
.ds-lvl.purple{background:#F4EDFE!important}.ds-lvl.purple .nm{color:#8B4DF0}
.ds-lvl.pink{background:#FDECF3!important}.ds-lvl.pink .nm{color:#D9366F}
.ds-lvl.is-default{box-shadow:inset 0 0 0 2px #19A97B}
.ds-lvl .ds-pill{height:20px;font-size:10.5px;padding:0 8px;margin-top:2px}
/* one cell of the comparison: quantity and unit, cost, a pencil to the line */
.ds-cell{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px}
.ds-cell small{display:block;font-size:12px;color:var(--ds-muted);font-weight:500;text-align:left}
.ds-cell .pc{display:block;font-size:12.5px;font-weight:700;color:var(--ds-blue);text-align:left}
.ds-cell .pc.none{color:var(--ds-bad);font-weight:600;font-size:11.5px}
.ds-edit{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--ds-line);border-radius:8px;background:#fff;color:var(--ds-nav);flex:0 0 auto}
.ds-edit:hover{border-color:#C9D5E3;color:var(--ds-blue)}
.ds-edit .icon{width:15px;height:15px}
.ds-edit.add{border-style:dashed;color:var(--ds-muted)}
.ds-table td.lv{text-align:center}
.ds-table td.lv.is-default,.ds-table th.lv.is-default{background:#FAFEFC}
.ds-table td.item{min-width:200px}
.ds-table td.item .two{display:flex;align-items:center;gap:12px}
/* cost sum: parts joined by + and =, the answer last (Selling rate card) */
.ds-eq{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.ds-eq>.part{flex:1 1 130px;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ds-line);border-radius:10px;background:#FAFBFD;min-width:0}
.ds-eq>.part small{display:block;font-size:11.5px;color:var(--ds-muted);font-weight:500}
.ds-eq>.part b{display:block;font-size:14px;font-weight:750;color:var(--ds-ink);white-space:nowrap}
.ds-eq>.part.final{background:#F4F8FF;border-color:#DCE7FB;flex-basis:170px}.ds-eq>.part.final b{font-size:17px;color:var(--ds-blue)}
.ds-eq>i{align-self:center;font-style:normal;font-size:18px;color:var(--ds-muted);font-weight:600}
.ds-eq .ds-tile{width:30px;height:30px;border-radius:8px}.ds-eq .ds-tile .icon{width:16px;height:16px}
.ds-rate-in{display:flex;align-items:center;gap:8px;border:1px solid var(--ds-line);border-radius:10px;padding:0 12px;height:48px;background:#fff;max-width:290px}
.ds-rate-in span{color:var(--ds-muted);font-weight:600}
.ds-rate-in input{border:0;outline:0;font:inherit;font-size:20px;font-weight:750;color:var(--ds-ink);width:100%;min-width:0;background:none}
.ds-rate-in:focus-within{border-color:var(--ds-blue);box-shadow:0 0 0 3px #DCE7FB}
/* choice cards: two or three ways of doing one thing (Pricing method) */
.ds-radio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.ds-radio-card{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--ds-line);border-radius:10px;background:#fff;cursor:pointer;margin:0!important}
.ds-radio-card input{position:absolute;opacity:0;pointer-events:none}
.ds-radio-card b{display:block;font-size:13.5px;color:var(--ds-ink)}
.ds-radio-card small{display:block;font-size:12px;color:var(--ds-muted);font-weight:500;margin-top:2px}
.ds-radio-card .ds-tile{width:42px;height:42px;border-radius:10px}.ds-radio-card .ds-tile .icon{width:21px;height:21px}
.ds-radio-card:has(input:checked){border-color:var(--ds-blue);background:var(--ds-active);box-shadow:0 0 0 1px var(--ds-blue) inset}
.ds-radio-card:has(input:focus-visible){outline:2px solid #CFDDF8;outline-offset:2px}
/* bottom bar of an editing page: Cancel on the left, the save on the right; stays in view */
.ds-savebar{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px -24px -20px;padding:12px 24px;
  background:rgba(255,255,255,.96);border-top:1px solid var(--ds-line);backdrop-filter:blur(4px)}
.ds-savebar .ds-note{margin-right:auto;margin-left:14px}
/* coverage and share bars */
.ds-ring.sm{width:104px;height:104px}
.ds-donut.tight{flex-wrap:nowrap;justify-content:flex-start;gap:14px}.ds-donut.tight .ds-legend{flex:1 1 0;gap:9px}
.ds-bar{height:8px;border-radius:999px;background:#EEF1F5;overflow:hidden}
.ds-bar>i{display:block;height:100%;border-radius:999px;background:var(--ds-blue)}
.ds-bar.green>i{background:#19A97B}.ds-bar.amber>i{background:#F5A524}.ds-bar.purple>i{background:#A545F8}.ds-bar.pink>i{background:#E8467C}
.ds-barrow{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;align-items:center;gap:10px;padding:5px 0;font-size:12.5px;color:var(--ds-text)}
.ds-barrow span:last-child{text-align:right;color:var(--ds-muted)}
/* rail: a highlighted note (margin insight, tip) and small fact cards */
.ds-note-card{display:flex;gap:12px;padding:14px;border-radius:10px;background:#FEF8EA;border:1px solid #FBE9BF}
.ds-note-card.blue{background:#F4F8FF;border-color:#DCE7FB}
.ds-note-card .ds-tile{width:38px;height:38px;border-radius:9px;background:#FDEFC8;color:#C27C0A}.ds-note-card.blue .ds-tile{background:#E3ECFB;color:var(--ds-blue)}
.ds-note-card .ds-tile .icon{width:20px;height:20px}
.ds-note-card b{display:block;font-size:13.5px;color:#B7700F;margin-bottom:3px}.ds-note-card.blue b{color:var(--ds-blue)}
.ds-note-card p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ds-text)}
.ds-mini{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.ds-mini>div{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--ds-line);border-radius:10px;min-width:0}
.ds-mini .ds-tile{width:38px;height:38px;border-radius:9px}.ds-mini .ds-tile .icon{width:19px;height:19px}
.ds-mini small{display:block;font-size:11px;color:var(--ds-muted);line-height:1.25}
.ds-mini b{display:block;font-size:15px;font-weight:750;color:var(--ds-ink);white-space:nowrap}
.ds-mini em{display:block;font-style:normal;font-size:10.5px;color:var(--ds-muted)}
.ds-dl{display:flex;flex-direction:column}
.ds-dl>div{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--ds-line-2);font-size:13px}
.ds-dl>div:first-child{border-top:0}
.ds-dl .icon{width:16px;height:16px;color:var(--ds-muted);flex:0 0 auto}
.ds-dl span{color:var(--ds-muted);min-width:96px}
.ds-dl b{margin-left:auto;color:var(--ds-ink);font-weight:650;text-align:right;min-width:0}
.ds-dl b small{display:block;font-weight:500;color:var(--ds-muted);font-size:11px}
.ds-dl b span{color:inherit;min-width:0}
/* an editing table: inputs in cells, a remove button, live amounts */
.ds-sheet .ds-res{display:flex;align-items:center;gap:10px;min-width:230px}
.ds-sheet .ds-res select{min-width:150px}
.ds-sheet .ds-res small{display:block;color:var(--ds-muted);font-size:11px}
.ds-sheet input.q{max-width:96px}.ds-sheet input.w{max-width:70px}
.ds-sheet td.ro{color:var(--ds-text);text-align:right}
.ds-sheet td.ro small{display:block;color:var(--ds-muted);font-size:11px}
.ds-sheet td.ro a{color:var(--ds-ink);font-weight:600}
.ds-sheet td.amt{text-align:right;font-weight:700;color:var(--ds-ink)}
.ds-del{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid #F7D4D4;border-radius:8px;background:#FEF2F2;color:var(--ds-bad);cursor:pointer;padding:0}
.ds-del:hover{background:#FDE3E3}.ds-del .icon{width:15px;height:15px}
.ds-dash-add{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border:1px dashed #C9D5E3;border-radius:10px;background:#FAFBFD}
.ds-dash-add select,.ds-dash-add input{height:34px;border:1px solid var(--ds-line);border-radius:8px;padding:0 10px;font:inherit;font-size:12.5px;background:#fff;color:var(--ds-text)}
.ds-dash-add input{width:100px}
.ds-dash-add select{min-width:220px;max-width:100%}
.ds-dash-add .ds-note{flex:1 1 220px}
.ds-textarea{position:relative}
.ds-textarea textarea{width:100%;min-height:76px;resize:vertical}
.ds-textarea .ct{position:absolute;right:10px;bottom:8px;font-size:11px;color:var(--ds-muted)}
.ds-form.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
@media (max-width:760px){.ds-form.cols-2{grid-template-columns:minmax(0,1fr)}}
.ds-hint{font-size:11.5px;color:var(--ds-muted);font-weight:500;margin:4px 0 0}
.ds-form .req{color:var(--ds-bad)}
.ds-chips{display:flex;gap:8px;flex-wrap:wrap}
.ds-chips>span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:650}
.ds-chips .materials{background:#EAF1FE;color:var(--ds-blue)}.ds-chips .labour{background:#E8F6EF;color:var(--ds-good)}.ds-chips .plant{background:#F3E8FD;color:#8B4DF0}.ds-chips .other{background:#F1F3F6;color:#3D4B5C}
@media (max-width:1180px){.ds-fact-strip>div{padding:6px 14px}}
@media (max-width:760px){.ds-savebar{margin:16px -16px -20px;padding:10px 16px}.ds-eq>i{display:none}.ds-barrow{grid-template-columns:80px minmax(0,1fr) 40px}
  .ds-mini{grid-template-columns:minmax(0,1fr)}.ds-fact-strip>div{border-left:0;padding:6px 0;flex:1 1 45%}}

/* an element marked hidden stays hidden even where a component sets its own display */
.ds-page [hidden]{display:none!important}

/* a wide table that scrolls sideways inside its own box (the first column stays in view) instead of running under the right panel */
.ds-boxed.ds-scroll .ds-table-wrap{overflow-x:auto;overflow-y:hidden}
.ds-scroll .ds-table th:first-child,.ds-scroll .ds-table td:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--ds-line-2)}
.ds-scroll .ds-table td:first-child{background:#fff}.ds-scroll .ds-table th:first-child{background:#FAFBFD}
.ds-scroll .ds-table tfoot td:first-child{background:#F4F8FF}
.ds-scroll .ds-table tr:hover td:first-child{background:#FAFCFF}

/* password box with its eye (behaviour in app.js) */
.pw-wrap{position:relative;display:block;width:100%}
.pw-wrap>input{padding-right:44px!important}
.pw-wrap>input::-ms-reveal,.pw-wrap>input::-ms-clear{display:none}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;
  background:none;color:var(--ds-muted);cursor:pointer;padding:0}
.pw-eye:hover{color:var(--ds-blue);background:var(--ds-active)}
.pw-eye:focus-visible{outline:2px solid #CFDDF8}
.pw-eye .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.pw-eye[aria-pressed="true"]{color:var(--ds-blue)}


/* top right of every app page: language and the person (owner, 2026-10-12) */
.shell-top{display:flex;justify-content:flex-end;padding:10px 22px 0}
.app-main:has(.ds-head)>.shell-top{display:none}                 /* the design pages carry it in their own top row */
.top-user{display:flex;align-items:center;gap:8px}
.lang-mini{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--ds-line,#E3E8F0);border-radius:10px;background:#fff;height:32px;padding:3px}
.lang-mini a{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:100%;padding:0 8px;border-radius:7px;font-size:11.5px;font-weight:800;
  color:var(--ds-muted,#6E7F97);text-decoration:none}
.lang-mini a:not(.on):hover{color:var(--ds-blue,#2F63FF)}
.lang-mini a.on{background:var(--ds-blue,#2F63FF);color:#fff}
.site-head .lang-mini{height:43px;border-radius:12px;padding:4px}.site-head .lang-mini a{min-width:36px;border-radius:9px;font-size:13px}   /* level with the header buttons */
.top-menu{position:relative}
.top-menu>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:3px 8px 3px 3px;border-radius:999px;
  border:1px solid var(--ds-line,#E3E8F0);background:#fff}
.top-menu>summary::-webkit-details-marker{display:none}
.top-menu .avatar{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;background:linear-gradient(145deg,#2F63FF,#5F88FF);
  color:#fff;font-size:11px;font-weight:800;flex:0 0 auto}
.top-name{display:flex;flex-direction:column;line-height:1.1;max-width:150px}
.top-name b{font-size:12.5px;color:var(--ds-ink,#0F2747);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-name small{font-size:10.5px;color:var(--ds-muted,#6E7F97)}
.top-menu-panel{position:absolute;right:0;top:calc(100% + 6px);min-width:250px;z-index:60;background:#fff;border:1px solid var(--ds-line,#E3E8F0);
  border-radius:12px;box-shadow:0 12px 30px rgba(16,39,70,.12);padding:8px}
.tm-who{display:flex;gap:10px;align-items:center;padding:8px}
.tm-who strong{display:block;font-size:13px;color:var(--ds-ink,#0F2747)}.tm-who small{color:var(--ds-muted,#6E7F97);font-size:11.5px}
.tm-ws{display:flex;justify-content:space-between;gap:8px;padding:8px;margin:2px 0 6px;border-radius:8px;background:#F6F8FC;font-size:12px}
.tm-ws b{color:var(--ds-blue,#2F63FF)}
@media (max-width:760px){.top-name{display:none}.shell-top{padding:8px 12px 0}}
.app-main:has(.ib-top)>.shell-top,.app-main:has(.mb-top)>.shell-top{display:none}   /* screens with their own top row */
.lang-mini a[lang="ar"]{font-size:15px;font-weight:600;padding-bottom:2px}
.lang-mini a[lang="ar"].on{font-weight:700}
@media (max-width:1050px){.top-user{position:fixed;top:8px;right:10px;z-index:1000;background:#fff;border-radius:999px;padding:3px;box-shadow:0 6px 18px rgba(16,39,70,.14)}.shell-top{min-height:0;padding:0}}

/* ---- Stage 14: "Needs you" first, the project profit row (Books overview, project page) ------------------------------- */
.ds-needs{border-color:#F6D5D0}
/* Stage 16: the full due list folds under "Needs you" (same bills, not shown twice) */
.ds-att-fold>summary{list-style:none;cursor:pointer}
.ds-att-fold>summary::-webkit-details-marker{display:none}
.ds-att-fold>summary .ds-chead{margin-bottom:0}
.ds-att-fold[open]>summary .ds-chead{margin-bottom:10px}
.ds-att-fold>summary .ds-chead-r .icon{transition:transform .15s}
.ds-att-fold[open]>summary .ds-chead-r .icon{transform:rotate(180deg)}
.ds-att-bar{display:flex;justify-content:flex-end;margin-bottom:10px;overflow-x:auto}
.ds-needs .ds-chead{margin-bottom:6px}
.ds-needs-list{list-style:none;margin:0;padding:0}
.ds-needs-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--ds-line-2);min-width:0}
.ds-needs-list li:first-child{border-top:0}
.ds-needs-list .ds-tile{width:30px;height:30px;border-radius:8px}.ds-needs-list .ds-tile .icon{width:16px;height:16px}
.ds-needs-list .t{flex:1 1 auto;min-width:0;font-size:13px;color:var(--ds-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-needs-list .a{font-size:13px;font-weight:650;color:var(--ds-ink);white-space:nowrap}
.ds-needs-list .ds-btn{height:30px;padding:0 12px;min-width:76px;justify-content:center}
.ds-needs-list form{display:contents}
.ds-needs-list a.t{text-decoration:none}.ds-needs-list a.t:hover{text-decoration:underline}
.ds-needs-list li:has(.ds-needs-fix){flex-wrap:wrap}
.ds-needs-fix{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;padding-left:42px;min-width:0}
.ds-needs-fix form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.ds-needs-fix .ds-form{flex-wrap:nowrap;max-width:100%}
.ds-needs-fix .ds-form input{width:200px;flex:0 1 200px;min-width:0;height:30px}
.ds-needs-fix input[type=file]{width:240px;flex:0 1 240px;padding:4px 8px}
@media (max-width:640px){.ds-needs-fix{padding-left:40px}.ds-needs-fix form{flex:1 1 100%}.ds-needs-fix .ds-form input{flex:1 1 auto}
  .ds-needs-fix .ds-btn{min-width:0;flex:0 0 auto}}
.ds-needs-more summary{cursor:pointer;color:var(--ds-blue);font-size:12.5px;font-weight:600;padding:8px 0 0;list-style:none}
.ds-needs-more[open] summary{padding-bottom:4px}
.ds-needs-none{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;color:var(--ds-good);font-weight:600}
.ds-needs-none .icon{width:16px;height:16px}
.ds-page>.ds-needs{margin-top:14px}
.ds-page>.ds-needs+.ds-kpis,.ds-page>.ds-needs-none+.ds-kpis{margin-top:14px}

.ds-profit{border:1px solid var(--ds-line);border-radius:10px;overflow:hidden}
.ds-profit-row{display:grid;grid-template-columns:minmax(180px,1.7fr) repeat(6,minmax(0,1fr));gap:10px;align-items:center;
  padding:10px 14px;border-top:1px solid var(--ds-line-2);font-size:13px;color:var(--ds-text)}
.ds-profit-row>div:not(.nm){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-profit-row.head{border-top:0;background:#F8FAFD;font-size:11.5px;font-weight:650;color:var(--ds-th);padding-top:8px;padding-bottom:8px}
.ds-profit-row.head>span:not(:first-child){text-align:right}
.ds-profit-row .nm{display:flex;align-items:center;min-width:0}
.ds-profit-row .nm>div{min-width:0}
.ds-profit-row .nm a{display:block;font-weight:620;color:var(--ds-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-profit-row small{display:block;font-size:11.5px;color:var(--ds-muted);font-weight:500}
.ds-profit-row small.bad,.ds-profit-row .fm.bad{color:var(--ds-bad)}
.ds-profit-row .fm{font-weight:650;color:var(--ds-ink)}
.ds-profit-row.over{background:#FFF8F7}
@media (max-width:1180px){.ds-profit-row{grid-template-columns:minmax(150px,1.4fr) repeat(6,minmax(0,1fr));gap:8px;font-size:12.5px}}
@media (max-width:900px){
  .ds-profit-row.head{display:none}
  .ds-profit-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
  .ds-profit-row .nm{grid-column:1/-1;margin-bottom:2px}
  .ds-profit-row>div:not(.nm){display:flex;justify-content:space-between;align-items:baseline;gap:8px;text-align:right;flex-wrap:wrap}
  .ds-profit-row>div:not(.nm)::before{content:attr(data-l);color:var(--ds-muted);font-size:11.5px;text-align:left}
  .ds-profit-row>div:not(.nm) small{flex-basis:100%}
}
@media (max-width:760px){
  .ds-needs-list li{flex-wrap:wrap;gap:6px 10px}
  .ds-needs-list .t{flex-basis:calc(100% - 42px);white-space:normal}
  .ds-needs-list .a{margin-left:40px;margin-right:auto}
}

/* the project page: the same figures as one strip of facts */
.ds-pprofit .ds-chead{margin-bottom:10px}
.ds-pprofit-figs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ds-pprofit-figs>div{border:1px solid var(--ds-line-2);border-radius:10px;padding:10px 12px;background:#FBFCFE;min-width:0}
.ds-pprofit-figs small{display:block;font-size:11.5px;color:var(--ds-muted);font-weight:560}
.ds-pprofit-figs b{display:block;font-size:16px;font-weight:720;color:var(--ds-ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-pprofit-figs span{display:block;font-size:11.5px;color:var(--ds-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-pprofit-figs .bad b{color:var(--ds-bad)}
.ds-pprofit-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--ds-muted)}
.ds-pprofit-line b{color:var(--ds-ink)}
@media (max-width:1399px){.ds-pprofit-figs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ds-pprofit-figs{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-pprofit-figs b{font-size:15px}}
@media (max-width:760px){
  .ds-needs-list .ds-btn{margin-left:auto}
  .ds-profit-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .ds-profit-row>div:not(.nm){flex-wrap:nowrap}
  .ds-profit-row>div:not(.nm) small{display:inline;flex-basis:auto;order:-1;padding-right:8px}
  .ds-profit-row>div:not(.nm)::before{flex:0 0 auto;order:-2;margin-right:auto}
}
/* Needs you: the one-time Zero · Exempt · Out of scope question of an old exempt item (ZATCA variations V4) */
.ds-needs-fix form[data-reason-form]{flex-wrap:wrap}
.ds-needs-fix .ds-form select{width:230px;flex:0 1 230px;min-width:0;height:30px}
.ds-needs-fix [hidden]{display:none!important}
@media (max-width:640px){.ds-needs-fix .ds-form select{flex:1 1 100%;width:100%}}