/* ---------- Patient Record Log ------------------------------------------
 * One chronological log of everything recorded on a patient (#record-log).
 * Design: docs/superpowers/specs/2026-08-21-patient-record-log-design.md §8.
 *
 * Every colour is a theme token, so light and dark both work without a
 * second sheet. The rail glyph — not its colour — is what tells a clinician
 * whether a row is a clinician action, a chart read, a machine write or a
 * PreSense draft; the colour only reinforces the shape.
 * ----------------------------------------------------------------------- */
.rlog-page{padding-bottom:24px}

/* Distance from the top of the viewport to the first pixel below the sticky
   patient band, which is the topbar plus the .wf-bar. Named once so the day
   separator and any future sticky row cannot drift apart. */
.rlog-page{--rlog-sticky-top:calc(var(--topbar-height,55px) + 54px)}

.rlog-subtitle{
  margin:-8px 0 16px;color:var(--muted);
  font-size:var(--text-base);line-height:var(--leading-normal);
}

/* ---------- filter bar ---------- */
.rlog-filterbar{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-3);
  box-shadow:var(--shadow-1);padding:12px 14px;margin-bottom:14px;
}
.rlog-chips{display:flex;flex-wrap:wrap;gap:6px}
.rlog-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;min-height:30px;
  background:var(--card-2);border:1px solid var(--border);
  color:var(--ink-2);font-size:var(--text-xs);font-weight:650;
  transition:background .15s,border-color .15s,color .15s;
}
.rlog-chip:hover{background:var(--card-3);border-color:var(--border-2)}
.rlog-chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-ring)}
.rlog-chip.on{
  background:var(--brand-soft);border-color:var(--brand-ring);
  color:var(--brand-2);font-weight:750;
}
.rlog-chip-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;padding:0 5px;border-radius:999px;
  background:var(--bg-soft);border:1px solid var(--hairline);
  color:var(--muted);font-size:var(--text-micro);font-weight:800;
  font-variant-numeric:tabular-nums;
}
.rlog-chip.on .rlog-chip-count{background:var(--card);border-color:var(--brand-ring);color:var(--brand-2)}

.rlog-controls{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);
}
.rlog-control{display:flex;flex-direction:column;gap:4px;min-width:150px}
.rlog-control.grow{flex:1;min-width:200px}
.rlog-control>span{
  color:var(--muted);font-size:var(--text-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.055em;
}
.rlog-control input,.rlog-control select{
  width:100%;min-height:36px;padding:7px 10px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--surface-input);color:var(--ink);
  font:inherit;font-size:var(--text-sm);font-weight:500;outline:none;
}
.rlog-control input:focus,.rlog-control select:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);
}
.rlog-clear{align-self:flex-end;margin-bottom:1px}

/* ---------- notices ---------- */
.rlog-notice{
  display:flex;align-items:flex-start;gap:9px;
  margin-bottom:12px;padding:10px 13px;
  border:1px solid var(--border);border-radius:9px;background:var(--card-2);
  color:var(--ink-2);font-size:var(--text-sm);line-height:var(--leading-normal);
}
.rlog-notice svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--muted)}
.rlog-notice b{color:var(--ink);font-weight:750}
/* Never let a capped page read as a complete one. */
.rlog-notice.truncated{border-color:var(--warn-border);background:var(--warn-soft)}
.rlog-notice.truncated svg{color:var(--warn)}

/* ---------- day separators ---------- */
.rlog-day{
  position:sticky;top:var(--rlog-sticky-top);z-index:20;
  margin:20px 0 10px;padding:7px 2px;
  background:var(--bg);border-bottom:1px solid var(--border);
  color:var(--muted);font-size:var(--text-xs);font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;
}
.rlog-timeline>.rlog-day:first-child{margin-top:2px}

/* ---------- timeline rows ---------- */
.rlog-row{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;
  align-items:flex-start;margin-bottom:10px;
}
.rlog-rail{position:relative;align-self:stretch;display:flex;justify-content:center}
.rlog-rail::before{
  content:"";position:absolute;left:50%;top:0;bottom:-10px;
  width:2px;margin-left:-1px;background:var(--hairline);
}
.rlog-row:last-child .rlog-rail::before{bottom:auto;height:11px}
/* Shape first, colour second — the glyph is the accessible signal. */
.rlog-dot{
  position:relative;z-index:1;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--muted);
  font-size:13px;line-height:1;
}
.rlog-dot.kind-clinician{color:var(--brand)}
.rlog-dot.kind-access{color:var(--faint)}
.rlog-dot.kind-system{color:var(--indigo)}
.rlog-dot.kind-bridge{color:var(--teal)}
.rlog-dot.kind-ai{color:var(--purple)}

.rlog-card{
  min-width:0;padding:10px 13px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-2);
}
.rlog-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rlog-time{
  color:var(--muted);font-size:var(--text-sm);font-weight:700;
  font-variant-numeric:tabular-nums;flex:none;
}
.rlog-summary{
  color:var(--ink);font-size:var(--text-base);font-weight:650;
  line-height:var(--leading-snug);min-width:0;overflow-wrap:anywhere;
}
.rlog-cat{
  padding:2px 7px;border-radius:5px;
  background:var(--bg-soft);border:1px solid var(--hairline);
  color:var(--muted);font-size:var(--text-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.045em;white-space:nowrap;
}
.rlog-flag{font-size:var(--text-micro);padding:2px 8px}
.rlog-flag.purple{background:var(--purple-soft);color:var(--purple);border-color:var(--purple-border)}

.rlog-row-actions{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
.rlog-ref,.rlog-expand{
  display:inline-flex;align-items:center;gap:4px;
  min-height:28px;padding:0 8px;border-radius:7px;
  background:transparent;border:1px solid transparent;
  color:var(--muted);font-size:var(--text-xs);font-weight:650;
  transition:background .15s,color .15s,border-color .15s;
}
.rlog-ref:hover,.rlog-expand:hover{background:var(--card-2);border-color:var(--border);color:var(--brand-2)}
.rlog-ref:focus-visible,.rlog-expand:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-ring)}
.rlog-ref svg{width:12px;height:12px}
.rlog-expand{padding:0 6px;min-width:28px;justify-content:center}
.rlog-expand svg{width:15px;height:15px;transition:transform .15s}
.rlog-expand.open{background:var(--brand-soft);border-color:var(--brand-ring);color:var(--brand-2)}
.rlog-expand.open svg{transform:rotate(180deg)}

.rlog-meta{margin-top:3px;color:var(--muted);font-size:var(--text-xs);line-height:var(--leading-normal)}

/* ---------- expanded detail ---------- */
.rlog-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--hairline)}
.rlog-detail[hidden]{display:none}
.rlog-detail-body{color:var(--ink-2);font-size:var(--text-sm);line-height:var(--leading-normal)}
.rlog-detail-plain{white-space:pre-wrap;overflow-wrap:anywhere}
.rlog-detail-empty{color:var(--muted);font-size:var(--text-sm)}
.rlog-detail-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.rlog-detail-table th{
  width:190px;padding:3px 12px 3px 0;vertical-align:top;text-align:left;
  color:var(--muted);font-weight:600;
}
.rlog-detail-table td{padding:3px 0;color:var(--ink-2);overflow-wrap:anywhere;white-space:pre-wrap}
.rlog-detail-foot{
  margin-top:9px;padding-top:8px;border-top:1px dashed var(--hairline);
  color:var(--faint);font-size:var(--text-micro);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;
}

/* ---------- paging foot ---------- */
.rlog-foot{display:flex;justify-content:center;align-items:center;gap:10px;padding:16px 0 4px}
.rlog-foot-note{color:var(--faint);font-size:var(--text-xs)}
.rlog-empty-action{margin-top:12px}

/* ---------- export ---------- */
.rlog-export{position:relative}
.rlog-export-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  min-width:262px;padding:6px;
  background:var(--card);border:1px solid var(--border-2);border-radius:var(--radius-2);
  box-shadow:var(--shadow-3);
}
.rlog-export-menu[hidden]{display:none}
.rlog-export-item{
  display:flex;align-items:flex-start;gap:10px;width:100%;
  padding:9px 10px;border-radius:8px;background:transparent;border:0;
  color:var(--ink-2);font-size:var(--text-sm);text-align:left;
}
.rlog-export-item:hover{background:var(--surface-hover)}
.rlog-export-item:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-ring)}
.rlog-export-item svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--brand)}
.rlog-export-item b{display:block;color:var(--ink);font-weight:700}
.rlog-export-item small{display:block;margin-top:2px;color:var(--muted);font-size:var(--text-xs)}

/* ---------- header launcher ---------- */
/* Rides the identity band beside the Record Info and Chat launchers. Indigo
   keeps the three distinguishable without spending the alarm channel. */
.patient-tile-record-log-launcher{
  min-height:30px;padding:0 11px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--indigo);color:#fff;font-size:11px;font-weight:800;
  border:1px solid color-mix(in srgb,var(--indigo) 72%,#000);
  box-shadow:none;
}
.patient-tile-record-log-launcher:hover{filter:brightness(1.05);transform:translateY(-1px)}
.patient-tile-record-log-launcher:focus-visible{
  outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--indigo) 24%,transparent);
}
.patient-tile-record-log-launcher svg{width:13px;height:13px}

/* ---------- bedside / mobile ---------- */
@media (max-width:900px){
  .rlog-detail-table th{width:140px}
}
@media (max-width:720px){
  .rlog-page{--rlog-sticky-top:calc(var(--topbar-height,55px) + 48px)}
  .rlog-subtitle{margin-top:0}
  .rlog-filterbar{padding:11px 12px}
  .rlog-chips{gap:5px}
  .rlog-chip{min-height:34px;font-size:var(--text-xs)}
  .rlog-control,.rlog-control.grow{min-width:0;flex:1 1 100%}
  .rlog-clear{width:100%;justify-content:center;min-height:40px}
  .rlog-row{grid-template-columns:20px minmax(0,1fr);gap:9px}
  .rlog-card{padding:9px 11px}
  .rlog-row-actions{margin-left:0;width:100%;justify-content:flex-end}
  .rlog-ref,.rlog-expand{min-height:36px}
  .patient-tile-record-log-launcher{min-height:44px}
  .rlog-export-menu{
    position:fixed;left:12px;right:12px;top:auto;bottom:12px;min-width:0;
  }
  .rlog-detail-table th,.rlog-detail-table td{display:block;width:auto;padding:2px 0}
  .rlog-detail-table th{padding-top:7px}
}

/* The print sheet already hides .topbar/.wf-bar/.btn; the filter controls are
   navigation too, so a printed page is the log itself and nothing else. */
@media print{
  .rlog-filterbar,.rlog-foot,.rlog-export,.rlog-row-actions{display:none!important}
  .rlog-day{position:static;background:transparent}
  .rlog-card{border-color:var(--hairline)}
}