/* ==========================================================================
   GDI Assignment Generator — application chrome
   (The exported assignment page has its own, separate stylesheet — see
   the ASSIGNMENT_CSS string in script.js — so this file never ships to
   auditors and the export has zero dependency on it.)
   ========================================================================== */

:root{
  --ink:#1c2430;
  --paper:#f6f3ec;
  --panel:#ffffff;
  --brass:#a9824c;
  --brass-dark:#8a6a3b;
  --line:#e3dbc9;
  --text:#262b33;
  --muted:#767c88;
  --danger:#8a3324;
  --radius:10px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Courier New", monospace;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  height:100%;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-ui);
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 20px;
  background:var(--ink);
  color:#f3ede0;
  border-bottom:3px solid var(--brass);
}
.topbar__brand{ display:flex; align-items:center; gap:12px; }
.topbar__mark{
  font-family:var(--font-mono);
  letter-spacing:2px;
  font-weight:700;
  border:1px solid var(--brass);
  color:var(--brass);
  padding:4px 8px;
  border-radius:6px;
  font-size:13px;
}
.topbar__title{ display:flex; flex-direction:column; line-height:1.2; }
.topbar__title strong{ font-size:15px; }
.topbar__title small{ color:#c9c1ac; font-size:11px; }
.topbar__actions{ display:flex; gap:8px; flex-wrap:wrap; }

.btn{
  font-family:var(--font-ui);
  font-size:13px;
  padding:8px 14px;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--ghost{ background:transparent; border-color:rgba(243,237,224,.35); color:#f3ede0; }
.btn--ghost:hover{ background:rgba(243,237,224,.1); }
.btn--primary{ background:var(--brass); color:#1c1a15; font-weight:600; }
.btn--primary:hover{ background:var(--brass-dark); }

/* ---------- workspace ---------- */
.workspace{
  display:grid;
  grid-template-columns:minmax(320px, 460px) 1fr;
  height:calc(100vh - 57px);
}
@media (max-width: 900px){
  .workspace{ grid-template-columns:1fr; height:auto; }
  .panel--preview{ height:80vh; }
}

.panel{ overflow-y:auto; }
.panel--form{
  background:var(--panel);
  border-right:1px solid var(--line);
  padding:18px 20px 60px;
}
.panel--preview{ display:flex; flex-direction:column; background:#e9e3d3; }
.panel__previewbar{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:10px 18px;
  font-size:12px;
  font-weight:600;
  background:#dfd8c3;
  border-bottom:1px solid var(--line);
}
.panel__previewbar .muted{ font-weight:400; color:var(--muted); }
#previewFrame{ flex:1; width:100%; border:0; background:#fff; }

/* ---------- form elements ---------- */
.group{
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:12px;
  background:#fffdf8;
  overflow:hidden;
}
.group summary{
  cursor:pointer;
  padding:12px 14px;
  font-weight:600;
  font-size:13.5px;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f4efe2;
  border-bottom:1px solid transparent;
}
.group[open] summary{ border-bottom-color:var(--line); }
.group summary::-webkit-details-marker{ display:none; }
.group summary::after{
  content:"+";
  font-family:var(--font-mono);
  color:var(--brass-dark);
}
.group[open] summary::after{ content:"–"; }

.grid{ display:grid; gap:12px; padding:14px; }
.grid--2{ grid-template-columns:1fr 1fr; }
@media (max-width: 520px){ .grid--2{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted); }
.field span{ font-weight:600; color:var(--text); }
.field em{ font-style:normal; font-weight:400; color:var(--muted); font-size:11px; }
.field--wide{ grid-column:1 / -1; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="file"], select, textarea{
  font-family:var(--font-ui);
  font-size:13.5px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:var(--text);
}
textarea{ resize:vertical; font-family:var(--font-ui); }
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--brass);
  outline-offset:1px;
}

.radio-row{ display:flex; flex-direction:column; gap:8px; padding:14px; }
.radio{ display:flex; align-items:center; gap:8px; font-size:13.5px; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; padding:14px; }
.chip{
  display:flex; align-items:center; gap:6px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12.5px;
  background:#fff;
  cursor:pointer;
}
.chip input{ accent-color:var(--brass-dark); }