:root { color-scheme: light; font-family: system-ui, sans-serif; }
body { margin: 0; color: #17201c; background: #f4f6f4; }
header { padding: 1rem; background: #173f32; display: flex; justify-content: space-between; }
header a { color: white; font-weight: 700; text-decoration: none; }
main { width: min(70rem, calc(100% - 2rem)); margin: 2rem auto; }
button, input, select, textarea { font: inherit; }
button, .button { border: 0; border-radius: .35rem; padding: .55rem .8rem; background: #226a51; color: white; text-decoration: none; cursor: pointer; }
.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cards { display: grid; gap: .75rem; }
.card, .run-card, section { display: grid; gap: .35rem; padding: 1rem; border-radius: .5rem; background: white; color: inherit; text-decoration: none; box-shadow: 0 1px 4px #173f321a; }
section { margin-block: 1rem; }
.stacked-form { max-width: 34rem; padding: 1rem; background: white; }
.stacked-form p, .stacked-form label { display: grid; gap: .25rem; }
input, select, textarea { box-sizing: border-box; max-width: 100%; padding: .45rem; }
.inline { display: inline; }
.link { padding: 0; color: #226a51; background: none; }
.link:disabled { cursor: not-allowed; opacity: .45; }
.danger { color: #9d241d; background: none; }
.message.error { color: #9d241d; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .35rem; text-align: left; }
td input { min-width: 5rem; width: 100%; }
fieldset label { display: block; margin-block: .5rem; }
@media (max-width: 42rem) { .heading-row { align-items: flex-start; flex-direction: column; } main { margin-top: 1rem; } }
.field-link { overflow-wrap: anywhere; }
.eyebrow { margin-bottom: -.5rem; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
.hero-progress progress { width: 100%; height: 1rem; }
.field-panel, .field-run { margin-block: .75rem; border: 1px solid #d7ded9; border-radius: .5rem; background: white; }
.field-panel > summary, .field-run > summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; cursor: pointer; }
summary span { display: grid; gap: .2rem; }
summary small, .field-task small { color: #526159; }
.panel-runs, .run-body { padding: 0 .75rem .75rem; }
.task-list { display: grid; gap: .5rem; }
.field-task button { width: 100%; display: flex; gap: .75rem; align-items: center; text-align: left; color: inherit; background: #edf2ef; }
.field-task button > span:last-child { display: grid; }
.field-task .check { display: grid; place-items: center; flex: 0 0 1.6rem; height: 1.6rem; border: 2px solid #226a51; border-radius: .25rem; }
.field-task.complete strong { text-decoration: line-through; color: #526159; }
.print-link { grid-template-columns: 1fr auto; }
.secondary { color: #226a51; background: #e3ece7; }
.schedule-editor { padding: 0; overflow: clip; }
.schedule-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid #d7ded9; }
.schedule-heading h2, .circuit-editor h3 { margin-block: 0 .35rem; }
.schedule-heading .eyebrow, .circuit-editor .eyebrow { margin: 0 0 .15rem; }
.schedule-heading p:last-child { margin: 0; color: #526159; }
.schedule-workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); gap: 1.25rem; padding: 1.25rem; background: #f7f9f7; }
.schedule-grid-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.schedule-grid-heading span { color: #526159; }
.panel-column-headings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .35rem; color: #526159; font-size: .78rem; font-weight: 750; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.panel-position-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.panel-position { min-height: 4.35rem; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .65rem; align-items: center; padding: .65rem; border: 1px solid #cbd6cf; border-left: .35rem solid transparent; background: white; color: #17201c; text-align: left; }
.panel-position:hover, .panel-position:focus-visible { border-color: #226a51; outline: 2px solid #9dc8b7; outline-offset: 1px; }
.panel-position.empty { color: #68766f; background: #f7f9f7; border-left-color: #d7ded9; }
.panel-position.occupied { border-left-color: #226a51; background: #eef7f2; }
.panel-position.continuation { border-left-color: #7cae99; background: #f5faf7; }
.panel-position.selected { box-shadow: 0 0 0 3px #8dc3ad; }
.panel-position.invalid { border-color: #b9382f; border-left-color: #b9382f; background: #fff1ef; }
.position-number { grid-row: 1 / 3; align-self: stretch; display: grid; place-items: center; border-radius: .3rem; background: #e3ece7; font-size: 1.1rem; font-weight: 800; }
.position-description { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.position-meta { min-height: 1em; color: #526159; font-size: .8rem; }
.schedule-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .75rem; color: #526159; font-size: .82rem; }
.schedule-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.legend-swatch { width: .75rem; height: .75rem; border-radius: .15rem; border: 1px solid #cbd6cf; }
.legend-swatch.occupied { background: #226a51; }
.legend-swatch.continuation { background: #bcd8cc; }
.legend-swatch.empty { background: #f7f9f7; }
.circuit-editor { align-self: start; position: sticky; top: 1rem; min-height: 12rem; padding: 1rem; border: 1px solid #d7ded9; border-radius: .5rem; background: white; box-shadow: 0 2px 8px #173f3214; }
.circuit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.circuit-fields label { display: grid; align-content: start; gap: .25rem; font-weight: 650; }
.circuit-fields .wide { grid-column: 1 / -1; }
.circuit-error { min-height: 1.25rem; margin-bottom: 0; color: #9d241d; font-weight: 650; }
.circuit-membership { margin-bottom: 0; color: #526159; font-size: .88rem; }
.schedule-actions { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.25rem; border-top: 1px solid #cbd6cf; background: #fffffff2; backdrop-filter: blur(8px); box-shadow: 0 -3px 10px #173f3214; }
.schedule-actions > div { display: flex; gap: .65rem; }
.schedule-actions > div:first-child { display: grid; gap: .15rem; }
.schedule-actions small { color: #526159; }
.schedule-actions button:disabled { cursor: not-allowed; opacity: .5; }
@media (max-width: 50rem) {
  .schedule-heading, .schedule-actions { align-items: stretch; flex-direction: column; }
  .schedule-workspace { grid-template-columns: 1fr; padding: .85rem; }
  .circuit-editor { position: static; }
  .schedule-actions > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 32rem) {
  .panel-position { min-height: 3.8rem; grid-template-columns: 1.8rem minmax(0, 1fr); padding: .5rem; column-gap: .45rem; }
  .position-description { font-size: .88rem; }
  .circuit-fields { grid-template-columns: 1fr; }
  .circuit-fields .wide { grid-column: auto; }
}