.planner-intro,
.planner-callout {
  border-left: 4px solid var(--md-primary-fg-color);
  background: var(--md-code-bg-color);
  padding: .85rem 1rem;
  margin: 1rem 0;
  border-radius: .2rem;
}

.planner-field { display: block; font-weight: 650; margin: 1rem 0 .35rem; }
.planner-control {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2.7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .3rem;
  padding: .5rem .65rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font: inherit;
}
.planner-control:focus-visible,
.planner-button:focus-visible,
.planner-details summary:focus-visible {
  outline: 3px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}
.planner-callout p:last-child,
.planner-details-body p:last-child { margin-bottom: 0; }
.planner-details { border: 1px solid var(--md-default-fg-color--lightest); border-radius: .35rem; padding: .6rem .8rem; margin: 1rem 0; }
.planner-details summary { cursor: pointer; font-weight: 650; }
.planner-details-body { padding: .25rem .2rem 0; }
.planner-table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
.planner-table { border-collapse: collapse; width: 100%; min-width: 620px; }
.planner-table th, .planner-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); vertical-align: middle; }
.planner-table th { font-size: .9em; }
.planner-table input[type="number"] { width: 8rem; }
.planner-table input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--md-primary-fg-color); }
.planner-general-inputs { max-width: 32rem; margin: 1rem 0 1.5rem; }
.planner-general-inputs small { display: block; margin-top: .4rem; opacity: .8; }
.planner-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.planner-card { border: 1px solid var(--md-default-fg-color--lightest); border-radius: .4rem; padding: .85rem 1rem; }
.planner-card h3 { margin-top: 0; }
.planner-table .planner-number { width: 7rem; }
.planner-admin[hidden] { display: none; }
.planner-editors { display: grid; gap: 1rem; margin: 1.2rem 0; }
.planner-editor { border: 1px solid var(--md-default-fg-color--lightest); border-radius: .4rem; padding: .8rem 1rem; }
.planner-editor h3 { margin-top: 0; }
.planner-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .4rem .9rem; }
.planner-editor-field { display: grid; gap: .25rem; }
.planner-editor-field label { font-size: .88em; font-weight: 600; }
.planner-editor-field input, .planner-editor-field select { width: 100%; }
.planner-yaml-editor { box-sizing: border-box; display: block; width: 100%; min-height: 22rem; resize: vertical; padding: .75rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .3rem; background: var(--md-code-bg-color); color: var(--md-default-fg-color); font: .85rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.planner-yaml-editor-compact { min-height: 8rem; }
.planner-activity-group { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--md-default-fg-color--lightest); }
.planner-activity-group h4 { margin: 0 0 .4rem; }
.planner-hint { font-size: .9em; opacity: .82; }
.planner-status { min-height: 1.5em; }
.planner-validation:empty { display: none; }
.planner-validation { padding: .7rem .9rem; margin: .8rem 0; border-radius: .3rem; background: var(--md-code-bg-color); }
.planner-validation[data-invalid="true"] { border-left: 4px solid #c0392b; }
.planner-validation[data-invalid="false"] { border-left: 4px solid #238636; }
.planner-validation ul { margin-bottom: 0; }
.planner-button { border: 0; border-radius: .3rem; padding: .7rem 1rem; background: var(--md-primary-fg-color); color: var(--md-primary-bg-color); font: inherit; font-weight: 650; cursor: pointer; }
.planner-button:hover { filter: brightness(1.08); }
.planner-button:disabled { opacity: .5; cursor: not-allowed; }
.planner-export-links a { display: inline-block; margin: .6rem .8rem .2rem 0; }
.planner-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .planner-table th, .planner-table td { padding: .45rem .35rem; }
  .planner-table input[type="number"] { width: 6rem; }
  .planner-control { width: 100%; }
}