/* MBC Hub app styles, layered on brand/tokens/tokens.css and brand/tokens/components.css, which
   templates/base.html loads first. Only token variables are used here: no hex values, no new
   radii, no new shadows, no second font. Patterns that components.css does not provide are
   marked "New pattern, needs brand review" so they can be reviewed against the brand. */

/* ---------- Base text (the brand has no 700 weight and no unclassed heading styles) ---------- */
h1, h2, h3, h4 { font-weight: 500; margin: 0 0 var(--space-2); }
strong, b { font-weight: 600; }
p { margin: 0 0 var(--space-3); }
a { color: var(--link); }
small, .mbc-small { font-size: 14px; line-height: 20px; }
.muted { color: var(--ink-muted); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.break { overflow-wrap: anywhere; }
.mono { font-family: var(--font-mono); font-size: 14px; }
/* UI-1: the wrapper is the containing block for absolutely positioned descendants (the
   visually-hidden header labels), so its own overflow-x clips them instead of the page. */
.mbc-table-wrap { position: relative; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Layout helpers ---------- */
.row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.row .grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-head h2 { margin: 0; }
.mbc-section > .mbc-card + .mbc-card { margin-top: var(--space-4); }
.messages { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.sidebar-home { display: inline-block; line-height: 0; }
.sidebar-foot { margin-top: auto; }
.mbc-btn--block { width: 100%; }
/* Working state (static/js/app.js sets aria-busy on submit). components.css draws the bar in the
   primary button's text color, which is invisible on outlined and text buttons; use their own ink. */
.mbc-btn--secondary[aria-busy="true"]::after, .mbc-btn--tertiary[aria-busy="true"]::after { background: var(--olive); }
.mbc-btn--destructive[aria-busy="true"]::after { background: var(--danger); }
.confirm-form { display: inline; }
.mbc-page-head .mbc-h1 .mbc-badge { vertical-align: middle; margin-left: var(--space-2); }

/* ---------- Forms: Django widgets get the brand field styles through the ui template tag ---------- */
.form-card { max-width: 560px; }
.mbc-field--check label { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); font: 400 16px/24px var(--font-sans); }
.mbc-checkbox { width: 18px; height: 18px; margin: 0; accent-color: var(--olive); }
.mbc-input--file { padding: 6px 12px; font-size: 14px; }
.mbc-field .mbc-textarea { min-height: 96px; }
.search { align-items: flex-end; margin-bottom: var(--space-6); }
.search .mbc-field { flex: 1 1 280px; max-width: 480px; }

/* ---------- Lists of records inside a section or card ---------- */
.records { list-style: none; margin: 0; padding: 0; }
.records > li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.records > li:last-child { border-bottom: 0; padding-bottom: 0; }
.records > li:first-child { padding-top: 0; }
.records--done { color: var(--ink-muted); }
.records--done .title { text-decoration: line-through; }
.mbc-table .cell-action { text-align: right; white-space: nowrap; }
.mbc-table .cell-action form { display: inline; }
.mbc-table .mbc-btn--tertiary { min-height: 32px; }

/* ---------- Status filter row. New pattern, needs brand review. ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.filters a[aria-current="page"] { background: var(--olive-soft); }

/* ---------- Engagement phase strip. New pattern, needs brand review. ---------- */
.engagement + .engagement { margin-top: var(--space-3); }
.phases { display: flex; gap: 2px; margin-top: var(--space-2); max-width: 480px; }
.phases span { flex: 1; text-align: center; font: 500 11px/16px var(--font-sans); padding: var(--space-1) 2px; background: var(--surface-sunken); color: var(--ink-muted); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.phases .done { background: var(--olive-soft); color: var(--olive); border-color: transparent; }
.phases .current { background: var(--olive); color: var(--on-olive); border-color: transparent; }

/* ---------- Collapsible add-forms (session entry, file upload, upload instructions) ---------- */
details.add { margin-bottom: var(--space-4); }
details.add summary { cursor: pointer; color: var(--olive); font: 500 14px/20px var(--font-sans); min-height: 24px; }
details.add[open] summary { margin-bottom: var(--space-4); }
details.done-list summary { cursor: pointer; color: var(--ink-muted); font: 500 14px/20px var(--font-sans); margin: var(--space-4) 0; }

/* ---------- Share links under a file, and the upload-link box ---------- */
.share-links { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 0; }
.share-links .row { gap: var(--space-2); }
.share-links input[readonly], .linkbox input[readonly] { font-family: var(--font-mono); font-size: 14px; flex: 1 1 240px; }
.linkbox { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.mbc-select--inline { width: auto; min-width: 120px; }

/* ---------- Article body (Markdown). New pattern, needs brand review. ---------- */
.prose { max-width: 70ch; }
.prose h1 { font: 500 28px/36px var(--font-sans); margin: var(--space-6) 0 var(--space-2); }
.prose h2 { font: 500 20px/28px var(--font-sans); margin: var(--space-6) 0 var(--space-2); }
.prose h3, .prose h4 { font: 500 16px/24px var(--font-sans); margin: var(--space-4) 0 var(--space-2); }
.prose img { max-width: 100%; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.prose pre { background: var(--surface-sunken); padding: var(--space-3); overflow-x: auto; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 14px; line-height: 20px; }
.prose code { font-family: var(--font-mono); font-size: 14px; background: var(--surface-sunken); padding: 1px 4px; border-radius: var(--radius-sm); }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--space-2) var(--space-3); text-align: left; }
.prose th { background: var(--surface-sunken); font-weight: 500; }
.prose blockquote { margin: 0 0 var(--space-3); padding-left: var(--space-3); border-left: 2px solid var(--line-strong); color: var(--ink-muted); }

/* ---------- Public pages: login, client upload, expired link ---------- */
.public { max-width: 560px; margin: 0 auto; padding: var(--space-12) 20px var(--space-16); display: flex; flex-direction: column; gap: var(--space-6); box-sizing: border-box; }
.public .brand { display: block; width: 160px; height: auto; }
.public .mbc-page-head { margin-bottom: 0; }
.public .mbc-field { max-width: none; }
.login { max-width: 440px; }