/* Shared page components: grouped lists, toasts, dialogs, segmented controls,
   responsive tables, list/detail split view, form fields and pagination. */

/* iOS-style grouped (inset) lists: Menu, Settings and other hub pages. */
.jito-list-page { display: grid; gap: var(--jito-space-5); max-width: 44rem; }
.jito-list-section { min-width: 0; }
/* Wide desktop: the hub splits into two columns (same 64rem width as the Home dashboard) instead of
   leaving one 44rem column with an empty right side. Sections stay whole; the phone look is unchanged. */
@media (min-width: 1200px) {
  .jito-list-page { display: block; max-width: 64rem; column-count: 2; column-gap: var(--jito-space-6); }
  .jito-list-section { break-inside: avoid; margin-bottom: var(--jito-space-5); }
}
.jito-list-title { margin: 0 var(--jito-space-4) var(--jito-space-2); color: var(--jito-text-secondary); font-size: var(--jito-type-label); font-weight: 400; }
.jito-list-group { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; background: var(--jito-surface); border: 1px solid var(--jito-border); border-radius: var(--jito-radius-medium); }
.jito-list-row { display: flex; align-items: center; gap: var(--jito-space-3); width: 100%; min-height: 3.25rem; margin: 0; padding: var(--jito-space-2) var(--jito-space-4); border: 0; background: transparent; color: var(--jito-text-primary); text-align: left; text-decoration: none; transition: background-color var(--jito-transition-color), transform var(--jito-transition-color); }
/* The first shadow hides the divider beside the icon; it takes the row's own fill when the row is tinted. */
.jito-list-group .jito-list-row:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--jito-focus-inner); border-radius: var(--jito-radius-medium); }
.jito-list-row + .jito-list-row { box-shadow: inset 3.75rem 1px 0 var(--jito-row-fill, var(--jito-surface)), inset 0 1px 0 var(--jito-border); }
.jito-list-row > .jito-icon:last-child { width: var(--jito-icon-sm); height: var(--jito-icon-sm); margin-left: auto; color: var(--jito-text-secondary); }
/* Selected (current page) and just-tapped rows look the same: tint, bold label, ringed icon. */
.jito-list-row.is-active, .jito-list-row.is-pressed { --jito-row-fill: var(--jito-accent-subtle); background: var(--jito-accent-subtle); color: var(--jito-accent); }
.jito-list-row.is-active .jito-list-label, .jito-list-row.is-pressed .jito-list-label { font-weight: 700; }
.jito-list-row.is-active .jito-list-icon, .jito-list-row.is-pressed .jito-list-icon { box-shadow: 0 0 0 2px var(--jito-accent-subtle), 0 0 0 4px var(--jito-accent); }
.jito-list-row.is-active .jito-list-icon .jito-icon, .jito-list-row.is-pressed .jito-list-icon .jito-icon { fill: currentColor; fill-opacity: .2; stroke-width: 2.1; }
.jito-list-row.is-active > .jito-icon:last-child, .jito-list-row.is-pressed > .jito-icon:last-child { color: var(--jito-accent); }
.jito-list-row--danger { color: var(--jito-danger); justify-content: flex-start; }
.jito-list-row--static { cursor: default; }
/* Tiles: light fill + a drawing in the text colour (not an ink block). Classified tiles below keep their colour; grey ones go to the muted surface. */
.jito-list-icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--jito-radius-small); background: var(--jito-accent-subtle); color: var(--jito-text-primary); }
.jito-list-icon .jito-icon { width: var(--jito-icon-md); height: var(--jito-icon-md); stroke-width: 2.1; }
.jito-list-icon--past, .jito-list-icon--password, .jito-list-icon--switch { background: var(--jito-surface-muted); color: var(--jito-text-secondary); }
.jito-list-icon--people, .jito-list-icon--roles { background: var(--jito-person); color: var(--jito-surface); }
.jito-list-icon--ceremonies { background: var(--jito-ceremony); color: var(--jito-surface); }
.jito-list-icon--memorial, .jito-list-icon--campaigns { background: var(--jito-warning); color: var(--jito-surface); }
.jito-list-icon--documents, .jito-list-icon--operations { background: var(--jito-schedule); color: var(--jito-surface); }
.jito-list-icon--workforce, .jito-list-icon--classifications { background: var(--jito-success); color: var(--jito-surface); }
.jito-list-icon--calendars, .jito-list-icon--google, .jito-list-icon--search { background: var(--jito-schedule); color: var(--jito-surface); }
.jito-list-icon--logout { background: var(--jito-danger); color: var(--jito-surface); }
.jito-list-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: var(--jito-leading-tight); }
.jito-list-label { font-weight: 400; overflow-wrap: anywhere; }
.jito-list-row--group .jito-list-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jito-list-text small { color: var(--jito-text-secondary); font-size: var(--jito-type-metadata); }
.jito-empty-note { margin: 0; padding: var(--jito-space-4); color: var(--jito-text-secondary); background: var(--jito-surface-muted); border-radius: var(--jito-radius-medium); font-size: var(--jito-type-secondary); }
/* Empty states come in two kinds. A section with nothing in it: .jito-empty-note above (one quiet line).
   A whole screen or list with nothing in it: the rule below (quiet surface, centred, icon in the secondary colour,
   one title, one line, one action). It lives here, not in dashboard.css, because the register, the people list and
   the calendar use it too and do not load the dashboard styles. Screen files keep only their differences. */
.jito-empty-state, .household-empty, .calendar-empty, .jito-create-empty { padding: var(--jito-space-5); background: var(--jito-surface-muted); border: 1px solid var(--jito-border); border-radius: var(--jito-radius-large); text-align: center; }
.jito-empty-state > .jito-icon, .household-empty > .jito-icon, .jito-create-empty > .jito-icon { width: var(--jito-icon-lg); height: var(--jito-icon-lg); margin-bottom: var(--jito-space-3); color: var(--jito-text-secondary); }
.jito-empty-state h3, .jito-create-empty h3 { font-size: var(--jito-type-card-title); font-weight: 700; }
.jito-empty-state p, .jito-create-empty p { color: var(--jito-text-secondary); font-size: var(--jito-type-secondary); }
.jito-create-empty { padding: var(--jito-space-5) var(--jito-space-3); border: 0; border-radius: var(--jito-radius-medium); }
.jito-create-empty p { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .jito-empty-state { padding: var(--jito-space-4); }
}

/* Toast notifications (Django messages). Without JS they stay as ordinary alerts. */
.jito-toasts { display: grid; gap: var(--jito-space-2); margin-bottom: var(--jito-space-4); }
.jito-toasts[data-enhanced] { position: fixed; z-index: var(--jito-z-toast); left: 0; right: 0; top: calc(var(--jito-mobile-header-height) + env(safe-area-inset-top, 0px) + var(--jito-space-2)); width: min(32rem, calc(100% - 2rem)); margin: 0 auto; pointer-events: none; }
.jito-toast { display: flex; align-items: flex-start; gap: var(--jito-space-2); margin: 0; border-radius: var(--jito-radius-medium); pointer-events: auto; }
.jito-toasts[data-enhanced] .jito-toast { box-shadow: var(--jito-shadow-popover); animation: jito-toast-in var(--jito-transition-sheet); }
.jito-toast.is-leaving { opacity: 0; transform: translateY(-.5rem); transition: opacity 200ms ease, transform 200ms ease; }
.jito-toast-text { flex: 1; min-width: 0; }
.jito-toast-close { position: relative; display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; margin: -.25rem -.5rem -.25rem 0; border: 0; border-radius: var(--jito-radius-pill); background: transparent; color: inherit; }
.jito-toast-close[hidden] { display: none; }
.jito-toast-close::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); } /* 32px mark, 44px hit area */
.jito-toast-close .jito-icon { width: var(--jito-icon-md); height: var(--jito-icon-md); }
@keyframes jito-toast-in { from { opacity: 0; transform: translateY(-.75rem); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) {
  .jito-toasts[data-enhanced] { left: auto; right: var(--jito-space-5); top: var(--jito-space-5); margin: 0; width: min(26rem, calc(100% - 2rem)); }
}

/* Native <dialog> (keyboard shortcut help). */
.jito-dialog { width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 4rem); padding: var(--jito-space-5); border: 1px solid var(--jito-border); border-radius: var(--jito-radius-large); background: var(--jito-surface-elevated); color: var(--jito-text-primary); box-shadow: var(--jito-shadow-popover); }
.jito-dialog::backdrop { background: var(--jito-scrim); }
.jito-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--jito-space-3); margin-bottom: var(--jito-space-4); }
.jito-dialog-heading h2 { margin: 0; font-size: var(--jito-type-overlay-title); font-weight: 700; }
.jito-dialog-heading form { margin: 0; }
.jito-shortcut-list { display: grid; gap: var(--jito-space-2); margin: 0; }
.jito-shortcut-list > div { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: var(--jito-space-3); padding: var(--jito-space-1) 0; border-bottom: 1px solid var(--jito-border); }
.jito-shortcut-list dt { font-weight: 400; white-space: nowrap; }
.jito-shortcut-list dd { margin: 0; }

/* Segmented control (register switcher, small filters). */
.jito-segmented { display: inline-flex; max-width: 100%; margin-bottom: var(--jito-space-4); padding: .1875rem; gap: .1875rem; overflow-x: auto; background: var(--jito-surface-muted); border-radius: var(--jito-radius-medium); scrollbar-width: none; }
.jito-segmented::-webkit-scrollbar { display: none; }
.jito-segmented a, .jito-segmented button { display: inline-flex; align-items: center; justify-content: center; flex: 1 0 auto; min-height: 2.75rem; padding: .25rem var(--jito-space-4); border: 0; border-radius: calc(var(--jito-radius-medium) - .1875rem); background: transparent; color: var(--jito-text-primary); font-size: var(--jito-type-label); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color var(--jito-transition-color); }
.jito-segmented [aria-current="page"], .jito-segmented [aria-pressed="true"] { background: var(--jito-surface); color: var(--jito-accent); font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / 12%), inset 0 -2px 0 var(--jito-accent); }
.jito-segmented [aria-current="page"]::before, .jito-segmented [aria-pressed="true"]::before { content: "\2713"; margin-right: .25rem; font-weight: 700; }
/* The check mark is not allowed to widen the item (no jump, no extra overflow); on phones a faded right edge shows there is more to scroll to. */
.jito-segmented a, .jito-segmented button { padding-inline: var(--jito-space-3); }
@media (max-width: 40rem) {
  .jito-segmented { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); }
  .jito-segmented:not(:has(a:nth-child(4))):not(:has(button:nth-child(4))) { -webkit-mask-image: none; mask-image: none; }
  .jito-segmented:has(a:nth-child(4)) a:last-child, .jito-segmented:has(button:nth-child(4)) button:last-child { margin-inline-end: 1.25rem; }
}

/* Clickable table rows / list rows (PC): the whole row opens its primary link. */
[data-row-link] { cursor: pointer; }
[data-row-link].is-selected > *, [data-row-link].is-selected { background-color: var(--jito-accent-subtle) !important; font-weight: 700; }
/* Not colour alone: a 3px bar on the leading edge marks the selected row. */
[data-row-link].is-selected { box-shadow: inset 3px 0 0 var(--jito-accent); }
[data-row-link].is-selected > :first-child { box-shadow: inset 3px 0 0 var(--jito-accent); }
[data-row-link].is-cursor { outline: 2px solid var(--jito-accent); outline-offset: -2px; }
@media (hover: hover) {
  [data-row-link]:hover > td, [data-row-link]:hover { background-color: var(--jito-surface-muted); }
}

/* Responsive table: a table on wide screens, a stack of cards on phones.
   Each <td> carries data-label with its column name. */
@media (max-width: 767.98px) {
  .jito-table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .jito-table-cards, .jito-table-cards tbody, .jito-table-cards tr, .jito-table-cards td { display: block; width: 100%; }
  .jito-table-cards tr { margin-bottom: var(--jito-space-3); padding: var(--jito-space-3) var(--jito-space-4); background: var(--jito-surface); border: 1px solid var(--jito-border); border-radius: var(--jito-radius-medium); }
  .jito-table-cards td { display: grid; grid-template-columns: minmax(5.5rem, 34%) 1fr; gap: var(--jito-space-2); padding: var(--jito-space-1) 0; border: 0; background: transparent !important; box-shadow: none !important; }
  .jito-table-cards td::before { content: attr(data-label); color: var(--jito-text-secondary); font-size: var(--jito-type-metadata); font-weight: 400; }
  .jito-table-cards th[scope="row"], .jito-table-cards tbody th { display: grid; grid-template-columns: minmax(5.5rem, 34%) 1fr; gap: var(--jito-space-2); width: 100%; padding: var(--jito-space-1) 0; border: 0; background: transparent !important; box-shadow: none !important; text-align: start; font-weight: 700; }
  .jito-table-cards th[scope="row"]::before, .jito-table-cards tbody th::before { content: attr(data-label); color: var(--jito-text-secondary); font-size: var(--jito-type-metadata); font-weight: 400; }
  .jito-table-cards th[scope="row"]:not([data-label])::before, .jito-table-cards tbody th:not([data-label])::before { content: none; }
  .jito-table-cards td:not([data-label])::before, .jito-table-cards td[data-label=""]::before { content: none; }
  .jito-table-cards td:not([data-label]), .jito-table-cards td[data-label=""] { display: block; }
  .jito-table-cards td[colspan] { display: block; text-align: center; }
}

/* List / detail split view (wide PC). The list stays; the detail opens beside it. */
.jito-split-pane { display: none; }
@media (min-width: 1200px) {
  .jito-split[data-split-active] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 42%); gap: var(--jito-space-5); align-items: start; }
  .jito-split[data-split-active] > .jito-split-pane { display: block; position: sticky; top: calc(4.5rem + var(--jito-space-3)); max-height: calc(100dvh - 4.5rem - var(--jito-space-5)); overflow-y: auto; overscroll-behavior: contain; background: var(--jito-page-bg); border: 1px solid var(--jito-border); border-radius: var(--jito-radius-large); }
  .jito-split-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--jito-space-2); padding: var(--jito-space-2) var(--jito-space-3); background: var(--jito-surface); border-bottom: 1px solid var(--jito-border); }
  .jito-split-bar a, .jito-split-bar button { display: inline-flex; align-items: center; gap: var(--jito-space-1); min-height: 2.75rem; padding: 0 var(--jito-space-3); border: 1px solid var(--jito-border); border-radius: var(--jito-radius-small); background: var(--jito-surface); color: var(--jito-text-primary); font-size: var(--jito-type-label); text-decoration: none; }
  .jito-split-bar .jito-split-close { margin-left: auto; }
  .jito-split-body { padding: var(--jito-space-4); }
  .jito-split-body .person-breadcrumb, .jito-split-body .temple-back-link { display: none; }
  .jito-split-body[aria-busy="true"] { opacity: .55; }
}

/* Form fields rendered by components/form_field.html. */
.jito-field { margin-bottom: var(--jito-space-4); min-width: 0; }
.jito-field-label { display: block; margin-bottom: var(--jito-space-1); font-weight: 700; }
.jito-required { margin-left: var(--jito-space-2); padding: 0 .5rem; border-radius: var(--jito-radius-pill); background: var(--jito-accent-subtle); color: var(--jito-accent); font-size: var(--jito-type-micro); font-weight: 700; vertical-align: .1em; }
.jito-field-help { margin: var(--jito-space-1) 0 0; color: var(--jito-text-secondary); font-size: var(--jito-type-metadata); }
.jito-field-errors { margin: var(--jito-space-1) 0 0; padding: 0; list-style: none; color: var(--jito-danger); font-size: var(--jito-type-label); font-weight: 700; }
.jito-field.has-error .form-control, .jito-field.has-error .form-select, .jito-field [aria-invalid="true"] { border-color: var(--jito-danger) !important; }
.jito-field-check { display: flex; align-items: center; gap: 0; }
.jito-field-check input { flex: none; margin-top: 0; }
.jito-field-check .form-check-label { display: inline-flex; align-items: center; align-self: stretch; flex: 1 1 auto; min-height: 2.75rem; padding-inline-start: var(--jito-space-2); } /* the label (not the row) carries the 44px, and the space beside the box belongs to it */
.jito-error-summary { margin-bottom: var(--jito-space-4); padding: var(--jito-space-3) var(--jito-space-4); border: 2px solid var(--jito-danger); border-radius: var(--jito-radius-medium); background: var(--jito-surface); }
.jito-error-summary h2 { margin: 0 0 var(--jito-space-2); font-size: var(--jito-type-section-title); color: var(--jito-danger); }
.jito-error-summary ul { margin: 0; padding-left: var(--jito-space-5); }
.jito-subject-list { display: grid; gap: var(--jito-space-2); }
.jito-subject-option { display: flex; align-items: center; gap: var(--jito-space-2); min-height: 2.75rem; padding: var(--jito-space-2) var(--jito-space-3); border: 1px solid var(--jito-border); border-radius: var(--jito-radius-large); background: var(--jito-surface); cursor: pointer; }
.jito-subject-option:has(input:checked) { border-color: var(--jito-accent); background: var(--jito-accent-subtle); box-shadow: inset 0 0 0 1px var(--jito-accent); } /* 2px edge, same box size */
.jito-subject-option input { flex: none; margin: 0; }
.jito-form-grid { display: grid; gap: 0 var(--jito-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .jito-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jito-form-actions { display: flex; flex-wrap: wrap; gap: var(--jito-space-2); margin-top: var(--jito-space-4); }
/* Phone: the save/cancel row stays above the tab bar while a long form scrolls. */
@media (max-width: 767.98px) {
  .jito-form-actions--sticky { position: sticky; z-index: var(--jito-z-sticky); bottom: calc(var(--jito-mobile-nav-height) + env(safe-area-inset-bottom, 0px)); margin-inline: calc(var(--jito-space-4) * -1); padding: var(--jito-space-3) var(--jito-space-4); background: var(--jito-surface); border-top: 1px solid var(--jito-border); }
  .jito-form-actions--sticky .btn { flex: 1 1 auto; }
  body.jito-keyboard-open .jito-form-actions--sticky { bottom: var(--jito-kb-inset, 0px); }
}
form[aria-busy="true"] [type="submit"] { opacity: .6; cursor: progress; }

/* Dispatch proposal: the confirm bar also stays at the bottom on a wide screen (the phone rule above stops at 768px). */
@media (min-width: 768px) {
  .jito-form-actions--dock { position: sticky; z-index: var(--jito-z-sticky); bottom: 0; align-items: center; padding: var(--jito-space-3) var(--jito-space-4); background: var(--jito-surface); border-top: 1px solid var(--jito-border); }
}
/* Dispatch proposal: keep the focused field and anchors clear of the pinned bar (and the tab bar on a phone). */
html:has(#dispatch-bar) { scroll-padding-bottom: calc(var(--jito-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 5rem); }
html:has(#dispatch-bar) .jito-app input, html:has(#dispatch-bar) .jito-app textarea, html:has(#dispatch-bar) .jito-app select { scroll-margin-bottom: calc(var(--jito-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 5rem); }
@media (min-width: 768px) {
  html:has(#dispatch-bar) { scroll-padding-bottom: 5rem; }
  html:has(#dispatch-bar) .jito-app input, html:has(#dispatch-bar) .jito-app textarea, html:has(#dispatch-bar) .jito-app select { scroll-margin-bottom: 5rem; }
}
.jito-dispatch-blockers { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* one line; the full text is in title */
/* Dispatch proposal: one group per person, rows in visiting order. A row is a 44px-high button that opens its edit panel. */
.jito-dispatch-group + .jito-dispatch-group { margin-top: var(--jito-space-5); }
.jito-dispatch-group > .jito-list-group { overflow: visible; } /* the explanation tips inside a row must not be clipped */
.jito-dispatch-group > .jito-list-group > li + li { border-top: 1px solid var(--jito-border); }
.jito-dispatch-time { flex: none; min-width: 3.25rem; font-variant-numeric: tabular-nums; color: var(--jito-text-secondary); }
.jito-dispatch-case-link { min-height: 2.75rem; } /* 44px tap target; was an inline style, which the CSP (style-src-attr none) blocks */
.jito-dispatch-notes { margin: 0; padding: 0 var(--jito-space-4) var(--jito-space-2); font-size: var(--jito-type-secondary); }
.jito-dispatch-notes > p { margin: 0 0 var(--jito-space-1); }
.jito-dispatch-edit { padding: var(--jito-space-3) var(--jito-space-4) var(--jito-space-4); background: var(--jito-surface-muted); }

/* Touch screens: compact buttons still meet the 44pt target. */
@media (pointer: coarse), (max-width: 767.98px) {
  .jito-main .btn-sm, .jito-main .form-select-sm { min-height: 2.75rem; padding-inline: var(--jito-space-4); }
}

/* Pagination component. */
.jito-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jito-space-3); margin-top: var(--jito-space-4); }
.jito-pagination p { margin: 0; color: var(--jito-text-secondary); font-size: var(--jito-type-label); }
.jito-pagination nav { display: flex; gap: var(--jito-space-2); }
.jito-pagination a, .jito-pagination span[aria-disabled] { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--jito-space-4); border: 1px solid var(--jito-border-strong); border-radius: var(--jito-radius-small); background: var(--jito-surface); color: var(--jito-accent); font-weight: 700; text-decoration: none; }
.jito-pagination span[aria-disabled] { color: var(--jito-text-secondary); opacity: .6; }

/* Status / error pages. */
.jito-status-page { max-width: 32rem; margin: var(--jito-space-7) auto; text-align: center; }
.jito-status-page .jito-status-code { margin: 0 0 var(--jito-space-2); color: var(--jito-accent); font-size: 3rem; font-weight: 700; letter-spacing: .05em; }
.jito-status-page h1 { font-size: 1.5rem; font-weight: 700; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; } /* 句ごとに <wbr> で改行し、1文字だけの行を作らない */
.jito-status-page p { color: var(--jito-text-secondary); }
.jito-status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--jito-space-2); margin-top: var(--jito-space-5); }
/* Narrow the current register while a household is open beside it. */
@media (min-width: 1200px) {
  .jito-split[data-split-active] .temple-current-list :is(th, td):nth-child(n+6) { display: none; }
}

/* The header back link is the single "back" control; in-page duplicates would name other destinations. */
.has-shell-back .jito-main .temple-back-link { display: none; }

/* "?" tooltip: hover/focus on PC, tap on phones (shell.js toggles .is-open and keeps it on screen). */
.jito-tip { position: relative; display: inline-flex; vertical-align: .15em; margin-inline-start: .25rem; }
.jito-tip-button {
  position: relative; display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; padding: 0;
  border: 0; border-radius: 50%; background: var(--jito-surface-muted);
  color: var(--jito-text-secondary); font-size: var(--jito-type-micro); font-weight: 700; line-height: 1; cursor: help;
}
.jito-tip-button:hover, .jito-tip.is-open .jito-tip-button { color: var(--jito-accent); }
@media (prefers-contrast: more) { .jito-tip-button { color: var(--jito-text-primary); border: 1px solid var(--jito-border-strong); } }
.jito-tip-button::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); } /* touch target larger than the mark */
.jito-tip-body {
  display: none; position: absolute; z-index: var(--jito-z-menu); top: calc(100% + .4rem); inset-inline-start: 0;
  width: max-content; max-width: min(20rem, calc(100vw - 2rem)); padding: .5rem .75rem;
  border-radius: var(--jito-radius-small); background: var(--jito-text-primary); color: var(--jito-surface);
  font-size: var(--jito-type-label); font-weight: 400; line-height: var(--jito-leading-ui); text-align: start; white-space: normal;
  box-shadow: var(--jito-shadow-popover);
}
.jito-tip--end .jito-tip-body { inset-inline-start: auto; inset-inline-end: 0; }
.jito-tip.is-open .jito-tip-body { display: block; }
@media (hover: hover) {
  .jito-tip:hover .jito-tip-body, .jito-tip:focus-within .jito-tip-body { display: block; }
}
.jito-field-head { display: flex; align-items: center; gap: .125rem; }
.jito-field-head .jito-field-label { margin-bottom: 0; }
.jito-field-head { margin-bottom: var(--jito-space-1); }
.jito-inline-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Every check / radio sits in a 44px-high row, whichever wrapper a template uses: Bootstrap's .form-check (its float and negative
   margin are cancelled; the square is 20px, so the gap is set here) or a plain <label> around the input. :where() keeps the
   component rules (.calendar-check, .jito-textsize-choice, .temple-select-target ...) in charge of their own layout. */
.jito-app .form-check { display: flex; align-items: center; gap: 0; min-height: 2.75rem; margin-bottom: 0; padding-left: 0; }
/* The label fills the row and is 44px high itself, so a tap beside the text or the box still selects it. The gap is the label's padding, not dead space. */
.jito-app .form-check > .form-check-label { align-self: stretch; flex: 1 1 auto; box-sizing: border-box; min-height: 2.75rem; padding-block: .625rem; padding-inline-start: var(--jito-space-3); }
.jito-app .form-check-inline { display: inline-flex; margin-right: var(--jito-space-4); }
.jito-app .form-check .form-check-input { float: none; flex: none; margin: 0; }
:where(.jito-app label:has(> .form-check-input)) { display: flex; align-items: center; gap: var(--jito-space-3); min-height: 2.75rem; }
/* 世話人: the person picker appears once the box is ticked. */
.jito-sewanin:has(#aff-sw:not(:checked)) .jito-sewanin-person { display: none; }

/* Shared row item for lists built in templates (sections, members, お取越, candidates). */
.jito-stack { display: grid; gap: var(--jito-space-3); margin-bottom: var(--jito-space-3); }
.jito-stack > h2, .jito-stack > .h5 { font-size: var(--jito-type-section-title); font-weight: 700; margin: 0; }
.jito-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jito-space-2) var(--jito-space-3);
  padding: var(--jito-space-3) var(--jito-space-4); margin-bottom: var(--jito-space-2);
  background: var(--jito-surface); border: 1px solid var(--jito-border); border-radius: var(--jito-radius-medium);
}
.jito-item--top { align-items: flex-start; }
/* Whole card is the tap target: the title link is stretched over it; actions and tips stay above. */
.jito-item--link { position: relative; }
.jito-item--link .jito-item-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.jito-item--link .jito-item-title a:focus-visible::after { outline: 3px solid var(--jito-focus-outer); outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--jito-focus-inner); }
.jito-item--link .jito-item-actions, .jito-item--link .jito-tip { position: relative; z-index: 1; }
.jito-item-main { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1 1 12rem; }
.jito-item-main small { color: var(--jito-text-secondary); font-size: var(--jito-type-label); }
.jito-item-title { font-size: var(--jito-type-card-title); font-weight: 700; margin: 0; }
.jito-item-actions { display: flex; flex-wrap: wrap; gap: var(--jito-space-2); align-items: center; }
.jito-inline-form { display: flex; flex-wrap: wrap; gap: var(--jito-space-2); align-items: flex-end; }
.jito-inline-form > div { min-width: 0; flex: 1 1 10rem; }
.jito-check-row { display: flex; flex-wrap: wrap; gap: var(--jito-space-2); align-items: center; min-height: 2.75rem; }
.jito-candidate { margin-bottom: var(--jito-space-1); padding: var(--jito-space-2) var(--jito-space-3); }
.jito-candidate small { color: var(--jito-text-secondary); }
.jito-seq-input { width: 5rem; }

/* Drag handle for reorderable rows (sortable.js). */
.jito-drag-handle {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.25rem 0 -.25rem -.5rem;
  border: 0; border-radius: var(--jito-radius-small); background: none; color: var(--jito-text-secondary);
  font-size: 1.25rem; line-height: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.jito-drag-handle:active { cursor: grabbing; }
[data-sortable-item].is-dragging { opacity: .85; border-color: var(--jito-accent); box-shadow: var(--jito-shadow-popover); position: relative; z-index: 2; }

/* Several small forms on one page: the edited form's section and save button stand out. */
[data-unsaved-guard] .jito-surface:has(form.is-unsaved) { border-color: var(--jito-accent); box-shadow: 0 0 0 1px var(--jito-accent); }
[data-unsaved-guard] form.is-unsaved button[type="submit"].btn-outline-primary { background: var(--jito-accent); color: var(--jito-on-accent); }
[data-unsaved-guard] form.is-unsaved button[type="submit"].btn-outline-primary::after { content: "（未保存）"; font-weight: 400; }

/* Disclosure marker: one › that turns down when open, instead of the browser's ▶.
   Details with their own marker (filters, menus, login) are left alone. */
.jito-main details:not(.register-filters, .calendar-filter, .jito-login-alt, .jito-menu) > summary { list-style: none; }
.jito-main details:not(.register-filters, .calendar-filter, .jito-login-alt, .jito-menu) > summary::-webkit-details-marker { display: none; }
.jito-main details:not(.register-filters, .calendar-filter, .jito-login-alt, .jito-menu) > summary::before { content: "›"; display: inline-block; width: 1em; margin-inline-end: .25rem; font-weight: 700; text-align: center; transition: transform var(--jito-transition-color); }
.jito-main details[open]:not(.register-filters, .calendar-filter, .jito-login-alt, .jito-menu) > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .jito-main details > summary::before { transition: none; } }

/* 折りたたみ入力欄（家の登録など）: 必須項目は常に表示し、任意項目を開閉する。 */
.jito-form-details { border: 1px solid var(--jito-border-strong); border-radius: var(--jito-radius-medium); padding: 0 1rem; background: var(--jito-surface); }
.jito-form-details > summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: 700; color: var(--jito-accent); }
.jito-form-details[open] { padding-bottom: 1rem; }

/* htmx pilot: the past-register list area.  htmx indicator styles are off (includeIndicatorStyles=false);
   htmx adds .htmx-request to the indicator element while a request is in flight. */
/* keyboard focus ring: the global .jito-app :focus-visible rule applies */
/* Dim only on the way in (after 120 ms, so fast swaps never flicker); the new list appears at full contrast at once. */
.jito-htmx-list.htmx-request { opacity: .55; transition: opacity 150ms linear 120ms; cursor: progress; }
.jito-htmx-list.htmx-request a { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .jito-htmx-list.htmx-request { transition: none; }
}

/* 山号 → 寺号 を1行に。標準の文字サイズなら 320px 幅でも半分ずつ(パネルの余白を引いた約250pxに、7rem×2+間隔が入る)。
   文字を大きくして 7rem が 2 列に入らなくなったときだけ縦に並ぶ。 */
.jito-name-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: var(--jito-space-3); align-items: start; }
.jito-name-pair > * { min-width: 0; }
.jito-name-pair input:not([type="checkbox"]):not([type="radio"]) { min-height: 2.75rem; width: 100%; }

/* A choice among links (reading of a character, memorial / funeral): light ground + 2px line + bold, never the ink fill. */
.jito-choice { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border: 1px solid var(--jito-border-strong); border-radius: var(--jito-radius-small); background: var(--jito-surface); color: var(--jito-accent); font-weight: 400; text-decoration: none; }
.jito-choice:hover { background: var(--jito-accent-subtle); color: var(--jito-accent); }
.jito-choice.is-active { background: var(--jito-accent-subtle); border-color: var(--jito-accent); box-shadow: inset 0 0 0 1px var(--jito-accent); color: var(--jito-text-primary); font-weight: 700; }

/* ヘルプ(はじめての設定)の画面写真。紫の枠は押す場所の印(写真に焼き込み済み)。 */
.help-shot { margin: var(--jito-space-3) 0 var(--jito-space-4); }
.help-shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--jito-border);
  border-radius: var(--jito-radius-medium);
  background: var(--jito-surface-muted);
}
.help-shot figcaption {
  margin-top: var(--jito-space-2);
  font-size: var(--jito-type-secondary);
  color: var(--jito-text-secondary);
}