/*
 * D272 · Shared visual layer for the demo and personal portal.
 * One green interaction accent. Text and checks distinguish saved business status.
 * Layout, disclosure insets and card action alignment belong to their components.
 */
:root {
  --action-accent: #16714b;
  --action-hover: #125f3f;
  --action-soft: #edf7f1;
  --action-on-dark: #c7efdc;
  --control-radius: 6px;
  --button-radius: 14px;
  --button-min-height: 44px;
  --button-padding-block: 6px;
  --button-padding-inline: 12px;
  --nav-accent: var(--action-accent);
  --nav-soft: var(--action-soft);
  --nav-text: #566b7a;
  --border: #dce4eb;
  --surface: #fff;
  --radius: 10px;
  --shadow: none;
  font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  background: #f5f7f9;
}
/* Compact mouse actions; touch controls and narrow screens retain 44px targets. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  :root {
    --button-min-height: 36px;
    --button-padding-block: 4px;
    --button-padding-inline: 10px;
  }
}
@media (any-pointer: coarse) {
  :root {
    --button-min-height: 44px;
    --button-padding-block: 6px;
    --button-padding-inline: 12px;
  }
}
/* Native hidden must win over component flex/grid display declarations. */
[hidden] { display: none !important; }

/* Quiet surfaces and a consistent hierarchy, without changing status colours. */
.invoice-registration-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); }
.panel .invoice-registration-actions > button { margin: 0; }
.invoice-registration-actions > button[aria-pressed=true]:disabled { opacity: 1; }
.panel, .card, .panel .panel, .inline-workspace .panel {
  border-radius: var(--radius);
  box-shadow: none;
}
.list-item, .installer-disclosure, .customer-stage-card,
.customer-project-status, .project-customer-progress, .customer-good-to-know,
.project-history-item, .overview-tools, .project-map, .installer-map,
.dashboard-stage-item, .monthly-hero, .goal-card {
  border-radius: var(--radius);
  box-shadow: none;
}
.weekly-dashboard, .sales-goal-metric, .monthly-page .goal-cards > *,
.customer-overview, body.customer-portal .heading {
  border-radius: var(--radius);
  box-shadow: none;
}
.weekly-dashboard, .customer-overview { background: #fff; border-color: var(--border); }
.customer-workspace .customer-overview, .inline-workspace > .project-work-menu {
  border-radius: var(--radius);
  box-shadow: none;
}
.sales-goal-metric { box-shadow: none; }
.shared-test-role-menu, .demo-role-menu { background: #fff; border-color: var(--border); border-radius: 8px; }
.inline-workspace { background: #f8fafb; }
.inline-workspace > .admin-card-header { justify-content: flex-end; }
.inline-workspace > .admin-card-header > .close-customer-card { min-height: 44px; align-self: flex-end; }
.customer-card-tools { display: grid; gap: var(--space-3); margin-block: var(--space-3); }
.customer-card-tools > .customer-card-toolbar { margin: 0; }
.customer-card-tools > .internal-phase-change { margin: 0; }
.panel.customer-good-to-know.is-filled,
.inline-workspace .panel.customer-good-to-know.is-filled {
  padding: var(--space-4);
  background: #fff8e6;
  border: 1px solid #d9b35c;
}
.customer-good-to-know.is-filled h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.customer-good-to-know.is-filled h2 svg { width: 18px; height: 18px; flex: none; }
.customer-good-to-know.is-filled .customer-note-text {
  margin: var(--space-2) 0 0;
  color: #14394b;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.panel .panel { background: #fff; }
h1, h2, h3, h4 { font-weight: 600; }
.primary, .secondary, .secure-portal button {
  border-radius: var(--control-radius);
  box-shadow: none;
  min-height: 44px;
}
.project-table .inline-workspace :is(.primary, .secondary):where(:not(.project-tool-tab, .phase-work-choice, .steps button, .phase-menu button)) {
  border-radius: var(--control-radius);
  box-shadow: none;
}
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border-radius: var(--control-radius);
  box-shadow: none;
}
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 3px;
}
.panel :where(button, input, select, textarea, summary):focus-visible,
.secure-portal :where(button, input, select, textarea, summary):focus-visible {
  outline-color: var(--nav-accent);
}

/* Main shell: retain the Nordpolen brand rail; use the light tab bar above work. */
.workspace-header {
  background: #fff;
  color: #14394b;
  border-bottom: 1px solid var(--border);
}
.workspace-header b { color: #536b7a; font-weight: 400; }
.workspace-header > span:first-child { font-weight: 600; }
.workspace-header .view-tabs { gap: 0; flex-wrap: wrap; background: transparent; }
.workspace-header .view-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 400;
  box-shadow: none;
}
.workspace-header .view-tabs button:hover:not(.active) {
  background: #f5f8fb;
  color: #14394b;
}
.workspace-header .view-tabs button.active {
  background: var(--nav-soft);
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
}
.workspace-header .view-tabs button svg { width: 16px; height: 16px; flex: none; }
.workspace-header .view-tabs button:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: -4px; }
.workspace-header .notification-toggle { background: #fff; color: #536b7a; border-color: var(--border); border-radius: var(--control-radius); font-weight: 400; }
.workspace-header .notification-toggle:hover { background: var(--nav-soft); color: var(--nav-accent); }
.workspace-header .master-search-result:hover,
.workspace-header .master-search-result:focus-visible { background: var(--nav-soft); color: #14394b; }
.sidebar, body.installer-portal .installer-sidebar { background: #14394b; }
.sidebar .nav, .sidebar .nav-group summary, .installer-sidebar nav .nav {
  border-radius: var(--control-radius);
  font-weight: 400;
  font-size: 14px;
  color: #dce7ef;
  box-shadow: none;
}
.sidebar .nav svg, .sidebar .nav-group svg, .installer-sidebar nav .nav svg { width: 16px; height: 16px; }
.sidebar .nav.active, .sidebar .nav[aria-current=page],
.installer-sidebar nav .nav[aria-current=page] {
  background: #ffffff12;
  color: #fff;
  box-shadow: none;
  border-color: transparent;
}
.sidebar .nav:hover, .sidebar .nav[aria-current=page]:hover,
.sidebar .nav.active:hover,
.installer-sidebar nav .nav:hover { background: #ffffff1a; color: #fff; }
.sidebar .nav:focus-visible, .installer-sidebar nav .nav:focus-visible { outline: 2px solid var(--action-on-dark); outline-offset: -2px; }
.sidebar .nav.active:focus-visible { outline: 2px solid var(--action-on-dark); outline-offset: -2px; box-shadow: none; }
.sidebar .nav.active .nav-count { background: #ffffff18; color: #fff; }
.sidebar .identity, .installer-identity { background: transparent; border-radius: var(--control-radius); }
.master-search input:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }

/* Local navigation: the same underline, weight, spacing and focus everywhere. */
.pipeline-tabs, .statistics-tabs, .installer-map-filters,
.phase-menu, .steps, .customer-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: var(--control-radius);
  overflow: visible;
}
.panel .pipeline-tabs button, .statistics-tabs button,
.installer-map-filters .installer-map-filter, .panel .phase-menu button,
.panel .steps button, .project-table .inline-workspace .steps button,
.customer-section-nav button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  width: auto;
  margin: 0;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--control-radius);
  box-shadow: none;
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 400;
}
.panel .pipeline-tabs button:hover, .statistics-tabs button:hover,
.installer-map-filters .installer-map-filter:hover, .panel .phase-menu button:hover,
.panel .steps button:hover, .customer-section-nav button:hover { background: #f5f8fb; color: #14394b; }
.panel .pipeline-tabs button[aria-pressed=true], .statistics-tabs button[aria-pressed=true],
.installer-map-filters .installer-map-filter[aria-pressed=true], .panel .phase-menu button.selected,
.panel .steps button.selected, .project-table .inline-workspace .steps button.selected,
.customer-section-nav button[aria-current=page], .customer-section-nav button.selected {
  background: var(--nav-soft);
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
  font-weight: 400;
  box-shadow: none;
}
.panel .pipeline-tabs button:focus-visible, .statistics-tabs button:focus-visible,
.installer-map-filter:focus-visible, .phase-menu button:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: -4px;
}
.page-content > .pipeline-overview { margin: 0 0 24px; }
.page-content > .pipeline-overview > h2 { font-size: 20px; margin: 0 0 12px; }

/* Staff work tabs only. The customer's five progress markers are status, not tabs. */
.project-work-menu { gap: 0; }
.project-work-heading { margin-bottom: 8px; }
.project-work-menu .project-work-help { margin-bottom: 16px; }
.project-work-menu .customer-phase-list.admin-work-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.project-work-menu .customer-phase-list.admin-work-phases > li,
.project-work-menu .customer-phase-list.admin-work-phases > li.is-current {
  flex: 0 0 auto;
  min-height: 44px;
  border: 0;
  border-radius: var(--control-radius);
  padding: 0;
  background: transparent;
  color: var(--nav-text);
  box-shadow: none;
}
.project-work-menu .customer-phase-list.admin-work-phases .phase-work-choice {
  padding: 10px 12px;
  margin: 0;
  min-height: 44px;
  width: auto;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--nav-text);
  flex-direction: row;
  gap: 8px;
}
.project-work-menu .phase-work-choice strong { font-size: 14px; font-weight: 400; }
.project-work-menu .phase-work-choice svg { width: 16px; height: 16px; flex: none; }
.project-work-menu .customer-phase-list.admin-work-phases .phase-work-choice:hover { background: #f5f8fb; color: #14394b; }
.project-work-menu .customer-phase-list.admin-work-phases .phase-work-choice[aria-current=page] {
  background: var(--nav-soft);
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
}
.project-work-menu .phase-work-choice:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: -4px; }
.project-work-tools { margin-top: 8px; }
.project-work-menu .project-work-current { background: transparent; color: var(--nav-accent); font-weight: 500; }

/* Navigation is light; saved choices and completion receipts keep check/text. */
.shared-test-role-menu button, .demo-role-menu button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  box-shadow: none;
  color: var(--nav-text);
  font-weight: 400;
}
.shared-test-role-menu button[aria-pressed=true], .demo-role-menu button[aria-pressed=true] {
  background: var(--nav-soft);
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
}
.dashboard-stage-item { border-width: 1px; }
.dashboard-stage-item:has(> .dashboard-stage-card[aria-pressed=true]) { border: 1px solid var(--nav-accent); background: var(--nav-soft); box-shadow: none; }
.project-map .map-legend button.phase-label { min-height: 44px; }
.project-map .map-legend button[aria-pressed=true] { color: var(--nav-accent); background: var(--nav-soft); border-color: var(--nav-accent); }
.mail-folders .selected, .mail-row.selected { background: var(--nav-soft); color: var(--nav-accent); }
body .mail-folders button[aria-pressed=true] {
  background: var(--nav-soft);
  color: var(--nav-accent);
  border-color: var(--nav-accent);
}
.panel .mail-row[aria-current=true] { background: var(--nav-soft); box-shadow: inset 2px 0 var(--nav-accent); }

/* Personal portal uses the same theme, with a dark brand-header variant. */
.secure-portal { font-size: 14px; }
.secure-portal header nav { gap: 0; }
.secure-portal header nav button {
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: #dce7ef;
  font-size: 14px;
  font-weight: 400;
}
.secure-portal header nav button:hover:not(:disabled) { filter: none; background: transparent; color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.secure-portal header nav button[aria-current=page],
.secure-portal header nav button[aria-current=page]:hover { background: transparent; color: #fff; border-bottom-color: var(--action-on-dark); border-radius: 0; }
.secure-portal header nav button:focus-visible { outline-color: var(--action-on-dark); outline-offset: -4px; }
.secure-portal .card { border-color: var(--border); }
.secure-portal h2 { font-size: 18px; }

/* D273: component rules consume the same control tokens, including nested tables.
 * Keep this list explicit: cards and saved error/disabled states are not buttons.
 */
body .primary,
.project-table .inline-workspace .primary,
.panel .sms-actions .primary,
.customer-reply .primary,
.stage-next-button,
.pre-notice-portal a,
.customer-call,
.secure-portal button:not(.secondary):not(.job):not(nav button) {
  background: var(--action-accent);
  border-color: var(--action-accent);
  color: #fff;
  box-shadow: none;
}
body .primary:hover:enabled,
.project-table .inline-workspace .primary:hover:enabled,
.panel .sms-actions .primary:hover:enabled,
.customer-reply .primary:hover:enabled,
.stage-next-button:hover:enabled,
.pre-notice-portal a:hover,
.customer-call:hover,
.secure-portal button:not(.secondary):not(.job):not(nav button):hover:enabled {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: #fff;
  filter: none;
}
.project-work-menu .project-work-tools > .project-tool-tab,
.mobile-header button,
.project-overview-panel .project-table .overview-next-action,
.project-overview-panel .project-step-progress,
.project-table .inline-workspace :is(.primary, .secondary),
.installer-job-list .installer-job-row,
.installer-schedule-day .installer-schedule-job,
.installer-table select,
.ue-assignment-card .ue-assignment-form select,
.ue-assignment-card .ue-assignment-form input,
.ue-assignment-card .ue-assignment-form button,
.pre-notice-portal .notice-choice,
.registry-work-choices label.registry-work-option,
.registry-company-select,
.installer-job-picker .installer-job-option,
.installer-job-option,
.map-zoom-controls button,
.registry-map .map-zoom-controls button,
.project-table .inline-workspace .map-zoom-controls button,
.customer-photo-button,
.evidence-upload-control,
.pre-notice-portal a,
.customer-call,
.master-search input,
.customer-portal textarea[name=customerNote],
.sidebar-bottom .nav-group > summary,
.goal-dropdown > summary,
.registry-multiselect > summary,
.goal-options > button,
.map-project-option,
.dashboard-stages .dashboard-all,
.completion-notice-choices > button,
.project-map-controls button,
.map-controls button,
.secure-portal button:not(.job) {
  border-radius: var(--control-radius);
}
.project-work-menu .project-work-tools > .project-tool-tab.selected {
  background: var(--action-soft);
  border-bottom-color: var(--action-accent);
  color: var(--action-accent);
}
.project-work-menu .project-work-tools > .project-tool-tab:focus-visible { outline-color: var(--action-accent); }
.selected-installer-label { background: var(--action-accent); }
.secure-portal .job.card { border-radius: var(--radius); }

.delivery-confirmation.is-problem, .report-delivery-status.is-problem {
  color: #9f2925; background: #fff1f0; border: 1px solid #e4aaa6;
}
.delivery-confirmation.is-partial, .installer-finish.is-review, .report-delivery-status.is-waiting {
  color: #78510d; background: #fff8e8; border: 1px solid #e7ca8b;
}
.report-delivery-status.is-success {
  color: #125f3f; background: var(--action-soft); border: 1px solid #a9d5be;
}
.report-delivery-status { padding: 12px 16px; border-radius: var(--radius); }
.report-delivery-status p { margin: 6px 0 0; }

/* D277: compact final review; each group owns its spacing. */
.panel.final-control > :is(.completion-notice, .final-review, .final-documents, .installer-completion-review, .completion-report) {
  margin: var(--space-4) 0 0;
  padding: 0;
}
.final-control :is(.completion-notice, .final-review, .final-documents) { gap: var(--space-2); }
.final-control :is(.final-review, .final-documents) > :is(h3, p) { margin: 0; }
.final-control :is(.final-review, .installer-completion-review) > :empty,
.final-control > .installer-completion-review:empty { display: none; }
.final-control .final-review-row { padding-block: var(--space-2); gap: var(--space-3); }
.final-control .final-review-row > div:first-child { gap: var(--space-1); }
.final-control .installer-completion-review { display: grid; gap: var(--space-3); }
.final-control .installer-completion-card {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-3) var(--space-4);
}
.final-control .installer-completion-card > :is(h3, p) { margin: 0; }
.final-control .installer-completion-card,
.final-control .completion-report .report-delivery-status {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.phase-confirm-dialog label { display: grid; gap: var(--space-2); }
.phase-confirm-dialog select { width: 100%; min-height: 44px; }
.final-approval-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.final-approval-dialog > form { display: grid; gap: var(--space-3); min-width: 0; }
.final-approval-dialog form > :is(h2, h3, p, ul, label, .phase-confirm-actions) { margin: 0; }
.final-approval-dialog h3 { font-size: 16px; }
.final-approval-dialog ul { padding-left: 20px; }
.final-approval-dialog li + li { margin-top: 8px; }
.final-approval-dialog input { width: 100%; min-width: 0; font-size: 16px; }
.final-approval-dialog .phase-confirm-actions { flex-wrap: wrap; padding-top: var(--space-1); }
.final-control details.report-disclosure,
.final-control details.report-disclosure[open] { margin: 0; padding: 0; }
.final-control .report-disclosure > summary,
.final-control .report-disclosure[open] > summary {
  min-height: 56px;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-4);
}
.final-control .report-disclosure > .final-document-list {
  padding: 0 var(--space-4) var(--space-4);
  gap: 0;
}
.final-control .report-disclosure > .panel {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  border: 0;
}
.final-control .final-document-row { gap: var(--space-3); padding-block: var(--space-3); }
.final-control .final-document-row:last-child { border-bottom: 0; padding-bottom: 0; }
.panel.final-control > .completion-report {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}
.panel.final-control > .completion-report > * { min-width: 0; margin: 0; }
.panel.final-control > .completion-report > :is(h2, p) { margin: 0; }
.panel.final-control > .completion-report > button {
  width: fit-content;
  justify-self: start;
  margin: 0;
}
.final-control .completion-report .report-delivery-status { padding: var(--space-2) var(--space-3); }
.final-control .completion-report > .muted { overflow-wrap: anywhere; }
.panel.final-control > .project-next-action { margin-block: var(--space-4) 0; }
.panel.final-control > .project-next-action:first-child { margin-block: 0 var(--space-4); }

/* Compact actions; navigation and deliberately full-width selection cards keep their layout. */
:is(body, .project-table .inline-workspace, .project-table .inline-workspace form, .panel .sms-actions, .customer-reply)
  :is(button.primary, button.secondary, a.primary, a.secondary, .secure-portal button):not(:where(
    nav button, .phase-work-choice, .project-tool-tab, .steps button, .phase-menu button,
    .pipeline-tabs button, .statistics-tabs button, .view-tabs button, .job,
    .shared-test-role-menu button, .demo-role-menu button, .project-open-control,
    .overview-next-action, .customer-section-nav button, .installer-map-filter, .goal-options > button,
    .map-zoom-controls button
  )) {
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--button-radius);
  font-size: 14px;
  line-height: 20px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
/* Card action tracks and paired check controls own their dimensions. */
:is(body, .project-table .inline-workspace, .project-table .inline-workspace form, .panel .sms-actions, .customer-reply)
  :is(button.primary, button.secondary, a.primary, a.secondary, .secure-portal button):not(:where(
    nav button, .phase-work-choice, .project-tool-tab, .steps button, .phase-menu button,
    .pipeline-tabs button, .statistics-tabs button, .view-tabs button, .job,
    .shared-test-role-menu button, .demo-role-menu button, .project-open-control,
    .overview-next-action, .customer-section-nav button, .installer-map-filter, .goal-options > button,
    .portal-card-actions > button, .measurement-actions > button, .map-zoom-controls button
  )) { width: fit-content; justify-self: start; }
.customer-card-toolbar, .phase-confirm-actions, .installer-finish-actions { gap: var(--space-2); }
.customer-card-toolbar > button, .phase-confirm-actions > button { margin: 0; }
/* Keep the shared card action row, while letting each action fit its text. */
body .portal-card .portal-card-actions > button,
.portal-card-actions > .selected-installer-label {
  width: fit-content;
  justify-self: start;
}
/* These legacy component selectors otherwise retain oversized action dimensions. */
body .pre-notice-portal form.notice-reference-row > button.primary,
.inline-workspace > .admin-card-header > .close-customer-card,
body .customer-workspace .delivery-choices > button,
body .evidence-layout .portal-card-actions > .evidence-upload-control {
  min-width: 0;
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--button-radius);
}
body .customer-workspace .delivery-choices { display: flex; flex-wrap: wrap; }
.secure-portal .actions > button { flex: 0 1 auto; }
@media (prefers-reduced-motion: reduce) {
  :is(button.primary, button.secondary, a.primary, a.secondary, .secure-portal button) { transition: none; }
}
/* Short choices use their longest option, not the full form or table width. */
:is(.panel, .project-table .inline-workspace, .secure-portal, .phase-confirm-dialog)
  select:not(:where([multiple], [size], .installer-table select, .material-order-reuse select)) {
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  justify-self: start;
  align-self: start;
  flex: 0 1 auto;
}
.pre-notice-portal a, .customer-call {
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--button-radius);
}
.pre-notice-portal .notice-choice,
.inline-workspace > .pre-notice-portal .notice-choice { border-radius: var(--button-radius); }

/* D282: semantic groups own the shared 8 / 12 / 16 / 24px spacing rhythm. */
.panel > h2 + .muted { margin: var(--space-2) 0 var(--space-4); }
.panel > h2 + form { margin-top: var(--space-4); }
.panel > .footnote { margin-block: var(--space-2) var(--space-4); }
.panel > :is(p, .footnote, .muted):last-child { margin-bottom: 0; }
.panel .sms-info-groups { gap: var(--space-4); }
.panel .sms-info-group { padding-top: var(--space-4); }
.panel .sms-info-group > h3 { margin: 0 0 var(--space-2); }
.panel .sms-info-group > :is(.muted, .footnote) { margin: 0 0 var(--space-4); }

.panel :is(.sms-form, .customer-form, .ue-form, .booking-proposal,
  .booking-notice-form, .schedule-editor-form, .delivery-part-form,
  .installer-registry-form, .installer-profile-form),
.secure-portal form { gap: var(--space-3); }
.panel :is(.customer-form, .ue-form) { margin-top: var(--space-4); }
.panel :is(.sms-form, .customer-form, .ue-form, .booking-proposal,
  .booking-notice-form, .schedule-editor-form, .delivery-part-form,
  .installer-registry-form, .installer-profile-form) > :is(button, p, label, fieldset),
.secure-portal form > :is(button, p, label, fieldset) { margin: 0; }
.panel :is(.sms-form, .customer-form, .ue-form, .sms-field-group,
  .booking-proposal, .booking-notice-form, .schedule-editor-form,
  .delivery-part-form, .ue-assignment-form, .installer-date-form,
  .installer-registry-form, .installer-profile-form) label,
.secure-portal form label { gap: var(--field-gap); }
.panel .sms-field-group { gap: var(--space-3); }
.panel .sms-field-group > :is(p, button) { margin: 0; }
.panel .sms-field-group > :is(.muted, .footnote):empty { display: none; }
.panel :is(.sms-form, .customer-form, .ue-form, .installer-registry-form) fieldset {
  padding: var(--space-4);
}
.panel .ue-form fieldset, .installer-profile-form fieldset { gap: var(--space-3); }
.panel :is(.sms-form, .customer-form, .ue-form) :is(.muted, .footnote, .save-receipt) {
  line-height: 1.5;
}
.panel .sms-actions, .panel .booking-notice-actions,
.panel .installer-directory-actions, .panel .customer-card-toolbar,
.panel .completion-notice-choices, .panel .delivery-choices,
.map-zoom-controls, .sales-map-canvas .map-zoom-controls { gap: var(--space-2); }
.panel :is(.sms-actions, .booking-notice-actions, .installer-directory-actions,
  .customer-card-toolbar, .completion-notice-choices, .delivery-choices) > button {
  margin: 0;
}
.panel .sms-actions { margin-block: var(--space-3); }
.material-owner-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.material-owner-actions > button { margin: 0; }
.panel .list-item > form { margin: 0; }
.panel .list-item > :is(p, .statusline, .answer-pictures, .panel, details) { margin-inline: 0; }
.panel .sms-actions + :is(.muted, .footnote) { margin-top: var(--space-2); }
.map-zoom-controls button, .registry-map .map-zoom-controls button,
.project-table .inline-workspace .map-zoom-controls button,
.customer-photo-button, .evidence-upload-control {
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  gap: var(--space-2);
  border-radius: var(--button-radius);
  font-size: 14px;
  line-height: 20px;
  white-space: normal;
}

/* Material: a single table-to-save gap, then a close but separate receipt. */
.material-line-editor { display: grid; gap: var(--space-3); min-width: 0; }
.material-line-editor > .material-table-scroll { margin: 0; }
.material-line-editor .material-product-table input { min-height: var(--touch-target); padding: 10px 12px; }
.material-save-actions { display: grid; justify-items: start; gap: var(--space-2); min-width: 0; }
.panel .material-save-actions > :is(button, p) { margin: 0; }
.panel .material-save-actions > button { width: fit-content; max-width: 100%; justify-self: start; }
.material-save-actions > .save-receipt { line-height: 1.5; }
.material-save-actions > .save-receipt:empty { display: none; }
.panel .material-order-reuse { display: grid; gap: var(--space-2); min-width: 0; }
.panel .material-order-reuse > :is(label, p, button, .footnote, .save-receipt) { margin: 0; }
.material-order-reuse > button { justify-self: start; max-width: 100%; }
.material-order-reuse > .save-receipt:empty { display: none; }
.material-order-reuse > label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: var(--space-2); }
.panel.compact-material > .material-line-editor + .footnote { margin: var(--space-2) 0 var(--space-4); }
.panel.compact-material > details.list-item { margin: 0 0 var(--space-4); padding: 0 var(--disclosure-inset); }
.panel.compact-material > details.list-item[open] { padding-bottom: var(--space-4); }
.panel.compact-material > .material-table-scroll { margin: var(--space-4) 0; }
.panel .ue-assignment-card > h2 { margin: 0 0 var(--space-2); }
.panel .ue-assignment-card > p.muted { margin: 0 0 var(--space-3); }
.panel .ue-assignment-form { gap: var(--space-3); }
.panel .booking-notice-card { padding: var(--space-4); }
.panel .booking-notice-card h3 { margin: var(--space-2) 0; }
.panel .booking-notice-contacts { gap: var(--space-3) var(--space-4); }
.panel .booking-notice-contacts > div { gap: var(--space-2); }
.panel .booking-phone-agreement { gap: var(--space-2); }
.panel .booking-notice-form > .footnote { margin: 0; }
.inline-workspace > .pre-notice-portal .notice-choice-row { gap: var(--space-2); }
.inline-workspace > .pre-notice-portal .notice-reference-row { gap: var(--space-3); margin-block: var(--space-3); }

/* Customer fieldsets keep the guide; only fields and captions supply rhythm. */
.customer-portal .customer-form > .sms-field-group { gap: var(--space-3); }
.customer-portal .customer-form > .sms-field-group > label { gap: var(--field-gap); }
.customer-portal .customer-form > .sms-field-group > .muted { margin: 0; }
.customer-photo-tile .portal-card-body > p,
.customer-photo-tile > p { margin: 0; }
.customer-photo-tile .portal-card-body > p.completion,
.customer-photo-tile > p.completion { padding: var(--space-2); }
.customer-photo-tile .customer-photo-preview { margin: 0; padding: var(--space-2); }
.customer-photo-preview > button { margin: var(--space-2) 0 0; }
.customer-photo-actions { padding-top: 0; gap: var(--space-2); }
.portal-card-body > :is(h3, h4, p, img) { margin: 0; }
.ue-recommendation .portal-card-body { gap: var(--space-2); }

/* Installer evidence and finish forms share the same control groups. */
.evidence-layout { gap: var(--space-4); }
.evidence-layout .evidence-photo { padding: var(--space-3); gap: var(--space-2); }
.evidence-layout .evidence-upload-actions { gap: var(--space-2); margin: 0; }
.evidence-layout .portal-card > .evidence-upload-actions.portal-card-actions {
  grid-auto-flow: row;
  grid-auto-rows: minmax(var(--button-min-height), 1fr);
}
.evidence-layout .portal-card-actions > .evidence-upload-control {
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--button-radius);
}
body .evidence-measurement .measurement-actions {
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: var(--space-2);
  width: fit-content;
  align-items: stretch;
}
body .evidence-measurement .measurement-actions > button {
  width: auto;
  height: 100%;
  justify-self: stretch;
  margin: 0;
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--button-radius);
  font-size: 14px;
  line-height: 20px;
}
body .evidence-check-block .evidence-check.evidence-measurement {
  padding-block: var(--space-2);
  gap: var(--space-2) var(--space-3);
}
.installer-customer-checklist .evidence-product { margin-bottom: 0; padding-bottom: var(--space-4); }
.installer-customer-checklist .evidence-product + .evidence-product { padding-top: var(--space-4); }
.installer-customer-checklist .evidence-layout { gap: var(--space-4); }
.installer-customer-checklist .evidence-layout h4 { margin-bottom: var(--space-2); }
.installer-customer-checklist .evidence-check-block > .footnote { margin: var(--space-2) 0; }
.installer-finish > form { gap: var(--space-3); }
.installer-finish form > fieldset { padding: var(--space-4); }
.installer-finish form > label:not(.installer-final-confirm) { display: grid; gap: var(--field-gap); }
.installer-finish form textarea { margin: 0; }
.installer-finish .installer-deviation-option { gap: var(--space-2); margin: 0 var(--space-2) 0 0; }
.installer-finish .installer-extra-work { gap: var(--space-3); }
.installer-finish .installer-extra-work > label:last-child { gap: var(--field-gap); }

/* Register and personal portal follow the same form/action spacing. */
.installer-registry .registry-header { gap: var(--space-4); margin-bottom: var(--space-6); }
.installer-registry .registry-header .muted { margin-top: var(--space-2); }
.installer-registry .registry-layout { gap: var(--space-4); }
.installer-registry-form > .muted { margin: 0; }
.installer-registry-form .installer-region-fields { gap: var(--space-3); }
.installer-registry-form .registry-services :is(h4, .muted) { margin: 0 0 var(--space-2); }
.installer-registry-form .registry-extra-form .installer-contact-fields { margin-block: var(--space-4); }
.installer-registry-form .installer-directory-actions { padding-top: 0; }
.registry-chosen-regions { margin-top: var(--space-2); }
.registry-contact { gap: var(--space-2) var(--space-3); }
.registry-tags { gap: var(--space-2); }
.registry-map-panel > .muted { margin: var(--space-2) 0 var(--space-4); }
.registry-map-selection p { margin-block: var(--space-2); }
.secure-portal .actions { gap: var(--space-2); }
.secure-portal .actions > :is(button, a) { margin: 0; }
.secure-portal .card { margin-block: var(--space-6); }
.secure-portal .card > h2 { margin: 0 0 var(--space-2); }
.secure-portal .card > p { margin: var(--space-2) 0 var(--space-4); }
.secure-portal .card > :is(p, .actions):last-child { margin-bottom: 0; }
.secure-portal .check { gap: var(--space-2); }
.secure-portal .grid > .card { margin: 0; }
.secure-portal .card form > :is(.error, .muted):empty { display: none; }

/* D275: one clear staff work menu, visible before opening the work area. */
.project-table > tbody > .project-summary-row > td {
  padding: 0 0 16px;
  border: 0;
}
.project-shared-overview {
  container-type: inline-size;
  min-width: 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scroll-margin-top: 80px;
}
.project-shared-overview:focus-visible { outline: 2px solid var(--action-accent); outline-offset: 2px; }
.project-shared-overview > .project-work-menu {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.project-shared-overview .project-work-heading { margin: 0 0 12px; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
.project-shared-overview .project-work-heading h3 { font-size: 16px; font-weight: 600; }
.project-shared-overview .project-work-phase { font-size: 13px; color: var(--nav-text); }
.project-shared-overview .project-work-current { margin-left: auto; font-size: 13px; font-weight: 600; }
.project-shared-overview .project-work-menu .customer-phase-list.admin-work-phases {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  border: 0;
}
.project-shared-overview .project-work-menu .admin-work-phases > li,
.project-shared-overview .project-work-menu .admin-work-phases > li.is-current {
  min-width: 0;
  min-height: 48px;
  border: 0;
}
.project-shared-overview .project-work-menu .admin-work-phases .phase-work-choice {
  width: 100%;
  min-height: 48px;
  height: 100%;
  padding: 10px 12px;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: #f7f9fa;
  color: var(--navy);
}
.project-shared-overview .project-work-menu .phase-work-choice strong { font-size: 14px; font-weight: 600; }
.project-shared-overview .project-work-menu .phase-work-choice svg { width: 18px; height: 18px; }
.project-shared-overview .project-work-menu .admin-work-phases .phase-work-choice:hover {
  border-color: var(--action-accent);
  background: var(--action-soft);
}
.project-shared-overview .project-work-menu .admin-work-phases .phase-work-choice[aria-current=page] {
  border-color: var(--action-accent);
  background: var(--action-soft);
  color: var(--action-accent);
  box-shadow: inset 0 -2px 0 var(--action-accent);
}
.project-shared-overview .project-work-tools { margin-top: 12px; }
.project-work-menu .admin-work-phases > li.has-customer-phase { position: relative; }
.project-work-menu .customer-phase-list.admin-work-phases .customer-phase-marker {
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 0;
  position: absolute;
  z-index: 1;
  top: -9px;
  right: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--action-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  pointer-events: none;
  white-space: nowrap;
}
.project-work-menu .project-work-tools > .project-phase-move {
  margin: 0 0 0 auto;
  flex: 0 1 auto;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: #fff;
  color: var(--action-accent);
  font-size: 13px;
  line-height: 20px;
  max-width: 100%;
}
.map-open-card > .project-shared-overview { margin-bottom: 16px; }
@container (max-width: 640px) {
  .project-shared-overview .project-work-menu .customer-phase-list.admin-work-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-shared-overview .admin-work-phases > li:last-child { grid-column: 1 / -1; }
  .project-shared-overview .project-work-current { margin-left: 0; flex-basis: 100%; }
}
@container (max-width: 280px) {
  .project-shared-overview .project-work-menu .phase-work-choice svg { display: none; }
  .project-shared-overview .project-work-menu .admin-work-phases .phase-work-choice { padding-inline: 8px; }
}
@container (max-width: 840px) {
  .project-table > tbody > .project-summary-row,
  .project-table > tbody > .project-summary-row > td { display: block; width: 100%; min-width: 0; }
}

@media(max-width:767px) {
  .workspace-header .view-tabs button { padding: 10px 8px; font-size: 13px; gap: 6px; }
  .workspace-header .view-tabs button svg { width: 14px; height: 14px; }
  .workspace-header .notification-toggle { padding-inline: 8px; font-size: 12px; }
}
@media(max-width:600px) {
  .secure-portal input, .secure-portal select, .secure-portal textarea { font-size: 16px; }
  .panel input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .panel select, .panel textarea,
  .customer-portal textarea[name=customerNote],
  .ue-assignment-card .ue-assignment-form select { font-size: 16px; }
  .panel .pipeline-tabs button, .statistics-tabs button,
  .installer-map-filters .installer-map-filter, .panel .phase-menu button,
  .project-work-menu .customer-phase-list.admin-work-phases .phase-work-choice { padding: 10px 8px; font-size: 13px; }
  .project-work-menu .phase-work-choice strong { font-size: 13px; }
  .installer-map-filters { display: flex; }
  .secure-portal header nav { display: flex; flex-wrap: wrap; }
  .secure-portal header nav button { width: auto; flex: 0 0 auto; }
}
@media(max-width:400px) {
  .workspace-header { grid-template-columns: minmax(0,1fr); }
  .workspace-header .view-tabs { width: 100%; }
  .workspace-header .notification-toggle { grid-row: 3; margin-left: 0; justify-self: start; }
}

/* Facts share one text edge and value column, whether an answer has a status or not. */
.sms-info-group, .answer-pictures, .project-facts {
  container-name: project-facts;
  container-type: inline-size;
}
.sms-info-group .statusline,
.project-facts > .statusline,
:is(.sms-info-group, .answer-pictures) .answer-check-row,
.offer-price-grid > div,
.offer-detail-grid > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: start;
  gap: var(--space-1) var(--space-4);
  min-width: 0;
  padding-block: var(--space-3);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.sms-info-group .statusline > span,
.project-facts > .statusline > span,
.answer-check-row > .answer-label,
.offer-price-grid dt,
.offer-detail-grid dt {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}
.sms-info-group .statusline > strong,
.project-facts > .statusline > strong,
.answer-check-row > strong,
.offer-price-grid dd,
.offer-detail-grid dd {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}
.answer-check-row > .answer-status-icon {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.offer-price-grid, .offer-detail-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.panel .offer-price-summary > details.offer-price-details {
  margin: var(--space-4) 0 0;
  padding: 0;
}
.panel .offer-price-summary .offer-price-details > summary {
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  margin: 0;
}
.panel .offer-price-details > :is(section, p) {
  padding: 0 var(--space-4) var(--space-4);
  margin: 0;
}
.offer-price-details > section { container: project-facts / inline-size; }
.offer-price-details > section > :is(h4, dl) { margin: 0; }
.offer-price-grid .offer-price-total {
  padding: var(--space-3) 0;
  border: 0;
  border-block: 1px solid #bedccc;
  border-radius: 0;
}
@container project-facts (min-width: 560px) {
  .sms-info-group .statusline,
  .project-facts > .statusline,
  :is(.sms-info-group, .answer-pictures) .answer-check-row,
  .offer-price-grid > div,
  .offer-detail-grid > div {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 20px;
    column-gap: var(--space-4);
  }
  .sms-info-group .statusline > strong,
  .project-facts > .statusline > strong,
  .answer-check-row > strong,
  .offer-price-grid dd,
  .offer-detail-grid dd {
    grid-column: 2;
    grid-row: 1;
  }
  .answer-check-row > .answer-status-icon { grid-column: 3; }
}
/* Calendar headings and their data use the same cell inset. */
.schedule-table thead th { padding-inline: 12px; }

/* Saved is a persisted state; a grey save action remains available for changes. */
body :is(.panel, .inline-workspace) button.save-action[data-saved=false] {
  background: #e8edf1;
  border-color: #b9c7d0;
  color: #14394b;
  box-shadow: none;
}
body :is(.panel, .inline-workspace) button.save-action[data-saved=false]:hover:enabled {
  background: #dce4ea;
  border-color: #8da4b2;
}
body :is(.panel, .inline-workspace) button.save-action[data-saved=true] {
  background: var(--action-accent);
  border-color: var(--action-accent);
  color: #fff;
}
body :is(.panel, .inline-workspace) button.save-action[data-saved=true]:hover:enabled { background: var(--action-hover); }
#notice.notice-saved {
  background: #edf7f1;
  color: #125f3f;
  border: 1px solid #82bc9c;
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: 0 6px 24px #14394b24;
  animation: saved-notice-in 180ms ease-out both, saved-notice-out 200ms ease-in 3800ms forwards;
}
.notice-title { display: block; margin-bottom: var(--space-1); font-size: 16px; }
.notice-saved .notice-message { display: block; font-size: 14px; line-height: 1.5; }
@keyframes saved-notice-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes saved-notice-out { to { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { #notice.notice-saved { animation: none; } }
.inline-workspace > .customer-delivery-receipt {
  width: fit-content;
  max-width: 100%;
  padding: var(--space-4);
  background: #edf7f1;
  border: 1px solid #82bc9c;
  color: #125f3f;
}
.customer-delivery-receipt h2 { font-size: 16px; }
.customer-delivery-receipt p { margin: var(--space-2) 0; font-size: 14px; }
.customer-delivery-receipt small { display: block; color: #39644d; font-size: 12px; }

/* Keep supplier/order entry reachable without horizontal scrolling in cards. */
.material-line-editor { container-type: inline-size; }
/* One selection component: list rows are choices, not compact action buttons. */
body :is(.goal-dropdown, .registry-multiselect) > summary,
body select:not([multiple]):not([size]) {
  box-sizing: border-box;
  min-height: 44px !important;
  height: auto;
  padding: 10px 36px 10px 12px !important;
  border: 1px solid #c5d6de;
  border-radius: var(--control-radius) !important;
  box-shadow: none;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px;
  text-align: left;
  color: #14394b;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23566b7a' stroke-width='1.5' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
}
body select:not([multiple]):not([size]) { appearance: none; }
body :is(.goal-dropdown, .registry-multiselect) > summary::after { content: none; }
body :is(.goal-options, .registry-region-options) {
  top: calc(100% + 8px);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px #14394b14;
  max-height: min(352px, 55dvh);
  overflow-y: auto;
}
body .goal-options > button {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px 10px 32px;
  margin: 0 !important;
  border: 0;
  border-radius: var(--control-radius);
  background: #fff;
  color: #14394b;
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  white-space: normal;
}
body .goal-options > button.selected,
body .goal-options > button[aria-selected=true],
body .registry-region-options label:has(input:checked) { background: var(--action-soft); color: var(--action-accent); outline: none; }
body .goal-options > button.selected::before { left: 10px; top: 50%; transform: translateY(-50%); }
body .goal-options > button:hover, body .registry-region-options label:hover { background: #f3f7f8; }
body .goal-options > button:focus-visible, body .registry-region-options label:has(input:focus-visible) { outline: 2px solid var(--action-accent); outline-offset: -2px; }
body .registry-region-options label.checkbox { min-height: 44px; padding: 10px 12px; gap: 8px; border-radius: var(--control-radius); font-size: 14px; line-height: 24px; }
body .map-zoom-controls button,
body .registry-map .map-zoom-controls button,
body .project-table .inline-workspace .map-zoom-controls button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  text-align: center;
  line-height: 1;
}
@media (pointer: coarse) {
  body select:not([multiple]):not([size]), body :is(.goal-dropdown, .registry-multiselect) > summary { font-size: 16px !important; }
}
@container (max-width: 650px) {
  .material-line-editor .material-table-scroll { overflow: visible; }
  .material-line-editor .material-product-table { display: block; width: 100%; min-width: 0; }
  .material-product-table caption, .material-product-table tbody { display: block; width: 100%; }
  .material-product-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .material-product-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line, #d6e2e8); }
  body .material-line-editor .material-product-table td { display: grid; gap: 4px; min-width: 0; padding: 0 !important; border: 0; text-align: left; overflow-wrap: anywhere; }
  .material-product-table td::before { content: attr(data-label); font-size: 12px; color: var(--muted, #597285); }
  .material-product-table input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
}

/* Installer actions follow their labels; full job rows and navigation stay intact. */
body.installer-portal :is(.installer-workspace, .installer-settings, .installer-notifications)
  button:is(.primary, .secondary):not(:where(
    nav button, .installer-job-row, .installer-schedule-job, .installer-job-option,
    .installer-map-filter, .map-zoom-controls button, .measurement-actions > button
  )) {
  flex: 0 1 auto;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--button-radius);
  font-size: 14px;
  line-height: 20px;
  white-space: normal;
  justify-self: start;
}
.installer-date-queue { margin-block: var(--space-4); padding: var(--space-4); }
.installer-date-queue > h3 { margin: 0 0 var(--space-3); }
.installer-date-queue-item { padding-block: var(--space-3); }
.installer-date-queue-item:last-child { padding-bottom: 0; }
.installer-date-queue-item > p { margin-block: var(--space-2); }
.installer-date-queue-actions, .installer-finish-actions,
.installer-notification-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.panel :is(.installer-date-queue-actions, .installer-finish-actions,
  .installer-notification-actions) > button { margin: 0; flex: 0 1 auto; }
body.installer-portal .installer-countdown {
  display: inline-flex;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  align-self: flex-start;
  gap: var(--space-1);
  padding: var(--space-2) var(--disclosure-inset);
  border-radius: 12px;
}
/* Keep the map's compact layout from removing the countdown's side inset. */
body.installer-portal .installer-booking-response > .installer-countdown {
  padding: var(--space-2) var(--disclosure-inset);
}
body.installer-portal .installer-countdown[hidden] { display: none; }
body.installer-portal .installer-map-job.is-current > .installer-map-editor {
  padding: 0 var(--disclosure-inset) var(--disclosure-inset);
}
.installer-map-editor > * { min-width: 0; }
.installer-map-editor .installer-active-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
}
.installer-active-contact > :is(a, small) { min-width: 0; flex: 0 1 auto; }
.installer-active-contact > a { width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.installer-customer-card .installer-map-editor .installer-date-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--space-3);
  width: 100%;
  max-width: 420px;
  margin: var(--space-3) 0 0;
}
.installer-map-editor .installer-date-form > label { gap: var(--field-gap); }
.installer-customer-card .installer-map-editor .installer-date-form > button {
  align-self: end;
  justify-self: start;
  margin: 0;
}
.installer-map-editor .installer-date-form > .installer-date-help { margin: 0; }
.installer-map-editor .installer-date-form input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-inline-size: 0;
  height: 44px;
  margin: 0;
}
@container (min-width: 360px) {
  .installer-customer-card .installer-map-editor .installer-date-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@container (max-width: 359px) {
  .installer-map-editor .installer-active-contact { flex-direction: column; align-items: flex-start; }
}
.installer-settings .installer-calendar-choices > button { flex: 0 1 auto; }
.installer-settings .installer-calendar-status { width: fit-content; max-width: 100%; }
.installer-notifications .installer-notification-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  margin-top: var(--space-3);
  min-width: 0;
}
.installer-notification-card > :is(h3, strong, p, small) { margin: 0; overflow-wrap: anywhere; }
.installer-notification-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.installer-notification-card > .installer-notification-actions { margin-top: var(--space-1); }
.notification-settings-stack { display: grid; gap: var(--section-gap); }
.notification-settings-stack > .panel { margin: 0; min-width: 0; }
.solar-preparation-documents { display: grid; gap: var(--space-4); margin-block: var(--section-gap); min-width: 0; }
.solar-preparation-documents > :is(h3,p) { margin: 0; }
.solar-preparation-document { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 0; }
.solar-preparation-document > p { margin: 0; overflow-wrap: anywhere; }
.solar-document-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.panel .solar-document-actions > :is(button,label) { margin: 0; max-width: 100%; }
.solar-document-actions .evidence-upload-control { position: relative; overflow: hidden; flex: 0 1 auto; white-space: normal; }
.solar-document-actions input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.solar-document-actions label:focus-within { outline: 2px solid var(--action-accent); outline-offset: 3px; }
.installer-disclosure-content > .solar-preparation-documents { margin: 0; }
.installer-disclosure-content .solar-preparation-document { padding: 16px 0; border-width: 0 0 1px; border-radius: 0; }

/* Installer calendar: month selection on wide cards, readable day groups on mobile. */
.installer-calendar.panel { container-type: inline-size; }
.installer-calendar :is(.installer-calendar-layout, .installer-month-grid,
  .installer-calendar-agenda, .installer-calendar-agenda-day) { min-width: 0; }
.installer-calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.installer-calendar-toolbar > h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.installer-calendar-toolbar > .installer-calendar-month-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--field-gap);
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.installer-calendar-month-field > input {
  box-sizing: border-box;
  width: 180px;
  min-width: 0;
  max-width: 100%;
  min-height: var(--touch-target);
  margin: 0;
}
.installer-calendar-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.panel .installer-calendar-controls > button { margin: 0; flex: 0 1 auto; }
.installer-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.installer-calendar :is(.installer-calendar-legend > span, .installer-calendar-status) {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--control-radius);
  padding: var(--space-1) var(--space-2);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.installer-calendar :is(.installer-calendar-legend, .installer-calendar-day-counts) > .is-confirmed,
.installer-calendar .installer-calendar-status.is-confirmed { color: #125f3f; background: #edf7f1; }
.installer-calendar :is(.installer-calendar-legend, .installer-calendar-day-counts) > :is(.is-pending, .is-counter),
.installer-calendar .installer-calendar-status:is(.is-pending, .is-counter) { color: #79500c; background: #fff4dc; }
.installer-calendar :is(.installer-calendar-legend, .installer-calendar-day-counts) > .is-service,
.installer-calendar .installer-calendar-status.is-service { color: #294f65; background: #edf3f7; }
.installer-calendar-layout { display: grid; gap: var(--space-4); align-items: start; }
.installer-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.installer-weekday { padding: 0 var(--space-2); color: var(--muted, #597285); font-size: 12px; line-height: 1.5; }
body.installer-portal .installer-calendar .installer-month-grid .installer-calendar-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  min-height: 88px;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: #fff;
  color: #14394b;
  text-align: left;
  box-shadow: none;
}
.installer-calendar-day-number { font-size: 14px; font-weight: 600; line-height: 20px; }
.installer-calendar-day-counts { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; max-width: 100%; }
.installer-calendar-day-counts > span { min-width: 0; max-width: 100%; padding: 2px 4px; border-radius: 4px; font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
body.installer-portal .installer-calendar .installer-month-grid .installer-calendar-day.is-outside { color: #617282; background: #f6f8fa; }
body.installer-portal .installer-calendar .installer-month-grid .installer-calendar-day:hover { background: #f3f8f5; }
body.installer-portal .installer-calendar .installer-month-grid .installer-calendar-day[aria-pressed=true] {
  border-color: var(--action-accent);
  background: var(--action-soft);
  box-shadow: inset 0 0 0 1px var(--action-accent);
}
.installer-calendar-day:is(.is-today, [aria-current=date]) .installer-calendar-day-number {
  color: var(--action-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.installer-calendar .installer-calendar-agenda { display: grid; gap: var(--space-3); }
.installer-calendar .installer-calendar-agenda.is-month-agenda { display: none; }
.installer-calendar-agenda > h3, .installer-calendar-agenda-day > h4 { margin: 0; line-height: 1.5; }
.installer-calendar-agenda > h3 { font-size: 16px; }
.installer-calendar-agenda-day { display: grid; gap: var(--space-3); }
.installer-calendar-agenda-day + .installer-calendar-agenda-day { border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-1); }
.installer-calendar-agenda-day > h4 { font-size: 14px; }
body.installer-portal .installer-calendar .installer-calendar-job {
  display: grid;
  gap: var(--space-2);
  align-items: start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--touch-target);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: #fff;
  color: #14394b;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
}
.installer-calendar-job > * { min-width: 0; margin: 0; }
.installer-calendar-job > strong { font-size: 14px; font-weight: 600; }
.installer-calendar-job > span:not(.installer-calendar-status) { font-size: 14px; font-weight: 400; }
.installer-calendar-job > small { font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--muted, #597285); }
body.installer-portal .installer-calendar .installer-calendar-job:hover { background: #f3f8f5; border-color: #9ebcae; }
.installer-calendar :is(.installer-calendar-day, .installer-calendar-job):focus-visible { outline: 2px solid var(--action-accent); outline-offset: -3px; }
.installer-calendar-empty { margin: 0; padding: var(--space-4); background: #f6f8fa; border: 1px dashed var(--border); border-radius: var(--control-radius); color: var(--muted, #597285); line-height: 1.5; }
.panel.installer-calendar .installer-calendar-unscheduled { margin: var(--space-4) 0 0; padding: 0; }
.panel.installer-calendar .installer-calendar-unscheduled > summary { padding: var(--space-3) var(--space-4); }
.installer-calendar-unscheduled > :not(summary) { margin-inline: var(--space-4); }
.completion-report .report-connection-status { display:grid;justify-items:start;gap:var(--space-2); }
.completion-report .report-connection-status > :is(p,button) { margin:0; }
.admin-card-header { gap:var(--space-2); flex-wrap:wrap; }
.project-pause-button { border-color:#ae8040; color:#78551c; }
.manager-schedule-list { display:grid; gap:var(--space-4); margin-top:var(--space-4); }
.manager-schedule-job { min-width:0; padding:16px; border:1px solid var(--border,#dce5dd); border-radius:12px; background:#fff; display:grid; gap:12px; }
.manager-schedule-job > :is(p,h3,button),.manager-schedule-heading h3 { margin:0; }
.manager-schedule-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.manager-schedule-status { font-weight:600; color:#466352; }
.manager-schedule-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:12px 16px; margin:0; }
.manager-schedule-facts dt { color:#65796d; font-size:12px; }
.manager-schedule-facts dd { margin:4px 0 0; overflow-wrap:anywhere; }
.manager-schedule-job > button { justify-self:start; }
.manager-schedule { container-type:inline-size; }
.manager-calendar-toolbar { --button-min-height:44px; display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin:16px 0; }
.manager-calendar-toolbar > label { display:grid; gap:8px; margin:0; max-width:100%; }
.manager-schedule .manager-calendar-toolbar input { min-height:44px; max-width:100%; }
.manager-calendar-controls { display:flex; align-items:center; gap:8px; }
.manager-schedule .manager-calendar-controls > button { min-width:44px; min-height:44px; }
.manager-calendar-count { margin:16px 0 8px; }
.manager-calendar-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0 16px; font-size:12px; }
.manager-calendar-legend > span::before { content:''; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:var(--job-color); }
.manager-schedule .is-booked { --job-color:#287753; --job-tint:#eef8f2; }
.manager-schedule .is-proposed { --job-color:#a57519; --job-tint:#fff8e8; }
.manager-schedule .is-paused { --job-color:#a35943; --job-tint:#fff0eb; }
.manager-schedule .is-done { --job-color:#647d90; --job-tint:#f0f5f9; }
.manager-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; min-width:0; }
.manager-calendar-weekday { text-align:center; font-size:12px; padding:8px 0; color:#5e7167; }
.manager-schedule .manager-calendar-grid > .manager-calendar-day {
 display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; align-items:start; gap:6px; width:100%; min-width:0; min-height:80px; margin:0; padding:8px; border:1px solid #dae5dd; border-radius:10px; background:#fff; color:#183e31; text-align:left; white-space:normal;
}
.manager-schedule .manager-calendar-grid > .manager-calendar-day.is-outside { background:#f7f9f7; color:#6c7d71; }
.manager-schedule .manager-calendar-grid > .manager-calendar-day[aria-pressed=true] { border-color:#276c4d; box-shadow:inset 0 0 0 1px #276c4d; background:#f2faf5; }
.manager-calendar-day:focus-visible { outline:2px solid #276c4d; outline-offset:2px; }
.manager-calendar-number { font-size:14px; line-height:22px; justify-self:start; min-width:22px; text-align:center; }
.manager-calendar-day[aria-current=date] .manager-calendar-number { border-radius:50%; background:#276c4d; color:white; }
.manager-calendar-badge { font-size:11px; line-height:20px; min-width:20px; text-align:center; border-radius:4px; background:#e7efe9; }
.manager-calendar-badge:empty { display:none; }
.manager-calendar-previews { grid-column:1/-1; display:grid; gap:6px; min-width:0; }
.manager-calendar-preview { display:grid; gap:2px; border-left:3px solid var(--job-color); background:var(--job-tint); padding:5px; border-radius:4px; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.manager-calendar-preview strong { font-size:11px; font-weight:600; }
.manager-calendar-preview small { color:#485b51; font-size:10px; }
.manager-calendar-dots { display:none; }
.manager-calendar-agenda,.manager-calendar-unscheduled { margin-top:24px; }
.manager-calendar-agenda > h3,.manager-calendar-unscheduled > h3 { margin:0; font-size:16px; }
.manager-schedule > .manager-calendar-month-list { padding:0; margin:24px 0 0; border:1px solid #dae5dd; border-radius:12px; }
.manager-calendar-month-list > summary { padding:16px; min-height:44px; }
.manager-calendar-month-list > .manager-schedule-list { padding:0 16px 16px; margin:0; }
@container (max-width:620px) {
 .manager-calendar-grid { gap:3px; }
 .manager-schedule .manager-calendar-grid > .manager-calendar-day { min-height:72px; padding:4px 2px; grid-template-columns:minmax(0,1fr); justify-items:center; gap:2px; text-align:center; }
 .manager-calendar-number { justify-self:center; }
 .manager-calendar-previews { display:none; }
 .manager-calendar-dots { display:flex; gap:2px; flex-wrap:wrap; justify-content:center; }
 .manager-calendar-dots > span { width:5px; height:5px; border-radius:50%; background:var(--job-color); }
}
body.installer-portal .installer-calendar .installer-calendar-unscheduled > .installer-calendar-job { width: calc(100% - 2 * var(--space-4)); margin: 0 var(--space-4) var(--space-3); }
@container (min-width: 840px) {
  .installer-calendar-layout { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
}
@container (max-width: 600px) {
  .installer-calendar-layout { grid-template-columns: minmax(0, 1fr); }
  .installer-calendar .installer-month-grid,
  .installer-calendar .installer-calendar-agenda.is-day-agenda { display: none; }
  .installer-calendar .installer-calendar-agenda.is-month-agenda { display: grid; }
  .installer-calendar-toolbar { align-items: flex-start; flex-direction: column; }
}
/* Personal project email: one spacing rhythm, compact actions and safe text. */
/* Internal follow-up assignments share the portal's spacing and control rhythm. */
.assignments-workspace {display:grid;gap:16px;min-width:0;}
.page-content #content > .panel.assignments-workspace {width:100%;max-width:none;}
.assignments-workspace :is(h2,h3,p),.assignment-dialog :is(h2,p) {margin:0;}
.assignments-header,.assignment-heading,.assignment-actions {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.assignments-header > div {display:grid;gap:4px;}
.assignments-tools {display:flex;align-items:end;gap:12px;flex-wrap:wrap;}
.assignments-tools > label,.assignment-dialog label {display:grid;gap:8px;min-width:0;max-width:100%;}
.assignments-tools > label:first-child {flex:1 1 240px;}
.assignments-tools :is(input,select) {--button-min-height:44px;min-height:44px;max-width:100%;box-sizing:border-box;}
.assignments-list {display:grid;gap:12px;}
.assignment-card {display:grid;gap:8px;padding:16px;border:1px solid #d5e2d8;border-radius:12px;min-width:0;overflow-wrap:anywhere;}
.assignment-heading h3 {font-size:18px;line-height:1.4;}
.assignment-status {padding:4px 8px;border-radius:6px;font-size:12px;background:#f1f4f2;color:#344b40;white-space:nowrap;}
.assignment-status[data-status=in_progress] {background:#fff5de;color:#795500;}
.assignment-status[data-status=done] {background:#e7f5ec;color:#17613d;}
.assignment-meta,.assignment-due {font-size:14px;}
.assignment-description {white-space:pre-wrap;line-height:1.6;}
.assignment-due.is-overdue {color:#a13224;font-weight:600;}
.assignment-card .assignment-actions {margin-top:8px;justify-content:flex-start;gap:8px;}
.assignments-empty {padding:16px 0;}
.assignment-map-host:empty {display:none;}
.assignment-planning {display:grid;gap:16px;min-width:0;padding-block:16px;border-block:1px solid #d5e2d8;}
.assignment-map-canvas {min-width:0;}
.assignment-map-canvas svg.installation-map {width:100%;height:360px;max-height:none;background:#edf4f7;}
.assignment-map-canvas .material-map-marker text {font-size:18px;}
@media(max-width:640px){.assignment-map-canvas svg.installation-map{height:280px;}.assignment-map-canvas .material-map-marker text{font-size:24px;}.assignment-map-canvas .material-map-marker circle[fill=transparent]{r:38px;}}
.assignment-map-canvas > p {margin-bottom:12px;}
.assignment-nearby-list {display:grid;gap:12px;}
.assignment-nearby-job {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid #d5e2d8;border-radius:12px;flex-wrap:wrap;overflow-wrap:anywhere;}
.assignment-nearby-job > div {display:grid;gap:8px;min-width:0;flex:1 1 240px;}
.assignment-nearby-job span {font-size:14px;}
.assignment-nearby-job.is-selected {border-color:#266d4e;background:#f4faf6;}
.assignment-map-missing {padding:0 16px 16px;border:1px solid #d5e2d8;border-radius:12px;}
.assignment-map-missing > summary {padding:16px 0;}
.assignment-map-missing > button {display:block;margin-top:8px;}
.assignment-price {font-weight:600;}
dialog.assignment-dialog {--button-min-height:44px;width:min(600px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);box-sizing:border-box;padding:24px;border:1px solid #d5e2d8;border-radius:16px;color:#14394b;background:#fff;overflow:auto;}
.assignment-dialog::backdrop {background:rgb(15 40 30 / 35%);}
.assignment-dialog > p {margin-top:8px;}
.assignment-dialog form {display:grid;gap:12px;margin-top:16px;}
.assignment-dialog :is(input,select,textarea) {box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-inline-size:0;min-height:44px;margin:0;}
.assignment-dialog label[hidden] {display:none;}
.assignment-dialog textarea {resize:vertical;}
.assignment-dialog .assignment-actions {justify-content:flex-end;gap:8px;margin-top:4px;}
.assignment-dialog .assignment-error {color:#a13224;}
.assignment-dialog .assignment-error:empty {display:none;}
@media(max-width:640px){body dialog.assignment-dialog{padding:20px;}.assignment-dialog :is(input,select,textarea){font-size:16px;}.assignments-tools > label{width:100%;}.assignments-tools select{width:100%;}.assignment-dialog .assignment-actions{justify-content:flex-start;}}
.project-email-workspace {display:grid;gap:16px;min-width:0;margin-bottom:16px;}
.project-email-workspace :is(h3,p,small) {margin:0;}
.project-email-workspace :is(input,textarea) {width:100%;max-width:100%;box-sizing:border-box;}
.project-email-workspace :is(label,.mail-connect-form,.mail-compose) {display:grid;gap:8px;min-width:0;}
.project-email-workspace .mail-connect-form {max-width:480px;gap:12px;}
.project-email-workspace .mail-compose {padding:16px;border:1px solid var(--border,#d4e2e5);border-radius:12px;gap:12px;background:#f7faf9;}
.project-email-workspace .mail-compose textarea {min-height:150px;resize:vertical;line-height:1.5;}
.project-email-workspace :is(.mail-actions,.mail-account-bar,.mail-import-row) {display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.project-email-workspace :is(.mail-account-bar,.mail-import-row) {justify-content:space-between;gap:16px;}
.project-email-workspace :is(.mail-account-bar>div:first-child,.mail-import-row>div,.mail-message-heading) {display:grid;gap:4px;min-width:0;overflow-wrap:anywhere;}
.project-email-workspace :is(.mail-actions button,.mail-connect-form>button) {width:fit-content;max-width:100%;margin:0;flex:none;}
.project-email-workspace :is(.mail-conversations,.mail-import) {display:grid;gap:12px;min-width:0;}
.project-email-workspace details.mail-thread {padding:0;margin:0;border:1px solid #d4e2e5;border-radius:12px;min-width:0;}
.project-email-workspace .mail-thread>summary {padding:12px 16px;min-height:44px;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:4px;overflow-wrap:anywhere;cursor:pointer;}
.project-email-workspace .mail-thread>summary>small {grid-column:1;}
.project-email-workspace .mail-thread>summary::after {content:'⌄';display:block;grid-column:2;grid-row:1/3;align-self:center;justify-self:center;}
.project-email-workspace .mail-thread[open]>summary::after {transform:rotate(180deg);}
.project-email-workspace .mail-thread[open]>summary {border-bottom:1px solid #d4e2e5;}
.project-email-workspace .mail-thread-content {display:grid;gap:16px;padding:16px;min-width:0;}
.project-email-workspace .mail-thread-content>button {width:fit-content;margin:0;}
.project-email-workspace .mail-message {display:grid;gap:8px;padding:0 0 16px;border-bottom:1px solid #e1eaed;min-width:0;}
.project-email-workspace .mail-body {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;max-height:480px;overflow:auto;}
.project-email-workspace :is(.mail-feedback,.mail-warning) {padding:12px 16px;border-radius:10px;background:#edf7f1;overflow-wrap:anywhere;justify-self:start;max-width:100%;}
.project-email-workspace .mail-warning {background:#fff7e6;}
.project-email-workspace .mail-import {border-top:1px solid #d4e2e5;padding-top:16px;}
.project-email-workspace .mail-import-row {padding:12px 0;border-bottom:1px solid #e1eaed;}
@media(max-width:640px){.project-email-workspace :is(input,textarea){font-size:16px;}.project-email-workspace .mail-account-bar{align-items:flex-start;}.project-email-workspace .mail-actions{row-gap:8px;}}