/* Before/after project demos */
.demo-notice { background: var(--green-quiet); border-bottom: 1px solid var(--border); padding: 12px 0; font-size: 14px; color: var(--ink); }
.demo-notice strong { font-weight: 600; }
.demo-pair { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }

/* Project stories */
.story-body { max-width: 70ch; display: flex; flex-direction: column; gap: 16px; }
.story-body h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); font-weight: 600; }
.story-body p { color: var(--ink-soft); }
.band--navy .story-body p { color: var(--navy-ink-soft); }
.demo-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; color: var(--ink-soft); }
.demo-list li::marker { color: var(--green-press); }
.card .more { margin-top: auto; }

/* Demo app shell */
.demo-app { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 24px; }
.demo-bar { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.demo-progress { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: dp; }
.demo-progress li { counter-increment: dp; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-soft); }
.demo-progress li::before { content: counter(dp) ". "; }
.demo-progress li.is-done { background: var(--green-quiet); color: var(--ink); border-color: transparent; }
.demo-progress li.is-current { border-color: var(--green); color: var(--ink); font-weight: 600; }
.demo-tally { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }
.demo-tally div { display: flex; flex-direction: column; }
.demo-tally dt { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.demo-tally dd { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px; }
.demo-step { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.demo-step h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600; }
.demo-step h2:focus { outline: none; }
.demo-step > p { color: var(--ink-soft); }
.demo-question { font-weight: 600; color: var(--ink) !important; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.demo-answers { display: flex; flex-wrap: wrap; gap: 10px; }
.demo-answers button, .btn-small { font: inherit; font-size: 14px; padding: 10px 16px; border-radius: 7px; border: 1px solid var(--border); background: var(--ground); color: var(--ink); cursor: pointer; }
.demo-answers button.is-wrong { text-decoration: line-through; opacity: 0.6; }
.demo-answers button:disabled, .btn-small:disabled { cursor: default; }
.demo-answers button.is-right, .folder.is-right { outline: 2px solid var(--green); outline-offset: 2px; }
.demo-feedback { font-size: 15px; min-height: 1.6em; }
.demo-feedback.is-ok { color: var(--green-press); }
.demo-feedback.is-wrong { color: #B5452F; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink-soft); }
.btn--line:hover { border-color: var(--ink); background: var(--green-quiet); }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; }

/* Paper (the "before" world) */
.paper { background: #FBF8EF; color: #2B2A26; border: 1px solid #E3DCC8; border-radius: 4px; padding: 20px 22px; box-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.06); max-width: 520px; font-size: 15px; }
.paper-head { font-family: "Space Grotesk", sans-serif; font-weight: 600; border-bottom: 1px dashed #CFC6AE; padding-bottom: 8px; margin-bottom: 12px; }
.paper-fields { margin: 0; display: grid; gap: 6px; }
.paper-fields div { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.paper-fields dt { color: #6B6556; }
.paper-fields dd { margin: 0; font-weight: 600; text-align: right; }
.paper--note { background: #FFF3A8; border-color: #EADB7A; max-width: 220px; transform: rotate(-1.5deg); }
.paper--check .stub { font-size: 13px; }
.hand { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; color: #1F3F8F; }
.paper--ticket { max-width: 380px; transform: rotate(-0.8deg); background-color: #FDFBF4; background-image: repeating-linear-gradient(transparent 0 31px, #E4DDC9 31px 32px); }
.paper--ticket .paper-head { display: flex; justify-content: space-between; gap: 12px; text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; color: #6B6556; }
.paper--ticket .paper-head .hand { text-transform: none; letter-spacing: 0; font-size: 18px; font-weight: 400; }
.paper--ticket .paper-fields { gap: 0; }
.paper--ticket .paper-fields div { align-items: end; min-height: 32px; }
.paper--ticket .paper-fields dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.paper--ticket .paper-fields dd { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; color: #1F3F8F; font-weight: 400; font-size: 18px; text-align: left; }
.paper--ticket .sig { margin: 10px 0 0; font-size: 12px; color: #6B6556; }
.cabinet { display: flex; flex-wrap: wrap; gap: 10px; }
.drawer { font: inherit; font-weight: 600; padding: 14px 22px; min-width: 120px; border-radius: 6px; border: 1px solid #9AA3A9; background: linear-gradient(#E9ECEE, #CDD3D7); color: #1A2530; cursor: pointer; }
.drawer[aria-expanded="true"] { border-color: var(--green-press); box-shadow: 0 0 0 3px var(--green-quiet); }
.folders { display: flex; flex-wrap: wrap; gap: 8px; }
.folder { font: inherit; font-size: 14px; padding: 10px 14px; border-radius: 2px 10px 2px 2px; border: 1px solid #D9C48A; background: #F3E2AE; color: #3A3220; cursor: pointer; }
.folder.is-checked { opacity: 0.5; }
.inv-line { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid #E6DFCB; }
.inv-line .hand { min-height: 1.4em; }
.btn-small { padding: 6px 12px; font-size: 13px; background: #FFFFFF; color: #1A2530; border-color: #9AA6B0; }
.btn-small:disabled { opacity: 0.6; }
.demo-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 560px; }
.demo-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.demo-fields input, .demo-fields select { font: inherit; padding: 10px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--ground); color: var(--ink); }
.demo-fields input[readonly] { background: #F4F7F9; }
.demo-fields input.is-ok, .demo-fields select.is-ok { border-color: var(--green); }
.demo-fields input.is-wrong, .demo-fields select.is-wrong { border-color: #B5452F; }
.demo-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px; }
.demo-summary li { display: flex; flex-direction: column; font-size: 14px; color: var(--ink-soft); }
.demo-summary b { font-family: "Space Grotesk", sans-serif; font-size: 30px; color: var(--ink); }

/* The system (the "after" world). Always light, so text and buttons stay readable when the visitor uses dark mode. */
.app-window { color-scheme: light; --ink: #1A2530; --ink-soft: #4A5864; --border: #B8C2CB; --ground: #FFFFFF; --surface: #FFFFFF; --green-quiet: rgba(111, 185, 44, 0.14); background: #FFFFFF; color: #1A2530; border: 1px solid #CBD3DA; border-radius: 10px; box-shadow: 0 8px 24px rgba(16,35,52,0.08); padding: 0 20px 20px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.app-title { margin: 0 -20px; padding: 10px 20px; background: #123A5C; color: #FFFFFF; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; }
.app-panel { background: #F4F7F9; border: 1px solid #DDE3E8; border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.app-panel.is-done { background: var(--green-quiet); border-color: transparent; }
.app-panel .demo-feedback { margin: 0; }
.app-price { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.app-fields { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 20px; }
.app-fields div { display: flex; flex-direction: column; gap: 2px; }
.app-fields dt { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #4A5864; }
.app-fields dd { margin: 0; font-weight: 600; }
.app-calc { border-top: 1px solid #DDE3E8; padding-top: 14px; }
.app-calc dd { font-family: "Space Grotesk", sans-serif; font-size: 18px; }
.app-flag { margin: 0; padding: 10px 12px; border-left: 4px solid #D99A1E; background: #FFF6E0; color: #5A4310; border-radius: 4px; font-size: 14px; }
.app-window .demo-feedback.is-ok { color: #3F7A12; }
.app-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.app-table th, .app-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #E3E8EC; }
.app-table thead th { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #4A5864; font-weight: 600; }
.app-table td:last-child, .app-table th:last-child { text-align: right; }
.app-table tr.is-new td { background: var(--green-quiet); font-weight: 600; }
.app-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: #5AA01E; }
.app-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.app-list li { padding: 12px 14px; border: 1px solid #E3E8EC; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.app-list li.is-done { background: var(--green-quiet); border-color: transparent; }
.app-list .demo-fields { flex-basis: 100%; }
.fine-note { margin: 0; font-size: 13px; color: #4A5864; }
@media (max-width: 600px) {
  .inv-line { grid-template-columns: 1fr auto; }
  .inv-line .hand { grid-column: 1 / -1; order: 3; }
  .app-table { font-size: 14px; }
  .app-table th, .app-table td { padding: 8px 6px; }
}