/* living.css — the "Living Interface" look (chosen Sep 2026 from three mockups).
   Everything here applies only under html[data-look="living"], which
   theme-init.js sets before first paint. It is the default look (Sep 2026);
   ?look=classic brings back the classic look (remembered in localStorage
   "shr_look"), which is otherwise untouched by this file.

   Approach: redefine the classic theme tokens, then reshape the components —
   glass surfaces over a slow aurora, softer type, sliding highlights. Font
   sizes (including the Larger text rules) stay the classic ones. Motion is
   slow and eases out with no bounce; html.still (living.js) turns it off. */

.aurora{display:none}

/* ------------------------------------------------------------------ tokens */
html[data-look="living"]{
  /* Every Latin stack ends in Noto Naskh Arabic, so Urdu inside any element (results, notes, labels) is set in Naskh, never a system fallback. */
  --serif-head:"Space Grotesk","Inter","Noto Naskh Arabic",system-ui,sans-serif; --serif-body:"Inter","Noto Naskh Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter","Noto Naskh Arabic","Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono","Noto Naskh Arabic","Courier New",monospace;
  --bg:#FBFAFD; --ink:#241E33; --ink-2:#433A58; --brand:#7C5CD6; --brand-deep:#5B3E90; --brand-ink:#5B3E90; --accent:#B84E86; --accent-deep:#A83E75; --red:#B3203F;
  --muted:#E6DFF3; --n100:rgba(124,92,214,.06); --n200:rgba(124,92,214,.16); --n500:#5E5474; --n600:#433A58;
  --glass:rgba(255,255,255,.76); --glass-strong:rgba(255,255,255,.92); --glass-border:rgba(124,92,214,.20);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 38%);
  --shadow:0 12px 32px -14px rgba(91,62,144,.30),0 2px 6px -2px rgba(91,62,144,.10);
  --surface:var(--glass); --card:var(--glass-strong); --card-rest:var(--glass); --border:var(--glass-border); --border-strong:rgba(124,92,214,.32); --bot-bubble:rgba(255,255,255,.86);
  --mast-bg:var(--glass); --strap-ink:var(--n500);
  --field-bg:rgba(255,255,255,.95); --field-focus:#fff; --field-ink:var(--ink); --field-ph:#6F6488; --focus-ring:rgba(124,92,214,.30);
  --grad-brand:linear-gradient(135deg,#7C3AED,#D0287A); --grad-brand-hover:linear-gradient(135deg,#8B5CF6,#DB2777); --grad-soft:linear-gradient(135deg,rgba(124,58,237,.12),rgba(208,40,122,.12));
  --btn-shadow:0 6px 18px -6px rgba(208,40,122,.55); --toast-shadow:var(--shadow); --head-glow:none;
  --a1:#B9A0F2; --a2:#EFA3C8; --a3:#F4C98A; --a-warn:#EE9CB2; --a-done:#8FD8C1; --a-op:.65;
  --sev-high:#B3203F; --sev-high-bg:rgba(204,51,85,.13); --sev-high-glow:rgba(204,51,85,.18);
  --sev-med:#8A4B00; --sev-med-bg:rgba(245,158,11,.20); --sev-med-glow:rgba(245,158,11,.24);
  --sev-low:#5B3E90; --sev-low-bg:rgba(124,92,214,.12);
  --ok:#0B6B53; --ok-bg:rgba(16,185,129,.18);
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1);
  --cs:light;
}
html[data-look="living"][data-theme="dark"]{
  --bg:#120D1D; --ink:#EFE9F8; --ink-2:#DCD3EE; --brand:#A78BFA; --brand-deep:#2A2150; --brand-ink:#C9B6FF; --accent:#FFB020; --accent-deep:#FFC85C; --red:#FF9AAF;
  --muted:#3A2E5C; --n100:rgba(167,139,250,.08); --n200:rgba(167,139,250,.20); --n500:#C3B8DB; --n600:#DCD3EE;
  --glass:rgba(27,21,48,.74); --glass-strong:rgba(27,21,48,.92); --glass-border:rgba(167,139,250,.24);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%);
  --shadow:0 14px 40px -14px rgba(0,0,0,.6),0 0 0 1px rgba(167,139,250,.06);
  --border-strong:rgba(167,139,250,.38); --bot-bubble:rgba(34,26,58,.86);
  --field-bg:rgba(18,13,29,.72); --field-focus:rgba(18,13,29,.9); --field-ink:#EFE9F8; --field-ph:#A99DC4; --focus-ring:rgba(167,139,250,.40);
  --a1:#5638A6; --a2:#7A2A62; --a3:#6A4B1C; --a-warn:#86304E; --a-done:#1D6653; --a-op:.7;
  --sev-high:#FF9AAF; --sev-high-bg:rgba(255,92,122,.18); --sev-high-glow:rgba(255,92,122,.28);
  --sev-med:#FFCB6B; --sev-med-bg:rgba(255,176,32,.16); --sev-med-glow:rgba(255,176,32,.26);
  --sev-low:#C9B6FF; --sev-low-bg:rgba(167,139,250,.16);
  --ok:#6BE6C0; --ok-bg:rgba(94,224,184,.16);
  --cs:dark;
}
@media (prefers-color-scheme:dark){
  html[data-look="living"]:not([data-theme="light"]){
    --bg:#120D1D; --ink:#EFE9F8; --ink-2:#DCD3EE; --brand:#A78BFA; --brand-deep:#2A2150; --brand-ink:#C9B6FF; --accent:#FFB020; --accent-deep:#FFC85C; --red:#FF9AAF;
    --muted:#3A2E5C; --n100:rgba(167,139,250,.08); --n200:rgba(167,139,250,.20); --n500:#C3B8DB; --n600:#DCD3EE;
    --glass:rgba(27,21,48,.74); --glass-strong:rgba(27,21,48,.92); --glass-border:rgba(167,139,250,.24);
    --sheen:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%);
    --shadow:0 14px 40px -14px rgba(0,0,0,.6),0 0 0 1px rgba(167,139,250,.06);
    --border-strong:rgba(167,139,250,.38); --bot-bubble:rgba(34,26,58,.86);
    --field-bg:rgba(18,13,29,.72); --field-focus:rgba(18,13,29,.9); --field-ink:#EFE9F8; --field-ph:#A99DC4; --focus-ring:rgba(167,139,250,.40);
    --a1:#5638A6; --a2:#7A2A62; --a3:#6A4B1C; --a-warn:#86304E; --a-done:#1D6653; --a-op:.7;
    --sev-high:#FF9AAF; --sev-high-bg:rgba(255,92,122,.18); --sev-high-glow:rgba(255,92,122,.28);
    --sev-med:#FFCB6B; --sev-med-bg:rgba(255,176,32,.16); --sev-med-glow:rgba(255,176,32,.26);
    --sev-low:#C9B6FF; --sev-low-bg:rgba(167,139,250,.16);
    --ok:#6BE6C0; --ok-bg:rgba(94,224,184,.16);
    --cs:dark;
  }
}

/* ------------------------------------------------------------------ aurora */
html[data-look="living"] .neon-decor{display:none}
html[data-look="living"] .aurora{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:var(--a-op)}
html[data-look="living"] .aurora i{position:absolute;width:80vmax;height:80vmax;border-radius:50%;will-change:transform;transition:opacity 2.5s var(--ease-soft)}
/* Two animations per blob: a slow drift (transform) and a separate ~20s breathe (the scale property). */
html[data-look="living"] .aurora .b1{background:radial-gradient(circle at center,var(--a1) 0,transparent 62%);top:-40vmax;left:-25vmax;animation:li-drift1 44s ease-in-out infinite alternate,li-breathe 20s ease-in-out infinite alternate}
html[data-look="living"] .aurora .b2{background:radial-gradient(circle at center,var(--a2) 0,transparent 62%);top:-10vmax;right:-45vmax;animation:li-drift2 50s ease-in-out infinite alternate,li-breathe 22s ease-in-out -7s infinite alternate}
html[data-look="living"] .aurora .b3{background:radial-gradient(circle at center,var(--a3) 0,transparent 60%);bottom:-55vmax;left:-10vmax;animation:li-drift3 55s ease-in-out infinite alternate,li-breathe 18s ease-in-out -12s infinite alternate}
html[data-look="living"] .aurora .bw{background:radial-gradient(circle at center,var(--a-warn) 0,transparent 60%);top:10vmax;left:10vmax;opacity:0;animation:li-drift2 46s ease-in-out infinite alternate-reverse,li-breathe 20s ease-in-out -4s infinite alternate}
html[data-look="living"] .aurora .bd{background:radial-gradient(circle at center,var(--a-done) 0,transparent 60%);top:5vmax;left:0;opacity:0;animation:li-drift1 52s ease-in-out infinite alternate-reverse,li-breathe 21s ease-in-out -10s infinite alternate}
html[data-look="living"] .aurora[data-mood="busy"] .bw{opacity:.55}
html[data-look="living"] .aurora[data-mood="warn"] .bw{opacity:.8}
html[data-look="living"] .aurora[data-mood="done"] .bd{opacity:.9}
html[data-look="living"] .aurora[data-mood="done"] .b2{opacity:.45}
@keyframes li-drift1{from{transform:translate3d(0,0,0)}to{transform:translate3d(14vmax,10vmax,0)}}
@keyframes li-drift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-16vmax,12vmax,0)}}
@keyframes li-drift3{from{transform:translate3d(0,0,0)}to{transform:translate3d(12vmax,-14vmax,0)}}
@keyframes li-breathe{from{scale:.9}to{scale:1.12}}

/* ------------------------------------------------------------------- shell */
html[data-look="living"] body{background:var(--bg);-webkit-font-smoothing:antialiased} /* the font comes from the remapped --serif-body, so Urdu keeps its own */
/* The header and the strap under it are the classic ones (the user's choice, Sep 2026): they get
   the classic theme values back, so every classic header rule draws them exactly as before
   (the classic Latin stacks carry Naskh too, so "اردو" in the switch gets Urdu letters). */
html[data-look="living"] :is(header.masthead,.strap){
  font-family:"Lora",Georgia,serif; /* what they inherit from the classic body */
  --serif-head:"Playfair Display","Noto Naskh Arabic","Times New Roman",serif; --mono:"JetBrains Mono","Noto Naskh Arabic","Courier New",monospace; --sans:"Inter","Noto Naskh Arabic","Helvetica Neue",Arial,sans-serif;
  --bg:#FBFAFD; --ink:#241E33; --brand:#7C5CD6; --brand-deep:#5B3E90; --n500:#615A75; --border-strong:#D3C8EE; --tint-hover:rgba(124,92,214,.10);
  --mast-bg:#FFFFFF; --logo-bg:#FFFFFF; --strap-ink:#F6F1FE; --mast-shadow:0 1px 0 rgba(124,92,214,.10),0 6px 18px rgba(124,92,214,.07);
  --grad-brand:linear-gradient(135deg,#7C3AED,#D0287A);
}
html[data-look="living"][dir="rtl"] :is(header.masthead,.strap){font-family:var(--urdu-body)}
html[data-look="living"][data-theme="dark"] :is(header.masthead,.strap){
  --bg:#120D1D; --ink:#EFE9F8; --brand:#8B5CF6; --brand-deep:#241B3E; --n500:#A79BC0; --border-strong:#6D54B8; --tint-hover:rgba(139,92,246,.14);
  --mast-bg:#161024; --strap-ink:#EFE9F8; --mast-shadow:0 0 26px rgba(139,92,246,.35);
}
@media (prefers-color-scheme:dark){
  html[data-look="living"]:not([data-theme="light"]) :is(header.masthead,.strap){
    --bg:#120D1D; --ink:#EFE9F8; --brand:#8B5CF6; --brand-deep:#241B3E; --n500:#A79BC0; --border-strong:#6D54B8; --tint-hover:rgba(139,92,246,.14);
    --mast-bg:#161024; --strap-ink:#EFE9F8; --mast-shadow:0 0 26px rgba(139,92,246,.35);
  }
}
html[data-look="living"] .app{border-bottom:0}
html[data-look="living"] footer{background:transparent;border-top:1px solid var(--glass-border)}
html[data-look="living"] footer .wrap{font-family:var(--serif-body);letter-spacing:.08em}

/* the sign-in card's language switch: a glass track with a sliding highlight (living.js) */
html[data-look="living"] #gatelang{position:relative;background:var(--glass-strong);border:1px solid var(--glass-border);padding:3px;gap:0;overflow:visible}
html[data-look="living"] #gatelang button{position:relative;z-index:1;border:0 !important;border-radius:999px;font-family:var(--serif-body);font-size:12.5px;letter-spacing:.02em;text-transform:none;color:var(--n600);min-height:34px;padding:6px 12px;transition:color .5s var(--ease-soft)}
html[data-look="living"] #gatelang button.active{background:transparent;color:#fff}
html[data-look="living"] #gatelang:not(.li-slide) button.active{background:var(--grad-brand)}
html[data-look="living"] .li-pill{position:absolute;z-index:0;top:0;left:0;width:0;height:0;border-radius:999px;background:var(--grad-brand);box-shadow:0 4px 12px rgba(208,40,122,.3);transition:left .7s var(--ease-out),top .7s var(--ease-out),width .7s var(--ease-out),height .7s var(--ease-out);pointer-events:none}

/* tabs: one glass track with a sliding highlight */
html[data-look="living"] .toptabs{position:relative;gap:0;padding:3px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:999px;width:max-content;max-width:100%}
html[data-look="living"] .toptabs button{position:relative;z-index:1;background:transparent;border:0;box-shadow:none;color:var(--n600);transition:color .5s var(--ease-soft)}
html[data-look="living"] .toptabs button:hover{transform:none;background:transparent;color:var(--ink)}
html[data-look="living"] .toptabs button.active{background:transparent;color:#fff;box-shadow:none}
html[data-look="living"] .toptabs:not(.li-slide) button.active{background:var(--grad-brand)}
html[data-look="living"] #backhome{color:var(--brand-ink);font-family:var(--serif-body)}

/* headings and kickers */
html[data-look="living"] .kicker{font-family:var(--serif-body);font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--brand-ink)}
html[data-look="living"] .kicker .sq{width:8px;height:8px;border-radius:2px;background:var(--grad-brand);box-shadow:none}
html[data-look="living"] .tool-intro h1{font-family:var(--serif-head);font-weight:700;letter-spacing:-.015em;line-height:1.08}
html[data-look="living"] .tool-intro p{color:var(--n600)}
html[data-look="living"] .rule{border-top-color:var(--glass-border)}
html[data-look="living"] .lbl,html[data-look="living"] .counter{font-family:var(--serif-body);letter-spacing:.06em}

/* --------------------------------------------------------------- surfaces */
html[data-look="living"] .panel,html[data-look="living"] .marked,html[data-look="living"] .chat,html[data-look="living"] .editor,html[data-look="living"] .modal,
html[data-look="living"] .composer{background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--shadow);border-radius:22px}
html[data-look="living"] .modal{background:var(--glass-strong);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
html[data-look="living"] .modal-bg{background:rgba(18,13,29,.35)}
html[data-look="living"] #gate{background:transparent}
html[data-look="living"] .gate-foot{font-family:var(--serif-body);letter-spacing:.08em}
html[data-look="living"] .modal h2{font-family:var(--serif-head)}
html[data-look="living"] .modal label{font-family:var(--serif-body);letter-spacing:.08em}
html[data-look="living"] .panel h3{margin:0 0 12px;padding:0;border:0;background:transparent;font-family:var(--serif-body);font-weight:700;font-size:12.5px;letter-spacing:.1em;color:var(--brand-ink)}
html[data-look="living"] .panel.fix h3{color:var(--accent-deep)}
html[data-look="living"] .panel.notice{border-color:var(--sev-med)}
html[data-look="living"] .panel.notice h3{color:var(--sev-med)}
html[data-look="living"] .res-empty,html[data-look="living"] .empty{font-family:var(--serif-body);letter-spacing:.06em;background:var(--glass);border:1px dashed var(--border-strong);border-radius:18px;color:var(--n600)}
html[data-look="living"] .err{border-radius:14px;border-color:var(--sev-high);color:var(--sev-high);background:var(--sev-high-bg);font-family:var(--serif-body)}
html[data-look="living"] .enh-restored{background:var(--glass);border-color:var(--glass-border)}
html[data-look="living"] .rewritten{background:var(--field-bg);color:var(--field-ink);border:1px solid var(--glass-border);border-radius:14px}

/* the text box card and its footer bar */
html[data-look="living"] .editor{overflow:hidden}
html[data-look="living"] .editor:focus-within{border-color:var(--brand);box-shadow:var(--shadow),0 0 0 3px var(--focus-ring)}
html[data-look="living"] .editor textarea{background:var(--field-bg);color:var(--field-ink);color-scheme:var(--cs)}
html[data-look="living"] .editor-bar{background:transparent;border-top:1px solid var(--glass-border);color:var(--ink)}
html[data-look="living"] .editor .lbl,html[data-look="living"] .editor .counter,html[data-look="living"] .editor .working-note{color:var(--n500)}
html[data-look="living"] .editor select{background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--ink);color-scheme:var(--cs)}
html[data-look="living"] .editor-right .btn.ghost{color:var(--ink);border-color:var(--glass-border)}
html[data-look="living"] .editor .icon-btn.ghost-icon{border-color:var(--glass-border);color:var(--n600)}
html[data-look="living"] .editor .icon-btn.ghost-icon:hover{background:var(--n100);color:var(--ink);border-color:var(--brand)}
html[data-look="living"] textarea,html[data-look="living"] input,html[data-look="living"] select{border-color:var(--glass-border);color-scheme:var(--cs)}

/* ---------------------------------------------------------------- buttons */
html[data-look="living"] .btn{position:relative;overflow:hidden;font-family:var(--serif-body);font-weight:600;font-size:14.5px;letter-spacing:.01em;text-transform:none;
  transition:transform .4s var(--ease-out),box-shadow .5s var(--ease-soft),background-color .5s var(--ease-soft),border-color .5s var(--ease-soft)}
html[data-look="living"] .btn:hover{transform:none;box-shadow:0 8px 22px -6px rgba(208,40,122,.6)}
html[data-look="living"] .btn:active{transform:scale(.98)}
html[data-look="living"] .btn.ghost{background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--ink)}
html[data-look="living"] .btn.ghost:hover{background:var(--glass-strong);color:var(--ink);border-color:var(--brand);box-shadow:none}
html[data-look="living"] .btn.sm{font-size:13.5px}
html[data-look="living"] .icon-btn{position:relative;overflow:hidden;transition:background-color .4s var(--ease-soft),color .4s var(--ease-soft),transform .4s var(--ease-out)}
html[data-look="living"] .icon-btn.send:hover{transform:none}
/* ripple, placed at the pointer by living.js */
html[data-look="living"] .btn::after,html[data-look="living"] .icon-btn::after{content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:currentColor;opacity:0;transform:scale(0);pointer-events:none}
html[data-look="living"] .li-rip::after{animation:li-ripple 1s var(--ease-out)}
@keyframes li-ripple{from{opacity:.12;transform:scale(0)}to{opacity:0;transform:scale(30)}}

/* ------------------------------------------------------------- home cards */
html[data-look="living"] .homegrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-auto-rows:auto;align-items:stretch;gap:14px;margin-bottom:60px}
html[data-look="living"] .homecard,html[data-look="living"] .homecard:hover,html[data-look="living"] .homecard.open{height:auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:18px;overflow:hidden;
  text-align:start;border-radius:20px;background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--shadow);animation:none;z-index:auto;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-soft),border-color .6s var(--ease-soft)}
html[data-look="living"] .homecard::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 110%,rgba(208,40,122,.14),transparent 70%);opacity:0;transition:opacity .7s var(--ease-soft);pointer-events:none}
html[data-look="living"] .homecard:hover,html[data-look="living"] .homecard:focus-visible{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 14px 30px -14px rgba(124,58,237,.32)}
html[data-look="living"] .homecard:hover::before,html[data-look="living"] .homecard:focus-visible::before{opacity:1}
html[data-look="living"] .homecard:active{transform:translateY(-1px)}
html[data-look="living"] .homecard .li-ic{width:42px;height:42px;border-radius:14px;background:var(--grad-brand);display:grid;place-items:center;color:#fff;flex:none;transition:transform .8s var(--ease-out)}
html[data-look="living"] .homecard:hover .li-ic,html[data-look="living"] .homecard:focus-visible .li-ic{transform:rotate(-6deg) scale(1.03)}
html[data-look="living"] .homecard .li-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-look="living"] .homecard h3,html[data-look="living"] .homecard:hover h3,html[data-look="living"] .homecard.open h3{margin:4px 0 0;text-align:start;font-family:var(--serif-head);font-weight:700;font-size:19px;line-height:1.25;color:var(--ink)}
/* The whole description shows: it is Uks-reviewed wording, so it is never cut short. */
html[data-look="living"] .homecard p,html[data-look="living"] .homecard:hover p,html[data-look="living"] .homecard.open p{max-height:none;opacity:1;transform:none;text-align:start;margin:0;font-family:var(--serif-body);font-size:14px;line-height:1.55;color:var(--n600)}
html[data-look="living"] .homecard::after{position:absolute;top:22px;bottom:auto;right:18px;opacity:.55;color:var(--brand-ink);transition:opacity .6s var(--ease-soft),transform .6s var(--ease-out)}
html[data-look="living"][dir="rtl"] .homecard::after{right:auto;left:18px}
html[data-look="living"] .homecard:hover::after{opacity:1;transform:translateX(3px)}
html[data-look="living"][dir="rtl"] .homecard:hover::after{transform:translateX(-3px)}
html[data-look="living"][dir="rtl"] .homecard h3{font-family:var(--urdu-head);font-size:20px;line-height:1.8}
html[data-look="living"][dir="rtl"] .homecard p{font-family:var(--urdu-body);font-size:15px;line-height:2.05}

/* Home, Sep 2026 declutter: the three core tools lead in large cards, Language Bridge and
   Ask Uks follow in a quieter row, and My Files lives in the header. One-line descriptions
   (h_*; the full text stays on each tool page), on a more solid card so the aurora stays
   behind the words, at a readable size. The strap and its date are gone. */
html[data-look="living"] .strap{display:none}
html[data-look="living"] .homegrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
html[data-look="living"] .homecard.main{grid-column:span 2}
html[data-look="living"] .homecard.more{grid-column:span 3}
html[data-look="living"] .homecard,html[data-look="living"] .homecard:hover,html[data-look="living"] .homecard.open{background:var(--glass-strong)}
html[data-look="living"] .homecard.main{padding:24px 24px 26px;gap:10px}
html[data-look="living"] .homecard.main h3{font-size:22px}
html[data-look="living"] .homecard p,html[data-look="living"] .homecard:hover p,html[data-look="living"] .homecard.open p{font-size:16px;line-height:1.5;color:var(--ink-2)}
/* the second row: icon beside the words, so the cards sit lower than the three above */
html[data-look="living"] .homecard.more{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:2px;align-content:center;padding:16px 44px 16px 18px}
html[data-look="living"] .homecard.more .li-ic{grid-row:span 2;align-self:center}
html[data-look="living"][dir="rtl"] .homecard.more{padding:16px 18px 16px 44px}
html[data-look="living"] .homecard.more .li-ic{width:38px;height:38px;border-radius:12px}
html[data-look="living"] .homecard.more h3{margin:0;font-size:18px}
html[data-look="living"] .homecard.more::after{top:50%;margin-top:-.6em}
html[data-look="living"][dir="rtl"] .homecard p{font-size:17px;line-height:2}
html[data-look="living"][dir="rtl"] .homecard.main h3{font-size:22px}
html[data-look="living"][data-text="large"] .homecard p{font-size:18px}
html[data-look="living"][data-text="large"][dir="rtl"] .homecard p{font-size:19px}
@media (max-width:860px){
  html[data-look="living"] .homegrid{grid-template-columns:minmax(0,1fr)}
  html[data-look="living"] .homecard.main,html[data-look="living"] .homecard.more{grid-column:auto}
  html[data-look="living"] .homecard.main{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:2px;align-content:center;padding:18px 44px 18px 18px}
  html[data-look="living"] .homecard.main .li-ic{grid-row:span 2;align-self:center}
  html[data-look="living"][dir="rtl"] .homecard.main{padding:18px 18px 18px 44px}
  html[data-look="living"] .homecard.main h3{margin:0;font-size:20px}
  html[data-look="living"] .homecard.main::after{top:50%;margin-top:-.6em}
}

/* --------------------------------------------------------- results: flags */
html[data-look="living"] .marked{color:var(--ink)}
html[data-look="living"] .marked mark{border-bottom:0;border-radius:6px;padding:1px 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--ink);font-weight:600;
  text-decoration:underline wavy;text-decoration-thickness:1.5px;text-underline-offset:5px;--c:var(--sev-low);background:var(--sev-low-bg);text-decoration-color:var(--sev-low);
  animation:li-ignite 1.6s var(--ease-soft) both}
html[data-look="living"] .marked mark.high{--c:var(--sev-high);background:var(--sev-high-bg);text-decoration-color:var(--sev-high);animation:li-ignite 1.6s var(--ease-soft) both,li-glowH 9s ease-in-out 1.6s infinite alternate}
html[data-look="living"] .marked mark.medium{--c:var(--sev-med);background:var(--sev-med-bg);text-decoration-color:var(--sev-med);animation:li-ignite 1.6s var(--ease-soft) both,li-glowM 9s ease-in-out 1.6s infinite alternate}
html[data-look="living"] .marked.rtl mark{text-underline-offset:8px}
html[data-look="living"] .marked sup{color:var(--c);font-family:var(--serif-body)}
@keyframes li-ignite{from{background-color:transparent;text-decoration-color:transparent}}
@keyframes li-glowH{to{box-shadow:0 0 10px 0 var(--sev-high-glow)}}
@keyframes li-glowM{to{box-shadow:0 0 10px 0 var(--sev-med-glow)}}

/* findings: a card each, edged in their severity colour */
html[data-look="living"] .finding{--c:var(--sev-low);border:1px solid var(--glass-border);border-inline-start:4px solid var(--c);border-radius:16px;background:var(--glass-strong);padding:14px;margin-bottom:10px}
html[data-look="living"] .finding:first-of-type{padding-top:14px;border-top:1px solid var(--glass-border)}
html[data-look="living"] .finding:last-child{margin-bottom:0}
html[data-look="living"] .finding.high{--c:var(--sev-high)}
html[data-look="living"] .finding.medium{--c:var(--sev-med)}
html[data-look="living"] .notenum{border:0;background:var(--c,var(--brand));color:var(--bg);font-family:var(--serif-body);min-width:22px;height:22px;display:inline-grid;place-items:center;padding:0 6px}
html[data-look="living"] .finding .sev{background:transparent;border:0;padding:0;color:var(--c);font-family:var(--serif-body);letter-spacing:.06em}
html[data-look="living"] .sev.high{--c:var(--sev-high);background:transparent;color:var(--sev-high);border:0}
html[data-look="living"] .sev.medium{--c:var(--sev-med);background:transparent;color:var(--sev-med)}
html[data-look="living"] .sev.low{--c:var(--sev-low);background:var(--sev-low-bg);color:var(--sev-low);border:0;border-radius:999px;padding:1px 8px}
html[data-look="living"] .finding .cat{font-family:var(--serif-body)}
html[data-look="living"] .finding .flagged{font-family:var(--serif-body);background:transparent;border:0;padding:0;text-decoration:line-through;text-decoration-color:var(--c);color:var(--n600)}
html[data-look="living"] .finding .reason{color:var(--n600)}
html[data-look="living"] .finding .sugg{color:var(--ok);font-weight:600}
html[data-look="living"] .finding .sugg b{color:var(--ok)}
/* while a tool works (living.js): scan beam, status dots, the writer's words lit in turn */
html[data-look="living"] .enh-loading.li-scan{padding:16px 18px;margin-bottom:14px;background:var(--glass);border:1px solid var(--glass-border);border-radius:22px;box-shadow:var(--shadow);color:var(--brand-ink);font-family:var(--serif-body);font-size:14px}
html[data-look="living"][dir="rtl"] .enh-loading.li-scan{font-family:var(--urdu-body)}
html[data-look="living"] .li-scanbar{height:3px;border-radius:3px;background:var(--glass-border);overflow:hidden;margin:0 0 12px}
html[data-look="living"] .li-scanbar i{display:block;height:100%;width:45%;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(124,92,214,.55),rgba(208,40,122,.45),transparent);animation:li-beam 2.6s var(--ease-soft) infinite}
html[data-look="living"][dir="rtl"] .li-scanbar i{animation-name:li-beam-rtl}
@keyframes li-beam{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes li-beam-rtl{from{transform:translateX(100%)}to{transform:translateX(-260%)}}
/* the button spinner's gap sits between it and the label in both directions (classic uses margin-right) */
html[data-look="living"] .btn .spinner{margin-right:0;margin-inline-end:8px}
html[data-look="living"] .li-status{display:flex;align-items:center;gap:10px;font-weight:600}
html[data-look="living"] .li-dots{display:inline-flex;gap:4px}
html[data-look="living"] .li-dots i{width:7px;height:7px;border-radius:50%;background:var(--grad-brand);animation:li-bop 1.8s ease-in-out infinite}
html[data-look="living"] .li-dots i:nth-child(2){animation-delay:.3s}
html[data-look="living"] .li-dots i:nth-child(3){animation-delay:.6s}
html[data-look="living"] .li-scantext{margin:10px 0 0;color:var(--n600);font-weight:400;font-size:16px;line-height:1.75;unicode-bidi:plaintext;text-align:start}
html[data-look="living"][dir="rtl"] .li-scantext{font-size:17px;line-height:2}
html[data-look="living"] .li-w{border-radius:4px;animation:li-scanword 1.8s var(--ease-soft) both;animation-delay:calc(var(--i) * 95ms)}
@keyframes li-scanword{0%{background:transparent}40%{background:rgba(124,92,214,.12);color:var(--ink)}100%{background:transparent}}
/* while working, the scan card stands in for earlier results (they return if the run is cancelled) */
html[data-look="living"] .results[aria-busy="true"]>*:not(.enh-loading){display:none}

/* answers ink in word by word (living.js) */
html[data-look="living"] .li-iw{animation:li-ink .9s var(--ease-out) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes li-ink{from{opacity:0;filter:blur(3px)}}
html[data-look="living"] .li-iw-li::marker{animation:li-marker .9s var(--ease-out) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes li-marker{from{color:transparent}}

/* accept a suggestion (living.js) */
html[data-look="living"] .li-acts{display:flex;justify-content:flex-end;margin-top:10px}
html[data-look="living"] .li-acc{display:inline-flex;align-items:center;justify-content:center;gap:8px}
html[data-look="living"] .li-tick{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;
  transition:stroke-dashoffset .7s .1s var(--ease-out),width .45s var(--ease-out),margin .45s var(--ease-out)}
/* until it is done the tick takes no room (and cancels the gap), so the label stays centred */
html[data-look="living"] .li-acc:not(.done) .li-tick{width:0;margin-inline-end:-8px}
html[data-look="living"] .li-acc.done .li-tick{stroke-dashoffset:0}
html[data-look="living"] .li-acc.done,html[data-look="living"] .li-acc.done:disabled{opacity:1;color:var(--ok);border-color:var(--ok);cursor:default}
html[data-look="living"] .finding.li-done{--c:var(--ok)}
html[data-look="living"] .finding.li-done .notenum{background:var(--ok)}
html[data-look="living"] .li-fixbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 12px}
html[data-look="living"] .li-ring{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center}
html[data-look="living"] .li-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
html[data-look="living"] .li-ring circle{fill:none;stroke-width:4}
html[data-look="living"] .li-ring-bg{stroke:var(--glass-border)}
html[data-look="living"] .li-ring-fg{stroke:var(--ok);stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset 1.8s var(--ease-out)}
html[data-look="living"] .li-ring b{font:700 12px/1 var(--serif-body);color:var(--ink)}
html[data-look="living"] .marked mark.li-leaving{opacity:0;filter:blur(2px);animation:none;transition:opacity .7s var(--ease-soft),filter .7s var(--ease-soft)}
html[data-look="living"] .marked mark.li-fixed{animation:none;border-radius:6px;padding:1px 3px;color:var(--ink);font-weight:600;text-decoration:underline solid;text-decoration-color:var(--ok);text-decoration-thickness:2px;text-underline-offset:5px;
  background-color:transparent;background-image:linear-gradient(var(--ok-bg),var(--ok-bg));background-repeat:no-repeat;background-size:0% 100%;background-position:left;box-shadow:none;
  transition:background-size 1.2s var(--ease-out),opacity .8s var(--ease-soft),filter .8s var(--ease-soft)}
html[data-look="living"][dir="rtl"] .marked mark.li-fixed,html[data-look="living"] .marked.rtl mark.li-fixed{background-position:right}
html[data-look="living"] .marked mark.li-fixed.li-entering{opacity:0;filter:blur(2px)}
html[data-look="living"] .marked mark.li-fixed.li-swept{background-size:100% 100%}
html[data-look="living"] .check li::before{border-radius:6px;border-color:var(--glass-border)}
html[data-look="living"] .check li.pass::before{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
html[data-look="living"] .check li.fail::before{background:var(--sev-high-bg);color:var(--sev-high);border-color:var(--sev-high)}
html[data-look="living"] .check li.na::before{background:var(--n100);color:var(--n500)}
html[data-look="living"] .wrapcard{border-radius:24px}

/* ------------------------------------------------------------------- chat */
html[data-look="living"] .msg{border-radius:18px;animation:li-pop .8s var(--ease-out) both}
html[data-look="living"] .msg.bot{background:var(--bot-bubble);border:1px solid var(--glass-border);border-end-start-radius:6px;border-bottom-left-radius:18px;box-shadow:var(--shadow)}
html[data-look="living"][dir="ltr"] .msg.bot,html[data-look="living"]:not([dir="rtl"]) .msg.bot{border-bottom-left-radius:6px}
html[data-look="living"][dir="rtl"] .msg.bot{border-bottom-right-radius:6px}
html[data-look="living"] .msg.user{background:var(--grad-brand);border:0;box-shadow:0 8px 20px -10px rgba(208,40,122,.6)}
html[data-look="living"] .msg.bot strong{color:var(--brand-ink)}
html[data-look="living"] .msg.thinking i{background:var(--grad-brand);animation:li-bop 1.8s ease-in-out infinite}
html[data-look="living"] .msg.thinking i:nth-child(2){animation-delay:.3s}
html[data-look="living"] .msg.thinking i:nth-child(3){animation-delay:.6s}
html[data-look="living"] .composer{border-radius:999px;background:var(--glass-strong)}
/* An input keeps a ~20-character default width that would stop the chat column shrinking on a phone. */
html[data-look="living"] .composer input{width:0}
html[data-look="living"] .composer:focus-within{border-color:var(--brand);box-shadow:var(--shadow),0 0 0 3px var(--focus-ring)}
@keyframes li-pop{from{opacity:0;transform:translateY(6px)}}
@keyframes li-bop{0%,100%{transform:translateY(0) scale(.85);opacity:.45}50%{transform:translateY(-2px) scale(1);opacity:.9}}

/* --------------------------------------------------------------- My Files */
html[data-look="living"] #arch-list{display:grid;gap:10px}
html[data-look="living"] .arch-item{margin:0;border:1px solid var(--glass-border);border-radius:16px;background:var(--glass);box-shadow:var(--shadow);transition:transform .6s var(--ease-out),border-color .6s var(--ease-soft)}
html[data-look="living"] .arch-item:hover{background:var(--glass-strong);box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--brand)}
html[data-look="living"] .pill{border-radius:999px;border-color:var(--glass-border);background:var(--grad-soft);font-family:var(--serif-body);letter-spacing:.04em}
html[data-look="living"] .arch-item .meta{font-family:var(--serif-body)}

/* ------------------------------------------------------- the trial banner */
/* The banner is styled inline by app.js; the lighter dark-theme violet would leave white text below AA. */
html[data-look="living"] #trialBanner{background:var(--grad-brand) !important}
html[data-look="living"] #trialRegBtn{color:#5B21B6 !important}
html[data-look="living"] #trialSignOut{border-color:rgba(255,255,255,.75) !important}

/* ------------------------------------------------------------- the toast */
html[data-look="living"] .enh-toast{background:var(--ink);color:var(--bg);border:0;border-radius:999px;box-shadow:var(--shadow)}

/* ------------------------------------------------------------------ Urdu */
html[data-look="living"][dir="rtl"] #gatelang button,
html[data-look="living"][dir="rtl"] .btn,html[data-look="living"][dir="rtl"] .kicker,html[data-look="living"][dir="rtl"] .panel h3,html[data-look="living"][dir="rtl"] .lbl,
html[data-look="living"][dir="rtl"] .counter,html[data-look="living"][dir="rtl"] .finding .sev{letter-spacing:0}
html[data-look="living"] #gatelang button[data-ui="ur"]{font-family:var(--urdu-body);font-size:14px}
/* The Latin faces above must not reach Urdu: give every restyled element its Urdu face back. */
html[data-look="living"][dir="rtl"] :is(#gatelang button,#backhome,.kicker,.lbl,.counter,.modal label,.panel h3,.res-empty,.empty,.err,.btn,
  .finding .cat,.finding .flagged,.finding .sev,.pill,.arch-item .meta,.enh-toast){font-family:var(--urdu-body)}
html[data-look="living"][dir="rtl"] :is(.tool-intro h1,.modal h2){font-family:var(--urdu-head)}

/* ------------------------------------------------------------ narrow screens */
@media (max-width:620px){
  html[data-look="living"] #gatelang button{padding:6px 4px}
  html[data-look="living"] .toptabs{width:100%;border-radius:18px}
  html[data-look="living"] .panel,html[data-look="living"] .marked,html[data-look="living"] .chat,html[data-look="living"] .editor{border-radius:18px}
  /* Cancel, Clear and "Working…" share the footer bar: each label stays on one line and the
     row wraps instead (overflow:hidden, for the ripple, would otherwise let a button shrink and clip) */
  html[data-look="living"] .editor-right .btn{white-space:nowrap;padding-left:14px;padding-right:14px;min-width:max-content}
}

/* --------------------------------------------------- Calm and reduced motion
   html.still (living.js): reduced motion, Data Saver or a low-memory phone.
   State changes still happen, just without movement. */
html[data-look="living"].still .aurora i{animation:none !important}
html[data-look="living"].still *,html[data-look="living"].still *::before,html[data-look="living"].still *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.001ms !important}
@media (prefers-reduced-motion:reduce){
  html[data-look="living"] .aurora i{animation:none !important}
}