/* CertifMail — App UI
   Design language: certifmail.fr (Inter, #2563eb accent, clean minimal) */

/* Self-hosted Inter variable font (downloaded at build time, see
   internal/web/CLAUDE.md). If the file is missing the browser silently
   falls back to the system-ui stack declared below. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/app/static/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/app/static/fonts/InterVariable.woff2') format('woff2');
}

:root {
  --ink: #2d3338;
  --ink-soft: #4a5158;
  --ink-mute: #6b7480;
  --bg: #fff;
  --bg-alt: #f6f7f9;
  --bg-soft: #fafbfc;
  --line: #e5e8ec;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: #eff4ff;
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 4px 20px -4px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--bg-alt);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

/* Layout */
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.main { flex: 1; padding: 48px 0; }

/* Header — kept in sync with certifmail_www (.site-header) for brand coherence */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
}
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo img { height: 44px; width: auto; display: block; }
.header-nav { display: flex; align-items: center; gap: 16px; }
.header-email { color: var(--ink-mute); font-size: 14px; }

/* Brand-provenance pill — mirrors .nav-numneo on certifmail_www. Rendered
   on the right of the header when anonymous (login/register/verify pages)
   so those pages don't look orphaned from the marketing site. */
.header-numneo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.4em 0.85em;
  font-size: 13px;
  color: var(--ink-mute);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.header-numneo strong { color: var(--ink); font-weight: 700; }
.header-numneo:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
}
.header-numneo:hover strong { color: var(--accent-dark); }

/* Footer */
.footer {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
}
.footer a { color: var(--ink-mute); }
.footer a:hover { color: var(--ink); }

/* Cards */
.card {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}
.card-narrow { max-width: 440px; margin: 0 auto; }
.card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.card-text { color: var(--ink-soft); margin-bottom: 24px; }
.card-bullets {
  color: var(--ink-soft);
  padding-left: 20px;
  margin: 0 0 24px;
}
.card-bullets li { margin-bottom: 6px; }
.card-bullets li:last-child { margin-bottom: 0; }

/* Status cards (/dl/ error pages, message.html). Icon + centered title so
   the page reads as "status" rather than "form". */
.card-status { text-align: center; }
.card-status .alert,
.card-status .card-text,
.card-status .card-bullets { text-align: left; }
.card-icon {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 16px;
  color: var(--ink-mute);
}
.card-icon-error { color: var(--danger); }
.card-ref {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
}
.card-ref code {
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  user-select: all;
}
.card-footer-text {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--ink-mute);
}

/* Trust line — small reassurance strip rendered between the primary
   submit button and the card footer on auth pages. Mirrors the
   "Gratuit · Sans engagement · …" microcopy from the marketing site. */
.trust-line {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

/* Forms */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  transition: border-color .15s ease;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input-code {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.form-hint {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.form-hint-danger {
  color: var(--danger);
  margin-top: 12px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
  text-decoration: none;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn-primary:hover {
  background: #1a1f24;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: #fff;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}
.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-full { width: 100%; }
.inline-form { display: inline; }
.actions-cell {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  white-space: nowrap;
}

/* Icon buttons — compact square actions used in the dashboard table.
   Same hover/focus semantics as .btn-ghost / .btn-danger, but sized to
   fit on a single table row regardless of how many sibling actions or
   how narrow the viewport. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-soft);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
  text-decoration: none;
}
.btn-icon:hover { text-decoration: none; }
.btn-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}
.btn-icon svg { width: 18px; height: 18px; display: block; }
.btn-icon-ghost { border-color: var(--line); color: var(--ink-soft); }
.btn-icon-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.btn-icon-danger { color: var(--danger); }
.btn-icon-danger:hover {
  background: var(--danger-soft);
  border-color: #fecaca;
}
.btn-icon-danger:focus-visible {
  box-shadow: 0 0 0 3px #fee2e2;
  border-color: var(--danger);
}

/* Alerts */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid #fecaca; }
.alert-success { background: var(--success-soft); color: var(--success); border: 1px solid #bbf7d0; }
.alert-info { background: var(--accent-soft); color: var(--accent); border: 1px solid #bfdbfe; }
.alert-warning { background: var(--warning-soft); color: var(--warning); border: 1px solid #fed7aa; }

/* Dashboard */
.dashboard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dashboard-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Table */
.table-wrap {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-soft); }
.mono { font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: 13px; }
.text-mute { color: var(--ink-mute); }

/* Visually hidden text for screen readers (used on icon-only column headers). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Dashboard archives table — column sizing.
   The actions column is locked to a width that fits both icon buttons
   so they never wrap on top of each other, and long subjects are
   truncated with ellipsis (full value remains available via tooltip). */
.table-archives { table-layout: auto; }
.table-archives th.col-num,
.table-archives td.col-num {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.table-archives th.col-actions,
.table-archives td.actions-cell {
  width: 92px;
  padding-left: 8px;
  padding-right: 16px;
}
.table-archives .cell-certid { white-space: nowrap; }
.table-archives .cell-nowrap { white-space: nowrap; }
.table-archives .cell-subject {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row count chip next to the dashboard title — useful when the list
   grows to a few dozen entries. */
.dashboard-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  margin-left: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  vertical-align: middle;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.empty-state p { margin-bottom: 8px; }

/* CGU banner */
.cgu-banner { margin-bottom: 24px; }
.cgu-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: center;
}

/* Danger zone */
.divider { border: none; border-top: 1px solid var(--line); margin: 40px 0; }
.danger-zone { margin-bottom: 40px; }
.danger-zone h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--danger);
  margin-bottom: 8px;
}
.delete-details { margin-top: 16px; }
.delete-details summary { list-style: none; cursor: pointer; }
.delete-details summary::-webkit-details-marker { display: none; }
.delete-form {
  margin-top: 16px;
  padding: 20px;
  background: var(--danger-soft);
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
}
.delete-form p { margin-bottom: 12px; color: var(--ink); font-size: 14px; }

/* Honeypot: visually hidden from humans, accessible to bots/screen readers
   differently. We position off-screen rather than display:none so bots that
   skip non-rendered fields still fill it. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Second honeypot using a different hide technique (collapsed box +
   visibility:hidden). Some bots skip off-screen fields but fill
   zero-size ones, or vice versa. Combining the two traps more bots. */
.honeypot-alt {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* Steps */
.card-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 28px 0 24px;
}
.register-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.steps-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50%;
}
.step strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 2px;
}
.step p {
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* Modal */
body.modal-open { overflow: hidden; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  animation: modal-fade .15s ease-out;
}
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md), 0 20px 60px -20px rgba(15,23,42,.25);
  padding: 28px;
  animation: modal-pop .18s cubic-bezier(.16,1,.3,1);
}
.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.modal-body {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 12px;
}
.modal-meta {
  display: inline-block;
  padding: 6px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 20px;
  word-break: break-all;
}
.modal-meta:empty { display: none; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Responsive */
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .main { padding: 24px 0; }
  .card { padding: 24px; }
  .header-inner { height: 72px; }
  .logo img { height: 36px; }
  .header-email { display: none; }
  .table th, .table td { padding: 10px 12px; }
  .table-archives .cell-subject { max-width: 180px; }
  .table-archives th.col-actions,
  .table-archives td.actions-cell { width: 86px; padding-right: 12px; }
  .cgu-actions { flex-direction: column; align-items: stretch; }
  .dashboard-header { align-items: center; }
  .modal { padding: 16px; align-items: flex-end; }
  .modal-panel { padding: 20px; border-radius: var(--radius) var(--radius) 0 0; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn, .modal-actions form { width: 100%; }
  .modal-actions form .btn { width: 100%; }
}