/* Zlowi brand tokens, sampled from web/content/zlowi_full_name.png: a deep
   navy wordmark, a blue accent (the "MOVING" tagline word / dot over the
   "i" / brightest edge of the arrow mark), and a geometric sans typeface.
   Loaded before every other stylesheet so they can reference these vars --
   which also makes it the one stylesheet on every page, for the element
   defaults below (selects, the touch rule). */
:root {
    --zlowi-navy: #0c1a2e;
    --zlowi-blue: #2178c9;
    --zlowi-blue-bright: #29a8e8;
    --zlowi-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Every <select> shares one look -- the review grid's Mapped To (mockup
   z2-sel): no platform arrow but a thin chevron, a light border, the blue
   focus ring. Pages only size them (padding, font-size, width); keep their
   own rules to background-color, never the background shorthand, or the
   chevron goes. .pill-select (filter chips) is the one deliberate
   variant. */
select {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 13px;
    color: #0f172a;
    padding: 8px 32px 8px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238894a7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 13px 13px;
    outline: none;
    cursor: pointer;
}

select:hover:not(:disabled) {
    border-color: #c3cddb;
}

select:focus {
    border-color: #1a73ff;
    box-shadow: 0 0 0 3px rgba(26, 115, 255, 0.14);
}

select:disabled {
    background-color: #f8fafc;
    color: #94a3b8;
    cursor: default;
}

/* iOS zooms the page in on any text field set under 16px when it's
   tapped, and stays zoomed. On touch screens every field is at least 16px
   -- !important because the pages' own, more specific rules (e.g.
   .field-picker-search input) set 13px. */
@media (pointer: coarse) {
    input:not([type="checkbox"], [type="radio"], [type="range"]),
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }
}