/* AU ONE ERP · construction/site-progress.css — Site progress reveal cards
   on Construction Home (2026-09-11). The photo fills from the ground up to the
   project's cumulative progress; the rest is muted, hatched and labelled. */
.spg-wrap{ margin:0 0 32px; opacity:0; transform:translateY(10px); transition:opacity .5s cubic-bezier(.22,.9,.24,1), transform .5s cubic-bezier(.22,.9,.24,1); }
.spg-wrap.on{ opacity:1; transform:none; }
.spg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:16px; }
.spg-card{
  position:relative; display:block; width:100%; aspect-ratio:16/10; min-height:200px; border-radius:18px; overflow:hidden; isolation:isolate;
  border:1px solid var(--border,rgba(255,255,255,.1)); background:#141610; color:#fff; padding:0; cursor:pointer; text-align:left; font:inherit;
  box-shadow:0 1px 2px rgb(0 0 0 / .06), 0 18px 34px -22px rgb(0 0 0 / .55);
  transition:transform .24s cubic-bezier(.34,1.4,.44,1), box-shadow .28s cubic-bezier(.22,.9,.24,1), border-color .2s;
}
.spg-card:hover{ transform:translateY(-4px); box-shadow:0 2px 4px rgb(0 0 0 / .06), 0 28px 50px -24px rgb(0 0 0 / .65); border-color:var(--accent,#A3B25E); }
.spg-card:focus-visible{ outline:3px solid var(--accent,#A3B25E); outline-offset:3px; }
/* two copies of the photo: the muted one underneath, the live one clipped to
   the built percentage — the clip rises when the section appears */
.spg-photo, .spg-mute{ position:absolute; inset:0; background:linear-gradient(160deg,#3a4224,#1a1d12) center/cover no-repeat; }
.spg-mute{ filter:grayscale(1) blur(2px) brightness(.55) contrast(.9); transform:scale(1.04); }
.spg-photo{ z-index:1; clip-path:inset(100% 0 0 0); transition:clip-path 1.6s cubic-bezier(.22,.9,.24,1) .15s; }
.spg-wrap.on .spg-photo{ clip-path:inset(calc(100% - var(--pct) * 1%) 0 0 0); }
.spg-hatch{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 8px, transparent 8px 22px);
  clip-path:inset(0 0 calc(var(--pct) * 1%) 0); transition:clip-path 1.6s cubic-bezier(.22,.9,.24,1) .15s; opacity:0; }
.spg-wrap.on .spg-hatch{ opacity:1; }
.spg-wrap.on .spg-hatch{ clip-path:inset(0 0 calc(var(--pct) * 1%) 0); }
/* the waterline: a glowing edge at the built height */
.spg-edge{ position:absolute; left:0; right:0; z-index:3; height:2px; bottom:100%; pointer-events:none;
  background:linear-gradient(90deg, transparent, #d7e29a, #A3B25E, #d7e29a, transparent); box-shadow:0 0 14px rgba(163,178,94,.9), 0 0 34px rgba(163,178,94,.5);
  transition:bottom 1.6s cubic-bezier(.22,.9,.24,1) .15s; opacity:0; }
.spg-wrap.on .spg-edge{ bottom:calc(var(--pct) * 1%); opacity:1; }
.spg-card.is-done .spg-edge, .spg-card.is-done .spg-hatch{ display:none; }
@media (prefers-reduced-motion:no-preference){ .spg-wrap.on .spg-edge{ animation:spgPulse 2.4s ease-in-out 1.9s infinite; } }
@keyframes spgPulse{ 0%,100%{ box-shadow:0 0 14px rgba(163,178,94,.9), 0 0 34px rgba(163,178,94,.5); } 50%{ box-shadow:0 0 22px rgba(215,226,154,1), 0 0 56px rgba(163,178,94,.7); } }
/* label on the unbuilt part */
.spg-tag{ position:absolute; top:12px; left:12px; z-index:4; padding:6px 11px; border-radius:999px; font:700 11px/1 var(--au-font,'Archivo',system-ui); letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:rgba(12,14,8,.55); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.spg-tag b{ color:#e9d9a3; }
.spg-tag.done{ background:rgba(63,125,78,.75); border-color:rgba(255,255,255,.3); }
/* foot: name, PIC, animated percent */
.spg-foot{ position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:44px 14px 12px;
  background:linear-gradient(0deg, rgba(8,10,6,.86) 0%, rgba(8,10,6,.45) 60%, transparent 100%); }
.spg-name{ font:700 15px/1.25 var(--au-font,'Archivo',system-ui); letter-spacing:-.01em; text-shadow:0 1px 2px rgba(0,0,0,.6); min-width:0; }
.spg-name small{ display:block; font-size:11px; font-weight:500; opacity:.8; margin-top:3px; }
.spg-pct{ display:flex; align-items:baseline; gap:2px; flex:0 0 auto; text-shadow:0 2px 6px rgba(0,0,0,.6); }
.spg-pct b{ font:800 30px/1 var(--au-font,'Archivo',system-ui); letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:#d7e29a; }
.spg-pct i{ font-style:normal; font-weight:800; font-size:15px; color:#d7e29a; }
.spg-pct span{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.75; margin-left:6px; }
.spg-card.no-photo .spg-mute{ filter:none; }
@media (max-width:600px){ .spg-grid{ grid-template-columns:1fr; gap:12px; } .spg-card{ min-height:180px; } }
@media (prefers-reduced-motion:reduce){ .spg-wrap, .spg-photo, .spg-hatch, .spg-edge{ transition:none !important; animation:none !important; } .spg-wrap{ opacity:1; transform:none; } }

/* ---- one row with "Your projects" (PIC view) --------------------------- */
.spg-row{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:18px; align-items:start; margin:0 0 32px; }
.spg-row .spg-wrap{ margin:0; }
.spg-row .spg-side .mc-stats{ margin-bottom:0; grid-template-columns:1fr; }
.spg-row .spg-side > .mc-stat{ margin-bottom:0; }
.spg-row .spg-grid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
@media (max-width:1000px){ .spg-row{ grid-template-columns:1fr; } }
/* ---- no perspective yet: ask for one ----------------------------------- */
.spg-need{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; padding:14px 14px 58px; color:#fff;
  background:linear-gradient(180deg, rgba(20,22,14,.35), rgba(20,22,14,.55)); }
.spg-need-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:2px; background:rgba(163,178,94,.22); border:1px dashed rgba(215,226,154,.7); color:#d7e29a; }
.spg-need-ic svg{ width:18px; height:18px; }
.spg-need b{ font:800 13px/1.25 var(--au-font,'Archivo',system-ui); letter-spacing:-.01em; }
.spg-need span{ font-size:11px; line-height:1.4; opacity:.9; max-width:36ch; }
.spg-need .spg-up{ margin-top:5px; padding:7px 13px; border-radius:999px; font:800 12px/1 var(--au-font,'Archivo',system-ui); color:#fff; opacity:1; max-width:none;
  background:linear-gradient(135deg,var(--olive,#A3B25E),var(--olive-d,#6f7d33)); box-shadow:0 10px 22px -10px rgba(111,125,51,.9); cursor:pointer; transition:transform .18s cubic-bezier(.34,1.4,.44,1), box-shadow .2s; }
.spg-need .spg-up:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(111,125,51,1); }
.spg-need .spg-up:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (prefers-reduced-motion:no-preference){ .spg-need-ic{ animation:spgNeed 2.4s ease-in-out infinite; } }
@keyframes spgNeed{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.spg-card.no-photo .spg-tag{ display:none; }
.spg-card.no-photo{ min-height:230px; }

/* ---- Head / Owner: two equal halves --------------------------------------- */
.spg-halves{ display:grid; grid-template-columns:1fr 1fr; gap:24px; position:relative; }
.spg-halves::before{ content:""; position:absolute; left:50%; top:6px; bottom:6px; width:1px; background:linear-gradient(180deg, transparent, var(--border,rgba(128,128,128,.25)) 20%, var(--border,rgba(128,128,128,.25)) 80%, transparent); pointer-events:none; }
.spg-halves .spg-half{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:1100px){ .spg-halves .spg-half{ grid-template-columns:1fr; } }
@media (max-width:760px){ .spg-halves{ grid-template-columns:1fr; gap:14px; } .spg-halves::before{ display:none; } }
/* ---- Financial overview: months left + remaining receivables ------------ */
.spg-hidden{ display:none !important; }
.spg-finwrap{ margin:0 0 32px; }
.spg-fin{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:760px){ .spg-fin{ grid-template-columns:1fr; } }
.spg-fintile{ position:relative; overflow:hidden; border-radius:16px; padding:22px 24px 20px; border:1px solid var(--border,rgba(128,128,128,.25)); background:var(--surface,rgba(255,255,255,.04)); box-shadow:0 1px 2px rgb(0 0 0 / .04), 0 14px 30px -22px rgb(0 0 0 / .5); transition:transform .22s cubic-bezier(.34,1.4,.44,1), box-shadow .26s; }
.spg-fintile:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgb(0 0 0 / .04), 0 24px 44px -24px rgb(0 0 0 / .55); }
.spg-fintile::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent,#A3B25E); }
.spg-fintile.good::before{ background:#4d7c0f } .spg-fintile.warn::before{ background:#a16207 } .spg-fintile.bad::before{ background:#b91c1c }
.spg-fintile::after{ content:""; position:absolute; right:-50px; top:-50px; width:170px; height:170px; border-radius:50%; background:var(--accent,#A3B25E); opacity:.06; pointer-events:none; }
.spg-finl{ font-size:12px; font-weight:600; color:var(--muted,#8a8f7d); letter-spacing:.02em; }
.spg-finv{ font:700 clamp(30px,3vw,40px)/1.15 var(--au-font,'Archivo',system-ui); letter-spacing:-.04em; margin-top:8px; color:var(--text,inherit); font-variant-numeric:tabular-nums; }
.spg-fintile.good .spg-finv{ color:#7fb236 } .spg-fintile.warn .spg-finv{ color:#d19a2b } .spg-fintile.bad .spg-finv{ color:#e0524a }
.spg-fins{ font-size:12px; color:var(--muted,#8a8f7d); margin-top:8px; line-height:1.5; }
.spg-fingauge{ height:8px; border-radius:999px; background:color-mix(in srgb, var(--border,#888) 60%, transparent); overflow:hidden; margin-top:14px; }
.spg-fingauge i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent,#A3B25E), #d7e29a); transform-origin:left; box-shadow:0 0 12px rgba(163,178,94,.6); }
@media (prefers-reduced-motion:no-preference){
  .spg-finwrap{ animation:spgUp .5s cubic-bezier(.22,.9,.24,1) both; }
  .spg-fintile:nth-child(2){ animation:spgUp .5s .08s cubic-bezier(.22,.9,.24,1) both; }
  .spg-fingauge i{ animation:spgFill 1.2s .3s cubic-bezier(.22,.9,.24,1) both; }
}
@keyframes spgUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes spgFill{ from{ transform:scaleX(0); } }

/* ---- Head / Owner: left rail · content · right rail ------------------- */
body .view.oshome.mchome.spg-has-rails, body.weblayout .view.oshome.mchome.spg-has-rails, body.homewide.weblayout .view.oshome.mchome.spg-has-rails{ max-width:none; padding-left:16px; padding-right:16px; }
/* the middle track is the old Home at its own width (1440px, home-pro.css);
   the rails share every pixel that is left, so nothing sits empty */
.spg-layout{ display:grid; grid-template-columns:minmax(230px,1fr) minmax(0,1440px) minmax(230px,1fr); gap:22px; align-items:start; }
.spg-center{ min-width:0; margin:0 auto; width:100%; }
/* compact rails: two-up on a wide rail, small cards, scaled-down type —
   a glance, not a gallery (owner, 2026-09-11) */
.spg-rail{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); align-content:start; }
.spg-rail .spg-railhd{ grid-column:1/-1; }
.spg-rail .spg-card{ min-height:0; aspect-ratio:16/10; border-radius:12px; }
.spg-rail .spg-tag{ top:7px; left:7px; padding:4px 7px; font-size:8.5px; letter-spacing:.04em; }
.spg-rail .spg-foot{ padding:22px 9px 7px; gap:6px; }
.spg-rail .spg-name{ font-size:12px; }
.spg-rail .spg-name small{ font-size:9.5px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.spg-rail .spg-pct b{ font-size:18px; }
.spg-rail .spg-pct i{ font-size:10px; }
.spg-rail .spg-pct span{ display:none; }
.spg-rail .spg-need{ gap:4px; }
.spg-rail .spg-need span{ font-size:9.5px; max-width:22ch; }
.spg-rail .spg-need .spg-up{ padding:5px 9px; font-size:10.5px; margin-top:2px; }
.spg-rail .spg-hatch{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 5px, transparent 5px 14px); }
.spg-railhd{ font:600 15px/1.2 'Lexend','Archivo',sans-serif; letter-spacing:-.02em; color:var(--text,inherit); padding:12px 0 2px; }
.spg-rails.spg-wrap{ margin:0; }
@media (max-width:1560px){
  .spg-layout{ grid-template-columns:1fr; }
  .spg-rail{ grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
  .spg-rail .spg-railhd{ grid-column:1/-1; }
  .spg-rail-r .spg-railhd{ display:none; }
}
.spg-finto{ font-size:.5em; font-weight:700; color:var(--muted,#8a8f7d); letter-spacing:0; margin-left:6px; white-space:nowrap; }