/* ========================================================================== components.css — reusable controls: fields, buttons, messages, pills Anything that appears on more than one screen lives here. ========================================================================== */ /* -------------------------------------------------------------------------- FIELDS -------------------------------------------------------------------------- */ .field { display: block; } /* each labelled field is a full-width block */ .field__label { /* the label above an input */ display: block; /* own line */ margin-bottom: 0.5rem; /* gap above the input */ font-size: 0.78rem; /* small but readable, not a tiny caps label */ font-weight: 500; /* medium */ color: var(--ink-2); /* muted */ } /* end field label */ input[type="password"], input[type="text"] { /* all visible text inputs share one look */ width: 100%; /* full width of the field */ padding: 0.95rem 1rem; /* tall enough to hit with a thumb */ font-family: inherit; /* match the app font rather than the browser default */ font-size: 16px; /* 16px exactly — anything smaller makes iOS zoom the page on focus */ color: var(--ink); /* light text */ background: var(--surface); /* raised surface */ border: 1px solid var(--line); /* subtle edge */ border-radius: var(--r-md); /* soft corners */ outline: none; /* we draw our own focus state below */ user-select: text; /* re-enable selection inside inputs (body disabled it) */ transition: border-color 0.15s ease, box-shadow 0.15s ease; /* smooth focus transition */ } /* end inputs */ input::placeholder { color: var(--ink-3); } /* placeholders sit a step below secondary text */ input:focus { /* focus state */ border-color: var(--accent); /* violet edge shows which field is live */ box-shadow: 0 0 0 3.5px rgb(139 92 246 / 0.18); /* soft focus ring, visible in a dark room */ } /* end focus */ /* -------------------------------------------------------------------------- BUTTONS -------------------------------------------------------------------------- */ .btn { /* shared button base */ display: block; /* full-width block button */ width: 100%; /* stretch to container */ padding: 1.05rem 1rem; /* ~54px tall: comfortably above the 44px touch-target minimum */ font-family: inherit; /* inherit the app font */ font-size: 1rem; /* readable label */ font-weight: 600; /* semibold; sentence case rather than shouty caps */ letter-spacing: 0; /* no tracking — tracked-out button labels look dated */ border: 0; /* no default chrome */ border-radius: var(--r-md); /* soft corners */ cursor: pointer; /* desktop affordance */ transition: transform 0.08s ease, opacity 0.15s ease, background 0.15s ease; /* quick press feedback */ } /* end button base */ .btn:active { transform: scale(0.985); } /* subtle tactile push on tap */ .btn:disabled { opacity: 0.45; cursor: default; } /* clearly inert while a request is in flight */ .btn--primary { /* main call-to-action: solid near-white on black reads as premium and has the highest possible contrast */ color: #0a0a0c; /* near-black label */ background: var(--ink); /* near-white fill */ } /* end primary */ .btn--ghost { /* secondary/cancel button */ color: var(--ink); /* normal text colour */ background: rgb(255 255 255 / 0.06); /* barely-there fill */ border: 1px solid var(--line); /* outlined rather than solid */ } /* end ghost */ .btn--next { /* the reset button on the result overlay (see verdict.css for its stacking rule) */ margin-top: 2.25rem; /* pushed well below the verdict so it is never tapped by reflex */ max-width: 320px; /* not absurdly wide on tablets */ color: inherit; /* takes the verdict's ink colour */ background: rgb(0 0 0 / 0.16); /* darkened chip that works on green, red and amber alike */ border: 1.5px solid currentColor; /* outlined in the verdict's own ink, which keeps contrast on every background */ } /* end next button */ /* -------------------------------------------------------------------------- MESSAGES -------------------------------------------------------------------------- */ .msg { /* inline message base */ margin: 0; /* no default margin */ padding: 0.8rem 1rem; /* comfortable padding */ font-size: 0.88rem; /* readable */ border-radius: var(--r-md); /* matches inputs */ } /* end message */ .msg--error { /* error variant */ color: #ffc9cd; /* pale red text */ background: rgb(245 22 46 / 0.12); /* translucent red wash */ border: 1px solid rgb(245 22 46 / 0.3); /* red edge */ } /* end error message */ /* -------------------------------------------------------------------------- PILLS — the top-bar counters -------------------------------------------------------------------------- */ .pill { /* a counter chip */ display: inline-flex; /* lets the number and label sit on one baseline */ align-items: baseline; /* align number with label */ gap: 0.28rem; /* small gap between number and label */ padding: 0.22rem 0.55rem; /* compact chip */ border-radius: var(--r-sm); /* rounded */ font-size: 0.68rem; /* small label */ color: var(--ink-2); /* muted label */ background: rgb(255 255 255 / 0.06); /* faint fill */ } /* end pill */ .pill b { font-size: 0.9rem; font-weight: 650; font-variant-numeric: tabular-nums; } /* tabular figures stop the counters jittering as they tick up */ .pill i { /* the "/300" total that follows the admitted figure */ font-style: normal; /* the is used for grouping, not emphasis */ font-size: 0.72rem; /* smaller than the live figure it qualifies */ font-variant-numeric: tabular-nums; /* same non-jittering figures */ color: var(--ink-3); /* dimmer, so the eye lands on the admitted count first */ margin-left: -0.16rem; /* pulls the slash tight against the number */ } /* end total */ .pill--ok b { color: var(--ok); } /* admitted count in green */ .pill--bad b { color: var(--bad); } /* rejected count in red */ .pill.is-stale { opacity: 0.45; } /* dimmed while a refresh is failing, so a frozen number never looks authoritative */