/* ========================================================================
   DIAMOND LANE CLAUSES - SITE CSS  (formerly TH.css; the Clause tools formerly in copy-rule.css
   are at the end of this file)
   Screen, navigation, provision, note, responsive, and print styles
   ======================================================================== */

/* Cleaned conservatively: disabled experimental CSS removed; active rule order
   largely preserved to avoid changing cascade behavior. */

/* "Clauses Only" mode: diamond-lane.js applies this class directly to whatever should disappear
   (comments, additional material, contents lists, pointers to them, and — for Clauses written with
   "Clause text" boxes — the explanatory framing around those boxes). Placed first in the file so it
   always parses, independent of anything later on (this stylesheet is long and still growing). */
.cr-note-hidden { display: none !important; }

/* "Clauses Only" mode — one quiet, bounded object per whole Clause, marked by a thin rule above
   and below rather than a shaded box per numbered sub-provision. Blue stays reserved for the
   normal "Notebook" view, where it marks "this is the actual contract language" among surrounding
   explanatory text; in Clauses Only, everything shown already IS contract language, so the color
   stops earning its keep. Specificity (the body.cr-clauses-only ancestor) makes these win over the
   normal-view rules below regardless of source order, so this block can live anywhere in the file. */
body.cr-clauses-only div.pr-top.outline-3 {
  background: none;
  padding: 1.75em 0 2em;
  margin: 0 0 2.5em;
  border: none;
  border-top: 2px solid #ccc;   /* exactly one line per Clause boundary — never a bottom rule too */
}
body.cr-clauses-only div.pr-top h3 {
  background: none;
  padding: 0;
  margin: 0 0 1em;
}
body.cr-clauses-only div.pr-cont.outline-5,
body.cr-clauses-only div.pr-cont.outline-6,
body.cr-clauses-only div.pr-txt.outline-5,
body.cr-clauses-only div.pr-txt.outline-6 {
  background: none;
  padding: 0;
  margin-left: 0;
}
/* Less space between a Clause's own numbered parts (they're one object now, not separate boxes);
   more space is reserved for div.pr-top.outline-3's own margin, between one Clause and the next. */
body.cr-clauses-only div.pr-top div.outline-4 {
  margin-bottom: 1.1em;
}
body.cr-clauses-only div.pr-txt.outline-5,
body.cr-clauses-only div.pr-txt.outline-6,
body.cr-clauses-only div.pr-top div.outline-5,
body.cr-clauses-only div.pr-txt.outline-6 {
  margin-bottom: .3em;
}
/* Read as a UI control, not as part of the contract text it sits next to. */
body.cr-clauses-only .copy-rule-add {
  float: right;
  margin: .1em 0 0 1em;
}

:root {
    --content-max-width: 1200px;
    --sidebar-width: 320px;
    --content-padding: 20px;
    --dk-green: #014c3d;
    --md-green: #01735C;
    --bl-bkg: #e6f1ff;
    --bkg-pbl: #CDCDFE;
    --gr-bkg: #f5f5f5;
    --bkg-opt: #d9d9d9;
    --bl-fgd: #2980B9;
    --Cornsilk: #FFF8DC; 
    --bkg-yellow: #fdfdce;
    background-color: #fcfcfc;
}

/* CRITICAL: Anchor scroll positioning - accounts for sticky header */


red {
    color: brown;

}

.subtitle {
    font-size: 1.3em;
    hyphens: auto !important;
    line-height: 1.5em;
    text-wrap: balance;
}


.subtitle i, .subtitle a {
    font-size: 1em !important;
}

div.byline,
div.tagline {
    text-wrap: balance;
}




div.asis {
    margin: 2rem -1rem 1rem -1rem;
    padding: 0 1rem;
    border: solid 5px DarkGray;
}


/* =================
   SUBHEADING LEAD-IN
   =================
*/
span.sh {
    font-style: italic;
}


/* ========================================================================
   STICKY SIDEBAR NAVIGATION
   ======================================================================== */

/* Hide the master TOC heading that org-mode generates */
#outline-container-toc-chap > h2 {
    display: none;
}

/* Navigation sidebar — slide-in drawer on all screen sizes */
#lighthouse-toc {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    background: #f8f8f8;
    border-right: 3px solid #2980B9;
    padding: 1.5rem 1rem;
    z-index: 2000;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
    
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

#lighthouse-toc.show {
    transform: translateX(0);
}

#lighthouse-toc h2 {
    font-size: 1.1em;
    color: #2980B9;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #2980B9;
}

#text-table-of-contents {
    font-size: 0.9rem;
}

#lighthouse-toc-inner > ul,
[role="doc-toc"] ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#lighthouse-toc-inner li {
    margin-bottom: .8rem;
    line-height: 1.4;
}

#lighthouse-toc-inner a {
    color: #2980B9;
    text-decoration: none;
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    transition: background-color 0.2s;
}

#lighthouse-toc-inner a:hover {
    background-color: #e6f1ff;
}

/* Add visual indicator for current section */
#lighthouse-toc-inner a:target,
#lighthouse-toc-inner a:focus {
    background-color: #d0e7ff;
    font-weight: bold;
}

/* Adjust nested list indentation */
#lighthouse-toc-inner ul ul {
    padding-left: 1rem;
}


[role="doc-toc"] ul {
    list-style: none;
    padding-left: 0;
    margin: 1em 0 1em 0;
}

[role="doc-toc"] ul li {
    margin-top: 1em;
}


[role="doc-toc"] ul li ul {
    margin: 0 1em 1em;
}

[role="doc-toc"] ul li ul li {
    font-weight: normal;
    margin-top: .5em;
}

[role="doc-toc"] ul li ul li ul {
    margin: 0 2em;
}

div#outline-container-toc-chap-det h2 {
    display: none;
}



/* Detailed in-document TOC: remains visible in normal flow. */
.toc-det nav[role="doc-toc"] {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    transform: none;
    box-shadow: none;
    border-right: none;
    padding: 0;
}

/* ========================================================================
   MAIN CONTENT - Shifted to make room for sidebar
   ======================================================================== */

body {
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 1.8em;
    hyphens: auto;
    max-width: 900px;
    padding: 40px;
    margin-left: 60px;   
    border-left: none;
}

/* Wrapper for main content */
#content {
    margin-left: 0;
}

/* ========================================================================
   STICKY TOP NAVIGATION (Contents | Top links)
   ======================================================================== */

.hlt {
    background-color: var(--Cornsilk);
    font-size: 0.85rem;
    font-weight: bold;
    position: fixed;
    top: 0.5rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    border: 2px solid #999;
    border-radius: 4px;
    z-index: 2000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hlt a {
    margin: 0 0.5rem;
    color: #2980B9;
    text-decoration: none;
}

.hlt a:hover {
    text-decoration: underline;
}

/* ========================================================================
   BASE TYPOGRAPHY
   ======================================================================== */

p, li {
    color: #444;
    margin-bottom: .5em;
}

.org-center { text-align: center; }

.header-rule {
    border: none;
    border-top: 1px solid #ccc;
    width: 55%;
    margin: 0.9em auto 1.1em auto;
}

h1, h2, h3, h4, h5 {
    font-family: Georgia, serif;
}

h1 {
    font-size: 1.6em;
    margin: 0 0em .5em 0;
    line-height: 1.5em;
    text-wrap: balance;
}

h2 {
    margin: 3em 0 0.5em 0;
    font-size: 1.8em;
    line-height: 140%;
}

.chap h2::before,
.chap-rule h2::before,
.intro h2::before {
    content: "Chapter ";
    font-weight: normal;
    font-size: 0.8em;
}

/* Don't add "Chapter" before TOC headings */
.toc h2::before,
#outline-container-toc-chap h2::before {
    content: "";
}



h3 {
    font-family: Georgia, serif;
    font-size: 1.2em;
    margin-top: 2em;
    line-height: 1.5;
}


h4, h6 {
    color: #444;
    font-weight: bold;
    margin: 3em 0 0.5em 0;
}

h5 {
    color: #444;
    font-weight: bold;
    margin: 2em 0 0.5em 0;
}

h4, h5 {
    font-weight: bold;
}

h5 {
    font-family: sans-serif;
    font-size: .9em;
    font-weight: bold;
}

h5 i, h5 em {
    font-weight: bold;
}

div.pr-alt .outline-5 h5 {
    font-family: sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    font-style: normal;
}

div.pr-alt .outline-5 h5 i, 
div.pr-alt .outline-5 h5 em {
    font-weight: normal;
    font-style: italic;
}

div.pr-top h6 {
    font-weight: bold;
    font-size: 1em;
    margin-top: 0em;
}


/* ========================================================================
   LINKS
   ======================================================================== */

a {
    text-decoration: none;
    color: #2980B9;
}

a:visited {
    color: #2980B9;
}

/* ========================================================================
   LOCAL TABLES OF CONTENTS (within chapters)
   ======================================================================== */

[role="doc-toc"] * {
    font-size: 1.3rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.intro .outline-text-2 [role="doc-toc"] ul li,
.toc-det .outline-text-2 [role="doc-toc"] ul li {
    font-weight: bold;
}

div.intro .outline-text-2  [role="doc-toc"] ul li ul li,
div.toc-det .outline-text-2  [role="doc-toc"] ul li ul li {
    font-weight: normal;
}

[role="doc-toc"] ul li {
    margin-bottom: 0.4em;
}

nav[role="doc-toc"]:not(#lighthouse-toc) h2 {
    font-size: 1em;
    font-weight: bold;
    margin-top: 1rem;
}

/* Style for local TOCs (not the main sidebar) */
div.toc-local {
    background-color: #f8fbff;
    border-left: 4px solid #2980B9;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
}


.addl-body div.toc-local,
.addl-body [role="doc-toc"] {
    background-color: #fcfcfc !important;
    border-left-color: #9fc5e8;
}


div#text-toc-chap a:link,
div#text-toc-chap a:active,
div#text-toc-chap a:visited,
div#text-toc-chap a:hover,
div.toc-local a:link,
div.toc-local a:active,
div.toc-local a:visited,
div.toc-local a:hover {
    color: #2980B9;
}

/*
.pr-top > [class^="outline-text-"] > div[role="doc-toc"] a:not(:hover) {
    color: inherit;
}
*/

nav div#lighthouse-toc-inner a,
nav#lighthouse-toc div#lighthouse-toc-inner i,
nav#lighthouse-toc div#lighthouse-toc-inner b,
nav div#lighthouse-toc-inner li {
    font-size: .9em !important;
}

/* ========================================================================
   RULE TEXT (blue background, Arial font)
   ======================================================================== */

div.chap span.section-number-2, 
div.chap-rule span.section-number-2, 
div.intro span.section-number-2, 
div.pr-top span.section-number-3,
div.pr-alt span.section-number-3,
span.section-number-4  {
    font-size: .9em;
    font-weight: normal;
}

div.pr-top span.section-number-3:before {
    content: "Clause ";
}

div.chap span.section-number-2:after, 
div.chap-rule span.section-number-2:after, 
div.intro span.section-number-2:after, 
span.section-number-3:after,
span.section-number-4:after {
    content: "    ";
}


dt {
    margin-top: 0em;
}

dd {
    margin-top: .5em;
    margin-bottom: 1em;
    margin-left: 2em;
}

dd ol li {
    color: black;
    margin-top: .5em;
    margin-bottom: 1em;
}

dd p {
    margin-top: 1em;
    margin-bottom: .5em;
}

p-h-b {
    font-variant: small-caps;
    font-weight: bold;
}

div.pr-top h3 {
    font-size: 1.3em;
    font-family: sans-serif;
    font-weight: bold;
    padding: 1em;
    margin-left: -1em;
    margin-bottom: 1em;
}

div.rule-toc {
    margin-top: 3em;
    font-family: sans-serif;
    padding: 5px 2em;
    background-color: #e6f1ff;
}

div.rule-toc a:not(:hover) {
    color: inherit;
}

.rule-toc li {
/*
    padding-left: 4em;
    text-indent: -4em;
*/
    line-height: 1.8;
}


div.pr-top.outline-3 {
/*    padding-bottom: 2em; */
}

div.pr-top h3 {
    background-color: #e6f1ff;
    padding: .55em .9em .4em .9em;

}

/* Clause text: label above the operative-text field — but commenting out the text */
div.pr-txt.outline-5,
div.pr-txt.outline-6,
div.pr-cont.outline-5,
div.pr-cont.outline-6 {
    font-family: sans-serif;
    background-color: #e6f1ff;
    position: relative;
    padding: .55em .9em .4em .9em;
    /* Same trick as div.pr-top h3 below: the negative margin cancels the left padding, so this
       box's own text — and its blue background's left edge — line up with the Clause title's,
       instead of sitting wherever the (now zero-margin) outline-4/outline-5 wrappers happen to
       place it. */
    margin-left: -1em;
}

div.pr-top div.outline-4 {
    /* No left/right margin: a numbered sub-heading's own wrapper no longer indents the Clause text
       box nested inside it, so the box's left edge — set by its own margin-left above — lines up
       with the Clause title's, in both the normal view and "Clauses Only" mode. */
    font-family: sans-serif;
    background-color: #e6f1ff;
    position: relative;
    padding: .55em .9em .4em .9em;
    margin: 0 0 3em 0;
}

div.pr-top div.outline-4 h4 {
    font-family: sans-serif;
    font-size: 1.1em;
    margin-top: 0em;
    margin-bottom: -1em;
    text-wrap: balance;
    /* Align the h4 heading with the clause/comment visual grid. */
    padding: 1em 0;
}

div.pr-top div.outline-5,
div.pr-txt.outline-6 {
    margin-bottom: 3em;
}

div.pr-top div.outline-4 h5 {
    font-size: 1.1em;
    font-family: sans-serif;
    font-weight: normal;
}

div.pr-top div.outline-4 h4 .section-number-4 {
/*
    position: absolute;
    left: 1em;
    width: 4.5em;
*/
    font-size: .9em;
}


div.pr-alt div.outline-5 h5 {
    font-weight: bold;
}


div.pr-top .outline-text-3 ul {
    list-style: none;
}


div.cl-txt,
div.cl-cmt {
    margin-top: 1em;
}

div.cl-txt h5,
div.cl-cmt h5 {
    font-family: serif !important;
    font-size; .9em;
    font-weight: normal;
}



/* ===========
   TABLE TEXT
   ===========
*/
table {
    border: thin solid gray;
    font-size: .9em;
    line-height: 1.2em;
    margin: 1em;
}
table td {
    vertical-align: top;
    padding: .5em .75em;
    line-height: 1.5em;
}

.no-border-table, 
.no-border-table td, 
.no-border-table th { 
    border: none !important;
 }

/* ========================================================================
   OPTION TEXT (gray background, Arial font)
   ======================================================================== */


/* ========================================================================
   RUN-IN SUBHEADINGS
  ======================================================================== */


span.section-number-5 {
    font-size: .9em;
    font-weight: normal;
    padding-right: .5em;
}


/* ========================================================================
   CLAUSE PORTALS: NOTES / ADDITIONAL READING
   ======================================================================== */

/*
 * A .pr-top section supplies the blue Clause field, including the Clause's
 * h4 headings.  An .addl section is therefore deliberately pulled back out
 * to the page background: it is navigation associated with the Clause, not
 * part of the Clause text.
 */

div.pr-top div.addl.outline-4 {
    background-color: transparent;
    margin: 1.6em 1em 0 1.5em;
    padding: 0;
}

/* "Notes (not part of this Clause)" / "Additional reading (...)" */
div.pr-top div.addl.outline-4 > h4 {
    margin: 0 0 .5em 0 !important;
    padding: 0;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.4;
}

/* Portal material uses the normal page typography, not Clause typography. */
div.pr-top div.addl.outline-4 > .outline-text-4 {
    background-color: transparent;
    margin: 0;
    padding: 0;
    font-family: Georgia, serif;
    font-size: 1em;
    line-height: 1.6em;
}

/* Linked remote-section title, e.g. "Effective date:" */
div.pr-top div.addl.outline-4 > .outline-text-4 > p:first-child {
    margin: 0 0 .25em 0;
}

/* Remote TOC: navigation, not another shaded or bordered box. */
div.pr-top div.addl.outline-4 div.toc-local,
div.pr-top div.addl.outline-4 [role="doc-toc"] {
    margin: 0 0 .5em 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
}

div.pr-top div.addl.outline-4 [role="doc-toc"] ul {
    margin-top: .25em;
    margin-bottom: 0;
}

div.pr-top div.addl.outline-4 [role="doc-toc"] ul li {
    margin-top: .35em;
    margin-bottom: .35em;
}

div.pr-top div.addl.outline-4 [role="doc-toc"] p {
    font-family: serif;
}


div.addl.outline-4 [role="doc-toc"] a, 
div.addl.outline-4 [role="doc-toc"] b,
div.addl.outline-4 [role="doc-toc"] i {
    font-family: serif;
    color: #444;
}

/* ========================================================================
   COMMENTARY / NOTES (.cmtry = older export class; .cmt = current one — both are styled so
   older pages keep working)
   ======================================================================== */

/* A Comment sits inside a blue Clause box (div.pr-top div.outline-4, or a "Clause text" box —
   both use the same .55em .9em .4em .9em padding). Give the Comment its own near-white page
   background instead of letting the parent's blue show through, and pull it out by exactly the
   parent's own left/right/bottom padding (negative margins matching those padding values) so the
   Comment's background reaches the parent box's outer edges on those sides, painting over the
   blue there instead of leaving a blue margin around (and under) the Comment. The top is left
   alone on purpose — the Clause text above the Comment should stay blue.
   Selector is "div.pr-top div.cmtry/.cmt", not just ".cmtry"/".cmt": a Comment also carries an
   "outline-N" class (e.g. "outline-5 cmt"), and "div.pr-top div.outline-5 { margin-bottom: 3em }"
   above has that same two-class-plus-type specificity — a plain ".cmt" rule would lose the
   margin-bottom tug-of-war to it regardless of source order, leaving a strip of blue showing
   below the Comment. Matching that specificity here, later in the file, wins on source order. */
div.pr-top div.cmtry,
div.pr-top div.cmt {
    font-family: Georgia, serif;
    font-size: 1em;
    background-color: #fcfcfc;
    margin: 2em -.9em -.4em -.9em;
    padding: .75em .9em .75em .9em;
}


/* Shared typography for the "Comment" label itself. The older .cmtry export always uses an h6;
   the current .cmt export uses h5 (confirmed from real page markup), so both are covered. */
div.pr-top div.outline-text-4::before,
div.cmtry h6,
div.cmt h5,
div.cmt h6 {
    font-family: Georgia, serif !important;
    font-size: 1em !important;
    font-weight: normal;
    line-height: 1.6em;
/*    color: #2980B9; */
}

.cmtry h6, .cmtry h7,
.cmt h5, .cmt h6, .cmt h7 {
    margin-top: .2em;
}

/* Only .cmtry needs a colon added: its heading text is just "Comment". .cmt's heading text
   already includes the colon ("Comment:") in the exported markup, so adding one here too would
   print "Comment::". */
div.cmtry h6::after {
    content: ":";
}

.cmtry .outline-text-5,
.cmtry .outline-text-6,
.cmtry .outline-text-7,
.cmt .outline-text-5,
.cmt .outline-text-6,
.cmt .outline-text-7 {
    color: #555;
    font-style: normal;
    line-height: 1.4em;
    font-weight: normal;
    background-color: #fcfcfc;
}

.cmtry p, .cmtry li,
.cmt p, .cmt li {
    color: #555;
}

div.cmtry p,
div.cmt p {
    color: #555;
}

span.xr {
    font-size: .7em;
    background-color: #fcfcfc;
    vertical-align: super;
    margin-left: .25em;
}

p.see-addl {
    margin: 2em 0 0 0;
    font-style: italic;
}

/* ========================================================================
   SPECIAL BOXES AND BORDERS
   ======================================================================== */


div.alt, .bordered {
    padding: 0.5rem 2.5rem;
    border: 3px solid #d5d5d5;
    margin: 2rem 5rem;
}

div.bord {
    padding: 0.5rem 1rem;
    border: 3px solid #2980B9;
    margin: 1rem 0;
}

.bbox, .bboxy, .bboxn {
    font-size: 1.5em;
}

div.indented {
    margin-left: 1.5em;
}
div.indented-sans {
    margin-left: 5em;
    margin-right: 5em;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: .9em;
    font-style: italic;
}

/* ========================================================================
   LISTS
   ======================================================================== */

ol {
    margin-left: 0;
    list-style-position: inside;
}

ol li {
    list-style-type: decimal;
    margin-bottom: 1.5em;
}

ol li ol {
    margin-left: 0;
}

ol li ol li {
    list-style-type: lower-alpha;
    margin-top: .5em;
    margin-bottom: .75em;
}


div.pr-top div.outline-text-4 ol,
div.pr-top div.outline-text-5 ol li {
    margin-top: -.25em;
}
div.pr-top div.outline-text-4 ol li,
div.pr-top div.outline-text-5 ol li {
    list-style-position: outside;
    list-style-type: decimal;
    margin-top: .75em;
    margin-bottom: .75em;
}

div.pr-top div.outline-text-4 ol li ul li,
div.pr-top div.outline-text-5 ol li ul li {
    list-style-position: outside;
    list-style-type: disc;
}

div.pr-sub div.outline-text-4 ol li,
div.pr-alt div.outline-text-5 ol li {
    list-style-type: lower-alpha;
}

div.ul-compressed ul {
    margin-top: -.5em;
    margin-left: -1em;
    hyphens: none;
}

div.ul-compressed ul li {
    margin-bottom: 0;
}

ul li ul {
    margin-top: .5em;
}

div.olnum ol li {
    list-style-type: decimal !important;
}

/* ========================================================================
   STRIKETHROUGH
   ======================================================================== */

.na {
    font-size: .9em;
    color: gray;
    text-decoration: line-through;
    text-decoration-color: gray;
}

/* ========================================================================
   CITE-TOGGLE / ASIDE-TOGGLE (cite-toggle.js)
   ======================================================================== */


html.js-ready div.addl-body {
    display: block;
}

html.js-ready div.addl-body:not(.addl-open) {
    display: none;
}

/* JS-enabled: neutralize the cite wrapper box so the inline toggle
   button and content span sit naturally in running text. */

cite {

    color: #444;   /* was in cite-toggle.css, the only part of it that still applied */
    display: block !important;
    background-color: inherit !important;
    border: none !important;
    font-family: sans-serif !important;
    font-size: .8em !important;
    margin: .5em 0 0 2.5em !important;
}


aside,
html.js-ready aside {
    display: block !important;

    padding: 0 10px;
    margin-top: -1em;
    background-color: #fcfcfc;

    border: none !important;
}


/* Section-level "[ expand notes ]" / "[ collapse notes ]" link */
.section-expander-wrapper {
    margin: 0.25em 0 0.5em 0;
}

.section-expander {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.75em;
    color: #1a6bbd;
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.01em;
}

.section-expander:hover {
    text-decoration: underline;
}

/* addl-toggle: "[ show ]" / "[ hide ]" link appended to the section heading.
   Styled like section-expander — plain text link, no box. */
.addl-toggle {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.7em;
    color: #1a6bbd;
    cursor: pointer;
    user-select: none;
    margin-left: 0.6em;
    vertical-align: middle;
}

.addl-toggle:hover {
    text-decoration: underline;
}

/* ========================================================================
   CITATIONS AND ASIDES
   ======================================================================== */

/* Citation margin notes */
/* Remove from normal flow */

 /* Position in right margin */
/* Margin-right = Width + desired gap from text */


/*aside, cite */
aside {
  display: block;
  /* Visual styling */
  font-size: .88em;
  line-height: 1.4;
  font-style: normal; /* Override browser default italic */
  color: #666;
  
  /* Prevent orphaned citations */
  page-break-inside: avoid;
}


/* Position */


aside {
    margin: 1em 5em 2em 5em;
    padding: 10px 20px;
}


/* Ensure parent containers can accommodate margin notes */

/* Alternative approach if the above doesn't align perfectly */


/* Container needs right margin to make space for notes */
/* padding-right accommodate the margin note width */


div.ol-left ol {
    margin-left: -2em;
}

div.ol-left ol li ul li {
    margin: 1em 0;
    list-style-position: outside;
    list-style-type: disc;
}


/* Tablet: Stack citations below on narrower screens */
@media (max-width: 1024px) {
  cite {
    float: none;
    width: auto;
    margin-right: 0;
    margin-left: 2em;
    margin-top: 0.5em;
    display: block;
    border-left: 3px solid #ddd;
    padding-left: 1em;
  }
  
aside cite {
    display: inline;
    font-size: 1em;
    margin: 0 !important;
}

  #content {
    padding-right: 20px;
    max-width: 100%;
  }
}

/* Mobile: Full width with clear visual distinction */
@media (max-width: 640px) {
  cite {
    margin-left: 0;
    padding: 0.75em;
    background-color: #f8f8f8;
    border-left: 3px solid #ccc;
    font-size: 0.9em;
  }
  
aside cite {
    display: inline;
    font-size: 1em;
    margin: 0 !important;
}

  #content {
    padding-left: 15px;
    padding-right: 15px;
  }
}

cite, aside {
    font-family: Georgia, serif;
    font-style: normal;
}

cite a, cite i, aside a, aside i {
    font-size: 1em;
}

blockquote {
    font-style: normal;
    margin: 0 2em;
    padding: 0 1em;

    border-left: 4px solid #d9d9d9;
}

.cl7 blockquote {
    margin: .5rem 0 0 5rem;

}

.script {
    font-family: Courier, monospace;
}

/* "Add to Addendum" buttons and the Addendum panel: see CLAUSE TOOLS at the end of this file. */

/* ========================================================================
   IMAGES
   ======================================================================== */

img {
    max-width: 100%;
    height: auto;
}

.cc {
    width: 180px;
    margin-top: 0.5rem;
    display: block;
    float: right;
    margin-right: -40px;
    padding: 0 0 0.5rem 1rem;
}

/* Photo positioning classes */
.photo-lighthouse {
    display: block;
    float: right;
    margin-right: -40px;
    padding: 0 0 0.5rem 0.5rem;
    margin-top: -13.2rem;
    width: 8%;
}

/* Photo positioning classes */
.photo-calpage {
    display: block;
    float: right;
    margin-right: -40px;
    padding: 0 0 0.5rem 0.5rem;
    margin-top: -16rem;
    width: 12%;
}

/* Photo positioning classes */
.photo-HOV-sign {
    display: block;
    float: right;
    padding: 0 0 0.5rem 0.5rem;
    margin-top: -9rem;
    width: 8%;
}


/* Photo positioning classes */
.photo-CVN65 {
    display: block;
    float: right;
    margin-right: -40px;
    padding: 0 0 0.5rem 2.5rem;
    width: 22%;
}


.photo-dragon {
    display: block;
    float: right;
    margin-right: -40px;
    padding: 0 0 0.5rem 0.5rem;
    margin-top: -13rem;
    width: 20%;
}


.photo-lighthouse-nocd {
    display: block;
    float: right;
    margin-right: -20px;
    padding: 0 0 0.5rem 0.5rem;
    margin-top: -6rem;
    width: 10%;
}

.photo-logo {
    position: relative;
    top: -100px;
    left: calc(90%);
    width: 9%;
    margin-bottom: -5rem;
}

.photo-logo-gears-embed {
    position: relative;
    top: -200px;
    left: calc(90%);
    width: 80px;
    margin-bottom: -10rem;
}

.photo-logo-no-sign { 
    position: relative;
    float: right;
    top: -20px;
    right: -30px;
    width: 13%;
    margin: 0 0 -40rem 0;
}

.photo-no-legalese {
    float: right;
    width: 12%;
}

/* The HOV-sign and no-legalese graphics above are floated at a percentage width with a large
   negative top margin, tuned for a wide desktop column. On a narrow one that pulls them up into
   whatever text happens to be there and shrinks them to the point of being hard to read. Placed
   after those rules (not just inside a @media block earlier in the file) so it wins on source
   order as well as by matching — this stylesheet relies on source order for its cascade throughout,
   and a media-query rule placed earlier than the un-scoped rule it's meant to override loses to it
   outside of a real media match. */
@media (max-width: 640px) {
  .photo-HOV-sign,
  .photo-no-legalese {
    display: block;
    float: none;
    position: static;
    margin: 1em auto;
    top: auto;
  }
  .photo-HOV-sign {
    width: 90px;
    max-width: 35%;
  }
  /* A round icon reads smaller than a tall sign at the same width, so it gets a bigger one here. */
  .photo-no-legalese {
    width: 150px;
    max-width: 50%;
  }
}

.photo-at-right {
    display: block;
    float: right;
    margin-right: 0;
    padding: 0 0 0.5rem 1rem;
}

.photo-dct {
    display: block;
    float: right;
    width: 180px;
    padding-left: 20px;
    position: relative;
}

.photo-left {
    margin: 0.5rem 3rem 1rem 0;
    float: left;
}

.photo-up {
    position: relative;
    top: -100px;
}

/* Width classes for images */
.photowidth05 { width: 5%; }
.photowidth07 { width: 7%; }
.photowidth08 { width: 8%; }
.photowidth09 { width: 9%; }
.photowidth10 { width: 10%; }
.photowidth11 { width: 11%; }
.photowidth12 { width: 12%; }
.photowidth15 { width: 15%; }
.photowidth18 { width: 18%; }
.photowidth20 { width: 20%; }
.photowidth22 { width: 22%; }
.photowidth25 { width: 25%; }
.photowidth30 { width: 30%; }
.photowidth35 { width: 35%; }
.photowidth40 { width: 40%; }
.photowidth45 { width: 45%; }
.photowidth60 { width: 60%; }

/* Centered photo classes */
.photocenter10, 
.photocenter15,
.photocenter20, 
.photocenter25, 
.photocenter30, 
.photocenter50, 
.photocenter60, 
.photocenter80, 
.photocenter90, 
.photocenter90C, 
.photocenter100 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.photocenter10 { width: 10%; }
.photocenter15 { width: 15%; text-align: center; }
.photocenter20 { width: 20%; }
.photocenter25 { width: 25%; }
.photocenter30 { width: 30%; }
.photocenter50 { width: 50%; }
.photocenter60 { width: 60%; text-align: center; }
.photocenter80 { width: 80%; padding: 0.5em; }
.photocenter90 { width: 90%; padding: 0.5em; }
.photocenter100 { width: 100%; padding: 0.5em; }

.photowidth90L {
    display: block;
    margin-left: auto;
    padding-bottom: 2rem;
}

.photowidth90C {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-bottom: 5rem;
}

.photowidth80C {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    padding: 0.5em;
}

.photowidth60C {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    padding: 0.5em;
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

.chap,
.chap-rule,
.intro {
    page-break-before: always;
}

div.gray-shaded {
     background-color: #e5e5e5;
    padding: 0.5em 0.5em 0.1em 1em;
}

.h {
    font-weight: bold;
    color: #2980B9;
}


.NUMN {
    margin-left: 2rem;
}

.NUMINDENT {
    margin-left: 4rem;
}

.NUMNOINDENT {
    margin-left: 0;
}

.v {
    color: brown;
}

/* ========================================================================
   FOOTNOTES
   ======================================================================== */


div.footpara p, div.footpara li {
    font-family: Georgia, serif;
}

sup:has(a.footref),
sup:has(a.footnum) {
    background-color: #fcfcfc;
    font-size: .7em;
    vertical-align: baseline;
    position: relative;
    top: -0.5em;      /* raises it visually; tweak -0.4em to -0.6em to taste */
    line-height: 0;   /* belt-and-suspenders: zeroes its own contribution */
}

div.footpara, 
div.footpara p:first-of-type {
    display: inline;
}

div.footpara p {
    color: #444;
}

div.footpara div.alt p {
    margin: 0;
}

div.footdef {
    margin: 1.5rem 0 0 0;
}

.footref {
    text-decoration: underline;
}

.footnum::before, .footref::before {
    content: "[fn.";
}

.footnum::after, .footref::after {
    content: "]";
}

.footref {
    margin-left: 0;
    padding: 1px;
}

/* ========================================================================
   MOBILE MENU TOGGLE BUTTON
   ======================================================================== */

/* Hamburger menu button — always visible, fixed top-left */
#menu-toggle {
    display: block;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 3000;
    background: #2980B9;
    color: white;
    border: none;
    padding: 0.55rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#menu-toggle:hover {
    background: #1e6a9e;
}

#menu-toggle:active {
    transform: scale(0.95);
}

/* ========================================================================
   FIXED "NOT LEGAL ADVICE" NOTICE — top, centered over the content column
   ======================================================================== */

#nla-notice {
    position: fixed;
    top: 0.6rem;
    /* left (and the centering transform) are set by lighthouse-all.js, which keeps the notice
       centered over the content column */
    z-index: 3000;
    background: var(--Cornsilk);
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 0.3rem 0.65rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.78rem;
    line-height: 1.3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    white-space: nowrap;   
    text-align: center;
    /* Hidden until JS positions it, to avoid a flash at wrong location */
    visibility: hidden;
}

#nla-notice a {
    color: #2980B9;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
}

#nla-notice a:hover {
    text-decoration: underline;
}

/* Overlay for mobile menu */
#sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    opacity: 0;
    transition: opacity 0.3s;
}

#sidebar-overlay.show {
    display: block;
    opacity: 1;
}

/* ========================================================================
   RESPONSIVE DESIGN - Tablet/Desktop
   ======================================================================== */

@media (max-width: 1200px) {
    body {
        max-width: 700px;
        padding: 30px 30px 30px 60px;
    }
}

/* ========================================================================
   RESPONSIVE DESIGN - Mobile/Phone
   ======================================================================== */

@media (max-width: 900px) {
    /* Main content takes full width on mobile */
    body {
        margin-left: 0;
        padding: 1rem 1rem 1rem 60px;
        max-width: 100%;
        font-size: 18px;
    }

    /* NLA notice: hide on very small screens where it would overlap content */
    #nla-notice {
        display: none;
    }
    
    /* Make headings slightly smaller on mobile */
    h1 {
        font-size: 1.3em;
    }
    
    h2 {
        font-size: 1.3em;
        margin: 2em 0 0.5em 0;
    }
    
    h3 {
        font-size: 1.15em;
    }


    /* Adjust Protocol/Option boxes for mobile */
    div.cl5 h3,
    div.cl7 div.outline-text-3,
    div.cl7 div.outline-text-4,
    div.optn-txt div.outline-text-4,
    div.optn-txt.outline-5 div.outline-text-5 {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0; /* Extend to edges on mobile */
    }
    
    /* Make images responsive */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Float images stack on mobile */
    .photo-at-right,
    .photo-left,
    .photo-lighthouse,
    .cc {
        float: none;
        display: block;
        margin: 1rem auto;
        max-width: 80%;
    }
    
    /* Lists with better mobile spacing */
    ol, ul {
        padding-left: 1.5rem;
    }
    
    /* (No mobile override for .cmtry/.cmt margin-left any more: the base rule's negative margin,
       matching the parent box's own padding, is what makes the Comment's white background reach
       the parent's edge, and that holds at every screen width — overriding it here would let the
       blue show through again on narrow screens.) */

    div.bord,
    .bbox,
    div.alt,
    .bordered {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    body {
        font-size: 16px;
        padding: 0.75rem;
    }
    
    #lighthouse-toc {
        width: 85%; /* Wider sidebar on very small screens */
        max-width: 300px;
    }
    
    h2 {
        font-size: 1.2em;
    }
    
    .hlt {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }
}

/* ========================================================================
   PRINT/PDF STYLES - Optimized to prevent excessive page count
   ======================================================================== */

@media print {
    /* Critical: Set proper page size and margins */
    @page {
        size: letter; /* or A4 */
        margin: 0.75in 0.75in 1in 0.75in; /* top, right, bottom, left */
    }
    
    /* Hide navigation elements */
    #lighthouse-toc,
    #outline-container-toc-chap,
    .hlt,
    #menu-toggle,
    #nla-notice,
    #sidebar-overlay,
    #global-notes-toggle {
        display: none !important;
    }
    
    /* Reset body for print */
    body {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        font-size: 12pt !important; /* Smaller font for print efficiency */
        line-height: 1.5 !important; /* Tighter line spacing */
        border: none !important;
        background: white !important;
    }
    
    /* Optimize content wrapper */
    #content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Reduce heading sizes for print */
    h1 {
        font-size: 16pt !important;
        margin: 12pt 0 6pt 0 !important;
        page-break-after: avoid;
    }
    
    h2 {
        font-size: 14pt !important;
        margin: 12pt 0 6pt 0 !important;
        page-break-after: avoid;
    }
    
    h2::before {
        content: ""; /* Remove "Chapter" prefix in print */
    }
    
    h3 {
        font-size: 12pt !important;
        margin: 10pt 0 4pt 0 !important;
        page-break-after: avoid;
    }
    
    h4, h5, h6 {
        font-size: 11pt !important;
        margin: 8pt 0 4pt 0 !important;
        page-break-after: avoid;
    }
    
    /* Optimize paragraph spacing */
    p {
        margin: 0 0 6pt 0 !important;
        font-size: 11pt !important;
        orphans: 3;
        widows: 3;
    }
    
    /* Compact lists */
    ul, ol {
        margin: 6pt 0 !important;
    }
    
    li {
        margin-bottom: 3pt !important;
        font-size: 11pt !important;
    }
    
    /* Protocol/Option boxes - compact but preserve styling */
    div.cl5 h3,
    div.cl7 div.outline-text-3,
    div.cl7 div.outline-text-4 {
        background-color: #e6f1ff !important;
        padding: 6pt 8pt !important;
        margin: 8pt 0 !important;
        font-size: 10pt !important;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
.optn-txt {
        background-color: #e1e1e1 !important;
        padding: 6pt 8pt !important;
        margin: 8pt 0 !important;
        font-size: 10pt !important;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* Smart page breaks */
    h2 {
        page-break-before: auto; /* Don't force new page for every chapter */
    }
    
    h3, h4, h5, h6 {
        page-break-before: avoid;
        page-break-after: avoid;
    }
    
    /* Only break before explicitly marked chapters */
    .chap,
    .chap-rule,
    .intro {
        page-break-before: always;
    }
    
    /* Avoid breaking inside these elements */
    blockquote,
    div.bord,
    .bbox,
    div.alt,
    .bordered,
    cite,
    aside,
    div.footdef {
        page-break-inside: avoid;
    }
    
    /* Commentary sections - smaller font (print strips backgrounds anyway, via the "*" rule
       below, so the screen-only white-over-blue overlap margins are simply reset here) */
    .cmtry, .cmt,
    div.cmtry, div.cmt {
        font-size: 9pt !important;
        margin: 6pt 0 6pt 12pt !important;
    }
    
    /* Images - prevent page breaks and size appropriately */
    img {
        max-width: 4in !important;
        max-height: 3in !important;
        page-break-inside: avoid;
    }
    
    /* Hide decorative images in print */
    .photo-lighthouse,
    .photo-lighthouse-nocd,
    .photo-logo,
    .photo-up,
    .cc {
        display: none !important; /* Hide decorative images */
    }
    
    /* Keep content images but size them appropriately */
    .photo-at-right,
    .photo-left {
        display: block;
        float: none;
        margin: 6pt auto;
        max-width: 3in;
    }
    
    /* Footnotes - compact */
    div.footpara {
        font-size: 9pt !important;
    }
    
    div.footdef {
        margin: 4pt 0 !important;
    }
    
    /* Links - show URLs in print */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        font-style: italic;
    }
    
    /* Don't show URLs for internal links */
    a[href^="#"]::after {
        content: "";
    }
    
    /* Ensure proper text rendering */
    * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }
    
    
    div.cl5 h3,
    div.cl7 div.outline-text-3,
    div.cl7 div.outline-text-4,
    div.optn-txt div.outline-text-4,
    div.optn-txt.outline-5 div.outline-text-5 {
        background: inherit !important; /* This preserves the blue/gray we set above */
    }
}


/* Hamburger TOC disclosure controls: keep triangle attached to its heading. */
#lighthouse-toc-inner li > .toc-toggle {
    display: inline-block;
    width: 1em;
    margin-right: 0.25em;
    vertical-align: baseline;
    cursor: pointer;
}

#lighthouse-toc-inner li > .toc-toggle + a {
    display: inline;
    padding-left: 0;
}

#lighthouse-toc-inner li > ul {
    padding-left: 1.5rem;
}


/* Hamburger TOC collapse state. */
#lighthouse-toc-inner ul.toc-collapsed {
    display: none;
}

/* Look of the drawer's expand/collapse triangles (folded in from toc-collapse.css; its other
   rules targeted #text-table-of-contents, which the script no longer collapses). */
.toc-toggle {
    text-align: center;
    font-size: 0.75em;
    color: #2980B9;
    user-select: none;
    -webkit-user-select: none;
}

.toc-toggle:hover {
    color: var(--dk-green);
}

.toc-toggle:focus {
    outline: 2px solid #2980B9;
    border-radius: 2px;
}

/* ========================================================================
   CLAUSE TOOLS  (used by Part 2 of diamond-lane.js; kept last so it wins ties)
   "Add to Addendum" buttons, the Addendum panel, and the "Clauses only" / "Create record copy"
   toolbar. Colors fall back to a neutral blue; set --lh-blue / --lh-blue-fill on :root to match
   the site palette.
   ======================================================================== */

.copy-rule-btn,
.copy-rule-add {
  margin-left: .7em;
  padding: .1em .6em;
  font: inherit;
  font-size: .6em;
  font-weight: normal;
  line-height: 1.5;
  vertical-align: middle;
  color: var(--lh-blue, #1f4e8c);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: .3em;
  cursor: pointer;
  opacity: .8;
}
.copy-rule-btn:hover,
.copy-rule-btn:focus-visible,
.copy-rule-add:hover,
.copy-rule-add:focus-visible { opacity: 1; background: var(--lh-blue-fill, #e8f0fb); }
/* Label lives in CSS, not the DOM, so it adds no hits to browser find-in-page. */
.copy-rule-btn::before { content: "Copy Clause"; }
.copy-rule-btn[data-state="copied"]::before { content: "Copied \2713"; }
.copy-rule-btn[data-state="error"]::before  { content: "Copy failed"; }
.copy-rule-add { margin-left: .4em; }
.copy-rule-add::before { content: "Add to Addendum"; }
.copy-rule-add[aria-pressed="true"]::before { content: "Added \2713"; }

/* Chapter-level "add every Clause in this chapter" button (div.chap.addn only) */
.cr-chapter-add {
  margin-left: .5em;
  padding: .1em .6em;
  font: inherit;
  font-size: .6em;
  font-weight: normal;
  line-height: 1.5;
  vertical-align: middle;
  color: var(--lh-blue, #1f4e8c);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: .3em;
  cursor: pointer;
  opacity: .8;
}
.cr-chapter-add:hover,
.cr-chapter-add:focus-visible { opacity: 1; background: var(--lh-blue-fill, #e8f0fb); }
.cr-chapter-add::before { content: "Add Chapter to Addendum"; }
.cr-chapter-add[aria-pressed="true"]::before { content: "Chapter Added \2713"; }

/* "Show Clauses Only" / "Create record copy w/ all Clauses" — standalone, not tied to the
   Addendum list/panel below. The two buttons share one bar, "Clauses Only" on the left. */
.cr-fulldoc-bar { margin: .6em 0 1em; display: flex; flex-wrap: wrap; gap: .5em; }
.cr-fulldoc-btn,
.cr-clauses-only-btn {
  padding: .25em .8em; font: inherit; font-size: .9em; cursor: pointer;
  color: var(--lh-blue, #1f4e8c); background: transparent;
  border: 1px solid currentColor; border-radius: .3em;
}
.cr-fulldoc-btn:hover, .cr-fulldoc-btn:focus-visible,
.cr-clauses-only-btn:hover, .cr-clauses-only-btn:focus-visible { background: var(--lh-blue-fill, #e8f0fb); }
.cr-clauses-only-btn[aria-pressed="true"] { background: var(--lh-blue-fill, #e8f0fb); font-weight: 600; }

/* Addendum list panel */
.cr-panel {
  position: fixed; right: 1em; bottom: 1em; z-index: 1000;
  width: 22em; max-width: calc(100vw - 2em); max-height: 60vh; overflow: auto;
  padding: .6em .8em;
  font: 14px/1.35 system-ui, sans-serif;
  color: #111; background: #fff;
  border: 1px solid var(--lh-blue, #1f4e8c); border-radius: .5em;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.cr-panel[hidden] { display: none; }
.cr-panel-head { font-weight: 600; margin-bottom: .3em; }
.cr-panel-list { margin: 0 0 .6em; padding-left: 1.4em; }
.cr-panel-list li { margin: .25em 0; }
.cr-panel-ctl { white-space: nowrap; margin-left: .4em; }
.cr-panel button {
  font: inherit; padding: 0 .45em; cursor: pointer;
  color: var(--lh-blue, #1f4e8c); background: transparent;
  border: 1px solid currentColor; border-radius: .3em;
}
.cr-panel button:hover:not(:disabled), .cr-panel button:focus-visible { background: var(--lh-blue-fill, #e8f0fb); }
.cr-panel button:disabled { opacity: .35; cursor: default; }
.cr-panel-ctl button { margin-left: .2em; }
.cr-panel-actions { display: flex; flex-wrap: wrap; gap: .4em; }
.cr-panel-actions button { padding: .2em .7em; }
.cr-panel-msg { margin: .5em 0 0; }
.cr-panel-msg:empty { display: none; }
@media print {
  .copy-rule-btn, .copy-rule-add, .cr-chapter-add, .cr-fulldoc-bar, .cr-panel { display: none; }
}