/* Marketing App — production additions on top of the Day Ledger tokens.
   Tokens are never overridden here; this file only adds what the live app
   needs and the static mockups did not (forms, auth pages, htmx states). */

.wordmark a { color: inherit; text-decoration: none; }

/* The switcher posts, so its items are buttons styled as the mockup's links. */
.org-menu form { margin: 0; }
.org-menu .org-item {
  display: block; width: 100%; text-align: left;
  font: 400 13px/1.3 var(--sans);
  color: var(--ink); background: none; border: 0;
  padding: 8px 20px; cursor: pointer;
}
.org-menu .org-item:hover { background: var(--panel); }
.org-menu .org-item[aria-current="true"] {
  font-weight: 600; border-left: 3px solid var(--ink); padding-left: 17px;
}

.rail-foot .signout { margin-top: 8px; }
.rail-foot .signout button {
  font: 400 11px/1.4 var(--mono);
  color: var(--faint); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.rail-foot .signout button:hover { color: var(--ink); }

/* ---------- messages ---------- */

.messages { margin: 18px 0 0; display: grid; gap: 8px; }
.messages .notice.success { border-left-color: var(--ok); }
.messages .notice.warning { border-left-color: var(--attn); }
.messages .notice.error   { border-left-color: var(--err); }

/* ---------- auth pages (stock Django views, same tokens) ---------- */

.auth-shell {
  min-height: 100vh; display: grid; place-items: center;
  padding: 40px 20px; background: var(--paper);
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 2px; padding: 28px 28px 32px;
}
.auth-card .wordmark {
  font: 600 17px/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 4px;
}
.auth-card .wordmark .tick { color: var(--attn); }
.auth-card .lede { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.auth-card .btn { width: 100%; text-align: center; margin-top: 22px; }
.auth-alt {
  margin: 18px 0 0; text-align: center;
  font: 400 12px/1.6 var(--mono); color: var(--muted);
}
.auth-alt a { color: var(--ink); }

/* ---------- forms ---------- */

/* Input types the mockup tokens do not cover, matched to them exactly. */
input[type="password"], input[type="datetime-local"], input[type="time"],
input[type="search"], input[type="tel"] {
  width: 100%;
  font: 400 14px/1.5 var(--sans);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 9px 11px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
select { appearance: auto; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

fieldset.plain { border: 0; margin: 0; padding: 0; }
fieldset.plain > legend {
  font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: 0; margin: 22px 0 2px;
}
.check {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 0; font-size: 14px;
}
.check input { margin-top: 3px; }
.errorlist {
  list-style: none; margin: 5px 0 0; padding: 0;
  font: 400 12px/1.5 var(--sans); color: var(--err);
}

/* ---------- tabs ---------- */

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 0 0 22px; }
.tabs a {
  font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding: 11px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- editor ---------- */

.editor textarea { min-height: 420px; font: 400 15px/1.65 var(--sans); }
.editor textarea.mono { font-family: var(--mono); font-size: 13px; }
.version-strip {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font: 400 11px/1.6 var(--mono); color: var(--muted);
  padding: 10px 0 0; border-top: 1px solid var(--line-soft); margin-top: 12px;
}
.version-strip a { color: var(--muted); }
.version-strip a[aria-current="true"] { color: var(--ink); font-weight: 600; }

/* ---------- diff-free body preview ---------- */

.prose { max-width: 40em; }
.prose h2 { font: 500 20px/1.3 var(--display); margin: 26px 0 8px; }
.prose h3 { font: 600 15px/1.3 var(--sans); margin: 20px 0 6px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }

/* ---------- filters bar ---------- */

.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 0 0 16px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
}
.filters label.f { margin: 0 0 5px; }
.filters .fgroup { min-width: 150px; }
.filters select, .filters input { padding: 7px 9px; font-size: 13px; }

/* ---------- variant comparison (A25) ---------- */

.variant-flag { font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.variant-flag.win { color: var(--ok); }
.variant-flag.lose { color: var(--err); }
.variant-flag.muted { color: var(--faint); }
.creative-thumb {
  width: 100%; max-width: 190px; border: 1px solid var(--line-soft); border-radius: 2px;
  display: block; background: var(--panel-dim);
}

/* ---------- htmx ---------- */

.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request .swap-target { opacity: .45; }

/* ---------- utilities ---------- */

.stack { display: grid; gap: 18px; }
.row-between { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; }
.mt18 { margin-top: 18px; }
.mb0 { margin-bottom: 0; }
.right { text-align: right; }
.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;
}

/* ---------- manual publish path (A19) ---------- */

.manual-post > summary {
  font: 600 13px/1 var(--sans);
  cursor: pointer; list-style: none;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 10px 16px; display: inline-block;
}
.manual-post > summary::-webkit-details-marker { display: none; }
.manual-post > summary:hover { border-color: var(--ink); }
.manual-post[open] > summary { border-color: var(--ink); margin-bottom: 14px; }
.manual-post .copybox { width: 100%; font: 400 13px/1.6 var(--mono); }
.mono-note {
  font: 500 10px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 0;
}