/* Phase 14 — Settings page additions.
 * Pillows are reused from 12-v2-components.css; this file adds:
 *   - the in-page "Mark of Cain" delete card,
 *   - the confirm modal (overlay + dialog),
 *   - a few inline-form alignment helpers that 03-practice.css does not cover.
 * Vanilla CSS; relies only on tokens declared in 00-v2-tokens.css.
 */

/* ── L1/L2 row tweaks (item 55) ──────────────────────────────────────── */
.v2-settings-langs select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--v2-surface);
  border: 1px solid var(--v2-hairline-strong);
  border-radius: var(--v2-r-sm);
  padding: 6px 28px 6px 10px;
  font: 500 14px/1.2 Inter, system-ui;
  color: var(--v2-ink);
  cursor: pointer;
  /* tiny disclosure chevron */
  background-image: linear-gradient(45deg, transparent 50%, var(--v2-ink-3) 50%),
                    linear-gradient(135deg, var(--v2-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.v2-settings-langs select:focus {
  outline: 2px solid var(--v2-brand-soft);
  outline-offset: 1px;
}

/* ── Time-per-day pillows (item 56) ──────────────────────────────────── */
.v2-pillow-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s-2, 8px);
  margin: 0 0 var(--v2-s-3, 12px);
}
.v2-daily-row {
  display: flex;
  align-items: center;
  gap: var(--v2-s-2, 8px);
  margin-top: var(--v2-s-2, 8px);
}
.v2-daily-row label {
  font: 500 13px/1 Inter, system-ui;
  color: var(--v2-ink-3, #8a877e);
}
.v2-daily-row input[type="number"] {
  width: 72px;
  padding: 6px 8px;
  border: 1px solid var(--v2-hairline-strong, #c9c5b9);
  border-radius: var(--v2-r-sm, 6px);
  font: 500 15px/1 Inter, system-ui;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--v2-surface, #fff);
  color: var(--v2-ink, #14140f);
}
.v2-daily-row input[type="number"]:focus {
  outline: 2px solid var(--v2-brand-soft, rgba(255,71,0,0.08));
  outline-offset: 1px;
}
.v2-daily-row .v2-tiny { color: var(--v2-ink-3, #8a877e); }

/* Saved flash used by v2-settings.js: shows briefly after a successful save. */
.v2-saved-flash {
  display: inline-block;
  margin-left: var(--v2-s-2, 8px);
  font: 500 12px/1 Inter, system-ui;
  color: var(--v2-correct, #2d8f43);
  opacity: 0;
  transition: opacity 200ms ease;
}
.v2-saved-flash.is-on { opacity: 1; }

/* ── Delete card (item 58) ───────────────────────────────────────────── */
.v2-delete-card {
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: var(--v2-r-md, 10px);
  background: var(--v2-surface, #fff);
  padding: var(--v2-s-4, 16px);
  margin-top: var(--v2-s-3, 12px);
}
.v2-delete-card h3 {
  margin: 0 0 var(--v2-s-2, 8px);
  font: 600 15px/1.3 Inter, system-ui;
  color: var(--v2-ink, #14140f);
}
.v2-delete-card ul {
  margin: 0 0 var(--v2-s-3, 12px);
  padding-left: 20px;
  font: 400 13px/1.6 Inter, system-ui;
  color: var(--v2-ink-2, #4a4842);
}
.v2-delete-card ul li { margin: 2px 0; }
.v2-delete-card .v2-warn {
  font-weight: 600;
  color: var(--v2-wrong, #c64545);
}
.v2-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--v2-wrong, #c64545);
  border-radius: var(--v2-r-sm, 6px);
  background: transparent;
  color: var(--v2-wrong, #c64545);
  font: 500 13px/1 Inter, system-ui;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.v2-delete-btn:hover {
  background: var(--v2-wrong, #c64545);
  color: #fff;
}

/* ── Confirm modal (item 58) ─────────────────────────────────────────── */
.v2-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 15, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--v2-s-3, 12px);
}
.v2-modal-overlay.is-open { display: flex; }
.v2-modal {
  background: var(--v2-surface, #fff);
  border-radius: var(--v2-r-lg, 14px);
  padding: var(--v2-s-5, 20px);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.v2-modal h2 {
  margin: 0 0 var(--v2-s-2, 8px);
  font: 600 18px/1.3 Inter, system-ui;
  color: var(--v2-ink, #14140f);
}
.v2-modal p {
  margin: 0 0 var(--v2-s-3, 12px);
  font: 400 14px/1.5 Inter, system-ui;
  color: var(--v2-ink-2, #4a4842);
}
.v2-modal ul {
  margin: 0 0 var(--v2-s-3, 12px);
  padding-left: 20px;
  font: 400 13px/1.6 Inter, system-ui;
  color: var(--v2-ink-2, #4a4842);
}
.v2-modal ul li { margin: 2px 0; }
.v2-modal .v2-modal-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--v2-hairline-strong, #c9c5b9);
  border-radius: var(--v2-r-sm, 6px);
  font: 500 15px/1.2 Inter, system-ui;
  background: var(--v2-surface, #fff);
  color: var(--v2-ink, #14140f);
  margin-bottom: var(--v2-s-3, 12px);
}
.v2-modal .v2-modal-input:focus {
  outline: 2px solid var(--v2-brand-soft, rgba(255,71,0,0.08));
  outline-offset: 1px;
}
.v2-modal .v2-modal-actions {
  display: flex;
  gap: var(--v2-s-2, 8px);
  justify-content: flex-end;
}
.v2-modal .v2-modal-cancel {
  padding: 8px 14px;
  border: 1px solid var(--v2-hairline-strong, #c9c5b9);
  border-radius: var(--v2-r-sm, 6px);
  background: transparent;
  color: var(--v2-ink-2, #4a4842);
  font: 500 13px/1 Inter, system-ui;
  cursor: pointer;
}
.v2-modal .v2-modal-confirm {
  padding: 8px 14px;
  border: 1px solid var(--v2-wrong, #c64545);
  border-radius: var(--v2-r-sm, 6px);
  background: var(--v2-wrong, #c64545);
  color: #fff;
  font: 500 13px/1 Inter, system-ui;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.v2-modal .v2-modal-confirm[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.v2-modal-error {
  margin: 0 0 var(--v2-s-2, 8px);
  font: 500 12px/1.4 Inter, system-ui;
  color: var(--v2-wrong, #c64545);
  min-height: 1em;
}

/* ── Login "deleted" toast (item 58 follow-up) ───────────────────────── */
.v2-deleted-toast {
  max-width: 400px;
  margin: 1.5rem auto 1rem;
  padding: 10px 14px;
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: var(--v2-r-md, 10px);
  background: var(--v2-surface-2, #f3f1ea);
  font: 400 14px/1.4 Inter, system-ui;
  color: var(--v2-ink-2, #4a4842);
  text-align: center;
}