/* Shared styling for the seller-reports web app. Same design system as
   tools/seller-reports/pipeline/templates/report_template.html (colors,
   fonts, logo) -- the webapp should read as a natural extension of the
   PDF it generates, not a separate product. Fonts/logo are served from
   /brand (platform/brand, copies of the report-template web fonts and logo).
   Served by nginx from /var/www/agent-resources/static (deploy.sh copies platform/static there). */

@font-face{font-family:'PP Museum';src:url('/brand/fonts/PPMuseum-Light.woff2')format('woff2');font-weight:300;font-style:normal}
@font-face{font-family:'PP Museum';src:url('/brand/fonts/PPMuseum-Regular.woff')format('woff');font-weight:400;font-style:normal}
@font-face{font-family:'PP Museum';src:url('/brand/fonts/PPMuseum-Medium.woff2')format('woff2');font-weight:500;font-style:normal}
@font-face{font-family:'PP Museum';src:url('/brand/fonts/PPMuseum-Semibold.woff2')format('woff2');font-weight:600;font-style:normal}

:root{
  --green:#1A2C17; --green-mid:#405024;
  --gold:#D7B454; --gold-mid:#C0A671; --gold-dark:#7A6831;
  --cream:#EEE9DA; --cream-box:#E8E3D2;
  --ink:#2B2F28; --hair:#DDD9C9;
  --serif:'PP Museum',Georgia,serif;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--serif); font-weight:400; font-size:15px; line-height:1.5;
  min-height:100vh;
}

/* ---------- masthead ---------- */
.masthead{
  display:flex; align-items:center; gap:20px;
  background:var(--green); padding:16px 28px;
}
.masthead .logo{width:44px; height:auto; display:block; flex:0 0 auto}
.masthead .brand{flex:1 1 auto; min-width:0}
.masthead h1{margin:0; font-size:15pt; font-weight:500; line-height:1.1; color:var(--cream)}
.masthead .tag{margin:2px 0 0; font-size:8.5pt; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.masthead nav a{
  color:var(--gold); text-decoration:none; font-size:9.5pt; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.masthead nav a:hover{color:var(--cream)}

main{max-width:640px; margin:0 auto; padding:40px 24px 64px}

h2{font-weight:500; font-size:15pt; color:var(--green); margin:0 0 18px}

/* ---------- forms ---------- */
label{display:block; font-size:8.5pt; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dark); margin:16px 0 6px}
label:first-child{margin-top:0}
input[type=text],input[type=url],input[type=password],input[type=date]{
  display:block; width:100%; padding:11px 13px; font-family:var(--serif); font-size:11pt;
  color:var(--ink); background:#fff; border:1px solid var(--hair); border-radius:3px;
}
input:focus{outline:none; border-color:var(--gold-dark)}

button,.btn{
  display:inline-block; margin-top:22px; padding:12px 26px;
  font-family:var(--serif); font-size:9.5pt; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream); background:var(--green); border:1px solid var(--green); border-radius:3px;
  cursor:pointer; text-decoration:none; text-align:center;
}
button:hover,.btn:hover{background:var(--green-mid); border-color:var(--green-mid)}
.btn-secondary{background:transparent; color:var(--green); border-color:var(--green)}
.btn-secondary:hover{background:var(--green); color:var(--cream)}

.error{color:#8a2e1f; background:#f7e6e2; border:1px solid #e3b7ab; border-radius:3px; padding:10px 13px; font-size:9.5pt; margin-bottom:16px}
.note{font-size:9.5pt; color:var(--green-mid); background:var(--cream-box); border-radius:3px; padding:10px 13px; margin-bottom:16px}

/* ---------- recently generated list ---------- */
.recent{list-style:none; margin:0; padding:0}
.recent li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--hair); font-size:10.5pt; color:var(--green-mid);
}
.recent li:last-child{border-bottom:0}
.recent form{margin:0}
.recent button{margin:0; padding:6px 14px; font-size:8pt}

/* ---------- progress page ---------- */
.status-row{display:flex; align-items:center; gap:14px; margin:8px 0 24px}
#stage{font-size:11pt; color:var(--green-mid); margin:0}

.spinner{
  width:26px; height:26px; flex:0 0 auto; border-radius:50%;
  border:3px solid var(--cream-box); border-top-color:var(--gold);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.status-icon{width:28px; height:28px; flex:0 0 auto; display:none; stroke-width:2.5}
.status-icon.show{display:block}
.status-icon.done{color:var(--green)}
.status-icon.error{color:#8a2e1f}

.actions{display:flex; gap:14px; flex-wrap:wrap}
.period{border:1px solid var(--hair); border-radius:3px; padding:14px 16px 16px; margin:24px 0 0}
.period legend{font-size:8.5pt; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dark); padding:0 6px}
.period .hint{font-size:9pt; color:#6b6b6b; margin:0 0 4px}