/* Production & shipping planner. Built on styles.css tokens so it reads as
   part of the sourcing calendar page rather than an embedded widget.

   Namespaced `psp-`, not `pp-`: the site already uses `pp` as a body class
   on every tool page, so a bare `.pp` rule here styled the whole document. */

.psp {
   background: var(--bg-card);
   border: 1px solid var(--border-dark, rgba(255, 255, 255, .08));
   border-radius: var(--radius-lg, 16px);
   padding: 28px;
   margin: 0 auto 56px;
   max-width: 820px;
}

.psp__intro { margin-bottom: 22px; }
.psp__intro h2 {
   font-size: 22px;
   font-weight: 700;
   color: var(--text-bright);
   margin: 0 0 8px;
   letter-spacing: -.02em;
}
.psp__intro p {
   font-size: 14.5px;
   line-height: 1.65;
   color: var(--text-mid);
   margin: 0;
   max-width: 62ch;
}

/* ── inputs ─────────────────────────────────────────────────────────────── */
.psp-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
   gap: 14px;
}
.psp-field { display: flex; flex-direction: column; gap: 6px; }
.psp-field > span {
   font-size: 12.5px;
   font-weight: 600;
   color: var(--text-mid);
}
.psp-field > span small {
   display: block;
   font-weight: 500;
   font-size: 11.5px;
   color: var(--text-dim);
   margin-top: 2px;
}
.psp-field input,
.psp-field select {
   background: var(--bg-black);
   border: 1px solid var(--border-dark, rgba(255, 255, 255, .12));
   border-radius: 10px;
   padding: 10px 12px;
   color: var(--text-bright);
   font: inherit;
   font-size: 14.5px;
   font-variant-numeric: tabular-nums;
   width: 100%;
}
.psp-field input:focus,
.psp-field select:focus {
   outline: none;
   border-color: rgba(240, 165, 30, .55);
}

.psp-assumptions {
   margin-top: 18px;
   border-top: 1px solid var(--border-dark, rgba(255, 255, 255, .08));
   padding-top: 18px;
}
.psp-assumptions summary {
   cursor: pointer;
   font-size: 13.5px;
   font-weight: 650;
   color: var(--gold-text, #F5BC45);
   list-style: none;
}
.psp-assumptions summary::-webkit-details-marker { display: none; }
.psp-assumptions summary::before { content: '▸ '; }
.psp-assumptions[open] summary::before { content: '▾ '; }
.psp-assumptions > .psp-grid { margin-top: 16px; }

/* ── result ─────────────────────────────────────────────────────────────── */
.psp-out {
   margin-top: 26px;
   border-top: 1px solid var(--border-dark, rgba(255, 255, 255, .08));
   padding-top: 24px;
}
.psp-headline {
   display: flex;
   align-items: baseline;
   gap: 14px;
   flex-wrap: wrap;
   margin-bottom: 22px;
}
.psp-headline__label {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--gold);
   flex-basis: 100%;
}
.psp-headline__date {
   font-size: clamp(26px, 5vw, 34px);
   font-weight: 800;
   color: var(--text-bright);
   letter-spacing: -.03em;
   font-variant-numeric: tabular-nums;
}
.psp-slack {
   font-size: 13px;
   font-weight: 700;
   padding: 5px 11px;
   border-radius: 100px;
   white-space: nowrap;
}
.psp-slack.is-ok    { color: #4ADE80; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .3); }
.psp-slack.is-tight { color: #F5BC45; background: var(--gold-pale); border: 1px solid rgba(240, 165, 30, .32); }
.psp-slack.is-late  { color: #FF8A7A; background: var(--red-pale); border: 1px solid var(--red-border); }

.psp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.psp-step {
   display: flex;
   gap: 16px;
   align-items: baseline;
   padding: 11px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.psp-step:last-child { border-bottom: 0; }
.psp-step__date {
   flex: none;
   width: 118px;
   font-size: 14px;
   font-weight: 700;
   color: var(--text-bright);
   font-variant-numeric: tabular-nums;
}
.psp-step__label {
   font-size: 14px;
   color: var(--text-mid);
   line-height: 1.5;
}
.psp-step__label small {
   display: block;
   font-size: 12.5px;
   color: var(--text-dim);
   margin-top: 2px;
}

.psp-warn {
   margin-top: 20px;
   background: var(--red-pale);
   border: 1px solid var(--red-border);
   border-radius: 12px;
   padding: 16px 18px;
}
.psp-warn__title {
   margin: 0 0 10px;
   font-size: 14px;
   font-weight: 700;
   color: #FF8A7A;
}
.psp-warn ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.psp-warn li { font-size: 13.5px; color: var(--text-mid); line-height: 1.55; }
.psp-warn li strong { color: var(--text-bright); }
.psp-warn li small {
   display: block;
   font-size: 12.5px;
   color: var(--text-dim);
   margin-top: 3px;
   line-height: 1.5;
}

.psp-beyond {
   margin-top: 16px;
   padding: 12px 14px;
   background: var(--gold-pale);
   border: 1px solid rgba(240, 165, 30, .3);
   border-radius: 10px;
   font-size: 13px;
   line-height: 1.6;
   color: var(--gold-text, #F5BC45);
}

.psp-note {
   margin: 20px 0 0;
   font-size: 12.5px;
   line-height: 1.6;
   color: var(--text-dim);
}

@media (max-width: 620px) {
   .psp { padding: 20px 16px; }
   .psp-step { flex-direction: column; gap: 2px; }
   .psp-step__date { width: auto; }
}

/* Add-to-calendar. The one part of a plan that outlives the browser tab. */
.psp-ics {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12.5px;
   font-weight: 650;
   color: var(--gold-text, #F5BC45);
   border: 1px solid rgba(240, 165, 30, .32);
   background: var(--gold-pale);
   border-radius: 100px;
   padding: 6px 13px;
   text-decoration: none;
}
.psp-ics::before { content: '📅'; font-size: 11px; }
.psp-ics:hover { border-color: rgba(240, 165, 30, .55); }
.psp-ics:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }