/* ==== assets/tokens/colors.css ==== */
:root{
--sand-50:#FBF3EA;--sand-100:#F5E4D0;--sand-300:#E4C39B;--sand-500:#D4A373;--sand-600:#BE8A57;--sand-700:#9C6F41;
--ocean-50:#E6F6FA;--ocean-100:#CDEDF5;--ocean-300:#5FC3DB;--ocean-500:#0891B2;--ocean-600:#05748F;--ocean-700:#045A70;
--forest-50:#E8F3EA;--forest-100:#C8E4CC;--forest-300:#4C9B57;--forest-500:#166534;--forest-600:#114F28;--forest-700:#0C3A1D;
--warning-100:#FBEBC7;--warning-500:#CA8A04;--warning-600:#A66F03;
--error-100:#FBD5D5;--error-500:#DC2626;--error-600:#B91C1C;
--neutral-0:#FFFFFF;--neutral-25:#FFFDF7;--neutral-50:#FAF6EF;--neutral-100:#F1EAE0;--neutral-200:#E2D8CA;--neutral-300:#C9BBA8;--neutral-400:#A6957F;--neutral-500:#877560;--neutral-600:#695A48;--neutral-700:#4D4136;--neutral-800:#362E26;--neutral-900:#211C17;
--color-bg:var(--neutral-25);--color-surface:var(--neutral-0);--color-surface-sunken:var(--neutral-50);
--color-border:var(--neutral-200);--color-border-strong:var(--neutral-300);
--text-primary:var(--neutral-900);--text-secondary:var(--neutral-600);--text-muted:var(--neutral-500);--text-on-ocean:#FFFFFF;--text-on-forest:#FFFFFF;
--color-primary:var(--sand-500);--color-primary-hover:var(--sand-600);--color-primary-active:var(--sand-700);--color-primary-text:var(--neutral-900);
--color-secondary:var(--ocean-500);--color-secondary-hover:var(--ocean-600);--color-secondary-active:var(--ocean-700);
--color-tertiary:var(--forest-500);--color-tertiary-hover:var(--forest-600);
--color-success:var(--forest-500);--color-success-bg:var(--forest-50);
--color-warning:var(--warning-500);--color-warning-bg:var(--warning-100);
--color-error:var(--error-500);--color-error-bg:var(--error-100);
--color-info:var(--ocean-500);--color-info-bg:var(--ocean-50);
--focus-ring:0 0 0 3px var(--ocean-100);
}

/* ==== assets/tokens/typography.css ==== */
/* The design system ships this file with a bare @import of Lora + Work Sans at
   the top. A CSS @import is render-blocking and serialises behind this
   stylesheet, which on a 3G handset holds first paint for a second or more. The
   fonts are loaded from the HTML instead — preconnect + a non-blocking link with
   font-display:swap — so the import is deliberately absent here. Re-exporting
   this file from the design system will put it back; delete it again. */
:root{
--font-display:'Lora',Georgia,'Times New Roman',serif;
--font-body:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
--text-xs:12px;--text-sm:14px;--text-base:16px;--text-lg:18px;--text-xl:20px;--text-2xl:24px;--text-3xl:30px;--text-4xl:36px;--text-5xl:48px;--text-6xl:60px;
--leading-tight:1.1;--leading-snug:1.25;--leading-normal:1.5;--leading-relaxed:1.65;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
}

/* ==== assets/tokens/spacing.css ==== */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--container-max:1200px;
}

/* ==== assets/tokens/effects.css ==== */
:root{
--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;
--shadow-sm:0 1px 2px rgba(54,46,38,0.07);
--shadow-md:0 4px 12px rgba(54,46,38,0.09);
--shadow-lg:0 12px 32px rgba(54,46,38,0.14);
--ease-standard:cubic-bezier(0.4,0,0.2,1);
--duration-fast:120ms;
--duration-base:200ms;
}
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--text-primary);font-family:var(--font-body)}

/* ==== assets/nomadkit.css ==== */
/* NomadKit component layer — authored from the design system's readme rules:
   hover = one step darker in the same hue, active = one step darker + scale(0.98),
   borders over shadows, 6px inputs / 10px buttons+cards / 16px surfaces / pill tags. */

/* ---------- Icon (Heroicons outline, CSS-mask recolored to currentColor) ---------- */
.nk-icon{
  display:inline-block;flex:none;width:24px;height:24px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}

/* ---------- Button ---------- */
.nk-btn{
  --nk-btn-bg:var(--color-primary);
  --nk-btn-bg-hover:var(--color-primary-hover);
  --nk-btn-bg-active:var(--color-primary-active);
  --nk-btn-fg:var(--color-primary-text);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold);
  line-height:1;white-space:nowrap;
  padding:0 18px;height:44px;
  border:1px solid transparent;border-radius:var(--radius-md);
  background:var(--nk-btn-bg);color:var(--nk-btn-fg);
  cursor:pointer;text-decoration:none;
  transition:background var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.nk-btn:hover{background:var(--nk-btn-bg-hover);text-decoration:none;color:var(--nk-btn-fg)}
.nk-btn:active{background:var(--nk-btn-bg-active);transform:scale(.98)}
.nk-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.nk-btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.nk-btn--sm{height:34px;padding:0 13px;font-size:13px}
.nk-btn--lg{height:50px;padding:0 22px;font-size:15px}
.nk-btn--block{width:100%}
.nk-btn--secondary{
  --nk-btn-bg:var(--color-secondary);--nk-btn-bg-hover:var(--color-secondary-hover);
  --nk-btn-bg-active:var(--color-secondary-active);--nk-btn-fg:var(--text-on-ocean);
}
.nk-btn--ghost{
  --nk-btn-bg:transparent;--nk-btn-bg-hover:var(--color-surface-sunken);
  --nk-btn-bg-active:var(--neutral-100);--nk-btn-fg:var(--text-primary);
  border-color:var(--color-border);
}
.nk-btn--success{
  --nk-btn-bg:var(--color-success);--nk-btn-bg-hover:var(--forest-600);
  --nk-btn-bg-active:var(--forest-700);--nk-btn-fg:var(--text-on-forest);
}

/* ---------- Field (Input / Select) ---------- */
.nk-field{display:flex;flex-direction:column;gap:6px}
.nk-field__label{font-size:12px;font-weight:var(--weight-semibold);color:var(--text-secondary)}
.nk-input,.nk-select{
  font-family:var(--font-body);font-size:14px;color:var(--text-primary);
  height:42px;padding:0 13px;width:100%;
  background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  outline:none;
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.nk-input::placeholder{color:var(--neutral-400)}
.nk-input:hover,.nk-select:hover{border-color:var(--color-border-strong)}
.nk-input:focus,.nk-select:focus{border-color:var(--color-secondary);box-shadow:var(--focus-ring)}
.nk-select{
  appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23695A48' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px;
}

/* ---------- Checkbox ---------- */
.nk-check{
  appearance:none;flex:none;width:20px;height:20px;margin:0;cursor:pointer;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);
  background:var(--color-surface);
  transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
}
.nk-check:checked{
  background:var(--color-secondary);border-color:var(--color-secondary);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:14px;
}
.nk-check:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- Switch ---------- */
.nk-switch{
  appearance:none;position:relative;flex:none;width:40px;height:24px;margin:0;cursor:pointer;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-full);
  background:var(--color-surface-sunken);
  transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
}
.nk-switch::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:var(--radius-full);background:var(--color-surface);box-shadow:var(--shadow-sm);
  transition:transform var(--duration-fast) var(--ease-standard);
}
.nk-switch:checked{background:var(--color-secondary);border-color:var(--color-secondary)}
.nk-switch:checked::after{transform:translateX(16px)}
.nk-switch:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- Tag / Badge ---------- */
.nk-tag{
  display:inline-flex;align-items:center;height:32px;padding:0 14px;
  font-size:13px;font-weight:var(--weight-semibold);
  border:1px solid var(--color-border);border-radius:var(--radius-full);
  background:var(--color-surface);color:var(--text-secondary);
  cursor:pointer;white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.nk-tag:hover{background:var(--color-surface-sunken)}
.nk-tag:active{transform:scale(.98)}
.nk-tag[aria-pressed="true"]{
  background:var(--color-primary);border-color:var(--color-primary);color:var(--neutral-900);
}
.nk-tag[aria-pressed="true"]:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.nk-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:var(--weight-semibold);
  padding:4px 9px;border-radius:var(--radius-full);
  background:var(--color-surface-sunken);color:var(--text-secondary);
}
.nk-badge--success{background:var(--forest-50);color:var(--color-success)}
.nk-badge--error{background:var(--color-error);color:#fff}
.nk-badge--solid-success{background:var(--color-success);color:#fff}

/* ==== assets/app.css ==== */
/* ================= KamerFind app shell ================= */
html,body{height:100%}
body{background:var(--neutral-100);overscroll-behavior-y:none}
a{color:var(--color-secondary);text-decoration:none}
a:hover{color:var(--color-secondary-hover);text-decoration:underline}
button{font:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

@keyframes kfUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes kfFade{from{opacity:0}to{opacity:1}}
@keyframes kfSpin{to{transform:rotate(360deg)}}
@keyframes kfRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes kfShimmer{from{background-position:-380px 0}to{background-position:380px 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --- Outer page: bare viewport on phones, framed device on wide screens --- */
.kf-page{min-height:100%;display:flex;flex-direction:column;align-items:center;background:var(--neutral-100)}
.kf-chrome{display:none}

.kf-device{
  position:relative;width:100%;
  height:100dvh;background:var(--color-bg);overflow:hidden;flex:none;
}

.kf-statusbar{
  position:absolute;top:0;left:0;right:0;height:46px;display:none;
  align-items:center;justify-content:space-between;padding:0 26px;
  font-size:12px;font-weight:var(--weight-semibold);color:var(--text-primary);
  z-index:6;background:var(--color-bg);
}
.kf-statusbar span:last-child{letter-spacing:.05em;color:var(--text-secondary)}

.kf-scrollport{
  position:absolute;top:env(safe-area-inset-top,0);bottom:0;left:0;right:0;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding-bottom:68px;
}
.kf-scrollport[data-sticky="true"]{padding-bottom:136px}

.kf-footnote{display:none;width:390px;font-size:11px;color:var(--text-muted);line-height:1.6;text-wrap:pretty}

@media (min-width:760px){
  .kf-page{padding:36px 24px 48px;gap:14px}
  .kf-chrome{display:flex;width:390px;align-items:baseline;justify-content:space-between}
  .kf-device{
    width:390px;height:844px;
    border-radius:44px;border:11px solid var(--neutral-900);
    box-shadow:var(--shadow-lg);
  }
  .kf-statusbar{display:flex}
  .kf-scrollport{top:46px}
  .kf-footnote{display:block}
}

.kf-wordmark{font-family:var(--font-display);font-size:20px;font-weight:var(--weight-bold);color:var(--neutral-900)}
.kf-wordmark b{color:var(--color-secondary);font-weight:inherit}
.kf-chrome__screen{font-size:12px;color:var(--text-muted)}

.kf-scroll{scrollbar-width:none}
.kf-scroll::-webkit-scrollbar{width:0;height:0}

.kf-screen{animation:kfFade .18s ease}
.kf-pad{padding:6px 20px 26px;display:flex;flex-direction:column;gap:22px}
.kf-pad--tight{gap:16px}
.kf-stack{display:flex;flex-direction:column;gap:12px}
.kf-stack--sm{gap:8px}
.kf-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kf-row--baseline{align-items:baseline}
.kf-h1{font-family:var(--font-display);font-size:28px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.15;text-wrap:pretty;margin:0}
.kf-h2{font-family:var(--font-display);font-size:20px;font-weight:var(--weight-semibold);color:var(--text-primary);margin:0}
.kf-h3{font-size:13px;font-weight:var(--weight-semibold);color:var(--text-primary);margin:0}
.kf-sub{font-size:13px;color:var(--text-secondary);line-height:1.5}
.kf-muted{font-size:12px;color:var(--text-muted)}
.kf-link{cursor:pointer;font-size:13px;font-weight:var(--weight-semibold);color:var(--color-secondary);background:none;border:0;padding:0}
.kf-iconbtn{background:none;border:0;padding:0;cursor:pointer;display:inline-flex;color:inherit}

/* --- Language toggle --- */
.kf-lang{display:flex;border:1px solid var(--color-border);border-radius:var(--radius-full);overflow:hidden}
.kf-lang button{
  cursor:pointer;padding:5px 12px;font-size:12px;font-weight:var(--weight-semibold);
  background:transparent;color:var(--text-secondary);border:0;
}
.kf-lang button[aria-pressed="true"]{background:var(--color-primary);color:var(--neutral-900)}
.kf-lang--lg button{padding:6px 14px}

/* --- Media slot: real photo when configured, labelled placeholder when not --- */
.kf-media{
  position:relative;width:100%;height:100%;
  background:var(--color-surface-sunken);overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.kf-media__img{width:100%;height:100%;object-fit:cover;display:block}
.kf-media__label{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:12px;font-size:10px;line-height:1.35;color:var(--text-muted);
}
.kf-media__label .nk-icon{color:var(--neutral-400)}
.kf-media--lg .kf-media__label{font-size:12px}

/* --- Hero --- */
.kf-hero{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface)}
.kf-hero__slider{position:relative;height:158px;border-bottom:1px solid var(--color-border);background:var(--color-surface-sunken);overflow:hidden}
.kf-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 700ms var(--ease-standard)}
.kf-hero__slide[data-active="true"]{opacity:1}
.kf-hero__caption{
  position:absolute;left:0;right:0;bottom:0;padding:20px 14px 9px;z-index:2;
  background:linear-gradient(to top,rgba(33,28,23,.78),rgba(33,28,23,0));
  color:#fff;font-size:11px;font-weight:var(--weight-semibold);text-align:left;letter-spacing:.02em;
}
.kf-hero__dots{position:absolute;right:10px;top:10px;display:flex;gap:5px;z-index:2}
.kf-hero__dot{width:6px;height:6px;border-radius:var(--radius-full);background:rgba(33,28,23,.28);border:0;padding:0;cursor:pointer;transition:width var(--duration-base) var(--ease-standard)}
.kf-hero__dot[data-active="true"]{background:var(--neutral-900);width:14px}
.kf-hero__slider[data-photos="true"] .kf-hero__dot{background:rgba(255,255,255,.55)}
.kf-hero__slider[data-photos="true"] .kf-hero__dot[data-active="true"]{background:#fff}
.kf-hero__body{padding:18px 16px 16px;display:flex;flex-direction:column;gap:14px}
.kf-hero__tagline{font-family:var(--font-display);font-size:26px;font-weight:var(--weight-semibold);line-height:1.15;color:var(--text-primary);text-wrap:pretty}

/* --- Cards --- */
.kf-card{
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface);overflow:hidden;
  transition:box-shadow var(--duration-fast) var(--ease-standard);
  text-align:left;padding:0;width:100%;font:inherit;color:inherit;display:block;
}
.kf-card:hover{box-shadow:var(--shadow-md)}
button.kf-card{cursor:pointer}

.kf-railrow{display:flex;gap:12px;overflow-x:auto;margin:0 -20px;padding:0 20px 4px}
.kf-region{flex:none;width:148px;cursor:pointer}
.kf-region__media{height:82px}
.kf-region__body{padding:10px 12px 12px}
.kf-region__name{font-size:14px;font-weight:var(--weight-semibold);color:var(--text-primary)}
.kf-region__city{font-size:12px;color:var(--text-secondary)}
.kf-region__count{font-size:11px;color:var(--text-muted);margin-top:4px}
.kf-regiongrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kf-regiongrid .kf-region{width:auto}
.kf-regiongrid .kf-region__media{height:76px}

.kf-mini{cursor:pointer;display:flex;gap:12px;padding:10px}
.kf-mini__media{width:98px;height:82px;flex:none;border-radius:var(--radius-sm)}
.kf-mini__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.kf-mini__title{font-size:14px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.3}
.kf-mini__price{margin-top:auto;font-size:14px;font-weight:var(--weight-bold);color:var(--text-primary)}

.kf-promo{
  cursor:pointer;width:100%;text-align:left;font:inherit;
  border:1px solid var(--sand-300);background:var(--sand-50);border-radius:var(--radius-md);
  padding:16px;display:flex;align-items:center;gap:12px;
}
.kf-promo__title{font-size:14px;font-weight:var(--weight-semibold);color:var(--neutral-900)}
.kf-promo__sub{font-size:12px;color:var(--text-secondary);line-height:1.4}
.kf-promo .nk-icon{color:var(--sand-700)}

/* --- Browse --- */
.kf-browsehead{
  padding:6px 20px 14px;display:flex;flex-direction:column;gap:12px;
  background:var(--color-surface);border-bottom:1px solid var(--color-border);
}
.kf-browsehead__title{font-family:var(--font-display);font-size:21px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.15}
.kf-catrail{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px 4px}
.kf-catrail>*{flex:none}
.kf-results{padding:16px 20px 26px;display:flex;flex-direction:column;gap:14px}

.kf-listing__media{position:relative;height:154px;cursor:pointer;width:100%;border:0;padding:0}
.kf-listing__flags{position:absolute;left:10px;top:10px;display:flex;gap:6px;z-index:2}
.kf-listing__count{
  position:absolute;right:10px;bottom:10px;z-index:2;
  background:rgba(33,28,23,.66);color:#fff;font-size:10px;padding:3px 9px;border-radius:var(--radius-full);
}
.kf-listing__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.kf-listing__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kf-listing__title{font-size:15px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.3}
.kf-listing__price{font-size:16px;font-weight:var(--weight-bold);color:var(--text-primary)}
.kf-listing__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}

.kf-service{cursor:pointer;padding:14px;display:flex;gap:12px;text-align:left}
.kf-avatar{
  width:60px;height:60px;flex:none;border-radius:var(--radius-full);
  background:var(--color-surface-sunken);display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:var(--weight-bold);color:var(--text-muted);overflow:hidden;
}
.kf-avatar img{width:100%;height:100%;object-fit:cover}
.kf-service__body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.kf-service__name{font-size:15px;font-weight:var(--weight-semibold);color:var(--text-primary)}
.kf-service__idline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

.kf-empty{
  border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);
  padding:30px 20px;text-align:center;font-size:14px;color:var(--text-secondary);line-height:1.55;
}
.kf-empty--left{text-align:left;padding:22px 18px;font-size:13px}

/* --- Detail --- */
.kf-gallery{position:relative;height:276px;touch-action:pan-y}
.kf-gallery__frame{position:absolute;inset:0}
.kf-gallery__nav{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;z-index:3}
.kf-round{
  width:36px;height:36px;border:0;padding:0;cursor:pointer;border-radius:var(--radius-full);
  background:rgba(255,255,255,.94);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;color:var(--text-primary);
}
.kf-gallery__count{
  position:absolute;right:14px;bottom:14px;z-index:3;
  background:rgba(33,28,23,.66);color:#fff;font-size:11px;padding:4px 10px;border-radius:var(--radius-full);
}
.kf-detail{padding:18px 20px 24px;display:flex;flex-direction:column;gap:20px}
.kf-detail__title{font-family:var(--font-display);font-size:25px;font-weight:var(--weight-semibold);line-height:1.15;color:var(--text-primary);text-wrap:pretty}
.kf-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.kf-chip{font-size:11px;font-weight:var(--weight-semibold);padding:5px 11px;border-radius:var(--radius-full);background:var(--color-surface-sunken);color:var(--text-secondary)}
.kf-chip--success{background:var(--forest-50);color:var(--color-success)}
.kf-chip--error{background:var(--color-error-bg);color:var(--error-600)}
.kf-highlights{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.kf-highlight{
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);
  padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
}
.kf-highlight .nk-icon{color:var(--color-secondary)}
.kf-highlight span{font-size:11px;font-weight:var(--weight-medium);color:var(--text-primary);line-height:1.3}
.kf-prose{font-size:14px;line-height:1.6;color:var(--text-secondary);text-wrap:pretty}

.kf-locked{
  border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);
  padding:16px;background:var(--color-surface-sunken);display:flex;flex-direction:column;gap:8px;
}
.kf-locked__num{font-size:20px;font-weight:var(--weight-bold);letter-spacing:.12em;color:var(--neutral-400)}
.kf-unlocked{
  border:1px solid var(--forest-100);border-radius:var(--radius-md);padding:16px;background:var(--forest-50);
  display:flex;flex-direction:column;gap:12px;animation:kfRise .2s var(--ease-standard);
}
.kf-unlocked__note{font-size:12px;color:var(--color-success);font-weight:var(--weight-semibold)}
.kf-unlocked__num{font-size:22px;font-weight:var(--weight-bold);letter-spacing:.03em;color:var(--text-primary)}
.kf-actions{display:flex;gap:8px}
.kf-actions>*{flex:1}
.kf-safety{border-top:1px solid var(--color-border);padding-top:16px;display:flex;align-items:center;gap:10px}
.kf-safety .nk-icon{color:var(--text-muted)}
.kf-safety span{font-size:12px;color:var(--text-muted);line-height:1.5}

/* --- Provider --- */
.kf-provhead{padding:8px 20px 18px;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;gap:14px}
.kf-provhead__id{display:flex;gap:14px;align-items:center}
.kf-provhead__id .kf-avatar{width:72px;height:72px;font-size:21px}
.kf-provhead__name{font-family:var(--font-display);font-size:23px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.15}
.kf-galrail{display:flex;gap:10px;overflow-x:auto;margin:0 -20px;padding:0 20px 4px}
.kf-galrail .kf-media{flex:none;width:132px;height:96px;border-radius:var(--radius-md);border:1px solid var(--color-border)}
.kf-review{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);padding:13px 14px;display:flex;flex-direction:column;gap:5px}
.kf-review__who{font-size:13px;font-weight:var(--weight-semibold);color:var(--text-primary)}
.kf-review__stars{font-size:12px;color:var(--sand-700)}
.kf-review__text{font-size:13px;color:var(--text-secondary);line-height:1.5}

/* --- Profile --- */
.kf-profile__id{display:flex;align-items:center;gap:14px}
.kf-profile__id .kf-avatar{width:64px;height:64px;font-size:19px}
.kf-profile__name{font-family:var(--font-display);font-size:22px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.15}
.kf-ledger{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);padding:13px 14px;display:flex;flex-direction:column;gap:8px}
.kf-ledger__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kf-ledger__date{flex:none;font-size:10px;font-weight:var(--weight-semibold);color:var(--text-muted)}
.kf-ledger__num{font-size:17px;font-weight:var(--weight-bold);letter-spacing:.03em;color:var(--text-primary)}
.kf-links{display:flex;flex-direction:column;gap:2px}
.kf-links button{
  cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 4px;width:100%;
  border:0;border-bottom:1px solid var(--color-border);background:none;text-align:left;color:inherit;
}
.kf-links button>span{flex:1;font-size:14px;color:var(--text-primary)}
.kf-links .nk-icon{color:var(--text-secondary)}
.kf-links .nk-icon--chev{color:var(--text-muted)}

/* --- List-with-us form --- */
.kf-consent{
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-sunken);
  padding:14px;display:flex;gap:11px;align-items:flex-start;cursor:pointer;
}
.kf-consent span{font-size:12px;color:var(--text-secondary);line-height:1.5}
.kf-sent{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding-top:20px;animation:kfRise .2s var(--ease-standard)}
.kf-sent .nk-icon{color:var(--color-success)}
.kf-sent h2{font-family:var(--font-display);font-size:25px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.2;margin:0}

/* --- Support chat --- */
.kf-chat{display:flex;flex-direction:column;min-height:100%}
.kf-chat__head{padding:8px 20px 14px;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:12px}
.kf-chat__title{font-size:15px;font-weight:var(--weight-semibold);color:var(--text-primary)}
.kf-chat__status{font-size:11px;color:var(--color-success)}
.kf-chat__log{flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.kf-bubble{max-width:78%;padding:11px 14px;border-radius:var(--radius-lg);font-size:14px;line-height:1.5}
.kf-bubble--them{align-self:flex-start;background:var(--color-surface);color:var(--text-primary);border:1px solid var(--color-border)}
.kf-bubble--me{align-self:flex-end;background:var(--color-secondary);color:#fff}
.kf-chat__compose{
  position:sticky;bottom:0;background:var(--color-surface);border-top:1px solid var(--color-border);
  padding:12px 16px;display:flex;gap:10px;align-items:center;
}
.kf-chat__compose .nk-input{border-radius:var(--radius-full);background:var(--color-bg)}

/* --- Sticky bar + tab bar --- */
.kf-sticky{
  position:absolute;left:0;right:0;bottom:68px;z-index:4;
  background:var(--color-surface);border-top:1px solid var(--color-border);
  padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 -4px 14px rgba(54,46,38,.05);
}
.kf-sticky>div:first-child{flex:1 1 auto;min-width:0}
.kf-sticky .nk-btn{flex:0 0 auto;font-size:13px;padding:0 14px}
.kf-sticky__caption{font-size:11px;color:var(--text-muted)}
.kf-sticky__price{font-size:17px;font-weight:var(--weight-bold);color:var(--text-primary);white-space:nowrap}

.kf-tabs{
  position:absolute;left:0;right:0;bottom:0;height:68px;z-index:5;
  background:rgba(255,253,247,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--color-border);
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
}
.kf-tabs button{
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:2px;
  border:0;background:none;color:var(--neutral-400);
}
.kf-tabs button[aria-current="page"]{color:var(--color-secondary)}
.kf-tabs span{font-size:10px;font-weight:var(--weight-semibold);color:currentColor}

/* --- Payment sheet --- */
.kf-scrim{position:absolute;inset:0;z-index:8;background:rgba(33,28,23,.4);border:0;padding:0;animation:kfFade .16s ease}
.kf-sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:9;max-height:92%;overflow-y:auto;
  background:var(--color-surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:10px 22px 26px;box-shadow:var(--shadow-lg);animation:kfUp .22s var(--ease-standard);
}
.kf-sheet__grip{width:40px;height:4px;border-radius:var(--radius-full);background:var(--color-border-strong);margin:0 auto 18px}
.kf-sheet__title{font-family:var(--font-display);font-size:22px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.2}
.kf-sheet__body{display:flex;flex-direction:column;gap:16px}
.kf-amount{
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-radius:var(--radius-md);background:var(--color-surface-sunken);border:1px solid var(--color-border);
}
.kf-amount span{font-size:13px;color:var(--text-secondary)}
.kf-amount strong{font-size:20px;font-weight:var(--weight-bold);color:var(--text-primary)}
.kf-methods{display:flex;flex-direction:column;gap:9px}
.kf-method{
  cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px;width:100%;text-align:left;font:inherit;
  border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);
}
.kf-method[aria-pressed="true"]{border-color:var(--color-secondary);background:var(--ocean-50)}
.kf-method__swatch{
  width:38px;height:38px;flex:none;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:var(--weight-bold);color:#211C17;
}
.kf-method__body{flex:1;min-width:0}
.kf-method__name{font-size:14px;font-weight:var(--weight-semibold);color:var(--text-primary)}
.kf-method__hint{font-size:11px;color:var(--text-muted)}
.kf-method .nk-icon{color:var(--color-success)}
.kf-spinner{
  width:44px;height:44px;border-radius:var(--radius-full);
  border:3px solid var(--color-border);border-top-color:var(--color-secondary);
  animation:kfSpin .9s linear infinite;
}
.kf-pending{display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 10px 34px;text-align:center}
.kf-pending h2{font-family:var(--font-display);font-size:20px;font-weight:var(--weight-semibold);color:var(--text-primary);margin:0}
.kf-pending p{font-size:13px;color:var(--text-secondary);line-height:1.6;max-width:280px;margin:0}
.kf-payerr{
  border:1px solid var(--error-100);background:var(--color-error-bg);color:var(--error-600);
  border-radius:var(--radius-md);padding:12px 14px;font-size:13px;line-height:1.5;
}
.kf-payfoot{font-size:11px;color:var(--text-muted);text-align:center;line-height:1.5}

/* --- Toast --- */
.kf-toast{
  position:absolute;left:18px;right:18px;bottom:84px;z-index:10;
  background:var(--neutral-900);color:var(--neutral-25);border-radius:var(--radius-md);
  padding:13px 16px;font-size:13px;line-height:1.45;box-shadow:var(--shadow-lg);
  animation:kfRise .2s var(--ease-standard);
}
.kf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==== assets/preapp.css ==== */
/* =============================================================================
   KamerFind — pre-app flow (splash, tour, city, auth, permissions, profile).

   Loaded on top of tokens/* + nomadkit.css + app.css. The pre-app and the app
   stand on the same paper: same ground (#FFFDF7), same Lora/Work Sans, same
   radii, same 120/200ms motion. The ONLY thing that changes is which two role
   tokens carry action and accent — and those transition back to sand/ocean at
   the moment of handoff.

   Brand blue/orange is a MARK, not a palette. Blue carries actions; orange
   carries progress and the mark, and appears in exactly four places: the logo,
   the tour progress rail, the OTP active underline, and the inspected shield.
   ============================================================================= */

[data-flow="pre"]{
  --brand-blue-deep:#1E5FD0; --brand-blue:#2080F0; --brand-blue-light:#33ADF6;
  --brand-orange:#F98012; --brand-orange-bright:#FFA614; --brand-orange-warm:#FCC350;
  /* the only orange dark enough to carry text on the warm ground (7.1:1) */
  --brand-orange-ink:#8A4708;
  --brand-gradient:linear-gradient(100deg,#2080F0 0%,#33ADF6 34%,#FFA614 78%,#F98012 100%);

  /* White on #2080F0 is 3.88:1 and fails AA at 14px/600, so the FILLED blue is
     the deep stop. #2080F0/#33ADF6 stay in gradients, hairlines and focus rings
     where contrast rules do not bite. #211C17 on #F98012 is 6.6:1, the same
     dark-on-warm relationship NomadKit already uses for sand. */
  --color-secondary:#1E5FD0; --color-secondary-hover:#1A51B4; --color-secondary-active:#164497;
  --color-primary:#F98012;   --color-primary-hover:#E0710B;   --color-primary-active:#C46107;
  --focus-ring:0 0 0 3px rgba(32,128,240,.24);
}

/* Registered so the handoff can interpolate rather than snap. Browsers without
   @property fall back to an instant swap, which is fine — the ground, the type
   and the layout do not move, so nothing jumps. */
@property --color-secondary { syntax:'<color>'; inherits:true; initial-value:#0891B2 }
@property --color-primary   { syntax:'<color>'; inherits:true; initial-value:#D4A373 }

/* Both endpoints are literal hex. colors.css defines these as var() aliases,
   and an alias is not a stable interpolation target — spelling the app-side
   values out here is what makes the handoff animate instead of snap. */
.kf-device[data-flow="app"]{
  --color-secondary:#0891B2; --color-secondary-hover:#05748F; --color-secondary-active:#045A70;
  --color-primary:#D4A373;   --color-primary-hover:#BE8A57;   --color-primary-active:#9C6F41;
  --focus-ring:0 0 0 3px var(--ocean-100);
}
.kf-device{ transition:--color-secondary 260ms var(--ease-standard),
                       --color-primary 260ms var(--ease-standard) }

/* French runs 15-20% longer than English. Without this the tour headlines wrap
   to a fourth line and push the progress rail off the fold on a short phone. */
:lang(fr) .pa-slide__text h1{font-size:25px}
:lang(fr) .pa-sheet h2{font-size:19px}

/* ---------------------------------------------------------------- shell --- */
.pa-screen,.pa-tour,.pa-splash{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:var(--color-bg);overflow:hidden;
}
/* At >=760px app.css paints a mock status bar across the top 46px of the device
   frame and insets .kf-scrollport to clear it. The pre-app roots have to agree,
   or the header renders underneath it. */
@media (min-width:760px){
  .pa-screen,.pa-tour,.pa-splash{top:46px}
}
.pa-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
/* The sticky confirm bar is painted over the scroller, so the last row of
   region cards needs room to clear it. */
.pa-scroll[data-sticky="true"]{padding-bottom:84px}

/* One compositing layer per transition: the incoming screen fades and slides,
   the outgoing one only fades. Retreat is faster than advance — going back
   should feel cheap. */
@keyframes paIn  {from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none}}
@keyframes paBack{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes paLift{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}}
.pa-screen[data-dir="fwd"]{animation:paIn 200ms var(--ease-standard) both}
.pa-screen[data-dir="back"]{animation:paBack 160ms var(--ease-standard) both}

.pa-head{
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 20px 4px;min-height:56px;flex:none;
}
.pa-head__spacer{flex:1}
/* 44px minimum on every header control. The visual size stays small; the hit
   area is negative-margined outward so the layout does not grow. */
.pa-head .kf-iconbtn{
  width:44px;height:44px;margin-left:-11px;
  align-items:center;justify-content:center;border-radius:var(--radius-full);
}
.pa-head .kf-iconbtn[hidden]{display:inline-flex!important;visibility:hidden}  /* hold the slot */
.pa-skip{
  background:none;border:0;cursor:pointer;padding:0 10px;min-height:44px;min-width:44px;
  margin-right:-10px;
  font-size:13px;font-weight:var(--weight-semibold);color:var(--text-secondary);
}
.pa-skip:hover{color:var(--text-primary)}

.pa-body{padding:0 20px;display:flex;flex-direction:column;gap:10px}
.pa-foot{
  flex:none;padding:16px 20px calc(env(safe-area-inset-bottom,0px) + 24px);
  display:flex;flex-direction:column;gap:14px;
}

/* Desktop-frame chrome only (hidden under 760px). --text-muted sits at 3.71:1
   on the neutral-100 page ground, so these two take --text-secondary. */
.kf-chrome__screen,.kf-footnote{color:var(--text-secondary)}

/* ---------------------------------------------------------------- splash --- */
/* position/inset/flex come from the shared root rule above — redeclaring inset
   here would undo the 46px status-bar offset on the desktop frame. */
.pa-splash{
  align-items:center;justify-content:center;gap:0;
  padding:0 32px 8vh;text-align:center;
}
.pa-splash__mark{
  width:96px;height:96px;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);animation:paLift 320ms var(--ease-standard) both;
}
.pa-splash__word{
  margin:22px 0 0;font-family:var(--font-display);font-size:28px;
  font-weight:var(--weight-semibold);color:var(--text-primary);letter-spacing:-.01em;
}
.pa-splash__word b{color:var(--brand-blue-deep);font-weight:inherit}
.pa-splash__tag{
  margin:10px 0 0;font-size:13px;line-height:var(--leading-relaxed);
  color:var(--text-secondary);max-width:260px;text-wrap:pretty;
}
/* Determinate, not a spinner — a spinner on a slow phone reads as failure. */
.pa-splash__bar{
  margin-top:40px;width:64px;height:2px;border-radius:var(--radius-full);
  background:var(--neutral-200);overflow:hidden;
}
.pa-splash__bar i{
  display:block;height:100%;width:0;border-radius:inherit;
  background:var(--brand-gradient);background-size:64px 100%;
  /* Duration is overwritten inline at boot from SPLASH_MS, so the bar reaches
     full exactly as the splash ends. This value is only the fallback. */
  transition:width 3000ms linear;
}

/* ------------------------------------------------------------------ tour --- */
.pa-tour__stage{position:relative;flex:1;overflow:hidden}
.pa-slide{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity 200ms var(--ease-standard);
}
.pa-slide[data-active="true"]{opacity:1;pointer-events:auto}

/* The one real photograph in the flow. Type never crosses it — the legibility
   problem is solved by not creating it. */
.pa-slide__media{
  position:relative;height:300px;flex:none;overflow:hidden;
  background:var(--neutral-200) center/cover no-repeat;
}
.pa-slide__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block;
}
.pa-slide__media::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:96px;
  background:linear-gradient(to top,var(--color-bg),rgba(255,253,247,0));
}
/* Slides 2 and 3 spend zero bytes: the base64 LQIP already in the manifest,
   blurred into an abstract colour field. scale(1.1) hides the blur's edge. */
.pa-slide__field{
  position:relative;height:300px;flex:none;overflow:hidden;background:var(--neutral-200);
}
.pa-slide__field i{
  position:absolute;inset:-20px;display:block;background-size:cover;background-position:center;
  filter:blur(18px) saturate(1.15);transform:scale(1.1);
}
.pa-slide__field::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(to top,var(--color-bg),rgba(255,253,247,0));
}
/* A sharp, real UI fragment over the blur, so it reads as depth of field
   rather than a broken image. */
.pa-float{
  position:absolute;left:50%;transform:translateX(-50%);top:104px;width:86%;z-index:2;
  box-shadow:var(--shadow-lg);border-radius:var(--radius-md);
  background:var(--color-surface);border:1px solid var(--color-border);overflow:hidden;
}
.pa-float__row{display:flex;gap:11px;padding:11px}
.pa-float__thumb{
  width:76px;height:64px;flex:none;border-radius:var(--radius-sm);
  background-size:cover;background-position:center;
}
.pa-float__body{min-width:0;display:flex;flex-direction:column;gap:3px}
.pa-float__title{font-size:13px;font-weight:var(--weight-semibold);line-height:1.3;color:var(--text-primary)}
.pa-float__meta{font-size:11px;color:var(--text-secondary)}
.pa-float__price{font-size:13px;font-weight:var(--weight-bold);color:var(--text-primary);margin-top:auto}
.pa-shield{
  display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
  font-size:10px;font-weight:var(--weight-semibold);
  padding:3px 8px;border-radius:var(--radius-full);
  background:rgba(249,128,18,.13);color:var(--brand-orange-ink);
}
.pa-shield .nk-icon{color:var(--brand-orange)}
/* the real .kf-amount row, lifted from the Mobile Money sheet */
.pa-float__pay{padding:13px 14px;display:flex;flex-direction:column;gap:10px}
.pa-float__amount{display:flex;align-items:center;justify-content:space-between}
.pa-float__amount span{font-size:12px;color:var(--text-secondary)}
.pa-float__amount strong{font-size:19px;font-weight:var(--weight-bold);color:var(--text-primary)}
.pa-float__methods{display:flex;gap:8px}
.pa-momo{
  flex:1;display:flex;align-items:center;gap:7px;padding:7px 9px;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
}
.pa-momo b{
  width:26px;height:26px;flex:none;border-radius:4px;display:flex;
  align-items:center;justify-content:center;font-size:8px;color:#211C17;
}
.pa-momo span{font-size:10px;color:var(--text-secondary);line-height:1.2}

.pa-slide__text{padding:22px 20px 0;display:flex;flex-direction:column;gap:10px}
.pa-slide__text h1{
  margin:0;font-family:var(--font-display);font-size:28px;line-height:1.15;
  font-weight:var(--weight-semibold);color:var(--text-primary);text-wrap:pretty;
}
.pa-slide__text p{margin:0;font-size:15px;line-height:var(--leading-relaxed);color:var(--text-secondary);max-width:32ch;text-wrap:pretty}
.pa-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.pa-chips .nk-tag{cursor:default;height:28px;font-size:12px;padding:0 11px}

/* Filling the rail reveals a slice of the logo gradient: progress through
   onboarding literally paints the mark. */
.pa-rail{display:flex;gap:4px;justify-content:center;align-items:center}
.pa-rail button{
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.pa-rail i{
  display:block;width:28px;height:3px;border-radius:var(--radius-full);
  background:var(--neutral-200);overflow:hidden;position:relative;
}
.pa-rail i::after{
  content:'';position:absolute;inset:0;width:0;border-radius:inherit;
  background:var(--brand-gradient);background-size:104px 100%;
  transition:width 200ms var(--ease-standard);
}
.pa-rail button:nth-child(1) i::after{background-position:0 0}
.pa-rail button:nth-child(2) i::after{background-position:-38px 0}
.pa-rail button:nth-child(3) i::after{background-position:-76px 0}
.pa-rail button[aria-current="step"] i::after,
.pa-rail button[data-done="true"] i::after{width:100%}

/* ----------------------------------------------------------------- where --- */
.pa-where__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:8px}
.pa-region{
  position:relative;text-align:left;cursor:pointer;padding:0;font:inherit;color:inherit;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface);overflow:hidden;
  transition:border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
}
.pa-region:hover{box-shadow:var(--shadow-md)}
.pa-region[aria-pressed="true"]{border:2px solid var(--color-secondary)}
/* Ten flat swatches sampled from the ten region photographs. Ten real photos
   would be ~600KB to answer a question the user answers in one tap. */
/* The swatch carries the CITY, not the region's initials: "South" and
   "South-West" both abbreviate to SO, "North" and "North-West" both to NO, and
   the city is the label people actually search by. */
.pa-region__swatch{
  height:76px;display:flex;align-items:center;justify-content:center;
  padding:0 8px;text-align:center;text-wrap:balance;
  font-family:var(--font-display);font-size:15px;line-height:1.2;
  font-weight:var(--weight-semibold);
  text-shadow:0 1px 3px rgba(33,28,23,.4);
}
.pa-region__check{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:var(--radius-full);
  background:var(--color-surface);display:none;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);color:var(--color-secondary);
}
.pa-region[aria-pressed="true"] .pa-region__check{display:flex}
.pa-region__body{padding:10px 12px 12px}
.pa-region__name,.pa-region__city,.pa-region__count{display:block}
.pa-region__name{font-size:14px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.3}
.pa-region__city{font-size:12px;color:var(--text-secondary);line-height:1.35}
/* --text-muted is 4.43:1 on paper, just under AA at this size, so the counts
   use --text-secondary (7.4:1) instead. */
.pa-region__count{font-size:11px;color:var(--text-secondary);margin-top:4px}
.pa-locate{
  width:100%;justify-content:flex-start;gap:10px;height:50px;
}
.pa-locate .nk-icon:last-child{margin-left:auto;color:var(--text-muted)}
.pa-searchwrap{position:relative}
.pa-searchwrap .nk-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);pointer-events:none;
}
.pa-searchwrap .nk-input{padding-left:38px}
.pa-everything{
  align-self:center;margin:4px 0 8px;background:none;border:0;cursor:pointer;
  font-size:13px;font-weight:var(--weight-semibold);color:var(--color-secondary);
  padding:0 12px;min-height:44px;
}
/* The EN|FR pill is 24px tall by design in the app; inside the pre-app header
   it is one of only three controls on screen, so it gets a real hit area. */
.pa-head .kf-lang button{min-height:44px;padding:0 14px}

/* ---------------------------------------------------------------- sheets --- */
/* Deliberately the same component and the same physics as the Mobile Money
   sheet the user meets later, so auth arrives looking already-trusted. */
.pa-sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:9;max-height:94%;overflow-y:auto;
  background:var(--color-surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:10px 22px calc(env(safe-area-inset-bottom,0px) + 26px);
  box-shadow:var(--shadow-lg);animation:kfUp 200ms var(--ease-standard);
}
.pa-sheet__grip{width:40px;height:4px;border-radius:var(--radius-full);background:var(--color-border-strong);margin:0 auto 14px}
.pa-sheet__head{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-height:28px}
/* --text-muted is 4.43:1 on the sheet's white ground — just under AA at 12px. */
.pa-sheet__ctx{font-size:12px;color:var(--text-secondary);font-weight:var(--weight-semibold)}
.pa-sheet h2{
  margin:0;font-family:var(--font-display);font-size:20px;line-height:1.2;
  font-weight:var(--weight-semibold);color:var(--text-primary);
}
.pa-sheet p{margin:5px 0 0;font-size:13px;line-height:var(--leading-relaxed);color:var(--text-secondary)}
.pa-sheet__body{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.pa-or{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:12px}
.pa-or::before,.pa-or::after{content:'';flex:1;height:1px;background:var(--color-border)}
.pa-legal{font-size:11px;line-height:1.6;color:var(--text-muted);text-align:center;margin:2px 0 0}
.pa-legal a{color:var(--text-secondary);text-decoration:underline}
.pa-social{justify-content:flex-start;gap:10px}
.pa-social svg{width:18px;height:18px;flex:none}
.pa-social span{flex:1;text-align:center;margin-left:-28px}

/* Error lines are reserved at a fixed height so nothing reflows when one
   appears — a form that jumps under your thumb feels broken. */
.pa-help{min-height:17px;font-size:12px;line-height:1.4;color:var(--text-muted)}
.pa-help[data-error="true"]{color:var(--color-error)}

.pa-phone{display:flex;align-items:stretch;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);overflow:hidden}
.pa-phone:focus-within{border-color:var(--color-secondary);box-shadow:var(--focus-ring)}
.pa-phone__cc{
  display:flex;align-items:center;gap:6px;padding:0 12px;flex:none;
  background:var(--color-surface-sunken);border-right:1px solid var(--color-border);
  font-size:14px;font-weight:var(--weight-semibold);color:var(--text-secondary);
}
.pa-phone input{
  flex:1;min-width:0;border:0;outline:none;background:none;padding:0 13px;height:48px;
  font-family:var(--font-body);font-size:20px;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--text-primary);
}
.pa-phone input::placeholder{color:var(--neutral-300);letter-spacing:.04em}

/* Six painted boxes under ONE transparent input, so Android SMS Retriever
   autofill and paste both work. Six real inputs break both. */
.pa-otp{position:relative}
.pa-otp__boxes{display:flex;gap:8px;justify-content:center}
.pa-otp__boxes i{
  width:46px;height:54px;border-radius:var(--radius-sm);
  border:1px solid var(--color-border);background:var(--color-surface);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;
  font-style:normal;color:var(--text-primary);
}
.pa-otp__boxes i:nth-child(3){margin-right:10px}   /* 3 + 3 grouping */
.pa-otp__boxes i[data-active="true"]{border-color:var(--color-border-strong);box-shadow:inset 0 -2px 0 var(--brand-orange)}
.pa-otp__boxes i[data-filled="true"]{border-color:var(--color-border-strong)}
.pa-otp input{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;
  border:0;background:none;font-size:16px;letter-spacing:2em;
}
.pa-otp[data-state="bad"] .pa-otp__boxes{animation:paShake 270ms var(--ease-standard)}
.pa-otp[data-state="bad"] .pa-otp__boxes i{border-color:var(--color-error)}
.pa-otp[data-state="ok"] .pa-otp__boxes i{border-color:var(--color-success);box-shadow:inset 0 -2px 0 var(--color-success)}
@keyframes paShake{0%{transform:translateX(0)}30%{transform:translateX(-4px)}65%{transform:translateX(4px)}100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){ .pa-otp[data-state="bad"] .pa-otp__boxes{animation:none} }

.pa-resend{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--text-secondary)}
.pa-inline{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:var(--weight-semibold);color:var(--color-secondary)}
.pa-inline[disabled]{color:var(--text-muted);cursor:default;font-weight:var(--weight-regular)}
.pa-center{text-align:center}
/* Standalone link-buttons ("Use email instead", "Back to sign in", Skip) are
   actions, not inline text, so they take a real 44px target. The Terms and
   Privacy links stay inline inside their sentence, where WCAG exempts them. */
.pa-sheet .kf-link{min-height:44px;width:100%}
/* Absolutely positioned, so the 44px hit area costs no layout. */
.pa-reveal{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  min-height:44px;min-width:44px;padding:0 8px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;
  font-size:12px;font-weight:var(--weight-semibold);color:var(--color-secondary);
}
.pa-fieldwrap{position:relative}
.pa-fieldwrap .nk-input{padding-right:66px}

.pa-icon-badge{
  width:52px;height:52px;border-radius:var(--radius-full);flex:none;
  display:flex;align-items:center;justify-content:center;margin-bottom:2px;
}
.pa-icon-badge--blue{background:var(--ocean-50);color:var(--brand-blue-deep)}
.pa-icon-badge--orange{background:var(--sand-50);color:var(--brand-orange)}
.pa-icon-badge--green{background:var(--forest-50);color:var(--color-success)}

/* Declining is the same size as accepting — unequal fill, equal footprint. */
.pa-choice{display:flex;flex-direction:column;gap:9px}

.pa-tagrow{display:flex;flex-wrap:wrap;gap:8px}
.pa-verified{display:flex;align-items:center;gap:7px}

/* --------------------------------------------------------- screen index --- */
.pa-index{padding:20px;display:flex;flex-direction:column;gap:10px}
.pa-index a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface);font-size:14px;color:var(--text-primary);text-decoration:none;
}
.pa-index a:hover{box-shadow:var(--shadow-md);text-decoration:none;color:var(--text-primary)}
.pa-index code{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}