/* display=optional: if the fonts aren't there within a moment, this visit keeps the fallback font, so
   nothing jumps when they arrive (a button moving under someone's finger). Later visits use them. */
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@700;800&family=Space+Grotesk:wght@400;500;600;700&display=optional');

:root{
  /* Brand palette */
  --ink:#1C2B45;
  --ink-2:#33456A;
  --brass:#A9792C;
  --brass-hover:#8C6422;
  --forest:#2F4A3C;
  --parchment:#F3EEE1;
  --paper:#FBF8F1;
  --line:#DDD2B8;
  --muted:#6B6253;
  --danger:#9B3A2A;
  /* Tints, mixed from the palette (never a separate colour) */
  --brass-wash:color-mix(in srgb, var(--brass) 9%, var(--paper));
  --forest-tint:color-mix(in srgb, var(--forest) 12%, var(--paper));
  --forest-line:color-mix(in srgb, var(--forest) 30%, var(--paper));
  --danger-tint:color-mix(in srgb, var(--danger) 10%, var(--paper));
  --danger-line:color-mix(in srgb, var(--danger) 35%, var(--paper));
  --ink-tint:color-mix(in srgb, var(--ink) 7%, var(--paper));
  --ink-deep:color-mix(in srgb, var(--ink) 75%, black);
  --font-head:'Bitter',Georgia,serif;
  --font-body:'Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--parchment);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Bitter is only ever used at 700/800: lighter slab weights read soft */
h1,h2,h3{
  font-family:var(--font-head);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0;
}

.topbar{
  background:var(--paper);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 22px;
  border-bottom:3px solid var(--brass);
  flex-wrap:wrap;
  gap:10px;
}
.brand{display:flex;align-items:center;}
.topbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0;}
/* The dashboard's code button: centred in the free space between the logo
   and the right-hand buttons. */
.topbar-middle{flex:1 1 auto;display:flex;justify-content:center;min-width:0;}
/* Wider screens: the code buttons keep their width and some room either
   side; when the row can't hold everything, the right-hand buttons move to
   a second row rather than squeezing them against the logo. */
@media (min-width:761px){.topbar-dash .topbar-middle{min-width:max-content;padding:0 30px;}.topbar-dash .topbar-right{margin-left:auto;justify-content:flex-end;}}
/* Phones: the header wraps onto a second row; nothing overlaps. */
@media (max-width:760px){
  .topbar-dash{padding:10px 14px;}
  .topbar-dash .topbar-right{width:100%;}
  /* As before: the code button beside the logo on the first row. */
  .topbar-dash .topbar-middle{justify-content:flex-start;}
  .topbar-dash .topbar-right{justify-content:flex-start;gap:8px;}
  .topbar-dash .topnav{flex-wrap:wrap;}
  .topbar-dash .topnav button{padding:6px 10px;}
}
.brand-logo{height:46px;width:auto;display:block;}
.topnav{display:flex;gap:6px;align-items:center;}
.topnav button{
  background:transparent;border:1px solid transparent;color:var(--ink-2);
  font-family:var(--font-body);font-size:13.5px;font-weight:500;padding:7px 14px;border-radius:11px;cursor:pointer;
}
.topnav button:hover{border-color:var(--line);color:var(--ink);}
.topnav button.active{background:var(--ink);color:var(--parchment);border-color:var(--ink);font-weight:600;}

.main{padding:28px 22px;max-width:720px;margin:0 auto;}
.panel-head{margin-bottom:20px;}
.panel-head h1{font-size:24px;}
.panel-head p{color:var(--muted);font-size:14px;margin-top:6px;line-height:1.5;}

/* The tagline, as the headline of the log-in / sign-up screens */
.auth-tagline{
  font-family:var(--font-head);font-weight:800;font-size:40px;line-height:1.1;letter-spacing:-.02em;
  color:var(--ink);margin:6px 0 22px;
}
@media (max-width:600px){.auth-tagline{font-size:30px;}}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:20px 22px;margin-bottom:16px;
}
.card h3{font-size:16px;margin-bottom:4px;}
.card .hint{color:var(--muted);font-size:13px;margin-bottom:12px;line-height:1.5;}

label{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:5px;margin-top:12px;}
label:first-of-type{margin-top:0;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],input[type=date],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:11px;
  font-family:var(--font-body);font-size:14px;background:var(--parchment);color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:0;border-color:var(--brass);}

/* Location block: country, state, city, postal code */
.loc-fields{margin-top:12px;}
.loc-fields .row + .row{margin-top:12px;}
@media (max-width:480px){
  .loc-fields .row{flex-direction:column;gap:12px;}
}
.label-note{font-weight:400;}
.hint.field-hint{margin:4px 0 0;font-size:12.5px;}
.hint.field-hint:empty{display:none;}
input:disabled{opacity:.65;cursor:not-allowed;}

/* Password box with a Show/Hide button inside it */
.pw-field{position:relative;}
.pw-field input{padding-right:70px;}
.pw-field input::-ms-reveal,.pw-field input::-ms-clear{display:none;} /* Edge's own eye button would double up */
.pw-toggle{
  position:absolute;top:50%;right:5px;transform:translateY(-50%);
  background:var(--parchment);color:var(--ink-2);border:1px solid transparent;border-radius:8px;
  padding:4px 10px;font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;
}
.pw-toggle:hover{background:var(--ink-tint);color:var(--ink);}
.pw-toggle:focus-visible{outline:2px solid var(--brass);outline-offset:1px;}

/* Phone number: country picker (searchable list) + the number itself */
.phone-row{display:flex;gap:8px;}
.phone-row > input{flex:1;min-width:0;}
.cc{position:relative;flex:0 0 44%;max-width:250px;}
.combo{position:relative;}
.combo .cc-input{
  padding-right:28px;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2333456A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:10px 6px;
}
.cc-list{
  position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0; /* the field's width: never off the edge of a phone screen */
  max-height:260px;overflow-y:auto;margin:0;padding:4px;list-style:none;
  background:var(--paper);border:1px solid var(--line);border-radius:11px;box-shadow:0 10px 28px rgba(28,43,69,.14);
}
.cc-list li{padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--ink);cursor:pointer;}
.cc-list li:hover{background:var(--ink-tint);}
.cc-list li.active{background:var(--ink);color:var(--parchment);}
.cc-list li.cc-empty{color:var(--muted);cursor:default;}
@media (max-width:480px){
  .phone-row{flex-direction:column;}
  .cc{flex:none;max-width:none;}
}

.row{display:flex;gap:14px;flex-wrap:wrap;}
.row > *{flex:1;min-width:140px;}

.btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--ink);color:var(--parchment);border:none;
  padding:9px 16px;border-radius:12px;font-family:var(--font-body);font-size:13.5px;font-weight:600;
  cursor:pointer;margin-top:14px;
}
.btn:hover{background:var(--ink-2);}
.btn.secondary{background:var(--paper);color:var(--ink);border:1px solid var(--line);}
.btn.secondary:hover{border-color:var(--ink);}
/* Brass outline — text contrast is checked by test/brand-contrast.test.js */
.btn.gold{background:var(--paper);color:var(--brass-hover);border:1px solid var(--brass);font-weight:700;}
.btn.gold:hover{background:var(--brass-hover);color:var(--paper);border-color:var(--brass-hover);}
.btn.danger{background:var(--paper);color:var(--danger);border:1px solid var(--danger-line);}
.btn.danger:hover{background:var(--danger-tint);}
.btn.small{padding:6px 11px;font-size:12.5px;margin-top:0;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.linklike{
  background:none;border:none;color:var(--muted);font-family:var(--font-body);font-size:12.5px;text-decoration:underline;
  cursor:pointer;padding:0;margin-top:10px;
}
.linklike:hover{color:var(--ink);}

.code-badge{
  font-family:var(--font-head);font-weight:700;font-size:24px;letter-spacing:.06em;
  background:var(--brass-wash);border:1px dashed var(--brass);border-radius:16px;
  padding:10px 16px;display:inline-block;color:var(--ink);
}

.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:20px;flex-shrink:0;
}
.pill.ok{background:var(--forest-tint);color:var(--forest);}
.pill.pending{background:var(--brass-wash);color:var(--brass-hover);}
.pill.warn{background:var(--danger-tint);color:var(--danger);}

.list-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line);gap:12px;flex-wrap:wrap;
}
.list-item:last-child{border-bottom:none;}
.person{display:flex;align-items:center;gap:11px;}
.avatar{
  width:36px;height:36px;border-radius:50%;background:var(--ink-2);color:var(--parchment);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:13px;flex-shrink:0;
}
.p-name{font-size:14px;font-weight:600;}
.p-meta{font-size:12px;color:var(--muted);margin-top:1px;}

.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.tag-chip{background:var(--ink-tint);color:var(--ink-2);font-size:12px;padding:4px 10px;border-radius:20px;}

.empty{
  text-align:center;padding:26px 16px;color:var(--muted);font-size:13.5px;
  border:1px dashed var(--line);border-radius:16px;background:var(--paper);
}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--parchment);padding:11px 20px;border-radius:20px;
  font-size:13.5px;box-shadow:0 8px 24px rgba(28,43,69,.22);z-index:200;opacity:0;
  pointer-events:none;transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

.error-text{color:var(--danger);font-size:13px;margin-top:10px;}
.success-text{color:var(--forest);font-size:13px;margin-top:10px;}

.auth-fields label:first-of-type{margin-top:0;}

@media (max-width:600px){
  .main{padding:18px 14px;}
}

/* ---------- Audio / video call overlay ---------- */
.call-overlay{position:fixed;inset:0;background:rgba(28,43,69,.85);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;}
.call-box{background:var(--ink);border-radius:16px;width:100%;max-width:880px;padding:18px;color:var(--parchment);}
.call-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.call-status{font-size:13px;color:color-mix(in srgb, var(--brass) 55%, var(--parchment));margin-top:2px;}
.call-box{max-height:calc(100vh - 32px);overflow-y:auto;}
/* Everyone in the call, one tile each, each with a name on it */
.call-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px;}
.call-tile{position:relative;background:var(--ink-deep);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;}
.call-tile.local{outline:2px solid var(--brass);outline-offset:-2px;}
.call-video{position:absolute;inset:0;}
.call-label{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:3px 8px;border-radius:7px;background:rgba(19,30,48,.78);color:var(--parchment);font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.call-label:empty{display:none;}
.call-placeholder{color:color-mix(in srgb, var(--parchment) 75%, var(--ink));font-size:13.5px;text-align:center;padding:12px;}
.call-controls{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
/* The employee's notice: who else is in the call, and a Remove for each */
.call-guest-notice{background:var(--parchment);color:var(--ink);border-left:5px solid var(--brass);border-radius:10px;padding:10px 12px;margin-bottom:12px;}
.call-guest-title{font-weight:700;font-size:13.5px;margin-bottom:6px;}
.call-guest-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:13.5px;flex-wrap:wrap;}
.call-guest-row .btn{margin-top:0;}
.call-row-actions{display:flex;gap:6px;}
/* The host's Invite others panel */
.call-invite{background:var(--paper);color:var(--ink);border-radius:12px;padding:12px 14px;margin-bottom:12px;}
.call-invite-title{font-family:var(--font-head);font-weight:700;font-size:16px;}
.call-invite-note{font-size:12.5px;color:var(--muted);margin:4px 0 10px;line-height:1.45;}
.call-invite-sub{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-top:12px;text-transform:uppercase;letter-spacing:.04em;}
.call-invite-link{display:flex;gap:8px;align-items:center;}
.call-invite-link input{flex:1;min-width:0;font-size:13px;}
.call-invite-link .btn{margin-top:0;white-space:nowrap;}
.call-invite .linklike{color:var(--ink-2);}

/* ---------- The guest call page (/join): standalone, no app menus ---------- */
.guest-page{min-height:100vh;}
.guest-top{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--paper);border-bottom:3px solid var(--brass);}
.guest-brand{font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--ink);}
.guest-main{padding:20px 16px 40px;max-width:900px;margin:0 auto;}
.guest-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;max-width:520px;margin:0 auto;}
.guest-card h1{font-size:24px;margin-bottom:6px;}
.guest-card p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 14px;}
.guest-card .btn{width:100%;justify-content:center;padding:12px 16px;font-size:15px;}
.guest-card .guest-controls .btn{width:auto;flex:1 1 0;padding:10px 12px;font-size:14px;}
.guest-preview{margin:6px 0 4px;}
.guest-device-note{background:var(--brass-wash);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:10px;padding:10px 12px;margin-top:12px;}
.guest-device-note p{color:var(--ink);font-size:13.5px;margin:0 0 8px;}
.guest-help{margin:0 0 8px;padding-left:18px;color:var(--ink);font-size:13.5px;line-height:1.5;}
.guest-help li{margin-bottom:4px;}
.guest-call-note{font-size:13px;color:color-mix(in srgb, var(--brass) 55%, var(--parchment));margin:-4px 0 10px;}
.guest-call-note:empty{display:none;}
.call-guest-failed{color:var(--danger);}
.guest-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.guest-controls .btn{margin-top:0;min-height:44px;min-width:110px;justify-content:center;font-size:14px;}
.guest-call{background:var(--ink);border-radius:16px;padding:14px;color:var(--parchment);}
.guest-call-head{font-weight:600;font-size:14px;margin-bottom:10px;}
.guest-wait{display:flex;gap:6px;justify-content:center;margin:4px 0 10px;}
.guest-wait span{width:8px;height:8px;border-radius:50%;background:var(--brass);animation:guest-wait 1.2s ease-in-out infinite;}
.guest-wait span:nth-child(2){animation-delay:.2s;}
.guest-wait span:nth-child(3){animation-delay:.4s;}
@keyframes guest-wait{0%,100%{opacity:.25;}50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){.guest-wait span{animation:none;opacity:.7;}}
@media (max-width:600px){
  .call-overlay{padding:0;align-items:stretch;}
  .call-box{border-radius:0;max-height:100vh;}
}

/* ---------- CV + insights ---------- */
.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.stat{flex:1 1 110px;background:var(--parchment);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.stat-num{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--ink);}
.stat-label{font-size:12.5px;color:var(--muted);}
.cv-summary{white-space:pre-wrap;line-height:1.5;}

/* ---------- Complete your profile (spec 4.22) ---------- */
.profile-step-overlay{position:fixed;inset:0;background:rgba(28,43,69,.55);display:flex;align-items:flex-start;justify-content:center;z-index:70;padding:24px 16px;overflow-y:auto;}
.profile-step{max-width:560px;width:100%;margin:auto 0;box-shadow:0 12px 40px rgba(28,43,69,.25);}
.profile-step h2{margin:0 0 6px;font-size:22px;}
.profile-step-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px;}
.profile-step-actions .btn{margin-top:0;}
.light-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--parchment);border:1px solid var(--brass);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:14px;}
.light-banner .btn{margin-top:0;}
.light-results-note{font-size:13.5px;color:var(--ink-2);background:var(--parchment);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:6px;}

/* Contact links in plain notes (e.g. password reset not available yet) */
#reset-unavailable a,#google-only-note a{color:var(--ink-2);text-underline-offset:3px;}

/* A checkbox with its words beside it (e.g. "I confirm I am 18 or older") */
.check-row{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink);margin-top:14px;line-height:1.4;cursor:pointer;}
.check-row input{width:auto;margin-top:2px;flex:0 0 auto;}
.check-row.has-error,.check-row:has(.field-invalid){color:var(--danger);}
.check-row input.field-invalid{outline:2px solid var(--danger);outline-offset:2px;}

/* ---------- Form problems (spec 4.24): colour, icon and words, never colour alone ---------- */
.field-invalid,.field-invalid:focus{border-color:var(--danger) !important;box-shadow:0 0 0 1px var(--danger);}
.phone-row:has(.field-invalid) .cc-input{border-color:var(--danger);}
.field-error{display:flex;align-items:flex-start;gap:6px;color:var(--danger);font-size:13px;font-weight:600;line-height:1.35;margin:5px 0 2px;}
.field-error-icon{flex:0 0 auto;margin-top:1px;}
.form-summary{border:2px solid var(--danger);border-radius:12px;padding:10px 14px;margin:6px 0 14px;background:#FBF1EE;color:var(--danger);font-size:14px;}
.form-summary:focus{outline:2px solid var(--danger);outline-offset:2px;}
.form-summary p{display:flex;align-items:center;gap:7px;margin:0;font-weight:700;}
.form-summary ul{margin:6px 0 0;padding-left:22px;}
.form-summary li{margin:3px 0;}
.form-summary a{color:var(--danger);text-underline-offset:2px;}
.form-summary-general{font-weight:600 !important;}
.form-summary ul + .form-summary-general{margin-top:6px;}
.req-tag{font-weight:400;color:var(--muted);font-size:.92em;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- "You're leaving SureWork" notice ---------- */
.leave-overlay{position:fixed;inset:0;background:rgba(28,43,69,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px;}
.leave-box{background:var(--paper);border-radius:16px;max-width:460px;width:100%;padding:20px 22px;box-shadow:0 12px 40px rgba(28,43,69,.25);}
.leave-box h3{margin:0 0 8px;}
.leave-box p{font-size:14px;margin:8px 0;}
.leave-url{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;background:var(--parchment);border:1px solid var(--line);border-radius:8px;padding:8px 10px;word-break:break-all;}
.leave-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}
.cv-url-text{word-break:break-all;}
.cv-file-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;padding:8px 10px;background:var(--parchment);border:1px solid var(--line);border-radius:10px;word-break:break-all;}
input[type=file]{font-family:var(--font-body);font-size:13.5px;margin-top:4px;}

/* ---------- Job postings ---------- */
.job-item{padding:12px 0;border-bottom:1px solid var(--line);}
.job-item:last-child{border-bottom:none;}

/* ---------- Distance preference (spec 4.15) ---------- */
.distance-box{background:var(--parchment);border:1px solid var(--line);border-radius:12px;padding:10px 14px 12px;margin-top:10px;}
.distance-box label{margin-top:0;}

/* ---------- Dashboard sidebar layout ---------- */
.main.main-wide{max-width:1040px;}
.dash{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start;}
.dash-nav{position:sticky;top:16px;display:flex;flex-direction:column;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px;}
.dash-tab{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:none;border-radius:10px;padding:9px 12px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;}
.dash-tab:hover{background:var(--parchment);}
.dash-tab.active{background:var(--ink);color:var(--parchment);font-weight:700;}
.dash-badge{flex:0 0 auto;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--paper);color:var(--brass-hover);border:1px solid var(--brass);font-size:11.5px;font-weight:700;text-align:center;}
.dash-tab.active .dash-badge{background:var(--parchment);color:var(--ink);border-color:var(--parchment);}
.dash-main{min-width:0;}
.dash-section[hidden]{display:none;}
.live-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--forest-tint);border:1px solid var(--forest-line);color:var(--forest);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:14px;font-weight:700;}
@media (max-width:760px){
  .dash{grid-template-columns:1fr;gap:12px;}
  .dash-nav{position:static;flex-direction:row;overflow-x:auto;padding:6px;}
  .dash-tab{width:auto;white-space:nowrap;flex:0 0 auto;}
}

/* ---------- Invite to pair: "not available yet" (spec 4.9) ---------- */
.invite-unavailable{font-size:13px;color:var(--muted);background:var(--parchment);border:1px dashed var(--line);border-radius:10px;padding:8px 12px;max-width:520px;}

/* ---------- Profile photos (spec 4.1) ---------- */
.avatar.has-photo{background-size:cover;background-position:center;color:transparent;}
.photo-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 4px;}
.photo-nudge{font-size:13px;color:var(--muted);background:var(--parchment);border:1px dashed var(--line);border-radius:10px;padding:7px 12px;margin:6px 0 4px;}

/* ---------- Match notifications (spec 4.16) ---------- */
@keyframes sw-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(169,121,44,.7);}50%{transform:scale(1.08);box-shadow:0 0 0 6px rgba(169,121,44,0);}}
.pulse{animation:sw-pulse 1.4s ease-in-out infinite;}
.new-chip{display:inline-block;margin-top:6px;background:var(--paper);color:var(--brass-hover);border:1px solid var(--brass);font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;}
.match-tag{background:var(--brass-wash);color:var(--brass-hover);border:1px solid var(--brass);font-weight:700;}
.match-tag.flash{animation:sw-pulse .8s ease-in-out 4;}
.dash-badge.fade-out{opacity:0;transform:scale(.6);transition:opacity .6s,transform .6s;}
@media (prefers-reduced-motion: reduce){.pulse,.match-tag.flash{animation:none;}.dash-badge.fade-out{transition:none;}}

/* ---------- Notification center (spec 4.10) ---------- */
.topbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.notif{position:relative;}
.notif-bell{position:relative;background:transparent;border:1px solid var(--line);border-radius:999px;width:40px;height:40px;font-size:18px;cursor:pointer;color:var(--ink);}
.notif-bell:hover{border-color:var(--brass);}
.notif-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--paper);color:var(--brass-hover);border:1px solid var(--brass);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);}
.notif-panel{position:absolute;right:0;top:48px;width:360px;max-width:calc(100vw - 24px);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(28,43,69,.2);z-index:40;overflow:hidden;}
.notif-head{font-family:var(--font-head);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);}
.notif-list{max-height:420px;overflow-y:auto;}
.notif-item{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:transparent;border:none;border-bottom:1px solid var(--line);padding:10px 14px;font-family:var(--font-body);font-size:13.5px;color:var(--ink);cursor:pointer;}
.notif-item:hover{background:var(--parchment);}
.notif-head{display:flex;justify-content:space-between;align-items:center;}
.notif-clear{margin-top:0;font-size:12.5px;font-weight:600;font-family:var(--font-body);}
.notif-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line);}
.notif-row .notif-item{border-bottom:none;flex:1;}
.notif-row.unread{background:var(--brass-wash);}
.notif-row.unread .notif-item span:first-child{font-weight:700;}
.notif-x{flex:0 0 36px;background:transparent;border:none;color:var(--muted);font-size:13px;cursor:pointer;}
.notif-x:hover{color:var(--danger);background:var(--parchment);}

/* ---------- Phone number prompt (spec 4.1) ---------- */
.phone-prompt{font-size:13px;color:var(--muted);margin:8px 0 2px;}

/* ---------- Header logo = home link ---------- */
.brand{text-decoration:none;border-radius:12px;}
.brand:focus-visible{outline:2px solid var(--brass);outline-offset:4px;}

/* ---------- Landing page ---------- */
.main.main-landing{max-width:1040px;}
.btn.lg{padding:12px 22px;font-size:15px;border-radius:14px;}
.btn:focus-visible,.linklike:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

.hero{text-align:center;padding:36px 0 44px;}
.hero-title{font-family:var(--font-head);font-weight:800;font-size:56px;line-height:1.05;letter-spacing:-.02em;max-width:760px;margin:0 auto;}
.hero-sub{font-size:17px;line-height:1.6;color:var(--muted);max-width:600px;margin:18px auto 0;}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
@media (max-width:600px){
  .hero{padding:18px 0 30px;}
  .hero-title{font-size:36px;}
  .hero-sub{font-size:15.5px;}
}

/* The stamp: disc in → book and check draw → press and settle + ink ring */
.stamp{position:relative;width:148px;height:148px;margin:0 auto 28px;}
.stamp svg{position:relative;display:block;width:100%;height:100%;animation:stamp-press .6s cubic-bezier(.3,.7,.35,1) 1.5s both;}
.stamp-disc{transform-origin:60px 60px;animation:stamp-disc .45s cubic-bezier(.2,.8,.3,1) both;}
.stamp-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:stamp-draw .6s ease-in-out forwards;}
.stamp-book{animation-delay:.35s;}
.stamp-spine{animation-delay:.8s;animation-duration:.3s;}
.stamp-check{animation-delay:1.05s;animation-duration:.4s;}
.stamp-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);background:var(--ink-tint);opacity:0;animation:stamp-ring 1s ease-out 1.68s both;}
@keyframes stamp-disc{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:scale(1);}}
@keyframes stamp-draw{to{stroke-dashoffset:0;}}
@keyframes stamp-press{0%{transform:scale(1);}30%{transform:scale(.9);}65%{transform:scale(1.035);}100%{transform:scale(1);}}
@keyframes stamp-ring{0%{opacity:.4;transform:scale(.92);}100%{opacity:0;transform:scale(1.65);}}
.reveal{animation:reveal-up .55s cubic-bezier(.2,.8,.3,1) both;}
.hero-title.reveal{animation-delay:.25s;}
.hero-sub.reveal{animation-delay:.35s;}
.hero-ctas.reveal{animation-delay:.45s;}
@keyframes reveal-up{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (max-width:600px){.stamp{width:112px;height:112px;margin-bottom:20px;}}
@media (prefers-reduced-motion: reduce){
  .stamp svg,.stamp-disc,.stamp-draw,.reveal{animation:none;}
  .stamp-draw{stroke-dashoffset:0;}
  .stamp-ring{display:none;}
}

/* Three ways in */
.entry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.entry-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:18px;padding:22px 22px 20px;}
.entry-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest);}
.entry-card h2{font-size:22px;margin-top:6px;}
.entry-card p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:8px 0 0;flex:1;}
.entry-actions{display:flex;flex-direction:column;align-items:flex-start;}
.entry-note{font-size:12.5px;color:var(--muted);margin-top:10px;}
@media (max-width:760px){.entry-grid{grid-template-columns:1fr;}}

/* See how it works */
.how{padding:56px 0 24px;text-align:center;scroll-margin-top:16px;}
.how h2{font-size:32px;}
.how h2:focus{outline:none;}
.how > p{color:var(--muted);font-size:15.5px;line-height:1.55;max-width:560px;margin:10px auto 22px;}
.video-frame{background:var(--ink);border-radius:18px;padding:10px;box-shadow:0 18px 50px rgba(28,43,69,.18);}
.video-frame video{display:block;width:100%;height:auto;border-radius:10px;background:var(--ink-deep);}
@media (max-width:600px){.how{padding-top:40px;}.how h2{font-size:26px;}.video-frame{padding:6px;border-radius:14px;}}

/* ---------- Referee profile (spec 4.4) ---------- */
.privacy-note{font-size:13px;line-height:1.5;color:var(--forest);background:var(--forest-tint);border:1px solid var(--forest-line);border-radius:10px;padding:9px 12px;margin-bottom:14px;}
.ref-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ref-profile{background:var(--parchment);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px;}
.ref-profile-fields{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0;font-size:13.5px;}
.ref-profile-fields dt{color:var(--muted);font-weight:500;}
.ref-profile-fields dd{margin:0;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;}
@media (max-width:600px){.ref-profile-fields{grid-template-columns:1fr;gap:2px;}.ref-profile-fields dd{margin-bottom:8px;}}
.ref-reset{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.ref-reset .btn{margin-top:0;}
.ref-reset-confirm p{font-size:13px;line-height:1.5;color:var(--ink);margin:0 0 8px;}
.ref-reset-confirm .linklike{margin-left:10px;}
.ref-reset [hidden]{display:none;}

/* ---------- Messages (spec 4.17): list and thread side by side; one at a time on a phone ---------- */
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.chat{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:14px;align-items:start;}
.chat-list{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:6px;display:flex;flex-direction:column;gap:4px;max-height:70vh;overflow-y:auto;}
.chat-item{display:flex;flex-direction:column;gap:3px;text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;padding:9px 10px;font-family:var(--font-body);color:var(--ink);cursor:pointer;}
.chat-item:hover{background:var(--ink-tint);}
.chat-item.active{background:var(--parchment);border-color:var(--line);}
.chat-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;}
.chat-item-preview{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-thread{background:var(--paper);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-height:420px;max-height:75vh;overflow:hidden;}
.chat-pick{margin:auto;}
.chat-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.chat-head .linklike,.chat-head .btn{margin-top:0;}
.chat-head-name{flex:1;min-width:0;font-size:15px;}
.chat-back{display:none;}
.chat-notice{margin:10px 14px 0;padding:9px 12px;border-radius:10px;background:var(--parchment);border-left:4px solid var(--brass);font-size:13px;color:var(--ink);}
.chat-report{margin:10px 14px 0;padding:10px 12px;border-radius:10px;background:var(--danger-tint);border:1px solid var(--danger-line);}
.chat-messages{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;}
.chat-msg{max-width:78%;align-self:flex-start;display:flex;flex-direction:column;gap:3px;}
.chat-msg.me{align-self:flex-end;align-items:flex-end;}
.chat-text,.chat-call,.chat-doc{background:var(--parchment);color:var(--ink);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 11px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;}
.chat-msg.me .chat-text,.chat-msg.me .chat-call,.chat-msg.me .chat-doc{background:var(--ink);color:var(--parchment);border-color:var(--ink);border-radius:14px 14px 4px 14px;}
.chat-call{display:flex;align-items:center;gap:10px;flex-wrap:wrap;white-space:normal;}
.chat-call .btn{margin-top:0;}
.chat-doc{white-space:normal;}
.chat-doc .linklike{margin-top:6px;}
.chat-msg.me .chat-doc .linklike{color:var(--parchment);}
.chat-doc-meta{font-size:12.5px;opacity:.85;}
.chat-doc-note{font-size:12px;margin-top:6px;opacity:.85;}
.chat-time{font-size:11.5px;color:var(--muted);}
.chat-photo{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ink-tint);cursor:zoom-in;line-height:0;}
.chat-photo img{display:block;max-width:240px;max-height:240px;width:auto;height:auto;}
.chat-compose{border-top:1px solid var(--line);padding:10px 14px;display:flex;flex-direction:column;gap:8px;}
.chat-compose textarea{resize:vertical;min-height:44px;}
.chat-attach{display:flex;gap:8px;flex-wrap:wrap;}
.chat-attach-btn{margin-top:0;cursor:pointer;}
.chat-compose-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.chat-compose-foot .btn{margin-top:0;}
.chat-count{font-size:12px;color:var(--muted);}
.chat-lightbox{position:fixed;inset:0;z-index:60;background:rgba(19,30,48,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;}
.chat-lightbox img{max-width:100%;max-height:calc(100vh - 90px);border-radius:8px;}
@media (max-width:760px){
  .chat{grid-template-columns:1fr;}
  .chat .chat-thread{display:none;}
  .chat.chat-has-open .chat-list{display:none;}
  .chat.chat-has-open .chat-thread{display:flex;min-height:calc(100vh - 220px);max-height:none;}
  .chat-back{display:inline;}
  .chat-msg{max-width:88%;}
}

/* ---------- Floating chat button and panel (spec 4.17) ---------- */
.chat-fab{
  position:fixed;z-index:40;
  right:max(20px, calc(env(safe-area-inset-right) + 12px));
  bottom:max(20px, calc(env(safe-area-inset-bottom) + 12px));
  width:58px;height:58px;border-radius:50%;border:2px solid var(--brass);
  background:var(--ink);color:var(--parchment);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(28,43,69,.28);
}
.chat-fab[hidden]{display:none;}
.chat-fab:hover{background:var(--ink-2);}
.chat-fab:focus-visible{outline:3px solid var(--brass);outline-offset:3px;}
.chat-fab-badge{
  position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--paper);color:var(--brass-hover);border:1.5px solid var(--brass);
  font-family:var(--font-body);font-size:12px;font-weight:700;line-height:19px;text-align:center;
}
.chat-fab-badge[hidden]{display:none;}
.chat-panel{
  position:fixed;z-index:41;
  right:max(20px, calc(env(safe-area-inset-right) + 12px));
  bottom:calc(max(20px, calc(env(safe-area-inset-bottom) + 12px)) + 70px);
  width:min(380px, calc(100vw - 40px));height:70vh;max-height:70vh;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 48px rgba(28,43,69,.28);display:flex;flex-direction:column;overflow:hidden;
}
.chat-panel[hidden]{display:none;}
.chat-panel-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);}
.chat-panel-close{background:transparent;border:1px solid transparent;border-radius:8px;width:40px;height:40px;font-size:18px;color:var(--ink);cursor:pointer;}
.chat-panel-close:hover{background:var(--ink-tint);}
.chat-panel-close:focus-visible{outline:2px solid var(--brass);outline-offset:1px;}
.chat-panel-body{flex:1;min-height:0;display:flex;}
.chat-elsewhere{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--ink);}
.chat-elsewhere .linklike{margin-top:0;}
@media (prefers-reduced-motion: no-preference){
  .chat-panel.chat-panel-opening{animation:chat-panel-in .18s ease-out;}
  @keyframes chat-panel-in{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
}
/* The chat inside the panel: one pane at a time, filling it */
.chat.chat-compact{display:flex;flex-direction:column;width:100%;min-height:0;gap:0;}
.chat.chat-compact .chat-list{border:0;border-radius:0;max-height:none;flex:1;overflow-y:auto;}
.chat.chat-compact .chat-thread{display:none;border:0;border-radius:0;min-height:0;max-height:none;flex:1;}
.chat.chat-compact.chat-has-open .chat-list{display:none;}
.chat.chat-compact.chat-has-open .chat-thread{display:flex;min-height:0;}
.chat.chat-compact .chat-back{display:inline;}
.chat.chat-compact .chat-msg{max-width:88%;}
.chat.chat-compact .chat-photo img{max-width:200px;max-height:200px;}
/* Toasts never cover the button (test/chat-fab checks it): on wide screens they're centred and
   end well left of it; on narrow ones (the header wraps, so the page can be as narrow as the
   screen) they sit above it, no wider than the screen. */
@media (max-width:600px){.toast{bottom:calc(max(20px, calc(env(safe-area-inset-bottom) + 12px)) + 72px);max-width:calc(100vw - 32px);width:max-content;text-align:center;}}
/* Never over a call window and its controls */
body.in-call .chat-fab,body.in-call .chat-panel{display:none !important;}
/* Phones: full-screen panel with a clear close button */
@media (max-width:600px){
  .chat-panel{inset:0;width:auto;height:auto;max-height:none;border-radius:0;border:0;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
  .chat-panel-head{padding:10px 8px 10px 16px;}
  .chat-panel-close{width:48px;height:48px;font-size:22px;}
  body.chat-panel-open{overflow:hidden;}
  body.chat-panel-open .chat-fab{display:none;}
}

/* Sign in with Google: an "or" divider under the normal form, then Google's own button */
.google-area[hidden]{display:none;}
.or-divider{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--muted);font-size:13px;}
.or-divider::before,.or-divider::after{content:"";flex:1;border-top:1px solid var(--line);}
.google-slot{display:flex;justify-content:center;min-height:44px;}
.google-slot .google-unavailable{margin:0;text-align:center;}
.google-card[hidden]{display:none;}
.google-card .btn.small{margin-right:8px;}

/* Privacy Policy and Terms of Use (/privacy, /terms): the app's header and cards, set for reading */
.legal-nav{gap:18px;}
.legal-nav a,.legal a,.landing-footer a,.agree-note a,.google-agree a{color:var(--ink-2);text-underline-offset:3px;}
.legal-nav a{font-size:14px;font-weight:600;}
.legal-nav a:hover,.legal a:hover,.landing-footer a:hover,.agree-note a:hover,.google-agree a:hover{color:var(--ink);}
.legal .card{line-height:1.6;font-size:15px;}
.legal .card h2{font-size:20px;margin-bottom:8px;}
.legal .card h3{font-size:16px;margin:16px 0 4px;}
.legal .card p{margin:0 0 10px;}
.legal .card p:last-child{margin-bottom:0;}
.legal ul{margin:6px 0 10px;padding-left:20px;}
.legal li{margin:6px 0;}
.legal-list dt{font-weight:700;color:var(--ink);margin-top:14px;}
.legal-list dt:first-child{margin-top:4px;}
.legal-list dd{margin:2px 0 0;color:var(--ink-2);}
.legal-footer{text-align:center;font-size:14px;color:var(--muted);margin:8px 0 24px;}
.legal a:focus-visible,.landing-footer a:focus-visible,.agree-note a:focus-visible,.google-agree a:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:2px;}

/* The landing page's small footer, and the agreement line under the signup buttons */
.landing-footer{text-align:center;font-size:13px;color:var(--muted);padding:28px 0 8px;border-top:1px solid var(--line);margin-top:40px;}
.landing-footer a{margin:0 6px;}
.agree-note{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5;}
/* Right under the Google button, on the log-in and sign-up screens */
.google-agree{font-size:13px;color:var(--muted);margin:8px 0 0;line-height:1.5;text-align:center;}

/* Your data: download, and the danger zone for deleting the account */
.your-data .danger-zone{border-top:1px solid var(--line);margin-top:16px;padding-top:12px;}
.delete-list{margin:6px 0 14px;padding-left:20px;font-size:14px;line-height:1.55;color:var(--ink-2);}
.delete-list li{margin:5px 0;}
.chat-text.chat-removed{font-style:italic;color:var(--muted);background:var(--paper);}

/* Employment trail (spec 4.20): the disclosure, and the former employer's "hired again" line */
.trail-note{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5;}
.p-meta.rehired{color:var(--forest);font-weight:600;margin-top:2px;}

/* Courtesy title beside a name, and dropdowns with an "Other" box (spec 4.29). */
.name-row > .choice-field{flex:0 0 150px;min-width:120px;}
.other-box{margin-top:8px;}
.other-box[hidden]{display:none;}
@media (max-width:600px){
  .name-row > .choice-field{flex:1 1 100%;}
}

/* Close-match search (spec 4.30): counts, the exact-only switch, related labels. */
.match-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:14px 0 4px;font-size:13.5px;color:var(--ink);}
.match-counts{font-weight:600;}
.match-switch{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--ink);cursor:pointer;}
.match-switch input{width:auto;margin:0;}
.related-tag{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:500;}

/* The tagline's second line (spec 4.31): smaller, bold, directly under the headline. */
.tagline{margin-bottom:6px;}
.tagline .auth-tagline{margin-bottom:0;}
.tagline-strap{font-weight:700;font-size:15px;line-height:1.35;color:var(--brass-hover);letter-spacing:.01em;margin:6px 0 14px;}
.hero-strap{font-size:17px;margin:12px auto 0;max-width:760px;}
@media (max-width:600px){.tagline-strap{font-size:13.5px;}.hero-strap{font-size:15px;}}
.hero-strap.reveal{animation-delay:.3s;}
.legal-tagline{text-align:center;color:var(--muted);font-size:13px;line-height:1.5;margin-top:6px;}
.legal-tagline strong{color:var(--brass-hover);}
.nowrap{white-space:nowrap;}

/* Find a candidate (spec 4.32). */
.cs-count{margin-top:14px;font-weight:600;font-size:14px;color:var(--ink);}
.hidden-by-distance{margin-top:6px;font-size:13.5px;color:var(--muted);}
.limited-candidate{cursor:pointer;}
.light-view-panel{border:1px solid var(--brass);background:var(--parchment);border-radius:12px;padding:12px 14px;margin:4px 0 10px;font-size:14px;}
.light-view-panel p{margin:0 0 8px;}
.light-view-actions{display:flex;gap:8px;flex-wrap:wrap;}
.light-view-actions .btn{margin-top:0;}
#cs-radius-note .btn{margin-top:6px;}
/* The Role filter is wide enough for "Other (not on the list)" (spec 4.33); on phones it gets the whole row. */
.row > .cs-role-field{flex:1 1 230px;min-width:230px;}
@media (max-width:600px){.row > .cs-role-field{flex:1 1 100%;}}

/* Service providers (spec 4.34): the trades picker. */
.trades-field{border:1px solid var(--line);border-radius:12px;padding:10px 14px 12px;margin:12px 0 0;}
.trades-field legend{font-size:13px;font-weight:600;color:var(--ink);padding:0 4px;}
.trades-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 14px;margin-top:6px;max-height:280px;overflow:auto;}
.trade-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);margin:0;padding:4px 0;}
.trade-check input{width:auto;margin:0;}
@media (max-width:600px){.trades-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:380px){.trades-grid{grid-template-columns:1fr;}}
/* A trusted contact's link, copied whole (spec 4.11). */
.tc-link{word-break:break-all;font-size:12.5px;}
/* Four landing cards: four across, two on mid-size screens, one on phones. */
@media (min-width:1100px){.entry-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (min-width:761px) and (max-width:1099px){.entry-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* A provider's work details and licences (spec 4.34). */
.form-subhead{margin:18px 0 0;font-size:15px;}
.licences-field{border:1px solid var(--line);border-radius:12px;padding:10px 14px 12px;margin:14px 0 0;}
.licences-field legend{font-size:13px;font-weight:600;color:var(--ink);padding:0 4px;}
.licence-note{margin:4px 0 8px;font-size:13px;font-weight:600;color:var(--brass-hover);}
.licence-row{border-top:1px dashed var(--line);padding-top:8px;margin-top:8px;}
.licence-row:first-child{border-top:0;margin-top:0;padding-top:0;}
.listing-box{margin-top:14px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--parchment);}
.listing-box .check-row{margin:0;}

/* Find a service provider (spec 4.34). */
.row > .ps-trade-field{flex:1 1 230px;min-width:230px;}
@media (max-width:600px){.row > .ps-trade-field{flex:1 1 100%;}}
.licence-list{margin:4px 0 0;padding-left:18px;font-size:13.5px;}

/* Service requests (spec 4.34). */
.meeting-safely{border-color:var(--brass);background:var(--parchment);}
.meeting-safely ul{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.55;}
.sr-form{border-top:1px solid var(--line);margin-top:14px;padding-top:4px;}

/* Reviews (spec 4.35). */
.stars{color:var(--brass);letter-spacing:1px;}
.stars-off{color:var(--line);}
.rating-line{white-space:normal;}
.review{border-top:1px solid var(--line);padding:12px 0 4px;}
.review:first-child{border-top:0;}
.review-head{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.review-text{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;line-height:1.5;}
.review-reply{margin:8px 0 0 14px;padding:8px 12px;border-left:3px solid var(--brass);background:var(--parchment);font-size:14px;overflow-wrap:anywhere;}
.review-form,.reply-form{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--parchment);}
.review-form fieldset{border:0;padding:0;margin:8px 0 0;}
.review-form legend{font-weight:600;font-size:13.5px;margin-bottom:4px;}
.star-picker{display:flex;flex-wrap:wrap;align-items:center;gap:2px;}
.star-picker legend{width:100%;}
.star-picker label{cursor:pointer;font-size:28px;line-height:1;color:var(--line);margin:0;}
.star-picker input{position:absolute;opacity:0;width:1px;height:1px;}
/* The chosen star and those before it; while pointing, the stars up to the pointer. */
.star-picker label:has(input:checked),.star-picker label:has(~ label input:checked){color:var(--brass);}
@media (hover:hover){.star-picker:hover label{color:var(--brass);}.star-picker label:hover ~ label{color:var(--line);}}
.star-picker input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px;}
.choice{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:6px;font-weight:400;}
.choice input{width:auto;}
.report-review{font-size:12.5px;margin-top:4px;}
.review-report{margin-top:8px;}
.delete-reviews{border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px;margin:12px 0;}
.delete-reviews legend{font-weight:600;font-size:14px;padding:0 4px;}

/* Urgent requests (spec 4.36). */
.urgent-reach{margin:10px 0;padding:8px 12px;border-radius:10px;background:var(--parchment);border:1px dashed var(--brass);font-size:13.5px;}
.availability-on{margin:8px 0 12px;font-size:14px;}
.topnav button.urgent-btn{background:#b3261e;color:#fff;border-color:#b3261e;}
.topnav button.urgent-btn:hover,.topnav button.urgent-btn.active{background:#8c1d18;color:#fff;}
.btn.danger-soft{background:transparent;color:#b3261e;border:1px solid #b3261e;margin-left:8px;}
.btn.danger-solid{background:#b3261e;color:#fff;border-color:#b3261e;}
.notif-urgent{position:absolute;top:-8px;right:-16px;background:#b3261e;color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 5px;border-radius:8px;}
.emergency-notice{margin:-4px 0 12px;padding:10px 12px;border-radius:10px;background:#fdecea;border:2px solid #b3261e;color:#5f1410;font-size:14px;line-height:1.45;}
.urgent-problems{border:0;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
.urgent-problems legend,.urgent-location legend{font-weight:600;font-size:13.5px;margin-bottom:6px;width:100%;}
.problem-btn{margin:0;cursor:pointer;}
.problem-btn input{position:absolute;opacity:0;width:1px;height:1px;}
.problem-btn span{display:inline-block;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card, #fff);font-size:14px;}
.problem-btn input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink);}
.problem-btn input:focus-visible + span{outline:2px solid var(--brass);outline-offset:2px;}
.urgent-location{border:0;padding:0;margin:12px 0 0;}
.urgent-status{margin:8px 0;font-size:15px;}
.urgent-alert{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px;}
.urgent-alert.urgent-live{border:2px solid #b3261e;background:#fff7f6;}
.urgent-pill{background:#b3261e;color:#fff;}
.urgent-answer{margin-top:8px;}
.urgent-tools{margin-top:8px;font-size:12.5px;}
.urgent-tools .linklike{font-size:12.5px;margin-top:0;}
/* The alert banner: steady, with a slow pulse (one every 2 s) — never strobing. */
.urgent-banner{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;background:#b3261e;color:#fff;font-size:15px;animation:urgent-pulse 2s ease-in-out infinite;}
.urgent-banner .btn{background:#fff;color:#b3261e;border-color:#fff;}
.urgent-banner-text{flex:1 1 220px;}
@keyframes urgent-pulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0);}50%{box-shadow:inset 0 0 0 4px rgba(255,255,255,.45);}}
@media (prefers-reduced-motion:reduce){.urgent-banner{animation:none;}}
.urgent-share-on{margin:10px 0;}

/* "More" in the dashboard header (mid-width screens only). */
.nav-more{display:none;position:relative;}
.more-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:150px;padding:6px;background:var(--parchment);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);}
.more-panel button{display:block;width:100%;text-align:left;}
@media (min-width:761px) and (max-width:1440px){
  .topbar-dash .nav-full{display:none;}
  .topbar-dash .nav-more{display:block;}
}
.code-outdated{flex:1 1 220px;padding:8px 10px;border:2px solid #b3261e;border-radius:10px;background:#fdecea;color:#5f1410;font-size:13.5px;}
.job-code-box{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.finished-ask{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--parchment);border:1px solid var(--brass);font-size:13.5px;}

/* End job / Withdraw from job: the confirm step (spec 4.35). */
.end-dialog-backdrop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,24,40,.45);}
.end-dialog{width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--parchment);border-radius:14px;padding:18px 18px 14px;box-shadow:0 12px 40px rgba(0,0,0,.25);}
.end-dialog h3{margin:0 0 6px;}
.end-dialog p{margin:0 0 10px;font-size:14px;line-height:1.5;}
.end-dialog .choice{display:block;line-height:1.45;margin-top:8px;}
.end-dialog .choice input{margin-right:6px;vertical-align:-2px;}
.end-dialog .choice .hint{display:inline;}
.end-dialog-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.report-job{margin-bottom:8px;font-size:13.5px;}