/* ============================================================================
   SADASYA CARD — the Profile tab as a laminated member ID (owner 2026-09-10:
   "I like Sadasya ID card profile, let's make this better"). Replaces the
   half-screen arched portrait + the tall showcase almirah on the dressing
   table with ONE object: a card that hangs from the painted top strip, front =
   identity, back = record. Everything on it maps to a real mechanic — the
   rank stamp is the group standing, the renewal stamps are users/$uid/visits
   (the retention metric turned into something you collect), the barcode is
   the member id, the family row is the group's members.

   Sits inside #pfDresser so the existing showcase classes (.se-deck / .se-mat
   / .se-bng, profile-dresser.css) render the three "on show" thumbs on the
   back with the REAL art, and the #showEditor keeps working untouched: the
   back's "Change" flips the dresser into .sd-edit, which swaps the card for the
   old shelves in place. Ids #myProfileCard / #myPfAv / #myPfName / #myPfSub
   are kept on the front so renderProfile + the "View my profile" click path
   need no change.

   Palette: literal app tokens (aangan-tokens.css) — paper #fbf5e6/#efe2c3,
   oxide #9e3b1e, brass #c9a44a/#eccf86/#7a5a24, ink #3b2a14/#8a6a3a; the
   stamp purple #5b2d8e is the one new ink (a real office rubber stamp).
   Hand = --slab-hand (Gloria Hallelujah / Baloo per script), numbers always
   Gloria, same rule as the scorecards.
   ========================================================================== */

/* FULL PAGE (owner 2026-09-10: "make the id card on whole page, it should not be
   scrollable, use left and right empty space, remove header … remove the
   decoration above the id card … that wooden bar with pink flowers, not needed
   … remove the yellow balls"). On the profile view #homeOv carries .sd-full
   (67-sadasya.js toggles it): the teak header is hidden, the painted top strip
   and the carved chest are gone, and the dresser grid is ONE row — the card —
   bounded to exactly the space above the nav so nothing scrolls. The three
   drawer buttons are moved INTO the card as flat actions (same ids, same
   wiring), because with the header gone they are the only door to Settings. */
html.sd-full #nhTop{display:none !important}
/* The 58px band the card used to start under was NOT the pane's own offset: on
   the guest/demo path #paneSettings has no .rf class at all, and the gap is the
   .homebody padding-top that 63-newhome.js injects for the fixed header. With
   the header hidden, that padding is a hole — zero it, and the .rf inset too
   for the path that has it. (Measured 2026-09-10: card top 68 → 10.) */
html.sd-full #homeOv.has-nhbar .homebody{padding-top:0}
/* "use left and right empty space": chalk-home.css gives .homebody 16px side
   gutters, which is why the card was 316 wide on a 360 phone. Zero them; the
   dresser's own 6px is the only margin the card keeps. */
html.sd-full #homeOv .homebody{padding-left:0; padding-right:0}
html.sd-full #homeOv.has-nhbar #paneSettings.rf{top:0 !important}
/* The gear's rows (.set-only: Chopadi, subscription, settings, about) still
   render UNDER the dresser on the profile view when the pane has not been given
   .view-profile, so #homeBody grew to 1528px and the "unscrollable" page
   scrolled. They are reachable through the card's own Settings action; hide
   them while the card view is up. */
html.sd-full #paneSettings:not(.view-settings) .set-only{display:none !important}
/* the pane's own 6/84px padding (styles.css .pane) is what pushed #homeBody to
   826px and made the page scroll 90px; the card's breathing room is the
   dresser padding instead, so the numbers add up: 6 + card + 6 = 100dvh - nav */
html.sd-full #homeOv #paneSettings:not(.view-settings){padding:0 !important}   /* beats profile-dresser.css #homeOv #paneSettings … !important */
html.sd-full #pfDresser{height:calc(100dvh - var(--nh-navh,76px)); padding:6px 6px 6px;
  grid-template-columns:1fr; grid-template-areas:"mirror"; grid-template-rows:minmax(0,1fr); gap:0}
html.sd-full .pfd-top,html.sd-full .pfd-base{display:none}
#pfDresser{grid-template-columns:1fr; grid-template-areas:"top" "mirror" "base"}
#pfDresser .pfd-mirror{display:block; padding:0; overflow:hidden; height:100%;
  align-items:initial; justify-content:initial; scrollbar-width:none; background-image:none !important}
#pfDresser .pfd-mirror::-webkit-scrollbar{display:none}
#pfDresser .pfd-shelves{display:none}
/* flex column, not block: #showEditor carries min-height:100% (profile-dresser.css)
   and, stacked under the Back button + heading, overflowed the cabinet by 86px
   so the bangle shelf sat under the bottom edge (measured 2026-09-10). As the
   column's flexible child it takes exactly what is left. */
#pfDresser.sd-edit .pfd-shelves{display:flex; flex-direction:column; grid-area:mirror; height:100%; box-sizing:border-box}
#pfDresser.sd-edit #showEditor{min-height:0; flex:1 1 auto}
#pfDresser.sd-edit .pfd-mirror{display:none}
#pfDresser .pfd-h{display:block; font-family:var(--serif); font-size:15px; color:#f8f2e0; text-align:center; margin:2px 0 6px}


/* ---- the card, both faces stacked in one grid cell so the host is as tall as
   the taller face and the flip never changes layout ---- */
.sd{perspective:1200px; height:100%}
.sd-inner{position:relative; display:grid; height:100%; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.sd.flipped .sd-inner{transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){ .sd-inner{transition:none} }
.sd-face{grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:0;
  background:linear-gradient(135deg,#fbf5e6,#efe2c3); border:3px solid #9e3b1e; border-radius:16px;
  padding:14px 14px 12px; position:relative; overflow:hidden; color:#3b2a14;
  box-shadow:0 12px 28px rgba(0,0,0,.55)}
.sd-face::before{content:""; position:absolute; inset:5px; border:1.5px solid #c9a44a; border-radius:9px; pointer-events:none}
.sd-face.back{transform:rotateY(180deg)}
.sd-gloss{position:absolute; inset:0; pointer-events:none; border-radius:11px;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.32) 42%,rgba(255,255,255,0) 52%)}

/* ---- header ---- */
.sd-hdr{display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
  border-bottom:2px solid #9e3b1e; padding:2px 2px 8px; margin-bottom:12px; flex:0 0 auto}
.sd-hdr b{font:800 22px/1 var(--serif); color:#9e3b1e; letter-spacing:.04em}
.sd-hdr .r{text-align:right; font:800 8.5px var(--sans); color:#8a6a3a; letter-spacing:.12em; line-height:1.4; min-width:0}
.sd-hdr .r em{display:block; font-style:normal; color:#3a2410; font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px}

/* ---- identity block: photo with album corners + rank stamp, fields beside ---- */
.sd-body{display:grid; grid-template-columns:106px minmax(0,1fr); gap:18px; flex:0 0 auto; align-items:start}
#pfDresser .sd-photo{all:unset; cursor:pointer; display:block; width:106px; height:128px; background:#fff; padding:4px; position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
#homeOv #pfDresser .sd-photo .hh-av.pfd-av{width:98px !important; height:120px !important; border-radius:0 !important; border:0 !important;
  box-shadow:none !important; display:block; overflow:hidden; background:radial-gradient(120% 100% at 50% 20%,#f2e2c4,#d8bf90);
  font:800 46px/120px var(--serif); text-align:center; color:#6d5342}
#homeOv #pfDresser .sd-photo .hh-av.pfd-av img{width:100%; height:100%; object-fit:cover; display:block}
.sd-corner{position:absolute; width:15px; height:15px; background:#1f1308}
.sd-corner.tl{left:-2px; top:-2px; clip-path:polygon(0 0,100% 0,0 100%)} .sd-corner.tr{right:-2px; top:-2px; clip-path:polygon(0 0,100% 0,100% 100%)}
.sd-corner.bl{left:-2px; bottom:-2px; clip-path:polygon(0 0,0 100%,100% 100%)} .sd-corner.br{right:-2px; bottom:-2px; clip-path:polygon(100% 0,100% 100%,0 100%)}
.sd-stamp{position:absolute; border:3px double #5b2d8e; border-radius:50%; color:#5b2d8e; font:800 9px/1.1 var(--sans);
  text-align:center; display:grid; place-items:center; letter-spacing:.05em; opacity:.85; mix-blend-mode:multiply; pointer-events:none}
.sd-stamp.rank{right:-18px; bottom:-12px; width:72px; height:72px; transform:rotate(-14deg)}
.sd-idno{margin-top:5px; font:700 10.5px "Courier New",monospace; color:#3a2410; letter-spacing:.06em; text-align:center; white-space:nowrap}
/* label ABOVE the value like a printed form, not beside it: beside, the 60px
   label column left ~128px for the value at 390 and "Manan Patel" at 20px
   became "Manan Pa…" in the Gujarati render (2026-09-10). Stacked, the value
   owns the full column (≈196px at 390, ≈166 at 360). */
.sd-fld{display:flex; flex-direction:column; gap:2px; padding:3px 0 4px; border-bottom:1px dotted rgba(120,85,30,.5); min-height:0}
.sd-fld span{color:#8a6a3a; font-weight:800; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; line-height:1}
.sd-fld b{font:400 20px/1 var(--slab-hand,var(--serif)); color:#3a2410; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sd-fld b.s{font:700 13px/1.3 var(--sans)}
#pfDresser #myPfName{font:400 18px/1 var(--slab-hand,var(--serif)); color:#3a2410}
#pfDresser #myPfSub{display:none}

/* ---- record strip ---- */
.sd-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; flex:0 0 auto}
.sd-cell{background:rgba(120,85,30,.08); border:1px solid rgba(120,85,30,.35); border-radius:8px; padding:8px 3px; text-align:center}
.sd-cell b{display:block; font:400 22px/1 "Gloria Hallelujah",var(--slab-hand,var(--serif)); color:#9e3b1e}
.sd-cell span{font-size:8px; font-weight:800; letter-spacing:.06em; color:#8a6a3a; text-transform:uppercase}

/* ---- renewal stamps: one per month you played; the next month sits empty ---- */
.sd-renew{margin-top:8px; padding-top:0; display:flex; align-items:center; justify-content:space-between; gap:6px; flex:0 0 auto}
.sd-renew .lb{font:800 8px var(--sans); letter-spacing:.1em; color:#8a6a3a; text-transform:uppercase; line-height:1.35; width:54px; flex:0 0 auto}
.sd-renew .st{width:46px; height:46px; border-radius:50%; border:2.5px double #5b2d8e; color:#5b2d8e; font:800 7.5px/1.15 var(--sans);
  display:grid; place-items:center; text-align:center; opacity:.82; mix-blend-mode:multiply; flex:0 0 auto}
.sd-renew .st:nth-child(3){border-color:#9e3b1e; color:#9e3b1e; transform:rotate(8deg)}
.sd-renew .st:nth-child(4){border-color:#4f6a2c; color:#4f6a2c; transform:rotate(-5deg)}
.sd-renew .st:nth-child(2){transform:rotate(-10deg)}
.sd-renew .st.e{border:2px dashed rgba(120,85,30,.5); color:rgba(120,85,30,.6); transform:none; opacity:1; font-weight:700}

/* ---- footer: barcode = the id, signature, share ---- */
.sd-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:8px; margin-top:8px; flex:0 0 auto}
.sd-bc{width:118px; flex:0 0 auto}
.sd-bc svg{display:block; width:118px; height:28px}
.sd-bc small{display:block; font:700 8.5px "Courier New",monospace; letter-spacing:.3em; text-align:center; color:#3a2410; margin-top:2px}
.sd-sig{font:400 21px/1 var(--slab-hand,var(--serif)); color:#3a2410; border-bottom:1px solid #3b2a14; padding:0 8px 2px; text-align:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto}
.sd-sig small{display:block; font:800 7.5px var(--sans); color:#8a6a3a; letter-spacing:.16em; margin-top:2px}
#pfDresser .sd-share{all:unset; cursor:pointer; flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,#6a441f,#432a12); border:1.5px solid #241505; color:#f8f2e0; box-shadow:0 3px 7px rgba(0,0,0,.45)}
#pfDresser .sd-share svg{width:20px; height:20px; display:block}
.sd-flip{position:absolute; right:12px; bottom:8px; font:800 8px var(--sans); color:#8a6a3a; letter-spacing:.14em; pointer-events:none}
.sd-face.front .sd-flip{position:static; display:block; text-align:center; margin-top:8px}

/* ---- back ---- */
.sd-mag{height:30px; background:linear-gradient(180deg,#2a1b12,#0f0906); margin:-12px -12px 10px; border-bottom:1px solid #6b4520; position:relative}
.sd-mag .sd-flip{left:14px; right:auto; top:9px; bottom:auto; color:#d8bd8f}
.sd-bh{flex:0 0 auto; font:800 10.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#9e3b1e; border-bottom:2px solid #9e3b1e; padding-bottom:4px; margin:6px 0 7px;
  display:flex; justify-content:space-between; align-items:baseline}
.sd-bh a{font:800 9px var(--sans); color:#8a6a3a; letter-spacing:.08em; cursor:pointer; text-transform:none}
.sd-ach{display:flex; flex-wrap:wrap; gap:7px}
/* Five to a row, sized by the row: the circle is a fifth of the width less the
   gaps, so it is as big as the phone allows (64px at 390, 60 at 360) instead of
   a fixed 54 that "Table Time" / "Pure Master" / "Pool Champion" spilled out of
   on the owner's phone (2026-09-10). border-box, or the border + padding push
   the fifth circle to the next row (measured: three rows of four). */
.sd-ach{gap:4px}
/* one custom property drives BOTH axes (no aspect-ratio — the cross-browser rule):
   the card is full-bleed now, so the row is 100vw − 12 dresser pad − 6 border
   − 28 face pad = 100vw − 46, less four 4px gaps, over five. */
.sd-ach{--stamp:calc((100vw - 62px)/5)}
.sd-ach .a{box-sizing:border-box; width:var(--stamp); height:var(--stamp); border-radius:50%; border:2.5px double #5b2d8e; color:#5b2d8e; font:800 7px/1.05 var(--sans);
  display:grid; place-items:center; align-content:center; text-align:center; opacity:.85; mix-blend-mode:multiply; padding:3px 4px; overflow:hidden; letter-spacing:0; overflow-wrap:normal}
.sd-ach .a i{font-style:normal; font-size:14px; display:block; line-height:1}
.sd-ach .a:nth-child(2){transform:rotate(9deg); border-color:#9e3b1e; color:#9e3b1e} .sd-ach .a:nth-child(3){transform:rotate(-7deg); border-color:#4f6a2c; color:#4f6a2c}
.sd-ach .a:nth-child(5){transform:rotate(-8deg); border-color:#9e3b1e; color:#9e3b1e}
.sd-ach .a.locked{border:2px dashed rgba(120,85,30,.45); color:rgba(120,85,30,.55); opacity:1; transform:none; mix-blend-mode:normal}
.sd-ach .a.locked i{filter:grayscale(1); opacity:.45}
.sd-ach .a:nth-child(n+5){transform:none; border-color:#5b2d8e; color:#5b2d8e}   /* the rotate/colour rhythm is for the first row only */
.sd-ach .a.locked:nth-child(n+5){border-color:rgba(120,85,30,.45); color:rgba(120,85,30,.55)}
.sd-tro{display:flex; gap:8px; align-items:baseline; padding:4px 0; border-bottom:1px dotted rgba(120,85,30,.5); font-size:12px}
.sd-tro b{font:400 16px/1 var(--slab-hand,var(--serif)); color:#3a2410; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sd-tro span{color:#8a6a3a; font-size:11px; font-weight:700}
.sd-fam{display:flex; gap:6px; justify-content:space-between}
.sd-fam div{text-align:center; font-size:9.5px; font-weight:700; color:#8a6a3a; flex:1; min-width:0}
.sd-fam div span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}   /* the clip lives here, not on the cell, so the .me ring is not cut */
.sd-fam i{display:block; width:40px; height:40px; border-radius:50%; margin:0 auto 3px; border:2px solid #c9a44a; overflow:hidden;
  background:radial-gradient(circle at 40% 35%,#f2e2c4,#c9a878); font:800 16px/36px var(--serif); font-style:normal; color:#6d5342}
.sd-fam i img{width:100%; height:100%; object-fit:cover; display:block}
.sd-fam i.me{box-shadow:0 0 0 2px #9e3b1e}
.sd-show{display:flex; justify-content:space-around; align-items:center; padding:2px 0 4px}
#pfDresser .sd-show .se-t{cursor:pointer}
/* the dresser's own back-to-card button when in edit mode */
#pfDresser .sd-back{all:unset; cursor:pointer; display:block; margin:6px auto 2px; padding:7px 16px; border-radius:999px;
  background:linear-gradient(180deg,#6a441f,#432a12); border:1px solid #241505; color:#f8f2e0; font:700 12px var(--serif)}

/* ---- the three doors, flat inside the card (moved here from the chest) ---- */
.sd-acts{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:8px; flex:0 0 auto}
#homeOv #pfDresser .sd-acts .pfd-drawer{all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px 7px; border-radius:9px; background:rgba(120,85,30,.09); border:1px solid rgba(120,85,30,.38); box-shadow:none}
#homeOv #pfDresser .sd-acts .pfd-drawer::after{display:none}
#homeOv #pfDresser .sd-acts .pfd-drawer .pfd-di{font-size:18px; line-height:1}
#homeOv #pfDresser .sd-acts .pfd-drawer .pfd-dl{font:800 10px var(--sans); color:#3a2410; text-shadow:none; letter-spacing:.04em}
#homeOv #pfDresser .sd-acts .pfd-drawer:active{transform:translateY(1px)}
/* back face: sections share the height, family + on-show pinned low */
.sd-face.back .sd-ach{flex:0 0 auto}
.sd-face.back .sd-fam{margin-top:0}

/* ---- tall phones (390×812 and up): the card has ~220px more height than its
   content needs. Rather than let space-between open 36px voids between every
   row, the pieces themselves grow — bigger photo, taller record cells, larger
   stamps and barcode — so the slack that is left is a modest, even breath.
   Below this height (360×640: 520px of inner room) the base sizes fit with
   ~40px to spare, which is why the growth is gated on height, not width. ---- */
@media (min-height:740px){
  .sd-body{grid-template-columns:128px minmax(0,1fr); gap:20px}
  #pfDresser .sd-photo{width:128px; height:156px; padding:5px}
  #homeOv #pfDresser .sd-photo .hh-av.pfd-av{width:118px !important; height:146px !important; font:800 56px/146px var(--serif)}
  .sd-stamp.rank{width:78px; height:78px; font-size:10px}
  .sd-idno{font-size:11.5px; margin-top:7px}
  .sd-fld{padding:5px 0 6px; gap:3px}
  .sd-fld b{font-size:22px}
  #pfDresser #myPfName{font-size:20px}
  .sd-fld b.s{font-size:14px}
  .sd-grid{margin-top:18px; gap:10px}
  .sd-cell{padding:11px 3px 10px}
  .sd-cell b{font-size:27px}
  .sd-cell span{font-size:9px}
  .sd-renew{margin-top:12px}
  .sd-renew .st{width:58px; height:58px; font-size:9px}
  .sd-renew .lb{font-size:9px}
  .sd-foot{margin-top:12px}
  .sd-bc,.sd-bc svg{width:132px} .sd-bc svg{height:34px}
  .sd-sig{font-size:24px}
  #pfDresser .sd-share{width:46px; height:46px} #pfDresser .sd-share svg{width:23px; height:23px}
  #homeOv #pfDresser .sd-acts .pfd-drawer{padding:13px 4px 12px; gap:6px}
  #homeOv #pfDresser .sd-acts .pfd-drawer .pfd-di{font-size:21px}
  #homeOv #pfDresser .sd-acts .pfd-drawer .pfd-dl{font-size:11px}
  .sd-ach .a{font-size:7.5px} .sd-ach .a i{font-size:15px}
  .sd-tro{padding:7px 0; font-size:13px} .sd-tro b{font-size:18px}
  .sd-fam i{width:48px; height:48px; font-size:19px; line-height:44px}
  .sd-fam div{font-size:10.5px}
  .sd-bh{font-size:11.5px; margin:8px 0 9px}
}

/* ---- THE GEAR VIEW (Settings), owner's phone 2026-09-10: "use visible fonts
   here, the fonts effect is bad, remove that make it normal … remove chopadi
   from settings … better icon for vibration … there's no back button".
   The labels were chalk (cream at 64% alpha + a chalk shadow, chalk-sections.css)
   drawn for the dark chalk room, and this pane sits on pale plaster — pale on
   pale, the fourth time this project has done it. Dark ink, normal case, no
   shadow. The Chopadi row is hidden here because the card already has the
   button; the subscription box STAYS because the card's Remove-ads button
   lands on it. ---- */
#homeOv #paneSettings.view-settings .setrow label,
#homeOv #paneSettings.view-settings #chopSecH{font:700 13px/1.25 var(--sans); letter-spacing:0; text-transform:none; color:#3a2410; text-shadow:none}
#homeOv #paneSettings.view-settings .muted,
#homeOv #paneSettings.view-settings #tblHint{color:#5a3d1c; text-shadow:none; font-size:12.5px}
#homeOv #paneSettings.view-settings .setrow input{color:#3a2410; text-shadow:none; -webkit-text-fill-color:#3a2410; background:rgba(255,255,255,.42); border-radius:8px; padding:8px 10px}
#homeOv #paneSettings.view-settings .setrow input::placeholder{color:#8a6a3a; -webkit-text-fill-color:#8a6a3a; text-shadow:none; opacity:1}
#homeOv #paneSettings.view-settings .langsel button{color:#3a2410; text-shadow:none}
#homeOv #paneSettings.view-settings .langsel button.on{color:#9e3b1e}
#homeOv #paneSettings.view-settings #tblSuggest .btn{color:#3a2410}
#homeOv #paneSettings.view-settings #chopSecH,
#homeOv #paneSettings.view-settings #chopSecRow{display:none !important}
#homeOv #paneSettings.view-settings .bigbtn .bi svg{display:block}
#homeOv #paneSettings.view-settings .set-only a{color:#9e3b1e !important; text-shadow:none; font-weight:700}   /* inline var(--gold) beat every sheet: gold on plaster */
#homeOv #paneSettings.view-settings #setAv{color:#f8f2e0; background:radial-gradient(circle at 40% 35%,#8a5a34,#4a2c14); border:2px solid #c9a44a; border-radius:50%; text-shadow:none}
/* back to the card: first thing on the pane, only while the gear view is up */
#homeOv #paneSettings .sd-setback{display:none}
#homeOv #paneSettings.view-settings .sd-setback{all:unset; cursor:pointer; display:block; margin:8px auto 4px; padding:8px 18px; border-radius:999px;
  background:linear-gradient(180deg,#6a441f,#432a12); border:1px solid #241505; color:#f8f2e0; font:700 13px var(--serif); text-align:center}

/* Owner 2026-09-10, second look at the gear view: "align text boxes around
   profile photos, it is looking very bad. Remove setting options from
   settings, get all action buttons out of that."
   · The "Settings ▾" toggle row is gone from this view; the drawer it opened is
     always open here (applyPaneView), so its rows stand on their own.
   · Every row is label-ABOVE-field: beside, the label ate a third of a 360
     phone and "Save" wrapped to two lines in Gujarati; the photo row wrapped
     its avatar top-left, Change photo right and Remove underneath.
   · Photo row: avatar + the two buttons in ONE row, buttons equal width. */
#homeOv #paneSettings.view-settings #setDrawerRow{display:none !important}
#homeOv #paneSettings.view-settings #setDrawer{display:block !important}
#homeOv #paneSettings.view-settings .setrow{display:block; margin:16px 0}
#homeOv #paneSettings.view-settings .setrow > label{display:block; margin:0 0 7px}
#homeOv #paneSettings.view-settings .setrow > .inline{display:flex; align-items:center; gap:10px; width:100%; min-width:0}
#homeOv #paneSettings.view-settings .setrow > .inline > input{flex:1 1 auto; min-width:0}
#homeOv #paneSettings.view-settings .setrow > .inline:not(.setrow-photo) > .btn{flex:0 0 auto; white-space:nowrap}   /* :not — or this outranks the photo row's equal-width buttons */
#homeOv #paneSettings.view-settings #langSettings{display:inline-flex !important}
#homeOv #paneSettings.view-settings .setrow-photo{display:flex; flex-wrap:nowrap; align-items:center; gap:10px}
#homeOv #paneSettings.view-settings .setrow-photo > .btn{flex:1 1 0; white-space:nowrap; text-align:center; padding-left:6px; padding-right:6px}
#homeOv #paneSettings.view-settings #tblSuggest{margin-top:8px !important}