/* Surface roles are inherited by controls, including legacy app components.
   Use data-surface="color" or "dark" on a container; a nested neutral surface
   can opt back out with data-surface="neutral" or .atelier-panel. */
:is(.atelier-surface--color, .atelier-surface--dark, [data-surface="color"], [data-surface="dark"], .timer-panel) {
  --ink: var(--surface-foreground);
  --muted: var(--surface-muted);
  --accent: var(--control-link);
  --focus: var(--control-focus);
  --control-line: var(--control-border);
  --action-bg: var(--control-primary-bg);
  --action-ink: var(--control-primary-text);
  color: var(--surface-foreground);
}
:is(.atelier-panel, [data-surface="neutral"]) {
  --ink: var(--surface-foreground);
  --muted: var(--surface-muted);
  --accent: var(--control-link);
  --focus: var(--control-focus);
  --control-line: var(--control-border);
  --action-bg: var(--control-primary-bg);
  --action-ink: var(--control-primary-text);
  color: var(--surface-foreground);
  background: var(--surface-background);
}
.primary { color: var(--control-primary-text); background: var(--control-primary-bg); }
.primary:hover:not(:disabled) { background: var(--control-primary-hover); }
.primary:active:not(:disabled) { background: var(--control-primary-pressed); }
.secondary { color: var(--control-secondary-text); background: transparent; border-color: var(--control-border); }
.quiet { color: var(--control-secondary-text); background: transparent; }
:is(.secondary, .quiet):hover:not(:disabled),
:is(.secondary, .quiet):active:not(:disabled) { background: var(--control-secondary-hover); }
button:hover:not(:disabled):not(.color-option) { filter: none; }
button:disabled, .atelier-shell :is(.primary, .secondary, .quiet):disabled {
  opacity: 1;
  color: var(--control-disabled-text);
  background: var(--control-disabled-bg);
  border: 1px dashed var(--control-disabled-border);
  cursor: not-allowed;
  box-shadow: none;
}
:is(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--control-focus);
  outline-offset: 4px;
}
:is(.field, .filters, .account-field) :is(input, textarea, select) {
  color: var(--control-field-text);
  background: var(--control-field-bg);
  border-color: var(--control-border);
}
:where([data-surface="color"], [data-surface="dark"], .atelier-surface--color, .atelier-surface--dark)
  :is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
  color: var(--control-field-text);
  background: var(--control-field-bg);
  border-color: var(--control-border);
}
:is(input, textarea)::placeholder { color: var(--control-placeholder); opacity: 1; }
:is(input, select, textarea):disabled {
  color: var(--control-disabled-text);
  background: var(--control-disabled-bg);
  opacity: 1;
  -webkit-text-fill-color: var(--control-disabled-text);
}
:where([data-surface="color"], [data-surface="dark"], .atelier-surface--color, .atelier-surface--dark)
  :is(.atelier-status, .atelier-muted, .muted) { color: var(--surface-muted); }
:where([data-surface="color"], [data-surface="dark"], .atelier-surface--color, .atelier-surface--dark)
  :is(.atelier-status--success, .atelier-status--warning, .atelier-status--danger, .atelier-status--info) { color: var(--surface-foreground); }
:where([data-surface="color"], [data-surface="dark"], .atelier-surface--color, .atelier-surface--dark)
  a:not(.primary, .secondary, .quiet, .atelier-button) { color: var(--control-link); }
:where([data-surface="color"], [data-surface="dark"], .atelier-surface--color, .atelier-surface--dark)
  :is(input[type="checkbox"], input[type="radio"], progress) { accent-color: var(--control-primary-bg); }

/* Audit repairs: controls must not borrow decorative divider colors. */
.pad-nav button, .resource-related-links > a { border-color: var(--control-border); }
.account-device-link, .account-text-link, .account-password-toggle,
.resource-quicklinks a, .resource-text-link, .resource-related-links > a,
.resource-own-result .resource-text-link, .resource-section-heading > .resource-text-link {
  min-height: var(--target-min);
}
.account-password-toggle { top: 3px; }
.account-button--white:hover:not(:disabled), .account-button--submit:hover:not(:disabled) {
  background: var(--control-primary-hover);
}
.account-button--white:active:not(:disabled), .account-button--submit:active:not(:disabled) {
  background: var(--control-primary-pressed);
}
.account-button--outline:hover:not(:disabled) { background: var(--control-secondary-hover); }

/* A quiet instruction column and a single timer/action group remain together. */
.timer-panel, .atelier-screen .timer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .9fr);
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  background: var(--surface-background);
  color: var(--surface-foreground);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
}
.timer-copy { min-width: 0; }
.timer-panel .timer-copy h3 {
  color: var(--surface-foreground);
  font: var(--weight-strong) var(--text-heading)/1.4 var(--font-body);
  margin: 0 0 var(--space-3);
}
.timer-panel .timer-copy p {
  color: var(--surface-muted);
  font-size: var(--text-small);
  line-height: 1.65;
  margin: 0;
  max-width: 32rem;
}
.timer-workspace { display: grid; gap: var(--space-5); min-width: 0; }
.timer-face { text-align: center; min-width: 0; }
.timer-panel .timer-digits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 5rem;
  margin: 0;
  color: var(--surface-foreground);
  font: var(--weight-strong) clamp(3.5rem, 5vw, 4.5rem)/1.1 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  white-space: nowrap;
  overflow-wrap: normal;
}
.timer-digits svg { width: .7em; height: .7em; flex: none; }
.timer-panel .timer-caption { display: block; color: var(--surface-muted); font-size: var(--text-label); margin: var(--space-1) 0 var(--space-4); }
.timer-progress {
  height: .5rem;
  width: 100%;
  border: 1px solid var(--control-border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--control-progress-track);
}
.timer-progress-fill {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: var(--control-progress-fill);
  transition: width 200ms linear;
}
.timer-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.timer-panel .timer-actions > :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3.25rem;
  min-width: 0;
  flex: 1 1 auto;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-strong);
  font-size: var(--text-small);
  line-height: var(--leading-ui);
}
.timer-actions > .primary { flex-grow: 2; }
.timer-actions svg { width: 1.125rem; height: 1.125rem; flex: none; }
.timer-panel .secondary { color: var(--control-secondary-text); background: transparent; border-color: var(--control-border); }
.timer-panel .secondary:hover:not(:disabled), .timer-panel .secondary:active:not(:disabled) { background: var(--control-secondary-hover); }
.timer-panel[data-timer-state="done"] .timer-digits { font-size: 3.5rem; letter-spacing: -.025em; }
.timer-panel[data-timer-state="incubating"] .timer-digits { font-size: clamp(2rem, 4vw, 3.25rem); white-space: normal; }
@media (max-width: 700px) {
  .timer-panel, .atelier-screen .timer-panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) var(--space-5); }
  .timer-panel .timer-copy h3 { font-size: var(--text-lead); }
  .timer-workspace { gap: var(--space-5); }
  .timer-panel .timer-digits { font-size: 4rem; }
  .timer-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .timer-panel .timer-actions > :is(button, a) { width: 100%; min-height: 3.5rem; }
}
/* A clock follows an active test onto other instruction steps. */
.timer-panel + .timer-panel { margin-top: var(--space-4); }
.timer-panel.timer-panel--compact, .atelier-screen .timer-panel.timer-panel--compact {
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}
.timer-panel--compact .timer-copy h3 { margin: 0; font-size: var(--text-small); }
.timer-panel--compact .timer-copy p { display: none; }
.timer-panel--compact .timer-workspace { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.timer-panel--compact .timer-face { flex: 1 1 6rem; }
.timer-panel.timer-panel--compact .timer-digits { min-height: 0; font-size: 1.75rem; white-space: normal; }
.timer-panel--compact .timer-caption { margin: var(--space-1) 0 0; }
.timer-panel--compact .timer-progress { margin-top: var(--space-2); height: .25rem; }
.timer-panel--compact .timer-actions { display: flex; flex: 1 1 auto; gap: var(--space-2); }
.timer-panel.timer-panel--compact .timer-actions > :is(button, a) { min-height: 44px; width: auto; padding: var(--space-3); }
@media (max-width: 700px) {
  .timer-panel.timer-panel--compact, .atelier-screen .timer-panel.timer-panel--compact { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .timer-panel--compact .timer-workspace { gap: var(--space-3); }
  .timer-panel--compact .timer-face { flex-basis: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .timer-progress-fill { transition: none; }
  .timer-panel :is(button, a):active { transform: none; }
}
@media (forced-colors: active) {
  .timer-panel, .atelier-screen .timer-panel { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .timer-panel :is(h3, p, .timer-digits) { color: CanvasText; }
  .timer-panel :is(.primary, .secondary) { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; }
  .timer-panel :is(button, a):focus-visible { outline-color: Highlight; }
  .timer-progress { background: Canvas; border: 1px solid CanvasText; }
  .timer-progress-fill { background: Highlight; }
}
/* Journal guidance and storage controls retain the existing type and palette. */
.information-page{max-width:56rem;margin-inline:auto;overflow-wrap:anywhere}
.information-page h2{margin-top:2rem}
.information-page .inline{margin-top:1.25rem;gap:1rem}
.result-guidance{margin-block:1.5rem;padding:1.25rem;border:1px solid var(--border,#c7cdc7);border-radius:var(--radius,12px)}
.result-guidance article+article{border-top:1px solid var(--border,#c7cdc7);padding-top:1rem;margin-top:1.5rem}
.result-guidance h3{font-size:1.125rem;line-height:1.5}
.result-guidance p{line-height:1.65;overflow-wrap:anywhere}
.guest-import{margin-bottom:1.5rem}
.guest-import button{margin:.5rem .75rem .5rem 0}
.photo .quiet{min-height:48px;position:relative;inset:auto;width:100%}
.danger-action{margin-block:1.5rem}