/* Hallmark · genre: modern-minimal · macrostructure: Workbench (drop-zone hero → workspace) · theme: studied-DNA (source: fastpoint-web design system)
 * paper oklch(99.2% 0.002 250) / dark oklch(16% 0.05 262) · accent oklch(75% 0.17 70) click amber · accent-light oklch(52% 0.11 215)
 * fonts: Sora + IBM Plex Mono · nav: FastPoint island · footer: TitleBlock · enrichment: hand-built SVG glyph in the drop zone
 * tone: technical · audience: Revit / BIM modelers · use: drop a file → pick strings → download
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */
@import url("tokens.css");
@import url("components.css");

/* ── Hero: a short title, then the drop zone at full width ── */
.hero{position:relative; margin-top:calc(-1 * var(--nav-height)); padding-top:var(--nav-height); border-bottom:1px solid var(--color-rule); overflow:clip}
.hero__bg{position:absolute; inset:0; pointer-events:none; mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent)}
.hero__grid{position:relative; display:grid; gap:var(--space-lg); padding-block:var(--space-lg) var(--space-2xl)}
.hero__head{display:grid; gap:var(--space-sm)}
.hero h1{font-size:var(--text-display-s); font-weight:800; letter-spacing:-0.025em; line-height:1.06}
.hero h1 .is-accent{color:var(--color-accent-light)}
.hero__lede{font-size:var(--text-md); max-width:46ch; color:var(--color-ink-2)}
.hero__meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-xs) var(--space-lg)}
.hero__meta .link-arrow{margin-left:auto}

@media (min-width:60rem){
  .hero__grid{gap:var(--space-xl); padding-block:var(--space-xl) var(--space-2xl)}
  .hero__lede{max-width:62ch}
}

/* ── Sections ── */
.section{padding-block:var(--space-2xl)}
.section + .section{border-top:1px solid var(--color-rule)}
.section__title{font-size:var(--text-display-s); font-weight:800; letter-spacing:-0.025em; max-width:20ch}
.section__title span{color:var(--color-accent-light)}
.section__lede{margin-top:var(--space-md); max-width:52ch; font-size:var(--text-md)}
@media (min-width:60rem){ .section{padding-block:var(--space-3xl)} }

/* How it works: three ruled cells, read left to right like a schedule row */
.flow{display:grid; grid-template-columns:minmax(0,1fr); margin:var(--space-xl) 0 0; padding:0; list-style:none; border-block:1px solid var(--color-rule)}
.flow li{position:relative; padding:var(--space-lg) var(--space-md) var(--space-lg) 0}
.flow li + li{border-top:1px solid var(--color-rule)}
.flow li::before{content:""; position:absolute; left:0; top:-1px; width:8px; height:1px; background:var(--color-accent)}
.flow__n{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:0.08em; color:var(--color-accent-light)}
.flow h3{margin-top:var(--space-xs); font-size:var(--text-xl); font-weight:600}
.flow p{margin-top:var(--space-xs); max-width:34ch; font-size:var(--text-sm)}
.flow code{font-family:var(--font-mono); font-size:0.92em; color:var(--color-ink)}
@media (min-width:48rem){
  .flow{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)}
  .flow li{padding:var(--space-lg) var(--space-lg) var(--space-xl)}
  .flow li:first-child{padding-left:0}
  .flow li + li{border-top:0; border-left:1px solid var(--color-rule)}
  .flow li + li::before{left:var(--space-lg)}
}

.limits__grid{display:grid; gap:var(--space-xl)}
@media (min-width:60rem){ .limits__grid{grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); gap:var(--space-2xl); align-items:start} }

/* ── Workspace (after a file is read) ── */
.work{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-md); padding-block:var(--space-lg) var(--space-xl)}
/* ≥40rem the workspace is an app shell the height of the window: the table takes what is left and scrolls inside. */
@media (min-width:40rem){
  .work:not(.hidden){display:flex; flex-direction:column; gap:var(--space-sm); height:calc(100dvh - 60px - var(--space-sm)); min-height:34rem; padding-block:var(--space-md)}
  .work > *{flex:none}
  .work > .strings{flex:1 1 auto; min-height:12rem}
}
.work__head{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"file reset"; align-items:end; gap:var(--space-md); padding-bottom:var(--space-md); border-bottom:1px solid var(--color-rule)}
.work__file{grid-area:file; display:grid; gap:var(--space-2xs); min-width:0}
.work__head #reset{grid-area:reset}
.work__langs{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:var(--space-xs)}
@media (max-width:25.99rem){ .work__langs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.work__file h2{font-size:var(--text-xl); font-weight:600; letter-spacing:-0.02em; line-height:1.15}
.toolbar{display:grid; gap:var(--space-sm)}
.hint{font-size:var(--text-sm); color:var(--color-muted); max-width:72ch}
.hint:empty{display:none}
.hint--quiet{margin-top:calc(-1 * var(--space-xs)); font-size:var(--text-xs)}
@media (min-width:40rem){
  .toolbar{grid-template-columns:auto minmax(12rem, 20rem); justify-content:space-between; align-items:center}
}