/* The permit life cycle page and the walkthrough. Every rule is prefixed .guide-. */
.guide-section { margin-bottom: 1rem; }
.guide-path { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.guide-path li { display: flex; align-items: center; gap: 0.4rem; }
.guide-path li + li::before { content: "\2192"; color: var(--ink-soft); }
.guide-path a { display: inline-block; padding: 0.25rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.guide-statuses { display: grid; gap: 0.75rem; }
@media (min-width: 900px) { .guide-statuses { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-statuses > h2 { grid-column: 1 / -1; } }
.guide-status { border-left: 4px solid var(--line); min-width: 0; }
.guide-status.guide-kind-start { border-left-color: var(--warn); }
.guide-status.guide-kind-active { border-left-color: var(--accent); }
.guide-status.guide-kind-end { border-left-color: var(--ok); }
.guide-status.guide-kind-closed { border-left-color: var(--ink-soft); }
.guide-status-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.guide-status-head h3 { margin: 0; }
.guide-moves { padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.guide-moves li > span { display: block; }
.guide-who { color: var(--ink-soft); }
.guide-example { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin-top: 0.5rem; }
.guide-open-as { margin: 0.25rem 0 0; }
.guide-steps { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.guide-step h2 { display: flex; gap: 0.5rem; align-items: baseline; margin-top: 0; }
.guide-step h3 { display: flex; gap: 0.5rem; align-items: baseline; margin-top: 0; font-size: 1.05rem; }
.guide-step-n { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 0.95rem; }
.guide-persona { margin: 0 0 0.4rem; font-weight: 600; }
.guide-k { display: block; font-size: 0.76rem; letter-spacing: normal; color: var(--ink-soft); }
.guide-path-card { margin-bottom: 1rem; }
/* The section holds the path cards; it is not a card itself, so the page
   has one card level. */
.guide-path-cards {
  margin-top: 1rem; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.guide-path-list { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 0.75rem; }
@media (min-width: 900px) { .guide-path-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .guide-path-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.guide-path {
  display: grid; gap: 0.4rem; align-content: start; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 0.75rem;
}
.guide-path-title { font-size: 1.05rem; margin: 0; }
.guide-path-line { margin: 0 0 0.6rem; color: var(--fg-2); font-size: 0.92rem; }
.guide-path-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.75rem; }
.guide-path-actions form { margin: 0; }
.guide-path-fresh-form { display: inline-flex; margin: 0; }
.guide-path-minutes { font-size: 0.85rem; }
/* Before you start is one row above the three tracks. The tracks stand side by side from 1000px. */
.guide-before {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.85rem;
  margin: 0 0 1rem; min-width: 0; padding: 0.55rem 0.8rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.guide-before > * { min-width: 0; }
.guide-before-title { font-weight: 600; }
.guide-before-link { color: var(--accent); }
.guide-tracks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; min-width: 0; }
@media (min-width: 1000px) {
  .guide-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.guide-track { min-width: 0; margin-bottom: 0; }
.guide-track .card-h,
.guide-track .card-b,
.guide-track .guide-steps,
.guide-track .guide-step,
.guide-track .guide-path-actions,
.guide-track .guide-open-as { min-width: 0; max-width: 100%; }
.guide-track .btn,
.guide-track .button { white-space: normal; max-width: 100%; height: auto; }
.guide-track .guide-step h3 { min-width: 0; flex-wrap: wrap; }