/* =====================================================================
   Takeoff – base.css
   Shared by every page: design tokens, reset, and reusable components
   (buttons, inputs, avatars, context menu, toast, modal system).
   Page-specific styles live in workspace.css and projects.css.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* surfaces + text */
  --bg:#f4f5f7; --panel:#ffffff; --row-alt:#fafbfc; --hover:#eceef3;
  --border:#dfe2e8; --border-strong:#c9cdd6;
  --text:#1f2430; --muted:#6b7385;
  /* brand */
  --accent:#2563eb; --accent-hover:#1d4ed8; --accent-soft:#e6eefc; --link:#2250c8;
  /* danger */
  --danger:#dc2626; --danger-hover:#b91c1c; --danger-soft:#fdecec; --danger-text:#b91c1c;
  /* app chrome (title bars) */
  --chrome:#1c2130; --chrome-text:#e8ebf2;
  /* status colours */
  --green:#16a34a; --amber:#d97706; --purple:#7c3aed; --grey:#64748b;
  /* shape + type */
  --radius:6px; --radius-lg:10px;
  --font:Inter,"Segoe UI",system-ui,sans-serif; --font-size:13px;
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--font-size)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Avatar ---------- */
.avatar{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--grey);color:#fff;font-size:10.5px;font-weight:600}

/* ---------- Component helpers ---------- */
.mi>svg{color:var(--muted)}                       /* icons placed directly in a menu item */
.mi:hover:not(.disabled)>svg,.mi:focus>svg,.mi.danger>svg{color:inherit}

/* Context menu */
.menu{position:fixed;z-index:1000;min-width:230px;padding:5px;background:var(--panel);border:1px solid var(--border);border-radius:10px;
    box-shadow:0 12px 32px rgba(20,30,60,.16),0 2px 6px rgba(20,30,60,.08);outline:0;animation:menuin .08s ease-out;user-select:none}
@keyframes menuin{from{opacity:0;transform:scale(.98) translateY(-2px)}to{opacity:1;transform:none}}
.menu .menu{animation:none}
.menu.sub{position:absolute;left:100%;top:-6px;margin-left:2px;display:none}
.menu.flip>.mi>.sub{left:auto;right:100%;margin:0 2px 0 0}
.mi:hover>.sub,.mi:focus-within>.sub{display:block}
.mi{position:relative;display:flex;align-items:center;gap:10px;height:30px;padding:0 10px 0 8px;border-radius:6px;cursor:default;outline:0;white-space:nowrap}
.mi:hover:not(.disabled),.mi:focus{background:var(--accent-soft);color:var(--accent)}
.mi.disabled{opacity:.4}
.mi.danger{color:var(--danger-text)}
.mi.danger:hover:not(.disabled),.mi.danger:focus{background:var(--danger-soft);color:var(--danger-text)}
.mi-ic{width:16px;height:16px;display:grid;place-items:center;color:var(--muted)}
.mi:hover:not(.disabled) .mi-ic,.mi:focus .mi-ic,.mi.danger .mi-ic{color:inherit}
.mi-l{flex:1}
.mi kbd{font:inherit;font-size:11px;color:var(--muted);margin-left:18px}
.mi-arr{width:12px!important;height:12px!important;opacity:.6}
.msep{height:1px;background:var(--border);margin:5px 4px}
.mhead{padding:5px 8px 3px;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.mdot{width:12px;height:12px;border-radius:3px;display:block}
#toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,10px);background:var(--chrome);color:#fff;padding:8px 14px;border-radius:8px;opacity:0;pointer-events:none;transition:.18s;z-index:1100}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* Modal system */
.mdl-back{position:fixed;inset:0;background:rgba(15,20,35,.38);backdrop-filter:blur(2px)}
.mdl{position:fixed;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:12px;outline:0;
    max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:hidden;
    box-shadow:0 10px 28px rgba(15,20,40,.16),0 2px 6px rgba(15,20,40,.08)}
.mdl.active{box-shadow:0 24px 60px rgba(15,20,40,.28),0 4px 12px rgba(15,20,40,.12)}
.mdl.moving{box-shadow:0 34px 80px rgba(15,20,40,.34),0 6px 16px rgba(15,20,40,.14)}
.mdl.max{left:0!important;top:0!important;width:100vw!important;height:100vh!important;max-width:none;max-height:none;border-radius:0;border:0}
.mdl.anim{transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease,border-radius .22s ease}
.mdl-head{display:flex;align-items:center;gap:9px;height:42px;padding:0 6px 0 14px;flex:none;cursor:move;user-select:none;
    background:var(--row-alt);border-bottom:1px solid var(--border)}
.mdl:not(.active) .mdl-head{opacity:.75}
.mdl.max .mdl-head{cursor:default}
.mdl-ic{display:inline-flex;color:var(--accent)}
.mdl-ic:empty{display:none}
.mdl-title{flex:1;margin:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdl-tools{display:flex;gap:2px}
.mdl-tools button{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}
.mdl-tools button:hover{background:var(--hover);color:var(--text)}
.mdl-tools .x:hover{background:var(--danger-soft);color:var(--danger-text)}
.mdl-body{flex:1;min-height:0;overflow:auto;padding:16px}
.mdl-body.flush{padding:0}
.mdl-foot{flex:none;display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--border);background:var(--row-alt)}
.mdl-foot:empty{display:none}
.rz{position:absolute;z-index:3}
.rz.n{top:0;left:12px;right:12px;height:6px;cursor:n-resize}
.rz.s{bottom:0;left:12px;right:12px;height:6px;cursor:s-resize}
.rz.e{right:0;top:12px;bottom:12px;width:6px;cursor:e-resize}
.rz.w{left:0;top:12px;bottom:12px;width:6px;cursor:w-resize}
.rz.nw{top:0;left:0;width:12px;height:12px;cursor:nw-resize}
.rz.ne{top:0;right:0;width:12px;height:12px;cursor:ne-resize}
.rz.sw{bottom:0;left:0;width:12px;height:12px;cursor:sw-resize}
.rz.se{bottom:0;right:0;width:14px;height:14px;cursor:se-resize}
.mdl.max .rz,.mdl.fixed .rz{display:none}
.mdl.fixed .mdl-head{cursor:default}
.mdl-msg{margin:0;line-height:1.55}
.btn{height:30px;padding:0 14px;border-radius:6px;border:1px solid var(--border-strong);background:#fff;font-weight:500}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.danger:hover{background:var(--danger-hover);border-color:var(--danger-hover)}
.mdl-form{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center}
.mdl-form>label{color:var(--muted)}
.mdl-form .top{align-self:start;padding-top:6px}
.mdl-input,.inp{width:100%;height:30px;border:1px solid var(--border-strong);border-radius:6px;padding:0 9px;font:inherit;background:#fff;color:var(--text);outline:0}
textarea.mdl-input,.inp{height:auto;padding:7px 9px;resize:vertical}
.mdl-input:focus,.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.mdl-input:disabled{background:var(--row-alt);color:var(--muted)}
.swatches{display:flex;gap:8px}
.swb{width:24px;height:24px;border-radius:7px;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.swb.on{border-color:var(--text);transform:scale(1.1)}
.mdl-tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--border);background:var(--row-alt)}
.mdl-tabs button{padding:9px 14px;color:var(--muted);border-bottom:2px solid transparent}
.mdl-tabs button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.mdl-panel{padding:16px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}

/* brand tagline next to the logo */
.logo .tagline{margin-left:10px;padding-left:10px;border-left:1px solid var(--border-strong,#cbd5e1);font-size:11px;font-weight:400;opacity:.7;letter-spacing:.02em;white-space:nowrap}
@media (max-width:900px){.logo .tagline{display:none}}