/* ==========================================================================
   Support v2  -  "District Ops" shell
   Scoped entirely under .sv2 so it cannot leak into other pages.
   Design language extends the .netreq cards already on Tech Requirements.
   ========================================================================== */

.sv2{
  --ink:#16171a;
  --body:#55677a;
  --muted:#8a97a3;
  --line:#e2e7ea;
  --line-soft:#eef2f4;
  --canvas:#f7f9fa;
  --navy:#12293f;
  --navy-2:#1b3a56;
  --accent:#17acd5;
  --accent-ink:#0d7fa0;
  --ok:#0f8f3a;
  --warn:#e8a33d;
  --warn-bg:#fdf7ec;

  background:#fff !important;
  font-family:"Open Sans",Helvetica,Arial,sans-serif;
  font-size:15px;
  color:var(--body);
  -webkit-font-smoothing:antialiased;

  /* Sticky footer: the page always fills the viewport, and margin-top:auto on
     .footer pushes the bar to the bottom when a topic is shorter than the
     screen instead of leaving it stranded mid-page. */
  display:flex; flex-direction:column; min-height:100vh;
}
/* faq.css sets *::before,*::after{content:''} site-wide. Now that the body is
   a flex container its own pair would become two stray flex items. */
.sv2::before,.sv2::after{ content:none }

/* ---------------------------------------------------------------------------
   faq.css line 1 sets  *::before,*::after{content:''}  site-wide. Inside a grid
   or flex container those pseudo-elements become real items, so every layout
   here silently gained two extra children - which is what pushed the 4th video
   and the Grade 5 chart onto their own rows.
   Only elements carrying an sv2- class are cleared, so the deliberate pseudo
   content on unclassed children (chevrons, arrows, the nav underline) survives.
   An icon that also carries an sv2- class (the breadcrumb chevron, for one)
   must keep its glyph, so anything with a fa- class is exempt.
   --------------------------------------------------------------------------- */
.sv2 [class^="sv2-"]:not([class*="fa-"])::before,
.sv2 [class*=" sv2-"]:not([class*="fa-"])::before,
.sv2 [class^="sv2-"]:not([class*="fa-"])::after,
.sv2 [class*=" sv2-"]:not([class*="fa-"])::after{ content:none }

/* faq.css strips list markers globally; put them back inside answers */
.sv2 .sv2-a ol,
.sv2 .sv2-a ul{ padding-left:22px; margin:0 0 16px }
.sv2 .sv2-a ol > li{ list-style:decimal; margin-bottom:12px }
.sv2 .sv2-a ul > li{ list-style:disc; margin-bottom:10px }
.sv2 .sv2-a li::marker{ color:var(--muted) }

.sv2 a{ color:var(--accent-ink) }
.sv2 a:hover{ color:var(--accent) }
.sv2 *,.sv2 *::before,.sv2 *::after{ box-sizing:border-box }

/* ---------- Shell + sidebar ------------------------------------------------
   There used to be an empty navy strip here to catch the shared nav's centre
   logo, which is 96px tall on a 64px bar and so hangs ~32px below it. The strip
   is gone (the black nav already reads as the header), but the clearance is
   not optional - without padding-top the logo lands on the sidebar and title.
   Keep this >= 32px. */
.sv2 .sv2-shell{
  max-width:1340px; margin:0 auto; display:flex; align-items:flex-start;
  padding-top:40px;
}

/* The column stays as tall as the article (align-self:stretch) because that is
   what gives position:sticky room to travel - without it the nav scrolls away
   on a long Reports page. But painting THE COLUMN grey left a long empty rail
   trailing below the contact card, ending wherever the article happened to end.
   So the column is now invisible and the sticky inner carries the paint: the
   panel ends with its own content, and the nav still follows you down. */
/* Widths here are tuned so every nav label fits on one line with its count
   badge. Reclaimed from the column's own padding, the nav's gutter, the link
   padding and the icon gap rather than from one big number, so nothing had to
   move far. Roughly 163px of label room at the widest. */
.sv2 .sv2-side{
  flex:0 0 268px; width:268px; align-self:stretch;
  padding:26px 14px 40px 0;
}
/* The z-index is load-bearing, not decoration. position:sticky creates a
   stacking context, so every z-index inside this column - including the hover
   previews - is confined to it. The column also comes BEFORE .sv2-main in the
   DOM, so without a z-index here main's positioned children (the sv2-badge
   pills, the breadcrumb chips) paint on top and previews vanish behind them.
   Kept well under any fixed site chrome. */
.sv2 .sv2-side-sticky{
  position:sticky; top:16px; z-index:30;
  padding:18px 0 8px;
}

.sv2 .sv2-navlabel{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px; padding:0 16px;
}
.sv2 .sv2-nav{ list-style:none; margin:0 0 20px; padding:0 8px }
.sv2 .sv2-nav li{ list-style:none; margin:0 }
.sv2 .sv2-nav a{
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; margin-bottom:2px; border-radius:6px;
  font-size:14px; font-weight:600; color:#41556a !important;
  text-decoration:none; line-height:1.3;
}
.sv2 .sv2-nav a i{ width:16px; text-align:center; font-size:13px; color:var(--muted) }
.sv2 .sv2-nav a:hover{ background:#eaeff2; color:var(--ink) !important }
.sv2 .sv2-nav a.is-active{
  background:#fff; color:var(--accent-ink) !important;
  box-shadow:inset 3px 0 0 var(--accent), 0 1px 2px rgba(18,41,63,.06);
  border:1px solid var(--line);
}
.sv2 .sv2-nav a.is-active i{ color:var(--accent) }
.sv2 .sv2-nav-count{
  margin-left:auto; font-size:11px; font-weight:700; color:var(--muted);
  background:#e6ebef; border-radius:10px; padding:1px 6px;
}
.sv2 .sv2-nav a.is-active .sv2-nav-count{ background:#e2f4fa; color:var(--accent-ink) }
/* Sections with a single topic get an empty badge, which still painted its
   pill background as a small grey dash. */
.sv2 .sv2-nav-count:empty{ display:none }

/* ---------- Main column ---------------------------------------------------- */
/* Keep the bottom padding modest: .sv2 .footer adds its own margin-top below
   this, and the two used to stack into ~146px of empty space above the footer. */
.sv2 .sv2-main{ flex:1 1 auto; min-width:0; padding:38px 56px 40px }

.sv2 .sv2-pagehead{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:22px;
}
.sv2 .sv2-pagehead h1{
  margin:0 0 6px; font-size:30px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
}
.sv2 .sv2-pagehead p{ margin:0; font-size:14.5px; color:var(--body) }

.sv2 .sv2-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:6px;
  font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap;
  border:1px solid var(--line); background:#fff; color:var(--ink) !important;
}
.sv2 .sv2-btn:hover{ border-color:#c9d3da; background:#fbfcfd; color:var(--ink) !important }
.sv2 .sv2-btn-primary{ background:var(--navy); border-color:var(--navy); color:#fff !important }
.sv2 .sv2-btn-primary:hover{ background:var(--navy-2); border-color:var(--navy-2); color:#fff !important }

/* ---------- Page title: centred over the search field ---------------------- */
.sv2 .sv2-pagetitle{
  margin:0 0 18px; padding:0; text-align:center;
  font-family:inherit; font-size:30px; font-weight:700; line-height:1.2;
  color:var(--ink); letter-spacing:-.01em;
}

/* ---------- Search --------------------------------------------------------- */
.sv2 .sv2-searchwrap{ position:relative; margin:0 0 16px }
.sv2 .sv2-searchwrap > i{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:15px; pointer-events:none;
}
.sv2 #sv2-search{
  width:100%; height:50px; padding:0 108px 0 44px;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  font-family:inherit; font-size:15px; color:var(--ink);
  box-shadow:0 1px 2px rgba(18,41,63,.04);
}
.sv2 #sv2-search::placeholder{ color:#9aa7b2 }
.sv2 #sv2-search:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(23,172,213,.14);
}
.sv2 .sv2-searchkey{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font:600 11px/1 Consolas,"Courier New",monospace; color:var(--muted);
  border:1px solid var(--line); border-radius:4px; padding:5px 7px; background:var(--canvas);
}
.sv2 .sv2-searchwrap.is-typing .sv2-searchkey{ display:none }

/* ---------- Cards ---------------------------------------------------------- */
.sv2 .sv2-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
.sv2 .sv2-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 30px }
.sv2 .sv2-card{
  display:block; position:relative;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  padding:18px 18px 16px; text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.sv2 .sv2-card:hover{
  border-color:#bcd9e4; box-shadow:0 4px 14px rgba(18,41,63,.07);
  transform:translateY(-1px); text-decoration:none;
}
.sv2 .sv2-card-ico{
  width:32px; height:32px; border-radius:7px; background:#e6f5fa;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-ink); font-size:14px; margin-bottom:12px;
}
.sv2 .sv2-card h4{ margin:0 0 5px; font-size:14.5px; font-weight:700; color:var(--ink) }
.sv2 .sv2-card p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--muted) }
.sv2 .sv2-card-arrow{ position:absolute; top:16px; right:16px; color:#c2ced7; font-size:12px }
.sv2 .sv2-card:hover .sv2-card-arrow{ color:var(--accent) }

.sv2 .sv2-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  border-radius:4px; padding:3px 8px; white-space:nowrap;
}
.sv2 .sv2-badge-it{ background:#eef2f6; color:#42607d; border:1px solid #dbe3ea }
.sv2 .sv2-badge-teacher{ background:#e9f6fb; color:#0d7fa0; border:1px solid #cfe9f2 }
.sv2 .sv2-badge-home{ background:#f4f0fa; color:#6a4fa3; border:1px solid #e4dcf2 }

/* ---------- Sections and articles ------------------------------------------ */
.sv2 .sv2-section{ display:none }
.sv2 .sv2-section.is-active{ display:block }

.sv2 .sv2-sechead{ margin:0 0 32px; padding-bottom:20px; border-bottom:1px solid var(--line) }
.sv2 .sv2-sechead h2{ margin:0 0 6px; font-size:24px; font-weight:700; color:var(--ink) }
.sv2 .sv2-sechead p{ margin:0; font-size:14px; color:var(--body) }

.sv2 .sv2-article{
  scroll-margin-top:20px;
  padding:0 0 40px; margin:0 0 40px; border-bottom:1px solid var(--line-soft);
}
.sv2 .sv2-article:last-child{ border-bottom:none; margin-bottom:0 }
.sv2 .sv2-q{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 14px; font-size:19px; font-weight:700; color:var(--ink); line-height:1.35;
}
.sv2 .sv2-anchor{
  font-size:14px; color:#cfd8de !important; text-decoration:none; opacity:0; transition:opacity .15s;
}
.sv2 .sv2-article:hover .sv2-anchor{ opacity:1 }
.sv2 .sv2-anchor:hover{ color:var(--accent) !important }
.sv2 .sv2-q .sv2-badge{ position:relative; top:-2px }

/* No prose measure cap anywhere on this page - deliberate, and it has been
   re-litigated three times, so read this before adding one back.
   Text runs to the same right edge as the search field, the section rules and
   the matrix tables. A capped paragraph sitting beside a full-width search
   field reads as a mistake, not as line length, and it was orphaning single
   words onto their own line while ~200px sat empty beside them.
   Line length is not unbounded: .sv2-shell caps the page at 1340px, which
   leaves the text column ~970px / ~112ch at the widest. That ceiling is the
   measure control - a second cap on the prose was redundant. If a narrower
   measure is ever wanted, widen the gutters or narrow the shell; do not put a
   ch cap back on these elements. */
.sv2 .sv2-a{ max-width:none; font-size:14.5px; line-height:1.65; color:var(--body) }
.sv2 .sv2-a p{ margin:0 0 16px }
.sv2 .sv2-a p:last-child{ margin-bottom:0 }
.sv2 .sv2-a strong{ color:var(--ink); font-weight:600 }
.sv2 .sv2-a h4{
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); margin:30px 0 12px;
}
.sv2 .sv2-a h4:first-child{ margin-top:0 }
.sv2 .sv2-a code{
  font-family:Consolas,"Courier New",monospace; font-size:13px;
  background:var(--line-soft); border:1px solid var(--line); border-radius:3px;
  padding:1px 5px; color:var(--ink); white-space:nowrap;
}
.sv2 .sv2-a .appname{ color:var(--accent-ink); font-weight:700 }

.sv2 .sv2-shot{ display:block; margin:22px 0; max-width:100% }
.sv2 .sv2-shot img{
  display:block; max-width:100%; height:auto;
  border:1px solid var(--line); border-radius:6px; background:#fff;
}
.sv2 .sv2-shot figcaption{ margin-top:8px; font-size:12.5px; color:var(--muted) }
.sv2 .sv2-shot-narrow img{ max-width:420px }
.sv2 .sv2-shot-mid img{ max-width:620px }
.sv2 .sv2-shotrow{ display:flex; gap:18px; flex-wrap:wrap; margin:22px 0 }
.sv2 .sv2-shotrow .sv2-shot{ margin:0; flex:1 1 260px }

/* Figures are uncapped too, same as the prose - the shell's 1340px is the only
   ceiling. Screenshots never upscale past their intrinsic width anyway, and the
   .sv2-shot-narrow / -mid caps above still pin the ones that should stay small. */

/* Report topics differ only in figure spacing now. The prose cap that used to
   live here is gone along with every other one - see the note above .sv2-a. */
.sv2 .sv2-a.sv2-wide{ max-width:none }
.sv2 .sv2-a.sv2-wide > .sv2-shot{ margin:18px 0 8px }
.sv2 .sv2-cap{
  margin:0 0 22px; font-size:12.5px; line-height:1.5; color:var(--muted);
}

.sv2 .sv2-note{
  border-left:3px solid var(--accent); background:#f6fcfe;
  padding:13px 16px; margin:0 0 18px; border-radius:0 4px 4px 0;
}
.sv2 .sv2-note p{ margin:0 }
.sv2 .sv2-note p + p{ margin-top:8px }
.sv2 .sv2-warn{
  border-left:4px solid var(--warn); background:var(--warn-bg);
  padding:14px 18px; margin:0 0 20px;
}
.sv2 .sv2-warn p{ margin:0; color:#5c5344 }
.sv2 .sv2-warn p + p{ margin-top:8px }

.sv2 .sv2-jump{ display:flex; flex-direction:column; gap:10px; margin:0 0 18px }
.sv2 .sv2-jump a{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:6px; background:#fff;
  padding:13px 16px; text-decoration:none; color:var(--body) !important;
}
.sv2 .sv2-jump a:hover{ border-color:var(--accent); background:#f6fcfe }
.sv2 .sv2-jump b{ color:var(--ink); display:block; margin-bottom:2px; font-size:14px }
.sv2 .sv2-jump span{ font-size:13px; line-height:1.55 }
.sv2 .sv2-jump i{ color:var(--accent); margin-top:4px; font-size:12px }
.sv2 .sv2-parthead{
  margin:34px 0 16px; padding-top:26px; border-top:1px solid var(--line);
  font-size:18px; font-weight:700; color:var(--ink); scroll-margin-top:20px;
}
.sv2 .sv2-substep{ margin:0 0 6px; font-size:15px; font-weight:700; color:var(--ink) }

/* the .netreq allowlist blocks, retuned to match */
.sv2 .netreq{ max-width:none }
.sv2 .netreq p{ font-size:14.5px; line-height:1.65; color:var(--body) }
.sv2 .netreq h4{
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); margin:30px 0 12px;
}
.sv2 .netreq h4:first-child{ margin-top:0 }
.sv2 .netreq-group{
  border:1px solid var(--line); border-radius:6px; background:#fff;
  margin:0 0 14px; overflow:hidden;
}
.sv2 .netreq-group-head{
  padding:12px 18px; background:var(--canvas); border-bottom:1px solid var(--line);
  font-size:13px; line-height:1.5; color:var(--muted);
}
.sv2 .netreq-group-head strong{ display:block; font-size:14px; color:var(--ink); font-weight:700 }
.sv2 .netreq-list{ margin:0 !important; padding:0 !important }
.sv2 .netreq-list li{
  list-style:none !important; font-family:Consolas,"Courier New",monospace;
  font-size:13px; line-height:1.4; color:var(--ink);
  padding:9px 18px; border-bottom:1px solid var(--line-soft); margin:0 !important;
  word-break:break-all;
}
.sv2 .netreq-list li:last-child{ border-bottom:none }
.sv2 .netreq-list-plain li{ font-family:inherit; font-size:14px; word-break:normal }
.sv2 .netreq-foot{
  margin:0; padding:10px 18px; background:#fafbfc; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--muted);
}
.sv2 .netreq-group-optional{ border-style:dashed }
.sv2 .netreq-group-optional .netreq-group-head{ background:#fff }
.sv2 .netreq-group-optional .netreq-list li{ color:var(--body) }

/* the one card an admin actually has to act on - lifted out of the stack */
.sv2 .netreq-group.sv2-allow{
  border-color:var(--accent); box-shadow:0 1px 4px rgba(23,172,213,.16);
}
.sv2 .netreq-group.sv2-allow .netreq-group-head{ background:#f6fcfe }
.sv2 .netreq-group.sv2-allow .netreq-group-head strong{ color:var(--accent-ink) }
.sv2 .netreq-group.sv2-allow .netreq-list li{ font-size:14px; font-weight:600 }

/* ---------- Search results state ------------------------------------------- */
.sv2 .sv2-results{ display:none }
.sv2.is-searching .sv2-results{ display:block }
.sv2 .sv2-resultcount{ font-size:13px; color:var(--muted); margin:0 0 18px }
.sv2 .sv2-hit{
  border:1px solid var(--line); border-radius:8px; background:#fff;
  padding:16px 18px; margin-bottom:10px; display:block; text-decoration:none;
}
.sv2 .sv2-hit:hover{ border-color:var(--accent); background:#fbfeff }
.sv2 .sv2-hit b{ display:block; font-size:15px; color:var(--ink); margin-bottom:4px }
.sv2 .sv2-hit mark{ background:#fdf3d4; color:inherit; padding:0 2px; border-radius:2px }
.sv2 .sv2-hit p{ margin:0; font-size:13px; color:var(--muted); line-height:1.55 }
.sv2 .sv2-hit-crumb{
  display:block; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:6px;
}
.sv2 .sv2-empty{
  border:1px dashed var(--line); border-radius:8px; padding:34px 24px; text-align:center;
  color:var(--muted); font-size:14px;
}
.sv2 .sv2-empty b{ display:block; color:var(--ink); font-size:16px; margin-bottom:6px }

/* ---------- Responsive ----------------------------------------------------- */
@media (max-width:1100px){
  .sv2 .sv2-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sv2 .sv2-main{ padding:32px 34px 36px }
}
@media (max-width:860px){
  .sv2 .sv2-shell{ display:block }
  .sv2 .sv2-side{
    width:100%; flex:none; border-right:none; border-bottom:1px solid var(--line);
    padding:16px 0; background:#fff;
  }
  /* undo the desktop panel paint - on mobile this is a horizontal chip strip */
  .sv2 .sv2-side-sticky{
    position:static; background:none; border:none; border-radius:0; padding:0;
  }
  .sv2 .sv2-navlabel{ display:none }
  .sv2 .sv2-nav{
    display:flex; gap:6px; overflow-x:auto; padding:0 16px 4px; margin-bottom:0;
    -webkit-overflow-scrolling:touch;
  }
  .sv2 .sv2-nav a{ white-space:nowrap; border:1px solid var(--line); border-radius:999px; margin:0 }
  .sv2 .sv2-nav a.is-active{
    box-shadow:none; background:var(--navy); color:#fff !important; border-color:var(--navy);
  }
  .sv2 .sv2-nav a.is-active i{ color:#fff }
  .sv2 .sv2-nav-count{ display:none }
  .sv2 .sv2-main{ padding:24px 18px 28px }
  .sv2 .sv2-pagehead h1{ font-size:25px }
  .sv2 .sv2-pagetitle{ font-size:25px; margin-bottom:14px }
  .sv2 .sv2-grid{ grid-template-columns:1fr }
  .sv2 .sv2-q{ font-size:17px }
  .sv2 .sv2-searchkey{ display:none }
  .sv2 #sv2-search{ padding-right:16px }
}
/* ---------- Print: every section visible, no chrome ------------------------ */
@media print{
  .sv2 .sv2-side,.sv2 .sv2-searchwrap,
  .sv2 #header-main,.sv2 .footer,.sv2 .sv2-contactstrip{ display:none !important }
  .sv2 .sv2-section{ display:block !important; page-break-before:always }
  .sv2 .sv2-main{ padding:0 }
  .sv2 .sv2-shot img{ max-width:520px }
}

/* ---------- Sub-groups inside a section ------------------------------------ */
.sv2 .sv2-group{
  margin:38px 0 20px; padding-bottom:9px; border-bottom:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}
.sv2 .sv2-group:first-of-type{ margin-top:0 }
.sv2 .sv2-article + .sv2-group{ margin-top:10px }

/* ---------- Device x provider matrix --------------------------------------- */
.sv2 .sv2-matrixwrap{ overflow-x:auto; margin:0 0 34px; border:1px solid var(--line); border-radius:8px }
.sv2 .sv2-matrix{ width:100%; border-collapse:collapse; background:#fff; min-width:620px }
.sv2 .sv2-matrix th,.sv2 .sv2-matrix td{
  padding:12px 14px; text-align:left; font-size:13.5px;
  border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
}
.sv2 .sv2-matrix th:last-child,.sv2 .sv2-matrix td:last-child{ border-right:none }
.sv2 .sv2-matrix tr:last-child td{ border-bottom:none }
.sv2 .sv2-matrix thead th{
  background:var(--canvas); color:var(--ink); font-weight:700;
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.sv2 .sv2-matrix tbody th{
  background:#fcfdfd; color:var(--ink); font-weight:700; white-space:nowrap;
}
.sv2 .sv2-matrix td a{ font-weight:600; text-decoration:none }
.sv2 .sv2-matrix td a::after{ content:" \2192"; color:var(--muted) }
.sv2 .sv2-matrix td span{ color:var(--muted) }

/* ---------- Standards thumbnails ------------------------------------------- */
.sv2 .sv2-thumbs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:4px 0 0 }
.sv2 .sv2-thumb{
  display:block; border:1px solid var(--line); border-radius:8px; background:#fff;
  padding:10px; text-decoration:none; transition:border-color .15s, box-shadow .15s;
}
.sv2 .sv2-thumb:hover{ border-color:var(--accent); box-shadow:0 4px 14px rgba(18,41,63,.08) }
.sv2 .sv2-thumb img{
  display:block; width:100%; height:168px; object-fit:contain; object-position:top center;
  background:#fff; border-radius:4px;
}
.sv2 .sv2-thumb b{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:10px; font-size:13px; font-weight:700; color:var(--ink);
}
.sv2 .sv2-thumb b::after{ content:"\f00e"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#c2ced7; font-size:12px }
.sv2 .sv2-thumb:hover b::after{ color:var(--accent) }

/* ---------- Copy-link affordance on each answer ---------------------------- */
.sv2 .sv2-anchor{ cursor:pointer }
.sv2 .sv2-anchor.is-copied{ opacity:1 !important; color:var(--ok) !important }

/* ---------- Bottom contact strip ------------------------------------------- */
.sv2 .sv2-contactstrip{
  margin:46px 0 0; padding:20px 22px;
  border:1px solid var(--line); border-radius:8px; background:var(--canvas);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.sv2 .sv2-contactstrip p{ margin:0; font-size:14px; color:var(--body) }
.sv2 .sv2-contactstrip b{ color:var(--ink) }

/* ---------- Shared site footer ---------------------------------------------
   partials/footer.php is the site's footer and this page just includes it, the
   same as the twenty other pages that do. Everything it needs - the black bar,
   its 85px height, white 12px text, the inline list - already comes from the
   bare `footer` element rules in styleV2.min.css.

   So there is deliberately almost nothing here. This block used to restate all
   of it (background, colours, font-size, list styling) and override the height,
   which was a second copy of the site's footer styling and had already drifted
   into looking shorter and lighter than the home page's. Do not restate them.

   The one genuinely page-local thing: the partial's inline <style> pins it
   position:fixed, which suits the home page's viewport-height fullpage screens
   but would float the bar permanently over a long scrolling support page.
   Undoing that puts it back in flow; margin-top:auto in the flex column above
   then holds it against the bottom of the viewport on short topics. */
.sv2 .footer{
  position:relative !important; bottom:auto !important;
  margin-top:auto;
}

@media (max-width:620px){ .sv2 .sv2-thumbs{ grid-template-columns:1fr } }

/* ==========================================================================
   Two-level navigation: section index -> single topic
   ========================================================================== */

/* Active state on the SHARED black nav, so the page does not repeat its own name */
.sv2 #header-main .navbar-nav > li > a[href$="/support"]{
  color:#39c6ea !important; position:relative;
}
.sv2 #header-main .navbar-nav > li > a[href$="/support"]::after{
  content:""; position:absolute; left:16px; right:16px; bottom:14px;
  height:2px; background:#39c6ea; border-radius:2px;
}

/* ---------- Sidebar tree --------------------------------------------------- */
.sv2 .sv2-subnav{ list-style:none; margin:4px 0 10px; padding:0; display:none }
.sv2 .sv2-nav li.is-open > .sv2-subnav{ display:block }
.sv2 .sv2-subnav li{ list-style:none; margin:0 }

/* a topic link: dot marker, roomy hit area, accent bar when current */
.sv2 .sv2-subnav a{
  display:flex; align-items:center; gap:9px;
  padding:6px 12px 6px 14px; margin:0 0 1px 0; border-radius:5px;
  font-size:13px; font-weight:400; line-height:1.35; color:#5b6f83 !important;
}
.sv2 .sv2-subnav a::before{
  content:""; flex:0 0 5px; width:5px; height:5px; border-radius:50%;
  background:#c8d2da;
}
.sv2 .sv2-subnav a:hover{ background:#eaeff2; color:var(--ink) !important }
.sv2 .sv2-subnav a:hover::before{ background:#93a5b3 }
.sv2 .sv2-subnav a.is-active{
  color:var(--accent-ink) !important; font-weight:700;
  background:#eaf7fc; box-shadow:inset 2px 0 0 var(--accent);
}
.sv2 .sv2-subnav a.is-active::before{ background:var(--accent) }

/* top-level topics that belong to no group sit one step in from the section */
.sv2 .sv2-subnav > li > a{ margin-left:16px }

/* a group: label, then its items behind a shared rule */
.sv2 .sv2-subgroup{ margin:12px 0 8px }
.sv2 .sv2-subgroup:first-child{ margin-top:4px }
.sv2 .sv2-subgroup-label{
  display:block; padding:0 12px 0 16px; margin-bottom:5px;
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#8a97a3; line-height:1.4;
}
.sv2 .sv2-subgroup > ul{
  list-style:none; margin:0 0 0 22px; padding:0 0 0 6px;
  border-left:1px solid var(--line);
}
.sv2 .sv2-subgroup > ul li{ list-style:none }
.sv2 .sv2-subgroup > ul a{ margin-left:0 }

/* ---------- Collapsed device branches (data-subnav="groups") ----------------
   The branch link stands for a whole group; its topics stay folded until the
   branch is open. markSidebar() derives is-open from the current article, so
   there is no separate state to keep in sync. */
.sv2 .sv2-subsub{
  list-style:none; display:none;
  margin:2px 0 6px 22px; padding:0 0 0 6px;
  border-left:1px solid var(--line);
}
.sv2 .sv2-subbranch.is-open > .sv2-subsub{ display:block }
.sv2 .sv2-subsub li{ list-style:none; margin:0 }
.sv2 .sv2-subsub a{ margin-left:0 }
.sv2 .sv2-subbranch > a{ font-weight:600 }
/* the caret replaces the dot marker: this row is a parent, not a topic */
.sv2 .sv2-subbranch > a::before{ display:none }
.sv2 .sv2-subbranch > a::after{
  content:"\f107"; font-family:"Font Awesome 5 Free"; font-weight:900;
  font-size:11px; color:#b9c6d1; margin-left:auto; transition:transform .15s;
}
.sv2 .sv2-subbranch.is-open > a::after{ transform:rotate(180deg) }

/* ---------- Hover flyout preview -------------------------------------------
   Same .sv2-subnav element, presented two ways: inline underneath the section
   you are actually in, and as a floating card when you hover a section you are
   not in yet - so you can see what is inside before committing to a click.

   .is-flyout is applied by JS, deliberately, NOT by :hover/:focus-within in
   CSS. Two reasons, both learned the hard way: :focus-within kept the panel
   open after a click because the header link still held focus, and CSS cannot
   express "only one of these at a time", so a stuck panel and a hovered one
   showed together.

   The panel sits flush at left:100%; a margin there would open a gap the
   pointer has to cross and the hover would drop. It is a DOM child of the nav
   item, so moving into it never fires the item's mouseleave.
   Below 861px the sidebar is a horizontal chip strip, so this is desktop-only. */
@media (min-width:861px){
  .sv2 .sv2-nav > li{ position:relative }
  .sv2 .sv2-nav > li > .sv2-subnav.is-flyout{
    display:block; position:absolute; left:100%; top:0; z-index:40;
    min-width:236px; margin:0; padding:10px 8px;
    background:#fff; border:1px solid var(--line); border-radius:8px;
    box-shadow:0 10px 30px rgba(18,41,63,.14);
  }
  /* Inside a preview a branch cascades its own panel instead of pushing the
     list taller, so level one stays a short, scannable set of headers. */
  .sv2 .sv2-subnav.is-flyout .sv2-subbranch{ position:relative }
  .sv2 .sv2-subnav.is-flyout .sv2-subbranch:hover > .sv2-subsub{
    display:block; position:absolute; left:100%; top:-10px; z-index:41;
    min-width:196px; margin:0; padding:10px 8px;
    background:#fff; border:1px solid var(--line); border-radius:8px;
    box-shadow:0 10px 30px rgba(18,41,63,.14);
  }
  /* caret points right in a preview: this one opens sideways, not downward */
  .sv2 .sv2-subnav.is-flyout .sv2-subbranch > a::after{ transform:rotate(-90deg) }
}



/* ---------- Quick Start video cards ---------------------------------------- */
.sv2 .sv2-videos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0 14px; max-width:1000px }
.sv2 #startup_play .sv2-a{ max-width:none }
.sv2 .sv2-video{
  display:block; border:1px solid var(--line); border-radius:8px; background:#fff;
  overflow:hidden; text-decoration:none; transition:border-color .15s, box-shadow .15s;
}
.sv2 .sv2-video:hover{ border-color:var(--accent); box-shadow:0 4px 14px rgba(18,41,63,.08) }
.sv2 .sv2-video-thumb{ display:block; position:relative; background:#000; line-height:0 }
.sv2 .sv2-video-thumb img{ display:block; width:100%; height:auto; opacity:.92 }
.sv2 .sv2-video:hover .sv2-video-thumb img{ opacity:1 }
.sv2 .sv2-video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:rgba(200,0,0,.92);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;
}
.sv2 .sv2-video:hover .sv2-video-play{ background:#e00 }
.sv2 .sv2-video b{ display:block; padding:12px 14px 0; font-size:13.5px; color:var(--ink); line-height:1.3 }
.sv2 .sv2-video > span:last-child{ display:block; padding:5px 14px 14px; font-size:12px; color:var(--muted); line-height:1.45 }
.sv2 .sv2-videosrc{ font-size:12.5px; color:var(--muted) }

.sv2 .sv2-shot:focus-visible,.sv2 .sv2-video:focus-visible,.sv2 .sv2-thumb:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:8px;
}

@media (max-width:900px){ .sv2 .sv2-videos{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:860px){
  .sv2 .sv2-videos{ grid-template-columns:1fr }
  .sv2 .sv2-subnav{ display:none !important }
}



/* Steps in Getting Started read as steps, not as a dense list */
.sv2 .sv2-startsteps > li{ margin-bottom:16px }
.sv2 .sv2-a #startup_videos h4{ margin-top:34px }

/* Chevron on a section that has a topic list, so it reads as collapsible */
.sv2 .sv2-nav li.has-sub > a::after{
  content:"\f107"; font-family:"Font Awesome 5 Free"; font-weight:900;
  font-size:12px; color:#b9c6d1; margin-left:6px; transition:transform .15s;
}
.sv2 .sv2-nav li.has-sub > a .sv2-nav-count{ margin-left:auto }
.sv2 .sv2-nav li.has-sub.is-open > a::after{ transform:rotate(180deg) }

/* ---------- Sections that lead with a matrix instead of a topic list ------- */
.sv2 .sv2-alsohere{
  margin:0; padding:12px 16px;
  border-left:3px solid var(--line); background:var(--canvas);
  font-size:13.5px; color:var(--body); border-radius:0 4px 4px 0;
}
.sv2 .sv2-matrix-wide{ min-width:780px }
.sv2 .sv2-matrix tbody th{ white-space:normal; min-width:150px }
.sv2 .sv2-matrix tbody th .sv2-badge{ margin-left:6px; vertical-align:middle }
.sv2 .sv2-matrix td a + a{ margin-left:0 }


.sv2 .sv2-section.mode-article .sv2-article{ display:none }
.sv2 .sv2-section.mode-article .sv2-article.is-current{
  display:block; border-bottom:none; padding-bottom:0; margin-bottom:0;
}
.sv2 .sv2-section.mode-article .sv2-group,
.sv2 .sv2-section.mode-article .sv2-matrixwrap,
.sv2 .sv2-section.mode-article .sv2-alsohere{ display:none }

.sv2 .sv2-section.mode-solo .sv2-group,
.sv2 .sv2-section.mode-solo .sv2-bc,
.sv2 .sv2-section.mode-solo .sv2-alsohere,
.sv2 .sv2-section.mode-solo .sv2-q{ display:none }
.sv2 .sv2-section.mode-solo .sv2-article{
  display:block; border-bottom:none; padding-bottom:0; margin-bottom:0;
}



/* ---------- Breadcrumb: section > level 2 > level 3, all options visible --- */
.sv2 .sv2-bc{ margin:0 0 28px; padding:0 0 18px; border-bottom:1px solid var(--line) }
.sv2 .sv2-bc-line{ display:flex; align-items:flex-start; gap:10px; flex-wrap:nowrap }
.sv2 .sv2-bc-line + .sv2-bc-line{ margin-top:4px }
.sv2 .sv2-bc-root{
  flex:0 0 auto; padding:7px 0; font-size:14px; font-weight:700;
  text-decoration:none; color:var(--accent-ink) !important; white-space:nowrap;
}
.sv2 .sv2-bc-root:hover{ color:var(--accent) !important }
.sv2 .sv2-bc-indent{ flex:0 0 auto; width:0 }
.sv2 .sv2-bc-sep{ flex:0 0 auto; margin-top:10px; font-size:11px; color:#9fb0bd }
.sv2 .sv2-bc-opts{ display:flex; flex-wrap:wrap; gap:6px; min-width:0 }
.sv2 .sv2-bc-opt{
  display:inline-block; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; line-height:1.3; color:#41556a !important;
  text-decoration:none; white-space:nowrap;
}
.sv2 .sv2-bc-opt:hover{ border-color:var(--accent); color:var(--accent-ink) !important; background:#f6fcfe }
.sv2 .sv2-bc-opt.is-active{ background:var(--navy); border-color:var(--navy); color:#fff !important }
.sv2 .sv2-bc-line3 .sv2-bc-opt.is-active{ background:var(--accent-ink); border-color:var(--accent-ink) }

@media (max-width:860px){
  .sv2 .sv2-bc-line{ flex-wrap:wrap }
  .sv2 .sv2-bc-indent,.sv2 .sv2-bc-elbow{ display:none }
  .sv2 .sv2-bc-line3{ padding-left:14px; border-left:2px solid var(--accent) }
}


/* ---------- Contact block, bottom of the left pane ------------------------ */
.sv2 .sv2-side-contact{
  margin:22px 8px 0; padding:14px 15px;
  background:var(--navy); border-radius:8px;
}
.sv2 .sv2-side-contact .sv2-side-status{
  display:flex; align-items:center; gap:8px;
  margin:0 0 12px; padding:0 0 11px;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:12.5px; font-weight:700; color:#5fe3a1;
}
.sv2 .sv2-side-contact a{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:9px; font-size:12.5px; line-height:1.4;
  color:#c7d8e6 !important; text-decoration:none; word-break:break-word;
}
.sv2 .sv2-side-contact a:first-of-type{ margin-top:0 }
.sv2 .sv2-side-contact a:hover{ color:#fff !important }
.sv2 .sv2-side-contact i{ flex:0 0 13px; margin-top:2px; font-size:11px; opacity:.75 }
.sv2 .sv2-side-contact .sv2-side-status i{ margin-top:0; opacity:1; font-size:12px }

@media (max-width:860px){
  .sv2 .sv2-side-contact{
    margin:12px 16px 4px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  }
  .sv2 .sv2-side-contact .sv2-side-status{
    margin:0; padding:0; border-bottom:none;
  }
  .sv2 .sv2-side-contact a{ margin-top:0 }
}


/* the level-3 row hangs off the level-2 button it belongs to */
.sv2 .sv2-bc-elbow{
  flex:0 0 15px; width:15px; height:16px; margin:-2px 8px 0 0;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  border-bottom-left-radius:8px;
}
.sv2 .sv2-bc-line3 .sv2-bc-opt{ border-color:#cfe3ec }
.sv2 .sv2-bc-line3 .sv2-bc-opt:hover{ border-color:var(--accent) }

/* ==========================================================================
   VIEW MODES - the single source of truth for what a section shows.
     mode-index    a matrix-led section: its table, plus any data-landing topic
     mode-article  one topic of a multi-topic section, breadcrumb above it
     mode-solo     the only topic in its section, titled by the section heading
   KEEP THIS BLOCK TOGETHER AND LAST. It has twice been deleted by a broad
   regex edit aimed at a neighbouring block, and when it goes every topic in a
   section renders at once while the navigation appears to do nothing.
   support/_v2_test.js asserts these via computed styles - run it after editing.
   ========================================================================== */
.sv2 .sv2-section.mode-index .sv2-article{ display:none }
.sv2 .sv2-section.mode-index .sv2-article[data-landing]{
  display:block; border-bottom:none; padding-bottom:0; margin-bottom:0;
}
.sv2 .sv2-section.mode-index .sv2-article[data-landing] .sv2-q{ font-size:17px }
.sv2 .sv2-section.mode-index .sv2-group,
.sv2 .sv2-section.mode-index .sv2-bc{ display:none }

.sv2 .sv2-section.mode-article .sv2-article{ display:none }
.sv2 .sv2-section.mode-article .sv2-article.is-current{
  display:block; border-bottom:none; padding-bottom:0; margin-bottom:0;
}
.sv2 .sv2-section.mode-article .sv2-group,
.sv2 .sv2-section.mode-article .sv2-matrixwrap,
.sv2 .sv2-section.mode-article .sv2-alsohere{ display:none }
/* the breadcrumb already names the section, so the heading would only repeat it */
.sv2 .sv2-section.mode-article .sv2-sechead{ display:none }

.sv2 .sv2-section.mode-solo .sv2-group,
.sv2 .sv2-section.mode-solo .sv2-bc,
.sv2 .sv2-section.mode-solo .sv2-alsohere,
.sv2 .sv2-section.mode-solo .sv2-q{ display:none }
.sv2 .sv2-section.mode-solo .sv2-article{
  display:block; border-bottom:none; padding-bottom:0; margin-bottom:0;
}