:root {
  --color-bg: #FAF7F5;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F3EFEA;
  --color-text: #2B1414;
  --color-text-muted: #6B5553;
  --color-primary: #C62828;
  --color-primary-hover: #A61F1F;
  --color-primary-contrast: #FFFFFF;
  --color-border: #E8DCD8;
  --color-accent: #A16207;
  --font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 2.25rem;
  --radius-sm: 4px;
  --radius-md: 10px;
  --motion-fast: 140ms ease;
}

* { box-sizing: border-box; }
html { background: var(--color-canvas, #f7f7f5); }
body {
  margin: 0;
  min-width: 0;
  font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-canvas, #f7f7f5);
  color: var(--color-text, #1a1a1a);
  overflow-wrap: anywhere;
}
img, svg, video, canvas { max-width: 100%; height: auto; }
.proto-screen > * + * { margin-top: var(--space-2, 1rem); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
  color: var(--color-text, #1a1a1a);
  line-height: 1.15;
}
p { color: var(--color-muted, #6b6b6b); line-height: 1.55; }
a { color: var(--color-accent, #2f5d50); }
form {
  display: flex;
  gap: var(--space-1, .5rem);
  align-items: center;
  flex-wrap: wrap;
}
input, textarea, select {
  max-width: 100%;
  min-height: 40px;
  font: inherit;
  padding: var(--space-1, .5rem);
  border: 1px solid var(--color-border, #e0e0dd);
  border-radius: var(--radius, 6px);
  background: var(--color-surface, #fff);
  color: var(--color-text, #1a1a1a);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--color-accent, #2f5d50);
  outline-offset: 1px;
}
button {
  max-width: 100%;
  min-height: 40px;
  font: inherit;
  padding: var(--space-1, .5rem) var(--space-2, 1rem);
  border: 1px solid var(--color-accent, #2f5d50);
  border-radius: var(--radius, 6px);
  background: var(--color-accent, #2f5d50);
  color: var(--color-on-accent, #fff);
  cursor: pointer;
}
button:hover { filter: brightness(.96); }
button:focus-visible { outline: 2px solid var(--color-accent, #2f5d50); outline-offset: 2px; }
button[disabled] { opacity: .5; cursor: not-allowed; }
ul, ol { margin: 0; padding: 0; }
li { list-style-position: inside; }
.card, article, section.panel, [data-component="card"] {
  border: 1px solid var(--color-border, #e0e0dd);
  border-radius: var(--radius, 6px);
  background: var(--color-surface, #fff);
  padding: var(--space-2, 1rem);
}
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface, #fff);
}
th, td {
  padding: var(--space-1, .5rem);
  border-bottom: 1px solid var(--color-border, #e0e0dd);
  text-align: left;
}
.proto-screen {
  max-width: 100%;
  overflow-x: auto;
}
.proto-screen :is(header, main, footer, section, article, aside, nav, form, div, ul, ol) {
  max-width: 100%;
}
.proto-screen :is([class*="grid"], [class*="layout"], [class*="columns"], [class*="split"], [class*="row"]) {
  min-width: 0;
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  form { align-items: stretch; }
  input, textarea, select, button { width: 100%; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}
.is-active, .selected { border-color: var(--color-accent, #2f5d50); }
.is-done, .done { color: var(--color-muted, #6b6b6b); text-decoration: line-through; }



/* Prototype safety rails -- applied after generated component CSS. */
.proto-screen, .proto-screen * {
  box-sizing: border-box;
  max-width: 100%;
}
.proto-screen [style*="width"] {
  max-width: 100% !important;
}
@media (max-width: 720px) {
  .proto-screen {
    overflow-x: hidden;
  }
  .proto-screen :is(header, main, footer, section, article, aside, nav, form, div, ul, ol) {
    min-width: 0 !important;
  }
  .proto-screen :is([class*="grid"], [class*="layout"], [class*="columns"], [class*="split"], [class*="dashboard"], [class*="shell"], [style*="grid-template-columns"]) {
    grid-template-columns: 1fr !important;
  }
  .proto-screen :is([class*="row"], [class*="toolbar"], [class*="actions"], [class*="nav"], [style*="display: flex"], [style*="display:flex"]) {
    flex-wrap: wrap !important;
  }
}