@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/InterVariable.woff2") format("woff2"); }
:root {
  font-family: Inter, Arial, sans-serif;
  color: #0b1f3b;
  background: #f4f7fb;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a.button {
  cursor: pointer;
  border: 0;
  background: #2563eb;
  color: #ffffff;
  padding: 13px 20px;
  border-radius: 9px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}
button:hover {
  filter: brightness(0.96);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.secondary {
  background: #edf3fb;
}
.danger {
  background: #fae9e5;
  color: #9a3023;
}
input,
textarea,
select {
  width: 100%;
  padding: 12px;
  border: 1px solid #d6e0ec;
  border-radius: 8px;
  background: white;
  color: #0b1f3b;
}
textarea {
  min-height: 95px;
  resize: vertical;
}
label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0;
}
input[type="checkbox"] {
  width: 20px;
  height: 20px;
}
.check {
  display: flex;
  align-items: center;
}
.muted,
small {
  color: #64748b;
  line-height: 1.6;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2563eb;
  font-weight: 700;
}
h1 {
  font-size: clamp(28px, 4vw, 43px);
  letter-spacing: -1.5px;
  margin: 12px 0;
}
h2 {
  font-size: 22px;
}
h3 {
  font-size: 19px;
  margin: 0 0 12px;
}
p {
  line-height: 1.6;
}
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.story {
  padding: 9vw 7vw;
  background: #0b1f3b;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.story h1 {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.08;
  max-width: 550px;
}
.story p {
  color: #bfcee4;
  max-width: 420px;
}
.line {
  height: 4px;
  width: 70px;
  background: #2563eb;
  margin-bottom: 26px;
}
.loginpanel {
  padding: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginbox {
  width: 100%;
  max-width: 370px;
}
.loginlogo {
  width: 180px;
  display: block;
  margin: 0 auto 28px;
}
.wide {
  width: 100%;
}
.oauth {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.oauth a {
  background: white;
  border: 1px solid #d6e0ec;
  text-align: center;
  color: #0b1f3b;
}
.shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: #0b1f3b;
  padding: 28px 20px;
  color: white;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brand {
  background: white;
  border-radius: 10px;
  padding: 12px;
  display: block;
}
.brand img {
  width: 100%;
  display: block;
}
.sidebar .eyebrow {
  margin: 28px 12px 8px;
}
.nav {
  background: transparent;
  color: #c5ceca;
  text-align: left;
}
.nav.active {
  background: #2563eb;
  color: #0b1f3b;
}
.account {
  margin-top: auto;
  border-top: 1px solid #48524e;
  padding-top: 20px;
  font-size: 13px;
}
.account small {
  color: #c5ceca;
  display: block;
}
.account button {
  margin-top: 12px;
  width: 100%;
}
main {
  padding: 45px;
  max-width: 1600px;
  width: 100%;
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 30px 0;
}
.metric {
  background: white;
  border: 1px solid #e4e6e0;
  border-radius: 12px;
  padding: 22px;
}
.metric strong {
  display: block;
  font-size: 32px;
  margin-top: 8px;
}
.toolbar {
  display: flex;
  gap: 12px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.toolbar input {
  flex: 1;
  min-width: 180px;
}
.toolbar select {
  width: 190px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.card {
  background: white;
  border: 1px solid #e5eaf0;
  border-radius: 15px;
  overflow: hidden;
}
.taskphoto {
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: #e8ebe6;
}
.cardbody {
  padding: 23px;
}
.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: #edf3fb;
  color: #52645e;
  margin-bottom: 16px;
}
.badge.review {
  background: #fff2c5;
  color: #8a6905;
}
.badge.accepted {
  background: #d8f6ef;
  color: #06655f;
}
.badge.rejected {
  background: #fbe5df;
  color: #a13c28;
}
.description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #52657f;
  font-size: 14px;
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.card .row {
  margin-top: 20px;
}
.empty {
  padding: 65px 30px;
  text-align: center;
  border: 1px dashed #c4ccc4;
  border-radius: 14px;
  background: #ffffff80;
}
.panel {
  padding: 25px;
  background: white;
  border: 1px solid #e5eaf0;
  border-radius: 14px;
  max-width: 720px;
  margin: 24px 0;
}
.worker {
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}
.notice {
  font-size: 12px;
  border-left: 3px solid #2563eb;
  padding: 10px 14px;
  background: #edf5ff;
  line-height: 1.6;
  margin: 16px 0;
}
.error {
  color: #a12f24;
  background: #fff0ed;
  padding: 12px;
  border-radius: 8px;
  display: none;
}
.error:not(:empty) {
  display: block;
}
dialog {
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: calc(100% - 32px);
  max-width: 720px;
  max-height: 90vh;
  box-shadow: 0 30px 100px #0005;
}
dialog::backdrop {
  background: #18201dc0;
}
dialog header {
  position: sticky;
  top: 0;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 26px;
  border-bottom: 1px solid #eee;
  z-index: 1;
}
dialog .content {
  padding: 0 26px 26px;
}
.evidence {
  padding: 20px 0;
  border-top: 1px solid #e6e9e3;
}
.evidence img {
  max-height: 350px;
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin: 12px 0;
}
.evidence audio {
  max-width: 100%;
}
.preview {
  max-width: 100%;
  max-height: 200px;
  margin-top: 8px;
  border-radius: 8px;
}
.steps {
  margin-top: 40px;
  display: grid;
  gap: 20px;
  color: #d4dcd7;
}
.steps span {
  color: #2563eb;
  margin-right: 12px;
}
footer {
  font-size: 12px;
  color: #64748b;
  padding: 30px 0;
}
.status {
  font-size: 13px;
  color: #64748b;
  margin: 10px 0;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 850px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    padding: 16px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .brand {
    width: 95px;
    padding: 5px;
  }
  .sidebar .eyebrow,
  .account small {
    display: none;
  }
  .account {
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
  }
  .account button {
    margin: 0;
    padding: 10px;
  }
  .account > strong {
    display: none;
  }
  main {
    padding: 24px 18px;
  }
  .nav {
    padding: 10px;
  }
  .metrics {
    gap: 10px;
  }
  .metric {
    padding: 15px;
  }
  .topbar {
    align-items: flex-start;
  }
  .login {
    grid-template-columns: 1fr;
  }
  .story {
    padding: 40px 28px;
  }
  .story h1 {
    font-size: 40px;
  }
  .steps {
    display: none;
  }
  .loginpanel {
    padding: 28px;
  }
  .loginlogo {
    width: 130px;
  }
  .split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  .metric {
    font-size: 12px;
  }
  .topbar {
    flex-direction: column;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .toolbar select {
    width: 100%;
  }
}

/* Phone is the primary workspace. Desktop uses the same role modules. */
.workspace-nav { display: contents; }
.mobile-brand-title { display: none; }
button, a.button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
@media (max-width: 850px) {
  html { scroll-padding-top: 88px; }
  body { -webkit-text-size-adjust: 100%; }
  .shell { min-height: 100dvh; }
  .sidebar { position: sticky; top: 0; z-index: 10; flex-wrap: nowrap; justify-content: space-between; min-height: 72px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
  .brand { display: flex; gap: 10px; align-items: center; width: auto; background: transparent; padding: 0; text-decoration: none; color: white; }
  .brand img { width: 48px; height: 48px; border-radius: 8px; }
  .mobile-brand-title { display: block; font-size: 17px; font-weight: 700; letter-spacing: .2px; }
  .mobile-brand-title small { display: block; font-size: 10px; font-weight: 400; color: #c5ceca; letter-spacing: 1px; }
  .sidebar .account { margin: 0; }
  .account button { min-height: 44px; padding: 10px 13px; font-size: 13px; }
  .workspace-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #e5eaf0; background: #fff; box-shadow: 0 -4px 24px #0b1f3b0a; }
  .workspace-nav .nav { flex: 1; min-height: 52px; text-align: center; color: #52657f; border-radius: 10px; font-size: 14px; padding: 14px 8px; }
  .workspace-nav .nav.active { background: #e8f0ff; color: #174cac; box-shadow: inset 0 3px #2563eb; }
  main { padding: 22px 16px calc(96px + env(safe-area-inset-bottom)); min-width: 0; }
  main > .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
  h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.9px; margin: 10px 0 14px; }
  .topbar { gap: 4px; flex-direction: column; align-items: stretch; }
  .topbar > div > .muted { display: none; }
  #newtask { width: 100%; min-height: 50px; font-size: 16px; }
  .metrics { margin: 18px 0; gap: 8px; }
  .metric { padding: 13px 10px; font-size: 11px; border-radius: 10px; }
  .metric strong { font-size: 27px; margin-top: 5px; }
  .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 18px 0; }
  .toolbar input { grid-column: 1 / -1; min-width: 0; }
  .toolbar select { width: 100%; min-width: 0; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .taskphoto { height: auto; aspect-ratio: 16 / 10; }
  .cardbody { padding: 18px; }
  .cardbody h3 { font-size: 20px; line-height: 1.3; }
  .description { font-size: 15px; line-height: 1.6; }
  .card .row button { width: 100%; min-height: 48px; }
  .badge { font-size: 11px; margin-bottom: 12px; }
  .panel { padding: 18px; margin: 18px 0; }
  input, textarea, select { font-size: 16px; min-height: 48px; }
  input[type=file] { max-width: 100%; padding: 10px 6px; font-size: 14px; }
  input::file-selector-button { min-height: 40px; border: 0; border-radius: 6px; padding: 8px; margin-right: 8px; background: #edf3fb; color: #0b1f3b; font: inherit; }
  input[type=checkbox] { flex: 0 0 24px; width: 24px; height: 24px; min-height: 24px; accent-color: #2563eb; }
  label { font-size: 14px; gap: 9px; margin: 18px 0; }
  .check { min-height: 48px; line-height: 1.5; align-items: center; }
  button, a.button { min-height: 48px; }
  form > p > button { width: 100%; }
  .row { gap: 10px; }
  #record, #clearvoice { flex: 1 1 130px; min-height: 52px; }
  audio { width: 100%; margin: 10px 0; }
  dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; overscroll-behavior: contain; }
  dialog header { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; gap: 12px; }
  dialog header h3 { font-size: 18px; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
  dialog header button { flex: 0 0 48px; width: 48px; padding: 8px; font-size: 24px; }
  dialog .content { padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
  dialog .evidence img { width: 100%; height: auto; max-height: 45dvh; object-fit: contain; background: #f4f7fb; }
  .notice { font-size: 12px; padding: 10px 12px; }
  .login { display: block; min-height: 100dvh; }
  .story { display: none; }
  .loginpanel { padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); min-height: 100dvh; align-items: flex-start; }
  .loginbox { max-width: 410px; }
  .loginlogo { width: 132px; margin: 0 auto 20px; }
  .loginbox h2 { margin: 0 0 8px; }
  .loginbox > p { font-size: 14px; margin: 8px 0 16px; }
  .oauth { gap: 10px; margin-top: 18px; }
  .oauth a { display: flex; align-items: center; justify-content: center; }
  footer { font-size: 11px; padding: 24px 0 8px; }
}

/* Transparent original-colour logo sits directly on the workspace surface. */
.sidebar { background: #f4f7fb; color: #0b1f3b; border-right: 1px solid #e5eaf0; }
.brand { background: transparent; border: 0; border-radius: 0; padding: 0; }
.brand img { background: transparent; border: 0; border-radius: 0; object-fit: contain; }
.sidebar .nav { color: #52657f; }
.sidebar .nav.active { color: #0b1f3b; }
.account { border-top-color: #e5eaf0; }
.account small { color: #64748b; }
@media(max-width:850px) {
  .sidebar { background: #f4f7fb; border-right: 0; border-bottom: 1px solid #e5eaf0; }
  .brand { color: #0b1f3b; }
  .brand img { border-radius: 0; }
  .mobile-brand-title small { color: #64748b; }
}

.remember-login { display: flex; align-items: center; min-height: 48px; gap: 12px; cursor: pointer; }
.remember-login input { width: 24px; height: 24px; min-height: 24px; flex: 0 0 24px; }
/* WorkSign identity supplied 12 October 2026. */
:root { --navy:#0b1f3b; --blue:#3b82f6; --teal:#14b8a6; --gold:#f4b400; --line:#e5eaf0; }
button, a.button { min-height:48px; background:#2563eb; color:#fff; border-radius:12px; }
.secondary, a.button.secondary { background:#edf3fb; color:var(--navy); }
.danger { background:#fff0ed; color:#9a3023; }
.story { position:relative; overflow:hidden; background:linear-gradient(145deg,#0b1f3b,#102e53); }
.story::after { content:""; position:absolute; width:360px; height:360px; bottom:-220px; right:-50px; border:58px solid #3b82f62b; transform:rotate(45deg); pointer-events:none; }
.story > * { position:relative; z-index:1; }
.story h1 { letter-spacing:-2px; }
.story h1 span { color:#60a5fa; }
.story .eyebrow { color:#b7cbea; }
.line { background:var(--teal); width:58px; }
.loginpanel { background:radial-gradient(ellipse at top right,#e7f0ff,transparent 60%),#f7f9fc; }
.loginbox { max-width:390px; }
.login-brand { display:flex; align-items:center; gap:13px; margin:0 0 28px; }
.login-brand .loginlogo { width:76px; height:76px; margin:0; object-fit:contain; }
.wordmark { font-size:35px; font-weight:800; letter-spacing:-1.5px; color:var(--navy); line-height:1.1; white-space:nowrap; }
.wordmark em { font-style:normal; color:#3b82f6; }
.wordmark small { display:block; font-size:12px; font-weight:400; letter-spacing:.4px; margin-top:5px; color:#52657f; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img { width:52px; height:52px; }
.brand .wordmark { font-size:26px; letter-spacing:-1px; }
.brand .wordmark small { font-size:10px; }
.wordmark .brand-slogan { font-size:10px; font-weight:600; letter-spacing:1px; margin-top:3px; color:#52657f; }
.brand .wordmark .brand-slogan { font-size:8px; letter-spacing:.65px; margin-top:2px; }
.metric, .card, .panel { border-color:var(--line); box-shadow:0 3px 16px #0b1f3b05; }
.metric { border-top:3px solid #3b82f6; }
.metric:nth-child(2) { border-top-color:#f4b400; }
.metric:nth-child(3) { border-top-color:#14b8a6; }
.badge { background:#e8f0ff; color:#174cac; }
.badge.accepted { background:#d8f6ef; color:#06655f; }
.sidebar .nav.active { background:#e8f0ff; color:#174cac; }
#password-status:not(:empty) { padding:12px; border-radius:10px; background:#d8f6ef; color:#06655f; }
@media(max-width:850px) {
 .loginpanel { padding:calc(32px + env(safe-area-inset-top)) 24px 24px; }
 .login-brand { margin-bottom:32px; }
 .login-brand .loginlogo { width:70px; height:70px; }
 .login-brand .wordmark { font-size:34px; }
 .brand .wordmark { font-size:24px; }
 .brand img { width:48px; height:48px; }
 .sidebar { min-height:72px; background:#fff; }
 .workspace-nav .nav.active { background:#e8f0ff; color:#174cac; box-shadow:inset 0 3px #3b82f6; }
 .loginbox h2 { font-size:26px; letter-spacing:-.5px; }
}

.role-choice { display:flex; gap:6px; padding:5px; border-radius:14px; background:#e5eaf0; margin-bottom:22px; }
.role-choice button { flex:1; background:transparent; color:#52657f; }
.role-choice button[aria-pressed=true] { background:#fff; color:#174cac; box-shadow:0 2px 6px #0b1f3b12; }
.register-toggle { margin-top:14px; }
.admin-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:20px 0 28px; }
.admin-metrics .metric { display:flex; flex-direction:column; gap:8px; }
.admin-metrics .metric strong { font-size:28px; }
.admin-metrics .metric span { font-size:14px; color:var(--muted); }
.admin-investor { margin:14px 0; }
.admin-investor h3 { margin:0; overflow-wrap:anywhere; }
.admin-login { overflow-wrap:anywhere; }
.admin-investor dl { display:flex; gap:24px; flex-wrap:wrap; margin:20px 0; }
.admin-investor dt { color:var(--muted); font-size:13px; }
.admin-investor dd { margin:6px 0 0; font-size:22px; font-weight:700; }
#admin-status:not(:empty) { padding:12px; background:#d8f6ef; border-radius:10px; }
.traffic-panel { margin-bottom:28px; }
.traffic-panel h2 { margin-top:0; }
.traffic-panel summary { min-height:48px; padding:14px 0; cursor:pointer; font-weight:600; }
.traffic-table { width:100%; border-collapse:collapse; margin:12px 0; }
.traffic-table th,.traffic-table td { text-align:left; padding:10px 6px; border-bottom:1px solid var(--line); }
.traffic-table th[scope=row] { font-weight:400; }
.traffic-panel > button { margin-top:16px; }
.help-button { position:fixed; left:16px; bottom:16px; z-index:21; min-height:48px; border-radius:24px; box-shadow:0 4px 20px #0b1f3b26; }
.has-help .sidebar { padding-bottom:84px; }
.feedback-message { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.feedback-context { display:flex; gap:16px; flex-wrap:wrap; color:#52657f; font-size:14px; }
.pin-fieldset { border:0; padding:0; margin:0 0 18px; min-width:0; }
.pin-fieldset legend { padding:0; margin-bottom:8px; font-weight:600; }
.pin-digits { display:flex; gap:12px; }
.pin-digits input { width:56px; height:60px; min-width:0; text-align:center; font-size:24px; padding:8px; margin:0; }
.pin-digits input::-ms-reveal { display:none; }
.device-login { margin-top:14px; }
.task-details { margin:16px 0; }
.task-details p { margin:8px 0; }
.overdue { color:#9f2727; background:#fff0ee; border-radius:8px; padding:10px; font-weight:600; }
.calendar-link { display:inline-flex; align-items:center; min-height:48px; margin-top:8px; text-decoration:none; }
.passkey-item { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
@media(max-width:850px) {
 .help-button { bottom:calc(84px + env(safe-area-inset-bottom)); }
 .has-help .sidebar { padding-bottom:10px; }
 .has-help main { padding-bottom:170px; }
}



.invoice-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.invoice-parties small,.invoice-parties strong{display:block}.invoice-parties p{white-space:pre-line;overflow-wrap:anywhere;font-size:13px}.invoice-number{overflow-wrap:anywhere;font-size:12px}.invoice-summary{background:#edf3f9;border-radius:10px;padding:14px}.invoice-summary p{display:flex;justify-content:space-between;gap:12px}.task-invoice{margin-top:24px}#billing-settings input,#invoice-draft input{max-width:100%}@media(max-width:600px){.invoice-parties{grid-template-columns:1fr}}

.trade-id{padding:20px;background:#fff3d5;border:1px solid #f4dba7;border-radius:12px;margin:16px 0}.trade-id small,.trade-id strong{display:block}.trade-id strong{font-size:32px;letter-spacing:5px;font-variant-numeric:tabular-nums;margin:10px 0;color:#0b1f3b}.trade-id button{margin-top:6px}.team-connection{padding:18px 0;border-bottom:1px solid #e5eaf0;overflow-wrap:anywhere}.team-connection small{display:block;color:#52657f;margin:6px 0 12px}.team-connection .row{flex-wrap:wrap}.team-connection button{min-height:48px}.task-investor{font-size:12px;color:#174cac;font-weight:600}#find-tradesperson input{letter-spacing:3px;max-width:100%}@media(max-width:400px){.trade-id strong{font-size:28px;letter-spacing:4px}}

/* A consistent spacing scale for workspaces and forms. */
main{padding:32px;max-width:1400px}
.topbar h1{margin:4px 0 8px;line-height:1.12}
.topbar .eyebrow{margin:0 0 8px}
.metrics{gap:12px;margin:20px 0}
.metric{padding:16px 18px}.metric strong{font-size:28px;margin-top:6px}
.toolbar{margin:18px 0}.grid{gap:18px}.cardbody{padding:18px}
.panel{padding:22px;margin:18px 0}.panel>h2:first-child{margin-top:0}
.panel>p{margin:10px 0;line-height:1.6}
.empty{padding:32px 20px}.card .row{margin-top:14px}
.login-brand{margin-bottom:22px}.role-choice{margin-bottom:18px}
@media(max-width:850px){
 main{padding:18px 16px calc(96px + env(safe-area-inset-bottom))}
 .topbar h1{font-size:28px;letter-spacing:-1px;margin:4px 0 12px}
 .metrics{margin:14px 0;gap:8px}.metric{padding:12px 10px}.metric strong{font-size:25px;margin-top:5px}
 .toolbar{margin:14px 0}.panel{padding:17px;margin:14px 0}.panel h2{font-size:21px;line-height:1.25}
 .cardbody{padding:16px}.empty{padding:28px 18px}
 .loginpanel{padding-top:calc(24px + env(safe-area-inset-top))}.login-brand{margin-bottom:22px}
 .team-connection{padding:14px 0}.trade-id{padding:16px;margin:12px 0}
}
/* The hard hat belongs to the symbol; it never separates symbol and wordmark. */
.logo-symbol{position:relative;display:inline-flex;flex:none;width:52px;height:52px;align-items:center;justify-content:center}
.logo-symbol img{width:100%;height:100%;object-fit:contain}
.trade-mark{position:absolute;left:50%;top:-8px;transform:translateX(-50%);display:block;width:42px;height:32px;pointer-events:none}
.trade-mark svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 1px #9a650033)}
.login-brand .logo-symbol{width:76px;height:76px;margin-top:10px}
.login-brand .logo-symbol .loginlogo{width:100%;height:100%;margin:0}
.login-brand .trade-mark{width:60px;height:45px;top:-12px}
@media(max-width:850px){.brand .logo-symbol{width:48px;height:48px}.login-brand .logo-symbol{width:70px;height:70px}.login-brand .trade-mark{width:55px;height:41px;top:-11px}}
.trade-access{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}
.trade-access button{min-width:0;padding:14px 12px;text-align:left;background:#fff;color:#52657f;border:1px solid #d6e0ec;border-radius:12px}
.trade-access button[aria-pressed=true]{border-color:#2563eb;background:#edf4ff;box-shadow:inset 0 0 0 1px #2563eb;color:#174cac}
.trade-access strong,.trade-access small{display:block}.trade-access strong{font-size:14px}.trade-access small{font-size:11px;line-height:1.4;font-weight:400;margin-top:5px;color:#52657f}
.access-help{margin:14px 0 18px;border:1px solid #d6e0ec;border-radius:12px;background:#fff;overflow:hidden}
.access-help summary{padding:14px 15px;min-height:48px;font-size:13px;line-height:1.5;font-weight:650;color:#174cac;cursor:pointer}
.access-help-content{padding:0 15px 15px;font-size:13px;color:#52657f;line-height:1.6}
.access-help dl{margin:0}.access-help dl>div{padding:12px 0;border-top:1px solid #e5eaf0}
.access-help dt{font-weight:700;color:#0b1f3b}.access-help dd{margin:5px 0 0}
.access-help h3{font-size:14px;margin:16px 0 8px;line-height:1.4;color:#0b1f3b}
.access-help ol{padding-left:20px;margin:0}.access-help li{padding-left:3px;margin:8px 0}
.access-help p{margin:14px 0 0}.access-help-note{border-top:1px solid #e5eaf0;padding-top:12px;font-size:12px}
.access-help summary:focus-visible{outline:3px solid #2563eb;outline-offset:-3px}
/* Role switching must not resize or recenter the login layout. */
html:has(.login){scrollbar-gutter:stable}
.login{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.loginpanel,.story{min-width:0}
.loginpanel{align-items:flex-start}
.loginbox{width:100%;max-width:390px;min-width:0;flex:0 1 390px}
.login-brand{height:86px;min-height:86px;flex:none}
.login-brand .logo-symbol{margin-top:0;flex:0 0 76px}
.login-brand .wordmark{flex:none}
.role-choice{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.role-choice button{min-width:0;padding-left:8px;padding-right:8px}
@media(min-width:851px){.story{height:100dvh;position:sticky;top:0;align-self:start}.loginpanel{padding-top:64px}}
@media(max-width:850px){.login-brand{height:80px;min-height:80px}.login-brand .logo-symbol{flex-basis:70px}}
/* Full job context and compact completion status for the tradesperson. */
.worker-task-card{position:relative}.worker-task-card .taskphoto{height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}.worker-task-card .description{display:block;max-height:none;overflow:visible;-webkit-line-clamp:unset;white-space:pre-wrap}.task-completion-mark{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:23px;font-weight:800;box-shadow:0 3px 14px #0b1f3b25;border:2px solid #fff}.task-completion-mark.review{background:#f4b400;color:#0b1f3b}.task-completion-mark.accepted{background:#10b981;color:#fff}.task-correction{background:#fff0e8;padding:12px;border-radius:10px;font-size:13px;line-height:1.6}.completion-wizard h2{font-size:25px;line-height:1.2;letter-spacing:-.6px;margin:14px 0}.completion-wizard>p{font-size:14px;line-height:1.65}.completion-job{color:#607086;font-size:12px!important;margin-bottom:14px}.completion-preview{width:100%;max-height:220px;object-fit:contain;background:#eef3f8;border-radius:12px;margin-bottom:10px}.completion-choices{display:flex;flex-direction:column;gap:12px;margin:22px 0}.completion-choices button{min-height:50px;text-align:center}.completion-wizard audio{width:100%;margin:16px 0}.completion-wizard input[hidden],.completion-wizard audio[hidden]{display:none!important}.completion-wizard .error:empty{display:none}

.task-edit-banner{background:#fff0c2;border:3px solid #d39000;border-radius:12px;padding:20px;margin:0 0 20px;color:#402b00;overflow-wrap:anywhere}.task-edit-banner strong{display:block;font-size:1.35rem;line-height:1.35}.task-edit-banner p{margin:10px 0 0;line-height:1.5}.task-edit-diff article{background:#f3f6fa;border-left:4px solid #da9600;padding:14px;margin:12px 0}.task-edit-diff p{white-space:pre-wrap;overflow-wrap:anywhere}.task-edit-record{border-bottom:1px solid #dce3e9;padding-bottom:14px;margin-bottom:20px}