/*
 * docs/admin/cards.css -- the box every sibling script's card sits in (2026-10-05).
 *
 * Eight sibling scripts (quotes, money_tab, outgoings, promo, website, products, canary, freeagent) wrap
 * their sections in class="card", but the panel never styled .card: only the older .settings-card. So
 * those sections rendered unboxed, with large bare headings and browser-default dropdowns -- most of what
 * Richard saw as "a bit all over the place" (seen in a local render of the panel, 2026-10-05). This gives
 * .card the same box as .settings-card, and its headings, form controls and links the panel's own look.
 * The fuller layout pass (grouping, order) is BACKLOG.md ADMIN-REDESIGN-01.
 *
 * A DEFAULT, never an override (Codex, three reviews, 2026-10-05). Everything inside the box goes through
 * :where(.card), which weighs nothing, so any rule naming a class -- a section's own form, note or
 * select.crm-select -- outranks it. This file is linked AFTER index.html's own <style>, so it wins its ties
 * there (index.html makes text and date inputs full width; a card's are sized to their content), while the
 * sibling scripts' own styles, appended to <head> at run time, come after it and win theirs.
 * tests/js/admin_cards_css.test.js holds both halves.
 */
.card{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:1.25rem;margin-bottom:1.25rem;}
.card + .card{margin-top:0;}
#tab-settings > .card{margin-top:1.5rem;}
:where(.card) h2{font-size:0.95rem;font-weight:600;color:#f1f5f9;margin:0 0 0.35rem;}
:where(.card) h3{font-size:0.85rem;font-weight:600;color:#f1f5f9;margin:0 0 0.35rem;}
:where(.card) p{font-size:0.8rem;color:#94a3b8;line-height:1.6;}
:where(.card) a{color:#93c5fd;}
:where(.card) a:hover{color:#bfdbfe;}
:where(.card) select,
:where(.card) input:is([type=number], [type=text], [type=date]),
:where(.card) input:not([type]){background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:0.8rem;padding:0.4rem 0.6rem;margin-bottom:0;width:auto;}
:where(.card) select:focus,
:where(.card) input:focus{outline:none;border-color:#3b82f6;}
:where(.card) table{margin-top:0.5rem;}