/* CSUCI AI Policy Builder — styles (no inline styles) */

:root{
  --brand-primary:#cb132a;
  --bg:#f7f7f8;
  --panel:#ffffff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;color:var(--text);background:linear-gradient(#fafafa,#f3f4f6)}
h1,h2{margin:0 0 .5rem 0}
h2{font-size:1.125rem}
p{margin:.25rem 0}
.small{font-size:.875rem}
.tiny{font-size:.75rem;color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:1rem;
  padding:.75rem 1rem; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.75rem}
.brand-logo{height:32px; display:none}
.brand-text h1{font-size:1.125rem; color:var(--brand-primary)}
.subtitle{font-size:.75rem; color:var(--muted); margin-top:-.25rem}
.header-actions{margin-left:auto; display:flex; gap:.5rem; align-items:center}

.btn{
  appearance:none; border:1px solid var(--border); background:#fff;
  padding:.5rem .75rem; border-radius:.75rem; font-size:.875rem; cursor:pointer;
}
.btn:hover{background:#f9fafb}
.btn-primary{background:var(--brand-primary); color:#fff; border-color:transparent}
.btn-primary:hover{filter:brightness(.95)}

.layout{max-width:1200px; margin:0 auto; padding:1rem; display:grid; grid-template-columns:1fr; gap:1rem}
@media (min-width: 1024px){
  .layout{grid-template-columns:1fr 1fr}
}

.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:1rem; padding:1rem; box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.panel.sticky{position:sticky; top:72px; height:fit-content}

.grid{display:grid; gap:.75rem}
.grid-2{grid-template-columns:1fr}
.grid-span-2{grid-column:span 1}
@media (min-width:640px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-span-2{grid-column:span 2}
}

.field{display:flex; flex-direction:column; gap:.375rem}
.field input,.field textarea,.field select{
  border:1px solid var(--border); border-radius:.75rem;
  padding:.5rem .75rem; font-size:.95rem; background:#fff;
}
.field textarea{resize:vertical}
.hint{color:var(--muted); font-size:.8rem}

.list{display:flex; flex-direction:column; gap:.5rem}
.list-cards .card{display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid var(--border); border-radius:.75rem; background:#fff; cursor:pointer}
.list-cards .card input{margin:0}
.list-checks label{display:flex; gap:.5rem; align-items:flex-start}

.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{border:1px solid var(--border); background:#fff; padding:.375rem .75rem; border-radius:999px; font-size:.9rem; cursor:pointer}
.chip.active{background:var(--brand-primary); color:#fff; border-color:transparent}

.tools{display:flex; flex-direction:column; gap:.75rem}
.tool{border:1px solid var(--border); border-radius:.75rem; padding:.75rem; background:#fff}
.tool-head{display:flex; align-items:center; justify-content:space-between}
.switch{display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--border); border-radius:999px; padding:.25rem .5rem; font-size:.85rem; background:#fff; cursor:pointer}
.switch.on{background:var(--brand-primary); color:#fff; border-color:transparent}

.toolbar{display:flex; align-items:center; gap:.5rem; margin-top:.75rem}
.spacer{flex:1}
.compact input, .compact select{padding:.35rem .5rem; font-size:.85rem}

.preview-head{display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem}
.logo-box{width:40px; height:40px; border-radius:.75rem; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--brand-primary); font-weight:700}
.preview-title{font-weight:600; color:var(--brand-primary)}
.preview-sub{font-size:.75rem; color:var(--muted); margin-top:-.15rem}

.preview{white-space:pre-wrap; line-height:1.5; font-size:.92rem; border:1px solid var(--border); border-radius:.75rem; padding:1rem; background:#fff}

.tiny .mono{background:#f3f4f6; padding:.1rem .25rem; border-radius:.25rem}

@media print {
  body{background:#fff}
  .site-header, #builder, .toolbar, .tiny{display:none !important}
  .panel.sticky{box-shadow:none; border:none}
  .preview{border:none; padding:0}
}