, so use a real spacer box instead. */
.nnh-footspace{height:56px}
@media (max-width:640px){.nnh-footspace{height:36px}}
.nnh-phead{background:transparent;border-bottom:0}
/* -- Column: 1120, airy grid -- */
.nnh-page .wrap{max-width:1120px}
.nnh-profile{max-width:1120px;grid-template-columns:1fr 336px;gap:36px}
/* -- Hero: floating rounded photo card -- */
.nnh-banner{max-width:1120px;height:300px;margin:24px auto 0;border:0;border-radius:16px;width:calc(100% - 48px)}
@media (max-width:1180px){.nnh-banner{margin-left:auto;margin-right:auto}}
@media (max-width:720px){.nnh-banner{height:200px;margin:16px auto 0;border-radius:12px}}
/* -- Title block on paper -- */
.nnh-phead .wrap{padding-top:26px}
.nnh-phead h1{font-size:32px;font-weight:800;letter-spacing:-0.5px}
.nnh-profile .plogo,.nnh-phead .plogo{width:72px;height:72px;border-radius:16px}
/* -- Sections: open, whitespace rhythm, readable measure -- */
.nnh-profile .col-main > .block,.nnh-profile .col-main > section{margin-bottom:44px}
.nnh-profile .col-main h2{font-size:22px;font-weight:800}
.nnh-profile .overview,.nnh-profile .col-main p{max-width:640px}
/* -- Buttons: pills; primary goes deep-navy with soft shadow -- */
.nnh-btn{border-radius:999px}
.nnh-btn.primary{background:var(--nnh-blue-deep);box-shadow:0 2px 6px rgba(18,75,112,.25)}
.nnh-btn.primary:hover{filter:brightness(.92)}
.nnh-btn.ghost{border-width:1.5px}
/* -- Sidebar: 336px, cards keep their borders, gently rounded -- */
.nnh-profile .sidecard{border-radius:14px}
@media (min-width:961px){.nnh-profile aside{position:sticky;top:24px}}
/* -- Dashboard framing previews follow the new hero geometry -- */
.nnh-ownerdash .odbanner-preview.has-image{aspect-ratio:1120/300;border-radius:12px;overflow:hidden}
.nnh-ownerdash .odbanner-preview.has-image.is-phone{aspect-ratio:390/200}
/* =============================================================
v0.43.0 — DESIGN SYSTEM (Claude Design styleguide adoption).
Component library ported from handoff/styleguide.html + styles.css,
every color mapped to live --nnh-* tokens; derived tints use
color-mix from those tokens, so the palette stays pure.
============================================================= */
:root{
--nnh-r-sm:8px;--nnh-r-md:10px;--nnh-r-lg:14px;
--nnh-mix-warm:color-mix(in srgb,var(--nnh-line) 45%,var(--nnh-paper));
--nnh-mix-rowline:color-mix(in srgb,var(--nnh-line) 55%,var(--nnh-card));
--nnh-mix-rowhover:color-mix(in srgb,var(--nnh-paper) 55%,var(--nnh-card));
--nnh-shadow-card:0 4px 12px rgba(34,48,60,.06);
--nnh-shadow-btn:0 2px 6px rgba(34,51,74,.25);
--nnh-shadow-cta:0 2px 6px rgba(232,134,46,.3);
--nnh-danger:color-mix(in srgb,var(--nnh-coral) 60%,var(--nnh-ink));
--nnh-danger-tint:color-mix(in srgb,var(--nnh-coral) 12%,var(--nnh-card));
}
/* -- Buttons: full state model on the existing family -- */
.nnh-btn{gap:8px;border:1.5px solid transparent}
.nnh-btn:focus-visible{outline:2px solid var(--nnh-coral);outline-offset:2px}
.nnh-btn:active{transform:translateY(1px)}
.nnh-btn[disabled],.nnh-btn.is-disabled{opacity:.45;pointer-events:none}
.nnh-btn.primary{box-shadow:var(--nnh-shadow-btn)}
.nnh-btn.cta{background:var(--nnh-coral);color:#fff;box-shadow:var(--nnh-shadow-cta)}
.nnh-btn.cta:hover{filter:brightness(.94)}
.nnh-btn.gold{background:var(--nnh-gold);color:var(--nnh-ink)}
.nnh-btn.gold:hover{filter:brightness(.96)}
.nnh-btn.ghost{border-color:var(--nnh-line);font-weight:600}
.nnh-btn.ghost:hover{border-color:var(--nnh-ink);color:var(--nnh-ink)}
.nnh-btn.danger-quiet{background:var(--nnh-card);color:var(--nnh-danger);border-color:color-mix(in srgb,var(--nnh-danger) 30%,var(--nnh-card))}
.nnh-btn.danger-quiet:hover{background:var(--nnh-danger-tint)}
/* -- Forms: shared field treatment, focus ring, error state -- */
.nnh-form .field label,.nnh-ownerdash .field label{font-size:13px;font-weight:700;color:var(--nnh-ink)}
.nnh-form .field .hint,.nnh-ownerdash .hint{font-size:12px;color:var(--nnh-ink-soft)}
.nnh-form input[type="text"],.nnh-form input[type="email"],.nnh-form input[type="url"],.nnh-form input[type="tel"],.nnh-form input[type="date"],.nnh-form select,.nnh-form textarea,
.nnh-ownerdash input[type="text"],.nnh-ownerdash input[type="email"],.nnh-ownerdash input[type="url"],.nnh-ownerdash input[type="tel"],.nnh-ownerdash input[type="date"],.nnh-ownerdash select,.nnh-ownerdash textarea{
border:1px solid var(--nnh-line);border-radius:var(--nnh-r-md);padding:11px 14px;background:#FFFDF8;color:var(--nnh-ink);font:400 14px/1.5 var(--nnh-body,"Public Sans"),sans-serif}
.nnh-form select,.nnh-ownerdash select{font-weight:600;background:var(--nnh-card)}
.nnh-form textarea,.nnh-ownerdash textarea{min-height:96px;resize:vertical;line-height:1.6}
.nnh-form input:focus,.nnh-form select:focus,.nnh-form textarea:focus,
.nnh-ownerdash input:focus,.nnh-ownerdash select:focus,.nnh-ownerdash textarea:focus{outline:2px solid var(--nnh-coral);outline-offset:1px}
.nnh-form .is-error,.nnh-ownerdash .is-error{border-color:var(--nnh-danger) !important;background:var(--nnh-danger-tint) !important}
.error-text{font-size:12px;color:var(--nnh-danger);font-weight:600;margin-top:5px}
.nnh-form input:disabled,.nnh-ownerdash input:disabled,.nnh-ownerdash textarea:disabled{opacity:.5;background:var(--nnh-line)}
/* -- Cards -- */
.nnh-profile .sidecard,.nnh-profile .fcard,.nnh-ownerdash .odcard,.nnh-ownerdash .fcard{border:1px solid var(--nnh-line);border-radius:var(--nnh-r-lg)}
.nnh-cardlink:hover{border-color:var(--nnh-coral);box-shadow:var(--nnh-shadow-card)}
.nnh-ownerdash .odphoto-drop{border:1.5px dashed var(--nnh-line);border-radius:var(--nnh-r-lg)}
/* -- Badges -- */
.nnh-badge{display:inline-block;font:800 11px/1.4 var(--nnh-body);letter-spacing:.5px;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.nnh-badge.green{background:var(--nnh-green-tint);color:var(--nnh-green)}
.nnh-badge.blue{background:var(--nnh-sky-tint);color:var(--nnh-blue)}
.nnh-badge.gold{background:var(--nnh-gold-tint);color:var(--nnh-amber)}
.nnh-badge.gray{background:var(--nnh-mix-warm);color:var(--nnh-ink-soft)}
.nnh-badge.coral{background:var(--nnh-coral);color:#fff}
/* -- Notices (and the existing ok/err lines join the system) -- */
.nnh-notice{border-radius:var(--nnh-r-md);padding:14px 18px;font-size:13.5px;line-height:1.6;border:1px solid}
.nnh-notice.info{background:var(--nnh-sky-tint);border-color:color-mix(in srgb,var(--nnh-blue) 25%,var(--nnh-card));color:var(--nnh-ink)}
.nnh-notice.success{background:var(--nnh-green-tint);border-color:color-mix(in srgb,var(--nnh-green) 30%,var(--nnh-card));color:var(--nnh-green)}
.nnh-notice.charm{background:var(--nnh-gold-tint);border-color:color-mix(in srgb,var(--nnh-gold) 35%,var(--nnh-card));color:var(--nnh-amber)}
.nnh-notice.error{background:var(--nnh-danger-tint);border-color:color-mix(in srgb,var(--nnh-danger) 30%,var(--nnh-card));color:var(--nnh-danger)}
/* -- Tables (real tables + the contact list rows) -- */
.nnh-table{width:100%;border-collapse:collapse;font-size:13.5px}
.nnh-table th{text-align:left;font:800 10.5px/1.4 var(--nnh-body);letter-spacing:1px;text-transform:uppercase;color:var(--nnh-ink-soft);padding:10px 12px;border-bottom:1px solid var(--nnh-mix-rowline)}
.nnh-table td{padding:13px 12px;border-bottom:1px solid var(--nnh-mix-rowline);color:var(--nnh-ink);vertical-align:middle}
.nnh-table tr:hover td{background:var(--nnh-mix-rowhover)}
.nnh-ownerdash .nnh-contact-row:hover{background:var(--nnh-mix-rowhover)}
/* -- Dashboard shell: sidenav + subnav + stat typography -- */
.nnh-ownerdash .odnav-item{border-radius:var(--nnh-r-md);font-weight:600;padding:10px 14px}
.nnh-ownerdash .odnav-item:hover{background:var(--nnh-mix-warm)}
.nnh-ownerdash .odnav-item.on{background:var(--nnh-blue-deep);color:#fff;font-weight:700}
.nnh-ownerdash .odsubnav-item{padding:8px 14px 8px 28px;font-size:13px;border-radius:var(--nnh-r-md)}
.nnh-ownerdash .odsubnav-item.on{background:var(--nnh-mix-warm);color:var(--nnh-ink)}
.nnh-stat .label{font:800 10.5px/1.4 var(--nnh-body);letter-spacing:1px;text-transform:uppercase;color:var(--nnh-ink-soft)}
.nnh-stat .value{font-family:var(--nnh-display,"Bricolage Grotesque"),sans-serif;font-size:28px;font-weight:800;color:var(--nnh-ink);margin-top:6px}
/* =============================================================
v0.43.1 — PROFILE CONVERGENCE with the v4 handoff spec.
The decisive difference: v4 puts every section in a CARD.
Supersedes 0.42.1's open-section experiment. Geometry per the
handoff tokens: 1180 column, banner 280, section stack 24.
============================================================= */
/* Geometry back to spec */
.nnh-page .wrap{max-width:1120px}
.nnh-profile{max-width:1120px}
.nnh-banner{max-width:1132px;height:280px}
@media (max-width:720px){.nnh-banner{height:220px}}
.nnh-ownerdash .odbanner-preview.has-image{aspect-ratio:1132/280}
.nnh-ownerdash .odbanner-preview.has-image.is-phone{aspect-ratio:390/220}
/* v0.46.7 — sections are bare on cream (matches latest Kibbler mockup); only
content is carded (About tabs/prose, Services columns, "What it's like",
accordions, testimonials). Reviews + About prose read as plain text. */
.nnh-profile .col-main > .block,.nnh-profile > div > .block,.nnh-profile section.block{background:transparent;border:0;border-radius:0;padding:0;margin-bottom:44px}
.nnh-profile .col-main > .block:last-child{margin-bottom:0}
.nnh-profile .col-main h2,.nnh-profile section.block > h2{font-size:22px;font-weight:800;margin-bottom:0}
/* Squiggle under every section heading, same brush as the original */
.nnh-profile section.block > h2{position:relative;display:inline-block}
.nnh-profile section.block > h2::after{
content:"";position:absolute;left:0;right:-4px;bottom:-7px;height:7px;
background:url('data:image/svg+xml;utf8,') repeat-x;
background-size:80px 8px}
/* Prose fills the card (retire the 640px cap from the canvas pass) */
.nnh-profile .overview,.nnh-profile .col-main p{max-width:none}
/* Services: dotted price leaders, spec width */
.nnh-profile .svcgroup ul{max-width:480px}
.nnh-profile .svcgroup li{align-items:baseline;gap:12px}
.nnh-profile .svcgroup li .dots{flex:1;border-bottom:1px dotted var(--nnh-line);transform:translateY(-3px)}
.nnh-profile .svcgroup li em{font-weight:700}
/* Locals-know reads as the charm card */
.nnh-profile .localnote{background:var(--nnh-gold-tint);border:1px solid color-mix(in srgb,var(--nnh-gold) 35%,var(--nnh-card));border-radius:var(--nnh-r-md);padding:12px 16px;font-size:13.5px;line-height:1.6;color:var(--nnh-amber)}
/* Claimed pill gets its hairline, status reads strong green */
.nnh-phead .claimed,.nnh-phead .pclaimed{border:1px solid color-mix(in srgb,var(--nnh-green) 30%,var(--nnh-card))}
.nnh-phead .openline strong,.nnh-phead .popen{color:var(--nnh-green);font-weight:700}
/* =============================================================
v0.43.4 — hero band converges to find-local.html exactly:
flat blue, 36px title, search card. The gradient, sun ornament,
subtitle, and caption are not in the spec; hidden (reversible).
============================================================= */
.nnh-searchband{background:var(--nnh-blue);padding:56px 0 0}
.nnh-searchband .sun{display:none}
.nnh-searchband p.sub{display:none}
.nnh-searchband .caption,.nnh-searchband .tip,.nnh-searchband .searchnote{display:none}
.nnh-searchband h1{font-size:36px;margin-bottom:24px}
.nnh-searchband h1 em{color:var(--nnh-gold)}
.nnh-searchband .inner{padding-bottom:56px}
.nnh-searchband .searchbox{max-width:720px;grid-template-columns:1.4fr 1fr auto;box-shadow:0 8px 28px rgba(34,48,60,.25)}
.nnh-searchband .field label{font:800 10.5px/1.4 var(--nnh-body);letter-spacing:1px;text-transform:uppercase;color:var(--nnh-ink-soft)}
/* =============================================================
v0.43.6 — hero + mobile fixes from the 5:20 screenshot pair
============================================================= */
/* Hero title is white on the blue band, per the spec (the system
stylesheet's generic heading ink was overriding it) */
.nnh-searchband h1{color:#fff !important}
.nnh-searchband h1 em{color:var(--nnh-gold) !important}
/* Phone: search card stacks again (the 0.43.4 grid rule was
unconditional and beat the earlier stacking rule — my bug) */
@media (max-width:720px){
.nnh-searchband .searchbox{grid-template-columns:1fr}
.nnh-searchband button{width:100%;min-height:48px}
.nnh-searchband .field{border-right:0;border-bottom:1px solid var(--nnh-line);padding:8px 10px}
.nnh-searchband .field:last-of-type{border-bottom:0}
.nnh-topbar .wrap > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;font-size:12px}
}
/* =============================================================
v0.43.7 — home converges to the REAL target mockups (the owner
clarified direction: the mockups have the subtitle, the caption,
a flat band edge, and two-letter category chips)
============================================================= */
.nnh-searchband p.sub{display:block}
.nnh-searchband .skyline{display:none}
.nnh-searchband .inner{padding-bottom:64px}
.nnh-searchband .searchtip{margin:12px 2px 0;font-size:13px;font-style:italic;color:color-mix(in srgb,#fff 75%,var(--nnh-blue))}
.catcard .cic-init{display:grid;place-items:center;font:800 12.5px/1 var(--nnh-body);letter-spacing:.5px}
/* ---------- Jobs & payments pipeline (Aug 2026) ---------- */
.nnh-ownerdash .odjobs-notice{margin:0 0 14px}
.nnh-ownerdash .odjobs-list{display:flex;flex-direction:column;gap:12px}
.nnh-ownerdash .odjob{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.nnh-ownerdash .odjob-main b{font-family:var(--nnh-display);font-size:15px}
.nnh-ownerdash .odjob-svc{color:var(--nnh-ink-soft);font-size:13.5px;margin-left:6px}
.nnh-ownerdash .odjob-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px;font-size:13px;color:var(--nnh-ink-soft)}
.nnh-ownerdash .odjob-notes{margin:8px 0 0;font-size:13.5px;color:var(--nnh-ink)}
.nnh-ownerdash .odjob-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.nnh-ownerdash .odjob-new{margin-bottom:18px}
.nnh-ownerdash .odjob-new summary{font-weight:700;cursor:pointer;font-size:14px}
.nnh-ownerdash .odjob-new form{margin-top:14px}
.nnh-ownerdash .odjob-formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.nnh-ownerdash .odjobs-table td.odjob-rowactions{white-space:nowrap;text-align:right}
.nnh-ownerdash .odjob-rowactions form{display:inline-flex;gap:6px}
.nnh-ownerdash .odjob-pill{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--nnh-sky-tint);color:var(--nnh-blue)}
.nnh-ownerdash .odjob-pill.is-request{background:var(--nnh-gold-tint);color:var(--nnh-amber)}
.nnh-ownerdash .odjob-pill.is-quote{background:var(--nnh-sky-tint);color:var(--nnh-blue)}
.nnh-ownerdash .odjob-pill.is-booked{background:var(--nnh-sky-tint);color:var(--nnh-blue-dark)}
.nnh-ownerdash .odjob-pill.is-invoiced{background:var(--nnh-gold-tint);color:var(--nnh-amber)}
.nnh-ownerdash .odjob-pill.is-paid{background:var(--nnh-green-tint);color:var(--nnh-green)}
.nnh-ownerdash .odjob-pill.is-declined{background:#EFEAE0;color:var(--nnh-ink-soft)}
.nnh-ownerdash .odjob-qresp{display:inline-block;font-size:11px;font-weight:700;margin-top:3px}
.nnh-ownerdash .odjob-qresp.is-accept{color:var(--nnh-green)}
.nnh-ownerdash .odjob-qresp.is-decline{color:var(--nnh-ink-soft)}
.nnh-ownerdash .odjob-invlink{font-size:12px}
.nnh-ownerdash .odjob-pill.is-unpaid{background:var(--nnh-gold-tint);color:var(--nnh-amber)}
.nnh-ownerdash .odjob-pill.is-free{background:#EFEAE0;color:var(--nnh-ink-soft)}
.nnh-ownerdash .odjob-booked{display:inline-block;font-size:11.5px;font-weight:600;color:var(--nnh-blue-dark);white-space:nowrap}
.nnh-ownerdash .odjob-dateedit{font-size:12px;padding:3px 6px;border:1px solid var(--nnh-line,#dcd6c8);border-radius:6px;max-width:150px}
.nnh-ownerdash .odaction-row input[readonly]{background:#f3efe6;color:var(--nnh-ink-soft);cursor:not-allowed}
.nnh-ownerdash .nnh-empty-soft{text-align:center;color:var(--nnh-ink-soft)}
.nnh-ownerdash .nnh-empty-soft strong{display:block;font-family:var(--nnh-display);font-size:15px;color:var(--nnh-ink);margin-bottom:4px}
/* Bookings calendar */
.nnh-ownerdash .odbookings-grid{display:grid;grid-template-columns:1fr 300px;gap:18px;margin-bottom:18px;align-items:start}
.nnh-ownerdash .odcal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.nnh-ownerdash .odcal-head b{font-family:var(--nnh-display);font-size:16px}
.nnh-ownerdash .odcal-nav{width:30px;height:30px;display:inline-grid;place-items:center;border:1px solid var(--nnh-line);border-radius:8px;color:var(--nnh-ink);font-size:18px;line-height:1}
.nnh-ownerdash .odcal-nav:hover{border-color:var(--nnh-blue);color:var(--nnh-blue);text-decoration:none}
.nnh-ownerdash .odcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.nnh-ownerdash .odcal-dow{text-align:center;font-size:11px;font-weight:700;color:var(--nnh-ink-soft);text-transform:uppercase;letter-spacing:.04em;padding-bottom:4px}
.nnh-ownerdash .odcal-cell{position:relative;aspect-ratio:1;border:1px solid var(--nnh-line);border-radius:8px;padding:5px;display:flex;flex-direction:column;justify-content:space-between}
.nnh-ownerdash .odcal-cell.is-empty{border:0}
.nnh-ownerdash .odcal-cell.is-today{border-color:var(--nnh-blue);box-shadow:inset 0 0 0 1px var(--nnh-blue)}
.nnh-ownerdash .odcal-cell.has-job{background:var(--nnh-sky-tint);border-color:var(--nnh-blue)}
.nnh-ownerdash .odcal-num{font-size:12px;color:var(--nnh-ink-soft)}
.nnh-ownerdash .odcal-dot{align-self:flex-end;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--nnh-blue);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
@media (max-width:900px){.nnh-ownerdash .odbookings-grid{grid-template-columns:1fr}.nnh-ownerdash .odjob-formgrid{grid-template-columns:1fr}}
/* Message source chip (chat vs form reply) */
.nnh-ownerdash .nnh-message-src{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 7px;border-radius:999px;vertical-align:middle;margin-left:4px}
.nnh-ownerdash .nnh-message-src.is-chat{background:var(--nnh-sky-tint);color:var(--nnh-blue)}
.nnh-ownerdash .nnh-message-src.is-form{background:var(--nnh-gold-tint);color:var(--nnh-amber)}
.nnh-ownerdash .nnh-msg-filters{margin:0 0 16px}
.nnh-ownerdash .nnh-message-src.is-campaign{background:var(--nnh-green-tint);color:var(--nnh-green)}
.nnh-ownerdash .nnh-message-src.is-auto{background:color-mix(in srgb,var(--nnh-line) 45%,#fff);color:var(--nnh-ink-soft)}
.nnh-ownerdash .nnh-message-sent.is-customer{background:var(--nnh-gold-tint)}
/* Threaded conversation: latest on top, earlier collapsed */
.nnh-ownerdash .nnh-thread-latest{font-size:13.5px}
.nnh-ownerdash .nnh-thread-history{margin:2px 0 10px}
.nnh-ownerdash .nnh-thread-history summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--nnh-blue);list-style:none;padding:2px 0}
.nnh-ownerdash .nnh-thread-history summary::-webkit-details-marker{display:none}
.nnh-ownerdash .nnh-thread-history summary::before{content:"▸ "}
.nnh-ownerdash .nnh-thread-history[open] summary::before{content:"▾ "}
.nnh-ownerdash .nnh-thread-history[open] summary{margin-bottom:8px}
/* Campaign label + message search */
.nnh-ownerdash .nnh-message-campaign{color:var(--nnh-amber);font-weight:600}
.nnh-ownerdash .nnh-msg-search{width:100%;max-width:340px;margin:10px 0 4px;border:1px solid var(--nnh-line);border-radius:10px;padding:8px 12px;font:400 13.5px var(--nnh-body);color:var(--nnh-ink);background:#fff}
/* Audience segmentation — compose "Who gets this" + contact tags + opt-in extras */
.nnh-seg{border:1px solid var(--nnh-gold-border);border-radius:10px;padding:12px 14px;margin:0 0 14px;background:var(--nnh-coral-tint)}
.nnh-seg > legend{font-weight:700;color:var(--nnh-blue-deep);padding:0 6px}
.nnh-seg .opt{font-weight:400;color:var(--nnh-amber);font-size:.85em}
.nnh-seg-group{margin:8px 0}
.nnh-seg-label{display:block;font-weight:600;font-size:.9em;color:var(--nnh-blue-deep);margin-bottom:4px}
.nnh-seg-chips{display:flex;flex-wrap:wrap;gap:6px}
.nnh-seg-chip{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--nnh-gold-border);border-radius:999px;padding:4px 11px;font-size:.9em;cursor:pointer;user-select:none}
.nnh-seg-chip:hover{border-color:var(--nnh-coral)}
.nnh-seg-chip input{margin:0}
.nnh-seg-count{margin:10px 0 0;font-weight:600;color:var(--nnh-blue)}
.nnh-seg-count.is-zero{color:#b02a2a}
.nnh-seg-empty{margin:4px 0 0}
/* Contact row: town + interest tags inside the expandable panel */
.nnh-contact-tags{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-start;margin:0 0 8px}
.nnh-contact-townfield{display:flex;flex-direction:column;gap:3px;font-size:.85em;font-weight:600;color:var(--nnh-blue-deep)}
.nnh-contact-townfield input{font-weight:400}
.nnh-contact-intfield{display:flex;flex-direction:column;gap:4px;font-size:.85em;font-weight:600;color:var(--nnh-blue-deep)}
/* Public opt-in extra fields */
.nnh-sub-extra{margin:6px 0 0;padding:8px 10px;border-left:3px solid var(--nnh-gold-border);background:var(--nnh-coral-tint);border-radius:0 8px 8px 0}
.nnh-sub-ints{display:flex;flex-wrap:wrap;gap:6px}
/* Contacts: Contacts | Lists view toggle */
.nnh-ct-views{display:inline-flex;gap:4px;background:#EFE7DA;border-radius:999px;padding:4px;margin:0 0 14px}
.nnh-ct-viewbtn{border:0;background:transparent;padding:6px 18px;border-radius:999px;font-weight:600;color:var(--nnh-blue-deep);cursor:pointer}
.nnh-ct-viewbtn.on{background:#fff;color:var(--nnh-blue);box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* Lists view */
.nnh-list-section{margin:18px 0 8px;color:var(--nnh-blue-deep);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.nnh-list-cards{display:flex;flex-direction:column;gap:8px}
.nnh-list-row{position:relative;background:#fff;border:1px solid var(--nnh-gold-border);border-radius:10px;padding:10px 14px}
.nnh-list-detail{width:100%;min-width:0}
.nnh-list-detail > summary{cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:600;color:var(--nnh-blue-deep);list-style:none;padding-right:340px}
.nnh-list-detail > summary::-webkit-details-marker{display:none}
.nnh-list-detail > summary::before{content:"▸";color:var(--nnh-amber);font-size:.85em;transition:transform .15s}
.nnh-list-detail[open] > summary::before{transform:rotate(90deg)}
.nnh-list-name{font-size:1.02em}
.nnh-list-count{background:var(--nnh-coral-tint);color:var(--nnh-amber);font-weight:700;border-radius:999px;padding:1px 10px;font-size:.85em}
.nnh-list-actions{position:absolute;top:10px;right:14px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.nnh-list-detail > summary{padding-right:0}.nnh-list-actions{position:static;margin-top:10px;justify-content:flex-start}}
/* Contacts: visible meta line (source/town/interests/activity) + column toggle */
.nnh-ownerdash .nnh-contact-idcol{min-width:0;display:flex;flex-direction:column;gap:2px}
.nnh-ownerdash .nnh-cmeta{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.nnh-ownerdash .nnh-cmeta-item{font-size:11px;line-height:1.5;padding:1px 8px;border-radius:999px;background:#eef1f4;color:var(--nnh-ink-soft);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.nnh-ownerdash .nnh-cmeta-item.cmeta-int{background:var(--nnh-coral-tint);color:var(--nnh-amber);font-weight:600}
.nnh-ownerdash .nnh-cmeta-item.cmeta-town{background:#e7f0f7;color:var(--nnh-sky)}
.nnh-ownerdash .nnh-cmeta-item.cmeta-activity{background:transparent;color:#9aa4ae;padding-left:2px}
.nnh-ownerdash .nnh-cmeta-item.cmeta-untagged,.nnh-ownerdash .nnh-cmeta-item.cmeta-empty{border:1px dashed var(--nnh-gold-border);background:transparent;color:var(--nnh-amber);cursor:pointer;font-weight:600}
.nnh-ownerdash .nnh-cmeta-item.cmeta-empty:hover{border-color:var(--nnh-coral);color:var(--nnh-coral)}
.nnh-ownerdash [data-nnh-contact-table].hide-src .cmeta-src,
.nnh-ownerdash [data-nnh-contact-table].hide-town .cmeta-town,
.nnh-ownerdash [data-nnh-contact-table].hide-int .cmeta-int,
.nnh-ownerdash [data-nnh-contact-table].hide-activity .cmeta-activity{display:none}
/* Columns popover */
.nnh-ownerdash .nnh-ct-colmenu{position:relative}
.nnh-ownerdash .nnh-ct-colbtn{border:1px solid #d4dce4;background:#fff;border-radius:999px;padding:6px 14px;font:700 12px var(--nnh-body);color:var(--nnh-blue-deep);cursor:pointer}
.nnh-ownerdash .nnh-ct-colpop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:#fff;border:1px solid var(--nnh-gold-border);border-radius:10px;box-shadow:0 8px 28px rgba(13,42,64,.16);padding:10px 12px;display:flex;flex-direction:column;gap:7px;min-width:170px}
.nnh-ownerdash .nnh-ct-colpop[hidden]{display:none}
.nnh-ownerdash .nnh-ct-colpop label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--nnh-blue-deep);cursor:pointer}
/* Lists: mailable indicator */
.nnh-ownerdash .nnh-list-count.is-split{background:#e7f0f7;color:var(--nnh-sky)}
.nnh-ownerdash .nnh-list-mailable{font-size:11px;color:var(--nnh-ink-soft);font-weight:500;margin-left:2px}
.nnh-ownerdash .nnh-list-members li.not-sub{opacity:.7}
.nnh-ownerdash .nnh-list-nosub{font-size:10.5px;color:#9aa4ae;border:1px solid #e0e5ea;border-radius:999px;padding:0 7px;margin-left:6px}
.nnh-ownerdash .nnh-list-mmeta{font-size:11px;color:var(--nnh-ink-soft);margin-left:6px}
@media(max-width:620px){
.nnh-ownerdash .nnh-cell-source,.nnh-ownerdash .nnh-cell-town,.nnh-ownerdash .nnh-cell-service,.nnh-ownerdash .nnh-cell-activity{flex:1 1 45%}
.nnh-ownerdash .nnh-cell-status,.nnh-ownerdash .nnh-cell-actions{flex:1 1 100%;justify-content:flex-start}
}
/* Top prospects list */
.nnh-ownerdash .nnh-prospect-cards{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.nnh-ownerdash .nnh-prospect-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--nnh-gold-border);border-radius:10px;padding:10px 14px}
.nnh-ownerdash .nnh-prospect-rank{width:28px;height:28px;border-radius:50%;background:#e7edf2;color:var(--nnh-blue-deep);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.nnh-ownerdash .nnh-prospect-rank.is-top{background:var(--nnh-coral);color:#fff}
.nnh-ownerdash .nnh-prospect-main{min-width:0}
.nnh-ownerdash .nnh-prospect-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nnh-ownerdash .nnh-prospect-top b{font-size:13.5px}
.nnh-ownerdash .nnh-prospect-top small{color:var(--nnh-ink-soft);font-size:12px}
.nnh-ownerdash .nnh-prospect-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.nnh-ownerdash .nnh-prospect-value{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nnh-ownerdash .nnh-prospect-est{font-weight:800;color:#21663d;font-size:1.06em;white-space:nowrap}
@media(max-width:640px){.nnh-ownerdash .nnh-prospect-row{grid-template-columns:28px 1fr}.nnh-ownerdash .nnh-prospect-value{grid-column:2;justify-content:flex-start;margin-top:2px}}
/* Lists: CRM-style member table (name/phone/email/service/opt-in/created/lifecycle/retention) */
.nnh-ownerdash .nnh-lmembers-wrap{overflow-x:auto;margin:8px 0 2px;border:1px solid #eef1f4;border-radius:8px}
.nnh-ownerdash .nnh-lmembers{width:100%;border-collapse:collapse;font-size:12px;min-width:760px}
.nnh-ownerdash .nnh-lmembers th{text-align:left;padding:7px 10px;color:var(--nnh-ink-soft);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid #e8edf1;white-space:nowrap;background:rgba(255,255,255,.5)}
.nnh-ownerdash .nnh-lmembers td{padding:7px 10px;border-bottom:1px solid #f0f3f5;vertical-align:middle;white-space:nowrap}
.nnh-ownerdash .nnh-lmembers tr:last-child td{border-bottom:0}
.nnh-ownerdash .nnh-lmembers td b{font-size:12.5px;color:var(--nnh-blue-deep)}
.nnh-ownerdash .nnh-lmembers .nnh-svc-chip{margin:1px 0}
.nnh-ownerdash .nnh-mut{color:#b6bec6}
.nnh-ownerdash .nnh-lmembers a{color:var(--nnh-blue);font-weight:700}
.nnh-ownerdash .nnh-optin,.nnh-ownerdash .nnh-life,.nnh-ownerdash .nnh-ret{font-size:11px;font-weight:600;padding:1px 9px;border-radius:999px;white-space:nowrap}
.nnh-ownerdash .nnh-optin-in{background:#eef7f1;color:#21663d}
.nnh-ownerdash .nnh-optin-no{background:#eef1f4;color:#6b7683}
.nnh-ownerdash .nnh-optin-out{background:#fdecea;color:#b02a2a}
.nnh-ownerdash .nnh-life-new{background:#fff1eb;color:#bd533a}
.nnh-ownerdash .nnh-life-contacted{background:#eef6fc;color:#126ca8}
.nnh-ownerdash .nnh-life-customer{background:#eef7f1;color:#21663d}
.nnh-ownerdash .nnh-ret-good{background:#eef7f1;color:#21663d}
.nnh-ownerdash .nnh-ret-warn{background:#fdf2e2;color:#a8620d}
.nnh-ownerdash .nnh-ret-info{background:#eef1f4;color:#4a5560}
/* Activity trail (contact Edit panel) + Email series labels */
.nnh-ownerdash .nnh-trail{flex:0 0 100%;width:100%;margin-top:8px;border-top:1px dashed #e0e5ea;padding-top:8px}
.nnh-ownerdash .nnh-trail-head{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--nnh-ink-soft);margin-bottom:5px}
.nnh-ownerdash .nnh-trail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.nnh-ownerdash .nnh-trail li{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--nnh-blue-deep)}
.nnh-ownerdash .nnh-trail time{color:var(--nnh-ink-soft);white-space:nowrap;font-size:11px}
.nnh-ownerdash .nnh-trigger-label{margin:0 0 10px;color:var(--nnh-blue-deep)}
.nnh-ownerdash .nnh-enroll{margin:0 0 14px}
.nnh-ownerdash .nnh-enroll-locked{opacity:.55}
.nnh-ownerdash .nnh-series-dormant{opacity:.72}
.nnh-ownerdash .nnh-soon{font-size:11px;font-weight:700;color:var(--nnh-amber);background:var(--nnh-coral-tint);border-radius:999px;padding:1px 9px;vertical-align:middle;text-transform:none;letter-spacing:0}
/* Owner: setup checklist, away block, job email opt-in */
.nnh-ownerdash .nnh-nextstep{margin:0 0 18px;border:1.5px solid var(--nnh-gold-line)}
.nnh-ownerdash .nnh-nextstep h3{display:flex;align-items:center;gap:10px}
.nnh-ownerdash .nnh-next-count{font-size:11.5px;font-weight:600;color:var(--nnh-amber);background:var(--nnh-coral-tint);border-radius:999px;padding:2px 10px}
.nnh-ownerdash .nnh-checklist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:none}
.nnh-ownerdash .nnh-checklist li{display:flex;align-items:center;gap:10px;font-size:14px;padding:5px 0}
.nnh-ownerdash .nnh-checklist .nnh-check{width:20px;text-align:center;color:var(--nnh-blue)}
.nnh-ownerdash .nnh-checklist li.is-done{opacity:.5}
.nnh-ownerdash .nnh-checklist li.is-done .nnh-check{color:var(--nnh-good,#2e7a52)}
.nnh-ownerdash .nnh-checklist a{font-weight:600}
.nnh-ownerdash .nnh-nextdone{margin:0 0 16px;font-weight:600;color:#2e7a52}
.nnh-ownerdash .nnh-away-block{margin-top:14px;border-top:1px dashed #e0e5ea;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.nnh-ownerdash .odjob-emailopt{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--nnh-ink-soft);margin-right:8px}
/* Earned "Quick to reply" badge (public) — positive-only, badge-green */
.nnh-replybadge{display:inline-flex;align-items:center;gap:5px;background:#e7f1ea;color:#216b41;border:1px solid #bfe0cd;border-radius:999px;padding:2px 11px;font-size:12.5px;font-weight:600;line-height:1.5;white-space:nowrap}
.nnh-replybadge::before{content:"⚡";font-size:11px}
/* Owner private line + badges panel + milestones */
.nnh-ownerdash .nnh-reply-private{margin:0 0 14px;font-size:13.5px;color:var(--nnh-ink-soft);background:var(--nnh-surface-2,#fbf8f1);border-left:3px solid var(--nnh-gold-border);border-radius:0 8px 8px 0;padding:9px 14px;max-width:72ch}
.nnh-ownerdash .nnh-badges-card{margin:0 0 18px}
.nnh-ownerdash .nnh-badgelist{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.nnh-ownerdash .nnh-badgerow{border:1px solid var(--nnh-line,#e6e0d3);border-radius:10px;padding:12px 14px}
.nnh-ownerdash .nnh-badgerow.is-earned{background:#f2f8f4;border-color:#cfe6d8}
.nnh-ownerdash .nnh-badgerow-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.nnh-ownerdash .nnh-badgechip{font-weight:700;color:var(--nnh-blue-deep);font-size:14px}
.nnh-ownerdash .nnh-badgerow.is-earned .nnh-badgechip{color:#216b41}
.nnh-ownerdash .nnh-badge-onpage{font-size:11.5px;font-weight:600;color:#216b41}
.nnh-ownerdash .nnh-badge-criteria{margin:6px 0 0;font-size:13px;color:var(--nnh-ink-soft)}
.nnh-ownerdash .nnh-badge-progress{height:5px;border-radius:999px;background:#ece6da;margin:9px 0 0;overflow:hidden}
.nnh-ownerdash .nnh-badge-progress span{display:block;height:100%;background:var(--nnh-gold,#c99a3a);border-radius:999px}
.nnh-ownerdash .nnh-badge-note{margin:6px 0 0;font-size:12px;color:var(--nnh-ink-soft)}
.nnh-ownerdash .nnh-milestone{display:flex;align-items:center;gap:12px;justify-content:space-between;background:#f2f8f4;border:1px solid #cfe6d8;border-radius:10px;padding:11px 14px;margin:0 0 16px;font-size:14px;color:#1f5a38;font-weight:600}
.nnh-ownerdash .nnh-milestone-x{border:0;background:transparent;color:#5a8a6e;font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.nnh-ownerdash .nnh-milestone form{margin:0}
/* Stripe Connect wizard (Payment settings) */
.nnh-ownerdash .nnh-connect-card{margin:0 0 18px;border:1px solid var(--nnh-gold-border);background:var(--nnh-coral-tint)}
.nnh-ownerdash .nnh-connect-card h2{color:var(--nnh-blue-deep)}
.nnh-ownerdash .nnh-connect-ready{font-weight:600;color:#216b41;background:#f2f8f4;border:1px solid #cfe6d8;border-radius:10px;padding:11px 14px;margin:6px 0 12px}
.nnh-ownerdash .nnh-connect-prep{margin:12px 0 4px;font-weight:600;color:var(--nnh-blue-deep);font-size:13.5px}
.nnh-ownerdash .nnh-connect-checklist{margin:0 0 14px;padding:0 0 0 4px;list-style:none;display:flex;flex-direction:column;gap:5px}
.nnh-ownerdash .nnh-connect-checklist li{padding-left:22px;position:relative;color:var(--nnh-ink-soft);font-size:14px}
.nnh-ownerdash .nnh-connect-checklist li::before{content:"";position:absolute;left:3px;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--nnh-coral);transform:rotate(45deg)}
.nnh-ownerdash .nnh-connect-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
/* Voice listing wizard (v0.44.51) */
/* v0.47.0 — "Write it with AI" invite: gold banner matching the Listing
Editor mockup (was a green card with a phone screenshot). */
.odvoice-card{background:var(--nnh-gold-tint);border:1px solid var(--nnh-gold-line)}
.odvoice-card h3{margin-top:0;font-size:15px;font-weight:800;color:var(--nnh-ink-strong,#1C2B40)}
.odvoice-card .description{max-width:62ch;color:#7A5A1E;font-size:13px;line-height:1.6}
.odvoice-controls{display:flex;flex-direction:column;gap:8px;flex:0 0 auto;align-items:flex-start}
.odvoice-mic-hint{font-size:12px;line-height:1.5;color:#7A5A1E;max-width:230px}
.odvoice-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.odvoice-rec{background:#0b6b53;border-color:#0b6b53;color:#fff}
.odvoice-rec:hover{background:#095843;border-color:#095843}
.odvoice-rec.is-recording{background:#b3261e;border-color:#b3261e;animation:odvoice-pulse 1.3s ease-in-out infinite}
@keyframes odvoice-pulse{0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.45)}50%{box-shadow:0 0 0 8px rgba(179,38,30,0)}}
.odvoice-status{font-size:.92em;color:#4a5a4d}
.odvoice-transcript{margin-top:14px;padding:12px 14px;background:#fff;border:1px solid #e2e2e2;border-radius:8px}
.odvoice-transcript label{display:block;font-size:.78em;text-transform:uppercase;letter-spacing:.05em;color:#6b7c6e;margin-bottom:4px}
.odvoice-transcript-text{white-space:pre-wrap;line-height:1.5}
.odvoice-filled{animation:odvoice-flash 2.2s ease-out;border-color:#0b6b53 !important;box-shadow:0 0 0 2px rgba(11,107,83,.18)}
@keyframes odvoice-flash{0%{background:#e7f4ea}100%{background:#fff}}
@media (prefers-reduced-motion:reduce){.odvoice-rec.is-recording{animation:none}.odvoice-filled{animation:none}}
/* Per-field voice mics (v0.44.52) */
/* v0.46.9 — voice "Say it" buttons match the Listing Editor mockup: an amber
text button, not a green pill (green is reserved for success/live/consent). */
.nnh-vmic-wrap{display:inline-flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.nnh-vmic{background:transparent;border:0;padding:0;border-radius:0;box-shadow:none;min-height:0;color:var(--nnh-gold-ink,#B8791E);font-weight:700;font-size:12.5px}
.nnh-vmic:hover{background:transparent;color:#8F5D14;text-decoration:none}
.nnh-vmic.is-recording{background:transparent;border:0;color:var(--nnh-coral);animation:odvoice-pulse 1.3s ease-in-out infinite}
.nnh-vmic-status{font-size:.85em;color:var(--nnh-ink-soft)}
@media (prefers-reduced-motion:reduce){.nnh-vmic.is-recording{animation:none}}
/* Guided voice wizard modal (v0.44.53) */
.odvwiz-overlay{position:fixed;inset:0;z-index:9999;background:rgba(16,32,24,.55);align-items:center;justify-content:center;padding:20px}
.odvwiz-overlay[hidden]{display:none!important}
.odvwiz-overlay:not([hidden]){display:flex}
.odvwiz-modal{position:relative;background:#fff;border-radius:14px;max-width:560px;width:100%;padding:28px 26px 22px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
.odvwiz-close{position:absolute;top:10px;right:14px;border:0;background:none;font-size:28px;line-height:1;color:#8a978c;cursor:pointer;padding:4px 8px}
.odvwiz-close:hover{color:#333}
.odvwiz-progress{font-size:.82em;letter-spacing:.04em;text-transform:uppercase;color:#6b7c6e}
.odvwiz-bar{height:5px;background:#e7ede8;border-radius:3px;margin:8px 0 18px;overflow:hidden}
.odvwiz-bar-fill{height:100%;background:#0b6b53;width:0;transition:width .3s ease}
.odvwiz-q{margin:0 0 6px;font-size:1.35em;line-height:1.25}
.odvwiz-hint{margin:0 0 18px;color:#5a6a5d;line-height:1.5}
.odvwiz-rec-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.odvwiz-rec{background:#0b6b53;border-color:#0b6b53;color:#fff}
.odvwiz-rec:hover{background:#095843;border-color:#095843}
.odvwiz-rec.is-recording{background:#b3261e;border-color:#b3261e;animation:odvoice-pulse 1.3s ease-in-out infinite}
.odvwiz-status{font-size:.9em;color:#4a5a4d}
.odvwiz-answer{margin-top:16px;padding:12px 14px;background:#f3f8f4;border:1px solid #d5e5d8;border-radius:8px}
.odvwiz-answer label{display:block;font-size:.76em;text-transform:uppercase;letter-spacing:.05em;color:#6b7c6e;margin-bottom:4px}
.odvwiz-answer-text{white-space:pre-wrap;line-height:1.5}
.odvwiz-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.odvwiz-nav #odvwiz-back{margin-right:auto}
@media (prefers-reduced-motion:reduce){.odvwiz-rec.is-recording{animation:none}.odvwiz-bar-fill{transition:none}}
@media (max-width:520px){.odvwiz-modal{padding:22px 16px 16px}.odvwiz-q{font-size:1.18em}}
.odvwiz-fills{margin:0 0 8px;font-size:.85em;color:#0b6b53}
.odvwiz-fills b{font-weight:700}
.odvwiz-utility{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #eef0ee;flex-wrap:wrap}
.odvwiz-utility-right{display:flex;gap:8px;flex-wrap:wrap}
.odvwiz-link{background:none;border:0;color:#6b7c6e;cursor:pointer;text-decoration:underline;font-size:.88em;padding:4px}
.odvwiz-link:hover{color:#b3261e}
/* Signup "more than a listing" add-on preview (v0.44.63) */
.nnh-more-card{border-left:3px solid var(--nnh-accent,#C0602C)}
.nnh-more-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.nnh-more-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:#fff;border:1px solid #e5decd;border-radius:10px}
.nnh-more-item strong{display:block;font-size:1.02em}
.nnh-more-item span{color:#6c7a73;font-size:.9em}
.nnh-more-item b{white-space:nowrap;color:#0b6b53;font-size:1em}
.nnh-more-empty{color:#6c7a73;margin:6px 0}
.nnh-addon-cycle,.nnh-more-cycle{font-weight:500;font-size:.8em;color:#6c7a73}
.nnh-more-item{cursor:pointer}
.nnh-more-item input[type=checkbox]{flex:0 0 auto;margin:2px 0 0}
.nnh-more-body{display:flex;flex-direction:column;flex:1}
/* New-owner welcome banner after paid signup (v0.44.72) */
.odwelcome{background:linear-gradient(180deg,#eef7f0,#fff);border:1px solid #cfe6d5;border-left:4px solid #0b6b53;border-radius:12px;padding:18px 22px;margin:0 0 20px}
.odwelcome h2{margin:0 0 6px;font-size:1.2em}
.odwelcome p{margin:0;color:#3d4c47;max-width:66ch;line-height:1.5}
/* Plan-card switch buttons open the billing portal (v0.44.75) */
.nnh-plan-cta form{width:100%;margin:0}
button.nnh-plan-choose-btn{width:100%;cursor:pointer;font:inherit;display:block}
/* Make [hidden] win over the flex/inline display on wizard rows (v0.44.81) */
.odvwiz-rec-row[hidden],.odvwiz-utility[hidden],.odvwiz-nav button[hidden]{display:none!important}
/* Fill-it-in-by-talking: text left, mic-permission thumbnail right (v0.44.82) */
.odvoice-card{display:flex;gap:24px;align-items:center;padding:18px 22px}
.odvoice-main{flex:1;min-width:0}
.odvoice-shot{flex:0 0 190px;margin:0;text-align:center}
.odvoice-shot img{width:100%;height:auto;border:1px solid #d5e5d8;border-radius:10px;box-shadow:0 4px 14px rgba(23,42,40,.10);display:block}
.odvoice-shot figcaption{margin-top:8px;font-size:.8em;color:#6c7a73;line-height:1.35}
@media (max-width:640px){.odvoice-card{flex-direction:column}.odvoice-shot{flex-basis:auto;max-width:200px}}
/* Mobile fixes: public profile columns stack; top bar tidies (v0.44.85) */
@media (max-width:820px){
.nnh-profile{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
.nnh-profile .svc{grid-template-columns:1fr}
}
@media (max-width:640px){
.nnh-topbar .wrap{flex-wrap:wrap;justify-content:center;gap:2px 14px;text-align:center}
.nnh-topbar .hello{display:none} /* decorative tagline — hide on phones so the links breathe */
.nnh-topbar .links{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px}
.nnh-topbar .links a{margin-left:0}
}
/* Profile mobile: drop the header action buttons (the sticky .mobilebar covers
Call/Directions/Website/Save) and the duplicate embedded map (v0.44.86) */
@media (max-width:640px){
.nnh-phead .pacts{display:none}
.nnh-profile .mapbox{display:none}
}
/* =============================================================
v0.47.1 — Listing Editor match (Listing Editor.dc.html, export 7)
Additive only: nothing existing is removed or overridden away.
============================================================= */
/* Save bar: the mockup fixes it to the viewport with the row aligned
to the 1120 content column (mockup L461-469). */
.nnh-ownerdash .odsavebar {
position: fixed; left: 0; right: 0; bottom: 0; top: auto;
margin: 0; padding: 0; z-index: 50;
background: #FFFFFF;
border-top: 1px solid #EAE2D3;
box-shadow: 0 -6px 16px rgba(34,51,74,.08);
backdrop-filter: none;
}
.nnh-ownerdash .odsavebar-inner {
max-width: 1120px; margin: 0 auto; padding: 14px 32px;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.nnh-ownerdash .odsavebar .small { font-size: 13px; color: #5C6B82; }
/* Clear the fixed bar so the last card is never hidden behind it (mockup L66). */
.nnh-ownerdash form.nnh-form { padding-bottom: 96px; }
/* Plain helper line under a field — grey, not the amber-italic .charm
treatment, which the mockup reserves for coaching notes (L275, L291,
L340, L446, L453). */
.nnh-ownerdash .nnh-help {
display: block; margin-top: 5px;
font-size: 12px; font-style: normal; line-height: 1.5; color: #5C6B82;
}
/* "Also known as" now sits full-width in Contact & hours (mockup L342-351). */
.nnh-ownerdash .odaka-field { grid-column: 1 / -1; }
@media (max-width: 720px) {
.nnh-ownerdash .odsavebar-inner { padding: 12px 20px; flex-direction: column; align-items: stretch; gap: 10px; }
}
/* -------------------------------------------------------------
v0.47.2 — Listing Editor: the amber tab attached under a field.
From the 2026-09-07 15:05 mockup revision: the voice + AI controls
left the label row and became a joined amber tab welded to the
bottom-right of the textarea, which squares off that one corner.
------------------------------------------------------------- */
.nnh-ownerdash .nnh-tabfield > label { padding-right: 0; }
.nnh-ownerdash .nnh-tabfield textarea {
display: block;
border-radius: 10px 10px 0 10px; /* bottom-right squared to meet the tab */
margin-bottom: 0;
}
.nnh-ownerdash .nnh-fieldfoot {
position: relative;
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
margin-top: 0;
}
.nnh-ownerdash .nnh-fieldfoot .nnh-help { margin-top: 5px; }
.nnh-ownerdash .nnh-aitabs {
display: flex; gap: 0; flex-shrink: 0; align-items: stretch;
border: 1px solid #F0DDB8; border-top: none; border-radius: 0 0 10px 10px;
background: #FDF3E0; overflow: hidden;
}
/* Mockup order is [🎤 Say it | ✍ Rewrite with AI]; the mic is injected
after the AI button, so flip it visually rather than rewire the JS. */
.nnh-ownerdash .nnh-aitabs .nnh-vmic-wrap { order: -1; display: flex; align-items: center; }
.nnh-ownerdash .nnh-aitabs .nnh-ai,
.nnh-ownerdash .nnh-aitabs .nnh-vmic {
background: none !important; border: 0 !important; border-radius: 0 !important;
box-shadow: none !important; margin: 0 !important;
padding: 8px 16px !important;
font-size: 12.5px; font-weight: 700; color: #B8791E !important; cursor: pointer;
}
.nnh-ownerdash .nnh-aitabs .nnh-ai:hover,
.nnh-ownerdash .nnh-aitabs .nnh-vmic:hover { background: #F8E8C8 !important; color: #B8791E !important; }
.nnh-ownerdash .nnh-aitabs .nnh-vmic.is-recording { color: #A65D4E !important; background: #FBEAE6 !important; }
/* divider between the two tabs */
.nnh-ownerdash .nnh-aitabs .nnh-ai { border-left: 1px solid #F0DDB8 !important; }
.nnh-ownerdash .nnh-aitabs .nnh-vmic-wrap:only-child + .nnh-ai,
.nnh-ownerdash .nnh-aitabs .nnh-ai:only-child { border-left: 0 !important; }
/* recording status sits under the tab, not inside it */
.nnh-ownerdash .nnh-aitabs .nnh-vmic-status {
position: absolute; right: 0; top: 100%; margin-top: 4px;
font-size: 11.5px; color: #A65D4E; white-space: nowrap;
}
@media (max-width: 720px) {
.nnh-ownerdash .nnh-fieldfoot { flex-direction: column; align-items: stretch; }
.nnh-ownerdash .nnh-aitabs { align-self: flex-end; }
}
/* -------------------------------------------------------------
v0.47.3 — Overview: "Your next step" + "Your badges" to match
My Business.dc.html (values lifted from the mockup markup).
------------------------------------------------------------- */
/* --- Your next step (mockup L226-244) --- */
.nnh-ownerdash .nnh-nextstep {
background: #FFFFFF; border: 1.5px solid #F0DDB8; border-radius: 14px; padding: 20px 24px;
}
.nnh-ownerdash .nnh-nextstep h3 { font-size: 16px; font-weight: 800; color: #1C2B40; margin: 0; }
.nnh-ownerdash .nnh-nextstep .nnh-next-count {
background: none; border: 0; padding: 0; margin-left: 4px;
font-size: 12.5px; font-weight: 600; color: #5C6B82;
}
.nnh-ownerdash .nnh-nextstep .nnh-next-count::before { content: "— "; }
.nnh-ownerdash .nnh-checklist {
list-style: none; margin: 14px 0 0; padding: 0;
display: flex; flex-direction: column; gap: 9px;
}
.nnh-ownerdash .nnh-checklist li {
display: flex; align-items: center; gap: 10px; margin: 0; padding: 0;
}
.nnh-ownerdash .nnh-checklist li::marker { content: none; }
.nnh-ownerdash .nnh-checklist .nnh-check {
width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center;
font-size: 11px; font-weight: 800;
background: #FDF1DC; color: #B8791E; /* pending: numbered amber */
}
.nnh-ownerdash .nnh-checklist li.is-done .nnh-check {
background: #EAF3E6; color: #3E7A34; /* done: green tick */
}
.nnh-ownerdash .nnh-checklist li a { font-size: 13.5px; font-weight: 700; color: #1C2B40; text-decoration: none; }
.nnh-ownerdash .nnh-checklist li a:hover { color: #1F6FA8; text-decoration: underline; }
.nnh-ownerdash .nnh-checklist li.is-done > span:not(.nnh-check) { font-size: 13.5px; font-weight: 500; color: #8C97A8; }
.nnh-ownerdash .nnh-checklist .nnh-donext {
font-size: 11px; font-weight: 800; letter-spacing: .5px; color: #E8862E; white-space: nowrap;
}
/* --- Your badges (mockup L246-266): hairline rows, not boxes --- */
.nnh-ownerdash .nnh-badges-card {
background: #FFFFFF; border: 0; border-radius: 14px; padding: 20px 24px;
box-shadow: 0 1px 3px rgba(34,51,74,.07);
display: flex; flex-direction: column; gap: 12px;
}
.nnh-ownerdash .nnh-badges-card h3 { font-size: 16px; font-weight: 800; color: #1C2B40; margin: 0; }
.nnh-ownerdash .nnh-badges-card > .hint { font-size: 12px; color: #5C6B82; margin: 0; }
.nnh-ownerdash .nnh-badgelist { display: flex; flex-direction: column; gap: 12px; }
.nnh-ownerdash .nnh-badgerow {
background: none !important; border: 0 !important; border-radius: 0 !important; padding: 12px 0 0 !important;
border-top: 1px solid #F7F2E7 !important;
display: flex; flex-direction: column; gap: 8px;
}
.nnh-ownerdash .nnh-badgerow-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nnh-ownerdash .nnh-badgechip {
background: #EAF3E6; color: #3E7A34; border: 1px solid #CBE2C2;
font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.nnh-ownerdash .nnh-badge-onpage { font-size: 12.5px; font-weight: 700; color: #3E7A34; }
.nnh-ownerdash .nnh-badge-criteria { font-size: 13px; line-height: 1.55; color: #3B4C64; margin: 0; }
.nnh-ownerdash .nnh-badge-progress {
height: 5px; border-radius: 999px; background: #F2ECDF; overflow: hidden; max-width: 260px;
}
.nnh-ownerdash .nnh-badge-progress > span { display: block; height: 100%; background: #F5A93B; border-radius: 999px; }
.nnh-ownerdash .nnh-badge-note { font-size: 12px; color: #5C6B82; margin: 0; }
/* -------------------------------------------------------------
v0.47.4 — Overview hero: two-line greeting + the live
"Needs you" queue (My Business.dc.html L173-186).
Rows are real records; the block is absent when nothing waits.
------------------------------------------------------------- */
.nnh-ownerdash .odhead h1 { line-height: 1.15; }
.nnh-ownerdash .odneeds {
margin-top: 16px; position: relative; max-width: 460px;
display: flex; flex-direction: column; gap: 6px;
}
.nnh-ownerdash .odneeds-cap {
font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
text-transform: uppercase; color: #9FC0DA;
}
.nnh-ownerdash .odneeds-row {
display: flex; gap: 10px; align-items: center;
background: rgba(255,255,255,.08); border-radius: 10px;
padding: 9px 14px; font-size: 13px; color: #FFFFFF; text-decoration: none;
}
.nnh-ownerdash .odneeds-row:hover { background: rgba(255,255,255,.15); color: #FFFFFF; text-decoration: none; }
.nnh-ownerdash .odneeds-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #F5A93B; }
.nnh-ownerdash .odneeds-row.is-cool .odneeds-dot { background: #C9DAEA; }
.nnh-ownerdash .odneeds-txt { flex: 1; min-width: 0; }
.nnh-ownerdash .odneeds-txt strong { font-weight: 700; }
.nnh-ownerdash .odneeds-arrow { color: #9FC0DA; flex-shrink: 0; }
/* -------------------------------------------------------------
v0.47.5 — Overview: "Your week, plainly", the Hide toggle on
Your next step, and mockup card order (My Business.dc.html
L228-245). Numbers come from real records; views are month-to-
date because `_nnh_stats` buckets by month, and the copy says so.
------------------------------------------------------------- */
.nnh-ownerdash .nnh-nextstep-head {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.nnh-ownerdash .nnh-nextstep-hide {
background: none; border: 0; padding: 0; cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 700; color: #1F6FA8;
}
.nnh-ownerdash .nnh-nextstep-hide:hover { color: #174F78; text-decoration: underline; }
.nnh-ownerdash .nnh-nextstep.is-collapsed .nnh-checklist,
.nnh-ownerdash .nnh-nextstep.is-collapsed .nnh-nextstep-note { display: none; }
.nnh-ownerdash .nnh-weekcard {
background: #FFFFFF; border: 0; border-radius: 14px; padding: 20px 24px;
box-shadow: 0 1px 3px rgba(34,51,74,.07);
}
.nnh-ownerdash .nnh-weekcard h3 { font-size: 16px; font-weight: 800; color: #1C2B40; margin: 0; }
.nnh-ownerdash .nnh-weekline {
margin: 8px 0 0; max-width: 560px;
font-size: 13.5px; line-height: 1.7; color: #3B4C64;
}
.nnh-ownerdash .nnh-weekline strong { font-weight: 700; color: #1C2B40; }
.nnh-ownerdash .nnh-weeknote { margin: 8px 0 0; font-size: 11.5px; color: #9FAEC4; }
/* -------------------------------------------------------------
v0.47.6 — Overview sidebar: switch-business select, the amber
orientation note, and the "Ask us anything" card
(My Business.dc.html L70-78, L120-122, L131-140).
------------------------------------------------------------- */
.nnh-ownerdash .odswitch-sel {
margin-top: 6px; max-width: 100%; width: 100%; box-sizing: border-box;
border: 1px solid #EAE2D3; border-radius: 8px; padding: 4px 8px;
font-family: inherit; font-size: 11.5px; font-weight: 600; color: #5C6B82;
background: #FFFFFF; cursor: pointer;
}
.nnh-ownerdash .odsidenote {
background: #FDF3E0; border: 1px solid #F0DDB8; border-radius: 12px;
padding: 12px 14px; font-size: 12px; line-height: 1.55; color: #7A5A1E;
}
.nnh-ownerdash .odsidenote strong { font-weight: 700; }
.nnh-ownerdash .odaskcard {
background: #FFFFFF; border: 1.5px solid #EAE2D3; border-radius: 12px;
padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.nnh-ownerdash .odaskcard-t { font-size: 13px; font-weight: 800; color: #1C2B40; }
.nnh-ownerdash .odaskcard-in {
width: 100%; box-sizing: border-box;
border: 1px solid #D8CFBC; border-radius: 999px; padding: 8px 14px;
font-family: inherit; font-size: 12.5px; color: #22334A; background: #FFFDF8;
}
.nnh-ownerdash .odaskcard-chip {
display: block; width: 100%; text-align: left; cursor: pointer;
border: 0; border-radius: 999px; background: #F2ECDF;
padding: 6px 12px; font-family: inherit; font-size: 11.5px; font-weight: 600; color: #5C6B82;
}
.nnh-ownerdash .odaskcard-chip:hover { background: #EAE2D3; }
/* -------------------------------------------------------------
v0.47.7 — Analytics & reports (Analytics.dc.html).
Sends panel reports reach + replies only: no open or click
tracking exists, so none is displayed.
------------------------------------------------------------- */
.nnh-ownerdash .ansends, .nnh-ownerdash .anvisits {
background: #FFFFFF; border: 0; border-radius: 14px; padding: 20px 24px;
box-shadow: 0 1px 3px rgba(34,51,74,.07); margin-top: 20px;
}
.nnh-ownerdash .ansends h3, .nnh-ownerdash .anvisits h3 {
font-size: 16px; font-weight: 800; color: #1C2B40; margin: 0 0 4px;
}
.nnh-ownerdash .anvisits h3 span { font-size: 12.5px; font-weight: 600; color: #5C6B82; }
.nnh-ownerdash .anvisits p { font-size: 13.5px; line-height: 1.65; color: #3B4C64; margin: 8px 0 0; max-width: 640px; }
.nnh-ownerdash .anvisits-note { font-size: 12px !important; color: #9FAEC4 !important; }
.nnh-ownerdash .ansend { border-left: 3px solid #3E7A34; padding: 2px 0 2px 14px; margin-top: 16px; }
.nnh-ownerdash .ansend-t strong { font-size: 14.5px; font-weight: 800; color: #1C2B40; }
.nnh-ownerdash .ansend-t span { font-size: 12.5px; color: #5C6B82; margin-left: 6px; }
.nnh-ownerdash .ansend-n { font-size: 13px; color: #3B4C64; margin-top: 4px; }
.nnh-ownerdash .ansends-foot { font-size: 11.5px; color: #9FAEC4; margin: 16px 0 0; }
.nnh-ownerdash .ansends-empty { font-size: 13.5px; color: #5C6B82; margin: 10px 0 0; }
.nnh-ownerdash .anworth {
background: #FDF3E0; border: 1px solid #F0DDB8; border-radius: 14px;
padding: 20px 24px; margin-top: 20px;
}
.nnh-ownerdash .anworth h3 { font-size: 16px; font-weight: 800; color: #1C2B40; margin: 0; }
.nnh-ownerdash .anworth h3 span { font-size: 12.5px; font-weight: 600; color: #7A5A1E; }
.nnh-ownerdash .anworth-row {
display: flex; gap: 12px; align-items: flex-start;
background: #FFFFFF; border-radius: 10px; padding: 13px 16px; margin-top: 12px;
}
.nnh-ownerdash .anworth-n {
width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
display: grid; place-items: center;
background: #22334A; color: #FFFFFF; font-size: 11.5px; font-weight: 800;
}
.nnh-ownerdash .anworth-x { font-size: 13.5px; line-height: 1.6; color: #3B4C64; }
.nnh-ownerdash .anworth-x a { font-weight: 700; }
/* v0.47.8 — Overview: hours honesty nudge (My Business.dc.html L214-222). */
.nnh-ownerdash .nnh-holnudge {
display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
background: #FFFFFF; border: 1px solid #EAE2D3; border-radius: 10px;
padding: 10px 16px; margin: 16px 0 0;
}
.nnh-ownerdash .nnh-holtxt { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.6; color: #3B4C64; }
.nnh-ownerdash .nnh-holnudge .nnh-btn.primary.sm { font-size: 12.5px; padding: 7px 16px; }
.nnh-ownerdash .nnh-hollink { font-size: 12.5px; font-weight: 700; }
.nnh-ownerdash .nnh-holx {
background: none; border: 0; cursor: pointer; color: #9FAEC4;
font-size: 16px; line-height: 1; padding: 0 2px;
}
.nnh-ownerdash .nnh-holx:hover { color: #A65D4E; }
.nnh-ownerdash .nnh-holdone {
background: #EAF3E6; border: 1px solid #CBE2C2; border-radius: 10px;
padding: 10px 16px; margin: 16px 0 0; font-size: 13px; color: #3E7A34;
}
/* v0.47.8 — Overview: season agent, collapsed ribbon and expanded set
(My Business.dc.html L224-252 + Ash's 3.25.42 expanded state). */
.nnh-ownerdash .nnh-searibbon {
display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
background: #FDF3E0; border: 1px solid #F0DDB8; border-radius: 10px;
padding: 10px 16px; margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: #7A5A1E;
}
.nnh-ownerdash .nnh-searibbon > span { flex: 1; min-width: 220px; }
.nnh-ownerdash .nnh-searibbon a { font-size: 12.5px; font-weight: 700; }
.nnh-ownerdash .nnh-seacard {
background: #FDF3E0; border: 1.5px solid #F0DDB8; border-radius: 14px;
padding: 20px 24px; margin: 16px 0 0;
display: flex; flex-direction: column; gap: 12px;
}
.nnh-ownerdash .nnh-seat { font-size: 16px; font-weight: 800; color: #1C2B40; }
.nnh-ownerdash .nnh-seahead p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.6; color: #7A5A1E; }
.nnh-ownerdash .nnh-seaitem {
display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
background: #FFFFFF; border: 1px solid #EAE2D3; border-radius: 10px; padding: 11px 14px;
}
.nnh-ownerdash .nnh-seaitem input { accent-color: #E8862E; margin-top: 2px; }
.nnh-ownerdash .nnh-seaitem b { display: block; font-size: 13.5px; font-weight: 700; color: #1C2B40; }
.nnh-ownerdash .nnh-seaitem small { display: block; font-size: 12.5px; line-height: 1.55; color: #5C6B82; }
.nnh-ownerdash .nnh-seafoot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.nnh-ownerdash .nnh-btn.cta {
background: #E8862E; color: #FFFFFF; border: 0; border-radius: 999px;
font-weight: 700; font-size: 13.5px; padding: 10px 22px; cursor: pointer;
box-shadow: 0 2px 6px rgba(232,134,46,.3);
}
.nnh-ownerdash .nnh-btn.cta:hover { background: #D1751F; color: #FFFFFF; }
.nnh-ownerdash .nnh-sealink {
background: none; border: 0; cursor: pointer; padding: 8px;
font-family: inherit; font-size: 12.5px; font-weight: 700; color: #7A5A1E;
}
.nnh-ownerdash .nnh-sealink:hover { color: #22334A; }
.nnh-ownerdash .nnh-seadone {
background: #EAF3E6; border: 1px solid #CBE2C2; border-radius: 10px;
padding: 10px 16px; margin: 16px 0 0; font-size: 13px; color: #3E7A34;
}
.nnh-ownerdash .nnh-seadone a { color: #3E7A34; text-decoration: underline; font-weight: 700; }
/* v0.47.9 — sidebar global search results inside the Ask card
(My Business.dc.html L143-150). */
.nnh-ownerdash .odaskcard-res {
display: flex; flex-direction: column; gap: 2px;
border: 1px solid #EAE2D3; border-radius: 10px; overflow: hidden;
}
.nnh-ownerdash .odaskcard-res a {
display: flex; gap: 8px; align-items: center;
padding: 8px 12px; font-size: 12px; color: #22334A; text-decoration: none;
}
.nnh-ownerdash .odaskcard-res a:hover { background: #FBF8F1; text-decoration: none; }
.nnh-ownerdash .odaskcard-res .ic { flex-shrink: 0; }
.nnh-ownerdash .odaskcard-res .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* -------------------------------------------------------------
v0.48.0 — Listing Editor structured editors (Listing Editor.dc.html
L335-363, L407-422). Chips for towns and nicknames, rows for hours
and services. The underlying field is hidden, never removed — it is
still what posts, so no-JS still saves.
------------------------------------------------------------- */
.nnh-ownerdash .nnh-uphidden {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nnh-ownerdash .nnh-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nnh-ownerdash .nnh-chip {
display: inline-flex; gap: 4px; align-items: center;
font-size: 12.5px; font-weight: 700; padding: 6px 8px 6px 12px; border-radius: 999px;
}
.nnh-ownerdash .nnh-chips.is-blue .nnh-chip { background: #E9F2F8; color: #1F6FA8; }
.nnh-ownerdash .nnh-chips.is-amber .nnh-chip { background: #FDF1DC; color: #B8791E; }
.nnh-ownerdash .nnh-chip-x {
border: 0; background: none; cursor: pointer; color: inherit;
width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
font-size: 11px; line-height: 1; padding: 0;
}
.nnh-ownerdash .nnh-chips.is-blue .nnh-chip-x:hover { background: rgba(31,111,168,.15); }
.nnh-ownerdash .nnh-chips.is-amber .nnh-chip-x:hover { background: rgba(184,121,30,.15); }
.nnh-ownerdash .nnh-chips-add {
box-sizing: border-box; width: 170px;
border: 1.5px dashed #D8CFBC; border-radius: 999px; padding: 7px 12px;
font-family: inherit; font-size: 12.5px; color: #22334A; background: #FFFFFF;
}
.nnh-ownerdash .nnh-hrows, .nnh-ownerdash .nnh-srows {
display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.nnh-ownerdash .nnh-hrow {
display: grid; grid-template-columns: 180px 1fr 1fr auto auto; gap: 10px; align-items: center;
}
.nnh-ownerdash .nnh-hrow input, .nnh-ownerdash .nnh-srow input {
box-sizing: border-box; min-width: 0;
border: 1px solid #D8CFBC; border-radius: 10px; padding: 10px 12px;
font-family: inherit; font-size: 14px; color: #22334A; background: #FFFDF8;
}
.nnh-ownerdash .nnh-hrow input:disabled { background: #F7F3EA; color: #9FAEC4; }
.nnh-ownerdash .nnh-hlab { font-weight: 600; }
.nnh-ownerdash .nnh-hclosed {
box-sizing: border-box; white-space: nowrap; cursor: pointer;
border: 1.5px solid #D8CFBC; background: #FFFFFF; color: #42546E;
border-radius: 999px; padding: 8px 14px; font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.nnh-ownerdash .nnh-hclosed:hover { border-color: #22334A; }
.nnh-ownerdash .nnh-hclosed.on { border-color: #A65D4E; color: #A65D4E; background: #FBEAE6; }
.nnh-ownerdash .nnh-hx {
border: 0; background: none; cursor: pointer; color: #A65D4E;
width: 30px; height: 30px; border-radius: 50%; font-size: 15px; line-height: 1;
}
.nnh-ownerdash .nnh-hx:hover { background: #FBEAE6; }
.nnh-ownerdash .nnh-srow { display: flex; gap: 8px; align-items: center; }
.nnh-ownerdash .nnh-sname { flex: 1.6; }
.nnh-ownerdash .nnh-sprice { flex: 1; }
.nnh-ownerdash .nnh-sbook {
flex-shrink: 0; white-space: nowrap; text-decoration: none;
border: 1.5px solid #D8CFBC; background: #FFFFFF; color: #9FAEC4;
border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 800;
}
.nnh-ownerdash .nnh-sbook.on { background: #22334A; border-color: #22334A; color: #FFFFFF; }
.nnh-ownerdash .nnh-sbook:hover { border-color: #22334A; text-decoration: none; }
.nnh-ownerdash .nnh-rowadd {
align-self: flex-start; cursor: pointer;
border: 1.5px dashed #D8CFBC; background: none; border-radius: 999px;
padding: 8px 16px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #1F6FA8;
}
.nnh-ownerdash .nnh-rowadd:hover { border-color: #1F6FA8; }
@media (max-width: 720px) {
.nnh-ownerdash .nnh-hrow { grid-template-columns: 1fr; }
}
/* v0.48.1 — bookable services: the toggle's footnote, and the public
Book button + request form. A request, never an instant booking. */
.nnh-ownerdash .nnh-snote { font-size: 12px; line-height: 1.55; color: #5C6B82; margin: 4px 0 0; }
.nnh-ownerdash .nnh-sbook { cursor: pointer; font-family: inherit; }
.nnh-profile .nnh-bookbtn {
margin-left: 10px; cursor: pointer; font-family: inherit;
border: 1.5px solid #22334A; background: #22334A; color: #FFFFFF;
border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 800;
}
.nnh-profile .nnh-bookbtn:hover { background: #182739; border-color: #182739; }
.nnh-profile .nnh-bookform {
margin-top: 18px; background: #FFFFFF; border: 1px solid #EAE2D3;
border-radius: 14px; padding: 20px 22px;
}
.nnh-profile .nnh-bookform h3 { margin: 0; font-size: 16px; font-weight: 800; color: #1C2B40; }
.nnh-profile .nnh-booknote { margin: 4px 0 0; font-size: 12.5px; color: #5C6B82; }
.nnh-profile .nnh-bookerr { margin: 8px 0 0; font-size: 13px; color: #A65D4E; }
.nnh-profile .nnh-bookgrid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px;
}
.nnh-profile .nnh-bookform label,
.nnh-profile .nnh-bookfull {
display: block; font-size: 13px; font-weight: 700; color: #22334A;
}
.nnh-profile .nnh-bookfull { margin-top: 12px; }
.nnh-profile .nnh-bookform .opt { font-weight: 500; color: #5C6B82; }
.nnh-profile .nnh-bookform input,
.nnh-profile .nnh-bookform textarea {
width: 100%; box-sizing: border-box; margin-top: 5px;
border: 1px solid #D8CFBC; border-radius: 10px; padding: 10px 12px;
font-family: inherit; font-size: 14px; color: #22334A; background: #FFFDF8;
}
.nnh-profile .nnh-bookform .nnh-btn.primary { margin-top: 14px; }
.nnh-profile .nnh-bookdone {
margin-top: 18px; background: #EAF3E6; border: 1px solid #CBE2C2;
border-radius: 12px; padding: 14px 18px; font-size: 13.5px; line-height: 1.6; color: #3E7A34;
}
.nnh-profile .nnh-hp { position: absolute; left: -9999px; }
@media (max-width: 720px) { .nnh-profile .nnh-bookgrid { grid-template-columns: 1fr; } }
/* -------------------------------------------------------------
v0.48.2 — "Answer by tapping": the inline six-question wizard
(Listing Editor.dc.html L127-238), plus the per-field
"✓ just rewritten · undo" pill it leaves behind (L271 etc).
------------------------------------------------------------- */
.nnh-ownerdash .nnh-tapwiz {
background: #FFFFFF; border: 1.5px solid #F0DDB8; border-radius: 14px;
padding: 24px 28px; margin-bottom: 24px;
display: flex; flex-direction: column; gap: 14px;
}
/* display:flex above beats the browser default [hidden]{display:none}, which
left the panel on screen and empty before it had been opened. */
.nnh-ownerdash .nnh-tapwiz[hidden] { display: none !important; }
.nnh-ownerdash .nnh-tw-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nnh-ownerdash .nnh-tw-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: #1C2B40; }
.nnh-ownerdash .nnh-tw-x {
border: 0; background: none; cursor: pointer; color: #5C6B82;
width: 26px; height: 26px; border-radius: 50%; font-size: 14px; line-height: 1;
}
.nnh-ownerdash .nnh-tw-x:hover { background: #F2ECDF; }
.nnh-ownerdash .nnh-tw-dots { display: flex; gap: 6px; align-items: center; }
.nnh-ownerdash .nnh-tw-dot { height: 6px; width: 18px; border-radius: 999px; background: #EAE2D3; }
.nnh-ownerdash .nnh-tw-dot.on { background: #E8862E; }
.nnh-ownerdash .nnh-tw-clip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nnh-ownerdash .nnh-tw-cliplab { font-size: 11.5px; font-weight: 700; color: #5C6B82; }
.nnh-ownerdash .nnh-tw-cliptail { font-size: 11.5px; color: #5C6B82; }
.nnh-ownerdash .nnh-tw-chipfact {
background: #F5A93B; color: #22334A; font-size: 11.5px; font-weight: 800;
padding: 4px 12px; border-radius: 999px;
}
.nnh-ownerdash .nnh-tw-title { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; color: #1C2B40; }
.nnh-ownerdash .nnh-tw-why { font-size: 13px; line-height: 1.55; color: #5C6B82; margin-top: 4px; }
.nnh-ownerdash .nnh-tw-why strong { color: #B8791E; }
.nnh-ownerdash .nnh-tw-starters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.nnh-ownerdash .nnh-tw-slab { font-size: 12px; font-weight: 700; color: #5C6B82; }
.nnh-ownerdash .nnh-tw-shint { font-size: 12px; color: #9FAEC4; }
.nnh-ownerdash .nnh-tw-chip {
cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700;
padding: 8px 16px; border-radius: 999px;
border: 1.5px solid #D8CFBC; background: #FFFFFF; color: #42546E;
}
.nnh-ownerdash .nnh-tw-chip:hover { border-color: #22334A; }
.nnh-ownerdash .nnh-tw-chip.on { border-color: #22334A; background: #22334A; color: #FFFFFF; }
.nnh-ownerdash .nnh-tw-example {
background: #FBF8F1; border: 1px solid #EAE2D3; border-radius: 10px;
padding: 10px 14px; font-size: 12.5px; line-height: 1.6; color: #5C6B82; margin-top: 10px;
}
.nnh-ownerdash .nnh-tw-uselink {
display: block; margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
font-family: inherit; font-size: 12px; font-weight: 700; color: #1F6FA8; text-align: left;
}
.nnh-ownerdash .nnh-tw-ta, .nnh-ownerdash .nnh-tw-extra {
width: 100%; box-sizing: border-box; margin-top: 10px;
border: 1px solid #D8CFBC; border-radius: 10px; padding: 12px 14px;
font-family: inherit; font-size: 14px; line-height: 1.6; color: #22334A; background: #FFFDF8;
}
.nnh-ownerdash .nnh-tw-extra { max-width: 420px; font-size: 13.5px; }
.nnh-ownerdash .nnh-tw-adlib {
background: #FBF8F1; border: 1px solid #EAE2D3; border-radius: 12px;
padding: 16px 18px; margin-top: 12px; font-size: 15px; line-height: 2.6; color: #3B4C64;
}
.nnh-ownerdash .nnh-tw-blank {
border: 0; border-bottom: 2px dashed #E8862E; background: transparent;
padding: 2px 6px; margin: 0 4px; font-family: inherit;
font-size: 14.5px; font-weight: 700; color: #1C2B40;
}
.nnh-ownerdash .nnh-tw-choices { display: inline-flex; gap: 6px; flex-wrap: wrap; vertical-align: middle; margin: 0 6px; }
.nnh-ownerdash .nnh-tw-choices .nnh-tw-chip { padding: 6px 14px; line-height: 1.2; }
.nnh-ownerdash .nnh-tw-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nnh-ownerdash .nnh-tw-skip {
border: 0; background: none; cursor: pointer; padding: 10px;
font-family: inherit; font-size: 13px; font-weight: 700; color: #5C6B82;
}
.nnh-ownerdash .nnh-tw-skip:hover { color: #22334A; }
.nnh-ownerdash .nnh-tw-count { margin-left: auto; font-size: 12.5px; color: #5C6B82; }
.nnh-ownerdash .nnh-tw-note { margin: 0; font-size: 12px; font-style: italic; color: #B8791E; }
/* the pill a rewrite leaves on the field's label */
.nnh-ownerdash .nnh-rw {
background: #EAF3E6; color: #3E7A34; font-size: 11px; font-weight: 800;
padding: 3px 10px; border-radius: 999px; margin-left: 6px; white-space: nowrap;
}
.nnh-ownerdash .nnh-rw-undo {
border: 0; background: none; cursor: pointer; padding: 0;
font-family: inherit; font-size: 11px; font-weight: 800;
color: #3E7A34; text-decoration: underline;
}
.nnh-ownerdash .nnh-tw-vrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.nnh-ownerdash .nnh-tw-say {
cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700;
padding: 9px 18px; border-radius: 999px;
border: 1.5px solid #D8CFBC; background: #FFFFFF; color: #42546E;
}
.nnh-ownerdash .nnh-tw-say:hover { border-color: #22334A; }
.nnh-ownerdash .nnh-tw-say.rec { border-color: #A65D4E; background: #FBEAE6; color: #A65D4E; }
/* -------------------------------------------------------------
v0.48.4 — "Write it with AI" invite card, exact values from
Listing Editor.dc.html L112-121. Set literally on these elements
so the shared .nnh-btn styles can't drift them.
------------------------------------------------------------- */
.nnh-ownerdash .odvoice-card {
background: #FDF3E0;
border: 1px solid #F0DDB8;
border-radius: 14px;
padding: 18px 22px;
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.nnh-ownerdash .odvoice-card h3 {
margin: 0; font-size: 15px; font-weight: 800; color: #1C2B40;
}
.nnh-ownerdash .odvoice-card .description {
margin: 4px 0 0; max-width: 62ch;
font-size: 13px; line-height: 1.6; color: #7A5A1E;
}
.nnh-ownerdash .odvoice-main { flex: 1; min-width: 240px; }
.nnh-ownerdash .odvoice-controls {
display: flex; flex-direction: column; align-items: stretch;
gap: 8px; flex: 0 0 auto; margin-top: 0;
}
/* Primary: talk it in. */
.nnh-ownerdash #odvwiz-open {
background: #22334A; border: 0; color: #FFFFFF;
font-family: inherit; font-weight: 700; font-size: 13.5px;
padding: 11px 22px; border-radius: 999px; cursor: pointer;
box-shadow: 0 2px 6px rgba(34,51,74,.25);
white-space: nowrap; text-align: center;
}
.nnh-ownerdash #odvwiz-open:hover { background: #182739; color: #FFFFFF; }
/* Secondary: tap it in. */
.nnh-ownerdash #odtapwiz-open {
background: #FFFFFF; border: 1.5px solid #D8CFBC; color: #22334A;
font-family: inherit; font-weight: 700; font-size: 13px;
padding: 10px 22px; border-radius: 999px; cursor: pointer;
white-space: nowrap; text-align: center; box-shadow: none;
}
.nnh-ownerdash #odtapwiz-open:hover { border-color: #22334A; background: #FFFFFF; color: #22334A; }
.nnh-ownerdash .odvoice-mic-hint {
max-width: 230px; margin-top: 2px;
font-size: 12px; line-height: 1.5; color: #7A5A1E;
}
@media (max-width: 640px) {
.nnh-ownerdash .odvoice-controls { align-items: stretch; width: 100%; }
.nnh-ownerdash .odvoice-mic-hint { max-width: none; }
}
/* -------------------------------------------------------------
v0.48.5 — Listing Editor: card and control values audited
line-by-line against Listing Editor.dc.html and corrected.
section background:#FFFFFF; border:1px solid #EAE2D3;
border-radius:14px; padding:24px 28px;
display:flex; flex-direction:column; gap:20px
h2 margin:0; font-size:17px; font-weight:800; color:#1C2B40
label display:block; font-size:13px; font-weight:700;
color:#22334A; margin-bottom:6px
field border:1px solid #D8CFBC; border-radius:10px;
padding:12px 14px; font-size:14px; background:#FFFDF8
------------------------------------------------------------- */
.nnh-ownerdash .odlisting-card,
.nnh-ownerdash .odabout-card {
background: #FFFFFF;
border: 1px solid #EAE2D3;
border-radius: 14px;
padding: 24px 28px;
margin-bottom: 24px;
display: flex; flex-direction: column; gap: 20px;
}
.nnh-ownerdash .odlisting-card > h3,
.nnh-ownerdash .odabout-card > h3 {
margin: 0; font-size: 17px; font-weight: 800; color: #1C2B40;
}
/* gap replaces the per-field margin so spacing stays even as fields come and go */
.nnh-ownerdash .odlisting-card .field,
.nnh-ownerdash .odabout-card .field { margin-bottom: 0; }
.nnh-ownerdash .odlisting-card .field > label,
.nnh-ownerdash .odabout-card .field > label {
display: block; font-size: 13px; font-weight: 700; color: #22334A;
margin-bottom: 6px; line-height: 1.35; padding-right: 0;
}
.nnh-ownerdash .odlisting-card .field .opt,
.nnh-ownerdash .odabout-card .field .opt { font-weight: 500; color: #5C6B82; }
.nnh-ownerdash .odlisting-card input[type="text"],
.nnh-ownerdash .odlisting-card input[type="url"],
.nnh-ownerdash .odlisting-card input[type="tel"],
.nnh-ownerdash .odlisting-card textarea,
.nnh-ownerdash .odabout-card input[type="text"],
.nnh-ownerdash .odabout-card textarea {
border: 1px solid #D8CFBC; border-radius: 10px;
padding: 12px 14px; font-size: 14px; line-height: 1.55;
color: #22334A; background: #FFFDF8;
}
.nnh-ownerdash .odlisting-card input[type="text"],
.nnh-ownerdash .odlisting-card input[type="url"],
.nnh-ownerdash .odabout-card input[type="text"] { padding: 11px 14px; }
/* the two-column pairs the mockup uses inside a card */
.nnh-ownerdash .odlisting-card .grid2,
.nnh-ownerdash .odabout-card .odabout-bottom { gap: 20px; }
/* -------------------------------------------------------------
v0.48.6 — corrections found by looking at the rendered page.
1. v0.48.5 re-rounded the textarea's bottom-right corner, undoing
the weld. Restored with enough specificity to stick.
2. A 5px line-box gap sat between the field and its tab; the field
is a , so making it a flex column removes it.
3. In the two-column pair the helper text was being squeezed beside
the tab. The mockup puts the tab on its own line, helper below.
------------------------------------------------------------- */
.nnh-ownerdash .odabout-card .nnh-tabfield,
.nnh-ownerdash .odlisting-card .nnh-tabfield {
display: flex; flex-direction: column; gap: 0;
}
.nnh-ownerdash .odabout-card .nnh-tabfield textarea,
.nnh-ownerdash .odabout-card .nnh-tabfield input[type="text"],
.nnh-ownerdash .odlisting-card .nnh-tabfield textarea,
.nnh-ownerdash .odlisting-card .nnh-tabfield input[type="text"] {
border-radius: 10px 10px 0 10px; /* bottom-right squared to meet the tab */
margin-bottom: 0;
display: block;
}
.nnh-ownerdash .nnh-tabfield .nnh-fieldfoot { margin-top: 0; }
.nnh-ownerdash .nnh-tabfield .nnh-aitabs { margin-top: -1px; }
/* two-column pair: tab right on its own line, helper full width beneath */
.nnh-ownerdash .odabout-bottom .nnh-fieldfoot {
flex-wrap: wrap; justify-content: flex-end;
}
.nnh-ownerdash .odabout-bottom .nnh-fieldfoot .nnh-help {
order: 2; width: 100%; margin-top: 8px;
}
/* Established has a mic but no AI draft, so its tab is a single button */
.nnh-ownerdash .nnh-aitabs:empty { display: none; }
.nnh-ownerdash .nnh-fieldfoot .nnh-help:empty { display: none; }
/* -------------------------------------------------------------
v0.48.8 — two fixes found in the browser.
1. `.nnh-ownerdash input[type="text"]` is (0,2,1) because an
attribute selector carries class-level weight, so it beat the
chip input's (0,2,0). Raised, rather than reaching for !important.
2. Per-field mics on fields with no AI tab were rendering as bare
text links. Given the same amber pill so they read deliberate.
------------------------------------------------------------- */
.nnh-ownerdash .nnh-chips input.nnh-chips-add {
box-sizing: border-box; width: 170px; flex: 0 0 auto;
border: 1.5px dashed #D8CFBC; border-radius: 999px;
padding: 7px 12px; font-size: 12.5px; background: #FFFFFF; color: #22334A;
}
.nnh-ownerdash .nnh-chips input.nnh-chips-add:focus { border-style: solid; }
.nnh-ownerdash .odabout-card .nnh-tabfield input[type="text"],
.nnh-ownerdash .odlisting-card .nnh-tabfield input[type="text"] {
border-radius: 10px 10px 0 10px;
}
/* a mic with no AI sibling still gets the tab treatment */
.nnh-ownerdash .field > .nnh-vmic-wrap {
display: inline-flex; align-items: center; margin-top: -1px;
border: 1px solid #F0DDB8; border-top: none; border-radius: 0 0 10px 10px;
background: #FDF3E0; overflow: hidden; float: right;
}
.nnh-ownerdash .field > .nnh-vmic-wrap .nnh-vmic {
background: none !important; border: 0 !important; border-radius: 0 !important;
box-shadow: none !important; margin: 0 !important; padding: 8px 16px !important;
font-size: 12.5px; font-weight: 700; color: #B8791E !important;
}
.nnh-ownerdash .field > .nnh-vmic-wrap .nnh-vmic:hover { background: #F8E8C8 !important; }
.nnh-ownerdash .field > .nnh-vmic-wrap .nnh-vmic.is-recording { background: #FBEAE6 !important; color: #A65D4E !important; }
.nnh-ownerdash .field > .nnh-vmic-wrap .nnh-vmic-status {
font-size: 11.5px; color: #A65D4E; padding-right: 10px;
}
.nnh-ownerdash .field > .nnh-vmic-wrap:after { content: ""; display: block; clear: both; }
/* v0.48.9 — the loose mic tab was stretching full width: `float` is ignored
on a flex item, and these fields are flex columns. Align it instead. */
.nnh-ownerdash .field:has(> .nnh-vmic-wrap) { display: flex; flex-direction: column; }
.nnh-ownerdash .field > .nnh-vmic-wrap {
float: none;
align-self: flex-end;
width: auto; max-width: max-content;
}
/* v0.49.0 — the mockup puts a mic ONLY on Overview, The Owners and Locals
know (inside the amber tab). Everywhere else the injected per-field mic is
noise the design doesn't have, so hide the loose ones.
NOTE: this hides a duplicate entry point, not the capability — every one of
these fields is still fillable by voice through "Fill it in by talking" and
the guided interview, which is where the design puts that job. Delete this
block to bring the per-field mics back. */
.nnh-ownerdash .field > .nnh-vmic-wrap { display: none; }
.nnh-ownerdash .nnh-aitabs .nnh-vmic-wrap { display: flex; }
/* v0.49.2 — the inline "Just tell us about the business" panel that
"Fill it in by talking" opens (Listing Editor.dc.html L158-168).
Its mic is what opens the 13-step modal. */
.nnh-ownerdash .nnh-voicepanel[hidden] { display: none !important; }
.nnh-ownerdash .nnh-vp-body {
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 14px; padding: 16px 0 8px;
}
.nnh-ownerdash .nnh-vp-h {
font-size: 24px; font-weight: 800; letter-spacing: -0.3px; color: #1C2B40;
}
.nnh-ownerdash .nnh-vp-sub {
margin: 0; max-width: 480px;
font-size: 13.5px; line-height: 1.6; color: #5C6B82;
}
.nnh-ownerdash .nnh-vp-mic {
width: 88px; height: 88px; border-radius: 50%; border: 0; cursor: pointer;
background: #A65D4E; color: #FFFFFF;
display: grid; place-items: center;
box-shadow: 0 4px 14px rgba(166,93,78,.4);
}
.nnh-ownerdash .nnh-vp-mic:hover { background: #8F4C3F; }
.nnh-ownerdash .nnh-vp-tap { font-size: 12.5px; font-weight: 700; color: #A65D4E; }
.nnh-ownerdash .nnh-vp-hint { font-size: 12px; font-style: italic; color: #B8791E; }
.nnh-ownerdash .nnh-vp-swap {
border: 0; background: none; padding: 0; cursor: pointer;
font-family: inherit; font-size: 12px; font-style: italic; font-weight: 800;
color: #B8791E; text-decoration: underline;
}
/* -------------------------------------------------------------
v0.49.4 — voice wizard modal: palette correction.
Measured in the browser, three were off-system:
Start recording #0B6B53 → #3E7A34 (the system green)
Next unstyled browser default (#EFEFEF / black)
Save & exit unstyled browser default
Start over #6B7C6E → #1F6FA8 (link blue)
recording state #B3261E → #A65D4E (the system red)
------------------------------------------------------------- */
.nnh-ownerdash #odvwiz-rec,
.odvwiz-modal #odvwiz-rec {
background: #3E7A34; border: 1.5px solid #3E7A34; color: #FFFFFF;
font-weight: 700; border-radius: 999px; padding: 10px 20px; cursor: pointer;
}
.nnh-ownerdash #odvwiz-rec:hover,
.odvwiz-modal #odvwiz-rec:hover { background: #34682B; border-color: #34682B; }
.odvwiz-modal #odvwiz-rec.is-recording,
.nnh-ownerdash #odvwiz-rec.is-recording {
background: #A65D4E; border-color: #A65D4E; animation: none;
}
/* Next — the step's forward action: white with the coral edge, as in the mockup */
.odvwiz-modal #odvwiz-next {
background: #FFFFFF; border: 1.5px solid #E8862E; color: #22334A;
font-family: inherit; font-weight: 700; font-size: 13.5px;
padding: 10px 22px; border-radius: 999px; cursor: pointer;
}
.odvwiz-modal #odvwiz-next:hover { background: #FDF3E0; border-color: #D1751F; }
/* Save & exit — quiet muted fill, not a browser default */
.odvwiz-modal #odvwiz-saveexit {
background: #F2ECDF; border: 1px solid #EAE2D3; color: #42546E;
font-family: inherit; font-weight: 700; font-size: 12.5px;
padding: 8px 18px; border-radius: 999px; cursor: pointer;
}
.odvwiz-modal #odvwiz-saveexit:hover { background: #EAE2D3; color: #22334A; }
/* Start over — a link, in link blue */
.odvwiz-modal #odvwiz-restart {
background: none; border: 0; padding: 0; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 700;
color: #1F6FA8; text-decoration: underline;
}
.odvwiz-modal #odvwiz-restart:hover { color: #174F78; }
/* "Fills your … box below" reads as the system link blue */
.odvwiz-modal .odvwiz-fills { color: #1F6FA8; font-size: 13px; font-weight: 700; }
.odvwiz-modal .odvwiz-fills b { color: #1F6FA8; }
/* v0.49.5 — the primary invite button was renamed to #odvoice-open when the
inline panel was added, but its navy styling stayed on #odvwiz-open, which
is now the hidden modal trigger. Point it at the visible button. */
.nnh-ownerdash #odvoice-open {
background: #22334A; border: 0; color: #FFFFFF;
font-family: inherit; font-weight: 700; font-size: 13.5px;
padding: 11px 22px; border-radius: 999px; cursor: pointer;
box-shadow: 0 2px 6px rgba(34,51,74,.25);
white-space: nowrap; text-align: center;
}
.nnh-ownerdash #odvoice-open:hover { background: #182739; color: #FFFFFF; }
/* -------------------------------------------------------------
v0.49.6 — Photos: shot-idea chips, the ☆ card-photo picker,
and the split showcase header (Photos.dc.html).
------------------------------------------------------------- */
.nnh-ownerdash .odshowcase-title {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.nnh-ownerdash .odshowcase-title strong { font-size: 17px; font-weight: 800; color: #1C2B40; }
.nnh-ownerdash .odshowcase-title em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #5C6B82; }
.nnh-ownerdash .odshowcase-count { font-size: 12.5px; font-weight: 700; color: #3E7A34; }
.nnh-ownerdash .odshots {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 4px;
}
.nnh-ownerdash .odshots-lab { font-size: 12.5px; color: #5C6B82; }
.nnh-ownerdash .odshot {
background: #FDF3E0; border: 1px solid #F0DDB8; color: #7A5A1E;
font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
}
/* ☆ card picker sits on the tile; the chosen one wears the navy badge */
.nnh-ownerdash .odgallery-item { position: relative; }
.nnh-ownerdash .odcard-pick {
position: absolute; top: 8px; left: 8px; z-index: 2; cursor: pointer;
background: #FFFFFF; border: 1px solid #F0DDB8; color: #B8791E;
font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
padding: 4px 10px; border-radius: 999px; line-height: 1.3;
}
.nnh-ownerdash .odcard-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.nnh-ownerdash .odcard-pick:hover { border-color: #B8791E; }
.nnh-ownerdash .odcard-pick.on {
background: #22334A; border-color: #22334A; color: #FFFFFF;
}
.nnh-ownerdash .odgallery-item.is-card { outline: 2px solid #22334A; outline-offset: 2px; border-radius: 12px; }
.nnh-ownerdash .odshowcase-note {
margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: #5C6B82;
}
/* -------------------------------------------------------------
v0.49.7 — Photos: banner + logo cards to Photos.dc.html.
The drag-to-frame machinery is untouched; the sliders are kept
but folded into "Fine tune", because the mockup's "no sliders
to fiddle with" would be untrue of this build.
------------------------------------------------------------- */
.nnh-ownerdash .odbanner-titlerow {
display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.nnh-ownerdash .odphoto-title strong { font-size: 17px; font-weight: 800; color: #1C2B40; }
.nnh-ownerdash .odphoto-title em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #5C6B82; }
.nnh-ownerdash .odbanner-devices {
display: inline-flex; background: #F2ECDF; border-radius: 999px; padding: 3px; gap: 2px;
}
.nnh-ownerdash .odbanner-devices button {
border: 0; background: none; cursor: pointer; font-family: inherit;
font-size: 12.5px; font-weight: 700; color: #5C6B82;
padding: 6px 16px; border-radius: 999px;
}
.nnh-ownerdash .odbanner-devices button.on { background: #22334A; color: #FFFFFF; }
.nnh-ownerdash .odbanner-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; width: 100%; height: 100%; min-height: 150px; cursor: pointer; text-align: center; padding: 20px;
}
.nnh-ownerdash .odbanner-emptyt { font-size: 13.5px; color: #3B4C64; }
.nnh-ownerdash .odbanner-emptyb { font-size: 12.5px; color: #1F6FA8; text-decoration: underline; }
.nnh-ownerdash .odbanner-preview:not(.has-image) {
background: #FBF8F1; border: 1.5px dashed #D8CFBC; border-radius: 12px;
}
.nnh-ownerdash .odbanner-preview.is-phone { max-width: 390px; margin-left: auto; margin-right: auto; }
.nnh-ownerdash .odbanner-note {
background: #FFFFFF; border: 1px solid #EAE2D3; border-radius: 10px;
padding: 12px 16px; margin-top: 14px; font-size: 13px; line-height: 1.6; color: #3B4C64;
}
.nnh-ownerdash .odbanner-note strong { color: #1C2B40; }
.nnh-ownerdash details.odbanner-adjust { margin-top: 12px; }
.nnh-ownerdash details.odbanner-adjust > summary {
cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; color: #1F6FA8; padding: 4px 0;
}
.nnh-ownerdash details.odbanner-adjust > summary::-webkit-details-marker { display: none; }
.nnh-ownerdash details.odbanner-adjust > summary:before { content: "▸ "; }
.nnh-ownerdash details.odbanner-adjust[open] > summary:before { content: "▾ "; }
.nnh-ownerdash .odbanner-sharp { margin: 12px 0 0; font-size: 12px; color: #5C6B82; }
.nnh-ownerdash .odlogo-row { display: flex; gap: 16px; align-items: flex-start; margin-top: 14px; }
.nnh-ownerdash .odlogo-preview {
width: 88px; height: 88px; flex-shrink: 0; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
background: #FBF8F1; border: 1.5px dashed #D8CFBC; border-radius: 12px;
font-size: 17px; font-weight: 800; color: #5C6B82; text-align: center; padding: 6px;
}
.nnh-ownerdash .odlogo-preview.has-image { border-style: solid; background: #FFFFFF; padding: 0; }
.nnh-ownerdash .odlogo-initials { font-size: 17px; font-weight: 800; color: #42546E; }
.nnh-ownerdash .odlogo-or { font-size: 10.5px; font-weight: 600; color: #1F6FA8; text-decoration: underline; line-height: 1.3; }
.nnh-ownerdash .odlogo-copy { margin: 0; font-size: 13px; line-height: 1.6; color: #3B4C64; }
.nnh-ownerdash .odlogo-copy strong { color: #1C2B40; }
.nnh-ownerdash .odlogo-hint { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: #5C6B82; }
/* -------------------------------------------------------------
v0.49.8 — Reviews to Reviews.dc.html: "Start me off" in the
response foot, the grey "Being checked" pill on reviews still
with the admins, and the review-policy footer note.
------------------------------------------------------------- */
.nnh-ownerdash .nnh-owner-review-formfoot {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.nnh-ownerdash .nnh-owner-review-formfoot > span {
flex: 1; min-width: 180px; font-size: 12.5px; color: #5C6B82;
}
.nnh-ownerdash .nnh-review-startme {
border: 0; background: none; padding: 0; cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 700; color: #B8791E;
}
.nnh-ownerdash .nnh-review-startme:hover { color: #8F5D14; }
.nnh-ownerdash .nnh-owner-review-status.held {
background: #F2ECDF; color: #5C6B82; border: 0;
font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.nnh-ownerdash .nnh-owner-review-card.is-held { opacity: .92; }
.nnh-ownerdash .nnh-owner-review-card.is-held .nnh-owner-review-text { color: #5C6B82; }
.nnh-ownerdash .nnh-review-foot {
margin: 16px 0 0; font-size: 12.5px; line-height: 1.65; color: #5C6B82;
}
.nnh-ownerdash .nnh-review-foot a { font-weight: 600; }
/* -------------------------------------------------------------
v0.49.9 — review cards were cream on a cream page.
Reviews.dc.html has them white with a hairline, no accent bar.
background var(--nnh-paper) #FAF6EE → #FFFFFF
is-unanswered 3px green left border → removed (not in the design)
stars #e9a11a → #F5A93B (the system amber)
------------------------------------------------------------- */
.nnh-ownerdash .nnh-owner-review-card {
background: #FFFFFF;
border: 1px solid #EAE2D3;
border-radius: 14px;
padding: 20px 24px;
}
.nnh-ownerdash .nnh-owner-review-card.is-unanswered { border-left: 1px solid #EAE2D3; }
.nnh-ownerdash .nnh-owner-review-list { display: flex; flex-direction: column; gap: 16px; }
.nnh-ownerdash .nnh-owner-review-stars { color: #F5A93B; }
.nnh-ownerdash .nnh-owner-review-person strong { font-size: 14px; font-weight: 800; color: #1C2B40; }
.nnh-ownerdash .nnh-owner-review-person time { font-size: 12px; color: #9FAEC4; }
.nnh-ownerdash .nnh-owner-review-text { font-size: 14px; line-height: 1.65; color: #3B4C64; }
.nnh-ownerdash .nnh-owner-review-form textarea {
width: 100%; box-sizing: border-box;
border: 1px solid #D8CFBC; border-radius: 10px; padding: 12px 14px;
font-family: inherit; font-size: 14px; line-height: 1.55;
color: #22334A; background: #FFFDF8; min-height: 76px; resize: vertical;
}
/* the empty state belongs to the same card family */
.nnh-ownerdash .nnh-reviews-empty {
background: #FFFFFF; border: 1px solid #EAE2D3; border-radius: 14px;
}
.nnh-ownerdash .nnh-reviews-empty-stars { color: #E6DCCB; }
/* a held review still reads as a card, just quieter */
.nnh-ownerdash .nnh-owner-review-card.is-held { background: #FFFFFF; opacity: 1; }
.nnh-ownerdash .nnh-owner-review-card.is-held .nnh-owner-review-stars { color: #E0C48C; }
/* -------------------------------------------------------------
v0.50.0 — Brand profile (Brand Profile.dc.html). One colour and
a voice. The colour never touches the directory listing; the
voice tunes AI flavour only, never the honesty rules.
------------------------------------------------------------- */
.nnh-ownerdash .nnh-brandcard, .nnh-ownerdash .nnh-brandhear {
background: #FFFFFF; border: 1px solid #EAE2D3; border-radius: 14px;
padding: 24px 28px; margin-bottom: 20px;
}
.nnh-ownerdash .nnh-brandhear { background: #FDF3E0; border-color: #F0DDB8; }
.nnh-ownerdash .nnh-brandcard h3, .nnh-ownerdash .nnh-brandhear h3 {
margin: 0 0 16px; font-size: 17px; font-weight: 800; color: #1C2B40;
}
.nnh-ownerdash .nnh-brandcard h3 em, .nnh-ownerdash .nnh-brandhear h3 em {
font-style: normal; font-size: 12.5px; font-weight: 600; color: #5C6B82;
}
.nnh-ownerdash .nnh-brandhear h3 em { color: #7A5A1E; }
.nnh-ownerdash .nnh-brandcard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.nnh-ownerdash .nnh-brand-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.nnh-ownerdash .nnh-brand-sw {
width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
border: 2px solid transparent; box-shadow: 0 1px 3px rgba(34,51,74,.15);
}
.nnh-ownerdash .nnh-brand-sw.on { border-color: #22334A; outline: 2px solid #FFFFFF; outline-offset: -4px; }
.nnh-ownerdash .nnh-brand-hexrow { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.nnh-ownerdash .nnh-brand-hexrow label { font-size: 13px; font-weight: 700; color: #22334A; }
.nnh-ownerdash .nnh-brand-hexrow input {
width: 110px; box-sizing: border-box; border: 1px solid #D8CFBC; border-radius: 8px;
padding: 8px 12px; font-family: monospace; font-size: 13px; background: #FFFDF8; color: #22334A;
}
.nnh-ownerdash .nnh-brand-chip { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 1px 3px rgba(34,51,74,.15); }
.nnh-ownerdash .nnh-brand-contrast { margin: 12px 0 0; font-size: 12.5px; font-weight: 600; }
.nnh-ownerdash .nnh-brand-contrast.ok { color: #3E7A34; }
.nnh-ownerdash .nnh-brand-contrast.warn { color: #B8791E; }
.nnh-ownerdash .nnh-brand-where { margin: 14px 0 0; font-size: 13px; line-height: 1.65; color: #3B4C64; }
.nnh-ownerdash .nnh-brand-where strong { color: #1C2B40; }
.nnh-ownerdash .nnh-brand-caps {
font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #5C6B82; margin-bottom: 8px;
}
.nnh-ownerdash .nnh-brand-prev { border: 1px solid #EAE2D3; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.nnh-ownerdash .nnh-brand-prevhead {
display: flex; align-items: center; gap: 10px; padding: 12px 16px;
color: #FFFFFF; font-weight: 700; font-size: 14px;
}
.nnh-ownerdash .nnh-brand-prevmark {
width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.9);
color: #22334A; display: grid; place-items: center; font-size: 10px; font-weight: 800;
}
.nnh-ownerdash .nnh-brand-prevbody { padding: 16px; }
.nnh-ownerdash .nnh-brand-prevbody p { margin: 0 0 12px; font-size: 13.5px; color: #3B4C64; }
.nnh-ownerdash .nnh-brand-prevbtn {
display: inline-block; color: #FFFFFF; font-weight: 700; font-size: 13px;
padding: 9px 18px; border-radius: 999px;
}
.nnh-ownerdash .nnh-brand-note { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: #9FAEC4; }
.nnh-ownerdash .nnh-brand-lab { font-size: 13px; font-weight: 700; color: #22334A; margin: 16px 0 8px; }
.nnh-ownerdash .nnh-brand-lab:first-child { margin-top: 0; }
.nnh-ownerdash .nnh-brand-lab em { font-style: normal; font-weight: 500; color: #5C6B82; }
.nnh-ownerdash .nnh-brand-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.nnh-ownerdash .nnh-brand-pill {
cursor: pointer; border: 1.5px solid #D8CFBC; background: #FFFFFF; color: #42546E;
border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700;
}
.nnh-ownerdash .nnh-brand-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.nnh-ownerdash .nnh-brand-pill:hover { border-color: #22334A; }
.nnh-ownerdash .nnh-brand-pill.on { background: #22334A; border-color: #22334A; color: #FFFFFF; }
.nnh-ownerdash .nnh-brandform input[type="text"] {
width: 100%; box-sizing: border-box; border: 1px solid #D8CFBC; border-radius: 10px;
padding: 11px 14px; font-size: 14px; background: #FFFDF8; color: #22334A;
}
.nnh-ownerdash .nnh-chips.is-strike .nnh-chip {
background: #F2ECDF; color: #5C6B82; text-decoration: line-through;
}
.nnh-ownerdash .nnh-chips.is-strike .nnh-chip-x:hover { background: rgba(92,107,130,.15); }
.nnh-ownerdash .nnh-brand-sample {
background: #FFFFFF; border: 1px solid #EAE2D3; border-radius: 12px; padding: 16px 18px;
}
.nnh-ownerdash .nnh-brand-sample p { margin: 0; font-size: 13.5px; line-height: 1.65; color: #3B4C64; }
.nnh-ownerdash .nnh-brand-sample.is-yours { border-color: #F0DDB8; }
.nnh-ownerdash .nnh-brand-hearnote { margin: 14px 0 0; font-size: 12.5px; font-style: italic; color: #7A5A1E; }
@media (max-width: 900px) { .nnh-ownerdash .nnh-brandcard-grid { grid-template-columns: 1fr; } }
/* v0.50.2 — the owner's brand colour, applied only where Brand profile says
it applies: the forms on their page. Falls back to the system navy when
no colour is set, so an unbranded form looks exactly as it always has.
The listing's own chrome is never touched. */
.nnh-branded { --nnh-brand: #22334A; }
.nnh-branded .nnh-btn.primary {
background: var(--nnh-brand);
border-color: var(--nnh-brand);
}
.nnh-branded .nnh-btn.primary:hover { filter: brightness(.92); }
.nnh-branded h2 { border-bottom: 2px solid var(--nnh-brand); padding-bottom: 6px; }
.nnh-branded input:focus, .nnh-branded textarea:focus, .nnh-branded select:focus {
outline: 2px solid var(--nnh-brand); outline-offset: 1px;
}
/* -------------------------------------------------------------
v0.50.3 — the public promo page at /promo/{slug}.
Uses the owner's brand colour (Brand profile) for the header
band and the button; falls back to the system blue.
------------------------------------------------------------- */
.nnh-promo { --nnh-brand: #29597F; max-width: 720px; margin: 48px auto; padding: 0 20px; }
.nnh-promo-draft {
background: #FDF3E0; border: 1px solid #F0DDB8; border-radius: 12px;
padding: 12px 16px; margin-bottom: 20px; font-size: 13px; line-height: 1.6; color: #7A5A1E;
}
.nnh-promo-draft strong { color: #1C2B40; }
.nnh-promo-card {
background: #FFFFFF; border: 1px solid #EAE2D3; border-radius: 16px;
overflow: hidden; box-shadow: 0 4px 16px rgba(34,51,74,.07);
}
.nnh-promo-banner img { display: block; width: 100%; height: 180px; object-fit: cover; }
.nnh-promo-head { background: var(--nnh-brand); color: #FFFFFF; padding: 22px 26px 20px; }
.nnh-promo-who { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; opacity: .95; }
.nnh-promo-logo, .nnh-promo-mark {
width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
background: rgba(255,255,255,.9); color: #22334A; font-size: 11px; font-weight: 800; object-fit: cover;
}
.nnh-promo-head h1 {
margin: 12px 0 0; font-size: 27px; font-weight: 800; line-height: 1.2;
letter-spacing: -0.4px; color: #FFFFFF;
}
.nnh-promo-squig { display: block; margin-top: 8px; }
.nnh-promo-body { padding: 22px 26px 20px; }
.nnh-promo-text { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: #3B4C64; }
/* Brand colour paints the header band; the action stays coral, matching the
preview in the editor and the CTA colour used everywhere else on the site. */
.nnh-promo-cta {
display: inline-block; background: #E8862E; color: #FFFFFF;
font-weight: 700; font-size: 14.5px; padding: 12px 26px; border-radius: 999px; text-decoration: none;
box-shadow: 0 2px 6px rgba(232,134,46,.3);
}
.nnh-promo-cta:hover { background: #D1751F; color: #FFFFFF; text-decoration: none; }
.nnh-promo-foot {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
border-top: 1px solid #F7F2E7; margin-top: 20px; padding-top: 14px;
font-size: 12.5px; color: #5C6B82;
}
.nnh-promo-rating { color: #B8791E; font-weight: 600; }
@media (max-width: 600px) {
.nnh-promo { margin: 28px auto; }
.nnh-promo-head h1 { font-size: 23px; }
}
/* -------------------------------------------------------------
v0.50.4 — Promo page editor (Promo page mockups, 5.18.x):
purpose chips, three layout tiles, and the live preview panel.
------------------------------------------------------------- */
.nnh-ownerdash .nnh-promoed { background:#FFFFFF; border:1px solid #EAE2D3; border-radius:14px; padding:24px 28px; }
.nnh-ownerdash .nnh-promoed h3 { margin:0; font-size:17px; font-weight:800; color:#1C2B40; }
.nnh-ownerdash .nnh-promoed-lede { margin:8px 0 0; font-size:13.5px; line-height:1.65; color:#3B4C64; max-width:640px; }
.nnh-ownerdash .nnh-promoed-chip {
display:inline-block; margin:14px 0 0; background:#FDF3E0; border:1px solid #F0DDB8;
border-radius:999px; padding:6px 16px; font-size:12.5px; font-weight:700; color:#7A5A1E;
}
.nnh-ownerdash .nnh-promoed-chip.is-live { background:#EAF3E6; border-color:#CBE2C2; color:#3E7A34; }
.nnh-ownerdash .nnh-promoed-lab { margin:20px 0 8px; font-size:13px; font-weight:700; color:#22334A; }
.nnh-ownerdash .nnh-promoed-lab em { font-style:normal; font-weight:500; color:#5C6B82; }
.nnh-ownerdash .nnh-promoed-chips { display:flex; gap:8px; flex-wrap:wrap; }
.nnh-ownerdash .nnh-promoed-pill {
cursor:pointer; border:1.5px solid #D8CFBC; background:#FFFFFF; color:#42546E;
border-radius:999px; padding:9px 18px; font-size:13px; font-weight:700;
}
.nnh-ownerdash .nnh-promoed-pill input { position:absolute; opacity:0; width:0; height:0; }
.nnh-ownerdash .nnh-promoed-pill:hover { border-color:#22334A; }
.nnh-ownerdash .nnh-promoed-pill.on { background:#22334A; border-color:#22334A; color:#FFFFFF; }
.nnh-ownerdash .nnh-promoed-lays { display:flex; gap:14px; flex-wrap:wrap; }
.nnh-ownerdash .nnh-promoed-lay {
cursor:pointer; width:132px; border:1.5px solid #EAE2D3; border-radius:12px;
padding:10px; background:#FFFFFF; text-align:center;
}
.nnh-ownerdash .nnh-promoed-lay input { position:absolute; opacity:0; width:0; height:0; }
.nnh-ownerdash .nnh-promoed-lay.on { border-color:#E8862E; background:#FDF3E0; }
.nnh-ownerdash .nnh-promoed-thumb {
display:flex; flex-direction:column; gap:4px; background:#FBF8F1;
border-radius:8px; padding:8px; min-height:62px;
}
.nnh-ownerdash .nnh-promoed-thumb i { display:block; border-radius:2px; }
.nnh-ownerdash .nnh-promoed-thumb .ph { height:14px; background:repeating-linear-gradient(45deg,#E6DCCB,#E6DCCB 4px,#F2ECDF 4px,#F2ECDF 8px); }
.nnh-ownerdash .nnh-promoed-thumb .hd { height:12px; background:#2A5D7C; }
.nnh-ownerdash .nnh-promoed-thumb .ln { height:4px; background:#E0D8C8; }
.nnh-ownerdash .nnh-promoed-thumb .ln.short { width:60%; }
.nnh-ownerdash .nnh-promoed-thumb .fd { height:9px; background:#FFFFFF; border:1px solid #E0D8C8; }
.nnh-ownerdash .nnh-promoed-thumb .bt { height:7px; width:46%; background:#E8862E; border-radius:999px; }
.nnh-ownerdash .nnh-promoed-layname { display:block; margin-top:8px; font-size:12px; font-weight:700; color:#42546E; }
.nnh-ownerdash .nnh-promoed-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:22px; align-items:start; }
.nnh-ownerdash .nnh-promoed-aibtns { margin:0 0 14px; }
.nnh-ownerdash .nnh-promoed-prevhead { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.nnh-ownerdash .nnh-promoprev {
--nnh-brand:#29597F; border:1px solid #EAE2D3; border-radius:12px; overflow:hidden; background:#FFFFFF;
}
.nnh-ownerdash .nnh-promoprev.is-phone { max-width:300px; }
.nnh-ownerdash .nnh-promoprev-banner { display:none; }
.nnh-ownerdash .nnh-promoprev.is-banner .nnh-promoprev-banner { display:block; }
.nnh-ownerdash .nnh-promoprev-banner img { display:block; width:100%; height:74px; object-fit:cover; }
.nnh-ownerdash .nnh-promoprev-banner[data-empty] {
height:74px; display:none; place-items:center;
background:repeating-linear-gradient(45deg,#E6DCCB,#E6DCCB 6px,#F2ECDF 6px,#F2ECDF 12px);
font-size:11.5px; color:#7A6A52;
}
.nnh-ownerdash .nnh-promoprev.is-banner .nnh-promoprev-banner[data-empty] { display:grid; }
.nnh-ownerdash .nnh-promoprev-head { background:var(--nnh-brand); color:#FFFFFF; padding:14px 16px; }
.nnh-ownerdash .nnh-promoprev-who { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; }
.nnh-ownerdash .nnh-promoprev-mark {
width:20px; height:20px; border-radius:5px; background:rgba(255,255,255,.9);
color:#22334A; display:grid; place-items:center; font-size:9px; font-weight:800;
}
.nnh-ownerdash .nnh-promoprev-h1 { margin-top:8px; font-size:17px; font-weight:800; line-height:1.25; }
.nnh-ownerdash .nnh-promoprev-body { padding:14px 16px; }
.nnh-ownerdash .nnh-promoprev-body p { margin:0 0 12px; font-size:12.5px; line-height:1.6; color:#3B4C64; }
.nnh-ownerdash .nnh-promoprev-form { display:none; flex-direction:column; gap:6px; margin-bottom:12px; }
.nnh-ownerdash .nnh-promoprev.is-form .nnh-promoprev-form { display:flex; }
.nnh-ownerdash .nnh-promoprev-form span { height:26px; border:1px solid #E0D8C8; border-radius:7px; background:#FFFDF8; }
/* The band above carries the brand colour (identity); the button stays coral —
it is the site's action colour, and the mockup shows the two side by side. */
.nnh-ownerdash .nnh-promoprev-cta {
display:inline-block; background:#E8862E; color:#FFFFFF;
font-size:12.5px; font-weight:700; padding:9px 18px; border-radius:999px;
}
.nnh-ownerdash .nnh-promoprev-foot {
border-top:1px solid #F7F2E7; margin-top:14px; padding-top:10px;
font-size:11.5px; color:#5C6B82;
}
.nnh-ownerdash .nnh-promoed-prevnote { margin:10px 0 0; font-size:11.5px; color:#9FAEC4; }
.nnh-ownerdash .nnh-promoed-foot {
display:flex; gap:14px; align-items:center; flex-wrap:wrap;
border-top:1px solid #F7F2E7; margin-top:22px; padding-top:18px;
}
.nnh-ownerdash .nnh-promoed-foot span { flex:1; min-width:220px; font-size:12.5px; color:#5C6B82; }
@media (max-width:900px){ .nnh-ownerdash .nnh-promoed-grid { grid-template-columns:1fr; } }
.nnh-ownerdash .nnh-promoed-chip.is-back { background:#FBEAE6; border-color:#E7C9C2; color:#A65D4E; }
.nnh-ownerdash .nnh-promoed-aibtns { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nnh-ownerdash .nnh-promo-say.rec { border-color:#A65D4E; background:#FBEAE6; color:#A65D4E; }
.nnh-ownerdash .nnh-promo-saystatus { font-size:12px; color:#A65D4E; }
/* -------------------------------------------------------------
v0.50.7 — sidebar spacing. It was display:block with per-block
margins, giving gaps of 28 / 0 / 0 / 22 / 12 / 0 / 0 — the
switcher welded to the Overview pill, and "View public page",
the tour button and the Ask card all touching.
The design system is explicit: space siblings with the parent's
gap, never with margins, so rows stay even as blocks come and go.
------------------------------------------------------------- */
.nnh-ownerdash .odnav {
display: flex;
flex-direction: column;
gap: 20px;
}
.nnh-ownerdash .odnav > * { margin-top: 0; margin-bottom: 0; }
/* the identity block owns its own internal rhythm */
.nnh-ownerdash .odbiz { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.nnh-ownerdash .odbiz > span:last-child { display: block; min-width: 0; }
.nnh-ownerdash .odswitch-sel { margin-top: 6px; }
/* the two link-ish rows sit together as one group, not 20px apart */
.nnh-ownerdash .odnav > .odview { margin: 0; }
.nnh-ownerdash .odnav > a.odview + button.odview { margin-top: -12px; }
/* v0.50.8 — the residual margins live on (0,3,0) selectors
(`.nnh-ownerdash .odnav .odbiz`, `… .odhealth`), so `> *` at (0,2,0)
never reached them. Matched, not escalated to !important. */
.nnh-ownerdash .odnav > .odbiz,
.nnh-ownerdash .odnav > .odhealth,
.nnh-ownerdash .odnav > .odsidenote,
.nnh-ownerdash .odnav > .odaskcard,
.nnh-ownerdash .odnav > nav { margin-top: 0; margin-bottom: 0; }
/* v0.50.9 — identity block: avatar left, name/town/switcher stacked right,
top-aligned as the mockup has it (was centre-aligned, which pushed the
switcher onto the same row as the name). */
.nnh-ownerdash .odnav > .odbiz { align-items: flex-start; gap: 12px; }
.nnh-ownerdash .odnav > .odbiz > span:last-child { display: block; min-width: 0; flex: 1; }
.nnh-ownerdash .odnav > .odbiz b { display: block; font-size: 14px; font-weight: 800; color: #1C2B40; line-height: 1.3; }
.nnh-ownerdash .odnav > .odbiz small { display: block; font-size: 12px; color: #5C6B82; margin-top: 2px; }
.nnh-ownerdash .odswitch-sel { display: block; width: 100%; margin-top: 6px; }
/* v0.51.0 — identity block sized to the mockup: 38px tile, 10px radius,
14px initials, and the town line 2px under the name. */
.nnh-ownerdash .odnav > .odbiz > .odbiz-logo {
width: 38px; height: 38px; flex: 0 0 38px;
border-radius: 10px; font-size: 14px; font-weight: 800;
}
.nnh-ownerdash .odnav > .odbiz b { line-height: 1.3; margin: 0; }
.nnh-ownerdash .odnav > .odbiz small { margin-top: 2px; line-height: 1.35; }
/* --------------------------------------------------------------------------
v0.51.1 — Promo slots. Three permanent links per business, so the picker is
a short list of addresses with a state line under each, not a set of cards.
The ⋯ menu is a so it works with no JS at all.
-------------------------------------------------------------------------- */
.nnh-ownerdash .nnh-slots { display: flex; flex-direction: column; gap: 8px; }
.nnh-ownerdash .nnh-slot {
display: flex; align-items: stretch; gap: 0;
background: #FFFFFF; border: 1px solid #EAE2D3; border-radius: 12px;
}
.nnh-ownerdash .nnh-slot.on { background: #F1E9DA; border: 2px solid #22334A; }
.nnh-ownerdash .nnh-slot-main {
display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0;
padding: 11px 14px; text-decoration: none; color: inherit;
}
.nnh-ownerdash .nnh-slot-main:hover { text-decoration: none; }
.nnh-ownerdash .nnh-slot-n {
display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px;
border-radius: 999px; background: #F2ECDF; color: #5C6B82;
font-size: 12px; font-weight: 800;
}
.nnh-ownerdash .nnh-slot.on .nnh-slot-n { background: #22334A; color: #FFFFFF; }
.nnh-ownerdash .nnh-slot-txt { min-width: 0; }
.nnh-ownerdash .nnh-slot-txt code {
display: block; font-size: 12.5px; font-weight: 600; color: #22334A;
background: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nnh-ownerdash .nnh-slot-txt em {
display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: #5C6B82;
}
.nnh-ownerdash .nnh-slot-txt em.is-live,
.nnh-ownerdash .nnh-slot-txt em.is-ok { color: #3E7A34; }
.nnh-ownerdash .nnh-slot-txt em.is-warn { color: #B8791E; }
.nnh-ownerdash .nnh-slot-menu { position: relative; flex: 0 0 auto; }
.nnh-ownerdash .nnh-slot-menu > summary {
list-style: none; cursor: pointer; user-select: none;
display: grid; place-items: center; width: 42px; height: 100%;
color: #9FAEC4; font-size: 15px; letter-spacing: 1px; border-radius: 0 10px 10px 0;
}
.nnh-ownerdash .nnh-slot-menu > summary::-webkit-details-marker { display: none; }
.nnh-ownerdash .nnh-slot-menu > summary:hover { color: #22334A; }
.nnh-ownerdash .nnh-slot-menubox {
position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 214px;
display: flex; flex-direction: column; padding: 6px;
background: #FFFFFF; border: 1px solid #EAE2D3; border-radius: 12px;
box-shadow: 0 6px 18px rgba(34,51,74,.14);
}
.nnh-ownerdash .nnh-slot-menubox a,
.nnh-ownerdash .nnh-slot-menubox button {
display: block; width: 100%; text-align: left;
padding: 7px 10px; border: 0; border-radius: 8px; background: none;
font: inherit; font-size: 13px; color: #3B4C64; text-decoration: none; cursor: pointer;
}
.nnh-ownerdash .nnh-slot-menubox a:hover,
.nnh-ownerdash .nnh-slot-menubox button:hover { background: #FBF8F1; color: #22334A; text-decoration: none; }
.nnh-ownerdash .nnh-slots-note { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: #5C6B82; }
.nnh-ownerdash .nnh-promoed-chip.is-back { background: #FBEAE6; border-color: #EBCFC8; color: #A65D4E; }
.nnh-ownerdash .nnh-promoed .field { margin: 0 0 14px; }
.nnh-ownerdash .nnh-promoed .field label { display: block; margin-bottom: 6px; }
/* The shared field rule sets padding/border but not width — inside the promo
editor's two-column grid the inputs must fill their column, or they collapse
to the browser's default 20-character size. */
.nnh-ownerdash .nnh-promoed .field input[type="text"],
.nnh-ownerdash .nnh-promoed .field select,
.nnh-ownerdash .nnh-promoed .field textarea { width: 100%; box-sizing: border-box; }
.nnh-ownerdash .nnh-promoed .field .opt { font-weight: 500; color: #9FAEC4; }
.nnh-ownerdash .nnh-promoed .nnh-help {
display: block; margin-top: 5px; font-size: 12px; line-height: 1.55; color: #5C6B82;
}
.nnh-ownerdash .nnh-promoed input[type="date"] { box-sizing: border-box; }
.nnh-ownerdash .nnh-promoed-foot {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-top: 22px; padding-top: 18px; border-top: 1px solid #F7F2E7;
}
.nnh-ownerdash .nnh-promoed-foot span { font-size: 12.5px; color: #5C6B82; }
@media (max-width: 720px) {
.nnh-ownerdash .nnh-slot-txt code { white-space: normal; word-break: break-all; }
}
.nnh-ownerdash .odpagehead-lede {
margin: 12px 0 0; max-width: 720px;
font-size: 14px; line-height: 1.65; color: #3B4C64;
}
/* Promo page sits on its own — give it the same 48px rhythm below the nav as
every other content wrapper. (No flex sticky-footer here: `display:flex` on
body makes the full-bleed topbar and footer shrink to the content width.) */
/* `.nnh-page .wrap{padding:0 32px}` is (0,2,0) and beats a bare class, so the
promo wrapper is matched the same way `.nnh-profile` is. */
main.wrap.nnh-promo { padding-top: 48px; padding-bottom: 64px; }
@media (max-width: 720px) { main.wrap.nnh-promo { padding-top: 32px; padding-bottom: 40px; } }
/* --------------------------------------------------------------------------
v0.52.0 — Auto-replies. One card per channel; the row collapses to its
header + toggle, and opens to the writing pane beside a live sample of what
the customer actually receives. so it works with JS off.
-------------------------------------------------------------------------- */
.nnh-ownerdash .nnh-arlist { display: flex; flex-direction: column; gap: 16px; }
.nnh-ownerdash .nnh-arrow {
background: #FFFFFF; border: 1px solid #EAE2D3; border-radius: 14px;
padding: 18px 20px 4px;
}
.nnh-ownerdash .nnh-arrow > summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.nnh-ownerdash .nnh-artop { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nnh-ownerdash .nnh-arrow > summary::-webkit-details-marker { display: none; }
.nnh-ownerdash .nnh-artile {
display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px;
border-radius: 10px; background: #22334A;
}
.nnh-ownerdash .nnh-artitle { display: block; min-width: 0; }
.nnh-ownerdash .nnh-artitle b { display: block; font-size: 15px; font-weight: 800; color: #1C2B40; }
.nnh-ownerdash .nnh-artitle em { display: block; margin-top: 1px; font-style: normal; font-size: 12.5px; color: #5C6B82; }
/* The caret sits with the toggle, pointing the way the row will move. */
.nnh-ownerdash .nnh-arswitch { display: flex; align-items: center; gap: 6px; }
.nnh-ownerdash .nnh-arcaret::after { content: "\25BE"; color: #B8791E; font-size: 11px; }
.nnh-ownerdash .nnh-arrow[open] .nnh-arcaret::after { content: "\25B4"; }
.nnh-ownerdash .nnh-arrow[open] > summary { padding-bottom: 14px; border-bottom: 1px solid #F7F2E7; }
.nnh-ownerdash .nnh-arbody {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
padding: 16px 0 18px; align-items: start;
}
.nnh-ownerdash .nnh-arwrite textarea { width: 100%; box-sizing: border-box; min-height: 96px; }
.nnh-ownerdash .nnh-arbtns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.nnh-ownerdash .nnh-artokens { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.nnh-ownerdash .nnh-artokens > span { font-size: 12px; color: #5C6B82; }
.nnh-ownerdash .nnh-artokens button {
border: 1px solid #C9DAEA; background: #E9F2F8; color: #1F6FA8;
font: inherit; font-size: 12px; font-weight: 600;
padding: 3px 10px; border-radius: 999px; cursor: pointer;
}
.nnh-ownerdash .nnh-artokens button:hover { border-color: #1F6FA8; }
.nnh-ownerdash .nnh-arsample .nnh-brand-caps { display: block; margin-bottom: 8px; }
.nnh-ownerdash .nnh-arsample-box {
background: #FBF8F1; border: 1px solid #EAE2D3; border-radius: 12px;
padding: 14px 16px; font-size: 13.5px; line-height: 1.65; color: #3B4C64;
min-height: 96px; box-sizing: border-box;
}
.nnh-ownerdash .nnh-arsample-note { margin: 8px 0 0; font-size: 12px; color: #9FAEC4; }
.nnh-ownerdash .nnh-arguard { margin: 4px 0 16px; font-size: 12.5px; line-height: 1.6; color: #5C6B82; font-style: italic; }
@media (max-width: 860px) {
.nnh-ownerdash .nnh-arbody { grid-template-columns: 1fr; gap: 16px; }
.nnh-ownerdash .nnh-arsample-box { min-height: 0; }
}
/* --------------------------------------------------------------------------
v0.52.2 — Messages. The earned reply badge as a pill, the settings stack
behind a gear link, replies drafted overnight, and a conversation header
that reads like an inbox row (who · when · what it's about).
-------------------------------------------------------------------------- */
/* The badge line is a pill plus a sentence now, not a tinted note box — the
older bordered treatment above is overridden rather than deleted. */
.nnh-ownerdash .nnh-reply-private {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 14px 0 18px; font-size: 12.5px; color: #5C6B82;
background: none; border-left: 0; border-radius: 0; padding: 0; max-width: none;
}
.nnh-ownerdash .nnh-replybadge {
display: inline-flex; align-items: center; gap: 5px;
background: #EAF3E6; border: 1px solid #CBE2C2; color: #3E7A34;
font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
}
.nnh-ownerdash .nnh-replybadge.is-soft { background: #FDF3E0; border-color: #F0DDB8; color: #7A5A1E; }
.nnh-ownerdash .nnh-replybadge.is-todo { background: #F2ECDF; border-color: #EAE2D3; color: #5C6B82; }
.nnh-ownerdash .nnh-msg-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nnh-ownerdash .nnh-msgsettings-toggle {
margin-left: auto; border: 0; background: none; cursor: pointer;
font: inherit; font-size: 12.5px; font-weight: 600; color: #1F6FA8; padding: 4px 2px;
}
.nnh-ownerdash .nnh-msgsettings-toggle:hover { color: #174F78; text-decoration: underline; }
.nnh-ownerdash .nnh-msgsettings { display: block; }
.nnh-ownerdash .nnh-msgsettings[hidden] { display: none; }
/* Replies drafted overnight — amber, because it is coaching, not an alert. */
.nnh-ownerdash .nnh-ready {
background: #FDF3E0; border: 1px solid #F0DDB8; border-radius: 14px;
padding: 20px 22px; margin-bottom: 20px;
}
.nnh-ownerdash .nnh-ready h2 { margin: 0; font-size: 16px; font-weight: 800; color: #1C2B40; }
.nnh-ownerdash .nnh-ready-sub { margin: 6px 0 16px; font-size: 13px; color: #7A5A1E; }
.nnh-ownerdash .nnh-ready-item {
background: #FFFFFF; border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
}
.nnh-ownerdash .nnh-ready-item:last-child { margin-bottom: 0; }
.nnh-ownerdash .nnh-ready-asked { margin: 0; font-size: 13.5px; color: #5C6B82; }
.nnh-ownerdash .nnh-ready-asked b { color: #1C2B40; font-weight: 800; }
.nnh-ownerdash .nnh-ready-draft {
background: #FBF8F1; border: 1px solid #EAE2D3; border-radius: 10px;
padding: 13px 15px; margin: 10px 0 14px;
font-size: 13.5px; line-height: 1.65; color: #3B4C64; white-space: pre-wrap;
}
.nnh-ownerdash .nnh-ready-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nnh-ownerdash .nnh-ready-skip {
border: 0; background: none; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: #5C6B82;
}
.nnh-ownerdash .nnh-ready-skip:hover { color: #22334A; text-decoration: underline; }
.nnh-ownerdash .nnh-ready-sent { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #3E7A34; }
/* Conversation summary row. */
.nnh-ownerdash .nnh-message-re {
display: block; margin-top: 2px; font-size: 13px; color: #3B4C64;
}
.nnh-ownerdash .nnh-message-email { display: block; margin-top: 2px; font-size: 12px; color: #9FAEC4; }
.nnh-ownerdash .nnh-message-sumacts { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.nnh-ownerdash .nnh-message-closelink { font-size: 12.5px; color: #5C6B82; cursor: pointer; }
.nnh-ownerdash .nnh-message-closelink:hover { color: #22334A; text-decoration: underline; }
.nnh-ownerdash .nnh-message-open-label { font-size: 12.5px; font-weight: 700; color: #1F6FA8; }
.nnh-ownerdash .nnh-message-open-label .is-shown,
.nnh-ownerdash .nnh-message-thread[open] .nnh-message-open-label .is-shut { display: none; }
.nnh-ownerdash .nnh-message-thread[open] .nnh-message-open-label .is-shown { display: inline; }
/* "This reads like a job" — a route, not an action. */
.nnh-ownerdash .nnh-msg-jobhint {
background: #E9F2F8; border: 1px solid #C9DAEA; border-radius: 10px;
padding: 10px 14px; margin: 0 0 12px; font-size: 13px; color: #3B4C64;
}
.nnh-ownerdash .nnh-msg-jobhint a { font-weight: 700; }
.nnh-ownerdash .nnh-vreply-caption { font-size: 12px; color: #9FAEC4; }
.nnh-ownerdash .nnh-message-actions { display: flex; align-items: center; gap: 10px; }
.nnh-ownerdash .nnh-message-reply-form .nnh-message-actions .nnh-btn.primary { margin-left: auto; }
/* Signature. */
.nnh-ownerdash .nnh-h3-sub { font-style: normal; font-size: 13px; font-weight: 600; color: #5C6B82; }
.nnh-ownerdash .nnh-sigblock { margin-top: 18px; padding-top: 16px; border-top: 1px solid #F7F2E7; }
.nnh-ownerdash .nnh-siglab { margin: 0 0 10px; font-size: 13px; color: #5C6B82; }
.nnh-ownerdash .nnh-siglab b { color: #22334A; font-weight: 700; }
.nnh-ownerdash .nnh-siglab em { font-style: normal; }
.nnh-ownerdash .nnh-siggrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
.nnh-ownerdash .nnh-siggrid .field input[type="text"] { width: 100%; box-sizing: border-box; }
.nnh-ownerdash .nnh-siglogo { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: #5C6B82; }
.nnh-ownerdash .nnh-sigcard {
display: flex; align-items: center; gap: 10px;
background: #FBF8F1; border: 1px solid #EAE2D3; border-radius: 12px; padding: 12px 14px;
}
.nnh-ownerdash .nnh-sigmark {
display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px;
border-radius: 9px; overflow: hidden; background: #22334A;
color: #F5A93B; font-size: 12px; font-weight: 800;
}
.nnh-ownerdash .nnh-sigmark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nnh-ownerdash .nnh-sigtext { min-width: 0; }
.nnh-ownerdash .nnh-sigtext b { display: block; font-size: 13.5px; font-weight: 800; color: #1C2B40; }
.nnh-ownerdash .nnh-sigtext em { display: block; font-style: normal; font-size: 12.5px; color: #5C6B82; line-height: 1.4; }
@media (max-width: 860px) { .nnh-ownerdash .nnh-siggrid { grid-template-columns: 1fr; } }
/* --------------------------------------------------------------------------
v0.52.4 — Conversation bubbles read like a conversation: the customer on
the left in sky tint, the owner on the right in cream. (The two tints were
the other way round; only the colours and alignment move.)
-------------------------------------------------------------------------- */
.nnh-ownerdash .nnh-message-sent {
max-width: 74%; width: fit-content;
background: #E9F2F8; color: #22334A;
}
.nnh-ownerdash .nnh-message-sent.is-customer { background: #E9F2F8; }
.nnh-ownerdash .nnh-message-sent:not(.is-customer) {
margin-left: auto; background: #FDF3E0;
}
.nnh-ownerdash .nnh-message-sent b { font-weight: 800; }
.nnh-ownerdash .nnh-thread-history { margin: 0 0 12px; }
.nnh-ownerdash .nnh-thread-history > summary {
cursor: pointer; font-size: 13px; font-weight: 600; color: #1F6FA8;
list-style: none; padding: 4px 0;
}
.nnh-ownerdash .nnh-thread-history > summary::-webkit-details-marker { display: none; }
.nnh-ownerdash .nnh-thread-history > summary::before { content: "\25B8 "; }
.nnh-ownerdash .nnh-thread-history[open] > summary::before { content: "\25BE "; }
.nnh-ownerdash .nnh-message-summary-copy { min-width: 0; }
.nnh-ownerdash .nnh-message-summary-copy .nnh-message-date { margin-left: 8px; }
/* --------------------------------------------------------------------------
v0.52.5 — Away mode reads as its own card, matching the mockup, while
staying inside the auto-reply