/* Later layers win whatever their specificity: page defaults, then the editor itself, then utilities. */
@layer base, editor, utilities;

@layer base {
  /*
   * The tokens: the editor's colours and type, and the measures of its shapes, each named here once. Light is
   * the default; dark, touch, a phone's width and a wish for more contrast each change a few of them below.
   */
  :root {
    color-scheme: light dark;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /*
     * Colour. Cool neutral greys, with the product's own orange as the one accent, deep enough that white on it
     * can be read. Words are see-through black, so they sit right on whatever is under them.
     */
    --bg: rgb(242 242 247);
    --surface: rgb(255 255 255);
    --label: rgb(0 0 0 / 0.88);
    --label-2: rgb(0 0 0 / 0.62);
    /* For marks and decoration only: too faint for words that must be read. */
    --label-3: rgb(0 0 0 / 0.4);
    --separator: rgb(0 0 0 / 0.12);
    /*
     * The neutral body of a control or a field; of one under a pointer, a step deeper; and of one that is
     * pressed, a step deeper again, so that a press shows on a control the pointer is already on.
     */
    --fill: rgb(120 120 128 / 0.16);
    --fill-hover: rgb(120 120 128 / 0.28);
    --fill-press: rgb(120 120 128 / 0.4);
    --accent: rgb(208 72 28);
    --accent-hover: rgb(186 62 22);
    --accent-press: rgb(164 52 16);
    --accent-ink: rgb(255 255 255);
    /* The keyboard's focus and a field's caret: the orange as it shows on the canvas, so lighter where that is dark. */
    --ring: rgb(208 72 28);
    --ok: rgb(0 125 45);
    --bad: rgb(200 20 40);
    /* A control has no edge of its own, until more contrast is asked for. */
    --control-border: transparent;
    /*
     * What the editor holds up as content, a page's frame and its picture: matte, with an edge half a pixel
     * wide and the one soft shadow, which deepens under a pointer.
     */
    --edge: 0.5px;
    --content-edge: rgb(0 0 0 / 0.07);
    --content-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 28px rgb(0 0 0 / 0.07);
    --content-shadow-hover: 0 1px 3px rgb(0 0 0 / 0.05), 0 14px 40px rgb(0 0 0 / 0.13);
    /*
     * The material of the editor's own floating controls: a pale fill, see-through where the browser can blur
     * what lies under it, with an edge, a lit rim and a shadow of its own. Its tints are for under a pointer
     * and a press. The blur, and the deeper shadow, are for the one thing that lies over a page: the menu that
     * Share opens, while it is open.
     */
    --glass: rgb(250 250 252 / 0.76);
    --glass-solid: rgb(250 250 252);
    --glass-backdrop: saturate(180%) blur(20px);
    --glass-edge: rgb(0 0 0 / 0.08);
    --glass-rim: rgb(255 255 255 / 0.7);
    --glass-glow: transparent;
    --glass-border: transparent;
    --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 6px 20px rgb(0 0 0 / 0.08);
    --glass-shadow-large: 0 2px 6px rgb(0 0 0 / 0.06), 0 10px 40px rgb(0 0 0 / 0.14);
    --glass-hover: rgb(120 120 128 / 0.12);
    --glass-press: rgb(120 120 128 / 0.24);
    /*
     * Where the editor's own content scrolls under its controls there is no bar and no line: the canvas's own
     * colour, see-through and frosted where the browser can do that, reaching a little past the controls and
     * fading out along its lower edge.
     */
    --strip: rgb(242 242 247 / 0.76);
    --strip-backdrop: blur(20px);
    --strip-mask: linear-gradient(to bottom, rgb(0 0 0) calc(100% - 18px), transparent);
    --strip-reach: -6px;

    /*
     * Type: weight, size and line height together, in rem so that the browser's own text size scales them.
     * Three weights (400, 600, 700) and no letter-spacing. These are for a mouse on a wide screen.
     */
    --t-large: 700 2.125rem / 2.5625rem var(--font);
    --t-title: 700 1.375rem / 1.75rem var(--font);
    --t-write: 400 1.375rem / 1.75rem var(--font);
    --t-lede: 400 1.0625rem / 1.375rem var(--font);
    --t-headline: 600 0.9375rem / 1.25rem var(--font);
    --t-body: 400 0.9375rem / 1.25rem var(--font);
    /* A field is never smaller than 16px: an iPhone zooms the whole editor in when a smaller one is tapped. */
    --t-field: 400 1rem / 1.3125rem var(--font);
    --t-subhead: 400 0.8125rem / 1.125rem var(--font);
    --t-footnote: 400 0.75rem / 1rem var(--font);

    /*
     * Shape and space. How tall a control is, and a capsule that holds one with room round it; the margin at a
     * view's sides and the gap between its controls; the corner of a page's frame and of its picture; and the
     * one curve that what moves, moves by.
     */
    --control: 2.25rem;
    --well: calc(var(--control) + 8px);
    --gutter: 20px;
    --gap: 12px;
    --radius-picture: 17px;
    --ease: cubic-bezier(0.32, 0.08, 0.24, 1);
    /*
     * The editor is drawn to the screen's very edges, so each view keeps clear of what the screen's own shape
     * takes there, a notch or a rounded corner: its side margins are never less than that.
     */
    --side-left: max(var(--gutter), env(safe-area-inset-left));
    --side-right: max(var(--gutter), env(safe-area-inset-right));
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: rgb(28 28 30);
      --surface: rgb(44 44 46);
      --label: rgb(255 255 255 / 0.92);
      --label-2: rgb(255 255 255 / 0.68);
      --label-3: rgb(255 255 255 / 0.4);
      --separator: rgb(255 255 255 / 0.16);
      --fill: rgb(120 120 128 / 0.32);
      --fill-hover: rgb(120 120 128 / 0.48);
      --fill-press: rgb(120 120 128 / 0.64);
      --ring: rgb(255 122 77);
      --ok: rgb(48 209 88);
      --bad: rgb(255 105 97);
      --content-edge: rgb(255 255 255 / 0.1);
      --content-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 8px 28px rgb(0 0 0 / 0.28);
      --content-shadow-hover: 0 1px 3px rgb(0 0 0 / 0.25), 0 14px 40px rgb(0 0 0 / 0.45);
      --glass: rgb(48 48 52 / 0.86);
      --glass-solid: rgb(48 48 52);
      --glass-edge: rgb(255 255 255 / 0.16);
      --glass-rim: rgb(255 255 255 / 0.1);
      --glass-glow: rgb(255 255 255 / 0.05);
      --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.22), 0 6px 20px rgb(0 0 0 / 0.28);
      --glass-shadow-large: 0 2px 6px rgb(0 0 0 / 0.2), 0 10px 40px rgb(0 0 0 / 0.4);
      --glass-hover: rgb(255 255 255 / 0.09);
      --glass-press: rgb(255 255 255 / 0.17);
      --strip: rgb(28 28 30 / 0.82);
    }
  }
  /*
   * Touch, or a phone's width: the sizes an iPhone's own apps use, and 44px to press. By width as well as by
   * touch, so that a narrow window gets them too. The field stays as it is: it is already 16px.
   */
  @media (pointer: coarse), (max-width: 560px) {
    :root {
      --t-write: 400 1.25rem / 1.5625rem var(--font);
      --t-headline: 600 1.0625rem / 1.375rem var(--font);
      --t-body: 400 1.0625rem / 1.375rem var(--font);
      --t-subhead: 400 0.9375rem / 1.25rem var(--font);
      --t-footnote: 400 0.8125rem / 1.125rem var(--font);
      --control: 2.75rem;
    }
  }
  @media (max-width: 560px) {
    :root {
      --gutter: 16px;
      --gap: 8px;
    }
  }
  @media (max-width: 374px) {
    :root {
      --gutter: 12px;
    }
  }
  /*
   * Asked for more contrast: words and edges are drawn harder and the orange deepens. Nothing is see-through,
   * and every control and everything held up as content has a drawn edge where it had a shadow.
   */
  @media (prefers-contrast: more) {
    :root {
      --label: rgb(0 0 0);
      --label-2: rgb(0 0 0 / 0.78);
      --label-3: rgb(0 0 0 / 0.6);
      --separator: rgb(0 0 0 / 0.5);
      --accent: rgb(168 54 18);
      --accent-hover: rgb(140 44 14);
      --accent-press: rgb(112 34 10);
      --ring: rgb(168 54 18);
      --control-border: rgb(0 0 0);
      --edge: 1px;
      --content-edge: rgb(0 0 0 / 0.7);
      --content-shadow: 0 0 0 0 transparent;
      --content-shadow-hover: 0 0 0 0 transparent;
      --glass: var(--glass-solid);
      --glass-backdrop: none;
      --glass-edge: transparent;
      --glass-rim: transparent;
      --glass-glow: transparent;
      --glass-border: rgb(0 0 0);
      --glass-shadow: 0 0 0 0 transparent;
      --glass-shadow-large: 0 0 0 0 transparent;
      --strip: var(--bg);
      --strip-backdrop: none;
      --strip-mask: none;
      --strip-reach: 0;
    }
  }
  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root {
      --label: rgb(255 255 255);
      --label-2: rgb(255 255 255 / 0.84);
      --label-3: rgb(255 255 255 / 0.62);
      --separator: rgb(255 255 255 / 0.5);
      --ring: rgb(255 160 86);
      --control-border: rgb(255 255 255);
      --content-edge: rgb(255 255 255 / 0.75);
      --glass-border: rgb(255 255 255);
    }
  }
  * {
    box-sizing: border-box;
  }
  html,
  body,
  main {
    block-size: 100%;
  }
  /*
   * A phone's browser lays a grey flash of its own over whatever is tapped, a field as much as a button. Nothing
   * in the editor shows it: said once here, it is handed down to every control and field.
   */
  body {
    margin: 0;
    font: var(--t-body);
    color: var(--label);
    background: var(--bg);
    -webkit-tap-highlight-color: transparent;
  }
  button {
    font: inherit;
  }
  :focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
  }
}

@layer editor {
  /*
   * ---- Views ----
   * The editor is one page. Its script reads the address and names the view to show in the body's data-route;
   * until it has, none shows. The way in, which is served in the editor's place where no one is signed in, is
   * one page too, with views of its own (way-in.html).
   */
  .pages,
  .ask,
  .build,
  .responses,
  #notes,
  #activity,
  #history,
  #costs,
  #site,
  .way-in {
    display: none;
  }
  body[data-route="home"] .pages {
    display: block;
  }
  body[data-route="new"] .ask {
    display: grid;
  }
  body[data-route="page"] .build {
    display: grid;
  }
  body[data-route="responses"] .responses,
  body[data-route="notes"] #notes,
  body[data-route="activity"] #activity,
  body[data-route="history"] #history,
  body[data-route="costs"] #costs,
  body[data-route="site"] #site {
    display: block;
  }
  body[data-route="welcome"] #welcome,
  body[data-route="create"] #create-account,
  body[data-route="recover"] #recover-account,
  body[data-route="recovered"] #recovered,
  body[data-route="keep"] #keep-here {
    display: block;
  }
}

@layer utilities {
  /* Hidden means hidden, whatever display a component asks for: this layer outranks the others. */
  [hidden] {
    display: none;
  }
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}