/*!Author information for CSS code
=====================================================================
   Version 2.05 | Wednesday, April 29, 2026
   Style sheet © 2024-2026, Keith W Bell
   www.december14.biz
   ------------------------------------------------------------------
   No longer supports Internet Explorer. 🙂
   ------------------------------------------------------------------
   This style sheet, associated graphics and web page design are
   copyrighted materials and may not be copied or reproduced by any
   party for any reason whatsoever.
===================================================================== */


/* Design notes
=====================================================================
   A simple, tasteful, typographically rigorous presentation of Lands
   Tribunal decisions on screen, with optimisations for printing.
   At the express wish of the client, however, body text and all
   headings, regardless of level in the document hierarchy, are
   rendered at the same font size. Similarly the heading styles,
   including those H6 underlines, are per the client’s style guide.
   ------------------------------------------------------------------
   CSS architecture in line with ‘ITCSS’, i.e. rules broadly in order
   of increasing specificity (‘specificity graph’ trending upwards).
   BUT the approach eschews ‘a class for everything’ and embraces
   combinators and complex selectors because:
   - it enables a DRY, efficient way to style web documents;
   - it allows the HTML to remain clean, simple and semantic; and
   - the cascade, inheritance and specificity are features, not bugs.
   ------------------------------------------------------------------
   Documents are so structured that even in the total absence of CSS
   support, or if the style sheet fails to load, users are still
   presented with a well-formed, readable and accessible web page.
   ------------------------------------------------------------------
   C O N T E N T S                                               Flag
   ------------------------------------------------------------------
   Layer 1 - Generic                                               =1
   Layer 2 - Base                                                  =2
   Layer 3 - Components                                            =3
   Adjustments for printing                                        =4
   ------------------------------------------------------------------
   C O L O U R   M E M O                                         Code
   ------------------------------------------------------------------
   Body text ................................................ #555555
   Body background .......................................... #FFFFFF
   Blockquote background .................................... #F8F8F8
   Table borders ............................................ #A8A8A8
   Dotted underlines (TITLE attributes) ..................... #666666
   Solid underlines base/fallback ........................... #666666
   Link text: visited and unvisited ......................... #105CB6
   Link text: focus and hover ............................... #000033
   Selected text ............................................ #333333
   Selected text background ................................. #FFFFAA
   Alternative background: pale green ....................... #DFFFDF
   Alternative background: cream ............................ #FFFFCF
   Horizontal rule .......................................... #555555
   The following only if JS is supported:
   Accent & progress bars, and ‘print’ button ............... #EB3425
   Accent bar ‘active’ ...................................... #DDBBBB
===================================================================== */


@supports not (-ms-high-contrast: none) { /* Hide everything from any lingering instances of IE! */


/* Layer 1 - Generic                                               =1
=====================================================================
 * Basic reset.
 * Selected text highlighting.
===================================================================== */

* {
	margin:     0;
	padding:    0;
	box-sizing: border-box;
	}

::selection {
	color:            #333333;
	background-color: #FFFFAA;
	}


/* Layer 2 - Base                                                  =2
=====================================================================
 * Simple selectors: no ID or CLASS attributes and no combinators.
   ------------------------------------------------------------------
 * Scroll behaviour is set on the HTML element in order to apply to
   the viewport. It will not propagate to the viewport if set on BODY.
 * CSS variables are set on the HTML element as it is the document
   root and less specific than :root.
   ------------------------------------------------------------------
 * Font stack: For reasons of speed, simplicity and familiarity, this
   style sheet uses only system fonts. ‘Georgia’ by Matthew Carter
   was inspired by the early 19th century ‘Scotch Roman’ typefaces of
   the Edinburgh type foundry Miller & Richard. Scotch Romans are
   highly legible designs, and Georgia is an elegant example that
   works well on screen and in print, and is supported on both Apple
   and Windows platforms. Devices that do not have Georgia available
   will fall back to their default serif face.
 * Calibri provides an ideal, compact, clear sans-serif for tables on
   Windows platforms. Carlito has the same metrics, and *might* be
   available on certain Chrome OS, Linux, MacOS and iOS platforms.
   system-ui should render the text in the default system font for
   the user’s platform: normally a sans-serif, and currently aliases
   to San Francisco on MacOS/iOS. SF has larger metrics than Calibri,
   unfortunately. But at least it gives Apple users a familiar
   sans-serif, though its bold face is almost as ugly as Arial.
   Failing all of that, the font will fall back to the stack defined
   for BODY.
===================================================================== */

html {
	scroll-behavior:   smooth;
	font-size:         100%;
	--font-body:       Georgia, serif;
	--font-sans:       Calibri, carlito, system-ui;
	--lead-body:       1.5;
	--lead-sans:       1.25;
	--factor-01:       0.8;
	--factor-02:       0.875;
	--factor-03:       0.95;
	--factor-04:       1.1;
	--colour-lite:     #F8F8F8;
	--colour-norm:     #555555;
	--colour-emph:     #444444;
	--colour-dark:     #000000;
	--progressPercent: 0;
	}

html {
/*	Prevent font size inflation. */
	-moz-text-size-adjust:    none;
	-webkit-text-size-adjust: none;
	text-size-adjust:         none;
	}

body {
	margin:      0 auto;
	padding:     5%;
	max-width:   45em;
	font-family: var(--font-body);
	font-size:   clamp(100%, 90% + 0.5vw, 125%);
	line-height: var(--lead-body);
/*	Take the edge off the black-on-white contrast, but maintain
	better than WCAG 2.2 Level AA compliance. */
	color:       var(--colour-norm);
	background:  #FFFFFF;
/*	Apple disabled subpixel antialiasing on MacOS in 2018, but Chrome
	and Safari on MacOS still use subpixel antialiasing by default.
	It needs to be explicitly turned off, because it makes text a bit
	too heavy. */
	-webkit-font-smoothing: antialiased;
	}


/* Sectioning content.
---------------------------------------------------------------------
 * Tidy up the number styles for citations and case references.
   ------------------------------------------------------------------
 * Add some top margin to the FOOTER to provide a bit of separation
   from body text. (FOOTER is rarely used now; ASIDE provides for
   numbered footnotes.)
--------------------------------------------------------------------- */

header {
	font-variant-numeric: lining-nums;
	text-align:           center;
	}

footer {
	margin-top:  3em;
	}


/* Headings.
---------------------------------------------------------------------
 * Set top margin to ensure vertical spacing will never be less than
   the basic bottom margin for body text elements.
 * To ensure separation *between* sections, but proximity of the
   heading to the related section following it, set a smaller bottom
   margin than for other body text elements.
 * Differentiate the heading levels according to the SCTS style guide;
   all the same font size as body text.
 * Headings need tighter leading than body text. 
 * A little reduction in tracking makes headings more optically
   balanced, readable, and pleasant to view. 
--------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin-top:      1.5em;
	margin-bottom:   0.75em;
	font-size:       1em;
	font-weight:     normal;
	line-height:     calc(var(--lead-body) * var(--factor-02));
	letter-spacing: -0.01em;
	}

h1 {
/*	Give the title heading some breathing room. */
	letter-spacing: 0.05em;
	}

h3 {
/*	Introduces new sections in body text, so give a bigger top margin. */
	margin-top:  2.25em;
	font-weight: bold;
	}

h4, h5 {
/*	Optical adjustment to make italic text appear the same size as roman.
	See note on I and EM styles later. */
	font-size:   calc(1em * var(--factor-03));
	font-style:  italic;
	}

h4 {
/*	Set a bigger top margin than for H5/H6, but less than for H3. */
	margin-top:  1.75em;
	font-weight: bold;
	}

h5 {
	color: var(--colour-emph);
	}

h6 {
	font-size:             1em;
	text-decoration:       underline 1px solid #666666;
/*	Give a more generous offset to the underline, and lower its visual
	impact by making it translucent. */
	text-underline-offset: 0.3em;
	text-decoration-color: oklch(from currentColor l c h / 50%);
	}


/* Body text.
--------------------------------------------------------------------- */

p, ul, ol, dl, table,
blockquote, hr,
figcaption, img {
/*	Basic block spacing for body text elements; based on the leading
	set on BODY. */
	margin-bottom: 1.5em;
	}

blockquote {
/*	Apply padding to indent the text and adjust vertical spacing.
	Set the element off with a pale grey background. */
	padding:          1em 1.5em;
	background-color: var(--colour-lite);
	}

ul, ol {
/*	Pull up the top margin to associate the list more closely with
	the preceding paragraph. Indent the list from the left margin:
	- sufficiently to accommodate OL numbers comfortably;
	- to align text with other ‘first level’ indented paragraphs, e.g.
	  [data-1-]. */
	margin-top:  -0.75em;
	margin-left:  3em;
	}

li {
/*	Make vertical spacing between list items tighter than between 
	paragraphs. */
	margin-bottom: 0.75em;
	}

dt {
/*	Each new DT needs some vertical space above. Base it on regular
	list item spacing. */
	margin-top:     0.75em;
/*	Make the space below the same as for DD. */
	margin-bottom:  0.25em;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	}

dd {
/*	Make vertical spacing between description items tighter than
	between regular list items.
	Be consistent with other left margins for ‘first level’
	indents. */
	margin-bottom: 0.25em;
	margin-left:   1.5em;
	}

figcaption {
/*	Pull the caption up closer to the item to which it relates.
	(FIGCAPTION is always placed *after* the item. */
	margin-top:   -0.5em;
	margin-right:  calc(1.5em / var(--factor-02));
	margin-left:   calc(1.5em / var(--factor-02));
	font-family:   var(--font-sans);
	font-size:     calc(1em * var(--factor-02));
	line-height:   var(--lead-sans);
	}

hr {
/*	Make a 1px high rule. Both colour *and* background colour must be
	set, and must be the same. */
	border:           0;
	height:           1px;
	color:            var(--colour-norm);
	background-color: var(--colour-norm);
	}


/* Data tables.
---------------------------------------------------------------------
 * Begin by removing all borders from tables, rows and cells.
 * Then set basic TABLE element properties for all screen sizes.
   ------------------------------------------------------------------
 * For tables, we reverse the normal ‘mobile first’ philosophy and
   make special provision for small screens, i.e. to enable scrolling
   horizontally. (A TABINDEX="0" attribute on the TABLE tag in the
   HTML already makes the scrolling container keyboard accessible.)
 * Apply the rule to screen media only.
   ------------------------------------------------------------------
 * Finally, set the properties for rows, cells and captions.
--------------------------------------------------------------------- */

table, tr, th, td {
	border: none;
	}

table {
/*	Ensure breathing room before and after tables. */
	margin-top:      2.25em;
	margin-bottom:   2.25em;
/*	Centre all tables. */
	margin-right:    auto;
	margin-left:     auto;
/*	Never too narrow. */
	min-width:       50%;
/*	Minimal borders. */
	border-top:      1px solid #A8A8A8;
	border-collapse: collapse;
/*	Fix the table font size regardless of viewport width. */
	font-size:       1rem;
/*	Table text needs tighter leading than body text, especially in TH
	cells, which dictate the dimension. TDs need to fall into line to
	maintain vertical rhythm within rows, so set leading on TABLE. */
	line-height:     var(--lead-sans);
	}

@media screen and (max-width: 37.5em) {

/*	Table width exceeds available screen width? Just let it scroll! */

	table {
	/*	The following 4 declarations facilitate horizontal scrolling,
		making the table a ‘scroll container’. All properties and
		values are required. */
		display:    inline-block;
		width:      auto;
		max-width:  100%;
		overflow-x: auto;
	/*	The table is the scroll container, so the basic ‘snap’ type
		properties are set in this rule.
		- Snap in the inline direction.
		- Force the scroll container viewport to rest on a snap point. */
		scroll-snap-type: inline mandatory;
	/*	Background gradients at the extremities of the scroll
		container give a visual clue to users with small screens that
		the table may be scrolled horizontally. */
		background:
			linear-gradient(to right, white 30%, rgba(255,255,255,0)),
			linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
			radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
			radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
		background-color:      white;
		background-repeat:     no-repeat;
		background-position:   0 0, 100%, 0 0, 100%;
		background-size:       40px 100%, 40px 100%, 14px 100%, 14px 100%;
		background-attachment: local, local, scroll, scroll;
		}

} /* Close the @media rule. */

tr {
	border-bottom: 1px solid #A8A8A8;
	}

th, td {
/*	Use absolute units for padding to keep everything ‘tight’.*/
	padding:           4px 10px 4px 5px;
	vertical-align:    top;
	text-align:        left;
/*	Set the start of TH and TD cells as snap points within the scroll
	container viewport. (Only effective on small screens.) */
	scroll-snap-align: start;
	}

th {
	font-weight: bold;
	color:       var(--colour-norm);
	}

td {
/*	Tabular, lining figures work best in tables, but these features
	are not supported in all fonts (though they are in Georgia and
	Calibri). Even without tabular spacing, lining figures are still
	better for table data in general, and for currency values in
	particular, than ‘old style’ figures which may be the default (as
	in Georgia, for example). This declaration sets an order of
	preference, depending on what is available in the font:
	- tabular spacing with lining figures;
	- tabular spacing with default style figures;
	- default spacing with lining figures;
	- default spacing with default style figures (the fallback). */
	font-variant-numeric: tabular-nums lining-nums;
	}

caption {
	margin-top:    -0.5em;
	margin-bottom:  1em;
	line-height:    calc(var(--lead-sans) * var(--factor-04));
	text-align:     center;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	}


/* Inline elements.
---------------------------------------------------------------------
 * EM and STRONG are used where the purpose is truly for emphasis. I
   and B are used when drawing attention to text without conveying
   extra importance or mood.
   ------------------------------------------------------------------
 * For the sake of typographic harmony, make SUP, SUB and SMALL text
   all the same size.
   ------------------------------------------------------------------
 * The declared property values for SUP and SUB ensure that:
   - superscripts and subscripts do not interfere with lines of text
     above or below;
   - vertical line spacing is not affected by the presence of
     superscripts or subscripts.
--------------------------------------------------------------------- */

i, em {
/*	Bizarrely, the Georgia italic face looks slightly bigger than the
	roman, and italics stick out like a sore thumb when set amongst a
	line of roman text. Reduce the size for a better visual match. */
	font-size:  calc(1em * var(--factor-03));
	font-style: italic;
	}

b, strong {
	font-weight: bold;
	color:       var(--colour-norm);
	}

sup, sub, small {
	font-size: calc(1em * var(--factor-02));
	}

sup, sub {
	position:             relative;
	font-variant-numeric: lining-nums;
	vertical-align:       baseline;
	line-height:          0;
	}

sup {
	top: -0.5em;
	}

sub {
	bottom: -0.25em;
	}

img {
	display:      block;
	margin-right: auto;
	margin-left:  auto;
	max-width:    100%;
	height:       auto;
	}

button {
/*	Initial style properties for the ‘print’ button created by JS.
	Button dimensions account for a 24px square icon appended by JS.
	Position allows space for the reader progress bar at top. */
	position:   fixed;
	top:        6px;
	left:       0;
	width:      32px;
	height:     32px;
	padding:    3px;
	border:     0;
	background: #EB3425;
	}


/* Layer 3 - Components                                            =3
=====================================================================
 * Fully designed blocks or UI elements.
===================================================================== */


/* Section headings and subheadings.
---------------------------------------------------------------------
 * Refine the vertical spacing between headings, subheadings and
   subsequent text by nixing the top margin on any element following
   a heading: including other headings.
--------------------------------------------------------------------- */

h3 + *,
h4 + *,
h5 + *,
h6 + * {
	margin-top: 0;
	}


/* The document header.
---------------------------------------------------------------------
 * Reduce the width of the title region by adjusting the heading
   margins, and give the headings a bit more breathing room.
 * Set the properties for other components of the header, re-adjusting
   the margin for the applicant/respondent SPAN elements.
--------------------------------------------------------------------- */

header h1, header h2, header h3 {
	margin-top:   1.5em;
	margin-right: 2.5%;
	margin-left:  2.5%;
	line-height:  var(--lead-body);
	text-wrap:    balance;
	}

header h2 {
	text-transform: uppercase;
	letter-spacing: normal;
	}

header h2 span, header h2 b {
	text-transform: none;
	}

header h3 {
	margin-bottom:  1.5em;
	font-weight:    normal;
	letter-spacing: normal;
	}

header b {
	display:       block;
	margin-bottom: 1em;
	font-weight:   normal;
	color:         var(--colour-norm);
	}

header i {
	font-size:  calc(1em * var(--factor-02));
	font-style: normal;
	color:      var(--colour-dark);
	}

header cite, header span, header time {
	display:   block;
	}

header cite {
	margin-bottom: 1.5em;
	font-style:    normal;
	text-align:    right;
/*	Fake bold text. */
	text-shadow:   1px 0;
	color:         #666666;
	}

header span, header time {
   text-decoration:       underline 1px solid #666666;
   text-underline-offset: 0.3em;
   text-decoration-color: oklch(from currentColor l c h / 50%);
	}

header span {
	margin-right: -2.5%;
	text-align:    right;
	}

header time {
	margin-top:    2.5em;
	margin-bottom: 0;
	text-align:    left;
	}

header img {
	width:  7.5em;
	height: auto;
	}


/* Blockquotes.
---------------------------------------------------------------------
 * Tighten up the spacing between paragraphs. These are often short,
   ‘list-like’ items in quoted legislation, where the base bottom
   margin feels uncomfortably large. Also reduces the length of the
   blockquote regions a little.
 * Join consecutive blockquotes seamlessly by shifting the bottom
   margin to eliminate the whitespace between. Use when there is a
   second or subsequent opening quotation mark in a block of quoted
   text.
   ------------------------------------------------------------------
 * Various margin/padding adjustments to elements within or around
   blockquotes (including the blockquotes themselves)! The lengths I
   go to for nicely balanced typography...
--------------------------------------------------------------------- */

blockquote p {
	margin-bottom: 1em;
	}

blockquote:has(+ blockquote) {
	margin-bottom: -1em;
	}

blockquote:has(+ p), p:has(+ blockquote) {
	margin-bottom: 1em;
	}

blockquote p:has(+ ul, + ol) {
	margin-bottom: 1.5em;
	}

blockquote table:has(+ p) {
	margin-bottom: 1.75em;
	}

blockquote ul:has(+ p),
blockquote ol:has(+ p) {
	margin-bottom: 1em;
	}

blockquote :last-child {
	margin-bottom: 0;
	}

li blockquote {
	margin-top:  0.75em;
	padding-top: 0.75em;
	}

li blockquote:last-of-type {
	margin-bottom:  0.75em;
	}

blockquote table:first-child {
	margin-top: 1.25em;
	}

blockquote:has(table:last-child) {
	padding-bottom: 1.5em;
	}


/* Tables.
---------------------------------------------------------------------
 * Adjust top margin to give a ‘looks about right’ spacing between
   consecutive tables.
 * Additional paragraphs in table cells:
   - Add a small top margin and remove the global bottom margin to
     rationalise vertical spacing.
   - Note that a P tag is only applied to the second and subsequent
     paragraphs in the cell, where these exist.
 * Adjust margins for tables inside list items.
--------------------------------------------------------------------- */

table + table {
	margin-top:    3em;
	margin-top:    2.75em;
	}

th p, td p {
	margin-top:    0.5em;
	margin-bottom: 0;
	}

li table {
	margin-top:    1.75em;
	margin-bottom: 1.75em;
	}

li table + table {
	margin-top:    3em;
	}

li:last-child table {
	margin-bottom: 2.25em;
	}


/* Footnotes.
---------------------------------------------------------------------
 * Footnotes are contained in ASIDE elements: ASIDE is reserved for
   this purpose.
 * Reduce the paragraph bottom margin to give the same vertical
   spacing as a list item. Indent the paragraph from the left margin.
 * Move the superscripted footnote number back to the left margin.
--------------------------------------------------------------------- */

aside p {
	margin-bottom: 0.75em;
	margin-left:   2em;
	}

aside sup {
	display:      inline-block;
	text-indent: -2.285em;
	}


/* Nested lists, and other elements inside list items.
---------------------------------------------------------------------
 * Adjust the top and bottom margins to ensure the vertical spacing
   between nested lists and paragraphs or other elements *inside*
   list items is consistent with that *between* list items.
--------------------------------------------------------------------- */

li ul, li ol {
	margin-top:    0.75em;
	margin-bottom: 0;
	}

li p {
	margin-bottom: 0.75em;
	}

li img {
	margin-top: 1em;
	}

li figcaption {
	margin-bottom: 1em;
	}


/* Title attributes in elements.
---------------------------------------------------------------------
 * Styles to indicate to sighted users that there is TITLE text
   available (e.g. expansion of an abbreviation).
--------------------------------------------------------------------- */

[title] {
	border-bottom:   1px dotted #666666;
	text-decoration: none;
	cursor:          help;
	}


/* Type attributes in ordered lists.
---------------------------------------------------------------------
 * For simple lists (i.e. each item preceded by a numeral and a full
   stop), the numeral style is always explicity set in the HTML to
   allow for CSS being unsupported.
 * See also .parens-1, .parens-a and .parens-i classes later, for
   enclosing the numeral in parentheses.
--------------------------------------------------------------------- */

[type="1"] {
	list-style-type: decimal;
	}

[type="i"] {
	list-style-type: lower-roman;
	}

[type="a"] {
	list-style-type: lower-alpha;
	}


/* Layout and utility classes and pseudo classes.
---------------------------------------------------------------------
 * Set a radius and offset for the default :focus outline.
   ------------------------------------------------------------------
 * Add some top margin to targets when scrolling to give some
   breathing space above superscripted footnote numbers.
   ------------------------------------------------------------------
 * Provide for an ‘H7’ level heading.
 	- Mark up element tag with attributes:
 	  role="heading" aria-level="7"
 	- Reference:
 	  https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA12.html
   ------------------------------------------------------------------
 * Provide for small caps where required.
   ------------------------------------------------------------------
 * Render an element at full width of the containing block. Handy
   for ‘evening out’ widths of consecutive tables.
   ------------------------------------------------------------------
 * Adjust alignment of figures in parentheses in table cells, e.g.
   for negative currency values.
   ------------------------------------------------------------------
 * Text alignment. Useful for table cells, where there may be numeric
   data; and for appendix headings. And there’s nothing wrong with
   just calling them ‘left’, ‘centre’, ‘right’ and ‘middle’ here!
   ------------------------------------------------------------------
 * Revert to normal font weight and style with a SPAN. Sometimes
   useful inside a TH, which otherwise defaults to boldface.
   ------------------------------------------------------------------
 * Apply a shadowed ‘frame’ around an IMG.
   ------------------------------------------------------------------
 * Alternative background colours may be most usefully employed in
   table heading and subheading rows and cells for added clarity or
   distinction. Use sparingly.
--------------------------------------------------------------------- */

:focus-visible {
	border-radius:  0.15em;
	outline-width:  2px;
	outline-style:  solid;
	outline-color:  #105CB6;
	outline-offset: 0.15em;
	}

@supports not selector(:focus-visible) {
	:focus {
		border-radius:  0.15em;
		outline-width:  2px;
		outline-style:  solid;
		outline-color:  #105CB6;
		outline-offset: 0.15em;
		}
}

:target {
	scroll-margin-top: 12px;
	}

.h7 {
	margin-bottom:  0.75em;
	font-size:      calc(1em * var(--factor-01));
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}

.sc {
	font-variant: small-caps;
	}

.full {
	width: 100%;
	}

.parens {
	padding-right: calc(10px - 0.315em);
	}

.left {
	text-align: left;
	}

.centre {
	text-align: center;
	}

.right {
	text-align: right;
	}

.middle {
	vertical-align: middle;
	}

.normal {
	font-size:       inherit;
	font-weight:     normal;
	font-style:      normal;
	text-decoration: none;
	text-transform:  none;
	color:           currentColor;
	}

.framed {
	padding:    clamp(0.5vw, 0.75vw, 5px);
	box-shadow: 0 0 5px 1px rgba(75, 75, 75, 0.5);
	}

.alt-bg-01 {
/*	Pale green. Maintains better than WCAG 2.2 Level AA compliance. */
	background-color: #DFFFDF;
	}

.alt-bg-02 {
/*	Cream. Maintains better than WCAG 2.2 Level AA compliance. */
	background-color: #FFFFCF;
	}


/* Indented paragraphs in quoted legislation, and
   ‘paragraphs-as-list-items’.
---------------------------------------------------------------------
 * The key purpose of this set of rules is to simulate the styling
   of paragraphs adopted by Acts and Statutory Instruments of the UK
   and Scottish parliaments. This measure preserves familiarity for
   users accustomed to seeing the quoted legislation in its original
   form, and respects the Decision author’s formatting.
 * Nested OLs (however appealing an idea or however cleverly styled)
   are entirely unsuitable for marking up legislation, because web
   browsers treat list item numbers as *presentation*, whereas they
   are actually *content* and must be stable. See:
   https://siderea.dreamwidth.org/1819759.html
   ------------------------------------------------------------------
 * May also be used to simulate ordered lists in body text, where the
   item number is content, not presentation.
   ------------------------------------------------------------------
 * Arabic numbered: first level indent.
 * Alpha numbered:  second level indent.
 * Roman numbered:  third level indent.
   ------------------------------------------------------------------
 * '-' suffixed items, e.g. [data-1-], are for unnumbered paragraphs
   at the related level of indent.
--------------------------------------------------------------------- */

[data-1], [data-1-] {
	margin-left: 1.5em;
	}

[data-a], [data-a-] {
	margin-left: 4em;
	}

[data-i], [data-i-] {
	margin-left: 6.5em;
	}

[data-1], [data-a], [data-i] {
/*	Outdent the first line to accommodate a paragraph number. */
	text-indent: -1.5em;
	}

[data-1="li"], [data-1-="li"],
[data-a="li"], [data-a-="li"],
[data-i="li"], [data-i-="li"] {
/*	Tighten up the vertical spacing between ‘paragraphs-as-list-items’.*/
	margin-top: -0.75em;
	}


/* Lists of authorities, lists with no markers and compact lists.
---------------------------------------------------------------------
 * Apply .authorities class to UL tag to:
   - remove left margins;
   - remove list markers.
 * Occasionally other lists need to be presented without item markers.
   Apply the .no-marker class to the UL/OL tag.
 * In both of these cases, the list marker is removed by making the
   marker font-size "0" rather setting list-style-type:none, to allow
   for the idiosyncratic behaviour of Safari, which removes list
   semantics from any list where list-style-type is set to "none".
   ------------------------------------------------------------------
 * Where the list has been given a paragraph number, apply .numbered
   to the UL tag also, to shift the first item up to the same ‘line’
   as the number, while making room for the number at the left.
   ------------------------------------------------------------------
 * Define a more compact presentation for authorities than for
   regular lists. Set a tighter LI leading than the default, so that
   multiple lines do not appear disconnected. Adjust bottom margin in
   the ratio of tighter leading to the normal LI leading, e.g.
   (1.3/1.5 × 0.75em) = 0.65em.
   ------------------------------------------------------------------
 * Define an even more compact presentation than for lists of
   authorities, without removing the list marker (which can be
   removed if desired by the .no-marker class defined earlier.)
   ------------------------------------------------------------------
 * Enclose each list item number in parentheses, instead of following
   with a full stop.
--------------------------------------------------------------------- */

.authorities {
	margin-left: 0;
	}

.no-marker ::marker,
.authorities ::marker {
	font-size: 0;
	}

.numbered {
/*	NOTE the cascade: to be effective, this rule must appear AFTER
	.authorities. */
/*	Logic dictates the top margin should be -1.5em. My eyes tell me it
	needs to be -1.4em. */
	margin-top: -1.4em;
	margin-left: 2em;
	}

.authorities li {
	--lead-auth:   calc(var(--lead-body) * var(--factor-02));
	margin-bottom: calc(0.75em * var(--lead-auth) / var(--lead-body));
	line-height:   var(--lead-auth);
	}

.compact li {
	--lead-comp:   calc(var(--lead-body) * var(--factor-02));
	margin-bottom: calc(0.5em * var(--lead-comp) / var(--lead-body));
	line-height:   var(--lead-comp);
	}

.parens-1 > li::marker {
	content:   '(' counter(list-item, decimal) ')  ';
	}

.parens-a > li::marker {
	content:   '(' counter(list-item, lower-alpha) ')  ';
	}

.parens-i > li::marker {
	content:   '(' counter(list-item, lower-roman) ')  ';
	}


/* Link and anchor states.
---------------------------------------------------------------------
 * Keep base states the same as main site styles, for consistency.
   ------------------------------------------------------------------
 * De-clutter the appearance of links in superscripts (e.g. footnote
   references):
   - remove any border applied by a TITLE attribute (TITLE attributes
     may sometimes be added to provide footnote and reference links
     with unique accessible names);
   - remove underlines and overlines;
   - restore a normal link pointer cursor.
   ------------------------------------------------------------------
 * Highlight targetted footnote numbers or references in the text
   with a red outline instead of the default :focus colour.
--------------------------------------------------------------------- */

a:link, a:visited {
	text-decoration: underline;
	color:           #105CB6;
	}

a:hover, a:focus {
	text-decoration: underline overline;
	color:           #000033;
	}

a:focus {
	text-decoration: none;
	}

sup :link {
	border:          0;
	text-decoration: none;
	cursor:          pointer;
	}

sup :target {
	color:         #105CB6;
	outline-color: #CC0000;
  }


/* Particular table treatments.
---------------------------------------------------------------------
 * Sometimes the accessible name for a table is provided by a TITLE,
   but we want a ‘normal’ cursor to appear on tables, and no dotted
   bottom border.
   ------------------------------------------------------------------
 * Sometimes lines on a table are intrusive, so apply the .unlined
   class to the TABLE tag if helpful.
   ------------------------------------------------------------------
 * Negation will apply the sans-serif to all tables except those with
   a .legal class (for tables quoted from legislation).
--------------------------------------------------------------------- */

table[title] {
	border: none;
	cursor: auto;
	}

.unlined tr, .unlined th, .unlined td {
	border-bottom: 0;
	}

table:not(.legal) {
	font-family: var(--font-sans);
	}


/* Particular paragraph treatments.
---------------------------------------------------------------------
 * Introductory paragraphs. When the MAIN content opens with a
   paragraph that is not immediately preceded by a heading, increase
   the vertical spacing between it and the HEADER.
--------------------------------------------------------------------- */

main > p:first-child {
	margin-top: 2.25em;
	}


/* Particular table cell treatments.
---------------------------------------------------------------------
 * Keith’s clever columns classes: keep the table markup clean.
   ------------------------------------------------------------------
 * For ‘simple’ tables (i.e. without rowspan or colspan attributes on
   cells), these classes provide for setting the alignment of whole
   columns just by applying classes to the TABLE tag, e.g.
   - .c1r  sets all TD cells in column 1 to right aligned;
   - .c9c  sets all TD cells in column 9 to centre aligned;
   - .c1rh sets all TH cells in column 1 to right aligned;
   - .c9ch sets all TH cells in column 9 to centre aligned.
   Mix and match as required.
   ------------------------------------------------------------------
 * The TD and TH alignment rules could each be combined under one
   classname, but separating them allows more flexibility.
--------------------------------------------------------------------- */

.c1r td:nth-child(1), .c1rh th:nth-child(1),
.c2r td:nth-child(2), .c2rh th:nth-child(2),
.c3r td:nth-child(3), .c3rh th:nth-child(3),
.c4r td:nth-child(4), .c4rh th:nth-child(4),
.c5r td:nth-child(5), .c5rh th:nth-child(5),
.c6r td:nth-child(6), .c6rh th:nth-child(6),
.c7r td:nth-child(7), .c7rh th:nth-child(7),
.c8r td:nth-child(8), .c8rh th:nth-child(8),
.c9r td:nth-child(9), .c9rh th:nth-child(9) {text-align: right}

.c1c td:nth-child(1), .c1ch th:nth-child(1),
.c2c td:nth-child(2), .c2ch th:nth-child(2),
.c3c td:nth-child(3), .c3ch th:nth-child(3),
.c4c td:nth-child(4), .c4ch th:nth-child(4),
.c5c td:nth-child(5), .c5ch th:nth-child(5),
.c6c td:nth-child(6), .c6ch th:nth-child(6),
.c7c td:nth-child(7), .c7ch th:nth-child(7),
.c8c td:nth-child(8), .c8ch th:nth-child(8),
.c9c td:nth-child(9), .c9ch th:nth-child(9) {text-align: center}


/* Visually hidden text.
---------------------------------------------------------------------
 * Provide for ‘screen reader only’ text.
--------------------------------------------------------------------- */
.sro:not(:focus):not(:active) {
	position:    absolute;
	margin:      0;
	padding:     0;
	border:      0;
	width:       1px;
	height:      auto;
	overflow:    hidden;
	clip:        rect(0 0 0 0);
	white-space: nowrap;
	}


/* Particular blockquote treatments.
---------------------------------------------------------------------
 * Provide space for a hanging quotation mark on the first paragraph
   that is a direct child of a blockquote by means of a negative
   text indent, unless:
   - [1] that paragraph is centred, such as a part or chapter title
         in quoted legislation; or
   - [2] the indent is explicitly nullified by a .flush class,
         applied in the smaller number of cases where there is no
         quotation mark. An inelegant hack perhaps, but what can a
         poor boy do?
 * Indented paragraphs need to add that same negative indent amount
   to the existing indent; thus: -0.4em - 1.5em = -1.9em.
   ------------------------------------------------------------------
 * One day, we’ll perhaps be able to simplify this with
   ‘hanging-punctuation: first’.
--------------------------------------------------------------------- */

/* [1], [2] */
blockquote > p:first-child:not(.centre):not(.flush) {
	text-indent: -0.4em;
	}

/* [2] */
blockquote > p[data-1]:first-child:not(.flush),
blockquote > p[data-a]:first-child:not(.flush),
blockquote > p[data-i]:first-child:not(.flush) {
	text-indent: -1.9em;
	}


/* Reader progress bar.
---------------------------------------------------------------------
 * Display the accent and progress bars for screen media only.
 * Both bar DIVs are inserted by JS, so only where JS is enabled.
 * The dynamic value of --progressPercent is calculated by the JS.
 * The bar colours maintain WCAG 2.2 Level AA contrast with the page
   background.
--------------------------------------------------------------------- */

@media screen {

	#progress-bar,
	#accent-bar,
	#accent-bar-active {
		z-index:          10;
		position:         fixed;
		top:              0;
		left:             0;
		width:            100%;
		height:           6px;
		background-color: #EB3425;
		}

	#progress-bar {
		z-index:          20;
		width:            var(--progressPercent);
		}

	#accent-bar-active {
		background-color: #DDBBBB;
		}

} /* Close the @media rule. */


/* Adjustments for printing.                                       =4
=====================================================================
 * Reset the body text size and colour.
 * Prevent headings, etc. being orphaned from the text that follows.
 * Reset H5 text color.
 * Prevent display of ‘print’ button (created by JS).
 * Set print style for HR.
 * Remove background colour and vertical padding from blockquotes,
   and add a border as a marker of the margin position instead.
 * Reset the boldface colour in body text and the header.
 * Change the ‘fake’ boldface on the CITE element in the HEADER to
   actual boldface.
 * Restore vertical spacing between consecutive blockquotes.
 * Add vertical spacing to a blockquote directly followed by a
   blockquote.
 * Prevent printing of borders on:
   - elements with TITLE attributes;
   - blockquotes containing a table.
 * Remove colour, overlines and underlines from link text.
 * Remove vertical spacing from blockquotes when first or last in a
   list item.
===================================================================== */

@media print {

	body {
		font-size: 100%;
		color:     var(--colour-dark);
		}

	h1, h2, h3, h4, h5, h6, figure, img {
	/*	Try both old CSS2 & new CSS3 properties. You never know - one
		day, all browsers might actually respect these declarations! */
		page-break-inside: avoid;
		break-inside:      avoid-page;
		page-break-after:  avoid;
		break-after:       avoid-page;
		}

	h5 {
		color: var(--colour-dark);
		}

	button {
		display: none;
		}

	hr {
		border: 0.5pt solid;
		height: 0;
		}

	blockquote {
		padding-top:      0;
		padding-bottom:   0;
		border-left:      1px solid #A8A8A8;
		background-color: #FFFFFF;
		}

	b, strong,
	header b, header cite {
		color: var(--colour-dark);
		}

	header cite {
		font-weight: bold;
		text-shadow: none;
		}

	blockquote + blockquote {
		padding-top: 1em;
		}

	blockquote:has(+ blockquote) {
		padding-bottom: 1em;
		}

	blockquote:has(+ p), p:has(+ blockquote) {
		margin-bottom: 1.5em;
		}

	blockquote:has(table),
	[title] {
		border: 0;
		}

	a:link, a:visited {
		text-decoration: none;
		color:           inherit;
		}

	li blockquote:first-of-type,
	li blockquote:last-of-type {
		padding-top: 0;
		}

} /* Close the @media rule. */

} /* Close the @supports rule. */


/* And finally...
=====================================================================
 * Web Design is 95% Typography:
   https://ia.net/topics/the-web-is-all-about-typography-period
===================================================================== */