/* One look per trade page, on brand: written by scripts/build-trade-theme.py (edit that, then rerun).
   Pages set <body data-trade="..."> and mark their sections tp-hero, tp-monday, tp-tracks and tp-steps. */

/* Hero: the trade's own line drawing behind the words, right of center. */
.tp-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-repeat: no-repeat, repeat;
  background-position: right -30px center, 0 0; background-size: auto 72%, auto; opacity: .85; }
/* On a phone the drawing would run through the words, so only its grid stays. */
@media (max-width: 1023px) { .tp-hero::before { background-size: 0 0, auto; opacity: .8; } }

/* The trade bar: one card at the foot of the hero, three lines in the trade's words, each with its icon.
   It holds still (the owner did not like the scrolling band it replaced). */
.tp-bar { position: relative; z-index: 2; margin-top: -2.75rem; padding: 0 1.5rem; background: linear-gradient(transparent 2.75rem, #f3eee8 2.75rem); }
.tp-bar ul { list-style: none; max-width: 77rem; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #ffffff;
  border-radius: 1rem; box-shadow: 0 18px 40px rgba(26,26,46,.18), 0 2px 6px rgba(26,26,46,.08); border-top: 4px solid #F37021; overflow: hidden; }
.tp-bar li { display: flex; align-items: center; gap: .9rem; padding: 1.25rem 1.5rem; color: #1A1A2E; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.tp-bar li + li { border-left: 1px solid #ece6df; }
.tp-bar .ic { flex: none; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(243,112,33,.12); color: #F37021; }
.tp-bar .ic svg, .tp-bar .ic i { width: 22px; height: 22px; }
@media (max-width: 767px) {
  .tp-bar { margin-top: -1.75rem; padding: 0 1rem; background: linear-gradient(transparent 1.75rem, #f3eee8 1.75rem); }
  .tp-bar ul { grid-template-columns: 1fr; }
  .tp-bar li { padding: .95rem 1.1rem; font-size: .98rem; }
  .tp-bar li + li { border-left: 0; border-top: 1px solid #ece6df; }
}
.tp-monday .grid > div, .tp-tracks .grid > div, .tp-steps .grid > div { position: relative; }
[data-trade="pipe"] .tp-hero::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='460' viewBox='0 0 640 460'%3E%0A%3Cg fill='none' stroke='%23F37021' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='.55'%3E%0A%3Cpath d='M60 380 L250 270 L250 150 L460 30'/%3E%3Cpath d='M250 270 L430 374 L600 276'/%3E%0A%3C/g%3E%0A%3Cg fill='none' stroke='%23F9BE96' stroke-width='2' stroke-opacity='.45'%3E%0A%3Cpath d='M44 371 l32 18M234 279 l32 -18M444 22 l32 18M586 268 l28 16'/%3E%0A%3Cpath d='M60 420 L250 310' stroke-dasharray='6 6'/%3E%3Cpath d='M60 410 v20M250 300 v20'/%3E%0A%3C/g%3E%0A%3Cg fill='%23F37021' fill-opacity='.8'%3E%3Ccircle cx='155' cy='325' r='6'/%3E%3Ccircle cx='250' cy='210' r='6'/%3E%3Ccircle cx='355' cy='90' r='6'/%3E%3Ccircle cx='340' cy='322' r='6'/%3E%3Ccircle cx='515' cy='325' r='6'/%3E%3C/g%3E%0A%3Cg font-family='DM Sans,Arial' font-size='15' font-weight='700' fill='%23F9BE96' fill-opacity='.6'%3E%3Ctext x='120' y='300'%3EW-01%3C/text%3E%3Ctext x='262' y='204'%3EW-02%3C/text%3E%3Ctext x='366' y='84'%3EW-03%3C/text%3E%3Ctext x='122' y='452'%3E4'-6 3/8%26quot%3B%3C/text%3E%3C/g%3E%0A%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='30' viewBox='0 0 52 30'%3E%3Cpath d='M0 30L52 0M0 0L52 30' stroke='%23F9BE96' stroke-opacity='.07' fill='none'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) { [data-trade="pipe"] .tp-hero::before { background-size: auto 72%, 52px 30px; } }
@media (max-width: 1023px) { [data-trade="pipe"] .tp-hero::before { background-size: 0 0, 52px 30px; } }
[data-trade="sheet"] .tp-hero::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='460' viewBox='0 0 640 460'%3E%0A%3Crect x='40' y='30' width='580' height='400' rx='4' fill='none' stroke='%23F9BE96' stroke-opacity='.35' stroke-width='2'/%3E%0A%3Cg fill='none' stroke='%23F37021' stroke-opacity='.6' stroke-width='2.5' stroke-dasharray='9 6'%3E%0A%3Crect x='70' y='60' width='170' height='120'/%3E%3Crect x='260' y='60' width='120' height='120'/%3E%0A%3Cpath d='M400 60 h190 v60 a130 130 0 0 0 -130 130 h-60 z'/%3E%0A%3Ccircle cx='150' cy='300' r='80'/%3E%3Crect x='260' y='200' width='100' height='200'/%3E%0A%3Cpath d='M380 270 h90 l120 60 v80 h-210 z'/%3E%0A%3C/g%3E%0A%3Cg font-family='DM Sans,Arial' font-size='14' font-weight='700' fill='%23F9BE96' fill-opacity='.6'%3E%3Ctext x='82' y='82'%3EF-12%3C/text%3E%3Ctext x='272' y='82'%3EF-13%3C/text%3E%3Ctext x='470' y='92'%3EELBOW%3C/text%3E%3Ctext x='122' y='305'%3EF-14%3C/text%3E%3Ctext x='392' y='392'%3ETRANSITION%3C/text%3E%3C/g%3E%0A%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='1.3' fill='%23F9BE96' fill-opacity='.10'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) { [data-trade="sheet"] .tp-hero::before { background-size: auto 72%, 16px 16px; } }
@media (max-width: 1023px) { [data-trade="sheet"] .tp-hero::before { background-size: 0 0, 16px 16px; } }
[data-trade="elec"] .tp-hero::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='460' viewBox='0 0 640 460'%3E%0A%3Crect x='60' y='40' width='560' height='22' rx='3' fill='none' stroke='%23F9BE96' stroke-opacity='.4' stroke-width='2'/%3E%0A%3Cg fill='%23F9BE96' fill-opacity='.4'%3E%3Crect x='90' y='47' width='18' height='8' rx='4'/%3E%3Crect x='170' y='47' width='18' height='8' rx='4'/%3E%3Crect x='250' y='47' width='18' height='8' rx='4'/%3E%3Crect x='330' y='47' width='18' height='8' rx='4'/%3E%3Crect x='410' y='47' width='18' height='8' rx='4'/%3E%3Crect x='490' y='47' width='18' height='8' rx='4'/%3E%3Crect x='570' y='47' width='18' height='8' rx='4'/%3E%3C/g%3E%0A%3Cg fill='none' stroke='%23F37021' stroke-opacity='.6' stroke-width='5' stroke-linecap='round'%3E%0A%3Cpath d='M120 62 V260 Q120 320 180 320 H620'/%3E%3Cpath d='M150 62 V250 Q150 290 190 290 H620'/%3E%0A%3Cpath d='M180 62 V240 Q180 260 200 260 H620'/%3E%0A%3C/g%3E%0A%3Cg fill='none' stroke='%23F9BE96' stroke-opacity='.45' stroke-width='4' stroke-linecap='round'%3E%0A%3Cpath d='M300 62 V150 Q300 190 340 190 H620'/%3E%3Cpath d='M330 62 V140 Q330 160 350 160 H620'/%3E%0A%3C/g%3E%0A%3Cg font-family='DM Sans,Arial' font-size='14' font-weight='700' fill='%23F9BE96' fill-opacity='.6'%3E%3Ctext x='470' y='312'%3ELP-2 / 14%3C/text%3E%3Ctext x='470' y='282'%3ELP-2 / 16%3C/text%3E%3Ctext x='470' y='182'%3EHP-1 / 3%3C/text%3E%3C/g%3E%0A%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='17' y='4' width='6' height='14' rx='3' fill='%23F9BE96' fill-opacity='.06'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) { [data-trade="elec"] .tp-hero::before { background-size: auto 72%, 40px 40px; } }
@media (max-width: 1023px) { [data-trade="elec"] .tp-hero::before { background-size: 0 0, 40px 40px; } }
[data-trade="fire"] .tp-hero::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='460' viewBox='0 0 640 460'%3E%0A%3Cpath d='M30 70 H620' stroke='%23F37021' stroke-opacity='.6' stroke-width='9' stroke-linecap='round'/%3E%0A%3Cg stroke='%23F9BE96' stroke-opacity='.45' stroke-width='3' stroke-linecap='round'%3E%0A%3Cpath d='M110 70 V420M220 70 V420M330 70 V420M440 70 V420M550 70 V420'/%3E%0A%3C/g%3E%0A%3Cg fill='none' stroke='%23F37021' stroke-opacity='.75' stroke-width='3'%3E%0A%3Ccircle cx='110' cy='150' r='9'/%3E%3Ccircle cx='110' cy='250' r='9'/%3E%3Ccircle cx='110' cy='350' r='9'/%3E%0A%3Ccircle cx='220' cy='150' r='9'/%3E%3Ccircle cx='220' cy='250' r='9'/%3E%3Ccircle cx='220' cy='350' r='9'/%3E%0A%3Ccircle cx='330' cy='150' r='9'/%3E%3Ccircle cx='330' cy='250' r='9'/%3E%3Ccircle cx='330' cy='350' r='9'/%3E%0A%3Ccircle cx='440' cy='150' r='9'/%3E%3Ccircle cx='440' cy='250' r='9'/%3E%3Ccircle cx='440' cy='350' r='9'/%3E%0A%3Ccircle cx='550' cy='150' r='9'/%3E%3Ccircle cx='550' cy='250' r='9'/%3E%3Ccircle cx='550' cy='350' r='9'/%3E%0A%3C/g%3E%0A%3Crect x='60' y='110' width='310' height='290' rx='6' fill='none' stroke='%23F9BE96' stroke-opacity='.4' stroke-width='2' stroke-dasharray='10 8'/%3E%0A%3Cg font-family='DM Sans,Arial' font-size='14' font-weight='700' fill='%23F9BE96' fill-opacity='.6'%3E%3Ctext x='72' y='132'%3EFLOOR 4 %C2%B7 ZONE 2%3C/text%3E%3Ctext x='470' y='58'%3EMAIN%3C/text%3E%3C/g%3E%0A%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='1.6' fill='%23F9BE96' fill-opacity='.10'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) { [data-trade="fire"] .tp-hero::before { background-size: auto 72%, 36px 36px; } }
@media (max-width: 1023px) { [data-trade="fire"] .tp-hero::before { background-size: 0 0, 36px 36px; } }
[data-trade="steel"] .tp-hero::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='460' viewBox='0 0 640 460'%3E%0A%3Cg fill='none' stroke='%23F37021' stroke-opacity='.6' stroke-width='3' stroke-linejoin='round'%3E%0A%3Cpath d='M90 150 H600 V270 H40 V200 H90 Z'/%3E%0A%3C/g%3E%0A%3Cg stroke='%23F9BE96' stroke-opacity='.45' stroke-width='2'%3E%3Cpath d='M90 166 H600M40 254 H600'/%3E%3C/g%3E%0A%3Cg fill='none' stroke='%23F37021' stroke-opacity='.75' stroke-width='2.5'%3E%0A%3Ccircle cx='70' cy='225' r='6'/%3E%3Ccircle cx='70' cy='245' r='6'/%3E%3Ccircle cx='110' cy='190' r='6'/%3E%3Ccircle cx='110' cy='230' r='6'/%3E%0A%3Ccircle cx='560' cy='190' r='6'/%3E%3Ccircle cx='580' cy='190' r='6'/%3E%3Ccircle cx='560' cy='230' r='6'/%3E%3Ccircle cx='580' cy='230' r='6'/%3E%0A%3C/g%3E%0A%3Cg stroke='%23F9BE96' stroke-opacity='.45' stroke-width='2' fill='none'%3E%3Cpath d='M40 320 H600' stroke-dasharray='6 6'/%3E%3Cpath d='M40 308 v24M600 308 v24'/%3E%3C/g%3E%0A%3Crect x='250' y='190' width='120' height='40' rx='4' fill='none' stroke='%23F9BE96' stroke-opacity='.5' stroke-width='2'/%3E%0A%3Cg font-family='DM Sans,Arial' font-size='16' font-weight='700' fill='%23F9BE96' fill-opacity='.65'%3E%3Ctext x='274' y='216'%3EB-104%3C/text%3E%3Ctext x='270' y='352'%3E24'-6 1/2%26quot%3B%3C/text%3E%3Ctext x='470' y='130'%3EW12x26%3C/text%3E%3C/g%3E%0A%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='2.2' fill='none' stroke='%23F9BE96' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) { [data-trade="steel"] .tp-hero::before { background-size: auto 72%, 44px 44px; } }
@media (max-width: 1023px) { [data-trade="steel"] .tp-hero::before { background-size: 0 0, 44px 44px; } }
[data-trade="mech"] .tp-hero::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='460' viewBox='0 0 640 460'%3E%0A%3Crect x='40' y='40' width='580' height='380' fill='none' stroke='%23F9BE96' stroke-opacity='.4' stroke-width='2.5'/%3E%0A%3Cpath d='M40 80 H620M40 380 H620' stroke='%23F37021' stroke-opacity='.45' stroke-width='2' stroke-dasharray='14 8'/%3E%0A%3Cpath d='M233 80 V380M427 80 V380' stroke='%23F9BE96' stroke-opacity='.35' stroke-width='2'/%3E%0A%3Cg fill='none' stroke='%23F37021' stroke-opacity='.55' stroke-width='2.5'%3E%0A%3Crect x='70' y='120' width='130' height='40'/%3E%3Crect x='70' y='190' width='130' height='40'/%3E%3Crect x='70' y='300' width='60' height='50'/%3E%0A%3Crect x='265' y='120' width='130' height='40'/%3E%3Ccircle cx='330' cy='280' r='40'/%3E%0A%3Crect x='460' y='120' width='130' height='90'/%3E%3Crect x='460' y='250' width='130' height='40'/%3E%0A%3C/g%3E%0A%3Cg font-family='DM Sans,Arial' font-size='15' font-weight='700' fill='%23F9BE96' fill-opacity='.6'%3E%3Ctext x='70' y='108'%3EBAY 1 %C2%B7 PIPE%3C/text%3E%3Ctext x='265' y='108'%3EBAY 2 %C2%B7 PLUMBING%3C/text%3E%3Ctext x='460' y='108'%3EBAY 3 %C2%B7 DUCT%3C/text%3E%3C/g%3E%0A%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M0 0V50' stroke='%23F9BE96' stroke-opacity='.06'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) { [data-trade="mech"] .tp-hero::before { background-size: auto 72%, 50px 50px; } }
@media (max-width: 1023px) { [data-trade="mech"] .tp-hero::before { background-size: 0 0, 50px 50px; } }
[data-trade="gc"] .tp-hero::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='460' viewBox='0 0 640 460'%3E%0A%3Cg stroke='%23F9BE96' stroke-opacity='.14' stroke-width='1.5'%3E%3Cpath d='M90 30V430M190 30V430M290 30V430M390 30V430M490 30V430M590 30V430'/%3E%3C/g%3E%0A%3Cg fill='%23F37021'%3E%3Crect x='90' y='60' width='190' height='26' rx='13' fill-opacity='.6'/%3E%3Crect x='170' y='120' width='230' height='26' rx='13' fill-opacity='.45'/%3E%3Crect x='280' y='180' width='170' height='26' rx='13' fill-opacity='.6'/%3E%3Crect x='360' y='240' width='210' height='26' rx='13' fill-opacity='.45'/%3E%3Crect x='450' y='300' width='150' height='26' rx='13' fill-opacity='.6'/%3E%3C/g%3E%0A%3Cg fill='none' stroke='%23F9BE96' stroke-opacity='.5' stroke-width='2'%3E%3Cpath d='M280 86 v20 h-110 v14'/%3E%3Cpath d='M400 146 v20 h-120 v14'/%3E%3Cpath d='M450 206 v20 h-90 v14'/%3E%3Cpath d='M570 266 v20 h-120 v14'/%3E%3C/g%3E%0A%3Cg font-family='DM Sans,Arial' font-size='14' font-weight='700' fill='%23F9BE96' fill-opacity='.6'%3E%3Ctext x='30' y='79'%3ESTEEL%3C/text%3E%3Ctext x='30' y='139'%3EMECH%3C/text%3E%3Ctext x='30' y='199'%3EELEC%3C/text%3E%3Ctext x='30' y='259'%3EFIRE%3C/text%3E%3Ctext x='30' y='319'%3EFINISH%3C/text%3E%3C/g%3E%0A%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M0 0V50' stroke='%23F9BE96' stroke-opacity='.06'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) { [data-trade="gc"] .tp-hero::before { background-size: auto 72%, 50px 50px; } }
@media (max-width: 1023px) { [data-trade="gc"] .tp-hero::before { background-size: 0 0, 50px 50px; } }

/* ===== PIPE: the ISO and the traveler ===== */
[data-trade="pipe"] .tp-monday .grid > div { border-radius: 8px; padding-top: 0; overflow: hidden; }
[data-trade="pipe"] .tp-monday .grid > div::before { content: "TRAVELER"; display: block; margin: 0 -1.75rem 1.4rem; padding: .55rem 1.75rem;
  background: #1A1A2E; color: #F9BE96; font-weight: 700; font-size: .7rem; letter-spacing: 2.5px; }
[data-trade="pipe"] .tp-monday .grid > div::after { content: ""; position: absolute; top: .55rem; right: 1rem; width: 16px; height: 16px; border-radius: 999px; background: #f3eee8; box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
[data-trade="pipe"] .tp-monday .grid > div > div:first-child { border-radius: 999px; }
[data-trade="pipe"] .tp-tracks { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='30' viewBox='0 0 52 30'%3E%3Cpath d='M0 30L52 0M0 0L52 30' stroke='%23F9BE96' stroke-opacity='.07' fill='none'/%3E%3C/svg%3E") !important; background-size: 52px 30px !important; }
[data-trade="pipe"] .tp-tracks .grid > div { border-left: 3px solid rgba(243,112,33,.55); padding-left: 1.1rem; }
[data-trade="pipe"] .tp-tracks .grid > div > div:first-child { border-radius: 999px; box-shadow: 0 0 0 2px rgba(243,112,33,.4); }
[data-trade="pipe"] .tp-steps .grid > div { background: transparent; border: 0; box-shadow: none; padding: 0 .5rem 0 0; }
[data-trade="pipe"] .tp-steps .grid > div > p:first-child { width: 52px; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #F37021; color: #1A1A2E !important; font-size: .95rem; letter-spacing: 0; box-shadow: 0 0 0 6px #fdf8f3, 0 0 0 8px rgba(243,112,33,.35); position: relative; z-index: 1; margin-bottom: 1.2rem; }
@media (min-width: 1024px) {
  [data-trade="pipe"] .tp-steps .grid { position: relative; }
  [data-trade="pipe"] .tp-steps .grid::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 14px; border-radius: 7px;
    background: linear-gradient(180deg, #0f0f1c, #2D2D44 30%, #55557a 50%, #2D2D44 70%, #1A1A2E); }
}

/* ===== SHEET METAL: the nest and the fitting ticket ===== */
[data-trade="sheet"] .tp-monday .grid > div { border-radius: 4px; border-left: 8px solid #F37021; }
[data-trade="sheet"] .tp-monday .grid > div::before { content: ""; position: absolute; top: -5px; left: 0; right: 0; height: 10px;
  background: radial-gradient(circle, #f3eee8 4px, transparent 4.5px) 4px 0/16px 10px repeat-x; }
[data-trade="sheet"] .tp-monday .grid > div::after { content: "FITTING TICKET"; position: absolute; top: 1.1rem; right: 1.1rem; font-size: .62rem; font-weight: 700; letter-spacing: 2px; color: #737373; }
[data-trade="sheet"] .tp-monday .grid > div > div:first-child { border-radius: 3px; }
[data-trade="sheet"] .tp-tracks { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='1.3' fill='%23F9BE96' fill-opacity='.10'/%3E%3C/svg%3E") !important; background-size: 16px 16px !important; }
[data-trade="sheet"] .tp-tracks .grid { row-gap: 1.25rem !important; }
[data-trade="sheet"] .tp-tracks .grid > div { background: #2D2D44; padding: 1.3rem; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
[data-trade="sheet"] .tp-tracks .grid > div > div:first-child { border-radius: 3px; }
[data-trade="sheet"] .tp-steps .grid > div { background: #1A1A2E; border: 0; border-radius: 4px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
[data-trade="sheet"] .tp-steps .grid > div::after { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: linear-gradient(225deg, transparent 50%, #F37021 50%); }
[data-trade="sheet"] .tp-steps .grid > div h3 { color: #ffffff !important; }
[data-trade="sheet"] .tp-steps .grid > div > p:last-child { color: #c9c9d6 !important; }
[data-trade="sheet"] .tp-steps .grid > div > p:first-child::before { content: "STEP "; }

/* ===== ELECTRICAL: the rack, the wire label and the panel schedule ===== */
[data-trade="elec"] .tp-monday .grid { counter-reset: ckt 12; }
[data-trade="elec"] .tp-monday .grid > div { counter-increment: ckt 2; border: 2px solid #1A1A2E; border-radius: 10px;
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(26,26,46,.06) 27px 28px), #ffffff; }
[data-trade="elec"] .tp-monday .grid > div::after { content: "CKT " counter(ckt); position: absolute; top: 1rem; right: 1rem; background: #F37021; color: #1A1A2E;
  font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; padding: .25rem .6rem; border-radius: 999px; }
[data-trade="elec"] .tp-tracks { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='17' y='4' width='6' height='14' rx='3' fill='%23F9BE96' fill-opacity='.06'/%3E%3C/svg%3E") !important; background-size: 40px 40px !important; }
[data-trade="elec"] .tp-tracks .grid > div { border-bottom: 2px solid rgba(249,190,150,.16); padding-bottom: 1.3rem; }
[data-trade="elec"] .tp-tracks .grid > div::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: #F37021; }
[data-trade="elec"] .tp-tracks .grid > div > div:first-child { border-radius: 999px; background: #F37021 !important; }
[data-trade="elec"] .tp-tracks .grid > div > div:first-child i, [data-trade="elec"] .tp-tracks .grid > div > div:first-child svg { color: #ffffff !important; }
[data-trade="elec"] .tp-steps .grid > div { background: transparent; border: 0; box-shadow: none; border-left: 6px solid #F37021; border-top: 6px solid #F37021;
  border-top-left-radius: 28px; padding: 1.4rem 1rem .5rem 1.4rem; }

/* ===== FIRE PROTECTION: the zone and the inspection tag ===== */
[data-trade="fire"] .tp-monday .grid > div { border-radius: 6px 6px 14px 14px; padding-top: 2.6rem;
  clip-path: polygon(16% 0, 84% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); background: linear-gradient(#F37021 0 10px, #ffffff 10px); }
[data-trade="fire"] .tp-monday .grid > div::before { content: ""; position: absolute; top: 18px; left: 50%; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 999px; background: #f3eee8; border: 3px solid #F37021; }
[data-trade="fire"] .tp-monday .grid > div > div:first-child { border-radius: 999px; }
[data-trade="fire"] .tp-tracks { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='1.6' fill='%23F9BE96' fill-opacity='.10'/%3E%3C/svg%3E") !important; background-size: 36px 36px !important; }
[data-trade="fire"] .tp-tracks .grid { counter-reset: zone; row-gap: 2.2rem !important; }
[data-trade="fire"] .tp-tracks .grid > div { counter-increment: zone; border: 2px dashed rgba(249,190,150,.4); border-radius: 12px; padding: 1.5rem 1.2rem 1.2rem; }
[data-trade="fire"] .tp-tracks .grid > div::before { content: "ZONE " counter(zone); position: absolute; top: -.7rem; left: 1rem; background: #1A1A2E; color: #F9BE96;
  padding: 0 .55rem; font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; }
[data-trade="fire"] .tp-tracks .grid > div > div:first-child { border-radius: 999px; }
[data-trade="fire"] .tp-steps .grid > div { background: #ffffff; border: 2px dashed rgba(243,112,33,.45); box-shadow: none; }
[data-trade="fire"] .tp-steps .grid > div > p:first-child { width: 46px; height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  border: 4px solid #F37021; color: #1A1A2E !important; letter-spacing: 0; font-size: .9rem; }

/* ===== MECHANICAL: the bays of one shop ===== */
[data-trade="mech"] .tp-monday .grid { counter-reset: wo 4110; }
[data-trade="mech"] .tp-monday .grid > div { counter-increment: wo 7; border-radius: 6px; border-top: 6px solid #1A1A2E; }
[data-trade="mech"] .tp-monday .grid > div::after { content: "WO " counter(wo); position: absolute; top: 1.1rem; right: 1.1rem; font-size: .65rem; font-weight: 700; letter-spacing: 2px; color: #737373; }
[data-trade="mech"] .tp-monday .grid > div > div:first-child { border-radius: 4px; }
[data-trade="mech"] .tp-tracks { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M0 0V50' stroke='%23F9BE96' stroke-opacity='.06'/%3E%3C/svg%3E") !important; background-size: 50px 50px !important; }
[data-trade="mech"] .tp-tracks .grid { counter-reset: bay; row-gap: 2.4rem !important; }
[data-trade="mech"] .tp-tracks .grid > div { counter-increment: bay; border: 2px solid rgba(249,190,150,.22); border-radius: 4px; padding: 1.6rem 1.2rem 1.2rem; }
[data-trade="mech"] .tp-tracks .grid > div::before { content: "BAY " counter(bay); position: absolute; top: -.9rem; left: 1rem; background: #F37021; color: #1A1A2E;
  padding: .2rem .7rem; font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; border-radius: 4px; }
[data-trade="mech"] .tp-steps .grid > div { background: #ffffff; border-radius: 4px; border: 0; border-top: 8px solid transparent;
  border-image: repeating-linear-gradient(45deg, #F37021 0 10px, #1A1A2E 10px 20px) 8; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ===== STRUCTURAL STEEL: the beam, the piece mark and the connection plate ===== */
[data-trade="steel"] .tp-monday .grid { counter-reset: pm 100; }
[data-trade="steel"] .tp-monday .grid > div { counter-increment: pm; border-radius: 3px; border: 0; border-top: 10px solid #1A1A2E; border-bottom: 10px solid #1A1A2E; }
[data-trade="steel"] .tp-monday .grid > div::after { content: "B-" counter(pm); position: absolute; top: 1.1rem; right: 1.1rem; color: #F37021;
  font-weight: 700; font-style: italic; font-size: 1.05rem; letter-spacing: 1px; transform: rotate(-4deg); }
[data-trade="steel"] .tp-monday .grid > div > div:first-child { border-radius: 3px; }
[data-trade="steel"] .tp-tracks { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='2.2' fill='none' stroke='%23F9BE96' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E") !important; background-size: 44px 44px !important; }
[data-trade="steel"] .tp-tracks .grid { row-gap: 1.25rem !important; }
[data-trade="steel"] .tp-tracks .grid > div { background:
  radial-gradient(circle at 14px 14px, #1A1A2E 4px, transparent 5px), radial-gradient(circle at calc(100% - 14px) 14px, #1A1A2E 4px, transparent 5px),
  radial-gradient(circle at 14px calc(100% - 14px), #1A1A2E 4px, transparent 5px), radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #1A1A2E 4px, transparent 5px), #2D2D44;
  border-radius: 4px; padding: 1.6rem 1.5rem; }
[data-trade="steel"] .tp-tracks .grid > div > div:first-child { border-radius: 3px; }
[data-trade="steel"] .tp-steps .grid > div { background: #ffffff; border: 0; border-radius: 0; border-top: 8px solid #F37021; border-bottom: 8px solid #F37021; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ===== GC SELF-PERFORM: the schedule and the daily report ===== */
[data-trade="gc"] .tp-monday .grid > div { border-radius: 10px; padding-top: 2.4rem; border: 1px solid #e5ded6;
  background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(115,115,115,.08) 25px 26px) 0 64px/100% calc(100% - 64px) no-repeat, #ffffff; }
[data-trade="gc"] .tp-monday .grid > div::before { content: ""; position: absolute; top: -9px; left: 50%; width: 76px; height: 20px; margin-left: -38px;
  border-radius: 6px; background: #1A1A2E; box-shadow: inset 0 -4px 0 #2D2D44; }
[data-trade="gc"] .tp-monday .grid > div::after { content: "DAILY REPORT"; position: absolute; top: 1.1rem; right: 1.1rem; font-size: .62rem; font-weight: 700; letter-spacing: 2px; color: #737373; }
[data-trade="gc"] .tp-tracks { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M0 0V50' stroke='%23F9BE96' stroke-opacity='.06'/%3E%3C/svg%3E") !important; background-size: 50px 50px !important; }
[data-trade="gc"] .tp-tracks .grid > div { padding-top: 1.1rem; }
[data-trade="gc"] .tp-tracks .grid > div::before { content: ""; position: absolute; top: 0; left: 0; height: 7px; border-radius: 4px; background: #F37021; width: 55%; }
[data-trade="gc"] .tp-tracks .grid > div:nth-child(2)::before { left: 15%; width: 60%; background: #F9BE96; }
[data-trade="gc"] .tp-tracks .grid > div:nth-child(3)::before { left: 30%; width: 50%; }
[data-trade="gc"] .tp-tracks .grid > div:nth-child(4)::before { left: 5%; width: 70%; background: #F9BE96; }
[data-trade="gc"] .tp-tracks .grid > div:nth-child(5)::before { left: 25%; width: 45%; }
[data-trade="gc"] .tp-tracks .grid > div:nth-child(6)::before { left: 40%; width: 55%; background: #F9BE96; }
[data-trade="gc"] .tp-steps .grid > div { border-radius: 10px; padding-top: 2rem; }
[data-trade="gc"] .tp-steps .grid > div::before { content: ""; position: absolute; top: .9rem; height: 10px; border-radius: 5px; background: #F37021; left: 1.5rem; width: 40%; }
[data-trade="gc"] .tp-steps .grid > div:nth-child(2)::before { left: 30%; }
[data-trade="gc"] .tp-steps .grid > div:nth-child(3)::before { left: 45%; background: #F9BE96; }
[data-trade="gc"] .tp-steps .grid > div:nth-child(4)::before { left: 55%; }
@media (min-width: 1024px) {
  [data-trade="gc"] .tp-steps .grid > div:nth-child(2) { margin-top: 1.5rem; }
  [data-trade="gc"] .tp-steps .grid > div:nth-child(3) { margin-top: 3rem; }
  [data-trade="gc"] .tp-steps .grid > div:nth-child(4) { margin-top: 4.5rem; }
}