:root {
  --sea: #EDF3EF;
  --panel: #FFFFFF;
  --ink: #16332D;
  --dim: #53716A;
  --hairline: #C9D9D2;
  --accent: #C42B85;
  --wash: #E0EAE5;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--sea);
  color: var(--ink);
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }

.topbar {
  display: flex;
  align-items: baseline;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--hairline);
  background: var(--panel);
}
.brand {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  font-size: 1rem;
  text-decoration: none;
}
.topbar nav {
  display: flex;
  gap: .8rem 1.4rem;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.topbar nav a { text-decoration: none; color: var(--dim); padding-bottom: 2px; }
.topbar nav a[aria-current] { color: var(--ink); border-bottom: 2px solid var(--accent); }
.topbar nav .nav-end { margin-left: auto; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

main {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 2.5rem) 1rem 4rem;
  flex: 1;
}
h1 {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: .4rem;
}
.lede { color: var(--dim); margin-bottom: 1.8rem; font-style: italic; }

.flash {
  border: 1px solid var(--hairline);
  background: var(--panel);
  padding: .7rem 1rem;
  margin-bottom: 1.4rem;
  font-size: .95rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.2rem;
}
.card .meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.card h2 {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.options { display: grid; gap: .6rem; }
.option {
  display: flex;
  align-items: baseline;
  gap: .6rem 1rem;
  flex-wrap: wrap;
  border: 1px solid var(--hairline);
  padding: .75rem 1rem;
  background: var(--sea);
}
.option form { flex-shrink: 0; max-width: 100%; }
.option .price { font-size: .9rem; color: var(--dim); flex: 1 1 240px; min-width: 0; }
.option button { white-space: normal; text-align: left; }
.option .price .conf { font-family: "IBM Plex Mono", monospace; font-size: .68rem; }
details.reprice { display: inline-block; margin-left: .5rem; }
details.reprice summary {
  font-family: "IBM Plex Mono", monospace;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  display: inline;
}
.reprice-form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: end;
  margin-top: .5rem;
  padding: .6rem;
  border: 1px solid var(--hairline);
  background: var(--panel);
}
.reprice-form label { display: flex; gap: .3rem; align-items: center; font-size: .78rem; color: var(--dim); }
.reprice-form input[type=number] { width: 90px; padding: .3rem .4rem; }
.reprice-form input[type=text] { width: 200px; padding: .3rem .4rem; }
.reprice-form select { width: auto; padding: .3rem .4rem; }
.reprice-form button {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--panel);
  border: 1px solid var(--ink);
  padding: .35rem .7rem;
  cursor: pointer;
}
.option button, .btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: .45rem .9rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.option button:hover, .btn:hover { background: var(--ink); color: var(--sea); }

details.context { margin-top: 1rem; }
details.context summary {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
}
details.context div {
  border-left: 2px solid var(--hairline);
  margin-top: .6rem;
  padding: .3rem 0 .3rem 1rem;
  font-size: .92rem;
  color: var(--dim);
}

.plan {
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: .9rem 1.2rem;
  margin-bottom: .9rem;
}
.plan .meta { font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.plan .undo { float: right; }
.plan .undo button {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  background: none;
  border: none;
  color: var(--dim);
  text-decoration: underline;
  cursor: pointer;
}

.ledger-line {
  display: flex;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: .92rem;
  align-items: baseline;
}
.ledger-line span { min-width: 0; overflow-wrap: anywhere; }
.ledger-line code { overflow-wrap: anywhere; }
.ledger-line time {
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  color: var(--dim);
  white-space: nowrap;
}
.empty {
  border: 1px dashed var(--hairline);
  padding: 2rem;
  text-align: center;
  color: var(--dim);
  font-style: italic;
}

form.stack { display: grid; gap: 1rem; max-width: 560px; }
label { display: grid; gap: .3rem; font-size: .92rem; }
label span.lbl {
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=datetime-local], input[type=date], select, textarea {
  font: inherit;
  padding: .55rem .7rem;
  border: 1px solid var(--hairline);
  background: var(--panel);
  color: var(--ink);
  width: 100%;
}
textarea { min-height: 90px; resize: vertical; }

.opt-row {
  border: 1px solid var(--hairline);
  background: var(--panel);
  padding: 1rem;
  display: grid;
  gap: .7rem;
}
.opt-row .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (max-width: 560px) { .opt-row .grid3 { grid-template-columns: 1fr; } }

.section-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 2.2rem 0 .9rem;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: .4rem;
}

.foot {
  border-top: 1px solid var(--hairline);
  padding: .8rem clamp(1rem, 4vw, 2.5rem);
  font-size: .8rem;
  color: var(--dim);
  background: var(--panel);
}

.login-wrap { min-height: 70vh; display: grid; place-items: center; }
.login-card { width: min(380px, 100%); }
.login-card .brand-big {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  font-size: 1.3rem;
  text-align: center;
  display: block;
  margin-bottom: 1.4rem;
}
table.plain { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.plain th {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--hairline);
}
table.plain td { padding: .55rem .6rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }