/* MomentumOS App. Mobile first: the base rules are the phone layout (one column, bottom tab bar);
   min-width breakpoints add the sidebar at 768px and more room at 1024px. Tokens match the website
   (momentumos-website/assets/site.css). No inline styles anywhere: the Content Security Policy forbids them. */

:root{
  --navy:#0F172A; --navy-2:#141D36;
  --page:#F4F6FB; --white:#FFFFFF; --line:#E3E7F0; --line-strong:#CBD2E0;
  --ink:#0F172A; --ink-2:#334155; --gray:#5B687C; --gray-2:#94A3B8;
  --blue:#2563EB; --blue-deep:#1D4ED8; --blue-dark:#1E3A8A; --blue-tint:#DBEAFE; --blue-wash:#EFF4FF;
  --green-text:#166534; --green-tint:#DCFCE7; --green-wash:#F0FDF4;
  --yellow-text:#8A5B00; --yellow-tint:#FFF6DB;
  --red:#DC2626; --red-text:#991B1B; --red-tint:#FEE2E2;
  --font-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 24px 60px -24px rgba(30,58,138,.35);
  --top-h:56px; --tab-h:64px;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--top-h) + var(--safe-top) + .75rem);scroll-padding-bottom:calc(var(--tab-h) + var(--safe-bottom) + .75rem)}
body{margin:0;font:400 1rem/1.5 var(--font-body);color:var(--ink);background:var(--page);min-height:100vh;min-height:100dvh}
img,svg{max-width:100%}
a{color:var(--blue-deep)}
h1,h2,h3{line-height:1.25;margin:0 0 .5rem}
h1{font-size:1.35rem}
h2{font-size:1.1rem}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.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}
.muted{color:var(--gray)}
.small{font-size:.875rem}
.mono{font-family:var(--font-mono)}
.stack>*+*{margin-top:1rem}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:99;display:inline-flex;align-items:center;min-height:44px}
.skip:focus{left:1rem;top:1rem}

/* ------------------------------------------------------------------ buttons and forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.5rem 1.25rem;
  border-radius:var(--r-sm);border:1px solid transparent;font:600 1rem/1.2 var(--font-body);background:var(--blue);
  color:#fff;text-decoration:none;cursor:pointer;width:100%;text-align:center}
.btn:hover{background:var(--blue-deep)}
.btn-secondary{background:var(--white);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--blue-wash)}
.btn-danger{background:var(--white);color:var(--red-text);border-color:var(--red-tint)}
.btn-danger:hover{background:var(--red-tint)}
.btn-link{background:none;border:0;color:var(--blue-deep);padding:0;min-height:44px;width:auto;font:inherit;font-weight:600;cursor:pointer}
.btn-link:hover{background:none;text-decoration:underline}
a.btn-link{display:inline-flex;align-items:center}  /* min-height needs a box: 44 px to tap (SPEC 4.11) */
.btn svg{width:20px;height:20px;flex:none}
.actions{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
.field{margin-bottom:1rem}
label,.label{display:block;font-weight:600;margin:0 0 .35rem}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=search],select,textarea{
  width:100%;min-height:48px;padding:.65rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font:inherit;font-size:1rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
input.code{font:600 1.6rem/1 var(--font-mono);letter-spacing:.35em;text-align:center;padding-left:.35em}
.hint{color:var(--gray);font-size:.875rem;margin:.35rem 0 0}
.alert{padding:.8rem 1rem;border-radius:var(--r-sm);margin:0 0 1rem;font-size:.95rem}
.alert-error{background:var(--red-tint);color:var(--red-text)}
.alert-ok{background:var(--green-tint);color:var(--green-text)}
.alert-info{background:var(--blue-wash);color:var(--blue-dark)}
.alert-warn{background:var(--yellow-tint);color:var(--yellow-text)}

/* ------------------------------------------------------------------ sign-in pages */
.auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:calc(1.25rem + var(--safe-top)) 1rem calc(1.5rem + var(--safe-bottom));
  background:radial-gradient(120% 60% at 50% 0%,#1E3A8A 0%,var(--navy) 60%)}
.auth-brand{margin:.75rem 0 1.25rem}
.auth-brand img{display:block;width:200px;height:auto}
.auth-card{width:100%;max-width:440px;background:#fff;border-radius:var(--r-lg);padding:1.5rem 1.25rem;box-shadow:var(--shadow)}
.auth-card h1{font-size:1.4rem}
.auth-foot{color:var(--gray-2);font-size:.85rem;margin-top:1.25rem;text-align:center}
.auth-foot a{color:#fff}
.qr{display:flex;justify-content:center;margin:1rem 0}
.qr svg{display:block;width:min(240px,100%);height:auto;aspect-ratio:1}
.secret{font:600 1rem/1.6 var(--font-mono);letter-spacing:.05em;word-break:break-all;background:var(--page);
  border-radius:var(--r-sm);padding:.6rem .75rem;text-align:center}
.steps{padding-left:1.2rem;margin:0 0 1rem}
.steps li+li{margin-top:.4rem}

/* ------------------------------------------------------------------ app shell: phone */
.shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.75rem;
  min-height:calc(var(--top-h) + var(--safe-top));padding:var(--safe-top) 1rem 0;background:var(--navy);color:#fff}
.topbar-logo{display:flex;align-items:center;flex:none;min-height:44px}
.topbar-logo img{display:block;height:32px;width:auto}
.topbar-title{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:right;font-size:.95rem;color:#E2E8F0}
.avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:var(--blue);color:#fff;font-weight:600;font-size:.85rem;text-decoration:none}
.sidenav{display:none}
.content{flex:1;width:100%;max-width:1100px;margin:0 auto;
  padding:1rem 1rem calc(var(--tab-h) + 1.5rem + var(--safe-bottom))}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  min-height:calc(var(--tab-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:#fff;
  border-top:1px solid var(--line)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;
  font-size:.72rem;font-weight:500;color:var(--gray);text-decoration:none}
.tabbar a[aria-current=page]{color:var(--blue-deep)}
.tabbar svg,.sidenav svg{width:24px;height:24px;flex:none}

/* ------------------------------------------------------------------ app shell: tablet and desktop */
@media (min-width:768px){
  .shell{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto 1fr}
  .topbar{grid-column:1/-1;grid-row:1;padding:0 1.5rem}
  .topbar-logo img{height:40px}
  .sidenav{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:2px;padding:1rem .75rem;background:#fff;
    border-right:1px solid var(--line);position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h));
    height:calc(100dvh - var(--top-h));overflow-y:auto}
  .sidenav a,.sidenav button{display:flex;align-items:center;gap:.75rem;width:100%;min-height:44px;padding:.6rem .75rem;
    border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font:500 .95rem/1.2 var(--font-body);
    background:none;border:0;cursor:pointer;text-align:left}
  .sidenav a:hover,.sidenav button:hover{background:var(--page)}
  .sidenav a[aria-current=page]{background:var(--blue-wash);color:var(--blue-deep)}
  .sidenav-sep{width:100%;margin:.5rem 0;border:0;border-top:1px solid var(--line)}
  .tabbar{display:none}
  .content{grid-column:2;grid-row:2;padding:1.5rem 2rem 2rem;margin:0}
  h1{font-size:1.6rem}
  .actions{flex-direction:row;flex-wrap:wrap}
  .actions .btn{width:auto}
  .auth{justify-content:center}
  .auth-card{padding:2rem}
}
@media (min-width:1024px){
  .shell{grid-template-columns:256px minmax(0,1fr)}
  .content{padding:2rem 2.5rem 2.5rem}
}

/* ------------------------------------------------------------------ page parts */
.page-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1.25rem}
.page-head h1{margin:0}
.page-head .btn{width:auto}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1rem}
.card+.card,.card+.grid-2,.grid-2+.card{margin-top:1rem}  /* the same gap between every pair of cards */
.card h2{margin-bottom:.75rem}
@media (min-width:768px){.card{padding:1.25rem 1.5rem}}
.grid-2{display:grid;gap:1rem}
.grid-2>.card+.card{margin-top:0}  /* the grid's gap spaces its cards */
@media (min-width:1024px){.grid-2{grid-template-columns:1fr 1fr;align-items:start}}
.form-row{display:grid;gap:0 1rem}
@media (min-width:768px){.form-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

.badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.78rem;font-weight:600;
  background:var(--page);color:var(--ink-2);white-space:nowrap}
.badge-ok{background:var(--green-tint);color:var(--green-text)}
.badge-warn{background:var(--yellow-tint);color:var(--yellow-text)}
.badge-off{background:var(--red-tint);color:var(--red-text)}
.badge-info{background:var(--blue-tint);color:var(--blue-dark)}

/* Lists that are rows on a phone and stay rows on desktop */
.rows{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.rows li+li{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:.75rem;min-height:60px;padding:.75rem 1rem;color:inherit;text-decoration:none}
a.row:hover{background:var(--page)}
.row-main{flex:1;min-width:0}
.row-title{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-sub{display:block;color:var(--gray);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-end{flex:none;display:flex;align-items:center;gap:.5rem}

/* Tables become labelled cards on a phone */
.table{width:100%;border-collapse:collapse;font-size:.95rem}
.table th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray);font-weight:600}
.table th,.table td{padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.table td{overflow-wrap:anywhere}  /* a long email address wraps instead of widening the page */
@media (max-width:767.98px){
  .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{padding:.5rem 0;border-bottom:1px solid var(--line)}
  .table td{border:0;padding:.2rem 0;display:flex;gap:.75rem}
  .table td::before{content:attr(data-label);flex:0 0 7.5rem;color:var(--gray);font-size:.85rem}
}

.empty{text-align:center;padding:2.5rem 1rem;color:var(--ink-2)}
.empty svg{width:48px;height:48px;color:var(--blue);margin-bottom:.75rem}
.copy{display:flex;flex-direction:column;gap:.5rem}
.copy input{font-family:var(--font-mono);font-size:.9rem}
@media (min-width:768px){.copy{flex-direction:row}.copy .btn{width:auto;flex:none}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0}
.kv dt{color:var(--gray)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.inline-form{display:inline}
details summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}

/* ================================================================== day 2: inbox, alerts, bell */
[hidden]{display:none !important}
.topbar-icon{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:#E2E8F0;border-radius:50%}
.topbar-icon svg{width:24px;height:24px}
.topbar-icon .count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:var(--red);color:#fff;font:600 .7rem/18px var(--font-body);text-align:center}
.avatar{position:relative}
.presence{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--navy)}
.presence-online{background:#22C55E}.presence-busy{background:#F5B301}.presence-away{background:var(--gray-2)}
.avatar-muted{background:var(--blue-tint);color:var(--blue-dark)}
.menu-rows{margin-bottom:1rem}
.menu-rows svg{width:24px;height:24px;color:var(--blue);flex:none}
.radio-list{border:0;padding:0;margin:0 0 1rem}
.radio-list label,.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;margin:.4rem 0;min-height:32px}
.radio-list input,.check input{width:20px;height:20px;margin-top:2px;flex:none}
fieldset{border:0;padding:0;margin:0 0 1rem;min-width:0}
input[type=time]{width:100%;min-height:48px;padding:.5rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);font:inherit}

/* The inbox is edge to edge on a phone. */
.content-flush{padding:0 0 calc(var(--tab-h) + var(--safe-bottom))}
.inbox-head{padding:1rem 1rem .25rem}
.inbox-head h1{margin:0}
/* The filters wrap rather than scroll, so none is ever cut off at the edge of the list or under the pane beside it. */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem 1rem .75rem}
.chip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border-radius:999px;border:1px solid var(--line-strong);
  background:#fff;color:var(--ink-2);text-decoration:none;font-size:.9rem;font-weight:500;white-space:nowrap}
.chip[aria-current=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.conv-rows{list-style:none;margin:0;padding:0;background:#fff;border-top:1px solid var(--line)}
.conv-rows li+li{border-top:1px solid var(--line)}
.conv{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 1rem;color:inherit;text-decoration:none;min-height:72px}
.conv:hover{background:var(--page)}
.conv[aria-current=page]{background:var(--blue-wash)}
.conv .avatar{flex:none}
.conv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.conv-top{display:flex;gap:.5rem;align-items:baseline}
.conv-name{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-time{flex:none;color:var(--gray);font-size:.8rem}
.conv-preview{color:var(--gray);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-tags:empty{display:none}
.conv-tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:2px}
.conv.unread .conv-name{font-weight:700}
.conv.unread .conv-preview{color:var(--ink)}
.dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--blue);margin-top:.45rem}
.more-row{text-align:center;padding:1rem}
.more-row .btn{width:auto}
.list-alert{margin:0 1rem 1rem}
.small-empty{padding:2rem 1rem}

/* Phone: the list, or the open conversation, one at a time. */
.inbox-thread{display:none}
.has-thread .inbox-list{display:none}
.has-thread .inbox-thread{display:flex;flex-direction:column;min-height:calc(100dvh - var(--top-h) - var(--safe-top))}
body.thread-open .tabbar{display:none}
body.thread-open .content-flush{padding-bottom:0}
.thread-head{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:calc(var(--top-h) + var(--safe-top));z-index:10}
.thread-head h1{font-size:1.05rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-who{flex:1;min-width:0}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;
  border:0;background:none;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{background:var(--page)}
.icon-btn svg{width:22px;height:22px}
.contact-card{background:#fff;border-bottom:1px solid var(--line);padding:0 1rem}
.contact-card summary{font-size:.9rem;color:var(--blue-deep)}
.contact-body{padding:.25rem 0 1rem}
.contact-body .kv{margin-bottom:1rem}
.inline-row{display:flex;gap:.5rem}
.inline-row .btn{width:auto;flex:none}
.assign-form,.note-form{margin-top:.75rem}
.note-form textarea{width:100%;min-height:60px;padding:.6rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);font:inherit;margin-bottom:.5rem}
.note-form .btn{width:auto}
.note-form .btn svg{width:18px;height:18px}
.timeline{flex:1;padding:1rem .75rem;display:flex;flex-direction:column;gap:.5rem}
.day-sep{text-align:center;margin:.75rem 0 .25rem;color:var(--gray);font-size:.8rem}
.day-sep span{background:var(--page);padding:.15rem .6rem;border-radius:999px}
.msg{display:flex;flex-direction:column;max-width:85%}
.msg-in{align-self:flex-start;align-items:flex-start}
.msg-out{align-self:flex-end;align-items:flex-end}
.bubble{margin:0;padding:.6rem .85rem;border-radius:18px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.98rem}
.msg-in .bubble{background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.msg-out .bubble{background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.msg-meta{margin:.2rem .4rem 0;color:var(--gray);font-size:.75rem}
.msg-meta .failed{color:var(--red-text);font-weight:600}
.media img{display:block;max-width:240px;max-height:320px;border-radius:14px;margin-top:.25rem;background:var(--line)}
.file{display:inline-block;margin-top:.25rem;padding:.5rem .75rem;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:.9rem}
.note{align-self:stretch;background:var(--yellow-tint);border-radius:12px;padding:.6rem .85rem;font-size:.92rem}
.note p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.note .note-head{color:var(--yellow-text);font-size:.78rem;font-weight:600;margin-bottom:.2rem}
.system{align-self:center;color:var(--gray);font-size:.8rem;margin:.25rem 0;text-align:center}
.composer{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:.5rem .5rem calc(.5rem + var(--safe-bottom))}
.composer .alert{margin:.25rem .25rem .5rem}
.composer .hint{margin:0 .5rem .35rem}
.composer-row{display:flex;align-items:flex-end;gap:.25rem}
.composer textarea{flex:1;min-height:44px;max-height:160px;padding:.6rem .85rem;border:1px solid var(--line-strong);border-radius:22px;
  font:inherit;font-size:1rem;resize:none;line-height:1.4}
.composer .send{background:var(--blue);color:#fff}
.composer .send:hover{background:var(--blue-deep)}
.attach{cursor:pointer}
.composer-meta{margin:.25rem .75rem 0;color:var(--gray);font-size:.78rem;display:flex;gap:.75rem;justify-content:space-between;min-height:1.1em}
.thread-empty{display:none}

/* Tablet: the sidebar is in, but a conversation still takes the whole content area. */
@media (min-width:768px){
  .content-flush{padding:0;margin:0;max-width:none}
  .thread-head{top:var(--top-h)}
  .has-thread .inbox-thread{min-height:calc(100dvh - var(--top-h))}
  body.thread-open .content-flush{padding-bottom:0}
}
/* Desktop: list and conversation side by side, each scrolling on its own. */
@media (min-width:1024px){
  .inbox{display:grid;grid-template-columns:360px minmax(0,1fr);height:calc(100dvh - var(--top-h))}
  .inbox-list{display:block !important;overflow-y:auto;border-right:1px solid var(--line);background:#fff}
  .inbox-thread{display:flex !important;flex-direction:column;min-height:0;overflow:hidden}
  .has-thread .inbox-thread{min-height:0}
  .thread-head{position:static}
  .thread-head .back{display:none}
  .timeline{overflow-y:auto}
  .composer{position:static}
  .thread-empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;color:var(--gray)}
  .thread-empty svg{width:48px;height:48px;color:var(--gray-2)}
  .msg{max-width:70%}
}

/* ================================================================== day 3: Job Done, contacts, reviews */
/* The + button: floats above the tab bar on a phone; from 768px the sidebar's New link takes its place. */
.fab{position:fixed;right:1rem;bottom:calc(var(--tab-h) + var(--safe-bottom) + 1rem);z-index:25;display:inline-flex;
  align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;
  box-shadow:0 6px 20px -6px rgba(30,58,138,.6)}
.fab:hover{background:var(--blue-deep)}
.fab svg{width:26px;height:26px}
body.thread-open .fab{display:none}
@media (max-width:767.98px){.content:has(.fab){padding-bottom:calc(var(--tab-h) + var(--safe-bottom) + 5.5rem)}}
.sidenav-new,.desktop-only{display:none}
@media (min-width:768px){
  .fab{display:none}
  .sidenav .sidenav-new{display:flex;justify-content:center;gap:.5rem;margin-bottom:.75rem;background:var(--blue);color:#fff;
    font-weight:600}
  .sidenav .sidenav-new:hover,.sidenav .sidenav-new[aria-current=page]{background:var(--blue-deep);color:#fff}
  .desktop-only{display:inline-flex}
}

.search-row{display:flex;gap:.5rem;margin-bottom:.25rem}
.search-row .btn{width:auto;flex:none}
.chips-inline{padding:.5rem 0 .75rem;margin:0 -1rem;padding-left:1rem;padding-right:1rem}
@media (min-width:768px){.chips-inline{margin:0;padding-left:0;padding-right:0;flex-wrap:wrap;overflow:visible}}
.rows .row-end .badge{max-width:8rem;overflow:hidden;text-overflow:ellipsis}
@media (max-width:479.98px){.rows .row-end .badge+.badge{display:none}}

.picked{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:1rem;background:var(--blue-wash);
  border-radius:var(--r-sm)}
.picked .btn-link{flex:none}
.pick-rows{margin-top:1rem}
.card .inline-row input{flex:1;min-width:0}
.done-card{text-align:center;padding:2rem 1.25rem}
.done-card>svg{width:56px;height:56px;color:var(--green-text);background:var(--green-tint);border-radius:50%;padding:12px;
  margin-bottom:.75rem}
.done-card .actions{justify-content:center}
.photo-card form{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.photo-pick{cursor:pointer}
.photo-pick:focus-within{outline:2px solid var(--blue);outline-offset:2px}
#photo-form.busy .photo-pick{pointer-events:none;opacity:.7}
.job-photo img,.note-photo img{display:block;max-width:100%;max-height:420px;border-radius:12px;margin-top:.5rem;
  background:var(--line)}
.note-photo img{max-height:240px}

.contact-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.contact-head h1{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-head .icon-btn{margin-left:-.5rem}
@media (min-width:768px){.contact-head .icon-btn{display:none}}
.avatar-lg{width:48px;height:48px;font-size:1.1rem}
.action-strip{margin:0 0 1rem}
.contact-hint{margin:0 0 1rem}
.action-strip .btn svg{width:20px;height:20px}
.tag-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.tag-pill{display:inline-flex;align-items:center;gap:.15rem;padding-left:.75rem;border-radius:999px;background:var(--page);
  border:1px solid var(--line);font-size:.9rem;font-weight:500}
.tag-x{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:none;
  border-radius:50%;color:var(--gray);font-size:1.2rem;line-height:1;cursor:pointer}
.tag-x:hover{color:var(--red-text);background:var(--red-tint)}
.card>.note+.note,.note-form+.note{margin-top:.75rem}
details.card summary{margin:0}
details.card[open] summary{margin-bottom:.75rem}
/* A folding card shows an arrow on the right, since the browser drops its own marker on a flex summary. */
details.card>summary{list-style:none;gap:.5rem}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:"";margin-left:auto;flex:none;width:.5rem;height:.5rem;border-right:2px solid var(--gray);
  border-bottom:2px solid var(--gray);transform:translateY(-2px) rotate(45deg);transition:transform .15s}
details.card[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.danger-link{margin:1.25rem 0 0;text-align:center}
.danger-link a{color:var(--red-text);display:inline-flex;align-items:center;min-height:44px}

.review{align-items:flex-start}
.review>svg{width:22px;height:22px;flex:none;color:#F5B301;margin-top:2px}
.review-text{display:block;margin:.2rem 0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2)}

/* ================================================================== phase 2: Talk to us, setup, console */
.support-head{display:flex;align-items:center;gap:.9rem}
.support-head p{margin:0}
.support-head .row-sub{white-space:normal}
.chat{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
.chat-msg{max-width:85%;padding:.6rem .85rem;border-radius:14px;background:var(--page)}
.chat-mine{align-self:flex-end;background:var(--blue-tint)}
.chat-theirs{align-self:flex-start}
.chat-who{margin:0 0 .15rem;font-size:.78rem;font-weight:600;color:var(--gray)}
.chat-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-empty{margin:0 0 1rem}
.support-form textarea{width:100%}
.support-form .actions{margin-top:.75rem}
.setup-count{margin:0 0 .5rem}
.setup-bar{display:block;width:100%;height:10px;border:0;border-radius:999px;overflow:hidden;background:var(--line);
  -webkit-appearance:none;appearance:none}
.setup-bar::-webkit-progress-bar{background:var(--line);border-radius:999px}
.setup-bar::-webkit-progress-value{background:var(--blue);border-radius:999px}
.setup-bar::-moz-progress-bar{background:var(--blue);border-radius:999px}
.setup-group{margin:1.5rem 0 .6rem;font-size:1rem}
.setup-row{align-items:flex-start}
.setup-row>svg{width:22px;height:22px;flex:none;color:var(--gray);margin-top:1px}
.setup-done>svg{color:var(--green-text)}
.setup-dot{flex:none;width:12px;height:12px;margin:6px 5px 0;border-radius:50%;border:2px solid var(--blue)}
.setup-next{display:block;color:var(--ink-2);font-size:.92rem;margin-top:.15rem;white-space:normal}
.setup-row .row-title{white-space:normal}
.setup-row a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.setup-copy{margin-top:.5rem}
.setup-who{margin:.25rem 0 .1rem}
.setup-help{margin-top:1.25rem}
.setup-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}
.setup-card-head a{display:inline-flex;align-items:center;min-height:44px}
.setup-card-head h2{margin:0}
.setup-card-head a{font-weight:600;white-space:nowrap}
.setup-list{list-style:none;margin:1rem 0 0;padding:0}
.setup-list>li{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-top:1px solid var(--line)}
.setup-list>li:last-child{padding-bottom:0}
.setup-list .row-title{white-space:normal}
.setup-list a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.setup-admin{display:block;color:var(--gray);font-size:.875rem;margin-top:.35rem}
.setup-ours{margin:1rem 0 0}
.field-error{color:var(--red-text);font-size:.875rem;margin:.35rem 0 0}
[aria-invalid=true]{border-color:var(--red-text)}
input[type=file]{display:block;width:100%;min-height:48px;padding:.6rem 0;font:inherit}
.loa{background:var(--page);border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem 1rem;font-size:.95rem;line-height:1.5}
.sig-field{margin-top:1rem}
.sig-pad{display:block;width:100%;height:170px;background:#fff;border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  touch-action:none;cursor:crosshair}
.sig-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sig-actions .hint{margin:0}
.sig-image{display:block;max-width:100%;height:auto;max-height:170px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.loa-details{margin-top:1rem}
.loa-details summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.card[id],.chat-msg,:target{scroll-margin-top:calc(var(--top-h) + var(--safe-top) + 12px)}
.setup-table td>div{min-width:0}
.golive{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.setup-table select,.setup-table input{min-height:44px}
.setup-table .row-sub{white-space:normal}
.table td>*{min-width:0}
@media (min-width:768px){.setup-table td:first-child{width:45%}}
input[type=color]{width:100%;min-height:48px;padding:4px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff}

/* ================================================================== phase 3: billing, team, dashboard */
.card h3{font-size:1rem;margin:1.25rem 0 .5rem}
.billing-status p{margin:0 0 .75rem}
.billing-status p:not(.alert){color:var(--blue)}
.billing-status p:last-child{margin-bottom:0}
.billing-steps{list-style:none;margin:0;padding:0;counter-reset:step}
.billing-steps>li{position:relative;padding:.75rem 0 .75rem 2.5rem;border-top:1px solid var(--line);counter-increment:step}
.billing-steps>li:first-child{border-top:0}
.billing-steps>li::before{content:counter(step);position:absolute;left:0;top:.7rem;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--blue-tint);color:var(--blue-dark);font-weight:600;font-size:.9rem}
.billing-steps>li.done::before{content:"✓";background:var(--green-tint);color:var(--green-text)}
.billing-steps .row-title{white-space:normal;margin:.15rem 0 .25rem}
.billing-steps .row-title svg{display:none}
.balance{font-size:2rem;font-weight:700;margin:.25rem 0 .5rem;font-variant-numeric:tabular-nums}
.balance-low{color:var(--red-text)}
.funds-form fieldset{margin:1rem 0 0}
.funds-chips{margin:0 0 .5rem;padding-top:.25rem;flex-wrap:wrap}
.chip-radio{position:relative;margin:0;font-weight:500}
.chip-radio input{position:absolute;opacity:0;width:1px;height:1px}
.chip-radio span{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border-radius:999px;border:1px solid var(--line-strong);
  background:#fff;cursor:pointer}
.chip-radio input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-radio input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.recharge-form{margin-top:1.25rem;padding-top:.25rem;border-top:1px solid var(--line)}
.recharge-form .inline-row input{flex:1;min-width:0}
.addon-row{align-items:flex-start}
.addon-about{white-space:normal}
.addon-row .row-end{flex-direction:column;align-items:flex-end;gap:.25rem}
/* Trial requests: every detail stays readable, and on a phone the Invite and Decline buttons go under them. */
.trial-row .row-sub{white-space:normal}
@media (max-width:479.98px){.trial-row{flex-wrap:wrap}.trial-row .row-end{width:100%;justify-content:flex-end}}
.usage-month{border-top:1px solid var(--line);padding:.25rem 0}
.usage-month:first-of-type{border-top:0}
.usage-month .kv{margin:.25rem 0 .75rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.payment-element{min-height:200px;margin:.5rem 0 1rem}
.stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.stats .card+.card{margin-top:0}
.stat h2{font-size:.9rem;color:var(--gray);font-weight:600;margin:0 0 .35rem}
.stat-num{font-size:2rem;font-weight:700;margin:0;font-variant-numeric:tabular-nums;line-height:1.15}
.stat-unit{font-size:1rem;font-weight:500;color:var(--gray)}
.stat-sub{margin:.35rem 0 0;color:var(--ink-2);font-size:.9rem}
.stat-wait{background:var(--page);border-style:dashed}
.team-rows{overflow:visible}
.team-row{align-items:center}
.team-actions{flex:none;position:relative}
.team-actions summary{min-height:44px;padding:0 .75rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-weight:500;
  font-size:.9rem;list-style:none}
.team-actions summary::-webkit-details-marker{display:none}
.team-actions[open] summary{background:var(--blue-wash)}
.team-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;width:min(280px,80vw);padding:.75rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.25rem}
.team-menu .inline-row select{flex:1;min-width:0}
.danger-text{color:var(--red-text)}
.owner-tools{margin-top:1rem;border-top:1px solid var(--line);padding-top:.5rem}
.owner-tools form{margin-top:.75rem}

/* ================================================================== install prompt (static/install.js) */
/* A card above the tab bar on a phone until the app is on the Home Screen; install.js decides when it shows. */
.install{position:fixed;left:.75rem;right:.75rem;bottom:calc(var(--tab-h) + var(--safe-bottom) + .75rem);z-index:28;
  display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem .6rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow)}
.install img{flex:none;border-radius:10px}
.install-main{min-width:0}
.install h2{font-size:1rem;line-height:1.3;margin:0 0 .25rem}
.install p{margin:0;font-size:.9rem;color:var(--ink-2)}
.install-actions{display:flex;align-items:center;gap:1.25rem;margin-top:.5rem}
.install-actions .btn{width:auto;min-height:44px;padding:.4rem 1.25rem}
body.install-open .fab,body.thread-open .install{display:none}
body.install-open .content{padding-bottom:calc(var(--tab-h) + var(--safe-bottom) + var(--install-h,9rem) + 1.5rem)}
@media (min-width:768px){.install{display:none}}

/* Billing pages: a back link beside the title; Add funds has a loading view and its own success screen. */
.back-head{display:flex;align-items:center;gap:.25rem;min-width:0}
.back-head h1{margin:0}
.billing-links{margin:1rem 0}
.plan-now{margin:0 0 .75rem}
.plan-addons{margin:0 0 1rem;padding-left:1.1rem}
.plan-addons li{margin:.2rem 0}
.credit-link{margin-top:1rem}  /* the same space above it as the page's other links */
.funds-card .balance{margin-top:0}
.funds-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;min-height:55vh;
  text-align:center;padding:2rem 1rem}
.funds-loading-title{font-size:1.15rem;font-weight:600;margin:0}
.spinner{width:56px;height:56px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--blue);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.funds-done{animation:pop .45s cubic-bezier(.2,.9,.3,1.25) both}
.success-mark svg{width:88px;height:88px;display:block;margin:0 auto 1rem}
.success-mark circle{fill:var(--green-wash);stroke:var(--green-text);stroke-width:2.5;stroke-dasharray:151;
  stroke-dashoffset:151;animation:draw .6s ease-out .15s forwards}
.success-mark path{fill:none;stroke:var(--green-text);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;animation:draw .35s ease-out .7s forwards}
.success-text{font-size:1.05rem;text-align:center;background:var(--green-wash);border:1px solid var(--green-tint);animation:glow 1.4s ease-out 1s 1}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes glow{from{box-shadow:0 0 0 0 rgba(22,101,52,.4)}to{box-shadow:0 0 0 16px rgba(22,101,52,0)}}
@media (prefers-reduced-motion:reduce){
  .funds-done,.success-text{animation:none}
  .spinner{animation-duration:2.4s}
  .success-mark circle,.success-mark path{animation:none;stroke-dashoffset:0}
}

/* ------------------------------------------------------------------ page rhythm
   Every block in the main column (cards, lists, notices, links) sits 16px below the one before and adds no
   space below itself, so the gaps are equal whatever the blocks are. A group heading sits closer to what it
   names. Inside a card, the first and last pieces drop their outer margins, so the card's own padding is the
   space at its top and bottom. The inbox lays itself out, so it's left alone. */
.content:not(.content-flush)>*,.stack>*{margin-top:0;margin-bottom:0}
.content:not(.content-flush)>*+*,.stack>*+*{margin-top:1rem}
.content:not(.content-flush)>.setup-group{margin-top:1.5rem}
.content:not(.content-flush)>.setup-group+*{margin-top:.5rem}
.card>:first-child{margin-top:0}
.card>:last-child,.card>:last-child>:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ account menu (the avatar, top right) */
.account-menu{position:relative;flex:none}
.account-menu>summary{list-style:none;cursor:pointer;min-height:0}
.account-menu>summary::after{content:"";position:absolute;inset:-4px;border-radius:50%}  /* a 44 px target round the 36 px avatar */
.account-menu>summary::-webkit-details-marker{display:none}
.account-menu[open]>summary{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.account-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:40;width:min(300px,calc(100vw - 2rem));padding:.5rem;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 12px 32px -12px rgba(15,23,42,.35);font-weight:400}
.account-who{display:flex;align-items:center;gap:.75rem;padding:.5rem .5rem .75rem;border-bottom:1px solid var(--line)}
.account-links{list-style:none;margin:.25rem 0 0;padding:0}
.account-links a,.account-signout button{display:flex;align-items:center;gap:.75rem;width:100%;min-height:44px;padding:0 .5rem;
  border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font:inherit;text-decoration:none;text-align:left;cursor:pointer}
.account-links a:hover,.account-signout button:hover{background:var(--blue-wash)}
.account-links svg,.account-signout svg{width:20px;height:20px;flex:none;color:var(--blue)}
.account-signout{margin-top:.25rem;padding-top:.25rem;border-top:1px solid var(--line)}
.account-signout button,.account-signout svg{color:var(--red-text)}

/* ------------------------------------------------------------------ Terms of Service and Privacy Policy (/terms, /privacy) */
.auth-foot+.auth-foot{margin-top:.25rem}
.auth-card p.small>a:only-child,.auth-foot a{display:inline-flex;align-items:center;min-height:44px}
.account-legal{margin:.25rem 0 0;padding:.5rem .5rem 0;border-top:1px solid var(--line);font-size:.85rem;color:var(--gray)}
.account-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.legal{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.legal-top{background:var(--navy);padding:.75rem 1rem}
.legal-brand{display:inline-block}
.legal-brand img{display:block;height:36px;width:auto}
.legal-main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:1.5rem 1rem 2rem;box-sizing:border-box}
.legal-main h1{font-size:1.6rem;margin:.25rem 0 .75rem}
.legal-main .eyebrow{margin:0;color:var(--blue-deep);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.doc-intro{font-size:1.05rem;color:var(--ink-2)}
.doc-meta{color:var(--gray);font-size:.9rem}
.doc-toc{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem 1.25rem;margin:1.25rem 0}
.doc-toc-title{font-size:1rem;margin:0 0 .5rem}
.doc-toc ol{margin:0;padding-left:1.25rem;columns:1}
.doc-toc li{margin:.15rem 0}
.doc-toc a{display:inline-block;padding:.2rem 0}
.doc h2{font-size:1.2rem;margin:2rem 0 .5rem;scroll-margin-top:1rem}
.doc h3{font-size:1.05rem;margin:1.25rem 0 .35rem}
.doc p,.doc li{line-height:1.6}
.doc ul,.doc ol{padding-left:1.25rem}
.doc a,.doc-toc a,.doc-also a,.legal-foot a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px}
.doc .callbox{background:var(--blue-wash);border-left:4px solid var(--blue);padding:.75rem 1rem;border-radius:var(--r-sm)}
.doc address{font-style:normal;margin:1rem 0}
.doc .tblwrap{overflow-x:auto;margin:1rem 0;-webkit-overflow-scrolling:touch}
.doc table{border-collapse:collapse;width:100%;min-width:320px;background:#fff}
.doc th,.doc td{border:1px solid var(--line);padding:.5rem .75rem;text-align:left;vertical-align:top}
.doc .num{text-align:right;white-space:nowrap}
.doc-also{margin-top:2rem;color:var(--ink-2)}
.legal-foot{padding:1rem;text-align:center;border-top:1px solid var(--line);background:#fff;font-size:.9rem}
@media (min-width:768px){.legal-main{padding:2rem 1.5rem 3rem}.doc-toc ol{columns:2;column-gap:2rem}}