/* A1Lane in-app chapter on the paper system (Fable redesign; Pax: paper/cream, never the
   composer frame's mint wash). Loaded after styles.css and product.css and only restyles:
   every class here already exists in the server-rendered templates. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --ledger: #0C3B2E; --ledger-2: #12493A; --verify: #2FBF71; --verify-ink: #0B6B3A;
  --paper: #F7F4EC; --paper-2: #EFEADD; --sheet: #FFFDF8; --ink: #122019; --ink-2: #3D4A43; --ink-3: #66726B;
  --rule: #D9D2C2; --amber: #A35F00; --amber-bg: #FBEBCC; --amber-line: #E3B25C;
  --bg: var(--paper); --fg: var(--ink); --muted: var(--ink-3); --line: var(--rule);
  --ok: var(--verify-ink); --warn: var(--amber); --bad: #A3261E; --info: #1F5FA8;
}
body { font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--paper); color: var(--ink); }
a { color: var(--ledger); text-underline-offset: 3px; }
a:hover { color: var(--verify-ink); }

/* header: the product bar */
body > header { background: var(--sheet); border-bottom: 1px solid var(--rule); padding: 10px 20px; position: sticky; top: 0; z-index: 5; }
body > header h1 { font-size: 1.1rem; letter-spacing: -0.02em; }
body > header h1 a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
body > header h1 a::before { content: ""; width: 24px; height: 24px; background: url("/mark.svg") center / contain no-repeat; }
.controls { font-size: .9rem; }

/* the 220 px ledger sidebar (workspace pages); a scroll strip on phones */
.app-frame { display: block; }
.ws-nav { background: var(--ledger); border: 0; padding: 8px 12px; display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ws-nav a { color: rgba(247, 244, 236, .82); text-decoration: none; padding: 8px 12px; border-radius: 8px; white-space: nowrap; margin: 0; font-size: .92rem; }
.ws-nav a:hover { color: #fff; background: var(--ledger-2); }
.ws-nav a.current { color: #fff; font-weight: 600; background: var(--ledger-2); box-shadow: inset 3px 0 0 var(--verify); }
@media (min-width: 960px) {
  .app-frame.has-nav { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 53px); }
  .has-nav .ws-nav { flex-direction: column; overflow: visible; padding: 20px 12px; position: sticky; top: 53px; align-self: start; height: calc(100vh - 53px); }
  .has-nav .ws-nav a { white-space: normal; }
}

main { max-width: 1100px; padding: 24px 20px 72px; min-width: 0; }
h2 { font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 12px; }
h3 { font-size: 1.05rem; }
section { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 20px; }
section section, .card section { border: 0; padding: 0; background: none; }
table { font-size: .92rem; }
th { color: var(--ink-3); font-weight: 600; }
th, td, li { border-bottom-color: var(--rule); }
.muted { color: var(--ink-3); font-size: .85rem; }

/* controls */
button, .button { min-height: 40px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 600 .92rem "Inter", system-ui, sans-serif; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
button[type="submit"], .button.primary { background: var(--ledger); border-color: var(--ledger); color: var(--paper); }
button[type="submit"]:hover, .button.primary:hover { background: var(--ledger-2); color: #fff; }
button.quiet { background: transparent; color: var(--ink-2); border-color: var(--rule); opacity: 1; }
button.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
input, select, textarea { font: inherit; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink); padding: 8px 10px; min-height: 40px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--ledger); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--verify); outline-offset: 2px; }
label { color: var(--ink-2); }
fieldset { border: 1px solid var(--rule); border-radius: 8px; }

/* state chips: the one vocabulary */
.status { font: 600 .7rem/1.6 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; border-radius: 999px; padding: 1px 9px; background: var(--paper-2); }
.status.published, .status.ok, .status.approved { background: #DDF5E7; color: var(--verify-ink); border-color: #9AD8B4; }
.status.failed, .status.revoked, .status.expired, .status.blocked { background: #F8E1DE; color: var(--bad); border-color: #E7A9A2; }
.status.uncertain, .status.needs_review, .status.partial, .status.deferred, .status.awaiting_human_finish, .status.expiring, .status.held, .status.held_same_asset, .status.pending_approval, .status.action_required_in_app { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.status.pending, .status.in_progress, .status.queued, .status.scheduled, .status.publishing, .status.draft, .status.unknown { background: #E4ECF6; color: var(--info); border-color: #B5C9E2; }

/* surfaces */
.card, .tile, .post { background: var(--sheet); border-color: var(--rule); border-radius: 10px; }
.cards { gap: 16px; }
.flash { background: #DDF5E7; border: 1px solid #9AD8B4; color: var(--verify-ink); border-radius: 8px; }
.warn-banner { background: var(--amber-bg); border-color: var(--amber-line); color: #5E3700; border-radius: 8px; }
.info-banner { background: #EEF3F9; border-color: #B5C9E2; border-radius: 8px; }
.onboarding li, .first-receipt { background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--verify); border-radius: 8px; }
.first-receipt { position: relative; padding: 16px 20px; }
.first-receipt::after { content: ""; position: absolute; right: 16px; top: 12px; width: 64px; height: 64px; background: url("/svg/stamp.svg") center / contain no-repeat; transform: rotate(-12deg); animation: stamp-land .42s cubic-bezier(.55, 0, 1, .45) both; }
@keyframes stamp-land { from { opacity: 0; transform: rotate(-12deg) scale(1.35); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
.empty { border-color: var(--rule); background: var(--paper); border-radius: 10px; }
.caption { background: var(--paper); border-radius: 8px; }
.badge { background: var(--paper-2); }
.badge.available_now { background: #DDF5E7; color: var(--verify-ink); }
.badge.in_review, .badge.awaiting_review { background: var(--amber-bg); color: var(--amber); }
.plan.current { border-color: var(--ledger); }
pre { background: var(--paper-2); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
code { font: .9em ui-monospace, Menlo, Consolas, monospace; }

/* composer: a sticky footer keeps the real submit (and the X price line above it) in reach */
form[data-autosave] > p:last-child { position: sticky; bottom: 0; background: var(--sheet); border-top: 1px solid var(--rule); margin: 16px -20px -20px; padding: 12px 20px; border-radius: 0 0 10px 10px; }

body > footer { padding: 20px; border-top: 1px solid var(--rule); background: var(--paper-2); font-size: .85rem; }

/* tables never push a phone wide */
main table { display: block; overflow-x: auto; max-width: 100%; }
main .table-scroll table { display: table; }

@media (prefers-reduced-motion: reduce) { .first-receipt::after { animation: none; } }
.first-connect { position: relative; border-left: 4px solid var(--verify); padding-right: 100px; }
.first-connect::after { content: "✓"; position: absolute; right: 24px; top: 50%; margin-top: -28px; width: 56px; height: 56px; border: 3px solid var(--verify); border-radius: 50%; color: var(--verify-ink); font: 700 1.8rem/50px "Inter", sans-serif; text-align: center; animation: stamp-land .42s cubic-bezier(.55, 0, 1, .45) .2s both; } /* a check, not the Stamp: no post has been read back yet */
@media (prefers-reduced-motion: reduce) { .first-connect::after { animation: none; } }
@media (min-width: 960px) { .app-frame.has-nav { background: linear-gradient(to right, var(--ledger) 220px, transparent 220px); } }
main input:not([type=checkbox]):not([type=radio]), main select, main textarea { max-width: 100%; }
body > header h1 { font-weight: 650; letter-spacing: 0; }
body > header h1 .wm-word { letter-spacing: -0.035em; }
body > header h1 .one { color: var(--verify); }