` is an
independent grid item with its own internal block flow, so a taller dt
in one column pushes that column's dd down with no shared row track to
align it against its row-mates. `dl.vidg-spec` has exactly two real
instances (this refund strip, /for-teams/'s Fees/Law degree/Faculty
row), neither of which uses `.vidg-spec-wide` (dead CSS -- no PHP call
site emits it), so a subgrid applied to every `.vidg-spec > div` is safe
for both. grid-template-rows:auto auto gives the parent exactly the two
row tracks a dt/dd pair needs; each child then opts into THOSE tracks
(rather than making its own) via subgrid, so the tallest dt in the row
sets row 1's height for every column and every dd lines up in row 2. */
@media (min-width: 640px) {
.vidg-spec { grid-template-rows: auto auto; }
.vidg-spec > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}
.vidg-spec div { min-width: 0; }
.vidg-spec dt {
font-size: var(--vidg-t-tiny); font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.vidg-spec dd { margin: 0; font-size: var(--vidg-t-base); font-weight: 600; }
.vidg-spec dd small { display: block; font-weight: 400; font-size: var(--vidg-t-small); color: var(--muted); }
/* The prerequisite is a sentence, not a value: it spans the grid and drops
to body weight so it does not shout alongside "36 hours". */
.vidg-spec .vidg-spec-wide { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: var(--vidg-s2); }
.vidg-spec .vidg-spec-wide dd { font-weight: 400; font-size: var(--vidg-t-small); max-width: var(--vidg-measure); }
/* Review N8: dl.vidg-spec is the site's three-item FACT STRIP (the refund
page's rule summary; /for-teams/'s Fees/Law degree/Faculty row) -- the
base rule above computes two ~126.5px columns for exactly three items at
this width, so the third item's row has an empty, ragged second column
and the refund page's longest label ("From class 2 -- No change-of-mind
refund...") wraps to five lines alone. A single column with a rule
between rows reads as a short list, not a broken table, at the width
this component actually needs to work at. */
@media (max-width: 599px) {
dl.vidg-spec { grid-template-columns: 1fr; gap: 0; }
dl.vidg-spec > div { padding-block: var(--vidg-s2); border-top: 1px solid var(--rule); }
dl.vidg-spec > div:first-child { border-top: 0; padding-top: 0; }
dl.vidg-spec > div:last-child { padding-bottom: 0; }
}
/* --------------------------------------------------------- COURSE FOLD */
/* Chunk C (brief step 1): the course page's own split fold, reusing
.vidg-hero-grid (the homepage hero's two-column/900px rule) rather than
declaring a second, near-identical grid. Left column carries, in DOM
order (so it is also the mobile order): task-phrase H1, official title,
hours, the first "What you leave with" item, the notify form. */
.vidg-course-official-title { font-family: var(--sans); color: var(--muted); font-size: var(--vidg-t-lead); margin: 0 0 var(--vidg-s2); }
/* Review N4 (chunk U3c): this row used to also carry .vidg-num, which
opted the WHOLE row into Anek Devanagari 600 tabular figures -- measured
at 3 lines at 1440 and 5 (136px) at 375, the heaviest text in the first
screen after the H1. It is now set in Plex Sans itself; .vidg-num is
scoped to the two literal figures only (48, 15), via that class's own
existing font-family/tabular-nums rule (near the top of this file, "spec
§3.2... where they stand alone"). */
.vidg-course-hours { font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.5; margin: 0 0 var(--vidg-s3); }
/* The separator itself, never a bare glyph glued between two implode()'d
strings (measured at 0px advance in the served Anek stack, review N4) --
real margin either side, in Plex, aria-hidden (decorative only; the
items themselves are the content a screen reader needs). */
.vidg-course-hours .vidg-sep { font-family: var(--sans); font-weight: 400; margin-inline: 0.35em; color: var(--muted); }
.vidg-course-first-outcome {
display: flex; align-items: flex-start; gap: var(--vidg-s1);
margin: 0 0 var(--vidg-s4); max-width: var(--vidg-measure-aside);
}
.vidg-course-first-outcome .vidg-doc-glyph { flex: none; margin-top: 3px; }
/* The fold's right-column preview (arbitration: the specimen, reused
as-is; every other course: a document-checklist preview). */
.vidg-fold-checklist {
border: 1px solid var(--rule); border-radius: var(--vidg-radius);
background: var(--page); padding: var(--vidg-s3); min-width: 0; box-shadow: none;
}
@media (min-width: 782px) { .vidg-fold-checklist { padding: var(--vidg-s4); } }
/* ----------------------------------------------------- DOCUMENT CHECKLIST */
/* "What you leave with", rendered as a document glyph + text per item
(brief step 2), used both in full (the body section) and as a preview
(the fold's right column). */
.vidg-doc-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vidg-s2); max-width: var(--vidg-measure); }
.vidg-doc-checklist li { display: flex; align-items: flex-start; gap: var(--vidg-s2); }
.vidg-doc-glyph { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.vidg-doc-glyph path { stroke: var(--green); }
/* ------------------------------------------------------- FACULTY CARD */
/* Brief step 2 / brand spec s.9.1: "Lead faculty -- named before enrolment
opens", with the course's discipline. No name, no photo, no shadow. */
.vidg-faculty-card {
border: 1px solid var(--rule); border-radius: var(--vidg-radius);
background: var(--page); padding: var(--vidg-s3); box-shadow: none; max-width: var(--vidg-measure-aside);
}
@media (min-width: 782px) { .vidg-faculty-card { padding: var(--vidg-s4); } }
/* Review m3 (chunk U3b): a two-column grid -- a left column reserved for a
photo and a name (vidg_course_faculty(), templates/catalogue.php),
everything else in a right column -- so that supplying real faculty
later changes this card's CONTENT, not its layout. Single column on
mobile (the photo/name block stacks above the body), matching
.vidg-two-col's own 782px breakpoint elsewhere on this page. */
.vidg-faculty-grid { display: grid; gap: var(--vidg-s3); }
@media (min-width: 782px) { .vidg-faculty-grid { grid-template-columns: 88px 1fr; align-items: start; } }
.vidg-faculty-photo-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Empty chrome, not a placeholder image -- this brand's catalogue already
carries a hard "no icon set, no illustration" rule (templates/
catalogue.php's own header comment); a generic silhouette here would be
exactly that. A bordered slot says "a photo goes here" without drawing
one. */
/* Review m2 (chunk U3c): a bordered dashed box read as a broken image or a
CMS drop zone -- filled with the brand's own वि monogram instead
(--green on --tint), no dashed border, same 88x88 footprint so a real
photo (vidg_course_faculty()) replaces this element's content only,
never its layout. */
.vidg-faculty-photo-slot {
width: 88px; height: 88px; border-radius: var(--vidg-radius); background: var(--tint);
display: flex; align-items: center; justify-content: center;
}
.vidg-faculty-photo-mono { font-family: var(--display); font-size: 32px; font-weight: 700; color: var(--green); line-height: 1; }
.vidg-faculty-photo { width: 88px; height: 88px; object-fit: cover; border-radius: var(--vidg-radius); display: block; }
.vidg-faculty-name { margin: 0; font-weight: 600; color: var(--ink); font-size: 15px; }
.vidg-faculty-body { min-width: 0; }
.vidg-faculty-line { margin: 0; font-weight: 600; }
.vidg-faculty-credentials { list-style: none; margin: var(--vidg-s2) 0 0; padding: 0; display: grid; gap: 4px; color: var(--ink); font-size: 15px; }
/* Review m3: "Teaches and reviews" was a single muted 14px run-on line;
it is now a labelled
of module titles WITH their hours, in --ink
at 15px (the review's own acceptance wording) -- only the hours stay
--muted, still at 15px so no muted text in the card falls under 15px. */
.vidg-faculty-modules-label { margin: var(--vidg-s2) 0 6px; font-weight: 600; color: var(--ink); font-size: 15px; }
.vidg-faculty-modules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vidg-faculty-modules li { display: flex; justify-content: space-between; gap: var(--vidg-s2); color: var(--ink); font-size: 15px; }
.vidg-faculty-modules .vidg-num { color: var(--muted); font-size: 15px; white-space: nowrap; }
/* Benchmark H3 (chunk U1): the closing "before you can pay" line.
Review m3: bumped from the site's 14px --vidg-t-small to 15px -- the
review's own acceptance test is "no muted text below 15px in the card". */
.vidg-faculty-note { margin: var(--vidg-s2) 0 0; font-weight: 400; color: var(--muted); font-size: 15px; }
/* ------------------------------------------------------ FOR / NOT FOR */
.vidg-two-col { display: grid; gap: var(--vidg-s3); }
@media (min-width: 782px) { .vidg-two-col { grid-template-columns: 1fr 1fr; gap: var(--vidg-s4); } }
.vidg-two-col > div {
border: 1px solid var(--rule); border-radius: var(--vidg-radius); padding: var(--vidg-s3);
}
.vidg-two-col h3 { font-size: var(--vidg-t-lead); }
.vidg-two-col ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--vidg-s1); }
/* ------------------------------------------------------------- SYLLABUS */
.vidg-syllabus { display: grid; gap: var(--vidg-s1); }
.vidg-syllabus details {
border: 1px solid var(--rule); border-radius: var(--vidg-radius); background: var(--paper);
}
.vidg-syllabus summary {
cursor: pointer; padding: var(--vidg-s2) var(--vidg-s3); font-weight: 600;
display: grid; grid-template-columns: 1fr auto auto; gap: var(--vidg-s2) var(--vidg-s3);
align-items: baseline; list-style: none;
}
/* A flex/grid loses its native disclosure triangle in every
browser, which leaves six identical boxes that give a reader no reason to
think they open. The +/- is that affordance, put back by hand. */
.vidg-syllabus summary::-webkit-details-marker { display: none; }
.vidg-syllabus summary::after {
content: "+"; color: var(--green); font-weight: 700; font-size: var(--vidg-t-lead);
line-height: 1; justify-self: end;
}
.vidg-syllabus details[open] > summary::after { content: "\2013"; }
.vidg-syllabus summary .vidg-num { font-weight: 400; color: var(--muted); font-size: var(--vidg-t-small); white-space: nowrap; }
.vidg-syllabus .vidg-syllabus-body { padding: 0 var(--vidg-s3) var(--vidg-s3); max-width: var(--vidg-measure); }
.vidg-syllabus ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
/* --------------------------------------------------------- COMMITMENTS */
/* Full-bleed on green-deep with paper text (spec s.3.4 item 5). */
.vidg-commitments { background: var(--green-deep); color: var(--on-deep); }
/* Review R3 m7 residual: measured margin-top:24px on this element with no
rule of this theme's own setting it -- has
layout:{"type":"default"} (theme/templates/*.html), and core's global
styles give every `.is-layout-flow` container's block-gap as
`:where(.is-layout-flow) > * + *` between its top-level children.
`:where()` always carries zero specificity, so a plain class selector
like this one -- (0,1,0) -- beats it outright regardless of source
order; no !important needed. This pushed the space above the band to
120/88 instead of the accepted 96/64 rhythm (N1, above). */
.vidg-commitments { margin-block-start: 0; }
.vidg-commitments .vidg-section-title, .vidg-commitments h2 { color: var(--on-deep); }
.vidg-commitments a { color: var(--on-deep); }
/* Review N1 (Critical, regression from R1a's I10 fix): the markup is
-- the inner .vidg-section's OWN padding-top:0/padding-bottom:96/64 (the
general section rhythm rule above) already gives the band's BOTTOM its
96/64 of green padding before the colour changes back, and gives the
band's TOP nothing at all, because "first child of main" is the only
exception that rule carves out. The band is never that: it always has a
section before it. The fix is two more rules, not a change to the
general one (which every other section on the site still needs
untouched): the child .vidg-section gets its OWN top padding (green,
inside the band, above the H2), and the NEXT section -- the sibling
AFTER .vidg-commitments closes, back on --paper -- gets top padding of
its own, because a section immediately following a full-bleed colour
change cannot borrow the previous section's bottom padding the way two
consecutive --paper sections do (that padding is on the wrong side of
the colour edge to read as space at all).
Acceptance: band top -> H2 = 96/64, band bottom -> next H2 = 96/64, on
all four templates ("/"' , "/courses/", both course-page shapes), both
themes. */
.vidg-commitments > .vidg-section { padding-top: var(--vidg-s5); }
.vidg-commitments + .vidg-section { padding-top: var(--vidg-s5); }
@media (min-width: 782px) {
.vidg-commitments > .vidg-section { padding-top: var(--vidg-s6); }
.vidg-commitments + .vidg-section { padding-top: var(--vidg-s6); }
}
/* Review Minor 10: in dark mode --green-deep (#0A2C22) separates only
weakly from the #0E1512 ground. Light mode is unaffected -- there the
same band sits against --paper (#F4F7F5), which the review never
flagged. */
@media (prefers-color-scheme: dark) {
.vidg-commitments { border-block: 1px solid var(--rule); }
}
.vidg-commitment-grid { display: grid; gap: var(--vidg-s4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .vidg-commitment-grid { grid-template-columns: repeat(3, 1fr); } }
.vidg-commitment-grid h3 { color: var(--on-deep); font-size: var(--vidg-t-lead); }
.vidg-commitment-grid p { max-width: var(--vidg-measure-aside); }
.vidg-band-sand { background: var(--tint); }
/* --------------------------------------------------------- NOTIFY FORM */
.vidg-notify {
border: 1px solid var(--rule); border-radius: var(--vidg-radius); padding: var(--vidg-s3);
max-width: var(--vidg-measure); background: var(--paper);
}
.vidg-notify.vidg-notify-onink { background: transparent; border-color: var(--on-deep); }
.vidg-notify label { display: block; font-weight: 600; font-size: var(--vidg-t-small); margin-bottom: var(--vidg-s1); }
.vidg-notify input[type="email"] {
width: 100%; box-sizing: border-box; padding: var(--vidg-s2);
border: 1px solid var(--control-border); border-radius: var(--vidg-radius); font: inherit;
font-size: var(--vidg-t-base); background: var(--page); color: var(--ink);
}
.vidg-notify input[type="email"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Review I3: `.vidg-notify label { display:block; font-weight:600; ... }`
above has the SAME specificity as a bare `.vidg-consent` rule (both
class+type = (0,1,1)) and used to win the tie by source order, which is
why this label ran 3-5 lines at weight 600 with the text wrapping under
the checkbox instead of beside it. `label.vidg-consent` matches that
specificity exactly and, declared after, wins deterministically in both
the notify form and the For Teams form. */
label.vidg-consent {
display: grid; grid-template-columns: 24px 1fr; gap: var(--vidg-s1);
align-items: start; font-weight: 400; font-size: 15px; margin-top: var(--vidg-s2);
}
label.vidg-consent span { max-width: var(--vidg-measure-aside); }
/* ---------------------------------------------------- CUSTOM CHECKBOXES/RADIOS */
/* Review m5: `accent-color` only paints a native control's CHECKED state --
the UNCHECKED box stayed the browser/OS's own default fill, which in dark
mode is a plain grey square that ignores accent-color entirely (measured
live on the consent checkbox and, per the same finding, the For Teams
form's team-size radios and courses-of-interest checkboxes).
appearance:none removes the native control altogether, so every state --
unchecked, checked, and focus (the existing global :focus-visible rule
still applies, unchanged) -- is drawn from the theme's own tokens. */
input[type="checkbox"], input[type="radio"] {
appearance: none; -webkit-appearance: none; margin: 0;
width: 20px; height: 20px; flex: none; box-sizing: border-box;
border: 1px solid var(--control-border); border-radius: var(--vidg-radius);
background: var(--paper);
display: inline-grid; place-content: center;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
background: var(--green); border-color: var(--green);
}
/* A paper-coloured tick, drawn from a rotated two-sided border rather than
an image asset -- crisp at any zoom, no extra request, themes with the
token like every other mark on the site. */
input[type="checkbox"]:checked::before {
content: ""; width: 10px; height: 6px;
border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper);
transform: rotate(-45deg) translateY(-1px);
}
input[type="radio"]:checked::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--paper);
}
.vidg-notify .vidg-btn { margin-top: var(--vidg-s2); }
.vidg-notify-small { font-size: var(--vidg-t-small); color: var(--muted); margin: var(--vidg-s2) 0 0; }
.vidg-notify-onink .vidg-notify-small { color: var(--on-deep); }
/* Semantic colour is used for form validation and for nothing else. */
.vidg-form-error { color: var(--error); font-size: var(--vidg-t-small); margin: var(--vidg-s2) 0 0; font-weight: 600; }
.vidg-form-ok { color: var(--green); font-size: var(--vidg-t-small); margin: var(--vidg-s2) 0 0; font-weight: 600; }
.vidg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ------------------------------------------------------- STICKY MOBILE BAR */
/* Review m3: measured 91px tall (16px block padding + a 58px .vidg-btn),
about 11% of a 812px viewport -- on first load it cut the fold's own
first-outcome line in half. 10px block padding + a 44px button (the
site's own comfortable tap-target floor, matching .vidg-nav a and the
header button elsewhere) gives a 64px bar instead. */
.vidg-sticky {
position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
background: var(--paper); color: var(--ink); border-top: 1px solid var(--control-border);
display: flex; align-items: center; justify-content: space-between;
gap: var(--vidg-s2); padding: 10px var(--vidg-s3);
font-size: var(--vidg-t-small);
}
.vidg-sticky a {
color: var(--on-green); background: var(--green); border-color: var(--green);
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding-block: 0;
/* Benchmark H4 (chunk U1) fix-up: `.vidg-num` below is flex:1 1 auto, so
once the bar's own two flex children stop fitting the fixed 375px
bar (measured live: they do, once the text carries both the hours and
the cohort status), the default flex-shrink:1 this button inherited
let IT shrink too -- squeezing "Notify me" narrower than its own
single-line width and wrapping it to two lines, which grew the bar to
~70px, past R3's fixed 64px. flex-shrink:0 + white-space:nowrap keep
this button at its natural single-line size always; `.vidg-num`'s own
overflow:hidden/ellipsis (below) is the ONLY thing that gives. */
flex-shrink: 0; white-space: nowrap;
}
.vidg-sticky a:hover, .vidg-sticky a:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* The bar's text is a sentence ("40 teaching hours"), not a figure standing
alone: it stays in Plex. In Anek the middle dot sits tight against the
next word and the space reads as missing. */
/* Benchmark H4 (chunk U1): the bar's text now carries the hours AND the
cohort status ("40 hours -- Not yet scheduled") -- longer than the hours
figure alone R3's 64px bar height was measured against. Rather than
letting a long combination wrap to a second line (which would grow the
bar past the fixed 64px R3's scroll-padding-bottom/body padding-bottom
are set to -- see the WCAG 2.4.11 comment below), the text clips with an
ellipsis and stays single-line at every width: the bar's own height, and
every protection keyed to it, is unchanged by this copy change. */
.vidg-sticky .vidg-num {
font-family: var(--sans); font-weight: 600;
flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Review I6 (chunk U3a): at the primary width (measured on a 375 iPhone
viewport, the site's own no-scroll floor is 320) the combined text
("48 hours -- Not yet scheduled") clipped to an ellipsis mid-word --
the one word the bar exists to state. Below 400px the hours prefix
(course-detail.php's own `.vidg-sticky-hours` span) is dropped
entirely, leaving the status alone; it has room to sit on one line
without an ellipsis at 320-399px. From 400px up both parts show,
exactly as before this fix -- the bar's own height (below) is
untouched either way. */
@media (max-width: 399px) { .vidg-sticky-hours { display: none; } }
@media (min-width: 782px) { .vidg-sticky { display: none; } }
/* Review Minor 3: hidden (JS, vidg-sticky.js) while any notify form is on
screen, so it never sits over the hero e-mail field on first load. */
.vidg-sticky[hidden] { display: none; }
body.vidg-has-sticky { padding-bottom: 64px; } /* review m3: the bar is now 64px, not 91px */
@media (min-width: 782px) { body.vidg-has-sticky { padding-bottom: 0; } }
/* Review R3 I1 (WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum), Level AA):
with `scroll-padding-bottom` left at its default (auto), the browser
scrolls a newly-focused element flush to the viewport's own bottom
edge -- directly under this fixed bar, which sat over 8 of 59 Tab stops
per course page (3 of them entirely hidden). `vidg-has-sticky` is the
SAME body class is_singular('vidg_course') already emits
(vidg-blocks.php's body_class filter) for the bar's own padding-bottom
above, so nothing new needs detecting.
scroll-padding only takes effect on the element that is actually the
document's scrolling box -- in standards mode (every page on this site)
that is the root element, not , so the selector below
reads the class off body via :has() rather than declaring the property
on body directly, where it would silently do nothing. This is a
plain :has()-based selector for the SCROLL-PADDING TARGET only; it is
not the ":has() to detect whether the bar exists" pattern the body-class
emission above was deliberately written to avoid. 84px = the bar's own
67px plus 17px of breathing room, matching the review's own figure. */
@media (max-width: 899px) {
:root:has(body.vidg-has-sticky) { scroll-padding-bottom: 84px; }
}
/* --------------------------------------------------------- UNSETTLED BOX */
.vidg-unsettled {
/* Review I13: was the only dark-ink-bordered container on the site;
--rule is the system's own decorative-divider colour. */
border: 1px solid var(--rule); border-radius: var(--vidg-radius); padding: var(--vidg-s3);
max-width: var(--vidg-measure); background: var(--paper);
}
.vidg-unsettled h2, .vidg-unsettled h3 { font-size: var(--vidg-t-lead); margin-bottom: var(--vidg-s2); }
.vidg-unsettled ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--vidg-s2); }
/* A fact the operator has not supplied. It is rendered as an honest policy
sentence in ordinary prose -- never a bracketed build token -- and carries a
data attribute + HTML comment so the outstanding list stays greppable.
Styled quietly on purpose: it is a commitment, not a warning. */
.vidg-fact-note { font-style: normal; color: var(--ink); }
/* ------------------------------------------------------------------ FAQ */
.vidg-faq { display: grid; gap: var(--vidg-s1); max-width: var(--vidg-measure); }
.vidg-faq details { border: 1px solid var(--rule); border-radius: var(--vidg-radius); }
.vidg-faq summary { cursor: pointer; padding: var(--vidg-s2) var(--vidg-s3); font-weight: 600; }
.vidg-faq .vidg-faq-body { padding: 0 var(--vidg-s3) var(--vidg-s3); }
/* ------------------------------------------------------- LEGAL / PROSE */
/* Review round-1's unruled Gemini-derived minor, ruled ACCEPT this round:
the compliance-page column measured 720px / ~81 characters a line
(type.txt) against the 68ch spec. `.vidg-legal` is always the SAME
element as `.vidg-prose` (vidg_block_legal_page(): one div, class=
"vidg-prose vidg-legal"), which already carries max-width:var(--vidg-
measure) -- so this second, explicit rule on `.vidg-legal` alone is
belt-and-braces against the exact width ever depending on which of the
two classes' rule happens to be declared later, rather than leaving it
to a cascade tie a future edit could quietly flip. */
.vidg-legal { max-width: var(--vidg-measure); }
.vidg-legal h2 { font-size: var(--vidg-t-3); margin-top: var(--vidg-s5); }
.vidg-legal h3 { font-size: var(--vidg-t-lead); margin-top: var(--vidg-s4); }
.vidg-legal ul, .vidg-legal ol { max-width: var(--vidg-measure); padding-left: 1.2em; }
.vidg-legal li { margin-bottom: var(--vidg-s1); }
.vidg-legal dt { font-weight: 600; margin-top: var(--vidg-s2); }
.vidg-legal dd { margin: 0; }
/* Review R3 n3: at >=900px "Who we are" (vidg_section_who_we_are(),
vidg-sections.php) becomes a two-column layout -- prose on the left,
the seller and Grievance Officer `dl`s together on their own sheet to
the right, on --page with a 1px --rule, no shadow, radius no greater
than the site's own `--vidg-radius` floor (spec s.3's "no shadow,
radius<=2" rule for every other sheet on the site -- the specimen's
own .vidg-specimen-sheet uses the identical --page/--rule/no-shadow
treatment). Below 900px `.vidg-who-grid` sets nothing (no `display`
override), so the two `.vidg-prose` children stay in normal block flow
and simply stack -- the single-column mobile rendering this section
always had. */
/* Review m3 (chunk U3b review round-5): below 900px the two .vidg-prose
blocks simply stacked in source order with no visible seam between
them -- the seller/Grievance-Officer sheet read as a straight
continuation of the first paragraph's prose, not its own card. The
sheet's own border/padding/background are now unconditional (moved out
of the >=900px query below), with a --vidg-s3 gap above it at every
width; the query now only turns the SECTION into a two-column grid,
where the gap comes from the grid's own `gap` instead. */
.vidg-who-sheet {
background: var(--page); border: 1px solid var(--rule);
border-radius: var(--vidg-radius); padding: var(--vidg-s3); margin-top: var(--vidg-s3);
}
@media (min-width: 900px) {
.vidg-who-grid {
display: grid; grid-template-columns: minmax(0, 564px) minmax(0, 1fr);
align-items: start; gap: var(--vidg-s6);
}
.vidg-who-sheet { margin-top: 0; }
}
.vidg-policy-date, .vidg-counsel-review { color: var(--muted); font-size: var(--vidg-t-small); }
.vidg-counsel-review { margin-top: var(--vidg-s4); padding-top: var(--vidg-s2); border-top: 1px solid var(--rule); max-width: var(--vidg-measure); }
.vidg-not-open {
border: 1px solid var(--ink); border-left: 4px solid var(--green);
border-radius: var(--vidg-radius); padding: var(--vidg-s3); margin: var(--vidg-s3) 0 var(--vidg-s4);
max-width: var(--vidg-measure); background: var(--page);
}
.vidg-not-open p { margin: 0 0 var(--vidg-s2); }
.vidg-not-open p:last-child { margin-bottom: 0; }
.vidg-not-open strong { font-weight: 700; }
/* Focus ring on every control: 2px, offset 2px, ink (which is the light
ink in the dark theme). Spec s.1 accessibility floor. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--ink); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Nothing in this theme casts a shadow. Belt and braces against a parent
or core default reintroducing the template tell. */
.vidg-spec, .vidg-notify, .vidg-unsettled, .vidg-two-col > div,
.vidg-syllabus details, .vidg-faq details, .vidg-specimen-sheet { box-shadow: none; }
/* ------------------------------------------------------------------
COMPLIANCE-PAGE COMPONENTS. These classes used to be styled by an
inline