:root {
  --paper: #f7f6f2;
  --ink: #1a1a1a;
  --ink-55: rgba(26, 26, 26, 0.55);
  --cream: #eae8e2;
  --border: #d8d3c8;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
 
* {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
}
 
nav {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 28px 40px;
  background: var(--ink);
}
 
nav img {
  height: 34px;
}
 
nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
 
.nav-disabled {
  color: rgba(234, 232, 226, 0.35);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: default;
}
 
nav a.logo-link {
  display: flex;
  align-items: center;
}
 
.nav-cta {
  margin-left: auto;
  padding: 8px 16px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--cream);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
 
.nav-cta:hover {
  background: var(--paper);
}
 
main {
  padding: 32px;
}
 
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
 
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
 
th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-55);
}
 
.step-group-header {
  background: var(--ink);
  color: var(--cream);
  padding: 22px 20px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 40px 0 20px;
}
 
.step-card {
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  padding-bottom: 24px;
}
 
.step-card__title {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 18px;
}
 
.step-card__body {
  padding: 0;
}
 
.step-note {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}
 
.step-note strong {
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 3px;
}
 
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 24px 0 40px;
}
 
.stat-card {
  background: var(--paper);
  padding: 20px;
}
 
.stat-card__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
}
 
.stat-card__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-55);
  margin-top: 6px;
}
 
.form-error {
  color: #b3261e;
  font-weight: 600;
  margin-top: 12px;
  max-width: 640px;
  margin-left: auto;
  margin-right: 40px;
}
 
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
 
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
 
/* ------------
   Lodge an Item — auto-advancing form
   */
 
.lodge-page {
  padding: var(--space-6, 32px) 40px 120px;
}
 
.lodge-layout {
  position: relative;
  display: flex;
  justify-content: flex-end;
  max-width: 1800px;
  margin: 0 auto;
}
 
.lodge-layout__aside {
  position: relative;
  width: 96px;
  flex: 0 0 96px;
  pointer-events: none;
}
 
.lodge-layout__main {
  width: 75%;
  max-width: 1500px;
  min-width: 0;
  margin-right: 40px;
}
 
.lodge-plus {
  position: absolute;
  top: var(--plus-offset, 0px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
  opacity: 0.9;
  transition: top 0.3s ease;
}
 
.lodge-jumps {
  position: relative;
  pointer-events: none;
}
 
/* One per completed section, sitting in the aside where the section's own
   faded opacity can't touch it — always fully legible, always clickable. */
.lodge-jump {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-55);
  font-size: 11px;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
 
.lodge-jump:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper);
}
 
.lodge-heading {
  margin: 0 0 8px 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
 
.lodge-form {
  width: 100%;
  display: grid;
  gap: 0;
}
 
.lodge-section {
  display: grid;
  gap: 18px;
  opacity: 0.1;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 28px 0;
}
 
.lodge-section.is-active {
  opacity: 1;
  pointer-events: auto;
}
 
.lodge-section.is-complete {
  opacity: 0.16;
  pointer-events: auto;
}
 
.lodge-section + .lodge-section {
  border-top: 1px solid var(--border);
}
 
.lodge-section__header {
  display: grid;
  gap: 4px;
  margin-bottom: 6px;
}
 
.lodge-section__step {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-55);
}
 
.lodge-section__title {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  margin: 0;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
}
 
.lodge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
 
.lodge-grid--single {
  grid-template-columns: 1fr;
}
 
.lodge-field {
  display: flex;
  flex-direction: column;
}
 
.lodge-field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-55);
  margin-bottom: 6px;
}
 
.lodge-field input,
.lodge-field select,
.lodge-field textarea {
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color 0.15s ease;
}
 
.lodge-field input:hover,
.lodge-field textarea:hover {
  border-color: var(--ink-55);
}
 
.lodge-field input:focus,
.lodge-field textarea:focus {
  border-color: var(--ink);
}
 
.lodge-field textarea {
  resize: vertical;
}
 
/* 
   Dropdown — one component for every categorical field on the lodge form
 
   Closed, the control reads "Select category". Opened, the same box becomes
   the search field, so there is only ever one box per field on screen which
   is clearer and also will make the lodge item flow easier and hopefully feel
   quicker for the user .
  */
 
.dropdown {
  position: relative;
}
 
.dropdown__control {
  position: relative;
  display: block;
}
 
.dropdown__input {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease;
}
 
.dropdown__input::placeholder {
  color: var(--ink-55);
}
 
.dropdown__input:hover {
  border-color: var(--ink-55);
}
 
/* Open: the box is a live search field, so it reads as text entry. */
.dropdown__input:not([readonly]) {
  cursor: text;
  border-color: var(--ink);
}
 
.dropdown__input[aria-expanded="true"] {
  border-color: var(--ink);
}
 
.dropdown__chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  pointer-events: none;
}
 
.dropdown__input[aria-expanded="true"] ~ .dropdown__chevron {
  transform: rotate(-135deg);
  margin-top: -2px;
}
 
.dropdown__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--ink);
  max-height: 300px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.10);
}
 
/* An author `display` rule beats the browser's own [hidden] rule, so the
   hidden state has to be restated here or every panel renders at once. */
.dropdown__panel[hidden] {
  display: none;
}
 
.dropdown__options {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
 
.dropdown__option {
  padding: 11px 14px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease, color 0.12s ease;
  user-select: none;
}
 
.dropdown__option:last-child {
  border-bottom: none;
}
 
.dropdown__option:hover {
  background: var(--paper);
}

.dropdown__option.is-active {
  background: var(--paper);
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
 
.dropdown__option.is-selected {
  background: var(--ink);
  color: var(--cream);
}
 
.dropdown__hint {
  padding: 16px 14px;
  font-size: 13px;
  color: var(--ink-55);
}
 
/* Empty search result: the only place a new value can be added. */
.dropdown__empty {
  padding: 16px 14px;
  display: grid;
  gap: 12px;
  justify-items: start;
}
 
.dropdown__emptytext {
  margin: 0;
  font-size: 13px;
  color: var(--ink-55);
}
 
.dropdown__addnew {
  padding: 9px 18px;
  border: none;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.12s ease;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
.dropdown__addnew:hover {
  opacity: 0.88;
}
 
.dropdown__addnote {
  margin: -4px 0 0 0;
  font-size: 11px;
  color: var(--ink-55);
  font-style: italic;
}
 
.dropdown__footer {
  flex: 0 0 auto;
  display: flex;
  padding: 8px;
  border-top: 1px solid var(--border);
}
 
.dropdown__done {
  flex: 1;
  padding: 9px;
  border: none;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
 
.dropdown__done:hover {
  opacity: 0.88;
}
 
.lodge-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}
 
.lodge-submit {
  padding: 14px 28px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
 
.lodge-submit:hover {
  opacity: 0.9;
}
 
.form-feedback {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-55);
}
 
/* Success overlay: logo splash between one lodged item and the next,
// need to figure how to make it the image of the logo */
 
.lodge-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
 
.lodge-success-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
 
.lodge-success-overlay__mark {
  font-family: var(--font-sans);
  font-size: 15vw;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--cream);
  transform: scale(0.96);
  transition: transform 0.4s ease;
}
 
.lodge-success-overlay.is-visible .lodge-success-overlay__mark {
  transform: scale(1);
}
 
@media (min-width: 640px) {
  .lodge-success-overlay__mark {
    font-size: 5rem;
  }
}
 
/* Responsive */
 
@media (max-width: 1400px) {
  .lodge-layout__main {
    width: 82%;
  }
}
 
@media (max-width: 1000px) {
  .lodge-layout__aside {
    display: none;
  }
 
  .lodge-layout {
    justify-content: center;
  }
 
  .lodge-layout__main {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
}
 
@media (max-width: 640px) {
  .lodge-page {
    padding: 20px 16px 100px;
  }
 
  .lodge-heading {
    font-size: 26px;
  }
 
  .lodge-grid {
    grid-template-columns: 1fr;
  }
 
  .lodge-section__title {
    font-size: 22px;
  }
 
  .lodge-layout__main {
    max-width: 100%;
  }
 
  nav {
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 18px 20px;
  }
 
  .nav-cta {
    margin-left: 0;
  }
}

/* ==========================================================================
   Ledger pages — Wardrobe and Sales
   ========================================================================== */
 
.page {
  padding: 40px 40px 120px;
  max-width: 1800px;
  margin: 0 auto;
}
 
.page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 24px;
}
 
.page__title h1 {
  margin: 0 0 14px;
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
 
.page__stats {
  margin: 0;
  font-size: 15px;
  color: var(--ink-55);
}
 
.page__stats strong {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
 
.page__stat-gap {
  display: inline-block;
  width: 28px;
}
 
/* Sales figures set as a small ledger rather than large stat cards */
.page__ledger {
  margin: 0;
  display: grid;
  gap: 5px;
  font-size: 14px;
}
 
.page__ledger > div {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
 
.page__ledger dt {
  color: var(--ink-55);
  min-width: 220px;
}
 
.page__ledger dt strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
 
.page__ledger dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
 
/* Controls */
 
.controls {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
 
.control {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
 
.control:hover,
.control:focus {
  border-color: var(--ink);
}
 
.control--search {
  min-width: 240px;
}
 
.control--button {
  cursor: pointer;
}
 
.control--button.is-open {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
 
.control--primary {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  font-weight: 700;
}
 
.control--primary:hover {
  opacity: 0.9;
  border-color: var(--ink);
}
 
.control--quiet {
  color: var(--ink-55);
}
 
.control--number {
  width: 110px;
}
 
.control--add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
 
.control--add:hover {
  opacity: 0.9;
  border-color: var(--ink);
}
 
/* Hosts for BanqDropdown — the same control the lodge form uses */
 
.control-menu {
  min-width: 200px;
}
 
.control-menu--field {
  min-width: 200px;
}
 
.control-menu--value {
  min-width: 260px;
  flex: 1;
}
 
.control-menu--status {
  min-width: 190px;
}
 
.control-menu .dropdown__input {
  font-size: 14px;
  padding: 12px 38px 12px 14px;
}
 
/* A sold row's status reads as settled rather than pending */
.control-menu--status.is-done .dropdown__input {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  font-weight: 700;
}
 
.control-menu--status.is-done .dropdown__chevron {
  border-color: var(--cream);
}
 
/* Filter panel */
 
.filter-panel {
  border: 1px solid var(--border);
  background: #fff;
  padding: 18px;
  margin-bottom: 18px;
  display: grid;
  gap: 14px;
}
 
.filter-panel[hidden] {
  display: none;
}
 
.filter-panel__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
 
.filter-panel__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-55);
}
 
.filter-panel__dash {
  color: var(--ink-55);
}
 
.switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
 
/* Applied filter tokens, sitting above the rule that divides the figures
   from the table so the two read together. */
 
.tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
 
.tokens[hidden] {
  display: none;
}
 
.token {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
 
.token:hover {
  opacity: 0.85;
}
 
.token__x {
  opacity: 0.7;
  font-size: 14px;
  line-height: 1;
}
 
/* The ledger table */
 
.table-scroll {
  overflow-x: auto;
  border-top: 2px solid var(--ink);
}
 
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
 
.ledger thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper);
  padding: 16px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
 
.ledger tbody td {
  padding: 18px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
 
.ledger tbody tr[data-row]:hover td {
  background: rgba(26, 26, 26, 0.02);
}
 
/* Columns holding one short value shouldn't claim the same width as
   columns holding several chips — this is what left the gap by Brand. */
.ledger__tight {
  width: 1%;
  white-space: nowrap;
}
 
.ledger__date {
  width: 1%;
  white-space: nowrap;
}
 
/* Item name column stays put while the rest scrolls sideways */
.ledger__sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--paper);
  min-width: 250px;
  border-right: 2px solid var(--ink);
}
 
.ledger thead .ledger__sticky {
  z-index: 4;
}
 
.ledger tbody tr[data-row]:hover .ledger__sticky {
  background: #f2f1ec;
}
 
.ledger__name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
 
.ledger__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
 
.ledger__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
 
.ledger__money {
  font-weight: 700;
  font-size: 15px;
}
 
.ledger__actions,
.ledger__status {
  white-space: nowrap;
}
 
.ledger__actions {
  width: 1%;
}
 
/* Chips */
 
.chip {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}
 
/* Row controls */
 
.row-action {
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-55);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
 
.row-action:hover {
  color: var(--ink);
  border-color: var(--ink);
}
 
.row-action.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  font-weight: 700;
}
 
.row-expand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-55);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
 
.row-expand:hover {
  color: var(--ink);
  border-color: var(--ink);
}
 
.row-expand__chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
 
.row-expand.is-open {
  color: var(--ink);
  border-color: var(--ink);
}
 
.row-expand.is-open .row-expand__chevron {
  transform: translateY(1px) rotate(-135deg);
}
 
.row-note {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-55);
}
 
.row-note.is-error {
  color: #b3261e;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
 
/* Inline edit mode: read cells and edit cells swap */
 
.cell-edit {
  display: none;
}
 
.is-editing .cell-read {
  display: none;
}
 
.is-editing .cell-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
 
.cell-input {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  outline: none;
  min-width: 0;
  width: 100%;
}
 
.cell-input:hover {
  border-color: var(--ink-55);
}
 
.cell-input:focus {
  border-color: var(--ink);
}
 
.cell-input--num {
  text-align: right;
  max-width: 110px;
}
 
.cell-input--date {
  max-width: 150px;
}
 
/* Expandable wardrobe detail beneath a sales row */
 
.detail-row[hidden] {
  display: none;
}
 
.detail-row td {
  background: #f2f1ec;
  padding: 26px 14px 30px 24px;
  border-bottom: 1px solid var(--border);
}
 
.detail {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 32px;
}
 
.detail dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-55);
  margin-bottom: 8px;
}
 
.detail dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
 
.detail__money {
  font-weight: 700;
  font-size: 18px;
}
 
/* A row leaving because it crossed to the other page */
 
tr.is-leaving {
  opacity: 0;
  transition: opacity 0.35s ease;
}
 
.empty {
  padding: 48px 14px;
  text-align: center;
  color: var(--ink-55);
  font-size: 14px;
}
 
.empty[hidden] {
  display: none;
}
 
/* Responsive */
 
@media (max-width: 900px) {
  .page {
    padding: 24px 16px 100px;
  }
 
  .page__head {
    gap: 24px;
    padding-bottom: 20px;
  }
 
  .controls {
    width: 100%;
  }
 
  .control--search {
    flex: 1 1 100%;
    min-width: 0;
  }
 
  .control-menu,
  .control-menu--field,
  .control-menu--value {
    min-width: 0;
    flex: 1 1 100%;
  }
 
  .ledger__sticky {
    min-width: 180px;
  }
 
  .page__ledger dt {
    min-width: 0;
    flex: 1;
  }
}

/* ==========================================================================
   The front page — a newspaper you click through
 
   Six spreads share this stylesheet; script.js shows one at a time. The
   type does the work here: a Didone-ish serif for editorial voice, the
   existing sans for labels, and hairline rules instead of boxes.
   ========================================================================== */
 
:root {
  --paper-serif: "Times New Roman", Times, Georgia, serif;
}
 
.paper {
  position: relative;
  min-height: calc(100vh - 96px);
  padding: 0 0 96px;
  transition: background 0.4s ease, color 0.4s ease;
}
 
/* The dark spread takes the whole page with it. */
.paper.is-dark {
  background: var(--ink);
  color: var(--cream);
}
 
.spread {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px;
  animation: spreadIn 0.45s ease both;
}
 
.spread[hidden] {
  display: none;
}
 
@keyframes spreadIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
@media (prefers-reduced-motion: reduce) {
  .spread { animation: none; }
}
 
/* ---------------------------------------------------------- Masthead ---- */
 
.paper__masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 40px 0 28px;
  border-bottom: 3px solid var(--ink);
}
 
.paper__title {
  margin: 0;
  font-family: var(--paper-serif);
  font-size: clamp(56px, 11vw, 150px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 0.86;
  text-align: center;
}
 
.paper__ear {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  line-height: 1.7;
}
 
.paper__ear--right {
  text-align: right;
}
 
/* ------------------------------------------------------- Front columns -- */
 
.paper__columns {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 1fr;
  gap: 0;
  padding-top: 32px;
}
 
.paper__col {
  padding: 0 32px;
}
 
.paper__col--contents {
  padding-left: 0;
  border-right: 1px solid var(--border);
}
 
.paper__col--figures {
  padding-right: 0;
  border-left: 1px solid var(--border);
}
 
.paper__kicker {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
}
 
.paper__headline {
  margin: 0 0 20px;
  font-family: var(--paper-serif);
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
 
.paper__headline--wide {
  max-width: 22ch;
  font-size: clamp(30px, 3.6vw, 52px);
}
 
.paper__rule {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: 0 0 20px;
}
 
.paper__standfirst {
  margin: 0 0 22px;
  font-family: var(--paper-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
}
 
.paper__body {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.65;
  text-align: justify;
  hyphens: auto;
}
 
/* Drop cap, the one unmistakably newspaper flourish. */
.paper__body--drop::first-letter {
  float: left;
  font-family: var(--paper-serif);
  font-size: 4.6em;
  line-height: 0.78;
  padding: 6px 10px 0 0;
  font-weight: 700;
}
 
.paper__pull {
  margin: 0 0 28px;
  font-family: var(--paper-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
 
.paper__pull--centre {
  text-align: center;
  max-width: 26ch;
  margin: 48px auto 0;
  border-bottom: 0;
}
 
/* --------------------------------------------------------- Contents ----- */
 
.contents {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
.contents li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
 
.contents__title {
  display: block;
  font-family: var(--paper-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 6px;
}
 
.contents__page {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
 
/* ---------------------------------------------------------- Figures ----- */
 
.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ink);
  margin-bottom: 8px;
}
 
.figure {
  padding: 18px 16px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
 
.figure:nth-child(2n) { border-right: 0; }
.figure:nth-child(n+3) { border-bottom: 0; }
 
.figure__value {
  display: block;
  font-family: var(--paper-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
 
.figure__label {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-55);
}
 
.figures__note {
  margin: 0 0 28px;
  font-family: var(--paper-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-55);
}
 
/* ------------------------------------------------- Interior page head --- */
 
.spread__head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 36px 0 14px;
  border-bottom: 2px solid currentColor;
  margin-bottom: 36px;
}
 
.spread__mark {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
 
.spread__folio,
.spread__continued {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-55);
}
 
.spread__continued {
  text-align: right;
  font-family: var(--paper-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
 
/* ------------------------------------------------------------ Steps ----- */
 
.steps {
  list-style: none;
  margin: 56px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
 
.step {
  position: relative;
}
 
/* The dot that sits on the rule above each step. */
.step::before {
  content: "";
  position: absolute;
  top: -31px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}
 
.step__number {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-right: 10px;
}
 
.step__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
 
.step__body {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
}
 
/* -------------------------------------------------- Before and after ---- */
 
.beforeafter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
 
.beforeafter__side {
  padding: 44px 40px;
}
 
.beforeafter__side--after {
  border-left: 1px solid var(--ink);
}
 
.beforeafter__line {
  margin: 0 0 20px;
  font-family: var(--paper-serif);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.3;
}
 
.beforeafter__side:not(.beforeafter__side--after) .beforeafter__line {
  color: var(--ink-55);
}
 
/* ---------------------------------------------------- Single decision --- */
 
.spread--dark {
  color: var(--cream);
}
 
.spread--dark .spread__folio,
.spread--dark .spread__mark {
  color: rgba(234, 232, 226, 0.6);
}
 
.decision {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding: 40px 0 60px;
}
 
.decision__line {
  margin: 0 0 16px;
  font-family: var(--paper-serif);
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.45;
}
 
.decision__side--right {
  text-align: right;
}
 
.decision__object {
  text-align: center;
}
 
/* A garment suggested with type and rule rather than a photograph, so the
   page carries no image weight and stays sharp at any size. */
.decision__garment {
  display: block;
  width: clamp(140px, 18vw, 230px);
  height: clamp(170px, 22vw, 280px);
  margin: 0 auto 18px;
  border: 1px solid rgba(234, 232, 226, 0.35);
  background:
    linear-gradient(rgba(234, 232, 226, 0.05), rgba(234, 232, 226, 0));
}
 
.decision__caption {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(234, 232, 226, 0.6);
}
 
.decision__verdict {
  margin: 0;
  text-align: center;
  font-family: var(--paper-serif);
  font-size: clamp(44px, 8vw, 104px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
 
.decision__sub {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(234, 232, 226, 0.6);
}
 
/* --------------------------------------------------------- Glossary ----- */
 
.glossary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  padding-top: 28px;
}
 
.glossary__col {
  margin: 0;
  padding: 0 32px;
  border-right: 1px solid var(--border);
}
 
.glossary__col:first-child { padding-left: 0; }
.glossary__col:last-child { padding-right: 0; border-right: 0; }
 
.glossary dt {
  font-family: var(--paper-serif);
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 8px;
}
 
.glossary__pos {
  font-family: var(--paper-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-55);
  margin-left: 6px;
}
 
.glossary dd {
  margin: 0 0 28px;
  font-family: var(--paper-serif);
  font-size: 15px;
  line-height: 1.5;
}
 
.glossary dd em {
  color: var(--ink-55);
}
 
/* ------------------------------------------------------------ Ending ---- */
 
.ending {
  text-align: center;
  padding: 60px 0 40px;
  max-width: 30ch;
  margin: 0 auto;
}
 
.ending__headline {
  margin: 0 0 20px;
  font-family: var(--paper-serif);
  font-size: clamp(52px, 9vw, 120px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
 
.ending__body {
  margin: 0 0 40px;
  font-family: var(--paper-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
}
 
.ending__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
 
.ending__action {
  padding: 14px 26px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
 
.ending__action:hover {
  background: var(--ink);
  color: var(--cream);
}
 
.ending__action--primary {
  background: var(--ink);
  color: var(--cream);
}
 
.ending__action--primary:hover {
  opacity: 0.88;
}
 
/* -------------------------------------------------------- Page turner --- */
 
.paper__nav {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  background: var(--paper);
  border: 1px solid var(--border);
}
 
.paper.is-dark .paper__nav {
  background: var(--ink);
  border-color: rgba(234, 232, 226, 0.3);
}
 
.paper__arrow {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
 
.paper__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}
 
.paper__dots {
  display: flex;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
 
.paper__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s ease, background 0.15s ease;
}
 
.paper__dot.is-current {
  background: currentColor;
  opacity: 1;
}
 
.paper__hint {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 20;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  pointer-events: none;
  animation: hintPulse 2.6s ease-in-out infinite;
}
 
.paper.is-dark .paper__hint {
  color: rgba(234, 232, 226, 0.6);
}
 
.paper__hint[hidden] {
  display: none;
}
 
@keyframes hintPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
 
@media (prefers-reduced-motion: reduce) {
  .paper__hint { animation: none; opacity: 0.7; }
}
 
/* Current page marker in the main nav, set by script.js */
nav a.is-current {
  border-bottom: 2px solid var(--cream);
  padding-bottom: 2px;
}
 
/* -------------------------------------------------------- Responsive ---- */
 
@media (max-width: 1100px) {
  .paper__columns {
    grid-template-columns: 1fr 1fr;
  }
 
  .paper__col--contents {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 0 24px;
    margin-bottom: 24px;
  }
 
  .contents {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 28px;
  }
 
  .paper__col--lead { padding-left: 0; }
 
  .glossary { grid-template-columns: 1fr 1fr; }
  .glossary__col:nth-child(2) { padding-right: 0; border-right: 0; }
  .glossary__col:nth-child(3) { grid-column: 1 / -1; padding: 28px 0 0; border-top: 1px solid var(--border); }
}
 
@media (max-width: 760px) {
  .spread {
    padding: 0 16px;
  }
 
  .paper__masthead {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
    padding: 24px 0 18px;
  }
 
  .paper__ear,
  .paper__ear--right {
    text-align: center;
  }
 
  .paper__columns {
    grid-template-columns: 1fr;
  }
 
  .paper__col {
    padding: 0;
  }
 
  .paper__col--figures {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 28px;
    margin-top: 28px;
  }
 
  .paper__body {
    text-align: left;
  }
 
  .spread__head {
    grid-template-columns: auto 1fr;
    row-gap: 4px;
  }
 
  .spread__continued {
    grid-column: 1 / -1;
    text-align: left;
  }
 
  .steps {
    grid-template-columns: 1fr;
    gap: 34px;
  }
 
  .step::before { display: none; }
 
  .beforeafter {
    grid-template-columns: 1fr;
  }
 
  .beforeafter__side {
    padding: 30px 0;
  }
 
  .beforeafter__side--after {
    border-left: 0;
    border-top: 1px solid var(--ink);
  }
 
  .decision {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
  }
 
  .decision__side--right {
    text-align: center;
  }
 
  .glossary {
    grid-template-columns: 1fr;
  }
 
  .glossary__col {
    padding: 0 0 8px;
    border-right: 0;
  }
 
  .glossary__col:nth-child(3) {
    padding-top: 0;
    border-top: 0;
  }
 

  .paper__hint {
    display: none;
  }
}

.paper__turn {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ==========================================================================
   Brand pass — the wordmark as image, full-page plates, edit dropdowns
 
   Appended after the existing rules on purpose: where a value changes (the
   nav logo height, the lodge splash mark) the later rule simply wins, so
   nothing above needs touching.
   ========================================================================== */
 
/* The wordmark in the site banner, larger. */
nav img {
  height: 52px;
}
 
/* The lodge splash mark is now the light wordmark image on ink. */
.lodge-success-overlay__mark {
  width: min(70vw, 720px);
  height: auto;
  transform: scale(0.96);
  transition: transform 0.4s ease;
}
 
/* The masthead wordmark on the front page. */
.paper__title-logo {
  display: block;
  width: min(72vw, 900px);
  height: auto;
  margin: 0 auto;
}
 
/* The small wordmark at the head of each interior page. */
.spread__mark-logo {
  display: block;
  height: 22px;
  width: auto;
}
 
/* A plate is a full-page print: one artwork, edge to edge, so it carries
   no page head of its own. */
.spread--plate .spread__head {
  display: none;
}
 
.spread--plate {
  padding: 24px 40px 0;
  text-align: center;
}
 
.spread__plate {
  display: block;
  width: 100%;
  max-width: 1500px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--border);
}
 
.spread--dark .spread__plate {
  border-color: rgba(234, 232, 226, 0.2);
}
 
.plate__action {
  margin: 28px 0 0;
}
 
/* Until the reader first turns a page, the front page owns the screen. */
body.paper-fullscreen nav {
  display: none;
}
 
/* Edit-mode dropdown hosts inside table cells. */
.cell-dd {
  min-width: 170px;
}
 
.cell-edit--stack {
  flex-direction: column;
  align-items: stretch;
}
 
.is-editing .cell-edit--stack {
  display: flex;
  gap: 8px;
}
 
@media (max-width: 760px) {
  .spread--plate {
    padding: 12px 12px 0;
  }
}

/* Coming-soon note at the foot of the guide */
.coming-soon {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-55);
}
 
.coming-soon strong {
  color: var(--ink);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-right: 8px;
}