/* Ants Go Marching widget. Theme colors only; ruled rows, no cards. */

.w-demo { margin: 10px 0 8px; padding: 4px 0 8px; border-bottom: 1px solid var(--light-gray); }
.w-demo:not(.w-ready)::before { content: "This demo needs JavaScript."; color: var(--gray); font-size: 0.9rem; }

.w-note { margin: 8px 0; font-size: 0.88rem; color: var(--dark-gray); max-width: 72ch; }
.w-mono { font-family: var(--code); font-size: 0.78rem; color: var(--gray); }
.w-source { font-family: var(--code); font-size: 0.75rem; color: var(--gray); margin: 4px 0 8px; }
.w-big { margin: 8px 0; font-family: var(--heading); font-size: 1.05rem; }
.w-big strong { color: var(--accent); font-size: 1.2rem; }
.mask-note { color: var(--accent); }

/* buttons */
.w-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0; }
.w-btn {
  appearance: none; min-height: 38px; padding: 7px 14px; border: 1px solid var(--primary);
  background: var(--primary); color: var(--background); font: inherit; font-family: var(--heading);
  font-size: 0.88rem; font-weight: var(--semi-bold); cursor: pointer; border-radius: 0;
}
.w-btn:hover { background: transparent; color: var(--primary); }
.w-btn-quiet { background: transparent; color: var(--primary); }
.w-btn-quiet:hover { background: var(--primary); color: var(--background); }
.w-btn.running { background: transparent; color: var(--accent); border-color: var(--accent); }
.w-btn:focus-visible, .seg-option:focus-visible, .ag-q:focus-visible, .ag-tl-pick:focus-visible,
.ag-qhit:focus-visible, .ag-db-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* segmented options */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--light-gray); }
.seg-option {
  appearance: none; padding: 6px 10px; border: 0; border-right: 1px solid var(--light-gray);
  background: transparent; color: var(--text); font: inherit; font-family: var(--code); font-size: 0.78rem;
  cursor: pointer; border-radius: 0; min-height: 34px;
}
.seg-option:last-child { border-right: 0; }
.seg-option[aria-checked="true"] { background: var(--light-gray); color: var(--accent); }
.seg-small .seg-option { padding: 5px 8px; }

/* ranges */
.w-range { display: grid; grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) 2.2rem; align-items: center; gap: 4px 10px; margin: 6px 0; font-family: var(--code); font-size: 0.78rem; color: var(--gray); }
.w-range input[type="range"] { width: 100%; accent-color: var(--primary); }
.w-range output { text-align: right; color: var(--text); }

/* day one: colony */
.ag-split { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 16px 22px; align-items: start; margin-top: 8px; }
@media (max-width: 760px) { .ag-split { grid-template-columns: minmax(0, 1fr); } }
.ag-stage { min-width: 0; }
.ag-canvas { display: block; max-width: 100%; border: 1px solid var(--light-gray); cursor: crosshair; image-rendering: pixelated; }
.ag-side .w-actions:first-child { margin-top: 0; }
.ag-stats { margin: 10px 0 4px; }
.ag-follow { min-height: 2.6em; }
.ag-chart { margin: 4px 0; }
.ag-food-chart, .ag-slope-chart, .ag-hist-chart, .ag-null-chart, .ag-db-chart { display: block; width: 100%; max-width: 760px; height: auto; overflow: visible; }

.ag-pile { fill: none; stroke-width: 2; stroke-linejoin: round; }
.ag-pile-1 { stroke: var(--accent); }
.ag-pile-2 { stroke: var(--primary); }
.ag-pile-3 { stroke: var(--text); }
.ag-pile-4 { stroke: var(--dark-gray); stroke-dasharray: 6 3; }
.ag-pile-5 { stroke: var(--gray); stroke-dasharray: 2 3; }
.ag-ants-line { fill: none; stroke: var(--gray); stroke-width: 1.5; stroke-dasharray: 5 3; }

.c-grid { stroke: var(--light-gray); stroke-width: 1; }
.c-tick { fill: var(--gray); font-family: var(--code); font-size: 11px; }
.c-label { fill: var(--dark-gray); font-family: var(--code); font-size: 11px; }
.c-dot { fill: var(--accent); stroke: var(--background); stroke-width: 2; }
.c-paper { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 2 4; }
.c-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ""; display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--primary); }
.ag-lg-1::before { border-top-color: var(--accent); }
.ag-lg-2::before { border-top-color: var(--primary); }
.ag-lg-3::before { border-top-color: var(--text); }
.ag-lg-4::before { border-top: 2px dashed var(--dark-gray); }
.ag-lg-5::before { border-top: 2px dotted var(--gray); }
.ag-lg-ants::before { border-top: 1.5px dashed var(--gray); }

.ag-code {
  margin: 8px 0; padding: 8px 0; border-top: 1px solid var(--light-gray); border-bottom: 1px solid var(--light-gray);
  background: none; font-family: var(--code); font-size: 0.74rem; line-height: 1.55; color: var(--gray);
  white-space: pre; overflow-x: auto;
}
.ag-code-line { display: block; padding: 0 6px; border-left: 2px solid transparent; }
.ag-code-line.hit { color: var(--text); border-left-color: var(--accent); background: var(--background-alt); }

.ag-subhead { margin: 18px 0 4px; font-size: 1rem; }

/* challenges */
.ag-challenges { list-style: none; margin: 6px 0; padding: 0; border-top: 1px solid var(--light-gray); }
.ag-challenge {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  margin: 0; padding: 9px 0; border-bottom: 1px solid var(--light-gray);
}
.ag-ch-n { font-family: var(--code); font-size: 1.1rem; color: var(--gray); text-align: center; }
.ag-challenge.on .ag-ch-n { color: var(--accent); }
.ag-ch-text { display: grid; gap: 2px; min-width: 0; }
.ag-ch-name { font-family: var(--heading); font-weight: var(--semi-bold); }
.ag-ch-plain { font-size: 0.85rem; color: var(--dark-gray); }
.ag-ch-concept { font-family: var(--code); font-size: 0.74rem; color: var(--gray); }
.ag-ch-code { display: block; font-family: var(--code); font-size: 0.74rem; color: var(--text); background: none; padding: 0; white-space: pre-wrap; }
@media (max-width: 560px) {
  .ag-challenge { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .ag-ch-control { grid-column: 2; }
}

.ag-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.ag-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ag-track { position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--gray); background: var(--background-alt); }
.ag-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--gray); transition: transform var(--transition), background var(--transition); }
.ag-switch input:checked + .ag-track { border-color: var(--primary); }
.ag-switch input:checked + .ag-track::after { transform: translateX(20px); background: var(--primary); }
.ag-switch input:focus-visible + .ag-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the PD: sixteen days and the timeline */
.ag-days-wrap { margin: 8px 0; max-width: 560px; }
.ag-days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)) 10px repeat(6, minmax(0, 1fr)); gap: 3px; }
.ag-day { display: block; aspect-ratio: 1; background: var(--light-gray); }
.ag-day:nth-child(11) { grid-column: 12; }
.ag-day-nl { background: var(--accent); }
.ag-days-key { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ag-key-nl::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--accent); vertical-align: -1px; }

.ag-timeline { list-style: none; margin: 10px 0; padding: 0; border-top: 1px solid var(--light-gray); }
.ag-tl {
  display: grid; grid-template-columns: 14px 6.6rem minmax(0, 12rem) minmax(0, 1fr); gap: 4px 12px; align-items: baseline;
  margin: 0; padding: 8px 0; border-bottom: 1px solid var(--light-gray); font-size: 0.9rem;
}
.ag-tl-phase .ag-tl-when { grid-column: 3; }
.ag-tl-phase .ag-tl-what { grid-column: 4; }
.ag-tl-mark { width: 10px; height: 10px; border: 1px solid var(--gray); align-self: center; }
.ag-tl-check .ag-tl-mark { border-radius: 50%; }
.ag-tl-nl .ag-tl-mark { background: var(--accent); border-color: var(--accent); }
.ag-tl.on .ag-tl-mark { background: var(--accent); border-color: var(--accent); }
.ag-tl-when { font-family: var(--code); font-size: 0.75rem; color: var(--gray); }
.ag-tl-what { color: var(--text); }
.ag-tl-pick {
  appearance: none; padding: 3px 8px; border: 1px solid var(--light-gray); background: transparent; color: var(--primary);
  font-family: var(--code); font-size: 0.75rem; cursor: pointer; border-radius: 0; justify-self: start;
}
.ag-tl-pick[aria-pressed="true"] { background: var(--light-gray); color: var(--accent); }
@media (max-width: 640px) {
  .ag-tl, .ag-tl-phase { grid-template-columns: 14px minmax(0, 1fr); }
  .ag-tl > *:not(.ag-tl-mark), .ag-tl-phase .ag-tl-when, .ag-tl-phase .ag-tl-what { grid-column: 2; }
}

/* knowledge */
.ag-band { fill: var(--accent); opacity: 0.12; }
.ag-qline { fill: none; stroke-width: 1.6; stroke-linejoin: round; opacity: 0.85; }
.ag-qline.nni { stroke: var(--accent); }
.ag-qline.base { stroke: var(--primary); stroke-dasharray: 5 3; }
.ag-qline.dim { opacity: 0.15; }
.ag-qline.sel { stroke-width: 3.2; opacity: 1; }
.ag-qhit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
.ag-mean { fill: none; stroke: var(--text); stroke-width: 2; stroke-dasharray: 2 4; }
.ag-sel-label { fill: var(--text); }
.ag-lg-nni::before { border-top-color: var(--accent); }
.ag-lg-base::before { border-top: 2px dashed var(--primary); }
.ag-lg-mean::before { border-top: 2px dotted var(--text); }

.ag-qlist { list-style: none; margin: 8px 0; padding: 0; border-top: 1px solid var(--light-gray); }
.ag-qlist li { margin: 0; border-bottom: 1px solid var(--light-gray); }
.ag-q {
  appearance: none; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 8px; width: 100%;
  padding: 7px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; border-radius: 0;
}
.ag-q[aria-pressed="true"] { color: var(--accent); }
.ag-q.dim { opacity: 0.5; }
.ag-q-id, .ag-q-tag { font-family: var(--code); font-size: 0.75rem; color: var(--gray); }
.ag-readout p { max-width: 72ch; }

/* self-efficacy */
.ag-bar { fill: var(--light-gray); }
.ag-bar.hit { fill: var(--accent); }
.ag-null { stroke: var(--gray); stroke-width: 2; }
.ag-null.hit { stroke: var(--accent); }

.ag-impact-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 13rem); gap: 6px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--light-gray); }
.ag-impact-label { font-size: 0.88rem; }
.ag-stack { display: flex; height: 22px; border: 1px solid var(--light-gray); }
.ag-seg { display: flex; align-items: center; justify-content: center; font-family: var(--code); font-size: 0.72rem; color: var(--background); overflow: hidden; }
.ag-seg-0 { background: var(--gray); }
.ag-seg-1 { background: var(--dark-gray); }
.ag-seg-2 { background: var(--primary); }
.ag-seg-3 { background: var(--accent); opacity: 0.75; }
.ag-seg-4 { background: var(--accent); }
@media (max-width: 640px) { .ag-impact-row { grid-template-columns: minmax(0, 1fr); } }

/* classroom */
.ag-db-hit { fill: transparent; cursor: pointer; }
.ag-db-row.sel .ag-db-hit { fill: var(--background-alt); }
.ag-db-line { stroke: var(--gray); stroke-width: 2; }
.ag-db-now { fill: var(--background); stroke: var(--primary); stroke-width: 2; }
.ag-db-plan { fill: var(--primary); }
.ag-db-row.nl .ag-db-plan { fill: var(--accent); }
.ag-db-row.nl .ag-db-now { stroke: var(--accent); }
.ag-db-row.nl .c-label { fill: var(--accent); }
.ag-lg-now::before { width: 10px; height: 10px; border: 2px solid var(--primary); border-radius: 50%; }
.ag-lg-plan::before { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--primary); }

/* tables from the paper */
.paper-body .results-table { width: 100%; min-width: 520px; border-collapse: collapse; margin: 12px 0; overflow-wrap: normal; }
.paper-body .results-table th, .paper-body .results-table td { padding: 6px 8px; border-bottom: 1px solid var(--light-gray); text-align: left; vertical-align: top; }
.paper-body .results-table th { font-family: var(--code); font-size: 0.75rem; color: var(--gray); font-weight: 500; }
.ag-table-wrap { overflow-x: auto; }
.paper-body li { text-align: left; }

/* ruled lists use the full column, not the prose measure */
.paper-body .ag-timeline, .paper-body .ag-challenges, .paper-body .ag-qlist { width: 100%; max-width: 100%; }
.ag-tl { align-items: start; }
.ag-tl-mark { align-self: start; margin-top: 6px; }
.paper-body .ag-timeline > li, .paper-body .ag-challenges > li, .paper-body .ag-qlist > li { max-width: none; }