/* Zilla HQ, base + brand styling. No build step. */
:root{
  /* Zilla Schoeman brand tokens */
  --zjs-ink:#314245;
  --zjs-teal:#3D848F;
  --zjs-olive:#808F54;
  --zjs-coral:#FF8973;
  --zjs-amber:#EFA438;
  --zjs-mint:#D7EFE1;
  --zjs-cream:#FBEDD4;
  --zjs-bg:#FAF7F1;
  --zjs-card:#FFFFFF;
  --zjs-muted:#909A98;
  --zjs-ink-soft:#5C6B6C;

  /* The older names the rest of this file uses, mapped onto the brand */
  --hq-charcoal:var(--zjs-ink);
  --hq-text:var(--zjs-ink-soft);
  --hq-stone:var(--zjs-teal);
  --hq-stone-deep:var(--zjs-teal);
  --hq-blush:var(--zjs-bg);
  --hq-grey:var(--zjs-cream);
  --hq-white:var(--zjs-card);
  --hq-line:rgba(49,66,69,0.12);
  --hq-serif:'Jost',system-ui,-apple-system,sans-serif;
  --hq-sans:'Jost',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(--zjs-bg),var(--zjs-cream));}
.hq-login__card{width:100%;max-width:380px;background:var(--hq-white);padding:48px 40px;
  border-radius:4px;box-shadow:0 24px 60px rgba(49,66,69,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:300px;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(61,132,143,.15);}
.hq-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--hq-text);margin-bottom:22px;}
/* Forgotten password, and the eye that shows a password */
.hq-login__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.hq-login__row .hq-check{margin-bottom:0;}
.hq-login__forgot,.hq-login__alt a{font-size:13px;color:var(--hq-stone-deep);text-decoration:none;border-bottom:1px solid transparent;}
.hq-login__forgot:hover,.hq-login__alt a:hover{color:var(--hq-charcoal);border-bottom-color:var(--hq-stone);}
.hq-login__alt{margin:22px 0 0;text-align:center;}
.hq-login__intro{font-size:13px;line-height:1.55;color:var(--hq-text);margin:0 0 20px;}
.hq-login__intro strong{color:var(--hq-charcoal);font-weight:500;}
.hq-login__notice{background:var(--hq-blush);color:var(--hq-charcoal);font-size:13px;line-height:1.55;padding:10px 14px;border-radius:3px;margin-bottom:18px;}
.hq-field__wrap{position:relative;display:block;}
.hq-field__wrap .hq-field__input{padding-right:44px;}
.hq-field__eye{position:absolute;top:0;right:0;bottom:0;width:42px;display:flex;align-items:center;justify-content:center;
  appearance:none;background:transparent;border:0;padding:0;cursor:pointer;color:var(--hq-text);}
.hq-field__eye:hover,.hq-field__eye:focus-visible{color:var(--hq-stone-deep);}
.hq-field__eye:focus-visible{outline:2px solid var(--hq-stone);outline-offset:-4px;border-radius:3px;}
.hq-eye{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.hq-eye--shut,.hq-field__eye[aria-pressed="true"] .hq-eye--open{display:none;}
.hq-field__eye[aria-pressed="true"] .hq-eye--shut{display:block;}

/* 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 Zilla 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:34px;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(49,66,69,0.07);transform:translateY(-2px);}
a.hq-tile{display:block;color:inherit;text-decoration:none;}
a.hq-tile{position:relative;}
.hq-tile__willem-only{position:absolute;top:10px;right:14px;font:600 22px/1 var(--hq-sans);color:var(--zjs-coral);}
.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;}
/* Dashboard tiles carry the section's icon above the title. The icons are
   fine line drawings, so they need real size to read. */
.hq-tile__title--icon{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.hq-tile__icon{width:40px;height:40px;flex:none;object-fit:contain;object-position:left center;}
.hq-tile__head--icon{align-items:flex-end;}
/* Planned sections: shown, not clickable. */
.hq-tile--soon{cursor:default;}
.hq-tile--soon:hover{box-shadow:none;transform:none;}
.hq-tile--soon .hq-tile__icon,.hq-tile--soon .hq-tile__title,.hq-tile--soon .hq-tile__sub{opacity:.6;}
.hq-tile__soon{margin-top:14px;}
/* 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;}
/* In a column-direction row, flex-basis is the HEIGHT, so the label's 120px
   basis opened a 120px hole under every stacked label. Reset it here. */
.hq-field-row--block .hq-field-row__label{flex:0 0 auto;}
.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 1fr;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(49,66,69,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(49,66,69,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:28px;}
  .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: toolbar, callouts and the save bar. (Paintings and Orders: see the Shop core block at the end.)
   ------------------------------------------------------------------ */

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

.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-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(49,66,69,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;}

/* ---------------------------------------------------------------------------
   The rich text boxes on a product.

   contenteditable rather than WordPress's own editor, because this screen never
   runs wp_head()/wp_footer() and TinyMCE needs both. The area is styled to look
   like every other field on the screen, so it does not read as a special case.
   --------------------------------------------------------------------------- */
.hq-rte__bar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:var(--hq-grey);
  border:1px solid var(--hq-line);border-bottom:0;border-radius:3px 3px 0 0;}
.hq-rte__btn{font-family:var(--hq-sans);font-size:12px;line-height:1;color:var(--hq-text);
  background:var(--hq-white);border:1px solid var(--hq-line);border-radius:2px;
  padding:6px 9px;cursor:pointer;min-width:30px;
  transition:border-color .15s ease,color .15s ease;}
.hq-rte__btn:hover{border-color:var(--hq-stone);color:var(--hq-charcoal);}
.hq-rte__btn--bold{font-weight:700;}
.hq-rte__btn--italic{font-style:italic;}

.hq-rte__area{width:100%;min-height:220px;max-height:520px;overflow-y:auto;
  font-family:var(--hq-sans);font-size:15px;line-height:1.6;color:var(--hq-charcoal);
  padding:.8em;border:1px solid var(--hq-line);border-radius:0 0 3px 3px;
  background:var(--hq-white);}
.hq-rte__area--short{min-height:110px;}
.hq-rte__area:focus{outline:none;border-color:var(--hq-stone);
  box-shadow:0 0 0 3px rgba(61,132,143,.15);}

/* The description is shop copy, so headings inside the box are shown in the
   brand serif rather than the browser's default bold sans. */
.hq-rte__area h2,.hq-rte__area h3{font-family:var(--hq-serif);font-weight:500;
  color:var(--hq-charcoal);margin:.6em 0 .3em;line-height:1.2;}
.hq-rte__area h2{font-size:22px;}
.hq-rte__area h3{font-size:18px;}
.hq-rte__area p{margin:0 0 .7em;}
.hq-rte__area ul,.hq-rte__area ol{margin:0 0 .7em;padding-left:1.4em;}
.hq-rte__area li{margin-bottom:.2em;}
.hq-rte__area a{color:var(--hq-stone-deep);}
.hq-rte__area:empty::before{content:'Nothing written yet.';color:var(--hq-text);opacity:.6;}

/* ---------------------------------------------------------------------------
   The job card head, rebuilt to Willem's drawing (28 August 2026).

   Three changes: the four stat chips came off the top, changing the stage moved
   onto the progress bar itself, and the stage notes came up out of the Overview
   tab to sit under the bar.

   The chip and stepper styles above are NOT dead. templates/order.php still
   uses .hq-chips, .hq-chip and .hq-stepper, so they stay.
   --------------------------------------------------------------------------- */

/* Segments and labels are buttons now. Browsers give a button its own font,
   border and background, all of which would undo the bar, so each is reset. */
.hq-progress--live .hq-progress-segment,
.hq-progress--live .hq-progress-stages button{
  appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;
  font-family:inherit;cursor:pointer;}
.hq-progress--live .hq-progress-segment{transition:background-color .15s ease;}
.hq-progress--live .hq-progress-segment:hover:not(:disabled){background:var(--hq-stone);}
.hq-progress--live .hq-progress-stages button{
  flex:1 1 0;font-size:11px;color:var(--hq-text);text-align:center;
  letter-spacing:.02em;background:none;line-height:1.35;padding:4px 2px;
  transition:color .15s ease;}
.hq-progress--live .hq-progress-stages button:hover:not(:disabled){color:var(--hq-charcoal);}
.hq-progress--live .hq-progress-stages button.is-current{color:var(--hq-charcoal);font-weight:600;}
.hq-progress--live .hq-progress-segment:disabled,
.hq-progress--live .hq-progress-stages button:disabled{cursor:default;}
.hq-progress--live .hq-progress-segment:focus-visible,
.hq-progress--live .hq-progress-stages button:focus-visible{
  outline:2px solid var(--hq-stone);outline-offset:2px;}

/* The confirm strip. Nothing moves until Move is pressed, so a mis-click on the
   bar costs nothing, and the optional note for the change lives here. */
.hq-stagemove{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--hq-line);}
.hq-stagemove__q{margin:0;flex:0 0 auto;font-size:14px;color:var(--hq-text);}
.hq-stagemove__q strong{color:var(--hq-charcoal);font-weight:500;}
.hq-stagemove__note{flex:1 1 220px;width:auto;}
.hq-stagemove__actions{display:flex;gap:8px;flex:0 0 auto;}

/* The stage notes, now the first thing under the head rather than the first
   thing inside a tab. */
.hq-jc-notes{background:var(--hq-white);border:1px solid var(--hq-line);
  border-radius:4px;padding:22px 26px;margin-bottom:24px;}
.hq-jc-notes .hq-tile__title{margin:0 0 10px;}
.hq-jc-notes .hq-field__input{margin-bottom:0;}

@media (max-width:760px){
  .hq-stagemove{flex-direction:column;align-items:stretch;}
  .hq-stagemove__note{flex:none;width:100%;}
  .hq-jc-notes{padding:18px;}
  /* Seven stage names will not fit across a phone, so the bar keeps its
     segments and the names scroll under it rather than shrinking to nothing. */
  .hq-progress--live .hq-progress-stages{overflow-x:auto;}
  .hq-progress--live .hq-progress-stages button{flex:0 0 84px;}
}

/* ---------------------------------------------------------------------------
   Book Courier, on the order screen.
   --------------------------------------------------------------------------- */
/* Book a courier stands apart from the rest of the order (Willem, 5 October 2026). */
.hq-courier-panel{margin:28px 0;padding:24px 26px;background:var(--hq-blush);border:1px solid var(--hq-stone);border-left:4px solid var(--hq-stone-deep);border-radius:4px;}
.hq-courier-panel__eyebrow{margin:0 0 4px;font-family:var(--hq-sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--hq-stone-deep);}
.hq-courier-panel__title{margin:0 0 14px;font-family:var(--hq-serif);font-weight:500;font-size:28px;line-height:1.15;color:var(--hq-charcoal);}
.hq-courier-panel .hq-field__input{background:var(--hq-white);}
@media (max-width:600px){.hq-courier-panel{padding:18px 16px;}.hq-courier-panel__title{font-size:24px;}}
.hq-courier{margin-bottom:20px;}
.hq-courier__rates{margin:14px 0;border:1px solid var(--hq-line);border-radius:3px;
  background:var(--hq-white);padding:12px 14px;}
.hq-courier__rate{display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--hq-line);font-size:13.5px;}
.hq-courier__rate:last-of-type{border-bottom:0;}
.hq-courier__rate-name{color:var(--hq-charcoal);}
.hq-courier__rate-price{font-variant-numeric:tabular-nums;color:var(--hq-charcoal);}
.hq-courier__rates .hq-field-row__value{margin-top:10px;font-size:12px;}
.hq-courier__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}


/* Picking a courier service. Each row is the whole label so the click target is
   the row, not the little circle. */
.hq-courier__pick{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  border:1px solid var(--hq-line);border-radius:3px;background:var(--hq-white);
  margin-bottom:8px;cursor:pointer;transition:border-color .15s ease;}
.hq-courier__pick:hover{border-color:var(--hq-stone);}
.hq-courier__pick.is-picked{border-color:var(--hq-charcoal);}
.hq-courier__pick input{margin-top:3px;flex:0 0 auto;}
.hq-courier__pick-body{display:block;flex:1 1 auto;min-width:0;}
.hq-courier__pick-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.hq-courier__pick-note{display:block;font-size:12px;color:var(--hq-text);margin-top:3px;line-height:1.45;}

.hq-courier__box{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0 6px;}
.hq-courier__box .hq-field{margin-bottom:0;}

.hq-courier__confirm{border:1px solid var(--hq-line);border-radius:3px;
  background:var(--hq-white);padding:14px 16px;margin-bottom:12px;}
.hq-courier__summary{display:grid;grid-template-columns:max-content 1fr;column-gap:24px;row-gap:8px;margin:0;font-size:15px;line-height:1.45;}
.hq-courier__summary dt{font-weight:600;color:var(--hq-charcoal);}
.hq-courier__summary dd{margin:0;color:var(--hq-text);font-variant-numeric:tabular-nums;min-width:0;}
.hq-courier__confirm-head{margin:0 0 8px;font-family:var(--hq-serif);font-size:17px;
  color:var(--hq-charcoal);}




/* ---------------------------------------------------------------------------
   Visitors screen.
   Bars are the HQ's stone on its line colour; "sold" is charcoal so the one
   number that is money reads differently from the ones that are attention.
   --------------------------------------------------------------------------- */
.hq-vis-head{align-items:flex-start;flex-wrap:wrap;gap:14px;}
.hq-vis-sub{margin:6px 0 0;font-size:13px;color:var(--hq-text);}
.hq-vis-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.hq-period--wide .hq-period__btn{width:auto;padding:7px 12px;font-size:10.5px;}
.hq-tiles--five{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
.hq-tiles--five .hq-tile{padding:20px 20px;}
.hq-tiles--five .hq-tile__big{font-size:36px;}
.hq-vis-nothing{margin:0 0 20px;}

.hq-vis-panel{margin-top:28px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;padding:22px 24px;}
.hq-vis-panel__head{margin-bottom:16px;}
.hq-vis-panel__head .hq-tile__title{margin-bottom:6px;}
.hq-vis-panel__sub{margin:0;font-size:12.5px;line-height:1.5;color:var(--hq-text);max-width:70ch;}
.hq-vis-panel__sub strong{color:var(--hq-charcoal);font-weight:500;}
.hq-vis-empty{margin:0;font-size:13px;color:var(--hq-text);font-style:italic;}
.hq-vis-colhead{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--hq-text);margin:0 0 10px;}

.hq-vis-cols{display:grid;gap:22px;align-items:start;}
.hq-vis-cols--two{grid-template-columns:1fr 1fr;}
.hq-vis-cols--three{grid-template-columns:1fr 1fr 1fr;}
.hq-vis-cols--four{grid-template-columns:repeat(4,minmax(0,1fr));}
.hq-vis-cols > .hq-vis-panel{margin-top:0;}
.hq-vis-stack{display:flex;flex-direction:column;gap:22px;min-width:0;}
.hq-vis-stack > .hq-vis-panel{margin-top:0;}
.hq-vis-cols--two{margin-top:28px;}

/* Bars */
.hq-vis-bars{display:flex;flex-direction:column;}
.hq-vis-bar{display:grid;grid-template-columns:200px 1fr 84px 92px 72px;gap:12px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--hq-line);font-size:13px;}
.hq-vis-bar:last-child{border-bottom:0;}
.hq-vis-bar--slim{grid-template-columns:130px 1fr 40px;padding:5px 0;}
.hq-vis-bar__label{color:var(--hq-charcoal);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
a.hq-vis-bar__label:hover{color:var(--hq-stone-deep);}
.hq-vis-bar__track{height:6px;background:var(--hq-grey);border-radius:3px;overflow:hidden;}
.hq-vis-bar__fill{height:100%;background:var(--hq-stone-deep);border-radius:3px;min-width:2px;transition:width .3s ease;}
.hq-vis-bar__fill--sold{background:var(--hq-charcoal);}
.hq-vis-bar__n{font-size:12px;color:var(--hq-text);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.hq-vis-bar__n--sold{color:var(--hq-charcoal);font-weight:500;}
.hq-vis-bar__n.is-zero,.is-zero{color:rgba(92,107,108,.45);font-weight:400;}

/* Clicks list */
.hq-vis-list{display:flex;flex-direction:column;}
.hq-vis-list__row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--hq-line);font-size:13px;}
.hq-vis-list__row:last-child{border-bottom:0;}
.hq-vis-list__label{color:var(--hq-charcoal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hq-vis-list__n{color:var(--hq-text);font-variant-numeric:tabular-nums;}

/* Show more / Show top 10, under every Visitors list */
.hq-vis-more{appearance:none;background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  margin-top:12px;padding:4px 0;font-family:var(--hq-sans);font-size:12px;font-weight:500;letter-spacing:.03em;
  color:var(--hq-stone-deep);}
.hq-vis-more:hover{color:var(--hq-charcoal);}
.hq-vis-more__chev{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;}
.hq-vis-more__chev.is-open{transform:translateY(1px) rotate(-135deg);}

/* Funnel */
.hq-vis-funnel{display:flex;flex-direction:column;gap:14px;}
.hq-vis-funnel__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;font-size:13px;}
.hq-vis-funnel__label{color:var(--hq-charcoal);}
.hq-vis-funnel__n{color:var(--hq-text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.hq-vis-funnel__lost{color:var(--hq-stone-deep);margin-left:6px;font-size:12px;}

/* Tables inside a panel sit flat, without their own box */
.hq-table-wrap--flat{border:0;border-radius:0;background:transparent;}
.hq-table--tight th,.hq-table--tight td{padding:9px 10px;}
.hq-table--tight th:first-child,.hq-table--tight td:first-child{padding-left:0;}
.hq-table--tight th:last-child,.hq-table--tight td:last-child{padding-right:0;}
.hq-vis-err{display:block;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hq-vis-why{font-size:12px;color:var(--hq-text);}
.hq-vis-why--unknown{color:var(--hq-stone-deep);font-weight:500;}
.hq-table__row.is-open{background:var(--hq-grey);}

/* One visit, in order */
.hq-vis-path{margin-top:18px;padding-top:18px;border-top:1px solid var(--hq-line);}
.hq-vis-path__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.hq-vis-path__head .hq-tile__title{margin:0;}
.hq-vis-path__what{display:block;font-size:13.5px;color:var(--hq-charcoal);}
.hq-vis-dot--add_to_cart,.hq-vis-dot--order_placed{background:var(--hq-charcoal);}
.hq-vis-dot--js_error{background:#b3261e;}
.hq-vis-dot--page_leave{background:var(--hq-line);}

.hq-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-style:normal;
  background:var(--hq-grey);padding:1px 5px;border-radius:2px;}

@media (max-width:1180px){
  .hq-vis-cols--four{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:980px){
  .hq-vis-cols--two,.hq-vis-cols--three{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .hq-vis-cols--four{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .hq-vis-bar{grid-template-columns:1fr 60px;grid-template-areas:"label label" "track track" "n1 n2";gap:4px 10px;}
  .hq-vis-bar__label{grid-area:label;}
  .hq-vis-bar__track{grid-area:track;}
  .hq-vis-bar .hq-vis-bar__n{text-align:left;}
  .hq-vis-bar--slim{grid-template-columns:110px 1fr 36px;grid-template-areas:none;}
  .hq-vis-panel{padding:18px 16px;}
  .hq-vis-err{max-width:200px;}
}

/* Data-centre marker: visits from a hosting company's network, usually not a person */
.hq-vis-dc{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:2px;vertical-align:1px;
  font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  background:var(--hq-grey);color:var(--hq-text);white-space:nowrap;}
.hq-vis-bar__fill--dc{background:rgba(92,107,108,.35);}
.hq-vis-bar--slim{grid-template-columns:minmax(0,1fr) minmax(40px,.8fr) 40px;}

/* Fabrics and Suppliers libraries: the record header's round swatch (a
   .hq-photo variant, circular instead of the portrait rectangle), and the
   supplier list row, which is a plain div rather than an <a> so its nested
   WhatsApp/email/call links stay valid HTML. */
.hq-swatch-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--hq-grey);}
.hq-swatch-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.hq-client-row--clickable{cursor:pointer;}

/* ---------------------------------------------------------------------------
   The shared kit (September 2026): buttons, dialogs, and the signed-out and
   conflict banners. Used by the screens the Journal and Newsletter work adds
   (templates/partials/head.php loads the kit); the older screens keep their
   own styles. The writing box's styles follow in the next block.
   --------------------------------------------------------------------------- */
.hq-btn--solid{background:var(--hq-charcoal);color:var(--hq-white);}
.hq-btn--solid:hover{background:#000;}
.hq-btn--danger{background:#9B2C2C;border-color:#9B2C2C;color:var(--hq-white);}
.hq-btn--danger:hover{background:#7D2121;border-color:#7D2121;}

.hq-dialog{width:min(460px,calc(100vw - 32px));border:0;border-radius:4px;padding:28px 28px 22px;
  background:var(--hq-white);color:var(--hq-charcoal);box-shadow:0 24px 60px rgba(49,66,69,.18);}
.hq-dialog::backdrop{background:rgba(49,66,69,.35);}
.hq-dialog__title{font-family:var(--hq-serif);font-weight:500;font-size:24px;line-height:1.2;margin:0 0 12px;}
.hq-dialog__body{font-size:14px;line-height:1.6;color:var(--hq-text);margin:0 0 20px;white-space:pre-line;}
.hq-dialog__note{font-size:12px;line-height:1.55;color:var(--hq-text);margin:-4px 0 18px;}
.hq-dialog__error{font-size:13px;line-height:1.5;color:#9B2C2C;margin:-6px 0 14px;}
.hq-dialog__error:empty{display:none;}
.hq-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;}
.hq-dialog__actions .hq-btn{min-height:40px;}
.hq-dialog--danger .hq-dialog__title{color:#9B2C2C;}
/* .hq-btn sets display, which would otherwise beat the hidden attribute. */
.hq-dialog [hidden]{display:none;}

.hq-signedout{position:sticky;top:0;z-index:50;padding:12px 28px;background:#FCF0EF;border-bottom:1px solid #E7C6C3;
  font-size:14px;line-height:1.5;color:#7D2121;}
.hq-signedout a{color:#7D2121;font-weight:500;}
.hq-conflict{margin:0 0 18px;padding:14px 16px;border-radius:3px;background:#FFF8EC;border-left:3px solid #B7791F;}
.hq-conflict__text{margin:0;font-size:14px;line-height:1.55;color:var(--hq-charcoal);}
.hq-conflict__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.hq-conflict__actions .hq-btn{min-height:40px;}

@media (max-width:760px){
  .hq-dialog{padding:22px 18px 18px;}
  .hq-signedout{padding:12px 16px;}
}

/* ---------------------------------------------------------------------------
   The shared writing box (assets/js/kit/editor.js,
   templates/partials/editor-toolbar.php). Buttons are at least 40px so they
   can be tapped on a phone, and the bar wraps rather than scrolling.
   --------------------------------------------------------------------------- */
.hq-editor__toolbar{position:relative;}
.hq-editor__bar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:var(--hq-grey);
  border:1px solid var(--hq-line);border-bottom:0;border-radius:3px 3px 0 0;}
.hq-editor__btn{min-width:40px;min-height:40px;padding:0 10px;font-family:var(--hq-sans);font-size:13px;line-height:1;
  color:var(--hq-text);background:var(--hq-white);border:1px solid var(--hq-line);border-radius:2px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease;}
.hq-editor__btn:hover{border-color:var(--hq-stone);color:var(--hq-charcoal);}
.hq-editor__btn:focus-visible{outline:2px solid var(--hq-stone);outline-offset:1px;}
.hq-editor__btn--bold{font-weight:700;}
.hq-editor__btn--italic{font-style:italic;}
.hq-editor__btn:disabled{opacity:.55;cursor:progress;}

.hq-editor__area{position:relative;display:block;width:100%;min-height:320px;padding:1em;
  font-family:var(--hq-sans);font-size:16px;line-height:1.65;color:var(--hq-charcoal);background:var(--hq-white);
  border:1px solid var(--hq-line);border-radius:0 0 3px 3px;overflow-wrap:break-word;}
.hq-editor__area:focus{outline:none;border-color:var(--hq-stone);box-shadow:0 0 0 3px rgba(61,132,143,.15);}
.hq-editor__area.is-empty::before{content:attr(data-placeholder);position:absolute;left:1em;top:1em;
  color:var(--hq-text);opacity:.6;pointer-events:none;}
.hq-editor__area > :first-child{margin-top:0;}
.hq-editor__area h2{font-family:var(--hq-serif);font-weight:500;font-size:26px;line-height:1.25;margin:1em 0 .4em;}
.hq-editor__area p{margin:0 0 .9em;}
.hq-editor__area ul,.hq-editor__area ol{margin:0 0 .9em;padding-left:1.4em;}
.hq-editor__area li{margin-bottom:.2em;}
.hq-editor__area a{color:var(--hq-stone-deep);}
.hq-editor__area figure{position:relative;margin:1.2em 0;}
.hq-editor__area figure img{display:block;max-width:100%;height:auto;border-radius:2px;}
.hq-editor__figure-ui{position:absolute;top:8px;right:8px;display:flex;flex-wrap:wrap;gap:6px;}
.hq-editor__figure-btn{min-height:40px;padding:0 12px;font-family:var(--hq-sans);font-size:12px;color:var(--hq-charcoal);
  background:rgba(255,255,255,.94);border:1px solid var(--hq-line);border-radius:2px;cursor:pointer;}
.hq-editor__figure-btn:hover{border-color:var(--hq-stone);}
.hq-editor__note{margin:8px 0 0;font-size:13px;line-height:1.5;color:#9B2C2C;}

@media (max-width:760px){
  .hq-editor__area{min-height:240px;padding:.8em;}
  .hq-editor__area.is-empty::before{left:.8em;top:.8em;}
  .hq-editor__figure-ui{position:static;margin-top:6px;}
}

/* ---------------------------------------------------------------------------
   The Journal (public articles): the list at /zillahq/journal/ with its Topics
   panel, and the writing screen at /zillahq/journal/{id}/. Built on the
   shared kit above. Prefix .hq-article-, never .hq-journal- (that is the
   commission conversation log).
   --------------------------------------------------------------------------- */
.hq-articles__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.hq-articles__bar .hq-leads-tabs{margin-bottom:0;}
.hq-articles__search{max-width:280px;}
.hq-article-list{display:flex;flex-direction:column;gap:10px;}
.hq-article-list.is-loading{opacity:.6;}
.hq-article-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:12px 16px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-article-row__thumb{display:block;width:72px;height:72px;border-radius:2px;overflow:hidden;background:var(--hq-grey);}
.hq-article-row__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.hq-article-row__title{font-family:var(--hq-serif);font-weight:500;font-size:22px;line-height:1.2;margin:0;}
.hq-article-row__title a{color:var(--hq-charcoal);text-decoration:none;}
.hq-article-row__title a:hover{color:var(--hq-stone-deep);}
.hq-article-row__meta{margin:4px 0 0;font-size:13px;color:var(--hq-text);}
.hq-article-row__pills{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;}
.hq-article-row__pills .hq-pill{margin-top:0;}
.hq-article-row__side{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.hq-article-row__side .hq-btn{min-height:40px;}
.hq-articles__pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px 0 0;font-size:13px;color:var(--hq-text);}

.hq-topics{margin-top:40px;padding:22px 24px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-topics__head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.hq-topics__head .hq-tile__title{margin:0;}
.hq-topics .hq-note{margin-top:8px;}
.hq-topics__list{list-style:none;margin:16px 0 0;padding:0;}
.hq-topics__item{padding:14px 0;border-top:1px solid var(--hq-line);}
.hq-topics__name{margin:0;font-weight:500;font-size:15px;color:var(--hq-charcoal);}
.hq-topics__count{margin-left:8px;font-weight:400;font-size:12px;color:var(--hq-text);}
.hq-topics__desc{margin:4px 0 8px;font-size:13.5px;line-height:1.5;color:var(--hq-text);max-width:680px;}
.hq-topics__form{margin-top:16px;max-width:680px;}
.hq-topics__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;}
.hq-topics__actions .hq-btn,.hq-topics__item .hq-btn{min-height:40px;}
.hq-counter{margin-left:6px;text-transform:none;letter-spacing:0;color:var(--hq-text);opacity:.8;}

.hq-article__back{margin:0 0 14px;font-size:13px;}
.hq-article__back a{color:var(--hq-text);text-decoration:none;}
.hq-article__back a:hover{color:var(--hq-stone-deep);}
.hq-article__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;}
.hq-article__side{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px;}
.hq-article__card{padding:18px 18px 14px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-article__title{font-family:var(--hq-serif);font-size:28px;font-weight:500;}
.hq-article__ro-title{margin:0 0 6px;}
.hq-article__ro-sub{margin:0 0 18px;font-family:var(--hq-serif);font-style:italic;font-size:20px;color:var(--hq-text);}
.hq-article__notice{margin:0 0 14px;padding:10px 14px;border-radius:3px;background:var(--hq-grey);font-size:14px;}
.hq-article__readonly-note{margin:0 0 18px;padding:14px 16px;border-radius:3px;background:var(--hq-white);border-left:3px solid var(--hq-stone);
  font-size:14px;line-height:1.55;color:var(--hq-charcoal);}
.hq-article__cover{margin-bottom:18px;}
.hq-article__cover-frame{display:flex;align-items:center;justify-content:center;min-height:180px;margin:6px 0 10px;
  background:var(--hq-grey);border:1px dashed var(--hq-line);border-radius:3px;overflow:hidden;}
.hq-article__cover-img{display:block;max-width:100%;max-height:420px;height:auto;}
.hq-article__cover-empty{margin:0;padding:24px;max-width:360px;text-align:center;font-size:13px;color:var(--hq-text);}
.hq-article__cover-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.hq-article__cover-actions .hq-btn{min-height:40px;}
.hq-article__readonly{padding:1em;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;font-size:16px;line-height:1.65;}
.hq-article__readonly h2{font-family:var(--hq-serif);font-weight:500;font-size:26px;margin:1em 0 .4em;}
.hq-article__readonly img{max-width:100%;height:auto;display:block;}
.hq-article__hint{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--hq-text);}
.hq-article__state{margin:0;font-family:var(--hq-serif);font-size:22px;font-weight:500;}
.hq-article__saved{margin:2px 0 12px;font-size:13px;color:var(--hq-text);min-height:1.4em;}
.hq-article__address{margin:0 0 14px;font-size:13px;word-break:break-all;}
.hq-article__address a{color:var(--hq-stone-deep);}
.hq-article__actions{display:flex;flex-wrap:wrap;gap:8px;}
.hq-article__actions .hq-btn{min-height:40px;flex:1 1 auto;}
.hq-article__done{margin:10px 0 0;font-size:13px;color:#2F6B3A;}
.hq-article__checks{list-style:none;margin:12px 0 0;padding:0;}
.hq-article__check{position:relative;padding:4px 0 4px 16px;font-size:13px;line-height:1.45;color:var(--hq-text);}
.hq-article__check::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--hq-stone);}
.hq-article__check--stop{color:#9B2C2C;}
.hq-article__check--stop::before{background:#9B2C2C;}
.hq-article__chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px;}
.hq-article__chip{min-height:40px;padding:0 14px;font-family:var(--hq-sans);font-size:13px;color:var(--hq-charcoal);
  background:var(--hq-white);border:1px solid var(--hq-line);border-radius:20px;cursor:pointer;}
.hq-article__chip:hover{border-color:var(--hq-stone);}
.hq-article__chip.is-on{background:var(--hq-charcoal);border-color:var(--hq-charcoal);color:var(--hq-white);}
.hq-article__chip:disabled{cursor:default;opacity:.7;}
.hq-article__chip--new{border-style:dashed;color:var(--hq-text);}
.hq-google__title{margin:8px 0 2px;font-family:Arial,sans-serif;font-size:18px;line-height:1.3;color:#1a0dab;}
.hq-google__url{margin:0 0 4px;font-family:Arial,sans-serif;font-size:13px;color:#006621;word-break:break-all;}
.hq-google__desc{margin:0;font-family:Arial,sans-serif;font-size:13px;line-height:1.5;color:var(--zjs-ink-soft);}

@media (max-width:980px){
  .hq-article__grid{grid-template-columns:1fr;}
  .hq-article__side{position:static;}
}
@media (max-width:760px){
  .hq-article-row{grid-template-columns:56px minmax(0,1fr);padding:12px;}
  .hq-article-row__thumb{width:56px;height:56px;}
  .hq-article-row__side{grid-column:1 / -1;justify-content:flex-start;}
  .hq-articles__search{max-width:none;width:100%;}
  .hq-topics{padding:18px 16px;}
  .hq-article__title{font-size:24px;}
}

/* The studio's SEO panel on the writing screen (Phase 6). */
.hq-seo__status{margin:6px 0 14px;font-size:13px;color:var(--hq-text);}
.hq-seo__done{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hq-line);}
.hq-seo__tick{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;cursor:pointer;}
.hq-seo__tick input{margin-top:2px;width:18px;height:18px;}

/* Subscribers, the mailing list (Newsletter Phase 3). */
.hq-subs__head-actions{display:flex;flex-wrap:wrap;gap:8px;}
.hq-subs__head-actions .hq-btn{min-height:40px;text-decoration:none;display:inline-flex;align-items:center;}
.hq-subs__flags{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px;}
.hq-subs__flag{background:#FBEAEA;border:1px solid #E7BDBD;color:#7D2121;border-radius:3px;padding:10px 14px;font-size:13px;line-height:1.5;}
.hq-subs__counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 22px;}
.hq-subs__count{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;
  background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;padding:14px 16px;font-family:var(--hq-sans);color:var(--hq-charcoal);}
.hq-subs__count:hover{border-color:var(--hq-stone);}
.hq-subs__count.is-active{border-color:var(--hq-charcoal);box-shadow:inset 0 0 0 1px var(--hq-charcoal);}
.hq-subs__num{font-family:var(--hq-serif);font-size:32px;font-weight:500;line-height:1;}
.hq-subs__label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--hq-text);}
.hq-subs__sub{font-size:12px;color:var(--hq-text);}
.hq-subs__warn{font-size:12px;color:#9B2C2C;}
.hq-subs__intro{margin:0;max-width:70ch;font-size:13px;line-height:1.55;color:var(--hq-text);flex:1 1 320px;}
.hq-subs__list{display:flex;flex-direction:column;gap:6px;}
.hq-subs__list.is-loading{opacity:.6;}
.hq-subs__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;text-align:left;cursor:pointer;
  background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;padding:12px 16px;min-height:52px;font-family:var(--hq-sans);color:var(--hq-charcoal);}
.hq-subs__row:hover{border-color:var(--hq-stone);}
.hq-subs__row:focus-visible{outline:2px solid var(--hq-stone);outline-offset:2px;}
.hq-subs__who{display:flex;flex-direction:column;min-width:0;}
.hq-subs__name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hq-subs__email{font-size:12px;color:var(--hq-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hq-subs__joined{font-size:13px;color:var(--hq-text);}
.hq-subs__pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.hq-subs__pills .hq-pill{margin-top:0;}
.hq-pill--warn{margin-top:0;background:#FBEAEA;color:#7D2121;}
.hq-subs__person,.hq-subs__import{width:min(620px,calc(100vw - 32px));}
.hq-subs__status{margin:-4px 0 18px;font-size:13px;line-height:1.55;color:var(--hq-text);}
.hq-subs__names{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.hq-subs__history-title{margin-top:22px;}
.hq-subs__history{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.5;}
.hq-subs__when{display:block;font-size:12px;color:var(--hq-text);}
.hq-subs__wording{display:block;margin-top:4px;padding-left:10px;border-left:2px solid var(--hq-stone);font-style:italic;color:var(--hq-text);}
.hq-subs__evidence{display:block;font-size:12px;color:var(--hq-text);}
.hq-subs__kinds{border:0;margin:0 0 12px;padding:0;}
.hq-subs__kinds .hq-check{margin-bottom:10px;align-items:flex-start;}
.hq-subs__report{margin:0 0 16px;padding-left:18px;font-size:13px;line-height:1.6;color:var(--hq-charcoal);}
@media (max-width:980px){
  .hq-subs__counts{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:760px){
  .hq-subs__counts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hq-subs__row{grid-template-columns:minmax(0,1fr);gap:6px;}
  .hq-subs__pills{justify-content:flex-start;}
  .hq-subs__names{grid-template-columns:1fr;}
}

/* Subscribers: the sending status and the owners' settings (Newsletter Phase 4). */
.hq-subs__sending{margin:0 0 18px;padding:12px 16px;border:1px solid var(--hq-line);border-radius:4px;background:var(--hq-white);font-size:13px;line-height:1.55;color:var(--hq-text);}
.hq-subs__sending.is-red{background:#FBEAEA;border-color:#E7BDBD;color:#7D2121;}
.hq-subs__status-line{margin:0;font-weight:500;}
.hq-subs__problems{margin:6px 0 0;padding-left:18px;}
.hq-subs__turned{margin:6px 0 0;}
.hq-subs__sending .hq-btn{margin-top:10px;min-height:40px;}
.hq-subs__settings{width:min(620px,calc(100vw - 32px));}

/* ---------------------------------------------------------------------------
   Newsletters (Phase 8): the list at /zillahq/newsletters/ and the editor at
   /zillahq/newsletters/{id}/. Prefix .hq-nl-. Uses the HQ's own variables and
   the shared parts (.hq-subs__sending, .hq-article__card styles, .hq-dialog).
   --------------------------------------------------------------------------- */
.hq-nl__head-actions{display:flex;gap:10px;flex-wrap:wrap;}
.hq-nl__settings-note{margin:6px 0 0;font-size:12px;}
.hq-nl__settings-note a{color:var(--hq-stone-deep);}
.hq-nl-meta{margin:2px 0 0;font-size:12px;color:var(--hq-text);}

.hq-nl-welcome{margin:0 0 28px;padding:20px 22px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;}
.hq-nl-welcome .hq-tile__title{margin-bottom:10px;}
.hq-nl-welcome__line{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--hq-charcoal);}
.hq-nl-welcome__line .hq-pill{margin:0 0 0 8px;}
.hq-nl-welcome__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;}
.hq-nl-welcome__actions .hq-btn{min-height:40px;}
.hq-nl-welcome__see{font-size:13px;color:var(--hq-stone-deep);}

.hq-nl-section{margin:0 0 28px;}
.hq-nl-section .hq-tile__title{margin-bottom:12px;}
.hq-nl-list{display:flex;flex-direction:column;gap:10px;}
.hq-nl-list.is-loading{opacity:.6;}
.hq-nl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 18px;
  background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-nl-row__name{margin:0;font-family:var(--hq-serif);font-weight:500;font-size:22px;line-height:1.2;}
.hq-nl-row__name a{color:var(--hq-charcoal);text-decoration:none;}
.hq-nl-row__name a:hover{color:var(--hq-stone-deep);}
.hq-nl-row__subject{margin:4px 0 0;font-size:14px;color:var(--hq-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hq-nl-row__side{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.hq-nl-row__side .hq-btn{min-height:40px;}

/* The editor */
.hq-nl-ed__grid{display:grid;grid-template-columns:minmax(0,1fr) 660px;gap:28px;align-items:start;}
.hq-nl-ed__left{min-width:0;}
.hq-nl-ed__title{margin:0 0 16px;}
.hq-nl-ed__right{position:sticky;top:16px;min-width:0;padding:16px 18px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-nl-ed__ro-actions{display:flex;gap:10px;margin:0 0 18px;}
.hq-nl-card{padding:18px 18px 4px;margin-bottom:16px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-counter.is-over{color:#9B2C2C;opacity:1;}
.hq-nl-fixed{margin:0 0 12px;padding:12px 14px;background:var(--hq-grey);border:1px dashed var(--hq-line);border-radius:3px;font-size:12px;line-height:1.5;color:var(--hq-text);}

.hq-nl-block{margin:0 0 12px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-nl-block__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--hq-line);background:var(--hq-blush);}
.hq-nl-block__type{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--hq-text);}
.hq-nl-block__tools{display:flex;flex-wrap:wrap;gap:6px;}
.hq-nl-block__tools .hq-btn{min-height:36px;padding:.4em 1em;}
.hq-nl-block__body{padding:14px 14px 4px;}
.hq-nl-block__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.hq-nl-block__row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.hq-nl-block__row .hq-btn{min-height:40px;}
.hq-nl-block__need{color:#9B2C2C;}
.hq-nl-block .hq-editor__area{min-height:140px;}
.hq-nl-photo{margin:0 0 12px;}
.hq-nl-photo__img{display:block;max-width:100%;max-height:240px;height:auto;border-radius:2px;}
.hq-nl-photo__empty{margin:0;padding:18px;text-align:center;font-size:13px;color:var(--hq-text);background:var(--hq-grey);border:1px dashed var(--hq-line);border-radius:3px;}
.hq-nl-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 6px 4px 8px;font-size:13px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:20px;}
.hq-nl-chip__img{width:28px;height:28px;object-fit:cover;border-radius:50%;}
.hq-nl-chip__x{min-width:32px;min-height:32px;border:0;background:transparent;font-size:18px;line-height:1;color:var(--hq-text);cursor:pointer;border-radius:50%;}
.hq-nl-chip__x:hover{color:#9B2C2C;}
.hq-nl-pick{list-style:none;margin:-8px 0 14px;padding:0;max-height:260px;overflow-y:auto;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-nl-pick__item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 12px;text-align:left;font-family:var(--hq-sans);font-size:13px;color:var(--hq-charcoal);background:transparent;border:0;border-bottom:1px solid var(--hq-line);cursor:pointer;}
.hq-nl-pick__item:hover,.hq-nl-pick__item:focus-visible{background:var(--hq-blush);}
.hq-nl-pick__img{width:32px;height:32px;object-fit:cover;border-radius:2px;flex:0 0 auto;}
.hq-nl-chosen{margin:0 0 12px;font-size:14px;color:var(--hq-charcoal);}
.hq-nl-linkrow{margin:0 0 14px;padding:12px 12px 8px;border:1px solid var(--hq-line);border-radius:3px;}
.hq-nl-add{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.hq-nl-add .hq-btn{min-height:40px;}

.hq-nl-preview__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.hq-nl-preview__bar .hq-field__label{margin:0;}
.hq-nl-device{display:inline-flex;gap:6px;}
.hq-nl-device .hq-btn{min-height:36px;padding:.4em 1em;}
.hq-nl-device .hq-btn.is-on{background:var(--hq-charcoal);border-color:var(--hq-charcoal);color:var(--hq-white);}
.hq-nl-inbox{margin:0 0 10px;padding:8px 12px;font-size:13px;line-height:1.5;color:var(--hq-charcoal);background:var(--hq-grey);border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hq-nl-inbox__pre{color:var(--hq-text);}
.hq-nl-preview__frame{display:flex;justify-content:center;overflow:auto;background:var(--hq-grey);border-radius:3px;}
.hq-nl-preview__frame.is-loading{opacity:.7;}
.hq-nl-preview__iframe{display:block;max-width:100%;height:720px;border:0;background:var(--hq-white);}

.hq-nl-bar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:20px;padding:10px 16px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;box-shadow:0 -8px 24px rgba(49,66,69,0.05);}
.hq-nl-bar__saved{flex:1 1 140px;margin:0;font-size:13px;color:var(--hq-text);min-height:1.4em;}
.hq-nl-bar__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.hq-nl-bar__actions .hq-btn{min-height:40px;}
.hq-nl-bar__to{display:flex;align-items:center;gap:8px;margin:0;}
.hq-nl-bar__to .hq-field__label{margin:0;white-space:nowrap;}
.hq-nl-bar__to .hq-field__input{width:240px;padding:.55em .7em;}
.hq-nl-bar > .hq-article__done,.hq-nl-bar > .hq-dialog__error{flex:1 1 100%;margin:0;}
.hq-nl-check{margin-top:14px;padding:12px 16px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-nl-check .hq-article__checks{margin:0;}
.hq-nl-check__ok{margin:0;font-size:13px;color:#2F6B3A;}

/* Sending (Phase 9): the panel above the editor's bar, the results, and the
   list screen's "Ask the old list" card. Same white cards and hairlines as the rest. */
.hq-nl-meta--warn{color:#7D2121;}
.hq-nl-send{margin-top:20px;padding:18px 18px 14px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:3px;}
.hq-nl-send .hq-tile__title{margin-bottom:12px;}
.hq-nl-aud{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;}
.hq-nl-aud__opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;font-size:14px;color:var(--hq-charcoal);border:1px solid var(--hq-line);border-radius:3px;cursor:pointer;}
.hq-nl-aud__opt:hover{border-color:var(--hq-stone);}
.hq-nl-aud__name{flex:1 1 auto;}
.hq-nl-aud__n{font-family:var(--hq-serif);font-size:20px;color:var(--hq-text);}
.hq-nl-paste{margin:0 0 14px;padding:14px 14px 4px;background:var(--hq-grey);border-radius:3px;}
.hq-nl-paste .hq-check{margin-bottom:12px;}
.hq-nl-send__chosen{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--hq-charcoal);}
.hq-nl-send__actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;}
.hq-nl-send__actions .hq-btn{min-height:40px;}
.hq-nl-send__when{display:block;margin:0;}
.hq-nl-send__when .hq-field__label{margin-bottom:4px;}
.hq-nl-send__when .hq-field__input{width:230px;padding:.55em .7em;}
.hq-nl-results{margin-top:16px;padding-top:14px;border-top:1px solid var(--hq-line);}
.hq-nl-results__line{margin:0 0 12px;font-size:14px;color:var(--hq-charcoal);}
.hq-nl-results__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:0 0 12px;}
.hq-nl-results__grid div{padding:10px 12px;background:var(--hq-grey);border-radius:3px;}
.hq-nl-results__grid dt{margin:0 0 2px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--hq-text);}
.hq-nl-results__grid dd{margin:0;font-family:var(--hq-serif);font-size:26px;line-height:1.1;color:var(--hq-charcoal);}
.hq-nl-results__links{list-style:none;margin:0 0 12px;padding:0;font-size:13px;}
.hq-nl-results__links li{padding:6px 0;border-bottom:1px solid var(--hq-line);overflow-wrap:anywhere;}
.hq-nl-ask{margin:0 0 28px;padding:20px 22px;background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;}
.hq-nl-ask .hq-tile__title{margin-bottom:10px;}
.hq-nl-ask__intro{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--hq-charcoal);}
.hq-nl-ask__iframe{height:420px;}
.hq-nl-ask__test{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:14px 0 18px;}
.hq-nl-ask__test .hq-btn{min-height:40px;}
.hq-nl-ask__batch{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:460px;}
.hq-nl-ask__count{margin:0 0 12px;font-size:14px;color:var(--hq-charcoal);}
.hq-nl-ask__batches{margin:0;padding:0 0 0 18px;font-size:13px;line-height:1.7;color:var(--hq-text);}

@media (max-width:1100px){
  .hq-nl-ed__grid{grid-template-columns:minmax(0,1fr);}
  .hq-nl-ed__right{position:static;}
}
@media (max-width:760px){
  .hq-nl-row{grid-template-columns:minmax(0,1fr);gap:10px;}
  .hq-nl-row__side{justify-content:flex-start;}
  .hq-nl-block__pair{grid-template-columns:1fr;}
  .hq-nl-bar__to{flex-wrap:wrap;width:100%;}
  .hq-nl-bar__to .hq-field__input{width:100%;}
  .hq-nl-preview__iframe{height:560px;}
  .hq-nl-ask__batch{grid-template-columns:1fr;}
  .hq-nl-send__when,.hq-nl-send__when .hq-field__input{width:100%;}
  .hq-nl-send__actions .hq-btn{flex:1 1 100%;}
}

.hq-nl-preview__busy{margin-left:10px;font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--hq-stone-deep);}

/* Zilla HQ additions: Pages, Snippets, dashboard */
.hq-quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.hq-group-title{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--hq-text);margin:34px 0 8px;}
.hq-tile{transition:border-color .15s ease,transform .15s ease;}
a.hq-tile:hover{border-color:var(--zjs-teal);}
.hq-tile__big{color:var(--zjs-teal);}
.hq-top{border-bottom:3px solid var(--zjs-mint);}
.hq-top__link--current{color:var(--zjs-teal);border-bottom:2px solid var(--zjs-coral);}
.hq-btn--primary{background:var(--zjs-teal);}
.hq-btn--primary:hover{background:var(--zjs-ink);}
.hq-pages-seo{background:var(--zjs-bg);border:1px solid var(--hq-line);border-radius:4px;padding:16px 18px;margin:6px 0 10px;}
.hq-pages-seo .hq-field{margin-bottom:12px;}
.hq-pages-seo__count{font-size:12px;color:var(--zjs-muted);margin:4px 0 0;}
.hq-switch{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--hq-charcoal);}
.hq-switch input{width:18px;height:18px;accent-color:var(--zjs-teal);}
.hq-code{width:100%;min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;color:var(--zjs-ink);background:#fff;border:1px solid var(--hq-line);border-radius:3px;padding:12px;tab-size:2;}
.hq-snip-error{background:#FBEAEA;color:#9B2C2C;font-size:13px;padding:8px 12px;border-radius:3px;margin:8px 0;}
.hq-row-actions{display:flex;flex-wrap:wrap;gap:6px;}
.hq-cell-quiet{color:var(--zjs-muted);font-size:13px;}

/* ---------------------------------------------------------------------------
   Shop core (1.1.0): Paintings, Orders, Messages and Shop settings.
   The side drawer is shared by Paintings and Orders.
   -------------------------------------------------------------------------- */

/* Dashboard: what needs Zilla today */
.hq-todo{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 24px;}
.hq-todo__item{display:flex;align-items:baseline;gap:12px;padding:16px 22px;background:var(--hq-white);
  border:1px solid var(--hq-line);border-radius:4px;text-decoration:none;color:var(--hq-charcoal);
  transition:box-shadow .2s ease,border-color .2s ease;}
.hq-todo__item:hover{box-shadow:0 12px 30px rgba(49,66,69,.07);border-color:var(--hq-stone);}
.hq-todo__num{font-family:var(--hq-serif);font-size:34px;font-weight:500;line-height:1;color:var(--hq-text);}
.hq-todo__label{font-size:14px;color:var(--hq-text);}
.hq-todo__item.is-due{border-color:var(--zjs-coral);}
.hq-todo__item.is-due .hq-todo__num{color:var(--zjs-coral);}

/* Labels, the shop's own three: NEW, STUDIO SALE, SOLD */
.hq-label{display:inline-block;margin:0 6px 4px 0;padding:3px 8px;border-radius:2px;font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.3;background:var(--hq-grey);color:var(--hq-text);}
.hq-label--new{background:var(--zjs-teal);color:#fff;}
.hq-label--sale{background:#B8801A;color:#fff;}
.hq-label--sold{background:var(--zjs-coral);color:#fff;}
.hq-label--draft{background:var(--hq-white);border:1px solid var(--hq-line);color:var(--hq-text);}
.hq-label--set{background:var(--zjs-mint);color:var(--hq-charcoal);}
.hq-label--print{background:var(--hq-blush);border:1px solid var(--hq-line);color:var(--hq-charcoal);}
.hq-btn--sold{background:var(--zjs-coral);border-color:var(--zjs-coral);color:#fff;}
.hq-btn--sold:hover{background:#E8705A;border-color:#E8705A;}

/* View switch */
.hq-view-switch{display:inline-flex;border:1px solid var(--hq-line);border-radius:3px;overflow:hidden;}
.hq-view-switch__btn{font-family:var(--hq-sans);font-size:12px;font-weight:500;padding:8px 16px;border:0;cursor:pointer;
  background:var(--hq-white);color:var(--hq-text);}
.hq-view-switch__btn + .hq-view-switch__btn{border-left:1px solid var(--hq-line);}
.hq-view-switch__btn.is-on{background:var(--hq-charcoal);color:var(--hq-white);}

/* The painting grid: square pictures, because most paintings are */
.hq-paint-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;}
.hq-paint{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--hq-white);border:1px solid var(--hq-line);
  border-radius:4px;overflow:hidden;cursor:pointer;font-family:var(--hq-sans);color:var(--hq-charcoal);
  transition:box-shadow .2s ease,transform .2s ease;}
.hq-paint:hover,.hq-paint:focus-visible{box-shadow:0 16px 40px rgba(49,66,69,.08);transform:translateY(-2px);outline:none;}
.hq-paint__shot{display:block;aspect-ratio:1 / 1;background:var(--hq-grey);position:relative;}
.hq-paint__shot img{width:100%;height:100%;object-fit:cover;display:block;}
.hq-paint.is-sold .hq-paint__shot img{filter:grayscale(.5);opacity:.6;}
.hq-paint__none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--hq-text);}
.hq-paint__body{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px;}
.hq-paint__name{font-size:15px;font-weight:500;line-height:1.25;}
.hq-paint__price{font-size:13px;color:var(--hq-charcoal);}
.hq-paint__price s{color:var(--hq-text);margin-right:4px;}
.hq-paint__theme{font-size:11px;color:var(--hq-text);}
.hq-paint__tags{margin-top:6px;min-height:22px;}
.hq-table__row.is-open{background:var(--hq-grey);}
.hq-table__row:focus-visible{outline:2px solid var(--hq-stone);outline-offset:-2px;}

/* The side drawer */
.hq-drawer-veil{position:fixed;inset:0;background:rgba(49,66,69,.35);z-index:80;}
.hq-drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--hq-white);z-index:90;
  box-shadow:-20px 0 50px rgba(49,66,69,.15);overflow-y:auto;transform:translateX(105%);transition:transform .25s ease;visibility:hidden;}
.hq-drawer--wide{width:min(600px,100vw);}
.hq-drawer.is-open{transform:none;visibility:visible;}
.hq-drawer__body{padding:26px 28px 60px;}
.hq-drawer__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;}
.hq-drawer__title{font-family:var(--hq-serif);font-weight:500;font-size:26px;line-height:1.2;margin:0 0 6px;}
.hq-drawer__sub{margin:0;font-size:13px;color:var(--hq-text);display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.hq-drawer__close{width:36px;height:36px;flex:0 0 auto;border:1px solid var(--hq-line);border-radius:50%;background:var(--hq-white);
  font-size:22px;line-height:1;cursor:pointer;color:var(--hq-charcoal);}
.hq-drawer__close:hover{border-color:var(--hq-stone);color:var(--hq-stone-deep);}
.hq-drawer__actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;}
.hq-drawer__ok{margin:0 0 14px;padding:10px 14px;background:var(--zjs-mint);border-radius:3px;font-size:13px;color:var(--hq-charcoal);}
.hq-drawer__sec{padding:18px 0;border-top:1px solid var(--hq-line);}
.hq-drawer__sec h3{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hq-stone-deep);}
.hq-drawer__sec--end{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.hq-drawer__row{display:flex;gap:10px;align-items:center;}
.hq-drawer__row .hq-field__input{flex:1 1 auto;}
.hq-drawer__label{display:block;margin:12px 0 5px;font-size:12px;letter-spacing:.03em;color:var(--hq-text);}
.hq-drawer__sec .hq-field__input{margin-bottom:8px;}
.hq-drawer__hint{margin:6px 0 8px;font-size:12px;line-height:1.55;color:var(--hq-text);}
.hq-drawer__line{margin:0 0 6px;font-size:14px;line-height:1.5;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;}
.hq-drawer__line a,.hq-drawer__sec a{color:var(--hq-stone-deep);}
.hq-drawer__quote{margin:10px 0 0;padding:10px 14px;background:var(--hq-blush);border-left:3px solid var(--zjs-amber);font-size:13px;line-height:1.55;}
.hq-drawer__box{margin-top:12px;padding:14px;background:var(--hq-blush);border-radius:3px;}
.hq-drawer__box .hq-btn{margin-top:4px;}
.hq-drawer__two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.hq-drawer__count{float:right;font-size:11px;color:var(--hq-text);}
.hq-drawer__item{display:flex;align-items:center;gap:14px;padding:8px 0;}
.hq-drawer__item img,.hq-drawer__noshot{width:64px;height:64px;border-radius:2px;object-fit:cover;flex:0 0 auto;background:var(--hq-grey);}
.hq-drawer__item-main{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;font-size:14px;}
.hq-drawer__item-main span{font-size:12px;color:var(--hq-text);}
.hq-drawer__item-price{font-size:14px;white-space:nowrap;}
.hq-drawer__totals{margin:10px 0 0;font-size:13px;}
.hq-drawer__totals div{display:flex;justify-content:space-between;padding:4px 0;}
.hq-drawer__totals dt,.hq-drawer__totals dd{margin:0;}
.hq-drawer__totals .is-total{border-top:1px solid var(--hq-line);margin-top:4px;padding-top:8px;font-weight:600;font-size:15px;}
.hq-drawer__note{padding:9px 0;border-bottom:1px solid var(--hq-line);font-size:13px;line-height:1.5;white-space:pre-line;}
.hq-drawer__note:last-child{border-bottom:0;}
.hq-drawer__note-meta{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--hq-text);margin-bottom:2px;}
.hq-drawer__note-meta .hq-pill{margin-top:0;}

/* Pictures in the painting drawer */
.hq-pic{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px;}
.hq-pic__main{position:relative;width:180px;height:180px;flex:0 0 auto;background:var(--hq-grey);border-radius:3px;overflow:hidden;}
.hq-pic__main img{width:100%;height:100%;object-fit:cover;display:block;}
.hq-pic__file{position:relative;cursor:pointer;}
.hq-pic__file input,.hq-gallery__add input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.hq-gallery{display:flex;flex-wrap:wrap;gap:10px;}
.hq-gallery__item,.hq-gallery__add{position:relative;width:84px;height:84px;border-radius:3px;overflow:hidden;background:var(--hq-grey);}
.hq-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;}
.hq-gallery__x{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(255,255,255,.92);
  font-size:16px;line-height:1;cursor:pointer;color:var(--hq-charcoal);}
.hq-gallery__main{position:absolute;left:0;right:0;bottom:0;border:0;padding:3px 0;background:rgba(49,66,69,.75);color:#fff;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity .15s ease;}
.hq-gallery__item:hover .hq-gallery__main,.hq-gallery__main:focus-visible{opacity:1;}
.hq-gallery__add{display:flex;align-items:center;justify-content:center;border:1px dashed var(--hq-stone);font-size:26px;color:var(--hq-stone-deep);cursor:pointer;}

/* Form pieces */
.hq-money{display:flex;align-items:center;gap:8px;}
.hq-money > span{font-size:15px;color:var(--hq-text);}
.hq-money .hq-field__input{margin-bottom:0;}
.hq-drawer__sec .hq-money .hq-field__input{margin-bottom:0;}
.hq-field__input--short{max-width:140px;}
.hq-check--inline{margin:12px 0 0;}
.hq-choice{display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--hq-line);border-radius:3px;font-size:13px;cursor:pointer;margin-bottom:8px;}
.hq-choice.is-on{border-color:var(--hq-stone);background:var(--hq-blush);}

/* Messages */
.hq-unread{font-weight:600;}
.hq-pre{white-space:pre-line;}

/* Shop settings */
.hq-narrow{max-width:760px;}
.hq-card{background:var(--hq-white);border:1px solid var(--hq-line);border-radius:4px;padding:26px 28px;margin-bottom:22px;}
.hq-card__title{font-family:var(--hq-serif);font-weight:500;font-size:22px;margin:0 0 6px;}
.hq-card__intro{margin:0 0 18px;font-size:13px;line-height:1.55;color:var(--hq-text);}
.hq-card .hq-money{max-width:240px;}
.hq-card .hq-btn{margin-top:18px;}
.hq-zone{padding:14px 0;border-top:1px solid var(--hq-line);}
.hq-zone__name{margin:0 0 2px;font-size:15px;font-weight:500;}
.hq-zone__regions{margin:0 0 8px;font-size:12px;color:var(--hq-text);}
.hq-zone__methods{margin:0;padding-left:18px;font-size:13px;line-height:1.7;}
.hq-zone__detail{color:var(--hq-text);margin-left:6px;}

@media (max-width:760px){
  .hq-drawer__body{padding:20px 18px 60px;}
  .hq-drawer__two{grid-template-columns:1fr;}
  .hq-pic{flex-direction:column;}
  .hq-paint-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
}
@media print{.hq-drawer,.hq-drawer-veil{display:none;}}

/* Phase 3: stock, costs, revenue */
.hq-settings-gap{margin-top:28px;}
.hq-table th.hq-table__num{text-align:right;}
.hq-stock-edit{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;}
.hq-stock-edit__input{width:76px;text-align:right;padding:.45em .6em;font-size:14px;}
.hq-stock-edit__save{padding:.45em .9em;font-size:12px;}
.hq-costs th,.hq-costs td{padding-left:8px;padding-right:8px;}
.hq-costs__input{width:84px;min-width:0;text-align:right;padding:.45em .5em;font-size:13px;}
.hq-drawer__costs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 16px;}
.hq-tile__big--money{font-size:30px;}
.hq-rev-neg{color:var(--zjs-coral);}
.hq-rev-busy{opacity:.55;transition:opacity .15s ease;}
.hq-rev-range{align-items:flex-end;}
.hq-rev-range__field{display:block;min-width:170px;}
.hq-rev-range__field .hq-field__input{margin-bottom:0;}
.hq-rev-note{margin:14px 0 0;font-style:normal;max-width:80ch;}
.hq-rev-note a{color:var(--hq-stone-deep);}
.hq-tiles--five .hq-tile__big{font-size:26px;white-space:nowrap;}
.hq-rev-chart{width:100%;overflow-x:auto;}
.hq-rev-svg{display:block;min-width:520px;height:auto;}
.hq-rev-grid{stroke:var(--hq-line);stroke-width:1;}
.hq-rev-grid--zero{stroke:var(--zjs-muted);}
.hq-rev-axis{font-family:var(--hq-sans);font-size:11px;fill:var(--zjs-ink-soft);}
.hq-rev-bar--sales{fill:var(--zjs-teal);}
.hq-rev-bar--profit{fill:var(--zjs-olive);}
.hq-rev-bar--loss{fill:var(--zjs-coral);}
.hq-rev-key{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 6px 0 14px;vertical-align:baseline;}
.hq-rev-key:first-child{margin-left:0;}
.hq-rev-key--sales{background:var(--zjs-teal);}
.hq-rev-key--profit{background:var(--zjs-olive);}
.hq-rev-key--loss{background:var(--zjs-coral);}
.hq-rev-table{margin-top:28px;}
.hq-rev-total td{font-weight:600;border-top:1px solid var(--hq-line);background:var(--hq-blush);}
.hq-rev-theme{grid-template-columns:200px 1fr 110px 110px;}
@media (max-width:760px){
  .hq-vis-bar.hq-rev-theme{grid-template-columns:1fr 1fr;}
}

/* Dashboard: every section as a tile (20 Oct 2026) */
.hq-tiles--nav{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:8px;}
.hq-tile--nav{display:flex!important;flex-direction:column;gap:6px;padding:22px 22px 20px;min-height:168px;}
.hq-tile--nav .hq-tile__icon{width:40px;height:40px;margin-bottom:8px;}
.hq-tile__name{font-family:var(--hq-sans);font-size:17px;font-weight:500;color:var(--hq-charcoal);margin:0;}
.hq-tile--nav .hq-tile__big{font-size:30px;margin:6px 0 2px;}
.hq-tile--nav .hq-tile__big--money{font-size:24px;}
.hq-tile--nav .hq-tile__sub{line-height:1.45;}
.hq-tile--nav:hover .hq-tile__name{color:var(--zjs-teal,#3D848F);}
.hq-top__sep{color:var(--hq-text);opacity:.5;margin:0 2px;}
.hq-top__spacer{flex:1 1 auto;}

/* Phase 4 (1.4.0): courier booking, shop emails, gift cards */
.hq-parcel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0;}
.hq-parcel label{display:block;font-size:12px;color:var(--hq-text);}
.hq-parcel .hq-field__input{margin-top:4px;margin-bottom:0;padding-left:.6em;padding-right:.6em;}
.hq-settings-sub{font-family:var(--hq-sans);font-size:14px;font-weight:600;margin:0 0 6px;color:var(--hq-charcoal);}
.hq-drawer__box .hq-choice{justify-content:space-between;gap:10px;}
.hq-drawer__box .hq-choice > span:first-of-type{flex:1 1 auto;}
.hq-email-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.hq-email-head .hq-card__intro{margin-bottom:12px;}
.hq-email-field{margin-bottom:14px;}
.hq-email-field .hq-field__input{margin-bottom:0;}
.hq-email-toggle{margin-top:0 !important;}
.hq-email-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px;}
.hq-email-actions .hq-btn{margin-top:0 !important;}
.hq-card .hq-email-toggle + div{margin-top:16px;}
.hq-field__input--date{max-width:200px;}
.hq-gc-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;font-size:13px;}
.hq-card .hq-table .hq-btn{margin-top:0;white-space:nowrap;}
@media (max-width:760px){
  .hq-parcel{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ------------------------------------------------------------------
   Ad tracker (/zillahq/ads/): a card per campaign with its link and numbers.
   ------------------------------------------------------------------ */
.hq-ads__empty{padding:26px 28px;background:var(--hq-white);border:1px dashed var(--hq-line);border-radius:4px;margin-bottom:22px;}
.hq-ads__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;}
.hq-ads__actions{display:flex;gap:8px;}
.hq-ads__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 6px;font-size:13px;color:var(--hq-text);}
.hq-ads__linkrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.hq-ads__linkrow .hq-field__input{flex:1 1 320px;min-width:0;font-size:13px;}
.hq-ads .hq-ads__linkrow .hq-btn{margin-top:0;}
.hq-ads__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:20px;}
.hq-ads__stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--hq-grey);border-radius:3px;}
.hq-ads__num{font-family:var(--hq-serif);font-size:26px;font-weight:500;line-height:1.15;color:var(--hq-charcoal);}
.hq-ads__label{font-size:12px;color:var(--hq-text);}
.hq-ads__note{margin:12px 0 0;font-size:12px;color:var(--hq-text);}
@media (max-width:640px){.hq-ads__actions{width:100%;}}

/* 1.8.0 Visitors: daily chart, weeks, devices */
.hq-vis-why-day{margin:14px 0 0;}
.hq-vis-chart{display:flex;align-items:stretch;gap:3px;height:180px;margin-top:6px;}
.hq-vis-chart--90{gap:1px;}
.hq-vis-chart__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;}
.hq-vis-chart__plot{position:relative;flex:1;background:var(--hq-grey);border-radius:2px;}
.hq-vis-chart__bar{position:absolute;left:0;right:0;bottom:0;background:var(--hq-stone-deep);border-radius:2px 2px 0 0;}
.hq-vis-chart__people{position:absolute;left:0;right:0;height:3px;margin-bottom:-1px;background:var(--hq-charcoal);}
.hq-vis-chart__tick{height:18px;padding-top:4px;font-size:10.5px;color:var(--hq-text);white-space:nowrap;overflow:visible;}
.hq-vis-chart__key{display:flex;gap:18px;margin-top:10px;font-size:12px;color:var(--hq-text);}
.hq-vis-chart__swatch{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;background:var(--hq-stone-deep);border-radius:2px;}
.hq-vis-chart__swatch--people{height:3px;vertical-align:3px;background:var(--hq-charcoal);}
.hq-vis-weeks{margin-top:20px;}
.hq-vis-bar--device{grid-template-columns:160px 1fr 48px;}
@media (max-width:700px){
  .hq-vis-chart{height:140px;gap:1px;}
  .hq-vis-chart__tick{font-size:9.5px;}
  .hq-vis-bar--device{grid-template-columns:120px 1fr 40px;}
}