/* VPN Control · the pages of the panel itself. Loads after oled/tokens.css and oled/bundle.css (OLED True-Black)
   and adds only layout: every color, space, radius and size is a token, every control a class of the bundle. */

@font-face { font-family: Inter; src: url(fonts/Inter-Variable.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/JetBrainsMono-Variable.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

html { block-size: 100%; }
body { min-block-size: 100%; }

/* One column in the middle of the window: the brand, then the page. */
.vc-page {
  box-sizing: border-box; min-block-size: 100dvh;
  display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: var(--space-24);
  padding-block: max(var(--space-24), env(safe-area-inset-top)) max(var(--space-24), env(safe-area-inset-bottom));
  padding-inline: max(var(--space-20), env(safe-area-inset-left)) max(var(--space-20), env(safe-area-inset-right));
}
.vc-page > * { inline-size: 100%; max-inline-size: 30rem; min-inline-size: 0; }

.vc-brand { display: flex; align-items: center; gap: var(--space-12); min-block-size: var(--control-lg); color: var(--text-1); text-decoration: none; font: var(--w-semibold) var(--fs-title-s)/1.2 var(--font-sans); }
.vc-brand__mark { position: relative; flex: none; inline-size: 28px; block-size: 28px; border-radius: var(--radius-sm); background: var(--g-brand); }
.vc-brand__mark::after { content: ""; position: absolute; inset: 8px; border-radius: 3px; background: #000; opacity: 0.9;
  mask: linear-gradient(#000 0 0) top / 100% 3px no-repeat, linear-gradient(#000 0 0) center / 100% 3px no-repeat, linear-gradient(#000 0 0) bottom / 100% 3px no-repeat; }

.vc-main { align-self: center; display: grid; gap: var(--space-24); padding-block: var(--space-16); }
.vc-head { display: grid; gap: var(--space-12); }
.vc-head > p { margin: 0; color: var(--text-2); }
.vc-lead { margin: 0; color: var(--text-2); }

/* Who asks: two lines of facts, label above value, grouped with space (cards and lists stay black). */
.vc-facts { display: grid; gap: var(--space-16); margin: 0; }
.vc-facts > div { display: grid; gap: var(--space-2); min-inline-size: 0; }
.vc-facts dt { font: var(--w-medium) var(--fs-caption)/1.5 var(--font-sans); color: var(--text-2); }
.vc-facts dd { margin: 0; font: var(--w-medium) var(--fs-body)/1.4 var(--font-sans); color: var(--text-1); }

.vc-status { display: flex; min-inline-size: 0; }
.vc-status > .o-chip { white-space: normal; }   /* a status is a word or two; at a very large text size it may still need a second line */
.vc-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.vc-actions > .o-btn { box-sizing: border-box; }   /* a link that is a button counts its padding in its width, as a button does */
.vc-steps { display: grid; gap: var(--space-20); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.vc-steps > li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-12); counter-increment: step; }
.vc-steps > li::before { content: counter(step); grid-row: 1 / span 2; display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--text-1); font: var(--w-semibold) var(--fs-label)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.vc-steps h2 { font: var(--w-semibold) var(--fs-body)/1.4 var(--font-sans); align-self: center; }
.vc-steps p { margin: 0; grid-column: 2; color: var(--text-2); }
.vc-steps .o-code-inline, .vc-lead .o-code-inline { color: var(--text-1); overflow-wrap: anywhere; }
/* A command stays in one piece where a line has room for it, and breaks only where none has. */
.vc-cmd { display: inline-block; max-inline-size: 100%; box-sizing: border-box; }

/* Touch: the main action is the bundle's full-width 56 px button (o-btn--cta); the second one goes under it, as wide. */
@media (pointer: coarse) {
  .vc-actions { display: grid; }
  .vc-actions > .o-btn { inline-size: 100%; }
}
@media (forced-colors: active) {
  .vc-brand__mark { forced-color-adjust: none; }   /* the brand mark is a picture: it keeps its colors */
  .vc-steps > li::before { border: 1px solid CanvasText; }
}