/* =====================================================================
   CritHub — base styles, theme tokens, keyframes, and the interactive
   hover/focus states. Component layout/colour lives inline in app.js
   (ported straight from the design) so the look stays pixel-true; this
   file holds only what inline styles can't express (:hover, :focus,
   transitions, theme variables).
   ===================================================================== */

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
#app{height:100%}

body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
::selection{background:rgba(79,70,229,.20)}

/* ---- theme tokens: light (default) ---- */
:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f1f5f9; --border:#e8ecf1; --border-strong:#cbd5e1;
  --text:#0f172a; --text-muted:#64748b; --text-faint:#94a3b8; --sidebar-bg:#ffffff;
  --shadow:rgba(15,23,42,.06); --dot:#dde3ea;
  --open-bg:#fef3c7; --open-text:#b45309; --prog-bg:#dbeafe; --prog-text:#1d4ed8;
  --res-bg:#d1fae5; --res-text:#047857; --wf-bg:#f1f5f9; --wf-text:#475569;
}
/* ---- theme tokens: dark ---- */
body.dark{
  --bg:#0a0e17; --surface:#10151f; --surface-2:#1a2130; --border:#222c3c; --border-strong:#33415a;
  --text:#eef2f7; --text-muted:#94a3b8; --text-faint:#64748b; --sidebar-bg:#0d121b;
  --shadow:rgba(0,0,0,.5); --dot:#1a2130;
  --open-bg:rgba(245,158,11,.16); --open-text:#fbbf24; --prog-bg:rgba(59,130,246,.16); --prog-text:#60a5fa;
  --res-bg:rgba(16,185,129,.16); --res-text:#34d399; --wf-bg:rgba(148,163,184,.16); --wf-text:#cbd5e1;
}

/* ---- keyframes (from the design) ---- */
@keyframes chPin{0%{opacity:0;transform:translate(-50%,-100%) scale(.2)}70%{transform:translate(-50%,-100%) scale(1.12)}100%{opacity:1;transform:translate(-50%,-100%) scale(1)}}
@keyframes chSpin{to{transform:rotate(360deg)}}
@keyframes chFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ---- inputs ---- */
.ch-input{
  font-family:inherit;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.ch-input:focus{
  border-color:#4f46e5 !important;background:var(--surface) !important;
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
}

/* ---- buttons / interactive ---- */
button{font-family:inherit}
.ch-btn-primary{transition:background .15s ease}
.ch-btn-primary:hover{background:#4338ca !important}

.ch-icon-btn{transition:all .15s ease}
.ch-icon-btn:hover{background:var(--surface-2) !important;color:var(--text) !important}

.ch-nav:hover{background:var(--surface-2)}
.ch-projrow:hover{background:var(--surface-2);color:var(--text) !important}

.ch-card{transition:transform .18s ease,box-shadow .18s ease}
.ch-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px var(--shadow)}

.ch-row{transition:border-color .15s ease,background .15s ease}
.ch-row:hover{border-color:var(--border-strong) !important}

.ch-inbox-row{transition:background .12s ease;cursor:pointer}
.ch-inbox-row:hover{background:var(--surface-2)}

.ch-menu-item{transition:background .12s ease}
.ch-menu-item:hover{background:var(--surface-2)}

.ch-pin{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.ch-pin:hover{filter:brightness(1.08);z-index:25 !important}

.ch-danger:hover{color:#e11d48 !important;border-color:#fca5a5 !important}
.ch-ghost:hover{background:var(--surface-2)}

/* per-row delete button: appears on hover */
.ch-row .ch-del{opacity:0;transition:opacity .12s ease}
.ch-row:hover .ch-del{opacity:1}
.ch-del:hover{color:#e11d48 !important;border-color:#fca5a5 !important}

/* per-card edit button: appears on hover/focus (like the row delete) */
.ch-card .ch-cardedit{opacity:0;transition:opacity .12s ease,background .15s ease,color .15s ease}
.ch-card:hover .ch-cardedit,.ch-card .ch-cardedit:focus{opacity:1}
.ch-cardedit:hover{background:var(--surface-2) !important;color:var(--text) !important}

/* ---- artboard (scaling applied inline from JS; no per-render animation) ---- */
.ch-artboard{will-change:transform}
/* The device switcher adds .ch-animating just for its transition, then removes
   it — so normal re-renders never animate, only Desktop/Tablet/Mobile changes. */
.ch-artboard.ch-animating{transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1)}
.ch-artwrap.ch-animating{transition:width .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1)}
.ch-artframe.ch-animating{transition:height .28s cubic-bezier(.4,0,.2,1)}

/* ---- modal ---- */
.ch-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;animation:chFade .15s ease both}

/* ---- toast ---- */
.ch-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;font-size:13.5px;font-weight:500;padding:10px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:200;animation:chFade .15s ease both}

/* hide native file input; we trigger it from a styled button */
.ch-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* scrollbars stay subtle in dark mode */
body.dark ::-webkit-scrollbar{width:10px;height:10px}
body.dark ::-webkit-scrollbar-thumb{background:#222c3c;border-radius:6px}