/* Guardian Screens — shared dashboard/editor chrome. */
@import url('/fonts/fonts.css');

:root{
  --bg:#0c0e0a;
  --panel:#14180f;
  --panel2:#1b2015;
  --line:#2b3324;
  --line2:#3b4630;
  --txt:#e9eede;
  --dim:#96a385;
  --lime:#bada55;
  --lime-dim:#93a844;
  --ink:#0a0c07;
  --red:#ff7a70;
  --amber:#f5c451;
  --r:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font:15px/1.55 Archivo,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--lime);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--ink)}

/* ---- app bar ---- */
.bar{
  display:flex;align-items:center;gap:18px;
  padding:14px 26px;border-bottom:1px solid var(--line);
  background:#0a0c08;position:sticky;top:0;z-index:20;
}
.brandmark{display:flex;align-items:center;gap:12px;min-width:0}
.brandmark img{width:40px;height:40px;object-fit:contain;flex:none}
.brandmark .t{line-height:1.1;min-width:0}
.brandmark .t b{
  display:block;font-family:'Barlow Condensed';font-weight:800;font-size:19px;
  letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;
}
.brandmark .t span{display:block;font-size:11.5px;color:var(--dim);letter-spacing:.4px}
.bar .spacer{flex:1}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  border-radius:9px;padding:9px 15px;font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color .12s,background .12s,color .12s;white-space:nowrap;
}
.btn:hover{border-color:var(--lime-dim);color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.btn:disabled:hover{border-color:var(--line2);color:var(--txt)}
.btn.primary{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:800}
.btn.primary:hover{background:#c8e86a;border-color:#c8e86a;color:var(--ink)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--dim)}
.btn.quiet:hover{background:var(--panel2);color:var(--txt)}
.btn.danger:hover{border-color:var(--red);color:var(--red)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:8px}
.btn.icon{padding:8px;width:34px;height:34px}

/* ---- form controls ---- */
label.f{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.in{
  width:100%;background:#0a0c07;border:1px solid var(--line);border-radius:9px;
  color:var(--txt);padding:10px 12px;font-size:14.5px;
}
.in:focus{outline:none;border-color:var(--lime-dim)}
textarea.in{resize:vertical;min-height:76px;line-height:1.4}
select.in{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
input[type=range]{width:100%;accent-color:var(--lime);background:transparent}
input[type=color]{
  width:38px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;
  background:#0a0c07;cursor:pointer;flex:none}
.check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;user-select:none}
.check input{width:16px;height:16px;accent-color:var(--lime);flex:none}

/* segmented control */
.seg{display:flex;gap:4px;background:#0a0c07;border:1px solid var(--line);border-radius:9px;padding:3px}
.seg button{
  flex:1;background:transparent;border:0;border-radius:6px;color:var(--dim);
  font-size:13px;font-weight:600;padding:7px 6px;cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--lime);color:var(--ink);font-weight:800}
.seg button:not(.on):hover{color:var(--txt);background:var(--panel2)}

/* ---- pills ---- */
.pill{
  display:inline-flex;align-items:center;gap:6px;border-radius:100px;
  padding:3px 10px;font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.live{background:rgba(186,218,85,.14);color:var(--lime)}
.pill.draft{background:rgba(245,196,81,.14);color:var(--amber)}
.pill.off{background:#1c211a;color:var(--dim)}

/* ---- cards ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}

/* ---- modal ---- */
.scrim{
  position:fixed;inset:0;background:rgba(4,6,3,.72);z-index:60;
  display:none;align-items:center;justify-content:center;padding:24px}
.scrim.on{display:flex}
.modal{
  width:100%;max-width:480px;background:var(--panel);border:1px solid var(--line2);
  border-radius:16px;padding:24px}
.modal h3{font-family:'Barlow Condensed';font-weight:800;font-size:23px;letter-spacing:.8px;
  text-transform:uppercase;margin-bottom:6px}
.modal p.sub{color:var(--dim);font-size:14px;margin-bottom:18px}
.modal .row{display:flex;gap:10px;margin-top:20px}
.modal .row .btn{flex:1}

/* ---- toast ---- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:80;
  background:#171c11;border:1px solid var(--line2);border-left:3px solid var(--lime);
  border-radius:10px;padding:12px 18px;font-size:14px;font-weight:600;
  box-shadow:0 14px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.2s}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.err{border-left-color:var(--red);color:#ffd6d2}

/* ---- login ---- */
#login{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;
  justify-content:center;z-index:70;padding:24px}
#login.on{display:flex}
#login form{width:100%;max-width:360px;text-align:left}
#login .lock{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px}
#login .lock img{width:96px}
#login .lock b{font-family:'Barlow Condensed';font-weight:800;font-size:24px;
  letter-spacing:2px;text-transform:uppercase;text-align:center}
#login .lock span{color:var(--dim);font-size:13px}
#login .f{margin-top:16px}
#login .btn{width:100%;margin-top:22px}
.err{display:none;margin-top:14px;background:#2a1210;border:1px solid #5a2620;color:#ffb1aa;
  border-radius:9px;padding:10px 12px;font-size:13.5px}
.err.on{display:block}

.muted{color:var(--dim)}
.hide{display:none !important}