/* Ask page - simplified Apple-like look (owner, 11 Oct 2026: "ok apply the design to ask page").
   Mockup: claude.ai artifact "Al-Risala — simple design". Only colours, type, radii, spacing and surfaces change;
   every element, id and behaviour of ask.html stays. Loaded after the page's own styles; selectors are made a little
   more specific (html:root, body ...) so they win over the page's rules of the same name. */
html:root{--bg:#F5F5F7;--ground:#F5F5F7;--surface:#FFFFFF;--ink:#1D1D1F;--muted:#6E6E73;--faint:#707075;--line:#E5E5EA;--accent:#0A6B4F;--accent-ink:#FFFFFF;
 --wash:rgba(10,107,79,.07);--gold:#0A6B4F;--mark:#FFE7A0;--mark-ink:#1D1D1F;--r:14px;
 --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;--serif:var(--ui)}
@media (prefers-color-scheme:dark){html:root:not([data-theme=light]):not([data-theme=sepia]){--bg:#000000;--ground:#000000;--surface:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--faint:#8E8E93;
 --line:#38383A;--accent:#4CC38A;--accent-ink:#04140D;--wash:rgba(76,195,138,.12);--gold:#4CC38A;--mark:rgba(255,214,10,.24);--mark-ink:#F5F5F7}}
html:root[data-theme=dark]{--bg:#000000;--ground:#000000;--surface:#1C1C1E;--ink:#F5F5F7;--muted:#A1A1A6;--faint:#8E8E93;--line:#38383A;--accent:#4CC38A;
 --accent-ink:#04140D;--wash:rgba(76,195,138,.12);--gold:#4CC38A;--mark:rgba(255,214,10,.24);--mark-ink:#F5F5F7}
html body{background:var(--ground);font:17px/1.5 var(--ui);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}

/* top bar: no rule, frosted */
body .bar{border-bottom:0}

/* home: one big title, one question box */
body .home{gap:22px}
body .brand h1{font:700 2.15rem/1.12 var(--ui);letter-spacing:-.03em;margin:10px 0 4px}
body .brand p{font-size:1.02rem;line-height:1.45;color:var(--muted);max-width:30ch}
body .ask{border-radius:18px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.05);padding:5px 5px 5px 16px}
body .ask:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--wash)}
body .go{width:46px;height:46px}

/* pills: depth and sources (the one chosen is filled) */
body .modes{gap:8px}
body .mode{min-height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .95rem var(--ui);letter-spacing:-.01em}
body .mode.on{background:var(--ink);border-color:var(--ink);color:var(--ground);font-weight:600}
body .modeinfo{color:var(--muted);font-size:.86rem;margin-top:-10px}
body .srcwrap{margin-top:8px}
body .srclab,body .label,body .sugg .lab,body .match .lab,body .asked .lab{font:600 .76rem var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
body .srcs .mode{font-size:.92rem}

/* lists as rounded cards with hairlines (questions, matches) */
body .sugg{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px 16px}
body .sugg .lab{margin:10px 0 2px}
body .sugg>button{border-radius:0;border-bottom:1px solid var(--line);padding:9px 2px;color:var(--ink)}
body .sugg>button:last-child{border-bottom:0}
body .match{border-radius:16px;padding:6px 16px 8px}
body .aq .t{font:1rem/1.45 var(--ui)}
body .foot{color:var(--muted)}

/* answer */
body .h2{font:700 1.65rem/1.2 var(--ui);letter-spacing:-.025em}
body .prose.en{font:1.12rem/1.65 var(--ui);letter-spacing:-.005em}
html body .cn{color:var(--accent-ink);background:var(--accent);font-size:12px!important;line-height:1!important;padding:3px 7px!important;min-width:22px}   /* citation numbers: readable pill (were green on green, 11 Oct 2026) */
body .trust{color:var(--accent)}
body details.srcs summary{font-weight:600}
body .slist a.rd{border-radius:999px;background:var(--surface)}
body .meta2{color:var(--muted);font-size:.82rem}
body .bb{border-radius:18px}
body .ub{border-radius:20px 20px 6px 20px}

/* the sheet that opens a citation */
body .sheet{border-radius:26px 26px 0 0;box-shadow:0 -10px 40px -18px rgba(0,0,0,.3)}
body .primary{background:var(--accent);color:var(--accent-ink);border-radius:14px;min-height:52px;font-size:1.02rem}
body .secondary{border-radius:14px;color:var(--ink);background:var(--surface)}
body .frame{border-radius:14px}
body .pill{font-weight:600}

/* follow-up and listening */
body .follow{background:var(--surface);border-radius:22px}
body .fbox{border-radius:26px;background:var(--ground)}
body .fchips button{border-radius:999px}
body .vmic{box-shadow:0 10px 28px rgba(0,0,0,.16)}
body .lbar{background:var(--surface);border-radius:22px}
body .lbtn,body .vmic:not(.rec){background:var(--accent);color:var(--accent-ink)}

/* small bits */
body .chip{border-radius:999px}
body .toast{border-radius:14px}
body .inst,body .lmini,body .lstop{border-radius:999px}

/* topic chips under the box: white pills with a hairline, readable text */
body .bch{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
body .bch:hover{border-color:var(--ink)}
body .bch small{color:var(--muted)}

/* 15 Oct 2026: the site's new look - warm paper, deep green, dark top band */
html:root:not([data-theme=dark]){--bg:#f6f2ea;--ground:#f6f2ea;--surface:#fffdf8;--ink:#1f1b16;--muted:#776e61;--line:#e4dccd;--accent:#1f6b5a;--accent-ink:#fff}
html:root:not([data-theme=dark]) body{background:#f6f2ea}