/* * Every breakpoint lives here, loaded last so it always wins. See 01_tokens.css for the * load-order contract. * * Breakpoints (max-width, largest first so the cascade narrows): * 1024px tablet — tighten the page gutter, nothing structural * 768px phone — the real one: header compresses, tables become cards, grids collapse * 480px small phone — brand text drops, action rows go full width * * Plus a `pointer: coarse` block for hit areas, which is a capability question rather than * a width one (a touchscreen laptop at 1400px still wants a 44px button). * * ── The responsive table pattern ──────────────────────────────────────────── * A table opts in by carrying BOTH `.table-cards` and a `data-label` on every . Below * 768px the is dropped and each becomes a card whose cells are key/value rows, * the key coming from `data-label` via a ::before. Two escape hatches on individual cells: * * .cell-headline full width, no key, larger — the one thing that identifies the row * .cell-optional hidden on phones — recoverable elsewhere, not worth a row * * A table WITHOUT `.table-cards` keeps its normal shape and scrolls horizontally inside * `.table-wrap`. That is the right answer for anything whose columns are not known ahead of * time and cannot be labelled honestly. */ /* --- Tablet --- */ @media (max-width: 1024px) { :root { --container-pad: 1.25rem; } } /* --- Phone --- */ @media (max-width: 768px) { :root { --container-pad: 0.9rem; } /* Top bar: two destinations and a sign-out have to share one row, so the user's name and role chip go (both are recoverable — the role gates what is on screen anyway). */ .site-header-inner { gap: var(--gap-3); } .site-nav { gap: 0; overflow-x: auto; scrollbar-width: none; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { padding: 0.4rem 0.55rem; } .current-user .name, .role-chip { display: none; } .container { padding: var(--gap-4) var(--container-pad) 3rem; } h1 { font-size: 1.35rem; } .page-header { margin-bottom: var(--gap-4); gap: var(--gap-3); } /* Page-level actions become the full-width targets they are on a phone — these are the only entry points to the two flows now that they have left the top bar. */ .page-actions { width: 100%; } .page-actions > * { flex: 1 1 10rem; } /* --- Tables as cards --- */ .table-cards { display: block; border: 0; background: transparent; box-shadow: none; overflow: visible; } .table-cards thead { display: none; } .table-cards tbody { display: block; } /* Flex column rather than block so `.cell-headline` can be hoisted to the top of the card with `order` — the identifying cell is rarely the first column (the submissions index leads with Ref), and reordering by :nth-child would tie this file to a column order the views are free to change. */ .table-cards tr { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 0.6rem; padding: 0.35rem 0; } .table-cards tr:last-child { margin-bottom: 0; } .table-cards .row-link:hover td { background: transparent; } .table-cards .row-link:active { box-shadow: var(--shadow-lift); } .table-cards td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; /* Values sit against the start of their column. Without this a status pill — an inline-flex element, and therefore a stretched grid item — spans the whole card and reads as a progress bar rather than a badge. */ justify-items: start; gap: var(--gap-3); border-top: 0; padding: 0.3rem 0.85rem; font-size: 0.9rem; } .table-cards td::before { content: attr(data-label); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } /* An empty data-label (an actions column, say) keeps its cell but drops the key column. */ .table-cards td[data-label=""] { grid-template-columns: minmax(0, 1fr); padding-top: var(--gap-2); } .table-cards td[data-label=""]::before { content: none; } .table-cards .cell-headline { order: -1; display: block; font-size: 1rem; font-weight: 700; color: var(--navy); padding: var(--gap-2) 0.85rem 0.35rem; } .table-cards .cell-headline::before { content: none; } .table-cards .cell-optional { display: none; } .table-cards .cell-nowrap { white-space: normal; } .table-cards .row-actions { display: flex; } .table-cards .row-actions > * { flex: 1 1 auto; justify-self: stretch; } .table-cards td[data-label=""] > * { justify-self: stretch; } /* Cell content that is itself an input (the file-note row editor) opts back out of the start-alignment above and fills its value column. */ .table-cards td input[type="text"] { max-width: none; justify-self: stretch; } /* --- Grids that must not stay multi-column --- */ .submission-meta, .user-meta { gap: 0.6rem var(--gap-4); padding: 0.9rem var(--gap-4); } .section-fields { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } .section-fields dd { margin-bottom: var(--gap-2); } .classification-panel .submission-meta, .classification-confirm-panel .submission-meta { grid-template-columns: minmax(0, 1fr); } /* --- Panels --- */ .progress-panel, .review-panel, .feedback-panel, .classification-confirm-panel, .classification-panel, .compliance-panel, .draft-preview { padding: 0.9rem var(--gap-4); } .form-section { padding: 0.9rem var(--gap-4) var(--gap-2); } .edit-section { padding: 0.8rem var(--gap-4) var(--gap-2); } /* The stepper reads as a vertical checklist rather than ten wrapped chips. */ .progress-steps { flex-direction: column; align-items: flex-start; gap: 0.3rem; } .progress-steps .step { padding-right: 0; font-size: 0.85rem; } /* One scrolling strip instead of a 25-pill block taller than the note it indexes. */ .note-index { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--gap-1); /* Bleed to the gutter so the strip reads as scrollable rather than clipped. */ margin-inline: calc(var(--container-pad) * -1); padding-inline: var(--container-pad); } .note-index::-webkit-scrollbar { display: none; } .note-index li { flex: none; } /* Forms: nothing is narrower than the column it sits in. */ input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="file"], select, textarea { max-width: none; } .classification-form .field { max-width: none; } .field-inline { gap: 0; } .field-inline > .field { flex: 1 1 100%; } .actions > .button-primary, .actions > .button-secondary, .actions > input[type="submit"] { flex: 1 1 auto; } /* Review actions stack into a column of full-width targets — "Approve file note" is a consequential action and should not be a 90px tap target next to three siblings. `button_to` wraps its control in its own
, so the form has to become a flex box and its child stretched: the child is a