/* Paste-specific bits on top of the Paycheck Allocator's style.css. */

/* One simple layout at every size: a header bar whose logo lines up with
   the centered content column below it. (Undoes the allocator's laptop
   sidebar and its extra iOS status-bar spacing - this app doesn't need them.) */
header {
  position: relative;
  top: auto; left: auto;
  width: auto; height: auto;
  padding: max(14px, env(safe-area-inset-top)) max(16px, calc(50% - 380px + 16px)) 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.paste-main { max-width: 760px; margin: 0 auto; padding: 20px 16px calc(40px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  .paste-main { margin: 0 auto; padding: 32px 16px 64px; }
}

.card { border: 3px solid var(--accent-outline); }
.list-item { border-color: var(--accent-outline); }

#paste-box {
  display: block;
  width: 100%;
  min-height: 220px;
  resize: vertical;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--accent-outline);
  border-radius: var(--radius-ctl);
  color: var(--text);
  /* 16px minimum - iPhone Safari zooms the page when you tap a smaller text box. */
  font: 16px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-sizing: border-box;
}
@media (min-width: 768px) { #paste-box { min-height: 300px; } }
#paste-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.paste-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.paste-actions button, .paste-actions .button-link { margin-top: 0; }

.live-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.live-status.is-live { color: var(--accent); }
.live-status.is-live .live-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.new-link { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-row); background: var(--accent-soft); }
.new-link a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-weight: 600; text-decoration: none; }

.recent-row { gap: 12px; }
.recent-link { flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.recent-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.paste-view {
  margin: 0;
  padding: 14px;
  max-height: 70vh;
  overflow: auto;
  background: var(--surface-2);
  border: 1px solid var(--accent-outline);
  border-radius: var(--radius-ctl);
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* A link styled like the allocator's secondary buttons. */
.button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 18px; border-radius: var(--radius-ctl); font-weight: 650; font-size: 15px; text-decoration: none; color: var(--text); }
.button-link.secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--accent-outline); }

/* Settings gear - top LEFT here (the allocator's is top right). */
#settings-gear { order: -1; margin-left: 0; margin-right: 2px; position: static; }
@media (min-width: 1024px) { #settings-gear { position: static; width: 38px; height: 38px; background: none; border: none; } }
#settings-gear.active { color: var(--accent); background: var(--accent-soft); }
#view-settings > .card .hue-row { margin-top: 4px; }
.settings-note { margin: 10px 0 0; }
button.secondary.danger-btn { color: var(--danger); }
#logout-btn { margin-top: 0; }