/* Leoce HQ, base + brand styling. No build step. */
:root{
  --hq-charcoal:#2A2A2A;
  --hq-text:#55595F;
  --hq-stone:#C3A8A2;
  --hq-stone-deep:#C39992;
  --hq-blush:#FEF7FA;
  --hq-grey:#F4F4F4;
  --hq-white:#FFFFFF;
  --hq-line:rgba(42,42,42,0.10);
  --hq-serif:'Cormorant Garamond',Georgia,serif;
  --hq-sans:'DM Sans',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--hq-sans);color:var(--hq-charcoal);background:var(--hq-blush);-webkit-font-smoothing:antialiased;}

/* Buttons */
.hq-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--hq-sans);font-size:14px;font-weight:500;letter-spacing:.02em;
  padding:.7em 1.4em;border-radius:2px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.hq-btn--primary{background:var(--hq-charcoal);color:var(--hq-white);width:100%;}
.hq-btn--primary:hover{background:#000;}
.hq-btn--ghost{background:transparent;color:var(--hq-charcoal);border-color:var(--hq-line);}
.hq-btn--ghost:hover{border-color:var(--hq-stone);color:var(--hq-stone-deep);}
.hq-btn:disabled{opacity:.5;cursor:default;}

/* Login */
.hq-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,var(--hq-blush),var(--hq-grey));}
.hq-login__card{width:100%;max-width:380px;background:var(--hq-white);padding:48px 40px;
  border-radius:4px;box-shadow:0 24px 60px rgba(42,42,42,0.08);}
/* Same mark on the login card. The <h1> is kept for the heading it still is;
   the words live in the image's alt text. */
.hq-login__brand{margin:0 0 10px;line-height:0;text-align:center;}
.hq-login__logo{width:100%;max-width:240px;height:auto;display:inline-block;}
.hq-login__tagline{font-size:13px;color:var(--hq-text);text-align:center;margin:0 0 28px;letter-spacing:.02em;}
.hq-login__error{background:#fcebed;color:#8a1f2b;font-size:13px;padding:10px 14px;border-radius:3px;margin-bottom:18px;}
.hq-field{display:block;margin-bottom:16px;}
.hq-field__label{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--hq-text);margin-bottom:6px;}
.hq-field__input{width:100%;font-family:var(--hq-sans);font-size:15px;color:var(--hq-charcoal);
  padding:.7em .8em;border:1px solid var(--hq-line);border-radius:3px;background:var(--hq-white);}
.hq-field__input:focus{outline:none;border-color:var(--hq-stone);box-shadow:0 0 0 3px rgba(195,153,146,.15);}
.hq-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--hq-text);margin-bottom:22px;}

/* App chrome */
.hq-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:14px 28px;background:var(--hq-white);border-bottom:1px solid var(--hq-line);}
/* The brand is the Leoce HQ logo, not type. The mark carries its own colours
   (charcoal wordmark, blush HQ monogram behind it), so nothing is set here but
   its size. Sized by height so the bar keeps its rhythm; the width follows the
   artwork's own 630 x 321 proportions. */
.hq-top__brand{display:inline-flex;align-items:center;line-height:0;}
.hq-top__logo{height:52px;width:auto;display:block;}
.hq-top__nav{display:flex;align-items:center;flex-wrap:wrap;gap:16px;}
.hq-top__link{font-family:var(--hq-sans);font-size:13px;font-weight:500;color:var(--hq-text);
  text-decoration:none;letter-spacing:.02em;}
.hq-top__link:hover{color:var(--hq-stone-deep);}
.hq-top__user{font-size:13px;color:var(--hq-text);}
.hq-main{max-width:1440px;margin:0 auto;padding:36px 28px 64px;}
.hq-main__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.hq-h1{font-family:var(--hq-serif);font-weight:500;font-size:34px;margin:0;color:var(--hq-charcoal);}

/* Tiles */
.hq-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.hq-tile{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;padding:26px 24px;
  transition:box-shadow .2s ease,transform .2s ease;}
.hq-tile:hover{box-shadow:0 16px 40px rgba(42,42,42,0.07);transform:translateY(-2px);}
a.hq-tile{display:block;color:inherit;text-decoration:none;}
.hq-tile__title{font-family:var(--hq-sans);font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hq-text);margin:0 0 14px;}
.hq-tile__big{font-family:var(--hq-serif);font-size:44px;font-weight:500;line-height:1;margin:0 0 8px;color:var(--hq-charcoal);}
.hq-tile__sub{font-size:13px;color:var(--hq-text);margin:0;}
/* Period switcher on the Sales tile: day / week / month / year. Sits on the
   title row so the tile keeps its one big number underneath. */
.hq-tile__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.hq-tile__head .hq-tile__title{margin:0;}
.hq-period{display:inline-flex;border:1px solid var(--hq-line);border-radius:3px;overflow:hidden;}
.hq-period__btn{appearance:none;background:transparent;border:0;cursor:pointer;
  font-family:var(--hq-sans);font-size:10px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--hq-text);padding:5px 0;line-height:1;
  width:26px;text-align:center;
  transition:background .15s ease,color .15s ease;}
.hq-period__btn + .hq-period__btn{border-left:1px solid var(--hq-line);}
.hq-period__btn:hover{background:var(--hq-blush);}
.hq-period__btn.is-active{background:var(--hq-charcoal);color:var(--hq-white);}
.hq-note{margin-top:28px;font-size:13px;color:var(--hq-text);font-style:italic;}

/* Leads: tabs */
.hq-leads-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;}
.hq-leads-tab{display:inline-flex;align-items:center;gap:8px;font-family:var(--hq-sans);
  font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--hq-text);
  background:var(--hq-white);border:1px solid var(--hq-line);border-radius:20px;
  padding:.55em 1.1em;cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease;}
.hq-leads-tab:hover{border-color:var(--hq-stone);color:var(--hq-charcoal);background:var(--hq-grey);}
.hq-leads-tab--active{background:var(--hq-charcoal);border-color:var(--hq-charcoal);color:var(--hq-white);}
.hq-leads-tab--active:hover{background:#000;border-color:#000;color:var(--hq-white);}
.hq-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:10px;background:var(--hq-stone-deep);color:var(--hq-white);
  font-family:var(--hq-sans);font-size:11px;font-weight:600;line-height:20px;}
.hq-leads-tab--active .hq-badge{background:var(--hq-white);color:var(--hq-charcoal);}

/* Leads: two-pane layout */
.hq-leads-layout{display:grid;grid-template-columns:360px 1fr;gap:20px;align-items:start;}
.hq-leads-list{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;
  max-height:70vh;overflow-y:auto;}
.hq-lead-detail{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;
  padding:28px 26px;min-height:220px;}

/* Leads: list rows */
.hq-lead-row{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--hq-line);padding:14px 18px;
  cursor:pointer;font-family:var(--hq-sans);color:var(--hq-charcoal);transition:background-color .15s ease;}
.hq-lead-row:last-child{border-bottom:0;}
.hq-lead-row:hover{background:var(--hq-blush);}
.hq-lead-row--active{background:var(--hq-grey);}
.hq-lead-row__top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.hq-lead-row__name{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;}
.hq-lead-row__date{font-size:12px;color:var(--hq-text);white-space:nowrap;}
.hq-lead-row__email{font-size:12px;color:var(--hq-text);}
.hq-lead-row__snippet{font-size:12px;color:var(--hq-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hq-dot{width:7px;height:7px;border-radius:50%;background:var(--hq-stone-deep);flex:0 0 auto;}

/* Leads: detail panel */
.hq-lead-detail__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;}
.hq-lead-detail__name{font-family:var(--hq-serif);font-weight:500;font-size:26px;margin:0;color:var(--hq-charcoal);}
.hq-field-row{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--hq-line);}
.hq-field-row:last-child{border-bottom:0;}
.hq-field-row--block{flex-direction:column;gap:6px;}
.hq-field-row__label{flex:0 0 120px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--hq-text);}
.hq-field-row__value{font-size:14px;color:var(--hq-charcoal);word-break:break-word;margin:0;}
.hq-lead-detail__extra{margin-top:4px;}
.hq-product-link{color:var(--hq-stone-deep);text-decoration:underline;}
.hq-product-link:hover{color:var(--hq-charcoal);}

/* Leads: empty states */
.hq-leads-empty{padding:40px 24px;text-align:center;font-size:13px;color:var(--hq-text);font-style:italic;margin:0;}

/* Buttons: auto-width variant, for inline actions next to other buttons
   (the base .hq-btn--primary is full-width for the login submit). */
.hq-btn--auto{width:auto;}

/* Pills (cross-reference callouts, e.g. "Also requested an appointment") */
.hq-pill{display:inline-flex;align-items:center;margin-top:6px;font-family:var(--hq-sans);font-size:11px;
  font-weight:500;letter-spacing:.02em;color:var(--hq-stone-deep);background:var(--hq-blush);
  border:1px solid var(--hq-line);border-radius:20px;padding:.3em .9em;}

/* Lead detail: action group (Convert/View client sits beside Mark handled) */
.hq-lead-detail__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Avatars (round initials chip) */
.hq-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;background:var(--hq-stone);color:var(--hq-white);
  font-family:var(--hq-serif);font-weight:500;font-size:15px;letter-spacing:.02em;}
.hq-avatar--lg{width:64px;height:64px;font-size:26px;}

/* Status badges */
.hq-status{display:inline-flex;align-items:center;font-family:var(--hq-sans);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:.3em .7em;border-radius:20px;}
.hq-status--active{background:var(--hq-charcoal);color:var(--hq-white);}
.hq-status--inactive{background:var(--hq-grey);color:var(--hq-text);}

/* Clients: toolbar (search + status filter) */
.hq-toolbar{display:flex;gap:12px;margin-bottom:20px;}
.hq-toolbar__search{flex:1 1 auto;}
.hq-toolbar__select{flex:0 0 180px;}

/* Clients: list rows */
.hq-clients-list{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;}
.hq-client-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--hq-line);padding:14px 18px;
  text-decoration:none;color:var(--hq-charcoal);transition:background-color .15s ease;}
.hq-client-row:last-child{border-bottom:0;}
.hq-client-row:hover{background:var(--hq-blush);}
.hq-client-row__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.hq-client-row__top{display:flex;align-items:center;gap:10px;}
.hq-client-row__name{font-family:var(--hq-sans);font-size:14px;font-weight:500;}
.hq-client-row__email{font-size:12px;color:var(--hq-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hq-client-row__date{flex:0 0 auto;font-size:12px;color:var(--hq-text);white-space:nowrap;}

/* Client profile: back link + header */
.hq-back-link{display:inline-block;font-family:var(--hq-sans);font-size:13px;color:var(--hq-text);
  text-decoration:none;margin-bottom:20px;}
.hq-back-link:hover{color:var(--hq-stone-deep);}
.hq-profile-head{display:flex;align-items:center;gap:20px;margin-bottom:32px;}
.hq-profile-head__info{flex:1 1 auto;}
.hq-profile-head__meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--hq-text);margin:4px 0 10px;}
.hq-quick-links{display:flex;gap:16px;}
.hq-quick-link{font-family:var(--hq-sans);font-size:12px;font-weight:500;letter-spacing:.03em;
  color:var(--hq-stone-deep);text-decoration:none;border-bottom:1px solid transparent;}
.hq-quick-link:hover{color:var(--hq-charcoal);border-bottom-color:var(--hq-stone);}

/* Client profile: two-column layout (main + sidebar) */
.hq-profile{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;}
.hq-profile__main{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;padding:28px 26px;}
.hq-profile__sidebar{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;padding:24px 22px;}
.hq-profile__main .hq-tile__title{margin-top:32px;}
.hq-profile__main .hq-tile__title:first-child{margin-top:0;}
/* A dashboard section that follows the tile grid. The grid has no bottom margin
   and .hq-panel-head has no top one, so the heading sat right up against the
   tile above it. Matches the 32px rhythm the job card panels already use. */
.hq-dash-section{margin-top:36px;}
.hq-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.hq-panel-head .hq-tile__title{margin:0;}

/* Timeline (client activity stream) */
.hq-timeline{display:flex;flex-direction:column;}
.hq-timeline__item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--hq-line);}
.hq-timeline__item:last-child{border-bottom:0;}
.hq-timeline__dot{flex:0 0 auto;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--hq-stone-deep);}
.hq-timeline__content{flex:1 1 auto;min-width:0;}
.hq-timeline__top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.hq-timeline__type{font-family:var(--hq-sans);font-size:13px;font-weight:500;color:var(--hq-charcoal);}
.hq-timeline__date{font-size:12px;color:var(--hq-text);white-space:nowrap;}
.hq-timeline__body{font-size:13px;color:var(--hq-text);margin:4px 0 0;word-break:break-word;}

/* Stub sections (Commissions, Measurements, Journal, Files: later phases) */
.hq-stub{border:1px dashed var(--hq-line);border-radius:4px;padding:18px 20px;}
.hq-stub__note{font-size:13px;color:var(--hq-text);font-style:italic;margin:0;}

/* New Client slide-over */
.hq-slideover{position:fixed;inset:0;z-index:40;display:flex;justify-content:flex-end;}
.hq-slideover__backdrop{position:absolute;inset:0;background:rgba(42,42,42,0.35);}
.hq-slideover__panel{position:relative;width:100%;max-width:420px;height:100%;overflow-y:auto;
  background:var(--hq-white);padding:32px 28px;box-shadow:-24px 0 60px rgba(42,42,42,0.12);}
.hq-slideover__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.hq-slideover__close{background:transparent;border:0;font-size:24px;line-height:1;color:var(--hq-text);
  cursor:pointer;padding:0 4px;}
.hq-slideover__close:hover{color:var(--hq-charcoal);}

/* Stage + priority badges (commissions pipeline, job card header, rows) */
.hq-stage-badge{display:inline-flex;align-items:center;flex:0 0 auto;font-family:var(--hq-sans);font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:.4em .9em;border-radius:20px;
  background:var(--hq-charcoal);color:var(--hq-white);white-space:nowrap;}
.hq-stage-badge--lg{font-size:12px;padding:.5em 1.1em;}
.hq-priority{display:inline-flex;align-items:center;flex:0 0 auto;font-family:var(--hq-sans);font-size:10px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:.3em .7em;border-radius:20px;background:var(--hq-grey);color:var(--hq-text);}
.hq-priority--high{background:var(--hq-blush);color:var(--hq-stone-deep);}

/* Commissions: pipeline rows (also reused on the client profile and dashboard) */
.hq-commissions-list{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;}
.hq-commission-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--hq-line);padding:14px 18px;
  text-decoration:none;color:var(--hq-charcoal);transition:background-color .15s ease;}
.hq-commission-row:last-child{border-bottom:0;}
.hq-commission-row:hover{background:var(--hq-blush);}
.hq-commission-row__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.hq-commission-row__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hq-commission-row__name{font-family:var(--hq-sans);font-size:14px;font-weight:500;}
.hq-commission-row__meta{font-size:12px;color:var(--hq-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hq-commission-row__date{flex:0 0 auto;font-size:12px;color:var(--hq-text);white-space:nowrap;}

/* Job card: stage progress bar + stepper controls (commission.php reuses
   .hq-profile / .hq-profile__main / .hq-profile__sidebar / .hq-field-row /
   .hq-timeline for its layout and sidebar rows, so no new rules are needed
   for those). */
.hq-progress{margin-bottom:24px;}
.hq-progress-bar{display:flex;gap:4px;}
.hq-progress-segment{flex:1 1 0;height:6px;border-radius:3px;background:var(--hq-grey);}
.hq-progress-segment.is-complete{background:var(--hq-stone-deep);}
.hq-progress-segment.is-current{background:var(--hq-charcoal);}
.hq-progress-stages{display:flex;gap:4px;margin-top:8px;}
.hq-progress-stages span{flex:1 1 0;font-size:11px;color:var(--hq-text);text-align:center;letter-spacing:.02em;}
.hq-progress-stages span.is-current{color:var(--hq-charcoal);font-weight:600;}

.hq-stepper{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0 32px;padding-bottom:24px;border-bottom:1px solid var(--hq-line);}
.hq-stepper__jump{flex:0 0 180px;}
.hq-stepper__note{flex:1 1 200px;}
.hq-stage-panel__actions{display:flex;align-items:center;gap:14px;margin-top:12px;}
.hq-save-confirm{font-size:12px;color:var(--hq-stone-deep);font-weight:500;}

/* Conversation journal */
.hq-journal-form{margin-bottom:20px;padding-bottom:24px;border-bottom:1px solid var(--hq-line);}
.hq-journal-note{position:relative;padding:14px 16px;border:1px solid var(--hq-line);border-radius:4px;margin-bottom:12px;}
.hq-journal-note--pinned{border-color:var(--hq-stone);background:var(--hq-blush);}
.hq-journal-note__top{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.hq-journal-note__date{font-size:12px;color:var(--hq-text);}
.hq-journal-note__channel{font-size:11px;color:var(--hq-text);text-transform:uppercase;letter-spacing:.04em;}
.hq-journal-note__pin{color:var(--hq-stone-deep);font-size:13px;}
.hq-journal-note__delete{margin-left:auto;background:transparent;border:0;color:var(--hq-text);cursor:pointer;font-size:16px;line-height:1;padding:0 2px;}
.hq-journal-note__delete:hover{color:var(--hq-charcoal);}
.hq-journal-note__body{font-size:13px;color:var(--hq-charcoal);margin:0 0 6px;word-break:break-word;}
.hq-journal-note__row{font-size:12px;color:var(--hq-text);margin:0 0 4px;}

/* Gallery & attachments */
.hq-upload{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.hq-upload .hq-field{flex:1 1 220px;margin-bottom:0;}
.hq-upload__button{position:relative;overflow:hidden;}
.hq-upload__input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}
.hq-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:12px;}
.hq-gallery-item{position:relative;border:1px solid var(--hq-line);border-radius:4px;overflow:hidden;background:var(--hq-grey);}
.hq-gallery-item__img{display:block;width:100%;height:120px;object-fit:cover;}
.hq-gallery-item__meta{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px;background:var(--hq-white);}
.hq-gallery-item__caption{font-size:11px;color:var(--hq-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hq-gallery-item__delete{flex:0 0 auto;background:transparent;border:0;color:var(--hq-text);cursor:pointer;font-size:14px;line-height:1;}
.hq-gallery-item__delete:hover{color:var(--hq-charcoal);}
.hq-file-chip{display:flex;align-items:center;gap:8px;padding:12px 8px;text-decoration:none;color:var(--hq-charcoal);}
.hq-file-chip__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:3px;
  background:var(--hq-stone);color:var(--hq-white);font-size:10px;font-weight:600;}
.hq-file-chip__name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Making-detail panels (job card: design versions, materials, fittings,
   payments): a compact multi-field form row layout, one shared row shell,
   and one shared 4-tone badge component reused by every status enum. */
.hq-form-grid{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;}
.hq-form-grid .hq-field{flex:1 1 160px;margin-bottom:0;}
.hq-form-grid .hq-field--wide{flex:1 1 100%;}
.hq-form-grid .hq-field--narrow{flex:0 1 120px;}

.hq-mk-row{padding:14px 16px;border:1px solid var(--hq-line);border-radius:4px;margin-bottom:12px;}
.hq-mk-row__top{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.hq-mk-row__title{font-family:var(--hq-sans);font-size:14px;font-weight:500;color:var(--hq-charcoal);}
.hq-mk-row__date{font-size:12px;color:var(--hq-text);}
.hq-mk-row__line{font-size:12px;color:var(--hq-text);margin:0 0 4px;}
.hq-mk-row__line strong{color:var(--hq-charcoal);font-weight:500;}
.hq-mk-row__body{font-size:13px;color:var(--hq-charcoal);margin:4px 0;word-break:break-word;}
.hq-mk-row__delete{margin-left:auto;flex:0 0 auto;background:transparent;border:0;color:var(--hq-text);cursor:pointer;font-size:16px;line-height:1;padding:0 2px;}
.hq-mk-row__delete:hover{color:var(--hq-charcoal);}
.hq-mk-row__actions{display:flex;align-items:center;gap:10px;margin-top:10px;}

/* Tone badge: every making-detail status enum (availability, approval,
   payment, adjustment) reduces to one of 4 tones, brand tokens only.
   neutral = grey (not started), progress = blush/stone-deep (under way),
   positive = solid charcoal (done, matches .hq-status--active), negative =
   stone-deep outline (needs attention; no red, stays within the palette). */
.hq-tone-badge{display:inline-flex;align-items:center;flex:0 0 auto;font-family:var(--hq-sans);font-size:10px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:.3em .7em;border-radius:20px;white-space:nowrap;}
.hq-tone-badge--neutral{background:var(--hq-grey);color:var(--hq-text);}
.hq-tone-badge--progress{background:var(--hq-blush);color:var(--hq-stone-deep);}
.hq-tone-badge--positive{background:var(--hq-charcoal);color:var(--hq-white);}
.hq-tone-badge--negative{background:var(--hq-white);color:var(--hq-stone-deep);border:1px solid var(--hq-stone-deep);}

/* Adjustment checklist, nested under a fitting row */
.hq-adj-list{margin-top:12px;padding-top:12px;border-top:1px dashed var(--hq-line);}
.hq-adj-empty{font-size:12px;color:var(--hq-text);font-style:italic;margin:0 0 8px;}
.hq-adj-row{display:flex;align-items:center;gap:10px;padding:6px 0;}
.hq-adj-row__check{display:flex;flex:0 0 auto;}
.hq-adj-row__check input{width:16px;height:16px;accent-color:var(--hq-charcoal);cursor:pointer;}
.hq-adj-row__desc{flex:1 1 auto;font-size:13px;color:var(--hq-charcoal);}
.hq-adj-row--done .hq-adj-row__desc{color:var(--hq-text);text-decoration:line-through;}
.hq-adj-row__date{flex:0 0 auto;font-size:11px;color:var(--hq-text);white-space:nowrap;}
.hq-adj-add{display:flex;gap:8px;margin-top:8px;}
.hq-adj-add .hq-field__input{flex:1 1 auto;}

/* Payments: internal flag (reuses .hq-panel-head) + a per-currency total */
.hq-internal-flag{font-family:var(--hq-sans);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--hq-text);background:var(--hq-grey);padding:.35em .8em;border-radius:3px;}
.hq-payments-total{margin-top:4px;padding-top:12px;border-top:1px solid var(--hq-line);}
.hq-payments-total p{font-family:var(--hq-sans);font-size:13px;font-weight:500;color:var(--hq-charcoal);margin:0 0 4px;}

/* Client profile: measurement sets + the compact tailor's-chart add form */
.hq-measurement-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border:1px solid var(--hq-line);border-radius:4px;margin-bottom:10px;}
.hq-measurement-row__meta{display:flex;flex-direction:column;gap:2px;}
.hq-measurement-row__date{font-family:var(--hq-sans);font-size:14px;font-weight:500;color:var(--hq-charcoal);}
.hq-measurement-row__notes{font-size:12px;color:var(--hq-text);}
.hq-measurement-row__unit{flex:0 0 auto;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--hq-text);
  background:var(--hq-grey);padding:.3em .7em;border-radius:20px;}

.hq-measure-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-bottom:16px;}
.hq-measure-field{display:flex;flex-direction:column;gap:4px;}
.hq-measure-field label{font-size:11px;letter-spacing:.03em;color:var(--hq-text);}
.hq-measure-field input{font-family:var(--hq-sans);font-size:14px;color:var(--hq-charcoal);
  padding:.5em .6em;border:1px solid var(--hq-line);border-radius:3px;background:var(--hq-white);}
.hq-measure-field input:focus{outline:none;border-color:var(--hq-stone);}

/* Comparison table: the only tabular data in the app, so a real <table> */
.hq-table-scroll{width:100%;overflow-x:auto;}
.hq-comparison-table{width:100%;border-collapse:collapse;margin-top:8px;font-family:var(--hq-sans);font-size:13px;}
.hq-comparison-table th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--hq-text);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--hq-line);font-weight:500;white-space:nowrap;}
.hq-comparison-table td{padding:8px 10px;border-bottom:1px solid var(--hq-line);color:var(--hq-charcoal);white-space:nowrap;}
.hq-comparison-table tbody tr:last-child td{border-bottom:0;}
.hq-comparison-table td.hq-comparison-table__change{color:var(--hq-stone-deep);font-weight:500;}

/* Responsive */
@media (max-width:760px){
  .hq-tiles{grid-template-columns:1fr;}
  .hq-top{padding:12px 18px;}
  .hq-top__logo{height:40px;}
  .hq-main{padding:24px 18px 48px;}
  .hq-h1{font-size:28px;}
  .hq-leads-layout{grid-template-columns:1fr;}
  .hq-leads-list{max-height:none;}
  .hq-field-row{flex-direction:column;gap:4px;}
  .hq-field-row__label{flex:none;}
  .hq-toolbar{flex-direction:column;}
  .hq-toolbar__select{flex:none;}
  .hq-profile{grid-template-columns:1fr;}
  .hq-profile-head{align-items:flex-start;}
  .hq-slideover__panel{max-width:100%;}
  .hq-stepper{flex-direction:column;align-items:stretch;}
  .hq-stepper__jump,.hq-stepper__note{flex:none;width:100%;}
  .hq-upload{flex-direction:column;align-items:stretch;}
  .hq-upload .hq-field{flex:none;}
  .hq-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}
  .hq-form-grid{gap:10px;}
  .hq-form-grid .hq-field,.hq-form-grid .hq-field--narrow{flex:1 1 100%;}
  .hq-mk-row__top{flex-wrap:wrap;}
  .hq-adj-add{flex-direction:column;align-items:stretch;}
  .hq-measurement-row{flex-direction:column;align-items:flex-start;}
  .hq-measure-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));}
}
[x-cloak]{display:none !important;}

/* Job card redesign (Direction A): summary header, chips, tabs, overview tiles */

/* Summary header: avatar/name/countdown/stage row, then the existing
   .hq-progress bar reused unchanged, then a row of stat chips. Replaces the
   old .hq-profile-head + two-column .hq-profile layout for commission.php. */
.hq-jc-head{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;padding:28px 26px;margin-bottom:24px;}
.hq-jc-head__row{display:flex;align-items:center;gap:20px;}
.hq-jc-head__info{flex:1 1 auto;}
.hq-jc-head .hq-progress{margin-top:22px;margin-bottom:0;}

.hq-countdown{flex:0 0 auto;text-align:right;}
.hq-countdown__num{display:block;font-family:var(--hq-serif);font-size:28px;font-weight:600;line-height:1;color:var(--hq-charcoal);}
.hq-countdown__label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--hq-text);}

.hq-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--hq-line);}
.hq-chip{display:flex;flex-direction:column;gap:2px;background:var(--hq-blush);border:1px solid var(--hq-line);
  border-radius:4px;padding:10px 16px;min-width:130px;}
.hq-chip__k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--hq-text);}
.hq-chip__v{font-size:13.5px;font-weight:500;color:var(--hq-charcoal);}

/* Stage changer bar: lives above the tab pills (pulled out of the Overview
   tab) so it stays visible on every tab. A calm card matching the summary
   header; the stepper's own divider and margins are neutralised inside it. */
.hq-jc-stagebar{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;padding:20px 26px;margin-bottom:20px;}
.hq-jc-stagebar .hq-tile__title{margin:0 0 12px;}
.hq-jc-stagebar .hq-stepper{margin:0;padding:0;border-bottom:0;}

/* Tab panels: one working area visible at a time (see .hq-leads-tabs /
   .hq-leads-tab, reused as-is, for the tab pills themselves). Section
   headers (.hq-tile__title or .hq-panel-head) that are direct children of a
   panel get breathing room between stacked sections, mirroring the old
   .hq-profile__main spacing rule; nested tile headings inside .hq-tiles are
   untouched because they are not direct children. */
.hq-jc-panel > .hq-tile__title{margin-top:32px;}
.hq-jc-panel > .hq-panel-head{margin-top:32px;}
.hq-jc-panel > .hq-tile__title:first-child,
.hq-jc-panel > .hq-panel-head:first-child{margin-top:0;}

/* Overview bento tiles: reuse .hq-tiles / .hq-tile, just add the pointer +
   a slightly tighter title so a nested h3.hq-tile__title reads as a label. */
.hq-tile--clickable{cursor:pointer;}
.hq-tile .hq-tile__title{margin-bottom:8px;}

/* Payments tab head: title + (internal flag, add-payment button) grouped on
   the right of the existing .hq-panel-head row. */
.hq-panel-head__actions{display:flex;align-items:center;gap:10px;}

@media (max-width:760px){
  .hq-jc-head{padding:20px 18px;}
  .hq-jc-head__row{flex-wrap:wrap;}
  .hq-jc-head__info{flex:1 1 160px;}
  .hq-countdown{text-align:left;}
  .hq-chips{gap:8px;}
  .hq-chip{flex:1 1 calc(50% - 8px);min-width:0;}
  .hq-panel-head__actions{flex-wrap:wrap;}
}

/* ------------------------------------------------------------------
   Shop: orders list and order page (added with the Shop section).
   Reuses the existing tile, chip, timeline and field-row components;
   what follows is only the parts those did not already cover.
   ------------------------------------------------------------------ */

/* Current page in the shared top bar */
.hq-top__link--current{color:var(--hq-charcoal);border-bottom:1px solid var(--hq-stone-deep);padding-bottom:2px;}

/* Data table */
.hq-table-wrap{width:100%;overflow-x:auto;background:var(--hq-white);
  border:1px solid var(--hq-line);border-radius:4px;}
.hq-table{width:100%;border-collapse:collapse;font-size:13px;}
.hq-table th{font-family:var(--hq-sans);font-size:11px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--hq-text);text-align:left;padding:12px 16px;
  border-bottom:1px solid var(--hq-line);white-space:nowrap;}
.hq-table td{padding:12px 16px;border-bottom:1px solid var(--hq-line);vertical-align:middle;color:var(--hq-charcoal);}
.hq-table tr:last-child td{border-bottom:0;}
.hq-table__row{cursor:pointer;transition:background-color .15s ease;}
.hq-table__row:hover{background:var(--hq-blush);}
.hq-table__num{text-align:right;white-space:nowrap;}
.hq-table__sub{display:block;font-size:11px;color:var(--hq-text);margin-top:2px;}
.hq-table__thumb{width:56px;}
.hq-table__thumb img{width:44px;height:60px;object-fit:cover;border-radius:2px;display:block;}

/* Paging */
.hq-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px;}
.hq-pager__at{font-size:13px;color:var(--hq-text);}

/* Order totals block */
.hq-totals{margin-top:16px;margin-left:auto;max-width:340px;}
.hq-totals__row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:8px 0;border-bottom:1px solid var(--hq-line);font-size:13px;color:var(--hq-text);}
.hq-totals__row span:last-child{color:var(--hq-charcoal);white-space:nowrap;}
.hq-totals__row--grand{border-bottom:0;padding-top:12px;font-family:var(--hq-serif);font-size:20px;color:var(--hq-charcoal);}
.hq-totals__row--grand span:last-child{font-weight:500;}

/* A form that opens in place under a button (tracking, add note) */
.hq-inline-form{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;
  padding:20px 22px;margin-top:14px;}

/* Bigger status badge for the order header */
.hq-tone-badge--lg{font-size:12px;padding:7px 14px;letter-spacing:.06em;}

@media (max-width:760px){
  .hq-table th,.hq-table td{padding:10px 12px;}
  .hq-totals{max-width:100%;}
}

/* ------------------------------------------------------------------
   Shop: products grid and product page.
   ------------------------------------------------------------------ */

.hq-toolbar--wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.hq-toolbar__select{width:auto;min-width:190px;}

/* Product grid: George knows a piece by its photograph, not its name. */
.hq-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;}
.hq-product-card{display:flex;flex-direction:column;background:var(--hq-white);border:1px solid var(--hq-line);
  border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .2s ease,transform .2s ease;}
.hq-product-card:hover{box-shadow:0 16px 40px rgba(42,42,42,0.07);transform:translateY(-2px);}
.hq-product-card__shot{position:relative;display:block;aspect-ratio:3 / 4;background:var(--hq-grey);}
.hq-product-card__shot img{width:100%;height:100%;object-fit:cover;display:block;}
.hq-product-card__noshot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--hq-text);}
.hq-product-card__flag{position:absolute;left:0;bottom:0;background:var(--hq-charcoal);color:var(--hq-white);
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;}
.hq-product-card__body{display:block;padding:14px 14px 16px;}
.hq-product-card__name{display:block;font-family:var(--hq-serif);font-size:18px;line-height:1.2;
  color:var(--hq-charcoal);margin-bottom:6px;}
.hq-product-card__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;color:var(--hq-text);margin-bottom:6px;}
.hq-product-card__cats{display:block;font-size:11px;color:var(--hq-text);}

/* Product page */
.hq-product-head__shot{flex:0 0 auto;width:72px;height:96px;border-radius:2px;overflow:hidden;background:var(--hq-grey);}
.hq-product-head__shot img{width:100%;height:100%;object-fit:cover;display:block;}
.hq-checklist{display:flex;flex-direction:column;gap:2px;max-height:420px;overflow-y:auto;
  border:1px solid var(--hq-line);border-radius:4px;background:var(--hq-white);padding:12px 14px;}
.hq-checklist .hq-check{margin-bottom:0;padding:3px 0;}
.hq-check--child{padding-left:22px;}
.hq-attr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.hq-attr-group{min-width:0;}
.hq-input--small{padding:.45em .6em;font-size:13px;min-width:110px;}
.hq-photo-strip{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
.hq-photo{display:block;width:110px;height:146px;border:1px solid var(--hq-line);border-radius:2px;overflow:hidden;background:var(--hq-grey);}
.hq-photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* A line that needs reading before saving */
.hq-callout{background:var(--hq-blush);border-left:3px solid var(--hq-stone-deep);
  padding:12px 16px;margin:0 0 18px;font-size:13px;color:var(--hq-charcoal);border-radius:0 3px 3px 0;}
.hq-callout--stop{display:flex;flex-direction:column;gap:6px;border-left-color:var(--hq-charcoal);}

/* Save bar under the tabs */
.hq-savebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;
  padding-top:20px;border-top:1px solid var(--hq-line);}

@media (max-width:760px){
  .hq-product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  .hq-toolbar__select{width:100%;}
}

/* A tile that links but has its own controls inside it (the Sales tile's
   D/W/M/Y switcher). A button cannot live inside an anchor, so the link is
   stretched over the whole card and the switcher is lifted above it. */
.hq-tile--linked{position:relative;}
.hq-tile__stretch{color:inherit;text-decoration:none;}
.hq-tile__stretch::after{content:"";position:absolute;inset:0;}
.hq-tile--linked .hq-period{position:relative;z-index:1;}
.hq-tile--linked:hover{box-shadow:0 16px 40px rgba(42,42,42,0.07);transform:translateY(-2px);}

/* ---------------------------------------------------------------------------
   The Bin (0.7.0). Deleting a lead, client or commission moves it here for 30
   days. Rows are deliberately calm, not alarming: this is a holding place with
   a Restore button, not a warning. Only the last few days go red.
   -------------------------------------------------------------------------- */

/* A quieter ghost button for the destructive action on a screen, so "Move to
   bin" never looks like the main thing to do. Turns red only on hover. */
.hq-btn--quiet{color:var(--hq-text);border-color:var(--hq-line);}
.hq-btn--quiet:hover{color:#9B2C2C;border-color:#9B2C2C;}

.hq-bin__intro{max-width:70ch;margin:0 0 24px;font-size:13px;line-height:1.6;color:var(--hq-text);}

.hq-bin-list{display:flex;flex-direction:column;gap:10px;}
.hq-bin-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;padding:16px 18px;}
.hq-bin-row__body{min-width:0;flex:1 1 auto;}
.hq-bin-row__top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.hq-bin-row__title{font-family:var(--hq-serif);font-weight:500;font-size:20px;margin:0;color:var(--hq-charcoal);}
.hq-bin-row__line{margin:4px 0 0;font-size:13px;color:var(--hq-charcoal);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hq-bin-row__line--muted{color:var(--hq-text);}
.hq-bin-row__meta{margin:8px 0 0;font-size:11px;letter-spacing:.03em;color:var(--hq-text);}
.hq-bin-row__held{margin:8px 0 0;font-size:11px;font-style:italic;color:var(--hq-stone-deep);}

.hq-bin-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto;}
.hq-bin-row__days{font-family:var(--hq-sans);font-size:11px;font-weight:500;letter-spacing:.05em;
  color:var(--hq-text);white-space:nowrap;}
.hq-bin-row__days--soon{color:#9B2C2C;}

/* A plain pill for the type label, no blush fill: it names the row, it is not
   a status worth colouring. */
.hq-pill--plain{margin-top:0;background:var(--hq-grey);color:var(--hq-text);}

/* The delete block at the foot of the job card's Details tab. */
.hq-danger{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:28px 0;padding:18px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-danger__note{max-width:60ch;margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--hq-text);}

@media (max-width:640px){
  .hq-bin-row{flex-direction:column;align-items:stretch;gap:12px;}
  .hq-bin-row__side{flex-direction:row;align-items:center;justify-content:space-between;}
}

/* Bin straight from a list row, so a junk record does not need the profile
   opened and scrolled. Rendered as a <span role="button"> because it sits
   inside the row's own <a>/<button>, where a nested button is invalid markup
   and the Hello theme would force its own border onto it. Quiet until hovered:
   it must never compete with the row itself. */
.hq-row-bin{
  flex:0 0 auto;align-self:center;margin-left:14px;
  font-family:var(--hq-sans);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hq-text);opacity:.45;
  padding:6px 10px;border:1px solid var(--hq-line);border-radius:2px;
  cursor:pointer;white-space:nowrap;
  transition:opacity .15s ease,color .15s ease,border-color .15s ease;
}
.hq-client-row:hover .hq-row-bin,
.hq-commission-row:hover .hq-row-bin,
.hq-lead-row:hover .hq-row-bin{opacity:1;}
.hq-row-bin:hover{color:#9B2C2C;border-color:#9B2C2C;opacity:1;}
.hq-row-bin:focus-visible{outline:2px solid var(--hq-stone-deep);outline-offset:2px;opacity:1;}
.hq-row-bin.is-busy{opacity:.4;cursor:default;}

/* The lead rows stack their content, so the control is pinned to a corner
   rather than sitting in the flow after the message snippet. Bottom right, not
   top right: the top right already holds the date, and a destructive action
   does not belong where the eye lands first anyway. The snippet reserves room
   so a long message never runs underneath it. */
.hq-lead-row{position:relative;}
.hq-lead-row .hq-row-bin{position:absolute;bottom:10px;right:10px;top:auto;margin-left:0;}
.hq-lead-row__snippet{padding-right:66px;}

/* Touch has no hover, so the control is always visible there. */
@media (hover:none){
  .hq-row-bin{opacity:1;}
}

/* An enquiry whose notification email never sent. The forms tell the visitor
   "sent" as soon as the enquiry files, which is right, because their enquiry
   genuinely is safe. What was missing is anyone on THIS side finding out the
   email failed: the site sent nothing at all for weeks and every screen looked
   fine. This is that missing signal. */
.hq-mail-flag{display:inline-flex;align-items:center;font-family:var(--hq-sans);
  font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;background:#FBE9E7;color:#9B2C2C;white-space:nowrap;}

.hq-alert{margin:0 0 18px;padding:14px 16px;border-radius:3px;
  background:var(--hq-grey);border-left:3px solid var(--hq-stone);}
.hq-alert--bad{background:#FCF0EF;border-left-color:#9B2C2C;}
.hq-alert__title{margin:0 0 5px;font-family:var(--hq-sans);font-size:13px;font-weight:600;color:var(--hq-charcoal);}
.hq-alert--bad .hq-alert__title{color:#9B2C2C;}
.hq-alert__body{margin:0;font-size:12px;line-height:1.6;color:var(--hq-text);}
.hq-alert__body + .hq-alert__body{margin-top:5px;}

/* Profile photos, and the greeting that leads to My Profile.
   The greeting was plain text; it is now the way in to a person's own profile
   and carries their photo, which saves an eighth section link in a bar that
   already wraps on a phone. --photo is the same circle as the initials chip,
   with the picture cropped to fill it rather than squashed into it. */
.hq-avatar--sm{width:30px;height:30px;font-size:12px;}
.hq-avatar--photo{object-fit:cover;background:var(--hq-grey);}
.hq-top__me{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  padding:3px 9px 3px 3px;border-radius:20px;transition:background-color .15s ease;}
.hq-top__me:hover{background:var(--hq-blush);}
.hq-top__me--current{background:var(--hq-blush);}
.hq-top__me:hover .hq-top__user{color:var(--hq-stone-deep);}

/* Admins: one row per person. Same shape as a client row, but it is not a link
   (nothing to open), so the controls live on the right instead. */
.hq-person-row{display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-bottom:1px solid var(--hq-line);}
.hq-person-row:last-child{border-bottom:0;}
.hq-person-row__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
/* This stylesheet has no global margin reset, so every other row in the HQ is
   built from spans. This one uses a real heading and real paragraphs, which
   arrive with the browser's own margins and would push the row to twice the
   height of a client row. Cleared here rather than site-wide, so nothing else
   moves. */
.hq-person-row__body > *{margin:0;}
.hq-person-row__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hq-person-row__meta{font-size:12px;color:var(--hq-text);}
.hq-person-row__side{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  flex-wrap:nowrap;justify-content:flex-end;}
/* .hq-field__input is 100% wide by design, which inside this row would swallow
   the whole right-hand side and push Remove onto its own line. */
.hq-person-row__side .hq-field__input{width:auto;}
.hq-person-row__locked{font-size:11px;color:var(--hq-text);font-style:italic;white-space:nowrap;}

/* The one-time invitation link, shown only when the email failed to send. It is
   long, so it gets room and wraps rather than being cut off mid-address. */
.hq-alert__body .hq-field__input{margin-top:8px;font-size:12px;}

@media (max-width:760px){
  .hq-person-row{flex-wrap:wrap;}
  .hq-person-row__side{width:100%;justify-content:flex-start;flex-wrap:wrap;}
}
.hq-people-add{margin-bottom:28px;}
.hq-people-add .hq-tile__title{margin-top:0;}
.hq-profile-head__name{margin:0;}
.hq-danger__note--lead{margin-bottom:16px;}