/*
 * The UI rebuild (issue #143). The clickable prototype attached to that issue is
 * the source of truth for layout, spacing and sizing; sections here follow its
 * order so the two stay diffable.
 *
 * Sizes are the prototype's and are not prescriptive. Fonts are not: the
 * prototype loads IBM Plex, we use the system stacks already in font.css.
 */

:root {
  --base: #0f1216;
  /* The chrome stacks above the content: the screen bar a step up from it, the
   * nav a step above that. */
  --bar: #12161b;
  --surface: #161a20;
  --raised: #1e232b;
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .13);
  --text: #e4e8ee;
  --derived: #a9b2c0;
  --muted: #8b95a5;
  --faint: #5a6472;
  --accent: #e8b45c;
  --accent-ink: #1b1408;
  --link: #8fb8e8;
  --unresolved: #c98a7a;
  --warn: #c98a7a;
  --ok: #7d8f6a;

  --sans: var(--font-family-sans-serif);
  --mono: var(--font-family-monospace);

  --pad: 1.125rem;
  --indent: 0.9375rem;
  /* between the calendar's week numbers and the Monday column, so a selected
   * day's background does not butt up against the week link */
  --week-gutter: 0.5rem;
  /* the gutter above every screen's content */
  --scroll-gutter: 0.875rem;
  /* One height for everything sitting in the screen bar — the search field, the
   * tab group, the menu and the primary action — so a bar reads as one row of
   * controls rather than three sizes of them. Set by the search field, whose
   * height its text decides; the icon buttons have no such floor. */
  --bar-control: 2.25rem;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* <button> does not inherit color. Without this, titles inside button rows
 * render black. This bit the prototype twice. */
button { color: inherit; }

/* A top link lands at the top, not at the scroll container's padding. */
#top { scroll-margin-top: var(--scroll-gutter); }

/* Two spellings of the same label, one per breakpoint. */
.on-desktop { display: none; }

html, body { height: 100%; margin: 0; padding: 0; }

body {
  background: var(--base);
  font-family: var(--sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { -webkit-text-fill-color: currentColor; }

/* Nothing here wants the browser's default link colour. Kept to an element
 * selector so every class rule below outranks it without fighting specificity. */
a { color: inherit; text-decoration: none; }

/* ─────────── shell ─────────── */
/* Mobile: content scrolls above a fixed screen bar, which sits above the nav,
 * so everything you touch is in thumb reach. Source order is content-first for
 * screen readers; `order` puts the chrome underneath visually. */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 100% of the layout viewport, which html and body already fill. 100dvh is not
   * the same thing on Android Chrome: it can come back shorter than the visible
   * area, and since the nav is flush to the bottom of this box, the difference
   * shows as a band of page background under the nav. */
  height: 100%;
  min-height: 0;
  /* clip, not hidden: `hidden` still makes this a scroll container, and one
   * nothing can scroll by hand can still be scrolled by the browser bringing a
   * focused element into view. A visually-hidden input positioned against this
   * box did exactly that and dragged the whole shell up the screen. `clip`
   * clips without ever being scrollable. */
  overflow: clip;
}

.scroll, .editor-wrapper { order: 0; }
.screen-bar { order: 1; }
.nav { order: 9; }

.scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* One top gutter for every screen, so a list does not start hard against the
   * browser chrome. Anything that sits first inside here leaves its own top
   * padding off rather than doubling up. */
  padding-top: var(--scroll-gutter);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.scroll::-webkit-scrollbar { width: 0; }

/* ─────────── icons ─────────── */
/* Phosphor, loaded by the layout. Each context sets the size, so templates ask
 * for an icon by name and nothing else. Phosphor draws on a smaller optical grid
 * than the prototype's inline SVGs, so these run larger than its numbers to read
 * at the same weight. */
.icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: 0 0 auto; }
.nav-button .icon { font-size: 1.625rem; }
.bar-action .icon { font-size: 1.25rem; }
.icon-button .icon { font-size: 1.375rem; }
.search-submit .icon { font-size: 1.0625rem; }
.sheet-item .icon { font-size: 1.25rem; color: var(--muted); }
.sheet-item.danger .icon { color: var(--unresolved); }
.row-title .icon { font-size: 0.8125rem; color: var(--muted); margin-left: 0.4375rem; }
.filter-banner .filter-clear .icon { font-size: 0.9375rem; }