/* GovRoute: the banknote layer (T1449; Boss 10-19 "govroute ui and style direction, us dollar design, our current colors").
   The language of US paper money in GovRoute's own palette: engraved hairlines, guilloche borders and rosettes, framed panels with corner
   ornaments, the seal set the way a note sets its seals, a serial, a formal serif with small capitals, denomination numerals.
   Rules of this file:
   - D tokens only (static/d/system.css). No colour literal anywhere in it, and no green: the money look is line, texture and type.
   - Red stays the one primary action and the brand dot. Line work is ink (--ink-3) at partial strength; prices stay ink, never gold.
   - The cards keep the one card surface (background, border, radius untouched); frames and rosettes are pseudo-elements behind content.
   - Faces already self-hosted and named in the colophon: Fraunces (display, numerals, small capitals) and Instrument Sans (text).
   - Header and footer rules reach every page on _d_page.html. Page rules run only under html.note (the state home, the bid page,
     /pricing, /about), set by {% block html_class %} in those four templates.
   - Line work is CSS masks of /static/d/note/*.svg (stroke-only, under 30 KB each) painted in a token, so dark mode and the navy band
     recolour it. Inside @supports: a browser without mask-composite gets the type and the rules, never a filled box.
   - Nothing moves, nothing loads from outside, no script. */

:root{
  --note-line:var(--ink-3);        /* engraved line work */
  --note-rule:var(--rule-2);       /* the double rules */
  --note-face:var(--display);      /* the formal serif */
  --note-lw:.5;                    /* line-work strength */
  --note-band:url(/static/d/note/band.svg?v=e13cb3bb);
  --note-rosette:url(/static/d/note/rosette.svg?v=2d0787de);
  --note-c-tl:url(/static/d/note/corner-tl.svg?v=de139a4d);
  --note-c-tr:url(/static/d/note/corner-tr.svg?v=49a7e65a);
  --note-c-bl:url(/static/d/note/corner-bl.svg?v=91c91851);
  --note-c-br:url(/static/d/note/corner-br.svg?v=48cbdc96);
  --note-solid:linear-gradient(var(--ink),var(--ink));   /* an opaque mask layer (a mask reads alpha only) */
  --note-hatch-a:repeating-linear-gradient(45deg,var(--ink) 0 .8px,transparent .8px 3.2px);    /* engraved cross-hatching, one way */
  --note-hatch-b:repeating-linear-gradient(-45deg,var(--ink) 0 .8px,transparent .8px 3.2px);   /* and the other */
}

/* ---------- the shared header (every D page) ---------- */
.d .dateline{font-family:var(--note-face);font-size:14px;letter-spacing:.05em;font-variant-caps:small-caps;font-synthesis:small-caps;border-bottom:0}
.d .dateline b{font-weight:600}
.d .top{border-bottom:3px double var(--note-rule)}

/* ---------- the shared footer (every D page) ---------- */
.d .foot{position:relative;border-top:0;padding-top:56px}
.d .foot .colophon{border-top:3px double var(--note-rule);font-variant-caps:small-caps;font-synthesis:small-caps;letter-spacing:.03em}
.d .gr-seal{--seal:104px;position:relative;isolation:isolate;margin-top:34px;gap:28px}
.d .gr-seal img{position:relative}
@media (max-width:639px){
  .d .foot .gr-seal{--seal:96px;margin-top:22px;gap:24px}
}

/* ---------- page type (html.note) ---------- */
html.note .label{font-family:var(--note-face);font-size:14px;line-height:18px;font-weight:560;font-stretch:100%;letter-spacing:.07em;text-transform:none;
  font-variant-caps:small-caps;font-synthesis:small-caps;font-feature-settings:"kern"}
html.note main .section{border-top:3px double var(--rule)}
html.note .g-art h2{font-family:var(--note-face);font-weight:500;letter-spacing:-.01em}

/* denomination numerals: counts, prices, the deadline and a card's day, in the display serif */
html.note :is(.state-count .digits,.price-line .pr,.tp-col .pp .v,.stub .amt .v,.act-panel .price .v,.dl-left .v,.dl-due .v,.card .due .d){
  font-family:var(--note-face);font-weight:600;font-synthesis:none;font-variant-numeric:lining-nums;letter-spacing:-.012em}
html.note .card .due .m{font-family:var(--note-face);font-weight:600;letter-spacing:.1em}
/* a price's dollar sign sits small and high, as on a note's corner numeral */
html.note :is(.price-line .pr,.tp-col .pp .v,.stub .amt .v,.act-panel .price .v){display:inline-block}
html.note :is(.price-line .pr,.tp-col .pp .v,.stub .amt .v,.act-panel .price .v)::first-letter{font-size:.5em;vertical-align:.8em;margin-right:.05em;font-weight:500}
/* the plan names, as a note names its denomination */
html.note .tp-col .pn{font-variant-caps:small-caps;font-synthesis:small-caps;letter-spacing:.05em}
html.note .tp-table thead tr{border-bottom:3px double var(--note-rule)}

/* the serial: the bid number, in the same muted line (Q-14), set as a note's serial */
html.note .bid-topline .serial{color:inherit;font-weight:500;font-variant-numeric:tabular-nums lining-nums slashed-zero;
  font-feature-settings:"tnum","zero";letter-spacing:.06em;white-space:nowrap}

/* ---------- the note panels: the money panel on /pricing and on the bid page ---------- */
html.note :is(.tp-pkg,.act-panel.bid-package){isolation:isolate}
html.note .tp-pkg{padding:34px 34px 44px}
html.note .act-panel.bid-package{padding:32px 30px}
@media (max-width:639px){
  html.note .tp-pkg{padding:32px 26px 40px}
  html.note .act-panel.bid-package{padding:30px 24px}
}

@supports (mask-composite:intersect) and (mask-image:none){
  /* footer: a guilloche border across the top, and the seal over a rosette */
  .d .foot::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;pointer-events:none;background:var(--note-line);opacity:var(--note-lw);
    mask:var(--note-band) 0 0/24px 7px repeat-x}
  .d .gr-seal::before{content:"";position:absolute;z-index:-1;pointer-events:none;
    left:calc(var(--seal) * -.18);top:calc(var(--seal) * -.18);width:calc(var(--seal) * 1.36);height:calc(var(--seal) * 1.36);
    background:var(--note-line);opacity:.42;mask:var(--note-rosette) 50% 50%/contain no-repeat}

  /* the state home's hero ends on a guilloche border instead of a plain rule */
  html.note .sthero{position:relative}
  html.note .sthero+.section{border-top:0}
  html.note .sthero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;background:var(--note-line);
    opacity:var(--note-lw);mask:var(--note-band) 0 0/24px 7px repeat-x}

  /* the note frame: guilloche top and bottom between four corner rosettes; down each side two hairlines with engraved cross-hatching
     between them. Layers, top to bottom: 4 corners, 4 side rules, 4 hatch strips (add), the middle stripe (intersect: cuts the two
     bands between the corners), 2 bands. */
  html.note :is(.tp-pkg,.act-panel.bid-package)::before{content:"";position:absolute;inset:7px;z-index:-1;pointer-events:none;
    background:var(--note-line);opacity:var(--note-lw);
    mask:
      var(--note-c-tl) 0 0/22px 22px no-repeat,
      var(--note-c-tr) 100% 0/22px 22px no-repeat,
      var(--note-c-bl) 0 100%/22px 22px no-repeat,
      var(--note-c-br) 100% 100%/22px 22px no-repeat,
      var(--note-solid) 0 50%/1px calc(100% - 44px) no-repeat,
      var(--note-solid) 6px 50%/1px calc(100% - 44px) no-repeat,
      var(--note-solid) 100% 50%/1px calc(100% - 44px) no-repeat,
      var(--note-solid) calc(100% - 6px) 50%/1px calc(100% - 44px) no-repeat,
      var(--note-hatch-a) 1px 50%/5px calc(100% - 44px) no-repeat,
      var(--note-hatch-b) 1px 50%/5px calc(100% - 44px) no-repeat,
      var(--note-hatch-a) calc(100% - 1px) 50%/5px calc(100% - 44px) no-repeat,
      var(--note-hatch-b) calc(100% - 1px) 50%/5px calc(100% - 44px) no-repeat,
      var(--note-solid) 50% 0/calc(100% - 44px) 100% no-repeat,
      var(--note-band) 0 100%/24px 7px repeat-x,
      var(--note-band) 0 0/24px 7px repeat-x;
    mask-composite:add,add,add,add,add,add,add,add,add,add,add,add,intersect,add,add}
  /* the stub's torn foot keeps its perforation: the frame stops above it */
  html.note .tp-pkg::before{inset:7px 7px 15px}

  /* /pricing: the seal on the money panel, over its own rosette, top right, as a note carries its seal */
  html.note .tp-pkg{background-image:url(/static/brand/seal-main-288.png?v=1);background-repeat:no-repeat;background-size:58px 58px;
    background-position:right 30px top 30px}
  html.note .tp-pkg .tp-pkg-h,html.note .tp-pkg>.label{padding-right:78px}

  /* /about: the navy band carries a large faint rosette, engraved into it */
  html.note .g-next{position:relative;isolation:isolate;overflow:hidden}
  html.note .g-next::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:560px;height:560px;left:-170px;top:50%;margin-top:-280px;
    background:var(--note-line);opacity:.16;mask:var(--note-rosette) 50% 50%/contain no-repeat}
}

/* the seal's dark twin (cream keyline) where the page is dark, as the footer does */
@supports (mask-composite:intersect) and (mask-image:none){
  :root.note[data-theme=dark] .tp-pkg{background-image:url(/static/brand/seal-main-dark-288.png?v=1)}
  @media (prefers-color-scheme:dark){
    :root.note:not([data-theme=light]) .tp-pkg{background-image:url(/static/brand/seal-main-dark-288.png?v=1)}
  }
}