/* sl-button-edges.css
 * ---------------------------------------------------------------------------
 * THE RESTING EDGE ON A SECONDARY BUTTON.
 *
 * Companion to sl-form-fields.css, same disease, different element. That file
 * fixed the box you type into. This one fixes the button beside it.
 *
 * WHAT IS WRONG
 *
 * The product has no shared secondary button. It has 34 hand-rolled copies of
 * one, each declared in its own page-level <style> block, and every copy pastes
 * the same literal hex:
 *
 *     .dash-btn-ghost  { border: 1px   solid #e2e8f0; ... }   tenant_dashboard
 *     .ib-btn-ghost    { border: 1px   solid #e2e8f0; ... }   tenant_inbox
 *     .comp-ghostbtn   { border: 1.5px solid #e2e8f0; ... }   compliance
 *     .lp-btn.ghost    { border: 1px solid var(--border-hairline, #e2e8f0) }
 *
 * That last one is the faintest in the set and it is on the screen the owner
 * pointed at: the fallback in the source reads #e2e8f0, but --border-hairline
 * IS declared, so it actually paints #eef2f7, which measures 1.12:1 on white.
 *
 * WHY IT READS AS NOTHING
 *
 * Cancel, Not now, Download, Preview, Skip for now and Message landlord all
 * render as dark text on white with an edge that is barely painted, so they do
 * not read as pressable. The tenant portal is the worst surface in the product
 * because its shell runs at a lower zoom than the landlord's:
 *
 *     tenant_base.html:358      zoom: 0.8   ->  a 1px edge computes to 0.80px
 *     dashboard_base.html:329   zoom: 0.9   ->  a 1px edge computes to 0.90px
 *
 * THE FIX, AND WHY THIS RUNG
 *
 * --border-strong (#cbd5e1, tokens.css:165). Not a design decision invented
 * here: four of these buttons ALREADY hover to #cbd5e1, so the resting state
 * simply starts where the hover was always landing. No new colour is declared,
 * and it is the rung the form fields just moved to, so a field and the button
 * beside it finally agree.
 *
 * BE HONEST ABOUT WHAT THIS IS. Measured against white, --border-hairline is
 * 1.12:1, --border is 1.23:1 and --border-strong is 1.48:1. WCAG 2.1 SC 1.4.11
 * wants 3:1 for a non-text control boundary. Not one rung we own clears it, and
 * even slate-400 only reaches 2.56:1. This is legibility polish. Nobody should
 * file it as accessibility remediation.
 *
 * WHY A STYLESHEET AND NOT 34 TEMPLATE EDITS
 *
 * Because there is no class to edit to. `grep -c "\.border-strong"
 * static/css/tailwind-output.css` returns 0: Tailwind emits no border-strong
 * utility, and tailwind.config.js:81 pastes #e2e8f0 as a literal with a manual
 * "keep in sync" comment, so tokens.css is not the source of truth for the
 * compiled utilities. An override sheet is the only route that ends at a token.
 *
 * WHAT IS DELIBERATELY LEFT OUT
 *
 *   .ds-btn-disabled          document_studio. A disabled control is supposed
 *                             to read quieter than a live one.
 *   .btn-ghost, .icon-btn     generic names owned by no page. Styling them
 *                             globally would reach templates that never asked.
 *   _pilot_mode_panel.html    that button edge is an inline style= inside a JS
 *     :424                    template literal. CSS cannot reach it without
 *                             !important, which is not worth it for one panel.
 *   the marketing shell       .fp-btn-light, .vtnbtn-out, .aaq-btn.edit,
 *                             .cya-btn.edit, .ha-fb-btn, .ln-btn.ghost. Same
 *                             call as sl-form-fields.css: the public site is a
 *                             separate Jinja env with its own visual language.
 *
 * A NOTE ON SPECIFICITY, because it is load bearing and the first attempt at
 * this file got it wrong.
 *
 * A page's <style> block sits in the page body, which is AFTER every <link> in
 * the shell head. So matching the page rule's weight is not enough: on a tie
 * the page is later in the document and wins. The first cut of this file did
 * exactly that and silently did nothing on /dashboard/settings and
 * /dashboard/compliance while appearing to work on three tenant screens.
 *
 * Hence the `body ` prefix on every selector. It adds one element level, which
 * lands each rule in a narrow band that is deliberately chosen:
 *
 *     page resting   .comp-ghostbtn                    (0,1,0)
 *     THIS FILE      body .comp-ghostbtn               (0,1,1)   wins resting
 *     page hover     .comp-ghostbtn:hover              (0,2,0)   still wins
 *
 * So the resting edge is corrected and not one hover state in the product is
 * disturbed. The guards are written :not(:where(...)) because :where()
 * contributes ZERO specificity, which keeps them free and keeps every rule
 * inside that band.
 */

/* The guard list. Two real call sites reuse a ghost class on a surface where a
   neutral grey would be wrong, and both must keep what they declare:
     tenant_dashboard.html:467,470,473   .dash-btn-ghost text-white
                                         border-white/20, on the dark hero
     renter_maintenance.html:530         .mt-btn-ghost border-red-300, the
                                         emergency landlord phone button, and
                                         status colour outranks a neutral grey */

/* Single class selectors, at (0,1,1) with the body prefix. */
body .pt-btn:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .rcpt-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .cf-nps-btn:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .comp-ghostbtn:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .cc-act-btn:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .mcw-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .lr-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .lt-btn-sec:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .mt-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .mt-luna-icon-btn:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .ns-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .dash-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .ib-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .ls-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .mh-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .pr-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .fl-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .vv-btn-ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])) {
  border-color: var(--border-strong, #cbd5e1);
}

/* Compound selectors, each one element level above the page rule it corrects,
   so the same band holds. border-color only throughout this file, never the
   shorthand: .comp-ghostbtn, .cc-act-btn, .lq-btn.ghost and .mm-mini.ghost are
   1.5px on purpose and the width is theirs to keep. */
body .lq-btn.ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .mm-mini.ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .pa-mini.ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .lp-btn.ghost:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .rv-types button:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .settings-shell .btn-secondary:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])),
body .settings-shell .recipe-setall button:not(:where([class*="border-white"], [class*="border-red"], [class*="border-rose"])) {
  border-color: var(--border-strong, #cbd5e1);
}

/* Three of these hovered to exactly #cbd5e1, so lifting the resting state to
   the same value would have left them with no border delta at all. They keep a
   hover, one rung further out, and the value is not invented: .vv-btn-ghost at
   landlord_vault.html:135 already hovers to the brand blue, so this is the
   sibling component's own answer applied to the other three.

   (.vv-btn-ghost reaches it through --sl-brand-blue, which is declared nowhere
   and silently falls back to the literal. --brand-blue at tokens.css:45 is the
   real token, so these three go through that instead.) */
body .ib-btn-ghost:hover,
body .fl-btn-ghost:hover,
body .settings-shell .btn-secondary:hover:not(:disabled) {
  border-color: var(--brand-blue, #6a9eff);
}