@layer base, layout, components, utilities;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body.jx {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    /* Landscape phones: the page draws under the notch (viewport-fit=cover), so its side stays clear. */
    padding-inline: var(--safe-left) var(--safe-right);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--foreground);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--selection); color: var(--selection-foreground); }

  h1, h2, h3 { font-family: var(--font-heading); margin: 0; text-wrap: balance; }
  h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
  h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
  p { margin: 0; text-wrap: pretty; }

  a { color: var(--jx-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a:hover { text-decoration: underline; }

  code { font-family: var(--font-mono); font-size: max(13px, 0.92em); }

  :focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

  .skip-link {
    position: absolute; left: 12px; top: -48px; z-index: 10;
    padding: 8px 12px; border-radius: var(--radius-md);
    background: var(--primary); color: var(--primary-foreground); font-weight: 500; text-decoration: none;
  }
  .skip-link:focus { top: 12px; }

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

  /* Touch screens: pressed controls show :active instead of the tap flash, taps never wait for a double tap, and
     enlarged touch areas get a positioning context that a component's own position still overrides. */
  @media (pointer: coarse) {
    html { -webkit-tap-highlight-color: transparent; }
    :where(a, button, summary, label, input, select, textarea) { touch-action: manipulation; }
    :where(.button, .sidebar-add, .panel-tab, .document-editor-tab, .attachment-chip-remove, .person-picker-remove,
      .member-more, .member-row-link, .file-card-download) { position: relative; }
  }
}

@layer utilities {
  .muted { color: var(--muted-foreground); }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  @media (pointer: coarse) {
    /* iOS zooms into a field under 16 px when it takes focus, and the page stays zoomed (the rich composer field too). */
    :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit],
      [type=button], [type=reset], [type=image]), textarea, select, .composer-input--rich) { font-size: max(16px, 1em); }
    /* Small controls answer a finger on --tap around their center; what is drawn keeps its size. */
    :is(.button, .sidebar-add, .panel-tab, .document-editor-tab, .attachment-chip-remove, .person-picker-remove,
      .member-more, .member-row-link, .file-card-download, .link-card-control)::after { content: ""; position: absolute; inset: min(0px, calc((100% - var(--tap)) / 2)); }
    /* A submit input cannot carry ::after: it grows instead. */
    input.button { min-height: var(--tap); }
  }
}

/* Turbo's progress bar, shown only when a visit takes over half a second: the app's color, thinner, under the notch of
   an installed app. Outside the layers on purpose: Turbo's own rule is unlayered, and a layered one would always lose. */
.turbo-progress-bar { top: env(safe-area-inset-top, 0); height: 2px; background: var(--primary); }