/* Warm paper, white cards and burnt orange: pastels are surfaces, not text. */
:root {
  color-scheme: light;
  --brand-primary: #d64f15;
  --brand-on-primary: #100905;
  --brand-button: #c74913;
  --brand-on-button: #ffffff;
  --brand-link: #ac3b0c;
  --brand-link-hover: #94330e;
  --brand-primary-hover: #ac3b0c;
  --brand-accent: #426552;
  --brand-background: #f2e6da;
  --brand-surface: #ffffff;
  --brand-soft: #fbe8da;
  --brand-text: #352a24;
  --brand-muted: #6e594a;
  --brand-border: #99765f;
  --brand-control-border: #856b59;
  --brand-success-soft: #e4eee4;
  --brand-danger: #9e3540;
  --brand-danger-soft: #fae4e4;
  --brand-warning: #75531d;
  --brand-warning-soft: #fff0cc;
  --brand-info: #67422d;
  --brand-info-soft: #f9e3d0;
  --brand-radius: .75rem;
  --brand-width: 74rem;
  --brand-spacing: 1.5rem;
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 214, 79, 21;
  --bs-primary-bg-subtle: var(--brand-soft);
  --bs-primary-text-emphasis: var(--brand-primary-hover);
  --bs-primary-border-subtle: var(--brand-border);
  --bs-secondary: var(--brand-muted);
  --bs-secondary-rgb: 110, 89, 74;
  --bs-secondary-color: var(--brand-muted);
  --bs-secondary-bg-subtle: #efe5dc;
  --bs-secondary-text-emphasis: var(--brand-muted);
  --bs-secondary-border-subtle: var(--brand-border);
  --bs-light-rgb: 251, 232, 218;
  --bs-light-bg-subtle: var(--brand-soft);
  --bs-light-text-emphasis: var(--brand-text);
  --bs-dark-rgb: 53, 42, 36;
  --bs-body-color: var(--brand-text);
  --bs-body-bg: var(--brand-background);
  --bs-tertiary-bg: var(--brand-soft);
  --bs-border-color: var(--brand-border);
  --bs-link-color: var(--brand-link);
  --bs-link-color-rgb: 172, 59, 12;
  --bs-link-hover-color: var(--brand-link-hover);
  --bs-link-hover-color-rgb: 148, 51, 14;
  --bs-success-rgb: 66, 101, 82;
  --bs-success-text-emphasis: var(--brand-accent);
  --bs-success-bg-subtle: var(--brand-success-soft);
  --bs-success-border-subtle: var(--brand-accent);
  --bs-danger-rgb: 158, 53, 64;
  --bs-danger-text-emphasis: var(--brand-danger);
  --bs-danger-bg-subtle: var(--brand-danger-soft);
  --bs-danger-border-subtle: var(--brand-danger);
  --bs-warning-rgb: 255, 240, 204;
  --bs-warning-text-emphasis: var(--brand-warning);
  --bs-warning-bg-subtle: var(--brand-warning-soft);
  --bs-warning-border-subtle: var(--brand-warning);
  --bs-info-rgb: 249, 227, 208;
  --bs-info-text-emphasis: var(--brand-info);
  --bs-info-bg-subtle: var(--brand-info-soft);
  --bs-info-border-subtle: var(--brand-info);
}

body { background: var(--brand-background); color: var(--brand-text); }
.container { max-width: var(--brand-width); padding-inline: var(--brand-spacing); }
a { color: var(--brand-link); }
a:hover { color: var(--brand-link-hover); }
.card { background: var(--brand-surface); border-radius: var(--brand-radius); border-color: var(--brand-border); box-shadow: 0 3px 12px rgb(53 42 36 / 10%); }
.auth-panel { max-width: 32rem; }
label { display: block; font-weight: 600; margin-bottom: .35rem; }
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { display: block; width: 100%; color: var(--brand-text); background: var(--brand-surface); border: 1px solid var(--brand-control-border); border-radius: .35rem; padding: .6rem .75rem; }
input[type=range] { width: 100%; }
.scorecard-preview-list { list-style-position: inside; padding: 0; }
input[aria-invalid=true] { border-color: var(--brand-danger); }
.btn-primary { --bs-btn-color: var(--brand-on-button); --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; --bs-btn-disabled-color: var(--brand-on-button); --bs-btn-bg: var(--brand-button); --bs-btn-border-color: var(--brand-button); --bs-btn-hover-bg: var(--brand-primary-hover); --bs-btn-hover-border-color: var(--brand-primary-hover); --bs-btn-active-bg: var(--brand-primary-hover); --bs-btn-active-border-color: var(--brand-primary-hover); --bs-btn-disabled-bg: var(--brand-button); --bs-btn-disabled-border-color: var(--brand-button); --bs-btn-focus-shadow-rgb: 214, 79, 21; }
.btn-outline-primary { --bs-btn-color: var(--brand-link); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: var(--brand-button); --bs-btn-hover-border-color: var(--brand-button); --bs-btn-active-bg: var(--brand-primary-hover); --bs-btn-active-border-color: var(--brand-primary-hover); --bs-btn-focus-shadow-rgb: 214, 79, 21; }
:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; }
.skip-link { background: var(--brand-surface); padding: .75rem; }
.text-secondary { color: var(--brand-muted) !important; }
.entity-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--brand-border); border-radius: var(--brand-radius); background: var(--brand-soft); }
.entity-image-fallback { display: grid; place-items: center; color: var(--brand-muted); font-size: clamp(1.5rem, 7vw, 3rem); font-weight: 700; }
.entity-image-profile { width: 8rem; aspect-ratio: 1; border-radius: 50%; }
.entity-image-card { aspect-ratio: 3 / 2; }
.entity-image-item { max-width: 30rem; }
.entity-image-thumb { width: 5rem; min-width: 5rem; aspect-ratio: 1; }

/* Reflow long member-supplied text without hiding inaccessible overflow. */
body { overflow-wrap: anywhere; }
.row > *, .d-flex > *, .vstack > * { min-width: 0; }
fieldset { min-width: 0; }
legend { float: none; width: auto; }
.btn, .nav-link, .navbar-toggler, .page-link { min-height: 2.75rem; min-width: 2.75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; white-space: normal; }
label:has(input[type=radio]), label:has(input[type=checkbox]), .form-check-label { min-height: 2.75rem; padding-block: .5rem; }
input[type=checkbox], input[type=radio] { min-width: 1.5rem; min-height: 1.5rem; accent-color: var(--brand-primary); vertical-align: middle; }
input[type=range] { min-height: 2.75rem; accent-color: var(--brand-primary); }
input, select, textarea { max-width: 100%; }
select[multiple] { min-height: 8rem; }
:focus-visible { position: relative; z-index: 1; }
@media (max-width: 575.98px) {
  :root { --brand-spacing: 1rem; }
  .card-body.p-4, .card-body.p-5 { padding: 1rem !important; }
  main.container { padding-block: 2rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.btn-outline-secondary { --bs-btn-color: var(--brand-muted); --bs-btn-border-color: var(--brand-muted); --bs-btn-hover-bg: var(--brand-muted); --bs-btn-hover-border-color: var(--brand-muted); --bs-btn-active-bg: var(--brand-muted); --bs-btn-active-border-color: var(--brand-muted); }
.btn-outline-danger { --bs-btn-color: var(--brand-danger); --bs-btn-border-color: var(--brand-danger); --bs-btn-hover-bg: var(--brand-danger); --bs-btn-hover-border-color: var(--brand-danger); --bs-btn-active-bg: var(--brand-danger); --bs-btn-active-border-color: var(--brand-danger); }
.text-danger { color: var(--brand-danger) !important; }
.btn-link { --bs-btn-color: var(--brand-link); --bs-btn-hover-color: var(--brand-link-hover); --bs-btn-active-color: var(--brand-link-hover); }
.card-body { min-width: 0; }
.table-responsive { width: 100%; max-width: 100%; }
/* Keep absolutely positioned accessible table labels inside their scroll region. */
.table-responsive { position: relative; }
/* Enhancement controls stay hidden without JS; avoid transient contrast when
   adding/removing a row moves buttons beneath the pointer. */
[data-key-value-editor] [hidden] { display: none !important; }
[data-key-value-editor] .btn { transition: none; }

/* Whole-number 1–5 ratings keep native radio semantics and keyboard navigation. */
.quick-rating {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.quick-rating > div {
  flex: 0 0 auto;
}
.quick-rating label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .4rem;
  border: 1px solid var(--bs-secondary-color);
  border-radius: .5rem;
  cursor: pointer;
}
.quick-rating label:has(input:checked) {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
}
.quick-rating label:focus-within {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Bootstrap components have local defaults; keep their states in the same palette. */
.navbar { --bs-navbar-color: var(--brand-muted); --bs-navbar-hover-color: var(--brand-link); --bs-navbar-brand-color: var(--brand-link); --bs-navbar-brand-hover-color: var(--brand-link-hover); --bs-navbar-toggler-border-color: var(--brand-control-border); }
.card-header, .card-footer { background: var(--brand-soft); }
.list-group { --bs-list-group-color: var(--brand-text); --bs-list-group-bg: var(--brand-surface); --bs-list-group-border-color: var(--brand-border); --bs-list-group-action-color: var(--brand-text); --bs-list-group-action-hover-color: var(--brand-text); --bs-list-group-action-hover-bg: var(--brand-soft); --bs-list-group-action-active-color: var(--brand-text); --bs-list-group-action-active-bg: var(--brand-soft); --bs-list-group-active-bg: var(--brand-primary); --bs-list-group-active-border-color: var(--brand-primary); }
.pagination { --bs-pagination-color: var(--brand-link); --bs-pagination-bg: var(--brand-surface); --bs-pagination-border-color: var(--brand-border); --bs-pagination-hover-color: var(--brand-link-hover); --bs-pagination-hover-bg: var(--brand-soft); --bs-pagination-hover-border-color: var(--brand-border); --bs-pagination-focus-color: var(--brand-link-hover); --bs-pagination-focus-bg: var(--brand-soft); --bs-pagination-active-bg: var(--brand-primary); --bs-pagination-active-border-color: var(--brand-primary); }
.table { --bs-table-color: var(--brand-text); --bs-table-bg: var(--brand-surface); --bs-table-border-color: var(--brand-border); --bs-table-striped-bg: var(--brand-soft); --bs-table-striped-color: var(--brand-text); --bs-table-hover-bg: var(--brand-soft); --bs-table-hover-color: var(--brand-text); }
.text-bg-light, .bg-light { background-color: var(--brand-soft) !important; color: var(--brand-text) !important; }
input::placeholder, textarea::placeholder { color: var(--brand-muted); opacity: 1; }

.card .border.rounded { background: var(--brand-soft); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--brand-accent); box-shadow: none; }
.form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-danger { --bs-btn-bg: var(--brand-danger); --bs-btn-border-color: var(--brand-danger); --bs-btn-hover-bg: #812a34; --bs-btn-hover-border-color: #812a34; --bs-btn-active-bg: #812a34; --bs-btn-active-border-color: #812a34; --bs-btn-disabled-bg: var(--brand-danger); --bs-btn-disabled-border-color: var(--brand-danger); --bs-btn-focus-shadow-rgb: 158, 53, 64; }
.btn-outline-primary { --bs-btn-disabled-color: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary); }

/* Bright brand orange needs a dark foreground; small links use its deeper shade. */
.btn-outline-primary { --bs-btn-hover-color: var(--brand-on-button); --bs-btn-active-color: #ffffff; }
.text-bg-primary { color: var(--brand-on-primary) !important; }
.text-primary, .link-primary { color: var(--brand-link) !important; }
.link-primary:hover { color: var(--brand-link-hover) !important; }
.pagination { --bs-pagination-active-color: var(--brand-on-primary); }
.list-group { --bs-list-group-active-color: var(--brand-on-primary); }

/* The visible name supplies the logo link's accessible label. */
.navbar-brand { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; }
.brand-mark { display: block; width: 2rem; height: 2rem; flex: 0 0 auto; }

/* Advertise both schemes so supporting browsers use our colours rather than
   guessing a dark conversion. No account data or theme preference is stored. */
.site-header { background: var(--brand-surface); }
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --brand-background: #191715;
    --brand-surface: #262321;
    --brand-soft: #352e29;
    --brand-text: #f6eee7;
    --brand-muted: #c8b8aa;
    --brand-link: #ffab7a;
    --brand-link-hover: #ffd0b4;
    --brand-accent: #abcbb2;
    --brand-border: #9d8878;
    --brand-control-border: #9d8878;
    --brand-success-soft: #20382a;
    --brand-danger: #ffabb5;
    --brand-danger-soft: #3d2327;
    --brand-warning: #efd28c;
    --brand-warning-soft: #392f1d;
    --brand-info: #ecd0b3;
    --brand-info-soft: #352a23;
    --bs-secondary-bg-subtle: var(--brand-soft);
    --bs-secondary-bg: var(--brand-surface);
    --bs-emphasis-color: var(--brand-text);
    --bs-emphasis-color-rgb: 246, 238, 231;
    --bs-body-color-rgb: 246, 238, 231;
    --bs-body-bg-rgb: 25, 23, 21;
    --bs-tertiary-bg-rgb: 53, 46, 41;
    --bs-secondary-bg-rgb: 38, 35, 33;
    --bs-primary-text-emphasis: var(--brand-link);
    --bs-link-color-rgb: 255, 171, 122;
    --bs-link-hover-color-rgb: 255, 208, 180;
  }
  .navbar { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c8b8aa' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
  .btn-outline-secondary { --bs-btn-hover-color: var(--brand-background); --bs-btn-active-color: var(--brand-background); }
  .btn-outline-danger { --bs-btn-hover-color: var(--brand-background); --bs-btn-active-color: var(--brand-background); }
  /* Alert/error text needs pale rose; destructive filled buttons keep dark rose. */
  .btn-danger { --bs-btn-bg: #9e3540; --bs-btn-border-color: #9e3540; --bs-btn-disabled-bg: #9e3540; --bs-btn-disabled-border-color: #9e3540; }
  .form-check-input:not(:checked) { background-color: var(--brand-surface); border-color: var(--brand-control-border); }
  .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f6eee7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
  .pagination { --bs-pagination-disabled-color: var(--brand-muted); --bs-pagination-disabled-bg: var(--brand-soft); --bs-pagination-disabled-border-color: var(--brand-border); }
  .breadcrumb { --bs-breadcrumb-divider-color: var(--brand-muted); --bs-breadcrumb-item-active-color: var(--brand-muted); }
}

/* Public catalogue covers retain their proportions; no recolouring or crop. */
.book-cover { object-fit: contain; max-height: 22rem; }
.book-search-result { display: flex; align-items: start; gap: 1rem; }
.book-search-result img { width: 4rem; height: 6rem; object-fit: contain; flex: 0 0 auto; }

/* Public introduction uses the same warm surfaces as the member application. */
.welcome-hero { display: grid; gap: 2.5rem; align-items: center; }
.welcome-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; max-width: 12ch; margin-bottom: 1.5rem; }
.welcome-eyebrow { color: var(--brand-link); font-weight: 700; }
.welcome-intro { font-size: 1.25rem; max-width: 38rem; margin-bottom: 1.5rem; }
.welcome-example { border-top: .35rem solid var(--brand-primary); }
.welcome-example-section { padding-block: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--brand-border); }
@media (min-width: 768px) { .welcome-hero { grid-template-columns: 1.25fr 1fr; } }