/* site.css — small CSP-clean utilities for app chrome built on top of base.css.
   Keep design-system tokens/components in base.css; only spacing helpers here. */

.section-pad { padding-top: 64px; padding-bottom: 64px; }
.mt-lg { margin-top: 28px; }

/* --- Admin auth --- */
.auth-wrap  { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card  { width: 100%; max-width: 380px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.auth-form  { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.auth-err   { background: var(--bad-bg); color: var(--bad); border-radius: var(--r-sm);
              padding: 9px 12px; font-size: 14px; font-weight: 600; }
.auth-alt   { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.hdr__who   { color: var(--ink-3); font-size: 14px; font-weight: 600; margin-right: 6px; }
.hdr__link  { color: var(--ink-3); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 13px; }
.hdr__link:hover { color: var(--ink); }

/* --- Public sign-up --- */
.signup-wrap { max-width: 660px; margin: 0 auto; padding: 36px var(--gutter) 64px; }
.signup-card { padding: clamp(22px, 4vw, 38px); }
.signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
@media (max-width: 600px) { .signup-grid { grid-template-columns: 1fr; } }

/* --- Admin owners --- */
.adm-signout { margin-left: 4px; }
.oav   { background: var(--forest); }   /* default; design used inline colors */
.oav-1 { background: #3a6a3a; }
.oav-2 { background: var(--forest); }
.oav-3 { background: #b8741a; }
.oav-4 { background: #7a5aa8; }
.oav-5 { background: #1862a8; }
.addform__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 11px; }
.flash       { padding: 10px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; margin: 4px 0 14px; }
.flash-ok    { background: var(--good-bg); color: var(--green-deep); }
.flash-error { background: var(--bad-bg); color: var(--bad); }

/* --- Admin domains --- */
.cardflow { overflow: hidden; }            /* design used inline overflow:hidden */
.dtable td .dom   { font-weight: 700; color: var(--ink); }
.dtable td .owner { display: inline-flex; align-items: center; gap: 7px; }
.rowact { display: flex; gap: 6px; justify-content: flex-end; }
.checkrow { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2);
            font-weight: 600; min-height: 38px; }
.checkrow input { width: 16px; height: 16px; }

/* --- Campaign plan picker --- */
.planpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
@media (max-width: 600px) { .planpick { grid-template-columns: 1fr; } }
.planopt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
           border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface);
           cursor: pointer; }
.planopt:hover { border-color: var(--forest); }
.planopt input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.planopt__t { font-size: 14px; color: var(--ink); font-weight: 700; }
.planopt__t small { display: block; font-size: 12px; color: var(--ink-4); font-weight: 600; margin-top: 2px; }
.price-line { font-size: 16px; color: var(--ink-3); margin: 4px 0 14px; }
.price-line strong { color: var(--ink); font-size: 19px; }
.in--narrow { max-width: 140px; }
.planopt--featured { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.planopt__tag { display: inline-block; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
                letter-spacing: .05em; color: var(--accent-ink); background: var(--accent-soft);
                border-radius: var(--r-pill); padding: 1px 8px; margin-left: 4px; }

/* --- Client dashboard --- */
.dash-wrap  { padding-top: 26px; padding-bottom: 48px; }
.setup-bar  { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
              margin-bottom: 14px; border-left: 4px solid var(--accent); }
.setup-bar__tx b { display: block; color: var(--ink); }
.pending-bar { background: var(--good-bg, #eef4e9); border: 1px solid var(--line); border-left: 4px solid var(--accent);
               border-radius: var(--r-sm); padding: 10px 14px; font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.pending-bar b { color: var(--ink); }
.imp-bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
           background: #243d24; color: #fff; padding: 8px 16px; font-size: 14px; font-weight: 600; }
.imp-bar b { color: #8fd45c; }
.imp-bar .btn { background: #fff; color: #243d24; border-color: #fff; min-height: 34px; }
.imp-bar .btn:hover { background: #eaf3e6; color: #243d24; }
.dash-hero  { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-hero h2 { font-size: clamp(22px, 3vw, 30px); }
.dash-strip { margin-bottom: 16px; }
.dash-strip .tile.stub { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .setup-grid { grid-template-columns: 1fr; } }
.card-head  { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-empty { margin-top: 12px; }
.charrow    { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
              padding: 11px 0; border-top: 1px solid var(--line-soft); }
.charrow__tx b { display: block; color: var(--ink); font-size: 14.5px; }
.charrow__tx span { display: block; font-size: 13px; color: var(--ink-4); margin-top: 2px; }
.domain-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.domain-switch .in { max-width: 220px; }

/* trait chips — the personality menu */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.chip  { display: inline-flex; align-items: center; padding: 7px 14px; border: 1.5px solid var(--line);
         border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--ink-3);
         background: var(--surface); cursor: pointer; user-select: none; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { border-color: var(--forest); color: var(--ink); }
.chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* --- Dashboard hub: per-website cards --- */
.dash-hero__act { display: flex; gap: 8px; flex-wrap: wrap; }
.small { font-size: 13px; }
.addrow { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.addrow .field { flex: 1; min-width: 220px; }
.addrow__act { display: flex; gap: 8px; }
.addcard { margin-bottom: 14px; }
.form-narrow { max-width: 640px; }
.domcard { background: var(--surface); border: 1px solid var(--line);
           border-left: 4px solid var(--card-accent, var(--forest)); border-radius: var(--r-md);
           margin-bottom: 14px; overflow: hidden; }
.domcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                 padding: 11px 16px; background: var(--surface-tint); border-bottom: 1px solid var(--line-soft); }
.domcard__name { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.domcard__name .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--card-accent, var(--forest)); flex: none; }
.domcard__body { padding: 4px 16px 12px; }
.camprow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           padding: 10px 0; border-top: 1px solid var(--line-soft); }
.camprow:first-child { border-top: none; }
.camprow__tx b { display: block; color: var(--ink); font-size: 14px; }
.camprow__tx span { font-size: 12.5px; color: var(--ink-4); }
.camprow__act { display: flex; align-items: center; gap: 10px; }
.acc-1 { --card-accent: #3a6a3a; } .acc-2 { --card-accent: #b8741a; }
.acc-3 { --card-accent: #7a5aa8; } .acc-4 { --card-accent: #1862a8; }
.acc-5 { --card-accent: #2f7d2a; }

/* --- Section color-coding (visual separation) --- */
.sec-personality { border-top: 3px solid var(--ig); }
.sec-characters  { border-top: 3px solid var(--blog); }
.sec-topics      { border-top: 3px solid var(--google); }
.sec-account     { border-top: 3px solid var(--green); }
.sec-connections { border-top: 3px solid var(--fb); }
.sec-style       { border-top: 3px solid var(--gold); }
.sec-generate    { border-top: 3px solid var(--accent); }
.sec-drafts      { border-top: 3px solid var(--fb); }
.stylecard { margin-bottom: 16px; }

/* --- Make a post --- */
.typepick { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.gen-field { margin: 10px 0; }
.gen-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.gen-lbl { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
           color: var(--ink-4); margin: 10px 0 5px; }
.sec-generate .kwpick-wrap { max-height: 116px; overflow-y: auto; }
.draft { padding: 9px 0; border-top: 1px solid var(--line-soft); }
.draft:first-of-type { border-top: none; }
.draft__head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.draft__idea { flex: 1; font-weight: 700; color: var(--ink); font-size: 13.5px; }
.post-body { white-space: pre-wrap; background: var(--surface-tint); border: 1px solid var(--line-soft);
             border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; color: var(--ink-2); line-height: 1.6;
             max-height: 92px; overflow-y: auto; } /* ~4 lines, then scroll; open the editor for more */

/* --- Side-by-side editor --- */
.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .editor-grid { grid-template-columns: 1fr; } }
.editor-pane { display: flex; flex-direction: column; }
.editor-ref { flex: 1; overflow-y: auto; max-height: 460px; }
.editor-form { display: flex; flex-direction: column; flex: 1; }
.editor-form .editor-ta { flex: 1; }
/* accordion drawers under the editor */
.regen-drawers { margin-top: 14px; }
/* .acc = native <details> accordion (NOT the design's .drawer, which clips to max-height:0) */
.acc { border: 1px solid var(--line-soft); border-radius: var(--r-sm); margin-top: 10px; background: #fff; }
.acc > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
                 padding: 10px 14px; font-weight: 700; font-size: 14px; color: var(--ink); }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before { content: "\25B8"; color: var(--ink-4); font-size: 11.5px; }
.acc[open] > summary::before { content: "\25BE"; }
.acc > summary .cap { margin-left: auto; font-weight: 600; }
.acc__body { padding: 2px 14px 14px; }
.qpick-wrap--open { max-height: none; }
/* length + regenerate bar under the accordions */
.regen-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.regen-bar__len { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.regen-bar__len label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.regen-bar__count { font-size: 13px; color: var(--ink-3); }
.regen-bar__count b { color: var(--ink); font-size: 15px; }
/* the clanker ("does this sound clankered?") box grows to fit its full response */
.clankcard .post-body { max-height: none; }
.editor-ta { width: 100%; min-height: 340px; font: inherit; font-size: 14px; line-height: 1.6;
             color: var(--ink); background: var(--surface); border: 1.5px solid var(--line);
             border-radius: 8px; padding: 11px; outline: none; resize: vertical; }
.editor-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.regen-field { margin-top: 12px; }
.regen-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }
.kwchip { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 4px 10px;
          border-radius: var(--r-pill); margin: 3px 4px 0 0; background: var(--canvas-2);
          color: var(--ink-4); border: 1px solid var(--line); }
.kwchip--on { background: var(--good-bg); color: var(--green-deep); border-color: transparent; }
.seo-num { font-size: 40px; font-weight: 800; color: var(--ink); line-height: 1; }
.seo-metrics { font-size: 13px; color: var(--ink-3); margin-top: 8px; padding-left: 18px; }
.seo-metrics li { margin: 2px 0; }
.linklist { font-size: 13px; word-break: break-all; }
.linklist a { display: block; margin: 3px 0; }

/* clickable keyword targets */
.kwpick-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.kwpick { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1.5px solid var(--line);
          border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-3);
          background: var(--surface); cursor: pointer; user-select: none; }
.kwpick input { position: absolute; opacity: 0; width: 0; height: 0; }
.kwpick:hover { border-color: var(--forest); color: var(--ink); }
.kwpick:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.kwpick--used::before { content: "•"; color: var(--good); font-weight: 800; }
.regen-row { margin-top: 10px; }

/* SEO / AEO / GEO scorecards */
.scores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .scores-grid { grid-template-columns: 1fr; } }
.sc-seo { border-top: 3px solid var(--green); }
.sc-aeo { border-top: 3px solid var(--gpt); }
.sc-geo { border-top: 3px solid var(--fb); }
.scorecard__num { font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1; }
.scorecard__num small { font-size: 13px; color: var(--ink-4); font-weight: 600; }
.checks { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.checks li { margin: 5px 0; color: var(--ink-3); }
.checks .yes { color: var(--good); font-weight: 800; }
.checks .no  { color: var(--ink-4); font-weight: 800; }
.stats-line { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-top: 14px; }
.linkcard { margin-top: 14px; }
.clankcard { margin-top: 14px; border-top: 3px solid var(--accent); }
.insight { margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.insight__h { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.insight__list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.insight__list li { margin: 3px 0; }
.deccard { margin-bottom: 14px; border-top: 3px solid var(--green); }
.dec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Approve & bank — prominent CTA at the bottom of the editor, by the analyzers */
.approvebar { display: flex; align-items: center; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap;
              margin-top: 18px; padding: 15px 18px; border: 2px solid var(--accent);
              border-radius: var(--r-md); background: var(--accent-soft); box-shadow: var(--sh-1); }
.approvebar.is-on { border-color: var(--good); background: var(--good-bg); }
.approvebar__tx { min-width: 220px; flex: 1; }
.approvebar__tx h3 { margin: 0 0 2px; font-size: 18px; }
.approvebar__tx .cap a { color: var(--accent-ink); font-weight: 700; }
.approvebar__form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.approvebar .checkrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--ink);
                        font-size: 14.5px; }
.approvebar .checkrow input { width: 18px; height: 18px; accent-color: var(--good); }
.approvebar .btn-primary { font-size: 15px; padding: 10px 20px; }
.chanpick { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chanchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1.5px solid var(--line);
            border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; color: var(--ink-3);
            background: var(--surface); cursor: pointer; user-select: none; }
.chanchip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chanchip:has(input:checked) { border-color: var(--accent); background: #fff; color: var(--ink); }
.bdr .pdots { margin-top: 0; }

/* Make-a-post: ideas (35%) beside drafts (65%) */
.make-grid { display: grid; grid-template-columns: 35fr 65fr; gap: 16px; align-items: start; margin-top: 16px; }
@media (max-width: 760px) { .make-grid { grid-template-columns: 1fr; } }

/* Make-a-post v2: guidance panel parallel to the generate box, drafts under */
.make-top { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: start; margin-top: 14px; }
@media (max-width: 860px) { .make-top { grid-template-columns: 1fr; } }
.gen-ta { width: 100%; height: 3.3em; min-height: 3.3em; resize: vertical; overflow-y: auto; line-height: 1.4; }
.make-gen .idearow { padding: 4px 0; }
.make-gen .idearow__tx { font-size: 12.5px; line-height: 1.35; }
.make-gen .drawer__sub { margin-top: 10px; }

/* Orange per-domain sub-nav (sits under the top bar on per-domain pages) */
.domnav { background: var(--accent); color: #fff; box-shadow: var(--sh-1); }
.domnav__in { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; min-height: 40px; }
.domnav__links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.domnav__links a { color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; padding: 9px 11px; border-radius: 6px; opacity: .92; }
.domnav__links a:hover { background: rgba(255,255,255,.16); opacity: 1; }
.domnav__links a.on { background: rgba(255,255,255,.24); opacity: 1; }
.domnav__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.domnav__use { font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
.domnav__use small { font-weight: 600; opacity: .85; margin-left: 5px; }
.domnav__dd { position: relative; }
.domnav__dd > summary { list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
                        display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 6px;
                        background: #fff; border: 1.5px solid var(--forest); }
.domnav__dd > summary:hover { background: #f4f7f1; }
.domnav__dd-sw { color: var(--ink-4); font-weight: 700; }
/* Switch Colors dropdown (Site Settings only) */
.domnav__colors > summary .swatch__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 1px solid rgba(0,0,0,.2); flex: none; }
.domnav__colorgrid { display: flex; flex-direction: column; gap: 1px; min-width: 150px; }
.colorswatch { margin: 0; }
.colorswatch__btn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border: 0;
                    background: none; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); }
.colorswatch__btn:hover { background: var(--accent-soft); }
.colorswatch__btn.on { font-weight: 800; }
.colorswatch .swatch__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 1px solid rgba(0,0,0,.15); flex: none; }
.domnav__dd > summary::-webkit-details-marker { display: none; }
.domnav__dd .chev { width: 14px; height: 14px; }
.domnav__panel { position: absolute; right: 0; top: 100%; margin-top: 5px; min-width: 200px; z-index: 30; padding: 4px;
                 background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.domnav__panel a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 13px; }
.domnav__panel a:hover { background: var(--accent-soft); color: var(--accent-ink); }
.domnav__panel a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }

/* brand: active domain under the BlackHills.biz wordmark */
.hdr__brandcol { display: flex; flex-direction: column; line-height: 1.12; }
.hdr__dom { font-size: 12px; font-weight: 700; color: var(--accent-ink); margin-top: 1px; }

/* account menu (top-right) — Settings + Sign out under the owner name */
.acct-dd { position: relative; }
.acct-dd > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
                     padding: 5px 8px; border-radius: var(--r-sm); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.acct-dd > summary::-webkit-details-marker { display: none; }
.acct-dd > summary:hover { background: #eef3e8; }
.acct-av { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
           background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; }
.acct-dd .chev { width: 14px; height: 14px; }
.acct-dd__panel { position: absolute; right: 0; top: 100%; margin-top: 6px; min-width: 190px; z-index: 50; padding: 5px;
                  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.acct-dd__name { padding: 6px 10px 8px; font-size: 12px; font-weight: 700; color: var(--ink-4);
                 border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.acct-dd__panel a, .acct-dd__signout { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
                 color: var(--ink); text-decoration: none; font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer; }
.acct-dd__panel a:hover, .acct-dd__signout:hover { background: var(--accent-soft); color: var(--accent-ink); }
.settings-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.make-guide .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.make-guide .gen-lbl { margin-top: 12px; }
.make-guide .gen-field { margin: 10px 0 0; }
.kwpick-wrap--tall { max-height: 130px; overflow-y: auto; }
.qpick-wrap { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 4px; max-height: 150px; overflow-y: auto; }
.qpick { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border: 1.5px solid var(--line);
         border-radius: 8px; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); cursor: pointer; }
.qpick input { margin: 2px 0 0; flex: none; }
.qpick:hover { border-color: var(--forest); color: var(--ink); }
.qpick:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.make-gen__btn { width: 100%; margin-top: 8px; }
.make-drafts { margin-top: 16px; }
.seedcard { margin-top: 16px; border-top: 3px solid var(--accent); }
.seedcard .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seedcard .typepick { margin: 0; }
.seed-ta { width: 100%; resize: vertical; min-height: 120px; line-height: 1.5; }

/* Make-a-post v3: context bar + parallel frames + generate-below */
.mp-context { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 8px 14px; border-width: 3px; }
.typepick { display: inline-flex; gap: 6px; align-items: center; }
.card-head__btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.mp-context__l { display: flex; align-items: center; gap: 10px; }
.mp-context .typepick { margin: 0; }
.make-seed { display: flex; flex-direction: column; }
.make-seed .seed-ta { flex: 1; }
.make-gen { margin-top: 16px; }
.make-gen__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.idea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin-top: 8px; }
@media (max-width: 760px) { .idea-grid { grid-template-columns: 1fr; } }

/* Editor v3 */
.ed-card .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.post-body--tall { max-height: none; }
.analyzecard { border-top: 3px solid var(--gpt, #10a37f); }
.analyzecard .insight__h { font-weight: 800; font-size: 12.5px; color: var(--ink-2); margin: 0 0 4px; }
.analyzecard .report-list { font-size: 13px; }
.ed-reports { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; align-items: start; }
@media (max-width: 900px) { .ed-reports { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ed-reports { grid-template-columns: 1fr; } }
.regen-bar__btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Ready-to-post (channels clear, publish-now distinct, dense) */
.readybar { margin-top: 16px; border-top: 3px solid var(--accent); }
.readybar.is-on { border-top-color: var(--green, #2f7d2a); }
.readybar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.readybar__head h3 { margin: 0; }
.readybar__approve { display: flex; flex-direction: column; gap: 10px; }
.readybar__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chanpicks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chanpicks__lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.chanpick2 { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
             border: 1.5px solid var(--line); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.chanpick2 input { position: absolute; opacity: 0; width: 0; height: 0; }
.chanpick2 .pdot { width: 9px; height: 9px; border-radius: 50%; }
.chanpick2:hover { border-color: var(--forest); color: var(--ink); }
.chanpick2:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.readybar__pub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.readybar__pubtag { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
                    color: var(--green-deep); background: var(--good-bg, #e7f3e2); padding: 4px 10px; border-radius: var(--r-pill); }
.settings-tip { margin-bottom: 14px; }

/* dense character frame (Content page) */
.charform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .charform__row { grid-template-columns: 1fr; } }
.chips--sm { gap: 5px; margin: 3px 0 6px; }
.chip--sm { padding: 4px 9px; font-size: 12px; }
.charform .field { margin-top: 8px; }
.charform .gen-lbl { margin-top: 8px; }

/* editor collapsible analysis / clanker sections */
.edsec { margin-top: 12px; }
.edsec .ed-reports { margin-top: 0; }
.ed-insights { margin-top: 12px; }
.ed-insights .insight__h { font-weight: 800; font-size: 12.5px; color: var(--ink-2); margin: 0 0 4px; }

/* Clanker structured edits — find→replace cards with Accept / Skip */
.clank-allbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.clank { border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin-top: 8px; background: var(--surface-tint); }
.clank__why { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.clank__diff { font-size: 13.5px; line-height: 1.6; }
.clank__old { background: #fde8e8; color: #8a2b2b; text-decoration: line-through; padding: 1px 5px; border-radius: 4px; }
.clank__new { background: var(--good-bg, #e7f3e2); color: var(--green-deep, #1f5a1d); padding: 1px 5px; border-radius: 4px; }
.clank__arrow { color: var(--ink-4); margin: 0 7px; }
.clank__act { display: flex; gap: 6px; margin-top: 9px; }

/* ChatGPT-ads explainer on the visibility page */
.av-ads { margin-bottom: 14px; }
.av-ads summary { cursor: pointer; font-size: 15px; }
.av-ads__body { margin-top: 10px; }
.av-ads__body p { margin: 8px 0; line-height: 1.55; }
.av-ads__body p.cap { line-height: 1.5; }

/* Dense, collapsible artifact rows (robots / schema / llms) on the visibility page */
.av-arts { display: flex; flex-direction: column; gap: 8px; }
.av-art { padding: 9px 14px; }
.av-art summary { cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-art__body { margin-top: 8px; }
.av-art__body .cap { margin: 0 0 6px; }

/* ---- Snipe War ---- */
.snipe-biz { border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin-top: 10px; background: var(--surface-tint); }
.snipe-biz__hd { font-weight: 800; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.snipe-biz__ft { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.snipe-color { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); font-weight: 700; }
.snipe-color input[type=color] { width: 34px; height: 28px; border: 1.5px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.snipe-whose { min-width: 220px; }
.snipe-confirm { display: block; font-weight: 700; margin-top: 14px; }
.snipe-controls { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.snipe-edit { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.snipe-edit__who { min-width: 120px; font-weight: 800; font-size: 13px; color: var(--ink-3); padding-top: 8px; }
.snipe-edit textarea { flex: 1; }

/* thread bubbles — on-screen preview */
.snipe-stage { max-width: 560px; margin: 14px auto; background: var(--canvas); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.snbub { display: flex; gap: 10px; margin: 10px 0; max-width: 82%; align-items: flex-start; }
.snbub--l { margin-right: auto; }
.snbub--r { margin-left: auto; flex-direction: row-reverse; }
.snbub--c { margin: 14px auto; max-width: 92%; }
.snbub__av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: block; }
.snbub__body { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 8px 13px; }
.snbub--r .snbub__body { background: var(--accent-soft); }
.snbub--c .snbub__body { background: #fff7e9; }
.snbub__who { font-weight: 800; font-size: 11.5px; color: var(--ink-3); }
.snbub__msg { font-size: 14px; color: var(--ink); line-height: 1.4; }
.snbub--pin .snbub__body { border: 2.5px solid var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.snbub-foot { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 14px; font-weight: 800; }
.bdr__img { max-width: 260px; width: 100%; border-radius: 10px; border: 1.5px solid var(--line); display: block; margin: 0 0 10px; }

/* off-screen, exact-pixel capture targets for html2canvas */
.snipe-cap { position: absolute; left: -99999px; top: 0; overflow: hidden; box-sizing: border-box; background: var(--canvas); padding: 56px 48px; }
.snipe-cap--fb { width: 1080px; height: 1080px; }
.snipe-cap--ig { width: 1080px; height: 1350px; }
.snipe-cap .snbub { margin: 18px 0; max-width: 80%; gap: 18px; }
.snipe-cap .snbub__av { width: 84px; height: 84px; }
.snipe-cap .snbub__body { border-radius: 26px; padding: 16px 26px; border-width: 3px; }
.snipe-cap .snbub__who { font-size: 23px; }
.snipe-cap .snbub__msg { font-size: 30px; line-height: 1.35; }
.snipe-cap .snbub--pin .snbub__body { border-width: 5px; }
.snipe-cap .snbub-foot { font-size: 28px; margin-top: 30px; }

/* Dark-website variant — matches the graphic background to a dark client site (domains.site_mode). */
.snipe-stage.snipe-dark,
.snipe-cap.snipe-dark { background: #14181d; }
.snipe-dark .snbub__body { background: #232a31; border-color: #38414c; }
.snipe-dark .snbub--r .snbub__body { background: #2b3742; }
.snipe-dark .snbub--c .snbub__body { background: #3a3320; }
.snipe-dark .snbub__msg { color: #f2f4f7; }
.snipe-dark .snbub__who,
.snipe-dark .snbub-foot { color: #b3bcc7; }
.snipe-dark .snbub--pin .snbub__body { box-shadow: 0 2px 12px rgba(0,0,0,.45); }
.snipe-modepick__opts { display: flex; gap: 18px; margin-top: 4px; flex-wrap: wrap; }
.snipe-modepick__opts label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }

/* Facebook connect guide — numbered steps */
.fbguide__steps { margin: 8px 0 4px 22px; padding: 0; list-style: decimal; }
.fbguide__steps li { margin: 6px 0; line-height: 1.55; }
.fbguide .card { margin-bottom: 12px; }

/* Plugin download row — Connections page and the WordPress guide. The download is the first
   thing anyone needs here, so it gets a button rather than a sentence with a link in it. */
.plugdl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.plugdl .cap { margin: 0; }

/* Connection check — the ladder. Terse on purpose: a client reads a column of ticks and one
   ✕, not a paragraph. Amber = "here is the one thing to look at", never red alarm. */
.conn-test { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.conn-test form { margin: 0; }

.diag { margin-top: 12px; border: 1.5px solid #d9b25a; background: #fdf6e6; border-radius: 9px; padding: 11px 13px; }
.diag.is-ok { border-color: #8fca6f; background: #f2f8ee; }
.diag__hd { font-size: 13.5px; font-weight: 800; color: #7a5a1a; }
.diag.is-ok .diag__hd { color: #226815; }

.diag__steps { list-style: none; margin: 9px 0 0; padding: 0; }
.diag__s { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.diag__mark { flex: none; width: 14px; text-align: center; font-weight: 800; }
.diag__s.is-ok   .diag__mark { color: #2f8a1f; }
.diag__s.is-fail .diag__mark { color: #b8281b; }
.diag__s.is-skip .diag__mark { color: #9a8f7d; }
.diag__s.is-fail .diag__l { font-weight: 800; }
.diag__l { color: #3a2f06; }
.diag__d { color: #7a6a3a; font-variant-numeric: tabular-nums; }

.diag__fixlbl { margin-top: 11px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #8a6d0b; }
.diag__fixes { margin: 5px 0 0 18px; padding: 0; }
.diag__fixes li { margin: 3px 0; font-size: 12.5px; line-height: 1.5; color: #4a3a06; }

.diag__ip { margin: 10px 0 0; font-size: 11.5px; color: #7a6a3a; }
.diag__ip b { color: #3a2f06; font-variant-numeric: tabular-nums; }

/* character accordion (Content page) */
.charcard { border: 1px solid var(--line-soft); border-radius: var(--r-sm); margin-top: 8px; background: #fff; }
.charcard__sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.charcard__sum::-webkit-details-marker { display: none; }
.charcard__sum::before { content: "\25B8"; color: var(--ink-4); font-size: 11.5px; flex: none; }
.charcard[open] .charcard__sum::before { content: "\25BE"; }
.charcard__nm { font-size: 14px; color: var(--ink); }
.charcard__tr { font-size: 12px; color: var(--ink-4); margin-left: auto; text-align: right; }
.charcard__body { padding: 6px 12px 12px; border-top: 1px solid var(--line-soft); }
.charcard--add .charcard__nm b { color: var(--accent-ink); }
.charcard__del { margin-top: 8px; }
.linkact.danger { color: #b3261e; }
.report-ref__open { margin-left: auto; font-weight: 600; }
/* land below the sticky header when a save jumps back to a section */
[id^="sec-"], [id^="char-"] { scroll-margin-top: 96px; }

/* Make-a-post: character radios + big Blog/Post toggle */
.mp-chars { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.charpick { position: relative; display: inline-flex; align-items: center; padding: 7px 13px; border: 1.5px solid var(--line);
            border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.charpick input { position: absolute; opacity: 0; width: 0; height: 0; }
.charpick:hover { border-color: var(--forest); color: var(--ink); }
.charpick:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.charpick--biz { font-style: italic; }
.mp-type { display: flex; gap: 6px; }
.bigtoggle { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 100px; padding: 10px 22px;
             border: 1.5px solid var(--line); border-radius: var(--r-md); font-size: 15px; font-weight: 800; color: var(--ink-3); cursor: pointer; }
.bigtoggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.bigtoggle:hover { border-color: var(--forest); color: var(--ink); }
.bigtoggle:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

/* expandable Topics box (drag taller, up to ~3x) */
.in--grow { resize: vertical; min-height: 96px; max-height: 320px; }

/* color-theme swatches (Site Settings) — each shows its own accent via a .dir-* class */
.theme-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.swatch { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border: 1.5px solid var(--line);
          border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 1px solid rgba(0,0,0,.15); }
.swatch:hover { border-color: var(--forest); }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Analytics Reports drawer — make it clearly a clickable drawer */
.report-ref { border: 1px solid var(--line); }
.report-ref > summary { background: var(--accent-soft); font-weight: 800; color: var(--accent-ink); padding: 11px 14px; }
.report-ref > summary::before { color: var(--accent-ink); }
.report-ref__hint { font-weight: 600; color: var(--ink-4); }
.report-ref__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* dashboard website drawers framed in their own theme color */
.wdr { border: 1.6px solid var(--accent); }

/* campaign cards (Add-campaign page) */
.camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 4px 0 20px; align-items: stretch; }
.camp-card { display: flex; flex-direction: column; gap: 6px; }
.camp-card__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.camp-card__hd b { font-size: 15px; color: var(--ink); }
.camp-card__stat { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.camp-card__dates { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.camp-card__dates b { color: var(--ink); }
.camp-card--on { border-left: 3px solid var(--good, #2f8a1f); }
.camp-card--add { border-top: 3px solid var(--accent); }
.camp-card--soon { opacity: .72; }
.camp-card .field { margin: 6px 0 0; }
.camp-card .price-line { margin: 6px 0; font-size: 13px; }
.camp-card form { margin-top: auto; }

/* seed extras (keywords + word count under the "start from your own words" box) */
.seed-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 4px; }
.seed-row .gen-field { margin: 0; flex: 1; min-width: 140px; }
.charform__default { margin-top: 8px; }

/* banked-idea accordion with a directions prompt */
.bankidea { border: 1px solid var(--line-soft); border-radius: var(--r-sm); margin-top: 8px; background: #fff; }
.bankidea__sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.bankidea__sum::-webkit-details-marker { display: none; }
.bankidea__sum::before { content: "\25B8"; color: var(--ink-4); font-size: 11.5px; flex: none; }
.bankidea[open] .bankidea__sum::before { content: "\25BE"; }
.bankidea__tx { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bankidea__del { margin-left: auto; flex: none; }
.bankidea__body { padding: 6px 12px 12px; border-top: 1px solid var(--line-soft); }
.report-mktg { margin-top: 12px; }
.report-list--cols { columns: 2; column-gap: 22px; }
@media (max-width: 720px) { .report-list--cols { columns: 1; } }
.idearow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
           padding: 6px 0; border-top: 1px solid var(--line-soft); }
.idearow:hover { background: var(--accent-soft); border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.idearow__tx { font-size: 13px; line-height: 1.4; color: var(--ink-2); flex: 1; }
.idearow__act { display: inline-flex; align-items: center; gap: 12px; flex: none; }
/* text-link actions (not buttons) */
.linkact { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px;
           font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.linkact:hover { text-decoration: underline; }
.linkact--go { color: var(--green-deep); }
.topics-card { margin-top: 16px; }

/* --- Settings: publishing channels --- */
.chrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.chrow:first-of-type { border-top: none; }
.chrow__name { font-weight: 700; color: var(--ink); flex: 1; }
.chdot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ch-facebook { background: var(--fb); } .ch-instagram { background: var(--ig); }
.ch-google { background: var(--google); } .ch-blog { background: var(--blog); }
.ch-chatgpt { background: var(--gpt); }
.btn:disabled { opacity: .55; cursor: default; }

/* --- Dashboard: per-website drawers --- */
.listrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           padding: 10px 0; border-top: 1px solid var(--line-soft); }
.listrow__tx b { display: block; color: var(--ink); font-size: 14px; }
.listrow__tx span { font-size: 12.5px; color: var(--ink-4); }
.listrow__act { display: flex; align-items: center; gap: 8px; }

/* .wdr = website drawer (distinct from the design's .drawer to avoid collision) */
.wdr { background: var(--surface); border: 1px solid var(--line);
       border-left: 4px solid var(--card-accent, var(--forest)); border-radius: var(--r-md);
       margin-bottom: 10px; }
.wdr__head { padding: 13px 16px; cursor: pointer; list-style: none; }
.wdr__head::-webkit-details-marker { display: none; }   /* hide default triangle */
.wdr__head::marker { content: ""; }
.wdr__row { display: flex; align-items: center; gap: 12px; }
.wdr__name { flex: 1; font-size: 15px; font-weight: 800; color: var(--ink); }
.wdr[open] .wdr__head { background: var(--surface-tint); border-bottom: 1px solid var(--line-soft); }
.wdr__chev { transition: transform .15s ease; color: var(--ink-4); flex: none; }
.wdr[open] .wdr__chev { transform: rotate(180deg); }
/* Onboarding & Fine-Tuning pill on the drawer front, next to the status pill */
.wdr__onb { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--surface-tint);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 11px; }
.wdr__onb:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.wdr__onb.is-todo { color: var(--warn); background: var(--warn-bg);
  border-color: color-mix(in oklab, var(--warn) 34%, var(--line)); }
.wdr__onb-c { font-weight: 800; background: var(--warn); color: #fff; border-radius: var(--r-pill); padding: 1px 8px; font-size: 11.5px; }
.wdr__body { padding: 14px 16px; }
.wdr__sub { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
            color: var(--ink-4); margin: 6px 0 4px; }
/* per-website link bar on the dashboard — same orange look as the per-domain .domnav */
.domlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 14px;
            background: var(--accent); border-radius: var(--r-sm); padding: 4px 6px; box-shadow: var(--sh-1); }
.domlinks a { color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
              padding: 8px 11px; border-radius: 6px; opacity: .92; }
.domlinks a:hover { background: rgba(255,255,255,.16); opacity: 1; }
.domlinks__add { margin-left: auto; background: rgba(255,255,255,.16); }
.dash-sub { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
            color: var(--ink-4); margin: 18px 0 10px; }

/* top-menu domain switcher (CSS-only dropdown) */
.menu-dd { position: relative; }
.menu-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
                     color: var(--ink-3); font-weight: 600; font-size: 15px; padding: 8px 13px; border-radius: var(--r-sm); }
.menu-dd > summary::-webkit-details-marker { display: none; }
.menu-dd[open] > summary { background: #eef3e8; color: var(--ink); }
.menu-dd__panel { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 210px; margin-top: 4px;
                  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
                  box-shadow: var(--sh-2); padding: 6px; display: flex; flex-direction: column; }
.menu-dd__panel a { padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-2);
                    text-decoration: none; font-size: 14px; font-weight: 600; }
.menu-dd__panel a:hover, .menu-dd__panel a.on { background: #eef3e8; color: var(--ink); }

/* --- Bank: approved posts as compact drawers (.bdr) --- */
.bdr { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--r-sm);
       margin-bottom: 6px; background: var(--surface); }
.bdr.is-social { border-left-color: var(--good); }
.bdr.is-blog   { border-left-color: var(--blog); }
.bdr__sum { display: flex; align-items: center; gap: 8px; padding: 7px 11px; cursor: pointer; list-style: none; }
.bdr__sum::-webkit-details-marker { display: none; }
.bdr__sum::marker { content: ""; }
.bdr__chev { transition: transform .15s ease; color: var(--ink-4); flex: none; }
.bdr[open] .bdr__chev { transform: rotate(90deg); }
.bdr__title { flex: 1; font-weight: 700; color: var(--ink); font-size: 13.5px; }
.bdr__meta { flex: none; }
.bdr[open] .bdr__sum { border-bottom: 1px solid var(--line-soft); background: var(--surface-tint); }
.bdr__body { padding: 11px 13px; }
.bdr__text { white-space: pre-wrap; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 10px; }
.bdr__act { display: flex; flex-wrap: wrap; gap: 8px; }

/* === Colorful page header band (calendar) === */
.hero-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
             background: linear-gradient(160deg, #1a2e1a 0%, #223e1f 55%, #2c4a26 100%); color: #fff;
             border-radius: var(--r-md); padding: 13px 18px; margin-bottom: 14px; box-shadow: var(--sh-2); }
.hero-band .kicker { color: rgba(255,255,255,.85); }
.hero-band .kicker a { color: #fff; text-decoration: underline; }
.hero-band h2 { color: #fff; margin: 2px 0 0; font-size: clamp(20px,2.6vw,27px); }
.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; }
.legend__i { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18);
             padding: 4px 10px; border-radius: var(--r-pill); }
.legend__hint { font-weight: 600; color: rgba(255,255,255,.9); font-size: 12px; }

/* ============================================================
   App density pass (2026-07-14) — tighter spacing across the
   logged-in app so there's less scrolling. Scoped body:not(.pub)
   so the public site keeps its own airier spacing (independent).
   ============================================================ */
body:not(.pub) .card-pad   { padding: clamp(14px, 1.8vw, 20px); }
body:not(.pub) .dash-wrap  { padding-top: 16px; padding-bottom: 26px; }
body:not(.pub) .dash-hero  { margin-bottom: 10px; }
body:not(.pub) .dash-strip { margin-bottom: 10px; }
body:not(.pub) .dash-sub   { margin: 13px 0 7px; }
body:not(.pub) .setup-grid { gap: 12px; }
body:not(.pub) .tiles      { gap: 10px; }
body:not(.pub) .tile       { padding: 10px 13px; }
body:not(.pub) .tile .v    { font-size: 22px; margin-top: 2px; }
body:not(.pub) .hero-band  { padding: 11px 16px; margin-bottom: 12px; }
body:not(.pub) .wdr        { margin-bottom: 8px; }
body:not(.pub) .wdr__head  { padding: 11px 16px; }
body:not(.pub) .wdr__body  { padding: 12px 16px; }
/* content-creation + editor pages: pull the column gaps in a touch */
body:not(.pub) .make-top,
body:not(.pub) .make-grid,
body:not(.pub) .editor-grid,
body:not(.pub) .info-grid  { gap: 12px; }
body:not(.pub) .ed-reports { gap: 10px; }

/* Choose-a-campaign (in-app /payment) — dense plan picker */
.paypick { max-width: 620px; }
.payopt { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1.5px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); cursor: pointer; margin-bottom: 8px; }
.payopt:hover { border-color: var(--forest); }
.payopt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: var(--accent-soft); }
.payopt > input { width: 17px; height: 17px; flex: none; accent-color: var(--accent); }
.payopt__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.payopt__tx b { font-size: 14.5px; color: var(--ink); }
.payopt__tx > span { font-size: 12.5px; color: var(--ink-4); }
.payopt__amt { font-size: 18px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.payopt--custom { align-items: flex-start; }
.payopt--custom .in { margin-top: 7px; width: 100%; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; outline: none; }
.payopt--custom .in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.paypick > .cap { margin: 10px 0; }
.paypick .btn-block { margin-top: 4px; }

/* Dense info/help page (ChatGPT-ads explainer etc.) — smaller type, tighter, lighter boxes.
   body:not(.pub) prefix keeps these above the app density-pass rules. */
body:not(.pub) .infodense { max-width: 740px; }
body:not(.pub) .infodense .dash-hero { margin-bottom: 8px; }
body:not(.pub) .infodense .dash-hero h2 { font-size: 20px; }
body:not(.pub) .infodense > .cap { font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }
body:not(.pub) .infodense .card { border-width: 1px; box-shadow: var(--sh-1); margin-bottom: 10px; }
body:not(.pub) .infodense .card.card-pad { padding: 12px 15px; }
body:not(.pub) .infodense .card h3 { font-size: 14px; margin-bottom: 5px; }
body:not(.pub) .infodense .card p { font-size: 12.5px; line-height: 1.5; margin: 6px 0; }
body:not(.pub) .infodense .card p:first-of-type { margin-top: 0; }
body:not(.pub) .infodense .card p:last-child { margin-bottom: 0; }

/* Podcast — coming-soon placeholder card */
.soon { max-width: 620px; text-align: center; }
.soon .pill { margin-bottom: 10px; }
.soon h3 { margin: 0 0 8px; font-size: 18px; }
.soon p { margin: 8px auto; max-width: 54ch; line-height: 1.55; }

/* big, high-visibility channel color map (calendar) */
.chan-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
               background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
               padding: 10px 14px; box-shadow: var(--sh-1); }
.chan-legend__t { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
                  color: var(--ink-4); margin-right: 2px; }
.chan-legend__i { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800;
                  padding: 7px 14px; border-radius: var(--r-pill); border: 2px solid transparent; }
.chan-legend .swatch { width: 18px; height: 18px; border-radius: 6px; display: inline-block; flex: none;
                       box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.legi-facebook  { background: var(--fb-bg);     color: var(--fb);     border-color: var(--fb); }
.legi-facebook  .swatch { background: var(--fb); }
.legi-instagram { background: var(--ig-bg);     color: var(--ig);     border-color: var(--ig); }
.legi-instagram .swatch { background: var(--ig); }
.legi-google    { background: var(--google-bg); color: var(--google); border-color: var(--google); }
.legi-google    .swatch { background: var(--google); }
.legi-blog      { background: var(--blog-bg);   color: var(--blog);   border-color: var(--blog); }
.legi-blog      .swatch { background: var(--blog); }

/* channel popover — change a scheduled post's channels in place */
.chpop { position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 4px; min-width: 152px;
         background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
         box-shadow: var(--sh-2); padding: 6px; cursor: default; }
.chpop__hd { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
             color: var(--ink-4); padding: 2px 6px 4px; }
.chpop__i { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 6px;
            font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.chpop__i:hover { background: var(--canvas-2); }
.chpop__i input { width: 15px; height: 15px; accent-color: var(--accent); }

/* website report */
.report-meta { margin: -4px 0 14px; }
.report-kw { margin-bottom: 16px; }
.kwrow { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 4px 0 6px; }
.report-kw__lt { margin-top: 12px; }
.report-apply { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
                padding-top: 12px; border-top: 1px solid var(--line-soft); }
.report-list { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.report-list li { margin: 6px 0; }

/* dense website report (free + paid) */
.rpt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rpt-actions__note { width: 100%; text-align: right; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.82); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.report-dense .card-pad { padding: 12px 14px; }
.report-dense .dash-sub { margin: 0 0 6px; }
.rpt-summary { margin-bottom: 12px; }
.rpt-summary h3 { margin: 0 0 4px; }
.rpt-summary p { margin: 0 0 4px; }
.rpt-gen { color: var(--ink-4); margin-top: 6px; }
.rpt-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .rpt-scores { grid-template-columns: 1fr; } }
.scores-grid--tight { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 0; }
.scores-grid--tight .card-pad { padding: 9px 11px; }
.scores-grid--tight h3 { font-size: 12.5px; margin: 0 0 3px; }
.scores-grid--tight .scorecard__num { font-size: 23px; }
.scores-grid--tight .cap { font-size: 11.5px; line-height: 1.3; margin-top: 4px; }
.rpt-cwv { margin: 8px 0 0; }
.rpt-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: start; margin-top: 14px; }
@media (max-width: 1000px) { .rpt-cols { grid-template-columns: 1fr; } }
.rpt-cols .report-list { font-size: 13px; }
.rpt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-top: 4px; }
.rpt-stat { padding: 9px 12px; }
.rpt-stat .v { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.rpt-stat .l { font-size: 11.5px; font-weight: 600; color: var(--ink-4); margin-top: 2px; }
.rpt-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.rpt-tbl th { text-align: left; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase;
              color: var(--ink-4); font-weight: 700; padding: 4px 6px; border-bottom: 1px solid var(--line-soft); }
.rpt-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.rpt-tbl th.num, .rpt-tbl td.num { text-align: right; white-space: nowrap; }
.rpt-pos { font-weight: 800; color: var(--green-deep); }
.report-ref { margin-bottom: 16px; border-top: 3px solid var(--accent); }
.report-ref .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.report-ref__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; align-items: start; margin-top: 8px; }
@media (max-width: 900px) { .report-ref__grid { grid-template-columns: 1fr; } }
.report-ref .report-list { font-size: 13px; }
.report-ref__apply { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 16px; }
/* improvement-over-time trend cards (inline-SVG sparklines) */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 8px; }
.trend-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trend-card__t { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.trend-card__d { font-size: 12px; font-weight: 800; color: var(--ink-4); white-space: nowrap; }
.trend-card__d.up { color: #1f5a1d; }
.trend-card__d.down { color: #b3261e; }
.trend-card__num { font-size: 22px; font-weight: 800; color: var(--ink); margin: 2px 0 6px; line-height: 1; }
.trend { width: 100%; height: 64px; display: block; }
/* report "working…" blocking overlay + count-up timer */
.wait-ov { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
           background: rgba(20,45,15,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.wait-box { background: #fff; border-radius: var(--r-lg); padding: 26px 30px; max-width: 380px; text-align: center;
            box-shadow: var(--sh-2); border-top: 4px solid var(--accent); }
.wait-box h3 { margin: 14px 0 6px; }
.wait-msg { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
.wait-time { font-size: 34px; font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; margin: 12px 0 2px; }
.wait-warn { color: var(--ink-4); font-size: 12.5px; font-weight: 600; margin: 0; }
.wait-spin { width: 38px; height: 38px; border-radius: 50%; margin: 0 auto; border: 4px solid var(--accent-soft);
             border-top-color: var(--accent); animation: wait-spin .8s linear infinite; }
@keyframes wait-spin { to { transform: rotate(360deg); } }
/* publish-to-website bar (editor) + calendar event publish button */
.pubbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; border-top: 3px solid var(--accent); }
.pubbar.is-on { border-top-color: var(--green, #2f7d2a); }
.pubbar h3 { margin: 0 0 2px; }
.cal-ev__hd .pdots { flex: 1; }
.cal-ev__pub { display: inline-flex; margin: 0; }
.cal-ev__go { background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--accent-ink); line-height: 0; }
.cal-ev__go svg { width: 13px; height: 13px; }
.cal-ev__go:hover { color: var(--accent); }

/* auth notices + email-verify banner */
.auth-note { padding: 9px 12px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.auth-note--ok  { background: var(--good-bg); color: var(--green-deep); }
.auth-note--err { background: #fbe3e3; color: #9a2a2a; }
.verify-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
              background: var(--warn-bg); border: 1px solid var(--warn); color: #6b4a12;
              border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; font-weight: 700; font-size: 14px; }

/* connections page — WordPress test action */
.conn-test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
             padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* in-place channel editor (bank drawer) */
.chanedit { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 10px;
            padding: 9px 11px; background: var(--surface-tint); border: 1px solid var(--line-soft); border-radius: var(--r-sm); }

/* === Scheduling calendar (drag & drop) === */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 12px; align-items: start; }
@media (max-width: 820px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-main { padding: 14px 16px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.cal-head h3 { margin: 0; font-size: 18px; }
.cal-nav { display: flex; gap: 6px; }
.navbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
          padding: 0 10px; border-radius: var(--r-pill); font-weight: 800; font-size: 15px; line-height: 1;
          color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; border: 1px solid transparent; }
.navbtn:hover { background: var(--accent); color: #fff; }
.navbtn--today { font-size: 13px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
           color: var(--ink-4); padding-bottom: 2px; }
.cal-cell { min-width: 0; min-height: 96px; border: 1px solid var(--line); border-radius: var(--r-sm);
            background: var(--surface); padding: 4px 5px; transition: background .1s, box-shadow .1s; }
.cal-cell:nth-child(7n+1), .cal-cell:nth-child(7n) { background: #f3f7ee; }  /* Sun & Sat tint */
.cal-cell.empty { background: transparent; border: 1px dashed transparent; }
.cal-cell.today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) inset; background: #fffaf4; }
.cal-cell.drop-hot { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.cal-date { font-size: 11.5px; font-weight: 800; color: var(--ink-4); padding: 1px 2px; }
.cal-cell.today .cal-date { color: var(--accent-ink); }

/* an event chip on the calendar (draggable): a header row of channel dots + ×, then a
   2-line-clamped title. Full title shows on hover (title attribute). */
.cal-ev { position: relative; display: block; margin-top: 3px; padding: 3px 6px 4px; border-radius: 6px;
          font-size: 11.5px; line-height: 1.2; font-weight: 600; cursor: grab; user-select: none;
          background: var(--canvas-2); color: var(--ink-2); border: 1px solid var(--line); }
.cal-ev .pdots { cursor: pointer; }
.cal-ev__hd .pdots { padding: 1px 2px; border-radius: 4px; }
.cal-ev__hd .pdots:hover { background: rgba(0,0,0,.06); }
.cal-ev:hover { border-color: var(--accent); background: #fff; box-shadow: var(--sh-1); }
.cal-ev.dragging, .bp.dragging { opacity: .45; }
.cal-ev__hd { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 12px; }
.cal-ev__tx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
              word-break: break-word; margin-top: 1px; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cal-ev__x { background: none; border: none; padding: 0 1px; cursor: pointer; font-size: 15px; line-height: 1;
             font-weight: 800; opacity: .45; flex: none; color: inherit; }
.cal-ev__x:hover { opacity: 1; color: var(--accent-ink); }

/* channel dots — one colored dot per channel a post publishes to */
.pdots { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; flex: none; }
.bp .pdots, .bdr .pdots { max-width: 44px; }
.pdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--line); }
.cal-ev .pdot, .legend .pdot, .chanchip .pdot { width: 10px; height: 10px; }
.pdot.ch-facebook { background: var(--fb); } .pdot.ch-instagram { background: var(--ig); }
.pdot.ch-google { background: var(--google); } .pdot.ch-blog { background: var(--blog); }
.cal-dot.is-social { background: var(--good); }
.cal-dot.is-blog   { background: var(--blog); }

/* banked-posts drag source list (tight + scrollable) */
.cal-side { padding: 12px 14px; }
.cal-side__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-side__head h3 { margin: 0; font-size: 15px; }
.cnt { display: inline-block; min-width: 20px; text-align: center; font-size: 12px; font-weight: 800;
       color: #fff; background: var(--green); border-radius: var(--r-pill); padding: 1px 7px; }
.bp-list { display: flex; flex-direction: column; gap: 5px; max-height: 540px; overflow-y: auto; padding-right: 2px; }
.bp { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 7px; cursor: grab;
      font-size: 12.5px; font-weight: 600; color: var(--ink-2); user-select: none;
      background: var(--surface-tint); border: 1px solid var(--line); }
.bp:hover { border-color: var(--accent); background: #fff; }
.bp .pdots { margin-top: 0; }
.bp__tx { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-empty { font-size: 12.5px; color: var(--ink-4); padding: 6px 2px; }
.cal-side .bp-list.drop-hot { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* ============================================================
   Create-a-post redesign — Make a post (2a) + The Editor (2b)
   Calm, top-to-bottom compose card + focused editor w/ tools rail.
   Uses theme accent tokens so every domain color still works.
   ============================================================ */

/* shared small text helpers (used bare on these pages) */
.cap   { font-size: 12.5px; color: var(--ink-4); font-weight: 600; line-height: 1.45; }
.muted { color: var(--ink-4); }
.iconbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
           color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex: none; }
.iconbtn:hover { border-color: var(--forest); color: var(--ink); }
.iconbtn.danger:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.iconbtn .ic { width: 16px; height: 16px; }
.linkact--danger { color: #b3261e; }
/* inputs inside the compose / editor cards (they aren't wrapped in .field) */
.compose .in, .editor .in, .writepage .in { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 11px; min-height: 38px; outline: none; }
.compose .in:focus, .editor .in:focus, .writepage .in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Make a post (2a) ---------- */
.compose { padding: 0; overflow: hidden; }
.compose__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px; background: var(--surface-tint); border-bottom: 2px solid var(--forest); flex-wrap: wrap; }
.compose__barL { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.compose__bar .seg2 { border-radius: 10px; }
.compose__bar .seg2__b { font-size: 13.5px; padding: 8px 14px; }
.compose__crumbs { font-size: 12px; color: var(--ink-4); font-weight: 600; }
.compose__title { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; margin-top: 1px; }
.compose__note { font-size: 12.5px; color: var(--ink-4); font-weight: 600; }
.compose__body { display: grid; grid-template-columns: 1fr 264px; align-items: stretch; }
@media (max-width: 820px) { .compose__body { grid-template-columns: 1fr; } }
.compose__form { min-width: 0; }

.crow { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.crow:last-child { border-bottom: none; }
.crow--top { align-items: start; }
.crow__lbl { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.crow__count { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-4); margin-top: 3px; }
.crow__field { min-width: 0; }
@media (max-width: 560px) { .crow { grid-template-columns: 1fr; gap: 8px; } }

/* segmented (Format / Topic) */
.seg2 { display: inline-flex; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg2__b { font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-3); background: var(--surface);
  border: none; border-right: 1px solid var(--line); padding: 8px 16px; cursor: pointer; }
.seg2__b:last-child { border-right: none; }
.seg2__b.on { background: var(--accent); color: var(--accent-contrast); }

/* author-voice pills (shared by compose + editor rail) */
.voices { display: flex; flex-wrap: wrap; gap: 8px; }
.voicepill { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2); text-align: left; user-select: none; }
.voicepill input { position: absolute; opacity: 0; width: 0; height: 0; }
.voicepill__av { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  color: #fff; font-size: 11.5px; font-weight: 800; flex: none; }
.voicepill:hover { border-color: var(--forest); }
.voicepill:has(input:checked), .voicepill.is-current { background: var(--good-bg); border-color: var(--good); color: var(--green-deep); }

/* Topic — suggested idea grid */
.topicpanel { margin-top: 12px; }
.topicpanel[hidden] { display: none; }
.ideagrid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.ideagrid:empty { display: none; }
.topicbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.topicbar__own { margin-left: auto; }
.compose__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px;
  border-top: 1px solid var(--line-soft); background: var(--surface-tint); }
.compose__foot .btn-primary { min-width: 190px; }

/* Boldly-separated stacked sections (compose + write-your-own) */
.csec { padding: 11px 18px; border-bottom: 2px solid var(--forest); }
.csec:last-of-type { border-bottom: none; }
.csec__hd { font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.csec__hd .cap, .csec__hd .crow__count { text-transform: none; letter-spacing: 0; font-weight: 600; }
.lenrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Keyword / phrase picker — full-width STACKED outlined boxes (~2 rows) + a Show-all toggle */
.kwsec { width: 100%; }
.kwcols { display: flex; flex-direction: column; gap: 9px; }
.kwgroup { border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface-tint); padding: 9px 11px; }
.kwgroup__lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4);
  margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kwgroup__lbl .cap { text-transform: none; letter-spacing: 0; font-weight: 600; }
.kwexpand { cursor: pointer; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--accent-ink); user-select: none; white-space: nowrap; }
.kwexpand input { position: absolute; opacity: 0; width: 0; height: 0; }
.kwexpand__less { display: none; }
.kwgroup:has(.kwexpand input:checked) .kwexpand__more { display: none; }
.kwgroup:has(.kwexpand input:checked) .kwexpand__less { display: inline; }
.kwgroup:has(.kwexpand input:checked) .kwbox { max-height: none; overflow: visible; }
.kwbox { max-height: 66px; min-height: 34px; overflow: auto; margin: 0; padding: 2px 4px 2px 2px; align-content: flex-start; }
.kwbox .kwtag { max-width: 100%; }
/* editor tools-rail keyword box: ~5 rows then scroll (keeps the rail short so media is reachable) */
.kwbox--rail { max-height: 132px; overflow-y: auto; align-content: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px; background: var(--surface); }
.kwbox--rail .kwtag { max-width: 100%; }
.kwadd { margin-top: 12px; }
.kwadd .in { width: 100%; box-sizing: border-box; }

/* Page toggle (Create a post ↔ Write your own) — prominent, left of the header */
.pagetoggle { display: inline-flex; border: 2px solid var(--forest); border-radius: 10px; overflow: hidden; box-shadow: var(--sh-1); }
.pagetoggle__b { font: inherit; font-size: 14px; font-weight: 800; color: var(--ink-3); background: var(--surface);
  text-decoration: none; padding: 9px 16px; display: inline-flex; align-items: center; gap: 7px; border-right: 2px solid var(--forest); }
.pagetoggle__b:last-child { border-right: none; }
.pagetoggle__b.on { background: var(--accent); color: var(--accent-contrast); }
.pagetoggle__b:not(.on):hover { background: var(--accent-soft); color: var(--accent-ink); }
/* radio-based segmented (matches .seg2 look, no JS — used in the write-page header) */
.segr { display: inline-flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.segr label { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-3); background: var(--surface);
  padding: 8px 14px; cursor: pointer; border-right: 1px solid var(--line); }
.segr label:last-child { border-right: none; }
.segr label:has(input:checked) { background: var(--accent); color: var(--accent-contrast); }
.segr input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Write-your-own page — full-width editor (standalone styling so nothing overrides its height) */
.writepage { padding: 0; overflow: hidden; }
.writeta { display: block; width: 100%; box-sizing: border-box; min-height: 340px; resize: vertical;
  font: inherit; font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 12px 14px; outline: none; }
.writeta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.writepage__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px;
  border-top: 1px solid var(--line-soft); background: var(--surface-tint); }
.reflinks { display: flex; flex-wrap: wrap; gap: 8px; }
.reflink { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--accent-ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; text-decoration: none; }
.reflink:hover { border-color: var(--accent); }
.refsnote { margin-top: 10px; }

/* Story links / RSS feeds — source rows + add form + fetched feed items */
.srclist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.srcrow { display: flex; align-items: center; gap: 8px; }
.srcrow form { display: inline-flex; margin: 0; }
.srcrow__link, .srcrow__feed { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srcrow__link { color: var(--accent-ink); text-decoration: none; }
.srcrow__link:hover { text-decoration: underline; }
.srcrow__feed { color: var(--ink-2); font-weight: 600; }
.srcx { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
  color: var(--ink-4); cursor: pointer; font-size: 12px; line-height: 1; flex: none; }
.srcx:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.srcadd { display: flex; gap: 8px; align-items: center; }
.srcadd .in { flex: 1; box-sizing: border-box; min-width: 0; }
.feeditems { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.feeditem { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); text-decoration: none; }
.feeditem:hover { border-color: var(--accent); }
.feeditem__t { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feeditem__s { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; flex: none; }

/* Editor: Images & video module */
.medialist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.medialist:empty { display: none; }
.mediaitem { padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.mediaitem--vid { display: flex; align-items: center; gap: 9px; }
.mediaitem--img { display: flex; flex-direction: column; gap: 6px; }
/* rail thumbnail — a fixed preview; the actual size is set by the Size buttons or by dragging in Preview */
.mediaimg { overflow: hidden; width: 100%; max-width: 100%;
  border: 1px solid var(--line); border-radius: 4px; line-height: 0; background: var(--canvas-2); }
.mediaimg img { width: 100%; height: auto; display: block; }
/* per-image size presets in the editor media panel */
.mediasize { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.mediasize__lbl { font-size: 11.5px; color: var(--ink-4); font-weight: 700; margin-right: 3px; }
.mediasize__b { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: 3px; min-width: 24px; height: 22px; padding: 0 6px; cursor: pointer; }
.mediasize__b:hover { border-color: var(--forest); }
.mediasize__b.on { background: var(--forest); color: #fff; border-color: var(--forest); }
.mediaitem__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mediaimg__w { color: var(--ink-4); font-weight: 600; margin-left: 3px; }
.mediaitem__vid { font-size: 16px; color: var(--ink-3); flex: none; }
.mediaitem__label { font-size: 12px; font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mediaitem--vid .mediaitem__label { flex: 1; }
.mediaitem__acts { display: inline-flex; gap: 12px; flex: none; }
.mediaitem__acts .linkact { font-size: 12px; }
.mediaadd { display: flex; flex-direction: column; gap: 8px; }
.mediaadd__btn { cursor: pointer; text-align: center; }
.mediaadd__vid { display: flex; gap: 6px; align-items: center; }
.mediaadd__vid .in { flex: 1; min-width: 0; box-sizing: border-box; }

/* Editor rewrite buttons — the primary action of the page: prominent, clearly distinct */
.rewritebtns { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.rewritebtns .btn { width: 100%; }
.rewrite__len { margin-bottom: 8px; }
/* a calm-but-visible blue-forest for the rewrite primary (not the orange accent, not an alert red) */
.btn-rewrite { background: #2f6a4a; color: #fff; border-color: #2f6a4a; box-shadow: 0 6px 16px -8px #2f6a4a; }
.btn-rewrite:hover { background: #275a3e; border-color: #275a3e; color: #fff; }
.btn-rewrite2 { background: #eaf2ec; color: #23553c; border-color: #7fae93; }
.btn-rewrite2:hover { background: #dbe9de; border-color: #2f6a4a; color: #1f4a34; }
/* Bank: bigger, resizable "directions" box */
.bankdir { display: block; width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical;
  font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 11px; outline: none; }
.bankdir:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Storage management screen */
.storage-usage { display: flex; gap: 22px; }
.storage-usage__n { display: block; font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.storage-usage__l { font-size: 11.5px; color: var(--ink-4); font-weight: 600; }
.stgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.stcard { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.stcard__img { display: block; aspect-ratio: 4 / 3; background: var(--canvas-2); }
.stcard__img img { width: 100%; height: 100%; object-fit: cover; }
.stcard__meta { padding: 8px 10px; }
.stcard__size { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.stcard__used { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stcard__used.is-orphan { color: var(--green-deep); }
.stcard__del { position: absolute; top: 6px; right: 6px; margin: 0; }
.stcard__del .iconbtn { width: 28px; height: 28px; background: rgba(255,255,255,.92); }
.idea { position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.idea input { position: absolute; opacity: 0; width: 0; height: 0; }
.idea__dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line); flex: none; margin-top: 1px; }
.idea:hover { border-color: var(--forest); }
.idea:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.idea:has(input:checked) .idea__dot { border-color: var(--accent); background: radial-gradient(var(--accent) 42%, transparent 48%); }
.ideagrid__bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.ideas-loading { display: flex; align-items: center; gap: 10px; padding: 14px 2px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.ideas-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--accent-soft);
  border-top-color: var(--accent); animation: wait-spin .8s linear infinite; flex: none; }
.ownta { width: 100%; resize: vertical; min-height: 92px; line-height: 1.5; }

/* Length presets + custom */
.lens { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lens[hidden] { display: none; }
.lenbtn { font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-3); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 14px; cursor: pointer; }
.lenbtn:hover { border-color: var(--forest); }
.lenbtn.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.lens__custom { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.lens__custom[hidden] { display: none; }
.lens__custom .in { width: 90px; min-height: 34px; border-color: var(--accent); }
.lens__note { margin-left: 10px; }

/* Optimize checkboxes */
.optrow { display: flex; gap: 20px; flex-wrap: wrap; }
.optcheck { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.optcheck input { position: absolute; opacity: 0; width: 0; height: 0; }
.optcheck__box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line); background: var(--surface);
  display: grid; place-items: center; flex: none; transition: background .12s ease, border-color .12s ease; }
.optcheck__box::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; opacity: 0; }
.optcheck input:checked + .optcheck__box { background: var(--good); border-color: var(--good); }
.optcheck input:checked + .optcheck__box::after { opacity: 1; }

/* Keyword chips (compose + editor) */
.kwgroups { display: flex; flex-direction: column; gap: 12px; }
.kwgroup__lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
.kwchips { display: flex; flex-wrap: wrap; gap: 5px; }
/* Keyword / phrase tags — tight, near-square gray boxes, darker border, black text (muted) */
.kwtag { position: relative; display: inline-flex; align-items: center; padding: 2px 7px;
  border: 1px solid #9aa094; border-radius: 2px; background: #e3e5e2; color: #1c1c1c;
  font-size: 12.5px; font-weight: 600; line-height: 1.5; cursor: pointer; user-select: none; }
.kwtag input { position: absolute; opacity: 0; width: 0; height: 0; }
.kwtag:hover { border-color: var(--forest); background: #d7dbd3; }
.kwtag:has(input:checked) { background: var(--forest); border-color: var(--forest); color: #fff; }
.kwtag--used { background: var(--good-bg); border-color: color-mix(in oklab, var(--good) 30%, var(--line)); color: var(--green-deep); }

/* Summary rail */
.summary { padding: 16px 18px; display: flex; flex-direction: column;
  border-left: 1px solid var(--line-soft); background: var(--surface-tint); }
@media (max-width: 820px) { .summary { border-left: none; border-top: 1px solid var(--line-soft); } }
.summary__h { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.srow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.srow__k { color: var(--ink-4); font-weight: 600; flex: none; }
.srow__v { color: var(--ink); font-weight: 700; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary__actions { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.summary__fine { margin-top: 10px; text-align: center; }

/* ---------- The Editor (2b) ---------- */
.editor { padding: 0; overflow: visible; position: relative; }   /* visible so the sticky doc can stick */
.editor__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--surface-tint); border-bottom: 1px solid var(--line-soft); }
.editor__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.editor__crumbs { font-size: 11.5px; color: var(--ink-4); font-weight: 600; }
.editor__biz { font-size: 14px; font-weight: 800; color: var(--ink); max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.editor__meta { font-size: 12.5px; color: var(--ink-4); font-weight: 600; }
.editor__meta b { color: var(--ink); }
.btn-bank { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-bank:hover { background: #9a6009; border-color: #9a6009; color: #fff; }
.btn-clank { background: #6a3a9e; color: #fff; border-color: #6a3a9e; }
.btn-clank:hover { background: #58307f; border-color: #58307f; color: #fff; }

.editor__body { display: grid; grid-template-columns: 1fr 316px; align-items: stretch; }
@media (max-width: 900px) { .editor__body { grid-template-columns: 1fr; } }
.doc { padding: 22px clamp(18px, 3vw, 30px); min-width: 0; border-right: 1px solid var(--line-soft); }
@media (max-width: 900px) { .doc { border-right: none; border-bottom: 1px solid var(--line-soft); } }
.doc__title { width: 100%; font: inherit; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.01em;
  border: none; border-bottom: 1.5px solid transparent; padding: 2px 0; outline: none; background: none; }
.doc__title:focus { border-bottom-color: var(--accent); }
.doc__metaline { font-size: 11.5px; color: var(--ink-4); font-weight: 600; margin: 4px 0 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.doc__actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.doc__ta { width: 100%; min-height: 460px; font: inherit; font-size: 14.5px; line-height: 1.75; color: var(--ink-2);
  border: none; outline: none; resize: vertical; background: none; }
/* Edit / Preview toggle + rendered preview (images show as images, not [image:N] markers) */
.docmodes { display: inline-flex; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.docmodes__b { font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--surface);
  border: none; border-right: 1px solid var(--line); padding: 4px 12px; cursor: pointer; }
.docmodes__b:last-child { border-right: none; }
.docmodes__b.on { background: var(--forest); color: #fff; }
.doc__preview { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); min-height: 460px;
  background: var(--surface-tint); border: 1px solid var(--line-soft); border-radius: 8px; padding: 14px 16px; }
.doc__preview p { margin: 0 0 1em; }
/* preview image: drag the bottom-right corner to resize (width only, ratio kept) */
.pvimg-wrap { display: inline-block; resize: horizontal; overflow: hidden; max-width: 100%; min-width: 60px;
  margin: 10px 0; line-height: 0; vertical-align: top; }
.pvimg { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); margin: 0; }
.pvimg-wrap.align-left { float: left; margin: 6px 14px 8px 0; }
.pvimg-wrap.align-right { float: right; margin: 6px 0 8px 14px; }
.pvimg-wrap.align-center { display: block; margin: 12px auto; }
.doc__preview::after { content: ""; display: block; clear: both; }
/* per-image alignment buttons in the editor media panel */
.mediaalign { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.mediaalign__lbl { font-size: 11.5px; color: var(--ink-4); font-weight: 700; margin-right: 3px; }
.mediaalign__b { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: 3px; width: 24px; height: 22px; cursor: pointer; }
.mediaalign__b:hover { border-color: var(--forest); }
.mediaalign__b.on { background: var(--forest); color: #fff; border-color: var(--forest); }
.pvvid { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent-ink);
  background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; margin: 8px 0; }
/* Sticky story on desktop: it stays on screen while you work down the tools rail */
@media (min-width: 901px) {
  .doc { position: sticky; top: 12px; align-self: start; }
  .doc__ta, .doc__preview { max-height: calc(100vh - 210px); overflow-y: auto; }
}

.tools { background: var(--surface-tint); min-width: 0; }
.tool { padding: 11px 15px; border-bottom: 1px solid var(--line-soft); }
.tool:last-child { border-bottom: none; }
.tool__h { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.tool__h span { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--ink-4); }
.tool__intro { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; margin: 6px 0 0; }

/* Estimated ranking (dense) */
.rank3 { display: flex; flex-direction: column; gap: 8px; }
.eng-aeo { --eng: #2f8a1f; } .eng-geo { --eng: #b8741a; } .eng-seo { --eng: #1862a8; }
.rankrow__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rankrow__id { display: flex; flex-direction: column; }
.rankrow__name { font-size: 13px; font-weight: 800; color: var(--ink); }
.rankrow__desc { font-size: 11.5px; color: var(--ink-4); }
.rankrow__score { font-size: 16px; font-weight: 800; color: var(--eng); line-height: 1; }
.rankrow__score small { font-size: 11.5px; color: var(--ink-4); font-weight: 700; }
.rankbar { height: 6px; border-radius: 999px; background: #e9eee3; overflow: hidden; margin: 4px 0; }
.rankbar i { display: block; height: 100%; border-radius: 999px; background: var(--eng); }
.rankgrade { display: inline-block; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px; }
.rankgrade.is-strong   { background: #e2f2d7; color: #2f8a1f; }
.rankgrade.is-fair     { background: #fbf0d9; color: #b8741a; }
.rankgrade.is-building { background: #fbe6d8; color: #c2611f; }
.rank3__foot { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; margin: 8px 0 0; padding-top: 7px; border-top: 1px dashed var(--line); }

/* Rewrite module — tone nudges as small gray tags (like keywords) */
.tonechips { display: flex; flex-wrap: wrap; gap: 5px; }
.tonechip { font: inherit; font-size: 12.5px; font-weight: 600; color: #1c1c1c; background: #e3e5e2;
  border: 1px solid #9aa094; border-radius: 2px; padding: 2px 8px; cursor: pointer; }
.tonechip:hover { border-color: var(--forest); background: #d7dbd3; }
.rewrite__ta { width: 100%; margin-top: 8px; resize: vertical; min-height: 54px; line-height: 1.45; font-size: 13px; }
.rewrite__len { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 9px 0; font-size: 12px; color: var(--ink-3); }
.rewrite__len label { font-weight: 700; }
.rewrite__len .in { width: 74px; min-height: 32px; padding: 5px 9px; }
.voices--rail { gap: 6px; }

/* Sound-check → Authenticity report modal */
.authmodal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px; }
.authmodal--open { display: flex; }
.authmodal__scrim { position: absolute; inset: 0; background: rgba(28,36,27,.42); }
.authmodal__panel { position: relative; width: min(560px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  background: #faf6ff; border: 1.5px solid #dcc9f0; border-radius: 14px; box-shadow: var(--sh-3); overflow: hidden; animation: authrise .3s ease; }
@keyframes authrise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.authmodal__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid #e8e2f2; }
.authmodal__hdl { display: flex; align-items: center; gap: 10px; }
.authmodal__hdic { width: 32px; height: 32px; border-radius: 8px; background: #e8e2f2; color: #6a3a9e; display: grid; place-items: center; flex: none; }
.authmodal__hdl b { display: block; font-size: 15px; color: var(--ink); }
.authmodal__hdl span { font-size: 12px; color: #7a5fa0; }
.authmodal__x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #dcc9f0; background: #fff; color: var(--ink-3); cursor: pointer; font-size: 14px; }
.authmodal__x:hover { border-color: #6a3a9e; color: #6a3a9e; }
.authmodal__body { padding: 16px 18px; overflow-y: auto; }
.authmodal__verdict { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #fff; border: 1px solid #e8e2f2; border-radius: 12px; }
.authmodal__badge { width: 42px; height: 42px; border-radius: 50%; background: #f4eefb; color: #6a3a9e; display: grid; place-items: center; font-size: 18px; font-weight: 800; flex: none; }
.authmodal__verdict b { color: var(--ink); font-size: 14.5px; }
.authmodal__verdict p { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.authmodal__label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin: 16px 0 8px; }
.authfind { border: 1px solid #e8e2f2; border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; background: #fff; }
.authfind__tag { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6a3a9e; margin-bottom: 5px; }
.authfind__old { font-size: 13px; color: #7a5fa0; text-decoration: line-through; line-height: 1.4; }
.authfind__new { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.authfind__why { font-size: 11.5px; color: var(--ink-4); margin-top: 5px; }
.authfind__act { display: flex; gap: 6px; margin-top: 9px; }
.authmodal__foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #e8e2f2; }
.authmodal__foot .btn:first-child { flex: 1; }

/* Ready-to-post foot (delete) */
.readybar__foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.readybar__foot-l { display: flex; align-items: center; gap: 12px; }

/* Idea cards — title + description, each with its own Generate + Save buttons (full width) */
.ideacard { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ideacard__t { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.ideacard__d { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin-top: 4px; }
.ideacard__acts { display: flex; gap: 6px; flex-wrap: wrap; }
/* idea buttons match the keyword-tag look: tight, near-square, gray (Generate = forest fill) */
.ideabtn { font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.5; padding: 2px 9px;
  border: 1px solid #9aa094; border-radius: 2px; background: #e3e5e2; color: #1c1c1c; cursor: pointer; }
.ideabtn:hover { border-color: var(--forest); background: #d7dbd3; }
.ideacard__gen { background: var(--forest); border-color: var(--forest); color: #fff; }
.ideacard__gen:hover { background: var(--forest-2); border-color: var(--forest-2); color: #fff; }

/* Bank: saved-idea direction blurb + draft rows */
.bankidea__desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 0 0 8px; padding: 8px 10px;
  background: var(--surface-tint); border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.bdr.is-draft { border-left: 3px solid var(--warn); }

/* ===================================================================================
   Site Settings — merged drawer page (onboarding + settings). Built on the .acc drawer.
   =================================================================================== */

/* each section is a big-header expandable drawer */
.secacc { margin-top: 12px; border: 1px solid var(--line); }
.secacc > summary { padding: 13px 16px; font-size: 16px; }
.secacc > summary .secacc__h { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.secacc > summary .secacc__h .cap { font-weight: 600; }
.secacc > summary .secpill { margin-left: auto; }
.secacc__h + .secpill, .secacc > summary > .secpill { margin-left: auto; }
/* section-color stripe on the left of each drawer (reuses the .sec-* accent borders) */
.secacc.sec-account     { border-left: 3px solid var(--green); }
.secacc.sec-characters  { border-left: 3px solid var(--blog); }
.secacc.sec-topics      { border-left: 3px solid var(--google); }
.secacc.sec-generate    { border-left: 3px solid var(--accent); }
.secacc.sec-connections { border-left: 3px solid var(--fb); }
.secacc.sec-style       { border-left: 3px solid var(--gold); }

/* status pill in a drawer header */
.secpill { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill); }
.secpill--set  { background: var(--good-bg, #e7f3e2); color: var(--green-deep, #1f5a1d); }
.secpill--todo { background: var(--accent-soft); color: var(--accent-ink); }

/* setup-progress strip on top of the page */
.setup-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px; border-left: 4px solid var(--accent); }
.setup-strip__tx { font-size: 14px; color: var(--ink-2); }
.setup-strip__tx b { color: var(--ink); }
.setup-strip__jumps { display: flex; gap: 6px; flex-wrap: wrap; }
.setup-strip__jump { font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); text-decoration: none; }
.setup-strip__jump.is-todo { background: var(--accent-soft); color: var(--accent-ink); }
.setup-strip__jump.is-done { background: var(--good-bg, #e7f3e2); color: var(--green-deep, #1f5a1d); }
.setup-strip__jump:hover { filter: brightness(.97); }

/* chip / tag editor (Keywords, Phrases, Goals) */
.tagform { margin: 2px 0 0; }
.tagbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 8px;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); }
.tagbox.is-empty::before { content: attr(data-empty); color: var(--ink-4); font-size: 13px; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 5px 4px 11px; font-size: 13px; font-weight: 600;
  color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--r-pill); }
.tag__t { line-height: 1.3; }
.tag__x { background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1; color: var(--accent-ink);
  padding: 0 3px; border-radius: 50%; }
.tag__x:hover { color: var(--bad, #b3261e); }
.tagadd { display: flex; gap: 8px; margin-top: 8px; }
.tagadd__in { flex: 1; }
.sugs { margin-top: 12px; }
.sugs__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-4); }
.sugchips { display: flex; flex-wrap: wrap; gap: 6px; }
.sugchip { border: 1.5px dashed var(--line); background: #fff; color: var(--ink-2); border-radius: var(--r-pill);
  padding: 4px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sugchip:hover { border-color: var(--accent); color: var(--accent-ink); }
.sugchip.is-added { opacity: .5; text-decoration: line-through; cursor: default; }

/* color picker in the Colors drawer — each button carries a dir-* theme so its dot shows that accent */
.colorpick { display: flex; flex-wrap: wrap; gap: 6px; }
.colorpick form { margin: 0; }
.colorpick__btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.colorpick__btn:hover { border-color: var(--forest); }
.colorpick__btn.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent-soft); }
.colorpick__btn .swatch__dot { width: 15px; height: 15px; flex: none; }

/* ---- Storage usage bar (Storage screen). Width is a step-class so no inline style is needed (CSP). ---- */
.usage-card { margin-bottom: 14px; }
.usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.usage-nums { font-size: 14px; color: var(--ink-3); }
.usage-nums b { color: var(--ink); font-size: 16px; }
.usage-warn { color: var(--bad, #b3261e); font-weight: 700; margin-top: 8px; }
.usage-bar { height: 12px; border-radius: var(--r-pill); background: var(--canvas-2, #eceee9);
  border: 1px solid var(--line); overflow: hidden; }
.usage-bar__fill { display: block; height: 100%; background: var(--good, #2f8a1f); border-radius: var(--r-pill); }
.usage-bar__fill.is-near { background: var(--accent); }
.usage-bar__fill.is-full { background: var(--bad, #b3261e); }
.usg-0{width:0}.usg-5{width:5%}.usg-10{width:10%}.usg-15{width:15%}.usg-20{width:20%}
.usg-25{width:25%}.usg-30{width:30%}.usg-35{width:35%}.usg-40{width:40%}.usg-45{width:45%}
.usg-50{width:50%}.usg-55{width:55%}.usg-60{width:60%}.usg-65{width:65%}.usg-70{width:70%}
.usg-75{width:75%}.usg-80{width:80%}.usg-85{width:85%}.usg-90{width:90%}.usg-95{width:95%}
.usg-100{width:100%}

/* Snipe War — per-business logo upload (used as the thread avatar) */
.snipe-logo { display: flex; flex-direction: column; gap: 5px; }
.snipe-logo > label { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.snipe-logo__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.snipe-logo__prev { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; border: 1.5px solid var(--line); flex: none; }
.snipe-logo__in { font-size: 12px; max-width: 210px; }
.snipe-logo__rm { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-4); font-weight: 600; }
/* logos crop to fill the circular avatar rather than stretch */
.snbub__av { object-fit: cover; }

/* Technical-SEO section on the Reports page (folded in from the old ChatGPT-visibility page) */
.techseo { margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--line); }
.faq-card .acc { margin-top: 8px; }

/* Cross-account Snipe War approval inbox (/dashboard/wars) + dashboard banner */
.wars-bar { border-left-color: var(--accent); }
.snipe-war { margin-bottom: 14px; }
.snipe-war__img { max-width: 360px; width: 100%; border-radius: 12px; border: 1.5px solid var(--line); display: block; margin: 8px 0 12px; }
.snipe-war__lines { margin: 4px 0 12px; }
.snipe-war__line { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 3px 0; }
.snipe-war__act { display: flex; gap: 8px; flex-wrap: wrap; }

/* Snipe research step + suggested-barbs card */
.snipe-research { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0;
  padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: var(--r-md); background: var(--surface-tint); }
.snipe-barbs { border-top: 3px solid var(--accent); margin-bottom: 14px; }
.snipe-barbs__list { margin: 8px 0 0; padding-left: 20px; }
.snipe-barbs__list li { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 4px 0; }

/* Editor "Links & offers" insert tool */
.ins-lbl { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-4); margin: 12px 0 5px; }
.ins-in { margin-bottom: 6px; }

/* Shared-war participant rows (each business sees everyone's answers) */
.wpart { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line-soft); }
.wpart:first-of-type { border-top: none; }
.wpart__tx b { color: var(--ink); font-size: 14.5px; }
.wpart__tx .cap { display: block; }

/* ---- Website report: plain words first, jargon as a tag --------------------
   The headings led with acronyms (AEO, GEO, Core Web Vitals) and stopped anyone who didn't
   know them, while the clients who DO know them lose nothing by the plain wording coming
   first. So: plain heading, acronym kept beside it as a small tag. */
.rpt-tag {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #5a7256; background: #eef4ea; border: 1px solid #d7e3cf;
  border-radius: 4px; padding: 1px 6px;
}
.rpt-kwlbl {
  margin: 10px 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #7b8c76;
}
.rpt-kwlbl:first-of-type { margin-top: 4px; }

/* No-report state: two short lists, not a paragraph. Two buttons deserve two lists. */
.rpt-empty__t { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--ink); }
.rpt-empty__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.rpt-empty__h { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.rpt-empty__two .report-list { margin-top: 2px; }
@media (max-width: 700px) { .rpt-empty__two { grid-template-columns: 1fr; } }

/* ---- Paid ads page: the Facebook boost explainer ----------------------------
   Leads the page because it is the one a local business actually uses. The four-step strip
   answers the question people actually have — who am I paying, and for what — without a
   paragraph: the post is ours and free, the reach is Facebook's and paid. */
.paid-first { border: 2.5px solid #1862a8; }
.paid-first h3 { color: #14385c; }
.paid-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; }
.paid-step {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 12.5px; line-height: 1.35; color: #14385c;
  background: #e4eefa; border: 1px solid #cfe0f2; border-radius: 8px; padding: 9px 11px;
}
.paid-step__n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: #fff; background: #1862a8;
}
.paid-h4 { margin: 16px 0 4px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
@media (max-width: 820px) { .paid-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .paid-flow { grid-template-columns: 1fr; } }

/* Google section on the Paid ads page — same shape as the Facebook one, its own colour so the
   three sections read as three places you could spend, not one long article. */
.paid-google { border: 2.5px solid #b8841a; margin-top: 4px; }
.paid-google h3 { color: #7a5a1a; }
.paid-google .paid-step { background: #f8edd2; border-color: #e6cf95; color: #6b5218; }
.paid-google .paid-step__n { background: #b8841a; }