/* Sales Hub visual system. One disciplined set of spacing, type, borders, control heights
   and button hierarchy, shared by the four module workspaces. Everything is prefixed sh-. */
:root{
  --sh-1:4px;--sh-2:8px;--sh-3:12px;--sh-4:16px;--sh-5:24px;--sh-6:32px;
  --sh-control:40px;--sh-radius:12px;--sh-radius-sm:8px;
  --sh-ink:#2c2330;--sh-muted:#645a64;--sh-line:rgba(71,48,61,.16);--sh-line-strong:rgba(71,48,61,.28);
  --sh-surface:#fff;--sh-surface-2:#faf5ef;--sh-primary:#bc4e43;--sh-primary-ink:#fff;--sh-focus:#79536e;
  --sh-ok:#2f7a5e;--sh-ok-bg:#e3f3ec;--sh-warn:#8a5a00;--sh-warn-bg:#fdf1d8;--sh-danger:#a53a30;--sh-danger-bg:#fbe5e1;
  --sh-info:#3d5a80;--sh-info-bg:#e5edf7;--sh-mute-bg:#eee8ea;
  --sh-font:"DM Sans",system-ui,sans-serif;--sh-font-head:"Manrope",system-ui,sans-serif;
}
.sh-shell{margin:0 0 var(--sh-4);font-family:var(--sh-font);color:var(--sh-ink)}
.sh-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sh-2);margin:0 0 var(--sh-2);font-size:.8rem;color:var(--sh-muted)}
.sh-breadcrumb a{color:var(--sh-muted);text-decoration:none}.sh-breadcrumb a:hover{text-decoration:underline;color:var(--sh-ink)}
.sh-breadcrumb i{font-style:normal;opacity:.6}.sh-breadcrumb span[aria-current]{color:var(--sh-ink);font-weight:600}
.sh-tabs{display:flex;gap:var(--sh-1);margin:0 0 var(--sh-3);border-bottom:1px solid var(--sh-line);overflow-x:auto;scrollbar-width:thin}
.sh-tab{flex:0 0 auto;padding:10px var(--sh-3);border-bottom:2px solid transparent;color:var(--sh-muted);font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap}
.sh-tab:hover{color:var(--sh-ink)}.sh-tab.is-active{color:var(--sh-primary);border-bottom-color:var(--sh-primary)}
.sh-subtabs{display:flex;gap:var(--sh-2);margin:-4px 0 var(--sh-3);overflow-x:auto}
.sh-subtab{padding:5px 10px;border:1px solid var(--sh-line);border-radius:999px;color:var(--sh-muted);font-size:.82rem;font-weight:600;text-decoration:none;white-space:nowrap}
.sh-subtab.is-active{border-color:var(--sh-primary);color:var(--sh-primary);background:#fff}
.sh-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sh-4);flex-wrap:wrap}
.sh-title{margin:0;font:800 clamp(1.25rem,2vw,1.6rem)/1.2 var(--sh-font-head)}
.sh-standfirst{margin:var(--sh-1) 0 0;max-width:68ch;color:var(--sh-muted);font-size:.9rem}
.sh-actions{display:flex;gap:var(--sh-2);flex-wrap:wrap;align-items:center}
.sh-context{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sh-2);margin-top:var(--sh-3)}
.sh-context-item{font-size:.85rem;color:var(--sh-muted)}
.sh-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 10px;border:1px solid var(--sh-line);border-radius:999px;background:#fff;color:var(--sh-ink);font-size:.8rem;text-decoration:none}
.sh-chip b{font-weight:800;color:var(--sh-muted)}.sh-chip:hover b{color:var(--sh-danger)}.sh-chip.is-static{background:var(--sh-surface-2)}
/* buttons: one primary per section */
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--sh-control);padding:0 var(--sh-4);border:1px solid var(--sh-line-strong);border-radius:var(--sh-radius-sm);background:#fff;color:var(--sh-ink);font:600 .9rem var(--sh-font);text-decoration:none;cursor:pointer;white-space:nowrap}
.sh-btn:hover{border-color:var(--sh-ink)}.sh-btn:focus-visible,.sh-tab:focus-visible,.sh-chip:focus-visible,.sh-field input:focus-visible,.sh-field select:focus-visible,.sh-field textarea:focus-visible{outline:3px solid rgba(121,83,110,.45);outline-offset:2px}
.sh-btn-primary{background:var(--sh-primary);border-color:var(--sh-primary);color:var(--sh-primary-ink)}.sh-btn-primary:hover{background:#a8433a;border-color:#a8433a}
.sh-btn-secondary{background:#fff}.sh-btn-danger{border-color:var(--sh-danger);color:var(--sh-danger)}.sh-btn-danger:hover{background:var(--sh-danger-bg)}
.sh-btn-sm{min-height:32px;padding:0 var(--sh-3);font-size:.82rem}.sh-btn[disabled],.sh-btn.is-disabled{opacity:.55;cursor:not-allowed}
/* badges */
.sh-badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:1px 8px;border-radius:999px;font-size:.74rem;font-weight:700;line-height:1;white-space:nowrap}
.sh-badge--ok{background:var(--sh-ok-bg);color:var(--sh-ok)}.sh-badge--warn{background:var(--sh-warn-bg);color:var(--sh-warn)}
.sh-badge--danger{background:var(--sh-danger-bg);color:var(--sh-danger)}.sh-badge--info{background:var(--sh-info-bg);color:var(--sh-info)}
.sh-badge--muted{background:var(--sh-mute-bg);color:var(--sh-muted)}
/* toasts and validation */
.sh-toast{margin:0 0 var(--sh-4);padding:10px var(--sh-4);border-radius:var(--sh-radius-sm);font-size:.9rem;font-weight:600}
.sh-toast--ok{background:var(--sh-ok-bg);color:var(--sh-ok)}.sh-toast--error{background:var(--sh-danger-bg);color:var(--sh-danger)}
.sh-field-error{display:block;margin-top:4px;color:var(--sh-danger);font-size:.8rem;font-weight:600}
/* command bar: filters in one row that wraps, every control the same height */
.sh-command-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sh-3);margin:0 0 var(--sh-4);padding:var(--sh-3) var(--sh-4);border:1px solid var(--sh-line);border-radius:var(--sh-radius);background:var(--sh-surface)}
.sh-command-bar .sh-field{flex:1 1 150px;min-width:130px;max-width:260px;margin:0}.sh-command-bar .sh-field.is-wide{flex-basis:220px;max-width:340px}
.sh-command-bar .sh-bar-actions{display:flex;gap:var(--sh-2);align-items:center}
.sh-filters-toggle{display:none}
.sh-field{display:flex;flex-direction:column;gap:4px;margin:0 0 var(--sh-3)}
.sh-field>label,.sh-field>.sh-label{font-size:.78rem;font-weight:700;color:var(--sh-muted);letter-spacing:.02em}
.sh-field input:not([type=checkbox]):not([type=radio]),.sh-field select,.sh-field textarea,.sh-command-bar input:not([type=checkbox]),.sh-command-bar select{width:100%;min-height:var(--sh-control);padding:6px 10px;border:1px solid var(--sh-line-strong);border-radius:var(--sh-radius-sm);background:#fff;color:var(--sh-ink);font:400 .92rem var(--sh-font)}
.sh-field textarea{min-height:88px;resize:vertical}.sh-field .sh-help{font-size:.78rem;color:var(--sh-muted)}
.sh-field.is-invalid input,.sh-field.is-invalid select,.sh-field.is-invalid textarea{border-color:var(--sh-danger)}
.sh-check{display:inline-flex;align-items:center;gap:8px;min-height:var(--sh-control);font-size:.9rem}
/* segmented choice: real radios, styled */
.sh-segmented{display:inline-flex;flex-wrap:wrap;border:1px solid var(--sh-line-strong);border-radius:var(--sh-radius-sm);overflow:hidden}
.sh-segmented label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border-right:1px solid var(--sh-line);font-size:.85rem;font-weight:600;color:var(--sh-muted);cursor:pointer}
.sh-segmented label:last-child{border-right:0}.sh-segmented input{position:absolute;opacity:0;inset:0;margin:0}
.sh-segmented input:checked+span{color:var(--sh-primary)}.sh-segmented label:has(input:checked){background:#fbe9e5;color:var(--sh-primary)}
.sh-segmented label:has(input:focus-visible){outline:3px solid rgba(121,83,110,.45);outline-offset:-3px}
/* queue chips */
.sh-queue-chips{display:flex;flex-wrap:wrap;gap:var(--sh-2);margin:0 0 var(--sh-4)}
.sh-queue-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--sh-line);border-radius:999px;background:#fff;color:var(--sh-ink);font-size:.85rem;font-weight:600;text-decoration:none}
.sh-queue-chip b{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 6px;border-radius:999px;background:var(--sh-mute-bg);color:var(--sh-ink);font-size:.78rem;font-weight:800}
.sh-queue-chip.is-active{border-color:var(--sh-primary);background:#fbe9e5;color:var(--sh-primary)}.sh-queue-chip.is-active b{background:var(--sh-primary);color:#fff}
.sh-queue-chip.is-empty{color:var(--sh-muted)}.sh-queue-chip.is-empty b{color:var(--sh-muted)}
.sh-queue-chip.is-alert b{background:var(--sh-danger-bg);color:var(--sh-danger)}
/* kpi row: compact */
.sh-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sh-3);margin:0 0 var(--sh-4)}
.sh-kpi{display:flex;flex-direction:column;gap:2px;min-height:84px;padding:var(--sh-3) var(--sh-4);border:1px solid var(--sh-line);border-radius:var(--sh-radius);background:#fff;color:var(--sh-ink);text-decoration:none}
a.sh-kpi:hover{border-color:var(--sh-primary)}.sh-kpi .sh-kpi-label{font-size:.76rem;font-weight:700;color:var(--sh-muted);letter-spacing:.03em;text-transform:uppercase}
.sh-kpi strong{font:800 1.45rem/1.1 var(--sh-font-head)}.sh-kpi small{color:var(--sh-muted);font-size:.76rem}.sh-kpi.is-muted{background:var(--sh-surface-2)}.sh-kpi.is-alert strong{color:var(--sh-danger)}
/* data grid and the cards it becomes on narrow screens */
.sh-grid-wrap{border:1px solid var(--sh-line);border-radius:var(--sh-radius);background:#fff;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.sh-grid{width:100%;border-collapse:collapse;font-size:.88rem}
.sh-grid th{position:sticky;top:0;z-index:1;padding:10px 12px;border-bottom:1px solid var(--sh-line);background:var(--sh-surface-2);color:var(--sh-muted);font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:left;white-space:nowrap}
.sh-grid th a{color:inherit;text-decoration:none}.sh-grid td{padding:8px 10px;border-bottom:1px solid var(--sh-line);vertical-align:top;font-size:.85rem}
.sh-grid tbody tr:hover{background:#fdf8f3}.sh-grid tbody tr.is-selected{background:#fbe9e5}.sh-grid tbody tr[data-sh-row-href]{cursor:pointer}
.sh-grid .sh-cell-primary{font-weight:700}.sh-grid .sh-cell-sub{display:block;color:var(--sh-muted);font-size:.78rem;font-weight:400}
.sh-grid .sh-col-action{width:1%;white-space:nowrap;text-align:right;position:sticky;right:0;background:#fff;box-shadow:-10px 0 10px -10px rgba(44,35,48,.25)}.sh-grid th.sh-col-action{background:var(--sh-surface-2);z-index:2}.sh-grid tbody tr:hover .sh-col-action{background:#fdf8f3}.sh-grid tbody tr.is-selected .sh-col-action{background:#fbe9e5}
.sh-cards{display:none}
.sh-card{display:grid;gap:var(--sh-2);padding:var(--sh-3) var(--sh-4);border:1px solid var(--sh-line);border-radius:var(--sh-radius);background:#fff}
.sh-card .sh-card-head{display:flex;justify-content:space-between;gap:var(--sh-2);align-items:flex-start}.sh-card .sh-card-title{font-weight:700}
.sh-card .sh-card-meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--sh-muted);font-size:.82rem}.sh-card .sh-card-actions{display:flex;gap:var(--sh-2);flex-wrap:wrap}
.sh-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--sh-3);margin-top:var(--sh-3);font-size:.85rem;color:var(--sh-muted)}
/* master-detail workspace */
.sh-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sh-4);align-items:start}
.sh-workspace.has-detail{grid-template-columns:minmax(0,1fr) minmax(360px,42%)}
.sh-drawer{position:sticky;top:12px;display:flex;flex-direction:column;max-height:calc(100vh - 24px);border:1px solid var(--sh-line);border-radius:var(--sh-radius);background:#fff;overflow:hidden}
.sh-drawer-head{display:flex;flex-direction:column;gap:var(--sh-2);padding:var(--sh-3) var(--sh-4);border-bottom:1px solid var(--sh-line);background:var(--sh-surface-2)}
.sh-drawer-head h2{margin:0;font:800 1.05rem/1.2 var(--sh-font-head)}.sh-drawer-head .sh-drawer-meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:4px;color:var(--sh-muted);font-size:.8rem}
.sh-drawer-tabs{display:flex;gap:2px;padding:0 var(--sh-3);border-bottom:1px solid var(--sh-line);overflow-x:auto}
.sh-drawer-tab{flex:0 0 auto;padding:9px 10px;border:0;border-bottom:2px solid transparent;background:none;color:var(--sh-muted);font:600 .84rem var(--sh-font);cursor:pointer;white-space:nowrap}
.sh-drawer-tab.is-active{color:var(--sh-primary);border-bottom-color:var(--sh-primary)}
.sh-drawer-body{overflow:auto;padding:var(--sh-3) var(--sh-4) var(--sh-5)}
.sh-panel[hidden]{display:none}
/* form sections */
.sh-form-section{margin:0 0 var(--sh-4);padding:var(--sh-3) var(--sh-4);border:1px solid var(--sh-line);border-radius:var(--sh-radius);background:#fff}
.sh-form-section>h3,.sh-section-title{margin:0 0 var(--sh-3);font:800 .95rem var(--sh-font-head)}
.sh-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sh-3) var(--sh-4)}
.sh-form-grid .is-full{grid-column:1/-1}.sh-form-actions{display:flex;gap:var(--sh-2);align-items:center;flex-wrap:wrap;margin-top:var(--sh-3)}
/* summary lists, timeline, empty and degraded states */
.sh-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;margin:0;font-size:.88rem}.sh-kv dt{color:var(--sh-muted)}.sh-kv dd{margin:0}
.sh-timeline{list-style:none;margin:0;padding:0}.sh-timeline li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--sh-3);padding:8px 0;border-bottom:1px solid var(--sh-line);font-size:.86rem}
.sh-timeline time{color:var(--sh-muted);font-size:.78rem}.sh-timeline .sh-tl-kind{display:inline-block;margin-right:6px;color:var(--sh-muted);font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.sh-timeline .sh-tl-actor{display:block;color:var(--sh-muted);font-size:.76rem}
.sh-empty{padding:var(--sh-5) var(--sh-4);border:1px dashed var(--sh-line-strong);border-radius:var(--sh-radius);text-align:center;color:var(--sh-muted);font-size:.9rem}
.sh-empty strong{display:block;color:var(--sh-ink);margin-bottom:4px}
.sh-degraded{display:flex;gap:var(--sh-3);align-items:flex-start;padding:var(--sh-3) var(--sh-4);border:1px solid #f0d9a8;border-radius:var(--sh-radius);background:var(--sh-warn-bg);color:var(--sh-warn);font-size:.88rem}
.sh-degraded strong{display:block;color:var(--sh-ink)}.sh-degraded.is-error{border-color:#f0bdb5;background:var(--sh-danger-bg);color:var(--sh-danger)}
.sh-status-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sh-2);margin:0 0 var(--sh-4);font-size:.88rem}
.sh-status-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--sh-2) var(--sh-4);margin:0 0 var(--sh-4)}
.sh-status-strip .sh-status-line{margin:0;align-items:baseline}
.sh-status-strip .sh-help{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-muted{color:var(--sh-muted)}.sh-help{font-size:.8rem;color:var(--sh-muted)}
.sh-section{margin:0 0 var(--sh-5)}.sh-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sh-3);margin:0 0 var(--sh-3)}
.sh-section-head h2{margin:0;font:800 1.05rem var(--sh-font-head)}.sh-section-head p{margin:2px 0 0;color:var(--sh-muted);font-size:.84rem}
.sh-drawer-close{display:inline-flex}
.sh-drawer.is-page{position:static;max-height:none}
.sh-drawer-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sh-muted)}
.sh-drawer-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start}
.sh-tel{font-weight:600;color:var(--sh-primary);text-decoration:none;white-space:nowrap}.sh-tel:hover{text-decoration:underline}
.sh-views{position:relative}.sh-views>summary{list-style:none;cursor:pointer}.sh-views>summary::-webkit-details-marker{display:none}
.sh-views-body{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(560px,92vw);padding:var(--sh-3) var(--sh-4);border:1px solid var(--sh-line);border-radius:var(--sh-radius);background:#fff;box-shadow:0 12px 32px rgba(44,35,48,.14);display:grid;gap:var(--sh-3)}
.sh-views-form{display:grid;gap:var(--sh-2)}.sh-views-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0 12px}.sh-views-checks .sh-check{min-height:30px;font-size:.85rem}
.sh-views-list{list-style:none;margin:0;padding:0}.sh-views-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--sh-2);padding:4px 0;border-bottom:1px solid var(--sh-line)}
.sh-views-list form{margin:0}.sh-views-save{display:flex;gap:var(--sh-2)}.sh-views-save input{flex:1;min-width:0;min-height:32px;padding:4px 10px;border:1px solid var(--sh-line-strong);border-radius:var(--sh-radius-sm);font:400 .88rem var(--sh-font)}
.sh-checklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--sh-1)}
.sh-check-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sh-2) var(--sh-3);align-items:center;padding:8px 0;border-bottom:1px solid var(--sh-line)}
.sh-check-q{display:flex;flex-direction:column;gap:2px;font-size:.88rem;font-weight:600}.sh-check-q small{font-weight:400}
.sh-visits{list-style:none;margin:0 0 var(--sh-4);padding:0;display:grid;gap:var(--sh-2)}
.sh-visit{padding:var(--sh-3);border:1px solid var(--sh-line);border-radius:var(--sh-radius);background:#fff}.sh-visit.is-pending{border-color:var(--sh-info)}
.sh-visit-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sh-2)}.sh-visit-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:4px;color:var(--sh-muted);font-size:.84rem}
.sh-visit-actions{display:flex;flex-wrap:wrap;gap:var(--sh-2);margin-top:var(--sh-2)}
.sh-inline-form{flex:1 1 100%}.sh-inline-form>summary{list-style:none;display:inline-flex;cursor:pointer}.sh-inline-form>summary::-webkit-details-marker{display:none}
.sh-inline-form[open]>form{margin-top:var(--sh-2);padding:var(--sh-3);border:1px dashed var(--sh-line-strong);border-radius:var(--sh-radius-sm)}
.sh-tl-title{font-weight:600}.sh-tl-detail{color:var(--sh-ink);font-size:.84rem;margin-top:2px}
.sh-cell-sub.is-overdue{color:var(--sh-danger);font-weight:600}
.sh-kpi-group{margin:0 0 var(--sh-3);font:800 .78rem var(--sh-font);letter-spacing:.05em;text-transform:uppercase;color:var(--sh-muted)}
.sh-pager-links{display:flex;gap:var(--sh-2)}
.sh-grid td a{color:var(--sh-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--sh-line-strong)}.sh-grid td a:hover{color:var(--sh-primary)}
.sh-form-section>h3 .sh-help{font-weight:400;margin-left:6px}
.sh-page .sh-section:last-of-type{margin-bottom:var(--sh-4)}
.sh-doc-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}.sh-doc-list a{font-weight:600;color:var(--sh-primary)}
.sh-drawer .sh-section-title{margin:var(--sh-4) 0 var(--sh-2)}.sh-drawer .sh-section-title:first-child{margin-top:0}
.sh-degraded form,form.sh-degraded{align-items:center;justify-content:space-between}
.sh-form-section>h3 .sh-badge{margin-left:8px;vertical-align:middle}
.records-views>summary{cursor:pointer;font-weight:600;font-size:.9rem}.records-basis{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sh-2);margin:0 0 var(--sh-3);font-size:.85rem}.records-basis select{min-height:34px;padding:4px 8px;border:1px solid var(--sh-line-strong);border-radius:var(--sh-radius-sm)}
.sh-form-grid>button,.sh-form-grid>.sh-btn{align-self:end}.sh-form-grid>label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:700;color:var(--sh-muted)}.sh-form-grid>label>span{font-size:.78rem;font-weight:700;color:var(--sh-muted)}.sh-form-grid>label>input,.sh-form-grid>label>select{min-height:var(--sh-control);padding:6px 10px;border:1px solid var(--sh-line-strong);border-radius:var(--sh-radius-sm);font:400 .92rem var(--sh-font);color:var(--sh-ink)}
.sh-form-grid>div>label{display:block;margin-bottom:4px;font-size:.78rem;font-weight:700;color:var(--sh-muted)}.sh-form-grid>div>input:not([type=checkbox]),.sh-form-grid>div>select,.sh-form-grid>div>textarea{width:100%;min-height:var(--sh-control);padding:6px 10px;border:1px solid var(--sh-line-strong);border-radius:var(--sh-radius-sm);font:400 .92rem var(--sh-font);color:var(--sh-ink);background:#fff}
/* responsive: cards replace the grid, the drawer becomes the screen */
@media (max-width:1199px){.sh-workspace.has-detail{grid-template-columns:minmax(0,1fr) minmax(340px,45%)}}
@media (max-width:1023px){
  .sh-workspace.has-detail{grid-template-columns:minmax(0,1fr)}
  .sh-workspace.has-detail .sh-results{display:none}
  .sh-workspace.has-detail .sh-drawer{position:static;max-height:none}
  .sh-drawer-close{display:inline-flex}
  .sh-grid-wrap.is-responsive{display:none}.sh-cards{display:grid;gap:var(--sh-3)}
}
@media (max-width:767px){
  .sh-command-bar .sh-field{max-width:none;flex-basis:100%}.sh-title-row{flex-direction:column}.sh-actions{width:100%}
  .sh-filters-toggle{display:inline-flex;order:-1}.sh-command-bar{padding:var(--sh-2) var(--sh-3)}
  /* Only a bar that actually HAS a toggle collapses. Without the first :has(), this rule hid every
     child of every command bar on a phone - including the action bars that carry no filters and no
     toggle, so "Project monthly budget", "Request payment", "Claim reimbursement", "Import spend
     records" and the only way back from a drill-down all rendered as an empty bordered box with
     nothing in it and no way to reveal anything. */
  .sh-command-bar:has(.sh-filters-toggle):not(:has(.sh-filters-toggle input:checked))>:not(.sh-filters-toggle):not(.sh-essential){display:none}
  .sh-command-bar:has(.sh-filters-toggle input:checked) .sh-filters-toggle{margin-bottom:var(--sh-2)}
  .sh-queue-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.sh-queue-chip{flex:0 0 auto}
  .sh-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.sh-timeline li{grid-template-columns:1fr}
  .sh-check-item{grid-template-columns:1fr}.sh-drawer-links{justify-content:flex-start}.sh-drawer-head{flex-direction:column}
}
.sh-list{list-style:none;margin:0 0 var(--sh-3);padding:0;display:flex;flex-direction:column;gap:var(--sh-2)}
.sh-list li{padding:var(--sh-2) 0;border-bottom:1px solid var(--sh-line)}
.sh-kv--wide{grid-template-columns:minmax(10rem,max-content) 1fr}
.sh-text-danger{color:var(--sh-danger)}

/* A submit button whose form is already in flight: visibly busy, still a real control, so its
   own name and value stay in the posted form (a disabled submitter posts neither). */
.sh-btn.is-busy, .sh-btn[aria-disabled="true"] { opacity: .6; cursor: progress; }

/* ---- Planned versus actual ---------------------------------------------------------------
   A flat horizontal comparison, deliberately not a 3-D chart: perspective makes two bars of the
   same value look different and it collapses at phone width. Each row is one main category with
   its planned and actual lengths, and the table beneath carries the same numbers exactly. Overrun
   is marked by a word in the row as well as by colour, so it does not depend on seeing red. */
.sh-command-bar--actions { gap: .5rem; flex-wrap: wrap; }

.sh-bars { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 1.25rem; }

.sh-bar-row {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) minmax(10rem, auto);
    align-items: center;
    gap: .75rem;
}

.sh-bar-label { font-weight: 600; }

.sh-bar-track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 2px 0;
}

.sh-bar { display: block; height: 10px; border-radius: 999px; min-width: 2px; }
.sh-bar--planned { background: var(--sh-accent-soft, #c7d7f5); }
.sh-bar--actual { background: var(--sh-accent, #2f5fb3); }
.sh-bar--actual.is-overrun { background: var(--sh-danger, #b3372f); }

.sh-bar-value { font-variant-numeric: tabular-nums; text-align: right; }

.sh-bar-key {
    display: inline-block;
    width: 1.1rem;
    height: .55rem;
    border-radius: 999px;
    vertical-align: middle;
    background: var(--sh-accent-soft, #c7d7f5);
}
.sh-bar-key.sh-bar--actual { background: var(--sh-accent, #2f5fb3); }
.sh-bar-key.is-overrun { background: var(--sh-danger, #b3372f); }

/* Below the table breakpoint the label sits above its own bar rather than being squeezed into a
   column too narrow to read. */
@media (max-width: 720px) {
    .sh-bar-row { grid-template-columns: 1fr; gap: .25rem; }
    .sh-bar-value { text-align: left; }
}
/* H10: the month entry grid on Targets & Performance - one editable figure per person and metric. */
.sh-grid--entry td{vertical-align:middle}.sh-grid--entry th[scope=row]{white-space:nowrap}.sh-cell-input{width:120px;min-height:var(--sh-control);padding:6px 8px;border:1px solid var(--sh-line-strong);border-radius:var(--sh-radius-sm);background:#fff;color:var(--sh-ink);font:400 .92rem var(--sh-font)}.sh-cell-input:focus-visible{outline:3px solid rgba(121,83,110,.45);outline-offset:2px}.sh-cell-input[data-sh-target-cell=draft]{border-color:var(--sh-primary)}
/* H03: a count beside a workspace tab, for what needs attention now. */
.sh-tab-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--sh-danger);color:#fff;font-size:.7rem;font-weight:800;vertical-align:middle}
/* H07: a receipt or an adjustment inside the collections drawer, with the action it is waiting for. */
.sh-receipt{display:flex;flex-direction:column;gap:4px;margin:0 0 8px}.sh-receipt .sh-form-actions{margin:0}
/* H06: the booking draft status beside the request heading, and the template gap beside the attach form. */
.sh-draft-status{font-weight:400;margin-left:8px}.sh-draft-status[data-tone=ok]{color:var(--sh-ok)}.sh-draft-status[data-tone=danger]{color:var(--sh-danger)}.sh-draft-status[data-tone=info]{color:var(--sh-info)}
.sh-template-gap{margin:0;flex:1 1 100%}

/* A receipt or invoice photograph shown beside its name, so a claim can be checked at a glance
   rather than one download at a time. The image comes from the same audited handler as the link,
   so nothing is served unprotected. (Owner, 4 October 2026.) */
.sh-list--documents > li { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.sh-list--documents .sh-thumb { flex: 0 0 auto; display: block; line-height: 0; }
.sh-list--documents .sh-thumb img {
    width: 96px; height: 96px; object-fit: cover; border-radius: var(--sh-radius-sm);
    border: 1px solid var(--sh-border, rgba(0, 0, 0, .15)); background: var(--sh-surface, #fff);
}
@media (max-width: 640px) {
    .sh-list--documents .sh-thumb img { width: 64px; height: 64px; }
}