/* cheatsheet.life family look (Create.Websites goal 3406, Ian 2026-10-06). ONE definition of the visual language the hub
   (www.cheatsheet.life) shares with its product sites (inventory.cheatsheet.life), so they cannot drift.
   Canonical copy: buckets/TEMPLATE/css-lib/cheatsheet-life.css. A site links /css-lib/cheatsheet-life.css after Bulma and
   before its own sheet; seed_lib_files copies a missing one, and testCheatsheetFamilyLook reds on a bucket copy that is not
   byte-identical to TEMPLATE's: edit TEMPLATE, then `cp -p` it into every site that links it. A site's own sheet adds its
   page layout; it never restyles a button, tab, tile or list row defined here.
   Rulings (context: websites/life.cheatsheet.www/look.md):
   - a button's colour says what pressing it does: black (.is-primary) = the click changes data (save, sign up, sign in,
     add, delete); white (a plain .button, or a link styled as one) = it goes somewhere or only changes the page; grey =
     disabled, whatever the role. No other colour on a button (goal 3393).
   - the selected tab and every tile are #EEE, so checkboxes and white buttons stand out against them; the tab track is
     white so the #EEE tab is set apart from it (goal 3394).
   - a list draws its separator between items only, never under the last one (goal 3398).
   Monochrome after Create.Websites designs/DESIGN_Ui.md: hairline borders, pill controls, red only in an error message.
   No inline styles (CSP). Geist is not self-hosted: the stack falls back to Inter, then the system sans.
   Spacing: the root is 16px so every Bulma rem lands on a 4px grid; text stays 14px. */

:root, [data-theme=light], .theme-light {
  color-scheme: light;
  --ink: #0a0a0a; --ink-soft: #171717; --mid-gray: #737373; --hairline: #e5e5e5; --rule: #d4d4d4;
  --canvas: #f5f5f5; --paper: #ffffff; --surface-alt: #fafafa; --ember: #e7000b;
  --tile: #eeeeee;
  --card-shadow: 0 0 0 1px rgba(23, 23, 23, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

  --bulma-family-primary: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bulma-body-size: 16px; --bulma-body-font-size: 14px; --bulma-size-normal: 0.875rem;
  --bulma-scheme-h: 0; --bulma-scheme-s: 0%;
  --bulma-scheme-main-l: 100%; --bulma-scheme-main-bis-l: 98%; --bulma-scheme-main-ter-l: 96%;
  --bulma-scheme-invert-l: 4%; --bulma-background-l: 96%;
  --bulma-body-background-color: var(--canvas);
  --bulma-text: var(--ink); --bulma-text-strong: var(--ink); --bulma-text-weak: var(--mid-gray);
  --bulma-border: var(--hairline); --bulma-border-weak: var(--hairline);
  --bulma-primary-h: 0deg; --bulma-primary-s: 0%; --bulma-primary-l: 4%; --bulma-primary-invert-l: 98%; --bulma-primary-on-scheme-l: 4%;
  --bulma-link-h: 0deg; --bulma-link-s: 0%; --bulma-link-l: 4%; --bulma-link-invert-l: 98%; --bulma-link-on-scheme-l: 4%;
  --bulma-danger-h: 357deg; --bulma-danger-s: 100%; --bulma-danger-l: 45%; --bulma-danger-invert-l: 100%; --bulma-danger-on-scheme-l: 45%;
  --bulma-radius-small: 6px; --bulma-radius: 18px; --bulma-radius-medium: 10px; --bulma-radius-large: 24px;
  --bulma-control-radius: 18px; --bulma-control-radius-small: 18px; --bulma-input-radius: 18px; --bulma-tag-radius: 18px;
  --bulma-box-radius: 24px; --bulma-notification-radius: 18px;
  --bulma-shadow: var(--card-shadow); --bulma-box-shadow: var(--card-shadow);
}

/* ── type ───────────────────────────────────────────────────────── */
body { font-weight: 400; line-height: 1.43; color: var(--ink); }
a { color: var(--ink); }
a:hover { color: var(--ink-soft); text-decoration: underline; }
p a:not(.button), .help a { text-decoration: underline; text-underline-offset: 2px; }   /* a link inside running text reads as one */
.title { font-weight: 600; color: var(--ink); font-size: 30px; line-height: 1.2; letter-spacing: -0.025em; }
.title:not(:last-child), .title:not(.is-spaced):has(+ .subtitle) { margin-bottom: 12px; }   /* one gap under a page title, whatever follows it */
h2.subtitle { font-size: 18px; line-height: 1.56; font-weight: 600; color: var(--ink); margin-top: 32px; }
h2.subtitle:not(:last-child) { margin-bottom: 12px; }
.title + h2.subtitle { margin-top: 0; }   /* a section heading right under the page title keeps the one title gap */
.subtitle.is-6 { font-size: 14px; color: var(--mid-gray); }
.subtitle.is-6:not(:last-child) { margin-bottom: 16px; }
.label { font-size: 14px; font-weight: 500; color: var(--ink); }
.caption { font-size: 12px; line-height: 1.33; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mid-gray); }
.narrow, .container.narrow:not(.is-max-desktop):not(.is-max-widescreen) { max-width: 640px; margin-left: auto; margin-right: auto; }
.section { padding-top: 32px; }

/* ── buttons: the colour is the role ────────────────────────────── */
.button { border-radius: 18px; font-size: 14px; font-weight: 500; border-color: var(--hairline); background: var(--paper); color: var(--ink); box-shadow: none; }
.button:hover { background: var(--surface-alt); border-color: var(--rule); color: var(--ink); text-decoration: none; }
.button.is-small { font-size: 13px; border-radius: 18px; }
.button.is-primary { background: var(--ink); border-color: var(--ink); color: #fafafa; }
.button.is-primary:hover, .button.is-primary:focus { background: var(--ink-soft); border-color: var(--ink-soft); color: #fafafa; }
.button[disabled], .button[disabled]:hover, .button[disabled]:focus { background: var(--ink); border-color: var(--ink); color: #fafafa; opacity: 0.5; }
.buttons { gap: 8px; }

/* ── inputs ─────────────────────────────────────────────────────── */
.input, .textarea, .select select { background: var(--canvas); border-color: transparent; box-shadow: none; color: var(--ink); font-size: 14px; }
.input, .select select { border-radius: 18px; }
.textarea { border-radius: 18px; padding: 10px 14px; }
.input::placeholder, .textarea::placeholder { color: var(--mid-gray); }
.input:hover, .textarea:hover, .select select:hover { border-color: transparent; }
.input:focus, .textarea:focus, .select select:focus { background: var(--paper); border-color: var(--hairline); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06); }
/* On a #EEE tile an input is white with a visible border, like the white buttons beside it. */
.formCard .input, .formCard .textarea, .formCard .select select, ul.rows .input, ul.rows .select select { background: var(--paper); border-color: var(--rule); }
.formCard .input:focus, .formCard .textarea:focus, .formCard .select select:focus, ul.rows .input:focus, ul.rows .select select:focus { border-color: var(--mid-gray); }
.input:disabled, .select select:disabled { opacity: 0.6; }
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--mid-gray); }
.checkbox input[type=checkbox], input[type=checkbox] { accent-color: var(--ink); }
.help { color: var(--mid-gray); font-size: 12px; }
@media (max-width: 768px) { .input, .textarea, .select select { font-size: 16px; } } /* no iOS zoom on focus */

/* ── badges ─────────────────────────────────────────────────────── */
.tag { border-radius: 18px; font-size: 12px; font-weight: 500; background: var(--canvas); color: var(--ink-soft); padding: 2px 8px; height: auto; }
a.tag:hover { background: var(--hairline); text-decoration: none; }

/* ── messages: red text on paper, never a chromatic fill ────────── */
.notification { background: var(--paper); border: 1px solid var(--hairline); color: var(--ink); box-shadow: var(--card-shadow); }
.notification.is-warning, .notification.is-danger { background: var(--paper); color: var(--ember); }
.notification.is-danger.is-light { color: var(--ink); }
.messageError:empty { display: none; }

/* ── header: the site's pill tabs left, the account pills right ─── */
.breadcrumb { font-size: 14px; }
.breadcrumb a { color: var(--mid-gray); }
.breadcrumb li.is-active a, .breadcrumb li:last-child a { color: var(--ink); }
.breadcrumb li + li::before { color: var(--mid-gray); content: "\203A"; }
.headerNavs { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 24px; }
.headerNavs > .tabs.pills { margin-bottom: 0; flex: 0 1 auto; min-width: 0; }
.headerNavs > .tabs.accountTabs { margin-left: auto; }
.tabs.accountTabs { justify-content: flex-end; }
.tabs ul { border-bottom: none; }
.tabs.pills ul { display: inline-flex; flex-grow: 0; flex-wrap: wrap; flex-shrink: 1; gap: 2px; padding: 3px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 18px; }
.tabs.pills a { border: none; margin: 0; border-radius: 18px; padding: 5px 12px; color: var(--mid-gray); font-weight: 500; }
.tabs.pills a:hover { color: var(--ink); text-decoration: none; }
.tabs.pills li.is-active a { background: var(--tile); color: var(--ink); }

/* ── tiles and list rows ────────────────────────────────────────── */
.card-surface, ul.rows, .formCard {
  background: var(--tile); border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--card-shadow);
}
.formCard { padding: 20px; }
.formCard > :last-child { margin-bottom: 0; }
.formCard + .buttons, ul.rows + .buttons { margin-top: 16px; }   /* a tile's action buttons sit under it, on their own */
.formCard > p:not(:last-child) { margin-bottom: 12px; }
.formCard + .formCard, ul.rows + .formCard, .formCard + ul.rows { margin-top: 16px; }
ul.rows { list-style: none; margin: 0; padding: 4px 20px; }
ul.rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
ul.rows > li:last-child { border-bottom-color: transparent; }   /* between items only; every row keeps its height */
ul.rows > li:not(:has(~ li:not(.is-hidden))) { border-bottom-color: transparent; }   /* also the last row shown when a filter hides the rest (.is-hidden); its own rule, so no :has() keeps the one above */
.rowActions { margin-left: auto; display: inline-flex; gap: 6px; }
.where { color: var(--mid-gray); font-size: 13px; }
.empty { color: var(--mid-gray); font-style: italic; list-style: none; }