/* ui.css: the one shared look for buttons, fields, cards and popups on every page (home, wizard, create, token, docs, faq).
   Loaded LAST on each page so it wins over the older one-off rules. Visual only: no layout logic, no wording.
   The dark chart editor (#editor-root) keeps its own tool look and is left alone here.
   Three button kinds:
     primary   dark crayon fill, yellow label (the home page Connect wallet colours)
     secondary white fill, crayon outline (the default for every .btn in scope)
     quiet     no fill, crayon label, outline shows on hover (Close, Cancel)
   All three share one font, size, height, padding and radius. */
:root{
  --ui-ink:#2b3550;          /* crayon ink, every outline and label */
  --ui-navy:#13224f;         /* headings */
  --ui-yellow:#ffd84a;       /* primary label, active chip */
  --ui-hl:#fff1b8;           /* hover wash */
  --ui-paper:#fffdf5;        /* card surface */
  --ui-panel:#ffffff;        /* panel inside a card */
  --ui-muted:#5a6478;
  --ui-bad:#c8302a;
  --ui-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui-marker:"Permanent Marker","Segoe Print","Comic Sans MS",cursive;
  --ui-h:44px;               /* button and field height (UX sweep 127: one height, 44px, on every page) */
  --ui-r:10px;               /* button and field radius */
  --ui-r-card:20px;          /* card radius */
  --ui-r-panel:14px;         /* panel radius */
  --ui-shadow:3px 4px 0 rgba(30,70,110,.16);
  --ui-shadow-card:5px 7px 0 rgba(30,70,110,.16);
  --ui-ring:0 0 0 3px #ffe98a,0 0 0 5px var(--ui-ink);
}

/* ---------- focus: one visible ring for anything you can tab to ---------- */
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid #eec247;outline-offset:2px}

/* ---------- buttons ---------- */
:is(#config-root,.wz,#coin-popup,#cfg-token,#agent-load-err,.cfg-banner,.load-err,.grid-empty) :is(.btn,button:not([role=tab]):not(#config-root .cfg-parts button):not(#config-root .cfg-sw button):not(.wz-sw button):not(.wz-parts button):not(.wz-drafts button)):not(#wallet-btn),
#cfg-token a,
.hero-prompt,
.ed-shell #continue-btn,
.doodl-wc-back [data-wallet-id],
.doodl-wc-back button{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;min-height:var(--ui-h);height:auto;margin:0;padding:8px 18px;
  font-family:var(--ui-font);font-size:15px;font-weight:700;line-height:1.2;letter-spacing:0;text-align:center;text-decoration:none;white-space:nowrap;
  color:var(--ui-ink);background:#fff;border:2px solid var(--ui-ink);border-radius:var(--ui-r);
  box-shadow:var(--ui-shadow);cursor:pointer;transform:none;
  transition:background-color .12s,transform .12s,box-shadow .12s;
}
:is(#config-root,.wz,#coin-popup,#cfg-token,#agent-load-err,.cfg-banner,.load-err,.grid-empty) :is(.btn,button):not(:disabled):not(#wallet-btn):hover,
#cfg-token a:hover,.hero-prompt:hover,.doodl-wc-back button:hover{background:var(--ui-hl);transform:translateY(-1px);box-shadow:4px 5px 0 rgba(30,70,110,.2)}
:is(#config-root,.wz,#coin-popup,#cfg-token) .btn:not(:disabled):active,#cfg-token a:active,.hero-prompt:active{transform:translateY(1px);box-shadow:1px 1px 0 rgba(30,70,110,.2)}
:is(#config-root,.wz,#coin-popup,#cfg-token) .btn:focus-visible,#cfg-token a:focus-visible,.hero-prompt:focus-visible,.doodl-wc-back button:focus-visible{outline:none;box-shadow:var(--ui-ring)}
:is(#config-root,.wz,#coin-popup,#cfg-token) .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
:is(#config-root,.wz,#coin-popup,#cfg-token) .btn:disabled:hover{background:#fff}

/* primary */
.cfg-go,#cfg-confirm,#cfg-next,#cfg-pay,.wz-go,#wz-next,#wz-draw,#wz-connect,#coin-popup-page,.hero-prompt,.ed-shell #continue-btn{
  background:var(--ui-ink) !important;color:var(--ui-yellow) !important;border-color:var(--ui-ink) !important;
}
:is(.cfg-go,#cfg-confirm,#cfg-next,#cfg-pay,.wz-go,#wz-next,#wz-draw,#wz-connect,#coin-popup-page,.hero-prompt,.ed-shell #continue-btn):not(:disabled):hover{background:#3a4669 !important}
/* UX sweep 127: a disabled main button is a flat grey with dark text, readable, not a faded yellow on navy */
:is(.cfg-go,#cfg-confirm,#cfg-next,#cfg-pay,.wz-go,#wz-next,#wz-draw,#wz-connect,.ed-shell #continue-btn):disabled,
:is(.cfg-go,#cfg-confirm,#cfg-next,#cfg-pay,.wz-go,#wz-next,#wz-draw,#wz-connect,.ed-shell #continue-btn):disabled:hover{background:#d5dae3 !important;color:#4a5468 !important;border-color:#b9c0cc !important;opacity:1 !important;box-shadow:none !important}
/* UX sweep round 4, 19: the Token page button on the wizard's Launch step is the next step, so it is primary; Explorer
   and Chart beside it stay secondary */
.wz a.btn-primary,#wz-ln-page{background:var(--ui-ink) !important;color:var(--ui-yellow) !important;border-color:var(--ui-ink) !important}
.wz a.btn-primary:hover,#wz-ln-page:hover{background:#3a4669 !important}
/* UX sweep round 4, 14: Connect wallet inside a card is a normal button like Draw, Add balance, Back and Next beside it
   (sans 15px bold). The marker look is for the header button only. Full width on a phone, like Draw. */
html .wz #wz-connect{font-family:var(--ui-font) !important;font-size:15px !important;font-weight:700 !important}
@media (max-width:560px){html .wz #wz-connect{align-self:stretch;width:100%}}
/* Pay, while a payment is waiting: still primary, with the yellow ring that says press this (beats the inline style launch.js sets) */
#cfg-pay.cfg-pay-now{background:var(--ui-ink) !important;color:var(--ui-yellow) !important;font-weight:700 !important;box-shadow:0 0 0 3px #ffe98a,0 0 0 5px var(--ui-ink) !important}

/* quiet (UX sweep 40: Stop watching is a real action, so it keeps the secondary outline and is not in this list) */
#coin-popup>div>.btn:last-child,#coin-popup>div>button.btn:last-of-type,.doodl-wc-back button:not([data-wallet-id]),#agent-load-err .close,.cfg-banner button:last-child:not(:first-child){
  background:transparent !important;border-color:transparent !important;box-shadow:none !important;text-decoration:none !important;
}
:is(.doodl-wc-back button:not([data-wallet-id]),#agent-load-err .close):hover{background:var(--ui-hl) !important;border-color:var(--ui-ink) !important;transform:none !important}

.ed-shell #continue-btn:hover{transform:translateY(-1px)}
.ed-shell #continue-btn:focus-visible{outline:none;box-shadow:var(--ui-ring)}

/* ---------- fields ---------- */
:is(#config-root,.wz) :is(input[type=text],input[type=url],input[type=number],input[type=email],input:not([type]),textarea,select){
  box-sizing:border-box;font-family:var(--ui-font);font-size:15px;font-weight:500;color:var(--text,#1d1f22);
  background:#fff;border:1.6px solid var(--ui-ink);border-radius:var(--ui-r);padding:9px 12px;min-height:var(--ui-h);
  transition:box-shadow .12s,border-color .12s;
}
:is(#config-root,.wz) textarea{min-height:84px;line-height:1.4}
:is(#config-root,.wz) :is(input,textarea,select)::placeholder{color:#7a8396;opacity:1}
:is(#config-root,.wz) :is(input[type=text],input[type=url],input[type=number],input:not([type]),textarea,select):focus{outline:none;border-color:var(--ui-ink);box-shadow:0 0 0 3px #ffe98a}
:is(#config-root,.wz) select{cursor:pointer}
/* the small inline pickers (logo effect, agent look) stay compact but share the same border and radius */
:is(.cfg-fx,.wz-look,.wz-inline) select{min-height:34px;padding:4px 10px;font-size:14px;border-radius:8px;width:auto}
/* hex field and colour well: one height, side by side */
#config-root .cfg-pick input[type=text],.wz-pick input[type=text]{width:108px;min-height:38px;height:38px;padding:6px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;border-radius:8px}
#config-root .cfg-pick input[type=text].is-bad,.wz-pick input[type=text].is-bad{border-color:var(--ui-bad)}
#config-root .cfg-pick input[type=color],.wz-pick input[type=color],#config-root .cfg-sw input[type=color],#config-root .cfg-grad input[type=color]{width:38px;height:38px;padding:3px;border:1.6px solid var(--ui-ink);border-radius:8px;background:#fff;cursor:pointer}
:is(#config-root,.wz) input[type=checkbox]{width:18px;height:18px;accent-color:var(--ui-ink);margin:0}
#config-root .cfg-grad,.wz-inline{gap:10px}
/* labels */
.cfg-grid label,.cfg-label,.wz-field{font-size:13px;font-weight:700;color:var(--ui-navy)}
.wz-field{font-size:14px}
.cfg-grid label{gap:6px}
/* colour part chips (Border, Background, Outline, Fill): one chip size, the picked one gets the shared ring */
#config-root .cfg-parts button,.wz-parts button{min-height:32px;padding:4px 12px;border:1.6px solid var(--ui-ink);border-radius:999px;background:#fff;font-family:var(--ui-font);font-size:13px;font-weight:600;color:var(--ui-ink)}
#config-root .cfg-parts button:hover,.wz-parts button:hover{background:var(--ui-hl)}
#config-root .cfg-parts button[aria-pressed="true"],.wz-parts button[aria-pressed="true"]{background:#ffe98a;box-shadow:none;border-width:2px}
#config-root .cfg-sw button,.wz-sw button{width:28px;height:28px;border:1.6px solid var(--ui-ink)}
#config-root .cfg-sw button[aria-pressed="true"],.wz-sw button[aria-pressed="true"]{box-shadow:var(--ui-ring)}

/* ---------- cards and panels ---------- */
.cfg-card,.wz{background:var(--ui-paper);border:2px solid var(--ui-ink);border-radius:var(--ui-r-card);box-shadow:var(--ui-shadow-card)}
.cfg-card{padding:clamp(18px,3vw,28px)}
.cfg-card h1,.wz-head h1{font-size:36px;font-weight:800;line-height:1.1;color:var(--ui-navy);letter-spacing:-.01em}
.cfg-card h1{margin:0 0 16px}
.wz-agent,.wz-art,.wz-credit,.wz-logo,#config-root .cfg-preview,.cfg-logo-slot,#config-root .cfg-agent-bubble{border:1.6px solid var(--ui-ink);border-radius:var(--ui-r-panel);background:var(--ui-panel)}
#config-root .cfg-agent-bubble{border-width:2px}
.wz-progress li{border-color:var(--ui-ink)}
/* action rows: Back on the left, everything else grouped on the right, one gap */
.cfg-actions,.wz-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px}
#config-root .cfg-actions>.btn:first-child,.wz .wz-nav>.btn:first-child{margin-right:auto}
.cfg-actions .btn,.wz .btn{box-shadow:var(--ui-shadow)}
.wz-step .wz-go,#wz-draw{align-self:flex-start}
.wz-row,.wz-credit-row,.wz-image{gap:10px}
#cfg-plan-state,#cfg-plan-state2{gap:10px}

/* ---------- launch status box (create page, launch.js) ---------- */
.cfg-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:16px;padding:14px 16px;background:var(--ui-panel);border:1.6px solid var(--ui-ink);border-radius:var(--ui-r-panel);font-size:14px;line-height:1.4;color:var(--ui-navy)}
.cfg-status.is-error{border-color:var(--ui-bad)}
.cfg-spinner{width:16px;height:16px;border-color:#c9d2de;border-top-color:var(--ui-ink)}
#cfg-token{display:flex !important;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px !important;padding:14px !important;background:var(--ui-paper) !important;border:2px solid var(--ui-ink) !important;border-radius:12px !important;font-weight:600;color:var(--ui-navy)}
#cfg-token[hidden]{display:none !important}
#cfg-token-head{flex:1 1 100%;font-size:14px;line-height:1.4}
#cfg-token-addr{flex:1 1 100%;margin:0 0 4px !important;padding:8px 10px;background:#fff;border:1.4px dashed var(--ui-ink);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;font-weight:500}
#cfg-token>.btn,#cfg-token>a{margin:0 !important;flex:0 0 auto}
#config-root #cfg-stop-watching{margin:0 0 0 auto !important}

/* ---------- post-launch popup (launch.js coinPopup) ---------- */
#coin-popup>div{background:var(--ui-paper) !important;border:2.4px solid var(--ui-ink) !important;border-radius:var(--ui-r-card) !important;box-shadow:6px 8px 0 rgba(30,70,110,.25) !important;padding:24px !important;box-sizing:border-box}
#coin-popup-head{text-align:center}
#coin-popup>div>p{text-align:center;margin:0 0 8px !important;font-size:13px !important;font-weight:700;color:var(--ui-muted) !important}
/* UX sweep 48: the body sentence is the message, so it is 15px ink, not the small grey label style */
#coin-popup>div>p#coin-popup-body{font-size:15px !important;font-weight:500;color:var(--ui-navy) !important;margin:0 0 14px !important}
#coin-popup-addr{border:1.4px dashed var(--ui-ink) !important;font-family:ui-monospace,Menlo,Consolas,monospace;text-align:center}
#coin-popup>div>div:has(>.btn){display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px !important;margin-top:18px !important}
#coin-popup>div>div>.btn{width:100%;padding-left:10px;padding-right:10px}
#coin-popup>div>.btn:last-child{display:flex;width:100%;margin-top:10px !important}

/* ---------- wallet chooser (wallet-connect.js) ---------- */
.doodl-wc-back>[role=dialog]{background:var(--ui-paper) !important;border:2.4px solid var(--ui-ink) !important;border-radius:18px !important;box-shadow:6px 8px 0 rgba(30,70,110,.25) !important;padding:20px !important;gap:10px !important;font-family:var(--ui-font) !important}
.doodl-wc-back>[role=dialog]>strong{font-family:var(--ui-marker);font-weight:400;font-size:22px;color:var(--ui-navy);margin-bottom:4px}
.doodl-wc-back [data-wallet-id]{justify-content:flex-start !important;width:100%;min-height:48px;padding:8px 14px !important;border:2px solid var(--ui-ink) !important;border-radius:var(--ui-r) !important;font-weight:700 !important}
.doodl-wc-back [data-wallet-id]:hover{background:var(--ui-hl) !important}
.doodl-wc-back button:not([data-wallet-id]){width:100%;padding:8px !important}

/* ---------- small banners and toasts ---------- */
#agent-load-err,.cfg-banner{border:2px solid var(--ui-ink) !important;border-radius:12px !important;background:var(--ui-paper) !important;box-shadow:var(--ui-shadow) !important;padding:10px 14px !important;font-family:var(--ui-font) !important;align-items:center !important}
#agent-load-err,.cfg-banner{border-color:var(--ui-bad) !important}
#agent-load-err button,.cfg-banner button{min-height:36px !important;padding:6px 14px !important;font-size:14px !important}
.load-err,.grid-empty{border:2px solid var(--ui-ink);border-radius:var(--ui-r-panel);background:var(--ui-paper)}
.load-err{border-color:var(--ui-bad)}

/* ---------- home ---------- */
.hero-prompt{margin-top:18px;min-height:44px;padding:8px 22px;font-size:15px}
.hero-prompt .ink{display:none}
/* UX sweep round 4, 92: "All questions" is a real secondary button, and Clear search under an empty Explore matches it */
.hw-more,.search-empty .search-clear{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ui-h);padding:8px 18px;
  font-family:var(--ui-font);font-size:15px;font-weight:700;line-height:1.2;color:var(--ui-ink);text-decoration:none;white-space:nowrap;
  background:#fff;border:2px solid var(--ui-ink);border-radius:var(--ui-r);box-shadow:var(--ui-shadow);cursor:pointer;transition:background-color .12s,transform .12s
}
.hw-more:hover,.search-empty .search-clear:hover{background:var(--ui-hl);transform:translateY(-1px)}
.hw-more:focus-visible,.search-empty .search-clear:focus-visible{outline:none;box-shadow:var(--ui-ring)}

/* ---------- create page side bar (desktop): Continue is the primary action, the wizard link sits above it as a quiet text link ---------- */
.ed-shell #continue-btn{width:100%}
/* UX sweep round 4, 72: on a computer the side bar's Connect wallet is the same button as Continue under it: same font,
   size, outline, radius and full width, so the two sidebar actions read as one set */
@media (min-width:821px){
  .ed-shell .side .ed-wallet{align-items:stretch;width:100%}
  .ed-shell .side #wallet-btn{width:100%;min-height:var(--ui-h);padding:8px 18px;font-family:var(--ui-font);font-size:15px;font-weight:700;line-height:1.2;
    background:var(--ui-ink);color:var(--ui-yellow);border:2px solid var(--ui-ink);border-radius:var(--ui-r);box-shadow:var(--ui-shadow);transform:none}
  .ed-shell .side #wallet-btn:hover{background:#3a4669;transform:translateY(-1px)}
  .ed-shell .side #wallet-btn .ink{display:none}
  .ed-shell .side #wallet-btn.connected{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}
}
.ed-prompt-link{font-size:13px;font-weight:600;color:var(--ui-ink);text-decoration:underline;text-underline-offset:3px;text-align:center}

/* ---------- docs and faq ---------- */
.prose,.steps li,.doc,details{border-color:var(--ui-ink)}
.prose{border-width:2px;border-radius:var(--ui-r-card);box-shadow:var(--ui-shadow-card);background:var(--ui-paper)}
details{border-radius:var(--ui-r-panel)}
summary{padding:2px 0}
/* UX sweep 81: one marker per question, the +/- on the right (the triangle on the left and the browser's own marker go) */
.fq summary::before{display:none}
.fq summary::marker{content:""}
/* UX sweep 97: the answer starts where its question starts (the left triangle is gone, so no extra indent) */
.fq p{padding-left:0}
/* UX sweep 58: hints are never under 12px */
.cfg-hint,.wz-hint{font-size:12px}
/* UX sweep 94: the footer links sit in an even grid (3 by 2 on a phone) and the coming soon note is plain text, not a pill */
.ft-nav{display:grid;grid-template-columns:repeat(6,auto);gap:8px 24px}
@media (max-width:640px){.ft-nav{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}}
.ft-pill.ft-note{padding:0;border:0;background:none;border-radius:0}

/* ---------- phone ---------- */
@media (max-width:820px){
  :is(#config-root,.wz,.agent-panel) :is(input[type=text],input[type=url],input[type=number],input[type=email],input:not([type]),textarea,select){font-size:16px}
  /* UX sweep 58: colour part chips get a phone tap size on both forms */
  #config-root .cfg-parts button,.wz-parts button{min-height:40px}
  #config-root .cfg-pick input[type=text],.wz-pick input[type=text]{font-size:16px}
  .ed-shell #continue-btn{width:auto;min-height:38px;padding:6px 14px}
}
@media (max-width:560px){
  /* action rows: buttons share the row evenly; the main action takes its own full row at the bottom */
  .cfg-actions .btn,.wz-nav .btn{flex:1 1 auto;margin-right:0 !important}
  .cfg-actions .cfg-go,.wz-nav .wz-go{flex-basis:100%;order:9}
  #cfg-token>.btn,#cfg-token>a{flex:1 1 100%;white-space:normal}
  #cfg-stop-watching{flex:1 1 100%;margin:0 !important}
  /* UX sweep 15: Draw is the step's main action, so on a phone it is full width like Back and Next */
  .wz #wz-draw{align-self:stretch;width:100%}
  #coin-popup>div{padding:20px !important}
  :is(#config-root,.wz,#coin-popup,#cfg-token) .btn{white-space:normal}
}
.wz-inline,.cfg-fx{flex-wrap:wrap}
:is(.cfg-fx,.wz-inline) select{max-width:100%}
@media (max-width:480px){.cfg-card h1,.wz-head h1{font-size:30px}}