/* ─────────────────────────────────────────────────────────────────────────────
   THE INSPECTOR
   One panel, slid in from the right, describing whatever record was clicked.

   Part 14 of 15. THE ORDER OF THESE FILES IS LOAD-BEARING — the list lives in
   lib/app_css.php and this sits before responsive.css, which overrides.

   IT IS A SHEET ON A PHONE AND A RAIL ON A DESK. Below 720px it takes the full
   width and comes up from the bottom, because a 380px rail on a 375px screen is
   a modal pretending to be a rail. Above it, it is a fixed-width column on the
   right and the page stays visible beside it — the point of a side panel is that
   you can still see the list you opened it from.

   EVERY CLASS IS insp-*.
   ───────────────────────────────────────────────────────────────────────────── */

/* ABOVE THE FLOATING TOP BAR, WHICH IS 1000. At 900 the bar stacked over the panel and
   ate its title — the record's own name, which is the first thing the panel is for. The
   app's ladder is 999 (the language menu) · 1000 (.floating-topbar) · 4000 (the quick-add
   toast) · 9999 (tooltips); a drawer belongs above the chrome it covers and below the
   transient things that must be able to appear over it. */
.insp { position: fixed; inset: 0; z-index: 1200; }
.insp[hidden] { display: none; }

.insp-scrim {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0; transition: opacity .22s ease;
}
.insp--in .insp-scrim { opacity: 1; }

.insp-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border-left: 1px solid var(--divider);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}
.insp--in .insp-panel { transform: translateX(0); }

/* ── the head ─────────────────────────────────────────────────────────────── */
.insp-head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 20px 18px 14px; border-bottom: 1px solid var(--divider);
}
.insp-head-tx { flex: 1 1 auto; min-width: 0; }
.insp-kind {
    display: block; font-size: 10px; letter-spacing: var(--tracking-caps);
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
.insp-title { font-size: 17px; font-weight: var(--fw-semibold); color: var(--text-main); margin: 0; line-height: 1.25; }
.insp-sub { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.insp-x {
    flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
    border: 1px solid var(--divider); border-radius: 999px;
    background: transparent; color: var(--text-muted); cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.insp-x:hover { border-color: var(--divider-strong); color: var(--text-main); }
.insp-x .material-icons { font-size: 18px; }

.insp-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 18px 32px; }

/* ── sections ─────────────────────────────────────────────────────────────── */
.insp-sec { padding: 14px 0; border-bottom: 1px solid var(--divider); }
.insp-sec:last-child { border-bottom: 0; }
.insp-h {
    font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 10px; font-weight: var(--fw-semibold);
}

.insp-row { display: flex; gap: 14px; padding: 5px 0; align-items: baseline; }
.insp-k { flex: 0 0 40%; font-size: 11.5px; color: var(--text-muted); }
.insp-v { flex: 1 1 auto; font-size: 12.5px; color: var(--text-main); word-break: break-word; }

.insp-none { font-size: 11.5px; color: var(--text-muted); margin: 0; line-height: var(--leading-relaxed); }

/* ── the balanced batch ───────────────────────────────────────────────────── */
.insp-leg {
    display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
    align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--divider);
}
.insp-leg:last-child { border-bottom: 0; }
.insp-leg-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.insp-leg-tx b { font-size: 12px; font-weight: var(--fw-regular); color: var(--text-main); }
.insp-leg-tx span { font-size: 10px; color: var(--text-muted); }
.insp-leg-n { font-size: 11.5px; color: var(--text-main); min-width: 78px; text-align: right; }
.insp-leg--head { font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.insp-leg--head .insp-leg-n { color: var(--text-muted); font-size: 10px; }
.insp-leg--sum { border-top: 1.5px solid var(--divider-strong); border-bottom: 0; padding-top: 9px; }
.insp-leg--sum .insp-leg-tx { font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.insp-leg--bad, .insp-leg--bad .insp-leg-n { color: var(--danger-red); }

/* ── links out ────────────────────────────────────────────────────────────── */
.insp-link {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: 10px; padding: 9px 10px; margin-bottom: 4px;
    border: 1px solid var(--divider); border-radius: var(--radius-sm);
    background: transparent; font: inherit; font-size: 12px; color: var(--text-main);
    cursor: pointer; text-align: left;
    transition: border-color .18s ease;
}
.insp-link:hover { border-color: var(--divider-strong); }
.insp-link .material-icons { font-size: 16px; color: var(--text-muted); }

/* ── history ──────────────────────────────────────────────────────────────── */
.insp-audits { margin-top: 8px; }
.insp-audit { padding: 8px 0; border-bottom: 1px solid var(--divider); }
.insp-audit:last-child { border-bottom: 0; }
.insp-audit-a { display: block; font-size: 12px; color: var(--text-main); }
.insp-audit-m { display: block; font-size: 10px; letter-spacing: var(--tracking-caps); color: var(--text-muted); margin-top: 2px; }
.insp-audit-d { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* WHAT IS NOT RECORDED gets its own block and is not styled as a warning. These are
   facts about the schema, not faults in the record in front of the reader — a red box
   would say "something is wrong with this entry", and nothing is. */
.insp-sec--gap { background: var(--active-theme-bg); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 14px; border-bottom: 0; }
.insp-gaps { margin: 0; padding-left: 16px; }
.insp-gaps li { font-size: 11px; color: var(--text-muted); line-height: var(--leading-relaxed); margin-bottom: 5px; }
.insp-gaps li:last-child { margin-bottom: 0; }

/* anything that opts in is reachable and says so on hover */
[data-entry] { cursor: pointer; }

/* ── the phone: a sheet, not a rail ───────────────────────────────────────── */
@media (max-width: 719px) {
    .insp-panel {
        top: auto; left: 0; right: 0; width: 100%;
        max-height: 88vh; border-left: 0;
        border-top: 1px solid var(--divider);
        border-radius: var(--radius-board) var(--radius-board) 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
        transform: translateY(100%);
    }
    .insp--in .insp-panel { transform: translateY(0); }
    .insp-body { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
}