/* Tayma "Shams" master styles (DRAFT 2026-11-03). Pairs with shams.js.
   One look: Letter (Shams picked it 2026-11-03; the other three are in shams.before-letter.css). No attribute needed.
   Rules: acid only as a fill with black text, at most one per panel; signatures are Caveat set straight, in ink;
   headings come from the page's Bricolage block (bric.py), so .sh-h only sets size. */
.sh{--sh-ink:#0d0d0b;--sh-paper:#f5f1e8;--sh-paper2:#fffdf6;--sh-acid:#d9ff3f;--sh-sun:#ffc93c;--sh-quiet:#6b665a;--sh-muted:#a8a49b;
  --sh-spring:cubic-bezier(.34,1.56,.64,1);font-family:Manrope,system-ui,sans-serif;color:var(--sh-ink);line-height:1.55}
.sh *{box-sizing:border-box}
.sh p{margin:0}
.sh img{display:block;max-width:100%}
.sh-ic{width:18px;height:18px;flex:none}
.sh-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:#e9e3d4}
.sh-av-xs{width:24px;height:24px}

/* the one action */
.sh-wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;
  font:700 15px/1.1 Manrope,system-ui,sans-serif;text-decoration:none;background:var(--sh-ink);color:var(--sh-paper);
  transition:transform .35s var(--sh-spring)}
.sh-wa:hover{transform:translateY(-2px)}
.sh-wa:focus-visible,.sh-chip:focus-visible{outline:3px solid #ff5a1f;outline-offset:3px}

/* card */
.sh-card{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center;border-radius:26px;overflow:hidden}
.sh-ph{margin:0}
.sh-ph img{width:100%;height:100%;object-fit:cover}
.sh-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.sh-eb{font:700 11px/1.3 Manrope,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--sh-quiet)}
.sh-h{margin:0;font-size:clamp(28px,4vw,40px);line-height:1;font-weight:800;color:inherit}
.sh-txt{font-size:16px;max-width:52ch}
.sh-sig{font:700 40px/1 Caveat,cursive;margin-top:4px!important}
.sh-role{font-size:13px;color:var(--sh-quiet);margin-top:-6px!important}
.sh-body .sh-wa{margin-top:8px}

/* chip */
.sh-chip{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:7px 8px 7px 7px;border-radius:999px;text-decoration:none;
  color:inherit;transition:transform .35s var(--sh-spring)}
.sh-chip:hover{transform:translateY(-2px)}
.sh-chip-t{display:flex;flex-direction:column;line-height:1.15;padding-right:2px}
.sh-chip-t small{font-size:12px}
.sh-chip-t b{font-size:15px;font-weight:800}
.sh-chip-wa{display:grid;place-items:center;width:40px;height:40px;border-radius:50%}
.sh-fixed{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60}
@media(max-width:767px){.sh-fixed{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* signed line */
.sh-sign{display:flex;align-items:center;gap:14px}
.sh-sign q{display:block;font:700 clamp(22px,2.6vw,28px)/1.15 Caveat,cursive;quotes:none}
.sh-sign i{display:block;font-style:normal;font-size:13px;color:var(--sh-quiet);margin-top:4px}
.sh-sign .sh-av{width:52px;height:52px}

/* picked tag */
.sh-pick{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.sh-pick>.sh-pick,.sh-pick{font:800 12px/1 Manrope,system-ui,sans-serif;letter-spacing:.02em}
:is(span,button).sh-pick{min-height:32px;padding:4px 12px 4px 4px;border-radius:999px}
.sh-pick .sh-ic{width:14px;height:14px;margin-left:-2px}
.sh-why{display:block;flex-basis:100%;font:700 20px/1.15 Caveat,cursive;color:var(--sh-ink)}

/* footer strip (sits on the dark footer) */
.sh-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:18px 0;border-top:1px solid #2a2a28;border-bottom:1px solid #2a2a28;color:var(--sh-paper)}
.sh-foot p{flex:1 1 260px;font-size:15px;color:var(--sh-paper)}
.sh-foot .sh-av{width:52px;height:52px}
.sh-foot .sh-wa{background:var(--sh-acid);color:var(--sh-ink)}

@media(min-width:700px){
  .sh-card{grid-template-columns:220px minmax(0,1fr);gap:36px}
}

/* ===== the look: Letter (Shams's pick, 2026-11-03), a handwritten note on paper ===== */
.sh-card{background:var(--sh-paper2);border:1px solid #e2d9c6;padding:26px;box-shadow:0 18px 40px -26px rgba(60,40,0,.35)}
.sh-ph{width:132px;aspect-ratio:1}
.sh-ph img{border-radius:50%;border:2px solid var(--sh-ink);box-shadow:0 0 0 6px var(--sh-paper2),0 0 0 7px #e2d9c6}
.sh-card .sh-wa{background:var(--sh-acid);color:var(--sh-ink)}
.sh-chip{background:var(--sh-paper2);border:1.5px solid var(--sh-ink);box-shadow:0 10px 26px -14px rgba(60,40,0,.45)}
.sh-chip small{color:var(--sh-quiet)}
.sh-chip-wa{background:var(--sh-acid);color:var(--sh-ink)}
:is(span,button).sh-pick{background:var(--sh-paper2);border:1.5px solid var(--sh-ink);color:var(--sh-ink)}
@media(min-width:700px){
  .sh-card{grid-template-columns:150px minmax(0,1fr);padding:40px 44px;align-items:start}
  .sh-ph{width:150px}
}

/* page bands for pages that have no slot of their own: <section class="sh-band"><div class="sh-wrap">…piece…</div></section> */
.sh-band{background:#f5f1e8;padding:clamp(48px,7vw,88px) 0}
.sh-band-slim{padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid #e2d9c6}
.sh-wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.sh-band-slim .sh-wrap{display:flex;justify-content:center}
.sh-m-chip{margin-top:18px}
.sh-card .sh-txt+.sh-txt{margin-top:-2px}
.sh-todo{background:#ffc93c;color:var(--sh-ink);padding:0 .2em;border-radius:3px}
.sh-band .sh-card{max-width:900px;margin-inline:auto}
footer .sh.sh-m-foot .sh-foot p{font:500 15px/1.5 Manrope,system-ui,sans-serif;color:var(--sh-paper);margin:0;max-width:62ch}
footer .sh.sh-m-foot .sh-wa{font:700 15px/1.1 Manrope,system-ui,sans-serif;min-height:48px;padding:0 22px}
.sh-m-foot{margin-bottom:22px}

@media(prefers-reduced-motion:reduce){.sh *,.sh{transition:none!important;animation:none!important}}
@media(max-width:699px){.sh-body .sh-wa{align-self:stretch}}

/* ===== interactive pieces (DRAFT 2026-11-03, tayma-creative-ux) ===== */
html.sq-lock,html.sq-lock body{overflow:hidden}

/* Ask Shams: intro card */
.sq-intro{background:var(--sh-paper2);border:1px solid #e2d9c6;border-radius:26px;padding:24px;display:grid;gap:18px}
.sq-who{display:flex;align-items:center;gap:16px}
.sq-who .sh-av{width:64px;height:64px}
.sq-who .sh-h{font-size:clamp(24px,3.2vw,34px)}
.sq-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:sq}
.sq-list li{counter-increment:sq;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;padding:12px 14px;border-radius:16px;background:var(--sh-paper)}
.sq-list li::before{content:counter(sq);grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--sh-ink);font:800 13px/1 Archivo,Arial,sans-serif}
.sq-list span{font-size:14px;color:var(--sh-quiet)}
.sq-list b{font-weight:700;font-size:15px;color:var(--sh-quiet)}
.sq-list b.on{color:var(--sh-ink)}
.sq-intro .sq-go{justify-self:start;background:var(--sh-acid);color:var(--sh-ink);border:0;cursor:pointer;min-width:180px}
.sh-m-ask{container-type:inline-size}
@container (min-width:720px){.sq-intro{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;padding:36px 40px}.sq-intro .sq-go{grid-column:2}}
button.sh-chip{border:0;font:inherit;cursor:pointer;text-align:left}

/* Ask Shams: the sheet */
.sq-dlg{padding:0;border:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:var(--sh-ink)}
.sq-dlg::backdrop,.sp-dlg::backdrop{background:rgba(13,13,11,.62)}
.sq-box{display:flex;flex-direction:column;height:100%;background:var(--sh-paper);overflow:clip}
.sq-top{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-bottom:1px solid #e2d9c6}
.sq-top>b{font:800 16px/1 Archivo,Arial,sans-serif;white-space:nowrap}
.sq-prog{display:flex;gap:6px;flex:1;margin:0 6px}
.sq-prog i{flex:1;height:6px;border-radius:6px;background:#e2d9c6;transition:background .4s}
.sq-prog i.cur{background:#bfb59e}
.sq-prog i.on{background:var(--sh-acid);box-shadow:inset 0 0 0 1px rgba(13,13,11,.25)}
.sq-x,.sp-x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--sh-ink);color:var(--sh-paper);cursor:pointer;flex:none}
.sq-x svg,.sp-x svg{width:18px;height:18px}
.sq-main{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:22px;padding:22px 16px}
.sq-n{font:900 56px/1 Archivo,Arial,sans-serif;color:transparent;-webkit-text-stroke:1.5px var(--sh-ink);letter-spacing:-.02em;margin:0 0 6px!important}
.sq-q{margin:0;font-size:clamp(28px,4.4vw,46px);line-height:1.02;font-weight:800;outline:0}
.sq-why{margin:10px 0 18px!important;color:var(--sh-quiet);font-size:15px;max-width:44ch}
.sq-tiles{display:grid;gap:10px}
.sq-tile,.sq-redo{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:10px 16px 10px 12px;border-radius:18px;border:1.5px solid #d8cfbc;background:var(--sh-paper2);color:var(--sh-ink);font:700 16px/1.25 Manrope,system-ui,sans-serif;text-align:left;cursor:pointer;transition:transform .35s var(--sh-spring),background .2s,border-color .2s}
.sq-tile:hover{transform:translateY(-2px);border-color:var(--sh-ink)}
.sq-k{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid currentColor;font:800 14px/1 Archivo,Arial,sans-serif;flex:none}
.sq-tile[aria-pressed=true]{background:var(--sh-ink);color:var(--sh-paper);border-color:var(--sh-ink);transform:translateY(-2px)}
.sq-redo{justify-content:center;min-height:48px;width:auto;padding:0 22px;border-radius:999px}
.sq-pre{background:#e9e3d4;border-radius:22px;padding:18px;align-self:start}
.sq-pl{font:700 11px/1.3 Manrope,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--sh-quiet);margin-bottom:12px!important}
.sq-bub{position:relative;background:var(--sh-paper2);border-radius:18px 18px 4px 18px;padding:14px 16px;font-size:16px;line-height:1.5;margin-left:12%;box-shadow:0 8px 18px -12px rgba(60,40,0,.45)}
.sq-line{display:inline;border-radius:4px}
.sq-new{animation:sq-hl 1.4s var(--sh-ease,ease) both}
@keyframes sq-hl{from{background:rgba(255,201,60,.75)}to{background:rgba(255,201,60,0)}}
.sq-meta{font-size:12px;color:var(--sh-quiet);margin-top:10px!important;text-align:right}
.sq-nav{display:flex;align-items:center;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #e2d9c6;background:var(--sh-paper)}
.sq-cnt{flex:1;text-align:center;font:500 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;color:var(--sh-quiet)}
.sq-back,.sq-next{min-height:48px;padding:0 22px;border-radius:999px;font:700 15px/1 Manrope,system-ui,sans-serif;cursor:pointer}
.sq-back{background:transparent;border:1.5px solid #d8cfbc;color:var(--sh-ink)}
.sq-next{background:var(--sh-ink);border:0;color:var(--sh-paper)}
.sq-back:disabled{visibility:hidden}
.sq-next:disabled{opacity:.45;cursor:not-allowed}
.sq-send[hidden],.sq-next[hidden]{display:none}
.sq-done .sq-n{display:none}
.sq-done .sq-bub{font-size:18px}
@media(min-width:900px){
  .sq-dlg{width:min(1060px,calc(100% - 64px));height:auto;max-height:calc(100% - 64px);margin:auto}
  .sq-box{border-radius:26px;height:auto;max-height:calc(100dvh - 64px)}
  .sq-main{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;padding:40px}
  .sq-tiles{grid-template-columns:1fr 1fr}
  .sq-pre{position:sticky;top:0;padding:24px}
}

/* Chat card */
.sc-chat{background:#ece6d8;border-radius:26px;overflow:hidden;max-width:620px;border:1px solid #e2d9c6}
.sc-h{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--sh-paper2);border-bottom:1px solid #e2d9c6}
.sc-h .sh-av{width:48px;height:48px}
.sc-h b{display:block;font:800 17px/1.1 Archivo,Arial,sans-serif}
.sc-h small{font-size:13px;color:var(--sh-quiet)}
.sc-log{display:flex;flex-direction:column;gap:8px;padding:18px}
.sc-b{max-width:86%;padding:10px 14px;font-size:15px;line-height:1.45;margin:0}
.sc-in{align-self:flex-start;background:var(--sh-paper2);border-radius:4px 18px 18px 18px;box-shadow:0 4px 10px -8px rgba(60,40,0,.5)}
.sc-log .sc-b{color:var(--sh-ink)}
.sc-log .sc-out{color:var(--sh-paper)}
.sc-out{align-self:flex-end;background:var(--sh-ink);color:var(--sh-paper);border-radius:18px 4px 18px 18px}
.sc-last{display:grid;gap:10px}
.sc-last .sh-wa{background:var(--sh-acid);color:var(--sh-ink);justify-self:start}
.sc-armed:not(.sc-on) .sc-log .sc-in{opacity:0}
.sc-on .sc-log .sc-in{animation:sc-pop .5s var(--sh-spring) both;animation-delay:calc(var(--i,0) * .5s)}
@keyframes sc-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.sc-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 18px}
.sc-quick button{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--sh-ink);background:var(--sh-paper2);color:var(--sh-ink);font:700 14px/1 Manrope,system-ui,sans-serif;cursor:pointer;transition:transform .35s var(--sh-spring)}
.sc-quick button:hover{transform:translateY(-2px)}
.sc-quick button[aria-pressed=true]{background:var(--sh-ink);color:var(--sh-paper)}

/* Picked by Shams: tappable tag + pop-up */
.sp-btn{border:0;font:inherit;cursor:pointer;min-height:44px;color:inherit;flex-wrap:nowrap!important;white-space:nowrap}
.sh-pick .sp-more{margin-left:4px;padding:3px 8px;border-radius:999px;background:#ff5a1f;color:var(--sh-ink);font-weight:800}
.sp-dlg{padding:0;border:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:var(--sh-ink)}
.sp-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;height:100%;overflow:auto;background:var(--sh-paper)}
.sp-x{position:absolute;right:12px;top:12px;z-index:2}
.sp-card .sp-mirror{border:0;border-radius:0;margin:0}
.sp-card .img{aspect-ratio:4/3}
.sp-side{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:22px 16px 28px}
.sp-note{background:var(--sh-paper2);border:1px solid #e2d9c6;border-radius:20px;padding:18px 20px;box-shadow:0 14px 30px -22px rgba(60,40,0,.5);width:100%}
.sp-why{font:700 26px/1.15 Caveat,cursive}
.sp-sig{font:700 34px/1 Caveat,cursive;text-align:right;margin-top:10px!important}
@media(min-width:900px){
  .sp-dlg{width:min(940px,calc(100% - 64px));height:auto;max-height:calc(100% - 64px);margin:auto}
  .sp-box{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-radius:26px;overflow:clip;height:auto}
  .sp-card{position:sticky;top:0;align-self:start}
  .sp-side{padding:36px 32px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.sq-dlg *,.sp-dlg *,.sq-intro *{transition:none!important;animation:none!important}.sc-chat .sc-in{opacity:1!important}}
@media(max-width:899px) and (max-height:700px){.sq-box:not(.sq-done) .sq-pre{display:none}.sq-n{font-size:44px}}
[data-shams-home]{container-type:inline-size}
@container (max-width:300px){.sp-btn .sh-av,.sp-btn>.sh-ic{display:none}.sp-btn{padding-left:12px!important}}
/* v3 (2026-11-04, after the agent-ready UX notes): no one-word last lines; footer button sits on the right edge and is secondary,
   so the footer's own "WhatsApp Tayma" stays the main action. */
.sh-h{text-wrap:balance}
.sh-txt,.sh-foot p{text-wrap:pretty}
.sh-foot .sh-wa{margin-left:auto}
footer .sh.sh-m-foot .sh-wa,.sh-foot .sh-wa{background:transparent;color:var(--sh-paper);box-shadow:inset 0 0 0 2px rgba(245,241,232,.55)}
footer .sh.sh-m-foot .sh-wa:hover,.sh-foot .sh-wa:hover{box-shadow:inset 0 0 0 2px var(--sh-paper)}
@media(max-width:699px){.sh-foot .sh-wa{margin-left:0}}