/* widgets.css — buttons, inputs, toasts, dialogs. hand-drawn frames, sober guts. */

button {
  font-family: var(--hand);
  font-size: 15px;
  color: var(--ink);
  background: var(--panel-hi);
  border: 1.5px solid var(--border-hi);
  border-radius: 7px 9px 8px 7px / 8px 7px 9px 8px; /* wonky pencil corners */
  padding: 3px 12px;
  cursor: pointer;
  line-height: 1.5;
}
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: 0.4; cursor: default; }
button.toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
button.danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
button.small { font-size: 13px; padding: 1px 8px; }

input[type="text"], input[type="search"], textarea, select {
  width: 100%;
  font: 13px/1.4 var(--body);
  color: var(--ink);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { resize: vertical; font-family: var(--mono); font-size: 12.5px; }
label { display: block; margin: 8px 0 2px; color: var(--dim); font-size: 12px; }
.row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.row > button { flex: none; }

input[type="range"] { width: 100%; accent-color: var(--accent); }
input[type="color"] {
  width: 26px; height: 22px; padding: 0; border: 1px solid var(--border-hi);
  border-radius: 5px; background: none; cursor: pointer;
}

fieldset { border: 1.5px dashed var(--border); border-radius: 8px; margin: 0 0 10px; padding: 8px 10px; }
legend { font-family: var(--hand); color: var(--dim); padding: 0 6px; font-size: 14px; }

/* panel wink — a tap-card action pointed the user to the side panel */
#edit-panel.flash { animation: panel-flash 1.2s ease; border-radius: 10px; }
@keyframes panel-flash {
  0%, 100% { background: transparent; }
  25%      { background: var(--accent-soft); }
}

/* toasts */
#toasts {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  max-width: min(480px, 90vw);
  background: var(--panel-hi);
  border: 1.5px solid var(--border-hi);
  border-radius: 10px 12px 11px 10px / 11px 10px 12px 11px;
  padding: 8px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.toast.warn { border-color: var(--red); }
.toast button { font-size: 14px; padding: 1px 10px; }

/* dialog */
dialog {
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--border-hi);
  border-radius: 12px 14px 13px 12px / 13px 12px 14px 13px;
  padding: 18px 20px;
  max-width: min(520px, 92vw);
  max-height: 80dvh;
  overflow: auto;
}
dialog::backdrop { background: rgba(16, 15, 20, 0.7); }
dialog h3 { margin-top: 0; }
dialog .row { justify-content: flex-end; margin-top: 14px; }
dialog ul { margin: 8px 0; padding-left: 20px; color: var(--dim); font-size: 12.5px; }
dialog .radio { display: flex; gap: 14px; margin: 6px 0; flex-wrap: wrap; }
dialog .radio label { display: flex; gap: 5px; align-items: center; margin: 0; font-size: 13px; color: var(--ink); cursor: pointer; }