/* [project]/node_modules/@fontsource-variable/inter/index.css [app-client] (css) */
@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../media/inter-cyrillic-ext-wght-normal.20g3-bbbhdq0_.woff2") format("woff2-variations");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../media/inter-cyrillic-wght-normal.2cxlyxah-fd35.woff2") format("woff2-variations");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../media/inter-greek-ext-wght-normal.0mkxydxl0e43d.woff2") format("woff2-variations");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../media/inter-greek-wght-normal.1rx9vjatjkdar.woff2") format("woff2-variations");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../media/inter-vietnamese-wght-normal.2kcj5i_8uff48.woff2") format("woff2-variations");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../media/inter-latin-ext-wght-normal.3gdi_th3seg1n.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../media/inter-latin-wght-normal.0gsaq8ukbf34m.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* [project]/apps/web/src/app/globals.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --canvas: #f7f7f5;
  --paper: #fff;
  --paper-subtle: #fafaf9;
  --surface-muted: #efefec;
  --line: #e6e6e2;
  --line-strong: #cfcfca;
  --ink: #111;
  --ink-soft: #333;
  --muted: #5c5c5c;
  --surface-dark: #141414;
  --surface-dark-raised: #262626;
  --line-dark: #444;
  --on-surface-dark: #fff;
  --on-surface-dark-muted: #bdbdbd;
  --on-surface-dark-faint: #8f8f8f;
  --accent: #fdb515;
  --accent-hover: #f0a400;
  --on-accent: #111;
  --accent-strong: #8a5a00;
  --accent-soft: #fff3d6;
  --accent-line: #f6d68a;
  --focus: var(--accent-strong);
  --focus-on-dark: var(--accent);
  --status-ok-bg: #dcfce7;
  --status-ok-text: #14532d;
  --status-attention-bg: #fef9c3;
  --status-attention-text: #713f12;
  --status-problem-bg: #fee2e2;
  --status-problem-text: #7f1d1d;
  --status-neutral-bg: #e8e8e8;
  --status-neutral-text: #3f3f3f;
  --shadow: 0 14px 38px #1111110e;
  --shadow-soft: 0 5px 15px #11111109;
  --shadow-raised: 0 18px 60px #11111112;
  --shadow-hero: 0 12px 24px #11111129;
  --shadow-pin: 0 3px 9px #1113;
  --shadow-accent: 0 8px 19px #fdb51538;
  --scrim: #11111173;
  --radius: .9375rem;
  --text-8: clamp(.5rem, .4911rem + .0446vw, .5313rem);
  --text-9: clamp(.5625rem, .5536rem + .0446vw, .5938rem);
  --text-10: clamp(.625rem, .6161rem + .0446vw, .6563rem);
  --text-11: clamp(.6875rem, .6786rem + .0446vw, .7188rem);
  --text-12: clamp(.75rem, .7411rem + .0446vw, .7813rem);
  --text-13: clamp(.8125rem, .8036rem + .0446vw, .8438rem);
  --text-14: clamp(.875rem, .8571rem + .0893vw, .9375rem);
  --text-15: clamp(.9375rem, .9196rem + .0893vw, 1rem);
  --text-16: clamp(1rem, .9821rem + .0893vw, 1.0625rem);
  --text-17: clamp(1.0625rem, 1.0268rem + .1786vw, 1.1875rem);
  --text-18: clamp(1.125rem, 1.0893rem + .1786vw, 1.25rem);
  --text-20: clamp(1.25rem, 1.2143rem + .1786vw, 1.375rem);
  --text-22: clamp(1.375rem, 1.3393rem + .1786vw, 1.5rem);
  --text-24: clamp(1.5rem, 1.4286rem + .3571vw, 1.75rem);
  --text-26: clamp(1.625rem, 1.5536rem + .3571vw, 1.875rem);
  --text-28: clamp(1.75rem, 1.6786rem + .3571vw, 2rem);
  --text-30: clamp(1.875rem, 1.8036rem + .3571vw, 2.125rem);
  --text-title: clamp(1.5625rem, 1.4375rem + .625vw, 2rem);
  --text-display: clamp(1.875rem, 1.625rem + 1.25vw, 2.75rem);
  --space-2: clamp(.125rem, .1228rem + .0112vw, .1328rem);
  --space-4: clamp(.25rem, .2455rem + .0223vw, .2656rem);
  --space-6: clamp(.375rem, .3683rem + .0335vw, .3984rem);
  --space-8: clamp(.5rem, .4911rem + .0446vw, .5313rem);
  --space-10: clamp(.625rem, .6138rem + .0558vw, .6641rem);
  --space-12: clamp(.75rem, .7366rem + .067vw, .7969rem);
  --space-14: clamp(.875rem, .8594rem + .0781vw, .9297rem);
  --space-16: clamp(1rem, .9821rem + .0893vw, 1.0625rem);
  --space-18: clamp(1.125rem, 1.1049rem + .1004vw, 1.1953rem);
  --space-20: clamp(1.25rem, 1.2277rem + .1116vw, 1.3281rem);
  --space-22: clamp(1.375rem, 1.3504rem + .1228vw, 1.4609rem);
  --space-24: clamp(1.5rem, 1.4732rem + .1339vw, 1.5938rem);
  --space-26: clamp(1.625rem, 1.596rem + .1451vw, 1.7266rem);
  --space-28: clamp(1.75rem, 1.7188rem + .1563vw, 1.8594rem);
  --space-36: clamp(2.25rem, 2.2098rem + .2009vw, 2.3906rem);
  --space-40: clamp(2.5rem, 2.4554rem + .2232vw, 2.6563rem);
  --space-48: clamp(3rem, 2.9464rem + .2679vw, 3.1875rem);
  --space-56: clamp(3.5rem, 3.4375rem + .3125vw, 3.7188rem);
  --space-gutter: clamp(1.375rem, .875rem + 2.5vw, 3.125rem);
  --target-size: 2.75rem;
  --measure: 31em;
  --keyboard-inset: 0px;
  --bottom-bar-height: 0px;
  font-family: Inter Variable, Inter, Segoe UI, Arial, sans-serif;
}

[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --canvas: #121212;
  --paper: #1c1c1c;
  --paper-subtle: #171717;
  --surface-muted: #262626;
  --line: #2e2e2e;
  --line-strong: #4a4a4a;
  --ink: #f2f2f2;
  --ink-soft: #d9d9d9;
  --muted: #b3b3b3;
  --surface-dark: #0a0a0a;
  --surface-dark-raised: #1f1f1f;
  --line-dark: #333;
  --on-surface-dark: #f2f2f2;
  --on-surface-dark-muted: #b3b3b3;
  --accent-strong: var(--accent);
  --accent-soft: #40341b;
  --accent-line: #725619;
  --focus: var(--accent);
  --status-ok-bg: #1d3a28;
  --status-ok-text: #86efac;
  --status-attention-bg: #443c1b;
  --status-attention-text: #fde68a;
  --status-problem-bg: #422323;
  --status-problem-text: #fca5a5;
  --status-neutral-bg: #333;
  --status-neutral-text: #d4d4d4;
  --shadow: none;
  --shadow-soft: none;
  --shadow-raised: none;
  --shadow-hero: none;
  --shadow-pin: none;
  --shadow-accent: none;
  --scrim: #0009;
}

[data-theme="dark"] .sidebar, [data-theme="dark"] .nav-rail {
  box-shadow: inset -1px 0 0 var(--line);
}

[data-theme="dark"] .client-hero {
  box-shadow: inset 0 0 0 1px var(--line);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-height: 100%;
}

body {
  background: var(--canvas);
  min-height: 100dvh;
  color: var(--ink);
  font-size: var(--text-14);
  margin: 0;
}

@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html {
    font: -apple-system-body;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
}

input, select, textarea {
  font-size: var(--text-16);
}

button {
  cursor: pointer;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.sidebar :focus-visible, .nav-rail :focus-visible, .client-hero :focus-visible {
  outline-color: var(--focus-on-dark);
}

.nav-more-panel :focus-visible {
  outline-color: var(--focus);
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--paper);
  transition: background-color 9999s ease-out;
}

input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--paper);
  transition: background-color 9999s ease-out;
}

input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--paper);
  transition: background-color 9999s ease-out;
}

textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--paper);
  transition: background-color 9999s ease-out;
}

textarea:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--paper);
  transition: background-color 9999s ease-out;
}

textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--paper);
  transition: background-color 9999s ease-out;
}

select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--paper);
  transition: background-color 9999s ease-out;
}

select:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--paper);
  transition: background-color 9999s ease-out;
}

select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--paper);
  transition: background-color 9999s ease-out;
}

:is(input:autofill, textarea:autofill, select:autofill) {
  filter: none;
  background-color: var(--paper);
  color: var(--ink);
}

h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  margin-bottom: var(--space-8);
  font-size: var(--text-title);
  letter-spacing: -.045em;
  line-height: 1.15;
}

h2 {
  font-size: var(--text-15);
  letter-spacing: -.02em;
  margin-bottom: 0;
  line-height: 1.35;
}

h3 {
  margin-bottom: var(--space-6);
  font-size: var(--text-14);
  line-height: 1.4;
}

.eyebrow {
  margin: 0 0 var(--space-8);
  color: var(--accent-strong);
  font-size: var(--text-9);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 850;
}

.page-description {
  color: var(--muted);
  font-size: var(--text-12);
  margin-bottom: 0;
  line-height: 1.6;
}

.muted {
  color: var(--muted);
  line-height: 1.55;
}

.brand-mark {
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  display: inline-grid;
  overflow: hidden;
}

.brand-mark svg {
  display: block;
}

.brand-mark-dot {
  fill: var(--accent);
}

.brand-mark-tile {
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 14px;
  padding: 8px;
}

.brand-mark-tile .brand-mark-dot {
  fill: currentColor;
}

.brand {
  align-items: center;
  gap: var(--space-12);
  color: var(--on-surface-dark);
  display: flex;
}

.brand-lockup {
  gap: var(--space-4);
  display: grid;
}

.brand-lockup strong, .brand-name {
  min-width: 0;
  font-size: var(--text-16);
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.brand-lockup strong span, .brand-name span {
  color: var(--accent);
}

.brand-lockup small {
  color: var(--on-surface-dark-muted);
  font-size: var(--text-8);
  letter-spacing: .16em;
  font-weight: 750;
}

.button {
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  min-height: 2.5rem;
  padding: var(--space-10) var(--space-14);
  font-size: var(--text-12);
  border: 1px solid #0000;
  border-radius: .5625rem;
  font-weight: 750;
  transition: background .15s, transform .15s;
  display: inline-flex;
}

.button:active {
  transform: translateY(1px);
}

.button-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}

@media (hover: hover) {
  .button-primary:hover {
    background: var(--accent-hover);
  }
}

.button-soft {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--ink);
}

.button-quiet {
  border-color: var(--line);
  background: var(--paper);
  min-height: 2.125rem;
  color: var(--ink);
  padding: var(--space-8) var(--space-12);
}

.button-full {
  width: 100%;
}

.button:disabled {
  cursor: not-allowed;
  opacity: .65;
}

.notice {
  padding: var(--space-12) var(--space-14);
  border-radius: .625rem;
  line-height: 1.5;
}

.notice-warning, .notice-attention {
  border: 1px solid color-mix(in srgb, var(--status-attention-text) 22%, var(--status-attention-bg));
  background: var(--status-attention-bg);
  color: var(--status-attention-text);
}

.notice-error {
  border: 1px solid color-mix(in srgb, var(--status-problem-text) 22%, var(--status-problem-bg));
  background: var(--status-problem-bg);
  color: var(--status-problem-text);
}

.notice-success {
  border: 1px solid color-mix(in srgb, var(--status-ok-text) 22%, var(--status-ok-bg));
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
}

.notice-neutral {
  border: 1px solid color-mix(in srgb, var(--status-neutral-text) 22%, var(--status-neutral-bg));
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
}

.theme-toggle {
  border: 1px solid var(--line);
  background: var(--paper);
  width: 44px;
  height: 44px;
  color: var(--ink);
  border-radius: 50%;
  flex: none;
  place-items: center;
  padding: 0;
  transition: background .15s;
  display: inline-grid;
}

@media (hover: hover) {
  .theme-toggle:hover {
    background: var(--surface-muted);
  }
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

.theme-toggle .theme-toggle-sun, [data-theme="dark"] .theme-toggle .theme-toggle-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .theme-toggle-sun {
  display: block;
}

.page-theme-corner {
  top: max(var(--space-16), env(safe-area-inset-top));
  right: max(var(--space-16), env(safe-area-inset-right));
  position: absolute;
}

.login-layout {
  min-height: 100dvh;
  padding: max(var(--space-24), env(safe-area-inset-top)) max(var(--space-24), env(safe-area-inset-right)) max(var(--space-24), env(safe-area-inset-bottom)) max(var(--space-24), env(safe-area-inset-left));
  background: radial-gradient(circle at 20% 0%, var(--accent-soft) 0, transparent 40%), var(--canvas);
  place-items: center;
  display: grid;
  position: relative;
}

.login-card {
  border: 1px solid var(--line);
  width: min(100%, 27.5rem);
  padding: var(--space-36);
  background: var(--paper);
  box-shadow: var(--shadow-raised);
  border-radius: 1.25rem;
}

.login-card .brand-mark {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-20);
}

.form-stack {
  gap: var(--space-10);
  margin: var(--space-26) 0 var(--space-18);
  display: grid;
}

.form-stack label {
  margin-top: var(--space-4);
  font-size: var(--text-12);
  font-weight: 750;
}

.form-stack input {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-10) var(--space-12);
  background: var(--paper);
  color: var(--ink);
  border-radius: .5625rem;
}

.form-stack .button-primary {
  margin-top: var(--space-10);
}

.form-error {
  margin: var(--space-2) 0;
  color: var(--status-problem-text);
  font-size: var(--text-12);
}

.form-stack .field-hint, .form-stack .field-error {
  margin-top: calc(-1 * var(--space-4));
}

.set-password-leave {
  justify-content: center;
  display: flex;
}

.set-password-unread {
  gap: var(--space-12);
  margin: var(--space-22) 0 var(--space-18);
  display: grid;
}

.set-password-unread .notice {
  font-size: var(--text-13);
  margin: 0;
}

.set-password-leave .button, .set-password-unread .button {
  min-height: 2.75rem;
}

.login-help {
  justify-content: flex-end;
  margin: 0;
  display: flex;
}

.login-help-link {
  min-height: var(--target-size);
  padding: 0 var(--space-4);
  color: var(--accent-strong);
  font-size: var(--text-12);
  align-items: center;
  font-weight: 750;
  text-decoration: underline;
  display: inline-flex;
}

@media (hover: hover) {
  .login-help-link:hover {
    color: var(--ink);
  }
}

.password-reset-status {
  gap: var(--space-12);
  margin: var(--space-22) 0 var(--space-18);
  display: grid;
}

.password-reset-status .notice, .password-reset-hint {
  font-size: var(--text-13);
  margin: 0;
}

.password-reset-actions {
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.password-reset-actions .button {
  min-height: 2.75rem;
}

@media (max-width: 37.5em) {
  .password-reset-actions {
    display: grid;
  }
}

.data-use-card {
  width: min(100%, 36rem);
}

.data-use-form {
  gap: var(--space-14);
}

.data-use-statement {
  gap: var(--space-10);
  color: var(--ink);
  font-size: var(--text-14);
  line-height: 1.55;
  display: grid;
}

.data-use-statement p {
  margin: 0;
}

.data-use-purposes {
  gap: var(--space-6);
  padding-left: var(--space-22);
  margin: 0;
  display: grid;
}

.data-use-read {
  gap: var(--space-8);
  justify-items: start;
  display: grid;
}

.data-use-read .button {
  min-height: 2.75rem;
}

.data-use-read-done {
  color: var(--status-ok-text);
  font-size: var(--text-13);
  margin: 0;
  font-weight: 750;
}

.data-use-consents {
  gap: var(--space-10);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-14);
  border-radius: .75rem;
  margin: 0;
  display: grid;
}

.data-use-consents legend {
  padding: 0 var(--space-6);
  color: var(--ink);
  font-size: var(--text-14);
  font-weight: 800;
}

.data-use-consents-line {
  color: var(--ink-soft);
  font-size: var(--text-13);
  margin: 0;
  line-height: 1.55;
}

.data-use-consents .notice {
  font-size: var(--text-13);
  margin: 0;
}

.data-use-locations {
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.data-use-form .data-use-consent {
  align-items: center;
  gap: var(--space-10);
  border: 1px solid var(--line-strong);
  min-height: 2.75rem;
  padding: var(--space-8) var(--space-10);
  background: var(--paper-subtle);
  color: var(--ink-soft);
  font-size: var(--text-13);
  cursor: pointer;
  border-radius: .5rem;
  margin: 0;
  font-weight: 650;
  line-height: 1.3;
  display: flex;
}

.data-use-form .data-use-consent input {
  width: 1.125rem;
  height: 1.125rem;
  min-height: 0;
  accent-color: var(--accent-strong);
  cursor: pointer;
  flex: none;
  margin: 0;
  padding: 0;
}

.data-use-form .data-use-consent:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--ink);
}

.data-use-form .data-use-consent:has(input:disabled) {
  cursor: default;
}

.data-use-location-failed .data-use-consent {
  border-color: var(--status-problem-text);
}

.data-use-consent-text {
  gap: var(--space-2);
  overflow-wrap: anywhere;
  min-width: 0;
  display: grid;
}

.data-use-consent-address, .data-use-consent-given {
  color: var(--muted);
  font-size: var(--text-11);
  font-weight: 600;
}

.data-use-consent-given {
  color: var(--status-ok-text);
}

.data-use-stale {
  display: flex;
}

.data-use-stale .button, .data-use-actions .button {
  min-height: 2.75rem;
}

.data-use-actions {
  gap: var(--space-10);
}

@media (pointer: coarse) {
  .data-use-read .button, .data-use-stale .button, .data-use-actions .button, .data-use-form .data-use-consent {
    min-height: 3rem;
  }
}

.dashboard-layout {
  background: var(--canvas);
  flex-direction: column;
  min-height: 100dvh;
  display: flex;
}

.sidebar {
  width: calc(15.25rem - var(--space-14) + max(var(--space-14), env(safe-area-inset-left)));
  height: 100dvh;
  min-height: 37.5rem;
  padding: max(var(--space-26), env(safe-area-inset-top)) var(--space-14) max(var(--space-16), env(safe-area-inset-bottom)) max(var(--space-14), env(safe-area-inset-left));
  background: var(--surface-dark);
  color: var(--on-surface-dark);
  flex-direction: column;
  display: none;
  position: sticky;
  top: 0;
}

.sidebar > .brand {
  padding: var(--space-2) var(--space-12) var(--space-28);
}

.nav-label {
  margin: var(--space-10) var(--space-14) var(--space-10);
  color: var(--on-surface-dark-muted);
  font-size: var(--text-9);
  letter-spacing: .15em;
  font-weight: 850;
}

.side-nav {
  gap: var(--space-4);
  overscroll-behavior: contain;
  display: grid;
  overflow: auto;
}

.nav-item {
  align-items: center;
  gap: var(--space-12);
  min-height: 2.75rem;
  margin: var(--space-2) 0;
  padding: var(--space-10) var(--space-12);
  color: var(--on-surface-dark-muted);
  font-size: var(--text-11);
  border-radius: .5625rem;
  font-weight: 620;
  transition: color .15s, background .15s;
  display: flex;
}

@media (hover: hover) {
  .nav-item:hover {
    background: var(--surface-dark-raised);
    color: var(--on-surface-dark);
  }
}

.nav-current {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-10);
  background: var(--surface-dark-raised);
  color: var(--on-surface-dark);
  border-radius: .5rem;
}

.nav-icon {
  width: 1.125rem;
  color: var(--on-surface-dark-muted);
  font-size: var(--text-16);
  flex: 0 0 1.125rem;
  place-items: center;
  display: grid;
}

.nav-current .nav-icon {
  color: var(--accent);
}

.nav-copy {
  flex: 1;
  min-width: 0;
}

.nav-future {
  color: var(--on-surface-dark-faint);
  cursor: default;
}

.nav-future small {
  border: 1px solid var(--line-dark);
  padding: var(--space-4) var(--space-4);
  color: var(--on-surface-dark-faint);
  font-size: var(--text-8);
  letter-spacing: .04em;
  border-radius: .3125rem;
  font-weight: 800;
}

.sidebar-bottom {
  gap: var(--space-16);
  padding: var(--space-16) var(--space-6) 0;
  margin-top: auto;
  display: grid;
}

.pilot-card {
  border: 1px solid var(--line-dark);
  padding: var(--space-12) var(--space-14);
  background: var(--surface-dark-raised);
  border-radius: .6875rem;
}

.pilot-card strong {
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-6);
  font-size: var(--text-10);
  display: flex;
}

.pilot-card small {
  color: var(--on-surface-dark-muted);
  font-size: var(--text-9);
  line-height: 1.55;
  display: block;
}

.status-dot {
  background: var(--on-surface-dark-muted);
  border-radius: 50%;
  width: .4375rem;
  height: .4375rem;
}

.sidebar-account {
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-2) var(--space-8);
  display: flex;
}

.sidebar-account > span:last-child {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.sidebar-account strong {
  font-size: var(--text-10);
  overflow-wrap: anywhere;
}

.sidebar-account small {
  color: var(--on-surface-dark-muted);
  font-size: var(--text-9);
}

.avatar {
  background: var(--accent-soft);
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ink);
  font-size: var(--text-10);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-weight: 850;
  display: grid;
}

.avatar-sidebar {
  background: var(--surface-dark-raised);
  width: 1.9375rem;
  height: 1.9375rem;
  color: var(--on-surface-dark);
}

.dashboard-main {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.topbar {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-18);
  border-bottom: 1px solid var(--line);
  min-height: 4.625rem;
  padding: max(var(--space-12), env(safe-area-inset-top)) max(var(--space-gutter), env(safe-area-inset-right)) var(--space-12) var(--space-gutter);
  background: var(--paper);
  display: none;
}

.topbar .eyebrow {
  margin-bottom: var(--space-4);
  font-size: var(--text-8);
}

.topbar > div:first-child > strong {
  color: var(--ink);
  font-size: var(--text-11);
}

.topbar-actions {
  align-items: center;
  gap: var(--space-14);
  flex-wrap: wrap;
  display: flex;
}

.topbar-user {
  color: var(--muted);
  font-size: var(--text-11);
}

.topbar-actions .button {
  min-height: 2.75rem;
}

.demo-badge {
  border: 1px solid var(--line);
  width: fit-content;
  max-width: 100%;
  padding: var(--space-4) var(--space-8);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: var(--text-8);
  letter-spacing: .06em;
  overflow-wrap: anywhere;
  border-radius: .375rem;
  align-items: center;
  font-weight: 850;
  line-height: 1.3;
  display: inline-flex;
}

.content-wrap {
  width: min(96.25rem, 100%);
  padding: var(--space-28) max(var(--space-gutter), env(safe-area-inset-right)) var(--space-48) var(--space-gutter);
  margin: 0 auto;
  container: content / inline-size;
}

.page-heading {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-22);
  margin-bottom: var(--space-20);
  display: flex;
}

.page-heading .page-description {
  max-width: 45.625rem;
}

.page-heading-action {
  flex: none;
}

.demo-notice {
  align-items: flex-start;
  gap: var(--space-8);
  margin: 0 0 var(--space-16);
  border: 1px solid var(--line);
  padding: var(--space-10) var(--space-12);
  background: var(--paper-subtle);
  color: var(--muted);
  font-size: var(--text-10);
  border-radius: .5625rem;
  line-height: 1.5;
  display: flex;
}

.demo-notice span {
  color: var(--accent-strong);
  font-size: var(--text-13);
}

.metric-grid {
  gap: var(--space-14);
  margin: var(--space-18) 0 var(--space-20);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  container: metric-grid / inline-size;
}

.metric-card {
  gap: var(--space-10);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-16) var(--space-16);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: .8125rem;
  display: grid;
  container: metric-card / inline-size;
}

.metric-topline {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-10);
  display: flex;
}

.metric-label {
  color: var(--muted);
  font-size: var(--text-10);
  font-weight: 700;
}

.metric-icon {
  background: var(--accent-soft);
  width: 1.875rem;
  height: 1.875rem;
  color: var(--accent-strong);
  font-size: var(--text-15);
  border-radius: .5625rem;
  flex: none;
  place-items: center;
  font-weight: 800;
  display: grid;
}

.metric-value {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: var(--text-24);
  letter-spacing: -.055em;
  font-weight: 850;
  line-height: 1;
}

.metric-note {
  align-items: center;
  gap: var(--space-6);
  min-height: 1.0625rem;
  color: var(--muted);
  font-size: var(--text-9);
  line-height: 1.35;
  display: flex;
}

.metric-note .demo-badge {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-8);
}

@container content (min-width: 15rem) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container content (min-width: 50rem) {
  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container metric-grid (max-width: 22.5rem) {
  .metric-card {
    padding: var(--space-12);
  }
}

@container metric-card (max-width: 11.25rem) {
  .metric-value {
    font-size: var(--text-22);
  }
}

.dashboard-grid {
  gap: var(--space-18);
  margin: var(--space-18) 0;
  display: grid;
}

.dashboard-grid-even {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}

.panel {
  min-width: 0;
  margin-top: var(--space-18);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: .875rem;
  overflow: clip;
  container: panel / inline-size;
}

.dashboard-grid .panel {
  margin: 0;
}

.panel-heading {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-18) var(--space-20) var(--space-12);
  display: flex;
}

.panel-heading > div {
  min-width: 0;
}

.panel-heading h2 {
  color: var(--ink);
  font-size: var(--text-12);
}

.panel-detail {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--text-9);
  line-height: 1.4;
}

.panel > .table-scroll, .panel > .checklist, .panel > .photo-slots, .panel > .job-detail-grid, .panel > .report-summary, .panel > .report-fields, .panel > .filter-row, .panel > .site-preview-list, .panel > .compact-empty, .panel > .panel-body, .panel > .asset-toolbar, .panel > .asset-cards, .panel > .empty-state, .panel > .list-loading, .panel > .notice, .panel > .list-load-more, .panel > .list-note {
  margin-right: var(--space-18);
  margin-left: var(--space-18);
}

.panel > .table-scroll {
  margin-bottom: var(--space-8);
}

.panel > .text-link {
  margin: var(--space-4) var(--space-18) var(--space-18);
  display: inline-flex;
}

.footer-note {
  margin: var(--space-18) var(--space-2) 0;
  color: var(--muted);
  font-size: var(--text-9);
}

.text-link {
  align-items: center;
  gap: var(--space-6);
  color: var(--accent-strong);
  font-size: var(--text-10);
  font-weight: 750;
}

@media (hover: hover) {
  .text-link:hover {
    color: var(--ink);
    text-decoration: underline;
  }
}

.table-scroll {
  overscroll-behavior-x: contain;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}

th {
  padding: var(--space-12) var(--space-10);
  background: var(--paper-subtle);
  color: var(--muted);
  font-size: var(--text-8);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 800;
}

td {
  border-top: 1px solid var(--line);
  padding: var(--space-12) var(--space-10);
  color: var(--muted);
  font-size: var(--text-10);
  vertical-align: middle;
}

td strong {
  color: var(--ink);
  font-size: var(--text-10);
}

@media (hover: hover) {
  tbody tr:hover td {
    background: var(--paper-subtle);
  }
}

.table-id {
  color: var(--muted);
  white-space: nowrap;
  font-weight: 750;
}

.table-subline {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--text-8);
  display: block;
}

@media not (min-width: 37.5em) {
  .dashboard-layout .table-cards {
    min-width: 0;
  }

  .dashboard-layout .table-cards, .dashboard-layout .table-cards tbody, .dashboard-layout .table-cards tr {
    display: block;
  }

  .dashboard-layout .table-cards thead {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .dashboard-layout .table-cards tbody {
    gap: var(--space-10);
    display: grid;
  }

  .dashboard-layout .table-cards tr {
    border: 1px solid var(--line);
    min-width: 0;
    padding: 0 var(--space-14);
    background: var(--paper);
    border-radius: .6875rem;
  }

  .dashboard-layout .table-cards td {
    align-items: start;
    gap: 0 var(--space-12);
    border-top: 1px solid var(--line);
    padding: var(--space-10) 0;
    color: var(--ink-soft);
    font-size: var(--text-13);
    overflow-wrap: anywhere;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    line-height: 1.45;
    display: grid;
  }

  .dashboard-layout .table-cards td:before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--text-12);
    grid-row: span 2;
    font-weight: 700;
  }

  .dashboard-layout .table-cards td > * {
    grid-column: 2;
  }

  .dashboard-layout .table-cards td:first-child, .dashboard-layout .table-cards .table-cards-actions {
    display: block;
  }

  .dashboard-layout .table-cards td:first-child {
    color: var(--ink);
    font-size: var(--text-15);
    border-top: 0;
  }

  .dashboard-layout .table-cards td:first-child:before, .dashboard-layout .table-cards .table-cards-actions:before {
    content: none;
  }

  .dashboard-layout .table-cards td strong {
    font-size: var(--text-13);
  }

  .dashboard-layout .table-cards td:first-child strong {
    font-size: var(--text-15);
  }

  .dashboard-layout .table-cards .table-subline {
    font-size: var(--text-12);
  }

  .dashboard-layout .table-cards .people-phone {
    white-space: normal;
  }

  @media (hover: hover) {
    .dashboard-layout .table-cards tbody tr:hover td {
      background: none;
    }
  }
}

@container content (max-width: 15rem) {
  .dashboard-layout .table-cards td, .dashboard-layout .table-cards td:before {
    display: block;
  }
}

.status-badge {
  width: fit-content;
  max-width: 100%;
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-8);
  overflow-wrap: anywhere;
  border-radius: .375rem;
  align-items: center;
  font-weight: 800;
  line-height: 1.3;
  display: inline-flex;
}

.status-ok {
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
}

.status-attention {
  background: var(--status-attention-bg);
  color: var(--status-attention-text);
}

.status-problem {
  background: var(--status-problem-bg);
  color: var(--status-problem-text);
}

.status-neutral {
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
}

.empty-state {
  padding: var(--space-40) var(--space-18);
  text-align: center;
  justify-items: center;
  display: grid;
}

.empty-state h3 {
  margin: 0 0 var(--space-8);
  color: var(--ink);
}

.empty-state p {
  max-width: 23.75rem;
  color: var(--muted);
  font-size: var(--text-11);
  margin: 0;
  line-height: 1.55;
}

.empty-icon {
  width: 2.625rem;
  height: 2.625rem;
  margin-bottom: var(--space-12);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: var(--text-22);
  border-radius: .875rem;
  place-items: center;
  display: grid;
}

.compact-empty {
  margin-top: 0;
  margin-bottom: var(--space-14);
  font-size: var(--text-10);
}

.coming-soon-body {
  gap: var(--space-6);
  margin: 0 var(--space-20) var(--space-18);
  display: grid;
}

.coming-soon-body p {
  max-width: 40rem;
  color: var(--muted);
  font-size: var(--text-11);
  margin: 0;
  line-height: 1.55;
}

.coming-soon-body p:first-child {
  color: var(--ink-soft);
}

.filter-row {
  gap: var(--space-8);
  overscroll-behavior-x: contain;
  margin-top: var(--space-2);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-6);
  display: flex;
  overflow: auto;
}

.filter-chip {
  align-items: center;
  gap: var(--space-8);
  border: 1px solid var(--line);
  padding: var(--space-8) var(--space-10);
  background: var(--paper);
  color: var(--muted);
  font-size: var(--text-9);
  border-radius: .5rem;
  flex: none;
  display: inline-flex;
}

.filter-chip b {
  color: var(--ink-soft);
  font-size: var(--text-8);
}

.filter-chip-active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.incident-mark {
  width: 1.9375rem;
  height: 1.9375rem;
  font-size: var(--text-12);
  border-radius: .625rem;
  flex: none;
  place-items: center;
  font-weight: 900;
  display: grid;
}

.incident-ok {
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
}

.incident-attention {
  background: var(--status-attention-bg);
  color: var(--status-attention-text);
}

.incident-problem {
  background: var(--status-problem-bg);
  color: var(--status-problem-text);
}

.incident-neutral {
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
}

.panel > .operator-incident-queue {
  margin: 0 var(--space-18) var(--space-18);
}

.operator-incident-toolbar {
  align-items: end;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
  grid-template-columns: minmax(9.375rem, .8fr) minmax(11.875rem, 1.2fr) auto;
  display: grid;
}

.operator-incident-filter {
  gap: var(--space-6);
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-9);
  font-weight: 750;
  display: grid;
}

.operator-incident-filter select, .operator-incident-action-form textarea {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-height: 2.375rem;
  padding: var(--space-8) var(--space-10);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-16);
  border-radius: .5rem;
}

.operator-incident-toolbar-actions {
  justify-content: flex-end;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.operator-incident-toolbar-actions .button {
  min-height: 2.3125rem;
  padding: var(--space-8) var(--space-12);
  font-size: var(--text-9);
}

.operator-incident-demo-note {
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-12);
  color: var(--muted);
  font-size: var(--text-9);
  flex-wrap: wrap;
  line-height: 1.5;
  display: flex;
}

.operator-incident-list {
  gap: var(--space-10);
  display: grid;
}

.operator-incident-card {
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-14);
  background: var(--paper);
  border-radius: .6875rem;
}

.operator-incident-card-heading {
  align-items: flex-start;
  gap: var(--space-10);
  min-width: 0;
  display: flex;
}

.operator-incident-title {
  flex: 1;
  min-width: 0;
}

.operator-incident-title h3 {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--ink);
  font-size: var(--text-11);
  overflow-wrap: anywhere;
}

.operator-incident-title p {
  color: var(--muted);
  font-size: var(--text-9);
  margin: 0;
  line-height: 1.45;
}

.operator-incident-meta {
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-10);
  color: var(--muted);
  font-size: var(--text-8);
  flex-wrap: wrap;
  display: flex;
}

.operator-incident-meta code {
  color: var(--ink-soft);
  font-family: ui-monospace, Consolas, monospace;
}

.operator-incident-summary {
  margin: var(--space-10) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-9);
  line-height: 1.55;
}

.operator-incident-action-form {
  gap: var(--space-8);
  margin-top: var(--space-12);
  border-top: 1px solid var(--line);
  padding-top: var(--space-12);
  display: grid;
}

.operator-incident-action-form label {
  color: var(--ink-soft);
  font-size: var(--text-9);
  font-weight: 750;
}

.operator-incident-action-form textarea {
  resize: vertical;
  min-height: 3.9375rem;
}

.operator-incident-action-form textarea::placeholder {
  color: var(--muted);
}

.operator-incident-action-buttons {
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.operator-incident-action-buttons .button {
  min-height: 2.125rem;
  padding: var(--space-8) var(--space-10);
  font-size: var(--text-9);
}

.operator-incident-pending {
  margin: var(--space-12) 0 0;
  border-left: 3px solid color-mix(in srgb, var(--status-attention-text) 45%, var(--status-attention-bg));
  padding: var(--space-8) var(--space-10);
  background: var(--status-attention-bg);
  color: var(--status-attention-text);
  font-size: var(--text-9);
  line-height: 1.5;
}

.operator-incident-feedback {
  margin: 0 0 var(--space-12);
  padding: var(--space-10) var(--space-12);
  font-size: var(--text-9);
  border: 1px solid;
  border-radius: .5rem;
  line-height: 1.5;
}

.operator-incident-error {
  border-color: color-mix(in srgb, var(--status-problem-text) 22%, var(--status-problem-bg));
  background: var(--status-problem-bg);
  color: var(--status-problem-text);
}

.operator-incident-success {
  border-color: color-mix(in srgb, var(--status-ok-text) 22%, var(--status-ok-bg));
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
}

.operator-incident-loading {
  padding: var(--space-24) var(--space-12);
  color: var(--muted);
  font-size: var(--text-10);
  text-align: center;
}

.operator-incident-pagination {
  margin-top: var(--space-12);
  justify-content: center;
  display: flex;
}

.operator-incident-pagination .button {
  font-size: var(--text-9);
}

.admin-assets {
  gap: var(--space-12);
  display: grid;
}

.admin-assets > .demo-notice {
  margin: 0;
}

.asset-toolbar {
  align-items: center;
  gap: var(--space-10);
  padding-top: var(--space-12);
  grid-template-columns: auto minmax(10rem, 1fr) auto;
  display: grid;
}

.asset-toolbar label {
  color: var(--muted);
  font-size: var(--text-9);
  font-weight: 750;
}

.asset-toolbar select {
  border: 1px solid var(--line-strong);
  min-width: 0;
  min-height: 2.1875rem;
  padding: var(--space-6) var(--space-10);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-16);
  border-radius: .5rem;
}

.asset-cards {
  gap: var(--space-10);
  padding-top: var(--space-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.asset-card {
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-14);
  background: var(--paper);
  border-radius: .6875rem;
}

.asset-card-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-12);
  min-width: 0;
  display: flex;
}

.asset-card-heading > div {
  min-width: 0;
}

.asset-card-heading h3 {
  margin: var(--space-2) 0 0;
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
}

.asset-card-heading .eyebrow {
  overflow-wrap: anywhere;
}

.asset-card-heading .status-badge {
  flex: none;
}

.asset-meta {
  gap: var(--space-10) var(--space-18);
  margin: var(--space-14) 0 0;
  border-top: 1px solid var(--line);
  padding-top: var(--space-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.asset-meta > div {
  min-width: 0;
}

.asset-meta dt {
  margin-bottom: var(--space-4);
  color: var(--muted);
  font-size: var(--text-8);
  font-weight: 700;
}

.asset-meta dd {
  color: var(--ink-soft);
  font-size: var(--text-10);
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 700;
}

.admin-assets .list-note {
  margin-top: var(--space-12);
  margin-bottom: var(--space-16);
}

.list-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.list-note {
  color: var(--muted);
  font-size: var(--text-9);
  margin: 0;
  line-height: 1.5;
}

.list-filters {
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.list-filters .filter-chip {
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
}

.list-loading {
  padding: var(--space-22) var(--space-12);
  color: var(--muted);
  font-size: var(--text-10);
  text-align: center;
  margin: 0;
}

.list-load-more {
  justify-content: center;
  display: flex;
}

.list-load-more .button {
  font-size: var(--text-10);
}

.site-preview-list {
  gap: var(--space-4);
  margin-top: 0;
  margin-bottom: var(--space-12);
  padding: 0;
  list-style: none;
  display: grid;
}

.site-preview-list li {
  align-items: center;
  gap: var(--space-10);
  border-bottom: 1px solid var(--line);
  padding: var(--space-10) 0;
  display: flex;
}

.site-preview-list li:last-child {
  border-bottom: 0;
}

.site-pin {
  color: var(--accent-strong);
  font-size: var(--text-15);
}

.site-preview-list li > span:last-child {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.site-preview-list strong {
  color: var(--ink);
  font-size: var(--text-9);
  overflow-wrap: anywhere;
}

.site-preview-list small {
  color: var(--muted);
  font-size: var(--text-8);
}

.panel > .recent-requests {
  margin: 0 var(--space-18) var(--space-12);
  padding: 0;
  list-style: none;
}

.recent-requests li {
  border-bottom: 1px solid var(--line);
}

.recent-requests li:last-child {
  border-bottom: 0;
}

.recent-request {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-10);
  min-height: 2.75rem;
  padding: var(--space-8) 0;
  display: flex;
}

@media (hover: hover) {
  .recent-request:hover strong {
    text-decoration: underline;
  }
}

.recent-request > span {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.recent-request strong {
  color: var(--ink);
  font-size: var(--text-9);
  overflow-wrap: anywhere;
}

.recent-request small {
  color: var(--muted);
  font-size: var(--text-8);
  line-height: 1.4;
}

.mobile-app-header {
  z-index: 5;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6) var(--space-10);
  border-bottom: 1px solid var(--line);
  min-height: 3.6875rem;
  padding: max(var(--space-6), env(safe-area-inset-top)) max(var(--space-16), env(safe-area-inset-right)) var(--space-6) max(var(--space-16), env(safe-area-inset-left));
  background: var(--paper);
  flex-wrap: wrap;
  flex: none;
  display: flex;
  position: sticky;
  top: 0;
}

.brand-compact {
  gap: var(--space-8);
  min-height: 2.75rem;
  color: var(--ink);
}

.brand-compact .brand-mark {
  width: 29px;
  height: 29px;
}

.brand-name {
  color: var(--ink);
  font-size: var(--text-14);
}

.mobile-header-actions {
  align-items: center;
  gap: var(--space-10);
  display: flex;
}

.mobile-header-actions .avatar {
  width: 1.875rem;
  height: 1.875rem;
}

.nav-rail {
  z-index: 5;
  width: calc(5.75rem - var(--space-6) + max(var(--space-6), env(safe-area-inset-left)));
  gap: var(--space-4);
  overscroll-behavior: contain;
  height: 100dvh;
  padding: max(var(--space-12), env(safe-area-inset-top)) var(--space-6) max(var(--space-12), env(safe-area-inset-bottom)) max(var(--space-6), env(safe-area-inset-left));
  background: var(--surface-dark);
  color: var(--on-surface-dark);
  flex-direction: column;
  display: none;
  position: sticky;
  top: 0;
  overflow: hidden auto;
}

.rail-brand {
  min-height: 2.75rem;
  margin-bottom: var(--space-8);
  flex: none;
  place-items: center;
  display: grid;
}

.nav-tab {
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  min-height: 3rem;
  padding: var(--space-4) var(--space-2);
  color: inherit;
  font: inherit;
  text-align: center;
  background: none;
  border: 0;
  border-radius: .75rem;
  flex-direction: column;
  display: flex;
  position: relative;
}

.nav-tab-icon {
  min-width: 3.25rem;
  min-height: 1.75rem;
  font-size: var(--text-17);
  border: 1px solid #0000;
  border-radius: 999px;
  place-items: center;
  line-height: 1;
  display: grid;
}

.nav-tab-label {
  max-width: 100%;
  font-size: var(--text-8);
  overflow-wrap: anywhere;
  font-weight: 650;
  line-height: 1.2;
}

.nav-tab-current .nav-tab-label {
  font-weight: 850;
}

.nav-rail .nav-tab {
  color: var(--on-surface-dark-muted);
  flex: none;
}

.nav-rail .nav-tab-label {
  font-size: var(--text-10);
}

@media (hover: hover) {
  .nav-rail .nav-tab:hover {
    background: var(--surface-dark-raised);
    color: var(--on-surface-dark);
  }
}

.nav-rail .nav-tab-current {
  color: var(--on-surface-dark);
}

.nav-rail .nav-tab-current .nav-tab-icon {
  border-color: var(--accent);
  background: var(--surface-dark-raised);
  color: var(--accent);
}

.mobile-bottom-nav {
  z-index: 5;
  gap: var(--space-2);
  border-top: 1px solid var(--line);
  padding: var(--space-6) max(var(--space-6), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-6), env(safe-area-inset-left));
  background: var(--paper);
  color: var(--muted);
  flex: none;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  display: grid;
  position: sticky;
  bottom: 0;
}

.mobile-bottom-nav .nav-tab-current {
  color: var(--accent-strong);
}

.mobile-bottom-nav .nav-tab-current .nav-tab-icon {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.nav-more {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.nav-more-button {
  width: 100%;
}

.nav-more-panel {
  z-index: 6;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  padding: var(--space-6);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-raised);
  text-align: left;
  border-radius: .875rem;
  margin: 0;
  overflow-y: auto;
}

.nav-more-panel[hidden] {
  display: none;
}

.nav-rail .nav-more-panel {
  top: max(var(--space-12), env(safe-area-inset-top));
  bottom: auto;
  right: auto;
  left: calc(calc(5.75rem - var(--space-6) + max(var(--space-6), env(safe-area-inset-left))) + var(--space-8));
  width: min(18rem, calc(100vw - calc(5.75rem - var(--space-6) + max(var(--space-6), env(safe-area-inset-left))) - 2 * var(--space-8) - env(safe-area-inset-right)));
  max-height: calc(100vh - 2 * var(--space-12));
  max-height: calc(100svh - max(var(--space-12), env(safe-area-inset-top)) - max(var(--space-12), env(safe-area-inset-bottom)));
  position: fixed;
}

.nav-more-list {
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.nav-more-item {
  align-items: center;
  gap: var(--space-10);
  min-height: 2.75rem;
  padding: var(--space-8) var(--space-10);
  color: var(--ink);
  font-size: var(--text-12);
  border-radius: .5625rem;
  font-weight: 650;
  display: flex;
}

@media (hover: hover) {
  .nav-more-item:hover {
    background: var(--paper-subtle);
  }
}

.nav-more-icon {
  width: 1.25rem;
  color: var(--muted);
  font-size: var(--text-16);
  flex: 0 0 1.25rem;
  place-items: center;
  display: grid;
}

.nav-more-current {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent-strong);
  font-weight: 850;
}

.nav-more-current .nav-more-icon {
  color: var(--accent-strong);
}

.nav-more-future {
  color: var(--muted);
  cursor: default;
}

.nav-more-future small {
  border: 1px solid var(--line);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-8);
  letter-spacing: .04em;
  border-radius: .3125rem;
  font-weight: 800;
}

.nav-more-leave {
  margin-top: var(--space-4);
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
}

.nav-more-leave .button {
  width: 100%;
  min-height: 2.75rem;
}

.nav-install {
  text-align: left;
  background: none;
  border: 0;
  width: 100%;
}

.install-offer {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-10) var(--space-14);
  margin-top: var(--space-18);
  border: 1px solid var(--line);
  padding: var(--space-12) var(--space-14);
  background: var(--paper);
  border-radius: .875rem;
  flex-wrap: wrap;
  display: flex;
}

.install-offer-why {
  color: var(--ink-soft);
  font-size: var(--text-13);
  flex: 14rem;
  margin: 0;
  line-height: 1.45;
}

.install-offer-actions {
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.install-offer-actions .button {
  min-height: var(--target-size);
}

.install-done {
  margin-top: var(--space-18);
}

@media (pointer: coarse) {
  .install-offer-actions .button {
    min-height: 3rem;
  }
}

@media (display-mode: standalone) {
  .nav-install, .install-offer {
    display: none;
  }
}

.nav-fold {
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-10) var(--space-12);
  color: var(--on-surface-dark-muted);
  font: inherit;
  font-size: var(--text-11);
  text-align: left;
  background: none;
  border: 0;
  border-radius: .5625rem;
  font-weight: 620;
  display: flex;
}

@media (hover: hover) {
  .nav-fold:hover {
    background: var(--surface-dark-raised);
    color: var(--on-surface-dark);
  }
}

.nav-fold-icon {
  width: 1.125rem;
  font-size: var(--text-16);
  flex: 0 0 1.125rem;
  place-items: center;
  display: grid;
}

.nav-rail .nav-fold {
  justify-content: center;
  gap: var(--space-4);
  min-height: 3rem;
  padding: var(--space-4) var(--space-2);
  font-size: var(--text-10);
  text-align: center;
  flex-direction: column;
  margin-top: auto;
  display: none;
}

@media (min-width: 37.5em), (orientation: landscape) and (not (min-height: 30em)) {
  .dashboard-layout {
    grid-template: "nav header"
                   "nav main" 1fr
                   / auto minmax(0, 1fr);
    display: grid;
  }

  .dashboard-layout > .sidebar, .dashboard-layout > .nav-rail {
    grid-area: nav;
  }

  .dashboard-layout > .mobile-app-header {
    grid-area: header;
  }

  .dashboard-layout > .dashboard-main {
    grid-area: main;
  }

  .mobile-app-header, .mobile-bottom-nav {
    display: none;
  }

  .nav-rail, .topbar {
    display: flex;
  }
}

@media (orientation: landscape) and (not (min-height: 30em)) {
  .mobile-app-header {
    padding-left: var(--space-16);
    display: flex;
    position: static;
  }

  .topbar, .rail-brand {
    display: none;
  }
}

@media (min-width: 75em) and (min-height: 30em) {
  .sidebar {
    display: flex;
  }

  .nav-rail, [data-sidebar="folded"] .sidebar {
    display: none;
  }

  [data-sidebar="folded"] .nav-rail, .nav-rail .nav-fold {
    display: flex;
  }
}

@media (pointer: coarse) {
  .nav-item, .nav-more-item, .nav-fold, .brand-compact, .rail-brand, .topbar-actions .button, .nav-more-leave .button {
    min-height: 3rem;
  }

  :root {
    --target-size: 3rem;
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .content-wrap {
    width: 100%;
    padding: var(--space-12) max(var(--space-14), env(safe-area-inset-right)) var(--space-22) max(var(--space-14), env(safe-area-inset-left));
    flex: 1;
  }

  .dashboard-layout .page-heading {
    margin-bottom: var(--space-16);
    display: block;
  }

  .dashboard-layout h1 {
    margin-bottom: var(--space-6);
    font-size: var(--text-title);
  }

  .dashboard-layout .eyebrow {
    margin-bottom: var(--space-6);
    font-size: var(--text-8);
  }

  .dashboard-layout .page-description {
    font-size: var(--text-10);
  }

  .dashboard-layout .metric-grid {
    gap: var(--space-10);
    margin: var(--space-12) 0;
  }

  .dashboard-layout .metric-card {
    gap: var(--space-8);
    padding: var(--space-12);
    border-radius: .6875rem;
  }

  .dashboard-layout .metric-label {
    font-size: var(--text-9);
  }

  .dashboard-layout .metric-icon {
    width: 1.625rem;
    height: 1.625rem;
    font-size: var(--text-13);
  }

  .dashboard-layout .metric-value {
    font-size: var(--text-22);
  }

  .dashboard-layout .metric-note {
    font-size: var(--text-8);
    align-items: flex-start;
  }

  .dashboard-layout .metric-note .demo-badge {
    display: none;
  }

  .dashboard-layout .panel {
    margin-top: var(--space-12);
    border-radius: .75rem;
  }

  .dashboard-layout .panel-heading {
    padding: var(--space-14) var(--space-14) var(--space-10);
  }

  .dashboard-layout .panel-heading h2 {
    font-size: var(--text-11);
  }

  .dashboard-layout .panel-detail {
    font-size: var(--text-8);
  }

  .dashboard-layout .panel > .table-scroll, .dashboard-layout .panel > .checklist, .dashboard-layout .panel > .photo-slots, .dashboard-layout .panel > .job-detail-grid, .dashboard-layout .panel > .report-summary, .dashboard-layout .panel > .report-fields, .dashboard-layout .panel > .filter-row, .dashboard-layout .panel > .site-preview-list, .dashboard-layout .panel > .compact-empty, .dashboard-layout .panel > .panel-body, .dashboard-layout .panel > .asset-toolbar, .dashboard-layout .panel > .asset-cards, .dashboard-layout .panel > .empty-state, .dashboard-layout .panel > .list-loading, .dashboard-layout .panel > .notice, .dashboard-layout .panel > .list-load-more, .dashboard-layout .panel > .list-note, .dashboard-layout .panel > .text-link {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .dashboard-layout .demo-notice {
    margin-bottom: var(--space-12);
    font-size: var(--text-9);
  }

  .dashboard-layout .coming-soon-body {
    margin: 0 var(--space-14) var(--space-14);
  }

  .dashboard-layout .coming-soon-body p {
    font-size: var(--text-10);
  }
}

.client-hero {
  gap: var(--space-8);
  margin: var(--space-12) 0;
  padding: var(--space-18);
  background: var(--surface-dark);
  color: var(--on-surface-dark);
  box-shadow: var(--shadow-hero);
  border-radius: .875rem;
  display: grid;
}

.client-home {
  align-items: start;
  gap: var(--space-14);
  margin: var(--space-12) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
  display: grid;
}

.client-home > .client-hero, .client-home > .metric-grid {
  margin: 0;
}

.hero-kicker {
  color: var(--accent);
  font-size: var(--text-8);
  letter-spacing: .14em;
  font-weight: 850;
}

.client-hero h2 {
  font-size: var(--text-20);
}

.client-hero > p, .client-help-hours {
  max-width: 18.75rem;
  margin: 0 0 var(--space-4);
  color: var(--on-surface-dark-muted);
  font-size: var(--text-10);
  line-height: 1.5;
}

.client-form-preview {
  max-width: 36.25rem;
  margin: 0 auto;
}

.request-form {
  gap: var(--space-12);
  display: grid;
}

.settings-form, .work-request-fieldset, .professional-fieldset, .electrician-fieldset, .public-request-form, .client-request-form, .professional-done-form, .work-request-action-form, .work-request-close-confirm, .operator-form-box, .field-report-form {
  container: form-section / inline-size;
}

.form-step {
  gap: var(--space-10);
  border: 1px solid var(--line);
  padding: var(--space-14);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: .75rem;
  display: grid;
}

.form-step-heading {
  align-items: center;
  gap: var(--space-10);
  margin-bottom: var(--space-2);
  display: flex;
}

.form-step-heading > span {
  background: var(--accent-soft);
  width: 1.4375rem;
  height: 1.4375rem;
  color: var(--accent-strong);
  font-size: var(--text-10);
  border-radius: 50%;
  place-items: center;
  font-weight: 850;
  display: grid;
}

.form-step-heading h2 {
  color: var(--ink);
  font-size: var(--text-11);
}

.request-form label {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-12);
  font-weight: 750;
}

.request-form input, .request-form select, .request-form textarea {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-10) var(--space-10);
  background: var(--paper-subtle);
  color: var(--ink);
  font-size: var(--text-16);
  border-radius: .5rem;
}

.request-form textarea {
  resize: vertical;
  min-height: 4.6875rem;
}

.form-pair {
  align-items: start;
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.request-form input:-webkit-autofill {
  box-shadow: inset 0 0 0 1000px var(--paper-subtle);
}

.request-form input:-webkit-autofill:hover {
  box-shadow: inset 0 0 0 1000px var(--paper-subtle);
}

.request-form input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--paper-subtle);
}

.request-form textarea:-webkit-autofill {
  box-shadow: inset 0 0 0 1000px var(--paper-subtle);
}

.request-form textarea:-webkit-autofill:hover {
  box-shadow: inset 0 0 0 1000px var(--paper-subtle);
}

.request-form textarea:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--paper-subtle);
}

.request-form select:-webkit-autofill {
  box-shadow: inset 0 0 0 1000px var(--paper-subtle);
}

.request-form select:-webkit-autofill:hover {
  box-shadow: inset 0 0 0 1000px var(--paper-subtle);
}

.request-form select:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--paper-subtle);
}

:is(.request-form input:autofill, .request-form textarea:autofill, .request-form select:autofill) {
  background-color: var(--paper-subtle);
}

.request-form input::placeholder, .request-form textarea::placeholder {
  color: var(--muted);
}

.request-form input:focus-visible, .request-form select:focus-visible, .request-form textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.request-form input:disabled, .request-form select:disabled, .request-form textarea:disabled {
  cursor: not-allowed;
  opacity: .65;
}

.request-form :is(input, select, textarea)[aria-invalid="true"], .form-stack input[aria-invalid="true"], .field-report-form textarea[aria-invalid="true"] {
  border-color: var(--status-problem-text);
}

.field-hint, .form-demo-note {
  color: var(--muted);
  font-size: var(--text-11);
  margin: 0;
  line-height: 1.5;
}

.form-demo-note {
  border-left: 3px solid var(--accent-strong);
  padding: var(--space-8) var(--space-10);
  background: var(--accent-soft);
}

.form-success, .form-error {
  padding: var(--space-10);
  font-size: var(--text-13);
  border-radius: .5rem;
  margin: 0;
  line-height: 1.5;
}

.form-success {
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
}

.form-success a {
  color: var(--status-ok-text);
  font-weight: 750;
  text-decoration: underline;
}

.form-error {
  background: var(--status-problem-bg);
  color: var(--status-problem-text);
}

.request-form .button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.submit-row {
  display: grid;
}

@media not (min-width: 37.5em), (orientation: landscape) and (not (min-height: 30em)) {
  .sticky-actions {
    z-index: 4;
    bottom: max(var(--bottom-bar-height), var(--keyboard-inset));
    padding-block: var(--space-8) max(var(--space-8), calc(env(safe-area-inset-bottom) - var(--bottom-bar-height) - var(--keyboard-inset)));
    background: var(--paper);
    position: sticky;
  }

  input, select, textarea {
    scroll-margin-bottom: calc(var(--bottom-bar-height) + 6rem);
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .request-form input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), .dashboard-layout .request-form select, .dashboard-layout .request-form .settings-choice, .dashboard-layout .request-form .schedule-day {
    min-height: var(--target-size);
  }
}

.electrician-inbox-source {
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-10) 0;
  color: var(--muted);
  font-size: var(--text-9);
  font-weight: 750;
  display: flex;
}

.electrician-inbox-source > span {
  background: var(--accent-soft);
  width: 1.125rem;
  height: 1.125rem;
  color: var(--accent-strong);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.panel > .electrician-work-order-list {
  margin: 0 var(--space-18) var(--space-16);
}

.electrician-work-order-list {
  gap: var(--space-10);
  display: grid;
}

.electrician-work-order-card {
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-14);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  border-radius: .6875rem;
}

.electrician-work-order-top {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.electrician-work-order-card h3 {
  margin: var(--space-12) 0 var(--space-4);
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.electrician-work-order-site {
  align-items: center;
  gap: var(--space-6);
  color: var(--muted);
  font-size: var(--text-10);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
  display: flex;
}

.electrician-work-order-site > span {
  color: var(--accent-strong);
}

.electrician-work-order-scope {
  margin-top: var(--space-12);
  border-left: 3px solid var(--accent);
  padding: var(--space-8) var(--space-10);
  background: var(--accent-soft);
  border-radius: 0 .4375rem .4375rem 0;
}

.electrician-work-order-scope > span {
  color: var(--accent-strong);
  font-size: var(--text-8);
  letter-spacing: .12em;
  font-weight: 850;
}

.electrician-work-order-scope p {
  margin: var(--space-4) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-10);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.55;
}

.electrician-work-order-asset {
  margin: var(--space-10) 0 0;
  color: var(--muted);
  font-size: var(--text-9);
}

.electrician-work-order-date {
  margin-top: var(--space-10);
  color: var(--muted);
  font-size: var(--text-8);
  display: block;
}

.electrician-work-order-action {
  margin-top: var(--space-12);
}

.field-report-form {
  gap: var(--space-14);
  display: grid;
}

.field-report-form label {
  gap: var(--space-6);
  color: var(--ink-soft);
  font-size: var(--text-11);
  font-weight: 750;
  display: grid;
}

.field-report-form .field-report-label {
  align-items: baseline;
  gap: var(--space-4);
  display: flex;
}

.field-report-form .field-report-label em {
  color: var(--accent-strong);
  font-style: normal;
}

.field-report-form textarea {
  resize: vertical;
  border: 1px solid var(--line-strong);
  width: 100%;
  min-height: 4.5rem;
  padding: var(--space-10) var(--space-12);
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: var(--text-16);
  border-radius: .5rem;
  line-height: 1.55;
}

.field-report-form textarea:focus {
  outline: 3px solid var(--accent-soft);
  border-color: var(--focus);
}

.field-report-form label > small {
  color: var(--muted);
  font-size: var(--text-9);
  font-weight: 500;
}

.field-report-form .notice {
  margin: 0;
}

.field-report-field {
  gap: var(--space-6);
  display: grid;
}

.field-report-readonly {
  color: var(--ink-soft);
  font-size: var(--text-12);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.65;
}

@media not (min-width: 37.5em) {
  .dashboard-layout .panel > .electrician-work-order-list {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .dashboard-layout .electrician-inbox-source {
    margin: var(--space-10) 0;
    font-size: var(--text-8);
  }

  .dashboard-layout .electrician-work-order-card {
    padding: var(--space-12);
  }

  .dashboard-layout .electrician-work-order-card h3 {
    font-size: var(--text-12);
  }

  .dashboard-layout .electrician-work-order-scope p {
    font-size: var(--text-9);
  }
}

.button-soft.button-full {
  min-height: 2.1875rem;
  margin-top: var(--space-4);
  font-size: var(--text-9);
}

.job-detail-grid, .report-fields {
  gap: var(--space-10) var(--space-8);
  margin-top: var(--space-4);
  margin-bottom: var(--space-14);
  grid-template-columns: minmax(5.9375rem, .8fr) 1.4fr;
  display: grid;
}

.job-detail-grid > span, .report-fields span {
  color: var(--muted);
  font-size: var(--text-8);
}

.job-detail-grid strong, .report-fields strong {
  color: var(--ink);
  font-size: var(--text-9);
}

.panel > .job-detail-grid + .status-badge {
  margin: 0 var(--space-14) var(--space-14);
}

.checklist {
  margin-top: 0;
  margin-bottom: var(--space-8);
  gap: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.checklist li {
  align-items: center;
  gap: var(--space-8);
  border-bottom: 1px solid var(--line);
  padding: var(--space-10) var(--space-2);
  color: var(--muted);
  font-size: var(--text-9);
  display: flex;
}

.checklist li:last-child {
  border-bottom: 0;
}

.checklist li span {
  color: var(--accent-strong);
  font-size: var(--text-12);
  font-weight: 900;
}

.checklist li:not(.checked) span {
  color: var(--line-strong);
}

.photo-slots {
  gap: var(--space-10);
  margin-top: 0;
  margin-bottom: var(--space-14);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.photo-slots > div {
  align-content: center;
  justify-items: center;
  gap: var(--space-6);
  border: 1px dashed var(--line-strong);
  background: var(--paper-subtle);
  min-height: 4.5rem;
  color: var(--accent-strong);
  font-size: var(--text-17);
  border-radius: .5625rem;
  display: grid;
}

.photo-slots span {
  color: var(--muted);
  font-size: var(--text-8);
  font-weight: 700;
}

.report-summary {
  margin-top: var(--space-2);
  margin-bottom: var(--space-14);
}

.report-summary p {
  margin: var(--space-10) 0 0;
  color: var(--muted);
  font-size: var(--text-9);
  line-height: 1.6;
}

.report-fields {
  margin-bottom: var(--space-14);
  border-top: 1px solid var(--line);
  padding-top: var(--space-12);
}

.page-state {
  min-height: 100dvh;
  padding: max(var(--space-22), env(safe-area-inset-top)) max(var(--space-22), env(safe-area-inset-right)) max(var(--space-22), env(safe-area-inset-bottom)) max(var(--space-22), env(safe-area-inset-left));
  background: var(--canvas);
  place-items: center;
  display: grid;
  position: relative;
}

.state-card {
  border: 1px solid var(--line);
  width: min(100%, 32.5rem);
  padding: var(--space-28);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: 1rem;
}

.state-card .brand-mark {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-18);
  border-radius: 10px;
  padding: 6px;
}

.state-card h1 {
  font-size: var(--text-title);
}

.state-actions {
  gap: var(--space-10);
  margin-top: var(--space-20);
  flex-wrap: wrap;
  display: flex;
}

@media (max-width: 70em) {
  .content-wrap {
    padding-right: max(var(--space-26), env(safe-area-inset-right));
    padding-left: var(--space-26);
  }
}

@media not (min-width: 52.5em) {
  .topbar {
    min-height: 3.875rem;
  }
}

@media (max-width: 40.625em) {
  .login-layout, .page-state {
    padding-top: calc(max(var(--space-16), env(safe-area-inset-top)) + var(--space-16) + 44px);
  }

  .topbar {
    align-items: flex-start;
    gap: var(--space-10);
    padding: max(var(--space-12), env(safe-area-inset-top)) max(var(--space-18), env(safe-area-inset-right)) var(--space-12) var(--space-18);
    flex-direction: column;
  }

  .topbar-actions {
    justify-content: space-between;
    gap: var(--space-8);
    width: 100%;
  }

  .topbar-user {
    margin-left: auto;
  }

  .content-wrap {
    padding: var(--space-22) max(var(--space-16), env(safe-area-inset-right)) var(--space-36) var(--space-16);
  }

  .page-heading {
    align-items: flex-start;
    gap: var(--space-12);
    flex-direction: column;
  }

  .panel-heading {
    padding-right: var(--space-14);
    padding-left: var(--space-14);
  }

  .coming-soon-body, .panel > .table-scroll, .panel > .checklist, .panel > .photo-slots, .panel > .job-detail-grid, .panel > .report-summary, .panel > .report-fields, .panel > .filter-row, .panel > .site-preview-list, .panel > .compact-empty, .panel > .panel-body, .panel > .operator-incident-queue, .panel > .recent-requests, .panel > .electrician-work-order-list {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .asset-toolbar {
    grid-template-columns: 1fr auto;
  }

  .asset-toolbar label {
    grid-column: 1 / -1;
  }

  .asset-cards {
    grid-template-columns: 1fr;
  }

  .asset-card {
    padding: var(--space-12);
  }

  .operator-incident-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .operator-incident-toolbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .operator-incident-card {
    padding: var(--space-12);
  }

  .list-toolbar {
    align-items: flex-start;
  }
}

@media (max-width: 24.375em) {
  .dashboard-layout .content-wrap {
    padding-right: max(var(--space-12), env(safe-area-inset-right));
    padding-left: max(var(--space-12), env(safe-area-inset-left));
  }
}

@container panel (max-width: 15rem) {
  .operator-incident-toolbar, .asset-toolbar, .asset-meta, .job-detail-grid, .report-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .page-heading-action {
    margin-top: var(--space-10);
  }

  .dashboard-layout .page-heading-action .button, .dashboard-layout .panel > .text-link, .dashboard-layout .recent-request {
    min-height: var(--target-size);
  }

  .dashboard-layout .operator-incident-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-layout .operator-incident-filter select {
    min-height: var(--target-size);
  }

  .dashboard-layout .operator-incident-toolbar-actions .button, .dashboard-layout .operator-incident-pagination .button {
    min-height: var(--target-size);
    font-size: var(--text-12);
    flex: 8.75rem;
  }

  .dashboard-layout .operator-incident-action-buttons .button {
    min-height: var(--target-size);
    font-size: var(--text-12);
    flex: 100%;
  }

  .dashboard-layout .asset-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-layout .asset-toolbar select, .dashboard-layout .asset-toolbar .button, .dashboard-layout .admin-assets .list-load-more .button {
    min-height: var(--target-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.monitoring-view {
  gap: var(--space-18);
  min-width: 0;
  display: grid;
}

.monitoring-view .page-heading, .monitoring-view .demo-notice {
  margin-bottom: 0;
}

.monitoring-controls {
  gap: var(--space-10);
  margin: 0 var(--space-20) var(--space-16);
  grid-template-columns: minmax(0, 1fr) auto;
  display: grid;
}

.monitoring-controls label {
  grid-column: 1 / -1;
  font-weight: 700;
}

.monitoring-controls select {
  min-width: 0;
  max-width: 100%;
  padding: var(--space-10);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-16);
  border-radius: .5rem;
}

.monitoring-pagination {
  align-items: center;
  gap: var(--space-10);
  margin: 0 var(--space-20) var(--space-18);
  flex-wrap: wrap;
  display: flex;
}

.monitoring-source {
  gap: var(--space-10);
  margin: 0 var(--space-20) var(--space-20);
  overflow-wrap: anywhere;
  display: grid;
}

.monitoring-source .status-badge {
  justify-self: start;
}

.monitoring-source p, .monitoring-device p, .monitoring-alarm p {
  color: var(--muted);
  font-size: var(--text-13);
  margin: 0;
  line-height: 1.6;
}

.monitoring-devices {
  gap: var(--space-14);
  margin: 0 var(--space-20) var(--space-20);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.monitoring-device, .monitoring-alarm {
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-16);
  overflow-wrap: anywhere;
  border-radius: .75rem;
}

.monitoring-device h3, .monitoring-alarm h3 {
  margin: var(--space-8) 0;
  font-size: var(--text-15);
}

.monitoring-measurement {
  gap: var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-14);
  border-top: 1px solid var(--line);
  display: grid;
}

.monitoring-measurement strong {
  font-size: var(--text-26);
  color: var(--ink);
}

.monitoring-measurement small {
  color: var(--muted);
  line-height: 1.5;
}

.monitoring-alarms {
  gap: var(--space-10);
  margin: 0 var(--space-20) var(--space-20);
  display: grid;
}

.monitoring-no-consent {
  gap: var(--space-4);
  display: grid;
}

.monitoring-no-consent strong {
  font-size: var(--text-13);
}

.monitoring-no-consent p {
  font-size: var(--text-13);
  margin: 0;
}

@media (max-width: 40.625em) {
  .monitoring-controls, .monitoring-devices {
    grid-template-columns: minmax(0, 1fr);
  }

  .monitoring-controls, .monitoring-pagination, .monitoring-source, .monitoring-devices, .monitoring-alarms {
    margin-left: var(--space-14);
    margin-right: var(--space-14);
  }

  .monitoring-pagination .button {
    flex: 6.875rem;
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .monitoring-controls select, .dashboard-layout .monitoring-controls .button, .dashboard-layout .monitoring-pagination .button, .dashboard-layout .monitoring-view .panel-body .button {
    min-height: var(--target-size);
  }
}

.settings-sections {
  gap: var(--space-8);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.settings-sections a {
  border: 1px solid var(--line);
  min-height: 2.125rem;
  padding: var(--space-8) var(--space-12);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: var(--text-11);
  border-radius: .5rem;
  align-items: center;
  font-weight: 700;
  display: inline-flex;
}

@media (hover: hover) {
  .settings-sections a:hover {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--ink);
  }
}

.settings-panel {
  scroll-margin-top: 4.5rem;
}

.panel > .device-setting, .panel > .device-line {
  margin: 0 var(--space-18) var(--space-18);
}

.device-setting {
  gap: var(--space-6);
  max-width: 35rem;
  display: grid;
}

.device-switch {
  align-items: center;
  gap: var(--space-10);
  min-height: 2.75rem;
  color: var(--ink);
  font-size: var(--text-13);
  cursor: pointer;
  font-weight: 700;
  display: flex;
}

.device-switch input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--accent-strong);
  cursor: pointer;
  flex: none;
  margin: 0;
}

.device-line {
  color: var(--ink-soft);
  font-size: var(--text-13);
  line-height: 1.5;
}

@media (pointer: coarse) {
  .device-switch {
    min-height: 3rem;
  }
}

.panel > .settings-form {
  max-width: 35rem;
  margin: 0 var(--space-18) var(--space-18);
}

.settings-field {
  gap: var(--space-6);
  display: grid;
}

.settings-form .field-readonly {
  background: var(--surface-muted);
  color: var(--ink-soft);
  cursor: default;
}

.field-error {
  color: var(--status-problem-text);
  font-size: var(--text-12);
  margin: 0;
  font-weight: 650;
  line-height: 1.45;
}

.settings-actions {
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

@media not (min-width: 37.5em) {
  .dashboard-layout .panel > .settings-form {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .dashboard-layout .settings-actions .button {
    width: 100%;
  }
}

@media (max-width: 40.625em) {
  .panel > .settings-form {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .settings-actions .button {
    width: 100%;
  }
}

.settings-group {
  gap: var(--space-12);
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
}

.settings-group + .settings-group {
  margin-top: var(--space-8);
}

.settings-group legend {
  margin-bottom: var(--space-2);
  color: var(--ink);
  font-size: var(--text-13);
  padding: 0;
  font-weight: 800;
}

.request-form .settings-label {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-12);
  font-weight: 750;
}

.schedule-days {
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.request-form .schedule-day {
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  border: 1px solid var(--line-strong);
  min-width: 3.375rem;
  min-height: 2.75rem;
  padding: 0 var(--space-10);
  background: var(--paper-subtle);
  color: var(--ink-soft);
  font-size: var(--text-13);
  cursor: pointer;
  border-radius: .5rem;
  margin: 0;
  display: inline-flex;
}

.request-form .schedule-day input {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  accent-color: var(--accent-strong);
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.request-form .schedule-day:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--ink);
}

.request-form .schedule-day:has(input:disabled) {
  cursor: not-allowed;
  opacity: .65;
}

.schedule-hours {
  gap: var(--space-10);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 22.5rem;
  display: grid;
}

.schedule-preview {
  padding: var(--space-10) var(--space-12);
  background: var(--surface-muted);
  color: var(--ink-soft);
  font-size: var(--text-12);
  border-radius: .5rem;
  margin: 0;
  line-height: 1.5;
}

.panel > .people-list {
  margin: 0 var(--space-18) var(--space-18);
}

.people-list {
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.people-list .notice {
  font-size: var(--text-11);
  margin: 0;
}

.people-list .list-note {
  margin: 0;
}

.people-table {
  min-width: 56.25rem;
}

.people-name {
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  display: inline-flex;
}

.people-profession {
  color: var(--muted);
}

.people-badges {
  gap: var(--space-6);
  flex-wrap: wrap;
  display: inline-flex;
}

.people-phone {
  white-space: nowrap;
}

.people-muted {
  color: var(--muted);
}

.people-actions {
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  display: flex;
}

.people-actions .button {
  min-height: 2rem;
  padding: var(--space-6) var(--space-10);
  font-size: var(--text-10);
}

.people-action-hint {
  color: var(--muted);
  font-size: var(--text-9);
  flex-basis: 100%;
}

@media (max-width: 40.625em) {
  .panel > .people-list {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }
}

.people-toolbar {
  flex-wrap: wrap;
}

.people-toolbar-actions {
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.operator-form-box {
  gap: var(--space-10);
  border: 1px solid var(--line-strong);
  max-width: 35rem;
  padding: var(--space-14);
  background: var(--paper);
  border-radius: .625rem;
  display: grid;
}

.operator-form-title {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 800;
  line-height: 1.45;
}

.operator-form-actions .button {
  min-width: min(100%, 8.75rem);
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.people-actions .file-action-hint {
  font-size: var(--text-9);
}

.people-actions .account-confirm, .people-actions .temporary-password-panel {
  min-width: 16.25rem;
}

.people-table tr:has(.account-confirm, .temporary-password-panel) > td {
  vertical-align: top;
}

@media not (min-width: 37.5em) {
  .dashboard-layout .settings-sections a, .dashboard-layout .settings-actions .button, .dashboard-layout .people-list .list-load-more .button {
    min-height: var(--target-size);
  }

  .dashboard-layout .people-toolbar > .sheet-host, .dashboard-layout .people-toolbar-actions {
    flex: 100%;
  }

  .dashboard-layout .people-toolbar .filter-chip {
    min-height: var(--target-size);
    padding: var(--space-8) var(--space-14);
    font-size: var(--text-12);
  }

  .dashboard-layout .people-toolbar-actions .button, .dashboard-layout .people-actions > .button {
    min-height: var(--target-size);
    font-size: var(--text-12);
    flex: 8.75rem;
  }

  .dashboard-layout .people-actions .account-confirm, .dashboard-layout .people-actions .temporary-password-panel {
    min-width: 0;
  }

  .dashboard-layout .account-confirm-actions .button, .dashboard-layout .temporary-password-actions .button {
    min-height: var(--target-size);
    flex: 8.75rem;
  }
}

.panel > .equipment-categories {
  margin: 0 var(--space-18) var(--space-18);
}

.equipment-categories {
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.equipment-categories .notice {
  font-size: var(--text-11);
  margin: 0;
}

.equipment-categories .list-note, .equipment-categories-description {
  margin: 0;
}

.equipment-categories-description {
  color: var(--ink-soft);
  font-size: var(--text-12);
  line-height: 1.5;
}

.equipment-categories-toolbar {
  justify-content: flex-end;
}

.equipment-categories-toolbar .button {
  min-height: var(--target-size);
}

.equipment-category-list {
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.equipment-category {
  gap: var(--space-6);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-12) var(--space-14);
  background: var(--paper);
  border-radius: .625rem;
  display: grid;
}

.equipment-category-inactive {
  background: var(--paper-subtle);
}

.equipment-category-top {
  align-items: center;
  gap: var(--space-6) var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.equipment-category-position {
  color: var(--muted);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.equipment-category-name {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  font-weight: 800;
}

.equipment-category-inactive .equipment-category-name {
  color: var(--ink-soft);
}

.equipment-category-explanation {
  color: var(--ink-soft);
  font-size: var(--text-12);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
}

.equipment-category-no-explanation {
  color: var(--muted);
  font-style: italic;
}

.equipment-category-actions {
  gap: var(--space-6);
  flex-wrap: wrap;
  display: flex;
}

.equipment-category-actions .button {
  min-height: var(--target-size);
  padding: var(--space-6) var(--space-10);
  font-size: var(--text-10);
}

.equipment-category-form-box {
  gap: var(--space-10);
  border: 1px solid var(--line-strong);
  max-width: 35rem;
  padding: var(--space-14);
  background: var(--paper);
  border-radius: .625rem;
  display: grid;
}

.equipment-category-form-title {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 800;
  line-height: 1.45;
}

.equipment-category-form textarea {
  min-height: 5.5rem;
  line-height: 1.5;
}

.equipment-category-form-foot {
  justify-content: space-between;
  gap: var(--space-4) var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.equipment-category-count {
  flex: none;
}

.equipment-category-form-actions .button {
  min-height: var(--target-size);
  min-width: min(100%, 8.75rem);
  font-size: var(--text-13);
}

@media (max-width: 40.625em) {
  .panel > .equipment-categories {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .equipment-categories-toolbar .button, .dashboard-layout .equipment-category-actions > .button {
    font-size: var(--text-12);
    flex: 8.75rem;
  }
}

.client-help-actions {
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.client-help-ways {
  display: contents;
}

.client-help-actions > .button, .client-help-ways > .button {
  min-height: 2.75rem;
  font-size: var(--text-13);
  box-shadow: none;
}

.client-help-hours {
  flex: 100%;
}

.client-request-cta[hidden], .client-request[hidden] {
  display: none;
}

.client-request {
  gap: var(--space-10);
  min-width: 0;
  padding: var(--space-14);
  background: var(--paper);
  color: var(--ink);
  border-radius: .75rem;
  flex: 100%;
  display: grid;
}

.client-request :focus-visible {
  outline-color: var(--focus);
}

.client-request-field {
  gap: var(--space-6);
  display: grid;
}

.client-request-form label {
  color: var(--ink);
  font-size: var(--text-14);
  margin-top: 0;
}

.client-request-form input, .client-request-form select, .client-request-form textarea {
  font-size: var(--text-16);
}

.client-request-form textarea {
  line-height: 1.5;
}

.client-request-form .field-hint, .client-request-form .field-error, .client-request-form .notice {
  font-size: var(--text-13);
}

.client-request-form .notice {
  margin: 0;
}

.client-request-no-site a {
  font-weight: 750;
  text-decoration: underline;
}

.client-request-sender {
  color: var(--ink-soft);
  font-size: var(--text-13);
  margin: 0;
  line-height: 1.5;
}

.client-request-submit, .client-request-view, .client-request-again {
  width: 100%;
  min-height: 3rem;
  font-size: var(--text-15);
}

.client-request-confirmation {
  gap: var(--space-6);
  font-size: var(--text-14);
  display: grid;
}

.client-request-confirmation p {
  margin: 0;
}

.client-request-confirmation-title {
  font-size: var(--text-17);
  font-weight: 800;
  line-height: 1.3;
}

.client-request-confirmation:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 40.625em) {
  .client-help-actions {
    flex-direction: column;
  }
}

.client-requests {
  gap: var(--space-10);
  min-width: 0;
  display: grid;
}

.client-requests-cards {
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  container: cards / inline-size;
}

.client-request-card {
  gap: var(--space-6);
  border: 1px solid var(--line-strong);
  min-width: 0;
  min-height: 2.75rem;
  padding: var(--space-12) var(--space-40) var(--space-12) var(--space-14);
  background: var(--paper);
  color: var(--ink);
  border-radius: .75rem;
  display: grid;
  position: relative;
}

@media (hover: hover) {
  .client-request-card:hover {
    border-color: var(--accent-line);
    background: var(--paper-subtle);
  }
}

.client-request-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.client-request-card-current {
  border-color: var(--accent-strong);
  box-shadow: inset 4px 0 0 var(--accent-strong);
}

.client-request-card-problem {
  font-size: var(--text-16);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}

.client-request-card-site {
  color: var(--ink-soft);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.client-request-card-status {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4) var(--space-10);
  color: var(--muted);
  font-size: var(--text-13);
  flex-wrap: wrap;
  font-weight: 750;
  display: flex;
}

.client-request-card .status-badge, .client-request-detail .status-badge {
  padding: var(--space-6) var(--space-10);
  font-size: var(--text-12);
}

.client-request-card-closed {
  color: var(--ink-soft);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  font-weight: 750;
  line-height: 1.45;
}

.client-request-card-open {
  top: 50%;
  right: var(--space-14);
  color: var(--accent-strong);
  font-size: var(--text-24);
  font-weight: 800;
  line-height: 1;
  position: absolute;
  transform: translateY(-50%);
}

.client-requests-more, .client-requests-unavailable {
  gap: var(--space-8);
  display: grid;
}

.client-requests-more .notice, .client-requests-unavailable .notice {
  font-size: var(--text-14);
  margin: 0;
}

.client-requests-more .button, .client-requests-unavailable .button, .client-requests-empty .button {
  width: 100%;
  min-height: 3rem;
  font-size: var(--text-15);
}

.client-requests-empty {
  gap: var(--space-12);
  border: 1px solid var(--line);
  padding: var(--space-18) var(--space-14);
  background: var(--paper);
  border-radius: .75rem;
  display: grid;
}

.client-requests-empty p {
  color: var(--ink);
  font-size: var(--text-16);
  margin: 0;
  font-weight: 750;
  line-height: 1.4;
}

.client-request-missing {
  margin: 0 0 var(--space-12);
  font-size: var(--text-14);
}

.client-request-detail {
  justify-items: start;
  gap: var(--space-10);
  min-width: 0;
  display: grid;
}

.client-request-columns {
  justify-self: stretch;
  gap: var(--space-10);
  min-width: 0;
  display: grid;
}

.client-request-summary {
  justify-items: start;
  gap: var(--space-10);
  min-width: 0;
  display: grid;
}

.client-request-detail .client-request-detail-problem {
  color: var(--ink);
  font-size: var(--text-20);
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  justify-self: stretch;
  margin: 0;
  line-height: 1.4;
}

.client-request-detail-site, .client-request-detail-sent {
  color: var(--ink-soft);
  font-size: var(--text-15);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.45;
}

.client-request-history {
  justify-self: stretch;
  gap: var(--space-6);
  margin-top: var(--space-6);
  border: 1px solid var(--line);
  padding: var(--space-14);
  background: var(--paper);
  border-radius: .75rem;
  display: grid;
  container: history / inline-size;
}

.client-request-history h2 {
  color: var(--ink);
  font-size: var(--text-17);
}

.client-request-history ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.client-request-history li {
  gap: var(--space-2);
  border-top: 1px solid var(--line);
  padding: var(--space-10) 0;
  display: grid;
}

.client-request-history li:first-child {
  border-top: 0;
}

.client-request-history li:last-child {
  padding-bottom: 0;
}

.client-request-history-text {
  color: var(--ink);
  font-size: var(--text-15);
  overflow-wrap: anywhere;
  font-weight: 750;
  line-height: 1.4;
}

.client-request-history time {
  color: var(--muted);
  font-size: var(--text-13);
}

.electrician-profile-form {
  gap: 0;
}

.electrician-profile-form > .electrician-profile-hint {
  margin-top: var(--space-14);
}

.electrician-profile-form > .form-success, .electrician-profile-form > .form-error, .electrician-profile-form > .settings-actions {
  margin-top: var(--space-10);
}

.panel > .electrician-fieldset {
  margin: 0 var(--space-18) var(--space-18);
}

.partner-mark {
  justify-items: end;
  gap: var(--space-4);
  text-align: right;
  flex: 0 auto;
  max-width: 9.375rem;
  display: grid;
}

.partner-mark-hint {
  color: var(--muted);
  font-size: var(--text-9);
  line-height: 1.35;
}

.input-beside {
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.request-form .input-beside input {
  flex: 10rem;
  width: auto;
  min-width: 0;
}

.settings-choices {
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
  display: grid;
}

.request-form .settings-choice {
  align-items: center;
  gap: var(--space-10);
  border: 1px solid var(--line-strong);
  min-height: 2.75rem;
  padding: var(--space-6) var(--space-10);
  background: var(--paper-subtle);
  color: var(--ink-soft);
  font-size: var(--text-12);
  cursor: pointer;
  border-radius: .5rem;
  margin: 0;
  font-weight: 650;
  line-height: 1.3;
  display: flex;
}

.request-form .settings-choice input {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  accent-color: var(--accent-strong);
  cursor: pointer;
  flex: none;
  margin: 0;
  padding: 0;
}

.request-form .settings-choice:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--ink);
}

.request-form .settings-choice:has(input:disabled) {
  cursor: not-allowed;
  opacity: .65;
}

.time-off-list {
  gap: var(--space-10);
  display: grid;
}

.time-off-row {
  gap: var(--space-10);
  border: 1px solid var(--line);
  padding: var(--space-12);
  border-radius: .625rem;
  display: grid;
}

.time-off-dates {
  gap: var(--space-10);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.time-off-row .time-off-remove {
  justify-self: start;
}

.time-off-actions {
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

@container form-section (max-width: 15rem) {
  .schedule-hours, .time-off-dates {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .panel > .electrician-fieldset {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }
}

@media (max-width: 40.625em) {
  .panel > .electrician-fieldset {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }
}

.panel > .settings-readonly {
  margin: 0 var(--space-18) var(--space-18);
}

@media not (min-width: 37.5em) {
  .dashboard-layout .panel > .settings-readonly {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }
}

.settings-readonly {
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.settings-readonly-line {
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
}

.settings-readonly-list {
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.settings-readonly-list li {
  padding: var(--space-8) var(--space-10);
  background: var(--paper-subtle);
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  border-radius: .4375rem;
  line-height: 1.45;
}

.settings-readonly-empty {
  color: var(--muted);
}

.settings-readonly-note {
  color: var(--ink-soft);
  font-size: var(--text-12);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 40.625em) {
  .panel > .settings-readonly {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }
}

.settings-change-line a {
  min-height: 2.75rem;
  color: var(--accent-strong);
  overflow-wrap: anywhere;
  align-items: center;
  font-weight: 750;
  display: inline-flex;
}

@media (hover: hover) {
  .settings-change-line a:hover {
    text-decoration: underline;
  }
}

.help-toggle-button {
  min-width: var(--target-size);
  min-height: var(--target-size);
  color: var(--accent-strong);
  font: inherit;
  cursor: pointer;
  vertical-align: middle;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.help-toggle-mark {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  width: 1.375rem;
  height: 1.375rem;
  color: var(--accent-strong);
  font-size: var(--text-11);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
}

.help-toggle-open .help-toggle-mark {
  border-color: var(--accent-strong);
}

.help-toggle-text {
  margin-top: var(--space-4);
  border-left: 3px solid var(--accent-line);
  padding: var(--space-6) var(--space-10);
  color: var(--ink);
  font-size: var(--text-12);
  font-weight: 500;
  line-height: 1.5;
  display: block;
}

.help-toggle-text[hidden] {
  display: none;
}

@media (hover: hover) {
  .help-toggle-button:hover .help-toggle-mark {
    border-color: var(--accent-strong);
  }
}

.panel > .client-locations, .panel > .client-consents, .panel > .account-deletion {
  margin: 0 var(--space-18) var(--space-18);
}

@media not (min-width: 37.5em) {
  .dashboard-layout .panel > .client-locations, .dashboard-layout .panel > .client-consents, .dashboard-layout .panel > .account-deletion {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }
}

.client-locations, .client-consents, .account-deletion {
  gap: var(--space-10);
  min-width: 0;
  display: grid;
}

.client-location-card {
  gap: var(--space-8);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-12);
  border-radius: .625rem;
  display: grid;
}

.client-location-card h3 {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  margin: 0;
}

.client-location-card h4 {
  margin: var(--space-4) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-12);
}

.client-location-address {
  color: var(--ink-soft);
  font-size: var(--text-12);
  margin: 0;
  line-height: 1.45;
}

.client-location-missing {
  color: var(--muted);
}

.client-location-notice {
  padding: var(--space-10) var(--space-12);
  font-size: var(--text-12);
  margin: 0;
}

.client-equipment-list {
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.client-equipment-list li {
  padding: var(--space-8) var(--space-10);
  background: var(--paper-subtle);
  color: var(--ink-soft);
  font-size: var(--text-12);
  overflow-wrap: anywhere;
  border-radius: .4375rem;
  line-height: 1.45;
}

.client-equipment-empty {
  color: var(--muted);
  font-size: var(--text-12);
  margin: 0;
}

.client-equipment-category {
  color: var(--ink);
  font-weight: 750;
}

.client-equipment-help {
  margin-left: var(--space-2);
}

.client-locations-change {
  margin: 0;
}

.client-locations-change a {
  min-height: 2.75rem;
  color: var(--accent-strong);
  font-size: var(--text-12);
  align-items: center;
  font-weight: 750;
  display: inline-flex;
}

@media (hover: hover) {
  .client-locations-change a:hover {
    text-decoration: underline;
  }
}

.consent-list {
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.consent-row {
  gap: var(--space-10);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-12) var(--space-12);
  border-radius: .625rem;
  display: grid;
}

.consent-row-top {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.consent-text {
  gap: var(--space-2);
  min-width: 0;
  display: grid;
}

.consent-text strong {
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
}

.consent-text small {
  color: var(--muted);
  font-size: var(--text-11);
}

.client-consents .button, .account-deletion .button {
  width: 100%;
  min-height: 2.75rem;
}

.client-consents .notice, .account-deletion .notice {
  font-size: var(--text-12);
  margin: 0;
}

.account-deletion-explanation {
  color: var(--ink-soft);
  font-size: var(--text-12);
  margin: 0;
  line-height: 1.55;
}

.account-deletion-confirm {
  gap: var(--space-10);
  border: 1px solid var(--line-strong);
  padding: var(--space-12);
  border-radius: .625rem;
  display: grid;
}

.account-deletion-confirm p {
  color: var(--ink);
  font-size: var(--text-13);
  margin: 0;
  font-weight: 750;
}

.account-deletion-actions {
  gap: var(--space-8);
  display: grid;
}

.nav-count {
  border: 1px solid var(--accent-line);
  min-width: 1.375rem;
  min-height: 1.25rem;
  padding: 0 var(--space-6);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: var(--text-10);
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  font-weight: 850;
  line-height: 1;
  display: inline-flex;
}

.nav-count-done {
  border-color: color-mix(in srgb, var(--status-ok-text) 22%, var(--status-ok-bg));
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
}

.nav-count + .nav-count {
  margin-left: calc(var(--space-6) - var(--space-12));
}

.nav-tab-pills {
  align-items: flex-end;
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
  position: absolute;
  top: .125rem;
  right: .125rem;
}

.nav-tab-pills .nav-count + .nav-count {
  margin-left: 0;
}

.work-request-board, .work-request-list {
  gap: var(--space-14);
  min-width: 0;
  display: grid;
}

.work-request-board .work-request-section {
  margin-top: 0;
}

.work-request-board > .pull-refresh {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}

.work-request-board > .pull-refresh > :not(.work-request-section) {
  grid-column: 1 / -1;
}

.work-request-live {
  min-height: 1.25rem;
  color: var(--ink-soft);
  font-size: var(--text-13);
  margin: 0;
  font-weight: 750;
}

.work-request-notice {
  font-size: var(--text-12);
  margin: 0;
}

.work-request-cards {
  gap: var(--space-10);
  margin: 0 var(--space-18) var(--space-18);
  padding: 0;
  list-style: none;
  display: grid;
  container: cards / inline-size;
}

.work-request-list > .work-request-cards {
  margin: 0;
}

.work-request-card {
  gap: var(--space-8);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-14) var(--space-14);
  background: var(--paper);
  border-radius: .6875rem;
  transition: border-color .8s, box-shadow .8s;
  display: grid;
}

.work-request-arrived {
  border-color: var(--status-attention-text);
  box-shadow: 0 0 0 3px var(--status-attention-bg);
}

.work-request-card-top {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.work-request-card h3 {
  color: var(--ink);
  font-size: var(--text-15);
  overflow-wrap: anywhere;
  margin: 0;
}

.work-request-badges {
  gap: var(--space-6);
  flex-wrap: wrap;
  display: inline-flex;
}

.work-request-card-top > .status-badge {
  margin-right: auto;
}

.work-request-contact {
  align-items: center;
  gap: var(--space-2) var(--space-18);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.work-request-phone, .work-request-email {
  min-height: 2.125rem;
  color: var(--accent-strong);
  align-items: center;
  font-weight: 800;
  display: inline-flex;
}

.work-request-phone {
  font-size: var(--text-16);
}

.work-request-email {
  font-size: var(--text-13);
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .work-request-phone:hover, .work-request-email:hover {
    text-decoration: underline;
  }
}

.work-request-times {
  gap: var(--space-2) var(--space-14);
  color: var(--muted);
  font-size: var(--text-12);
  flex-wrap: wrap;
  margin: 0;
  line-height: 1.5;
  display: flex;
}

.work-request-progress {
  color: var(--ink-soft);
  font-weight: 750;
}

.work-request-about {
  color: var(--ink-soft);
  font-size: var(--text-12);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
}

.work-request-open {
  min-height: 2.25rem;
  font-size: var(--text-12);
  justify-self: start;
}

.work-request-card-actions {
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.work-request-take-button {
  min-height: 2.25rem;
  font-size: var(--text-12);
}

.work-request-closed-link {
  margin: 0;
}

.work-request-filters {
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.work-request-filters .filter-chip {
  min-height: 2.5rem;
  padding: var(--space-8) var(--space-14);
  font-size: var(--text-12);
  font-weight: 700;
}

@media (hover: hover) {
  .work-request-filters .filter-chip:hover {
    border-color: var(--accent-line);
    color: var(--ink);
  }

  .work-request-filters .filter-chip-active:hover {
    color: var(--accent-strong);
  }
}

.work-request-unavailable {
  justify-items: center;
  gap: var(--space-10);
  display: grid;
}

.work-request-more {
  justify-content: center;
  display: flex;
}

.work-request-more .button {
  min-height: 2.5rem;
  font-size: var(--text-12);
}

.work-request-done-name:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .work-request-done-name:hover {
    text-decoration: underline;
  }
}

.work-request-done-call {
  align-items: center;
  gap: var(--space-6) var(--space-14);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.work-request-call {
  gap: var(--space-4) var(--space-8);
  min-height: 2.75rem;
  font-size: var(--text-13);
  flex-wrap: wrap;
}

.work-request-call-number {
  font-variant-numeric: tabular-nums;
}

.work-request-done-note {
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.work-request-done-card .work-photos {
  max-width: 32.5rem;
}

.work-request-client-problem {
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

@media (max-width: 40.625em) {
  .work-request-cards {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .work-request-list > .work-request-cards {
    margin: 0;
  }
}

@container cards (max-width: 37.5rem) {
  .work-request-card {
    padding: var(--space-12);
  }

  .work-request-phone, .work-request-email {
    min-height: var(--target-size);
  }

  .work-request-open {
    min-height: var(--target-size);
    justify-self: stretch;
  }

  .work-request-card-actions > .button {
    min-height: var(--target-size);
    flex: 8.125rem;
  }

  .work-request-call {
    min-height: var(--target-size);
    flex: 100%;
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .pull-refresh-button, .dashboard-layout .work-request-filters .filter-chip, .dashboard-layout .work-request-unavailable .button {
    min-height: var(--target-size);
  }

  .dashboard-layout .work-request-more .button {
    width: 100%;
    min-height: var(--target-size);
  }

  .dashboard-layout .work-request-closed-link .text-link, .dashboard-layout .work-request-done-name {
    min-height: var(--target-size);
    align-items: center;
    display: inline-flex;
  }
}

.work-request-detail {
  gap: var(--space-14);
  min-width: 0;
  display: grid;
}

.work-request-detail > .panel, .work-request-readonly > .panel {
  margin-top: 0;
}

.work-request-detail-header {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.work-request-heading {
  align-items: flex-start;
  margin-bottom: 0;
}

.work-request-heading > div:first-child {
  min-width: 0;
}

.work-request-heading h1 {
  overflow-wrap: anywhere;
}

.work-request-title {
  align-items: center;
  gap: var(--space-4) var(--space-10);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.work-request-title h1 {
  margin-bottom: 0;
}

.work-request-detail-contact {
  margin: var(--space-6) 0 var(--space-2);
}

.work-request-detail-contact .work-request-phone, .work-request-detail-contact .work-request-email {
  min-height: 2.75rem;
}

.work-request-detail-contact .work-request-phone {
  font-size: var(--text-18);
}

.work-request-detail-notice {
  font-size: var(--text-13);
  margin: 0;
}

.work-request-detail-notice:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.work-request-take {
  justify-items: start;
  gap: var(--space-12);
  margin: 0 var(--space-18) var(--space-18);
  display: grid;
}

.work-request-take p {
  color: var(--ink-soft);
  font-size: var(--text-13);
  margin: 0;
  line-height: 1.55;
}

.work-request-take .button {
  min-height: 3rem;
  padding: var(--space-12) var(--space-22);
  font-size: var(--text-14);
}

.work-request-readonly {
  gap: var(--space-14);
  min-width: 0;
  display: grid;
}

.work-request-readonly-notice {
  font-size: var(--text-13);
  margin: 0;
}

.work-request-facts {
  gap: var(--space-10);
  margin: 0 var(--space-18) var(--space-18);
  display: grid;
}

.work-request-facts > div {
  gap: var(--space-2) var(--space-14);
  grid-template-columns: minmax(8.125rem, 12.5rem) minmax(0, 1fr);
  display: grid;
}

.work-request-facts dt {
  color: var(--muted);
  font-size: var(--text-12);
  font-weight: 700;
  line-height: 1.5;
}

.work-request-facts dd {
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
}

.work-request-problem {
  white-space: pre-wrap;
}

.work-request-facts .work-request-fact-link {
  min-height: 2.75rem;
  font-size: var(--text-13);
  display: inline-flex;
}

.work-request-fact-note {
  color: var(--muted);
  font-size: var(--text-11);
  line-height: 1.45;
  display: block;
}

.work-request-panel-text {
  margin: 0 var(--space-18) var(--space-18);
  color: var(--ink);
  font-size: var(--text-13);
  line-height: 1.5;
}

.work-request-panel-body {
  margin: 0 var(--space-18) var(--space-18);
}

.work-request-frames {
  gap: var(--space-6);
  margin: 0 var(--space-18) var(--space-18);
  padding-left: var(--space-18);
  color: var(--ink);
  font-size: var(--text-13);
  line-height: 1.5;
  display: grid;
}

.work-request-history {
  gap: var(--space-8);
  margin: 0 var(--space-18) var(--space-18);
  padding: 0;
  list-style: none;
  display: grid;
  container: history / inline-size;
}

.work-request-history li {
  gap: var(--space-2) var(--space-12);
  border-top: 1px solid var(--line);
  padding-top: var(--space-8);
  font-size: var(--text-13);
  grid-template-columns: minmax(6.875rem, 9.375rem) minmax(6.875rem, 12.5rem) minmax(0, 1fr);
  line-height: 1.45;
  display: grid;
}

.work-request-history li:first-child {
  border-top: 0;
  padding-top: 0;
}

.work-request-history time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.work-request-history-who {
  color: var(--ink);
  overflow-wrap: anywhere;
  font-weight: 750;
}

.work-request-history-what {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.work-request-rounds {
  gap: var(--space-12);
  margin: 0 var(--space-18) var(--space-18);
  padding: 0;
  list-style: none;
  display: grid;
}

.work-request-round {
  gap: var(--space-8);
  border-top: 1px solid var(--line);
  min-width: 0;
  padding-top: var(--space-12);
  display: grid;
}

.work-request-round:first-child {
  border-top: 0;
  padding-top: 0;
}

.work-request-round-who {
  color: var(--ink);
  font-size: var(--text-13);
  margin: 0;
  font-weight: 750;
  line-height: 1.5;
}

.work-request-round-note {
  color: var(--ink);
  font-size: var(--text-13);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.55;
}

.work-request-round .work-photos {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
  max-width: 45rem;
}

.work-request-round-returned {
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
}

.work-request-missing-notice {
  margin: 0 0 var(--space-14);
  font-size: var(--text-13);
}

.work-request-unavailable-actions {
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.work-request-unavailable-actions .button {
  min-height: 2.75rem;
}

@media (max-width: 40.625em) {
  .work-request-take, .work-request-facts, .work-request-panel-text, .work-request-panel-body, .work-request-frames, .work-request-history, .work-request-rounds {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .work-request-take .button {
    width: 100%;
  }

  .work-request-facts > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container history (max-width: 35rem) {
  .work-request-history li {
    grid-template-columns: minmax(0, 1fr);
  }
}

.work-request-form {
  gap: 0;
}

.work-request-form > .panel {
  margin-top: 0;
}

.work-request-form > .panel + .panel {
  margin-top: var(--space-14);
}

.panel > .work-request-fieldset {
  max-width: 45rem;
  margin: 0 var(--space-18) var(--space-18);
}

.work-request-map-panel > .work-request-fieldset {
  max-width: 60rem;
}

.work-request-form > .form-success, .work-request-form > .form-error, .work-request-form > .settings-actions {
  margin-top: var(--space-12);
}

.work-request-form textarea {
  min-height: 7.5rem;
}

.work-request-client-words {
  gap: var(--space-6);
  margin: 0;
  display: grid;
}

.work-request-detail > .work-request-client-words {
  max-width: 45rem;
}

.work-request-client-words dt {
  color: var(--ink-soft);
  font-size: var(--text-12);
  font-weight: 750;
}

.work-request-client-words dd {
  border-left: 3px solid var(--line-strong);
  padding: var(--space-10) var(--space-12);
  background: var(--paper-subtle);
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  border-radius: 0 .5rem .5rem 0;
  margin: 0;
  line-height: 1.55;
}

.work-request-actions .button {
  min-width: min(100%, 8.75rem);
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.time-frame-list {
  gap: var(--space-10);
  display: grid;
}

.time-frame-row {
  gap: var(--space-8);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-10);
  border-radius: .625rem;
  display: grid;
}

.time-frame-inputs {
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.time-frame-inputs .time-frame-date {
  flex: 1.35 6.25rem;
}

.time-frame-inputs .time-frame-time {
  flex: 4.625rem;
}

.request-form .time-frame-inputs input {
  padding-right: var(--space-8);
  padding-left: var(--space-8);
}

.time-frame-row .time-frame-remove {
  justify-self: start;
  min-height: 2.75rem;
}

.time-frame-actions {
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.time-frame-actions .button {
  min-height: 2.75rem;
}

.address-fields {
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.address-row {
  gap: var(--space-10);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.address-street-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem);
}

.address-unit-row {
  gap: var(--space-8);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

@media (max-width: 40.625em) {
  .panel > .work-request-fieldset {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .work-request-actions .button {
    width: 100%;
  }
}

@container form-section (max-width: 35rem) {
  .address-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .address-street-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 5.75rem);
  }
}

@container form-section (max-width: 22.5rem) {
  .address-unit-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container form-section (max-width: 15rem) {
  .address-street-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.panel > .work-request-service-form {
  max-width: 45rem;
  margin: 0 var(--space-18) var(--space-18);
}

.work-request-service-modes {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
}

.work-request-service-hint {
  font-size: var(--text-12);
}

.work-request-service-form textarea {
  min-height: 5.5rem;
}

.work-request-prices {
  gap: var(--space-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.work-request-price-fixed {
  border: 1px solid var(--line);
  padding: var(--space-10) var(--space-12);
  background: var(--surface-muted);
  border-radius: .5rem;
  align-content: start;
}

.work-request-price-value {
  color: var(--ink);
  font-size: var(--text-16);
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-weight: 800;
}

.work-request-difference {
  gap: var(--space-2);
  display: grid;
}

.work-request-difference p {
  color: var(--ink);
  font-size: var(--text-14);
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-weight: 800;
}

.work-request-service-form > .form-success, .work-request-service-form > .form-error {
  margin-top: var(--space-2);
}

@media (max-width: 40.625em) {
  .panel > .work-request-service-form {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }
}

@container form-section (max-width: 26.25rem) {
  .work-request-prices {
    grid-template-columns: minmax(0, 1fr);
  }
}

.work-request-professionals {
  gap: var(--space-14);
  min-width: 0;
  margin: 0 var(--space-18) var(--space-18);
  display: grid;
}

.work-request-professionals .notice, .work-request-professionals .list-loading {
  margin: 0;
}

.work-request-professionals-failed {
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.work-request-professionals-failed .button {
  min-height: 2.75rem;
}

.work-request-professional-group {
  gap: var(--space-8);
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
}

.work-request-professional-group legend {
  margin-bottom: var(--space-4);
  color: var(--ink);
  font-size: var(--text-13);
  padding: 0;
  font-weight: 800;
}

.work-request-professional-list {
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.work-request-professional {
  gap: var(--space-6);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-6) var(--space-12) var(--space-8);
  background: var(--paper);
  border-radius: .625rem;
  display: grid;
}

.work-request-professional:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.work-request-professional-top {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.work-request-professional-choice {
  align-items: center;
  gap: var(--space-10);
  min-height: 2.75rem;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
}

.work-request-professional-choice input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--accent-strong);
  cursor: pointer;
  flex: none;
  margin: 0;
}

.work-request-professional-choice input:disabled {
  cursor: not-allowed;
}

.work-request-professional-choice:has(input:disabled) {
  cursor: not-allowed;
}

.work-request-professional-name {
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  font-weight: 800;
}

.work-request-professional-facts {
  gap: var(--space-4) var(--space-14);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  display: grid;
}

.work-request-professional-facts dt {
  color: var(--muted);
  font-size: var(--text-11);
  font-weight: 700;
  line-height: 1.4;
}

.work-request-professional-facts dd {
  color: var(--ink-soft);
  font-size: var(--text-12);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.45;
}

.work-request-professional-phone {
  min-height: 2.75rem;
  color: var(--accent-strong);
  font-size: var(--text-14);
  justify-self: start;
  align-items: center;
  font-weight: 800;
  display: inline-flex;
}

@media (hover: hover) {
  .work-request-professional-phone:hover {
    text-decoration: underline;
  }
}

.work-request-professional-no-phone {
  color: var(--muted);
  font-size: var(--text-12);
  margin: 0;
}

.work-request-assign {
  justify-items: start;
  gap: var(--space-10);
  display: grid;
}

.work-request-assign .button {
  min-height: 3rem;
  padding: var(--space-12) var(--space-22);
  font-size: var(--text-14);
}

.work-request-assign-missing {
  font-size: var(--text-13);
  margin: 0;
}

@media (max-width: 40.625em) {
  .work-request-professionals {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .work-request-professional-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-request-assign .button {
    width: 100%;
  }
}

.work-request-close {
  margin: 0 var(--space-18) var(--space-18);
}

.work-request-close > .button {
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.work-request-close-confirm {
  border: 1px solid var(--line-strong);
  max-width: 45rem;
  padding: var(--space-14);
  border-radius: .625rem;
}

.work-request-close-question {
  color: var(--ink);
  font-size: var(--text-14);
  margin: 0;
  font-weight: 800;
}

.work-request-close-reasons {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.875rem), 1fr));
}

.work-request-close-confirm textarea {
  min-height: 5rem;
}

.work-request-close-actions {
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.work-request-close-actions .button {
  min-width: min(100%, 8.75rem);
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.work-request-close-confirm .notice {
  font-size: var(--text-13);
  margin: 0;
}

@media (max-width: 40.625em) {
  .work-request-close {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .work-request-close > .button, .work-request-close-actions .button {
    width: 100%;
  }
}

.work-request-work-actions {
  align-items: flex-start;
  gap: var(--space-10);
  margin: 0 var(--space-18) var(--space-18);
  flex-wrap: wrap;
  display: flex;
}

.work-request-work-actions > .button {
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.work-request-action-form {
  border: 1px solid var(--line-strong);
  max-width: 45rem;
  padding: var(--space-14);
  border-radius: .625rem;
  flex: 100%;
}

.work-request-action-form .work-request-action-question {
  color: var(--ink);
  font-size: var(--text-14);
  margin: 0;
  font-weight: 800;
  line-height: 1.45;
}

.work-request-complete-choices {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.work-request-action-form textarea {
  min-height: 6rem;
}

.work-request-action-buttons {
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.work-request-action-buttons .button {
  min-width: min(100%, 8.75rem);
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.work-request-action-form .notice {
  font-size: var(--text-13);
  margin: 0;
}

@media (max-width: 40.625em) {
  .work-request-work-actions {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .work-request-work-actions > .button, .work-request-action-buttons .button {
    width: 100%;
  }
}

.location-map-field {
  gap: var(--space-8);
  min-width: 0;
  display: grid;
}

.location-map-frame {
  min-width: 0;
  position: relative;
}

.location-map {
  border: 1px solid var(--line-strong);
  background: var(--surface-muted);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: .75rem;
  height: 440px;
  position: relative;
  overflow: hidden;
}

.location-map:active {
  cursor: grabbing;
}

.location-map:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.location-map[aria-invalid="true"] {
  border-color: var(--status-problem-text);
}

.location-map-readonly, .location-map-readonly:active {
  cursor: default;
}

.location-map-tiles {
  position: absolute;
  inset: 0;
}

.location-map-tile {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  width: 256px;
  max-width: none;
  height: 256px;
  display: block;
  position: absolute;
}

.location-pin {
  z-index: 1;
  cursor: grab;
  width: 30px;
  height: 36px;
  position: absolute;
  transform: translate(-50%, -100%);
}

.location-pin:before {
  border: 3px solid var(--on-accent);
  background: var(--accent);
  width: 26px;
  height: 26px;
  box-shadow: var(--shadow-pin);
  content: "";
  border-radius: 50% 50% 50% 0;
  position: absolute;
  top: 2px;
  left: 2px;
  transform: rotate(-45deg);
}

.location-pin:after {
  background: var(--on-accent);
  content: "";
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 11px;
  left: 11px;
}

.location-map-readonly .location-pin {
  cursor: default;
}

.location-map-zoom {
  z-index: 2;
  gap: var(--space-6);
  display: grid;
  position: absolute;
  top: .625rem;
  left: .625rem;
}

.location-map-button {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
  font-size: var(--text-22);
  box-shadow: var(--shadow-soft);
  border-radius: .625rem;
  place-items: center;
  padding: 0;
  font-weight: 700;
  line-height: 1;
  display: grid;
}

@media (hover: hover) {
  .location-map-button:hover {
    background: var(--surface-muted);
  }
}

.location-map-button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.location-map-attribution {
  z-index: 2;
  padding: var(--space-4) var(--space-8);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: var(--text-11);
  border-radius: .5rem 0 .6875rem;
  margin: 0;
  line-height: 1.45;
  position: absolute;
  bottom: 1px;
  right: 1px;
}

.location-map-attribution a {
  color: var(--accent-strong);
  font-weight: 650;
  text-decoration: underline;
}

.location-map-coordinates {
  color: var(--ink);
  font-size: var(--text-13);
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-weight: 750;
  display: block;
}

.location-map-actions {
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.location-map-actions .button {
  min-height: 2.75rem;
  font-size: var(--text-13);
}

@media (max-width: 40.625em) {
  .location-map {
    height: 360px;
  }

  .location-map-actions .button {
    flex: 8.75rem;
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .work-request-detail-contact .work-request-phone, .dashboard-layout .work-request-detail-contact .work-request-email, .dashboard-layout .work-request-facts .work-request-fact-link, .dashboard-layout .work-request-unavailable-actions .button, .dashboard-layout .time-frame-row .time-frame-remove, .dashboard-layout .time-frame-actions .button, .dashboard-layout .work-request-actions .button, .dashboard-layout .work-request-professionals-failed .button, .dashboard-layout .work-request-professional-choice, .dashboard-layout .work-request-professional-phone, .dashboard-layout .work-request-close > .button, .dashboard-layout .work-request-close-actions .button, .dashboard-layout .work-request-work-actions > .button, .dashboard-layout .work-request-action-buttons .button, .dashboard-layout .location-map-actions .button {
    min-height: var(--target-size);
  }

  .dashboard-layout .location-map-button {
    width: var(--target-size);
    height: var(--target-size);
  }

  .dashboard-layout .location-map-attribution {
    padding-top: 0;
    padding-bottom: 0;
  }

  .dashboard-layout .location-map-attribution a {
    min-height: var(--target-size);
    align-items: center;
    display: inline-flex;
  }
}

.panes {
  min-width: 0;
  display: grid;
}

.pane-list {
  min-width: 0;
  container: list-pane / inline-size;
}

.pane-item {
  min-width: 0;
  display: none;
  container: item-pane / inline-size;
}

.panes-open > .pane-list {
  display: none;
}

.panes-open > .pane-item {
  align-content: start;
  gap: var(--space-10);
  display: grid;
}

.pane-back {
  margin: 0;
}

.pane-back-link {
  min-height: var(--target-size);
  align-items: center;
  gap: var(--space-6);
  color: var(--accent-strong);
  font-size: var(--text-12);
  font-weight: 750;
  display: inline-flex;
}

@media (hover: hover) {
  .pane-back-link:hover {
    color: var(--ink);
    text-decoration: underline;
  }
}

.professional-work-panes .pane-back-link, .client-requests-panes .pane-back-link {
  font-size: var(--text-15);
}

.pane-status {
  color: var(--muted);
  font-size: var(--text-13);
  margin: 0;
  line-height: 1.5;
}

.pane-empty {
  border: 1px dashed var(--line-strong);
  max-width: none;
  padding: var(--space-28) var(--space-20);
  color: var(--muted);
  font-size: var(--text-13);
  text-align: center;
  border-radius: .875rem;
  margin: 0;
  line-height: 1.5;
}

.work-request-card-open, .professionals-table tr.professional-row-open {
  border-color: var(--accent-strong);
  box-shadow: inset 4px 0 0 var(--accent-strong);
}

@container list-pane (max-width: 40rem) {
  .page-heading {
    align-items: flex-start;
    gap: var(--space-12);
    flex-direction: column;
  }
}

@media (min-width: 52.5em) {
  .panes {
    align-items: start;
    gap: var(--space-22);
    grid-template-columns: minmax(17.5rem, 2fr) minmax(0, 3fr);
  }

  .panes-open > .pane-list {
    display: block;
  }

  .pane-item {
    top: max(var(--space-12), env(safe-area-inset-top));
    align-content: start;
    gap: var(--space-10);
    max-height: calc(100vh - 2 * var(--space-12));
    max-height: calc(100dvh - max(var(--space-12), env(safe-area-inset-top)) - max(var(--space-12), env(safe-area-inset-bottom)));
    overscroll-behavior: contain;
    padding: var(--space-4) var(--space-4) var(--space-12);
    display: grid;
    position: sticky;
    overflow-y: auto;
  }
}

.professionals-list {
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.professionals-toolbar {
  align-items: start;
  gap: var(--space-12) var(--space-14);
  border: 1px solid var(--line);
  padding: var(--space-14) var(--space-16);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: .875rem;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
}

.professionals-toolbar .settings-field label {
  margin-top: 0;
}

.professionals-chips {
  align-items: center;
  gap: var(--space-8) var(--space-14);
  flex-wrap: wrap;
  grid-column: 1 / -1;
  display: flex;
}

.professionals-chips .filter-chip {
  min-height: 2.5rem;
  padding: var(--space-8) var(--space-14);
  font-size: var(--text-12);
  font-weight: 700;
}

@media (hover: hover) {
  .professionals-chips .filter-chip:hover {
    border-color: var(--accent-line);
    color: var(--ink);
  }

  .professionals-chips .filter-chip-active:hover {
    color: var(--accent-strong);
  }
}

.professionals-count {
  min-height: 1.125rem;
  color: var(--muted);
  font-size: var(--text-12);
  margin: 0;
  font-weight: 700;
}

.professionals-unavailable, .professionals-empty {
  justify-items: center;
  gap: var(--space-10);
  display: grid;
}

.professionals-unavailable .notice {
  font-size: var(--text-13);
  margin: 0;
}

.professionals-unavailable .button, .professionals-empty .button {
  min-height: 2.75rem;
}

.professionals-empty .empty-state {
  padding-bottom: var(--space-6);
}

.professionals-table-wrap {
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: .875rem;
}

.professionals-table th {
  padding: 0 var(--space-10);
  font-size: var(--text-10);
}

.professionals-table th:first-child, .professionals-table td:first-child {
  padding-left: var(--space-14);
}

.professionals-table td {
  color: var(--ink-soft);
  font-size: var(--text-12);
  vertical-align: top;
  line-height: 1.45;
}

.professionals-table td strong {
  font-size: var(--text-12);
}

.professionals-table .table-subline {
  margin-top: var(--space-4);
  font-size: var(--text-11);
  line-height: 1.45;
}

.professional-cell-name {
  min-width: 12.5rem;
}

.professionals-table td .professional-phone {
  white-space: nowrap;
}

.professional-name {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  font-weight: 800;
}

@media (hover: hover) {
  .professional-name:hover {
    color: var(--accent-strong);
    text-decoration: underline;
  }
}

.professional-email {
  margin-top: var(--space-4);
  color: var(--accent-strong);
  font-size: var(--text-12);
  overflow-wrap: anywhere;
  font-weight: 700;
  display: inline-block;
}

.professional-phone {
  min-height: 2.75rem;
  color: var(--accent-strong);
  font-size: var(--text-14);
  align-items: center;
  font-weight: 800;
  display: inline-flex;
}

@media (hover: hover) {
  .professional-email:hover, .professional-phone:hover {
    text-decoration: underline;
  }
}

.professional-row-inactive .professional-name {
  color: var(--ink-soft);
}

@container list-pane (max-width: 53.75rem) {
  .professionals-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .professionals-search {
    grid-column: 1 / -1;
  }
}

.professional-name-phone, .professional-state-anre {
  display: none;
}

@media not (min-width: 75em), not (min-height: 30em) {
  .professionals-table-wrap {
    box-shadow: none;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .professionals-table {
    min-width: 0;
  }

  .professionals-table thead {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .professionals-table, .professionals-table tbody, .professionals-table tr, .professionals-table td {
    display: block;
  }

  .professionals-table tbody {
    gap: var(--space-10);
    display: grid;
  }

  .professionals-table tr {
    border: 1px solid var(--line);
    padding: var(--space-10) var(--space-14);
    background: var(--paper);
    border-radius: .6875rem;
  }

  .professionals-table td {
    padding: var(--space-4) 0;
    border-top: 0;
  }

  .professionals-table th:first-child, .professionals-table td:first-child {
    padding-left: 0;
  }

  @media (hover: hover) {
    .professionals-table tbody tr:hover td {
      background: none;
    }
  }

  .professional-cell-name {
    min-width: 0;
  }

  .professional-name, .professional-email {
    align-items: center;
    min-height: 2.75rem;
    display: inline-flex;
  }

  .professional-email {
    margin-top: 0;
  }

  .professional-name, .professional-phone {
    font-size: var(--text-16);
  }

  .professionals-table td .professional-phone {
    white-space: normal;
  }
}

@media (min-width: 75em) and (min-height: 30em) {
  @container list-pane (max-width: 52rem) {
    .professional-cell-phone, .professional-cell-anre {
      display: none;
    }

    .professional-name-phone {
      margin-top: var(--space-2);
      font-size: var(--text-12);
      display: inline-flex;
    }

    .professional-state-anre {
      display: contents;
    }
  }
}

@container list-pane (max-width: 22.5rem) {
  .professionals-toolbar {
    padding: var(--space-12);
    grid-template-columns: minmax(0, 1fr);
  }

  .professionals-chips .filter-chip {
    min-height: 2.75rem;
  }
}

.professional-file {
  gap: var(--space-14);
  min-width: 0;
  display: grid;
}

.professional-file > .panel, .professional-file-panels > .panel {
  margin-top: 0;
}

.professional-file-header {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.professional-file-heading {
  align-items: flex-start;
  margin-bottom: 0;
}

.professional-file-heading > div:first-child {
  min-width: 0;
}

.professional-file-heading h1 {
  overflow-wrap: anywhere;
}

.professional-file-contact {
  align-items: center;
  gap: var(--space-2) var(--space-18);
  margin: var(--space-6) 0 var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.professional-file-contact .professional-phone {
  font-size: var(--text-18);
}

.professional-file-contact .professional-email {
  min-height: 2.75rem;
  font-size: var(--text-13);
  align-items: center;
  margin-top: 0;
  display: inline-flex;
}

.professional-file-marks {
  gap: var(--space-6);
  flex-wrap: wrap;
  display: inline-flex;
}

.file-actions {
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.file-actions .button {
  min-height: 2.75rem;
}

.professional-panel-actions {
  margin: 0 var(--space-18) var(--space-18);
}

.professional-file-panels {
  gap: var(--space-14);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.professional-facts {
  gap: var(--space-10);
  margin: 0 var(--space-18) var(--space-18);
  display: grid;
}

.professional-facts > div {
  gap: var(--space-2) var(--space-14);
  grid-template-columns: minmax(7.5rem, 10.625rem) minmax(0, 1fr);
  display: grid;
}

.professional-facts dt {
  color: var(--muted);
  font-size: var(--text-12);
  font-weight: 700;
  line-height: 1.5;
}

.professional-facts dd {
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
}

.professional-facts .professional-email {
  font-size: var(--text-13);
  margin-top: 0;
}

.professional-facts .professional-phone {
  min-height: 0;
  font-size: var(--text-13);
}

.professional-time-off {
  gap: var(--space-2);
  padding-left: var(--space-18);
  margin: 0;
  display: grid;
}

.professional-panel-text {
  margin: 0 var(--space-18) var(--space-18);
  color: var(--ink-soft);
  font-size: var(--text-13);
  line-height: 1.5;
}

.professional-requests-body {
  margin: 0 var(--space-18) var(--space-18);
}

.professional-requests-notice {
  margin: 0 var(--space-18) var(--space-12);
  font-size: var(--text-13);
}

.professionals-missing-notice {
  margin: 0 0 var(--space-14);
  font-size: var(--text-13);
}

.professional-unavailable-actions {
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.professional-unavailable-actions .button {
  min-height: 2.75rem;
}

@container item-pane (max-width: 45rem) {
  .professional-file-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

.professional-form-screen {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.professional-form {
  gap: 0;
}

.professional-form > .panel {
  margin-top: 0;
}

.professional-form > .panel + .panel {
  margin-top: var(--space-14);
}

.panel > .professional-fieldset {
  max-width: 45rem;
  margin: 0 var(--space-18) var(--space-18);
}

.professional-invoice-kinds {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.625rem), 1fr));
}

.request-form .professional-partner {
  justify-self: start;
  min-width: min(100%, 10rem);
}

.professional-form > .form-success, .professional-form > .form-error, .professional-form > .settings-actions {
  margin-top: var(--space-12);
}

.professional-form-actions .button {
  min-width: min(100%, 8.75rem);
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.professional-file-notice {
  font-size: var(--text-13);
  margin: 0;
}

.professional-file-notice:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.file-action-hint {
  color: var(--muted);
  font-size: var(--text-11);
  flex-basis: 100%;
  line-height: 1.4;
}

.professional-state-confirm {
  gap: var(--space-10);
  border: 1px solid var(--line-strong);
  max-width: 45rem;
  padding: var(--space-14);
  background: var(--paper);
  border-radius: .625rem;
  flex: 100%;
  display: grid;
}

.professional-state-question {
  color: var(--ink);
  font-size: var(--text-14);
  margin: 0;
  font-weight: 800;
  line-height: 1.45;
}

.professional-state-assigned {
  gap: var(--space-6);
  font-size: var(--text-13);
  margin: 0;
  display: grid;
}

.professional-state-assigned p {
  margin: 0;
}

.professional-state-assigned ul {
  gap: var(--space-4);
  padding-left: var(--space-18);
  margin: 0;
  display: grid;
}

.professional-state-actions {
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.professional-state-actions .button {
  min-width: min(100%, 8.75rem);
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.professional-state-confirm > .notice-error {
  font-size: var(--text-13);
  margin: 0;
}

.account-notice {
  font-size: var(--text-13);
  flex-basis: 100%;
  margin: 0;
}

.account-confirm {
  gap: var(--space-10);
  border: 1px solid var(--line-strong);
  max-width: 45rem;
  padding: var(--space-14);
  background: var(--paper);
  border-radius: .625rem;
  flex: 100%;
  display: grid;
}

.account-question {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 800;
  line-height: 1.45;
}

.account-confirm-actions, .temporary-password-actions {
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.account-confirm-actions .button, .temporary-password-actions .button {
  min-width: min(100%, 8.75rem);
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.account-confirm > .notice-error {
  font-size: var(--text-13);
  margin: 0;
}

.account-email-option {
  align-items: center;
  gap: var(--space-10);
  border: 1px solid var(--line-strong);
  min-height: 2.75rem;
  padding: var(--space-6) var(--space-10);
  background: var(--paper-subtle);
  color: var(--ink-soft);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  cursor: pointer;
  border-radius: .5rem;
  margin: 0;
  font-weight: 650;
  line-height: 1.3;
  display: flex;
}

.account-email-option input {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  accent-color: var(--accent-strong);
  cursor: pointer;
  flex: none;
  margin: 0;
  padding: 0;
}

.account-email-option:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--ink);
}

.account-hint-link {
  color: var(--accent-strong);
  font-weight: 750;
  text-decoration: underline;
}

.temporary-password-emailed {
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 750;
}

.temporary-password-panel {
  gap: var(--space-10);
  border: 1px solid var(--accent-line);
  max-width: 45rem;
  padding: var(--space-14);
  background: var(--accent-soft);
  border-radius: .625rem;
  flex: 100%;
  display: grid;
}

.temporary-password-panel:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.temporary-password-title {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 800;
  line-height: 1.45;
}

.temporary-password {
  border: 1px solid var(--line-strong);
  max-width: 100%;
  padding: var(--space-10) var(--space-14);
  background: var(--paper);
  color: var(--ink);
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--text-24);
  letter-spacing: .12em;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
  border-radius: .5rem;
  justify-self: start;
  font-weight: 700;
  line-height: 1.3;
}

.temporary-password-expiry {
  color: var(--ink);
  font-size: var(--text-13);
  margin: 0;
  font-weight: 750;
}

.temporary-password-handover {
  color: var(--ink-soft);
  font-size: var(--text-13);
  margin: 0;
  line-height: 1.5;
}

.temporary-password-panel > .temporary-password-by-hand {
  font-size: var(--text-12);
}

@media (max-width: 40.625em) {
  .panel > .professional-fieldset, .professional-facts, .professional-panel-text, .professional-requests-body, .professional-panel-actions, .professional-requests-notice {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }

  .professional-facts > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .professional-facts .professional-phone, .professional-facts .professional-email {
    min-height: 2.75rem;
  }

  .file-actions .button {
    flex: 8.75rem;
  }

  .temporary-password {
    padding: var(--space-10);
    font-size: var(--text-20);
    letter-spacing: .06em;
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .professionals-toolbar {
    padding: var(--space-12);
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-layout .professionals-chips .filter-chip, .dashboard-layout .professional-name, .dashboard-layout .professional-email, .dashboard-layout .professional-phone, .dashboard-layout .professionals-unavailable .button, .dashboard-layout .professionals-empty .button, .dashboard-layout .file-actions .button, .dashboard-layout .professional-unavailable-actions .button {
    min-height: var(--target-size);
  }

  .dashboard-layout .professional-state-actions .button {
    min-height: var(--target-size);
    flex: 8.75rem;
  }

  .dashboard-layout .professional-facts {
    gap: 0;
  }

  .dashboard-layout .professional-facts > div {
    gap: 0 var(--space-12);
    border-top: 1px solid var(--line);
    padding: var(--space-10) 0;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .dashboard-layout .professional-facts > div:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

@container content (max-width: 15rem) {
  .dashboard-layout .professional-facts > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.clients-list {
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.clients-toolbar {
  border: 1px solid var(--line);
  padding: var(--space-14) var(--space-16);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: .875rem;
  grid-template-columns: minmax(0, 1fr);
}

.clients-toolbar .settings-field label {
  margin-top: 0;
}

.clients-count {
  min-height: 1.125rem;
  color: var(--muted);
  font-size: var(--text-12);
  margin: 0;
  font-weight: 700;
}

.clients-unavailable, .clients-empty {
  justify-items: center;
  gap: var(--space-10);
  display: grid;
}

.clients-unavailable .notice {
  font-size: var(--text-13);
  margin: 0;
}

.clients-unavailable .button, .clients-empty .button, .clients-more .button {
  min-height: 2.75rem;
}

.clients-empty .empty-state {
  padding-bottom: var(--space-6);
}

.clients-more {
  justify-content: center;
  display: flex;
}

.clients-more-notice {
  font-size: var(--text-13);
  margin: 0;
}

.clients-table-wrap {
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: .875rem;
}

.clients-table th {
  padding: 0 var(--space-10);
  font-size: var(--text-10);
}

.clients-table th:first-child, .clients-table td:first-child {
  padding-left: var(--space-14);
}

.clients-table td {
  color: var(--ink-soft);
  font-size: var(--text-12);
  vertical-align: top;
  line-height: 1.45;
}

.client-cell-name {
  min-width: 11.25rem;
}

.clients-table td .client-phone {
  white-space: nowrap;
}

.client-name {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  font-weight: 800;
}

.client-email {
  color: var(--accent-strong);
  font-size: var(--text-12);
  overflow-wrap: anywhere;
  font-weight: 700;
  display: inline-block;
}

.client-phone {
  min-height: 2.75rem;
  color: var(--accent-strong);
  font-size: var(--text-14);
  align-items: center;
  font-weight: 800;
  display: inline-flex;
}

@media (hover: hover) {
  .client-name:hover {
    color: var(--accent-strong);
    text-decoration: underline;
  }

  .client-email:hover, .client-phone:hover {
    text-decoration: underline;
  }
}

.client-row-inactive .client-name {
  color: var(--ink-soft);
}

.client-state {
  justify-items: start;
  gap: var(--space-2);
  display: inline-grid;
}

.client-state-note {
  color: var(--muted);
  font-size: var(--text-11);
  line-height: 1.4;
}

.clients-table tr.client-row-open {
  border-color: var(--accent-strong);
  box-shadow: inset 4px 0 0 var(--accent-strong);
}

@media not (min-width: 75em), not (min-height: 30em) {
  .clients-table-wrap {
    box-shadow: none;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .clients-table {
    min-width: 0;
  }

  .clients-table thead {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .clients-table, .clients-table tbody, .clients-table tr, .clients-table td {
    display: block;
  }

  .clients-table tbody {
    gap: var(--space-10);
    display: grid;
  }

  .clients-table tr {
    border: 1px solid var(--line);
    padding: var(--space-10) var(--space-14);
    background: var(--paper);
    border-radius: .6875rem;
  }

  .clients-table td {
    padding: var(--space-4) 0;
    border-top: 0;
  }

  .clients-table th:first-child, .clients-table td:first-child {
    padding-left: 0;
  }

  @media (hover: hover) {
    .clients-table tbody tr:hover td {
      background: none;
    }
  }

  .client-cell-name {
    min-width: 0;
  }

  .client-name, .client-email {
    align-items: center;
    min-height: 2.75rem;
    display: inline-flex;
  }

  .client-name, .client-phone {
    font-size: var(--text-16);
  }

  .clients-table td .client-phone {
    white-space: normal;
  }
}

@media (min-width: 75em) and (min-height: 30em) {
  .panes.clients-panes {
    grid-template-columns: minmax(0, 3fr) minmax(min(100%, 20rem), 2fr);
  }
}

.client-file {
  gap: var(--space-14);
  min-width: 0;
  display: grid;
}

.client-file-header {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.client-file-heading {
  align-items: flex-start;
  margin-bottom: 0;
}

.client-file-heading > div:first-child {
  min-width: 0;
}

.client-file-heading h1 {
  overflow-wrap: anywhere;
}

.client-file-contact {
  align-items: center;
  gap: var(--space-2) var(--space-18);
  margin: var(--space-6) 0 var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.client-file-contact .client-phone {
  font-size: var(--text-18);
}

.client-file-contact .client-email {
  min-height: 2.75rem;
  font-size: var(--text-13);
  align-items: center;
  display: inline-flex;
}

.client-file-marks {
  justify-items: end;
  gap: var(--space-4);
  display: inline-grid;
}

.client-file-notice {
  font-size: var(--text-13);
  margin: 0;
}

.clients-missing-notice {
  margin: 0 0 var(--space-14);
  font-size: var(--text-13);
}

.client-tabs {
  gap: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  display: flex;
}

.client-tab {
  min-height: 2.75rem;
  padding: var(--space-6) var(--space-12);
  color: var(--muted);
  font-size: var(--text-13);
  align-items: center;
  font-weight: 700;
  display: inline-flex;
}

.client-tab-current {
  box-shadow: inset 0 -3px 0 var(--accent-strong);
  color: var(--ink);
  font-weight: 800;
}

@media (hover: hover) {
  .client-tab:hover {
    color: var(--ink);
  }
}

.client-tabpanel {
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.client-tabpanel > .empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: .875rem;
}

.client-tab-note {
  color: var(--muted);
  font-size: var(--text-12);
  margin: 0;
  line-height: 1.5;
}

.client-tab-notice {
  font-size: var(--text-13);
  margin: 0;
}

.client-locations, .client-work-orders {
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.client-location, .client-work-order {
  gap: var(--space-4);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-12) var(--space-14);
  background: var(--paper);
  border-radius: .6875rem;
  display: grid;
}

.client-location-name {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  font-weight: 800;
}

.client-location-address {
  color: var(--ink-soft);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.client-work-order-top {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4) var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.client-work-order-top strong {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
}

.client-work-order-about {
  color: var(--muted);
  font-size: var(--text-12);
  margin: 0;
  line-height: 1.5;
}

.client-tab-more .button, .client-tab-unavailable .button, .client-unavailable-actions .button {
  min-height: 2.75rem;
}

.client-unavailable-actions {
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.client-tab-actions {
  justify-content: flex-end;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.client-location-top {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4) var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.client-location-on-site {
  color: var(--muted);
  font-size: var(--text-12);
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.client-location-phone {
  font-size: var(--text-13);
}

.client-location-actions {
  gap: var(--space-8);
  margin-top: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.client-tab-actions .button, .client-location-actions .button {
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.client-equipment-filters {
  align-items: end;
  gap: var(--space-10);
  border: 1px solid var(--line);
  padding: var(--space-12) var(--space-14);
  background: var(--paper);
  border-radius: .6875rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.client-equipment-filters .settings-field label {
  margin-top: 0;
}

.client-equipment-filters .client-equipment-filter-out-of-use {
  align-self: end;
}

.client-equipment-loading {
  margin: 0;
}

.client-equipment-groups {
  gap: var(--space-14);
  min-width: 0;
  display: grid;
}

.client-equipment-group {
  gap: var(--space-8);
  min-width: 0;
  display: grid;
}

.client-equipment-group-top {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4) var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.client-equipment-site {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 800;
}

.client-equipment-none {
  color: var(--muted);
  font-size: var(--text-12);
  margin: 0;
  line-height: 1.5;
}

.client-equipment-rows {
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.client-equipment-row {
  gap: var(--space-4);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-12) var(--space-14);
  background: var(--paper);
  border-radius: .6875rem;
  display: grid;
}

.client-equipment-row-retired {
  background: var(--paper-subtle);
}

.client-equipment-row-top {
  align-items: center;
  gap: var(--space-4) var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.client-equipment-row-category {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  font-weight: 800;
}

.client-equipment-row-retired .client-equipment-row-category {
  color: var(--ink-soft);
}

.client-equipment-quantity {
  color: var(--ink-soft);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.client-equipment-make {
  color: var(--ink-soft);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.client-equipment-facts {
  align-items: center;
  gap: var(--space-4) var(--space-10);
  color: var(--muted);
  font-size: var(--text-12);
  flex-wrap: wrap;
  line-height: 1.5;
  display: flex;
}

.client-equipment-actions {
  gap: var(--space-8);
  margin-top: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.client-equipment-out-of-use {
  margin-top: var(--space-8);
  border-top: 1px solid var(--line);
  padding-top: var(--space-10);
}

.client-equipment-out-of-use-date input {
  max-width: 12rem;
}

.client-equipment-out-of-use-actions {
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.client-equipment-empty-actions {
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.client-equipment-group-top .button, .client-equipment-actions .button, .client-equipment-out-of-use-actions .button, .client-equipment-empty-actions .button {
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.location-form-screen {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.location-form {
  gap: 0;
}

.location-form > .panel {
  margin-top: 0;
}

.location-form > .panel + .panel {
  margin-top: var(--space-12);
}

.panel > .location-fieldset {
  max-width: 45rem;
  margin: 0 var(--space-18) var(--space-18);
}

.location-fieldset > .address-fields + .settings-field, .location-on-site .form-pair {
  margin-top: var(--space-4);
}

.location-postcode input {
  max-width: 10rem;
}

.location-notes-foot {
  justify-content: space-between;
  gap: var(--space-4) var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.location-notes-count {
  font-variant-numeric: tabular-nums;
}

.location-form > .form-success, .location-form > .form-error, .location-form > .settings-actions {
  margin-top: var(--space-12);
}

.location-form-actions .button {
  min-width: min(100%, 8.75rem);
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.location-address-taken-link {
  min-height: 2.75rem;
  font-size: var(--text-13);
  align-items: center;
  display: inline-flex;
}

.equipment-form-screen {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.equipment-form {
  gap: 0;
}

.equipment-form > .panel {
  margin-top: 0;
}

.equipment-form > .panel + .panel {
  margin-top: var(--space-12);
}

.panel > .equipment-fieldset {
  max-width: 45rem;
  margin: 0 var(--space-18) var(--space-18);
}

.equipment-fieldset > .form-pair + .form-pair, .equipment-fieldset > .settings-field + .equipment-warranty {
  margin-top: var(--space-4);
}

.equipment-quantity input, .equipment-installed-on input, .equipment-warranty-until input {
  max-width: 12rem;
}

.equipment-warranty .settings-field {
  margin-top: var(--space-4);
}

.equipment-categories-unloaded {
  align-items: center;
  gap: var(--space-4) var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.equipment-categories-reload {
  min-height: 2.75rem;
  font-size: var(--text-12);
}

.equipment-form > .form-success, .equipment-form > .form-error, .equipment-form > .settings-actions {
  margin-top: var(--space-12);
}

.equipment-form-actions .button {
  min-width: min(100%, 8.75rem);
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.equipment-serial-taken-link {
  min-height: 2.75rem;
  font-size: var(--text-13);
  align-items: center;
  display: inline-flex;
}

@media (min-width: 37.5em) {
  @container form-section (min-width: 30rem) {
    .equipment-form .form-pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

.client-form-screen {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.client-form {
  gap: 0;
}

.client-form > .panel {
  margin-top: 0;
}

.panel > .client-fieldset {
  max-width: 45rem;
  margin: 0 var(--space-18) var(--space-18);
}

.client-form > .form-success, .client-form > .form-error, .client-form > .settings-actions {
  margin-top: var(--space-12);
}

.client-form-actions .button {
  min-width: min(100%, 8.75rem);
  min-height: 2.75rem;
  font-size: var(--text-13);
}

.client-email-taken-link {
  min-height: 2.75rem;
  font-size: var(--text-13);
  align-items: center;
  display: inline-flex;
}

@media (max-width: 40.625em) {
  .panel > .client-fieldset, .panel > .location-fieldset, .panel > .equipment-fieldset {
    margin-right: var(--space-14);
    margin-left: var(--space-14);
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .clients-toolbar {
    padding: var(--space-12);
  }

  .dashboard-layout .client-name, .dashboard-layout .client-email, .dashboard-layout .client-phone, .dashboard-layout .client-tab, .dashboard-layout .client-email-taken-link, .dashboard-layout .clients-unavailable .button, .dashboard-layout .clients-empty .button, .dashboard-layout .clients-more .button, .dashboard-layout .client-tab-more .button, .dashboard-layout .client-tab-unavailable .button, .dashboard-layout .client-unavailable-actions .button, .dashboard-layout .client-form-actions .button, .dashboard-layout .client-tab-actions .button, .dashboard-layout .client-location-actions .button, .dashboard-layout .location-form-actions .button, .dashboard-layout .location-address-taken-link {
    min-height: var(--target-size);
  }

  .dashboard-layout .client-tab-actions .button, .dashboard-layout .client-location-actions .button, .dashboard-layout .client-equipment-group-top .button, .dashboard-layout .client-equipment-actions .button, .dashboard-layout .client-equipment-out-of-use-actions .button, .dashboard-layout .client-equipment-empty-actions .button {
    width: 100%;
  }
}

@media (pointer: coarse) {
  .client-tab, .client-phone, .client-file-contact .client-email, .client-email-taken-link, .clients-unavailable .button, .clients-empty .button, .clients-more .button, .client-tab-more .button, .client-tab-unavailable .button, .client-unavailable-actions .button, .client-form-actions .button, .client-tab-actions .button, .client-location-actions .button, .location-form-actions .button, .location-address-taken-link, .equipment-form-actions .button, .equipment-serial-taken-link, .equipment-categories-reload, .client-equipment-group-top .button, .client-equipment-actions .button, .client-equipment-out-of-use-actions .button, .client-equipment-empty-actions .button, .client-equipment-filters select, .client-equipment-filters .settings-choice {
    min-height: 3rem;
  }

  .client-name, .client-email {
    align-items: center;
    min-height: 3rem;
    display: inline-flex;
  }
}

.demo-emails {
  gap: var(--space-14);
  min-width: 0;
  display: grid;
}

.demo-emails-notice {
  font-size: var(--text-13);
  margin: 0;
}

.demo-email-list {
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.demo-email-card {
  gap: var(--space-10);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
  padding: var(--space-16);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  display: grid;
}

.demo-email-head {
  gap: var(--space-4);
  min-width: 0;
  display: grid;
}

.demo-email-subject {
  color: var(--ink);
  font-size: var(--text-16);
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 800;
  line-height: 1.35;
}

.demo-email-meta {
  gap: var(--space-4) var(--space-16);
  color: var(--muted);
  font-size: var(--text-12);
  overflow-wrap: anywhere;
  flex-wrap: wrap;
  margin: 0;
  line-height: 1.5;
  display: flex;
}

.demo-email-meta b {
  color: var(--ink);
  font-weight: 750;
}

.demo-email-body {
  max-width: var(--measure);
  border: 1px solid var(--line);
  padding: var(--space-12) var(--space-14);
  background: var(--paper-subtle);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-13);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: .625rem;
  margin: 0;
  line-height: 1.55;
}

.demo-email-link {
  gap: var(--space-6);
  justify-items: start;
  display: grid;
}

.demo-email-link .button {
  min-height: 2.75rem;
}

.demo-email-link-note {
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--text-11);
  overflow-wrap: anywhere;
  line-height: 1.5;
  display: block;
}

.demo-email-link-address {
  color: var(--ink-soft);
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--text-11);
}

.demo-emails-more, .demo-emails-unavailable {
  gap: var(--space-10);
  justify-items: start;
  display: grid;
}

.demo-emails-unavailable .notice, .demo-emails-more-error {
  font-size: var(--text-13);
  margin: 0;
}

.demo-emails-more .button, .demo-emails-unavailable .button {
  min-height: 2.75rem;
}

@media (pointer: coarse) {
  .demo-email-link .button, .demo-emails-more .button, .demo-emails-unavailable .button {
    min-height: 3rem;
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .demo-email-link, .dashboard-layout .demo-emails-more, .dashboard-layout .demo-emails-unavailable {
    justify-items: stretch;
  }

  .dashboard-layout .demo-email-link .button, .dashboard-layout .demo-emails-more .button, .dashboard-layout .demo-emails-unavailable .button {
    min-height: var(--target-size);
  }
}

.client-home > .referral-card {
  grid-column: 1 / -1;
  margin: 0;
}

.referral-card {
  gap: var(--space-12);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-18);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: .875rem;
  display: grid;
}

.referral-card-head {
  gap: var(--space-6);
  display: grid;
}

.referral-card h2 {
  color: var(--ink);
  font-size: var(--text-18);
  margin: 0;
}

.referral-card-lead {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--text-14);
  margin: 0;
  line-height: 1.5;
}

.referral-link-block {
  gap: var(--space-10);
  min-width: 0;
  display: grid;
}

.referral-link-line {
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  display: grid;
}

.referral-link-label {
  color: var(--muted);
  font-size: var(--text-12);
  font-weight: 750;
}

.referral-link {
  border: 1px solid var(--line-strong);
  padding: var(--space-10) var(--space-12);
  background: var(--paper-subtle);
  color: var(--ink);
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
  border-radius: .625rem;
  line-height: 1.5;
  display: block;
}

.referral-actions {
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.referral-actions .button {
  min-height: 2.75rem;
}

.referral-copied {
  min-width: 0;
  color: var(--status-ok-text);
  font-size: var(--text-13);
  font-weight: 750;
}

.referral-copy-hint, .referral-terms {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--text-13);
  margin: 0;
  line-height: 1.5;
}

.referral-unavailable {
  gap: var(--space-10);
  justify-items: start;
  display: grid;
}

.referral-unavailable .notice {
  font-size: var(--text-13);
  margin: 0;
}

.referral-unavailable .button {
  min-height: 2.75rem;
}

@media (pointer: coarse) {
  .referral-actions .button, .referral-unavailable .button {
    min-height: 3rem;
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .referral-actions {
    display: grid;
  }

  .dashboard-layout .referral-unavailable {
    justify-items: stretch;
  }

  .dashboard-layout .referral-actions .button, .dashboard-layout .referral-unavailable .button {
    min-height: var(--target-size);
  }
}

.referrals {
  gap: var(--space-14);
  min-width: 0;
  display: grid;
}

.referrals > .page-heading {
  margin-bottom: 0;
}

.referrals > .metric-grid {
  margin: 0;
}

.referrals-month {
  align-items: center;
  gap: var(--space-8) var(--space-12);
  grid-template-columns: auto minmax(0, 1fr) auto;
  display: grid;
}

.referrals-month-name {
  color: var(--ink);
  font-size: var(--text-20);
  text-align: center;
  overflow-wrap: anywhere;
  margin: 0;
}

.referrals-month .button {
  min-height: 2.75rem;
}

.referrals-month-next[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .65;
}

@container content (max-width: 30rem) {
  .referrals-month {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .referrals-month-name {
    text-align: left;
    order: -1;
    grid-column: 1 / -1;
  }
}

.referrals .pull-refresh .panel {
  margin-top: 0;
}

.referrals-empty, .referrals-limit {
  margin: 0 var(--space-18) var(--space-18);
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.5;
}

.referral-list {
  gap: var(--space-10);
  margin: 0 var(--space-18) var(--space-18);
  padding: 0;
  list-style: none;
  display: grid;
}

.referral-item {
  gap: var(--space-8);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-14);
  background: var(--paper);
  border-radius: .6875rem;
  display: grid;
}

.referral-item-top {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.referral-item-contact {
  color: var(--ink);
  font-size: var(--text-15);
  overflow-wrap: anywhere;
  margin: 0;
}

.referral-item-badges {
  gap: var(--space-6);
  flex-wrap: wrap;
  display: flex;
}

.referral-item-by, .referral-item-times {
  gap: var(--space-4) var(--space-12);
  color: var(--ink-soft);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  flex-wrap: wrap;
  margin: 0;
  line-height: 1.5;
  display: flex;
}

.referral-item-by b {
  color: var(--ink);
  font-weight: 750;
}

.referral-item-given {
  color: var(--status-ok-text);
  font-weight: 750;
}

.referral-item-actions {
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.referral-item-actions .button {
  min-height: 2.75rem;
}

.referral-confirm {
  gap: var(--space-8);
  border: 1px solid var(--line-strong);
  padding: var(--space-12);
  background: var(--paper-subtle);
  border-radius: .625rem;
  display: grid;
}

.referral-confirm-question {
  color: var(--ink);
  font-size: var(--text-15);
  margin: 0;
  font-weight: 750;
  line-height: 1.4;
}

.referral-confirm-hint {
  color: var(--ink-soft);
  font-size: var(--text-13);
  margin: 0;
  line-height: 1.5;
}

.referral-confirm-actions {
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.referral-confirm-actions .button {
  min-height: 2.75rem;
}

.referral-item-error, .referrals-notice {
  font-size: var(--text-13);
  margin: 0;
}

.referrals-unavailable {
  gap: var(--space-10);
  justify-items: start;
  display: grid;
}

.referrals-unavailable .notice {
  font-size: var(--text-13);
  margin: 0;
}

.referrals-unavailable .button {
  min-height: 2.75rem;
}

@media (pointer: coarse) {
  .referrals-month .button, .referral-item-actions .button, .referral-confirm-actions .button, .referrals-unavailable .button {
    min-height: 3rem;
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .referral-item-actions, .dashboard-layout .referral-confirm-actions {
    display: grid;
  }

  .dashboard-layout .referrals-unavailable {
    justify-items: stretch;
  }

  .dashboard-layout .referrals-month .button, .dashboard-layout .referral-item-actions .button, .dashboard-layout .referral-confirm-actions .button, .dashboard-layout .referrals-unavailable .button {
    min-height: var(--target-size);
  }
}

.public-home {
  min-height: 100dvh;
  padding: max(var(--space-10), env(safe-area-inset-top)) max(var(--space-20), env(safe-area-inset-right)) max(var(--space-56), env(safe-area-inset-bottom)) max(var(--space-20), env(safe-area-inset-left));
  background: radial-gradient(circle at 20% 0%, var(--accent-soft) 0, transparent 40%), var(--canvas);
  position: relative;
}

.public-column {
  gap: var(--space-18);
  width: min(100%, 40rem);
  margin: 0 auto;
  display: grid;
}

.public-brand {
  align-items: center;
  gap: var(--space-12);
  min-height: 3.5rem;
  padding-right: calc(var(--space-16) + 44px);
  flex-wrap: wrap;
  display: flex;
}

.public-brand .brand-mark {
  width: 48px;
  height: 48px;
}

.public-brand-name {
  min-width: 0;
  color: var(--ink);
  font-size: var(--text-20);
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.public-home .notice {
  font-size: var(--text-14);
  margin: 0;
}

.public-home h1 {
  margin: var(--space-8) 0 0;
  font-size: var(--text-display);
  line-height: 1.12;
}

.public-lead {
  color: var(--ink-soft);
  font-size: var(--text-18);
  margin: 0;
  line-height: 1.5;
}

.public-cta {
  width: 100%;
  max-width: 26.25rem;
  min-height: 3.75rem;
  margin-top: var(--space-6);
  padding: var(--space-14) var(--space-24);
  font-size: var(--text-20);
  border-radius: .875rem;
  font-weight: 800;
}

.public-cta[hidden], .public-request[hidden] {
  display: none;
}

.public-request-form {
  gap: var(--space-16);
  border: 1px solid var(--line);
  padding: var(--space-22);
  background: var(--paper);
  box-shadow: var(--shadow-raised);
  border-radius: 1.125rem;
}

.public-field {
  gap: var(--space-6);
  display: grid;
}

.public-request-form label {
  color: var(--ink);
  font-size: var(--text-15);
  margin-top: 0;
}

.public-request-form input, .public-request-form textarea {
  font-size: var(--text-16);
}

.public-request-form textarea {
  line-height: 1.5;
}

.public-request-form .field-hint, .public-request-form .field-error {
  font-size: var(--text-14);
}

.public-honeypot {
  width: 1px;
  height: 1px;
  position: absolute;
  left: -10000px;
  overflow: hidden;
}

.public-consent {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-14);
  line-height: 1.5;
}

.public-referral-line {
  border: 1px solid var(--line);
  padding: var(--space-10) var(--space-12);
  background: var(--paper-subtle);
  color: var(--ink);
  border-radius: .625rem;
}

.public-request-form .form-error {
  font-size: var(--text-15);
}

.form-error a {
  color: var(--status-problem-text);
  font-weight: 750;
  text-decoration: underline;
}

.public-submit {
  width: 100%;
  min-height: 3.25rem;
  font-size: var(--text-17);
}

.public-confirmation {
  gap: var(--space-8);
  border: 1px solid color-mix(in srgb, var(--status-ok-text) 22%, var(--status-ok-bg));
  padding: var(--space-22);
  font-size: var(--text-17);
  border-radius: 1.125rem;
  display: grid;
}

.public-confirmation p {
  margin: 0;
}

.public-confirmation-title {
  font-size: var(--text-22);
  font-weight: 800;
  line-height: 1.3;
}

.public-confirmation:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.public-contact {
  gap: var(--space-10);
  display: grid;
}

.public-contact h2 {
  font-size: var(--text-16);
  margin: 0;
  font-weight: 800;
}

.public-contact-links {
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.public-contact-links .button {
  min-height: 3rem;
  padding: var(--space-10) var(--space-16);
  font-size: var(--text-16);
  border-radius: .75rem;
}

.public-contact-hours {
  color: var(--muted);
  font-size: var(--text-14);
  margin: 0;
}

.public-secondary {
  gap: var(--space-14);
  margin-top: var(--space-48);
  border-top: 1px solid var(--line);
  padding-top: var(--space-24);
  justify-items: start;
  display: grid;
}

.public-sign-in {
  align-items: center;
  gap: var(--space-8) var(--space-12);
  flex-wrap: wrap;
  display: flex;
}

.public-sign-in .button {
  min-height: 2.75rem;
  font-size: var(--text-14);
}

.public-sign-in p {
  color: var(--muted);
  font-size: var(--text-14);
  margin: 0;
}

.public-about-link {
  min-height: 2.75rem;
  color: var(--accent-strong);
  font-size: var(--text-14);
  align-items: center;
  font-weight: 750;
  text-decoration: underline;
  display: inline-flex;
}

@media (max-width: 40.625em) {
  .public-home {
    padding-right: max(var(--space-16), env(safe-area-inset-right));
    padding-left: max(var(--space-16), env(safe-area-inset-left));
  }

  .public-cta {
    max-width: none;
  }

  .public-request-form, .public-confirmation {
    padding: var(--space-18) var(--space-16);
  }

  .public-contact-links {
    flex-direction: column;
  }
}

.professional-home {
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.professional-home > .panel {
  margin-top: 0;
}

.professional-missing-notice {
  margin: 0 0 var(--space-12);
  font-size: var(--text-14);
}

@media not (min-width: 37.5em) {
  .dashboard-layout .professional-requests-panel .panel-heading h2 {
    font-size: var(--text-16);
  }

  .dashboard-layout .professional-requests-panel .panel-detail {
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: var(--text-12);
  }
}

.professional-request-cards {
  gap: var(--space-10);
  margin: 0 var(--space-14) var(--space-14);
  padding: 0;
  list-style: none;
  display: grid;
  container: cards / inline-size;
}

.professional-request-card {
  gap: var(--space-8);
  border: 1px solid var(--line-strong);
  min-width: 0;
  padding: var(--space-14);
  background: var(--paper);
  border-radius: .75rem;
  display: grid;
}

.professional-request-unseen {
  border-color: var(--status-attention-text);
}

.professional-request-card-open {
  border-color: var(--accent-strong);
  box-shadow: inset 4px 0 0 var(--accent-strong);
}

.professional-request-card-top {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6) var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.professional-request-marks {
  gap: var(--space-6);
  flex-wrap: wrap;
  display: inline-flex;
}

.professional-request-card h3 {
  color: var(--ink);
  font-size: var(--text-18);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.3;
}

.professional-request-card .status-badge, .professional-request-detail .status-badge {
  padding: var(--space-6) var(--space-10);
  font-size: var(--text-12);
}

.professional-request-town {
  color: var(--ink);
  font-size: var(--text-15);
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 750;
  line-height: 1.4;
}

.professional-request-about {
  color: var(--ink-soft);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.45;
}

.professional-request-price {
  align-items: baseline;
  gap: var(--space-2) var(--space-8);
  color: var(--ink);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.professional-request-price span {
  color: var(--muted);
  font-size: var(--text-13);
  font-weight: 750;
}

.professional-request-price strong {
  font-size: var(--text-20);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.professional-request-assigned {
  color: var(--muted);
  font-size: var(--text-13);
  margin: 0;
}

.professional-request-card .professional-request-open {
  width: 100%;
  min-height: 3rem;
  margin-top: var(--space-4);
  font-size: var(--text-16);
}

.professional-requests-none {
  margin: 0 var(--space-14) var(--space-14);
  color: var(--ink-soft);
  font-size: var(--text-14);
  line-height: 1.5;
}

.professional-home .empty-state h3 {
  font-size: var(--text-16);
}

.professional-home .empty-state p {
  font-size: var(--text-14);
}

.professional-home-unavailable {
  justify-items: stretch;
  gap: var(--space-10);
  display: grid;
}

.professional-home-unavailable .button {
  min-height: 3rem;
  font-size: var(--text-15);
}

.professional-request-detail, .professional-request-columns, .professional-request-main, .professional-request-side {
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.professional-request-detail > .panel, .professional-request-main > .panel, .professional-request-side > .panel {
  margin-top: 0;
}

.professional-request-header {
  gap: var(--space-8);
  min-width: 0;
  display: grid;
}

.professional-request-header .eyebrow {
  margin: 0;
}

@media not (min-width: 37.5em) {
  .dashboard-layout .professional-request-header h1 {
    font-size: var(--text-28);
    overflow-wrap: anywhere;
    margin: 0;
    line-height: 1.2;
  }
}

.professional-request-status {
  margin: 0;
}

.professional-request-contact {
  gap: var(--space-10);
  display: grid;
}

.professional-request-detail .professional-request-call, .professional-request-detail .professional-request-operator, .professional-request-detail .professional-request-mail {
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-10) var(--space-16);
  font-size: var(--text-18);
  text-align: center;
  flex-direction: column;
  line-height: 1.25;
}

.professional-request-detail .professional-request-call {
  min-height: 4rem;
}

.professional-request-detail .professional-request-operator {
  min-height: 3.5rem;
  font-size: var(--text-16);
}

.professional-request-detail .professional-request-mail {
  min-height: 3.25rem;
  font-size: var(--text-15);
}

.professional-request-call-number {
  font-size: var(--text-15);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.professional-request-mail-address {
  max-width: 100%;
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  font-weight: 650;
}

.professional-request-on-site {
  gap: var(--space-6);
  border: 1px solid var(--line-strong);
  padding: var(--space-10) var(--space-14);
  background: var(--paper);
  border-radius: .75rem;
  display: grid;
}

.professional-request-on-site p {
  color: var(--ink-soft);
  font-size: var(--text-15);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
}

.professional-request-on-site strong {
  color: var(--ink);
}

.professional-request-on-site-phone {
  min-height: 2.75rem;
  color: var(--accent-strong);
  font-size: var(--text-16);
  font-variant-numeric: tabular-nums;
  align-items: center;
  font-weight: 800;
  display: inline-flex;
}

.professional-request-on-site-notes {
  white-space: pre-wrap;
}

@media (hover: hover) {
  .professional-request-on-site-phone:hover {
    text-decoration: underline;
  }
}

@media (pointer: coarse) {
  .professional-request-on-site-phone {
    min-height: 3rem;
  }
}

@media not (min-width: 37.5em) {
  .dashboard-layout .professional-request-panel .panel-heading h2 {
    font-size: var(--text-16);
  }
}

.professional-request-text {
  margin: 0 var(--space-14) var(--space-14);
  color: var(--ink);
  font-size: var(--text-15);
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.professional-request-problem {
  white-space: pre-wrap;
}

.professional-request-fact {
  margin: 0 var(--space-14) var(--space-14);
  color: var(--ink-soft);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.professional-request-fact strong {
  color: var(--ink);
}

.professional-request-frames {
  gap: var(--space-8);
  margin: 0 var(--space-14) var(--space-14);
  padding: 0;
  list-style: none;
  display: grid;
}

.professional-request-frames li {
  border: 1px solid var(--line-strong);
  padding: var(--space-12) var(--space-12);
  color: var(--ink);
  font-size: var(--text-15);
  font-variant-numeric: tabular-nums;
  border-radius: .625rem;
  font-weight: 750;
}

.professional-request-address {
  gap: var(--space-2);
  margin: 0 var(--space-14) var(--space-12);
  color: var(--ink);
  font-size: var(--text-17);
  overflow-wrap: anywhere;
  font-weight: 750;
  line-height: 1.4;
  display: grid;
}

.professional-request-address span + span {
  color: var(--ink-soft);
  font-size: var(--text-15);
  font-weight: 650;
}

.professional-request-map {
  margin: 0 var(--space-14) var(--space-12);
}

.professional-request-actions {
  gap: var(--space-10);
  margin: 0 var(--space-14) var(--space-14);
  display: grid;
}

.professional-request-actions .button {
  width: 100%;
  min-height: 3.25rem;
  font-size: var(--text-16);
}

.professional-request-service {
  gap: var(--space-2);
  margin: 0 var(--space-14) var(--space-10);
  color: var(--ink);
  font-size: var(--text-16);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-weight: 750;
  line-height: 1.45;
  display: grid;
}

.professional-request-note {
  color: var(--muted);
  font-size: var(--text-13);
  white-space: normal;
  font-weight: 650;
}

.professional-request-price-block {
  gap: var(--space-2);
  margin: 0 var(--space-14) var(--space-14);
  border-top: 1px solid var(--line);
  padding-top: var(--space-10);
  display: grid;
}

.professional-request-price-block .professional-request-fact {
  margin: var(--space-4) 0 0;
}

.professional-request-price-label {
  color: var(--muted);
  font-size: var(--text-13);
  margin: 0;
  font-weight: 750;
}

.professional-request-price-value {
  color: var(--ink);
  font-size: var(--text-30);
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-weight: 850;
  line-height: 1.15;
}

.professional-request-assignment {
  gap: var(--space-4);
  margin: 0 var(--space-14) var(--space-12);
  color: var(--ink-soft);
  font-size: var(--text-14);
  line-height: 1.5;
  display: grid;
}

.professional-request-unavailable {
  justify-items: stretch;
}

.professional-request-unavailable .professional-request-actions {
  margin: 0;
}

.professional-request-notice {
  font-size: var(--text-15);
  margin: 0;
  line-height: 1.5;
}

.professional-request-notice:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.professional-request-returned {
  gap: var(--space-4);
  font-size: var(--text-15);
  display: grid;
}

.professional-request-returned p {
  margin: 0;
}

.professional-request-returned-reason {
  font-size: var(--text-17);
  overflow-wrap: anywhere;
  font-weight: 800;
  line-height: 1.4;
}

.professional-done-when {
  margin: 0 var(--space-14) var(--space-8);
  color: var(--ink-soft);
  font-size: var(--text-14);
  font-weight: 750;
  line-height: 1.45;
}

.professional-done-note {
  white-space: pre-wrap;
}

.professional-done-completed {
  margin: 0 var(--space-14) var(--space-14);
  color: var(--ink);
  font-size: var(--text-15);
  font-weight: 750;
  line-height: 1.45;
}

.professional-done {
  min-width: 0;
  display: grid;
}

.professional-request-detail .professional-done-open {
  width: 100%;
  min-height: 4rem;
  padding: var(--space-12) var(--space-16);
  font-size: var(--text-20);
}

.professional-done-form {
  gap: var(--space-14);
  border: 1px solid var(--line-strong);
  min-width: 0;
  padding: var(--space-14) var(--space-14);
  background: var(--paper);
  border-radius: .75rem;
}

.professional-done-form h2 {
  color: var(--ink);
  font-size: var(--text-20);
  margin: 0;
  line-height: 1.3;
}

.professional-done-field {
  gap: var(--space-6);
  min-width: 0;
  display: grid;
}

.request-form.professional-done-form label, .professional-done-photos legend {
  color: var(--ink);
  font-size: var(--text-15);
  margin: 0;
  font-weight: 750;
}

.request-form.professional-done-form textarea {
  min-height: 7.5rem;
  font-size: var(--text-16);
  line-height: 1.5;
}

.professional-done-form .field-hint, .professional-done-form .field-error {
  font-size: var(--text-13);
}

.professional-done-photos {
  gap: var(--space-8);
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
}

.professional-done-photos legend {
  margin-bottom: var(--space-6);
  padding: 0;
}

.request-form input.professional-done-input {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.request-form.professional-done-form .professional-done-add {
  width: 100%;
  min-height: 3.5rem;
  color: var(--ink);
  font-size: var(--text-16);
  cursor: pointer;
  margin: 0;
}

.professional-done-input:focus-visible + .professional-done-add {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.professional-done-input:disabled + .professional-done-add {
  cursor: not-allowed;
  opacity: .65;
}

.professional-done-sources {
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  display: grid;
}

.professional-done-files {
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.professional-done-file {
  align-items: center;
  gap: var(--space-4) var(--space-10);
  border: 1px solid var(--line);
  min-width: 0;
  padding: var(--space-8);
  border-radius: .625rem;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  display: grid;
}

.professional-done-file-invalid {
  border-color: var(--status-problem-text);
}

.professional-done-preview {
  background: var(--paper-subtle);
  object-fit: cover;
  border-radius: .5rem;
  width: 3.5rem;
  height: 3.5rem;
}

.professional-done-preview-none {
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-12);
  justify-content: center;
  align-items: center;
  font-weight: 800;
  display: inline-flex;
}

.professional-done-file-text {
  gap: var(--space-2);
  min-width: 0;
  display: grid;
}

.professional-done-file-name {
  color: var(--ink);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  font-weight: 700;
  line-height: 1.35;
}

.professional-done-file-size {
  color: var(--muted);
  font-size: var(--text-13);
  font-variant-numeric: tabular-nums;
}

.professional-done-form .professional-done-remove {
  min-height: 2.75rem;
  font-size: var(--text-14);
}

.professional-done-file .field-error {
  grid-column: 1 / -1;
}

@container form-section (max-width: 15rem) {
  .professional-done-file {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .professional-done-form .professional-done-remove {
    grid-column: 1 / -1;
  }
}

.professional-done-progress {
  color: var(--ink-soft);
  font-size: var(--text-15);
  margin: 0;
  font-weight: 700;
}

.professional-done-actions {
  gap: var(--space-10);
  display: grid;
}

.professional-done-actions .button {
  width: 100%;
}

.professional-done-form .professional-done-submit {
  min-height: 3.5rem;
  font-size: var(--text-17);
}

.professional-done-form .professional-done-cancel {
  min-height: 3rem;
  font-size: var(--text-15);
}

.professional-done-form > .notice-error {
  font-size: var(--text-14);
  margin: 0;
}

.work-photos {
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.5rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.professional-request-panel .work-photos {
  margin: 0 var(--space-14) var(--space-14);
}

.work-photo {
  border: 1px solid var(--line);
  background: var(--paper-subtle);
  border-radius: .625rem;
  display: block;
  overflow: hidden;
}

.work-photo img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

.work-photo-file {
  border: 1px solid var(--line-strong);
  min-height: 5.5rem;
  padding: var(--space-8);
  background: var(--paper-subtle);
  color: var(--accent-strong);
  font-size: var(--text-13);
  text-align: center;
  overflow-wrap: anywhere;
  border-radius: .625rem;
  justify-content: center;
  align-items: center;
  font-weight: 750;
  line-height: 1.35;
  display: flex;
}

.work-photo:focus-visible, .work-photo-file:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.photo-viewer[open] {
  overscroll-behavior: contain;
  background: var(--surface-dark);
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  color: var(--on-surface-dark);
  font-size: var(--text-14);
  text-align: left;
  border: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  margin: 0;
  padding: 0;
  line-height: 1.45;
  display: grid;
  position: fixed;
  inset: 0;
  overflow: auto;
}

.photo-viewer::backdrop {
  background: var(--surface-dark);
}

.photo-viewer :focus-visible {
  outline: 3px solid var(--focus-on-dark);
  outline-offset: 2px;
}

.photo-viewer-bar {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  padding: max(var(--space-10), env(safe-area-inset-top)) max(var(--space-16), env(safe-area-inset-right)) var(--space-10) max(var(--space-16), env(safe-area-inset-left));
  flex-wrap: wrap;
  display: flex;
}

.photo-viewer-title {
  color: var(--on-surface-dark);
  font-size: var(--text-16);
  margin: 0;
}

.photo-viewer-stage {
  align-items: center;
  gap: var(--space-8);
  min-height: 0;
  padding: 0 max(var(--space-8), env(safe-area-inset-right)) 0 max(var(--space-8), env(safe-area-inset-left));
  grid-template-columns: auto minmax(0, 1fr) auto;
  display: grid;
}

.photo-viewer-figure {
  grid-column: 2;
  place-items: center;
  height: 100%;
  min-height: 0;
  display: grid;
  position: relative;
}

.photo-viewer-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.photo-viewer-status {
  color: var(--on-surface-dark-muted);
  font-size: var(--text-14);
  margin: 0;
  position: absolute;
}

.photo-viewer-unavailable {
  justify-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  text-align: center;
  display: grid;
}

.photo-viewer-unavailable p {
  color: var(--on-surface-dark);
  font-size: var(--text-15);
  margin: 0;
}

.photo-viewer-button {
  border: 1px solid var(--line-dark);
  min-width: 3rem;
  min-height: 3rem;
  padding: var(--space-8) var(--space-14);
  background: var(--surface-dark-raised);
  color: var(--on-surface-dark);
  font-size: var(--text-14);
  border-radius: .5625rem;
  justify-content: center;
  align-items: center;
  font-weight: 750;
  display: inline-flex;
}

.photo-viewer-step {
  padding: var(--space-4);
  font-size: var(--text-28);
  line-height: 1;
}

.photo-viewer-step[aria-disabled="true"] {
  color: var(--on-surface-dark-faint);
  cursor: default;
}

.photo-viewer-actions {
  padding: var(--space-10) max(var(--space-16), env(safe-area-inset-right)) max(var(--space-10), env(safe-area-inset-bottom)) max(var(--space-16), env(safe-area-inset-left));
  justify-content: center;
  margin: 0;
  display: flex;
}

.photo-viewer-original {
  color: var(--accent);
}

@media (hover: hover) {
  .photo-viewer-button:hover {
    border-color: var(--on-surface-dark-muted);
  }
}

.professional-history {
  gap: var(--space-12);
  min-width: 0;
  display: grid;
}

.professional-history > .panel {
  margin-top: 0;
}

.professional-history-month {
  gap: var(--space-6);
  display: grid;
}

.professional-history-month label {
  color: var(--ink-soft);
  font-size: var(--text-14);
  font-weight: 750;
}

.professional-history-month select {
  border: 1px solid var(--line-strong);
  width: 100%;
  min-height: 3rem;
  padding: var(--space-10) var(--space-12);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-16);
  border-radius: .625rem;
  font-weight: 750;
}

.professional-history-month select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.professional-history-month select:disabled {
  cursor: not-allowed;
  opacity: .65;
}

.professional-history-status {
  color: var(--muted);
  font-size: var(--text-14);
  margin: 0;
  line-height: 1.4;
}

@media not (min-width: 37.5em) {
  .dashboard-layout .professional-history-panel .panel-heading h2 {
    font-size: var(--text-18);
    line-height: 1.3;
  }
}

.professional-history-value {
  gap: var(--space-4);
  margin: 0 var(--space-14) var(--space-12);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-12);
  display: grid;
}

.professional-history-value-line {
  align-items: baseline;
  gap: var(--space-2) var(--space-8);
  color: var(--ink);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.professional-history-value-line span {
  color: var(--muted);
  font-size: var(--text-14);
  font-weight: 750;
}

.professional-history-value-line strong {
  font-size: var(--text-26);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1.2;
}

.professional-history-value-sentence {
  color: var(--ink-soft);
  font-size: var(--text-14);
  margin: 0;
  line-height: 1.5;
}

.professional-history-value-note {
  color: var(--muted);
  font-size: var(--text-13);
  margin: 0;
  line-height: 1.5;
}

.professional-history-rows {
  gap: var(--space-8);
  margin: 0 var(--space-14) var(--space-14);
  padding: 0;
  list-style: none;
  display: grid;
  container: cards / inline-size;
}

.professional-history-row {
  gap: var(--space-4);
  border: 1px solid var(--line-strong);
  min-width: 0;
  min-height: 2.75rem;
  padding: var(--space-12) var(--space-40) var(--space-12) var(--space-14);
  background: var(--paper);
  color: var(--ink);
  border-radius: .75rem;
  display: grid;
  position: relative;
}

@media (hover: hover) {
  .professional-history-row:hover {
    border-color: var(--accent-line);
    background: var(--paper-subtle);
  }
}

.professional-history-row:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.professional-history-row-top {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4) var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.professional-history-day {
  color: var(--muted);
  font-size: var(--text-13);
  font-weight: 750;
}

.professional-history-row .status-badge {
  padding: var(--space-6) var(--space-10);
  font-size: var(--text-12);
}

.professional-history-service {
  color: var(--ink);
  font-size: var(--text-16);
  overflow-wrap: anywhere;
  font-weight: 800;
  line-height: 1.35;
}

.professional-history-about {
  color: var(--ink-soft);
  font-size: var(--text-14);
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.professional-history-done {
  gap: var(--space-2) var(--space-12);
  color: var(--ink-soft);
  font-size: var(--text-13);
  flex-wrap: wrap;
  font-weight: 750;
  line-height: 1.45;
  display: flex;
}

.professional-history-price {
  align-items: baseline;
  gap: var(--space-2) var(--space-8);
  color: var(--ink);
  flex-wrap: wrap;
  display: flex;
}

.professional-history-price span {
  color: var(--muted);
  font-size: var(--text-13);
  font-weight: 750;
}

.professional-history-price strong {
  font-size: var(--text-17);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.professional-history-open {
  top: 50%;
  right: var(--space-14);
  color: var(--accent-strong);
  font-size: var(--text-24);
  font-weight: 800;
  line-height: 1;
  position: absolute;
  transform: translateY(-50%);
}

@container cards (max-width: 15rem) {
  .work-request-card, .professional-request-card {
    padding: var(--space-10);
  }

  .client-request-card, .professional-history-row {
    padding: var(--space-10) var(--space-28) var(--space-10) var(--space-10);
  }

  .client-request-card-open, .professional-history-open {
    right: var(--space-8);
  }
}

.professional-history-limit {
  margin: 0 var(--space-14) var(--space-14);
  font-size: var(--text-13);
}

.professional-history-empty {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: .75rem;
}

.professional-history .empty-state h3 {
  font-size: var(--text-16);
}

.professional-history .empty-state p {
  font-size: var(--text-14);
}

.professional-history-unavailable {
  justify-items: stretch;
  gap: var(--space-10);
  display: grid;
}

.professional-history-unavailable .button {
  min-height: 3rem;
  font-size: var(--text-15);
}

:where(.dashboard-layout) :where(p, small, h1, dd, label:not([class])) {
  max-width: var(--measure);
}

@media (min-width: 37.5em) {
  .page-heading .page-description, .footer-note, .coming-soon-body p {
    max-width: var(--measure);
  }

  .client-request {
    max-width: 36rem;
  }

  .client-requests-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr));
  }

  .client-requests-more {
    justify-items: center;
  }

  .client-requests-unavailable, .client-requests-empty {
    justify-items: start;
  }

  .client-requests-more .button, .client-requests-unavailable .button, .client-requests-empty .button {
    width: auto;
    min-width: min(100%, 15rem);
  }

  .client-request-columns, .professional-request-columns {
    align-items: start;
    column-gap: var(--space-24);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 36rem));
  }

  .professional-request-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  }

  .professional-request-panel .work-photos {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
  }

  .professional-history-rows {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr));
  }

  .electrician-work-order-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  }

  .work-order-sheet {
    align-items: start;
    gap: var(--space-18) var(--space-24);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 36rem));
    display: grid;
  }

  .work-order-sheet > .panel {
    margin-top: 0;
  }

  .content-wrap > .button-full {
    width: auto;
    min-width: min(100%, 15rem);
  }

  .settings-columns {
    max-width: 40rem;
    margin-inline: auto;
  }

  .settings-columns .panel > .electrician-fieldset, .settings-columns .panel > .settings-readonly, .settings-columns .panel > .client-locations, .settings-columns .panel > .client-consents, .settings-columns .panel > .account-deletion {
    max-width: 35rem;
  }

  .dashboard-layout .table-cards-grid, .dashboard-layout .table-cards-grid tr {
    min-width: 0;
    display: block;
  }

  .dashboard-layout .table-cards-grid thead {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .dashboard-layout .table-cards-grid tbody {
    gap: var(--space-10);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.25rem), 1fr));
    display: grid;
  }

  .dashboard-layout .table-cards-grid tr {
    border: 1px solid var(--line);
    padding: 0 var(--space-14);
    background: var(--paper);
    border-radius: .6875rem;
  }

  .dashboard-layout .table-cards-grid td {
    align-items: start;
    gap: 0 var(--space-12);
    border-top: 1px solid var(--line);
    padding: var(--space-10) 0;
    color: var(--ink-soft);
    font-size: var(--text-13);
    overflow-wrap: anywhere;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    line-height: 1.45;
    display: grid;
  }

  .dashboard-layout .table-cards-grid td:before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--text-12);
    grid-row: span 2;
    font-weight: 700;
  }

  .dashboard-layout .table-cards-grid td > * {
    grid-column: 2;
  }

  .dashboard-layout .table-cards-grid td:first-child {
    color: var(--ink);
    font-size: var(--text-15);
    border-top: 0;
    display: block;
  }

  .dashboard-layout .table-cards-grid td:first-child:before {
    content: none;
  }

  .dashboard-layout .table-cards-grid td strong {
    font-size: var(--text-13);
  }

  .dashboard-layout .table-cards-grid td:first-child strong {
    font-size: var(--text-15);
  }

  @media (hover: hover) {
    .dashboard-layout .table-cards-grid tbody tr:hover td {
      background: none;
    }
  }

  @container form-section (min-width: 30rem) {
    :where(.client-help, .settings-columns) .form-pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

@container form-section (min-width: 28.5rem) {
  .professional-done-files {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  }

  .professional-done-file {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    align-content: start;
  }

  .professional-done-form .professional-done-remove {
    grid-column: 1 / -1;
  }
}

@media not (max-width: 40.625em) {
  .client-help-hours {
    max-width: none;
  }
}

@media (min-width: 52.5em) {
  .client-help-actions {
    align-items: start;
    gap: var(--space-8) var(--space-24);
    grid-template-columns: minmax(0, 36rem) minmax(12.5rem, max-content);
    display: grid;
  }

  .client-help-actions > .client-request-cta, .client-help-actions > .client-request {
    grid-area: 1 / 1;
  }

  .client-help-actions > .client-request-cta {
    justify-self: start;
    min-width: min(100%, 15rem);
  }

  .client-help-ways {
    align-content: start;
    gap: var(--space-8);
    grid-area: 1 / 2;
    display: grid;
  }

  .professional-home {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
    align-items: start;
  }

  .professional-history {
    align-items: start;
    column-gap: var(--space-24);
    grid-template-columns: minmax(12.5rem, 17.5rem) minmax(0, 1fr);
  }

  .professional-history > :only-child:not(.professional-history-month) {
    grid-column: 1 / -1;
  }

  .professional-history-month {
    top: var(--space-16);
    position: sticky;
  }
}

@media (min-width: 75em) {
  .settings-columns {
    gap: var(--space-18) var(--space-24);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 74rem;
    display: grid;
  }

  .settings-columns .electrician-profile-form {
    display: contents;
  }

  .settings-columns > .page-heading, .settings-columns > .settings-sections, .settings-columns .electrician-profile-form > :not(.panel) {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: 0;
  }

  .settings-columns .settings-panel {
    margin-top: 0;
  }
}

.sheet-host {
  --sheet-form: wide;
}

.sheet-handle {
  width: 2.5rem;
  height: .3125rem;
  margin: var(--space-8) auto 0;
  background: var(--line-strong);
  touch-action: none;
  border-radius: .1875rem;
  flex: none;
  display: none;
}

.sheet-hint {
  margin: var(--space-6) 0 0;
  color: var(--muted);
  font-size: var(--text-11);
  text-align: center;
  touch-action: none;
  display: none;
}

.sheet-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-6) max(var(--space-10), env(safe-area-inset-right)) var(--space-6) max(var(--space-16), env(safe-area-inset-left));
  touch-action: none;
  flex: none;
  display: flex;
}

.sheet-title {
  color: var(--ink);
  font-size: var(--text-16);
  margin: 0;
  font-weight: 800;
}

.sheet-close {
  border: 1px solid var(--line);
  background: var(--paper);
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: var(--text-22);
  border-radius: 50%;
  flex: none;
  place-items: center;
  padding: 0;
  line-height: 1;
  display: inline-grid;
}

.sheet-body {
  overscroll-behavior: contain;
  min-height: 0;
  padding: var(--space-4) max(var(--space-16), env(safe-area-inset-right)) var(--space-12) max(var(--space-16), env(safe-area-inset-left));
  flex: auto;
  overflow-y: auto;
}

.sheet-body:last-child {
  padding-bottom: max(var(--space-16), env(safe-area-inset-bottom));
}

.sheet-footer {
  gap: var(--space-10);
  border-top: 1px solid var(--line);
  padding: var(--space-12) max(var(--space-16), env(safe-area-inset-right)) max(var(--space-16), env(safe-area-inset-bottom)) max(var(--space-16), env(safe-area-inset-left));
  flex-wrap: wrap;
  flex: none;
  display: flex;
}

.sheet-footer .button {
  min-height: var(--target-size);
  flex: 10rem;
}

.filters-button {
  min-height: var(--target-size);
  gap: var(--space-6);
  padding: var(--space-8) var(--space-14);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-12);
  cursor: pointer;
  font-weight: 700;
}

.filters-button .filters-count {
  min-width: 1.25rem;
  padding: 0 var(--space-6);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: var(--text-10);
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  line-height: 1.6;
  display: inline-flex;
}

.sheet-host[data-sheet-form="inline"].professionals-filters, .sheet-host[data-sheet-form="inline"].people-filters {
  display: contents;
}

.sheet-body > .work-request-filters, .sheet-body > .list-filters {
  padding-top: var(--space-6);
}

.work-request-detail-actions[data-sheet-form="none"] {
  display: none;
}

.work-request-detail-actions[data-sheet-form="sheet"] {
  justify-self: start;
}

.work-request-actions-button {
  min-height: var(--target-size);
  font-size: var(--text-13);
}

.sheet-actions {
  gap: var(--space-8);
  padding: var(--space-6) 0 0;
  margin: 0;
  list-style: none;
  display: grid;
}

.sheet-action {
  width: 100%;
  min-height: var(--target-size);
  font-size: var(--text-13);
  text-align: left;
  justify-content: flex-start;
}

.work-request-picker-host[data-sheet-form="inline"] {
  display: contents;
}

.work-request-picker-button {
  width: 100%;
  min-height: var(--target-size);
  font-size: var(--text-13);
}

@media not (min-width: 37.5em) {
  :is(.dashboard-layout .work-request-secondary-ask, .dashboard-layout .work-request-close-panel:has(.work-request-secondary-ask)) {
    display: none;
  }
}

html:has(.pull-refresh) {
  overscroll-behavior-y: contain;
}

.pull-refresh {
  gap: var(--space-14);
  touch-action: pan-y pinch-zoom;
  min-width: 0;
  display: grid;
}

.pull-refresh-indicator {
  color: var(--muted);
  font-size: var(--text-12);
  justify-content: center;
  align-items: end;
  font-weight: 700;
  line-height: 1.3;
  display: none;
  overflow: hidden;
}

.pull-refresh-indicator[data-pulling] {
  display: flex;
}

.pull-refresh-bar {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  display: flex;
}

.pull-refresh-aside {
  flex: auto;
  min-width: 0;
}

.pull-refresh-status {
  min-height: 1.25rem;
  color: var(--ink-soft);
  font-size: var(--text-13);
  margin: 0;
  font-weight: 750;
}

.pull-refresh-button {
  min-height: 2.5rem;
  font-size: var(--text-12);
}

.pull-refresh-failed {
  align-items: center;
  gap: var(--space-6) var(--space-12);
  font-size: var(--text-12);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.pull-refresh-retry {
  min-height: 2.75rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 800;
  text-decoration: underline;
}

.swipe-card {
  position: relative;
}

.swipe-card[data-swipe] {
  border-radius: .6875rem;
  overflow: hidden;
}

.swipe-card-action {
  padding: 0 var(--space-14);
  background: var(--accent-soft);
  visibility: hidden;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0 0 0 auto;
}

.swipe-card[data-swipe] .swipe-card-action {
  visibility: visible;
}

.swipe-card-button {
  min-height: var(--target-size);
}

.swipe-card-front {
  touch-action: pan-y;
  transition: transform .2s;
  position: relative;
}

.swipe-card[data-swipe="moving"] .swipe-card-front {
  transition: none;
}

.swipe-hint {
  margin: 0 0 var(--space-8);
  border: 1px solid var(--accent-line);
  padding: var(--space-10) var(--space-12);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: var(--text-12);
  border-radius: .625rem;
  line-height: 1.45;
  display: none;
}

.swipe-hint-ok {
  min-height: 2.75rem;
  margin-left: var(--space-6);
  padding: 0 var(--space-6);
  color: var(--accent-strong);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  font-weight: 800;
  text-decoration: underline;
}

@media not (min-width: 37.5em) {
  .swipe-hint {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-hint {
    display: none;
  }

  .swipe-card-front {
    transition: none;
  }
}

.sheet-menu .sheet-header, .sheet-menu .sheet-body {
  padding-right: var(--space-4);
  padding-left: var(--space-4);
}

.sheet-menu .sheet-body:last-child {
  padding-bottom: var(--space-4);
}

@keyframes sheet-rise {
  from {
    transform: translateY(100%);
  }
}

@media not (min-width: 37.5em) {
  .sheet-host {
    --sheet-form: sheet;
  }

  .sheet[open] {
    background: var(--paper);
    width: 100%;
    max-width: none;
    max-height: 90svh;
    color: var(--ink);
    box-shadow: var(--shadow-raised);
    text-align: left;
    border: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    transition: transform .2s;
    animation: .25s ease-out sheet-rise;
    display: flex;
    position: fixed;
    inset: auto 0 0;
    overflow: hidden;
  }

  .sheet-dragging {
    transition: none;
  }

  .sheet::backdrop {
    background: var(--scrim);
  }

  .sheet-handle, .sheet-hint {
    display: block;
  }
}

@media (pointer: coarse) {
  .sheet-close {
    min-width: 3rem;
    min-height: 3rem;
  }
}

@media (hover: hover) {
  .sheet-close:hover {
    border-color: var(--line-strong);
    background: var(--paper-subtle);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet[open] {
    transition: none;
    animation: none;
  }
}

[data-hint] {
  position: relative;
}

[data-hint]:after {
  content: attr(data-hint);
  z-index: 30;
  top: calc(100% + var(--space-4));
  padding: var(--space-4) var(--space-8);
  background: var(--surface-dark);
  color: var(--on-surface-dark);
  font-size: var(--text-9);
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  border-radius: .375rem;
  font-weight: 700;
  line-height: 1.3;
  display: none;
  position: absolute;
  right: 0;
}

[data-hint][data-hint-align="start"]:after {
  left: 0;
  right: auto;
}

[data-hint]:focus-visible:after {
  display: block;
}

@media (hover: hover) {
  [data-hint]:hover:after {
    display: block;
  }
}

.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.shortcuts-dialog {
  width: min(100% - 2 * var(--space-gutter), 28rem);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-raised);
  border-radius: .875rem;
  margin: auto;
  padding: 0;
}

.shortcuts-dialog::backdrop {
  background: var(--scrim);
}

.shortcuts-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-10);
  border-bottom: 1px solid var(--line);
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-18);
  display: flex;
}

.shortcuts-title {
  color: var(--ink);
  font-size: var(--text-16);
  margin: 0;
  font-weight: 800;
}

.shortcuts-close {
  border: 1px solid var(--line);
  background: var(--paper);
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: var(--text-22);
  border-radius: 50%;
  flex: none;
  place-items: center;
  padding: 0;
  line-height: 1;
  display: inline-grid;
}

@media (hover: hover) {
  .shortcuts-close:hover {
    border-color: var(--line-strong);
    background: var(--paper-subtle);
  }
}

.shortcuts-list {
  gap: var(--space-10);
  padding: var(--space-16) var(--space-18) var(--space-6);
  margin: 0;
  display: grid;
}

.shortcuts-line {
  align-items: center;
  gap: var(--space-14);
  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
  display: grid;
}

.shortcuts-line dt {
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.shortcuts-line dd {
  color: var(--ink-soft);
  font-size: var(--text-13);
  margin: 0;
  line-height: 1.45;
}

.shortcut-key {
  border: 1px solid var(--line-strong);
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0 var(--space-6);
  background: var(--paper-subtle);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-11);
  border-bottom-width: 2px;
  border-radius: .375rem;
  place-items: center;
  font-weight: 800;
  line-height: 1.4;
  display: inline-grid;
}

.shortcuts-typing {
  padding: var(--space-6) var(--space-18) var(--space-16);
  color: var(--muted);
  font-size: var(--text-11);
  margin: 0;
  line-height: 1.45;
}

.work-request-list {
  --list-form: cards;
}

.work-request-table-wrap {
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: .875rem;
  display: none;
}

.work-request-table th {
  padding: 0 var(--space-10);
  font-size: var(--text-9);
}

.work-request-table th:first-child, .work-request-table td:first-child {
  padding-left: var(--space-14);
}

.sort-button {
  min-width: var(--target-size);
  min-height: var(--target-size);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-flex;
}

.sort-mark {
  font-size: var(--text-11);
  line-height: 1;
}

th[aria-sort] .sort-button {
  color: var(--ink);
}

@media (hover: hover) {
  .sort-button:hover {
    color: var(--ink);
  }
}

.work-request-table td {
  color: var(--ink-soft);
  font-size: var(--text-12);
  vertical-align: top;
  line-height: 1.45;
}

.work-request-table .table-subline {
  margin-top: var(--space-2);
  font-size: var(--text-11);
  line-height: 1.45;
}

.work-request-row-client {
  align-items: center;
  gap: var(--space-2) var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.work-request-row-name {
  min-height: var(--target-size);
  color: var(--ink);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
  align-items: center;
  font-weight: 800;
  display: inline-flex;
}

.work-request-row-name:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .work-request-row-name:hover {
    color: var(--accent-strong);
    text-decoration: underline;
  }
}

.work-request-table tr.work-request-row-open > td {
  background: var(--accent-soft);
}

.work-request-table tr.work-request-row-open > td:first-child {
  box-shadow: inset 4px 0 0 var(--accent-strong);
}

.work-request-row-problem, .work-request-row-work-type, .work-request-row-assigned {
  display: none;
}

@media (min-width: 75em) and (min-height: 30em) {
  .work-request-list {
    --list-form: table;
  }

  .work-request-list > .work-request-cards {
    display: none;
  }

  .work-request-table-wrap {
    display: block;
  }

  .panes.work-request-panes, .panes.professionals-panes {
    grid-template-columns: minmax(0, 3fr) minmax(min(100%, 20rem), 2fr);
  }

  @container list-pane (max-width: 52rem) {
    .work-request-col-problem, .work-request-col-work-type, .work-request-col-assigned {
      display: none;
    }

    .work-request-row-problem, .work-request-row-work-type, .work-request-row-assigned {
      display: block;
    }
  }
}

@media (pointer: coarse) {
  .button, .filter-chip, .recent-request, .settings-sections a, .form-stack input, .request-form input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), .request-form select, .request-form textarea, .request-form .settings-choice, .request-form .schedule-day, .settings-change-line a, .client-locations-change a, .public-about-link, .pull-refresh-retry, .swipe-hint-ok, .work-request-phone, .work-request-email, .work-request-professional-choice, .work-request-professional-phone, .professional-phone, .button-soft.button-full, .set-password-leave .button, .set-password-unread .button, .password-reset-actions .button, .people-actions .button, .operator-form-actions .button, .client-help-actions > .button, .client-help-ways > .button, .client-consents .button, .account-deletion .button, .work-request-more .button, .work-request-unavailable-actions .button, .work-request-actions .button, .time-frame-row .time-frame-remove, .time-frame-actions .button, .work-request-professionals-failed .button, .work-request-close > .button, .work-request-close-actions .button, .work-request-work-actions > .button, .work-request-action-buttons .button, .location-map-actions .button, .professionals-unavailable .button, .professionals-empty .button, .file-actions .button, .professional-unavailable-actions .button, .professional-form-actions .button, .professional-state-actions .button, .account-confirm-actions .button, .temporary-password-actions .button, .public-sign-in .button, .settings-columns .button, .electrician-work-order-card .electrician-work-order-action, .professional-done-form .professional-done-remove, .work-request-filters .filter-chip, .professionals-chips .filter-chip, .work-request-detail-contact .work-request-phone, .work-request-detail-contact .work-request-email, .work-request-facts .work-request-fact-link, .professional-facts .professional-phone, .professional-facts .professional-email, .professional-file-contact .professional-email {
    min-height: 3rem;
  }

  .text-link, .work-request-closed-link .text-link, .work-request-done-name, .work-request-fact-link, .location-map-attribution a, .professional-name, .professional-email {
    align-items: center;
    min-height: 3rem;
    display: inline-flex;
  }

  .location-map-attribution {
    padding-top: 0;
    padding-bottom: 0;
  }

  .theme-toggle, .location-map-button {
    width: 3rem;
    height: 3rem;
  }

  .shortcuts-close {
    min-width: 3rem;
    min-height: 3rem;
  }
}

/*# sourceMappingURL=_1n2lxs3c24m5h._.css.map*/