/* Documentation page (app/Views/docs/index.php). Uses the brand tokens (--rh-*) from brand.css.
   No borders: separation comes from shadows, spacing and tinted backgrounds. */
.dc-page { --dc-top: 5.6rem; --dc-side: 17.5rem; }
.dc-page .dc-sec, .dc-page .dc-hero { scroll-margin-top: calc(var(--dc-top) + 1rem); }

.dc-wrap { display: grid; grid-template-columns: var(--dc-side) minmax(0, 1fr); gap: 2rem; max-width: 1320px; margin: 0 auto; padding: 1rem 1.25rem 4rem; align-items: start; }

/* ---------- sidebar */
.dc-side { position: sticky; top: var(--dc-top); max-height: calc(100vh - var(--dc-top) - 1rem); display: flex; }
.dc-side-in { display: flex; flex-direction: column; width: 100%; min-height: 0; padding: 1rem .75rem 1rem 1rem; border-radius: var(--rh-radius, .9rem); background: var(--rh-surface); box-shadow: var(--rh-sh-2); }
.dc-search { position: relative; margin: 0 .25rem .5rem 0; }
.dc-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--rh-muted); pointer-events: none; }
.dc-search input { width: 100%; padding: .65rem 2.4rem .65rem 2.4rem; border: 0; border-radius: .7rem; background: var(--rh-surface-2); color: var(--rh-ink); font-size: .95rem; box-shadow: var(--rh-sh-field); transition: box-shadow .18s, background-color .18s; }
.dc-search input:focus { outline: 0; background: var(--rh-surface); box-shadow: var(--rh-ring), var(--rh-sh-1); }
.dc-search kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-size: .72rem; }
.dc-count { min-height: 1.2em; margin: 0 0 .4rem .2rem; font-size: .8rem; color: var(--rh-muted); }
.dc-toc { overflow-y: auto; overscroll-behavior: contain; padding-right: .25rem; scrollbar-width: thin; }
.dc-toc-g { margin-bottom: .75rem; }
.dc-toc-h { display: block; margin: 0 0 .25rem .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rh-muted); }
.dc-toc a { display: flex; align-items: center; gap: .6rem; padding: .42rem .6rem; border-radius: .6rem; color: var(--rh-text) !important; font-weight: 500; font-size: .93rem; text-decoration: none; transition: background-color .15s, color .15s, transform .15s, box-shadow .15s; }
.dc-toc a i { color: var(--rh-muted); width: 1.1rem; text-align: center; transition: color .15s; }
.dc-toc a:hover { background: var(--rh-brand-soft); color: var(--rh-brand) !important; transform: translateX(2px); }
.dc-toc a:hover i { color: var(--rh-brand); }
.dc-toc a[aria-current="true"] { background: #2d4bd8; color: #fff !important; box-shadow: var(--rh-sh-brand); text-shadow: 0 1px 2px rgba(0, 0, 0, .35) !important; }
/* (!important: the site theme colours every plain link with a high-specificity rule) */
.dc-toc a[aria-current="true"] i { color: #fff; }
.dc-toc a.dc-hide, .dc-toc-g.dc-hide { display: none; }

/* ---------- mobile bar + drawer */
.dc-bar { display: none; }
.dc-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(11, 18, 32, .45); backdrop-filter: blur(2px); }

/* ---------- main column */
.dc-main { min-width: 0; outline: 0; }
.dc-hero { padding: 2rem 2rem 1.6rem; margin-bottom: 1.5rem; border-radius: calc(var(--rh-radius, .9rem) + .3rem); background: radial-gradient(700px 260px at 100% 0%, rgba(var(--rh-brand-rgb), .10), transparent 70%), var(--rh-surface); box-shadow: var(--rh-sh-2); }
.dc-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; background: var(--rh-brand-soft); color: var(--rh-brand); font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.dc-hero h1 { margin: .7rem 0 .5rem; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); line-height: 1.1; }
.dc-lede { max-width: 46rem; margin: 0 0 1.3rem; font-size: 1.12rem; color: var(--rh-muted); }
.dc-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; }
.dc-qc, .dc-qc:hover, .dc-card-link, .dc-card-link:hover { color: var(--rh-text) !important; }
.dc-qc { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem; padding: .85rem 1rem; border-radius: .8rem; background: var(--rh-surface); color: var(--rh-text); text-decoration: none; box-shadow: var(--rh-sh-1); transition: transform .2s, box-shadow .2s; }
.dc-qc i { grid-row: 1 / 3; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .7rem; background: var(--rh-brand-soft); color: var(--rh-brand); font-size: 1.1rem; }
.dc-qc b { color: var(--rh-ink); }
.dc-qc small { color: var(--rh-muted); font-size: .82rem; }
.dc-qc:hover { transform: translateY(-2px); box-shadow: var(--rh-sh-3); color: var(--rh-text); }

.dc-sec { margin-bottom: 1.5rem; padding: 1.8rem 2rem; border-radius: var(--rh-radius, .9rem); background: var(--rh-surface); box-shadow: var(--rh-sh-2); }
.dc-sec.dc-hide { display: none; }
.dc-sec h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: 0 0 .8rem; font-size: 1.55rem; }
.dc-sec h2 > i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: var(--rh-brand-soft); color: var(--rh-brand); font-size: 1.15rem; }
.dc-sec h3 { margin: 1.5rem 0 .6rem; font-size: 1.15rem; }
.dc-sec p, .dc-sec li { line-height: 1.65; }
.dc-sum { font-size: 1.07rem; color: var(--rh-muted); }
.dc-badge { padding: .2rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--rh-warning) 14%, var(--rh-surface)); color: color-mix(in srgb, var(--rh-warning) 72%, var(--rh-ink)); font-size: .75rem; font-weight: 700; }
.dc-sec code { padding: .1rem .4rem; border-radius: .35rem; background: var(--rh-surface-2); color: var(--rh-ink); font-size: .92em; }

/* numbered steps */
.dc-steps { counter-reset: dc; list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .55rem; }
.dc-steps li { counter-increment: dc; position: relative; padding: .55rem .9rem .55rem 3rem; border-radius: .7rem; background: var(--rh-surface-2); }
.dc-steps li::before { content: counter(dc); position: absolute; left: .7rem; top: .55rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--rh-brand); color: #fff; font-size: .8rem; font-weight: 700; box-shadow: var(--rh-sh-brand); }
.dc-list { padding-left: 1.2rem; }
.dc-list li { margin-bottom: .35rem; }

/* flow */
.dc-flow { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem; padding: 0; margin: .5rem 0 1.2rem; counter-reset: fl; }
.dc-flow li { counter-increment: fl; display: flex; flex-direction: column; gap: .1rem; padding: .7rem .8rem; border-radius: .7rem; background: var(--rh-surface-2); box-shadow: var(--rh-sh-1); }
.dc-flow li::before { content: counter(fl); font-size: .72rem; font-weight: 700; color: var(--rh-brand); }
.dc-flow b { color: var(--rh-ink); }
.dc-flow span { font-size: .82rem; color: var(--rh-muted); }

/* cards */
.dc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; margin: 1rem 0; }
.dc-cards.two { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.dc-card { padding: 1rem 1.1rem; border-radius: .8rem; background: var(--rh-surface-2); box-shadow: var(--rh-sh-1); color: var(--rh-text); text-decoration: none; }
.dc-card i { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .5rem; border-radius: .65rem; background: var(--rh-brand-soft); color: var(--rh-brand); font-size: 1.05rem; }
.dc-card b { display: block; color: var(--rh-ink); margin-bottom: .2rem; }
.dc-card p { margin: 0; font-size: .92rem; color: var(--rh-muted); }
.dc-card-link { transition: transform .2s, box-shadow .2s, background-color .2s; }
.dc-card-link:hover { transform: translateY(-2px); box-shadow: var(--rh-sh-3); background: var(--rh-surface); color: var(--rh-text); }

/* tags */
.dc-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .4rem 0 1rem; }
.dc-tags li { padding: .25rem .7rem; border-radius: 999px; background: var(--rh-surface-2); font-size: .88rem; font-weight: 500; box-shadow: var(--rh-sh-1); }
.dc-tags.small li { font-size: .8rem; padding: .15rem .55rem; }

/* screenshots */
.dc-shot { margin: 1.1rem 0; }
.dc-shot a { display: block; border-radius: .8rem; overflow: hidden; box-shadow: var(--rh-sh-3); transition: transform .25s, box-shadow .25s; background: var(--rh-surface-2); }
.dc-shot a:hover { transform: translateY(-3px); box-shadow: var(--rh-sh-4); }
.dc-shot img { display: block; width: 100%; height: auto; filter: none; }
.dc-shot img[height="844"] { max-width: 300px; margin: 0 auto; }
.dc-shot figcaption { margin-top: .55rem; font-size: .88rem; color: var(--rh-muted); text-align: center; }

/* callouts */
.dc-call { display: grid; grid-template-columns: auto 1fr; gap: .75rem; margin: 1rem 0; padding: .85rem 1rem; border-radius: .75rem; --c: var(--rh-brand); background: color-mix(in srgb, var(--c) 9%, var(--rh-surface)); box-shadow: var(--rh-sh-1), inset 4px 0 0 var(--c); }
.dc-call > i { color: var(--c); font-size: 1.2rem; line-height: 1.4; }
.dc-call b { color: var(--rh-ink); }
.dc-call.tip { --c: var(--rh-teal); }
.dc-call.note { --c: var(--rh-brand); }
.dc-call.warn { --c: #d97706; }
.dc-call.warn > i { color: var(--rh-warning); }
.dc-call.danger { --c: var(--rh-danger); }
.dc-call.ok { --c: var(--rh-success); }

/* code */
.dc-code { position: relative; margin: .7rem 0; border-radius: .75rem; background: #0f172a; box-shadow: var(--rh-sh-2); }
.dc-code-l { position: absolute; left: 1rem; top: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.dc-code pre { margin: 0; padding: 2rem 1rem 1rem; overflow-x: auto; }
.dc-code code { padding: 0 !important; background: none !important; color: #e2e8f0 !important; font-size: .9rem; line-height: 1.6; white-space: pre; text-shadow: none !important; }
.dc-copy { position: absolute; right: .55rem; top: .45rem; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border: 0; border-radius: .5rem; background: rgba(255, 255, 255, .1); color: #e2e8f0; font-size: .8rem; font-weight: 500; transition: background-color .15s; }
.dc-copy:hover { background: rgba(255, 255, 255, .2); }
.dc-copy.ok { background: var(--rh-success); color: #fff; }

/* tables */
.dc-table { overflow-x: auto; margin: .8rem 0 1rem; border-radius: .75rem; box-shadow: var(--rh-sh-1); }
.dc-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.dc-table th, .dc-table td { padding: .6rem .85rem; text-align: left; vertical-align: top; border: 0; }
.dc-table thead th { background: var(--rh-surface-2); color: var(--rh-muted); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.dc-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--rh-surface-2) 55%, transparent); }
.dc-table tbody th { font-weight: 500; color: var(--rh-ink); }
.dc-table td.y { color: color-mix(in srgb, var(--rh-success) 82%, var(--rh-ink)); font-weight: 500; }
.dc-table td.n { color: var(--rh-muted); }
.dc-table td.p { color: color-mix(in srgb, var(--rh-warning) 85%, var(--rh-ink)); font-weight: 500; }
.dc-m { display: inline-block; min-width: 4rem; padding: .1rem .45rem; border-radius: .4rem; font-size: .75rem; font-weight: 700; text-align: center; color: #fff; }
.dc-m.get { background: #15803d; } .dc-m.post { background: #2d4bd8; } .dc-m.patch { background: #b45309; } .dc-m.del { background: #c81e1e; } /* fixed: white text stays readable in dark mode too */

/* accordions */
.dc-acc-tools { display: flex; gap: .5rem; justify-content: flex-end; margin: -.2rem 0 .7rem; }
.dc-btn { border: 0; border-radius: .6rem; padding: .35rem .8rem; background: var(--rh-surface-2); color: var(--rh-text); font-size: .85rem; font-weight: 500; box-shadow: var(--rh-sh-1); transition: transform .15s, box-shadow .15s, color .15s; }
.dc-btn:hover { transform: translateY(-1px); box-shadow: var(--rh-sh-2); color: var(--rh-brand); }
.dc-accs { display: grid; gap: .55rem; }
.dc-acc { border-radius: .75rem; background: var(--rh-surface-2); box-shadow: var(--rh-sh-1); transition: box-shadow .2s, background-color .2s; }
.dc-acc[open] { background: var(--rh-surface); box-shadow: var(--rh-sh-2); }
.dc-acc summary { position: relative; padding: .85rem 2.8rem .85rem 1rem; font-weight: 500; color: var(--rh-ink); cursor: pointer; list-style: none; border-radius: .75rem; }
.dc-acc summary::-webkit-details-marker { display: none; }
.dc-acc summary::after { content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--rh-brand); transition: transform .25s; }
.dc-acc[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.dc-acc summary:hover { color: var(--rh-brand); }
.dc-acc > div { padding: 0 1rem 1rem; color: var(--rh-text); line-height: 1.65; }
.dc-err { font-family: var(--rh-font); padding: .1rem .45rem; border-radius: .35rem; background: color-mix(in srgb, var(--rh-danger) 10%, var(--rh-surface)); color: var(--rh-danger); }

/* glossary */
.dc-gloss { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem; margin: 0; }
.dc-gloss > div { padding: .7rem .9rem; border-radius: .7rem; background: var(--rh-surface-2); box-shadow: var(--rh-sh-1); }
.dc-gloss dt { color: var(--rh-ink); font-weight: 700; }
.dc-gloss dd { margin: .15rem 0 0; color: var(--rh-muted); font-size: .92rem; }

.dc-hours, .dc-updated { color: var(--rh-muted); font-size: .9rem; }
.dc-updated { text-align: center; margin-top: 1rem; }
.dc-none { padding: 1.2rem 1.4rem; border-radius: var(--rh-radius, .9rem); background: var(--rh-surface); box-shadow: var(--rh-sh-2); color: var(--rh-muted); }

/* ---------- tablets & phones: the contents become a drawer opened from a sticky bar */
@media (max-width: 991.98px) {
  .dc-wrap { grid-template-columns: 1fr; padding: .5rem .9rem 3rem; gap: 0; }
  .dc-bar { position: sticky; top: calc(var(--dc-top) - .6rem); z-index: 1020; display: flex; align-items: center; gap: .75rem; margin: .4rem .9rem .5rem; padding: .45rem .5rem; border-radius: .9rem; background: color-mix(in srgb, var(--rh-surface) 92%, transparent); backdrop-filter: blur(10px); box-shadow: var(--rh-sh-2); }
  .dc-menu { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border: 0; border-radius: .65rem; background: #2d4bd8; color: #fff; font-weight: 500; box-shadow: var(--rh-sh-brand); text-shadow: 0 1px 2px rgba(0, 0, 0, .4) !important; }
  .dc-bar-cur { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; color: var(--rh-ink); }
  .dc-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1045; width: min(20rem, 86vw); max-height: none; transform: translateX(-105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .dc-side.open { transform: none; }
  .dc-side-in { border-radius: 0 1.1rem 1.1rem 0; padding-top: 1.2rem; box-shadow: var(--rh-sh-4); }
  .dc-page .dc-sec, .dc-page .dc-hero { scroll-margin-top: calc(var(--dc-top) + 4rem); }
  .dc-sec, .dc-hero { padding: 1.3rem 1.15rem; }
  .dc-sec h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .dc-side, .dc-acc summary::after { transition: none; } }
@media print {
  .dc-side, .dc-bar, .dc-acc-tools, .dc-copy, .hh, .rh-footer { display: none !important; }
  .dc-wrap { grid-template-columns: 1fr; }
  .dc-sec, .dc-hero { box-shadow: none; padding: 0; }
  .dc-acc > div { display: block !important; }
}

/* ---------- role guides */
.dc-anchor { display: block; position: relative; top: calc(-1 * (var(--dc-top) + 1rem)); }
.dc-roles { display: flex; flex-wrap: wrap; gap: .45rem; margin: .4rem 0 1.1rem; padding: .35rem; border-radius: .9rem; background: var(--rh-surface-2); box-shadow: var(--rh-sh-field); }
.dc-roles button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 0; border-radius: .65rem; background: transparent; color: var(--rh-text); font-weight: 500; transition: background-color .15s, color .15s, box-shadow .15s; }
.dc-roles button:hover { background: var(--rh-surface); color: var(--rh-brand); }
.dc-roles button[aria-selected="true"] { background: var(--rh-surface); color: var(--rh-brand); box-shadow: var(--rh-sh-2); }
.dc-role[hidden] { display: none; }
.dc-role { animation: dc-in .25s ease; }
@keyframes dc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dc-role-h { display: flex; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.dc-role-h h3 { margin: 0 0 .15rem; }
.dc-role-h p { margin: 0; color: var(--rh-muted); }
.dc-role-ic { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: #2d4bd8; color: #fff; font-size: 1.3rem; box-shadow: var(--rh-sh-brand); }
.dc-role-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .9rem; }
.dc-role-box { padding: 1rem 1.1rem; border-radius: .8rem; background: var(--rh-surface); box-shadow: var(--rh-sh-1); margin-bottom: .9rem; }
.dc-role-box h4 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font-size: 1rem; color: var(--rh-ink); }
.dc-role-box h4 i { color: var(--rh-brand); }
.dc-role-box.ok h4 i { color: color-mix(in srgb, var(--rh-success) 82%, var(--rh-ink)); }
.dc-role-box.no { background: var(--rh-surface-2); }
.dc-role-box.no h4 i { color: var(--rh-muted); }
.dc-role-box ul { margin: 0; padding-left: 1.15rem; }
.dc-role-box li { margin-bottom: .3rem; line-height: 1.55; }
.dc-role-box .dc-steps { margin: 0; }
.dc-role-go { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
/* headings receive focus after a jump (for screen readers); no ring needed on non-interactive text */
.dc-main h1[tabindex="-1"]:focus, .dc-main h2[tabindex="-1"]:focus { outline: none !important; }

/* ---------- "as seen by" labels on screenshots that follow the reader's role or plan */
.dc-seen { display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; padding: .1rem .55rem; border-radius: 999px; background: var(--rh-brand-soft); color: var(--rh-brand); font-size: .78rem; font-weight: 500; }
.dc-seen-intro { margin: .8rem 0 .2rem; color: var(--rh-muted); }
.dc-you { margin-left: .25rem; padding: 0 .4rem; border-radius: 999px; background: #2d4bd8; color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }