/* Touchstone base styles and component classes. Framework-free (needs css/tokens.css).
   Cascade layers, so Tailwind utilities and unlayered app CSS override them without !important.
   Defaults encode docs/checklist.md: text fits its box, five sizes, spacing scale, measure. */

@layer base, components;

@layer base {
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    -webkit-font-smoothing: antialiased;
  }
  /* Text fits its container (rule 2): wrap at word boundaries; break inside a word only when one word
     alone is wider than the box (long URLs, IDs). Headings balance their lines. */
  body { overflow-wrap: break-word; }
  /* Flowing text may break inside a word only when one word (a URL, an ID) is wider than its box.
     Not applied to table cells: tables scroll inside .tbl-wrap rather than squeeze words. */
  p, li, dd, dt, label, h1, h2, h3, h4, a, .btn, .badge { overflow-wrap: anywhere; }
  h1, h2, h3, h4 { line-height: var(--lh-heading); font-weight: var(--fw-semibold); text-wrap: balance; margin: 0; }
  p { text-wrap: pretty; }
  b, strong { font-weight: var(--fw-semibold); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--radius-sm); }
  kbd {
    font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1; padding: 2px var(--space-1);
    border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--muted);
  }
  code { font-family: var(--font-mono); font-size: inherit; }
  p { margin: 0; }
}

@layer components {
  /* type roles as classes (Tailwind apps can also use text-small … text-display) */
  .t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
  .t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
  .t-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-semibold); }
  .t-h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: var(--fw-semibold); }
  .t-display { font-size: var(--fs-display); line-height: 1.15; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
  .num { font-variant-numeric: tabular-nums; }
  .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .truncate-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .measure { max-width: var(--measure); }

  /* cards: padding >= 24, fill the row height so cards in a row are equal (rule 5) */
  .card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
    min-width: 0; display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
  }
  .card-body { padding: var(--pad-card); flex: 1; min-width: 0; }
  .card-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--pad-card); border-bottom: 1px solid var(--border);
  }
  /* rows of equal items: equal width and height, wrap to 2 then 1 on phones; never 3 + 1 */
  .card-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); align-items: stretch; }
  @media (max-width: 900px) { .card-row { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } }
  @media (max-width: 560px) { .card-row { grid-template-columns: minmax(0, 1fr); } .card-row.keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* tables: width follows content (rule 4). Number columns shrink to their content and align right;
     text columns take the remaining room. Units belong in the header. */
  .tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
  .tbl th {
    position: sticky; top: 0; z-index: 1; background: var(--panel-2); color: var(--muted);
    font-weight: var(--fw-medium); font-size: var(--fs-small); line-height: var(--lh-small); text-align: left;
    padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  .tbl td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
  .tbl th.num, .tbl td.num { text-align: right; width: 1%; white-space: nowrap; }
  .tbl th.fit, .tbl td.fit { width: 1%; white-space: nowrap; }
  .tbl .cell-text { min-width: 160px; }  /* names stay readable at 390: the table scrolls in .tbl-wrap instead */
  .tbl td.clip { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tbl tbody tr:hover td { background: var(--hover); }
  .tbl tbody tr.clickable { cursor: pointer; }
  .tbl tbody tr.selected td { background: var(--accent-soft); }
  .tbl-wrap { width: 100%; overflow-x: auto; }

  /* controls: font never below body size; the box grows rather than the text overflowing (rule 2) */
  .input, .select {
    min-height: var(--control-h); border: 1px solid var(--border); background: var(--panel); color: var(--text);
    border-radius: var(--radius); padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--fs-body);
    min-width: 0; max-width: 100%; box-sizing: border-box;
  }
  .input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .input[aria-invalid="true"] { border-color: var(--bad); }
  textarea.input { line-height: var(--lh-body); }

  .btn {
    min-height: var(--control-h); max-width: 100%; display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2); padding: var(--space-1) var(--space-3); box-sizing: border-box;
    border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--panel); color: var(--text);
    font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.25; text-align: center;
    text-wrap: balance; cursor: pointer; text-decoration: none;
  }
  .btn:hover { background: var(--hover); }
  .btn:disabled { opacity: .5; cursor: not-allowed; }
  .btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
  .btn-primary:hover { background: var(--accent-strong); filter: brightness(1.08); }
  .btn-danger { color: var(--bad); }
  .btn-ghost { border-color: transparent; background: transparent; }
  .btn-icon { padding: 0; width: var(--control-h); }
  /* a row of buttons wraps as a whole; buttons in a .btn-row.equal share one width */
  .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .btn-row.equal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }

  /* badges: short labels on one line; if a container is narrower, ellipsis with the full text in title */
  .badge {
    display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; height: 20px; padding: 0 var(--space-2);
    border-radius: var(--radius-sm); border: 1px solid transparent; font-size: var(--fs-small); font-weight: var(--fw-medium);
    line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
  }

  /* long-form prose: 60-75 characters per line (rule 6), one size per role */
  .prose-md { max-width: var(--measure); font-size: var(--fs-body); line-height: var(--lh-body); }
  .prose-md h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-3); }
  .prose-md h2 { font-size: var(--fs-h2); margin: var(--space-6) 0 var(--space-2); }
  .prose-md h3 { font-size: var(--fs-body); margin: var(--space-5) 0 var(--space-2); }
  .prose-md p { margin: var(--space-2) 0; }
  .prose-md ul, .prose-md ol { margin: var(--space-2) 0; padding-left: var(--space-5); }
  .prose-md ul { list-style: disc; }
  .prose-md ol { list-style: decimal; }
  .prose-md li { margin: var(--space-1) 0; }
  .prose-md pre { overflow-x: auto; max-width: 100%; background: var(--panel-2); padding: var(--space-3); border-radius: var(--radius); }
  .prose-md pre code { background: none; padding: 0; }
  .prose-md code { background: var(--panel-2); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
  .prose-md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .prose-md table { border-collapse: collapse; margin: var(--space-3) 0; display: block; overflow-x: auto; max-width: 100%; }
  .prose-md th, .prose-md td { border: 1px solid var(--border); padding: var(--space-1) var(--space-2); text-align: left; }
  .prose-md th { background: var(--panel-2); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
  .prose-md em { color: var(--muted); }
  /* wide screens: columns instead of a narrow strip of text */
  .prose-cols { column-width: 34ch; column-gap: var(--space-7); max-width: none; }

  .scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
  .scroll-thin::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
}

/* print: light colours, no app chrome, nothing split across pages */
@media print {
  :root, .dark {
    --bg: #fff; --panel: #fff; --panel-2: #f4f5f7; --text: #000; --muted: #444; --faint: #666;
    --border: #ccc; color-scheme: light;
  }
  [data-ds-chrome] { display: none !important; }
  [data-ds-main] { overflow: visible !important; }
  .tbl th { position: static; }
  .tbl tr, .card, .prose-md table { break-inside: avoid; }
  a { color: inherit; }
}