/* v2 — minimal, after madhurvirli.com: a warm near-black ground, cream ink, one muted tone, hairlines; Melodrama and
   Satoshi (with Martel Light and Poppins for Devanagari); words underlined instead of chips; square fields.
   Everything here is scoped to [data-theme=v2] on <html> (set from ?v=2, remembered); v1 is untouched. */
[data-theme=v2]{
  --bg:#10100e; --ink2:#ffffe3; --muted:#c0c0ab; --line:#44443b; --line-2:#6b6b5d;
  --display:"Melodrama","Martel",Georgia,serif; --text:"Satoshi","Poppins",ui-sans-serif,sans-serif;
  --ok:#a9d39f;
  color-scheme:dark;
}
[data-theme=v2] body{background:var(--bg);color:var(--ink2);font-family:var(--text);font-weight:400}
[data-theme=v2] ::selection{color:var(--bg);background:var(--ink2)}
[data-theme=v2] .screen.light,[data-theme=v2] .screen.paint{background:var(--bg);color:var(--ink2)}
[data-theme=v2] :focus-visible{outline:1px solid var(--ink2);outline-offset:3px}

/* header: the couple as an eyebrow, the step as a quiet count */
[data-theme=v2] .top{gap:6px;padding-top:calc(18px + env(safe-area-inset-top))}
[data-theme=v2] .mark{font-family:var(--text);font-weight:400;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);gap:10px}
[data-theme=v2] .mark span{font-family:"Satoshi",sans-serif}
[data-theme=v2] .mark span:first-child::before{content:"Jitendra"}[data-theme=v2] .mark span:last-child::before{content:"Nandita"}
[data-theme=v2] .mark span{font-size:0}[data-theme=v2] .mark span::before{font-size:12.5px}
[data-theme=v2] .mark i{width:5px;height:5px;border-color:var(--muted);border-width:1px}
[data-theme=v2] .steps{font-size:12.5px;color:var(--line-2);gap:4px}
[data-theme=v2] .steps li b{display:none}
[data-theme=v2] .steps li.on{color:var(--ink2)}
[data-theme=v2] .steps li.on b,[data-theme=v2] .steps li.done b{background:none;color:inherit;border:0}
[data-theme=v2] .steps li.done{color:var(--muted)}
[data-theme=v2] .steps li+li::before{width:14px;height:1px;background:var(--line);border:0;transform:none}
[data-theme=v2] .steps li.on{box-shadow:none}
[data-theme=v2] .back{color:var(--muted);font-family:var(--text);font-size:28px}

/* type */
[data-theme=v2] .h{font-family:var(--display);font-weight:300;color:var(--ink2);font-size:clamp(30px,8.6vw,44px);line-height:1.08;letter-spacing:-.01em;margin-top:18px;text-wrap:balance}
[data-theme=v2] .sub{font-family:var(--text);font-weight:300;color:var(--muted);font-size:16px;line-height:1.6;margin-top:10px}

/* step 1 */
[data-theme=v2] .strip{margin-top:22px}
[data-theme=v2] .strip canvas{border-radius:0;box-shadow:none;outline:1px solid var(--line);outline-offset:0}
[data-theme=v2] .strip figcaption{color:var(--muted);font-size:13px}
[data-theme=v2] .strip figcaption::before{background:var(--line-2);width:20px;height:1px}
[data-theme=v2] .field{margin-top:22px}
[data-theme=v2] .field-head label{color:var(--muted);font-size:14.5px}
[data-theme=v2] .seg{background:none;padding:0;gap:14px}
[data-theme=v2] .seg button{padding:4px 0;min-height:34px;border-radius:0;font-size:14.5px;color:var(--muted);box-shadow:none;background:none;
  background-image:linear-gradient(var(--line-2),var(--line-2));background-repeat:no-repeat;background-position:0 85%;background-size:100% 1px}
[data-theme=v2] .seg button[aria-checked=true]{color:var(--ink2);background-color:transparent;box-shadow:none;background-image:linear-gradient(var(--ink2),var(--ink2))}
[data-theme=v2] .box input{border-radius:0;border:1px solid var(--line);background:transparent;color:var(--ink2);font-family:var(--text);font-weight:400;font-size:20px;min-height:56px}
[data-theme=v2] .box input::placeholder{color:#7d7d6f}
[data-theme=v2] .box input:focus{border-color:var(--ink2);box-shadow:none}
[data-theme=v2] .clear{color:var(--muted)}
[data-theme=v2] .hint{color:#8b8b7b}
[data-theme=v2] .hint b{border-color:var(--line);color:var(--muted);border-radius:0}
/* suggestions and quick words: words in a sentence, the underline marks them as tappable */
[data-theme=v2] .chips{gap:6px 18px}
[data-theme=v2] .chip{border:0;border-radius:0;background:none;padding:6px 0 4px;min-height:40px;color:var(--muted);font-size:18px;
  background-image:linear-gradient(var(--line-2),var(--line-2));background-repeat:no-repeat;background-position:0 88%;background-size:100% 1px;transition:color .16s}
[data-theme=v2] .chip.best{color:var(--ink2);box-shadow:none;background-image:linear-gradient(var(--ink2),var(--ink2))}
[data-theme=v2] .chip.best::after{color:var(--muted)}
[data-theme=v2] .chip.latin{font-family:"Satoshi",sans-serif;font-style:normal;border:0}
[data-theme=v2] .chip.add::before{color:var(--muted)}
[data-theme=v2] .chip.add:active{background-color:transparent;color:var(--ink2)}
[data-theme=v2] .adds-l{color:#8b8b7b}

/* the one button: cream, square, the arrow leaning the way it points */
[data-theme=v2] .cta{border-radius:0;background:var(--ink2);color:var(--bg);font-family:var(--text);font-weight:500;font-size:18px;box-shadow:none;min-height:56px}
[data-theme=v2] .cta svg{transition:transform .16s ease}
[data-theme=v2] .cta:active{background:#e9e9cf;transform:none}
[data-theme=v2] .cta:active svg{transform:translateX(5px)}
[data-theme=v2] .cta:disabled{opacity:1;background:transparent;color:#6f6f62;outline:1px solid var(--line);outline-offset:-1px}

/* step 2 */
[data-theme=v2] .pick{gap:14px;margin-top:24px}
[data-theme=v2] .card{border-radius:0;background:transparent;border:1px solid var(--line);box-shadow:none}
[data-theme=v2] .card[aria-checked=true]{border-color:var(--ink2);background:transparent;box-shadow:none}
[data-theme=v2] .stack>*{border-radius:0;box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
[data-theme=v2] .card .t{font-family:var(--display);font-weight:300;font-size:26px;color:var(--ink2)}
[data-theme=v2] .card .m{color:var(--muted);font-weight:300}
[data-theme=v2] .card .p{color:#8b8b7b}
[data-theme=v2] .tick{border-radius:50%;border:1px solid var(--line-2);background:transparent;width:22px;height:22px}
[data-theme=v2] .card[aria-checked=true] .tick{background:var(--ink2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2310100e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--ink2)}

/* step 3 */
[data-theme=v2] .tag{font-family:"Melodrama",serif;font-weight:400;color:var(--ink2);letter-spacing:-.005em;font-size:clamp(34px,10vw,52px);line-height:1.02}
[data-theme=v2] .tag > span{opacity:1;transform:none;transition:none}          /* the letters arrive on their own (wall.js intro) */
[data-theme=v2] .tag > span:last-child{color:var(--ink2);font-style:normal}
[data-theme=v2] .status{color:var(--muted);font-weight:300}
[data-theme=v2] .status.ok{color:var(--ok)}

/* step 4 */
[data-theme=v2] .h.ready{color:var(--ok)}
[data-theme=v2] .h.ready svg{stroke:var(--ok);stroke-width:1.4}
[data-theme=v2] .sheet,[data-theme=v2] .sheet canvas{border-radius:0}
[data-theme=v2] .sheet{box-shadow:0 0 0 1px var(--line)}
[data-theme=v2] .sheet.writing{box-shadow:none}
[data-theme=v2] .sheet .zoom{border-radius:0;box-shadow:0 18px 40px -16px rgba(0,0,0,.95)}
[data-theme=v2] .wa{border-radius:0;background:var(--ink2);color:var(--bg);font-family:var(--text);font-weight:500;font-size:18px;box-shadow:none;min-height:56px}
[data-theme=v2] .wa svg{fill:#1FA855}
[data-theme=v2] .wa:active{background:#e9e9cf}
[data-theme=v2] .ghost{border-radius:0;border:1px solid var(--line);background:transparent;color:var(--ink2);font-weight:400}
[data-theme=v2] .ghost svg{stroke:var(--muted)}
[data-theme=v2] .next{border-radius:0;border:1px dashed var(--line-2);color:var(--muted)}

[data-theme=v2] .sheetdlg{border-radius:0;background:var(--bg);color:var(--ink2);border-top:1px solid var(--line);box-shadow:0 -20px 60px rgba(0,0,0,.6)}
[data-theme=v2] .sheetdlg h2{font-family:var(--display);font-weight:300;color:var(--ink2)}
[data-theme=v2] .sheetdlg p{color:var(--muted);font-weight:300}
[data-theme=v2] .sheetdlg::backdrop{background:rgba(0,0,0,.6)}
[data-theme=v2] .toast{border-radius:0;background:var(--ink2);color:var(--bg)}

/* the v2 wall: each block dark on the front, cream on the back (wall.js turnV2) */
.tile2{position:absolute;transform-style:preserve-3d;will-change:transform}
.tile2 i,.tile2 b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tile2 i{background:#10100e}
.tile2 b{background:#ffffe3}
/* words arriving (app.js intro): each fades and rises out of a soft blur */
.v2w{display:inline-block;white-space:nowrap}