/* Layout theme: spacing, sizing, radius + all structural rules.
   Colours/fonts come from theme.css via CSS variables.

   Under the light and dark styles the feel is a printed page: serif reading body,
   small sans uppercase section labels, generous line-height, soft borders. Prose
   (p, li, quotes) is serif; UI chrome (buttons, inputs, headings-as-labels) is sans.
   The default inverse style resets the type and corners in theme.css.

   Cascade layers: framework rules live in named layers; your own CSS in
   style.css is UNLAYERED, so it always wins — no !important needed.
   Order (lowest -> highest): reset, layout, theme, then unlayered (you). */
@layer reset, layout, theme;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  img, video, canvas, table { max-width: 100%; }
}

@layer layout {
  /* --- layout variants ------------------------------------------------ */
  :root, [data-layout="cozy"] {
    --maxw: 46rem; --pad: 1.25rem; --gap: .6rem; --space: 1rem;
    --radius: 2px; --fs: 15.5px; --fs-sm: .86rem;
  }
  [data-layout="dense"] {
    --maxw: 72rem; --pad: .8rem; --gap: .35rem; --space: .6rem;
    --radius: 1px; --fs: 14px; --fs-sm: .82rem;
  }

  /* --- the page: a centred reading column -------------------------------- */
  body { max-width: var(--maxw); margin: 3rem auto; padding: 0 var(--pad);
         font-size: var(--fs); font-family: var(--serif); line-height: 1.55;
         background: var(--bg); color: var(--fg);
         -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

  /* headings: a serif document title, then small uppercase sans section labels */
  h1 { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; line-height: 1.2;
       letter-spacing: -.01em; margin: 0 0 var(--space); }
  h2, h3, h4 { font-family: var(--font); font-weight: 650; line-height: 1.35;
               text-transform: uppercase; letter-spacing: .06em; color: var(--heading);
               margin: 1.9em 0 .55em; }
  h2 { font-size: .8rem; }  h3 { font-size: .75rem; }  h4 { font-size: .72rem; color: var(--muted); }

  /* prose */
  p  { margin: .7em 0; }
  ul, ol { margin: .55em 0; padding-left: 1.5em; }
  li { margin: .2em 0; }
  li::marker { color: var(--muted); }
  blockquote { margin: .8em 0 .8em .1em; padding-left: 1.1em;
               border-left: 2px solid var(--line); color: var(--heading); font-style: italic; }
  a  { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  strong { font-weight: 700; color: var(--fg); }   /* --fg is near-black in light, bright in dark */
  em { font-style: italic; }
  hr { border: none; border-top: 1px solid var(--line); margin: 1.8em 0; }
  code { font: .8em var(--mono); background: var(--soft); border: 1px solid var(--line);
         border-radius: 3px; padding: .06em .32em;
         /* a wrapped inline tag draws a full border on each line, not sliced-open fragments */
         -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  /* --- controls: sans, soft, calm (NOT the serif reading body) --------- */
  input, button, select, textarea {
    font-family: var(--font); font-size: var(--fs-sm); padding: .4rem .65rem;
    border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
  input[type=text], input[type=number], input[type=search], input[type=password],
  input[type=email], input:not([type]) { width: 100%; margin: .25rem 0 var(--space); }
  label.field { display: block; margin: 0 0 var(--space); }
  label.field > span { display: block; font-family: var(--font); font-size: var(--fs-sm);
                       color: var(--muted); margin-bottom: .25rem; }
  label.field > input, label.field > select, label.field > textarea { margin: 0; }
  input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
  textarea { width: 100%; resize: vertical; line-height: 1.5; }

  /* range / check / radio / progress / meter — native semantic controls */
  input[type=range] { width: 100%; accent-color: var(--accent); margin: .3rem 0 var(--space); padding: 0; }
  label.field.range > span { display: flex; justify-content: space-between; align-items: baseline; }
  label.field.range output { color: var(--fg); font-variant-numeric: tabular-nums; }
  label.check { display: inline-flex; align-items: center; gap: .45rem; margin: 0 .9rem var(--space) 0;
                font-family: var(--font); font-size: var(--fs-sm); cursor: pointer; }
  label.check input, label.radio input { width: auto; margin: 0; padding: 0; accent-color: var(--accent); }
  .radios { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; margin: 0 0 var(--space);
            font-family: var(--font); font-size: var(--fs-sm); }
  .radios .field-label { width: 100%; color: var(--muted); margin-bottom: .1rem; }
  label.radio { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
  progress { width: 100%; height: .55rem; accent-color: var(--accent); border: none; padding: 0; }
  meter { width: 100%; padding: 0; border: none; }

  .badge { display: inline-block; padding: .12em .45em; border-radius: 3px; font-family: var(--font);
           font-size: .66rem; font-weight: 600; background: var(--soft); color: var(--muted);
           border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .05em; }
  .badge[data-kind="ok"]     { color: var(--accent); border-color: var(--accent); }
  .badge[data-kind="danger"] { color: var(--danger); border-color: var(--danger); }
  .badge[data-kind="warn"]   { color: #b8860b; border-color: #b8860b; }
  .badge[data-kind="info"]   { color: var(--accent); border-color: var(--accent); }
  /* block-level status banner (ui.banner) — the badge's big sibling */
  .banner { display: block; padding: .6rem .9rem; margin: var(--gap) 0; font-family: var(--font);
            font-size: var(--fs-sm); font-weight: 600; background: var(--soft);
            border: 1px solid var(--line); border-radius: var(--radius); }
  .banner[data-kind="ok"], .banner[data-kind="win"]      { color: var(--accent); border-color: var(--accent); }
  .banner[data-kind="danger"], .banner[data-kind="lose"] { color: var(--danger); border-color: var(--danger); }
  .banner[data-kind="warn"]                              { color: #b8860b; border-color: #b8860b; }

  button { background: var(--soft); margin: 0 .35rem .4rem 0; cursor: pointer; font-weight: 500; }
  button:hover { border-color: var(--accent); }
  button:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
  select { margin: 0 .35rem var(--space) 0; }

  /* --- tables (a quiet, ruled look) ---------------------------------- */
  table { border-collapse: collapse; width: 100%; font-family: var(--font); font-size: var(--fs-sm);
          margin: var(--space) 0; }
  th, td { text-align: left; padding: .45rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }

  /* --- chat: a right-aligned user bubble; the reply is plain serif prose --- */
  article[data-role] { margin: 1.1em 0; }
  article[data-role="user"] { background: var(--soft2); border: 1px solid var(--line);
    border-radius: 7px; padding: .45rem .8rem; width: fit-content; max-width: 85%;
    margin-left: auto; font-family: var(--font); font-size: var(--fs-sm); line-height: 1.5; }
  article[data-role="assistant"] { font-family: var(--serif); }          /* no bubble — just prose */
  article[data-role] > header { font-family: var(--font); font-size: .66rem; color: var(--muted);
    margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .05em; }
  article[data-role="user"] > header { display: none; }                  /* the bubble already says "you" */
  article[data-role] > div, .stream { white-space: pre-wrap; }

  /* --- layout containers (ui.row / col / columns / card / expander) ---- */
  .row { display: flex; gap: var(--space); flex-wrap: wrap; align-items: flex-start; }
  .row > * { flex: 1 1 0; min-width: 0; }
  .col { display: flex; flex-direction: column; gap: var(--gap); }
  .cols { display: grid; gap: var(--space); }
  /* board grid (ui.grid) — cells tile flush: button default margins would skew
     the tracks, and min-width:0 stops wide content stretching one column */
  .grid { display: grid; gap: .3rem; margin: var(--gap) 0; }
  .grid > * { margin: 0; min-width: 0; }
  .grid > button { width: 100%; height: 100%; padding: 0; }
  .grid-square > * { aspect-ratio: 1; }
  section.card { border: 1px solid var(--line); border-radius: var(--radius);
                 padding: var(--space) 1.1rem; margin: var(--space) 0; background: var(--bg); }
  details { border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .8rem; margin: var(--gap) 0; }
  details > summary { cursor: pointer; font-family: var(--font); font-size: var(--fs-sm); color: var(--muted); }
  details[open] > summary { margin-bottom: var(--gap); }
  .ui-map { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); margin: var(--space) 0; }

  figure.camera { margin: 0 0 var(--space); }
  .ui-img, .ui-cam { border-radius: var(--radius); display: block; margin: .4rem 0; }
  .ui-cam { background: #000; }

  /* preformatted / code blocks & streams */
  pre, .stream { white-space: pre-wrap; }
  pre { font-family: var(--mono); font-size: .82em; }
  pre.code { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius);
             padding: 11px 13px; margin: .8em 0; overflow-x: auto; }
  /* ANY code block sheds the inline-tag border/background/padding — this covers
     ui.code, ui.markdown (pre.code), and third-party renderers like markdown-it
     that emit a bare <pre><code> (no .code class). Without the reset the inline
     `code` rule above draws a stray border box around every wrapped line. */
  pre code { background: none; border: none; padding: 0; font: .82em/1.5 var(--mono); }
  .error { background: var(--soft); color: var(--danger); padding: .8rem; border-radius: var(--radius);
           border: 1px solid var(--line); white-space: pre-wrap; font-family: var(--mono); font-size: .8rem; }
  .alert { color: var(--danger); font-weight: 700; font-size: 1.2rem; }

  /* working indicators — the server renders these only while it is actually busy */
  .spinner { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted);
             font-family: var(--font); font-size: var(--fs-sm); margin: .5rem 0; }
  .spinner .dot { width: .8rem; height: .8rem; border-radius: 50%;
                  border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .stop { border-color: var(--danger); color: var(--danger); }
  /* in-flight indicator for a busy=True button (htmx marks it .htmx-request mid-request) */
  .htmx-indicator { display: none; }
  .htmx-request .htmx-indicator { display: inline-block; }
  .spin { width: .8em; height: .8em; margin-left: .45em; vertical-align: -.1em;
          border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
          animation: spin .6s linear infinite; }
}