/*
  The theme of Plan.io: one file for a host to reference, and the only place in this library where a colour, a
  family, a size, a step of spacing or a radius is written as a literal. Everything else - primitive, component and
  screen - reads these custom properties, and a test of this solution fails the moment one of them writes a value of
  its own.

  Which of the themes is in force is said by `data-theme` on the root of the document, which the store of the theme
  writes: nothing here is decided by the app, and `auto` is decided by the operating system alone.
*/

@import url("Colors.css");
@import url("Typography.css");
@import url("Space.css");
@import url("Radius.css");
@import url("Layout.css");

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

html
{
    /* The 16 of `Heading 5`, which every rem of this theme is a multiple of. */
    font-size: 100%;
}

body
{
    margin: 0;
    background-color: var(--surface);
    color: var(--text-strong);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);

    /* The phone is the narrowest thing drawn, so nothing is ever asked to lay out under it. */
    min-width: 0;
    overflow-x: hidden;
}

/*
  The ring of the focus. The design draws none - it shows no state of focus at all, in a product whose whole promise
  is that the hands never leave the keyboard - so the demand decides it and it is written here, once, out of the
  tokens: two device pixels of ring in the colour each theme answers `--focus-ring` with, two of clear space between
  the ring and what it rings. It is written on `:focus-visible` and never on `:focus`, so that a heading moved to by
  the router, or a control that was clicked, is focused without being ringed.

  It is declared here rather than in each primitive because every element a keyboard can reach is ringed the same
  way - the ones this library draws, the ones a screen writes by hand, and the ones the browser brings with it.
*/
:focus:not(:focus-visible)
{
    outline: none;
}

:focus-visible
{
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/*
  An element that is only focusable because something focused it - the heading the router moves to on every
  navigation, which Blazor reaches by writing `tabindex="-1"` on it - is not an element the keyboard can reach, so
  it is not one the ring is for. Some browsers count a programmatic focus as visible all the same, and the result is
  a ring drawn around the title of every page the moment it opens, which reads as an error and is not one.
*/
[tabindex="-1"]:focus-visible
{
    outline: none;
}

/*
  The bar the host writes into its page for a failure of the WebAssembly itself. It belongs to the page and not to
  any component, and it is drawn from the tokens like everything else so that a Plan.io in trouble still looks like
  Plan.io.
*/
#blazor-error-ui
{
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--layout-layer-overlay);
    padding: var(--space-3) var(--space-4);
    background: var(--warning-50);
    color: var(--text-strong);
    font-size: var(--font-size-body);
    border-top: var(--border-width) solid var(--line);
}

#blazor-error-ui .reload
{
    margin-inline-start: var(--space-2);
    color: var(--action);
}

.surface
{
    background-color: var(--surface-card);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-medium);
}