/* Hallmark · macrostructure: Split Studio / transactional Long Document / functional Workbench
 * genre: editorial · theme: Studio · design-system: design.md · designed-as-app
 * pre-emit critique: P4 H4 E4 S4 R5 V4 · nav: N9 / role-aware rail · footer: Ft2 · enrichment: none
 * contrast: pass (40–41) · honest/chrome/tokens/icons: pass · mobile: pass (34, 49, 50–57)
 */
@import url('/tokens.css');
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
:root { color-scheme: light; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: var(--body-weight) var(--text-base)/var(--line-body) var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; font-weight: var(--display-weight); line-height: var(--line-display); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display-s); margin-block: 0 var(--space-lg); }
h2 { font-size: var(--text-heading); margin-block: var(--space-xl) var(--space-md); }
h3, h4 { font-size: var(--text-lede); margin-block: var(--space-lg) var(--space-sm); }
p { overflow-wrap: anywhere; min-width: 0; max-width: var(--reading-width); margin-block: 0 var(--space-md); }
ul, ol { padding-inline-start: var(--space-md); }
li { margin-block: var(--space-2xs); }
a { color: inherit; text-underline-offset: var(--space-3xs); overflow-wrap: anywhere; }
a:active { text-decoration-thickness: var(--focus-width); }
button, input, textarea, select { font: inherit; color: inherit; }
a, button, summary { touch-action: manipulation; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: var(--space-2xs) var(--space-md); border: var(--rule-fine) solid var(--color-ink); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
button { margin-block-start: var(--space-sm); }
button:active, .button:active { transform: translateY(var(--rule-fine)); }
.secondary { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-control); }
.accent-button { background: var(--color-accent); color: var(--color-accent-ink); }
button:disabled, input:disabled, textarea:disabled, select:disabled, [aria-disabled="true"] { background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; opacity: 0.55; }
[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"] { border-style: dashed; }
[data-state="success"] { border-color: var(--color-accent); }
[data-state="error"], [aria-invalid="true"] { border-color: var(--color-error); }
form { max-width: var(--form-width); margin-block: var(--space-md) var(--space-xl); min-width: 0; }
label { display: block; margin-block: var(--space-md) var(--space-2xs); font-weight: 600; }
input, textarea, select { width: 100%; max-width: 100%; min-width: 0; min-height: var(--control-height); padding: var(--space-2xs) var(--space-sm); border: var(--rule-fine) solid var(--color-control); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); }
textarea { min-height: var(--textarea-height); resize: vertical; }
input:active, textarea:active, select:active { border-color: var(--color-accent); }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"], .checkbox { width: auto; min-height: auto; accent-color: var(--color-accent); }
fieldset { min-width: 0; margin: 0; padding: var(--space-md); border: var(--rule-fine) solid var(--color-rule); }
legend { max-width: 100%; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--text-lede); font-weight: var(--display-weight); }
article { padding-block: var(--space-md); border-block-end: var(--rule-fine) solid var(--color-rule); }
article > :first-child { margin-block-start: 0; }
summary { cursor: pointer; min-height: var(--control-height); padding-block: var(--space-2xs); }
.multiline { white-space: pre-wrap; overflow-wrap: anywhere; }
.muted, .helper, .privacy, .meta { color: var(--color-muted); }
.meta { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.error, [role="alert"] { color: var(--color-error); }
.notice { padding: var(--space-sm); background: var(--color-paper-2); border: var(--rule-fine) solid var(--color-control); border-radius: var(--radius-card); }
.notice p:last-child { margin-block-end: 0; }
.page { max-width: var(--page-width); margin-inline: auto; padding-inline: var(--page-gutter); }
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-lg); border-block-end: var(--rule-fine) solid var(--color-rule); }
.wordmark { display: inline-flex; align-items: center; min-height: var(--control-height); font-family: var(--font-display); font-size: var(--text-wordmark); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1; white-space: nowrap; text-decoration: none; }
.nav-link, .text-link { display: inline-flex; align-items: center; min-height: var(--control-height); line-height: 1; white-space: nowrap; }
.text-link { font-weight: 600; }
.skip-link { position: absolute; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); z-index: var(--z-raised); padding: var(--space-sm); background: var(--color-paper); color: var(--color-ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.public-content { min-width: 0; padding-block: var(--space-xl); }
.public-content:has(.hero), .public-content:has(.form-layout) { padding-block: 0; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-lg); border-block-start: var(--rule-fine) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.foot p { margin: 0; }
.hero { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-3xl); }
.hero-copy { display: grid; align-content: start; gap: var(--space-md); }
.hero h1 { font-size: var(--text-display); margin: 0; }
.hero .lede { font-size: var(--text-lede); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.hero-copy p { margin: 0; }
.next-meetup { display: grid; gap: var(--space-md); align-content: center; padding-block: var(--space-lg); border-block: var(--rule-fine) solid var(--color-rule); }
.next-meetup h2, .next-meetup h3, .next-meetup p { margin: 0; }
.next-meetup h2 { font: 600 var(--text-base)/var(--line-body) var(--font-body); letter-spacing: 0; color: var(--color-accent); }
.next-meetup h3 { font-size: var(--text-heading); }
.section { padding-block: var(--space-xl); border-block-start: var(--rule-fine) solid var(--color-rule); }
.section > h2 { margin-block-start: 0; }
.participate { display: grid; gap: var(--space-xl); }
.participate article { border: 0; padding: 0; }
.participate h3 { font-size: var(--text-heading); }
.form-layout { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl); }
.form-intro h1 { margin-block-end: var(--space-md); }
.form-body { min-width: 0; }
.intake-form { display: grid; gap: var(--space-xl); margin: 0; }
.intake-form fieldset { border: 0; padding: 0; }
.intake-form legend { margin-block-end: var(--space-sm); }
.field { margin-block-end: var(--space-sm); }
.field label { margin-block-start: var(--space-sm); }
.helper { min-height: 1lh; font-size: var(--text-sm); margin-block: var(--space-2xs) 0; }
.helper.error { color: var(--color-error); }
.form-actions { display: grid; justify-items: start; gap: var(--space-sm); }
.form-actions p { margin: 0; }
.auth-document, .receipt { max-width: var(--form-width); padding-block: var(--space-lg) var(--space-2xl); }
.auth-document .secondary { margin-block-start: 0; }
.auth-document form { margin-block-end: var(--space-md); }
.workspace { display: grid; gap: var(--space-xl); padding-block: var(--space-lg) var(--space-xl); }
.organiser-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); }
.organiser-nav li { margin: 0; }
.organiser-nav a { display: inline-flex; align-items: center; min-height: var(--control-height); white-space: nowrap; line-height: 1; color: var(--color-muted); text-decoration: none; }
.organiser-nav a[aria-current] { color: var(--color-accent); font-weight: 600; text-decoration: underline; }
.account { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-block-start: var(--space-sm); padding-block-start: var(--space-sm); border-block-start: var(--rule-fine) solid var(--color-rule); }
.account p, .account form, .account button { margin: 0; }
.account p { font-size: var(--text-sm); color: var(--color-muted); }
.work-content { min-width: 0; }
.work-head { padding-block: var(--space-md) var(--space-lg); border-block-end: var(--rule-fine) solid var(--color-rule); }
.work-head p { margin: 0; }
.work-section { padding-block: var(--space-lg); }
.work-section h2 { margin-block: 0 var(--space-md); }
.work-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.work-panels { display: grid; gap: var(--space-lg); }
.work-panels section { padding: var(--space-md); background: var(--color-paper-2); color: var(--color-ink); border-radius: var(--radius-card); }
.work-panels h2 { font-size: var(--text-lede); margin-block: 0 var(--space-sm); }
@media (hover: hover) {
  a:hover { text-decoration-thickness: var(--focus-width); }
  button:hover, .button:hover { background: var(--color-ink-2); color: var(--color-paper); }
  input:hover, textarea:hover, select:hover { background: var(--color-paper-2); color: var(--color-ink); }
  button:disabled:hover { background: var(--color-paper-2); color: var(--color-muted); }
}
@media (min-width: 40rem) {
  .participate, .work-panels { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-3xl); }
  .form-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-3xl); }
  .form-intro { align-self: start; position: sticky; inset-block-start: var(--space-lg); }
  .workspace { grid-template-columns: var(--rail-width) minmax(0, 1fr); gap: var(--space-2xl); }
  .organiser-nav { border-inline-end: var(--rule-fine) solid var(--color-rule); padding-inline-end: var(--space-lg); }
  .organiser-nav ul { display: grid; gap: var(--space-3xs); }
  .account { display: grid; gap: var(--space-sm); margin-block-start: var(--space-lg); padding-block-start: var(--space-md); }
  .section { padding-block: var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  button, .button { transition: none; }
  button:active, .button:active { transform: none; }
}

/* Dense Workbench forms retain the shared type, colour and control system. */
.work-content p, .work-content li, .work-content dd, .work-content dt, .work-content summary { overflow-wrap: anywhere; }
.work-content h1 { font-size: var(--text-heading); }
.work-content h2 { font-size: var(--text-lede); padding-block-start: var(--space-md); border-block-start: var(--rule-fine) solid var(--color-rule); }
.work-content form { padding-block: var(--space-sm); }
.work-content button { font-size: var(--text-sm); padding-inline: var(--space-xs); }
.work-content dl { max-width: var(--reading-width); margin-block: var(--space-lg); }
.work-content dt { font-weight: 600; margin-block-start: var(--space-md); }
.work-content dd { margin: var(--space-2xs) 0 var(--space-sm); white-space: pre-wrap; }
.work-content details { max-width: var(--reading-width); padding-block: var(--space-sm); border-block: var(--rule-fine) solid var(--color-rule); }
.work-content details + details { border-block-start: 0; }
.work-content label:has(.checkbox) { font-weight: 400; }

.event-document h2 { font-size: var(--text-lede); }

/* Fixed action labels reflow as whole affordances; record titles still wrap. */
.work-content .text-link { font-size: var(--text-sm); }