/* sovereign.html — rules the flat system does not provide */

/* The ladder. Six ways to run Certant, drawn as rungs that rise left to right, because the
   order carries information: each rung keeps more inside your own walls than the one before.
   The rungs are the tablist, so the drawing is also the control; flat.css has pill tabs but
   no card-shaped tab. --step sets each rung's drop below the top rung. */
.pg-sov-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); align-items: start; }
.pg-sov-rung {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1);
  margin-top: calc(var(--step) * 22px);
  padding: var(--sp-4); min-height: 148px; width: 100%;
  border: 0; border-radius: var(--r-card);
  background: var(--paper); color: var(--fg-2);
  font: inherit; font-size: var(--fs-sm); line-height: var(--lh-normal); text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pg-sov-rung:nth-child(1) { --step: 5; }
.pg-sov-rung:nth-child(2) { --step: 4; }
.pg-sov-rung:nth-child(3) { --step: 3; }
.pg-sov-rung:nth-child(4) { --step: 2; }
.pg-sov-rung:nth-child(5) { --step: 1; }
.pg-sov-rung:nth-child(6) { --step: 0; }
.pg-sov-rung b { margin-top: var(--sp-2); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--fg-1); line-height: 1.25; }
.pg-sov-rung__sub { color: var(--fg-2); }
/* Relative cost, pushed to the foot of the rung so the six line up along the stair. */
.pg-sov-cost { margin-top: auto; padding-top: var(--sp-2); font-weight: var(--fw-bold); letter-spacing: 0.04em; color: var(--green-text); }
.pg-sov-rung:hover { background: color-mix(in srgb, var(--paper), var(--green) 8%); }
/* The selected rung takes ink, as selected tabs do everywhere else on the site. */
.pg-sov-rung[aria-selected="true"] { background: var(--ink); color: var(--on-solid-muted); }
.pg-sov-rung[aria-selected="true"] b { color: var(--on-solid); }
.pg-sov-rung[aria-selected="true"] .pg-sov-rung__sub { color: var(--on-solid-muted); }
.pg-sov-rung[aria-selected="true"] .pg-sov-cost { color: var(--yellow-tint); }
/* Bronze is too dark to read on ink, so the lit number takes the bronze tint with an ink numeral. */
.pg-sov-rung[aria-selected="true"] .callout { background: var(--yellow-tint); color: var(--ink); border-color: var(--ink); }
/* The panel heading leads with the same number as its rung, so the pair reads without colour. */
.pg-sov-panel__h { display: flex; align-items: center; gap: var(--sp-3); }
/* The opened rung. Paper on the green panel (paper inside a tint is the system's card). */
.pg-sov-panel { --pad: var(--sp-6); border-radius: var(--r-card); }
.pg-sov-panel .tile { background: var(--bg-tint); }
/* Four short facts: the spec grid's section-scale row gap is too airy inside a card. */
.pg-sov-panel .specs { gap: var(--sp-5) var(--sp-6); }

/* Below 1000px six columns leave each rung too narrow to read, so the stair becomes a
   three-by-two grid and then a list; the numbers keep the order the rise used to show. */
@media (max-width: 1000px) {
  .pg-sov-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .pg-sov-rung { margin-top: 0; min-height: 132px; }
}
/* On a phone the six full rungs ran to about 570px, so a tap changed a panel that was off
   screen. Each rung becomes one row, number and name, and the set fits above the panel. */
@media (max-width: 600px) {
  .pg-sov-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .pg-sov-rung { flex-direction: row; align-items: center; gap: var(--sp-2); min-height: 0; padding: var(--sp-3); }
  .pg-sov-rung b { margin-top: 0; font-size: var(--fs-sm); }
  .pg-sov-rung__sub, .pg-sov-cost { display: none; }
  .pg-sov-panel { --pad: var(--sp-5); }
  .specs, .specs--2 { grid-template-columns: 1fr; }
}

/* Packet capture results. A small table of measured values; row labels are th so a screen
   reader announces them, and keep the key cell's look. Header text is Ink 2 on the tint. */
.pg-sov-capture thead th { color: var(--fg-2); }
.pg-sov-capture tbody th { padding: 10px 12px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-1); text-align: left; }
.pg-sov-capture tbody tr:last-child th { border-bottom: 0; }
.pg-sov-capture td { color: var(--fg-1); }

/* Links inside the closing list sit in running text, so they are underlined to be found. */
.flat-ink .ticks a { text-decoration: underline; text-underline-offset: 3px; }

/* Standards table (a .table--stack). Each row leads with an icon tile, the same shape as the
   technical tables on knowledgebases.html, so reference tables match across the site. The
   last column is the answer the reader came for, so it takes ink. */
.pg-sov-label { display: flex; align-items: center; gap: var(--sp-3); }
.pg-sov-standards tbody th { width: 250px; }
.pg-sov-standards tbody th, .pg-sov-standards td { vertical-align: middle; }
.pg-sov-standards td:last-child { width: 32%; color: var(--fg-1); }
@media (max-width: 700px) { .pg-sov-standards tbody th, .pg-sov-standards td:last-child { width: auto; } }
/* Source links in the caption sit in running text, so they are underlined to be found. */
.pg-sov-standards + .caption a, #why .tint p a { text-decoration: underline; text-underline-offset: 3px; }

/* The deployment drawing holds its drawn width on a phone and scrolls, so its labels stay
   above the type floor (DESIGN.md Diagrams). */
#assessed .viz-frame--wide cert-deployment-toggle { display: block; min-width: 520px; }