/* ===========================================================================
   RAREPAD token page. Composition only: grid, gaps and one off widths.
   No colour, no radius, no shadow, no font, no new component is defined here.
   Everything visual comes from app/css/rarepad.css.
   =========================================================================== */

#tk-page { display: grid; gap: var(--s5); }
.tk-state { margin-bottom: var(--s4); }
.tk-fail { margin-bottom: var(--s5); }

/* the sheet head: picture, identity, price */
.tk-head { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, auto); gap: var(--s4) var(--s5); align-items: start; }
.tk-head-pic, .tk-head-main { min-width: 0; }
.tk-id { margin-top: var(--s3); }
.tk-idline { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; max-width: 100%; }
.tk-links { margin-top: var(--s3); }
.tk-head-price { display: grid; justify-items: end; gap: var(--s1); text-align: right; min-width: 0; }

/* the columns under the sheet. Source order is phone order: the fact table,
   then the order slip, then the chart, the price line and the notice. */
.tk-col, .tk-aside { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
.tk-sec-bd { display: grid; gap: var(--s4); min-width: 0; }

/* above the two column breakpoint the fact table and the chart stack in the
   wide column and the order slip column sits beside both of them */
@media (min-width: 901px) {
  /* the second row takes the slack, so the order slip column can run past the
     fact table without opening a gap above the chart */
  .tk-cols { grid-template-rows: auto 1fr; }
  .tk-col-a { grid-column: 1; grid-row: 1; }
  .tk-col-b { grid-column: 1; grid-row: 2; }
  .tk-cols > .tk-aside { grid-column: 2; grid-row: 1 / span 2; }
}

/* the ruled fact table sets in two columns while there is room */
.tk-facts2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }

/* the seven day line */
.tk-spark { display: block; width: 100%; height: auto; }
.tk-spark-note { margin-top: var(--s2); }

/* creator tools */
.tk-taxin { width: 72px; }

@media (max-width: 680px) {
  .tk-head { grid-template-columns: minmax(0, 1fr); }
  .tk-head-price { justify-items: start; text-align: left; }
  .tk-facts2 { grid-template-columns: minmax(0, 1fr); }
}