/* The project stage track on a flow 2 project's home (the old shell's
   home screen, above "Here's what you've missed"; Nolan's rulings of 18 Oct
   2026). Its type and buttons are the home's own (app.css: home-column-title
   for the heading, title-serif for the dialog's question, btn-dark and
   btn-light for its buttons, the Lato and Noto Serif stacks and the 16/20,
   14/18 and 12/16 type steps); this sheet lays the stages out. The done and
   current stages take the hero's green (--change-order); a stage not
   reached is dashed. Six across; on a phone they run down the page. */

.pst-track { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding-bottom: 24px;
             border-bottom: 1px solid var(--sage-90); font-family: var(--font-ui); color: var(--carbon-10); }
.pst-track-head { display: flex; align-items: baseline; }
.pst-list { list-style: none; margin: 0; padding: 0; display: grid;
            grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; }
.pst-stage { display: flex; min-width: 0; }
.pst-box { width: 100%; box-sizing: border-box; text-align: left; display: flex; flex-direction: column; gap: 4px;
           padding: 10px 12px; border: 1px solid var(--sage-90); border-radius: 8px; background: var(--suede-100);
           font-family: var(--font-ui); color: var(--carbon-10); }
button.pst-box { cursor: pointer; }
button.pst-box:hover { background: var(--suede-95); }
button.pst-box:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
button.pst-box:disabled { opacity: 0.45; cursor: not-allowed; }
.pst-stage.is-later .pst-box { border-style: dashed; border-color: var(--sage-70); background: transparent; }
.pst-stage.is-now .pst-box { background: var(--change-order); border-color: var(--change-order); color: var(--carbon-100); }
.pst-tag { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 700;
           color: var(--carbon-40); }
.pst-stage.is-done .pst-tag { color: var(--change-order); }
.pst-stage.is-now .pst-tag { color: var(--carbon-100); }
.pst-name { font-family: var(--font-title); font-size: 14px; line-height: 18px; hyphens: auto; overflow-wrap: break-word; }
.pst-date { font-size: 12px; line-height: 16px; color: var(--carbon-40); }
.pst-stage.is-now .pst-date { color: var(--sage-90); }

/* A refused change, drawn under the track with its Dismiss. */
.pst-refused { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px;
               line-height: 18px; color: var(--danger); }

/* The confirm and the server's question: modal dialogs in the top layer,
   on the home's own panel colour. */
.pst-ask { margin: auto; border: 0; border-radius: 24px; padding: 32px; background: var(--suede-100);
           color: var(--carbon-10); max-width: min(480px, calc(100vw - 32px)); width: 100%; box-sizing: border-box;
           font-family: var(--font-ui); }
.pst-ask[open] { display: flex; flex-direction: column; gap: 20px; }
.pst-ask::backdrop { background: rgb(21 18 15 / 0.45); }
.pst-ask-title { margin: 0; }
.pst-ask-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.pst-ask .btn-dark, .pst-ask .btn-light { min-height: 44px; }
.pst-ask .field-input { width: 100%; box-sizing: border-box; }

@media (max-width: 699px) {
  .pst-list { grid-template-columns: 1fr; }
  .pst-ask-row .btn-dark, .pst-ask-row .btn-light { flex: 1 1 100%; }
}