/*
 * Module: app/css/app.css
 * Purpose: Responsive, accessible walking-skeleton shell styling.
 * Satisfies: FR-MH-2, FR-MH-5, FR-CP-2, FR-CP-3, FR-FB-1, FR-FB-2, FR-FB-3, FR-MX-4, NFR-003, C-019.
 */
:root { color-scheme: light; font-family: system-ui, sans-serif; color: #173438; background: #eef6f3; }
body { margin: 0; } header, main { width: min(70rem, calc(100% - 2rem)); margin-inline: auto; } header { padding-block: 2rem 1rem; border-bottom: .25rem solid #70a8a0; } h1 { margin: 0; } .eyebrow { margin: 0; color: #537378; } nav { display: flex; gap: 1rem; margin-top: 1rem; } nav a, .route-back a { color: #205f5b; font-weight: 650; } main { padding-block: 1rem 3rem; } .route-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .route-back { grid-column: 1 / -1; } section { background: white; border: 1px solid #cadbd7; border-radius: .75rem; padding: 1rem; } label { display: block; font-weight: 650; margin-bottom: .35rem; } .row { display: flex; gap: .5rem; } input, textarea, button { font: inherit; } input { min-width: 0; flex: 1; padding: .55rem; } button { border: 0; border-radius: .4rem; padding: .6rem .85rem; color: white; background: #276c68; cursor: pointer; } textarea { box-sizing: border-box; margin-top: .75rem; min-height: 12rem; width: 100%; } li { margin-block: .4rem; }
.standalone { width: min(28rem, calc(100% - 4rem)); margin: 1rem auto; } #auth-form { display: grid; gap: .5rem; } #sign-out-button { margin-left: auto; } #bulk-import-text { min-height: 8rem; } [hidden] { display: none !important; }
/* Red is reserved for errors (KD-007); info feedback stays calm. */
.form-status[data-kind="error"] { color: #a3271e; font-weight: 650; } .form-status[data-kind="info"] { color: #537378; }

/* Quadrant grammar (lilypad + skimmer) */
.quadrant-module { display: grid; gap: .85rem; } .quadrant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.quadrant-cell, .unplaced-tray { border: 1px solid #b7ceca; border-radius: .65rem; padding: .75rem; min-height: 7rem; } .quadrant-do { background: #eef7f1; } .quadrant-schedule { background: #eef4fa; } .quadrant-delegate { background: #faf5e8; } .quadrant-eliminate { background: #f5f1f7; } .unplaced-tray { background: #f4f6f5; }
.quadrant-label { margin: 0 0 .6rem; font-size: 1rem; } .matrix-chip { display: grid; gap: .35rem; margin-block: .45rem; padding: .65rem; background: #fff; border: 1px solid #c4d6d2; border-radius: .5rem; box-shadow: 0 1px 2px rgb(23 52 56 / 8%); } .chip-heading { display: flex; align-items: center; gap: .4rem; }
.rag-dot { width: .7rem; height: .7rem; border-radius: 50%; border: 1px solid #496b6b; flex: 0 0 auto; } .rag-red { background: #c53b3b; } .rag-amber { background: #d99100; } .rag-green { background: #27845d; } .rag-unset { background: #d5dddb; }
.staleness-badge, .waiting-badge { width: fit-content; border-radius: 999px; padding: .15rem .45rem; background: #e7efed; font-size: .82rem; } .milestone-date, .action-date, .project-link-name { font-size: .88rem; } .move-control { margin: .15rem 0 0; font-size: .82rem; font-weight: 650; } .move-control select { margin-left: .25rem; font: inherit; }
.today-toggle { justify-self: start; padding: .35rem .55rem; } .today-toggle.selected { background: #205f5b; outline: 2px solid #99c7c0; } .is-today { border-width: 2px; } .quadrant-notices:empty { display: none; } .wip-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .65rem; border: 1px solid #bd7b1f; border-radius: .5rem; background: #fff8e8; } .button-secondary { color: #173438; background: #dce8e5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 42rem) { .quadrant-grid { grid-template-columns: 1fr; } }
.triage-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
#feedback-text { min-height: 5rem; } .feedback-routing { display: block; font-size: .82rem; margin-top: .3rem; } .feedback-actions { flex-wrap: wrap; }