/* =========================================================================
   AANGAN PALETTE TOKENS (owner 2026-08-24: "I want to give this UI/UX a
   redesign where it doesnt look vibecoded and it should match my aethetic
   choice of a nani ghar. Suggest me what colours and ui style i should go
   for")

   THESE ARE NOT NEW COLOURS. Every value below was counted out of the
   surfaces that already meet this project's own quality bar — the painted
   almirah (42-almirah.js), the front door (55-door.js) and the painted home
   (63-newhome.js). The palette was already there; it just had no name, so
   every screen re-picked it by hand.

   WHAT THE COUNT FOUND, and why the group room looked foreign:
     · the ART files use essentially ONE green — #4f6a2c, a neem leaf olive
     · the CSS files use FOURTEEN, from #1c4433 bottle through #2f4741
       grey-green to #0a2116 near-black
   Fourteen greens is not a style, it is the absence of tokens. The baithak's
   bottle-green board (rgba(38,67,62,…)) is the clearest example: nani's house
   is lime plaster, teak, brass and an oxide floor. Bottle green belongs to a
   dashboard. The house has ONE green and it is a leaf.

   USE:  var(--ang-teak), var(--ang-brass) … never a fresh hex in a rule.
   ADD:  a new value goes here first, or the fourteen greens come back.
   ========================================================================= */
:root{
  /* ---- GROUND. Lime-washed plaster and paper — the default surface -------- */
  --ang-plaster:   #f4f1e8;   /* wall */
  --ang-plaster-2: #efe6d0;   /* wall, shaded side */
  --ang-paper:     #f7f2e4;   /* a chit, a card, a list ground */

  /* ---- TEAK. Beams, the nav skirting, the takhat, drawer fronts ---------- */
  --ang-teak:      #5f3c1b;
  --ang-teak-dk:   #3a2410;
  --ang-teak-sh:   #241505;   /* the shadow under teak, not a fill */

  /* ---- BRASS. The most-used ink in the whole app (14 hits in the art) ----- */
  --ang-brass:     #c9a44a;   /* face */
  --ang-brass-hi:  #eccf86;   /* highlight / the lit edge */
  --ang-brass-ed:  #7a5a24;   /* the dark edge that makes it read as metal */

  /* ---- OXIDE. The floor, the active nav pill, anything that must be hot --- */
  --ang-oxide:     #9e3b1e;
  --ang-oxide-2:   #a34d34;

  /* ---- THE ONE GREEN. Neem leaf. Retires the other thirteen. ------------- */
  --ang-neem:      #4f6a2c;

  /* ---- FLAME. A diya, used sparingly and NEVER as a surface -------------- */
  --ang-amber:     #ffb43c;

  /* ---- INK. Text. Crisp means a DARKER ink on the same paper, never a
         brighter accent — the project's contrast rule, as a token. --------- */
  --ang-ink:       #3b2a14;   /* body text on plaster */
  --ang-ink-soft:  #8a6a3a;   /* secondary text on plaster */
  --ang-ink-pale:  #f8f2e0;   /* text on teak or oxide */
}

/* the empty baithak art (65-baithak-art.js). Capped so it stays a vignette in
   the list rather than becoming the screen, and centred over its caption. */
.bk-empty{max-width:340px;margin:6px auto 10px}
/* the photographed baithak (12-home.js) is the app's only large photo, so it
   gets a WARM GRADE to sit inside the hand-drawn earthen house rather than read
   as a stock drop-in (owner 2026-08-29): a light sepia+warmth push toward the
   maroon/mustard/cream palette, a cream inner keyline like the almirah boxes,
   and the existing rounded shadow. All CSS — the exported JPEG is untouched, so
   this is fully reversible. */
.bk-empty .bk-art{display:block;width:100%;height:auto;border-radius:10px;
  filter:sepia(.12) saturate(1.05) contrast(1.02) brightness(.98);
  border:1px solid rgba(247,236,214,.9);
  box-shadow:0 4px 14px rgba(36,21,5,.28)}

/* THE EMPTY BAITHAK OWNS ITS SPACE (owner 2026-08-24).
   The drawn room shrank the void but did not close it — roughly 400px of teak
   sat under the caption, so the screen still read as truncated. Centring the
   art and its line in the space that IS there makes the emptiness deliberate:
   a room with nobody in it, not a list that stopped early. min-height is in vh
   so it holds at 844 and at 740 without a second number to keep in step. */
/* the deliberate empty space (above) now reads as a WARM DIM ROOM, not flat
   void (excellence pass 2026-08-29): a soft amber glow pooled behind the
   vignette so the emptiness feels like a lamplit baithak waiting for people,
   not a screen that stopped. Respects the 2026-08-24 "emptiness is deliberate"
   intent — it lights the space rather than filling it. */
#memberWrap.bk-empty-wrap{min-height:52vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(90% 46% at 50% 39%, rgba(255,198,122,.20) 0%, rgba(255,180,104,.09) 42%, rgba(255,180,104,0) 72%)}
#memberWrap.bk-empty-wrap .muted{max-width:30ch;margin:0 auto}

/* PROFILE / SETTINGS — one pane, two views (see applyPaneView in
   63-newhome.js). Scoped to the view classes ONLY, so the live tile home,
   which sets neither, still renders the whole stack unchanged. */
#paneSettings.view-profile  .set-only{display:none !important}
#paneSettings.view-settings .pf-only {display:none !important}

/* the profile-photo row: avatar + "Change photo" + "Remove" does not fit a
   phone on one line — measured at 390 (#photoRemove +19px) and 360 (+45px)
   with the settings drawer open. Wrapping is the fix that survives the long
   Gujarati and Punjabi labels too, rather than shrinking type until it does. */
#paneSettings .setrow-photo{flex-wrap:wrap;gap:8px}