/* shell.css — the outer frame: app grid, main column, page wrappers, card */
.app{display:flex;min-height:100vh}
/* Dimmed backdrop for the mobile nav drawer; only ever shown by responsive.css. */
.scrim{display:none}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column}

main{flex:1;min-width:0;padding:26px 28px 56px;overflow-x:hidden}
.panel{animation:panelIn 320ms var(--ease-spring) both}
.wrap{max-width:1200px;margin:0 auto}
.wrap.narrow{max-width:720px}
.wrap.mid{max-width:1040px}
.wrap.detail{max-width:1140px}

/* The one surface everything else sits on. A hairline plus a shadow that is
   almost too faint to name: on a light ground the border is what separates the
   card, and the shadow only lifts it a millimetre. Both are needed — the
   shadow alone disappears in dark mode, the border alone looks drawn. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs)}
.stack{display:flex;flex-direction:column;gap:18px}

/* generic card padding and headings, shared by every view */
.pad{padding:24px 26px}
.card-title{font-size:16px;font-weight:600;letter-spacing:-.015em}
.card-sub{font-size:13px;color:var(--ink-4);line-height:1.45;margin-top:3px}