/* Application tokens. Tenant identity belongs to context, not these defaults.
   Palette 案D 墨: things you press are ink (white on dark screens); colour lives only in meaning colours, kind colours,
   the logo and today's sign (藤紫 --jito-sign). Dark values follow below. */
:root {
  color-scheme: light dark;
  --jito-page-bg: #f5f3f1;
  --jito-surface: #fff;
  --jito-surface-elevated: var(--jito-surface);
  --jito-surface-muted: #f0edea;
  --jito-text-primary: #1f1d1a;
  --jito-text-secondary: #5d5953;
  --jito-border: #dfdcd8;
  --jito-border-strong: #8d8a84; /* card/panel edges: 3:1 against white and the page background */
  --jito-input-border: #7d7974;
  --jito-accent: #1f1d1a;
  --jito-accent-hover: #3b3935;
  --jito-accent-subtle: #e9e6e2;
  --jito-on-accent: #fff;
  /* 今日のしるし: the one place the logo's 藤紫 stays on screen. Means "today / now" only, never "pressable", always with a number or the word. */
  --jito-sign: #5e4b8b;
  --jito-on-sign: #fff;
  --jito-sign-subtle: #efecf6;
  --jito-success: #276044;
  --jito-success-subtle: #e9f4ed;
  --jito-warning: #78530c;
  --jito-warning-subtle: #faf0d9;
  --jito-danger: #a52d39;
  --jito-ceremony: #235d68;
  --jito-ceremony-subtle: #e8f2f3;
  --jito-schedule: #225ca3;
  --jito-schedule-subtle: #edf3fc;
  --jito-person: #9b4269;
  --jito-person-subtle: #faeef3;
  --jito-sidebar-width: 15rem;
  --jito-max-content-width: 90rem;
  --jito-mobile-nav-height: 4.75rem;
  --jito-mobile-header-height: 3.25rem;
  --jito-space-1: .25rem;
  --jito-space-2: .5rem;
  --jito-space-3: .75rem;
  --jito-space-4: 1rem;
  --jito-space-5: 1.5rem;
  --jito-space-6: 2rem;
  --jito-space-7: 3rem;
  --jito-radius-small: .5rem;
  --jito-radius-medium: .875rem;
  --jito-radius-large: 1.25rem;
  --jito-radius-pill: 50rem;
  /* Shadows: one warm-ink tint. subtle = edged cards, card = the one main card of a screen,
     popover = things that float (toast, dialog, menu box, tip, dragged row), floating = bars stuck to the bottom. */
  --jito-shadow-subtle: 0 1px 2px rgb(31 29 26 / 6%);
  --jito-shadow-card: 0 2px 8px rgb(31 29 26 / 6%);
  --jito-shadow-popover: 0 8px 24px rgb(31 29 26 / 14%);
  --jito-shadow-floating: 0 -4px 24px rgb(31 29 26 / 9%);
  --jito-shadow-sheet: 0 -8px 32px rgb(31 29 26 / 18%);
  --jito-bar-bg: rgb(255 255 255 / 82%);
  --jito-scrim: rgb(31 29 26 / 38%);
  --jito-press: rgb(31 29 26 / 7%);
  --jito-tablet-rail-width: 5.5rem;
  --jito-split-list-width: 26rem;
  --jito-z-sticky: 30;
  --jito-z-menu: 40;
  --jito-z-tabbar: 50;
  --jito-z-toast: 60;
  --jito-z-scrim: 70;
  --jito-z-sheet: 80;
  --jito-z-skip: 100;
  /* UD typeface: designed for legibility at small sizes and for older readers. */
  --jito-font-sans: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --jito-type-page-title: clamp(1.5rem, 3vw, 2rem);
  --jito-type-section-title: 1.125rem;
  --jito-type-card-title: 1.0625rem;
  --jito-type-body: 1rem;
  --jito-type-secondary: .9375rem;
  --jito-type-label: .875rem;
  --jito-type-metadata: .8125rem;
  /* Named moments and the floor: time on today's schedule, the dharma name, overlay titles, and the smallest text. */
  --jito-type-figure: 1.375rem;
  --jito-type-figure-large: clamp(1.25rem, 3vw, 1.625rem);
  --jito-type-overlay-title: 1.25rem;
  --jito-type-micro: .75rem;
  --jito-leading-tight: 1.3;
  --jito-leading-ui: 1.5;
  --jito-leading-body: 1.7;
  /* BIZ UDPGothic ships 400 and 700 only. */
  --jito-weight-regular: 400;
  --jito-weight-bold: 700;
  --jito-icon-sm: 1rem;
  --jito-icon-md: 1.25rem;
  --jito-icon-lg: 1.625rem;
  /* Focus ring: two rings told apart by lightness, not hue (inner gap + ink outer; >= 3:1 on page and surface). */
  --jito-focus-inner: #fff;
  --jito-focus-outer: #1f1d1a;
  --jito-focus-color: var(--jito-focus-outer);
  --jito-transition-color: 120ms ease;
  --jito-transition-sheet: 260ms cubic-bezier(.2, .8, .2, 1);
  --jito-ease: cubic-bezier(.2, .8, .2, 1);
  --jito-duration-fast: 120ms;
  --jito-duration-base: 200ms;
  --jito-duration-sheet: 260ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --jito-page-bg: #100e0b;
    --jito-surface: #1b1917;
    --jito-surface-muted: #252320;
    --jito-text-primary: #ecebe8;
    --jito-text-secondary: #aca8a2;
    --jito-border: #373430;
    --jito-border-strong: #6c6761;
    --jito-input-border: #736f68;
    --jito-accent: #fff; /* pure white: the only value that keeps 17+ ΔE from the pale kind colours; fills only the main button, create button and unsaved submit */
    --jito-accent-hover: #e4e2e0;
    --jito-accent-subtle: #302e2b;
    --jito-on-accent: #1b1917;
    --jito-sign: #b4a6dc;
    --jito-on-sign: #1a1030;
    --jito-sign-subtle: #29243a;
    --jito-success: #74cf9b;
    --jito-success-subtle: #15291f;
    --jito-warning: #e9bb62;
    --jito-warning-subtle: #2f2513;
    --jito-danger: #ff8f94;
    --jito-ceremony: #73c6d2;
    --jito-ceremony-subtle: #12292d;
    --jito-schedule: #8fb7ff;
    --jito-schedule-subtle: #142339;
    --jito-person: #f291bb;
    --jito-person-subtle: #301723;
    --jito-focus-inner: #100e0b;
    --jito-focus-outer: #fff;
    /* Dark: cards lift by surface steps and edges, not shadows; floating things keep one. */
    --jito-shadow-subtle: none;
    --jito-shadow-card: none;
    --jito-shadow-popover: 0 8px 24px rgb(0 0 0 / 55%);
    --jito-shadow-floating: 0 -4px 24px rgb(0 0 0 / 45%);
    --jito-shadow-sheet: 0 -8px 32px rgb(0 0 0 / 55%);
    --jito-bar-bg: rgb(27 25 23 / 82%);
    --jito-scrim: rgb(0 0 0 / 55%);
    --jito-press: rgb(255 255 255 / 8%);
  }
}
.jito-app {
  --bs-body-color: var(--jito-text-primary);
  --bs-body-bg: var(--jito-surface);
  --bs-emphasis-color: var(--jito-text-primary);
  --bs-secondary-bg: var(--jito-surface-muted);
  --bs-secondary-color: var(--jito-text-secondary);
  --bs-tertiary-bg: var(--jito-surface-muted);
  --bs-border-color: var(--jito-border);
  --bs-link-color: var(--jito-accent);
  --bs-link-hover-color: var(--jito-accent-hover);
  /* Bootstrap paints links from the -rgb variables; without these they stay Bootstrap blue. */
  --bs-link-color-rgb: 31, 29, 26;
  --bs-link-hover-color-rgb: 59, 57, 53;
  background: var(--jito-page-bg);
  color: var(--jito-text-primary);
  --bs-body-font-family: var(--jito-font-sans);
  font-family: var(--jito-font-sans);
  font-size: var(--jito-type-body);
  line-height: var(--jito-leading-body);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Bootstrap's own warning yellow is 1.63:1 on white; the readable app amber instead (dark value right below, later in the file so it wins). */
.jito-app .text-warning { --bs-warning-rgb: 120, 83, 12; }
@media (prefers-color-scheme: dark) {
  .jito-app { --bs-link-color-rgb: 255, 255, 255; --bs-link-hover-color-rgb: 228, 226, 224; }
  .jito-app .text-warning { --bs-warning-rgb: 233, 187, 98; }
}
.jito-app :focus-visible { outline: 3px solid var(--jito-focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--jito-focus-inner); }
/* Containers the scripts focus (tabindex="-1", not in the Tab order) so screen readers start reading there after a swap:
   no ring around the whole region. Rows, links and fields inside keep the ring above. The error summary keeps its ring (it marks where to look). */
.jito-app #main-content:focus, .jito-app [data-htmx-list]:focus, .jito-app .jito-split-body:focus { outline: none; box-shadow: none; }
/* Checkboxes, radios: drawn in line and mark, not filled (a ledger gets an ink tick, not a black box).
   Off: 1.5px input edge on the surface. On: surface stays, 2px edge and the mark in the accent. The square is 20px;
   the 44px touch area comes from the row around it (components.css). Bootstrap's own radii and sizes are not restated. */
.jito-app .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: 0; vertical-align: middle; border-width: 1.5px; border-color: var(--jito-input-border); background-color: var(--jito-surface); }
.jito-app .form-check-input:checked, .jito-app .form-check-input[type="checkbox"]:indeterminate { background-color: var(--jito-surface); border-width: 2px; border-color: var(--jito-accent); }
.jito-app .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231f1d1a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.jito-app .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.2' fill='%231f1d1a'/%3e%3c/svg%3e"); }
.jito-app .form-check-input[type="checkbox"]:indeterminate { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231f1d1a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); }
/* Focus is the app's shared two rings (the :focus-visible rule above); Bootstrap's blue glow and blue edge are cancelled. */
.jito-app .form-check-input:focus { border-color: var(--jito-input-border); box-shadow: none; }
.jito-app .form-check-input:checked:focus, .jito-app .form-check-input[type="checkbox"]:indeterminate:focus { border-color: var(--jito-accent); }
.jito-app .form-check-input:focus-visible { box-shadow: 0 0 0 2px var(--jito-focus-inner); }
@media (hover: hover) {
  .jito-app .form-check-input:not(:disabled):hover { border-color: var(--jito-accent); }
}
@media (prefers-color-scheme: dark) {
  .jito-app .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
  .jito-app .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.2' fill='%23ffffff'/%3e%3c/svg%3e"); }
  .jito-app .form-check-input[type="checkbox"]:indeterminate { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); }
}
.jito-icon { flex: none; width: 1.5rem; height: 1.5rem; vertical-align: middle; } /* rem, so icons grow with the text-size setting */
.jito-page-heading, .jito-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jito-space-4); margin-bottom: var(--jito-space-5); }
.jito-page-heading h1, .jito-main .temple-page-header h1 { font-size: var(--jito-type-page-title); font-weight: 700; margin: 0; letter-spacing: 0; line-height: 1.4; }
.jito-page-heading > *, .jito-section-heading > *, .jito-main .temple-page-header > * { min-width: 0; max-width: 100%; }
.jito-section-heading h2 { font-size: var(--jito-type-section-title); font-weight: 700; margin: 0; }
.jito-eyebrow { font-size: var(--jito-type-label); color: var(--jito-text-secondary); margin: 0 0 var(--jito-space-1); }
.jito-surface { padding: var(--jito-space-5); background: var(--jito-surface); border: 1px solid var(--jito-border); border-radius: var(--jito-radius-large); box-shadow: var(--jito-shadow-subtle); min-width: 0; }
.jito-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--jito-space-2); min-height: 2.75rem; min-width: 0; max-width: 100%; padding: var(--jito-space-2) var(--jito-space-4); border: 1px solid transparent; border-radius: var(--jito-radius-small); background: var(--jito-accent); color: var(--jito-on-accent); text-decoration: none; font-weight: 700; text-align: center; transition: background-color var(--jito-transition-color), transform var(--jito-transition-color); }
.jito-button:hover { color: var(--jito-on-accent); background: var(--jito-accent-hover); }
.jito-badge { display: inline-block; font-size: var(--jito-type-metadata); font-weight: 700; color: var(--jito-warning); background: var(--jito-warning-subtle); border-radius: var(--jito-radius-pill); padding: .125rem .75rem; }
.jito-badge--success { color: var(--jito-success); background: var(--jito-success-subtle); }
.jito-badge, .jito-main .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: var(--jito-leading-ui); vertical-align: middle; }
.jito-main .btn, .jito-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .jito-main select { min-height: 2.75rem; }
.jito-main .form-control, .jito-main .form-select { min-width: 0; max-width: 100%; }
.jito-app .form-control, .jito-app .form-select, .jito-main .temple-intake-form input:not([type="hidden"]), .jito-main .temple-intake-form select { border-color: var(--jito-input-border); background-color: var(--jito-surface); color: var(--jito-text-primary); font-size: 1rem; }
.jito-app .form-control:focus, .jito-app .form-select:focus, .jito-main .temple-intake-form input:focus, .jito-main .temple-intake-form select:focus { border-color: var(--jito-accent); outline: 3px solid var(--jito-focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--jito-focus-inner); }
.jito-app input, .jito-app textarea, .jito-app select { scroll-margin-block: var(--jito-space-5) calc(var(--jito-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--jito-space-5)); }
.jito-main .btn { --bs-btn-border-radius: var(--jito-radius-small); --bs-btn-font-weight: 700; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.jito-main .btn-primary { --bs-btn-color: var(--jito-on-accent); --bs-btn-hover-color: var(--jito-on-accent); --bs-btn-active-color: var(--jito-on-accent); --bs-btn-disabled-color: var(--jito-on-accent); --bs-btn-bg: var(--jito-accent); --bs-btn-border-color: var(--jito-accent); --bs-btn-hover-bg: var(--jito-accent-hover); --bs-btn-hover-border-color: var(--jito-accent-hover); --bs-btn-active-bg: var(--jito-accent-hover); --bs-btn-active-border-color: var(--jito-accent-hover); --bs-btn-disabled-bg: var(--jito-accent); --bs-btn-disabled-border-color: var(--jito-accent); }
.jito-main .btn-outline-primary { --bs-btn-color: var(--jito-accent); --bs-btn-border-color: var(--jito-accent); --bs-btn-hover-color: var(--jito-on-accent); --bs-btn-active-color: var(--jito-on-accent); --bs-btn-hover-bg: var(--jito-accent); --bs-btn-hover-border-color: var(--jito-accent); --bs-btn-active-bg: var(--jito-accent-hover); --bs-btn-active-border-color: var(--jito-accent-hover); --bs-btn-disabled-color: var(--jito-accent); --bs-btn-disabled-border-color: var(--jito-accent); }
.jito-main .btn-outline-secondary { --bs-btn-color: var(--jito-text-secondary); --bs-btn-border-color: var(--jito-text-secondary); --bs-btn-hover-bg: var(--jito-text-secondary); --bs-btn-hover-border-color: var(--jito-text-secondary); --bs-btn-active-bg: var(--jito-text-secondary); --bs-btn-active-border-color: var(--jito-text-secondary); }
.jito-main .btn-outline-danger { --bs-btn-color: var(--jito-danger); --bs-btn-border-color: var(--jito-danger); --bs-btn-hover-bg: var(--jito-danger); --bs-btn-hover-border-color: var(--jito-danger); --bs-btn-active-bg: var(--jito-danger); --bs-btn-active-border-color: var(--jito-danger); }
/* Filled red / green buttons: the app's danger and success colours, not Bootstrap's (hover keeps the colour; the press scale reacts). */
.jito-main .btn-danger { --bs-btn-bg: var(--jito-danger); --bs-btn-border-color: var(--jito-danger); --bs-btn-color: var(--jito-surface); --bs-btn-hover-bg: var(--jito-danger); --bs-btn-hover-border-color: var(--jito-danger); --bs-btn-hover-color: var(--jito-surface); --bs-btn-active-bg: var(--jito-danger); --bs-btn-active-border-color: var(--jito-danger); --bs-btn-active-color: var(--jito-surface); --bs-btn-disabled-bg: var(--jito-danger); --bs-btn-disabled-border-color: var(--jito-danger); --bs-btn-disabled-color: var(--jito-surface); }
.jito-main .btn-success { --bs-btn-bg: var(--jito-success); --bs-btn-border-color: var(--jito-success); --bs-btn-color: var(--jito-surface); --bs-btn-hover-bg: var(--jito-success); --bs-btn-hover-border-color: var(--jito-success); --bs-btn-hover-color: var(--jito-surface); --bs-btn-active-bg: var(--jito-success); --bs-btn-active-border-color: var(--jito-success); --bs-btn-active-color: var(--jito-surface); --bs-btn-disabled-bg: var(--jito-success); --bs-btn-disabled-border-color: var(--jito-success); --bs-btn-disabled-color: var(--jito-surface); }
/* Bootstrap pills and pagination: only their component variables, so light and dark follow the tokens. */
.jito-main .nav-pills { --bs-nav-pills-link-active-bg: var(--jito-accent-subtle); --bs-nav-pills-link-active-color: var(--jito-text-primary); --bs-nav-pills-border-radius: var(--jito-radius-small); --bs-nav-link-color: var(--jito-text-primary); --bs-nav-link-hover-color: var(--jito-accent); }
.jito-main .nav-pills .nav-link { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 700; }
/* Selected tab: light fill + ink text + a 2px line under it (not an ink fill). */
.jito-main .nav-pills .nav-link.active, .jito-main .nav-pills .show > .nav-link { box-shadow: inset 0 -2px 0 var(--jito-accent); }
.jito-main .pagination { --bs-pagination-color: var(--jito-accent); --bs-pagination-hover-color: var(--jito-accent-hover); --bs-pagination-bg: var(--jito-surface); --bs-pagination-border-color: var(--jito-border-strong); --bs-pagination-hover-bg: var(--jito-accent-subtle); --bs-pagination-hover-border-color: var(--jito-border-strong); --bs-pagination-focus-color: var(--jito-accent); --bs-pagination-focus-bg: var(--jito-accent-subtle); --bs-pagination-active-bg: var(--jito-surface); --bs-pagination-active-border-color: var(--jito-accent); --bs-pagination-active-color: var(--jito-text-primary); --bs-pagination-disabled-bg: var(--jito-surface-muted); --bs-pagination-disabled-color: var(--jito-text-secondary); --bs-pagination-disabled-border-color: var(--jito-border-strong); --bs-pagination-border-radius: var(--jito-radius-small); --bs-pagination-focus-box-shadow: 0 0 0 2px var(--jito-focus-inner), 0 0 0 5px var(--jito-focus-outer); } /* same two rings as the app focus */
.jito-main .page-link:focus:not(:focus-visible) { box-shadow: none; } /* rings for the keyboard only */
/* Current page: the box keeps its size; a second inner line makes the 2px accent edge. aria-current="page" is on the item. */
.jito-main .pagination .page-item.active .page-link { font-weight: 700; box-shadow: inset 0 0 0 1px var(--jito-accent); }
/* Touch press feedback (iOS-style dim + slight scale); hover styles only where hover exists. */
.jito-button:active, .jito-main .btn:active, .jito-nav-link:active, .jito-tab:active, .jito-list-row:active,
.jito-create-card:active, .jito-create-toggle:active, .jito-back:active, .jito-mobile-search:active,
.jito-search-button:active, .jito-shortcut-button:active { transform: scale(.97); }
[data-row-link]:active { background-color: var(--jito-press); }
/* Menu rows, sidebar links and tabs tint in the accent while held, above their hover/selected states. */
.jito-app .jito-list-row:active, .jito-app .jito-nav-link:active, .jito-app .jito-tab:active { --jito-row-fill: var(--jito-accent-subtle); background-color: var(--jito-accent-subtle); }
/* Header buttons (back, search, shortcuts) take the same tint while held; is-pressed (shell.css) keeps it until the next page. */
.jito-app .jito-back:active, .jito-app .jito-mobile-search:active, .jito-app .jito-search-button:active, .jito-app .jito-shortcut-button:active { background-color: var(--jito-accent-subtle); color: var(--jito-accent); }
@media (prefers-reduced-motion: reduce) {
  .jito-button:active, .jito-main .btn:active, .jito-nav-link:active, .jito-tab:active, .jito-list-row:active,
  .jito-create-card:active, .jito-create-toggle:active, .jito-back:active, .jito-mobile-search:active,
  .jito-search-button:active, .jito-shortcut-button:active { transform: none; }
}
@media (max-width: 575.98px) {
  .jito-surface { padding: var(--jito-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .jito-app *, .jito-app *::before, .jito-app *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* One page-title size everywhere: legacy templates use bare <h1> or Bootstrap .h3 on it. */
.jito-main h1, .jito-main h1.h3 { font-size: var(--jito-type-page-title); font-weight: 700; line-height: 1.4; letter-spacing: 0; }

/* Bootstrap notices and badges speak in the app's own palette (light and dark follow the tokens). */
.jito-main .alert {
  --bs-alert-border-radius: var(--jito-radius-medium);
  --bs-alert-color: var(--jito-text-primary);
  --bs-alert-bg: var(--jito-surface-muted);
  --bs-alert-border-color: transparent;
  --bs-alert-link-color: var(--jito-accent);
  border-inline-start: 4px solid var(--jito-alert-edge, var(--jito-border));
}
.jito-main .alert-info { --jito-alert-edge: var(--jito-accent); --bs-alert-bg: var(--jito-accent-subtle); }
.jito-main .alert-success { --jito-alert-edge: var(--jito-success); --bs-alert-bg: var(--jito-success-subtle); }
.jito-main .alert-warning { --jito-alert-edge: var(--jito-warning); --bs-alert-bg: var(--jito-warning-subtle); }
.jito-main .alert-danger { --jito-alert-edge: var(--jito-danger); --bs-alert-bg: color-mix(in srgb, var(--jito-danger) 10%, var(--jito-surface)); }
.jito-main .badge { font-weight: 700; border-radius: var(--jito-radius-pill); padding: .25rem .5rem; }
.jito-main .badge.text-bg-warning { color: var(--jito-warning) !important; background-color: var(--jito-warning-subtle) !important; }
.jito-main .badge.text-bg-success { color: var(--jito-success) !important; background-color: var(--jito-success-subtle) !important; }
.jito-main .badge.text-bg-danger { color: var(--jito-danger) !important; background-color: color-mix(in srgb, var(--jito-danger) 12%, var(--jito-surface)) !important; }
.jito-main .badge.text-bg-info, .jito-main .badge.text-bg-primary { color: var(--jito-accent) !important; background-color: var(--jito-accent-subtle) !important; }
.jito-main .badge.text-bg-secondary, .jito-main .badge.text-bg-light { color: var(--jito-text-secondary) !important; background-color: var(--jito-surface-muted) !important; }

/* Secondary text: one size and color, whichever helper class a template uses. */
.jito-main .text-body-secondary, .jito-main .household-meta, .jito-main .jito-field-help { color: var(--jito-text-secondary) !important; }
.jito-main small.text-body-secondary, .jito-main p.small.text-body-secondary { font-size: var(--jito-type-label); }

/* Small buttons stay touch-sized on phones. */
.jito-main .btn-sm { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding-inline: 1rem; }

/* Phones: the UD face sets larger than the old system fonts, so secondary text steps down one size. */
@media (max-width: 767.98px) {
  .jito-app {
    --jito-type-secondary: .875rem;
    --jito-type-label: .8125rem;
    --jito-type-metadata: .75rem;
    --jito-type-page-title: 1.375rem;
    --jito-type-section-title: 1.0625rem;
    --jito-type-card-title: 1rem;
  }
  .jito-main .text-body-secondary, .jito-main .household-meta, .jito-main .person-meta,
  .jito-main .jito-field-help, .jito-main small, .jito-main .small { line-height: var(--jito-leading-ui); }
  .jito-main small, .jito-main .small, .jito-main .text-body-secondary { font-size: var(--jito-type-label); }
  .jito-main .jito-list-text small, .jito-main .jito-shortcut small { font-size: var(--jito-type-metadata); }
}
@media (max-width: 767.98px) {
  /* Bootstrap heading utilities used by older templates follow the app scale on phones. */
  .jito-main .h5, .jito-main h2.h5 { font-size: var(--jito-type-section-title); }
  .jito-main .h6, .jito-main h3.h6 { font-size: var(--jito-type-body); }
}

/* Older templates still use Bootstrap cards: they look like .jito-surface (radius 20, padding 24 / 16 on phones, quiet shadow). */
.jito-main .card {
  --bs-card-bg: var(--jito-surface);
  --bs-card-border-color: var(--jito-border);
  --bs-card-border-radius: var(--jito-radius-large);
  --bs-card-inner-border-radius: calc(var(--jito-radius-large) - 1px);
  --bs-card-cap-bg: var(--jito-surface-muted);
  --bs-card-spacer-y: var(--jito-space-5);
  --bs-card-spacer-x: var(--jito-space-5);
  --bs-card-cap-padding-x: var(--bs-card-spacer-x); /* header / footer line up with the body */
  box-shadow: var(--jito-shadow-subtle);
}
.jito-main .card-title, .jito-main .card .h5 { font-size: var(--jito-type-card-title); font-weight: 700; }
@media (max-width: 575.98px) {
  .jito-main .card { --bs-card-spacer-y: var(--jito-space-4); --bs-card-spacer-x: var(--jito-space-4); }
}
/* A card inside a card steps down one size (after the phone rule above, which has the same specificity). */
.jito-main .card .card, .jito-surface .card, .jito-main .card .jito-surface {
  --bs-card-border-radius: var(--jito-radius-medium); --bs-card-inner-border-radius: calc(var(--jito-radius-medium) - 1px);
  --bs-card-spacer-y: var(--jito-space-3); --bs-card-spacer-x: var(--jito-space-4);
  border-radius: var(--jito-radius-medium); box-shadow: none;
}

/* Bootstrap list groups read like the app's own grouped lists (rows stay touch-sized; content layout is unchanged). */
.jito-main .list-group {
  --bs-list-group-bg: var(--jito-surface); --bs-list-group-color: var(--jito-text-primary);
  --bs-list-group-border-color: var(--jito-border); --bs-list-group-border-radius: var(--jito-radius-medium);
  --bs-list-group-item-padding-y: var(--jito-space-2); --bs-list-group-item-padding-x: var(--jito-space-4);
  --bs-list-group-action-hover-bg: var(--jito-surface-muted); --bs-list-group-action-hover-color: var(--jito-text-primary);
  --bs-list-group-action-active-bg: var(--jito-accent-subtle); --bs-list-group-action-active-color: var(--jito-accent);
  --bs-list-group-active-bg: var(--jito-accent-subtle); --bs-list-group-active-color: var(--jito-accent);
  --bs-list-group-active-border-color: var(--jito-border);
}
.jito-main .list-group-item { min-height: 2.75rem; }
/* A list group standing on its own gets the 3:1 card edge (a ring, so the light dividers inside stay light).
   Flush lists sit at a card's edge and keep the card's edge only. */
.jito-main .list-group:not(.list-group-flush):has(> .list-group-item) { box-shadow: 0 0 0 1px var(--jito-border-strong); } /* only lists that have rows; without :has the ring is simply not drawn */
.jito-main .list-group:not(.list-group-flush) > .list-group-item { border-inline-color: transparent; }
.jito-main .list-group:not(.list-group-flush) > .list-group-item:first-child { border-top-color: transparent; }
.jito-main .list-group:not(.list-group-flush) > .list-group-item:last-child { border-bottom-color: transparent; }
.jito-main .card > .list-group { --bs-list-group-item-padding-x: var(--bs-card-spacer-x); } /* flush lists line up with the card body */

/* Bootstrap red text: app danger colour plus a mark, so colour is not the only signal. */
.jito-main .text-danger { color: var(--jito-danger) !important; }
.jito-main :is(p, div).text-danger:not(:empty) { font-weight: 700; }
/* Field errors: one look whichever way they are printed (form_field, field_errors, Django's errorlist). */
.jito-main .errorlist { list-style: none; padding: 0; margin: var(--jito-space-1) 0 0; color: var(--jito-danger); font-size: var(--jito-type-label); font-weight: 700; }
.jito-main :is(p, div).text-danger:not(:empty)::before, .jito-field-errors li::before, .jito-main .errorlist li::before {
  content: "!"; display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; margin-inline-end: .35em;
  border-radius: 50%; background: var(--jito-danger); color: var(--jito-surface); font-size: .8em; font-weight: 700; vertical-align: .05em;
}

/* Edges of cards and panels meet the 3:1 non-text contrast; dividers inside them stay light. */
.jito-app .jito-surface, .jito-app .jito-main .card, .jito-app .jito-item, .jito-app .jito-list-group,
.jito-app .jito-schedule-card, .jito-app .jito-shortcut, .jito-app .jito-dialog, .jito-app .schedule-group,
.jito-app .calendar-filter form, .jito-app .calendar-month-surface, .jito-app .jito-empty-state { border-color: var(--jito-border-strong); }

/* 年忌: a 法要 tag in the ceremony colour (teal), distinct from the ink accent and the warning amber. */
:root { --jito-memorial: var(--jito-ceremony); --jito-memorial-subtle: var(--jito-ceremony-subtle); }
.jito-nenki-tag, .jito-nenki-badge {
  display: inline-block; border: 1px solid var(--jito-memorial); border-radius: var(--jito-radius-pill);
  background: var(--jito-memorial-subtle); color: var(--jito-memorial);
  padding: .125rem .5rem; font-size: var(--jito-type-label); font-weight: 700; line-height: var(--jito-leading-ui); text-decoration: none; white-space: nowrap;
}
.jito-nenki-badge { margin-inline-start: .5rem; }
.jito-nenki-tag--next, .jito-nenki-badge--next { background: transparent; font-weight: 400; }
a.jito-nenki-tag:hover, a.jito-nenki-badge:hover { text-decoration: underline; }
.jito-nenki-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.jito-nenki-chips .jito-nenki-tag { padding: .25rem .75rem; font-size: var(--jito-type-secondary); }
.jito-nenki-chip-name { margin-inline-start: .5rem; font-weight: 400; color: var(--jito-text-primary); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.household-deceased-table tr:target > * { background: var(--jito-memorial-subtle); transition: background .6s; }
.household-deceased-table { width: auto; min-width: 50%; }
.household-deceased-table th, .household-deceased-table td { padding-inline: .5rem .75rem; }
.household-deceased-table ruby rt { font-size: .6em; }
@media (max-width: 767.98px) {
  .household-deceased-table { width: 100%; }
}
.person-memorial-past, .person-memorial-past .person-meta { color: var(--jito-text-secondary); }  /* no opacity: it dropped contrast below 4.5:1 (axe color-contrast) in light and dark */

/* Text size (per user, set on <html data-text-size>; 標準 = no attribute and no override). The root size scales every rem token. */
html[data-text-size="large"] { --jito-text-scale: 1.15; font-size: 115%; }
html[data-text-size="xlarge"] { --jito-text-scale: 1.3; font-size: 130%; }
/* Tab labels: the extra-large setting never drops below the large one. */
html[data-text-size="large"] .jito-tab, html[data-text-size="xlarge"] .jito-tab { font-size: .72rem; }
html[data-text-size="large"] .jito-tip-button { font-size: .75rem; opacity: 1; }
html[data-text-size="xlarge"] .jito-tip-button { font-size: .75rem; opacity: 1; }
html[data-text-size="large"] .calendar-month-preview { font-size: max(.72rem, var(--jito-type-metadata)); }
html[data-text-size="xlarge"] .calendar-month-preview { font-size: max(.72rem, var(--jito-type-metadata)); }
/* Settings preview: shows the size of the selected choice, relative to the size now in force. */
.jito-textsize-choices { border: 0; margin: 0; padding: var(--jito-space-3); display: flex; flex-wrap: wrap; gap: var(--jito-space-4); }
.jito-textsize-choice { display: inline-flex; align-items: center; gap: var(--jito-space-2); min-height: 2.75rem; }
.jito-textsize { padding-bottom: var(--jito-space-3); }
.jito-textsize > :not(fieldset) { margin-inline: var(--jito-space-3); }
.jito-textsize-preview { margin-block: 0 var(--jito-space-3); }
.jito-textsize:has(input[value="standard"]:checked) .jito-textsize-preview { font-size: calc(1rem * 1 / var(--jito-text-scale, 1)); }
.jito-textsize:has(input[value="large"]:checked) .jito-textsize-preview { font-size: calc(1rem * 1.15 / var(--jito-text-scale, 1)); }
.jito-textsize:has(input[value="xlarge"]:checked) .jito-textsize-preview { font-size: calc(1rem * 1.3 / var(--jito-text-scale, 1)); }

/* iPhone 「コントラストを上げる」: firmer muted text, edges and the "?" mark. Unset preference changes nothing. */
@media (prefers-contrast: more) {
  :root { --jito-text-secondary: #413d38; --jito-border: #8d8a84; --jito-border-strong: #5d5953; --jito-input-border: #5d5953; }
  /* The "?" mark rule lives in components.css, after the base .jito-tip-button rule it must override. */
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --jito-text-secondary: #d5d1cb; --jito-border: #908b84; --jito-border-strong: #afaba3; --jito-input-border: #afaba3; }
}