/* databases.php (2026-09-27). The page's pictures are built in HTML, one shape per section: a
   schema diagram (engines as tables, numbered hairline relations), a decision table that
   restacks into labelled blocks on a phone, a query plan before and after one index, a
   point-in-time restore on a timeline, and a work list with the settings each step touches.
   Copper is the one accent; patina marks what is fixed or restorable; warn ink only on the
   slow plan. Motion is transform and opacity, 160-240ms, once on reveal. */

.db-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.db-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.db-actions-c { justify-content: center; }
.db-link { display: inline-flex; align-items: center; gap: 6px; color: var(--copper-ink); font-weight: 600; text-decoration: none; }
.db-link span { display: inline-block; transition: transform var(--dur-1) var(--ease-out); }
html[dir="rtl"] .db-link span { transform: scaleX(-1); }

/* ---- 1. the schema map --------------------------------------------------------------------- */
.db-map { display: grid; gap: 0;
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr);
    grid-template-rows: auto 48px auto;
    grid-template-areas:
        "a w1 b w3 c w4 d"
        ". .  w2 . . .  w6"
        "n .  e w5 f .  g";
    background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: 18px 18px; padding: 18px; margin: 0 -18px; border-radius: 20px; }
.db-map > div { display: flex; }
.db-t { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--line-strong, var(--line)); border-radius: 12px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-1); }
.db-t header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 12px 14px; min-height: 52px; background: var(--tint-05); border-bottom: 1px solid var(--line-strong, var(--line)); }
.db-t header b { font-family: var(--font-display, inherit); font-size: 17px; line-height: 1.25; color: var(--text-strong); }
.db-t header span { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.db-t dl { margin: 0; flex: 1; }
.db-t dl > div { padding: 9px 14px; border-top: 1px solid var(--line); }
.db-t dl > div:first-child { border-top: 0; }
.db-t dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--copper-ink); }
.db-t dd { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.db-t dd code { font-family: var(--font-mono); font-size: 12.5px; background: none; padding: 0; color: var(--text-strong); word-break: break-word; }
.db-t .db-link { padding: 10px 14px 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.db-read { align-self: start; padding: 14px 16px; border: 1px dashed var(--line-strong, var(--line)); border-radius: 12px; background: var(--bg); }
.db-read b { display: block; font-size: 14.5px; color: var(--text-strong); }
.db-read p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

/* a relation: a hairline between two tables with its number on it */
.db-wire { position: relative; display: block; min-width: 0; }
.db-wire::before { content: ''; position: absolute; background: var(--text-muted); }
.db-wire-h::before { inset-inline: 0; top: 34px; height: 1px; }
.db-wire-v::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.db-wire i { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong, var(--line)); border-radius: 50%; background: var(--bg); font-family: var(--font-mono); font-size: 11.5px; font-style: normal; color: var(--copper-ink); }
.db-wire-h i { top: 22px; left: 50%; margin-left: -12px; }
.db-wire-v i { top: 50%; left: 50%; margin: -12px 0 0 -12px; }
.db-wire { transition: opacity 220ms var(--ease-out); }
.db-wire::before { transition: transform 240ms var(--ease-out); }
html.anim-ready .db-map:not(.revealed) .db-wire-h::before { transform: scaleX(0); }
html.anim-ready .db-map:not(.revealed) .db-wire-v::before { transform: scaleY(0); }
html.anim-ready .db-map:not(.revealed) .db-wire i { opacity: 0; }
.db-wire i { transition: opacity 200ms var(--ease-out) 180ms; }

.db-rels { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; }
.db-rels li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.db-rels i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong, var(--line)); border-radius: 50%; font-family: var(--font-mono); font-size: 11.5px; font-style: normal; color: var(--copper-ink); align-self: start; }
.db-rels span { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* ---- 2. the decision table ------------------------------------------------------------------ */
.db-pick { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.db-pick table { display: table; width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; }
.db-pick thead { display: table-header-group; }
.db-pick tbody { display: table-row-group; }
.db-pick tr { display: table-row; }
.db-pick th, .db-pick td { display: table-cell; padding: 15px 18px; text-align: start; vertical-align: top; border-top: 1px solid var(--line); line-height: 1.55; background: none; }
.db-pick thead th { border-top: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--tint-03); }
html[dir="rtl"] .db-pick thead th { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 13px; }
.db-pick tbody th { width: 28%; font-weight: 600; color: var(--text-strong); }
.db-pick td { color: var(--text-2); }
.db-pick-main span { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--copper-ink); }
.db-pick td span[translate] { unicode-bidi: isolate; }
.db-pick-why { width: 38%; }
.db-none { color: var(--text-muted); }
.db-pick tbody tr { transition: background-color var(--dur-1) var(--ease-out); }

/* ---- 3. the query plan ---------------------------------------------------------------------- */
.db-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "q q" "f f" "b a"; gap: 20px; }
.db-q { grid-area: q; margin: 0; }
.db-fix { grid-area: f; }
.db-ex.is-before { grid-area: b; }
.db-ex.is-after { grid-area: a; }
.db-q pre, .db-fix pre { margin: 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--well); font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--text); text-align: left; }
.db-q code, .db-fix code { background: none; padding: 0; font: inherit; color: inherit; white-space: pre; }
.db-q b, .db-fix b { color: var(--copper-ink); font-weight: 600; }
.db-q figcaption { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
.db-fix pre { border-style: dashed; border-color: var(--patina-ink); }
.db-fix-l { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--patina-ink); }
.db-fix b { color: var(--patina-ink); }
.db-ex { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 18px 20px; }
.db-ex h3 { margin: 0 0 12px; font-size: 18px; color: var(--text-strong); }
.db-ex.is-before h3::before, .db-ex.is-after h3::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 10px; vertical-align: middle; background: var(--warn-ink); }
.db-ex.is-after h3::before { background: var(--patina-ink); }
.db-ex dl { margin: 0; font-family: var(--font-mono); font-size: 13.5px; }
.db-ex dl > div { display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); text-align: left; }
.db-ex dt { color: var(--text-muted); }
.db-ex dd { margin: 0; color: var(--text-strong); word-break: break-word; }
.db-ex dd.bad { color: var(--warn-ink); }
.db-ex dd.ok { color: var(--patina-ink); }
.db-ex p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ---- 4. the timeline --------------------------------------------------------------------------- */
.db-tl { margin: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 20px clamp(18px, 3vw, 28px) 16px; }
.db-tl-track { position: relative; height: 150px; }
.db-tl-log { position: absolute; inset-inline: 0; top: 74px; height: 0; border-top: 2px dashed var(--patina-ink); }
.db-tl-replay { position: absolute; inset-inline-start: 4%; width: 62%; top: 71px; height: 8px; border-radius: 4px; background: var(--fill-copper, #E85622); transform-origin: left center; transition: transform 600ms var(--ease-out) 150ms; }
html[dir="rtl"] .db-tl-replay { transform-origin: right center; }
html.anim-ready .db-tl:not(.revealed) .db-tl-replay { transform: scaleX(0); }
.db-tl-pt { position: absolute; inset-inline-start: calc(var(--x) * 1%); top: 0; bottom: 0; width: 0; }
.db-tl-pt i { position: absolute; top: 68px; inset-inline-start: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--text-strong); box-sizing: border-box; }
.db-tl-pt b, .db-tl-pt code { position: absolute; inset-inline-start: -1px; white-space: nowrap; padding-inline-start: 10px; border-inline-start: 1px solid var(--line-strong, var(--line)); }
.db-tl-pt b { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.db-tl-pt code { font-family: var(--font-mono); font-size: 12.5px; background: none; color: var(--text-muted); unicode-bidi: isolate; }
.db-tl-full b, .db-tl-bad b { top: 0; }
.db-tl-full code, .db-tl-bad code { top: 24px; }
.db-tl-to b { bottom: 0; }
.db-tl-to code { bottom: 24px; }
.db-tl-to i { border-color: var(--copper-ink); }
.db-tl-bad i { border-color: var(--danger-ink); background: var(--danger-ink); }
.db-tl-bad b { color: var(--danger-ink); }
.db-tl-full i { border-color: var(--patina-ink); background: var(--patina-ink); }
.db-tl-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.db-tl-key span { display: inline-flex; align-items: center; gap: 8px; }
.db-tl-key i { width: 22px; height: 0; flex: none; }
.db-tl-key .k-log { border-top: 2px dashed var(--patina-ink); }
.db-tl-key .k-replay { height: 8px; border-radius: 4px; background: var(--fill-copper, #E85622); }
.db-tl figcaption { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }

.db-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; }
.db-steps li { counter-increment: s; padding: 16px 0 18px; border-top: 2px solid var(--text-strong); }
.db-steps li::before { content: counter(s, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--copper-ink); margin-bottom: 8px; }
.db-steps b { display: block; font-size: 17px; line-height: 1.35; color: var(--text-strong); }
.db-steps p { margin: 6px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-2); }

.db-pitr { margin-top: clamp(28px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px clamp(28px, 5vw, 64px); align-items: start; }
.db-pitr > p:first-child { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-strong); }
.db-pitr ul { list-style: none; margin: 0; padding: 0; grid-row: span 2; }
.db-pitr li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.db-pitr li:last-child { border-bottom: 1px solid var(--line); }
.db-pitr li span { font-family: var(--font-mono); font-size: 13.5px; color: var(--text-strong); }
.db-pitr li small { font-size: 14px; color: var(--text-2); }
.db-pitr li.ok small { color: var(--patina-ink); font-weight: 600; }
.db-test { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-2); }

/* ---- 5. the work ---------------------------------------------------------------------------------- */
.db-work { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 64px); margin: 0; padding: 0; }
.db-work li { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.db-work b { font-size: 18px; color: var(--text-strong); }
.db-work p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.db-work code { align-self: flex-start; margin-top: 4px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; padding: 4px 9px; border-radius: 6px; background: var(--well); color: var(--text-strong); word-break: break-word; }

/* ---- pointer, motion ------------------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
    .db-link:hover span { transform: translateX(3px); }
    html[dir="rtl"] .db-link:hover span { transform: scaleX(-1) translateX(3px); }
    .db-pick tbody tr:hover { background-color: var(--tint-03); }
    .db-t { transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
    .db-map.revealed .db-t:hover { border-color: var(--copper-ink); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    .db-wire::before, .db-wire i, .db-tl-replay, .db-tl-full::after, .db-t, .db-link span { transition: border-color var(--dur-1) linear, background-color var(--dur-1) linear; transition-delay: 0ms; }
    html.anim-ready .db-map:not(.revealed) .db-wire-h::before,
    html.anim-ready .db-map:not(.revealed) .db-wire-v::before,
    html.anim-ready .db-tl:not(.revealed) .db-tl-replay,
    html.anim-ready .db-tl:not(.revealed) .db-tl-full::after { transform: none; }
    html.anim-ready .db-map:not(.revealed) .db-wire i { opacity: 1; }
    .db-map.revealed .db-t:hover { transform: none; }
}

/* ---- narrow ----------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    /* the drawn relations need four columns; below that the tables sit in a grid and the relations
       are read from the numbered list under it */
    .db-map { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-template-areas: "a b" "c d" "e f" "g ."; gap: 16px; background: none; padding: 0; margin: 0; }
    .db-wire, .db-read { display: none; }
    .db-rels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .db-steps { grid-template-columns: minmax(0, 1fr); }
    .db-pitr { grid-template-columns: minmax(0, 1fr); }
    .db-pitr ul { grid-row: auto; }
    .db-work { grid-template-columns: minmax(0, 1fr); }
    .db-plan { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "b" "f" "a"; }
}
@media (max-width: 760px) {
    /* the decision table restacks: each job becomes a block, every column a labelled line */
    .db-pick { border-radius: 14px; }
    .db-pick table, .db-pick tbody, .db-pick tr, .db-pick th, .db-pick td { display: block; width: auto; }
    .db-pick thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .db-pick tbody tr { padding: 14px 16px 12px; border-top: 1px solid var(--line); }
    .db-pick tbody tr:first-child { border-top: 0; }
    .db-pick tbody th { width: auto; padding: 0 0 8px; border: 0; font-size: 16px; }
    .db-pick-why { width: auto; }
    .db-pick td { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
    .db-pick td::before { content: attr(data-label); font-size: 12.5px; line-height: 1.5; color: var(--text-muted); padding-top: 2px; }
    .db-rels { grid-template-columns: minmax(0, 1fr); }

    /* the timeline turns upright: time runs down the page, labels beside each point */
    .db-tl-track { height: auto; display: flex; flex-direction: column; gap: 22px; padding-inline-start: 26px; padding-block: 4px; }
    .db-tl-log { inset-inline: auto; inset-inline-start: 6px; top: 0; bottom: 0; height: auto; width: 0; border-top: 0; border-inline-start: 2px dashed var(--patina-ink); }
    .db-tl-replay { display: none; }
    .db-tl-pt { position: relative; inset: auto; width: auto; display: flex; flex-direction: column; gap: 2px; }
    .db-tl-pt i { top: 4px; inset-inline-start: -27px; z-index: 1; }
    .db-tl-pt b, .db-tl-pt code { position: static; white-space: normal; padding: 0; border: 0; }
    /* the replayed stretch runs from the backup's dot to the restore point's, one item and one gap */
    .db-tl-full::after { content: ''; position: absolute; inset-inline-start: -23px; top: 11px; width: 8px; height: calc(100% + 22px); border-radius: 4px; background: var(--fill-copper, #E85622); transform-origin: center top; transition: transform 400ms var(--ease-out) 150ms; }
    html.anim-ready .db-tl:not(.revealed) .db-tl-full::after { transform: scaleY(0); }
}
@media (max-width: 560px) {
    .db-map { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d" "e" "f" "g"; }
    .db-pick td { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Arabic in the mono stack takes Plex Mono's full-width spaces; Arabic labels take the body face. */
html[dir="rtl"] .db-t dt, html[dir="rtl"] .db-t header span { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 12.5px; }