/* The Subnet Splitting Trainer. Framed by its post, which cannot pass the
   site's light/dim switch in, so it follows the reader's system preference,
   as the TCP and NAT tools do. The address boxes' own styles are in
   ../subnet-tool.css. */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --border: #dfe3e8;
  --text: #22272e;
  --dim: #5f6b78;
  --accent: #0077b8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1d2b;
    --card: #112b40;
    --border: #234862;
    --text: #eaf1f6;
    --dim: #9fb2c2;
    --accent: #4fb3ff;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.45; }
bdi { direction: ltr; unicode-bidi: isolate; }

.ss-app { max-width: 980px; margin: 0 auto; padding: 0 16px 2rem; }
.ss-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; padding-top: 0.5rem; }
.ss-head h1 { font-size: 1.3rem; margin: 0; }
.ss-head p { margin: 0; color: var(--dim); font-size: 0.92rem; }
.in-viewer .ss-head { display: none; }   /* the viewer page's top bar holds it */

button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- the workspace: sticky at the top */
.ss-ws {
  position: sticky; top: 0; z-index: 5;
  background: var(--card); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 12px 12px; padding: 0.35rem 0.6rem 0.4rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
#ss-box { margin-top: 0; }


/* --- the network address, the address and the broadcast address, one over another */
/* the three in one frame, which folds to its title */
.ss-group { margin-top: 0.5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: 0.25rem 0.5rem 0.4rem; }
.ss-group:not([open]) { padding-bottom: 0.25rem; }
.ss-group > summary { font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.ss-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* a column of captions, each beside its tool */
.boxes { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr);   /* one caption width in every frame, so the tools line up */
  align-items: center; gap: 0.3rem 0.8rem; margin-top: 0.3rem; }
.boxes > div { display: contents; }
.boxes .cap { font-size: 0.9rem; font-weight: 700; }
.boxes > .more { display: block; grid-column: 1 / -1; color: var(--dim); font-size: 0.84rem; padding-inline-start: 0.2rem; }

@media (max-width: 640px) {
  .ss-app { padding: 0 8px 2rem; }
  .ss-ws { padding: 0.3rem 0.4rem 0.35rem; }
  .ss-group { padding: 0.25rem 0.35rem 0.35rem; }
    /* too narrow for a column beside the tools: each caption over its tool */
  .boxes { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .boxes > div:not(:first-child) .cap { margin-top: 0.3rem; }
}