/* ====================================================================
   TEXTTILE · BASE STYLESHEET
   The font stacks, the element defaults, the keyframes, the
   reduced-motion switch. Ported from the round-13 prototype; the rules
   for screens that do not exist yet return with their features.

   Colour lives in theme.css. Not a single hex value belongs in here.
   ==================================================================== */

:root {
  --tt-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --tt-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, "Times New Roman", serif;
  --tt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ==================================================================
   ELEMENT DEFAULTS
   ================================================================== */
@layer base {
  /* the gutter stays reserved on a short page, so nothing shifts
     sideways when a screen grows past the window and the scrollbar
     appears */
  html { -webkit-text-size-adjust: 100%; height: 100%; scrollbar-gutter: stable; }
  body {
    margin: 0; font-family: var(--tt-font-sans); font-size: 14px; line-height: 1.55;
    color: var(--tt-ink); background: var(--tt-page); -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, p, ul, figure { margin: 0; }
  ul { padding-left: 20px; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
  svg { display: block; }
  [hidden] { display: none !important; }
  ::selection { background: var(--tt-accentwash); color: var(--tt-ink); }
  ::placeholder { color: var(--tt-faint); opacity: 1; }
  :focus-visible { outline: 2px solid var(--tt-accentloud); outline-offset: 2px; }

  /* THE FIELD IS A LINE
     One rule under the text and nothing else. Every value is a
     --fld-* token from theme.css, so a screen that wants another
     field redeclares the tokens on itself and touches no selector
     here.

     The types are named by what a field is not, instead of by a list
     of what it is: the old list had been written out type by type and
     `url` was missing from it, so the website field of a comment came
     out at the browser's default width. 16px on small screens, so iOS
     never zooms on focus. */
  input:not(:is([type=checkbox], [type=radio], [type=file], [type=hidden], [type=submit], [type=reset], [type=button], [type=image], [type=range], [type=color], .sr)),
  textarea, select {
    width: 100%; font: inherit; font-family: var(--tt-font-sans); font-size: 16px;
    color: var(--tt-ink);
    background-color: var(--fld-bg); background-image: none;
    border: var(--fld-bd); border-bottom: var(--fld-bb);
    border-radius: var(--fld-r); padding: var(--fld-p);
    box-shadow: var(--fld-sh);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  @media (min-width: 900px) {
    input:not(:is([type=checkbox], [type=radio], [type=file], [type=hidden], [type=submit], [type=reset], [type=button], [type=image], [type=range], [type=color], .sr)),
    textarea, select { font-size: 14px; }
  }
  /* a date field is something you open, so it says so: the whole
     field takes the pointer, and the picker sits in the ink of the
     theme instead of the browser's own gray */
  input[type=date], input[type=datetime-local], input[type=time] { cursor: pointer; }
  input[type=date]::-webkit-calendar-picker-indicator,
  input[type=datetime-local]::-webkit-calendar-picker-indicator,
  input[type=time]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: .55; transition: opacity .15s ease;
  }
  input[type=date]:hover::-webkit-calendar-picker-indicator,
  input[type=datetime-local]:hover::-webkit-calendar-picker-indicator,
  input[type=time]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
  input:not(:is([type=checkbox], [type=radio], [type=file], [type=hidden], [type=submit], [type=reset], [type=button], [type=image], [type=range], [type=color], .sr)):hover,
  textarea:hover, select:hover {
    background-color: var(--fld-bg-h); border-bottom: var(--fld-bb-h);
  }
  input:not(:is([type=checkbox], [type=radio], [type=file], [type=hidden], [type=submit], [type=reset], [type=button], [type=image], [type=range], [type=color], .sr)):focus,
  textarea:focus, select:focus {
    outline: none;
    background-color: var(--fld-bg-f);
    border: var(--fld-bd-f); border-bottom: var(--fld-bb-f);
    box-shadow: var(--fld-sh-f);
  }
  input:disabled { color: var(--tt-faint); }
  textarea { line-height: 1.6; resize: vertical; }

  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--tt-dim); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--tt-rule); }
  td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--tt-hair); vertical-align: top; }
  tr:last-child td { border-bottom: 0; }
  th:last-child, td:last-child { padding-right: 0; }
}

/* ==================================================================
   MOTION · the one keyframe the app uses
   ================================================================== */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .26; } }

/* ==================================================================
   COMPONENTS · the plain-CSS half of the component layer. The atoms
   that lean on the design tokens for sizing live in app.css.
   ================================================================== */
@layer components {
  .sp { flex: 1; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .link:hover { text-decoration-color: var(--tt-accent); }

  .num { font-variant-numeric: tabular-nums; }
  b, strong { font-weight: 600; }

    /* presence dots. The dot pulses, and only the dot: the word for
       the state of an entry wears `live` too, and a word that fades in
       and out reads as a warning where it states a fact. */
  .dot.live { animation: pulse 2.2s ease-in-out infinite; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}