@layer reset, tokens, base, layout, components, utilities;
@import "base.css";
@import "components/brand-mark.css";
@import "components/home.css";
@import "components/login-form.css";
@import "components/app-shell.css";
@import "components/dashboard.css";
@import "components/add-button.css";
@import "components/messages.css";
@import "components/assignments.css";
@import "components/api-tokens.css";
@import "components/assistant.css";
@import "components/erp.css";
@import "components/platform.css";
@import "components/tasks.css";
@import "components/erp-table.css";
@import "components/combobox.css";
@import "components/invoice-form.css";
@import "components/payments.css";
@import "components/voucher.css";
@import "components/pdf-viewer.css";
@import "components/layout-debug.css";
@import "components/contact.css";
@import "components/help.css";
@import "components/back-button.css";
@import "components/date-field.css";
@import "components/save-actions.css";
@import "components/pos.css";
@import "components/payroll.css";
@import "components/image-picker.css";
@import "components/button-effects.css";

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* iOS Safari zooms the whole page in when a field under 16px gets focus (the
     customer filter is 14px), and leaves it zoomed after the keyboard closes.
     On touch screens every text field is held at 16px instead, which stops the
     zoom without disabling pinch-zoom for people who need it. Placed in the
     utilities layer so it wins over each component's own smaller size. */
  @media (pointer: coarse) {
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"]),
    textarea,
    select {
      font-size: 18px;
    }

    /* 16px is a floor, not a size: it is what stops the zoom, and a field may
       stand above it. The company picker does — at rest it is the name of the
       company being worked on, read at a glance rather than typed into, so it
       carries the size its own rule asks for. It has to be restated here
       because the rule above it sits in this same layer and would otherwise
       hold every field, this one included, at exactly 16px — and through its
       wrapper, because `input:not([type=...])` already scores a class's worth
       of specificity and beats the bare class on its own. */
    .app-shell__scope-combo .app-shell__scope-input {
      font-size: 1.125rem;
    }
  }
}