/* keyissue.app additions: bell button + settings sheet (reminders, sync, import). Uses the planner's colour tokens. */
#kp-bell {
  width: 34px; height: 34px; border-radius: 999px; flex: none; position: relative;
  display: grid; place-items: center; padding: 0; cursor: pointer; margin-left: auto;
  background: var(--surface); color: var(--fg); border: 1px solid var(--line);
}
.hello > .spread > #kp-bell { margin-left: 0; }
.hello > .spread .sync { margin-left: auto; }
#kp-bell svg { width: 18px; height: 18px; }
#kp-bell.alert::after {
  content: ""; position: absolute; top: 4px; right: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--warn); border: 2px solid var(--surface);
}
#kp-sheet {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 48px);
  padding: 0; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--fg); font-family: var(--body);
  box-shadow: 0 20px 60px rgb(0 0 0 / .25); overflow: auto;
}
#kp-sheet::backdrop { background: rgb(10 16 14 / .45); }
#kp-sheet .kp-head {
  position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
#kp-sheet h1 { font-family: var(--display); font-size: 1.3rem; margin: 0; }
#kp-sheet h2 { font-family: var(--display); font-size: 1.05rem; margin: 0 0 6px; }
#kp-sheet .kp-body { padding: 4px 16px 18px; }
#kp-sheet section { padding: 14px 0; border-bottom: 1px solid var(--line); }
#kp-sheet section:last-child { border-bottom: 0; }
#kp-sheet p { margin: 6px 0; color: var(--muted); font-size: .92rem; }
#kp-sheet .kp-warn { color: var(--warn); }
#kp-sheet button {
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--sunk); color: var(--fg);
}
#kp-sheet button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#kp-sheet button.ghost { background: transparent; }
#kp-sheet button:disabled { opacity: .6; cursor: default; }
#kp-sheet .kp-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#kp-sheet .kp-row input { flex: 1 1 180px; min-width: 0; }
#kp-sheet input, #kp-sheet textarea {
  font: inherit; font-size: 16px; width: 100%; padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
}
#kp-sheet textarea { font-family: var(--mono); font-size: 13px; resize: vertical; margin-top: 6px; }
#kp-sheet .kp-status { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; }
#kp-sheet .kp-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
#kp-sheet .kp-status.on i { background: var(--accent); }
#kp-sheet .kp-status.off i { background: var(--warn); }
#kp-sheet .kp-key { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
#kp-sheet .kp-key code {
  flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12.5px;
  padding: 9px 11px; border-radius: 10px; background: var(--sunk);
}
#kp-sheet details { margin-top: 12px; }
#kp-sheet summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--accent); }

/* Phones: iOS zooms the page when a field under 16px is tapped and leaves it zoomed.
   Keep every field at 16px, and tighten the type a little so more fits on screen. */
@media (pointer: coarse), (max-width: 480px) {
  input, select, textarea, .item input[type=date], .times input { font-size: 16px !important; }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
  h1 { font-size: 1.5rem; }
  .wrap { gap: 14px; padding-inline: 12px; }
}