/* ---------------------------------------------------------------------------
   app.css — styles the TOOL CHROME ONLY.
   Nothing in this file may ever style the generated signature. Email clients
   strip <style> blocks and external stylesheets; every signature style is an
   inline style= attribute written by app.js. If you find yourself adding a
   signature rule here, that is a bug. See spec kit §4.
   --------------------------------------------------------------------------- */

:root{
  --navy:#0F2C52;
  --navy-deep:#0A1E3A;
  --gold:#C9A84C;
  --gold-dim:#7A6329;
  --paper:#EDEAE3;
  --ink:#141519;
  --muted:#5F6570;
  --hair:#D8D3C8;
}

*{box-sizing:border-box;}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  font-size:14px;line-height:1.5;
}

.wrap{max-width:1240px;margin:0 auto;padding:32px 24px 72px;}

header.top{border-bottom:2px solid var(--navy);padding-bottom:16px;margin-bottom:28px;}
header.top h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.3px;color:var(--navy);}
header.top p{margin:6px 0 0;color:var(--muted);max-width:66ch;}

.grid{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start;}
/* Without this, the 760px preview forces the column wider than the screen and the
   whole page scrolls sideways instead of the preview scrolling inside its own box. */
.grid > *{min-width:0;}
@media (max-width:980px){.grid{grid-template-columns:1fr;}}

.panel{background:#fff;border:1px solid var(--hair);border-radius:4px;padding:20px;}
.panel h2{margin:0 0 14px;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--gold-dim);font-weight:700;}

label{display:block;font-size:12px;font-weight:600;color:#3A3F49;margin:12px 0 4px;}
label .opt{font-weight:400;color:var(--muted);}
label .req{font-weight:400;color:var(--gold-dim);}

input[type=text],select{
  width:100%;padding:8px 10px;border:1px solid #B9B3A6;border-radius:3px;
  font:inherit;font-size:13px;background:#FBFAF8;color:var(--ink);
}
input[type=text]:focus,select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);}

.hint{font-size:11.5px;color:var(--muted);margin:4px 0 0;}
.row2{display:grid;grid-template-columns:1fr 96px;gap:10px;}
.rowc{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.row2 label,.rowc label{margin-top:12px;}

.notice{
  margin:0 0 14px;font-size:11.5px;color:#6B4E12;background:#FBF7EC;
  border-left:3px solid var(--gold);padding:7px 10px;border-radius:0 2px 2px 0;
}

details.cfg{margin-top:20px;border-top:1px dashed var(--hair);padding-top:14px;}
details.cfg summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--navy);}
details.cfg summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.stage{background:#fff;border:1px solid var(--hair);border-radius:4px;overflow:hidden;}
.stage-bar{
  background:#F6F4EF;border-bottom:1px solid #E2DDD3;padding:9px 16px;font-size:11px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700;
}
.stage-body{padding:26px 20px;overflow-x:auto;}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
button.primary{background:var(--navy);color:#fff;border:0;border-radius:3px;padding:11px 20px;font:inherit;font-weight:600;cursor:pointer;}
button.primary:hover{background:#153A6B;}
button.ghost{background:transparent;color:var(--navy);border:1px solid var(--navy);border-radius:3px;padding:11px 20px;font:inherit;font-weight:600;cursor:pointer;}
button.ghost:hover{background:var(--navy);color:#fff;}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.status{font-size:12.5px;color:var(--gold-dim);font-weight:600;min-height:18px;margin-top:10px;}
.status.err{color:#96372F;}

pre.code{
  margin:14px 0 0;background:var(--navy-deep);color:#C7D6EA;padding:16px;border-radius:4px;
  font-family:"Cascadia Mono",Menlo,Consolas,monospace;font-size:11.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-all;max-height:340px;overflow:auto;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}