[hidden] { display: none !important; }
.shell { width: min(100% - 2rem, 68rem); margin: var(--space-8) auto; }
.login-shell { min-height: 90vh; display: grid; place-items: center; padding: var(--space-6); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-large); padding: var(--space-8); box-shadow: var(--shadow-card); }
.login-card { width: min(100%, 28rem); }
.eyebrow { color: var(--color-primary); font-weight: 700; letter-spacing: 0.08em; font-size: 0.8rem; text-transform: uppercase; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: var(--space-4) 0; }
p { color: var(--color-muted); }
form { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
label { display: grid; gap: var(--space-2); font-weight: 600; }
input { width: 100%; min-height: 2.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: var(--space-3); color: var(--color-text); background: var(--color-surface); }
button, .button { display: inline-block; border: 0; border-radius: var(--radius-small); padding: var(--space-3) var(--space-4); background: var(--color-primary); color: var(--color-on-primary); cursor: pointer; font-weight: 600; text-decoration: none; }
button:disabled { opacity: 0.6; cursor: wait; }
.message { min-height: 1.5rem; margin-bottom: 0; }
.error { color: var(--color-danger); }
header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); }
.account { overflow-wrap: anywhere; }
.learning-topic { margin-top: var(--space-6); overflow-wrap: anywhere; }
.checkbox-label { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; }
.checkbox-label input { width: auto; min-height: auto; }
#radar-list { margin-top: var(--space-6); }
#radar-list .card { overflow-wrap: anywhere; }
.metric { font-size: 2rem; }
#dashboard > .card, .dashboard-columns { margin-top: var(--space-6); }
.dashboard-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.phase-counts { columns: 2; padding-left: var(--space-6); }
.phase-counts li { break-inside: avoid; margin-bottom: var(--space-2); }
.stalled-danger { border-left: 5px solid var(--color-danger); }
.stalled-warning { border-left: 5px solid var(--color-warning); }
@media (max-width: 45rem) { .dashboard-columns { grid-template-columns: 1fr; } .phase-counts { columns: 1; } }
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-4); }
.project-card { overflow-wrap: anywhere; }
.project-card h2 { margin-bottom: var(--space-2); }
.project-note { white-space: pre-wrap; }
.view-switch { margin-top: var(--space-4); }
.view-switch [aria-pressed="false"] { color: var(--color-primary); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.kanban-board { display: flex; gap: var(--space-4); overflow-x: auto; padding: var(--space-2) var(--space-1) var(--space-6); align-items: stretch; }
.kanban-column { flex: 0 0 19rem; min-width: 0; border: 2px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--space-3); }
.kanban-column > h2 { font-size: 1rem; min-height: 3rem; margin: var(--space-2) 0 var(--space-4); overflow-wrap: anywhere; }
.kanban-column .project-card { padding: var(--space-4); margin-bottom: var(--space-3); }
.kanban-column .project-card h2 { font-size: 1.2rem; }
.kanban-column .project-card[draggable="true"] { cursor: grab; }
.kanban-empty { min-height: 8rem; text-align: center; padding-top: var(--space-8); }
.drop-target { border-color: var(--color-primary); background: var(--color-surface); }
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.secondary { color: var(--color-primary); background: var(--color-background); border: 1px solid var(--color-border); }
.danger { background: var(--color-danger); }
dialog { width: min(40rem, calc(100% - 2rem)); max-height: 90vh; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-large); padding: var(--space-6); color: var(--color-text); background: var(--color-surface); box-shadow: var(--shadow-card); }
dialog::backdrop { background: var(--color-backdrop); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: 0; border: 0; margin: 0; min-width: 0; }
.full { grid-column: 1 / -1; }
select, textarea { width: 100%; min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-surface); color: var(--color-text); }
textarea { resize: vertical; }
.detail-dialog { width: min(52rem, calc(100% - 2rem)); }
.detail-section { border-top: 1px solid var(--color-border); margin-top: var(--space-6); padding-top: var(--space-4); }
.detail-entry { border: 1px solid var(--color-border); border-radius: var(--radius-small); margin: var(--space-3) 0; padding: var(--space-4); overflow-wrap: anywhere; }
.detail-entry p { white-space: pre-wrap; }
.detail-entry button { margin-right: var(--space-2); }
@media (max-width: 36rem) { .form-grid { grid-template-columns: 1fr; } .card { padding: var(--space-6); } }