/* Paper. The whole palette is eyedropped from the app icon -- the orange and
   blue there are the ruled lines of the left and right page: spend and income.
   The language was drawn from the start; now the app speaks it.

   CONTRAST IS CHECKED BY CALCULATOR, NOT BY EYE (the eye already approved a
   1.19 once). Threshold 4.5 for text. Current ratios, WCAG:
     ink   on paper 13.40      white on spend  5.29
     ink-2 on paper  5.21      white on income 5.54
     alarm on card   5.73      ink   on card  14.37
   ink-3 (4.05) is reserved for small MUTED things (the balance) on purpose.
   The icon's raw orange/blue (#E97B0C, #407BC1) fail with white text (2.88,
   4.36) -- the button colours below are those two darkened until they pass.
   Do not «freshen» them back.

   There is deliberately no dark theme: paper IS the theme. A
   prefers-color-scheme block here once painted ink on near-ink (1.19). */

:root {
  --paper: #F7F3E6;        /* the page colour of the icon */
  --paper-dot: #F2EDDE;    /* the texture dots, a step deeper */
  --card: #FDFBF4;         /* cards, forms, popovers */
  --card-open: #FFFDF7;    /* an expanded card, a touch lighter */
  --line: #DFD8C4;         /* hairline borders */
  --line-strong: #C9C0A6;  /* the expanded card's outline */
  --ink: #2A2722;          /* primary text */
  --ink-2: #6B655A;        /* secondary: dates, comments */
  --ink-3: #7D7669;        /* muted small print: the balance, «внесено» */
  --spend: #A85508;        /* the icon's orange, darkened for white text */
  --income: #2F6BA8;       /* the icon's blue, darkened for white text */
  --alarm: #B23A2F;        /* delete, errors; 5.73 on card */
  --alarm-bg: #F6E4DD;     /* the problem panel */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  /* Three layers of 0.5px dots: from arm's length just a warm tint, up close
     livelier than a flat fill. Pure CSS, zero bytes to download. */
  background-image:
    radial-gradient(circle at 20% 30%, var(--paper-dot) 0.5px, transparent 0.6px),
    radial-gradient(circle at 70% 60%, var(--paper-dot) 0.5px, transparent 0.6px),
    radial-gradient(circle at 45% 85%, var(--paper-dot) 0.5px, transparent 0.6px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
}


/* -------------------------------------------------------- problem --- */
.problem {
  border-left: 3px solid var(--alarm);
  background: var(--alarm-bg);
  padding: 12px;
  border-radius: 0 8px 8px 0;
}
.page { padding: 12px; max-width: 760px; margin: 0 auto; }
.page h1 { font-size: 22px; margin: 8px 0 4px; }

/* v0 «тетрадка»: two columns, three fields, nothing else. Everything above  */
/* belongs to the hidden working-mode screens (feed, tasks, completeness).   */
/* ======================================================================== */

.book { padding: 12px; max-width: 720px; margin: 0 auto; }

.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
/* Let each column shrink to its 1fr track: a grid item defaults to
   min-width:auto, and the nowrap comment's min-content would otherwise widen the
   column and shove the second one off-screen. min-width:0 lets the ellipsis do
   its job. */
.col { min-width: 0; }

/* the two sums, all-time, side by side; then the balance on its own line */
.totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.totals__col { text-align: center; padding: 9px 11px; }
.col__title { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
/* Both sums in ink: in a paper book the ink is one colour, and which column a
   number stands in says spend-or-income -- place speaks, not paint. Colour
   lives only on the buttons, where it means an action. */
.col__sum {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* neutral, never red, honest minus; small enough not to catch the eye */
.balance {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  margin: 0 0 12px;
}

/* The everyday buttons are DOCKED to the bottom: the thumb reaches the bottom
   of the phone and does not reach the top. Glued to left, right and bottom over
   the list; scrolling never moves it. Opaque --paper on purpose: paper showing
   through paper looks dirty. The icon's ruled-line colours, darkened until
   white text passes 4.5.

   env(safe-area-inset-bottom) in the bottom padding is NOT optional: the
   iPhone's gesture bar lives there and taps under it close the app -- without
   the inset, half of «Расход» sits beneath it and the finger hits the button
   or the home gesture at random. On Android the env() is zero and harmless.
   In standalone (how Екатерина opens it) this is the difference between an
   app and a trap. */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 0.5px solid var(--line);
}
.dock__add { flex: 1; min-width: 0; }
.dock__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: #fff;
}
.dock__btn::-webkit-details-marker { display: none; }
.dock__add:first-child .dock__btn { background: var(--spend); }
.dock__add:last-child  .dock__btn { background: var(--income); }

/* The form opens as a panel ABOVE the dock (bottom: 100% of the fixed dock),
   full width -- so the dock cannot cover its fields by construction. */
.dock__form {
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  background: var(--paper);
  border-top: 0.5px solid var(--line);
  padding: 12px;
}
.dock__form .form3 {
  border: 0.5px solid var(--line);
  border-radius: 12px;
}

/* Room for the dock at the end of the list, so the last card is reachable. */
.dock-spacer { height: calc(58px + env(safe-area-inset-bottom) + 8px); }

/* the three-field form, shared by add and edit */
.form3 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--card);
  border: 0.5px solid var(--line);
  border-top: none;
  border-radius: 0 0 12px 12px;
}
.form3__field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-2); }
.form3__field input,
.form3__field textarea {
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming the field on focus */
  color: var(--ink);
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  width: 100%;
}
.form3__field textarea { resize: vertical; }
.form3__save {
  min-height: 44px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 2px;
}

.cards { display: flex; flex-direction: column; gap: 5px; }
.empty { color: var(--ink-2); font-size: 13px; text-align: center; margin: 6px 0; }

/* Two lines, ~46px: the sum leads, the date and comment sit muted so the eye is
   not pulled by everything at once. This is the floor -- still above the 44px
   tap target, and no font below 11px. */
.card { border: 0.5px solid var(--line); border-radius: 9px; background: var(--card); }
.card__face { padding: 6px 9px; cursor: pointer; list-style: none; }
.card__face::-webkit-details-marker { display: none; }
.card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
/* Ink for both columns -- see .col__sum. */
.card__sum { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.card__date { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.card__comment {
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink-2);
  margin-top: 2px;
  white-space: nowrap;         /* one line, then an ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A tap OPENS the card -- reading is not editing. The card lightens, the
   outline firms up, the comment unfolds in full ink. Editing sits behind the
   pencil, a second deliberate tap. */
.card[open] { background: var(--card-open); border-color: var(--line-strong); }
.card[open] .card__comment { white-space: normal; overflow: visible; color: var(--ink); }

.card__open { padding: 2px 9px 10px; }
.card__meta { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.card__entered { font-size: 11px; color: var(--ink-3); }

/* The pencil: 26x26 to the eye, 44x44 to the thumb (transparent padding), and
   the negative margins keep the meta row at its 26px -- the hit area grows,
   the card does not. */
.card__pencilhit {
  width: 44px; height: 44px;
  margin: -9px -9px -9px auto;   /* auto: pushed to the right edge */
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
}
.card__pencil {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-3);
  border-radius: 6px;
  color: var(--ink);
}
.card__pencil svg { width: 13px; height: 13px; display: block; }

.card__editbody { display: none; }
.card__editbody.open { display: block; }
.card__editbody .form3 { border: none; background: none; padding: 4px 0 0; }
/* Deletion lives behind the pencil too: rare and irreversible, no place in view. */
.card__delete { margin-top: 8px; text-align: center; }
.card__delete button {
  font: inherit;
  font-size: 14px;
  color: var(--alarm);
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  text-decoration: underline;
}

/* ======================================================================== */
/* Books: the tiles wall, and the book's top bar. Windows-Phone flat.        */
/* ======================================================================== */

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two in a row */
  gap: 12px;
  padding: 12px;
  max-width: 720px;
  margin: 0 auto;
  align-content: start;              /* empty space below is the point */
}

.tile {
  position: relative;
  aspect-ratio: 1 / 1;               /* square */
  border-radius: 12px;
  color: #fff;
  overflow: hidden;                  /* flat: no shadow, no gradient */
}

/* the whole tile opens the book; the menu sits above it */
.tile__link { position: absolute; inset: 0; z-index: 1; }

.tile__body {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  pointer-events: none;              /* clicks fall through to the link */
}
.tile__name {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* stats anchored to the bottom; read bottom-up: месяц, расход, доход */
.tile__stats { margin-top: auto; }
.tile__income { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile__spend { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .92; }
.tile__month { font-size: 13px; opacity: .8; margin-top: 4px; }

/* the corner ⋯ opens the book's bottom sheet */
.tile__menu { position: absolute; top: 0; right: 0; z-index: 2; }
.tile__dots {
  list-style: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 12px 14px;   /* ~44px thumb target on a 22px glyph */
  color: #fff;
  user-select: none;
}
.tile__dots::-webkit-details-marker { display: none; }

/* The book menu is a BOTTOM SHEET. A popover anchored inside a 165px tile can
   never hold an input, a button and six colours: it is doomed to overflow, the
   only question is which way, and any positioning arithmetic will fight the
   screen and one day lose. The sheet is glued to the left, right and bottom
   edges over a scrim -- there is nothing to position, so nothing to break. */
.sheet { display: none; }
.tile__menu[open] .sheet { display: block; position: fixed; inset: 0; z-index: 50; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(42, 39, 34, .45); }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  animation: sheet-up .18s ease-out;
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet__handle {
  height: 44px;                       /* the drag target; the grip is the visual */
  display: flex; align-items: center; justify-content: center;
  touch-action: none;                 /* vertical drags belong to the sheet here */
  cursor: grab;
}
.sheet__grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); }

.sheet__label {
  font-size: 11px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 10px 0 6px;
}
.sheet__rename { display: flex; gap: 8px; }
.sheet__rename input {
  font: inherit; font-size: 16px; flex: 1; min-width: 0; min-height: 44px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
}
.sheet__rename button {
  font: inherit; font-size: 15px; font-weight: 600;
  min-height: 44px; padding: 0 18px;
  border: none; border-radius: 10px;
  background: var(--income); color: #fff; cursor: pointer;
}

/* 44px circles -- in the old popover they were ~16px wide targets, unhittable */
.sheet__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sheet__swatches form { margin: 0; }
.sheet__swatch {
  width: 44px; height: 44px; margin: 0; padding: 0;
  border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); cursor: pointer;
}
.sheet__swatch--current { border: 3px solid var(--ink); }

.sheet__segments { display: flex; gap: 8px; }
.sheet__segments form { flex: 1; margin: 0; }
.sheet__segment {
  font: inherit; font-size: 15px; width: 100%; min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.sheet__segment--on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }

/* outline, not fill: noticeable, not inviting */
.sheet__hide {
  font: inherit; font-size: 15px; width: 100%; min-height: 44px;
  margin-top: 14px;
  border: 1px solid var(--alarm); border-radius: 10px;
  background: none; color: var(--alarm); cursor: pointer;
}

/* the plus tile — a silent «+» on first run, a Общая/Приватная chooser after */
.tile--add {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: transparent; border: 2px dashed var(--line);
}
.tile__plus {
  font: inherit; font-size: 64px; font-weight: 300; line-height: 1;
  color: var(--line-strong); background: none; border: none; cursor: pointer;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  list-style: none;
}
.tile__plus::-webkit-details-marker { display: none; }
.tile__choose {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; justify-content: center;
  background: var(--card); border-radius: 10px;
}
.tile__choose button {
  font: inherit; font-size: 15px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--ink); color: #fff; cursor: pointer; width: 100%;
}

/* the book's own top bar: one way back, and the key to the door. No «who». */
.bookbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 3px solid var(--accent);
}
.bookbar__back {
  text-decoration: none; color: var(--ink);
  font-size: 24px; line-height: 1; padding: 4px 10px 6px;
  border-radius: 8px;
}
.bookbar__name { font-weight: 600; }
.bookbar__key { margin-left: auto; text-decoration: none; font-size: 18px; padding: 4px 6px; }

/* ======================================================================== */
/* Login: the passkey door. And the invite pages next to it.                 */
/* ======================================================================== */

.login { max-width: 480px; margin: 0 auto; padding: 24px 16px; }
.login__title { font-size: 22px; margin: 0 0 10px; }
.login__lead { color: var(--ink-2); font-size: 15px; margin: 0 0 20px; }
.login__btn {
  display: block; width: 100%;
  min-height: 48px; margin-bottom: 10px;
  font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.login__btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.login__out {
  font: inherit; font-size: 14px; color: var(--alarm);
  background: none; border: none; padding: 4px 0; cursor: pointer; text-decoration: underline;
}
.login__msg { min-height: 20px; color: var(--alarm); font-size: 14px; }
.login__back a { color: var(--ink-2); text-decoration: none; font-size: 14px; }

/* the one-time invite link: shown once, so let it be easy to copy */
.invite__link {
  font-size: 13px;
  word-break: break-all;
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  user-select: all;
}