/* ===== Namespaced base ===== */
.audit5, .audit5 * { box-sizing: border-box; }
.audit5 {
  font: 14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;

  /* Layout vars */
  --col-left: 200px;      /* left (date/time) column width */
  --col-mid:  40px;       /* middle (rail) column width */
  --rail-x: calc(var(--col-left) + var(--col-mid) / 2); /* absolute X of the rail */

  /* Light tokens */
  --bg:#ffffff; --ink:#111; --muted:#6b7280;
  --rail:#e2e5ee; --border:#e5e7eb;
  --card:#ffffff; --pill:#ffffff; --pill-border:#d7d9e0;
  --dot:#9aa1ad;
  --accent-insert:#3b82f6; --accent-update:#f59e0b;
  --accent-approve:#22c55e; --accent-reject:#ef4444;
}
.audit5.audit5--dark {
  --bg:#1f2024; --ink:#e9ebef; --muted:#a2a8b3;
  --rail:#343844; --border:#2a2f38;
  --card:#24272f; --pill:#2a2e36; --pill-border:#3a3f4a;
  --dot:#c5c7ce;
}

/* ===== Header ===== */
.audit5__header{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 .75rem;color:var(--ink)}
.audit5__title{margin:0;font-size:1.1rem;font-weight:600}
.audit5__meta{color:var(--muted)}
.audit5__empty{color:var(--muted)}

/* ===== List with a single continuous rail ===== */
.audit5__list{list-style:none;margin:0;padding:0;position:relative}
.audit5__list::before{
  content:""; position:absolute; top:0; bottom:0;
  left: var(--rail-x); width:2px; background:var(--rail); z-index:0;
}

/* ===== Grid rows ===== */
.audit5__item, .audit5__day, .audit5__flag{
  display:grid;
  grid-template-columns: var(--col-left) var(--col-mid) minmax(0,1fr);
  align-items:start; gap:.25rem; position:relative; padding:.25rem 0;
}

/* Left column (date/time) */
.audit5__left{grid-column:1/2; align-self:center; padding:.4rem .4rem .2rem 0; color:var(--muted); z-index:1}
.audit5__when{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Middle column (dot centered on the rail) */
.audit5__mid{grid-column:2/3; position:relative; z-index:1}
.audit5__dot{
  position:absolute; left:calc(50% - 3px); top:.9rem; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  background:var(--dot); box-shadow:0 0 0 4px var(--bg); z-index:2; /* above rail */
}
.audit5__dot.insert, .audit5__dot.created{ background:var(--accent-insert) }
.audit5__dot.update, .audit5__dot.updated{ background:var(--accent-update) }
.audit5__dot.approved{ background:var(--accent-approve) }
.audit5__dot.reject, .audit5__dot.rejected, .audit5__dot.delete, .audit5__dot.deleted{ background:var(--accent-reject) }

/* Right column (card) */
.audit5__right{grid-column:3/4; z-index:1}
.audit5__card{
  background:var(--card); border:1px solid var(--border); border-radius:.75rem;
  padding:.75rem .85rem; color:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.audit5__line1{display:none;gap:.5rem;align-items:center;margin:0 0 .35rem;}
.audit5__badge{background:#eefaf2;border:1px solid var(--border);display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.8rem}
.audit5__badge.updated{background:#fff7e6}
.audit5__badge.deleted{background:#ffecec}
.audit5__who{color:var(--muted)}
.audit5__key{color:var(--muted);opacity:.85}
.audit5__note{white-space:pre-wrap;margin:.1rem 0 0}

/* ===== Day pill & Entity flag — FLOAT over the rail ===== */
/* Centered on the mid column; halo cuts the rail behind */
.audit5__daypill,
.audit5__flaglabel{
  grid-column: 2 / 3;              /* lock to mid column */
  justify-self: center;
  position: relative;
  z-index: 3;                      /* above dots and rail */
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .7rem;
  background: var(--pill);
  color: var(--ink);
  /* border: 1px solid var(--pill-border); */
  border-radius: .6rem;
  line-height: 1;
  font-size: .85rem;
  box-shadow:
    0 0 0 6px var(--bg),           /* HALO to cover the rail behind */
    0 1px 0 rgba(0,0,0,.04);
    margin: 10px;
    white-space: nowrap;
}


.audit5__daypill:first-child {margin-top:0}

/* Minor tweaks: spacing distinct from items */
.audit5__day{ /* padding-top:.6rem*/} 
.audit5__flag{padding-top:.2rem}
.audit5__flagentity{font-weight:600;text-transform:lowercase}
.audit5__flagsep{opacity:.5}
.audit5__flagid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.audit5__meta > summary { cursor: pointer; user-select: none; outline: none; }
.audit5__meta > summary::-webkit-details-marker { display: none; } /* cleaner toggle on WebKit */
.audit5__meta > summary::before { content: "▸ "; display: inline-block; transition: transform .15s ease; }
.audit5__meta[open] > summary::before { transform: rotate(90deg); }

.audit5__metapre {
  margin: .5rem 0 0;
  padding: .75rem .875rem;
  border-radius: .5rem;
  background: var(--audit5-meta-bg, #f6f7f9);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .85rem;
  line-height: 1.35;
  overflow: auto;
  max-height: 24rem;
  white-space: pre-wrap;      /* wrap long JSON strings gracefully */
  word-break: break-word;
}
.audit5--dark .audit5__metapre { --audit5-meta-bg: rgba(255,255,255,.06); }

/* ===== Responsive: keep rail centered by updating vars ===== */
@media (max-width: 820px){
  .audit5{ --col-left: 160px; --col-mid: 36px; }
}
@media (max-width: 600px){
  .audit5{ --col-left: 120px; --col-mid: 28px; }
}