/* ==========================================================================
   Halden artwork primitives — original vector product mockups.
   Rules: one light source (top-left), warm-tinted shadows, real chrome,
   layered paper, jewel-tone compositions, grain over flat fills.
   No stock imagery, no third-party marks, no photographic assets.
   ========================================================================== */

/* ---------- the file card: a document, not a rectangle ---------- */
.art{
  position:relative; background:#fff; border-radius:10px; overflow:hidden; color:var(--ink);
  box-shadow:0 0 0 1px rgba(38,28,18,.07), 0 1px 2px rgba(38,28,18,.06),
             inset 0 1px 0 rgba(255,255,255,.9);
  isolation:isolate;
}
.art::after{ /* top-left key light */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
  background:linear-gradient(148deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 34%,rgba(38,28,18,.045) 100%);
}
/* stacked-paper edge: reads as a multi-page source file */
.art-stack{position:relative}
.art-stack::before,.art-stack::after{
  content:""; position:absolute; left:6px; right:6px; border-radius:10px; background:#fff;
  box-shadow:0 0 0 1px rgba(38,28,18,.06); z-index:-1;
}
.art-stack::before{bottom:-5px; height:22px}
.art-stack::after{bottom:-9px; left:12px; right:12px; height:22px; background:#F7F4EF}

.art-bar{height:18px; background:linear-gradient(#FDFCFA,#F6F3EE); border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:4px; padding:0 7px; position:relative; z-index:3}
.art-bar i{width:6px; height:6px; border-radius:999px; display:block; background:#E2DCD2}
.art-bar i:nth-child(1){background:#E6B9AE} .art-bar i:nth-child(2){background:#EAD9B4} .art-bar i:nth-child(3){background:#BFD3C6}
.art-bar b{margin-left:6px; font-size:7px; font-weight:600; color:#9A938A; letter-spacing:.02em}
.art-pad{padding:14px; position:relative; z-index:2}
.art-label{position:absolute; left:10px; top:8px; z-index:5; font-size:7px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.82)}
.art-no{position:absolute; right:10px; top:8px; z-index:5; font-size:7px; font-weight:600; color:rgba(255,255,255,.72)}
.art-no-dk{color:#A79E93}
.art-label-dk{color:#A79E93}

/* grain over any coloured fill */
.grain::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.85;
  background-image:url("grain.svg"); background-size:120px 120px;
}

/* text-line simulation, tuned to read as set type not as bars */
.lines{display:flex; flex-direction:column; gap:5px}
.lines i{display:block; height:4px; border-radius:2px; background:#E8E3DA; flex:none}
.lines.dark i{background:#D6D0C5}
.lines.light i{background:rgba(255,255,255,.42)}
.lines.tight{gap:3px}
.lines.tight i{height:3px}
.lines i.w95{width:95%} .lines i.w90{width:90%} .lines i.w80{width:80%} .lines i.w70{width:70%}
.lines i.w60{width:60%} .lines i.w50{width:50%} .lines i.w40{width:40%} .lines i.w30{width:30%}
.rule{height:1px; background:var(--line-soft)}
.slab{background:var(--sub); border-radius:4px; display:block}

/* ---------- editorial "photography": layered vector scenes ---------- */
.scene{position:relative; overflow:hidden; border-radius:4px; background:var(--a-bone)}
.scene svg{position:absolute; inset:0; width:100%; height:100%}
.scene::after{ /* soft directional light wash */
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(78% 62% at 24% 12%, rgba(255,255,255,.34), rgba(255,255,255,0) 62%);
}

/* ---------- realistic application window ---------- */
.win{
  background:#fff; border-radius:12px; overflow:hidden; position:relative;
  box-shadow:0 0 0 1px rgba(38,28,18,.09), 0 34px 60px -18px rgba(38,28,18,.30),
             0 12px 22px -10px rgba(38,28,18,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
.win-bar{
  height:34px; background:linear-gradient(#FCFAF7,#F3EFE8); border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:6px; padding:0 12px;
}
.win-bar .dots{display:flex; gap:6px; margin:0}
.win-bar .dots i{width:9px;height:9px;border-radius:999px;display:block}
.win-bar .dots i:nth-child(1){background:#E29B8C} .win-bar .dots i:nth-child(2){background:#E3C079} .win-bar .dots i:nth-child(3){background:#93BFA5}
.win-tab{margin-left:12px; height:22px; padding:0 10px; border-radius:6px; background:#fff;
  border:1px solid var(--line-soft); box-shadow:var(--shadow-xs);
  font-size:10px; font-weight:600; color:#6B645C; display:flex; align-items:center; gap:6px}
.win-tab .fdot{width:7px;height:7px;border-radius:2px;display:block}
.win-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.win-chip{height:20px; padding:0 8px; border-radius:5px; background:var(--sub); font-size:9px; font-weight:600; color:#7A736B; display:flex; align-items:center}
.win-chip.on{background:var(--brand); color:#fff}
.win-body{display:grid; background:#EFEBE4}
.win-side{background:#FAF8F5; border-right:1px solid var(--line-soft); padding:12px 10px; display:flex; flex-direction:column; gap:14px}
.win-side-2{border-right:0; border-left:1px solid var(--line-soft)}
.side-h{font-size:8px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#A79E93}
.side-i{display:flex; align-items:center; gap:7px; font-size:10px; color:#5E574F; padding:3px 5px; border-radius:5px}
.side-i.on{background:var(--brand-tint); color:var(--brand-ink); font-weight:600}
.side-i .sq{width:11px;height:11px;border-radius:3px;flex:none;background:#DED8CD}
.win-canvas{position:relative; padding:20px; background:
  linear-gradient(#EFEBE4,#EAE5DC);
  background-image:
    linear-gradient(rgba(38,28,18,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(38,28,18,.035) 1px,transparent 1px);
  background-size:16px 16px, 16px 16px;
}
.win-ruler{position:absolute; inset:0 0 auto; height:14px; background:rgba(255,255,255,.6);
  border-bottom:1px solid rgba(38,28,18,.06); z-index:1}

/* selection handles on a canvas object */
.sel{position:relative; outline:1.5px solid var(--brand); outline-offset:3px}
.sel>i{position:absolute; width:6px; height:6px; background:#fff; border:1.5px solid var(--brand); border-radius:1px; z-index:6}
.sel>i:nth-of-type(1){left:-6px;top:-6px} .sel>i:nth-of-type(2){right:-6px;top:-6px}
.sel>i:nth-of-type(3){left:-6px;bottom:-6px} .sel>i:nth-of-type(4){right:-6px;bottom:-6px}

/* collaborator cursor */
.cursor{position:absolute; display:flex; align-items:flex-start; gap:2px; z-index:8}
.cursor svg{width:15px; height:15px; color:var(--brand); filter:drop-shadow(0 1px 2px rgba(38,28,18,.3))}
.cursor b{background:var(--brand); color:#fff; font-size:10px; font-weight:600; padding:2px 6px;
  border-radius:4px; margin-top:8px; box-shadow:var(--shadow-sm)}
.cursor-brass svg{color:var(--brass)} .cursor-brass b{background:var(--brass)}

/* floating detail callout over a mockup */
.zoom{
  position:absolute; z-index:9; background:#fff; border-radius:10px; padding:10px;
  box-shadow:0 0 0 1px rgba(38,28,18,.08), 0 22px 38px -12px rgba(38,28,18,.30);
}
.zoom-h{font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#A79E93; margin-bottom:7px}
.zoom-v{font-size:12px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}

/* ---------- slide / spread / poster compositions ---------- */
.slide{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:5px; background:#fff}
.spread{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(38,28,18,.10); border-radius:4px; overflow:hidden}
.spread .pg{background:#FCFAF6; padding:9%; position:relative; aspect-ratio:3/4}
.crop{position:absolute; width:9px; height:9px; opacity:.5}
.crop::before,.crop::after{content:""; position:absolute; background:#8C857B}
.crop::before{left:0; top:4px; width:9px; height:1px}
.crop::after{top:0; left:4px; width:1px; height:9px}

/* ---------- charts ---------- */
.bars{display:flex; align-items:flex-end; gap:6px; height:56px}
.bars i{flex:1; border-radius:2px 2px 0 0; background:var(--a-spruce)}
.bars i:nth-child(even){background:var(--a-sage)}
.bars.brass i{background:var(--a-ochre)} .bars.brass i:nth-child(even){background:var(--a-sand)}
.donut{border-radius:999px; aspect-ratio:1; position:relative}
.donut::after{content:""; position:absolute; inset:26%; background:#fff; border-radius:999px}
.spark{position:relative; height:34px}
.spark svg{position:absolute; inset:0; width:100%; height:100%}

/* ---------- icon sheet ---------- */
.iconsheet{display:grid; grid-template-columns:repeat(8,1fr); gap:8px}
.iconsheet svg{width:100%; height:auto; color:#3B3630; stroke-width:1.6}
.iconsheet.dense{grid-template-columns:repeat(10,1fr); gap:7px}
.iconsheet.brand svg{color:var(--brand)}
.icontile{background:#fff; border:1px solid var(--line-soft); border-radius:8px; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-xs)}
.icontile svg{width:52%; height:auto; color:#3B3630; stroke-width:1.6}

/* ---------- swatches / specimen ---------- */
.swatches{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.swatches i{aspect-ratio:1; border-radius:4px; display:block; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(38,28,18,.06)}
.specimen{font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:.92}

/* ---------- mobile artwork tuning ---------- */
@media (max-width:1023px){
  .iconsheet{grid-template-columns:repeat(9,1fr) !important; gap:9px}
  .collage-m .iconsheet{grid-template-columns:repeat(6,1fr) !important; gap:5px}
  .win-side{display:none}
  .win-body{grid-template-columns:1fr !important}
  .zoom{display:none}
}

/* window chrome must not set a min-content floor on narrow screens */
.win,.win-bar,.win-body,.win-canvas,.win-side{min-width:0}
.win-tab{min-width:0; flex:0 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.win-chip{white-space:nowrap; flex:none}
.win-right{flex:none; min-width:0}
@media (max-width:1023px){
  .win-right .win-chip:not(:last-child){display:none}
  .win-bar{padding:0 10px; gap:5px}
}

/* video frame at 390px: one column, no collage, no text under the play button */
@media (max-width:1023px){
  .pl-grid{grid-template-columns:1fr !important}
  .pl-art{display:none}
  .pl-copy{padding:16px 18px 60px !important; justify-content:flex-start !important}
  .pl-title{font-size:22px !important; margin-top:8px !important; max-width:64%}
  .pl-sub{display:none}
  .pl-play{width:56px !important; height:56px !important; left:auto !important; right:18px !important;
    top:auto !important; bottom:56px !important; transform:none !important}
}