/* DIPlan overview - shared look for the plain-English project overview.
   Scoped to .dip so it sits inside the hub and the Customer Portal without
   disturbing their own styles. Fonts: Barlow Condensed (display) + IBM Plex
   Sans/Mono, loaded from Google Fonts by the page; falls back gracefully. */
.dip{
  --bg:#EDEFEC; --surface:#FFFFFF; --surface-2:#F5F6F4; --ink:#16202A; --ink-2:#48535F; --ink-3:#747F89;
  --line:#D6DAD6; --line-2:#E6E9E5;
  --accent:#141f36; --accent-ink:#FFFFFF; --accent-soft:#DFE5F0;
  --today:#D99A00; --bar:#A9B6CC; --bar-fill:#141f36;
  --good:#2B7A4B; --good-soft:#DDEFE3; --warn:#9A6400; --warn-soft:#FBEFD3; --bad:#B8352A; --bad-soft:#F8DFDB;
  --shadow:0 1px 2px rgba(22,32,42,.06),0 2px 8px rgba(22,32,42,.05);
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color:var(--ink);font:15px/1.5 var(--sans);
}
.dip *{box-sizing:border-box}
.dip h1,.dip h2,.dip h3{font-family:var(--display);font-weight:600;letter-spacing:.01em;margin:0;text-wrap:balance;color:var(--ink)}
.dip .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dip .muted{color:var(--ink-2)}
.dip .small{font-size:13px}

/* hero */
.dip .hero{padding:24px 0 8px;display:grid;gap:18px}
.dip .eyebrow{font:500 12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.dip .hero h1{font-size:clamp(30px,5vw,44px);line-height:1.02;margin-top:8px}
.dip .headline{font-size:18px;max-width:62ch;color:var(--ink-2);margin:0}
.dip .headline b{color:var(--ink);font-weight:600}
.dip .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dip .stat{background:var(--surface);padding:14px 16px}
.dip .stat .v{font:600 30px/1.1 var(--display);margin-top:6px;color:var(--ink)}
.dip .stat .v small{font:500 14px var(--sans);color:var(--ink-2);margin-left:4px}

/* "waiting on" alarm banner */
.dip .alarm{display:flex;gap:14px;align-items:flex-start;background:var(--bad-soft);border:1px solid var(--bad);border-left-width:6px;border-radius:10px;padding:14px 16px;color:var(--ink)}
.dip .alarm.ok{background:var(--good-soft);border-color:var(--good);align-items:center}
.dip .alarm-ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--bad);color:#fff;display:grid;place-items:center;font:700 18px/1 var(--display)}
.dip .alarm.ok .alarm-ic{background:var(--good)}
.dip .alarm-t{font:600 20px/1.1 var(--display);color:var(--bad);margin-bottom:8px;letter-spacing:.01em}
.dip .alarm ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.dip .alarm li b{display:block;font-weight:600;font-size:15px}
.dip .alarm li small{display:block;color:var(--ink-2);font-size:12.5px}
.dip .job.is-blocked{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad),var(--shadow)}
.dip .wait{font-size:14px;background:var(--bad-soft);border-radius:8px;padding:10px 12px}
.dip .wait .lab{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bad);display:block;margin-bottom:6px}
.dip .wait ul{margin:0;padding-left:18px}

.dip section.block{margin-top:34px}
.dip .sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.dip .sec-h h2{font-size:24px}

/* job cards */
.dip .jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.dip .job{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
/* one job per project: let the card use the whole page on a PC, with the task list in columns */
.dip .jobs.single{grid-template-columns:1fr}
@media (min-width:900px){
  .dip .jobs.single .job{display:grid;grid-template-columns:minmax(320px,1fr) 2fr;grid-auto-flow:row;column-gap:32px;row-gap:12px;align-items:start}
  .dip .jobs.single .job > *{grid-column:1}
  .dip .jobs.single .job .week{grid-column:2;grid-row:1 / span 8;border-top:0;border-left:1px dashed var(--line);padding:0 0 0 24px;height:100%}
  .dip .jobs.single .job .week ul{columns:2;column-gap:28px}
  .dip .jobs.single .job .week li{break-inside:avoid;margin-bottom:4px}
}
@media (min-width:1300px){ .dip .jobs.single .job .week ul{columns:3} }
.dip .job-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dip .job-no{font:500 12px/1 var(--mono);color:var(--ink-3);letter-spacing:.04em}
.dip .job h3{font-size:24px;line-height:1.05;margin-top:6px}
.dip .desc{color:var(--ink-2);font-size:14px;margin:0}
.dip .pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:600 12px/1 var(--sans);padding:6px 9px;border-radius:999px;letter-spacing:.02em}
.dip .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.dip .s-good{color:var(--good);background:var(--good-soft)}
.dip .s-warn{color:var(--warn);background:var(--warn-soft)}
.dip .s-bad{color:var(--bad);background:var(--bad-soft)}
.dip .s-idle{color:var(--ink-2);background:var(--surface-2)}
.dip .due{display:flex;justify-content:space-between;gap:10px;font-size:14px;flex-wrap:wrap}
.dip .due b{font-weight:600}
.dip .prog{position:relative;height:10px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line-2);overflow:visible}
.dip .prog i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--bar-fill)}
.dip .prog .exp{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--today);border-radius:1px}
.dip .prog-l{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:6px}
.dip .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;list-style:none;margin:0;padding:0}
.dip .steps li{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-3);line-height:1.2}
.dip .steps li::before{content:"";height:5px;border-radius:3px;background:linear-gradient(to right,var(--good) var(--f,0%),var(--line) var(--f,0%))}
.dip .steps li small{font:400 11px var(--mono);color:var(--ink-3)}
.dip .steps li.done{color:var(--ink-2)}
.dip .steps li.done::before{background:var(--good)}
.dip .steps li.done small{display:none}
.dip .steps li.now{color:var(--ink);font-weight:600}
.dip .steps li.now::before{background:linear-gradient(to right,var(--accent) var(--f,0%),var(--line) var(--f,0%))}
.dip .week{font-size:14px;border-top:1px dashed var(--line);padding-top:12px}
.dip .week .lab{font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px}
.dip .week ul{margin:0;padding-left:18px}
.dip .chips{display:flex;flex-wrap:wrap;gap:6px}
.dip .chip{font-size:12px;padding:4px 8px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2)}

/* timeline */
.dip .tl-box{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;overflow-x:auto}
.dip .tl{min-width:680px;display:grid;grid-template-columns:190px 1fr;row-gap:10px}
.dip .tl-name{font-size:14px;font-weight:500;align-self:center;padding-right:12px;line-height:1.2}
.dip .tl-name span{display:block;font:400 12px var(--mono);color:var(--ink-3)}
.dip .tl-track{position:relative;height:34px}
.dip .tl-bar{position:absolute;top:9px;height:16px;border-radius:4px;background:var(--bar);overflow:hidden}
.dip .tl-bar i{position:absolute;inset:0 auto 0 0;background:var(--bar-fill)}
.dip .tl-bar.s-bad-b{outline:2px solid var(--bad);outline-offset:1px}
.dip .tl-due{position:absolute;top:5px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:var(--bad);border:2px solid var(--surface)}
.dip .tl-axis{position:relative;height:22px;font:400 11px var(--mono);color:var(--ink-3)}
.dip .tl-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.dip .tl-grid{position:absolute;inset:0;pointer-events:none}
.dip .tl-grid b{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2)}
.dip .tl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--today);z-index:2}
.dip .tl-today span{position:absolute;top:-2px;left:4px;font:600 11px var(--sans);color:var(--today);white-space:nowrap}
.dip .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-top:12px}
.dip .legend span{display:inline-flex;align-items:center;gap:6px}
.dip .lg{width:14px;height:10px;border-radius:2px;display:inline-block}

/* task list: Dickie Industries vs External resources */
.dip .tk-grp{margin-bottom:22px}
.dip .tk-grp-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding-left:12px;border-left:5px solid var(--accent)}
.dip .tk-grp.ext .tk-grp-h{border-left-color:var(--today)}
.dip .tk-grp-h h3{font-size:22px}
/* task list */
.dip .tk-job{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow)}
.dip .tk-job-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.dip .tk-job-h h3{font-size:20px}
.dip .tk{list-style:none;margin:0;padding:0}
.dip .tk-row{display:grid;grid-template-columns:52px 1fr auto auto auto;gap:6px 12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-2);font-size:14px;border-left:4px solid transparent}
.dip .tk-by{display:block;color:var(--good);font-size:12.5px;font-weight:600;margin-top:2px}
.dip .tk-done{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--sans);color:var(--ink-2);border:1px solid var(--line);border-radius:7px;padding:6px 10px;cursor:pointer;background:var(--surface);white-space:nowrap;user-select:none}
.dip .tk-done input{width:18px;height:18px;margin:0;accent-color:var(--good);cursor:pointer}
.dip .tk-done.on{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.dip .tk-done:hover{border-color:var(--accent)}
.dip .tk-row:last-child{border-bottom:0}
.dip .tk-row.sub{padding-left:56px;background:color-mix(in srgb,var(--surface-2) 55%,transparent);font-size:13.5px}
.dip .tk-row.sub .tk-main b{font-weight:500}
.dip .tk-row.sub .tk-main b::before{content:"\21B3  ";color:var(--ink-3)}
@media (max-width:640px){ .dip .tk-row.sub{padding-left:28px} }
.dip .tk-row.active{border-left-color:var(--warn)}
.dip .tk-row.late{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad-soft) 40%,transparent)}
.dip .tk-row.done{opacity:.6}
.dip .tk-row.done .tk-main b{text-decoration:line-through}
.dip .tk-row.ms .tk-main b{color:var(--accent)}
.dip .tk-code{font-size:12px;color:var(--ink-3)}
.dip .tk-pref{display:inline-block;min-width:38px;text-align:center;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:3px 6px;align-self:start}
.dip .pqty{display:inline-flex;align-items:center;gap:6px;margin:4px 0 2px;font-size:12.5px;color:var(--ink-2)}
.dip .pqty input{width:72px;font:inherit;font-size:13px;padding:3px 6px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);text-align:right}
.dip .pqty input:focus{outline:none;border-color:var(--accent)}
.dip .pqty.ro b{font-weight:600;color:var(--ink)}
.dip .tk-main{min-width:0}
.dip .tk-main b{display:block;font-weight:600}
.dip .tk-main small{display:block;color:var(--ink-3);font-size:12px;font-family:var(--mono)}
.dip .tk-wait{display:block;color:var(--bad);font-size:12.5px;font-weight:600;margin-top:2px}
.dip .tk-who{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:260px}
.dip .chip.who{cursor:pointer;font:inherit;font-size:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);padding:4px 8px;border-radius:5px}
.dip .chip.who:hover{border-color:var(--accent);color:var(--accent)}
.dip .person-h{margin-bottom:16px}
.dip .person-h h2{font-size:30px;margin-top:4px}
.dip .person-h .headline{font-size:16px;margin-top:6px}
.dip .bad{color:var(--bad)}
@media (max-width:640px){
  .dip .tk-row{grid-template-columns:1fr auto;grid-template-areas:"main pill" "who done"}
  .dip .tk-code{display:none}
  .dip .tk-row.part{grid-template-columns:auto 1fr auto;grid-template-areas:"pref main pill" "who who done"}
  .dip .tk-row.part .tk-pref{display:inline-block;grid-area:pref}
  .dip .tk-main{grid-area:main}
  .dip .tk-row .pill{grid-area:pill;align-self:start}
  .dip .tk-who{grid-area:who;justify-content:flex-start;max-width:none}
  .dip .tk-done{grid-area:done;justify-self:end}
}

/* associated I/O tables */
.dip .io-wrap{overflow-x:auto}
.dip table.io{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.dip table.io th{text-align:left;font:500 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.dip table.io td{padding:7px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.dip table.io tr:last-child td{border-bottom:0}
.dip table.io td.c{text-align:center}
.dip table.io td.tag{font-weight:600;white-space:nowrap}
.dip .io-kind{display:inline-block;min-width:26px;text-align:center;font:600 11px var(--mono);padding:2px 5px;border-radius:4px;background:var(--surface-2);color:var(--ink-2)}
.dip .io-by{font:400 11px var(--sans);color:var(--ink-3);margin-top:2px}
.dip .chip.who.io-add{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft);font-weight:600;font-size:13px;padding:7px 12px}
.dip .io-foot{padding:10px 16px 12px;border-top:1px solid var(--line-2)}
.dip .io-kind.DI{background:var(--good-soft);color:var(--good)} .dip .io-kind.DO{background:var(--warn-soft);color:var(--warn)}
.dip .io-kind.AI{background:var(--accent-soft);color:var(--accent)} .dip .io-kind.AO{background:var(--bad-soft);color:var(--bad)}

/* lists + team */
.dip .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.dip .panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 16px}
.dip .list{list-style:none;margin:0;padding:0}
.dip .list li{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.dip .list li:last-child{border-bottom:0}
.dip .list .d{font:500 13px var(--mono);color:var(--ink-2)}
.dip .list .t small{display:block;color:var(--ink-3);font-size:12px}
.dip .empty{padding:14px 0;color:var(--ink-2);font-size:14px}
.dip .team{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.dip .person{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:14px;text-align:left;font-family:inherit;color:inherit;cursor:pointer;display:block;width:100%}
.dip .person:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.dip .person b{display:block;font-weight:600}
.dip .person span{color:var(--ink-3);font-size:12px;display:block}
.dip .person em{display:block;font-style:normal;font-size:12px;color:var(--accent);font-weight:600;margin-top:6px}

@media (max-width:640px){
  .dip .jobs{grid-template-columns:1fr}
  .dip .list li{grid-template-columns:80px 1fr}
  .dip .hero{padding-top:16px}
}
@media (prefers-reduced-motion:no-preference){.dip .prog i,.dip .tl-bar i{transition:width .4s ease}}