/* "Pages & settings" in the Website tab (site-settings.js). Uses the editor's
   colours from styles.css. */
.ss-panel { display: grid; gap: 18px; }
.ss-loading { margin: 0; padding: 40px; border: 1px dashed #b9c7c5; border-radius: var(--radius); color: #4d5d64; text-align: center; }
.ss-bar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto; align-items: end; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 5px 20px rgba(13, 65, 76, .08); }
.ss-state { margin: 0; color: var(--ink); }
.ss-state span { display: block; margin-top: 2px; color: #4d5d64; font-size: .88rem; }
.ss-note { display: grid; gap: 5px; color: var(--teal-deep); font-size: .82rem; font-weight: 800; }
.ss-note input { min-height: 42px; width: 100%; border: 1px solid #9fb3b6; border-radius: 12px; padding: 8px 11px; background: #fff; color: var(--ink); font: inherit; font-weight: 400; }
.ss-note input[type="file"] { padding: 7px; }
.ss-note input:focus-visible, .ss-toggle:focus-visible, .ss-page-open:focus-visible, .ss-view:focus-visible, .ss-text summary:focus-visible { outline: 3px solid var(--coral-bright); outline-offset: 2px; }
.ss-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ss-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.ss-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--card); }
.ss-card h2 { margin: 0 0 6px; font-size: 1.25rem; }
.ss-card h3 { margin: 18px 0 4px; font-size: 1rem; }
.ss-help { margin: 0 0 12px; color: #4d5d64; font-size: .9rem; }
.ss-warning { margin: 0 0 12px; padding: 10px 13px; border-left: 5px solid #8a6400; border-radius: 10px; background: #f8edca; color: #5c4b18; font-size: .92rem; }
.ss-page-list, .ss-part-list, .ss-history, .ss-plan-list { margin: 0; padding: 0; list-style: none; }
.ss-page { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.ss-page:last-child { border-bottom: 0; }
.ss-page-open { flex: 1; min-height: 40px; border: 0; border-radius: 10px; padding: 6px 9px; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.ss-page-open:hover { background: var(--teal-soft); }
.ss-page.is-current .ss-page-open { background: var(--teal-soft); color: var(--teal-deep); }
.ss-page-open small { display: block; color: #5c4b18; font-size: .78rem; font-weight: 700; }
.ss-toggle { flex: none; white-space: nowrap; min-width: 84px; min-height: 38px; border: 2px solid var(--teal); border-radius: 999px; padding: 0 14px; background: #fff; color: var(--teal); font: inherit; font-size: .88rem; font-weight: 900; cursor: pointer; }
.ss-toggle::before { content: "● "; }
.ss-toggle.is-muted { border-color: #8a6400; background: #f8edca; color: #5c4b18; }
.ss-toggle.is-muted::before { content: "○ "; }
.ss-toggle:disabled { border-color: #c5ccca; background: #f0eee8; color: #4d5d64; cursor: not-allowed; }
.ss-parts-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.ss-view { color: var(--teal); font-size: .9rem; font-weight: 800; }
.ss-part { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ss-part.depth-1 { padding-left: 22px; }
.ss-part.depth-2 { padding-left: 44px; }
.ss-part.depth-3 { padding-left: 66px; }
.ss-part.is-muted .ss-part-label { color: #4d5d64; text-decoration: line-through; text-decoration-color: #8a6400; }
.ss-part-label { min-width: 0; overflow-wrap: anywhere; }
.ss-kind { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-deep); font-size: .72rem; font-weight: 900; text-decoration: none; }
.ss-scripted { display: block; margin-top: 2px; color: #5c4b18; font-size: .78rem; text-decoration: none; }
.ss-text { margin-top: 18px; }
.ss-text summary { color: var(--teal); font-weight: 800; cursor: pointer; }
.ss-text-section { margin-top: 14px; color: var(--coral); font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ss-file-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin-top: 14px; }
.ss-file-row .ss-note { flex: 1 1 260px; max-width: 420px; }
.ss-file-row .ss-help { flex-basis: 100%; margin: 0; }
.ss-plan { flex-basis: 100%; }
.ss-plan:empty { display: none; }
.ss-plan h3 { margin: 6px 0 8px; }
.ss-plan-list { display: grid; gap: 6px; margin-bottom: 14px; }
.ss-plan-list li { padding-left: 18px; position: relative; }
.ss-plan-list li::before { content: "•"; position: absolute; left: 3px; color: var(--coral); font-weight: 900; }
.ss-plan-list li.ss-warning { padding-left: 13px; }
.ss-plan-list li.ss-warning::before { content: none; }
.ss-history li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ss-history li:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .ss-bar, .ss-layout { grid-template-columns: 1fr; }
  .ss-bar-actions { justify-content: flex-start; }
}