/* The per-utility pages, /power and /power/<utility>, on top of
   styles.css, brand.css and check-page.css. Generated pages:
   dekalos/power_pages.py. */
.power-guide .table-frame { border-radius: 0; }
.power-guide .kick-tag a { font-size: inherit; }
.power-independent { font-size: .875rem; color: var(--ink-soft); margin-top: 10px; max-width: 60ch; }
.power-guide .hero .prose { margin-top: 1rem; }
.power-jump { margin-top: 1.5rem; }
.power-jump a { display: inline-block; padding: 6px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; margin: 0 6px 8px 0; color: inherit; text-decoration: none; }
.power-meta { font-size: .875rem; color: #A9BEDA; margin-top: 6px; }
.power-guide .ledger td.muted { color: var(--ink-soft); }
.ledger__group th { padding-top: 1.75rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.power-table-note { max-width: 60ch; }

/* the index: a grid of states */
.power-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px 48px; margin-top: 2.5rem; }
.power-index__item { margin-top: 1rem; }
.power-index__name { font-size: 1.0625rem; font-weight: 500; color: #ECEEF4; }
.power-index__item small { display: block; color: var(--ink-soft); font-size: .875rem; margin-top: 2px; }

/* phones: each table row becomes a card, the price on the right */
@media (max-width: 640px) {
  .power-guide .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .power-guide .ledger tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .power-guide .ledger tbody th, .power-guide .ledger tbody td { display: block; padding: 0; border: 0; }
  .power-guide .ledger tbody th { grid-column: 1; font-weight: 500; }
  .power-guide .ledger tbody td:not(.num) { grid-column: 1; color: var(--ink-soft); font-size: .875rem; }
  .power-guide .ledger tbody td.num { grid-column: 2; grid-row: 1; text-align: right; font-weight: 500; }
  .power-guide .ledger tbody td:empty { display: none; }
}