/*
 * Element defaults. The views are semantic HTML without classes, so most of
 * the look comes from here: style the element first, reach for a class only
 * when the element alone cannot say what something is.
 */
@layer base {
  html {
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
    font-variant-numeric: tabular-nums;
  }

  /* Turbo Frames are custom elements, inline by default; they wrap blocks. */
  turbo-frame {
    display: block;
  }

  /* Large screens only (DESIGN.md §4.3): narrower windows scroll, never reflow. */
  body {
    min-inline-size: 1024px;
  }

  body > main {
    max-inline-size: var(--width-page);
    margin-inline: auto;
    padding: var(--space-8) var(--space-6) var(--space-10);
  }

  /* Vertical rhythm: siblings are spaced, the first and last child are not. */
  main :where(p, ul, ol, dl, table, form, fieldset, details, section, dialog, nav, h2, h3) + * {
    margin-block-start: var(--space-4);
  }

  main :where(section, fieldset) + :where(section, fieldset) {
    margin-block-start: var(--space-8);
  }

  h1 {
    font: var(--text-display-m);
    color: var(--color-ink);
    text-wrap: balance;
  }

  h2 {
    font: var(--text-title);
    color: var(--color-ink);
    text-wrap: balance;
  }

  h3 {
    font: var(--text-lead);
    color: var(--color-ink);
  }

  h4 {
    font: var(--text-body-strong);
  }

  p,
  li,
  dd {
    max-inline-size: var(--width-reading);
  }

  ul,
  ol {
    padding-inline-start: var(--space-6);
  }

  li + li {
    margin-block-start: var(--space-1);
  }

  a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;

    &:hover {
      color: var(--color-ink);
      text-decoration-thickness: 2px;
    }
  }

  /* Several actions in one line of markup: give each its own space. */
  :where(a, form.button_to) + :where(a, form.button_to) {
    margin-inline-start: var(--space-3);
  }

  /* Inert content (an archived objective's tasks and activity) looks it. */
  [inert] {
    opacity: 0.55;
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  small {
    font: var(--text-small);
  }

  strong,
  b {
    font-weight: 600;
  }

  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  hr {
    border: 0;
    border-block-start: var(--border);
    margin-block: var(--space-7);
  }

  /* Definition lists read as a two-column record sheet. */
  dl {
    display: grid;
    grid-template-columns: minmax(10rem, max-content) 1fr;
    gap: var(--space-2) var(--space-6);
  }

  dt {
    color: var(--color-muted);
  }

  dd {
    margin: 0;
  }

  details {
    border-block-start: var(--border);
    padding-block-start: var(--space-3);
  }

  summary {
    cursor: pointer;
    font: var(--text-body-strong);
  }

  details[open] > summary {
    margin-block-end: var(--space-3);
  }

  /* Non-modal <dialog open> rendered inline (no JavaScript, see the views). */
  dialog {
    position: static;
    inline-size: 100%;
    max-inline-size: var(--width-reading);
    padding: var(--space-6);
    border: var(--border);
    border-radius: var(--radius-l);
    background: var(--color-paper);
    color: inherit;
  }

  meter,
  progress {
    inline-size: 10rem;
    block-size: 0.5rem;
    vertical-align: middle;
  }

  /*
   * A bare <ul role="alert"> is a warning (capacity conflicts): the attention
   * role. Form error summaries add .form-errors and turn negative in
   * forms.css.
   */
  ul[role="alert"] {
    list-style: none;
    padding: var(--space-3) var(--space-4);
    border-inline-start: 3px solid var(--color-attention);
    border-radius: var(--radius-xs);
    background: var(--color-attention-surface);
  }
}