/* Herbie tokens and shared components. Contract: contracts/views/rules.md (invariant 6)
   The Claude app's palette: warm ivory and charcoal, a clay accent, serif for content,
   sans for the interface. The one loud thing is still who made what (person / agent / model).
   MCP App pages inline this file, so views look the same in Claude as in the shell. */
:root {
  --paper: #faf9f5;        /* the page */
  --sheet: #ffffff;        /* cards, windows, inputs */
  --side: #f5f4ee;         /* the sidebar */
  --hover: rgb(31 30 29 / .06);
  --ink: #141413;
  --mute: #73726c;
  --rule: rgb(31 30 29 / .13);
  --accent: #c96442;       /* clay: what calls for you */
  --needs-you: #c96442;
  --by-human: #3d3d3a;
  --by-agent: #c96442;     /* agents here are mostly Claude */
  --by-model: #7a5fc0;
  --danger: #b4371f;
  --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 6px 24px rgb(0 0 0 / .06);
  --radius: 12px;
  --serif: "Anthropic Serif", "Tiempos Text", Copernicus, ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --sans: "Anthropic Sans", "Styrene B", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --measure: 68ch;
  --gap: 1.25rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #262624; --sheet: #30302e; --side: #1f1e1d; --hover: rgb(250 249 245 / .07);
    --ink: #faf9f5; --mute: #9c9a92; --rule: rgb(222 220 209 / .14);
    --accent: #d97757; --needs-you: #d97757; --by-human: #e5e4df; --by-agent: #d97757; --by-model: #a58ff0; --danger: #e0775c;
    --shadow: 0 1px 2px rgb(0 0 0 / .25), 0 8px 28px rgb(0 0 0 / .3);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

main { padding: 2.5rem clamp(1rem, 4vw, 3rem); max-width: calc(var(--measure) + 12rem); min-width: 0; }
main h2 { font: 400 2rem/1.2 var(--serif); letter-spacing: -.01em; margin: 0 0 .4rem; overflow-wrap: anywhere; }
.sub { color: var(--mute); margin: 0 0 1.75rem; }
section + section { margin-top: 2.25rem; }
section > h3 { font: 600 .8rem/1.3 var(--sans); color: var(--mute); margin: 0 0 .6rem; }
.count { color: var(--needs-you); font-weight: 600; font-size: .85em; }

/* who made it: the mark beside every version, list row and note */
.by { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--mute); }
.by::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--by-human); }
.by.agent::before { background: var(--by-agent); }
.by.model::before { background: var(--by-model); }
.by.algorithm::before { background: transparent; border: 1.5px solid var(--mute); }

.rows { list-style: none; margin: 0; padding: .25rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.rows li { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; padding: .7rem .85rem; border-radius: 8px; }
.rows li > * { min-width: 0; overflow-wrap: anywhere; }
.rows li + li { box-shadow: 0 -1px 0 var(--rule); }
.rows li:hover { background: var(--hover); }
.rows .title { font-family: var(--serif); font-size: 1.05rem; }
.empty { color: var(--mute); padding: 1rem 0; }

dl.fields { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .45rem 1rem; margin: 0; }
dl.fields dt { color: var(--mute); }
dl.fields dd { margin: 0; overflow-wrap: anywhere; }
.prose { font: 1.1rem/1.7 var(--serif); max-width: var(--measure); white-space: pre-wrap; }
.preview { max-width: 100%; max-height: 28rem; border-radius: var(--radius); display: block; margin-bottom: 1.25rem; }

form.cap { display: grid; gap: .9rem; max-width: 36rem; }
form.cap label { display: grid; gap: .3rem; }
form.cap .hint { color: var(--mute); font-size: .85rem; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: .5rem .7rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--rule)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
textarea { min-height: 7rem; font-family: var(--serif); }
button { font: 500 .9rem var(--sans); padding: .5rem .95rem; border-radius: 8px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; transition: background .12s, border-color .12s; }
button:hover { opacity: .9; }
button:disabled { opacity: .5; cursor: default; }
button.quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
button.quiet:hover { background: var(--hover); opacity: 1; }
button.reject { background: transparent; color: var(--danger); border-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.notice { padding: .75rem 1rem; border: 1px solid var(--rule); border-left: 3px solid var(--needs-you); border-radius: 10px; background: var(--sheet); margin: 0 0 1rem; }
.notice.error { border-left-color: var(--danger); }
.rows li.waiting, .waiting { box-shadow: inset 3px 0 0 var(--needs-you); padding-left: 1rem; }

pre, code { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }
/* Phones: rows wrap rather than push the page wide, wide tables scroll in their own box,
   fields are 16px so iOS does not zoom in on focus, and buttons are big enough to tap. */
@media (max-width: 720px) {
  dl.fields { grid-template-columns: 1fr; gap: .1rem 1rem; }
  dl.fields dd + dt { margin-top: .5rem; }
  .rows li { flex-wrap: wrap; gap: .25rem 1rem; }
  input, select, textarea { font-size: 16px; }
  pre { white-space: pre-wrap; }
  .actions button, form.cap button, .sub button { min-height: 2.5rem; }
  main h2 { font-size: 1.65rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.type-links { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .2rem; }