:root {
  color-scheme: light;
  --cream: oklch(96.1% .014 88); --paper: oklch(98.7% .008 88); --sand: oklch(92.8% .019 88);
  --ink: oklch(30.8% .024 164); --muted: oklch(49% .019 151); --petrol: oklch(48.8% .076 178); --deep: oklch(31.9% .048 177);
  --line: oklch(85.9% .026 83); --danger: oklch(46% .13 37); --field: var(--deep);
  --gutter: clamp(1rem, .4rem + 2.4vw, 2.5rem); --pad: clamp(1.25rem, .9rem + 1vw, 2rem);
  font-family: "Helvetica Neue", Arial, system-ui, sans-serif; font-synthesis: none; -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; text-wrap: pretty; -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; min-inline-size: 0; }
body { margin: 0; min-block-size: 100svh; background: var(--cream); color: var(--ink); font-size: .9375rem; line-height: 1.55; }
h1,h2,h3,p,ul { margin: 0; }
h1,h2,h3 { line-height: 1.2; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.55rem + .7vw, 2.375rem); }
h2 { font-size: 1.25rem; } h3 { font-size: 1rem; }
a { color: var(--petrol); text-underline-offset: .22em; }
img { display: block; max-inline-size: 100%; block-size: auto; }
button,input,textarea,select { font: inherit; color: inherit; }
button,a { touch-action: manipulation; }
button,.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 44px; padding: .7rem 1.15rem; border: 1px solid var(--petrol); border-radius: 10px; background: var(--petrol); color: var(--cream); font-weight: 600; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button:active,.button:active { filter: brightness(.88); } a:active { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 4px; }
.secondary { background: var(--paper); color: var(--petrol); border-color: var(--line); }
.danger { background: transparent; color: var(--danger); border-color: color-mix(in oklch, var(--danger) 40%, var(--paper)); }
[hidden] { display: none !important; }
.muted,small { color: var(--muted); } small { font-size: .8125rem; }
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: var(--muted); }
.stack,.fields { display: flex; flex-direction: column; gap: 1.1rem; }
.stack > :is(button,a),.fields > button { align-self: flex-start; }
.row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.push { margin-inline-start: auto; }
.text { white-space: pre-wrap; overflow-wrap: anywhere; }
.intro { display: grid; gap: .65rem; margin-block-end: 1.75rem; }
.intro p { color: var(--muted); max-inline-size: 62ch; }
.intro .eyebrow { margin-block-end: .2rem; }
.panel,.paper { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.panel { padding: var(--pad); }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; padding: var(--pad); border-block-end: 1px solid var(--line); }
label { display: grid; gap: .4rem; font-weight: 600; }
input,textarea,select { inline-size: 100%; padding: .75rem; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; font-weight: 400; font-size: max(16px, 1rem); }
input,select { min-block-size: 46px; }
textarea { min-block-size: 9lh; max-block-size: 24lh; field-sizing: content; resize: vertical; text-wrap: stable; }
input[type=file] { padding: .6rem; font-size: .875rem; }
input::file-selector-button { padding: .45rem .6rem; border: 1px solid var(--line); background: var(--sand); color: var(--ink); border-radius: 4px; margin-inline-end: .6rem; cursor: pointer; }
input::file-selector-button:active { background: var(--line); }
.check { display: flex; align-items: flex-start; font-weight: 400; gap: .75rem; }
.check input { flex: none; inline-size: 1.2rem; min-block-size: 1.2rem; margin-block-start: .2rem; accent-color: var(--petrol); }
.form-error { color: var(--danger); border-inline-start: 3px solid var(--danger); padding-inline-start: .8rem; }
#notice { padding: .9rem 1rem; margin-block-end: 1.25rem; background: color-mix(in oklch, var(--petrol) 9%, var(--paper)); border-inline-start: 3px solid var(--petrol); border-radius: 4px; }
#notice.error { color: var(--danger); border-color: var(--danger); background: color-mix(in oklch, var(--danger) 7%, var(--paper)); }
.skip { position: absolute; inset-block-start: -8rem; inset-inline-start: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--paper); }
.skip:focus-visible { inset-block-start: 1rem; }
/* The client shell has only routes supported by the application. */
body:is([data-area=client],[data-area=admin]) { display: grid; grid-template-columns: 15.5rem minmax(0,1fr); }
body[data-area=admin] { --field: var(--ink); }
#account { background: var(--field); color: var(--cream); }
.side-inner { position: sticky; inset-block-start: 0; min-block-size: 100dvh; padding: 2rem 1rem 1.25rem; display: flex; flex-direction: column; gap: 1.75rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.1rem; font-weight: 400; letter-spacing: -.02em; color: var(--cream); }
.brand img { inline-size: 7rem; flex: none; }
.brand-link { align-self: flex-start; padding: .25rem .5rem; }
.navigation { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; }
.organisation { padding-inline: .75rem; font-weight: 600; }
.navigation nav { display: grid; gap: .25rem; }
.navigation nav a { display: flex; align-items: center; min-block-size: 44px; padding: .6rem .75rem; border-radius: 6px; color: var(--cream); text-decoration: none; }
.navigation nav a[aria-current] { background: color-mix(in oklch, var(--cream) 15%, transparent); font-weight: 600; }
.navigation nav .new-link { margin-block-start: .75rem; background: var(--cream); color: var(--field); font-weight: 600; }
.user { display: grid; gap: .5rem; margin-block-start: auto; padding-block-start: 1rem; border-block-start: 1px solid color-mix(in oklch, var(--cream) 22%, transparent); font-size: .8125rem; overflow-wrap: anywhere; }
.side-out { background: transparent; color: var(--cream); justify-content: flex-start; border-color: transparent; padding-inline: .5rem; }
#account :focus-visible { outline-color: var(--cream); }
.menu { display: none; }
#main { padding: 2rem var(--gutter) 5rem; }
#app { max-inline-size: 84rem; margin-inline: auto; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.page-head > .button { margin-block-end: 1.5rem; }
.requests { padding: 0; overflow: clip; }
.request-list,.list { list-style: none; padding: 0; }
.request-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--pad); border-block-end: 1px solid var(--line); }
.request-list li:last-child,.list li:last-child { border-block-end: 0; }
.request-list a { display: grid; gap: .25rem; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.status { display: inline-flex; align-items: center; white-space: nowrap; padding: .2rem .65rem; font-size: .75rem; color: var(--deep); background: color-mix(in oklch, var(--petrol) 10%, var(--paper)); border-radius: 99px; }
.empty { padding: 2rem var(--pad); }
.form-panel,.terms { max-inline-size: 48rem; }
.back { display: inline-flex; align-items: center; min-block-size: 44px; margin-block-end: 1rem; font-weight: 600; text-decoration: none; }
.columns { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.primary { flex: 999 1 0; min-inline-size: min(100%, 52%); }
.aside { flex: 1 1 19rem; }
.document-head { display: grid; gap: 1.25rem; padding: var(--pad); }
.document-head h1 { font-size: 1.75rem; overflow-wrap: anywhere; }
.document-section { display: grid; gap: 1.25rem; padding: var(--pad); border-block-start: 1px solid var(--line); }
.document-section h2 { display: flex; gap: 1rem; align-items: baseline; font-size: 1.1rem; }
.document-section h2 span { color: var(--muted); font-size: .8125rem; }
.list li { display: grid; gap: .5rem; padding-block: 1rem; border-block-end: 1px solid var(--line); overflow-wrap: anywhere; }
.list li:first-child { padding-block-start: 0; }
.file-link { display: inline-flex; align-items: center; min-block-size: 44px; overflow-wrap: anywhere; }
/* Pre-login screens follow the selected split layout. */
body[data-area=pre] { display: grid; grid-template-columns: minmax(16rem, 42%) minmax(0,1fr); }
.pre-brand { min-block-size: 100svh; padding: clamp(1.5rem, .5rem + 3vw, 3.5rem); display: flex; flex-direction: column; gap: 3rem; }
.pitch { margin-block-start: auto; display: grid; gap: 1.25rem; }
.pitch .eyebrow { color: color-mix(in oklch, var(--cream) 75%, transparent); }
.pitch h2 { font-size: clamp(1.75rem, 1rem + 2vw, 3rem); line-height: 1.12; }
.pitch p:last-child { max-inline-size: 30ch; color: color-mix(in oklch, var(--cream) 80%, transparent); }
.brand-foot { margin-block-start: 2rem; font-size: .8125rem; opacity: .75; }
body[data-area=pre] #main { display: flex; flex-direction: column; justify-content: safe center; padding: clamp(2rem, 1rem + 4vw, 5rem) var(--gutter); }
body[data-area=pre] #app,body[data-area=pre] #notice { inline-size: min(100%, 27rem); margin-inline: auto; }
.login { inline-size: 100%; }
.login .intro { margin-block-end: .5rem; }
.login .fields > button { align-self: stretch; }
body[data-area=admin-pre] { background: var(--ink); --field: var(--ink); }
body[data-area=admin-pre] .pre-brand { min-block-size: auto; padding: 1.25rem var(--gutter); border-block-end: 1px solid color-mix(in oklch, var(--cream) 18%, transparent); }
body[data-area=admin-pre] :is(.pitch,.brand-foot) { display: none; }
body[data-area=admin-pre] #main { display: grid; align-content: safe center; min-block-size: calc(100svh - 5rem); }
body[data-area=admin-pre] #app,body[data-area=admin-pre] #notice { inline-size: min(100%,28rem); margin-inline: auto; }
body[data-area=admin-pre] .login h1 { font-size: 1.75rem; }
@media (hover: hover) and (pointer: fine) {
  button:hover,.button:hover { background: color-mix(in oklch, var(--petrol) 85%, var(--ink)); }
  .secondary:hover { color: var(--cream); }
  .danger:hover { background: color-mix(in oklch, var(--danger) 8%, var(--paper)); }
  a:hover { text-decoration: underline; }
  .navigation nav a:hover,.side-out:hover { background: color-mix(in oklch, var(--cream) 10%, transparent); }
  .navigation nav .new-link:hover { background: var(--paper); }
  .request-list a:hover { color: var(--petrol); }
}
@media (max-width: 55rem) {
  body:is([data-area=client],[data-area=admin],[data-area=pre]) { display: block; }
  .side-inner { min-block-size: auto; position: static; display: grid; grid-template-columns: 1fr auto; padding: .75rem 1rem; gap: .5rem; }
  .menu { display: inline-flex; padding: .5rem .75rem; color: var(--cream); background: transparent; border-color: color-mix(in oklch, var(--cream) 40%, transparent); }
  .navigation { display: none; grid-column: 1 / -1; padding-block: 1rem; }
  .menu-open .navigation { display: flex; }
  .brand img { inline-size: 6rem; }
  .pre-brand { min-block-size: auto; padding: 1rem; }
  .pitch,.brand-foot { display: none; }
  body[data-area=pre] #main { padding-block: 2.5rem 5rem; }
  #main { padding-block-start: 1.5rem; }
}

.work-example { margin: 0; max-inline-size: 64rem; }
.work-example img { inline-size: 100%; block-size: auto; border: 1px solid var(--line); border-radius: 12px; }
.work-example figcaption { margin-block-start: .5rem; color: var(--muted); font-size: .8125rem; }
/* Commercial work uses the selected work-order document layout. */
.quote,.client-settings { padding-block: 1.1rem; border-block-end: 1px solid var(--line); }
.quote:last-child,.client-settings:last-child { border-block-end: 0; }
.quote ol,.document-section ol { padding-inline-start: 1.4rem; }
.quote li + li,.document-section ol li + li { margin-block-start: .5rem; }
details > summary { min-block-size: 44px; display: list-item; cursor: pointer; font-weight: 600; padding-block: .6rem; }
details > summary:active { color: var(--petrol); }
details[open] > .fields { margin-block-start: .75rem; }