/* ==========================================================================
   Longbox Ledger theme
   "Fun colors, sharp structure": CMYK print-heritage accents on a clean,
   disciplined layout. Every color routes through the --lb-* tokens below;
   retuning the palette is a values-only change (plan §6).
   ========================================================================== */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* H2: iOS Safari zooms the viewport (and never zooms back out) when a focused input renders
   below 16px. The root is 14px on phones, so Bootstrap's 1rem controls land at 14px and the
   nav search (input-group-sm) smaller still. Pin every text-entry control to a real 16px on
   small screens: it kills the auto-zoom on the store check, scan typed entry, and wishlist
   form without touching desktop sizing. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    .lb-navsearch .form-control {
        font-size: 16px;
    }
}

/* L13: skip-to-content link. Off-screen until it takes keyboard focus, then it drops into the
   top-left so a keyboard user can jump the nav. */
.lb-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background-color: var(--lb-ink);
    color: var(--lb-surface);
    border-radius: 0 0 0.5rem 0;
    text-decoration: none;
}

.lb-skip-link:focus {
    left: 0;
}

body {
    margin-bottom: 60px;
}

/* Display lettering (OFL-licensed, self-hosted in wwwroot/fonts).
   Bangers = comic-logo brand lettering; Archivo Black = poster-weight headings. */
@font-face {
    font-family: "Bangers";
    src: url("../fonts/Bangers-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Archivo Black";
    src: url("../fonts/ArchivoBlack-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Comic Neue (OFL): speech-bubble-style lettering, trialing on small supporting text.
   Applied only via .lb-bubble while the founder judges it on the styleguide (test 2.2). */
@font-face {
    font-family: "Comic Neue";
    src: url("../fonts/ComicNeue-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Comic Neue";
    src: url("../fonts/ComicNeue-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette tokens: newsprint cream, ink text, process-color accents.
       Light theme only by founder decision (2026-07-06); the token indirection
       stays so a second theme is cheap if that ever changes. */
    --lb-bg: #FAF8F3;
    --lb-surface: #FFFFFF;
    --lb-surface-raised: #FFFDF8;
    --lb-ink: #16192B;
    --lb-ink-muted: #5C6076;
    --lb-border: #E5E1D6;
    --lb-primary: #2563EB;
    --lb-primary-hover: #1D4FC4;
    --lb-primary-ink: #FFFFFF;
    --lb-accent: #DB2777;
    --lb-highlight: #F5B700;
    --lb-highlight-ink: #16192B;
    --lb-success: #1A7F4B;
    --lb-warning: #9A5B00;
    --lb-danger: #B42318;
    --lb-info: #175CD3;

    --lb-font-brand: "Bangers", "Archivo Black", sans-serif;
    --lb-font-display: "Archivo Black", system-ui, sans-serif;
    --lb-font-bubble: "Comic Neue", "Comic Sans MS", cursive;

    /* Bridge our tokens into Bootstrap 5.3's CSS variables. */
    --bs-body-bg: var(--lb-bg);
    --bs-body-color: var(--lb-ink);
    --bs-secondary-color: var(--lb-ink-muted);
    --bs-border-color: var(--lb-border);
    --bs-link-color: var(--lb-primary);
    --bs-link-hover-color: var(--lb-primary-hover);
}

body {
    background-color: var(--lb-bg);
    color: var(--lb-ink);
}

.text-muted,
.form-text {
    color: var(--lb-ink-muted) !important;
}

/* Display type: headings get poster lettering; body copy stays a clean system stack. */
h1, h2, .lb-display {
    font-family: var(--lb-font-display);
    font-weight: 400; /* Archivo Black ships one weight */
    letter-spacing: 0.01em;
}

/* Speech-bubble lettering for small supporting text (subtitles, stat labels). Opt-in per
   element while the founder judges it on the styleguide; if approved it gets applied to
   .lb-page-subtitle and dashboard stat labels app-wide. */
.lb-bubble {
    font-family: var(--lb-font-bubble);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.lb-brand-sample {
    font-family: var(--lb-font-brand);
    font-size: 2rem;
    letter-spacing: 0.03em;
}

/* Cards and modals read as comic panels: ink border + printed offset shadow. */
.card,
.modal-content {
    background-color: var(--lb-surface);
    border: 2px solid var(--lb-ink);
    border-radius: 0.5rem;
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--lb-ink) 22%, transparent);
    color: var(--lb-ink);
}

.dropdown-menu,
.list-group-item {
    background-color: var(--lb-surface);
    border-color: var(--lb-border);
    color: var(--lb-ink);
}

/* Tables stay clean for data, with an ink rule under the header row. */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--lb-ink);
    --bs-table-border-color: var(--lb-border);
}

.table thead th {
    border-bottom: 2px solid var(--lb-ink);
    font-weight: 700;
}

/* Flash banners share the panel language. */
.alert {
    border: 2px solid var(--lb-ink);
    border-radius: 0.5rem;
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--lb-ink) 22%, transparent);
    color: var(--lb-ink);
}

.alert-success {
    background-color: color-mix(in srgb, var(--lb-success) 14%, var(--lb-surface));
}

.alert-danger {
    background-color: color-mix(in srgb, var(--lb-danger) 12%, var(--lb-surface));
}

.form-control,
.form-select {
    background-color: var(--lb-surface);
    border-color: var(--lb-border);
    color: var(--lb-ink);
}

/* File pickers: iPhone Safari would not open the native widget through a tap, nor through a
   <label for> (both founder-hit). The one pattern iOS always honors is making the REAL file
   input the tap target: an invisible, full-size input laid directly over a styled button, so
   the finger lands on the input itself - no hidden-element or label indirection to ignore. */
.lb-file-button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
}

.lb-file-button > input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0; /* Safari sizes the native control by its text; keep it from stretching */
}

.form-control:focus,
.form-select:focus {
    background-color: var(--lb-surface);
    color: var(--lb-ink);
    border-color: var(--lb-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--lb-primary) 25%, transparent);
}

/* Buttons: bold, ink-bordered, with a printed offset shadow that presses in on click. */
.btn {
    font-weight: 700;
    border-width: 2px;
    border-radius: 0.5rem;
}

.btn-primary {
    --bs-btn-bg: var(--lb-primary);
    --bs-btn-border-color: var(--lb-ink);
    --bs-btn-color: var(--lb-primary-ink);
    --bs-btn-hover-bg: var(--lb-primary-hover);
    --bs-btn-hover-border-color: var(--lb-ink);
    --bs-btn-hover-color: var(--lb-primary-ink);
    --bs-btn-active-bg: var(--lb-primary-hover);
    --bs-btn-active-border-color: var(--lb-ink);
    --bs-btn-active-color: var(--lb-primary-ink);
    --bs-btn-disabled-bg: var(--lb-primary);
    --bs-btn-disabled-border-color: var(--lb-primary);
    --bs-btn-disabled-color: var(--lb-primary-ink);
}

.btn-accent {
    --bs-btn-bg: var(--lb-accent);
    --bs-btn-border-color: var(--lb-ink);
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: color-mix(in srgb, var(--lb-accent) 85%, #000000);
    --bs-btn-hover-border-color: var(--lb-ink);
    --bs-btn-hover-color: #FFFFFF;
}

.btn-primary, .btn-accent {
    box-shadow: 3px 3px 0 var(--lb-ink);
}

.btn-primary:hover, .btn-accent:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--lb-ink);
}

.btn-primary:active, .btn-accent:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

.btn-primary:disabled, .btn-accent:disabled {
    box-shadow: none;
}

.btn-outline-secondary {
    --bs-btn-color: var(--lb-ink);
    --bs-btn-border-color: var(--lb-ink);
    --bs-btn-hover-bg: var(--lb-ink);
    --bs-btn-hover-border-color: var(--lb-ink);
    --bs-btn-hover-color: var(--lb-bg);
}

.btn-outline-danger {
    --bs-btn-color: var(--lb-danger);
    --bs-btn-border-color: var(--lb-danger);
    --bs-btn-hover-bg: var(--lb-danger);
    --bs-btn-hover-border-color: var(--lb-danger);
}

/* Focus visibility everywhere (keyboard users) */
:focus-visible {
    outline: 2px solid var(--lb-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Chrome: ink masthead (comic logo block) and footer
   -------------------------------------------------------------------------- */
.lb-navbar {
    background-color: var(--lb-ink);
    border-bottom: 4px solid var(--lb-highlight);
}

.lb-navbar .navbar-brand {
    font-family: var(--lb-font-brand);
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    color: var(--lb-bg);
    transform: rotate(-1deg);
}

.lb-navbar .navbar-brand:hover,
.lb-navbar .navbar-brand:focus {
    color: var(--lb-bg);
}

.lb-navbar .navbar-brand .lb-brand-mark {
    color: var(--lb-highlight);
}

.lb-navbar .nav-link {
    color: color-mix(in srgb, var(--lb-bg) 88%, transparent);
    font-weight: 600;
}

.lb-navbar .nav-link:hover,
.lb-navbar .nav-link:focus,
.lb-navbar .nav-link.active {
    color: var(--lb-highlight);
}

/* Persistent search box in the navbar: the store check is always one tap away.
   position:relative anchors the typeahead dropdown (lb-combobox-list) under the box. */
.lb-navsearch {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 24rem;
    position: relative;
}

.lb-navsearch .lb-combobox-list {
    color: var(--lb-ink);
}

.lb-navsearch .form-control {
    border-color: transparent;
}

.lb-navsearch .form-control:focus {
    box-shadow: none;
    border-color: var(--lb-highlight);
}

.lb-navsearch .btn {
    border-color: var(--lb-highlight);
    background-color: var(--lb-highlight);
    color: var(--lb-ink);
}

.lb-navsearch .btn:hover,
.lb-navsearch .btn:focus {
    background-color: color-mix(in srgb, var(--lb-highlight) 85%, #fff);
    border-color: var(--lb-highlight);
    color: var(--lb-ink);
}

/* Photo dropzone: a real drag-and-drop target (test 7.1), not just a box that looks like one. */
.lb-dropzone {
    border: 2px dashed var(--lb-border);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: border-color 0.15s, background-color 0.15s;
}

.lb-dropzone.lb-dropzone-active {
    border-color: var(--lb-highlight);
    background-color: color-mix(in srgb, var(--lb-highlight) 12%, var(--lb-surface));
}

.lb-dropzone-hint {
    font-size: 0.9rem;
}

/* Validation errors: a themed alert panel, not a bare red bullet list (founder feedback,
   test 1.2). asp-validation-summary renders div.validation-summary-errors > ul > li. */
.validation-summary-errors {
    background-color: color-mix(in srgb, var(--lb-danger) 7%, var(--lb-surface));
    border: 2px solid var(--lb-danger);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.validation-summary-errors::before {
    /* FontAwesome triangle-exclamation, matching the _Icon "warning" glyph. */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f071";
    margin-right: 0.5rem;
    color: var(--lb-danger);
}

.validation-summary-errors ul {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.validation-summary-errors ul li + li {
    margin-top: 0.25rem;
}

/* Beta/dev notice strip above the masthead (SiteNotice config section). */
.lb-dev-banner {
    background-color: var(--lb-highlight);
    color: var(--lb-ink);
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.35rem 1rem;
    border-bottom: 2px solid var(--lb-ink);
}

/* Read-only (lapsed) banner: informative, not alarming - the data is safe, writes are off. */
.lb-readonly-banner {
    background-color: color-mix(in srgb, var(--lb-info) 10%, var(--lb-surface));
    border-bottom: 2px solid var(--lb-info);
    color: var(--lb-ink);
    text-align: center;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}

/* Trial countdown banner: friendly nudge with the subscribe CTA, quieter than read-only. */
.lb-trial-banner {
    background-color: color-mix(in srgb, var(--lb-highlight) 14%, var(--lb-surface));
    border-bottom: 2px solid var(--lb-highlight);
    color: var(--lb-ink);
    text-align: center;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}

/* Fixed-height host for Chart.js canvases (maintainAspectRatio is off). */
.lb-chart-box {
    position: relative;
    height: 260px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    border-top: 1px solid var(--lb-border);
    color: var(--lb-ink-muted);
}

/* --------------------------------------------------------------------------
   Shared patterns (plan §8.10)
   -------------------------------------------------------------------------- */

/* Page header block: title left, optional actions right */
.lb-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 2px solid var(--lb-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Yellow marker swipe under a heading: fun, but the grid stays sharp. Generalized for the
   landing page (C3); .lb-page-header h1 consumes it below. box-decoration-break: clone makes
   the swipe repeat cleanly on EACH wrapped line instead of the gradient spanning the whole
   inline box (founder-hit on the hero, 2026-07-16). */
.lb-marker,
.lb-page-header h1 {
    display: inline;
    padding: 0 0.15em;
    margin-left: -0.15em;
    background-image: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--lb-highlight) 65%, transparent) 62%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.lb-page-header h1 {
    display: inline-block;
}

.lb-page-header h1 {
    margin-bottom: 0;
    font-size: 1.75rem;
}

.lb-page-header .lb-page-subtitle {
    color: var(--lb-ink-muted);
    margin-bottom: 0;
    /* Speech-bubble lettering, founder-approved round 2 (R5.7). */
    font-family: var(--lb-font-bubble);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Status chips: ALWAYS color + icon + text label, never color alone (plan §6) */
.lb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 2px solid transparent;
    white-space: nowrap;
}

.lb-chip-success {
    color: var(--lb-success);
    background-color: color-mix(in srgb, var(--lb-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--lb-success) 55%, transparent);
}

.lb-chip-warning {
    color: var(--lb-warning);
    background-color: color-mix(in srgb, var(--lb-warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--lb-warning) 55%, transparent);
}

.lb-chip-danger {
    color: var(--lb-danger);
    background-color: color-mix(in srgb, var(--lb-danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--lb-danger) 55%, transparent);
}

.lb-chip-info {
    color: var(--lb-info);
    background-color: color-mix(in srgb, var(--lb-info) 12%, transparent);
    border-color: color-mix(in srgb, var(--lb-info) 55%, transparent);
}

.lb-chip-neutral {
    color: var(--lb-ink-muted);
    background-color: color-mix(in srgb, var(--lb-ink-muted) 12%, transparent);
    border-color: color-mix(in srgb, var(--lb-ink-muted) 55%, transparent);
}

.lb-chip-highlight {
    color: var(--lb-highlight-ink);
    background-color: var(--lb-highlight);
    border-color: color-mix(in srgb, var(--lb-highlight-ink) 20%, var(--lb-highlight));
}

/* Key-issue chips: magenta, visually distinct from the yellow grade chips. */
.lb-chip-accent {
    color: var(--lb-accent);
    background-color: color-mix(in srgb, var(--lb-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--lb-accent) 55%, transparent);
}

/* Catalog run browser (add-from-catalog): 50-issue <details> bands + number chips.
   Chips are plain outline buttons; .lb-chip-multi marks numbers hiding several printings. */
.lb-run-band {
    background-color: var(--lb-surface);
    border: 1px solid var(--lb-border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.lb-run-band > summary {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-weight: 600;
}

.lb-run-band > summary:hover {
    color: var(--lb-primary);
}

.lb-run-band[open] > summary {
    border-bottom: 1px solid var(--lb-border);
}

.lb-run-band-body {
    padding: 0.75rem;
}

.lb-chip-multi::after {
    content: "▾";
    font-size: 0.7em;
    margin-left: 0.35em;
    opacity: 0.7;
}

/* Empty states: friendly, a little comic-flavored fun is allowed here (plan §3).
   Halftone dots are pure CSS; the plan allows the texture on empty states and landing only. */
/* Halftone dot grid, extracted for reuse (C3 landing hero/CTA bands + empty states;
   plan §6 allows the texture in exactly those spots). */
.lb-halftone {
    background-image: radial-gradient(color-mix(in srgb, var(--lb-primary) 14%, transparent) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
}

.lb-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 2px dashed var(--lb-ink-muted);
    border-radius: 0.75rem;
    color: var(--lb-ink-muted);
    background-color: var(--lb-surface);
    background-image: radial-gradient(color-mix(in srgb, var(--lb-primary) 14%, transparent) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
}

.lb-empty-state h3,
.lb-empty-state .h5 {
    font-family: var(--lb-font-display);
    color: var(--lb-ink);
}

.lb-empty-state .lb-empty-icon {
    font-size: 2.5rem;
    color: var(--lb-accent);
    margin-bottom: 0.75rem;
}

/* Searchable select (progressive enhancement wrapper; see site.js) */
.lb-combobox {
    position: relative;
}

.lb-combobox-list {
    position: absolute;
    z-index: 1050;
    inset-inline: 0;
    top: calc(100% + 2px);
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background-color: var(--lb-surface);
    border: 1px solid var(--lb-border);
    border-radius: 0.375rem;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--lb-ink) 15%, transparent);
}

.lb-combobox-list li {
    padding: 0.35rem 0.6rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.lb-combobox-list li:hover,
.lb-combobox-list li[aria-selected="true"] {
    background-color: color-mix(in srgb, var(--lb-primary) 14%, transparent);
}

.lb-combobox-list li.lb-combobox-empty {
    color: var(--lb-ink-muted);
    cursor: default;
}

/* In-content links (series titles, issue numbers): ink with a magenta ink-rule underline,
   lighting up with the yellow marker on hover. Plain blue links pulled you out of the theme. */
.lb-link {
    color: var(--lb-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--lb-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.lb-link:hover,
.lb-link:focus {
    color: var(--lb-ink);
    text-decoration-color: var(--lb-primary);
    background-image: linear-gradient(180deg, transparent 68%, color-mix(in srgb, var(--lb-highlight) 60%, transparent) 68%);
}

/* Narrow forms (CSP blocks inline style attributes, so this is a class) */
.lb-form-narrow {
    max-width: 30rem;
}

/* Data-entry forms (book/copy/wishlist): roomy on desktop, still single-column on phones.
   The 30rem narrow width made them feel phone-built on a monitor (founder feedback, round 1). */
.lb-form-wide {
    max-width: 56rem;
}

/* Import report block (admin catalog page). */
.lb-report {
    white-space: pre-wrap;
}

/* Small copy thumbnail on the book details table */
.lb-copy-thumb {
    display: block;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 2px solid var(--lb-ink);
}

/* Swatches (styleguide only; classes because CSP blocks inline style attributes) */
.lb-swatch {
    width: 100%;
    height: 3rem;
    border-radius: 0.375rem;
    border: 1px solid var(--lb-border);
}

.lb-swatch-bg { background-color: var(--lb-bg); }
.lb-swatch-surface { background-color: var(--lb-surface); }
.lb-swatch-surface-raised { background-color: var(--lb-surface-raised); }
.lb-swatch-ink { background-color: var(--lb-ink); }
.lb-swatch-ink-muted { background-color: var(--lb-ink-muted); }
.lb-swatch-border { background-color: var(--lb-border); }
.lb-swatch-primary { background-color: var(--lb-primary); }
.lb-swatch-accent { background-color: var(--lb-accent); }
.lb-swatch-highlight { background-color: var(--lb-highlight); }
.lb-swatch-success { background-color: var(--lb-success); }
.lb-swatch-warning { background-color: var(--lb-warning); }
.lb-swatch-danger { background-color: var(--lb-danger); }
.lb-swatch-info { background-color: var(--lb-info); }

/* Barcode scan page (E3): camera viewport. Capped height so the result card injected below
   stays on screen with the camera still running (rapid-fire con stacks). */
.lb-scan-video {
    width: 100%;
    max-height: 40vh;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 2px solid var(--lb-ink);
    background-color: var(--lb-ink);
}

/* --------------------------------------------------------------------------
   COMIC FX EXPERIMENTS (fun-pass branch, 2026-07-08). Founder is judging each
   element on /styleguide; kill or keep per element. Rules held: inputs, labels,
   and tables stay flat and legible; errors, destructive dialogs, and billing
   stay serious. Everything below is chrome.
   -------------------------------------------------------------------------- */

/* POW! burst sticker: a 16-spike star (two layers of the same polygon; the
   outer, inked one shows as the outline). Decorative only, aria-hidden. */
:root {
    --lb-burst-poly: polygon(50.0% 0.0%, 55.9% 20.6%, 66.5% 10.3%, 66.7% 25.1%, 85.4% 14.6%, 74.9% 33.3%, 89.7% 33.5%, 79.4% 44.1%, 100.0% 50.0%, 79.4% 55.9%, 89.7% 66.5%, 74.9% 66.7%, 85.4% 85.4%, 66.7% 74.9%, 66.5% 89.7%, 55.9% 79.4%, 50.0% 100.0%, 44.1% 79.4%, 33.5% 89.7%, 33.3% 74.9%, 14.6% 85.4%, 25.1% 66.7%, 10.3% 66.5%, 20.6% 55.9%, 0.0% 50.0%, 20.6% 44.1%, 10.3% 33.5%, 25.1% 33.3%, 14.6% 14.6%, 33.3% 25.1%, 33.5% 10.3%, 44.1% 20.6%);
}

.lb-burst {
    position: relative;
    display: inline-block;
    width: 4.4rem;
    height: 4.4rem;
    transform: rotate(-8deg);
    flex: none;
}

.lb-burst::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--lb-ink);
    clip-path: var(--lb-burst-poly);
}

.lb-burst > span {
    position: absolute;
    inset: 3px;
    background: var(--lb-highlight);
    clip-path: var(--lb-burst-poly);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lb-font-brand);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    color: var(--lb-danger);
    text-shadow: 1px 1px 0 var(--lb-surface);
}

/* Success flashes wear the sticker on their top-left corner and pop in. */
.lb-flash-fun {
    position: relative;
    margin-top: 1.4rem;
    padding-left: 4.1rem;
    overflow: visible;
}

.lb-flash-fun .lb-burst {
    position: absolute;
    top: -1.2rem;
    left: -0.4rem;
    animation: lb-burst-pop 0.35s ease-out;
}

@keyframes lb-burst-pop {
    0% { transform: scale(0.3) rotate(-8deg); opacity: 0; }
    70% { transform: scale(1.15) rotate(-8deg); }
    100% { transform: scale(1) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lb-flash-fun .lb-burst { animation: none; }
}

/* Caption boxes: the yellow narration boxes of a comic page, used as form
   section labels. Readable by design; the tiny tilt is the only mischief. */
.lb-caption {
    display: inline-block;
    background: var(--lb-highlight);
    color: var(--lb-highlight-ink);
    border: 2px solid var(--lb-ink);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--lb-ink) 22%, transparent);
    padding: 0.3rem 0.85rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transform: rotate(-0.6deg);
}

/* Form panels: each section of a long form becomes one panel of the page,
   its caption box overlapping the top border like a real comic caption. */
.lb-panel {
    position: relative;
    margin-top: 1.6rem;
    overflow: visible;
}

.lb-panel > .card-body {
    padding-top: 1.9rem;
}

.lb-panel .lb-caption {
    position: absolute;
    top: -1.05rem;
    left: 1rem;
    margin: 0;
    z-index: 1;
}

/* A card nested inside a panel (the "new series" sub-card) reads as a sketch,
   not a second panel: dashed hairline, no printed shadow. */
.lb-panel .card {
    border-width: 1px;
    border-style: dashed;
    box-shadow: none;
}

/* Speech bubble for helper microcopy (Comic Neue is already founder-approved). */
.lb-speech {
    position: relative;
    display: inline-block;
    background: var(--lb-surface);
    border: 2px solid var(--lb-ink);
    border-radius: 1rem;
    padding: 0.45rem 0.9rem;
    margin-bottom: 0.9rem;
    font-family: var(--lb-font-bubble);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--lb-ink);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--lb-ink) 22%, transparent);
}

.lb-speech::before {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 1.4rem;
    border-style: solid;
    border-width: 11px 9px 0 4px;
    border-color: var(--lb-ink) transparent transparent transparent;
}

.lb-speech::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: calc(1.4rem + 2.5px);
    border-style: solid;
    border-width: 8px 6.5px 0 3px;
    border-color: var(--lb-surface) transparent transparent transparent;
}

/* Speed lines: motion streaks for header bands. STYLEGUIDE-ONLY until judged. */
.lb-speedlines {
    background-image: repeating-linear-gradient(100deg,
        transparent 0 12px,
        color-mix(in srgb, var(--lb-ink) 7%, transparent) 12px 14px);
}

/* Loading spinner with a pop of primary (founder feedback 2026-07-16: the suggestions box's
   muted spinner was too subtle). spinner-border draws in currentcolor, so color is enough;
   the slightly thicker ring reads bolder at -sm size. */
.lb-spinner-pop {
    color: var(--lb-primary);
    --bs-spinner-border-width: 0.22em;
}

/* --------------------------------------------------------------------------
   Landing page (C3, HOMEPAGE_PLAN.md). The comic-print theme at full volume:
   tokens only, more whitespace than the app, zero JS required.
   -------------------------------------------------------------------------- */

/* Full-bleed bands escape _Layout's .container; clip guards the scrollbar-width
   overflow the 50vw trick can cause (:has keeps it scoped to landing visits). */
body:has(.lb-landing) {
    overflow-x: clip;
}

.lb-landing section {
    padding-block: 3.5rem;
}

.lb-landing-band {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

.lb-landing-hero {
    border-bottom: 2px solid var(--lb-ink);
}

.lb-landing-hero h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    line-height: 1.15;
}

.lb-landing .lb-landing-lead {
    max-width: 46rem;
    font-size: 1.1rem;
}

/* In-page app mocks (founder call, 2026-07-16): faithful static HTML stand-ins for
   screenshots. No image scaling, always current with the theme, easy to edit. */
.lb-mock {
    font-size: 0.8rem;
    text-align: left;
}

.lb-mock-browser {
    background: var(--lb-bg);
    border: 2px solid var(--lb-ink);
    border-radius: 0.6rem;
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--lb-ink) 22%, transparent);
    overflow: hidden;
    max-width: 34rem;
}

.lb-mock-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--lb-ink);
    padding: 0.45rem 0.7rem;
}

.lb-mock-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lb-surface) 35%, transparent);
}

.lb-mock-url {
    flex: 1;
    margin-left: 0.4rem;
    background: color-mix(in srgb, var(--lb-surface) 14%, transparent);
    color: color-mix(in srgb, var(--lb-surface) 75%, transparent);
    border-radius: 1rem;
    padding: 0.1rem 0.7rem;
    font-size: 0.7rem;
}

.lb-mock-body {
    padding: 0.9rem;
}

.lb-mock-tile {
    background: var(--lb-surface);
    border: 1.5px solid var(--lb-ink);
    border-radius: 0.4rem;
    padding: 0.5rem 0.6rem;
    height: 100%;
}

.lb-mock-tile .lb-mock-label {
    color: var(--lb-ink-muted);
    font-family: var(--lb-font-bubble);
    font-weight: 700;
    font-size: 0.7rem;
}

.lb-mock-tile .lb-mock-value {
    font-family: var(--lb-font-display);
    font-size: 1.05rem;
}

/* The insurance report mock reads as paper, not a browser window. */
.lb-mock-paper {
    background: #FFFFFF;
    border: 1px solid var(--lb-border);
    box-shadow: 8px 8px 0 color-mix(in srgb, var(--lb-ink) 15%, transparent);
    padding: 1.1rem 1.3rem;
    max-width: 30rem;
}

.lb-mock-paper table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.lb-mock-paper th,
.lb-mock-paper td {
    padding: 0.3rem 0.2rem;
    border-bottom: 1px solid var(--lb-border);
    text-align: left;
}

.lb-mock-paper th:last-child,
.lb-mock-paper td:last-child {
    text-align: right;
}

/* Phone frame: rounded ink border, no fake OS chrome. */
.lb-mock-phone {
    background: var(--lb-bg);
    border: 2.5px solid var(--lb-ink);
    border-radius: 1.4rem;
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--lb-ink) 22%, transparent);
    padding: 0.9rem 0.8rem;
    width: 17rem;
    max-width: 100%;
}

.lb-mock-caption {
    color: var(--lb-ink-muted);
    font-size: 0.85rem;
    margin-top: 0.6rem;
    text-align: center;
}

.lb-mock-fine {
    font-size: 0.72rem;
}

.lb-mock-foot {
    font-size: 0.75rem;
}

.lb-mock-chart {
    display: block;
    width: 100%;
    height: 3.2rem;
}

.lb-mock-chart polyline {
    fill: none;
    stroke: var(--lb-primary);
    stroke-width: 2.5;
}

/* Inert button lookalikes inside mocks: styled, never clickable. */
.lb-mock-btn {
    display: inline-block;
    border-radius: 0.35rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1.5px solid var(--lb-ink);
}

.lb-mock-btn-primary {
    background: var(--lb-primary);
    color: var(--lb-primary-ink);
    border-color: var(--lb-primary);
}

/* Trust statements: check icon + sentence, generous air. */
.lb-landing-trust {
    max-width: 44rem;
}

.lb-landing-trust li {
    display: flex;
    gap: 0.8rem;
    align-items: baseline;
    margin-bottom: 1.4rem;
    font-size: 1.05rem;
}

.lb-landing-trust li > i {
    color: var(--lb-success);
    flex-shrink: 0;
}

/* FAQ: native details/summary dressed as thin panels. */
.lb-landing-faq details {
    border: 2px solid var(--lb-ink);
    border-radius: 0.5rem;
    background: var(--lb-surface);
    padding: 0.85rem 1.1rem;
    margin-bottom: 0.75rem;
}

.lb-landing-faq summary {
    cursor: pointer;
    font-weight: 700;
}

.lb-landing-faq details > p {
    margin: 0.75rem 0 0;
    color: var(--lb-ink-muted);
}

/* Final CTA: the ink band, yellow rule on top, lighter halftone for contrast on ink. */
.lb-landing-cta {
    background-color: var(--lb-ink);
    background-image: radial-gradient(color-mix(in srgb, var(--lb-highlight) 16%, transparent) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border-top: 6px solid var(--lb-highlight);
    color: var(--lb-surface);
    text-align: center;
}

.lb-landing-cta .lb-landing-cta-line {
    font-family: var(--lb-font-display);
    font-size: clamp(1.4rem, 3.5vw, 2.1rem);
    color: var(--lb-surface);
}

.lb-landing-cta .text-muted,
.lb-landing-cta .lb-landing-cta-small {
    color: color-mix(in srgb, var(--lb-surface) 78%, transparent) !important;
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.lb-landing) {
        scroll-behavior: smooth;
    }
}