/* ──────────────────────────────────────────────────────────────────────────
 * Skin: NaiLê Beauty (`shops.skin = 'naile'`, lib/skins/registry.ts)
 *
 * Applied only under `body[data-skin="naile"]`, and only ever downloaded by
 * NaiLê's pages: a static file the customer layout links for this skin alone
 * (NAILE_CSS), not an imported sheet, so no other shop pays for it. Plain
 * CSS, served as written: no build step touches it.
 *
 * The salon's website in app form: one cream ground, one ink, one accent —
 * the brushed rose gold of the sign — and the forest green of the fascia on
 * the things a customer presses. Zodiak headings over a Switzer body, thin
 * rules, small radii, flat colour. No glass, no gold, no gradients: where 1SN
 * has foil and cove light, this skin has a rose hairline.
 *
 * The palette itself is injected by the layout from the registry (--brand-*,
 * --skin-accent, --skin-glow); this sheet sets the shape and rhythm, and
 * re-tones the generic branded surfaces the skin switches on (reward tickets,
 * the journal, the Friends circle, the 'you' profile) to the salon's colours.
 * ──────────────────────────────────────────────────────────────────────── */

body[data-skin="naile"] {
  /* The website's colours, by name, for the component surfaces below. */
  --nl-ink:       #1c1814;
  --nl-ink-soft:  #6b635d;
  --nl-paper:     #fcfaf5;
  --nl-cream:     #f6f1e8;
  --nl-cream-2:   #efe8db;
  --nl-line:      #ddd4c6;
  --nl-line-2:    #cbbfae;
  --nl-rose:      #b8826a;
  /* Rose as small TEXT: the sign's #b8826a is 2.9:1 on cream; this is 5:1. */
  --nl-rose-text: #8a5d49;
  --nl-green:     #17382f;
  --nl-danger:    #9a3b2e;

  /* The shared component vocabulary (journal, tickets, circle, profile). */
  --jn-ink:   var(--nl-ink);
  --jn-cream: var(--nl-paper);
  --jn-line:  var(--nl-line);
  --jn-umber: var(--nl-cream-2);
  --jn-sign:  var(--nl-cream-2);
  --jn-led:   var(--nl-rose-text);
  --jn-muted: var(--nl-ink-soft);

  /* Radii — the website is sharp-cornered; the app keeps a little softness
     for touch, never the 24px pillows. */
  --radius:     8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 16px;

  /* One soft ink shadow family, low and close. */
  --elev-1: 0 1px 2px rgba(28,24,20,.05), 0 6px 18px -14px rgba(28,24,20,.2);
  --elev-2: 0 10px 28px -20px rgba(28,24,20,.32);
  --elev-3: 0 24px 56px -26px rgba(28,24,20,.4);
  --hairline: 1px solid rgba(28,24,20,.14);

  /* Motion — one spring for movement, one ease for fades. */
  --ease-spring: cubic-bezier(.32, 1.25, .42, 1);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --dur-base:    300ms;
  --dur-sheet:   500ms;

  --skin-status: #17382f;

  font-size: 15px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── Type: Zodiak at 500, like the website's headings ───────────────────── */
body[data-skin="naile"] .font-display {
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
body[data-skin="naile"] h1.font-display { font-size: 28px; }

/* Eyebrows: small, tracked, ink-soft. */
body[data-skin="naile"] .brand-text-faint.uppercase,
body[data-skin="naile"] .uppercase.tracking-widest {
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* Inputs: paper, small radius, ink focus. */
body[data-skin="naile"] .brand-input {
  background: var(--brand-surface);
  border-radius: var(--radius);
  border-color: var(--brand-border);
}
/* Focus: a cream ring inside an ink ring, so it shows on the cream pages,
   the fascia-green buttons, the scan screen and over the photographs alike.
   Rose is for what she has earned, never for focus. */
body[data-skin="naile"] *:focus-visible {
  outline: 2px solid transparent !important;
  box-shadow: 0 0 0 2px var(--nl-cream), 0 0 0 4px var(--nl-ink) !important;
}
/* Headings focused by script (a new step, the stamp landing) are not a
   keyboard stop: no ring. */
body[data-skin="naile"] [tabindex="-1"]:focus { outline: none !important; box-shadow: none !important; }

/* ── Cards and platform banners sit on paper, one hairline ──────────────── */
body[data-skin="naile"] [class*="rounded-"][class*="bg-"],
body[data-skin="naile"] .brand-surface { background: var(--brand-surface); }
body[data-skin="naile"] [role="status"]:not(.skin-tabs) { border-radius: var(--radius-2xl); }

/* ── Tab bar: the fascia green, the live tab in cream ─────────────────────
 * The 'pill' nav renders a bare <nav class="skin-tabs">: every pill skin owns
 * the whole geometry. */
body[data-skin="naile"] .skin-tabs {
  position: fixed;
  left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  height: 62px;
  border-radius: 999px;
  background: var(--nl-green);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  padding: 6px;
  box-shadow: 0 16px 32px -16px rgba(23,56,47,.55);
  z-index: 30;
  view-transition-name: app-bottom-nav;
}
body[data-skin="naile"] .skin-tabs a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 0 2px;
  border-radius: 999px;
  color: rgba(246,241,232,.7);
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  min-width: 0;
}
/* Six tabs share 390px. One line, ellipsis, never wrap. */
body[data-skin="naile"] .skin-tabs a > span:last-child {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-skin="naile"] .skin-tabs a[aria-current="page"] {
  color: var(--nl-green);
  background: var(--nl-cream);
  view-transition-name: skin-tab-active;
}
body[data-skin="naile"] .skin-tabs svg { width: 18px; height: 18px; }

/* ── Buttons: green pills, sentence case ─────────────────────────────────── */
body[data-skin="naile"] .skin-pill {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 14.5px;
  font-weight: 600;
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
body[data-skin="naile"] .skin-pill:active { transform: scale(.97); }

/* ── Almond stamp slot: a nail, painted rose when the visit is in ────────── */
body[data-skin="naile"] .skin-almond {
  /* The slot sizes itself, not its contents: without a width the used size
     is shrink-to-fit and one missing mark collapses every slot to a dot. */
  width: 100%;
  aspect-ratio: 34 / 58;
  max-width: 42px;
  margin: 0 auto;
  border-radius: 50% 50% 50% 50% / 72% 72% 28% 28%;
  border: 1.3px solid rgba(28,24,20,.5);
  background: var(--brand-surface);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 350ms var(--ease-out), border-color 350ms var(--ease-out);
}
body[data-skin="naile"] .skin-almond img {
  width: 56%; height: auto; display: block;
  opacity: 0; transform: scale(.4);
  transition: opacity 300ms var(--ease-out), transform 500ms var(--ease-spring);
}
body[data-skin="naile"] .skin-almond.is-filled { background: var(--skin-accent); border-color: var(--skin-accent); }
body[data-skin="naile"] .skin-almond.is-filled img { opacity: 1; transform: none; }
body[data-skin="naile"] .skin-almond.is-next { border-style: dashed; border-color: var(--skin-accent); }
body[data-skin="naile"] .skin-almond.is-landing::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 1.5px solid var(--skin-accent); opacity: 0;
  animation: skin-naile-ring 900ms var(--ease-out) forwards;
}
@keyframes skin-naile-ring {
  0%   { opacity: 0; transform: scale(.85); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.15); }
}

/* ── Stamp-earned sheet ─────────────────────────────────────────────────── */
body[data-skin="naile"] .skin-sheet {
  border-radius: 22px 22px 0 0;
  background: var(--brand-surface);
  box-shadow: var(--elev-3);
  animation: skin-naile-sheet-up var(--dur-sheet) var(--ease-spring) both;
}
@keyframes skin-naile-sheet-up {
  from { transform: translateY(105%); }
  to   { transform: none; }
}
body[data-skin="naile"] .skin-sheet-down { animation: skin-naile-sheet-down 220ms ease-in both; }
@keyframes skin-naile-sheet-down { to { transform: translateY(105%); } }
body[data-skin="naile"] .skin-big-almond {
  width: 74px; height: 112px; margin: 6px auto 14px;
  border-radius: 50% 50% 50% 50% / 72% 72% 28% 28%;
  background: var(--skin-accent);
  display: flex; align-items: center; justify-content: center; position: relative;
}
body[data-skin="naile"] .skin-big-almond img { width: 38px; height: auto; }
body[data-skin="naile"] .skin-big-almond::after {
  content: ""; position: absolute; inset: -7px; border-radius: inherit;
  border: 1px solid var(--skin-accent);
}

/* ── Ready reward: a rose hairline, not a glow ──────────────────────────── */
body[data-skin="naile"] .skin-glow { position: relative; box-shadow: inset 0 0 0 1.5px var(--skin-accent); }
body[data-skin="naile"] .skin-foil-edge { box-shadow: inset 0 2px 0 0 var(--skin-accent); }

/* ── Lists: staggered entrance for diary rows and reward rows ───────────── */
body[data-skin="naile"] .skin-stagger > * { animation: skin-naile-rise 500ms var(--ease-spring) both; }
body[data-skin="naile"] .skin-stagger > *:nth-child(2) { animation-delay: 50ms; }
body[data-skin="naile"] .skin-stagger > *:nth-child(3) { animation-delay: 100ms; }
body[data-skin="naile"] .skin-stagger > *:nth-child(4) { animation-delay: 150ms; }
body[data-skin="naile"] .skin-stagger > *:nth-child(5) { animation-delay: 200ms; }
body[data-skin="naile"] .skin-stagger > *:nth-child(n+6) { animation-delay: 240ms; }
@keyframes skin-naile-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Generic chrome the skin turns off: corner brackets, the foil sweep, the
   breathing on empty slots. */
body[data-skin="naile"] .skin-hide { display: none !important; }
body[data-skin="naile"] .soft-breath { animation: none; }

/* ── Empty states: give them the page, not a small floating box ─────────── */
body[data-skin="naile"] .skin-empty {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 8vh;
}

/* ── Card screen: the shopfront band ────────────────────────────────────────
 * The status bar gets a cream strip of its own above the photograph, so the
 * clock doesn't sit on the fascia. */
body[data-skin="naile"] .skin-masthead-band { padding-top: env(safe-area-inset-top); background: var(--nl-cream) !important; }

/* ── Reward tickets (components/customer/RewardTickets.tsx) ────────────────
 * Each reward a paper ticket headed by one of the salon's own sets, swiped in
 * a row; used by holding, which shows the signed code. Flat paper, a dashed
 * tear line, the seal in rose. */
body[data-skin="naile"] .rt-title { font-size: 42px; line-height: 1; letter-spacing: -.01em; }
/* The Rewards header sat flush under the fascia band (pt-safe-top beat pt-8):
   the same 32px under the band as Friends (.fc-page) and You (.yu-head). */
body[data-skin="naile"] header:has(> .rt-title) { padding-top: calc(env(safe-area-inset-top) + 32px); }
body[data-skin="naile"] .rt-sub { margin-top: 8px; max-width: 32ch; font-size: 15px; line-height: 1.45; color: var(--nl-ink-soft); }
body[data-skin="naile"] .rt-none { margin: 4px 0 10px; font-size: 14px; color: var(--nl-ink-soft); }
body[data-skin="naile"] .rt-row { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 8px -20px 0; padding: 6px 20px 18px; scrollbar-width: none; perspective: 900px; }
body[data-skin="naile"] .rt-row::-webkit-scrollbar { display: none; }
body[data-skin="naile"] .rt-ticket { flex: none; width: 82%; scroll-snap-align: center; position: relative; transition: transform .5s var(--ease-out); filter: drop-shadow(0 14px 20px rgba(28,24,20,.1)); }
body[data-skin="naile"] .rt-body { position: relative; overflow: hidden; border-radius: 16px 16px 6px 6px; padding: 22px 20px 18px; background: var(--nl-paper); color: var(--brand-text); }
body[data-skin="naile"] .rt-dim .rt-body, body[data-skin="naile"] .rt-dim .rt-stub { background: var(--nl-cream-2); }
body[data-skin="naile"] .rt-ph { position: relative; height: 162px; margin: -22px -20px 16px; border-radius: 16px 16px 0 0; background-size: cover; background-position: center 45%; background-color: var(--nl-cream-2); }
body[data-skin="naile"] .rt-dim .rt-ph { filter: saturate(.7); }
body[data-skin="naile"] .rt-seal { position: absolute; z-index: 2; right: 18px; top: 136px; width: 54px; height: 54px; border-radius: 50%; background: var(--nl-rose);
  display: grid; place-items: center; box-shadow: 0 0 0 4px var(--nl-paper); }
body[data-skin="naile"] .rt-dim .rt-seal { box-shadow: 0 0 0 4px var(--nl-cream-2); }
body[data-skin="naile"] .rt-seal img { width: 22px; height: auto; }
body[data-skin="naile"] .rt-amt { margin: 0; font-size: 48px; line-height: 1; letter-spacing: -.02em; padding-right: 60px; text-wrap: balance; }
body[data-skin="naile"] .rt-what { margin: 8px 0 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--nl-ink-soft); }
body[data-skin="naile"] .rt-stub { position: relative; margin-top: -1px; padding: 16px 20px 18px; border-radius: 6px 6px 16px 16px; background: var(--nl-paper); border-top: 1.5px dashed var(--nl-line-2); transform-origin: 12% 0; }
body[data-skin="naile"] .rt-stub::before, body[data-skin="naile"] .rt-stub::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-bg); }
body[data-skin="naile"] .rt-stub::before { left: -11px; }
body[data-skin="naile"] .rt-stub::after { right: -11px; }
body[data-skin="naile"] .rt-stub p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--nl-ink-soft); }
body[data-skin="naile"] .rt-hold { position: relative; overflow: hidden; margin-top: 12px; width: 100%; height: 52px; border-radius: 999px; background: var(--nl-green); color: var(--nl-cream);
  font-size: 15px; font-weight: 600; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
body[data-skin="naile"] .rt-fill { position: absolute; inset: 0; background: var(--nl-rose); transform-origin: left; transform: scaleX(0); }
body[data-skin="naile"] .rt-lbl { position: relative; }
body[data-skin="naile"] .rt-pressing .rt-lbl { color: var(--nl-ink); transition: color .2s .3s; }
body[data-skin="naile"] .rt-redeem { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 12px; animation: skin-naile-rise .5s var(--ease-out) both; }
body[data-skin="naile"] .rt-qr { width: 124px; height: 124px; border-radius: 10px; background: #fffbf3; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--nl-line); }
body[data-skin="naile"] .rt-wait { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--nl-line); border-top-color: var(--nl-ink-soft); animation: skin-naile-spin .8s linear infinite; }
@keyframes skin-naile-spin { to { transform: rotate(360deg); } }
body[data-skin="naile"] .rt-retry { min-height: 44px; font-size: 13px; font-weight: 600; text-decoration: underline; padding: 12px; }
body[data-skin="naile"] .rt-redeem b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="naile"] .rt-redeem p { margin-top: 6px; font-size: 12.5px; line-height: 1.4; }
body[data-skin="naile"] .rt-live { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-skin="naile"] .rt-live i, body[data-skin="naile"] .rt-used b i { width: 8px; height: 8px; border-radius: 50%; background: var(--nl-green); animation: skin-naile-breathe 1.6s ease-in-out infinite; }
@keyframes skin-naile-breathe { 50% { opacity: .3; } }
body[data-skin="naile"] .rt-used b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
body[data-skin="naile"] .rt-used span { font-size: 13px; font-weight: 500; color: var(--nl-ink-soft); }
body[data-skin="naile"] .rt-torn .rt-body { filter: grayscale(.35); opacity: .85; }
body[data-skin="naile"] .rt-torn .rt-used { animation: skin-naile-rise .6s .5s var(--ease-out) both; }
body[data-skin="naile"] .rt-torn .rt-stub { animation: skin-naile-tear .9s cubic-bezier(.5,0,.75,0) both; }
@keyframes skin-naile-tear { 0% { transform: none; } 30% { transform: rotate(3deg) translateY(4px); } 60% { transform: rotate(-1deg); } 100% { transform: none; } }
body[data-skin="naile"] .rt-sec { display: flex; align-items: center; justify-content: center; margin-top: 12px; height: 48px; border-radius: 999px; border: 1px solid var(--nl-ink); color: var(--nl-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
body[data-skin="naile"] .rt-dots { display: flex; justify-content: center; gap: 6px; }
body[data-skin="naile"] .rt-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--nl-line-2); transition: width .4s var(--ease-spring), background .4s; }
body[data-skin="naile"] .rt-dots i.on { width: 20px; background: var(--nl-green); }
/* The paper design (approved frame 6): each ready reward one full-width
   ticket, stacked, nothing tilting; the ways to earn more as quiet rows. */
body[data-skin="naile"] .rt-stack { display: grid; gap: 18px; overflow: visible; scroll-snap-type: none; margin: 14px 0 0; padding: 0; perspective: none; }
body[data-skin="naile"] .rt-stack .rt-ticket { width: 100%; transform: none; }
body[data-skin="naile"] .rt-amt-long { font-size: 34px; line-height: 1.05; }
/* A one-step way to show the code: invisible until a keyboard or a screen
   reader reaches it, then a plain text button under the hold. */
body[data-skin="naile"] .rt-show { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-skin="naile"] .rt-show:focus-visible { position: static; width: 100%; height: auto; min-height: 44px; margin-top: 8px; clip-path: none; white-space: normal;
  font-size: 14.5px; font-weight: 600; color: var(--nl-green); text-decoration: underline; text-underline-offset: 3px; }
body[data-skin="naile"] .rt-more { margin-top: 26px; display: grid; gap: 10px; }
body[data-skin="naile"] .rt-mini { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; min-height: 56px; padding: 10px 12px 10px 10px; border-radius: 14px;
  background: var(--nl-cream-2); color: var(--nl-ink); text-decoration: none; font-size: 13.5px; line-height: 1.4; }
body[data-skin="naile"] .rt-mini b { display: block; font-size: 15px; font-weight: 600; color: var(--nl-ink); }
body[data-skin="naile"] .rt-mini > span:last-child { color: var(--nl-ink-soft); }
body[data-skin="naile"] .rt-mini-ph { width: 56px; height: 56px; border-radius: 10px; background: var(--nl-cream) center / cover no-repeat; filter: saturate(.8); }
body[data-skin="naile"] .rt-history { margin-top: 30px; }
body[data-skin="naile"] .rt-history h2 { font-size: 24px; margin-bottom: 8px; }
body[data-skin="naile"] .rt-hrow { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--nl-line); }
body[data-skin="naile"] .rt-hrow b { font-size: 15px; font-weight: 600; }
body[data-skin="naile"] .rt-hrow span { font-size: 13.5px; color: var(--nl-ink-soft); }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="naile"] .rt-ticket, body[data-skin="naile"] .rt-redeem, body[data-skin="naile"] .rt-torn .rt-stub, body[data-skin="naile"] .rt-torn .rt-used { animation: none; transition: none; }
  body[data-skin="naile"] .rt-live i, body[data-skin="naile"] .rt-used b i { animation: none; }
}

/* ── Journal (diary: 'journal') ─────────────────────────────────────────────
 * The diary as a conversation with the salon: day rules, the salon on the
 * left on paper, the customer on the right in ink, visits as cream pills, and
 * a composer that sits above the tab bar. */
body[data-skin="naile"] .jn-page { padding: 0 20px calc(250px + env(safe-area-inset-bottom)); }
body[data-skin="naile"] .jn-head { padding-top: calc(env(safe-area-inset-top) + 32px); }
body[data-skin="naile"] .jn-thread { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
body[data-skin="naile"] .jn-day { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; }
body[data-skin="naile"] .jn-day::before, body[data-skin="naile"] .jn-day::after { content: ""; flex: 1; height: 1px; background: var(--jn-line); }
body[data-skin="naile"] .jn-day span { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--jn-muted); text-align: center; max-width: 75%; }
body[data-skin="naile"] .jn-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; }
body[data-skin="naile"] .jn-msg.jn-me { align-self: flex-end; flex-direction: row-reverse; }
body[data-skin="naile"] .jn-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
body[data-skin="naile"] .jn-me .jn-col { align-items: flex-end; }
body[data-skin="naile"] .jn-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display), serif; font-size: 13px; line-height: 1;
  background: var(--jn-sign); color: var(--jn-ink); border: 1px solid var(--jn-line); }
/* The salon signs with its monogram: cream N-circumflex on a rose disc. */
body[data-skin="naile"] .jn-av.jn-salon { background: var(--nl-rose); border-color: var(--nl-rose); }
body[data-skin="naile"] .jn-av-mark { width: 11px; height: auto; display: block; }
body[data-skin="naile"] .jn-bub { padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--jn-cream); border: 1px solid var(--jn-line); font-size: 14.5px; line-height: 1.45; font-weight: 450; color: var(--jn-ink); min-width: 0; }
body[data-skin="naile"] .jn-me .jn-bub { border-radius: 16px 16px 4px 16px; background: var(--jn-ink); color: var(--jn-cream); border-color: var(--jn-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-skin="naile"] .jn-who { display: block; font-size: 12px; font-weight: 600; color: var(--jn-led); margin-bottom: 2px; }
body[data-skin="naile"] .jn-text { white-space: pre-wrap; overflow-wrap: anywhere; }
body[data-skin="naile"] .jn-when { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; opacity: .6; }
body[data-skin="naile"] .jn-phs { display: grid; gap: 4px; margin: 2px 0 6px; }
body[data-skin="naile"] .jn-phs.jn-two { grid-template-columns: 1fr 1fr; }
body[data-skin="naile"] .jn-ph { display: block; padding: 0; border: 0; background: none; border-radius: 10px; overflow: hidden; }
body[data-skin="naile"] .jn-ph img { display: block; width: 230px; max-width: 100%; aspect-ratio: 4/5; object-fit: cover; }
body[data-skin="naile"] .jn-two .jn-ph img { width: 112px; aspect-ratio: 1; }
body[data-skin="naile"] .jn-story { display: inline-flex; align-items: center; margin: 4px 0 2px; height: 44px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--jn-ink);
  background: var(--nl-cream-2); border: 1px solid var(--jn-line); }
body[data-skin="naile"] .jn-remove { scroll-margin-bottom: calc(190px + env(safe-area-inset-bottom)); margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--nl-danger); padding: 4px 6px; animation: skin-naile-pop .35s var(--ease-spring) both; }
body[data-skin="naile"] .jn-event { align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--jn-muted); padding: 6px 12px; border-radius: 999px; background: var(--jn-umber); }
body[data-skin="naile"] .jn-event i { width: 7px; height: 7px; border-radius: 50%; background: var(--nl-rose); }
body[data-skin="naile"] .jn-pop { animation: skin-naile-pop .5s var(--ease-spring) both; }
@keyframes skin-naile-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
body[data-skin="naile"] .jn-err { font-size: 13px; color: var(--nl-danger); margin-top: 6px; }

body[data-skin="naile"] .jn-composer { position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 12px 14px 8px;
  background: var(--brand-bg); border-top: 1px solid var(--jn-line); animation: skin-naile-up-in .5s var(--ease-out) both; }
@keyframes skin-naile-up-in { from { opacity: 0; transform: translateY(12px); } }
body[data-skin="naile"] .jn-starters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 8px; padding: 0 14px; }
body[data-skin="naile"] .jn-starters::-webkit-scrollbar { display: none; }
body[data-skin="naile"] .jn-starters button { flex: none; height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--jn-line); background: var(--jn-cream); font-size: 13px; font-weight: 600; color: var(--jn-ink);
  transition: transform .25s var(--ease-spring); }
body[data-skin="naile"] .jn-starters button:active { transform: scale(.95); }
body[data-skin="naile"] .jn-starters .jn-log { border-color: var(--jn-ink); }
body[data-skin="naile"] .jn-chips { display: flex; gap: 8px; margin-bottom: 8px; }
body[data-skin="naile"] .jn-chip { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--jn-line); animation: skin-naile-pop .4s var(--ease-spring) both; }
body[data-skin="naile"] .jn-chip img { width: 100%; height: 100%; object-fit: cover; }
body[data-skin="naile"] .jn-chip { overflow: visible; }
body[data-skin="naile"] .jn-chip img { border-radius: 10px; }
body[data-skin="naile"] .jn-chip button { position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--jn-ink); color: var(--jn-cream); font-size: 15px; line-height: 28px; }
body[data-skin="naile"] .jn-chip button::before { content: ""; position: absolute; inset: -8px; }
body[data-skin="naile"] .jn-bar { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border-radius: 22px; background: var(--jn-cream); border: 1px solid var(--nl-line-2); transition: border-color .2s, box-shadow .2s; }
body[data-skin="naile"] .jn-bar:focus-within { border-color: var(--nl-green); box-shadow: 0 0 0 3px rgba(23,56,47,.16); }
body[data-skin="naile"] .jn-pickwrap { position: relative; flex: none; }
body[data-skin="naile"] .jn-cam { width: 42px; height: 42px; border-radius: 50%; background: var(--jn-ink); color: var(--jn-cream); display: grid; place-items: center; transition: transform .25s var(--ease-spring); }
body[data-skin="naile"] .jn-cam:active { transform: scale(.92); }
body[data-skin="naile"] .jn-cam:disabled { opacity: .4; }
body[data-skin="naile"] .jn-cam svg, body[data-skin="naile"] .jn-send svg { width: 20px; height: 20px; }
body[data-skin="naile"] .jn-pick { position: absolute; left: 0; bottom: 54px; width: 232px; padding: 6px; border-radius: 14px; background: var(--jn-cream); border: 1px solid var(--jn-line);
  box-shadow: var(--elev-3); transform-origin: 20px 100%; animation: skin-naile-pop .35s var(--ease-spring) both; }
body[data-skin="naile"] .jn-pick label { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--jn-ink); cursor: pointer; }
body[data-skin="naile"] .jn-pick label:active { background: var(--jn-umber); }
body[data-skin="naile"] .jn-pick svg { width: 20px; height: 20px; color: var(--jn-led); }
body[data-skin="naile"] .jn-bar textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 120px; padding: 10px 2px; border: 0; background: none; resize: none; font-size: 16px; line-height: 22px; font-weight: 450; color: var(--jn-ink); outline: none; }
body[data-skin="naile"] .jn-bar textarea::placeholder { color: #8f857d; }
body[data-skin="naile"] .jn-send { width: 42px; height: 42px; border-radius: 50%; background: var(--nl-green); color: var(--nl-cream); display: grid; place-items: center; flex: none; transition: transform .25s var(--ease-spring), opacity .2s; }
body[data-skin="naile"] .jn-send:active { transform: scale(.9); }
body[data-skin="naile"] .jn-send:disabled { opacity: .45; }
body[data-skin="naile"] .jn-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: skin-naile-spin .8s linear infinite; }

body[data-skin="naile"] .jn-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(28,24,20,.42); display: flex; align-items: flex-end; animation: skin-naile-fade .3s ease both; }
@keyframes skin-naile-fade { from { opacity: 0; } }
body[data-skin="naile"] .jn-sheet { width: 100%; max-height: 92dvh; overflow-y: auto; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--brand-bg); color: var(--jn-ink);
  animation: skin-naile-up var(--dur-sheet) var(--ease-spring) both; }
@keyframes skin-naile-up { from { transform: translateY(100%); } }
body[data-skin="naile"] .jn-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--jn-line); margin: 0 auto 8px; }
body[data-skin="naile"] .jn-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
body[data-skin="naile"] .jn-sheet-head h2 { font-size: 28px; }
body[data-skin="naile"] .jn-x { width: 44px; height: 44px; border-radius: 50%; background: var(--jn-umber); color: var(--jn-ink); font-size: 22px; line-height: 44px; text-align: center; }
body[data-skin="naile"] .jn-drop { position: relative; display: grid; place-items: center; min-height: 190px; border-radius: 14px; border: 1.5px dashed var(--nl-line-2); background: var(--jn-cream); overflow: hidden; text-align: center; }
body[data-skin="naile"] .jn-drop img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
body[data-skin="naile"] .jn-drop-empty b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="naile"] .jn-redo { position: absolute; right: 10px; bottom: 10px; height: 44px; padding: 0 12px; border-radius: 999px; background: var(--jn-cream); font-size: 12.5px; font-weight: 600; color: var(--jn-ink); }
body[data-skin="naile"] .jn-two { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
body[data-skin="naile"] .jn-two label { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--jn-ink); color: var(--jn-ink); background: var(--jn-cream); }
body[data-skin="naile"] .jn-two label:first-child { background: var(--jn-ink); color: var(--jn-cream); }
body[data-skin="naile"] .jn-two svg { width: 18px; height: 18px; }
body[data-skin="naile"] .jn-field { display: block; margin-top: 14px; }
body[data-skin="naile"] .jn-field span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--jn-muted); margin-bottom: 6px; }
body[data-skin="naile"] .jn-field input { width: 100%; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--nl-line-2); background: var(--jn-cream); font-size: 16px; color: var(--jn-ink); outline: none; }
body[data-skin="naile"] .jn-field input:focus { border-color: var(--nl-green); box-shadow: 0 0 0 3px rgba(23,56,47,.16); }
body[data-skin="naile"] .jn-note { margin-top: 12px; font-size: 13px; color: var(--jn-muted); }
body[data-skin="naile"] .jn-save { margin-top: 16px; width: 100%; height: 52px; border-radius: 999px; background: var(--nl-green); color: var(--nl-cream); font-size: 15px; font-weight: 600; }
body[data-skin="naile"] .jn-save:disabled { opacity: .4; }
body[data-skin="naile"] .jn-lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(28,24,20,.9); animation: skin-naile-fade .25s ease both; }
body[data-skin="naile"] .jn-lightbox > div { position: relative; }
body[data-skin="naile"] .jn-lightbox img { max-width: 100%; max-height: 85dvh; border-radius: 10px; object-fit: contain; }
body[data-skin="naile"] .jn-lightbox .jn-x { position: absolute; top: -12px; right: -12px; background: var(--brand-bg); }

/* Journal segments + the private Saved board. The segments stick under the
 * status bar so Saved is one tap away however far up the thread you are. */
body[data-skin="naile"] .jn-page.jn-on-saved { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
body[data-skin="naile"] .jn-seg { position: sticky; top: env(safe-area-inset-top); z-index: 25; display: flex; gap: 4px; margin: 14px -20px 0; padding: 8px 20px;
  background: var(--brand-bg); box-shadow: 0 calc(-1 * env(safe-area-inset-top)) 0 var(--brand-bg); }
body[data-skin="naile"] .jn-seg button { flex: 1; min-width: 0; height: 44px; border-radius: 999px; border: 1px solid var(--jn-line); background: var(--jn-cream); color: var(--jn-ink);
  font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color .2s, color .2s, border-color .2s; }
body[data-skin="naile"] .jn-seg button.jn-seg-on { background: var(--jn-ink); color: var(--jn-cream); border-color: var(--jn-ink); }
body[data-skin="naile"] .jn-seg-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; line-height: 20px; background: var(--jn-umber); color: var(--jn-ink); }
body[data-skin="naile"] .jn-seg-on .jn-seg-n { background: var(--nl-cream); color: var(--nl-ink); }
body[data-skin="naile"] .jn-seg + .jn-thread { margin-top: 2px; }
body[data-skin="naile"] .jn-phw { position: relative; display: block; }
body[data-skin="naile"] .jn-keep { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
body[data-skin="naile"] .jn-keep span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(252,250,245,.94); color: var(--jn-ink);
  box-shadow: 0 4px 10px -4px rgba(28,24,20,.4); transition: transform .25s var(--ease-spring), background-color .2s; }
body[data-skin="naile"] .jn-keep svg { width: 16px; height: 16px; }
body[data-skin="naile"] .jn-keep:active span { transform: scale(.88); }
body[data-skin="naile"] .jn-keep:disabled { opacity: 1; }
body[data-skin="naile"] .jn-keep.jn-kept span { background: var(--nl-rose); color: var(--nl-ink); animation: skin-naile-pop .35s var(--ease-spring) both; }

body[data-skin="naile"] .jn-saved { margin-top: 14px; color: var(--jn-ink); }
body[data-skin="naile"] .jn-sv-loading { height: 200px; }
body[data-skin="naile"] .jn-sv-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
body[data-skin="naile"] .jn-sv-lede { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--jn-muted); }
body[data-skin="naile"] .jn-sv-add { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px;
  background: var(--nl-green); color: var(--nl-cream); font-size: 14.5px; font-weight: 600; transition: transform .25s var(--ease-spring); }
body[data-skin="naile"] .jn-sv-add:active { transform: scale(.95); }
body[data-skin="naile"] .jn-sv-add svg { width: 18px; height: 18px; }
body[data-skin="naile"] .jn-sv-retry button { margin-left: 4px; min-height: 44px; font-weight: 600; text-decoration: underline; color: inherit; }
body[data-skin="naile"] .jn-sv-empty { margin-top: 8px; padding: 28px 22px 24px; border-radius: 16px; background: var(--jn-cream); border: 1px solid var(--jn-line); text-align: center; animation: skin-naile-pop .5s var(--ease-spring) both; }
body[data-skin="naile"] .jn-sv-mark { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--jn-sign); color: var(--jn-led); }
body[data-skin="naile"] .jn-sv-mark svg { width: 24px; height: 24px; }
body[data-skin="naile"] .jn-sv-empty h2 { font-size: 28px; line-height: 1.1; }
body[data-skin="naile"] .jn-sv-empty p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; }
body[data-skin="naile"] .jn-sv-empty .jn-sv-hint { font-size: 13px; color: var(--jn-muted); }
body[data-skin="naile"] .jn-sv-empty .jn-sv-add { margin-top: 18px; }
body[data-skin="naile"] .jn-sv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
body[data-skin="naile"] .jn-sv-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body[data-skin="naile"] .jn-sv-card { border-radius: 12px; background: var(--jn-cream); border: 1px solid var(--jn-line); overflow: hidden; animation: skin-naile-pop .45s var(--ease-spring) both; }
body[data-skin="naile"] .jn-sv-card.jn-sv-note { background: var(--jn-sign); }
body[data-skin="naile"] .jn-sv-ph { display: block; width: 100%; padding: 0; border: 0; background: var(--jn-umber); }
body[data-skin="naile"] .jn-sv-ph img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
body[data-skin="naile"] .jn-sv-gone { aspect-ratio: 4/5; }
body[data-skin="naile"] .jn-sv-body { padding: 10px 10px 8px; }
body[data-skin="naile"] .jn-sv-cap { font-size: 13.5px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
body[data-skin="naile"] .jn-sv-text { padding: 4px 2px 2px; font-family: var(--font-display), serif; font-size: 18px; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; }
body[data-skin="naile"] .jn-sv-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 28px; margin-top: 2px; }
body[data-skin="naile"] .jn-sv-meta { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--jn-muted); min-width: 0; }
body[data-skin="naile"] .jn-sv-share { width: 100%; min-height: 44px; margin-top: 6px; padding: 4px 8px; border-radius: 999px; background: var(--jn-ink); color: var(--jn-cream);
  font-size: 12.5px; line-height: 1.2; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; text-align: center; }
body[data-skin="naile"] .jn-sv-share svg { width: 14px; height: 14px; flex: none; }
body[data-skin="naile"] .jn-sv-share.jn-sv-done { background: none; color: var(--jn-led); border: 1px solid var(--jn-led); }
body[data-skin="naile"] .jn-sv-share:disabled { cursor: default; }
body[data-skin="naile"] .jn-sv-rm { flex: none; width: 44px; height: 44px; margin: -8px -8px -8px 0; border-radius: 10px; display: grid; place-items: center; color: var(--jn-muted); }
body[data-skin="naile"] .jn-sv-rm svg { width: 19px; height: 19px; }
body[data-skin="naile"] .jn-sv-rm:active { background: var(--jn-umber); }
body[data-skin="naile"] .jn-sv-confirm { margin-top: 8px; animation: skin-naile-pop .3s var(--ease-spring) both; }
body[data-skin="naile"] .jn-sv-confirm p { font-size: 12.5px; font-weight: 600; }
body[data-skin="naile"] .jn-sv-confirm div { display: flex; gap: 4px; margin-top: 6px; }
body[data-skin="naile"] .jn-sv-confirm button { flex: 1; min-height: 44px; border-radius: 10px; font-size: 12.5px; font-weight: 600; }
body[data-skin="naile"] .jn-sv-yes { background: var(--nl-danger); color: #fff; }
body[data-skin="naile"] .jn-sv-no { background: var(--jn-cream); color: var(--jn-ink); border: 1px solid var(--jn-line); }
body[data-skin="naile"] .jn-sv-choices { display: grid; gap: 8px; margin-bottom: 8px; }
body[data-skin="naile"] .jn-sv-choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--jn-line);
  background: var(--jn-cream); color: var(--jn-ink); text-align: left; cursor: pointer; transition: transform .25s var(--ease-spring); }
body[data-skin="naile"] .jn-sv-choice:active { transform: scale(.98); background: var(--jn-umber); }
body[data-skin="naile"] .jn-sv-choice svg { width: 24px; height: 24px; flex: none; color: var(--jn-led); }
body[data-skin="naile"] .jn-sv-choice b { display: block; font-size: 15.5px; font-weight: 600; }
body[data-skin="naile"] .jn-sv-choice small { display: block; margin-top: 1px; font-size: 13px; color: var(--jn-muted); }
body[data-skin="naile"] .jn-field textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--nl-line-2); background: var(--jn-cream); font-size: 16px; line-height: 1.45; color: var(--jn-ink); outline: none; resize: none; }
body[data-skin="naile"] .jn-field textarea:focus { border-color: var(--nl-green); box-shadow: 0 0 0 3px rgba(23,56,47,.16); }
body[data-skin="naile"] .jn-sv-count { margin-top: 4px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--jn-muted); font-variant-numeric: tabular-nums; }
body[data-skin="naile"] .jn-sheet label.jn-redo { display: inline-flex; align-items: center; cursor: pointer; }
body[data-skin="naile"] .jn-sv-back { display: block; width: 100%; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--jn-muted); }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="naile"] .jn-pop, body[data-skin="naile"] .jn-composer, body[data-skin="naile"] .jn-pick, body[data-skin="naile"] .jn-chip,
  body[data-skin="naile"] .jn-sheet, body[data-skin="naile"] .jn-scrim, body[data-skin="naile"] .jn-remove,
  body[data-skin="naile"] .jn-sv-card, body[data-skin="naile"] .jn-sv-empty, body[data-skin="naile"] .jn-sv-confirm, body[data-skin="naile"] .jn-keep.jn-kept span { animation: none; }
}

/* ── Friends tab (referral: 'circle') ───────────────────────────────────── */
body[data-skin="naile"] .fc-page { color: var(--jn-ink); padding: calc(env(safe-area-inset-top) + 32px) 20px calc(110px + env(safe-area-inset-bottom)); }
body[data-skin="naile"] .fc-page > * { animation: skin-naile-pop .6s var(--ease-spring) both; }
body[data-skin="naile"] .fc-page > :nth-child(2) { animation-delay: .07s; }
body[data-skin="naile"] .fc-page > :nth-child(3) { animation-delay: .14s; }
body[data-skin="naile"] .fc-page > :nth-child(n+4) { animation-delay: .2s; }
body[data-skin="naile"] .fc-earned { margin-top: 20px; padding: 18px; border-radius: 16px; background: var(--nl-cream-2); box-shadow: inset 0 2px 0 0 var(--nl-rose); }
body[data-skin="naile"] .fc-etop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
body[data-skin="naile"] .fc-etop span { width: 100%; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-led); }
body[data-skin="naile"] .fc-etop b { font-size: 54px; line-height: 1; font-weight: 500; }
body[data-skin="naile"] .fc-etop em { font-style: normal; font-size: 15px; font-weight: 500; color: var(--jn-muted); }
body[data-skin="naile"] .fc-earned p { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
body[data-skin="naile"] .fc-earned small { display: block; margin-top: 6px; font-size: 13px; color: var(--jn-muted); }
body[data-skin="naile"] .fc-earned .fc-boost { color: var(--jn-led); font-weight: 600; }
body[data-skin="naile"] .fc-invite { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: 16px; background: var(--jn-cream); border: 1px solid var(--jn-line); }
body[data-skin="naile"] .fc-invite > * { min-width: 0; }
body[data-skin="naile"] .fc-qr { width: 140px; height: 140px; padding: 8px; border-radius: 10px; background: var(--nl-paper); box-shadow: inset 0 0 0 1px var(--jn-line); }
body[data-skin="naile"] .fc-inv { min-width: 0; }
body[data-skin="naile"] .fc-inv h3 { font-size: 16px; font-weight: 600; }
body[data-skin="naile"] .fc-inv p { margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--jn-muted); }
body[data-skin="naile"] .fc-link { margin-top: 8px; max-width: 100%; padding: 8px 10px; border-radius: 8px; background: var(--nl-cream-2); font-size: 12px; font-weight: 600; overflow: hidden; }
body[data-skin="naile"] .fc-link span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-skin="naile"] .fc-btns { display: flex; gap: 8px; margin-top: 8px; }
body[data-skin="naile"] .fc-btns button { flex: 1; height: 38px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--jn-ink); color: var(--jn-ink); background: var(--jn-cream); transition: transform .25s var(--ease-spring); }
body[data-skin="naile"] .fc-btns button:first-child { background: var(--nl-green); border-color: var(--nl-green); color: var(--nl-cream); }
body[data-skin="naile"] .fc-btns button:active { transform: scale(.95); }
body[data-skin="naile"] .fc-err { color: var(--nl-danger) !important; }
body[data-skin="naile"] .fc-sec { margin-top: 28px; font-size: 26px; line-height: 1.1; }
body[data-skin="naile"] .fc-empty { margin-top: 6px; font-size: 14px; color: var(--jn-muted); }
body[data-skin="naile"] .fc-circle { margin-top: 12px; display: grid; gap: 10px; }
body[data-skin="naile"] .fc-pal { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 14px; background: var(--jn-cream); border: 1px solid var(--jn-line); animation: skin-naile-pop .5s var(--ease-spring) both; }
body[data-skin="naile"] .fc-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--jn-ink); }
body[data-skin="naile"] .fc-pal b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="naile"] .fc-pal div span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--jn-muted); }
body[data-skin="naile"] .fc-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--nl-rose); position: relative; }
body[data-skin="naile"] .fc-tick::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid var(--nl-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 360px) {
  body[data-skin="naile"] .fc-invite { grid-template-columns: minmax(0, 1fr); text-align: center; }
  body[data-skin="naile"] .fc-qr { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { body[data-skin="naile"] .fc-page > *, body[data-skin="naile"] .fc-pal { animation: none; } }

/* ── Profile tab (profile: 'you') ───────────────────────────────────────── */
body[data-skin="naile"] .yu-head { padding: calc(env(safe-area-inset-top) + 32px) 0 22px; color: var(--jn-ink); }
body[data-skin="naile"] .yu-head > * { animation: skin-naile-pop .6s var(--ease-spring) both; }
body[data-skin="naile"] .yu-head > :nth-child(2) { animation-delay: .06s; }
body[data-skin="naile"] .yu-head > :nth-child(n+3) { animation-delay: .12s; }
/* Apple's own black "Add to Wallet" treatment, as Apple asks for it. */
body[data-skin="naile"] .yu-wallet { margin-top: 18px; width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #111; color: #fff; text-align: left; transition: transform .25s var(--ease-spring); }
body[data-skin="naile"] .yu-wallet:active, body[data-skin="naile"] .yu-site:active { transform: scale(.97); }
body[data-skin="naile"] .yu-wallet:disabled { opacity: .6; }
body[data-skin="naile"] .yu-wmark { width: 36px; height: 26px; border-radius: 6px; flex: none; background:
  linear-gradient(#111 0 0) 0 62% / 100% 2px no-repeat,
  linear-gradient(180deg, #F2B84B 0 25%, #E0655A 25% 50%, #5AA7D8 50% 75%, #6BBF7A 75%); }
body[data-skin="naile"] .yu-wallet b, body[data-skin="naile"] .yu-site b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="naile"] .yu-wallet small { display: block; font-size: 12.5px; opacity: .7; }
body[data-skin="naile"] .yu-gwallet { margin-top: 14px; text-align: center; }
body[data-skin="naile"] .yu-gwallet small { display: block; font-size: 12.5px; color: var(--jn-muted); }
body[data-skin="naile"] .yu-site { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--nl-line-2); background: var(--nl-paper); color: var(--jn-ink); text-decoration: none; transition: transform .25s var(--ease-spring); }
body[data-skin="naile"] .yu-site small { display: block; font-size: 12.5px; color: var(--jn-muted); }
body[data-skin="naile"] .yu-site em { font-style: normal; font-size: 15px; color: var(--jn-led); white-space: nowrap; }
body[data-skin="naile"] .yu-home { width: 100%; text-align: left; }
body[data-skin="naile"] .yu-home em { font-style: normal; font-size: 24px; }
body[data-skin="naile"] .yu-home:disabled { opacity: 1; }
/* The three settings tabs as one segmented pill, not an underline. */
body[data-skin="naile"] .pf-tabs { border: 0 !important; padding: 4px; border-radius: 999px; background: var(--nl-cream-2); gap: 4px; }
body[data-skin="naile"] .pf-tabs button { border-radius: 999px; min-height: 40px !important; padding: 0 !important; letter-spacing: .02em !important; text-transform: none !important; font-size: 13.5px !important; font-weight: 600 !important;
  color: var(--nl-ink-soft) !important; transition: background .3s var(--ease-out), color .3s, box-shadow .3s; }
body[data-skin="naile"] .pf-tabs button[aria-selected="true"] { background: var(--nl-paper); color: var(--nl-ink) !important; box-shadow: 0 2px 8px -4px rgba(28,24,20,.3); }
body[data-skin="naile"] .pf-tabs button > span[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) { body[data-skin="naile"] .yu-head > * { animation: none; } }

/* Home-screen sheet from the profile (YouHeader → HomeScreenSteps). */
body[data-skin="naile"] .ib-lead { font-size: 14.5px; color: var(--jn-muted); margin-top: -4px; }
body[data-skin="naile"] .ib-sheet .wh-phone { margin-top: 12px; }
body[data-skin="naile"] .ib-sheet .jn-save { margin-top: 16px; }
body[data-skin="naile"] .wh-phone { position: relative; margin: 20px auto 0; width: 150px; height: 170px; border-radius: 26px 26px 0 0; border: 6px solid var(--jn-ink); border-bottom: 0; background: var(--nl-cream-2); }
body[data-skin="naile"] .wh-screen { padding: 22px 14px 0; }
body[data-skin="naile"] .wh-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
body[data-skin="naile"] .wh-icons i { aspect-ratio: 1; border-radius: 8px; background: rgba(28,24,20,.12); }
body[data-skin="naile"] .wh-myicon { aspect-ratio: 1; border-radius: 8px; background: var(--nl-cream); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--nl-rose); animation: skin-naile-drop 1.1s .5s var(--ease-spring) both; }
body[data-skin="naile"] .wh-myicon img { width: 46%; }
@keyframes skin-naile-drop { from { opacity: 0; transform: translateY(-40px) scale(.4); } }
body[data-skin="naile"] .wh-label { display: block; margin-top: 4px; margin-left: 75%; transform: translateX(-12%); font-size: 7px; font-weight: 600; color: var(--jn-ink); }
body[data-skin="naile"] .wh-how { margin-top: 18px; display: grid; gap: 10px; counter-reset: wh; }
body[data-skin="naile"] .wh-how li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--jn-cream); border: 1px solid var(--jn-line); font-size: 13.5px; line-height: 1.4; color: var(--jn-muted); }
body[data-skin="naile"] .wh-how b { display: block; font-size: 15px; color: var(--jn-ink); }
body[data-skin="naile"] .wh-ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: #0A84FF; display: grid; place-items: center; box-shadow: 0 2px 6px -2px rgba(0,0,0,.2); }
body[data-skin="naile"] .wh-ic svg { width: 22px; height: 22px; }
body[data-skin="naile"] .wh-ic-text { font-size: 14px; font-weight: 700; }
body[data-skin="naile"] .wh-note { margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--nl-cream-2); font-size: 14px; line-height: 1.45; }
body[data-skin="naile"] .wh-note > b { display: block; font-size: 16px; margin-bottom: 4px; }
body[data-skin="naile"] .wh-sec { margin-top: 10px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--jn-ink); font-size: 13.5px; font-weight: 600; color: var(--jn-ink); }
body[data-skin="naile"] .wh-fine { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--jn-muted); text-align: center; }
body[data-skin="naile"] .wh-cta { margin-top: 24px; width: 100%; height: 54px; border-radius: 999px; background: var(--nl-green); color: var(--nl-cream); font-size: 15.5px; font-weight: 600; transition: transform .25s var(--ease-spring); }
body[data-skin="naile"] .wh-cta:active { transform: scale(.97); }
body[data-skin="naile"] .wh-cta:disabled { opacity: .6; }
@media (prefers-reduced-motion: reduce) { body[data-skin="naile"] .wh-myicon { animation: none; } }

/* ── Phone fixes carried over from 1SN's sweep (28 Sep 2026) ────────────── */
/* Typing: iOS pans the page under the keyboard, so the fixed pill and the
   journal composer floated mid-screen. While a field has focus the pill steps
   aside and the composer sits on the bottom edge. */
body[data-skin="naile"]:has(textarea:focus) .skin-tabs, body[data-skin="naile"]:has(input:focus) .skin-tabs, body[data-skin="naile"]:has(select:focus) .skin-tabs { display: none; }
body[data-skin="naile"]:has(.jn-bar textarea:focus) .jn-composer { bottom: env(safe-area-inset-bottom); }
/* Rewards and Profile end above the pill (~110px + the home indicator). */
body[data-skin="naile"] .pb-24 { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
/* The cookie notice would sit on the journal composer. */
body[data-skin="naile"]:has(.jn-composer) [aria-label="Cookie notice"] { top: calc(env(safe-area-inset-top) + 10px); bottom: auto !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * The paper design (skin card 'paper', door 'shopfront'): approved 2 Oct 2026.
 * Everything below is NaiLê's own screen furniture: the status-bar band, the
 * monogram-tile card, the shopfront door, the card screen, the scan-to-stamp
 * moment and the onboarding sheet (components/customer/naile/*).
 * ════════════════════════════════════════════════════════════════════════ */

/* The status bar. iOS draws the clock in white over the page
   (black-translucent), so the band under it is always the fascia green:
   white on green on every screen, and no photograph ever sits under the clock.
   --sim-inset only exists in proof renders (Chrome cannot fake a notch). */
body[data-skin="naile"] {
  --nl-top: max(env(safe-area-inset-top, 0px), var(--sim-inset, 0px));
  --nl-press: cubic-bezier(.32, 1.25, .42, 1);
  /* The card's own white, and its quiet and reward tiles. */
  --nl-card: #fffdf8;
  --nl-tile: #f3eee4;
  --nl-tint: #f3e6df;
}
body[data-skin="naile"]::before {
  content: ""; position: fixed; z-index: 90; left: 0; right: 0; top: 0;
  height: var(--nl-top); background: var(--nl-green); pointer-events: none;
}
/* 16px text in every field, so iPhone never zooms the page on focus. */
body[data-skin="naile"] input,
body[data-skin="naile"] select,
body[data-skin="naile"] textarea { font-size: max(16px, 1em); }

/* ── The card: monogram tiles (TileCard.tsx; owner's pick, 6 Oct 2026) ───
 * A soft white card, one rounded tile per visit in rows of three. Earned is
 * fascia green with her cream N-circumflex (logo-mark-cream.svg as a mask, so
 * the mark takes the tile's colour and costs no script), the next visit is
 * outlined, the rest are quiet, and the reward is the last tile, rose. It
 * tilts under a finger (.tc-tilt), lands its tiles, dips under a new stamp
 * and turns over to the code (.tc, by WAAPI). */
body[data-skin="naile"] .tc-stage { perspective: 900px; }
body[data-skin="naile"] .tc-tilt { transform-style: preserve-3d; transition: transform .25s ease-out; }
body[data-skin="naile"] .tc {
  position: relative; display: grid; grid-template-rows: 1fr auto; gap: 14px;
  padding: 18px; border-radius: 26px; background: var(--nl-card); color: var(--nl-ink);
  box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 24px 46px -24px rgba(20,25,22,.55);
}
/* The light, under the finger. */
body[data-skin="naile"] .tc::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.3), rgba(255,255,255,0) 45%);
  opacity: 0; transition: opacity .3s;
}
body[data-skin="naile"] .tc-touch .tc::after { opacity: 1; }
body[data-skin="naile"] .tc-face { display: grid; gap: 14px; align-content: start; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-skin="naile"] .tc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-skin="naile"] .tc-name { font-size: 18px; font-weight: 400; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-skin="naile"] .tc-count { font-size: 12.5px; color: var(--nl-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-skin="naile"] .tc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
body[data-skin="naile"] .tc-tile {
  position: relative; aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center;
  background: var(--nl-tile); color: #b6ab9d; font: 400 20px/1 var(--font-display), serif;
}
body[data-skin="naile"] .tc-tile.tc-nx { background: var(--nl-card); box-shadow: inset 0 0 0 1.5px var(--nl-green); color: var(--nl-green); }
body[data-skin="naile"] .tc-tile.tc-on { background: var(--nl-green); color: var(--nl-cream); }
body[data-skin="naile"] .tc-tile small {
  position: absolute; left: 0; right: 0; bottom: 8%; text-align: center;
  font: 500 10px/1.1 var(--font-switzer), system-ui, sans-serif; opacity: .74; font-variant-numeric: tabular-nums;
}
body[data-skin="naile"] .tc-tile.tc-rw {
  padding: 8px; text-align: center; overflow-wrap: anywhere;
  background: var(--nl-tint); color: var(--nl-rose-text); font: 600 14px/1.2 var(--font-switzer), system-ui, sans-serif;
}
body[data-skin="naile"] .tc-tile.tc-rw.tc-on { background: var(--nl-rose); color: #fff; }
/* Her mark, in the colour of the tile's text. */
body[data-skin="naile"] .tc-on:not(.tc-rw)::before,
body[data-skin="naile"] .tm .on:not(.rw)::before,
body[data-skin="naile"] .nj-tile::before {
  content: ""; width: 21%; aspect-ratio: 762 / 1181; background: currentColor;
  -webkit-mask: url(/icons/skins/naile/logo-mark-cream.svg) center / contain no-repeat;
  mask: url(/icons/skins/naile/logo-mark-cream.svg) center / contain no-repeat;
}
body[data-skin="naile"] .tc-land { animation: tc-land .55s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
@keyframes tc-land { from { transform: scale(.35) translateY(-10px); opacity: 0; } }
body[data-skin="naile"] .tc-line { font-size: 15px; line-height: 1.4; }
body[data-skin="naile"] .tc-line b { font-weight: 600; }
body[data-skin="naile"] .tc-line em { font-style: normal; font-weight: 600; color: var(--nl-rose-text); }
body[data-skin="naile"] .tc-hint { margin-top: -6px; font-size: 12px; text-align: center; color: var(--nl-ink-soft); }
body[data-skin="naile"] .tc-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px;
  background: var(--nl-green); color: var(--nl-cream); font-size: 15px; text-decoration: none;
}
/* The code side: her code on white, her name, one line. */
body[data-skin="naile"] .tc-back .tc-face { align-content: center; justify-items: center; text-align: center; }
body[data-skin="naile"] .tc-back .tc-top { justify-self: stretch; }
body[data-skin="naile"] .tc-qr {
  width: 196px; aspect-ratio: 1; padding: 12px; border-radius: 16px; background: #fff;
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(28,24,20,.07);
}
body[data-skin="naile"] .tc-qr svg { display: block; width: 100%; height: auto; }
body[data-skin="naile"] .tc-qr p { font-size: 13px; line-height: 1.4; color: var(--nl-ink-soft); }
body[data-skin="naile"] .tc-who { font-size: 22px; font-weight: 400; line-height: 1.05; }
body[data-skin="naile"] .tc-back .tc-hint { margin-top: -6px; font-size: 13.5px; }
/* The stamp moment's card: no controls; it dips as the new tile lands. */
body[data-skin="naile"] .tc-still { grid-template-rows: auto; }
body[data-skin="naile"] .tc-still .tc-face { cursor: default; }
body[data-skin="naile"] .tc-dip { animation: tc-dip 450ms .62s; }
@keyframes tc-dip {
  0%   { translate: 0 0; scale: 1; animation-timing-function: ease-out; }
  40%  { translate: 0 6px; scale: .985; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  100% { translate: 0 0; scale: 1; }
}
/* Small tiles with no text, as on the Wallet pass (seal-pass.ts, the same
   colours): one row up to eight, two rows after that. */
body[data-skin="naile"] .tm { display: grid; grid-template-columns: repeat(var(--per), minmax(0, 34px)); justify-content: center; gap: 8px; }
body[data-skin="naile"] .tm i { aspect-ratio: 1; border-radius: 20%; display: grid; place-items: center; background: #e9e1d3; }
body[data-skin="naile"] .tm i.nx { background: #fbf8f2; box-shadow: inset 0 0 0 1.5px var(--nl-green); }
body[data-skin="naile"] .tm i.on { background: var(--nl-green); color: var(--nl-cream); }
body[data-skin="naile"] .tm i.rw { background: #ead2c6; }
body[data-skin="naile"] .tm i.rw.on { background: var(--nl-rose); }
body[data-skin="naile"] .tm .on::before { width: 30%; }

/* ── The front door ─────────────────────────────────────────────────────── */
body[data-skin="naile"] .nj { min-height: 100dvh; background: var(--nl-green); display: flex; flex-direction: column; }
body[data-skin="naile"] .nj-mast {
  position: relative; flex: none; overflow: hidden;
  height: calc(var(--nl-top) + clamp(380px, 54dvh, 470px));
  padding-top: var(--nl-top); background: var(--nl-green);
}
body[data-skin="naile"] .nj-photo {
  position: absolute; left: 0; right: 0; top: var(--nl-top); width: 100%;
  height: calc(100% - var(--nl-top)); object-fit: cover; object-position: 50% 6%;
  animation: nl-fade 700ms var(--ease-out) both;
}
body[data-skin="naile"] .nj-mark {
  position: absolute; z-index: 2; left: max(18px, env(safe-area-inset-left)); top: calc(var(--nl-top) + 14px);
  width: 48px; height: 48px; border-radius: 50%; background: var(--nl-green);
  display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(246,241,232,.35);
}
body[data-skin="naile"] .nj-mark img { width: 21px; height: auto; }
body[data-skin="naile"] .nj-member {
  position: absolute; z-index: 2; right: max(16px, env(safe-area-inset-right)); top: calc(var(--nl-top) + 16px);
  height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--nl-cream); color: var(--nl-ink); font-size: 14px; font-weight: 600;
}
/* The name sits on a flat band of the fascia green at the foot of the
   photograph (the shop's own colour, no fade), so the white serif never
   fights the lit window, and the address sits on a solid green chip. */
body[data-skin="naile"] .nj-name {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; color: #fff;
  padding: 18px max(20px, env(safe-area-inset-right)) 46px max(20px, env(safe-area-inset-left));
  background: rgba(23,56,47,.8);
}
body[data-skin="naile"] .nj-name h1 { font-size: 40px; line-height: 1; letter-spacing: -.015em; font-weight: 500; }
body[data-skin="naile"] .nj-name p {
  display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 999px;
  background: var(--nl-green); box-shadow: inset 0 0 0 1px rgba(246,241,232,.22);
  font-size: 14px; font-weight: 500; color: var(--nl-cream);
}
/* The address chip: the short form on one line, never wrapping; an ellipsis
   if even that runs out of room (320px). */
body[data-skin="naile"] .nj-name p.nj-addr {
  max-width: 100%; vertical-align: top;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-skin="naile"] .nj-sheet {
  position: relative; z-index: 3; flex: 1; margin-top: -28px;
  border-radius: 28px 28px 0 0; background: var(--nl-cream);
  padding: 24px max(20px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  animation: nl-sheet 620ms var(--nl-press) both;
}
@keyframes nl-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nl-fade { from { opacity: 0; } to { opacity: 1; } }
body[data-skin="naile"] .nj-offer { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; margin-bottom: 18px; }
body[data-skin="naile"] .nj-tile { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--nl-green); color: var(--nl-cream); }
body[data-skin="naile"] .nj-tile::before { width: 30%; }
body[data-skin="naile"] .nj-head { font-size: 22px; line-height: 1.15; color: var(--nl-ink); }
body[data-skin="naile"] .nj-sub { margin-top: 4px; font-size: 14.5px; line-height: 1.4; color: var(--nl-ink-soft); }
body[data-skin="naile"] .nj-field {
  display: block; margin-top: 10px; padding: 9px 16px 8px; border-radius: 14px;
  background: var(--nl-paper); border: 1px solid #9a9088;
  transition: border-color .2s, box-shadow .2s;
}
body[data-skin="naile"] .nj-field:focus-within { border-color: var(--nl-green); box-shadow: 0 0 0 3px rgba(23,56,47,.14); }
body[data-skin="naile"] .nj-field span { display: block; font-size: 12.5px; font-weight: 600; color: var(--nl-ink-soft); }
body[data-skin="naile"] .nj-field input { display: block; width: 100%; margin-top: 2px; padding: 0; border: 0; outline: 0; background: transparent; font-size: 17px; line-height: 1.35; color: var(--nl-ink); }
body[data-skin="naile"] .nj-field input:focus-visible { box-shadow: none !important; }
body[data-skin="naile"] .nj-err { margin-top: 10px; font-size: 14px; color: var(--nl-danger); }
body[data-skin="naile"] .nj-go,
body[data-skin="naile"] .nj-face { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; margin-top: 16px; background: var(--nl-green); color: var(--nl-cream); font-size: 16px; }
body[data-skin="naile"] .nj-face svg { width: 20px; height: 20px; }
body[data-skin="naile"] .nj-go:disabled { opacity: .7; }
body[data-skin="naile"] .nj-fine { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--nl-ink-soft); text-align: center; }
body[data-skin="naile"] .nj-fine a { color: var(--nl-ink); text-decoration: underline; text-underline-offset: 2px; }
body[data-skin="naile"] .nj-fine span { display: block; }
body[data-skin="naile"] .nj-fine span + span { margin-top: 8px; }
body[data-skin="naile"] .nj-signin .nj-sub { margin-bottom: 4px; }
body[data-skin="naile"] .nj-signin .pk-box { margin-top: 6px; }
body[data-skin="naile"] .nj-signin .cs-err { margin-top: 8px; font-size: 13.5px; color: var(--nl-danger); }
/* The password: label, hint, then the field with its Show/Hide button
   (44px, inside the box, so the label stays tappable as one field). */
body[data-skin="naile"] .nj-pw label { display: block; font-size: 12.5px; font-weight: 600; color: var(--nl-ink-soft); }
body[data-skin="naile"] .nj-pw small { display: block; font-size: 12.5px; color: var(--nl-ink-soft); }
body[data-skin="naile"] .nj-pw-row { display: flex; align-items: center; gap: 8px; margin-right: -10px; }
body[data-skin="naile"] .nj-pw-row input { flex: 1; min-width: 0; }
body[data-skin="naile"] .nj-show {
  flex: none; min-width: 56px; min-height: 44px; margin: -6px 0 -6px; padding: 0 10px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--nl-green); text-decoration: underline; text-underline-offset: 3px;
}
body[data-skin="naile"] .nj-to { font-weight: 600; color: var(--nl-ink); overflow-wrap: anywhere; }
/* Face ID straight after joining: one green button, "Not now" under it. */
body[data-skin="naile"] .nj-faceicon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%;
  background: var(--nl-paper); border: 1px solid var(--nl-line); color: var(--nl-green);
}
body[data-skin="naile"] .nj-faceicon svg { width: 26px; height: 26px; }
body[data-skin="naile"] .nj-skip { display: block; width: 100%; min-height: 48px; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--nl-ink-soft); }
/* Her sign-in page: "Use Face ID" as a quiet outline button under Sign in,
   and "Forgot your password?" as a link-styled button (44px to tap). */
body[data-skin="naile"] .nj-face2 {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin-top: 10px;
  border-radius: 999px; border: 1.5px solid var(--nl-green); background: transparent;
  color: var(--nl-green); font-size: 16px; font-weight: 600;
}
body[data-skin="naile"] .nj-face2:disabled { opacity: .7; }
body[data-skin="naile"] .nj-link {
  min-height: 44px; padding: 0 6px; font-size: 14px; font-weight: 600;
  color: var(--nl-ink); text-decoration: underline; text-underline-offset: 2px;
}
body[data-skin="naile"] .nj-link:disabled { opacity: .7; }
body[data-skin="naile"] .nj-signin .nj-fine span + span { margin-top: 4px; }

/* ── The card screen ────────────────────────────────────────────────────── */
body[data-skin="naile"] .nh { padding-bottom: 8px; }
body[data-skin="naile"] .nh-mast { position: relative; overflow: hidden; height: calc(var(--nl-top) + 336px); padding-top: var(--nl-top); background: var(--nl-green); }
body[data-skin="naile"] .nh-photo { position: absolute; left: 0; top: var(--nl-top); width: 100%; height: 336px; object-fit: cover; animation: nl-fade 600ms var(--ease-out) both; }
body[data-skin="naile"] .nh-greet {
  position: absolute; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); top: calc(var(--nl-top) + 20px);
  font-size: 30px; line-height: 1.08; color: #fff; font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 20px rgba(0,0,0,.55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body[data-skin="naile"] .nh-card { position: relative; z-index: 2; margin: -92px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); animation: nl-rise 640ms var(--nl-press) 80ms both; }
/* Small iPhones (SE, 667pt tall): the 336px shopfront pushed "Show my code"
   under the tab bar on first paint. A shorter photo keeps the button above it. */
@media (max-height: 700px) {
  body[data-skin="naile"] .nh-mast { height: calc(var(--nl-top) + 256px); }
  body[data-skin="naile"] .nh-photo { height: 256px; }
}
@keyframes nl-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
body[data-skin="naile"] .nh-last {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  margin: 28px 16px 0; padding: 12px 14px 12px 12px; border-radius: 16px;
  background: var(--nl-cream-2); border: 0;
}
body[data-skin="naile"] .nh-thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--nl-cream-2); }
body[data-skin="naile"] .nh-last-t { min-width: 0; }
body[data-skin="naile"] .nh-last-t b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-skin="naile"] .nh-last-t span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--nl-ink-soft); }
body[data-skin="naile"] .nh-book { display: inline-flex; align-items: center; height: 44px; padding: 0 4px 0 8px; font-size: 14.5px; font-weight: 600; color: var(--nl-green); text-decoration: none; }
body[data-skin="naile"] .nh-next { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 16px 20px 0; font-size: 14px; color: var(--nl-ink-soft); text-decoration: none; }
body[data-skin="naile"] .nh-next img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
body[data-skin="naile"] .nh-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nl-rose); flex: none; }

/* ── The scan screen, and the stamp it becomes ──────────────────────────── */
body[data-skin="naile"] .nm {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain;
  background: var(--nl-green); color: var(--nl-cream);
  transition: background-color 420ms var(--ease-out), color 420ms var(--ease-out);
}
body[data-skin="naile"] .nm-stamped,
body[data-skin="naile"] .nm-complete { background: var(--nl-cream); color: var(--nl-ink); }
body[data-skin="naile"] .nm-wrap {
  min-height: 100%; display: flex; flex-direction: column;
  padding: calc(var(--nl-top) + 14px) max(20px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  animation: nl-fade 360ms var(--ease-out) both;
}
body[data-skin="naile"] .nm-top { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 10px; }
body[data-skin="naile"] .nm-top b { font-size: 22px; font-weight: 500; }
body[data-skin="naile"] .nm-top span { font-size: 13.5px; font-weight: 500; opacity: .85; }
body[data-skin="naile"] .nm-x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: inherit; background: rgba(246,241,232,.12); }
body[data-skin="naile"] .nm-x svg { width: 20px; height: 20px; }
body[data-skin="naile"] .nm-panel {
  margin-top: 22px; padding: 18px 18px 16px; border-radius: 24px; background: #fff; color: var(--nl-ink);
  display: flex; flex-direction: column; align-items: center;
  animation: nl-rise 560ms var(--nl-press) both;
}
body[data-skin="naile"] .nm-qr { width: 100%; max-width: 280px; aspect-ratio: 1; display: grid; place-items: center; }
body[data-skin="naile"] .nm-qr svg { width: 100%; height: auto; display: block; }
body[data-skin="naile"] .nm-noqr { padding: 20px; text-align: center; font-size: 15px; color: var(--nl-ink-soft); }
body[data-skin="naile"] .nm-name { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--nl-ink-soft); }
body[data-skin="naile"] .nm-hint { margin: 20px auto 0; max-width: 30ch; text-align: center; font-size: 16px; line-height: 1.45; }
/* The story sits in the middle of the free space; the button stays in the
   thumb zone at the foot. */
body[data-skin="naile"] .nm-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
body[data-skin="naile"] .nm-row { margin-top: 28px; }
/* On the fascia green the tiles turn over: earned is cream with a green mark. */
body[data-skin="naile"] .nm-row .tm { grid-template-columns: repeat(var(--per), minmax(0, 36px)); }
body[data-skin="naile"] .nm-row .tm i { background: transparent; box-shadow: inset 0 0 0 1px rgba(246,241,232,.32); }
body[data-skin="naile"] .nm-row .tm i.nx { box-shadow: inset 0 0 0 1.5px var(--nl-cream); }
body[data-skin="naile"] .nm-row .tm i.on { background: var(--nl-cream); color: var(--nl-green); box-shadow: none; }
body[data-skin="naile"] .nm-row .tm i.rw { background: rgba(227,194,175,.16); box-shadow: inset 0 0 0 1.5px #e3c2af; }
body[data-skin="naile"] .nm-row .tm i.rw.on { background: var(--nl-rose); box-shadow: none; }
body[data-skin="naile"] .nm-count { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; color: var(--nl-green); }
body[data-skin="naile"] .nm-count span:first-child { font-size: clamp(112px, 34vw, 148px); line-height: .9; font-weight: 500; letter-spacing: -.03em; animation: nl-rise 560ms var(--nl-press) both; }
body[data-skin="naile"] .nm-count span:last-child { font-size: 20px; font-weight: 500; color: var(--nl-ink-soft); }
body[data-skin="naile"] .nm-card { margin-top: 22px; animation: nl-rise 600ms var(--nl-press) 60ms both; }
body[data-skin="naile"] .nm-line { margin-top: 22px; font-size: 30px; line-height: 1.12; font-weight: 500; color: var(--nl-ink); }
/* Still owed, so ink: rose is for the seal she has just earned. */
body[data-skin="naile"] .nm-line em { font-style: normal; font-weight: 600; color: var(--nl-ink); }
body[data-skin="naile"] .nm-visit { margin: 22px 0 0; }
body[data-skin="naile"] .nm-foot { margin-top: 0; padding-top: 20px; }
body[data-skin="naile"] .nm-desk { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--nl-ink-soft); }
body[data-skin="naile"] .nm-desk i { width: 8px; height: 8px; border-radius: 50%; background: var(--nl-green); }
body[data-skin="naile"] .nm-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin-top: 14px; background: var(--nl-green); color: var(--nl-cream); font-size: 16px; text-decoration: none; }
body[data-skin="naile"] .nm-text { width: 100%; height: 48px; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--nl-ink); }

/* ── Onboarding, after the first stamp ──────────────────────────────────── */
body[data-skin="naile"] .no { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; justify-content: flex-end; background: var(--nl-green); }
body[data-skin="naile"] .no-back { position: absolute; left: 0; right: 0; top: var(--nl-top); width: 100%; height: 60%; object-fit: cover; object-position: 50% 0%; filter: brightness(.5); animation: nl-fade 500ms var(--ease-out) both; }
body[data-skin="naile"] .no-sheet {
  position: relative; max-height: calc(100% - var(--nl-top) - 48px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 28px 28px 0 0; background: var(--nl-cream); color: var(--nl-ink);
  padding: 20px max(20px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  animation: nl-sheet-up 560ms var(--nl-press) both;
}
@keyframes nl-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
body[data-skin="naile"] .no-leave .no-sheet { animation: nl-sheet-down 240ms ease-in both; }
body[data-skin="naile"] .no-leave .no-back { animation: nl-fade 240ms ease-in reverse both; }
@keyframes nl-sheet-down { to { transform: translateY(100%); } }
body[data-skin="naile"] .no-dots { display: flex; gap: 6px; }
body[data-skin="naile"] .no-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--nl-line); transition: background .4s var(--ease-out); }
body[data-skin="naile"] .no-dots i.on { background: var(--nl-green); }
body[data-skin="naile"] .no-h { margin-top: 16px; font-size: 30px; line-height: 1.08; }
body[data-skin="naile"] .no-p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--nl-ink-soft); }
body[data-skin="naile"] .no-pass { margin-top: 18px; border-radius: 14px; overflow: hidden; background: var(--nl-green); color: var(--nl-cream); box-shadow: 0 16px 30px -20px rgba(23,56,47,.7); }
body[data-skin="naile"] .no-pass-h, body[data-skin="naile"] .no-pass-f { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 18px; }
body[data-skin="naile"] .no-pass-h b.font-display { font-size: 20px; font-weight: 500; }
body[data-skin="naile"] .no-pass span { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: rgba(246,241,232,.72); }
body[data-skin="naile"] .no-pass span b { display: block; margin-top: 2px; font-size: 15px; letter-spacing: 0; color: var(--nl-cream); }
body[data-skin="naile"] .no-pass-f span:last-child { text-align: right; }
/* The strip as the Wallet pass draws it (seal-pass.ts): solid cream, her
   tiles filling the width with even gutters. */
body[data-skin="naile"] .no-pass-strip { padding: 14px; background: #f6f1e8; }
body[data-skin="naile"] .no-pass-strip .tm { grid-template-columns: repeat(var(--per), minmax(0, 1fr)); gap: 9px; }
body[data-skin="naile"] .no-pass-strip .tm .on::before { width: 25%; }
body[data-skin="naile"] .no-apple { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; margin-top: 16px; border-radius: 12px; background: #000; color: #fff; font-size: 16px; font-weight: 600; }
body[data-skin="naile"] .no-apple svg { width: 28px; height: 20px; }
body[data-skin="naile"] .no-apple:disabled { opacity: .75; }
body[data-skin="naile"] .no-done, body[data-skin="naile"] .no-err { margin-top: 12px; font-size: 14px; text-align: center; }
body[data-skin="naile"] .no-err { color: var(--nl-danger); }
body[data-skin="naile"] .no-rows { margin-top: 12px; }
body[data-skin="naile"] .no-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; width: 100%; min-height: 56px; text-align: left; border-bottom: 1px solid var(--nl-line); font-size: 15px; color: var(--nl-ink); }
body[data-skin="naile"] .no-row i { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--nl-line-2); display: grid; place-items: center; }
body[data-skin="naile"] .no-row i svg { width: 20px; height: 20px; }
body[data-skin="naile"] .no-row b { font-weight: 600; }
body[data-skin="naile"] .no-row em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--nl-green); }
body[data-skin="naile"] .no-row:disabled em { color: var(--nl-ink-soft); }
body[data-skin="naile"] .no-steps { margin: 10px 0 4px 18px; font-size: 14.5px; line-height: 1.6; list-style: decimal; color: var(--nl-ink); }
body[data-skin="naile"] .no-skip { display: block; width: 100%; height: 48px; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--nl-ink-soft); }

/* Reward tickets on the paper design: holding fills the button with a lighter
   green, so the cream label stays readable the whole way. */
body[data-skin="naile"] .rt-fill { background: #3d6457; }
body[data-skin="naile"] .rt-pressing .rt-lbl { color: var(--nl-cream); }

@media (prefers-reduced-motion: reduce) {
  body[data-skin="naile"] .tc-land,
  body[data-skin="naile"] .tc-dip { animation: none; }
  body[data-skin="naile"] .tc-tilt { transition: none; }
  body[data-skin="naile"] .nj-sheet,
  body[data-skin="naile"] .nh-card,
  body[data-skin="naile"] .nm-panel,
  body[data-skin="naile"] .nm-card,
  body[data-skin="naile"] .nm-count span:first-child,
  body[data-skin="naile"] .no-sheet { animation: nl-fade 300ms ease-out both; }
  body[data-skin="naile"] .nm { transition: none; }
}

/* You tab: the salon folded in (about: 'you'). */
body[data-skin="naile"] .nl-salon { display: block; margin: 4px 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--nl-paper); border: 1px solid var(--nl-line); color: var(--nl-ink); text-decoration: none; }
body[data-skin="naile"] .nl-salon b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="naile"] .nl-salon span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--nl-ink-soft); }

/* ── The salon, inside You (components/customer/naile/NaileSalon.tsx) ──────
 * Her website's "Find us" block in app form: Zodiak title, the hours in the
 * site's own words on one paper card, hairline rows for Directions, a call
 * and Instagram, then one green "Book a visit". Also /about for old links. */
body[data-skin="naile"] .ns { margin: 26px 0 24px; color: var(--nl-ink); }
body[data-skin="naile"] .ns-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
body[data-skin="naile"] .ns-title { font-size: 26px; }
body[data-skin="naile"] .ns-open { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 13.5px; font-weight: 600; color: var(--nl-ink-soft); }
body[data-skin="naile"] .ns-open i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
body[data-skin="naile"] .ns-open.is-open { color: var(--nl-green); }
body[data-skin="naile"] .ns-open.is-open i { opacity: 1; }
body[data-skin="naile"] .ns-card { border-radius: 14px; border: 1px solid var(--nl-line-2); background: var(--nl-paper); overflow: hidden; }
body[data-skin="naile"] .ns-hours { width: 100%; border-collapse: collapse; font-size: 15px; }
body[data-skin="naile"] .ns-hours th, body[data-skin="naile"] .ns-hours td { padding: 13px 16px; text-align: left; font-weight: 400; vertical-align: baseline; }
body[data-skin="naile"] .ns-hours td { text-align: right; white-space: nowrap; font-weight: 600; }
body[data-skin="naile"] .ns-hours tr + tr th, body[data-skin="naile"] .ns-hours tr + tr td { border-top: 1px solid var(--nl-line); }
body[data-skin="naile"] .ns-list { list-style: none; margin: 0; padding: 0; }
body[data-skin="naile"] .ns-hours + .ns-list { border-top: 1px solid var(--nl-line-2); }
body[data-skin="naile"] .ns-list li + li { border-top: 1px solid var(--nl-line); }
body[data-skin="naile"] .ns-list a, body[data-skin="naile"] .ns-list p { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 12px 16px; color: var(--nl-ink); text-decoration: none; transition: background-color .2s var(--ease-out); }
body[data-skin="naile"] .ns-list a:active { background: var(--nl-cream-2); }
body[data-skin="naile"] .ns-list b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="naile"] .ns-list small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--nl-ink-soft); }
body[data-skin="naile"] .ns-list em { flex: none; font-style: normal; font-size: 14px; font-weight: 600; color: var(--nl-green); white-space: nowrap; }
body[data-skin="naile"] .ns-list em.font-display { font-size: 15px; font-weight: 500; color: var(--nl-rose-text); }
body[data-skin="naile"] .ns-book { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 14px; font-size: 16px; font-weight: 600; text-decoration: none; background: var(--nl-green); color: var(--nl-cream); }
/* /about: the same block as the page, under the status band like Rewards. */
body[data-skin="naile"] .ns-page { min-height: 100dvh; padding: 0 20px calc(110px + env(safe-area-inset-bottom)); background: var(--brand-bg); }
body[data-skin="naile"] .ns-page .ns { margin-top: 0; }
body[data-skin="naile"] .ns-page .ns-head { margin-bottom: 18px; }

/* The review ask after a used reward (components/customer/naile/NaileReviewAsk). */
body[data-skin="naile"] .nr { margin: 18px 16px 18px; padding: 18px 18px 14px; border-radius: 14px; border: 1px solid var(--nl-line-2); background: var(--nl-paper); color: var(--nl-ink); animation: skin-naile-pop .6s var(--ease-spring) both; }
body[data-skin="naile"] .rt-vault-ask .nr { margin: 4px 0 18px; }
body[data-skin="naile"] .nr h2 { font-size: 22px; }
body[data-skin="naile"] .nr p { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--nl-ink-soft); }
body[data-skin="naile"] .nr-btns { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
body[data-skin="naile"] .nr-go { display: inline-flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; padding: 0 18px; text-decoration: none; background: var(--nl-green); color: var(--nl-cream); }
body[data-skin="naile"] .nr-later { min-height: 48px; padding: 0 14px; font-size: 14.5px; font-weight: 600; color: var(--nl-ink-soft); }
@media (prefers-reduced-motion: reduce) { body[data-skin="naile"] .nr { animation: none; } }