/* Moved out of the layout so the Content-Security-Policy can refuse
   inline styles outright rather than allowing them for this one block.
   No external anything: this file and webauthn.js are the whole front
   end. */
body { font-family: system-ui, sans-serif; max-width: 26rem; margin: 2rem auto 4rem; padding: 0 1rem; color: #1a1a1a; }
  /* A form reads best narrow; a table of tool calls does not fit in that
     measure at all. Pages that list data ask for the wider one, where the
     table spreads out and prose and fields keep their own measure. */
  body.wide { max-width: 52rem; }
  p { max-width: 36rem; }
  h1 { font-size: 1.25rem; }
  /* Scrolls rather than spills: on a screen too narrow even for the
     wrapped table, the overflow stays inside the border. */
  .card { border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; }
  th, td { text-align: left; padding: 0.4rem 0.75rem 0.4rem 0; vertical-align: top; }
  th { font-size: 0.9rem; border-bottom: 1px solid #ddd; }
  th:last-child, td:last-child { padding-right: 0; }
  tbody tr + tr td { border-top: 1px solid #eee; }
  td.when { white-space: nowrap; }
  /* URLs, ids and addresses have nowhere to break, so they break anywhere
     rather than run out through the side of the card. In a table that is
     confined to the column of machine values: a column that may break
     anywhere is the one the layout squeezes first, and the short ones read
     badly two letters wide. */
  code { overflow-wrap: anywhere; }
  td code { overflow-wrap: normal; }
  td.detail, td.detail code { overflow-wrap: anywhere; }
  .muted { color: #666; font-size: 0.9rem; }
  .error { color: #b00020; }
  label { display: block; margin: 1rem 0 0.25rem; }
  input[type=password], input[type=email], input[type=text] { width: 100%; max-width: 24rem; padding: 0.5rem; box-sizing: border-box; }
  .actions { margin-top: 1.25rem; display: flex; gap: 0.75rem; }
  button { padding: 0.5rem 1.25rem; border-radius: 6px; border: 1px solid #888; background: #f5f5f5; cursor: pointer; }
  button.approve, button.primary { background: #1a7f37; color: white; border-color: #1a7f37; }
  header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
  header .brand { font-weight: 600; text-decoration: none; color: inherit; }
  header .who { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: #666; }
  header form { margin: 0; }
  header button { padding: 0.25rem 0.75rem; font-size: 0.85rem; }