/*
 * Pod simulator, layered on top of the playground's styles.css so the two tools look like one tool.
 * Only what the simulator adds is here: the roster cards, the simulated-clock treatment and the
 * error surfaces. Nothing in this file overrides a shared rule.
 */

main {
  /* The roster is denser than the generator form and reads badly squeezed into 900px. */
  max-width: 1040px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.section-head h2 {
  margin-bottom: 12px;
}
.btn-inline {
  margin-top: 0;
  padding: 6px 16px;
  font-size: 0.85rem;
}

/* ── The simulated-clock explainer ───────────────────────────────────── */
.clock-explainer {
  border-left: 6px solid var(--blue-mid);
}
.clock-explainer h2 {
  margin-bottom: 10px;
}
.clock-explainer p {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: var(--grey-900);
  max-width: 68ch;
}
.clock-explainer-real {
  color: var(--grey-600);
}

/* ── Errors, said out loud on the page ───────────────────────────────── */
.page-error {
  background: #FDF0EE;
  border: 1.5px solid var(--red);
  border-radius: var(--radius);
  color: #7E241A;
  padding: 14px 18px;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* ── Roster ──────────────────────────────────────────────────────────── */
.roster-status {
  color: var(--grey-600);
  font-size: 0.92rem;
  margin: 0 0 12px;
}
.roster-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.roster-footnote {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--grey-300);
  font-size: 0.8rem;
  color: var(--grey-600);
  line-height: 1.45;
  max-width: 78ch;
}

.member-card {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--white);
}
.member-card-flagged {
  border-color: #C58A2E;
  background: #FFFBF3;
}

.member-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.member-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-dark);
}

.btn-danger {
  background: var(--white);
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: #FDF0EE; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* The simulated date, given the weight it needs to stop being misread as the real one. */
.clock-block {
  background: var(--blue-light);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.clock-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-dark);
}
.clock-date {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.3;
}
.clock-iso {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--grey-600);
}
.clock-derived {
  margin-top: 10px;
  padding: 10px 12px;
  background: #FFF3DC;
  border: 1.5px solid #C58A2E;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #6B4A11;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px 22px;
}
.fact {
  display: flex;
  gap: 8px;
  font-size: 0.88rem;
  align-items: baseline;
}
.fact-wide {
  margin-top: 8px;
}
.fact-label {
  color: var(--grey-600);
  font-weight: 600;
  flex: 0 0 auto;
  min-width: 110px;
}
.fact-value {
  color: var(--grey-900);
}
.fact-sessions .fact-value {
  font-weight: 600;
}
.constraint-line {
  line-height: 1.4;
}

.member-id {
  margin-top: 12px;
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--grey-600);
  opacity: 0.75;
}

.member-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.member-name-link {
  color: inherit;
  text-decoration: none;
}
.member-name-link:hover { text-decoration: underline; }

.btn-open {
  display: inline-block;
  background: var(--white);
  color: var(--blue-dark);
  border: 1.5px solid var(--blue-dark);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-open:hover { background: var(--blue-light); }

/* Not signed up is the one roster fact that is a call to action rather than a value. */
.fact-unsigned .fact-value {
  color: #8A5A00;
  font-weight: 700;
}

/* ── One member ──────────────────────────────────────────────────────── */
.back-link {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--blue-mid);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

.member-loading {
  color: var(--grey-600);
  font-size: 0.92rem;
}
.member-page-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.member-page-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue-dark);
}
.member-page-head .member-id {
  margin-top: 0;
}

.member-notice {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  background: #E8F5EC;
  border: 1.5px solid var(--green);
  color: #14562A;
}
.member-notice-bad {
  background: #FDF0EE;
  border-color: var(--red);
  color: #7E241A;
}

.block-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-dark);
}

/* ── Their program, and the state of not having one ────────────────────── */
.program-block {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}
/* Never signed up is a different thing from an empty program, and has to look like it. */
.program-missing {
  border: 2px solid #C58A2E;
  background: #FFF8EC;
}
.program-missing .block-title {
  color: #8A5A00;
}
.program-missing-body {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 72ch;
}

/* ── The two actions ─────────────────────────────────────────────────── */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.action-block {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--grey-100);
}
.action-block .field-hint {
  margin: 0 0 10px;
  opacity: 1;
  max-width: 60ch;
}
.clock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.clock-days-input {
  width: 96px;
  padding: 10px 12px;
  border: 1.5px solid var(--grey-300);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 1rem;
  background: var(--white);
  color: var(--grey-900);
}
.clock-days-input:focus {
  outline: none;
  border-color: var(--blue-mid);
}
.clock-days-unit {
  font-size: 0.92rem;
  color: var(--grey-600);
}
.btn-link {
  display: inline-block;
  text-decoration: none;
}

.action-message {
  margin: 12px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green);
  line-height: 1.45;
}
.action-message-bad {
  color: #7E241A;
  background: #FDF0EE;
  border: 1.5px solid var(--red);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ── Timeline ────────────────────────────────────────────────────────── */
.timeline-block,
.profile-block {
  border-top: 1px solid var(--grey-300);
  padding-top: 18px;
  margin-top: 18px;
}
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.timeline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--grey-300);
  border-radius: 8px;
  padding: 12px 14px;
}
.timeline-row-unfinished {
  border-style: dashed;
  background: var(--grey-100);
}
.timeline-date {
  font-weight: 700;
  color: var(--blue-dark);
}
.timeline-focus {
  font-size: 0.9rem;
  color: var(--grey-900);
}
.timeline-detail,
.timeline-deviations {
  font-size: 0.8rem;
  color: var(--grey-600);
}
.timeline-deviations {
  color: #8A5A00;
  font-weight: 600;
}

/* ── The profile form ────────────────────────────────────────────────── */
.profile-form {
  margin-top: 14px;
}
.chip-add-btn {
  background: var(--blue-mid);
  color: var(--white);
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}
.chip-add-btn:hover { background: var(--blue-dark); }
.replace-warning {
  opacity: 1;
  color: #6B4A11;
  background: #FFF8EC;
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 72ch;
}

/* ── Running a session ───────────────────────────────────────────────── */
.run-form .field-label {
  font-size: 1rem;
}
.run-choice-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.run-choice {
  background: var(--white);
  color: var(--blue-dark);
  border: 1.5px solid var(--grey-300);
  border-radius: 8px;
  padding: 12px 22px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.run-choice:hover { border-color: var(--blue-mid); }
.run-choice-on {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--white);
}
.run-other-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.run-other-label {
  font-size: 0.85rem;
  color: var(--grey-600);
}
.run-other-length {
  width: 110px;
  padding: 8px 10px;
  border: 1.5px solid var(--grey-300);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.95rem;
  background: var(--white);
  color: var(--grey-900);
}
.run-injuries {
  margin-top: 4px;
}
.run-unfinished {
  margin-top: 12px;
  opacity: 1;
  color: #6B4A11;
  background: #FFF8EC;
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 78ch;
}

/* The model call is slow on purpose, so the line that says so is calm rather than alarming. */
.run-working {
  color: var(--blue-dark);
  background: var(--blue-light);
  border-radius: 8px;
  padding: 10px 12px;
}

.run-summary {
  background: var(--blue-light);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.run-took {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--grey-600);
}
.run-record-hint {
  max-width: 78ch;
  opacity: 1;
}

.run-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--grey-300);
  margin-bottom: 16px;
}
.run-bulk-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--grey-600);
}
.run-bulk-btn {
  background: var(--white);
  color: var(--blue-dark);
  border: 1.5px solid var(--grey-300);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.run-bulk-btn:hover { border-color: var(--blue-mid); background: var(--blue-light); }

/* ── The exercises ───────────────────────────────────────────────────── */
.ex-group {
  margin-bottom: 22px;
}
.ex-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.ex-group-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-dark);
}
.ex-group-count {
  font-size: 0.78rem;
  color: var(--grey-600);
}

.ex-card {
  border: 1px solid var(--grey-300);
  border-left: 4px solid var(--grey-300);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--white);
}
/* Rated is the state that matters when you are looking for the one you have not done yet. */
.ex-card-rated {
  border-left-color: var(--green);
  background: #FBFDFB;
}

.ex-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.ex-index {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ex-heading {
  min-width: 0;
}
.ex-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.3;
}
.ex-meta {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--grey-600);
}
.ex-prescription {
  font-size: 0.85rem;
  color: var(--grey-900);
  margin-top: 2px;
}

.set-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--grey-100);
  border-radius: 6px;
  padding: 6px 10px;
}
.set-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grey-600);
  min-width: 48px;
}
.set-prescribed {
  font-size: 0.8rem;
  color: var(--grey-600);
  min-width: 150px;
}
.set-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}
.set-field {
  display: flex;
  align-items: center;
  gap: 5px;
}
.set-input {
  width: 74px;
  padding: 6px 8px;
  border: 1.5px solid var(--grey-300);
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.92rem;
  background: var(--white);
  color: var(--grey-900);
}
.set-input:focus {
  outline: none;
  border-color: var(--blue-mid);
}
/* Half kilos need the extra character, and 12.5 must never look like it did not fit. */
.set-input-weight {
  width: 82px;
}
.set-unit {
  font-size: 0.78rem;
  color: var(--grey-600);
}
.set-empty {
  font-size: 0.8rem;
  font-style: italic;
  color: #8A5A00;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rating-question {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grey-600);
  margin-right: 4px;
}
.rating-btn {
  background: var(--white);
  color: var(--grey-900);
  border: 1.5px solid var(--grey-300);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.rating-btn:hover { border-color: var(--blue-mid); }
.rating-btn-on {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--white);
}

.ex-comment-wrap {
  margin-top: 4px;
}
.ex-comment {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--grey-300);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.9rem;
  background: var(--white);
  color: var(--grey-900);
}
.ex-comment:focus {
  outline: none;
  border-color: var(--blue-mid);
}

.run-finish {
  border-top: 1px solid var(--grey-300);
  padding-top: 16px;
  margin-top: 6px;
}
.run-rated-count {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--green);
  max-width: 78ch;
  line-height: 1.45;
}
.run-rated-count-partial {
  color: #8A5A00;
}

.run-done-facts {
  margin-bottom: 14px;
}
.run-next-hint {
  opacity: 1;
  max-width: 78ch;
}
.run-done-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.placeholder-body {
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 72ch;
  color: var(--grey-900);
}

/* ── One stored session, read back ───────────────────────────────────── */
.insp-unfinished {
  background: #FFF8EC;
  border-color: #C58A2E;
  color: #6B4A11;
  font-weight: 600;
  max-width: 82ch;
}
.insp-plan-block {
  margin-bottom: 22px;
}
.plan-readonly {
  margin-top: 10px;
}
.plan-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) minmax(180px, 1.4fr);
  gap: 4px 16px;
  align-items: baseline;
  border: 1px solid var(--grey-300);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--white);
}
.plan-row-name {
  font-weight: 700;
  color: var(--blue-dark);
  font-size: 0.95rem;
}
.plan-row-clip {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--grey-600);
}
.plan-row-sets {
  font-size: 0.85rem;
  color: var(--grey-900);
}

/* ── The inspector ───────────────────────────────────────────────────── */
/*
 * Denser and cooler than the rest of the page on purpose. Everything above it is something Danya
 * does; this is evidence they read, and it wants to look like a different kind of thing.
 */
.inspector {
  margin-top: 26px;
  border-top: 3px solid var(--blue-dark);
  padding-top: 20px;
}
.insp-head {
  margin-bottom: 14px;
}
.insp-title {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--blue-dark);
}
.insp-lead {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--grey-900);
  max-width: 82ch;
}

/* The one distinction the whole panel exists to draw, stated once before any of the evidence. */
.insp-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}
.insp-side {
  border: 1.5px solid var(--blue-mid);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--blue-light);
  font-size: 0.9rem;
  line-height: 1.45;
}
.insp-side-model {
  border-color: #C58A2E;
  background: #FFF8EC;
}
.insp-side-tag {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--blue-dark);
  display: block;
}
.insp-side-model .insp-side-tag {
  color: #8A5A00;
}
.insp-side-text {
  color: var(--grey-900);
}

.insp-top-facts {
  margin-bottom: 20px;
}

.insp-section {
  border-top: 1px solid var(--grey-300);
  padding-top: 16px;
  margin-top: 16px;
}
.insp-section-title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--blue-dark);
}
.insp-sub-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-dark);
}
.insp-section-note {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--grey-600);
  max-width: 82ch;
}
.insp-empty {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--grey-900);
  background: var(--grey-100);
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 82ch;
}

.insp-fact-on .fact-value {
  font-weight: 700;
  color: #8A5A00;
}
.insp-fact-off .fact-value {
  font-weight: 700;
}

.insp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.insp-chip {
  display: inline-block;
  border: 1.5px solid var(--grey-300);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--grey-900);
  background: var(--white);
}
.insp-chip-on {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--white);
}
.insp-chip-warn {
  background: #FFF3DC;
  border-color: #C58A2E;
  color: #6B4A11;
}
.insp-chip-quiet {
  font-family: monospace;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--grey-600);
  background: var(--grey-100);
}

.insp-sequence {
  margin-top: 12px;
}
.insp-sequence-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-600);
}
.insp-sequence-note {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--grey-900);
}

/* ── What the engine told the model ──────────────────────────────────── */
.insp-dir-summary {
  margin-bottom: 8px;
}
.insp-tally {
  margin: 4px 0 12px;
  line-height: 1.5;
  background: var(--blue-light);
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 82ch;
}
.insp-tally-head {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 4px;
}
/* One axis per line. Weight and reps on one line would be read as one number. */
.insp-tally-line {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-dark);
}
.insp-tally-foot {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--grey-600);
}
.insp-missing-note {
  margin: 0 0 14px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  color: #6B4A11;
  background: #FFF8EC;
  border: 1.5px solid #C58A2E;
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 82ch;
}
.insp-dir-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.insp-dir-card {
  border: 1px solid var(--grey-300);
  border-left: 4px solid var(--grey-300);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--white);
}
/* The action is the first thing to look for down a column of these, so it is the left edge. */
.insp-action-progress { border-left-color: var(--green); }
.insp-action-hold { border-left-color: var(--blue-mid); }
.insp-action-regress { border-left-color: #C58A2E; }
.insp-action-swap_out { border-left-color: var(--red); }

.insp-dir-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
/*
 * The exercise's name leads and its clip id follows in small mono. Both are on the row because the
 * workout above this panel is drawn in names and the inspection payload is keyed by ids, and one
 * screen carrying two spellings of one exercise makes the reader do the join themselves.
 */
.insp-ex-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-dark);
}
/* No name means the exercise is not in the session, so it can only be shown as its id. */
.insp-ex-name-absent {
  font-family: monospace;
  font-size: 0.85rem;
  color: #6B4A11;
}
.insp-dir-clip {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--grey-600);
}
.insp-badge {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--grey-100);
  border: 1px solid var(--grey-300);
  color: var(--grey-900);
}
.insp-dir-cat {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-600);
}

.insp-change {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--grey-900);
}
/* "Unchanged" is the finding people miss, so it is stated as loudly as a change would be. */
.insp-change-same { font-weight: 700; }
.insp-change-up { font-weight: 700; color: #14562A; }
.insp-change-down { font-weight: 700; color: #8A5A00; }
.insp-change-none { color: var(--grey-600); }

.insp-reason {
  margin-top: 8px;
  background: var(--grey-100);
  border-radius: 6px;
  padding: 8px 12px;
}
.insp-reason-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-600);
}
.insp-reason-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--grey-900);
}

.insp-shipped {
  margin-top: 8px;
  font-size: 0.85rem;
}
.insp-shipped-label {
  font-weight: 700;
  color: var(--grey-600);
  margin-right: 6px;
}
.insp-shipped-text {
  color: var(--grey-900);
}
/*
 * Three outcomes, three colours, and the colours carry the meaning.
 *
 * Amber is reserved for the one that is somebody's fault (the model was told and did otherwise).
 * "Never sent" is deliberately NOT amber: it is the most common outcome, nobody disobeyed
 * anything, and dressing it as a warning is the same false accusation the copy was fixed to stop,
 * just made in colour instead of words.
 */
.insp-not-in-plan {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #6B4A11;
  background: #FFF8EC;
  border-radius: 6px;
  padding: 8px 12px;
}
.insp-never-sent,
.insp-unknown-sent {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--grey-900);
  background: var(--grey-100);
  border-left: 3px solid var(--grey-300);
  border-radius: 6px;
  padding: 8px 12px;
}
.insp-unknown-sent {
  font-style: italic;
  color: var(--grey-600);
}

.insp-never-sent-note,
.insp-unknown-note {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--grey-900);
  background: var(--grey-100);
  border-left: 4px solid var(--grey-300);
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 82ch;
}
.insp-unknown-note {
  font-style: italic;
  color: var(--grey-600);
}

/*
 * The panel admitting it cannot answer.
 *
 * Red, and above everything, because every section below has an empty state that reads as a
 * finding. A quiet note here would be read as a footnote to six clean-looking sections.
 */
.insp-broken {
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: #FDF0EE;
  border: 2px solid var(--red);
  border-radius: var(--radius);
}
.insp-broken-title {
  font-size: 1rem;
  font-weight: 800;
  color: #7E241A;
  margin-bottom: 6px;
}
.insp-broken-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--grey-900);
  max-width: 82ch;
}
.insp-broken-list li {
  margin-bottom: 4px;
}

/*
 * A trainer rule that could not be parsed.
 *
 * Amber and near the top, because unlike every other removal in this family it has a fix the reader
 * can apply, and because nothing else in this tool or in the app mentions it at all.
 */
.insp-unresolved {
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: #FFF8EC;
  border: 2px solid #C58A2E;
  border-radius: var(--radius);
}
.insp-unresolved-title {
  font-size: 1rem;
  font-weight: 800;
  color: #8A5A00;
  margin-bottom: 6px;
}
.insp-unresolved-body {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--grey-900);
  max-width: 82ch;
}
.insp-unresolved-list {
  margin: 0;
  padding-left: 20px;
}
.insp-unresolved-clause {
  font-family: monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #6B4A11;
}

/* The deviation kinds on a timeline row, under the count they break down. */
.timeline-deviation-kinds {
  font-size: 0.75rem;
  color: var(--grey-600);
  font-family: monospace;
}
.insp-dir-flags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.insp-dir-flags-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #8A5A00;
}

.insp-undirected {
  margin-top: 18px;
  border-top: 1px dashed var(--grey-300);
  padding-top: 14px;
}

/* ── Where the model disobeyed ───────────────────────────────────────── */
.insp-dev-summary {
  margin-bottom: 12px;
}
.insp-dev-group {
  border: 1.5px solid #C58A2E;
  border-radius: 8px;
  background: #FFFBF3;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.insp-dev-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.insp-dev-group-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: #8A5A00;
}
.insp-kind-code {
  display: block;
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--grey-600);
  margin-top: 2px;
}
.insp-kind-text {
  margin: 6px 0 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--grey-900);
  max-width: 82ch;
}
.insp-kind-unknown {
  font-style: italic;
}
.insp-dev-row {
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  background: var(--white);
  padding: 8px 12px;
  margin-bottom: 6px;
}
.insp-dev-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.insp-dev-set {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--grey-600);
}
.insp-dev-change {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 0.9rem;
}
.insp-dev-model {
  color: #8A5A00;
  text-decoration: line-through;
}
.insp-dev-arrow {
  font-size: 0.75rem;
  color: var(--grey-600);
}
.insp-dev-directed {
  font-weight: 700;
  color: var(--blue-dark);
}
.insp-dev-meta {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--grey-600);
}

/* ── The prompt ──────────────────────────────────────────────────────── */
.insp-prompt-exact {
  margin: 10px 0 8px;
  font-size: 0.88rem;
  color: var(--grey-900);
}
.insp-prompt-missing {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--grey-100);
  border: 1px solid var(--grey-300);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--grey-900);
  max-width: 86ch;
}
.insp-prompt-details {
  border: 1px solid var(--grey-300);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--white);
}
.insp-prompt-details summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--blue-dark);
}
.insp-prompt-pre {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--grey-100);
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--grey-900);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 460px;
  overflow: auto;
}

/* ── Where this is not the pod ───────────────────────────────────────── */
/*
 * Deliberately the loudest block in the inspector. Each of these is a conclusion Danya could draw
 * about the PRODUCT from behaviour that belongs to the TOOL, and a caveat they scroll past
 * protects nobody.
 */
.insp-differences {
  border: 2px solid #C58A2E;
  border-radius: var(--radius);
  background: #FFF8EC;
  padding: 16px 18px;
  margin-top: 22px;
}
.insp-differences .insp-section-title {
  color: #8A5A00;
}
.insp-diff {
  border-top: 1px solid #E4CFA4;
  padding-top: 10px;
  margin-top: 10px;
}
.insp-diff-summary {
  font-size: 0.95rem;
  font-weight: 700;
  color: #6B4A11;
  line-height: 1.4;
}
.insp-diff-detail {
  margin-top: 4px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--grey-900);
  max-width: 86ch;
}

/* ── Create form ─────────────────────────────────────────────────────── */
.create-hint {
  margin: -8px 0 18px;
  max-width: 70ch;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 22px;
}
input[type="date"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--grey-300);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--grey-900);
  background: var(--white);
}
input[type="date"]:focus {
  outline: none;
  border-color: var(--blue-mid);
}
#add-injury {
  background: var(--blue-mid);
  color: var(--white);
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}
#add-injury:hover { background: var(--blue-dark); }

.create-status {
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green);
}
.create-status-error {
  color: var(--red);
}

/* The shared nav is fixed to the top of the viewport and overlaps the header without this. */
header {
  padding-top: 62px;
}