/* =========================================================================
   Buttons, hints, toast, and the icon-button used for the hamburger.
   The topbar/panel/tray/login-gate rules that used to live here moved to
   shell.css with the redesign - this file is now just the small shared
   primitives every screen still uses.
   ========================================================================= */

.icon-btn{ background:transparent; border:0; cursor:pointer; padding:6px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; transition:background-color .15s ease; position:relative; }
.icon-btn:hover{ background:rgba(0,0,0,.10); }
.icon-btn svg{ width:20px; height:20px; color:var(--ice-black); display:block; }

/* --- Buttons ------------------------------------------------------------ */
.btn{ font-family:var(--font-display); font-weight:700; font-size:13px; border-radius:var(--radius); border:2px solid var(--ice-black); cursor:pointer; padding:9px 16px; background:var(--ice-yellow); color:var(--ice-black); transition:background-color .15s ease, transform .1s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover:not(:disabled){ background:var(--ice-gold); transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.15); }
.btn:active:not(:disabled){ transform:translateY(0); box-shadow:none; }
.btn:disabled{ background:#EDEDED; border-color:#DDD; color:#AAA; cursor:not-allowed; }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink-soft); }
.btn--ghost:hover:not(:disabled){ background:var(--line-soft); border-color:#BBB; color:var(--ink); transform:none; box-shadow:none; }
.btn--added{ background:var(--success-soft); border-color:var(--success); color:var(--success); }
.btn--added:hover:not(:disabled){ background:var(--success-soft-hover); color:var(--success); }
.btn--small{ padding:6px 10px; font-size:12px; }

/* --- Toast -------------------------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%); background:var(--ice-black); color:#fff;
  padding:10px 18px; border-radius:999px; font-size:13px; z-index:90; max-width:80vw;
  display:flex; align-items:center; justify-content:center; gap:14px; text-align:center;
}
.toast--error{ background:var(--danger); }
.toast--success{ background:var(--success); }
.toast[hidden]{ display:none; }
.toast__msg{ white-space:normal; }
.toast__icon{ flex:none; width:18px; height:18px; color:#fff; }

/* One small "that worked" moment - a pop-in on every toast, plus the
   checkmark (added in util.js's toast()) getting its own little flourish
   on success so a finished action reads as more than just changed text. */
.toast--pop{ animation:toast-pop .38s cubic-bezier(.34,1.56,.64,1); }
@keyframes toast-pop{
  from{ transform:translate(-50%, 10px) scale(.94); opacity:0; }
  to{ transform:translate(-50%, 0) scale(1); opacity:1; }
}
.toast--success .toast__icon{ animation:toast-check .35s ease .05s both; }
@keyframes toast-check{
  from{ transform:scale(0) rotate(-20deg); opacity:0; }
  to{ transform:scale(1) rotate(0deg); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .toast--pop, .toast--success .toast__icon{ animation:none; }
}
.toast__action{
  flex:none; background:none; border:0; color:var(--ice-yellow); font-family:var(--font-display);
  font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.03em; cursor:pointer; padding:0;
}
.toast__action:hover{ text-decoration:underline; }
.toast--success .toast__action, .toast--error .toast__action{ color:#fff; }

/* --- Inline hints ------------------------------------------------------- */
.hint{ font-size:12px; color:var(--ink-soft); margin:8px 2px 0; min-height:16px; }
.hint.warn{ color:var(--warning-text); }
.hint.error{ color:var(--danger); }
.hint.ok{ color:var(--success); }