/* Niyat greeting card maker. Hand-written; linked with ?v= from scripts/build_tool_cards.py */
.cm{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start;max-width:1120px;margin:6px 0 20px;scroll-margin-top:90px}
.cm-stage{position:sticky;top:88px;border-radius:22px;padding:28px;background:radial-gradient(ellipse 80% 70% at 50% 25%,#f7f0e1 0%,#e9dfca 75%);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center;gap:14px}
.cm-canvas-wrap{width:100%;display:flex;justify-content:center}
#cmCanvas{display:block;width:100%;max-width:520px;height:auto;border-radius:6px;box-shadow:0 22px 50px -18px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.25);background:#0d3627}
.cm[data-fmt="story"] #cmCanvas{width:auto;max-width:100%;max-height:calc(100vh - 230px)}
#cmCanvas{max-height:calc(100vh - 230px);width:auto;max-width:100%}
.cm-stage-note{margin:0;font-size:13.5px;color:var(--cream-muted);text-align:center;line-height:1.5}
.cm-panel{display:flex;flex-direction:column;gap:22px;min-width:0}
.cm-group{border:0;margin:0;padding:0;min-width:0}
.cm-group>legend,.cm-label{display:block;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--emerald);margin:0 0 10px;padding:0}
.cm-designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.cm-design{font:inherit;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--bg-card);cursor:pointer;color:var(--cream-dim);transition:border-color .15s,transform .15s}
.cm-design canvas{display:block;width:100%;height:auto;border-radius:6px;background:var(--bg-elevated)}
.cm-design span{font-size:12.5px;font-weight:600;line-height:1.2;text-align:center}
.cm-design:hover{border-color:var(--gold-soft)}
.cm-design[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);color:var(--emerald)}
.cm-themes{display:flex;flex-wrap:wrap;gap:10px}
.cm-swatch{position:relative;width:48px;height:48px;border-radius:50%;border:2px solid var(--bg-card);box-shadow:0 0 0 1px var(--line-strong);cursor:pointer;padding:0}
.cm-swatch span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cm-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--gold)}
.cm-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cm-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cm-field.full{grid-column:1/-1}
.cm-field label{font-size:14px;font-weight:600;color:var(--cream-dim)}
.cm-field input,.cm-field select,.cm-field textarea{font:inherit;font-size:16px;padding:11px 13px;min-height:46px;border-radius:10px;border:1px solid var(--line-strong);background:var(--bg-card);color:var(--cream);min-width:0;width:100%;box-sizing:border-box}
.cm-field textarea{min-height:70px;resize:vertical;line-height:1.45}
.cm-field .ar-in,.cm-field select.ar-sel{font-family:var(--arabic);font-size:22px;direction:rtl;line-height:1.5}
.cm-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:100px;padding:3px;background:var(--bg-card);gap:2px;flex-wrap:wrap}
.cm-seg button{font:inherit;font-size:15px;font-weight:600;border:0;background:transparent;color:var(--cream-dim);padding:9px 16px;min-height:42px;border-radius:100px;cursor:pointer}
.cm-seg button[aria-pressed="true"]{background:var(--emerald);color:#f5f1e8}
.cm-seg .ar{font-family:var(--arabic);font-size:19px;line-height:1}
.cm-row{display:flex;flex-wrap:wrap;gap:22px}
.cm-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 0 4px;background:var(--bg)}
.cm-btn{font:inherit;font-weight:700;font-size:16px;padding:13px 22px;min-height:48px;border-radius:100px;border:0;background:var(--emerald);color:#f5f1e8;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.cm-btn:hover{background:var(--emerald-hover)}
.cm-btn.gold{background:var(--gold);color:#1a1206}
.cm-btn.gold:hover{filter:brightness(1.06)}
.cm-btn.ghost{background:transparent;color:var(--emerald);box-shadow:inset 0 0 0 1px var(--line-strong)}
.cm-btn svg{width:18px;height:18px;flex:none}
.cm-status{min-height:22px;margin:4px 0 0;font-size:14.5px;color:var(--cream-dim)}
.cm-privacy{font-size:13.5px;color:var(--cream-muted);margin:0}
.cm button:focus-visible,.cm input:focus-visible,.cm select:focus-visible,.cm textarea:focus-visible,.cg button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:900px){
  .cm{grid-template-columns:1fr;gap:20px}
  .cm-stage{top:69px;z-index:6;padding:10px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),0 10px 24px -16px rgba(0,0,0,.35)}
  .cm-stage-note{display:none}
  #cmCanvas,.cm[data-fmt="story"] #cmCanvas{max-height:34vh;max-width:100%}
  .cm-actions{position:sticky;bottom:0;z-index:5;margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);box-shadow:0 -8px 20px -12px rgba(0,0,0,.2)}
  .cm-actions{flex-wrap:nowrap;gap:8px}
  .cm-actions .cm-btn{flex:1 1 auto;justify-content:center;padding:12px 10px;font-size:14.5px;gap:6px}
  .cm-btn .lg{display:none}
}
@media(max-width:480px){.cm-fields{grid-template-columns:1fr}.cm-designs{grid-template-columns:repeat(3,1fr)}}

/* greetings to copy */
.cg,.hg-prose .cg{list-style:none;margin:18px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;max-width:1120px}
.cg li,.hg-prose .cg li{margin:0;border:1px solid var(--line);border-radius:16px;background:var(--bg-card);padding:18px 20px 16px;display:flex;flex-direction:column;gap:6px}
.cg .ar{font-family:var(--arabic);font-size:27px;line-height:1.75;direction:rtl;text-align:right;color:var(--emerald);margin:0}
.cg .tl{font-style:italic;color:var(--cream-dim);font-size:15.5px;margin:0}
.cg .mn{font-size:15.5px;color:var(--cream);margin:0;line-height:1.55}
.cg .src{font-size:13.5px;color:var(--gold-text);margin:2px 0 0;line-height:1.5}
.cg .acts{display:flex;gap:8px;margin-top:auto;padding-top:10px}
.cg .acts button{font:inherit;font-size:14px;font-weight:600;min-height:40px;padding:8px 14px;border-radius:100px;border:1px solid var(--line-strong);background:transparent;color:var(--emerald);cursor:pointer}
.cg .acts button:hover{border-color:var(--gold)}

/* hub tiles */
.ch{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:10px 0 24px;max-width:1120px}
.ch a{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--bg-card);overflow:hidden;text-decoration:none;transition:border-color .18s,transform .18s}
.ch a:hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.ch canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#123a2a}
.ch .tx{padding:14px 16px 16px}
.ch b{display:block;font-family:var(--serif);font-size:21px;color:var(--emerald);font-weight:600;line-height:1.2}
.ch .when{display:block;font-size:13.5px;color:var(--gold-text);font-weight:600;margin:4px 0 6px}
.ch span.d{display:block;font-size:14.5px;color:var(--cream-dim);line-height:1.5}
@media (prefers-reduced-motion:reduce){.ch a,.cm-design{transition:none}.ch a:hover{transform:none}}
@media print{.cm-panel,.cm-actions,.cg .acts{display:none}.cm{display:block}.cm-stage{background:none;box-shadow:none}}