/* Shared screen layout: one page heading, compact summaries, readable registers.
   Scoped to the workspace so document previews, PDFs and Field Clocks keep their layout. */
@media screen {
  .layout > .main { --workspace-gap:18px; }
  .main > .topbar { align-items:flex-start; gap:16px; margin-bottom:16px; }
  .main > .topbar > div:first-child { min-width:0; }
  .main > .topbar h1 { line-height:1.2; overflow-wrap:anywhere; }
  .main > .topbar p { max-width:76ch; line-height:1.55; margin:7px 0 0; }
  .main > .topbar > .toolbar { justify-content:flex-end; flex-wrap:wrap; }
  .main > .qx-context { margin-bottom:18px; }
  .qx-notification-slot #qps-device-opt-in { position:static; width:100%; margin:0 0 16px; padding:12px 15px; display:flex; align-items:center; gap:16px; box-shadow:none; font-size:12px; border-radius:12px; }
  .qx-notification-slot #qps-device-opt-in p { margin:0; flex:1; }
  .qx-notification-slot #qps-device-opt-in > div { flex:none; }
  .qx-notification-slot #qps-device-opt-in button { min-height:40px; }
  .main :is(.panel-head,.qi-register-head,.qr-register-head,.qpp-register-head) { gap:14px; flex-wrap:wrap; }
  .main :is(.panel-head,.qi-register-head,.qr-register-head,.qpp-register-head) > div:first-child { min-width:0; }
  .main :is(.panel-head,.qi-register-head,.qr-register-head,.qpp-register-head) h3 { line-height:1.35; }
  /* WebKit includes long native option labels in the select's scroll width. */
  .layout[data-workspace-view="settings"] .field:has(select[name="travel_provider"]) { min-width:0; overflow:hidden; padding:3px; margin:-3px; }

  /* These modules already have an H1 and project context in the shared shell. */
  .layout[data-workspace-view="inventory"] .qi-heading-title,
  .layout[data-workspace-view="rentals"] .qr-heading-title,
  .layout[data-workspace-view="airgas"] .qr-heading-title,
  .layout[data-workspace-view="purchase_orders"] .qpp-heading-title,
  .layout[data-workspace-view="material_requests"] .qmr-heading > div:first-child,
  .layout[data-workspace-view="attention"] .qa-heading > div:first-child,
  .layout[data-workspace-view="payroll_review"] .po-heading > div:first-child { display:none; }
  .layout[data-workspace-view="quotes"] .qproposal-intro > div:first-child { display:none; }
  .main .qproposal-intro { padding:16px 20px; }
  .main .qp-project-stats { margin:0; gap:36px; }
  .main :is(.qi-heading,.qr-heading,.qpp-heading,.qmr-heading,.qa-heading,.po-heading) { min-height:0; margin-bottom:4px; justify-content:flex-end; }
  .main :is(.qi-heading,.qr-heading,.qmr-heading,.qa-heading,.po-heading) > .actions { margin:0; gap:8px; flex-wrap:wrap; }
  .main :is(.qi-stats,.qr-stats,.qmr-stats,.po-counts) { gap:10px; }
  .main :is(.qi-stats,.qr-stats,.qmr-stats,.po-counts) > :is(button,div) { padding:15px 17px; gap:6px; box-shadow:none; }
  .main :is(.qi-stats,.qr-stats,.qmr-stats,.po-counts) strong { font-size:26px; font-variant-numeric:tabular-nums; line-height:1.25; }
  .main :is(.qi-stats,.qr-stats) small { line-height:1.45; }
  .main :is(.qi-filters,.qr-filters,.qpp-filters,.qmr-filters,.po-filters,.qa-filters) { gap:12px; padding:15px; margin:16px 0; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
  .main :is(.qi-filters,.qr-filters,.qpp-filters,.qmr-filters,.po-filters,.qa-filters) :is(input,select) { min-height:40px; }
  .main :is(.qi-table,.qr-table,.qpp-table,.qmr-table,.po table) th { color:var(--muted); background:var(--soft); font-size:11px; font-weight:650; line-height:1.45; }
  .main :is(.qi-table,.qr-table,.qpp-table,.qmr-table,.po table) tbody tr:hover { background:color-mix(in srgb,var(--steel) 5%,var(--panel)); }
  .main :is(.qi-table,.qr-table,.qpp-table,.qmr-table) td { font-variant-numeric:tabular-nums; }
  .main :is(.qi-empty,.qr-empty,.qmr-empty,.qa-empty,.po-empty) { padding:28px 18px; line-height:1.6; }
  .main :is(.po-case,.qmr-row) { box-shadow:none; }
  .main .po-case { border-left:3px solid var(--line); }
  .main .po-case:has(.po-pending) { border-left-color:var(--amber); }
  .main .po-case header > strong { color:var(--muted); font-size:12px; line-height:1.5; }
  .main .po-case h3 { margin-top:8px; font-size:17px; }
  .main .po-case-links { padding-top:3px; }
  .main .po-case-links .button { min-height:40px; color:var(--steel); }

  /* Project shortcuts follow the same groups as the sidebar. */
  .qcl-tools { margin:18px 0 24px; }
  .qcl-section-heading { margin:0 0 14px; }
  .qcl-section-heading h3 { margin:0 0 5px; font-size:19px; }
  .qcl-section-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
  .qcl-tool-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
  .qcl-tool-group { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .qcl-tool-group h4 { margin:0; padding:14px 16px; background:var(--soft); border-bottom:1px solid var(--line); font-size:12px; font-weight:700; color:var(--steel); }
  .qcl-tool-group .project-launch { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; min-width:0; gap:4px 10px; min-height:70px; margin:0; padding:13px 16px; text-align:left; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; background:var(--panel); color:var(--ink); }
  .qcl-tool-group .project-launch:last-child { border-bottom:0; }
  .qcl-tool-group .project-launch strong { font-size:13px; line-height:1.4; }
  .qcl-tool-group .project-launch span { grid-column:1; font-size:11px; line-height:1.5; color:var(--muted); }
  .qcl-tool-group .project-launch b { grid-column:2; grid-row:1/3; align-self:center; position:static; font-size:16px; color:var(--steel); }
  .qcl-tool-group .project-launch:hover { background:var(--accent-soft); }
  .qcl-tool-group .project-launch:focus-visible { outline:2px solid var(--steel); outline-offset:-3px; }
  .main .open-project-hero { padding:22px; gap:20px; }
  .main .open-project-hero h2 { font-size:clamp(22px,2.4vw,30px); line-height:1.25; margin:8px 0; }
  .main .open-project-hero p { line-height:1.6; max-width:80ch; }
  .main #project-weather { margin:20px 0; scroll-margin-top:110px; }
  .main #project-weather .qps-weather-day summary { min-height:196px; padding:11px; gap:6px; }
  .main #project-weather .qps-weather-days { gap:8px; }
  .main .project-workspace.expanded { margin-top:18px; }

  :root[data-workspace-style="modern"] .qcl-tool-group h4 { background:var(--qm-lilac); }
  :root[data-workspace-style="modern"] .qcl-tool-group:nth-child(2) h4 { background:var(--qm-mint); }
  :root[data-workspace-style="modern"] .qcl-tool-group:nth-child(3) h4 { background:var(--qm-blue); }
  :root[data-workspace-style="modern"] .qcl-tool-group .project-launch { border-radius:0; background:var(--panel); box-shadow:none; }
  :root[data-workspace-style="modern"] .qcl-tool-group .project-launch:hover { background:var(--soft); }
  :root[data-workspace-style="modern"] .main > .qx-context { margin-bottom:18px; padding-bottom:13px; }
  :root[data-workspace-style="modern"] .main .panel { box-shadow:none; }
  :root[data-workspace-style="modern"][data-qps-theme="dark"] .qxm-panel { border-color:var(--line); }
  :root[data-workspace-style="modern"] .sidebar .nav-group-links button { font-size:12px; }
  @media(min-width:1101px) {
    /* Five permission-visible groups fit three columns without tall empty cards. */
    .qcl-tool-groups:has(> .qcl-tool-group:nth-child(5)) > .qcl-tool-group:nth-child(2) { grid-column:2; grid-row:1 / 3; }
    .qcl-tool-groups:has(> .qcl-tool-group:nth-child(5)) > .qcl-tool-group:nth-child(3) { grid-column:3; grid-row:1; }
    .qcl-tool-groups:has(> .qcl-tool-group:nth-child(5)) > .qcl-tool-group:nth-child(4) { grid-column:1; grid-row:2; }
    .qcl-tool-groups:has(> .qcl-tool-group:nth-child(5)) > .qcl-tool-group:nth-child(5) { grid-column:3; grid-row:2; }
  }
  @media(max-width:1100px) {
    .qcl-tool-groups { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .main > .topbar { flex-wrap:wrap; }
    .main > .topbar > .toolbar { margin-left:auto; }
  }
  @media(max-width:700px) {
    .main > .topbar { margin-bottom:12px; gap:10px; }
    .main > .topbar h1 { font-size:25px; }
    .main > .topbar p { font-size:12px; margin-top:6px; }
    .main > .qx-context { margin-bottom:14px; }
    .qx-notification-slot #qps-device-opt-in { flex-wrap:wrap; gap:10px; }
    .qx-notification-slot #qps-device-opt-in > div { width:100%; }
    .qx-notification-slot #qps-device-opt-in button { min-height:44px; }
    .main .panel-head > .toolbar { width:100%; justify-content:flex-start; }
    .main .panel-head > .toolbar > .button { flex:1 1 140px; min-height:44px; }
    .main :is(.qi-stats,.qr-stats,.qmr-stats,.po-counts) > :is(button,div) { padding:12px; gap:5px; }
    .main :is(.qi-stats,.qr-stats,.qmr-stats,.po-counts) strong { font-size:23px; }
    .main :is(.qi-stats,.qr-stats) small { font-size:10px; }
    .main :is(.qi-filters,.qr-filters,.qpp-filters,.qmr-filters,.po-filters,.qa-filters) { padding:12px; gap:10px; }
    .main :is(.qi-filters,.qr-filters,.qpp-filters,.qmr-filters,.po-filters,.qa-filters) :is(input,select) { min-height:44px; font-size:16px; }
    .main :is(.qi-heading,.qr-heading,.qpp-heading,.qmr-heading,.qa-heading,.po-heading) .button { min-height:44px; }
    .main .po-case { padding:15px 13px; }
    .main .po-case header { gap:8px; }
    .main .po-case header > strong { font-size:12px; }
    .main .po-case-links .button { min-height:44px; }
    .qcl-tool-groups { grid-template-columns:1fr; gap:12px; }
    .qcl-tool-group .project-launch { min-height:66px; }
    .main .open-project-hero { padding:18px 16px; }
    .main .open-project-hero .actions { width:100%; display:flex; flex-wrap:wrap; }
    .main .open-project-hero .actions .button { flex:1 1 120px; min-height:44px; }
  }
}