/* The Innovation Loop post: editorial layout adapted to the Midnight theme.
   Every rule is scoped to .loop-post so nothing leaks into the rest of the site. */
.loop-post {
  --loop-text: #e8e8e8;
  --loop-muted: #b6b6b6;
  --loop-faint: #8a8a8a;
  --loop-primary: #ffcc00;
  --loop-primary-hover: #ffeb9b;
  --loop-border: #3a3a3a;
  --loop-surface: #2b2b2b;
  --loop-field: #1c1c1c;
  --loop-nav-height: 48px;
  color: var(--loop-text);
}

.loop-post *,
.loop-post *::before,
.loop-post *::after {
  box-sizing: border-box;
}

.loop-post [hidden] {
  display: none !important;
}

/* Anchored sections and phases clear the sticky section nav (and the site nav when it's on).
   Sections land flush under the nav (their own top padding gives the breathing room), which
   also puts the nav exactly at its stuck position when jumping to the first section. */
.loop-post [id] {
  scroll-margin-top: calc(var(--loop-nav-height) + 16px);
}

.loop-post section[id] {
  scroll-margin-top: var(--loop-nav-height);
}

.has-nav .loop-post [id] {
  scroll-margin-top: calc(60px + var(--loop-nav-height) + 16px);
}

.has-nav .loop-post section[id] {
  scroll-margin-top: calc(60px + var(--loop-nav-height));
}

/* Intro */
.loop-post .deck {
  font-size: 18px;
  line-height: 1.45;
  color: var(--loop-text);
  margin-bottom: 12px;
}

.loop-post .eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--loop-primary);
  margin-bottom: 8px;
}

.loop-post .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding-block: 12px;
  border-top: 1px solid var(--loop-border);
  font-size: 12px;
  color: var(--loop-faint);
}

/* Section nav: sticks below the site nav; Midnight hides <nav> under 480px, so force it back.
   The background spans the full window like the site nav, while the links stay in the column:
   spread shadows paint the bar (and a 1px bottom rule) sideways, and clip-path trims them to
   the bar's height. Shadows don't add scrollable overflow, so there's no horizontal scroll. */
.loop-post .loop-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  min-height: var(--loop-nav-height);
  align-items: center;
  background: #242424;
  box-shadow:
    0 0 0 100vmax #242424,
    0 1px 0 100vmax var(--loop-border);
  clip-path: inset(0 -100vmax -1px);
}

.has-nav .loop-post .loop-nav {
  top: 60px;
}

.loop-post .loop-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--loop-muted);
  border-bottom: 2px solid transparent;
}

.loop-post .loop-nav a:hover {
  color: #ffffff;
}

.loop-post .loop-nav a.active {
  color: var(--loop-primary);
  border-bottom-color: var(--loop-primary);
}

@media (max-width: 480px) {
  .loop-post .loop-nav {
    justify-content: space-between;
    gap: 0 10px;
  }

  .loop-post .loop-nav a {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}

/* Sections: undo Midnight's global section margins */
.loop-post .section {
  max-width: none;
  margin: 0;
  padding: 40px 0;
}

.loop-post .section + .section {
  border-top: 1px solid var(--loop-border);
}

.loop-post .sectionhead {
  margin-bottom: 24px;
}

.loop-post .sectionhead h2 {
  font-size: 26px;
  line-height: 1.2;
  color: var(--loop-text);
  margin: 0;
}

.loop-post h3 {
  font-size: 18px;
  color: var(--loop-text);
  margin: 32px 0 12px;
}

/* Prose */
.loop-post .prose p {
  margin-bottom: 16px;
}

.loop-post .prose ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.loop-post .prose li {
  padding-left: 4px;
  margin-bottom: 10px;
}

.loop-post .prose a {
  overflow-wrap: anywhere;
}

.loop-post .prose > p:last-child {
  margin-bottom: 0;
}

.loop-post .summary-copy {
  font-size: 15px;
}

.loop-post .summary-copy ul {
  list-style: none;
  padding: 0;
  margin-block: 24px;
}

.loop-post .summary-copy ul li {
  padding: 10px 0;
  margin: 0;
  border-top: 1px solid var(--loop-border);
}

.loop-post .summary-copy ul li:last-child {
  border-bottom: 1px solid var(--loop-border);
}

.loop-post .caption {
  font-size: 12px;
  color: var(--loop-faint);
}

/* Study strip: big number beside its explanation */
.loop-post .study-strip {
  display: grid;
  gap: 20px;
  margin-block: 32px;
  padding-block: 24px;
  border-block: 1px solid var(--loop-border);
}

.loop-post .study-strip article {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0 16px;
}

.loop-post .stat {
  grid-row: span 2;
  font-size: 30px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--loop-text);
}

.loop-post .study-strip article:last-child .stat {
  color: var(--loop-primary);
}

.loop-post .study-strip p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 4px;
}

.loop-post .study-strip a {
  font-size: 12px;
}

/* Movements: one card per movement (name, question, evidence bar, implementation details).
   A raised dark surface with a yellow left edge sets them off from the page. */
.loop-post .movements {
  display: grid;
  gap: 16px;
  margin-block: 24px 8px;
}

.loop-post .movement {
  padding: 20px 22px 0;
  background: var(--loop-surface);
  border: 1px solid var(--loop-border);
  border-left: 3px solid var(--loop-primary);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.loop-post .movement-num {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--loop-primary);
}

.loop-post .movement h4 {
  margin: 4px 0 6px;
  font-size: 20px;
  color: var(--loop-text);
}

.loop-post .movement-question {
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--loop-muted);
}

.loop-post .movement-evidence {
  margin-bottom: 16px;
  font-size: 13px;
}

.loop-post .movement-evidence span {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--loop-faint);
}

.loop-post .movement details,
.loop-post .movement details:last-child {
  border-bottom: 0;
}

.loop-post .movement summary {
  min-height: 52px;
  font-size: 14px;
}

/* Disclosures: + / − markers */
.loop-post details {
  border-top: 1px solid var(--loop-border);
}

.loop-post details:last-child {
  border-bottom: 1px solid var(--loop-border);
}

.loop-post summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-block: 16px;
  font-size: 16px;
  color: var(--loop-text);
}

.loop-post summary::-webkit-details-marker {
  display: none;
}

.loop-post summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--loop-primary);
}

.loop-post details[open] > summary::after {
  content: '\2212';
}

.loop-post summary:hover {
  color: var(--loop-primary);
}

/* Worked example sits between the movement cards and the five rules */
.loop-post .worked-example {
  margin-top: 24px;
  border-bottom: 1px solid var(--loop-border);
}

/* Breathing room when an accordion directly follows a block of prose */
.loop-post .prose + details {
  margin-top: 24px;
}

.loop-post details > .prose {
  padding-bottom: 24px;
}

/* Buttons */
.loop-post button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

.loop-post button:active {
  transform: translateY(1px);
}

.loop-post .textbutton {
  min-height: 44px;
  padding-inline: 4px;
  font-size: 13px;
  color: var(--loop-primary);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.loop-post .textbutton:hover {
  color: var(--loop-primary-hover);
}

.loop-post .button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #1c1c1c;
  background: var(--loop-primary);
  border-radius: 4px;
}

.loop-post .button:hover {
  background: var(--loop-primary-hover);
}

.loop-post :focus-visible {
  outline: 2px solid var(--loop-primary);
  outline-offset: 3px;
}

/* Tables stack into labeled cards: the column is too narrow for a real grid */
.loop-post .table-scroll {
  margin-block: 20px;
}

.loop-post table,
.loop-post tbody,
.loop-post tr,
.loop-post td {
  display: block;
  margin: 0;
}

.loop-post thead {
  display: none;
}

.loop-post tr {
  padding-block: 16px;
  border-top: 1px solid var(--loop-border);
}

.loop-post tr:last-child {
  border-bottom: 1px solid var(--loop-border);
}

.loop-post td {
  padding: 0;
  margin-bottom: 12px;
  border: 0;
}

.loop-post td:first-child {
  font-size: 16px;
  color: var(--loop-text);
}

.loop-post td:not(:first-child)::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--loop-faint);
}

.loop-post td:last-child {
  margin-bottom: 0;
  font-size: 13px;
}

/* Evidence cards */
.loop-post .evidence-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 40px;
}

.loop-post .evidence-grid article {
  padding-top: 16px;
  border-top: 1px solid var(--loop-border);
}

.loop-post .evidence-grid article p {
  margin: 0;
}

.loop-post .evidence-grid article strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--loop-text);
}

.loop-post .evidence-grid a {
  overflow-wrap: anywhere;
}

/* Bibliography */
.loop-post .sources-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-block: 40px 12px;
}

.loop-post .sources-head h3 {
  margin: 0;
}

.loop-post .sources summary {
  min-height: 60px;
  font-size: 13px;
  line-height: 1.5;
}

.loop-post .source-kind {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--loop-faint);
}

.loop-post .source-entry {
  padding-bottom: 24px;
  font-size: 13px;
}

.loop-post .source-entry p {
  margin-bottom: 12px;
}

.loop-post .source-address {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--loop-faint);
  overflow-wrap: anywhere;
  user-select: all;
}

.loop-post .method {
  margin-top: 40px;
}

.loop-post .method summary {
  font-size: 14px;
}

/* Starter records panel */
.loop-post .template-wrap {
  margin-top: 20px;
  padding: 24px;
  background: var(--loop-surface);
  border: 1px solid var(--loop-border);
  border-radius: 6px;
}

.loop-post .template-wrap h3 {
  margin-top: 0;
}

.loop-post .template-actions {
  margin-block: 20px 4px;
}

.loop-post .template-actions p:not(.copy-status) {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--loop-muted);
}

.loop-post .record-use {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--loop-faint);
}

.loop-post .template-wrap summary {
  font-size: 15px;
}

.loop-post textarea {
  display: block;
  width: 100%;
  min-height: 180px;
  padding: 12px;
  resize: vertical;
  font: 13px/1.6 Monaco, 'Lucida Console', monospace;
  color: var(--loop-text);
  background: var(--loop-field);
  border: 1px solid var(--loop-border);
  border-radius: 4px;
}

.loop-post .copy-fallback {
  margin-block: 16px;
}

.loop-post .copy-fallback label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

.loop-post .copy-status {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--loop-primary);
}

.loop-post .copy-status:empty {
  display: none;
}

/* Framework takeaway: a tinted callout, distinct from the yellow-edged movement cards */
.loop-post .closing {
  max-width: none;
  margin-block: 40px 0;
  padding: 18px 22px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--loop-text);
  background: rgba(255, 204, 0, 0.07);
  border: 1px solid rgba(255, 204, 0, 0.35);
  border-radius: 6px;
}

.loop-post .closing::before {
  content: 'Takeaway';
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--loop-primary);
}

.loop-post .loop-footer {
  padding-top: 20px;
  border-top: 1px solid var(--loop-border);
  font-size: 12px;
  color: var(--loop-faint);
}

.loop-post .loop-footer p {
  margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .loop-post *,
  .loop-post *::before,
  .loop-post *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .loop-post .loop-nav,
  .loop-post .section-actions,
  .loop-post .template-actions,
  .loop-post .textbutton,
  .loop-post .copy-fallback {
    display: none !important;
  }
}