/*
  The holdings page (/holdings/ and /zh/holdings/), design v3. Layout for this page only: the
  account summary, the holding rows (compact rows on a phone, a table from 900px), the connect
  prompt, what this wallet wrote, the claim link and the closed explanation. The pieces (avatar,
  badge, progress, dotlist, learn, rows, buttons, fields, chips, skeletons, states) come from
  ui.css. Loaded by the <!-- style: /assets/page-holdings.css --> marker in pages/holdings.html.

  On a 390 x 844 phone the first holding starts above the fold: the title is one line, and the
  account summary is the address with its tools over one strip of three small figures.
*/

/* The title's top comes from the shared page head (ui.css); this is only the gap under it. */
.hhead {
  margin-bottom: var(--s3);
}

/* ------------------------------------------------------------------ account summary */

.hacct {
  position: relative;
  padding: var(--s3) var(--s3) var(--s1) var(--s4);
  background: radial-gradient(120% 140% at 0% 0%, rgba(198, 240, 0, 0.07), rgba(198, 240, 0, 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)), var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.hacct-id {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.hacct-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lime-soft);
  color: var(--lime);
  box-shadow: inset 0 0 0 1px var(--lime-line);
}
.hacct-who {
  flex: 1;
  min-width: 0;
}
.hacct-label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}
.hacct-addr {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.hacct-full {
  /* the whole address is for a screen reader and the wide screen; a phone shows the short form */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hacct-tools {
  display: flex;
  flex: none;
}
.hacct-tools .iconbtn {
  color: var(--text2);
}
.hacct-tools .iconbtn:hover {
  color: var(--text);
}

/* Three figures in one inset strip: 14px label over a 16px figure. */
.hacct-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: var(--s3) 0 0;
  margin-right: var(--s1);
  overflow: hidden;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
}
.hacct-stat {
  min-width: 0;
  padding: var(--s2) var(--s3);
  background: var(--raised);
}
.hacct-stat dt {
  color: var(--text2);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hacct-stat dd {
  margin: var(--s0) 0 0;
  min-height: 22px;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The tiles are surface 2, the skeleton's own colour, so the placeholder steps up one surface (as
   on an .inset); otherwise a slow /balances read shows the labels over empty space. */
.hacct-stat dd .skel-fig {
  display: block;
  height: 18px;
  width: 44px;
  margin-top: var(--s0);
  background: var(--raised-hover);
}
.hacct-stat dd.is-unknown {
  color: var(--text2);
  font-weight: 500;
}
.hacct-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: var(--hit);
}
.hacct-foot .why {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.hacct-off {
  margin: 0;
}

/* ------------------------------------------------------------------ holding rows */

.hsec {
  margin-top: var(--s4);
}
.hlist-head {
  display: none;
}
.hlist {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* A phone row: the avatar beside the name and badges with the balance at the end, a line of
   free and listed, the mint allowance, and the two actions. */
.hrow {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas:
    "av id bal"
    "av meta meta"
    "av mints mints"
    "av act act";
  column-gap: var(--s3);
  row-gap: var(--s1);
  align-items: center;
  padding: 14px var(--s4) var(--s3);
  transition: background-color 0.15s;
}
.hrow + .hrow {
  border-top: 1px solid var(--hair);
}
@media (hover: hover) {
  .hrow:not(.skel-card):hover {
    background: rgba(255, 255, 255, 0.025);
  }
}
.hrow-token {
  display: contents;
}
.hrow .avatar,
.hrow .skel-avatar {
  grid-area: av;
  align-self: start;
  margin-top: 2px;
}
.hrow-id {
  grid-area: id;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) 6px;
  min-width: 0;
}
.hrow-link {
  display: inline-block;
  font-size: var(--fs-base);
  text-decoration: none;
  margin-right: 2px;
}
/* The ticker is the row's link to its token page; its hit area is the whole row. */
.hrow-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hrow-link:focus-visible {
  outline: none;
}
.hrow:has(.hrow-link:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--lime);
}
.hrow-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s1);
}
.hrow-bal {
  grid-area: bal;
  justify-self: end;
  align-self: start;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hrow-meta {
  grid-area: meta;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.hrow-free .m {
  color: var(--text);
  font-weight: 600;
}
.hrow-free.is-zero .m {
  color: var(--text2);
  font-weight: 500;
}
.hrow-locked {
  color: var(--amber);
}
.hrow-meta .d,
.hrow-listed-none {
  display: none;
}

/* This wallet's mints of the ticker: the count and a thin bar that ends at the wallet's cap. */
.hrow-mints {
  grid-area: mints;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.hrow-mints-t {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hrow-mints-t .d {
  display: none;
}
.hrow-mints .progress {
  flex: 0 1 96px;
  height: 4px;
}
.hrow-mints.is-capped {
  color: var(--err);
}
/* at the cap the bar is full and says so in the same red as the count */
.hrow-mints.is-capped .progress > i {
  background: var(--err);
  box-shadow: none;
}
.hrow-mints.is-none .hrow-mints-t {
  display: none;
}

.hrow-act {
  grid-area: act;
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s1);
}
.hrow-act .btn-compact {
  min-width: 88px;
}
.hrow-manage {
  margin: 0 0 0 auto;
}
.skel-compact {
  display: inline-block;
  width: 88px;
  height: 36px;
  border-radius: var(--r-sm);
}
.hrow.skel-card .hrow-meta {
  display: block;
}

/* ------------------------------------------------------------------ connect prompt */

.hconnect {
  display: grid;
  gap: var(--s5);
  padding: var(--s6) var(--s4) var(--s4);
  background: radial-gradient(90% 60% at 50% 0%, rgba(198, 240, 0, 0.09), rgba(198, 240, 0, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)), var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.hconnect-head {
  text-align: center;
}
.hconnect-ic {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lime-soft);
  color: var(--lime);
  box-shadow: inset 0 0 0 1px var(--lime-line), 0 0 32px rgba(198, 240, 0, 0.12);
}
.hconnect-title {
  margin: var(--s4) auto var(--s2);
  max-width: 22ch;
  font-size: var(--fs-xl);
  line-height: 1.3;
}
.hconnect-body {
  margin: 0 auto;
  max-width: 40ch;
  color: var(--text2);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.hconnect-points {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
}
.hconnect-points li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 52px;
  padding: var(--s2) var(--s4) var(--s2) var(--s3);
  font-size: var(--fs-md);
  line-height: 1.45;
}
.hconnect-points li + li {
  border-top: 1px solid var(--hair);
}
.hconnect-pi {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--lime);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.hconnect-btn {
  width: 100%;
}

/* ------------------------------------------------------------------ recently written */

.wrows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--r-xl);
}
.wrows > li + li {
  border-top: 1px solid var(--hair);
}
.wrow {
  align-items: center;
  min-height: 64px;
  padding: var(--s2) var(--s3) var(--s2) var(--s4);
  color: var(--text);
}
.wrow + .wrow {
  border-top: 0;
}
.wrow-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--raised);
  color: var(--text2);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.wrow-main {
  flex: 1;
  min-width: 0;
}
.wrow-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
  margin: 0;
  line-height: 1.35;
}
.wrow-tick {
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.wrow-what {
  font-size: var(--fs-md);
}
/* The exact text on one line, only for a writing this page cannot name; the whole of it is the
   title and on the explorer. Ash, not lime: lime is kept for what is about to be signed. */
.wrow-body {
  display: block;
  margin-top: var(--s0);
  overflow: hidden;
  color: var(--text2);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.wrow-meta {
  margin-block: 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.wrow-x {
  flex: none;
  color: var(--text2);
}
.wrow-note {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 64px;
  padding: var(--s2) var(--s4);
  color: var(--text2);
  font-size: var(--fs-md);
}

/* ------------------------------------------------------------------ claim link, explanation */

.hmore {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s6);
}
.hclaim {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s2) var(--s4);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: background-color 0.15s;
}
.hclaim:hover {
  background: var(--raised);
}
.hclaim-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--raised);
  color: var(--text2);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.hclaim-t {
  flex: 1;
  min-width: 0;
}
.hclaim-chev {
  flex: none;
  color: var(--text2);
}
.hlearn h3 {
  margin: var(--s5) 0 0;
  font-size: var(--fs-base);
}
.hlearn h3:first-child {
  margin-top: var(--s3);
}

/* ------------------------------------------------------------------ sheets */

.hsheet-hero {
  padding-top: 0;
}
.hsheet-tick {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.hsheet-meta {
  margin-block: var(--s0) 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.hform .field:last-of-type {
  margin-bottom: var(--s2);
}
.hchips {
  margin: var(--s2) 0 0;
}
.hchips .chip {
  font-variant-numeric: tabular-nums;
}
/* The price per mint unit, read back as the total is typed. */
.hper {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  margin: 0;
  padding: var(--s3) var(--s4);
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--r);
}
.hper:empty {
  display: none;
}
.hper-l {
  color: var(--text2);
  font-size: var(--fs-sm);
}
.hper-v {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: right;
}
.sheet-p {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.6;
}
/* Confirm sheets opened from this page: a long value (the recipient address) wraps inside its own
   column instead of squeezing its label onto two lines. The sheet lives on <body>, so it is scoped
   by the page slug rather than by a container. */
body[data-page="holdings"] .sheet .kvrows dt {
  white-space: nowrap;
}

@media (max-width: 419px) {
  .hrow-act .btn-compact {
    min-width: 0;
  }
}
@media (max-width: 374px) {
  .hacct-stat {
    padding: var(--s2);
  }
  .hrow-act {
    gap: var(--s1);
  }
  .hrow-act .btn-compact {
    padding: 0 var(--s3);
  }
}

/* ------------------------------------------------------------------ wide screens */

@media (min-width: 900px) {
  .hhead {
    margin-bottom: var(--s5);
  }

  /* The summary as one band: who, then the figures, then disconnect. */
  /* the desktop card padding every card uses (ui.css .card) */
  .hacct {
    display: grid;
    align-items: center;
    padding: var(--s5) var(--s6);
  }
  .hacct-ic {
    width: 48px;
    height: 48px;
  }
  .hacct-stats {
    margin: 0;
  }
  .hacct-stat {
    padding: var(--s3) var(--s4);
  }
  .hacct-stat dd {
    font-size: var(--fs-xl);
    min-height: 28px;
    letter-spacing: -0.02em;
  }
  .hacct-stat dd.is-unknown {
    font-size: var(--fs-base);
  }
  /* the foot's pieces join the band: disconnect as its third column, a wrong-network line under it */
  .hacct {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
    column-gap: var(--s5);
  }
  /* The whole address only where it fits on one line (a split address reads as two values and is
     hard to compare with the wallet): its cell takes the address's own width and the figures the
     rest. Narrower, the short form stays, with the whole address in the title and the copy button. */
  @media (min-width: 1200px) {
    .hacct {
      grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
    }
    .hacct-short {
      display: none;
    }
    .hacct-full {
      display: block;
      position: static;
      width: auto;
      height: auto;
      overflow: hidden;
      clip-path: none;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: var(--fs-md);
    }
  }
  .hacct-foot {
    display: contents;
  }
  .hacct-gap {
    display: none;
  }
  .hacct-foot .why {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--s3);
  }
  .hacct-off {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }

  .hsec {
    margin-top: var(--s6);
  }
  .hlist-table {
    --cols: minmax(240px, 1.7fr) minmax(88px, 0.7fr) minmax(88px, 0.7fr) minmax(88px, 0.7fr) minmax(150px, 1fr) 272px;
  }
  .hlist-head {
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: var(--s4);
    padding: 0 var(--s5) var(--s2);
    color: var(--text3);
    font-size: var(--fs-sm);
    font-weight: 600;
  }
  .hlist-head .r {
    text-align: right;
  }
  .hrow {
    grid-template-columns: var(--cols);
    grid-template-areas: none;
    column-gap: var(--s4);
    min-height: 76px;
    padding: var(--s3) var(--s5);
  }
  .hrow-token {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-width: 0;
  }
  .hrow .avatar,
  .hrow .skel-avatar {
    align-self: center;
    margin-top: 0;
  }
  .hrow .avatar,
  .hrow .skel-avatar,
  .hrow-id,
  .hrow-bal,
  .hrow-meta,
  .hrow-mints,
  .hrow-act {
    grid-area: auto;
  }
  .hrow-bal {
    align-self: center;
    text-align: right;
  }
  /* free and listed become cells */
  .hrow-meta {
    display: contents;
  }
  .hrow-meta > span {
    text-align: right;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-weight: 500;
  }
  .hrow-meta > span::before {
    content: none;
  }
  .hrow-meta .m,
  .hrow-locked {
    display: none;
  }
  .hrow-meta .d,
  .hrow-meta > .hrow-listed-none {
    display: block;
  }
  .hrow-meta > .is-zero {
    color: var(--text3);
  }
  .hrow-free:not(.is-zero) {
    color: var(--lime);
    font-weight: 600;
  }
  .hrow-mints,
  .hlist-head > span:nth-child(5) {
    padding-left: var(--s5);
  }
  .hrow-mints {
    font-size: var(--fs-md);
  }
  .hrow-mints-t .m {
    display: none;
  }
  .hrow-mints-t .d {
    display: inline;
  }
  .hrow-mints .progress {
    flex: 1 1 auto;
    max-width: 96px;
  }
  .hrow-act {
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin-top: 0;
  }
  .hrow-manage {
    order: -1;
    margin: 0;
  }
  .hrow.skel-card .hrow-meta {
    display: block;
    grid-column: 3 / 5;
  }

  .hconnect {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s8);
    row-gap: var(--s4);
    padding: var(--s8);
  }
  .hconnect-head {
    text-align: left;
  }
  .hconnect-title {
    margin-left: 0;
    font-size: var(--fs-2xl);
  }
  .hconnect-body {
    margin: 0;
  }
  .hconnect-points {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .hconnect-btn {
    width: auto;
    justify-self: start;
    padding: 0 var(--s6);
  }

  .wrow {
    padding-left: var(--s5);
  }
  .hmore {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    gap: var(--s4);
    margin-top: var(--s8);
  }
}