/* Incident detail drawer — right-hand slide-over.
   Tokens only: no literal colour, radius, duration or ease lives here. */

/* ---------- the list that opens it ---------- */

.inc-list { display: flex; flex-direction: column; gap: var(--sp-1); list-style: none; }
.inc-list__row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
}
.inc-list__row + .inc-list__row { border-top: 1px solid var(--line); }
.inc-list__row:hover { background: var(--surface-hover); }
.inc-list__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-list__svc {
  color: var(--ink-faint);
  font-family: var(--font-mono); font-size: var(--text-xs);
  white-space: nowrap;
}
.inc-list__row .btn { margin-left: auto; }

/* ---------- scrim ---------- */

.drawer-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: var(--scrim);
  opacity: 0;                 /* GSAP owns opacity; presence is the hidden attr */
}
.drawer-scrim[hidden] { display: none; }

/* ---------- panel ---------- */

.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 210;
  display: flex; flex-direction: column;
  width: min(460px, 100%);
  border-left: 1px solid var(--line-strong);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-3);
  /* No CSS transform here on purpose: GSAP sets the start state with
     xPercent, and a transform underneath would be read as a pixel offset the
     panel never returns from. */
  -webkit-user-drag: none;
  user-select: none;
}
.drawer[hidden] { display: none; }
.drawer * { -webkit-user-drag: none; }
.drawer:focus { outline: none; }

/* Drag-to-dismiss edge. A real grab target, not a hairline. */
.drawer__grip {
  position: absolute; inset: 0 auto 0 0; z-index: 1;
  display: grid; place-items: center;
  width: var(--sp-5);
  cursor: grab;
  touch-action: pan-y;        /* vertical scroll still belongs to the page */
}
.drawer__grip:active { cursor: grabbing; }
.drawer__grip-bar {
  width: 3px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: background-color var(--dur-fast) ease;
}
.drawer__grip:hover .drawer__grip-bar { background: var(--accent); }

/* ---------- head ---------- */

.drawer__head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.drawer__headings { min-width: 0; }
.drawer__eyebrow { display: flex; align-items: center; gap: var(--sp-2); }
.drawer__id { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-xs); }
.drawer__title {
  margin-top: var(--sp-2);
  font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
}
.drawer__meta { margin-top: var(--sp-1); color: var(--ink-muted); font-size: var(--text-sm); }

/* ---------- body ---------- */

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;           /* vertical-only panel: safe to scroll on its own */
  padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-6);
  overscroll-behavior: contain;
}

.drawer__facts { display: flex; flex-direction: column; gap: var(--sp-3); }
.drawer__fact {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-3);
  align-items: center;
}
.drawer__fact dt {
  color: var(--ink-faint);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.drawer__fact dd { font-size: var(--text-sm); }
.drawer__assignee { display: flex; align-items: center; gap: var(--sp-2); }
.drawer__avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: var(--radius-pill);
  background: var(--accent-wash); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
}

.drawer__section {
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--ink-faint);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.drawer-timeline { list-style: none; position: relative; padding-left: var(--sp-5); }
.drawer-timeline::before {
  content: ''; position: absolute; left: 4px; top: var(--sp-1); bottom: var(--sp-1);
  width: 1px; background: var(--line);
}
.drawer-timeline__item {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  font-size: var(--text-sm);
}
.drawer-timeline__item::before {
  content: ''; position: absolute; left: calc(var(--sp-5) * -1 + 1px); top: 6px;
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--ink-faint);
}
.drawer-timeline__item[data-tone="danger"]::before { background: var(--danger); }
.drawer-timeline__item[data-tone="warn"]::before { background: var(--warn); }
.drawer-timeline__item[data-tone="ok"]::before { background: var(--ok); }
.drawer-timeline__item[data-tone="info"]::before { background: var(--info); }
.drawer-timeline__time { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-xs); }
.drawer-timeline__text { color: var(--ink-muted); }

/* ---------- foot ---------- */

.drawer__foot {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
}

@media (max-width: 520px) {
  .drawer { width: 100%; }
  .drawer__foot { flex-direction: column-reverse; }
  .drawer__foot .btn { width: 100%; }
  .inc-list__row { flex-wrap: wrap; }
  .inc-list__name { flex-basis: 100%; order: 3; white-space: normal; }
}