/* ============================================================================
   Personal DB — the pool token, the results it collected, and the endpoint
   that fills them.

   The page used to open with a 3rem 🗄️ over a centred title and subtitle, then
   spend a second screen on API documentation, before a single result appeared.
   A visitor comes here for one reason: to find out whether their miner hit
   anything. So the order is now token, results, then the endpoint — and the
   endpoint is a closed disclosure, because reference material that is read
   once must not sit permanently between someone and their records.

   Colour was the other failure. This sheet hardcoded Tailwind's blue
   (rgba(59,130,246,…)) in ten places — a hue that exists nowhere in tokens.css
   — as the wash behind text that was coloured with --open teal, so the fill
   and the ink were from different palettes. Blue is gone entirely. What is
   left is greyscale plus one green: a private key is a claimed value, and
   --solved is the token for claimed.

   Namespaced .ldb-* throughout. The sheet this replaces declared .page-header,
   .page-title, .page-icon, .empty-state, .alert-card and .result-card at the
   top level; it loads per view, but those names are the kind that go looking
   for another surface to break the moment the cascade changes.
   ========================================================================= */

.ldb {
  padding-block: var(--sp-8) var(--sp-16);
}

/* ---------------------------------------------------------------------------
   Head — states the page, does not stage it. Left-aligned and two lines tall,
   so the token clears the fold on a phone.
   ------------------------------------------------------------------------ */

.ldb__head {
  margin-block-end: var(--sp-6);
}

.ldb__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
}

.ldb__subtitle {
  margin-block-start: var(--sp-2);
  max-width: 58ch;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-300);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   The token — one line of record, not a card with a hero number. It is a
   credential, so it takes no accent: --accent is money and the primary action,
   and the only thing here worth clicking is the copy control.
   ------------------------------------------------------------------------ */

.ldb-token {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label copy"
    "value copy"
    "hint  hint";
  align-items: center;
  column-gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-block-end: var(--sp-10);
}

.ldb-token__label {
  grid-area: label;
}

.ldb-token__value {
  grid-area: value;
  margin-block-start: var(--sp-1);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
  overflow-wrap: anywhere;
}

.ldb-token__copy {
  grid-area: copy;
}

/* No hairline above this. The text is capped at a readable measure, so a rule
   drawn on the element stops at 62ch and reads as a broken divider rather than
   as a section break — and a two-line note inside one panel does not need one. */
.ldb-token__hint {
  grid-area: hint;
  margin-block-start: var(--sp-4);
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-400);
}

@media (max-width: 599px) {
  .ldb-token {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "value"
      "copy"
      "hint";
    justify-items: start;
  }

  .ldb-token__copy {
    margin-block-start: var(--sp-3);
  }
}

/* ---------------------------------------------------------------------------
   Results — a bar that names the section and counts it, then the records.
   ------------------------------------------------------------------------ */

.ldb__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--sp-4);
}

.ldb__bar-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
}

.ldb__count {
  font-size: var(--fs-sm);
  color: var(--ink-400);
}

.ldb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* On a phone the key takes the whole row and the control drops below it. Left
   sharing a line with the copy button it gets about 220px, which wraps a
   66-character key over four lines while 130px of the row sits empty. */
.ldb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "id   when"
    "key  key"
    "copy copy";
  align-items: start;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
}

@media (min-width: 768px) {
  .ldb-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "id when key copy";
    align-items: center;
  }
}

.ldb-row__pair {
  min-width: 0;
}

.ldb-row__pair--id {
  grid-area: id;
}
.ldb-row__pair--when {
  grid-area: when;
}
.ldb-row__pair--key {
  grid-area: key;
}

.ldb-row__number,
.ldb-row__date {
  display: block;
  margin-block-start: var(--sp-1);
  font-size: var(--fs-sm);
}

.ldb-row__number {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-050);
  white-space: nowrap;
}

.ldb-row__date {
  color: var(--ink-300);
  white-space: nowrap;
}

/* A found private key is a claimed value, which is what --solved is for. The
   label above it carries the word, so the colour is never the only signal.
   Set on a sunken lane rather than a bordered well: an inset fill with a
   hairline and a small radius is this system's input signature, and this is a
   read-only record. */
.ldb-row__key {
  display: block;
  margin-block-start: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink-900);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--solved);
  overflow-wrap: anywhere;
}

.ldb-row__copy {
  grid-area: copy;
  justify-self: start;
}

@media (min-width: 768px) {
  .ldb-row__copy {
    align-self: center;
    justify-self: end;
  }
}

/* ---------------------------------------------------------------------------
   The endpoint — reference, not README. Closed by default and seated under the
   records, because it answers a question that is asked once per miner.
   ------------------------------------------------------------------------ */

.ldb-api {
  margin-block-start: var(--sp-10);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.ldb-api__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-1) var(--ease);
}

.ldb-api__summary::-webkit-details-marker {
  display: none;
}

.ldb-api__summary-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-200);
}

.ldb-api__summary:hover .ldb-api__summary-text {
  color: var(--ink-050);
}

.ldb-api__summary:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-lg);
}

.ldb-api__marker {
  flex: none;
  color: var(--ink-400);
  transition: transform var(--dur-2) var(--ease);
}

/* Rotation, not a direction-dependent chevron: an arrow that points down when
   closed and up when open reads the same way round in Hebrew. */
.ldb-api[open] .ldb-api__marker {
  transform: rotate(180deg);
}

.ldb-api[open] .ldb-api__summary {
  border-block-end: 1px solid var(--line);
}

.ldb-api__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
}

.ldb-api__lede {
  max-width: 68ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-300);
}

.ldb-api__block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-2);
}

.ldb-api__endpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
}

.ldb-api__method {
  flex: none;
  font-family: var(--font-mono);
}

.ldb-api__url {
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink-900);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-100);
  overflow-wrap: anywhere;
}

.ldb-api__params {
  display: grid;
  gap: var(--sp-1) var(--sp-4);
  margin-block-start: var(--sp-2);
}

@media (min-width: 600px) {
  .ldb-api__params {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
  }
}

.ldb-api__param {
  font-size: var(--fs-sm);
  color: var(--ink-100);
}

.ldb-api__param-desc {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-300);
}

@media (min-width: 600px) {
  .ldb-api__param-desc {
    margin-block-end: 0;
  }
}

/* --ink-500 is 2.9:1 and reserved for disabled affordances; "obrigatório" is
   content, so it takes the next step up — and it needs air, or it reads as the
   last two words of the description rather than as a tag on it. */
.ldb-api__required {
  margin-inline-start: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-400);
}

.ldb-api__code {
  margin-block-start: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-900);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--ink-200);
  overflow-x: auto;
  white-space: pre;
  /* A code sample is an identifier block: it reads the same way round in every
     locale, including Hebrew. */
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

.ldb-api__code--ok {
  color: var(--solved);
}

/* ---------------------------------------------------------------------------
   Gates — signed out, or signed in with no token. Neither is a failure, so
   neither is red; neither is orange either, except the one button.
   ------------------------------------------------------------------------ */

.ldb-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
}

.ldb-gate__icon {
  color: var(--ink-400);
}

.ldb-gate__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-100);
}

.ldb-gate__body {
  max-width: 48ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-400);
}

.ldb-gate__cta {
  margin-block-start: var(--sp-2);
}

/* ---------------------------------------------------------------------------
   Copy buttons — both labels ship in the markup so the confirmation is
   translated and the drawn icon survives the swap. Scoped to this page:
   puzzles.css owns the same pair, and it does not load here.
   ------------------------------------------------------------------------ */

.ldb .copy-text-copied {
  display: none;
}

.ldb .copied .copy-text {
  display: none;
}

.ldb .copied .copy-text-copied {
  display: inline;
}

.ldb .copied {
  color: var(--solved);
}