/* [ROOTY-001]
Transaction history drawer — standalone presentation for the CC Wallet.
Base: independent stylesheet; replaces the .history-* block shipped in rooty.css
       (EFL-SLICE-044 / EFL-SLICE-047).

Provenance: written for wallet.ourcoin.ca and offered upstream. Load it AFTER
rooty.css (see the <link> note at the bottom of this file) and it supersedes that
block without touching markup or behaviour — every class here already exists in
index.html and rooty.js.

WHY A SEPARATE SHEET
--------------------
The history list is the one surface we keep wanting to tune (row rhythm, amount
emphasis, address legibility) while Gerrit keeps ownership of the wallet proper.
A separate stylesheet means an edit here is a one-file diff we can hand over,
review, or drop — no patch against rooty.css, no merge conflicts on every
CC-WALLET revision.

TWO THINGS ARE LOAD-BEARING — PLEASE DO NOT "TIDY" THEM
--------------------------------------------------------
1. ROW HEIGHT IS COUPLED TO JAVASCRIPT. rooty.js sets `const historyPeekHeight=48`
   and a collapsed drawer is given exactly that height, on the assumption that it
   is exactly one row. `--tx-row-height` below is therefore 48px INCLUDING padding
   and the bottom border (Bootstrap sets `box-sizing:border-box` globally). Make a
   row 56px for comfort and the collapsed drawer shows a 48px strip of a taller
   row — a sliver of text, not a row. If you want taller rows, move
   `historyPeekHeight` in the same change.
2. THE LINE-HEIGHTS ARE INTEGRAL PIXELS ON PURPOSE. Do not "simplify" them to
   `1.5` or drop them. With a fractional line-height (`.time` at 11.52px × 1.5 =
   17.266px, `.amount` at 14.72px × 1.5 = 22.078px, `.address` at 11.2px × 1.5 =
   16.797px) the grid row's height rounds *up* past `min-height`, and every row
   measures 49.875px instead of 48 — which breaks the peek in point 1 by 1.875px.
   Measured, not theorised: 16px/20px/16px gives rows of exactly 48.000px, and
   those boxes are still taller than the glyphs, so nothing clips. `min-height`
   rather than `height` is deliberate too: if a reader scales their fonts up, rows
   grow and reflow instead of hiding half a line.
3. THE TIME STRING CANNOT BE SPLIT. `historyDisplayTime()` formats
   day/month/year in the *user's* locale plus a clock time ("09/14/2026 06:27 PM",
   "14.09.2026 18:27"), so its width varies by locale and by AM/PM. It is one text
   node, so CSS can only shrink or ellipsize it — never re-lay it out. The time
   column is therefore intrinsic (`minmax(0,max-content)`) rather than a fixed
   pixel width that would clip one locale and waste space in another.

DOMAIN DECISIONS
----------------
- The amount moves to the RIGHT EDGE visually (grid column 3) while staying third
  in the DOM, so reading order for assistive tech is unchanged. The address moves
  left into column 2, where it reads as the counterparty — the same shape as a
  bank statement: when | who | how much.
- Direction is carried by THREE cues, not one: the sign printed by rooty.js
  (+ / −), the colour, and — for OUT rows only — the row being a real <button>
  that opens the payment receipt. Colour is never the only signal.
- IN rows carry no address at all (rooty.js leaves it empty), so column 2 is
  allowed to collapse to zero and the amount sits against the right edge either
  way. That is deliberate: empty cells should not push the amount around.
- Everything is themable from one block: the custom properties on .history-drawer.
  Defaults are the wallet's own palette plus the off-white wallet.ourcoin.ca now
  uses for the manifest and icons, so the sheet inherits the new branding without
  a hard dependency on it.
*/

.history-drawer {
  /* theme — override these four lines for a different origin */
  --tx-surface: #fff;
  --tx-surface-soft: #faf8f1;
  --tx-surface-hover: #f4f1e8;
  --tx-line: #ece7dc;
  --tx-line-strong: #d9d2c2;
  --tx-ink: #243129;
  --tx-ink-muted: #66706a;
  --tx-ink-faint: #8c9991;
  --tx-in: #16723d;
  --tx-out: #b72720;
  --tx-focus: #185d32;
  /* structure — see "ROW HEIGHT IS COUPLED" above before changing this */
  --tx-row-height: 48px;
  /* integral px, never a ratio — see point 2 of the header. Kept as variables so a
     contributor who wants a different type scale changes them here and the rows
     still measure exactly --tx-row-height. */
  --tx-line-time: 16px;
  --tx-line-amount: 20px;
  --tx-gutter: 12px;
  --tx-radius: 10px;

  margin: 14px -20px -20px;
  border-top: 1px solid var(--tx-line-strong);
  border-radius: 0 0 var(--tx-radius) var(--tx-radius);
  background: var(--tx-surface);
  color: var(--tx-ink);
  text-align: left;
  overflow: hidden;
}

/* ---------------------------------------------------------------- handle -- */

.history-handle {
  display: flex;
  width: 100%;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--tx-line);
  background: var(--tx-surface-soft);
  color: var(--tx-ink-muted);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  appearance: none;
}

.history-handle-line {
  width: 72%;
  height: 2px;
  border-radius: 2px;
  background: var(--tx-ink-faint);
}

.history-handle-icon {
  font-size: .72rem;
  transition: transform .15s ease;
}

.history-handle[aria-expanded=true] .history-handle-icon {
  transform: rotate(180deg);
}

/* A focus ring, because a drawer you can drag is a drawer you can tab to and
   the shipped block removed the outline entirely (outline:0). */
.history-handle:focus-visible {
  outline: 2px solid var(--tx-focus);
  outline-offset: -2px;
}

/* -------------------------------------------------------------- viewport -- */

.history-viewport {
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--tx-surface);
  scrollbar-width: thin;
  scrollbar-color: var(--tx-line-strong) transparent;
}

.history-viewport::-webkit-scrollbar {
  width: 8px;
}

.history-viewport::-webkit-scrollbar-track {
  background: transparent;
}

.history-viewport::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--tx-line-strong);
  background-clip: content-box;
}

/* ------------------------------------------------------------------ list -- */

.history-list {
  min-height: 100%;
}

/* Empty state, without JavaScript: the drawer is coin-filtered but the stylesheet
   cannot know which coin, so the message stays coin-agnostic. */
.history-list:empty::after {
  display: block;
  padding: 22px 16px;
  color: var(--tx-ink-faint);
  font-size: .78rem;
  letter-spacing: .01em;
  text-align: center;
  content: "No transactions yet";
}

/* ------------------------------------------------------------------- row -- */

.history-row {
  /* [1] time  [2] address  [3] amount — but the DOM order is time, amount,
     address. See DOMAIN DECISIONS: the amount is placed explicitly below. */
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--tx-row-height);
  padding: 0 var(--tx-gutter);
  border: 0;
  border-bottom: 1px solid var(--tx-line);
  background: var(--tx-surface);
  color: var(--tx-ink);
  font: inherit;
  text-align: left;
}

/* OUT rows are <button> elements (they open the payment receipt); neutralise the
   user-agent and Bootstrap button chrome without hiding focus. */
button.history-row {
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

button.history-row:focus-visible {
  outline: 2px solid var(--tx-focus);
  outline-offset: -2px;
}

@media (hover: hover) {
  button.history-row:hover {
    background: var(--tx-surface-hover);
  }
}

button.history-row:active {
  background: var(--tx-surface-soft);
}

/* --------------------------------------------------------------- columns -- */

.history-time {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--tx-ink-muted);
  font-size: .72rem;
  line-height: var(--tx-line-time);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-address {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--tx-ink-faint);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .7rem;
  line-height: var(--tx-line-time);
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-amount {
  grid-column: 3;
  font-size: .92rem;
  line-height: var(--tx-line-amount);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: right;
  white-space: nowrap;
}

.history-amount.in {
  color: var(--tx-in);
}

.history-amount.out {
  color: var(--tx-out);
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 768px) {
  .history-drawer {
    margin: 14px -10px -10px;
    border-radius: 0;
  }
}

/* Narrow phones: the address is the first thing that may go — it is repeated in
   full in the receipt overlay, which OUT rows open on tap. The amount never
   shrinks. */
@media (max-width: 420px) {
  .history-drawer {
    --tx-gutter: 10px;
  }

  .history-row {
    gap: 8px;
  }

  .history-time {
    font-size: .68rem;
  }

  .history-amount {
    font-size: .88rem;
  }

  .history-address {
    font-size: .66rem;
  }
}

/* Landscape phones: the drawer can be dragged to 65% of a short viewport, so give
   the rows a hair more room without changing --tx-row-height. */
@media (max-height: 480px) and (orientation: landscape) {
  .history-handle {
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-handle-icon {
    transition: none;
  }
}

/* ---------------------------------------------------------------------- *
 * WIRING (origin side only — delete this note when folding the sheet in)  *
 *                                                                         *
 * index.html, immediately after the rooty.css <link>:                     *
 *   <link rel='stylesheet' href='rooty-history.css?v=ROOTY-001'>          *
 *                                                                         *
 * To fold it into rooty.css instead: paste everything above the marker    *
 * into that file's media-query-free section, replacing its .history-*     *
 * rules (EFL-SLICE-044 / EFL-SLICE-047). Both files are plain CSS with no  *
 * preprocessor, no @import and no external references, so either shape    *
 * works.                                                                  *
 * ---------------------------------------------------------------------- */