/* ui-kit.css — Isla Tech UI kit (2026-09-28): compact, app-grade form controls.
   Reference implementation for `Isla Tech PR/UI_STANDARD.md`. Owner, on Mariah's quote form: "so much empty space.
   this is the kind of stuff we want as part of a brand standard so its not a catch up game."

   COMPONENTS (each face DRIVES a real form control that stays in the DOM — see ui-kit.js)
     .ui-field      label + control, label tight to its control (4 px), 8-pt rhythm between fields
     .ui-row        two short fields on one line (date + count, date + time); .ui-row--auto = flexible + hugging
     .ui-chips      a chip-select rendered from a <select>; .ui-chips--scroll = one snapping row, bleeds to the card edge
     .ui-chip       one option, 44 px tall, aria-pressed when chosen; .ui-chip__thumb = an optional 28 px round picture
     .ui-stepper    − n + for a number input, 48 px, buttons 44 px wide
     .ui-datechip   a button showing the date as a person says it ("Sat, Oct 3"); tapping opens the native picker
     .ui-src        the real <select>/<input>, visually hidden but present (value, events, screen readers, the engine)

   THEME = VARIABLES. Nothing below names a brand colour; set the --ui-* tokens on any ancestor (html.ph on Mariah's
   page maps them to her tokens; Todo Culebra / Isla Tech map their own). Defaults here are neutral. */
:root{
  --ui-font:inherit;
  --ui-ink:#0E1B26; --ui-ink-2:#5B6B7A;
  --ui-surface:#fff; --ui-rule:#E3E8EE;
  --ui-accent:#0E7C86; --ui-on-accent:#fff; --ui-accent-soft:#E6F4F5;
  --ui-warn:#B23A21;
  --ui-radius:14px; --ui-h:48px; --ui-gap:8px; --ui-bleed:0px;
  --ui-label:13px; --ui-text:16px;
  --ui-shadow:none;
}
.ui-field{ position:relative; margin:0 0 var(--ui-gap); min-width:0; }
.ui-field > label, .ui-field__label{ display:block; font:700 var(--ui-label)/1.3 var(--ui-font); color:var(--ui-ink-2); margin:0 0 4px; }
.ui-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--ui-gap); align-items:end; }
.ui-row--auto{ grid-template-columns:minmax(0,1fr) auto; }
.ui-src{ position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; opacity:0 !important; pointer-events:none; }
/* strip (2026-09-29): any horizontal row of chips. .is-wrap = the box is wide enough, every chip visible on
   as many lines as it takes. .is-scroll = one snapping row; a chip under the edge sits behind a fade and a ‹ ›
   button says there is more — a chip is never sliced mid-word without that affordance (standard §3). */
.ui-strip{ position:relative; min-width:0; }
.ui-strip__row{ scroll-snap-type:x mandatory; scroll-padding-inline:var(--ui-bleed); }
.ui-strip__row > *{ scroll-snap-align:start; }
.ui-strip.is-wrap > .ui-strip__row{ flex-wrap:wrap; overflow:visible; margin:0; padding-inline:0; scroll-snap-type:none; }
.ui-strip.is-more-right > .ui-strip__row{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent); }
.ui-strip.is-more-left > .ui-strip__row{ -webkit-mask-image:linear-gradient(to right,transparent,#000 44px); mask-image:linear-gradient(to right,transparent,#000 44px); }
.ui-strip.is-more-left.is-more-right > .ui-strip__row{ -webkit-mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent); }
.ui-strip__btn{ display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:50%; padding:0;
  border:1px solid var(--ui-rule); background:var(--ui-surface); color:var(--ui-accent); box-shadow:0 2px 8px rgba(0,0,0,.14);
  font:700 24px/1 var(--ui-font); cursor:pointer; appearance:none; place-items:center; padding-bottom:3px; }
.ui-strip__btn--prev{ left:-4px; } .ui-strip__btn--next{ right:-4px; }
.ui-strip.is-more-left > .ui-strip__btn--prev, .ui-strip.is-more-right > .ui-strip__btn--next{ display:grid; }
/* chips */
.ui-chips{ display:flex; flex-wrap:wrap; gap:var(--ui-gap); min-width:0; }
.ui-chips--scroll{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:2px var(--ui-bleed) 4px; margin:0 calc(-1 * var(--ui-bleed)); }
.ui-chips--scroll::-webkit-scrollbar{ display:none; }
.ui-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:999px;
  border:1px solid var(--ui-rule); background:var(--ui-surface); color:var(--ui-ink); font:700 15px/1.2 var(--ui-font);
  cursor:pointer; scroll-snap-align:start; white-space:nowrap; appearance:none; box-shadow:var(--ui-shadow); }
.ui-chip[aria-pressed="true"]{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent); }
.ui-chip:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:2px; }
.ui-chip__thumb{ width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--ui-accent-soft); flex:0 0 auto; margin-left:-6px; }
.ui-chip[aria-pressed="true"] .ui-chip__thumb{ box-shadow:0 0 0 2px rgba(255,255,255,.75); }
/* stepper */
.ui-stepper{ display:inline-flex; align-items:center; height:var(--ui-h); border:1px solid var(--ui-rule); border-radius:var(--ui-radius);
  background:var(--ui-surface); overflow:hidden; }
.ui-stepper__btn{ width:44px; height:100%; border:0; background:transparent; color:var(--ui-accent); font:700 22px/1 var(--ui-font);
  cursor:pointer; appearance:none; display:grid; place-items:center; }
.ui-stepper__btn:disabled{ opacity:.3; cursor:not-allowed; }
.ui-stepper__n{ min-width:32px; text-align:center; font:800 var(--ui-text)/1 var(--ui-font); color:var(--ui-ink); font-variant-numeric:tabular-nums; }
.ui-stepper:focus-within{ outline:2px solid var(--ui-accent); outline-offset:2px; }
/* date chip */
.ui-datechip{ display:inline-flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:var(--ui-h); padding:0 12px 0 14px;
  border:1px solid var(--ui-rule); border-radius:var(--ui-radius); background:var(--ui-surface); color:var(--ui-ink);
  font:700 var(--ui-text)/1 var(--ui-font); cursor:pointer; appearance:none; text-align:left; min-width:0; }
.ui-datechip__t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3; }
.ui-datechip__ic{ color:var(--ui-accent); flex:0 0 auto; }
.ui-datechip:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:2px; }
.ui-datechip.is-warn{ border-color:var(--ui-warn); color:var(--ui-warn); }