/* ═══════════════════════════════════════════════════════════════
   J2 Systems — concept design system
   Plumbline Studio · July 2026
   Color numbers below are J2's real PET felt range (34 standard colors).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

:root{
  /* surfaces */
  --deep:#1E3A4A; --deep-2:#27495C;
  --paper:#FBFCFD; --warm:#F2F7FA; --sage:#F3F6F3; --card:#FFFFFF;
  --ink:#171A1B; --ink2:#666666; --ink3:#8C9296;
  --rule:#DEE5EA; --hair:#ECF1F4;
  /* accents */
  --accent:#5BB5E6; --accent-ink:#2E7195; --accent-lt:#EAF5FC;
  --teal:#6FA83E; --teal-lt:#F0F7E8; --teal-ink:#4A7527;
  --green-bright:#8CC757; /* J2 Systems Green, canonical — corporate.color.green in brand/brand.json (lineage: Given) */
  --clay:#A63D2F; --clay-lt:#FBEDEA;
  /* type */
  --sans:'Jost','Century Gothic','Avant Garde',system-ui,sans-serif;
  --serif:'Jost','Century Gothic','Avant Garde',system-ui,sans-serif;
  --sh:0 1px 2px rgba(23,26,27,.04),0 8px 24px -12px rgba(23,26,27,.10);
  --sh-lg:0 2px 4px rgba(23,26,27,.05),0 20px 44px -20px rgba(23,26,27,.20);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.5;
     -webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── image slots: always look designed, even if a remote image fails ── */
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,#E7E2D6,#D6DAD4 45%,#C9CFCB);isolation:isolate}
.ph::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.20) 0 2px,transparent 2px 5px)}
.ph img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
.ph img[data-failed]{display:none}
.ph .cap{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;font-size:12.5px;
  background:linear-gradient(transparent,rgba(16,22,24,.72))}
.ph.dark{background:linear-gradient(135deg,#2A3538,#1E3A4A)}

/* ── chrome ── */
header.site{background:var(--deep);color:#fff;position:sticky;top:0;z-index:40}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.hrow{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand .mark{font-weight:700;font-size:18px;letter-spacing:.16em}
.brand .mark span{color:var(--accent)}
.brand img{height:30px;width:auto}
.hdiv{width:1px;height:26px;background:rgba(255,255,255,.16);flex:none}
.hctx{font-size:11.5px;color:#9FC2D6;line-height:1.35;flex:none}
.hctx b{display:block;color:#fff;font-weight:600;font-size:12.5px}

/* search */
.search{flex:1;max-width:400px;position:relative;margin:0 auto}
.search input{width:100%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;padding:9px 13px 9px 36px;color:#fff;font:inherit;font-size:13.5px}
.search input::placeholder{color:#8E9F9D}
.search input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.14)}
.search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8E9F9D;font-size:13px}

.huser{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:13px;color:#C6D2D0;flex:none}
.av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--deep);
    display:grid;place-items:center;font-size:11.5px;font-weight:700}
nav.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
.tab{color:#9FC2D6;padding:11px 15px 13px;font-size:13.5px;font-weight:500;
  border-bottom:2.5px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:7px}
.tab:hover{color:#fff}
.tab.on{color:#fff;border-bottom-color:var(--accent);font-weight:600}

.notice{background:var(--accent-lt);border-bottom:1px solid #EEDFBC;color:#6E5417;
  font-size:12.5px;padding:9px 26px;text-align:center}
.notice b{font-weight:600}

main{max-width:1180px;margin:0 auto;padding:32px 26px 80px}
.view{display:none;animation:fade .28s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── type ── */
h1{font-family:var(--serif);font-weight:300;font-size:32px;letter-spacing:-.012em;line-height:1.14}
h2{font-family:var(--serif);font-weight:300;font-size:24px;letter-spacing:-.008em}
h3{font-size:13.5px;font-weight:700}
.lede{color:var(--ink2);font-size:14px;margin-top:8px;max-width:660px}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink)}
.hint{font-size:12px;color:var(--ink3);margin-top:3px}
.sect{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:34px 0 15px}
.sect h2{font-size:20px}

/* ── atoms ── */
.card{background:var(--card);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--sh)}
.pad{padding:20px 22px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:30px;white-space:nowrap}
.p-prod{background:var(--teal-lt);color:var(--teal-ink)}
.p-hold{background:#FBF1DC;color:#7E5F14}
.p-done{background:var(--teal-lt);color:var(--teal-ink)}
.p-need{background:var(--clay-lt);color:#8C3325}
/* at risk — amber/clay, never green. A slipping job must never read as healthy. */
.p-risk{background:#F9E4D6;color:#8F4413}
.p-new{background:#EDEEF6;color:#414A78}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.btn{border:1.5px solid var(--teal);color:var(--teal);border-radius:9px;padding:7px 14px;
  font-size:12.5px;font-weight:600;transition:.14s;flex:none}
.btn:hover{background:var(--teal);color:#fff}
.btn.done{background:var(--teal-lt);border-color:var(--teal);color:var(--teal-ink)}
.btn.done:hover{background:var(--teal-lt);color:var(--teal-ink)}
.btn.ghost{border-color:var(--rule);color:var(--ink2)}
.btn.ghost:hover{background:var(--warm);color:var(--ink)}
.seg{display:inline-flex;border:1.5px solid var(--rule);border-radius:9px;overflow:hidden;flex:none}
.seg button{padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.seg button.on{background:var(--deep);color:#fff}

.row{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--hair)}
.row:first-of-type{border-top:none;padding-top:2px}
.row .g{flex:1;min-width:0}
.row .t{font-size:13.5px;font-weight:500}
.row .s{font-size:12px;color:var(--ink3);margin-top:2px}
.grp{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
  margin:18px 0 2px;padding-top:14px;border-top:1px solid var(--hair)}
.grp:first-of-type{margin-top:8px;padding-top:0;border-top:none}
.grp span{color:var(--ink3);font-weight:600;letter-spacing:.06em;margin-left:6px;text-transform:none;font-size:10.5px}
.grp + .row{border-top:none;padding-top:8px}
.note{margin-top:15px;font-size:12.5px;border-radius:10px;padding:12px 14px;
  background:var(--teal-lt);color:var(--teal-ink);line-height:1.5}
.note.ready{background:var(--teal-lt);color:var(--teal-ink);font-weight:600}
.note.warm{background:var(--warm);color:#6E5417}

/* ── J2 felt color swatches (real range) ── */
.sw{display:inline-flex;align-items:center;gap:9px;font-size:12.5px}
.sw i{width:22px;height:22px;border-radius:6px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sw b{font-weight:600}.sw em{font-style:normal;color:var(--ink3);font-variant-numeric:tabular-nums}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatches .chip{display:flex;align-items:center;gap:7px;border:1px solid var(--rule);border-radius:30px;
  padding:4px 11px 4px 5px;font-size:11.5px;background:#fff}
.swatches .chip i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.swatches .chip.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-lt)}

/* felt range */
.f194{background:#1C1C1A}.f176{background:#3F4245}.f172{background:#55595C}.f179{background:#8C9094}
.f174{background:#6E7479}.f171{background:#9BA0A3}.f177{background:#B9BDBE}.f170{background:#D2D5D4}
.f193{background:#F2F1EC}.f113{background:#E8E1CE}.f111{background:#C3B393}.f119{background:#A78A63}
.f112{background:#C9A227}.f117{background:#E8C33C}.f121{background:#C2622A}.f136{background:#9B4A2F}
.f137{background:#8E3B33}.f131{background:#B5322F}.f231{background:#C43A2B}.f135{background:#E2A184}
.f147{background:#5B3A52}.f151{background:#3F5A7A}.f152{background:#2C4C86}.f157{background:#2E3A55}
.f150{background:#35657E}.f154{background:#6E9BC4}.f252{background:#4A8FC0}.f158{background:#A9C4D6}
.f164{background:#5FA9A8}.f160{background:#3E9B94}.f162{background:#4A6B4A}.f167{background:#6E9455}
.f161{background:#A8BC86}.f169{background:#8FBFA6}

/* ── spec table ── */
.spec{width:100%;border-collapse:collapse}
.spec td{padding:11px 0;border-top:1px solid var(--hair);font-size:13px;color:var(--ink2);vertical-align:top}
.spec tr:first-child td{border-top:none}
.spec td:first-child{color:var(--ink3);font-size:12.5px;width:42%}
.spec td:last-child{text-align:right;font-weight:600;color:var(--ink)}

/* ── docs & photos ── */
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.file{border:1px solid var(--rule);border-radius:11px;overflow:hidden;background:#fff;transition:.14s}
.file:hover{border-color:var(--accent);box-shadow:var(--sh)}
.file .ph{aspect-ratio:4/3}
.file .m{padding:9px 11px}
.file .n{font-size:12px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .d{font-size:11px;color:var(--ink3);margin-top:2px}
.doc{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--hair)}
.doc:first-of-type{border-top:none}
.doc .ic{width:34px;height:38px;border-radius:5px;background:var(--warm);border:1px solid var(--rule);
  display:grid;place-items:center;font-size:9px;font-weight:700;color:var(--accent-ink);flex:none}
.doc .g{flex:1;min-width:0}
.doc .n{font-size:13px;font-weight:500}
.doc .d{font-size:11.5px;color:var(--ink3);margin-top:1px}
.drop{border:1.5px dashed var(--rule);border-radius:11px;padding:20px;text-align:center;
  color:var(--ink3);font-size:12.5px;background:var(--paper);margin-top:12px}
.drop b{display:block;color:var(--ink2);font-size:13px;font-weight:600;margin-bottom:3px}

/* ── messages ── */
.thread{display:flex;flex-direction:column;gap:13px;margin-bottom:16px}
.msg{display:flex;gap:11px}
.msg .ava{width:31px;height:31px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;background:var(--deep);color:#fff}
.msg.you .ava{background:var(--warm);color:var(--accent-ink);border:1px solid var(--rule)}
.msg .bub{flex:1;background:var(--sage);border-radius:3px 12px 12px 12px;padding:11px 14px}
.msg.you .bub{background:var(--warm);border-radius:12px 3px 12px 12px}
.msg .who{font-size:11.5px;font-weight:700;margin-bottom:3px}
.msg .who span{font-weight:400;color:var(--ink3);margin-left:7px}
.msg p{font-size:13px;color:var(--ink2);line-height:1.55}
.compose{display:flex;gap:9px;border-top:1px solid var(--hair);padding-top:15px}
.compose input{flex:1;border:1.5px solid var(--rule);border-radius:9px;padding:10px 13px;
  font:inherit;font-size:13px;background:var(--paper)}
.compose input:focus{outline:none;border-color:var(--accent)}
.send{background:var(--accent-ink);color:#fff;border-radius:9px;padding:10px 17px;font-size:13px;font-weight:600}
.via{font-size:11px;color:var(--ink3);margin-top:11px}

/* ── tables ── */
.tw{overflow-x:auto;border-radius:13px}
table.ops{width:100%;border-collapse:collapse;min-width:900px;font-size:12.5px}
table.ops th{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);text-align:left;
  padding:14px 12px;border-bottom:1.5px solid var(--rule);white-space:nowrap;font-weight:700;background:var(--paper)}
table.ops td{padding:14px 12px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink2);white-space:nowrap}
table.ops tr:last-child td{border-bottom:none}
table.ops tbody tr:hover{background:var(--paper)}
table.ops td .s2{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px;white-space:normal}
.flag{display:inline-block;font-size:10.5px;font-weight:600;background:var(--clay-lt);color:#8C3325;
  border-radius:7px;padding:3px 8px;margin:2px 3px 2px 0}
.flag.ok{background:var(--teal-lt);color:var(--teal-ink)}
.legend{font-size:12px;color:var(--ink3);padding:14px 22px 4px;line-height:1.5}

/* ── tiles ── */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:var(--card);border:1px solid var(--rule);border-radius:13px;padding:17px 19px;box-shadow:var(--sh)}
.tile .k{font-size:11.5px;color:var(--ink3);font-weight:500}
.tile .v{font-family:var(--serif);font-size:34px;line-height:1.1;margin:5px 0 2px}
.tile .d{font-size:11.5px;color:var(--ink2)}
.tile.a .v{color:var(--clay)}.tile.w .v{color:#2E7195}.tile.g .v{color:var(--teal)}

footer.foot{max-width:1180px;margin:0 auto;padding:26px;border-top:1px solid var(--hair);
  font-size:12px;color:var(--ink3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:900px){
  .tiles{grid-template-columns:1fr 1fr}
  main{padding:24px 18px 60px}.wrap{padding:0 18px}
  h1{font-size:26px}
  .search{max-width:none;order:5;flex-basis:100%;margin:0 0 12px}
  .hrow{flex-wrap:wrap;height:auto;padding:14px 0 0}
}
@media(max-width:700px){
  .hctx,.huser span{display:none}
  .brand .mark{font-size:16px}
}


/* real felt swatch photos layer over the hex fallback (path is relative to this stylesheet) */
.f194,.f176,.f172,.f179,.f174,.f171,.f177,.f170,.f193,.f113,.f111,.f119,.f112,.f117,.f121,.f136,.f137,.f131,.f231,.f135,.f147,.f151,.f152,.f157,.f150,.f154,.f252,.f158,.f164,.f160,.f162,.f167,.f161,.f169{background-size:cover;background-position:center;background-repeat:no-repeat}
.f194{background-image:url(swatch/194.jpg)}
.f176{background-image:url(swatch/176.jpg)}
.f172{background-image:url(swatch/172.jpg)}
.f179{background-image:url(swatch/179.jpg)}
.f174{background-image:url(swatch/174.jpg)}
.f171{background-image:url(swatch/171.jpg)}
.f177{background-image:url(swatch/177.jpg)}
.f170{background-image:url(swatch/170.jpg)}
.f193{background-image:url(swatch/193.jpg)}
.f113{background-image:url(swatch/113.jpg)}
.f111{background-image:url(swatch/111.jpg)}
.f119{background-image:url(swatch/119.jpg)}
.f112{background-image:url(swatch/112.jpg)}
.f117{background-image:url(swatch/117.jpg)}
.f121{background-image:url(swatch/121.jpg)}
.f136{background-image:url(swatch/136.jpg)}
.f137{background-image:url(swatch/137.jpg)}
.f131{background-image:url(swatch/131.jpg)}
.f231{background-image:url(swatch/231.jpg)}
.f135{background-image:url(swatch/135.jpg)}
.f147{background-image:url(swatch/147.jpg)}
.f151{background-image:url(swatch/151.jpg)}
.f152{background-image:url(swatch/152.jpg)}
.f157{background-image:url(swatch/157.jpg)}
.f150{background-image:url(swatch/150.jpg)}
.f154{background-image:url(swatch/154.jpg)}
.f252{background-image:url(swatch/252.jpg)}
.f158{background-image:url(swatch/158.jpg)}
.f164{background-image:url(swatch/164.jpg)}
.f160{background-image:url(swatch/160.jpg)}
.f162{background-image:url(swatch/162.jpg)}
.f167{background-image:url(swatch/167.jpg)}
.f161{background-image:url(swatch/161.jpg)}
.f169{background-image:url(swatch/169.jpg)}