/* Neko home dashboard — shared styles */

@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Commit Mono"; src: url("/fonts/commit-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Commit Mono"; src: url("/fonts/commit-mono-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Commit Mono"; src: url("/fonts/commit-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --paper: #F5EEE2;   /* sampled from the landing mockup */
  --ink: #03144C;     /* sampled from the illustration and logo */
  --ink-soft: rgba(3, 20, 76, 0.55);
  --rule: rgba(3, 20, 76, 0.2);
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --mono: "Commit Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Placeholder screenshots carry a cream background; darken keeps the paper colour. */
.ink-image { mix-blend-mode: darken; display: block; }

/* ---------- Landing ---------- */

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  gap: 40px;
}

.dateline { text-align: center; }

.dateline .date {
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
}

.dateline .place {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dateline .weather {
  margin-left: 0.6em;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-soft);
}

.illustration { width: min(320px, 80vw); height: auto; }

.masthead {
  display: flex;
  align-items: flex-start;
  gap: 72px;
}

.logo { width: 72px; height: auto; }

.nav { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; width: max-content; }

/* Links share one measure (the widest, "Immich Photo Library"); shorter
   links spread their letters or words across it, as in the mockup. */
.nav a, .nav .placeholder {
  display: flex;
  justify-content: space-between;
  font-style: italic;
  font-size: 13px;
  text-decoration: none;
  white-space: pre;
}

.nav a:hover, .nav a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.nav a:focus-visible { outline: 1px dotted var(--ink); outline-offset: 4px; }

.nav .placeholder { cursor: default; }

/* ---------- Inner pages ---------- */

.page {
  max-width: 1048px;
  margin: 0 auto;
  padding: 56px 104px 80px;
}

.crumbs {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.page-title {
  font-weight: 400;
  font-size: 64px;
  line-height: 1.05;
  margin: 28px 0 40px;
}

.mono { font-family: var(--mono); font-size: 13px; line-height: 1.6; }

@media (max-width: 640px) {
  .landing { justify-content: flex-start; gap: 32px; padding-top: 40px; }
  .masthead { gap: 40px; }
  .page { padding: 32px 16px 56px; }
  .page-title { font-size: 44px; margin: 20px 0 28px; }
}

/* ---------- Budget ---------- */

.muted { color: var(--ink-soft); }
.center { text-align: center; }

.label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.hero {
  font-family: var(--mono);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.footnote { margin-top: 56px; font-size: 11px; }

.ledger { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 13px; }
.ledger li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
}
.ledger li > :first-child { min-width: 0; }
.ledger li > :last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger a { text-decoration: none; }
.ledger a:hover { text-decoration: underline; text-underline-offset: 3px; }

.budget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
}
.budget-grid .block .hero { margin-bottom: 4px; }
.budget-grid .block .ledger { margin-top: 24px; }
.budget-grid .block > .mono { margin: 0; }
.budget-grid .block > .mono + .mono { margin-top: 24px; }

.overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.pie { width: 100%; height: auto; display: block; overflow: visible; }
.pie-col .hero { margin-top: 12px; }
.pie-col p { margin: 4px 0 0; }

.slice { fill: rgba(3, 20, 76, 0.12); stroke: var(--paper); stroke-width: 2; cursor: default; transition: fill 120ms; }
.slice.active { fill: var(--ink); }
.leader { fill: none; stroke: var(--ink); stroke-width: 1; }
.leader-dot { fill: var(--paper); }
.callout-name { font-family: var(--serif); font-size: 15px; fill: var(--ink); }
.callout-value { font-family: var(--mono); font-size: 11px; fill: var(--ink); }

.lists { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px; }
.categories li { cursor: default; }
.categories li.active { font-weight: 700; }
.categories li:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }

@media (max-width: 860px) {
  .budget-grid { grid-template-columns: 1fr; gap: 40px; }
  .overview { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 480px) {
  .lists { grid-template-columns: 1fr; }
  .hero { font-size: 34px; }
}

/* ---------- Consolidation (Neko Corp. ledger) ---------- */

.page-wide { max-width: 1180px; padding-left: 48px; padding-right: 48px; }

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
  margin-top: 28px;
}

.ledger-sheet {
  --sheet: #DCE3EA;
  background-color: var(--sheet);
  /* faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.01 0 0 0 0 0.08 0 0 0 0 0.3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  padding: 48px 44px 40px;
}

.sheet-title {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 34px;
  text-align: center;
  margin: 0;
}
.sheet-sub { font-family: var(--mono); font-size: 11px; text-align: center; color: var(--ink-soft); margin: 8px 0 36px; }

.sheet { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.sheet .c-mark { width: 22px; }
.sheet .c-date { width: 64px; }
.sheet .c-amt { width: 84px; }
.sheet .c-note { width: 34%; }
.sheet thead th {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 13px;
  padding: 6px 8px;
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--ink);
}
.sheet th + th, .sheet td + td { border-left: 1px solid var(--ink); }
.sheet td { padding: 6px 8px; border-bottom: 1px solid var(--ink); vertical-align: top; }
.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet td.note { color: var(--ink-soft); overflow-wrap: anywhere; }
.sheet tbody tr { cursor: pointer; }
.sheet tbody tr:hover td { background: rgba(3, 20, 76, 0.04); }
.sheet tbody tr:focus-visible { outline: 1px dotted var(--ink); outline-offset: -2px; }
.sheet td.mark { text-align: center; padding-left: 0; padding-right: 0; font-size: 14px; line-height: 1; }
.sheet th:first-child + th, .sheet td.mark + td { border-left: none; }
/* In this batch: marked, bold, split shown in the note column. */
.sheet tr.in-batch td { font-weight: 700; }
.sheet tr.in-batch td.note { color: var(--ink); }
/* Confirmed on Discord (not in this batch): struck through, as in the mockup. */
.sheet tr.confirmed td:not(.note):not(.mark) { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--ink-soft); }
.sheet tr.selected td { color: var(--ink); background: rgba(3, 20, 76, 0.09); }
.sheet tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.sheet tr.editor-row td { padding: 16px 4px 20px; cursor: default; background: transparent; }

.split-side { position: sticky; top: 24px; display: grid; gap: 40px; }

.btn {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 6px 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn:focus-visible { outline: 1px dotted var(--ink); outline-offset: 3px; }
.btn.small { font-size: 10px; padding: 4px 8px; box-shadow: 1px 1px 0 var(--ink); }
.btn.step { width: 32px; height: 26px; padding: 0; font-size: 15px; box-shadow: 1px 1px 0 var(--ink); text-transform: none; }

.submit-bar { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.submit-bar label { grid-column: 1 / -1; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.submit-bar input, .editor textarea {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 6px 2px;
  width: 100%;
  border-radius: 0;
}
.submit-bar input:focus, .editor textarea:focus { outline: none; border-bottom-width: 2px; }
.submit-msg, .submit-help { grid-column: 1 / -1; font-size: 11px; margin: 0; }
.submit-help { font-size: 10px; }

.editor-title { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; margin: 0 0 6px; overflow-wrap: anywhere; }
.editor p { margin: 0 0 6px; font-size: 11px; }
.ed-note { font-style: italic; }

.counters { display: grid; gap: 6px; margin: 22px 0 18px; }
.counter { display: grid; grid-template-columns: 76px 32px 40px 32px 1fr; gap: 6px; align-items: center; }
.counter .who { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.counter .count {
  font-family: var(--mono);
  font-size: 15px;
  text-align: center;
  border: 1px solid var(--ink);
  background: #fff8;
  height: 26px;
  line-height: 24px;
}
.counter .part { font-size: 11px; padding-left: 8px; }

.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.label-sm { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.editor textarea { resize: vertical; margin: 4px 0 18px; }
.next { float: right; }

@media (max-width: 860px) {
  .page-wide { padding: 32px 16px 56px; }
  .split-layout { grid-template-columns: 1fr; gap: 24px; }
  .split-side { position: static; order: -1; }
  .ledger-sheet { padding: 28px 12px 24px; }
  .sheet .c-note { width: 0; }
  .sheet th:nth-child(5), .sheet td.note { display: none; }
}

/* ---------- Sign-in ---------- */

.signin { gap: 36px; }
.signin .logo { width: 96px; }
.signin .btn { text-decoration: none; padding: 10px 22px; }
.signin-msg { max-width: 360px; text-align: center; font-size: 12px; min-height: 1em; }

.whoami {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 11px;
  color: var(--ink-soft);
}
.whoami a { color: var(--ink); }

.budget-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 56px; font-size: 12px; }
.budget-links a { text-underline-offset: 3px; }
.budget-grid .block .ledger + .mono { margin-top: 14px; }

/* ---------- Cooking ---------- */

/* Week: the mockup's scattered days, on a 12-column grid. */
.week {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(110px, auto);
  column-gap: 24px;
  row-gap: 28px;
  margin-top: 24px;
}
.week-title { grid-column: 1 / 7; grid-row: 1; font-weight: 400; font-size: 76px; line-height: 1; margin: 8px 0 0; }
.day-sunday    { grid-column: 7 / 11; grid-row: 1; }
.day-monday    { grid-column: 2 / 6;  grid-row: 2; }
.day-wednesday { grid-column: 7 / 11; grid-row: 2; margin-top: 20px; }
.day-tuesday   { grid-column: 4 / 8;  grid-row: 3; }
.day-saturday  { grid-column: 9 / 13; grid-row: 3; }
.day-thursday  { grid-column: 2 / 6;  grid-row: 4; }
.day-friday    { grid-column: 7 / 11; grid-row: 4; margin-top: 16px; }

.day { font-family: var(--mono); font-size: 13px; line-height: 1.45; }
.day-name {
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 10px;
  cursor: pointer;
}
.day-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.day-name:focus-visible { outline: 1px dotted var(--ink); outline-offset: 3px; }
.day .today { font-weight: 400; color: var(--ink-soft); }
.day.is-today { border-left: 3px solid var(--ink); padding-left: 12px; margin-left: -15px; }
.meal { margin: 0; }
.meal a { text-decoration: none; }
.meal a:hover { text-decoration: underline; text-underline-offset: 3px; }

.day-notes {
  margin-top: 40px;
  padding: 24px 28px;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  max-width: 760px;
}
.day-notes .notes-title { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 12px; }
.day-notes .label { margin: 18px 0 4px; }
.day-notes p { margin: 0; }
.day-notes .btn { margin-top: 18px; }

.cooking-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 48px 0 24px; font-size: 13px; }
.cooking-links a { text-underline-offset: 3px; }

.about-week { max-width: 760px; font-size: 12px; line-height: 1.6; margin-bottom: 32px; }
.about-week summary { cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.about-week p { margin: 12px 0 0; }

.also { margin-bottom: 32px; }
.also .extra-day { max-width: 420px; }
.all-recipes { margin-top: 16px; }
.recipe-list { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 2; }
.recipe-list a { text-underline-offset: 3px; }

/* Recipe: ingredients | steps, divided by a rule, as in the Gyudon mockup. */
.recipe {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 96px;
  margin-top: 24px;
}
.recipe-head { grid-column: 1 / -1; margin-bottom: 40px; }
.recipe-title { font-weight: 400; font-size: 64px; line-height: 1.05; margin: 0 0 12px; }
.recipe-meta { font-size: 12px; margin: 0; }
.ingredients, .steps { font-size: 13px; line-height: 1.55; }
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: -48px; top: 0; bottom: 0; border-left: 1px solid var(--ink); }
.ingredients ul { list-style: "– "; padding-left: 1.2em; margin: 0; }
.steps ol { padding-left: 1.4em; margin: 0; }
.ingredients li, .steps li { margin-bottom: 8px; }
.why { margin-top: 24px; font-size: 12px; line-height: 1.6; }
.why summary { cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.covers { margin-top: 20px; font-size: 11px; }

/* Groceries */
.shop-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; margin-top: 24px; }
.shop { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.shop li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.shop li input { margin-top: 3px; accent-color: var(--ink); width: 16px; height: 16px; flex: none; }
.shop li label { cursor: pointer; }
.shop li.done label { text-decoration: line-through; color: var(--ink-soft); }
.shop .shop-sub { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: none; padding-top: 16px; }
.pantry { margin: 32px 0 20px; font-size: 12px; max-width: 760px; }

/* Fridge & freezer */
.inv-section { margin-top: 36px; max-width: 760px; }
.inv { list-style: none; padding: 0; margin: 0; font-size: 12px; line-height: 1.55; }
.inv li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.inv-item { font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; gap: 16px; }
.inv-status { font-weight: 400; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.inv p { margin: 4px 0 0; }

@media (max-width: 860px) {
  .week { display: block; }
  .week-title { font-size: 52px; margin-bottom: 28px; }
  .day { margin: 0 0 24px; }
  .day.is-today { margin-left: 0; }
  .recipe { display: block; }
  .recipe-title { font-size: 44px; }
  .steps { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--ink); }
  .steps::before { display: none; }
}