:root {
  --paper: #efece4;
  --ink: #1c1916;
  --muted: #5a554c;
  --rule: #9a3d1a;
  --space: clamp(1.5rem, 4vw, 3rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

body.landing {
  display: grid;
  place-items: center;
  padding: var(--space);
  padding-bottom: calc(var(--space) + 2.5rem);
}

body.landing main {
  width: min(36rem, 100%);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
  text-decoration: none;
}

.logo img {
  width: 4.25rem;
  height: 4.25rem;
  flex: 0 0 auto;
  border-radius: 0.85rem;
}

.logo .pro {
  color: var(--rule);
  font-weight: 600;
}

.logo-sm {
  font-size: 1.55rem;
  margin-bottom: 1.35rem;
}

.logo-sm img {
  width: 2.75rem;
  height: 2.75rem;
}

.hero-mark {
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 0 1.15rem;
}

h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.5rem, 4vw + 1.4rem, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

h1.logo {
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  line-height: 1;
}

.lede {
  margin: 0;
  max-width: 22rem;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}

hr {
  display: block;
  width: 2.25rem;
  height: 0;
  margin: 2rem 0 1.15rem;
  border: 0;
  border-top: 1.5px solid var(--rule);
}

.status {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--muted);
}

body.app {
  display: block;
  place-items: unset;
  padding: 0;
  padding-bottom: 3rem;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--space);
}

.mark {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.narrow {
  width: min(28rem, 100%);
  margin: 2rem auto 0;
  padding: 0 var(--space);
}

.narrow h1 {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.35rem);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.stack label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.stack label.check-line,
.stack label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
}

.stack label.check-line.agree {
  align-items: flex-start;
  line-height: 1.4;
}

.stack label.check-line.agree input {
  margin-top: 0.15rem;
}

.stack label.check-line.agree a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.legal-note {
  margin: 1.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.legal-note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Honeypot field — never visible or tabbable for people. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.muted-inline {
  color: #5a554c;
  font-weight: 400;
  font-size: 0.85em;
}

.cf-turnstile {
  margin: 0.15rem 0 0.25rem;
}

.agree-main {
  width: min(34rem, 100%);
}

.agree-lede {
  margin: 0 0 0.75rem;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--muted);
}

.agree-main .legal-note {
  margin: 0 0 1.25rem;
}

.agree-main .actions {
  justify-content: space-between;
  margin-top: 0.35rem;
}

.stack input {
  font: inherit;
  color: var(--ink);
  padding: 0.55rem 0.65rem;
  border: 1px solid #c9c2b4;
  border-radius: 2px;
  background: #fff;
}

.stack input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--ink);
}

.stack button,
button.text {
  font: inherit;
  cursor: pointer;
}

.stack button:not(.btn) {
  margin-top: 0.25rem;
  padding: 0.6rem 1rem;
  border: 0;
  background: var(--ink);
  color: var(--paper);
}

.stack .btn {
  margin-top: 0.25rem;
}

button.text {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.875rem;
}

.err {
  margin: -0.4rem 0 0;
  font-size: 0.8125rem;
  color: #8a2b16;
}

.meta {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  width: auto;
  margin: 0;
  padding: 0.8rem 0.75rem 0.8rem 0.95rem;
  background: #fffdf8;
  color: #1a1714;
  border: 1px solid #e4dccf;
  border-left: 4px solid #2d6a3e;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(26, 23, 20, 0.16);
  font-size: 0.9rem;
  line-height: 1.45;
  animation: toast-in 0.3s ease-out both;
}

.toast--success,
.toast--info {
  animation: toast-in 0.3s ease-out both, toast-out 0.35s ease-in 5.5s forwards;
}

.toast:hover,
.toast:focus-within { animation-play-state: paused; }
.toast.is-closing { animation: toast-out 0.25s ease-in forwards; }
.toast__icon { flex: 0 0 auto; }
.toast__icon .icon-badge { width: 1.7rem; height: 1.7rem; border-radius: 999px; }
.toast__text { flex: 1; padding-top: 0.15rem; }
.toast__close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
}
.toast__close:hover,
.toast__close:focus-visible { opacity: 1; }
.toast--error { border-left-color: #9b2414; }
.toast--warning { border-left-color: #c4842a; }
.toast--info { border-left-color: #2a4f8f; }
@keyframes toast-in { from { transform: translateX(calc(100% + 1.5rem)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateX(calc(100% + 1.5rem)); opacity: 0; visibility: hidden; } }

.confirm-dialog {
  border: 0;
  border-top: 4px solid #2a4f8f;
  border-radius: 12px;
  padding: 1.35rem 1.5rem 1.15rem;
  width: 100%;
  max-width: min(30rem, calc(100vw - 2rem));
  background: #fffdf8;
  color: #1a1714;
  box-shadow: 0 18px 48px rgba(26, 23, 20, 0.28);
}
.confirm-dialog--danger { border-top-color: #9b2414; }
.confirm-dialog::backdrop { background: rgba(26, 23, 20, 0.45); }
.confirm-dialog__title { margin: 0 0 0.35rem; font-weight: 700; font-size: 1.05rem; }
.confirm-dialog__msg { margin: 0 0 1.25rem; line-height: 1.5; }
.confirm-dialog__actions { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .confirm-dialog[open] { animation: confirm-in 0.14s ease-out; }
  .confirm-dialog[open]::backdrop { animation: confirm-fade 0.14s ease-out; }
}
@keyframes confirm-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 600px) {
  .toast-stack { top: 0.6rem; left: 0.6rem; right: 0.6rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes toast-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes toast-out { to { opacity: 0; visibility: hidden; } }
}

a {
  color: inherit;
}

body.app main.wide {
  width: min(52rem, 100%);
  margin: 0 auto;
  padding: 0 var(--space);
}

body.app h1 {
  font-size: clamp(1.75rem, 2vw + 1.2rem, 2.4rem);
  margin-bottom: 0.4rem;
}

.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.58rem 1.05rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid #c9c2b4;
}

.btn.warn {
  background: transparent;
  color: #9b2414;
  border: 1px solid #e2b8b0;
}

.btn.warn:hover {
  background: #9b2414;
  color: #fffdf8;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.nav { display: flex; gap: 1rem; font-size: 0.9rem; }
.nav a { text-decoration: none; color: var(--muted); }
.top { gap: 1rem; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}

.filters label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.filters select,
.stack select {
  font: inherit;
  color: var(--ink);
  padding: 0.45rem 0.55rem;
  border: 1px solid #c9c2b4;
  background: #fff;
}

.filters button:not(.btn) {
  font: inherit;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
}

.tablewrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.6rem 0.55rem 0;
  border-bottom: 1px solid #ddd6c8;
  vertical-align: top;
}

th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.empty { color: var(--muted); max-width: 28rem; }

.due-overdue { color: #8a2b16; font-weight: 600; }
.due-soon { color: #8a3b12; }
.due-ok { color: var(--muted); }

.crumb { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.75rem; }
.crumb a { text-decoration: none; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid #ddd6c8;
  padding-bottom: 0.6rem;
}

.tabs a { text-decoration: none; color: var(--muted); font-size: 0.9rem; }
.tabs a.on { color: var(--ink); font-weight: 600; }

/* NOTE: this lives in landing.css, not app.css, because the sign-in, sign-up
   and reset pages use the public layout - which loads landing.css only. app.css
   is the signed-in application. landing.css is loaded by both, so shared controls
   belong here or they work on half the pages that have them. */

/* Show-password button, added by app.js to every password field.
   The wrapper takes the field's layout so the button can sit inside the box
   without the field changing width or the label moving - the input keeps
   width:100% of the wrapper rather than of whatever contained it before. */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 4.2rem; }
/* The :not(.btn) is not decoration - it is there to outrank
   `.stack button:not(.btn)` (0,2,1), which paints every unclassed button in a
   form as a solid dark submit button. A plain `.pw-eye` (0,1,0) loses to it and
   the toggle renders as a black block sitting on the field's border. Do not
   "simplify" this selector without checking that rule. */
.pw-wrap > button.pw-eye:not(.btn) {
  position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
  margin: 0;
  border: 1px solid var(--rule, #d7d2c8); background: #fff; color: var(--ink-2, #4a453d);
  font: inherit; font-size: .78rem; line-height: 1; letter-spacing: .02em;
  padding: .34rem .5rem; border-radius: 4px; cursor: pointer;
}
.pw-wrap > button.pw-eye:not(.btn):hover { background: #f4f1ea; }
/* A visible focus ring matters more here than usual: this is a control people
   reach by keyboard when a password manager has filled something they cannot
   read. */
.pw-wrap > button.pw-eye:not(.btn):focus-visible { outline: 2px solid var(--blue, #24518f); outline-offset: 1px; }