/* ============================================================
   michaelscaffidi.com - site chrome (top bar, auth card, toast)
   Colours come from assets/theme.css. Load that first.
   ============================================================ */

/* ---------- top bar ---------- */
.ms-bar{
  background:var(--bar-bg); color:var(--bar-ink);
  font-family:var(--font-ui);
  border-bottom:1px solid var(--bar-line);
  position:sticky; top:0; z-index:900;
}
.ms-bar-in{
  max-width:1180px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:6px; min-height:50px; flex-wrap:wrap;
}
.ms-brand{
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  color:var(--bar-ink); text-decoration:none; margin-right:12px; white-space:nowrap;
}
.ms-brand span{color:var(--gold)}
.ms-links{display:flex; gap:3px; flex-wrap:wrap; flex:1}
.ms-links a{
  color:var(--bar-muted); text-decoration:none; font-size:.85rem;
  padding:7px 13px; border-radius:999px; white-space:nowrap; transition:.15s;
}
.ms-links a:hover{color:var(--bar-ink); background:var(--bar-hover)}
.ms-links a.on{background:var(--accent-fill); color:var(--on-accent); font-weight:700}
.ms-acct{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--bar-muted)}
.ms-acct b{color:var(--bar-ink); font-weight:600}

.ms-btn{
  font:inherit; font-size:.8rem; cursor:pointer; border-radius:var(--radius-sm);
  padding:6px 12px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); transition:.15s;
}
.ms-btn:hover{border-color:var(--accent); color:var(--accent)}
.ms-btn.pri{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); font-weight:700}
.ms-btn.pri:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent)}
.ms-btn.warn{background:transparent; border-color:var(--danger); color:var(--danger)}

/* theme switch */
.ms-theme{
  width:32px; height:32px; padding:0; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  border-radius:999px; cursor:pointer; font-size:.95rem; line-height:1; transition:.15s;
}
.ms-theme:hover{border-color:var(--accent); color:var(--accent)}
.ms-theme svg{width:16px; height:16px; display:block}

/* sync status pill */
.ms-sync{
  font-size:.72rem; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--bar-muted); white-space:nowrap;
}
.ms-sync[data-s="synced"]{color:var(--green); border-color:var(--green)}
.ms-sync[data-s="saving"]{color:var(--gold); border-color:var(--gold)}
.ms-sync[data-s="error"]{color:var(--danger); border-color:var(--danger)}
.ms-sync[data-s="local"]{color:var(--bar-muted)}

/* ---------- banners + toast ---------- */
.ms-banner{
  font-family:var(--font-ui); font-size:.85rem;
  background:var(--warn-bg); color:var(--warn-ink); border-bottom:1px solid var(--warn-line);
  padding:10px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.ms-banner.err{background:var(--danger-soft); color:var(--danger); border-bottom-color:var(--danger)}
.ms-toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
  background:var(--surface); color:var(--ink); border:1px solid var(--line-2);
  font-family:var(--font-ui); font-size:.85rem;
  padding:11px 16px; border-radius:var(--radius-sm); opacity:0; pointer-events:none;
  transition:.25s; z-index:2000; box-shadow:var(--shadow-lg);
  display:flex; gap:12px; align-items:center; max-width:min(92vw,520px);
}
.ms-toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}

/* ---------- auth card ---------- */
.ms-authwrap{
  min-height:calc(100vh - 50px); display:flex; align-items:flex-start;
  justify-content:center; padding:44px 16px 60px; font-family:var(--font-ui);
}
.ms-card{
  width:100%; max-width:410px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:16px; padding:26px 26px 22px;
  box-shadow:var(--shadow);
}
.ms-card h1{margin:0 0 4px; font-size:1.35rem; font-family:var(--font-display)}
.ms-card p.sub{margin:0 0 18px; color:var(--ink-2); font-size:.88rem; line-height:1.5}
.ms-field{margin-bottom:13px}
.ms-field label{display:block; font-size:.78rem; color:var(--ink-2); margin-bottom:5px; letter-spacing:.02em}
.ms-field input{
  width:100%; font:inherit; font-size:.92rem; padding:10px 12px;
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--ink);
}
.ms-field input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.ms-card .go{
  width:100%; margin-top:6px; font:inherit; font-size:.92rem; font-weight:600;
  padding:11px; border-radius:var(--radius-sm); border:1px solid var(--accent-fill);
  background:var(--accent-fill); color:var(--on-accent); cursor:pointer;
}
.ms-card .go:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.ms-card .go:disabled{opacity:.5; cursor:default}
.ms-alt{margin-top:14px; font-size:.83rem; color:var(--ink-2); text-align:center}
.ms-alt a{color:var(--accent); cursor:pointer; text-decoration:underline}
.ms-msg{margin-top:12px; font-size:.83rem; padding:9px 11px; border-radius:8px; display:none}
.ms-msg.show{display:block}
.ms-msg.ok{background:var(--green-soft); color:var(--green); border:1px solid var(--green)}
.ms-msg.bad{background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger)}
.ms-setup{
  background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink);
  border-radius:var(--radius-sm); padding:12px 14px; font-size:.82rem; line-height:1.55; margin-bottom:16px;
}
.ms-setup code{background:var(--surface); padding:1px 5px; border-radius:4px; font-size:.95em; font-family:var(--font-mono)}

@media (max-width:720px){
  .ms-bar-in{padding:7px 12px; gap:6px; min-height:0}
  .ms-brand{order:1; margin-right:auto; font-size:.92rem}
  .ms-acct{order:2}
  .ms-theme{order:3}
  .ms-links{order:4; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto;
            -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 0 1px}
  .ms-links::-webkit-scrollbar{display:none}
  .ms-links a{padding:6px 11px; font-size:.8rem}
  .ms-acct .ms-sync{font-size:.68rem; padding:3px 7px}
  .ms-authwrap{min-height:auto}
}