/* Under-construction page for zamoraco.org (built by scripts/build_construction.mjs). Loaded after site.css, which
   supplies the colors, header, hero, readout and footer. Brand gold and ink only: no orange anywhere. */

/* Caution band across the top: gold and ink stripes with the label on a dark plate. */
.uc-tape{height:30px;background:repeating-linear-gradient(-45deg,var(--gold) 0 14px,var(--bg) 14px 28px);display:flex;align-items:center;justify-content:center;border-bottom:1px solid #6b5320}
.uc-tape span{background:var(--bg);color:var(--gold);font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;text-transform:uppercase;padding:6px 12px;border:1px solid #6b5320;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}

/* The sheet fills the screen under the header; the text sits low, like a drawing's notes. */
.uc-hero{min-height:calc(100svh - 30px - 84px)}
.uc-hero .lede{max-width:640px}

/* Build phases: one bar per trade, done in gold, the current one striped, the rest outlined. */
.uc-phases{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;max-width:800px}
.uc-phases li{position:relative;padding-top:12px;font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);overflow-wrap:anywhere}
.uc-phases li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border:1px solid var(--line);background:transparent}
.uc-phases li.done{color:var(--text)}
.uc-phases li.done::before{background:var(--gold);border-color:var(--gold)}
.uc-phases li.now{color:var(--gold)}
.uc-phases li.now::before{border-color:var(--gold);background:repeating-linear-gradient(-45deg,var(--gold) 0 5px,transparent 5px 10px);background-size:28px 28px;animation:uc-crawl 1.2s linear infinite}
.uc-tag{display:inline-block;margin-left:6px;padding:1px 5px;border:1px solid var(--gold);color:var(--gold);font-size:10px;letter-spacing:.1em}
@keyframes uc-crawl{to{background-position:28px 0}}

.uc-contact{margin-top:26px;color:var(--mute)}
.uc-contact a{color:var(--gold);text-decoration:none;border-bottom:1px solid #6b5320}
.uc-contact a:hover,.uc-contact a:focus-visible{border-bottom-color:var(--gold)}

/* Title block, as on a drawing: top right on wide screens, under the notes on phones. */
.uc-block{position:relative;z-index:2;margin:28px 20px 0;border:1px solid #6b5320;background:rgba(11,11,12,.88);font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.uc-block dl{display:grid;grid-template-columns:auto 1fr;margin:0}
.uc-block dt,.uc-block dd{margin:0;padding:6px 10px;border-top:1px solid var(--line)}
.uc-block dt{color:var(--mute);text-transform:uppercase;border-right:1px solid var(--line)}
.uc-block dd{color:var(--text)}
.uc-block dt:first-of-type,.uc-block dt:first-of-type+dd{border-top:0}
.uc-block .uc-title{color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.14em}

/* 404: the same sheet, a short note */
.uc-404 h1{font-size:clamp(34px,6vw,64px)}

@media(max-width:899px){
  .uc-hero{flex-direction:column;align-items:stretch;justify-content:flex-end;padding-top:24px}
  /* The readout joins the page flow above the notes, so a long result never covers the headline. */
  /* Its room is kept from the start (hint, a 3-line result, the Clear button), so a result never pushes the page. */
  .uc-hero .hero-hud{position:relative;top:auto;left:auto;margin:0 20px 18px;max-width:none;min-height:172px}
  /* Kept in the layout (invisible) until the script shows it, so showing it shifts nothing on a slow first paint. */
  .uc-hero .hero-hud[hidden]{display:block!important;visibility:hidden}
  .uc-block{max-width:460px}
}
@media(min-width:900px){
  .uc-block{position:absolute;top:24px;right:20px;margin:0;width:300px}
}
@media(max-width:599px){
  .uc-phases{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}
  .uc-block{margin:24px 16px 0}
  .uc-hero .hero-hud{margin:0 16px 16px;min-height:236px} /* the result wraps to 4 or 5 lines on a phone (Spanish is longest) */
  .uc-tape span{letter-spacing:.14em}
}
@media(prefers-reduced-motion:reduce){
  .uc-phases li.now::before{animation:none}
}
@media print{
  .uc-tape{display:none}
}