/* ==========================================================================
   ANDY AI PTY LTD  /  jobsheet.css
   Light paper surface, flat, no rounded corners, no shadow, no monospace.
   Faustina carries the display, Asap carries the running text.
   One accent: a deep bottle green.

   Component state is carried on aria-* attributes. The navigation collapse is
   driven entirely by aria-expanded on a button that only exists once the
   script has run, so a page with no script keeps every link on screen. The two
   data-* attributes in this file are animation bookkeeping rather than state a
   user agent needs to know about, and nothing is hidden unless both are set.
   ========================================================================== */

:root{
  --paper:#F6F5F0;
  --paper-lift:#FFFFFF;
  --paper-deep:#ECEAE2;
  --ink:#1A1D1A;
  --ink-dim:#4E544E;
  --ink-faint:#676D66;
  --rule:#DCD9CF;
  --rule-strong:#C3BFB2;
  --bottle:#1F5E3D;
  --bottle-deep:#16452D;
  --bottle-wash:#E7EFE9;
  --display:Faustina,Georgia,"Times New Roman",serif;
  --text:Asap,"Helvetica Neue",Arial,sans-serif;
  --bay-wide:72rem;
  --bay-narrow:44rem;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background-color:#F6F5F0;
  color:var(--ink);
  font-family:var(--text);
  font-size:1rem;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-0.006em;
  margin:0;
  color:var(--ink);
}

p,ul,ol,dl,dd,figure,blockquote{margin:0}
li{margin:0}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}
img{max-width:100%;height:auto;display:block}

a{color:var(--bottle);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--bottle-deep);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--bottle);outline-offset:3px}

table{border-collapse:collapse;border-spacing:0}

/* ------------------------------------------------------------ scaffold -- */

.skip-lead{
  position:absolute;left:-9999px;top:0;z-index:40;
  background:var(--bottle);color:#FFFFFF;
  padding:0.65rem 1.1rem;font-weight:600;font-size:0.82rem;
  letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;
}
.skip-lead:focus{left:0}

.bay{
  width:100%;
  max-width:var(--bay-wide);
  margin:0 auto;
  padding-left:1.7rem;
  padding-right:1.7rem;
}
.bay-read{max-width:var(--bay-narrow);margin-left:auto;margin-right:auto}

/* -------------------------------------------------------------- header -- */

.tool-rail{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:30;
}
.tool-rail-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
  min-height:4rem;
  position:relative;
}
.tool-mark{
  display:inline-flex;align-items:baseline;gap:0.34rem;
  text-decoration:none;color:var(--ink);
}
.tool-mark:hover{text-decoration:none;color:var(--ink)}
.tool-mark-word{
  font-family:var(--display);font-size:1.5rem;font-weight:600;
  letter-spacing:-0.015em;line-height:1;
}
.tool-mark-dot{
  display:inline-block;width:0.42rem;height:0.42rem;
  background:var(--bottle);flex:none;
}
.tool-nav{display:block}
.tool-nav-list{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;flex-wrap:wrap;gap:0.4rem 1.7rem;
}
.tool-nav-link{
  color:var(--ink-dim);text-decoration:none;
  font-size:0.78rem;font-weight:600;
  letter-spacing:0.11em;text-transform:uppercase;
  padding:0.35rem 0;
  border-bottom:2px solid transparent;
}
.tool-nav-link:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--rule-strong)}
.tool-nav-link[aria-current="page"]{color:var(--bottle);border-bottom-color:var(--bottle)}

/* The toggle is inserted by docket.js. Without the script it never exists,
   the rules below never match, and the list stays visible at every width. */
.tool-toggle{
  display:none;
  width:2.6rem;height:2.6rem;
  align-items:center;justify-content:center;
  flex-direction:column;gap:0.3rem;
  background:transparent;border:1px solid var(--rule-strong);
  padding:0;cursor:pointer;
}
.tool-toggle-bar{display:block;width:1.15rem;height:1px;background:var(--ink)}

/* ---------------------------------------------------------------- hero -- */

.tailgate{
  border-bottom:1px solid var(--rule);
  padding-top:4.6rem;padding-bottom:3.8rem;
  text-align:center;
}
.tailgate-inner{max-width:48rem;margin:0 auto}
.tally{
  font-size:0.72rem;font-weight:600;letter-spacing:0.19em;
  text-transform:uppercase;color:var(--bottle);
  margin-bottom:1.25rem;
}
.tailgate-title{
  font-size:clamp(2.3rem,5.6vw,3.85rem);
  line-height:1.04;
  letter-spacing:-0.018em;
  margin-bottom:1.5rem;
}
.tailgate-line{
  font-size:1.15rem;line-height:1.6;color:var(--ink-dim);
  max-width:40rem;margin-left:auto;margin-right:auto;
}
.tailgate-acts{
  display:flex;justify-content:center;flex-wrap:wrap;gap:0.9rem;
  margin-top:2.2rem;
}
.tailgate-note{
  font-size:0.88rem;color:var(--ink-faint);
  margin-top:1.5rem;
}

.quote-act{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.85rem 1.7rem;
  background:var(--bottle);color:#FFFFFF;
  border:1px solid var(--bottle);
  font-size:0.82rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;text-decoration:none;
}
.quote-act:hover{background:var(--bottle-deep);border-color:var(--bottle-deep);color:#FFFFFF;text-decoration:none}
.quote-act-plain{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.85rem 1.7rem;
  background:transparent;color:var(--ink);
  border:1px solid var(--rule-strong);
  font-size:0.82rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;text-decoration:none;
}
.quote-act-plain:hover{border-color:var(--bottle);color:var(--bottle);text-decoration:none}

/* -------------------------------------------------------------- plates -- */

.plate{
  border:1px solid var(--rule);
  background:var(--paper-lift);
  padding:0.55rem;
}
.plate-wide{margin-top:3rem;margin-bottom:0}
.plate-shot{width:100%}
.plate-note{
  font-size:0.78rem;color:var(--ink-faint);
  letter-spacing:0.04em;
  padding:0.75rem 0.35rem 0.15rem;
}

/* ------------------------------------------------------------ sections -- */

.jobsheet{
  border-bottom:1px solid var(--rule);
  padding-top:3.9rem;padding-bottom:3.9rem;
}
.jobsheet:last-of-type{border-bottom:0}
.jobsheet-lead{max-width:46rem;margin-bottom:2.4rem}
.jobsheet-head{
  font-size:clamp(1.6rem,3.1vw,2.2rem);
  margin-bottom:0.95rem;
  display:flex;gap:0.9rem;align-items:baseline;
}
.jobsheet-no{
  font-family:var(--text);font-weight:600;
  font-size:0.66em;color:var(--bottle);
  letter-spacing:0.03em;flex:none;
  border-bottom:2px solid var(--bottle);
  line-height:1.1;
}
.jobsheet-line{font-size:1.05rem;color:var(--ink-dim);max-width:46rem}
.jobsheet-body{font-size:1rem;max-width:46rem}
.jobsheet-wide .jobsheet-body{max-width:none}
.jobsheet-body>*+*{margin-top:1.15rem}
.jobsheet-body h3{font-size:1.15rem;margin-top:2.4rem}
.jobsheet-body h3:first-child{margin-top:0}
.jobsheet-body p{color:var(--ink-dim)}
.jobsheet-body ul,.jobsheet-body ol{padding-left:1.3rem;color:var(--ink-dim)}
.jobsheet-body li+li{margin-top:0.55rem}
.jobsheet-body ul{list-style:square}
.jobsheet-body ul li::marker{color:var(--bottle)}
.jobsheet-body ol li::marker{color:var(--bottle);font-weight:600}
.jobsheet-body a{color:var(--bottle)}

/* ------------------------------------------------------------- benchtop -- */

.benchtop{border-top:1px solid var(--rule)}
.benchtop-row{
  display:grid;grid-template-columns:15rem minmax(0,1fr);
  gap:1.1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--rule);
}
.benchtop-key{
  font-size:0.72rem;font-weight:600;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--ink-faint);
  padding-top:0.28rem;
}
.benchtop-value{color:var(--ink);font-size:0.98rem}
.benchtop-value a{color:var(--bottle)}

.benchtop-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.benchtop-strip .benchtop-row{
  display:block;
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
  padding:1.25rem 1.4rem;
}
.benchtop-strip .benchtop-key{padding-top:0;margin-bottom:0.5rem}
.benchtop-strip .benchtop-value{
  font-family:var(--display);font-size:1.25rem;line-height:1.22;
}

/* ------------------------------------------------------------- callouts -- */

.callout-slip{
  background:var(--bottle-wash);
  border-left:3px solid var(--bottle);
  padding:1.2rem 1.45rem;
}
.callout-slip>*+*{margin-top:0.8rem}
.callout-slip p{color:var(--ink);font-size:0.97rem}
.callout-slip a{color:var(--bottle-deep)}
.callout-slip-tag{
  display:block;
  font-size:0.7rem;font-weight:600;letter-spacing:0.17em;
  text-transform:uppercase;color:var(--bottle-deep);
  margin-bottom:0.6rem;
}

/* --------------------------------------------------------------- dockets -- */

.docket-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);
  background:var(--paper-lift);
  max-width:100%;
}
.docket-scroll:focus-visible{outline:2px solid var(--bottle);outline-offset:2px}
.docket-table{
  width:100%;
  min-width:42rem;
  font-size:0.9rem;
  text-align:left;
}
.docket-table caption{
  text-align:left;
  padding:0.9rem 1.05rem;
  font-size:0.7rem;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--ink-faint);
  background:var(--paper-deep);
  border-bottom:1px solid var(--rule);
}
.docket-table th,.docket-table td{
  padding:0.82rem 1.05rem;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.docket-table thead th{
  font-size:0.7rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--bottle-deep);
  background:var(--bottle-wash);
  white-space:nowrap;
}
.docket-table tbody th{font-weight:600;color:var(--ink)}
.docket-table td{color:var(--ink-dim)}
.docket-table td:first-child{color:var(--ink);font-weight:600}
.docket-table tbody tr:last-child th,
.docket-table tbody tr:last-child td{border-bottom:0}
.docket:nth-child(even){background:var(--paper)}
.docket-standing{
  color:var(--ink);
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.03em;
  white-space:nowrap;
}

/* --------------------------------------------------- document furniture -- */

.paperwork{
  display:grid;
  grid-template-columns:15rem minmax(0,1fr);
  gap:3.6rem;
  padding-top:3rem;
  padding-bottom:4.5rem;
  align-items:start;
}
.paperwork-sheet{min-width:0}
.tab-index{
  position:sticky;top:5.2rem;
  align-self:start;
  max-height:calc(100vh - 7.5rem);
  overflow-y:auto;
  border-top:2px solid var(--bottle);
  padding-top:1.1rem;
}
.tab-index-head{
  font-size:0.7rem;font-weight:600;letter-spacing:0.17em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:0.9rem;
}
.tab-index-list{
  list-style:decimal;
  margin:0;padding-left:1.5rem;
  font-size:0.84rem;
  color:var(--ink-faint);
}
.tab-index-list li{margin-bottom:0.5rem}
.tab-index-list li::marker{color:var(--ink-faint);font-size:0.76rem}
.tab-index-link{
  color:var(--ink-dim);text-decoration:none;line-height:1.38;
  display:inline-block;
}
.tab-index-link:hover{color:var(--bottle);text-decoration:underline}

.sheet-head{border-bottom:1px solid var(--rule);padding-bottom:2.1rem;margin-bottom:0.6rem}
.sheet-head h1{font-size:clamp(2rem,4.3vw,2.95rem);margin-bottom:1.15rem}
.sheet-line{font-size:1.05rem;color:var(--ink-dim);max-width:46rem}
.sheet-dates{
  display:flex;flex-wrap:wrap;gap:0.55rem 0.7rem;
  margin-top:1.6rem;
}
.sheet-dates span{
  font-size:0.7rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--rule);padding:0.38rem 0.7rem;
}

.paperwork-sheet .jobsheet{padding-top:2.7rem;padding-bottom:2.7rem}
.paperwork-sheet .jobsheet:last-of-type{border-bottom:1px solid var(--rule)}
.paperwork-sheet .jobsheet-head{
  font-size:clamp(1.3rem,2.4vw,1.66rem);
  margin-bottom:1.35rem;
}
.paperwork-sheet .jobsheet-body{max-width:none}
.paperwork-sheet .jobsheet-body table{margin-top:0.35rem}

/* -------------------------------------------------------------- reveals -- */

[data-motion="live"] .hoist{
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.5s ease,transform 0.5s ease;
}
[data-motion="live"] .hoist[data-lifted="yes"]{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-motion="live"] .hoist{opacity:1;transform:none;transition:none}
}

/* --------------------------------------------------------------- footer -- */

.yard-foot{
  background:var(--paper-deep);
  border-top:1px solid var(--rule);
  padding-top:3.3rem;padding-bottom:2.4rem;
}
.yard-foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
  gap:2.5rem;
  padding-bottom:2.4rem;
  border-bottom:1px solid var(--rule-strong);
}
.yard-foot-brand{min-width:0}
.yard-foot-blurb{color:var(--ink-dim);font-size:0.92rem;max-width:34ch;margin-top:0.9rem}
.yard-foot-title{
  font-size:0.7rem;font-weight:600;letter-spacing:0.17em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:0.9rem;
}
.yard-foot-col ul{list-style:none;margin:0;padding:0}
.yard-foot-col li{margin-bottom:0.55rem}
.yard-foot-col a{color:var(--ink-dim);text-decoration:none;font-size:0.93rem}
.yard-foot-col a:hover{color:var(--bottle);text-decoration:underline}
.yard-foot-legal{padding-top:1.9rem}
.yard-foot-legal p{color:var(--ink-faint);font-size:0.84rem;margin-bottom:0.45rem}
.yard-foot-legal a{color:var(--ink-dim)}

/* ----------------------------------------------------------- breakpoints -- */

@media (max-width: 64rem){
  .paperwork{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .tab-index{
    position:static;max-height:none;overflow:visible;
    border:1px solid var(--rule);border-top:2px solid var(--bottle);
    padding:1.2rem 1.4rem;
  }
  .tab-index-list{columns:2;column-gap:2rem}
}

@media (max-width: 52rem){
  .bay{padding-left:1.15rem;padding-right:1.15rem}
  .tool-toggle{display:inline-flex}
  .tool-toggle[aria-expanded="false"]+.tool-nav{display:none}
  .tool-toggle[aria-expanded="true"]+.tool-nav{
    display:block;
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:0.9rem 0 1.4rem;
    z-index:31;
  }
  .tool-nav-list{flex-direction:column;align-items:flex-start;gap:0.9rem}
  .tool-nav-link{font-size:0.86rem}
  .tailgate{padding-top:3.2rem;padding-bottom:2.8rem}
  .jobsheet{padding-top:2.8rem;padding-bottom:2.8rem}
  .benchtop-row{grid-template-columns:minmax(0,1fr);gap:0.3rem}
  .benchtop-key{padding-top:0}
  .yard-foot-grid{grid-template-columns:minmax(0,1fr);gap:1.9rem}
  .tab-index-list{columns:1}
  .jobsheet-head{display:block}
  .jobsheet-no{display:inline-block;margin-right:0.6rem}
}

@media (max-width: 34rem){
  .tailgate-acts{flex-direction:column;align-items:stretch}
  .quote-act,.quote-act-plain{justify-content:center}
}