/* How the inner pages arrange the application's components: the page banner, the
   feature list (the administration index's search and groups),
   the demo form (the sign-in card), role pages, prose. */

.crumb { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; color: var(--brand-muted); font-size: 0.875rem; font-weight: 500; }
.crumb svg { width: 1rem; height: 1rem; }
.crumb a:hover { color: rgb(var(--color-primary-base)); }

/* --- Feature list ---------------------------------------------------------------------- */

.explorer__find { padding: 1.25rem 1.375rem; border: 1px solid var(--brand-border); border-radius: 18px; background: var(--brand-surface); box-shadow: var(--brand-shadow-xs); }
.explorer__find-label { display: block; margin-bottom: 0.5rem; color: var(--brand-ink); font-family: var(--brand-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.search { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--brand-border-strong); border-radius: 12px; background: var(--brand-surface); }
.search:focus-within { border-color: rgb(var(--color-primary-base)); box-shadow: var(--brand-ring); }
.search__icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--brand-muted); }
.search__input { flex: 1; min-width: 0; padding: 0.75rem 0; border: 0; background: transparent; color: var(--brand-ink); outline: none; }
.search__input::placeholder { color: #9aa1ae; }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__input:focus + .search__kbd { display: none; }
.explorer__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.875rem; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.cat { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.75rem; border-radius: 999px; background: var(--brand-tint); color: rgb(var(--color-primary-base)); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.cat input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cat:hover, .cat:has(input:checked) { background: rgb(var(--color-primary-base)); color: #fff; }
.cat:has(input:focus-visible) { box-shadow: var(--brand-ring); }
.cat b { font-weight: 500; opacity: 0.65; font-variant-numeric: tabular-nums; }
.cat.is-empty { opacity: 0.45; }
.explorer__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin: 1.25rem 0 0.5rem; color: var(--brand-muted); font-size: 0.875rem; }
.explorer__status strong { color: var(--brand-ink); }
.explorer.is-loading .feature-grid { opacity: 0.5; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.75rem; }
.feature-group { grid-column: 1 / -1; margin-top: 1rem; margin-bottom: 0; }
.feature-group:first-child { margin-top: 0.25rem; }
.feature-card { padding: 1rem 1.125rem; border: 1px solid var(--brand-border); border-radius: 16px; background: var(--brand-surface); box-shadow: var(--brand-shadow-xs); }
.feature-card h3 { color: var(--brand-ink); font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.feature-card p { margin-top: 0.25rem; color: var(--brand-muted); font-size: 0.875rem; line-height: 1.45; }
.feature-card .feature-card__roles { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 500; }
.feature-card:target { border-color: rgb(var(--color-primary-base) / 0.45); box-shadow: var(--brand-ring); }
.explorer__empty { padding: 1.5rem; border: 1px dashed var(--brand-border-strong); border-radius: 18px; background: var(--brand-subtle); color: var(--brand-muted); font-size: 0.875rem; }

.spec-row { display: grid; grid-template-columns: 11rem 1fr; gap: 0.25rem 1.5rem; padding-block: 0.625rem; }
.spec-row dt { color: var(--brand-ink); font-weight: 600; font-size: 0.875rem; }
.spec-row dd { margin: 0; font-size: 0.875rem; }
.spec-table > .spec-row + .spec-row { border-top: 1px solid var(--brand-border); }
@media (max-width: 620px) { .spec-row { grid-template-columns: 1fr; } }

/* --- Chips (the try-it panels) ---------------------------------------------------------- */

.chip-btn { padding: 0.3125rem 0.75rem; border: 1px solid var(--brand-border); border-radius: 999px; background: var(--brand-surface); color: var(--brand-text); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.chip-btn:hover { border-color: rgb(var(--color-primary-base) / 0.35); color: var(--brand-ink); }
.chip-btn.is-active { border-color: rgb(var(--color-primary-base)); background: rgb(var(--color-primary-base)); color: #fff; }

/* --- Demo: the sign-in card ------------------------------------------------------------- */

.demo { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
.demo__aside { display: grid; gap: 1rem; }
.steps-v { grid-template-columns: 1fr; }
.account { padding-block: 0.625rem; font-size: 0.875rem; }
.account strong { color: var(--brand-ink); font-weight: 600; }
.account small { display: block; color: var(--brand-muted); font-size: 0.8125rem; line-height: 1.4; }
.accounts { margin-block: 0.5rem; }
.account__creds, .try__password { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-size: 0.875rem; }
.account code, .try__password code { padding: 0.125rem 0.5rem; border-radius: 6px; background: var(--brand-shell); color: var(--brand-ink); font-size: 0.8125rem; }
.copy-btn { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; color: var(--brand-muted); transition: background-color 0.15s, color 0.15s; }
.copy-btn:hover { background: var(--brand-hover); color: var(--brand-ink); }
.copy-btn svg { width: 1rem; height: 1rem; }
.copy-btn__done { display: none; color: rgb(var(--color-success-base)); }
.copy-btn.is-copied .copy-btn__copy { display: none; }
.copy-btn.is-copied .copy-btn__done { display: block; }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } }

/* --- Forms ----------------------------------------------------------------------------- */

.form__intro { margin-bottom: 1.25rem; color: var(--brand-muted); font-size: 0.875rem; }
.form__title { margin-bottom: 0.25rem; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.875rem; }
.field { display: grid; gap: 0.3125rem; margin-bottom: 1rem; align-content: start; }
.field > label, .field > .field__legend, .field > legend { color: var(--brand-ink); font-size: 0.875rem; font-weight: 600; }
.req { color: rgb(var(--color-danger-base)); }
.input--area { min-height: 7rem; resize: vertical; line-height: 1.5; }
.input--select {
    -webkit-appearance: none; appearance: none; padding-right: 2.25rem; cursor: pointer;
    background: var(--brand-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2371717a'%3E%3Cpath d='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right 0.625rem center / 1.25rem;
}
.has-error .input { border-color: rgb(var(--color-danger-base)); }
.has-error .input:focus { box-shadow: 0 0 0 3px rgb(var(--color-danger-base) / 0.2); }
.field__error { display: flex; align-items: flex-start; gap: 0.25rem; color: rgb(var(--color-danger-base)); font-size: 0.8125rem; font-weight: 600; }
.field__error svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.0625rem; }
.field__help { color: var(--brand-muted); font-size: 0.8125rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip-check { position: relative; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-check span { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4375rem 0.75rem; border: 1px solid var(--brand-border); border-radius: 999px; background: var(--brand-surface); color: var(--brand-text); font-size: 0.8125rem; font-weight: 600; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.chip-check__tick { display: none; width: 1rem; height: 1rem; }
.chip-check:hover span { border-color: rgb(var(--color-primary-base) / 0.35); color: var(--brand-ink); }
.chip-check input:checked + span { border-color: rgb(var(--color-primary-base)); background: rgb(var(--color-primary-base)); color: #fff; }
.chip-check input:checked + span .chip-check__tick { display: block; }
.chip-check input:focus-visible + span { box-shadow: var(--brand-ring); }
.check { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--brand-ink); }
.check input { position: absolute; opacity: 0; }
.check__box { display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border: 1px solid var(--brand-border-strong); border-radius: 6px; background: var(--brand-surface); color: transparent; transition: background-color 0.15s, border-color 0.15s; }
.check__box svg { width: 1rem; height: 1rem; }
.check input:checked + .check__box { border-color: rgb(var(--color-primary-base)); background: rgb(var(--color-primary-base)); color: #fff; }
.check input:focus-visible + .check__box { box-shadow: var(--brand-ring); }
.has-error .check__box { border-color: rgb(var(--color-danger-base)); }
.field--check .field__error, .field--check .field__help { padding-left: 1.875rem; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__alert { display: flex; gap: 0.5rem; padding: 0.75rem 0.875rem; margin-bottom: 1rem; border: 1px solid rgb(var(--color-danger-base) / 0.28); border-radius: 12px; background: rgb(var(--color-danger-base) / 0.07); color: var(--brand-ink); font-size: 0.875rem; }
.form__alert svg { flex: none; width: 1.125rem; height: 1.125rem; color: rgb(var(--color-danger-base)); margin-top: 0.0625rem; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 0.25rem; }
.form__or { color: var(--brand-muted); font-size: 0.875rem; }
.request__done h2 { margin-bottom: 0.5rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; }
.request__done p { max-width: 52ch; color: var(--brand-muted); }
.request__done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1rem; }
@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }

/* --- Role pages ------------------------------------------------------------------------- */

.page-note { margin-top: 1rem; }
.page-note h2 { padding: 0; font-family: var(--brand-font); letter-spacing: -0.005em; }
.chapters { display: grid; gap: 1rem; }
.chapter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.25rem 1.75rem; padding: 1.5rem; align-items: start; }
.chapter__copy > p { margin-top: 0.375rem; color: var(--brand-muted); font-size: 0.9375rem; }
.chapter__copy .lu-focus__title { font-size: 1.25rem; }
.chapter__points { margin-top: 0.75rem; }
.chapter__points li { display: flex; gap: 0.5rem; padding-block: 0.25rem; font-size: 0.875rem; }
.chapter__points svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; color: rgb(var(--color-success-base)); }
@media (max-width: 900px) { .chapter { grid-template-columns: 1fr; padding: 1rem; } }

/* --- Prose ---------------------------------------------------------------------------------- */

.prose-panel { padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-lg); background: var(--brand-surface); box-shadow: var(--brand-shadow-xs); }
.prose { max-width: 68ch; }
.prose h2 { margin: 1.75rem 0 0.5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.025em; }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 0.625rem; }
.prose ul { display: grid; gap: 0.5rem; list-style: disc; padding-left: 1.25rem; }
.prose strong { color: var(--brand-ink); font-weight: 600; }
.prose__meta { margin-top: 1.75rem !important; color: var(--brand-muted); font-size: 0.875rem; }
.error-page__actions { margin-top: 1.5rem; }