/* ==========================================================================
   OBLIVET — forms, modals, settings, and toast
   ========================================================================== */

/* --------------------------------------------------------------------------
   12. Forms & modals
   -------------------------------------------------------------------------- */
.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.modal {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  max-height: min(88vh, 800px);
  overflow-y: auto;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(255, 255, 255, 0.045), transparent 55%),
    #090909;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.modal--wide {
  width: min(100%, 620px);
}

.modal-layer.is-open .modal-scrim {
  opacity: 1;
}

.modal-layer.is-open .modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.modal-head h2 {
  margin-top: 7px;
  color: var(--white);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.modal-desc {
  margin-top: -8px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field label,
.field legend {
  padding: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 450;
  letter-spacing: 0.03em;
}

.field > input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-size: 12.5px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field > input::placeholder {
  color: var(--muted-dim);
}

.field > input:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.field > input:focus {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.045);
}

.field > input[type="date"] {
  color-scheme: dark;
}

.field > input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.42;
  cursor: pointer;
  filter: invert(1);
}

.input-affix {
  display: flex;
  align-items: center;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.input-affix:focus-within {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.045);
}

.input-affix > span {
  padding-left: 12px;
  color: var(--muted-dim);
  font-size: 12.5px;
}

.input-affix > input {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 12px 0 5px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.input-affix > input::-webkit-outer-spin-button,
.input-affix > input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}

.segmented label {
  position: relative;
  cursor: pointer;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 450;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.segmented label:hover span {
  color: var(--text-soft);
}

.segmented input:checked + span {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.segmented input:focus-visible + span {
  outline: 1.5px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
}

.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 10.5px;
  line-height: 1.45;
}

.field-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 7px;
  font-weight: 600;
}

.field-hint {
  color: var(--muted-dim);
  font-size: 10px;
  line-height: 1.45;
}

.field.has-error > input,
.field.has-error .input-affix,
.field.has-error .select-field {
  border-color: rgba(255, 255, 255, 0.62);
}

.modal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 22px;
  margin-top: 23px;
  border-top: 1px solid var(--line-soft);
}

/* Budget suggestions */
.budget-suggestions {
  margin-top: 20px;
}

.budget-suggestion-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.budget-suggestion {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 10.5px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}

.budget-suggestion:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.055);
  color: var(--white);
}

.modal-delete {
  margin-right: auto;
  color: var(--muted);
}

.modal-delete:hover {
  color: var(--white);
}

/* Settings */
.settings-field {
  gap: 12px;
}

.language-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.language-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

/* `.field label` resets label padding globally; restore the card inset. */
.settings-field .language-option {
  padding: 13px 14px;
}

.language-option:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.032);
}

.language-option:has(input:checked) {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.055);
}

.language-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.language-option-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.language-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 450;
}

.language-meta {
  color: var(--muted);
  font-size: 10.5px;
}

.language-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.language-mark svg {
  width: 12px;
  height: 12px;
}

.language-option input:checked ~ .language-mark {
  border-color: var(--white);
  background: var(--white);
  color: #050505;
}

.language-option input:focus-visible ~ .language-mark {
  outline: 1.5px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.settings-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 18px;
  margin-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.settings-note .status-dot {
  margin-top: 5px;
  opacity: 0.7;
}

.settings-note p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  z-index: 160;
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: calc(100vw - 32px);
  padding: 11px 11px 11px 17px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.94);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  color: var(--text-soft);
  font-size: 11.5px;
  opacity: 0;
  transform: translate(-50%, 12px);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-action {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--white);
  color: var(--bg);
  font-size: 10.5px;
  font-weight: 500;
  transition: background 0.2s var(--ease);
}

.toast-action:hover {
  background: #dcdcdc;
}

.toast-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--muted);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.toast-close svg {
  width: 10px;
  height: 10px;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}

/* Authentication / Cloudflare account gate */
.auth-screen{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:auto;padding:28px 16px;background:rgba(5,5,5,.96);backdrop-filter:blur(22px)}
.auth-screen[hidden]{display:none}
.auth-card{width:min(100%,430px);padding:clamp(24px,5vw,42px);border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(145deg,rgba(25,25,25,.98),rgba(10,10,10,.98));box-shadow:0 24px 100px rgba(0,0,0,.45)}
.auth-brand{display:inline-flex;margin-bottom:32px;text-decoration:none;color:inherit;font-size:20px;font-weight:600;gap:10px;align-items:center}.auth-brand-mark{font-size:28px}
.auth-card .eyebrow{font-size:10px;letter-spacing:.18em;color:#aaa;margin:0 0 10px}.auth-card h1{font-size:clamp(26px,5vw,34px);letter-spacing:-.04em;margin:0 0 10px}.auth-subtitle{font-size:14px;line-height:1.6;color:#aaa;margin:0 0 24px}
.auth-field{display:grid;gap:8px;margin:16px 0;font-size:12px;color:#ccc}.auth-field[hidden]{display:none}.auth-field input{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid #353535;border-radius:10px;background:#101010;color:#f5f5f5;font:inherit;font-size:14px;outline:none}.auth-field input:focus{border-color:#aaa;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.auth-submit,.auth-guest{width:100%;padding:13px 16px;border-radius:10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}.auth-submit{margin-top:8px;background:#f3f3f3;color:#090909;border:1px solid #f3f3f3}.auth-submit:disabled{opacity:.55;cursor:wait}.auth-mode-toggle{display:block;margin:14px auto 0;background:none;border:0;color:#ddd;font:inherit;font-size:12px;cursor:pointer}.auth-divider{display:flex;align-items:center;gap:12px;color:#777;font-size:11px;margin:22px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:#292929}.auth-guest{border:1px solid #353535;background:transparent;color:#ddd}.auth-message{margin-top:16px;padding:11px 12px;border-radius:9px;font-size:12px;line-height:1.5;background:#321d1d;color:#ffd1d1}.auth-message[hidden]{display:none}.auth-message.is-warning{background:#292519;color:#f2dfae}.auth-message.is-success{background:#183022;color:#c2f3d2}.auth-footnote{font-size:10px;line-height:1.5;color:#777;text-align:center;margin:18px 0 0}.user-account-chip{display:flex;align-items:center;gap:9px;max-width:210px;font-size:11px;color:#bbb}.user-account-chip[hidden]{display:none}.user-account-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-account-chip button{border:1px solid #383838;border-radius:7px;background:transparent;color:#ddd;padding:6px 8px;font:inherit;cursor:pointer}
@media(max-width:640px){.user-account-chip span{display:none}.auth-screen{align-items:start;padding-top:24px}.auth-card{margin:auto 0}}


/* Account management actions in Settings */
.settings-actions--stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
}
.btn--danger {
  border-color: rgba(235, 88, 88, 0.42);
  color: #ff9292;
}
.btn--danger:hover {
  border-color: rgba(255, 92, 92, 0.8);
  background: rgba(180, 30, 30, 0.14);
}
.account-management-field {
  padding-top: 15px;
  border-top: 1px solid var(--line);
}