/* How I run a program, PMO tool (look-trace.js): the tool window from build.css, as tall as its diagram. A stage 960px and
   wider sets filters and key, the diagram and the inspector side by side; a narrower one stacks them; under 560px the
   diagram shows ids only. Every status has a shape as well as a colour */
.sc.pt { grid-template-rows: none; aspect-ratio: auto; }

/* The bar: one line, the file name giving way first. Under 560px, two: the name and the pill, then search */
.pt-bar .sc-file { flex: 0 1 auto; min-inline-size: 0; }
.pt-find {
  flex: 0 1 220px;
  min-inline-size: 0;
  margin-inline-start: auto;
  padding-block: var(--space-1-5);
  padding-inline: var(--space-2-5);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-sm);
  background: var(--tool-bg);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}
.pt-find::placeholder { color: var(--tool-muted); }
.pt.ids .pt-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
.pt.ids .sc-lights { display: none; }
.pt.ids .pt-find { grid-column: 1 / -1; margin: 0; }

/* The main area: stacked by default, three columns on a wide stage. There the side and the inspector scroll, so the
   diagram alone sets the height */
.pt-main { display: grid; grid-template-areas: "filters" "view" "insp" "key"; grid-template-columns: minmax(0, 1fr); }
.pt-side { display: contents; }
.pt-filters { grid-area: filters; }
.pt-key { grid-area: key; }
.pt-view { grid-area: view; display: grid; }
.pt-insp { grid-area: insp; }
.pt.wide .pt-main { grid-template-areas: "side view insp"; grid-template-columns: 176px minmax(0, 1fr) 232px; }
.pt.wide .pt-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-inline-size: 0;
  overflow-y: auto;
  padding: var(--space-3);
  border-inline-end: 1px solid var(--tool-line);
  background: var(--tool-panel);
  contain: size;
}
.pt.wide .pt-insp { contain: size; }
.pt:not(.wide) .pt-insp { border-inline-start: 0; border-block-start: 1px solid var(--tool-line); }

/* Filters: a row of chips, or a list on the side */
.pt-filters { display: flex; flex-wrap: wrap; gap: var(--space-1-5); padding-block: var(--space-2-5); padding-inline: var(--space-3); border-block-end: 1px solid var(--tool-line); }
.pt:not(.wide) .pt-filters .sc-h { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.pt-filters button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-2-5);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-pill);
  background: var(--tool-raise);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  text-align: start;
  cursor: pointer;
}
.pt-filters b { font-family: var(--mono); font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--tool-muted); }
.pt-filters button:hover { border-color: var(--tool-muted); }
.pt-filters [aria-pressed="true"] { border-color: var(--tool-top); background: color-mix(in srgb, var(--tool-top) 14%, transparent); color: var(--tool-top); }
.pt-filters [aria-pressed="true"] b { color: inherit; }
.pt.wide .pt-filters { flex-direction: column; flex-wrap: nowrap; gap: var(--space-0-5); padding: 0; border: 0; }
.pt.wide .pt-filters button { padding-block: var(--space-1-5); padding-inline: var(--space-2); border-color: transparent; border-radius: var(--r-sm); background: none; }
.pt.wide .pt-filters button:hover { background: var(--tool-raise); }
.pt.wide .pt-filters [aria-pressed="true"] { border-color: color-mix(in srgb, var(--tool-top) 45%, transparent); background: color-mix(in srgb, var(--tool-top) 12%, transparent); }

/* The key: what each letter, glyph and bar means */
.pt-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3) var(--space-5); padding-block: var(--space-3); padding-inline: var(--space-3-5); border-block-start: 1px solid var(--tool-line); }
.pt.wide .pt-key { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: 0; border: 0; }
.pt-kg .sc-h { margin-block-end: var(--space-1-5); }
.pt-kg ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; color: var(--tool-muted); font-size: var(--text-2xs); line-height: var(--leading-tight); }
.pt-kg li { display: flex; align-items: center; gap: var(--space-1-5); }
.pt-kg .pt-stage { flex: none; inline-size: 28px; }
.pt-sw {
  padding-inline: var(--space-1);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-xs);
  background: var(--tool-raise);
  color: var(--tool-text);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}

/* Glyphs: ICD status by shape (a check, half full, dashed) and Jira type by Jira's own shapes and colours */
.pt-g { flex: none; inline-size: 12px; block-size: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--tool-muted); }
.pt-g .f { fill: currentColor; stroke: none; }
.pt-g .k { stroke: var(--tool-raise); stroke-width: 2; }
.pt-g[data-g="signed"], .pt-g[data-g="story"] { color: var(--tool-ok); }
.pt-g[data-g="review"] { color: var(--tool-bot); }
.pt-g[data-g="task"] { color: var(--code-fn); }
.pt-g[data-g="bug"] { color: var(--tool-ko); }

/* Build stage: a bar a step, filled up to where the object is; green once it has passed SIT */
.pt-stage { display: flex; gap: var(--space-0-5); }
.pt-stage i { flex: 1; block-size: 3px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tool-muted) 30%, transparent); }
.pt-stage i.on { background: var(--tool-top); }
.pt-stage[data-s="passed"] i.on { background: var(--tool-ok); }

/* The diagram: nodes placed by look-trace.js over a layer of links */
.pt-view > * { grid-area: 1 / 1; min-inline-size: 0; }
.pt-dia { --pt-pad: var(--space-4); --pt-gap: var(--space-1); --pt-row: var(--space-1-5); position: relative; }
.pt.ids .pt-dia { --pt-pad: var(--space-2-5); }
.pt-links { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.pt-links:dir(rtl) { scale: -1 1; }
.pt-links path { fill: none; stroke: color-mix(in srgb, var(--tool-muted) 45%, transparent); stroke-width: 1; transition: opacity var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease); }
.pt-dia.dim .pt-links path { opacity: .12; }
.pt-dia .pt-links path.on { stroke: var(--tool-top); stroke-width: 1.5; opacity: 1; }
.pt-h {
  position: absolute;
  margin: 0;
  overflow: hidden;
  color: var(--tool-muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pt-h b { font-weight: var(--weight-medium); color: var(--tool-text); }
.pt-short, .pt.short .pt-long, .pt.short .pt-pre, .pt.ids .pt-h b, .pt.ids .pt-nm { display: none; }
.pt.short .pt-short { display: inline; }

.pt-n {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  inline-size: max-content;
  margin: 0;
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-sm);
  background: var(--tool-raise);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  text-align: start;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pt-n:hover { border-color: var(--tool-muted); }
.pt-dia.dim .pt-n:not(.on) { opacity: .28; }
.pt-n.on { border-color: color-mix(in srgb, var(--tool-top) 55%, var(--tool-line)); }
.pt-n[aria-pressed="true"] { border-color: var(--tool-top); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tool-top) 35%, transparent); }
/* Ids read left to right whichever way the page does */
.pt-k { display: inline-flex; flex: none; align-items: center; direction: ltr; font-family: var(--mono); font-size: var(--text-2xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.pt-k .pt-g { margin-inline-end: var(--space-1); }
.pt-nm { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* An ICD: its status glyph and id, then its name on up to two lines; dashed while it is a draft */
.pt-icd { flex-direction: column; align-items: stretch; gap: var(--space-0-5); }
.pt-icd .pt-nm { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pt-icd[data-st="draft"] { border-style: dashed; }
.pt.ids .pt-icd { padding-inline: var(--space-1-5); }

/* An interface: a stripe and its RICEFW letter, I, in one colour, and its build stage along the bottom */
.pt-obj { --c: var(--code-fn); padding-block: var(--space-1) var(--space-2); padding-inline: var(--space-2-5) var(--space-2); }
.pt-obj::before { content: ""; position: absolute; inset-block: var(--space-1); inset-inline-start: 0; inline-size: 3px; border-radius: var(--r-pill); background: var(--c); }
.pt-obj .pt-k b { color: var(--c); }
.pt-obj .pt-stage { position: absolute; inset-inline: var(--space-2-5) var(--space-2); inset-block-end: var(--space-1); }
.pt-obj .pt-stage i { block-size: 2px; }
.pt.ids .pt-obj { padding-inline: var(--space-2) var(--space-1-5); }
.pt.ids .pt-obj .pt-stage { inset-inline: var(--space-2) var(--space-1-5); }

/* A Jira issue: its type glyph and key; struck through once done, as Jira does, and outlined red while a Sev 1–2 bug is open */
.pt-is { gap: var(--space-1); padding-inline: var(--space-1); border-radius: var(--r-xs); }
.pt-is .pt-g { inline-size: 10px; block-size: 10px; }
.pt-is[data-done] .pt-k, .pt-sw[data-done] { color: var(--tool-muted); text-decoration: line-through; }
.pt-is[data-hot], .pt-sw[data-hot] { border-color: color-mix(in srgb, var(--tool-ko) 75%, transparent); }

/* The view's notices */
.pt-msg {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--space-2);
  inset-inline: 0;
  inline-size: fit-content;
  max-inline-size: calc(100% - 2 * var(--space-3));
  margin-block: 0;
  margin-inline: auto;
  padding-block: var(--space-1-5);
  padding-inline: var(--space-3);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-md);
  background: var(--tool-raise);
  font-size: var(--text-xs);
  text-align: center;
  transition: opacity var(--dur-fast) var(--ease);
}
.pt-msg:empty { opacity: 0; pointer-events: none; }

/* The inspector */
.pt-insp .pt-ia > .sc-h:first-child { margin-block-start: 0; }
.pt-insp dd { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1-5); }
.pt-insp dd .pt-stage { flex: none; inline-size: 34px; }
.pt-t { margin-block: var(--space-2) var(--space-1); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.pt-note {
  margin-block: var(--space-3) 0;
  padding-block: var(--space-1-5);
  padding-inline: var(--space-2-5);
  border-inline-start: 2px solid var(--tool-bot);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--tool-bot) 10%, transparent);
  font-size: var(--text-xs);
}
.pt-refs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pt-ref {
  padding-block: var(--space-0-5);
  padding-inline: var(--space-1-5);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-xs);
  background: var(--tool-raise);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  cursor: pointer;
}
.pt-ref:hover { border-color: var(--tool-top); color: var(--tool-top); }
.pt-ref[hidden] { display: none; }
.pt-none { margin: 0; color: var(--tool-muted); font-size: var(--text-xs); }
.pt:not(.wide):not(.ids) .pt-insp .sc-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
.pt:not(.wide):not(.ids) .pt-ib > .sc-h:first-child { margin-block-start: 0; }

/* The assistant: four questions, and the answer under them */
.pt-ask { display: grid; gap: var(--space-2-5); padding-block: var(--space-3) var(--space-3-5); padding-inline: var(--space-3-5); border-block-start: 1px solid var(--tool-line); }
.pt-ask > .sc-h { margin: 0; }
.pt-qs { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.pt-qs button {
  padding-block: var(--space-1-5);
  padding-inline: var(--space-3);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-pill);
  background: var(--tool-raise);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  cursor: pointer;
}
.pt-qs button:hover { border-color: var(--tool-muted); }
.pt-qs [aria-pressed="true"] { border-color: var(--tool-top); background: color-mix(in srgb, var(--tool-top) 14%, transparent); color: var(--tool-top); }
.pt-out { max-inline-size: 92ch; font-size: var(--text-sm); line-height: var(--leading-body); }
.pt-out p { margin: 0; }
.pt-out p + p { margin-block-start: var(--space-1-5); }
.pt-out b { font-weight: var(--weight-semibold); }
.pt-out .pt-ref { padding-block: 0; }
.pt-q { color: var(--tool-muted); font-family: var(--mono); font-size: var(--text-xs); }
.pt-idle { color: var(--tool-muted); }

/* The status bar */
.pt-status { overflow: hidden; }
.pt-sync { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.pt-sync i { inline-size: 6px; block-size: 6px; border-radius: var(--r-round); background: var(--tool-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tool-ok) 22%, transparent); }
.pt-hint { min-inline-size: 0; margin-inline-start: auto; overflow: hidden; color: var(--tool-text); text-overflow: ellipsis; }
.pt:not(.wide) .pt-count, .pt.ids .pt-hint { display: none; }

.pt-find:focus-visible, .pt-filters button:focus-visible, .pt-qs button:focus-visible, .pt-ref:focus-visible, .pt-n:focus-visible {
  outline: 2px solid var(--tool-top);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pt-n, .pt-links path, .pt-msg { transition: none; }
}