/* Sako Balance — a settling sheet.
   Ruled rows, ink and oxblood, Nunito throughout. Dark. */

:root {
  color-scheme: dark;

  --paper: #0A0F0C;
  --sheet: #151D19;
  --ink:   #F2F7F1;
  --soft:  #9DAEA5;
  --rule:  #36453D;
  --hair:  #232E28;
  --edge:  #5C7167;
  --pos:   #3DDC84;
  --neg:   #FF6F5E;
  --hold:  #FFC24B;
  --focus: #3DDC84;

  --btn-bg: #1F9D5F;
  --btn-fg: #05130B;
  --btn-bd: #35C77C;

  --sans: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.hidden { display: none !important; }

/* ---------------------------------------------------------------- top bar */

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}
.mark { font-weight: 700; letter-spacing: -0.015em; text-decoration: none; color: var(--pos); }
.bar nav { display: flex; align-items: baseline; gap: 1.25rem; font-size: .875rem; color: var(--soft); }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ shell */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2.75rem) clamp(1rem, 4vw, 2.5rem) 5rem;
}

h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }

.flash {
  margin: 0 0 1.5rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--hold);
  background: var(--sheet);
  font-size: .9rem;
}

.foot { color: var(--soft); font-size: .85rem; margin: 2.5rem 0 0; max-width: 62ch; }
.empty { color: var(--soft); padding: 1.25rem 0; border-top: 1px solid var(--hair); }
.note { color: var(--soft); }

/* ------------------------------------------------------------------- gate */

.gate { max-width: 24rem; margin: min(16vh, 9rem) auto 0; padding: 0 1.25rem; }
.gate h1 { margin-bottom: 1.75rem; }
.lede { color: var(--soft); font-size: .92rem; margin: -1.25rem 0 1.75rem; }

.stack { display: grid; gap: 1.1rem; }
.stack.narrow { max-width: 22rem; }
label { display: grid; gap: .3rem; font-size: .82rem; color: var(--soft); }

input[type="text"], input[type="password"], input[type="date"], select {
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .5rem .6rem;
  width: 100%;
  min-width: 0;
}
input[inputmode="decimal"] { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1; }
select { appearance: none; }

button { font: inherit; cursor: pointer; }

.primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 2px;
  padding: .55rem 1.1rem;
  font-size: .9rem;
  font-weight: 500;
}
.primary:hover { background: #3A5A49; border-color: #55806A; }

.destructive {
  background: none;
  color: var(--neg);
  border: 1px solid var(--neg);
  border-radius: 2px;
  padding: .45rem .9rem;
  font-size: .85rem;
}

.linky {
  background: none;
  border: 0;
  padding: 0;
  color: var(--soft);
  font-size: .85rem;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.linky:hover { color: var(--ink); }
.inline { display: inline; }

/* -------------------------------------------------------------- dashboard */

.sides { display: grid; gap: 2.75rem; }
@media (min-width: 880px) { .sides { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

.side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--pos);
}
.count { color: var(--soft); font-size: .8rem; }

ul.sheet { list-style: none; margin: 0; padding: 0; }
ul.sheet li { border-bottom: 1px solid var(--hair); }
ul.sheet a, ul.sheet .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .1rem;
  text-decoration: none;
}
ul.sheet a:hover { background: var(--sheet); }
ul.sheet .nm { font-weight: 500; }
ul.sheet li.total { border-bottom: 0; border-top: 1px solid var(--rule); }
ul.sheet li.total .row { color: var(--soft); }
ul.sheet li.total .nm { font-weight: 400; }

.fig {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: .95rem;
  white-space: nowrap;
}
.fig.big { font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
.pos { color: var(--pos); font-weight: 600; }
.neg { color: var(--neg); font-weight: 600; }
.zero { color: var(--soft); }

.addline { display: flex; gap: .5rem; margin-top: 1rem; }
.addline input[type="text"] { flex: 1; }
.addline button {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--soft);
  padding: .5rem .9rem;
  font-size: .85rem;
}
.addline button:hover { color: var(--ink); border-color: var(--ink); }

/* ----------------------------------------------------------- account head */

.crumb { font-size: .82rem; color: var(--soft); margin: 0 0 1.25rem; }
.crumb span { padding: 0 .3rem; }

.acct-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--pos);
}
.standing { text-align: right; display: grid; gap: .1rem; }
.who { color: var(--soft); font-size: .82rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  margin: 0 0 2.25rem;
  border-bottom: 1px solid var(--hair);
}
.stats > div { padding: .75rem .9rem .75rem 0; }
.stats dt { color: var(--soft); font-size: .78rem; }
.stats dd {
  margin: .1rem 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: .95rem;
}

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

.tabs { display: flex; margin-bottom: -1px; }
.tab {
  background: none;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--rule);
  color: var(--soft);
  padding: .5rem .95rem;
  font-size: .87rem;
  border-radius: 2px 2px 0 0;
}
.tab.on {
  color: var(--ink);
  background: var(--sheet);
  border-color: var(--rule);
  border-bottom-color: var(--sheet);
  font-weight: 500;
}

.entry {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 0 2px 2px 2px;
  padding: 1.1rem;
  margin-bottom: 2.25rem;
}
.entry .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .8rem 1rem;
  align-items: end;
}
.entry .f-det { grid-column: span 2; }
.entry .f-go {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  padding-top: .2rem;
}
.preview {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: .9rem;
  color: var(--soft);
  margin-right: auto;
}

.inline-edit { margin: 0; border-left: 3px solid var(--focus); border-radius: 0; }

/* ----------------------------------------------------------------- ledger */

table.ledger { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.ledger th {
  text-align: left;
  font-weight: 500;
  font-size: .78rem;
  color: var(--soft);
  padding: 0 .55rem .5rem;
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
}
table.ledger td {
  padding: .68rem .55rem;
  border-bottom: 1px solid var(--hair);
  vertical-align: baseline;
}
table.ledger tbody tr:hover td { background: var(--sheet); }

/* a hairline between every column */
table.ledger th + th,
table.ledger td + td { border-left: 1px solid var(--hair); }

/* keep the outer columns off the edge of the row */
table.ledger th:first-child,
table.ledger td:first-child { padding-left: 1rem; }
table.ledger th:last-child,
table.ledger td:last-child  { padding-right: 1rem; }

.c-no {
  font-family: var(--mono);
  color: var(--soft);
  font-size: .8rem;
  width: 2.5rem;
}
.c-date { white-space: nowrap; color: var(--soft); font-size: .85rem; width: 4.5rem; }
.c-det { min-width: 10rem; }
.c-num, th.c-num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
.c-num.bal { font-weight: 700; }
table.ledger td.bal { border-left-color: var(--rule); }
.c-res { white-space: nowrap; }
.c-act { text-align: right; white-space: nowrap; font-size: .8rem; width: 1%; }
.c-act a { color: var(--soft); }
.c-act a:hover { color: var(--ink); }
.c-act .inline { margin-left: .8rem; }

/* headings sit centred over their own column; the bet text stays left,
   because a wrapping sentence centred looks ragged */
table.ledger th,
table.ledger td,
table.ledger th.c-num,
table.ledger td.c-num,
table.ledger th.c-act,
table.ledger td.c-act { text-align: center; }

table.ledger th.c-det,
table.ledger td.c-det { text-align: left; }

tr.pending td { color: var(--soft); }

.pill {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 2px;
  font-size: .78rem;
  border: 1px solid transparent;
  white-space: nowrap;
}
.p-win       { background: var(--pos); color: #05130B; font-weight: 700; }
.p-half_win  { background: color-mix(in srgb, var(--pos) 26%, transparent); color: var(--pos); border-color: var(--pos); font-weight: 600; }
.p-loss      { background: var(--neg); color: #1A0603; font-weight: 700; }
.p-half_loss { background: color-mix(in srgb, var(--neg) 24%, transparent); color: var(--neg); border-color: var(--neg); font-weight: 600; }
.p-void      { border-color: var(--rule); color: var(--soft); }
.p-manual    { border-color: var(--rule); color: var(--ink); }
.p-pending   { border-color: var(--hold); color: var(--hold); background: color-mix(in srgb, var(--hold) 16%, transparent); font-weight: 600; }

/* the payment line that cuts across the book */
tr.payment td {
  background: color-mix(in srgb, var(--hold) 10%, var(--sheet));
  border-top: 1px solid var(--hold);
  border-bottom: 1px solid var(--hold);
}
tr.payment:hover td { background: var(--sheet); }
tr.payment .c-det { font-size: .88rem; }
.paytag { font-weight: 700; color: var(--hold); margin-right: .45rem; }
tr.payment .note { margin-left: .5rem; font-size: .82rem; }

tr.editing td { background: var(--sheet); padding: 0; }

/* ------------------------------------------------------------ danger zone */

.danger { margin-top: 3rem; border-top: 1px solid var(--hair); padding-top: 1rem; }
.danger summary { cursor: pointer; color: var(--soft); font-size: .85rem; }
.danger .addline { max-width: 26rem; margin-bottom: 1.25rem; }

.panel { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--hair); }
.panel h2 { margin-bottom: 1rem; }
table.rules { border-collapse: collapse; font-size: .88rem; }
table.rules th { text-align: left; font-weight: 500; padding: .35rem 1.5rem .35rem 0; white-space: nowrap; }
table.rules td { color: var(--soft); padding: .35rem 0; }

/* ----------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  table.ledger, table.ledger tbody, table.ledger tr, table.ledger td { display: block; width: 100%; }
  table.ledger thead { position: absolute; left: -9999px; }

  table.ledger tbody tr {
    border-bottom: 1px solid var(--rule);
    padding: .75rem .85rem .6rem;
    position: relative;
  }
  table.ledger td:first-child,
  table.ledger td:last-child { padding-left: 0; padding-right: 0; }
  table.ledger th + th,
  table.ledger td + td { border-left: 0; }
  table.ledger td,
  table.ledger td.c-num,
  table.ledger td.c-act,
  table.ledger td.c-det { text-align: left; }
  table.ledger td {
    border: 0;
    padding: .15rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  table.ledger td::before { content: attr(data-l); color: var(--soft); font-size: .8rem; }

  table.ledger td.c-no { position: absolute; top: .75rem; right: .85rem; width: auto; display: block; }
  table.ledger td.c-no::before { content: none; }

  table.ledger td.c-det {
    display: block;
    font-weight: 500;
    padding-right: 3rem;
    margin-bottom: .35rem;
  }
  table.ledger td.c-det::before { content: none; }

  table.ledger td.c-act { display: block; text-align: left; padding-top: .5rem; width: auto; }
  table.ledger td.c-act::before { content: none; }
  table.ledger td.c-act .inline { margin-left: 1rem; }

  table.ledger tr.payment { background: var(--sheet); padding: .75rem; }
  table.ledger tr.payment td { border: 0; }
  table.ledger tr.payment td.c-date { display: block; }
  table.ledger tr.payment td.c-date::before { content: none; }

  table.ledger tr.editing td { padding: 0; display: block; }
  .entry .f-det { grid-column: span 1; }
  .standing { text-align: left; }
  .acct-head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}