/* ==========================================================================
   samisee.design, WINDOWS. macOS 26 look, Windows behaviour.
   Engine: js/windows.js. States are attributes on .win:
     data-open      on screen          data-focus    front window
     data-closing   160ms exit         data-shaded   collapsed to its bar
     data-zoom      fills the desk     data-moved    dragged; never re-cascaded
   ========================================================================== */

.win {
  position: fixed; z-index: var(--z-win); display: none; flex-direction: column;
  --lg-r: 24px; --lg-tint: 82%; --lg-blur: 30px; overflow: hidden;
  max-width: calc(100vw - 32px); max-height: calc(100vh - 34px - 90px);
  /* windows are for reading: the window/fill token (82%) instead of the thin glass tint */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--os-ink) 6%, transparent), transparent 40%),
    var(--window-fill);
}
.win[data-open] { display: flex; animation: win-pop var(--motion-enter) var(--ease-enter); }
.win[data-closing] { animation: win-out 160ms var(--ease-standard) forwards; }
.win:not([data-focus]) { filter: saturate(.9) brightness(.94); }
.win[data-shaded] { height: 46px !important; }
.win[data-shaded] .win__body, .win[data-shaded] .win__grip { display: none; }
@keyframes win-pop { from { opacity: 0; transform: scale(.94); } }
@keyframes win-out { to { opacity: 0; transform: scale(.96); } }

.win__bar { position: relative; display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 14px; flex: none; cursor: grab; user-select: none; border-bottom: 1px solid var(--os-border); }
.win__bar:active { cursor: grabbing; }
.win__title { position: absolute; left: 50%; translate: -50% 0; font: 500 var(--text-body)/1 var(--font-mono); color: var(--os-ink-dim); pointer-events: none; }
/* a ticker band under a window's title bar (read_me): pinned, the body scrolls under it */
.ticker--band { flex: none; margin: 0; padding: 8px 0 9px; border-top: 0; border-bottom: 1px solid var(--os-border); border-radius: 0; }
.win[data-shaded] .ticker--band { display: none; }
.win__body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--glass-edge) transparent; }
.win__grip { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 3;
  background: linear-gradient(135deg, transparent 50%, var(--glass-edge) 50% 56%, transparent 56% 68%, var(--glass-edge) 68% 74%, transparent 74%); }

/* traffic lights: real verbs (close, shade, zoom); grey when the window is behind */
.lights { display: flex; gap: 12px; }   /* 24px centre to centre: small targets, but spaced to WCAG 2.5.8 */
.light { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .25), inset 0 1px 0 rgb(255 255 255 / .35); position: relative; }
.light--close { background: var(--tl-close); } .light--shade { background: var(--tl-shade); } .light--zoom { background: var(--tl-zoom); }
.light::after { position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px/1 var(--font-mono); color: rgb(0 0 0 / .55); opacity: 0; }
.lights:hover .light::after { opacity: 1; }
.light--close::after { content: "×"; } .light--shade::after { content: "–"; } .light--zoom::after { content: "+"; }
.win:not([data-focus]) .light { background: color-mix(in srgb, var(--os-ink) 18%, transparent); }

/* ---- read_me.md: rendered markdown, its marks hanging faintly in the margin ---- */
/* wide enough for the skill tree's three trunks with room around them, in English and German */
#w-readme { width: 640px; height: 680px; }
.md { padding: 30px 40px 36px 52px; font: 400 var(--text-lead)/1.65 var(--font-body); color: color-mix(in srgb, var(--os-ink) 88%, transparent); }
.md h1, .md h2, .md blockquote, .md p { position: relative; }
.md .mk { position: absolute; left: -26px; top: 0; width: 20px; text-align: right; font: 400 var(--text-body)/1 var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--os-ink-faint); user-select: none; }
.md h1 { margin: 0 0 6px; font: var(--weight-display) var(--text-display)/1.05 var(--font-display); color: var(--os-ink); letter-spacing: -.01em; }
.md h1 .mk { top: 14px; }
.md .meta { margin: 0 0 10px; font: 400 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--os-ink-dim); }
/* where she is and where she's from, under the role; the pin in the secondary accent, like the clock's */
.md .meta--where { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-bottom: 26px; }
.md .meta--where > span { display: inline-flex; align-items: center; gap: .45em; }
.md .meta--where b { font-weight: 400; color: var(--os-ink); }
.meta__pin { width: 10px; height: 10px; fill: var(--os-accent-2); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--os-accent-2) 45%, transparent)); }
.md blockquote { margin: 0 0 14px; padding: 2px 0 2px 18px; border-left: 2px solid var(--os-accent); font: var(--weight-display) var(--text-subhead)/1.4 var(--font-display); color: var(--os-ink); }
.md blockquote .mk { left: -44px; top: 6px; }
.md .aside { margin: 0 0 30px; font: 400 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--os-ink-dim); }
.md h2 { margin: 30px 0 10px; font: 500 var(--text-body)/1 var(--font-mono); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--os-accent); }
.md p { margin: 0 0 12px; }
.md em { font-style: normal; color: var(--os-ink); }
/* plain lists, links and code in the rendered .md windows (patch_notes.md, help) */
.md ul:not([class]) { margin: 0 0 14px; padding-left: 20px; }
.md ul:not([class]) li { margin: 0 0 6px; }
.md ul:not([class]) li::marker { content: "✦  "; font-size: 10px; color: var(--os-accent-3); }
.md a { color: var(--os-accent); text-decoration: underline; text-decoration-color: var(--os-accent-line); text-underline-offset: 3px; }
.md a:hover { text-decoration-color: var(--os-accent); }
.md code { font: 400 .9em/1 var(--font-mono); padding: 2px 6px; border-radius: 6px; background: var(--os-wash); }
.md b { font-weight: 600; color: var(--os-ink); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.steps li { padding: 12px 14px; border-radius: 14px; background: var(--os-wash); box-shadow: inset 0 0 0 1px var(--os-border); font-size: var(--text-body); line-height: 1.5; color: color-mix(in srgb, var(--os-ink) 80%, transparent); }   /* AA on the wash in every look (dim ink was 4.4 on sunset) */
.steps b { display: block; margin-bottom: 4px; font: 500 var(--text-body)/1 var(--font-mono); color: var(--os-ink); }
.steps b span { color: var(--os-accent-2); margin-right: 8px; }
/* on pearl the blue needs a touch more depth to clear AA at this size */
body[data-look="day"] .steps b span { color: color-mix(in oklch, var(--os-accent-2) 82%, #000); }
.md .foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--os-border); display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; font: 600 var(--text-body)/1 var(--font-body); color: var(--os-ink); text-decoration: none; background: var(--os-wash); box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); }
.btn__copy { width: 12px; height: 12px; opacity: .7; }
.btn--cta { color: var(--on-cta); background: var(--t-cta); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), 0 6px 16px -8px var(--os-accent); }

/* ---- folio: the grid is the home tab; every project opened becomes a tab ---- */
#w-folio { width: 680px; height: 660px; }
/* fit() in windows.js glides a window to a new size */
.win.is-sizing { transition: width .45s var(--ease-enter), height .45s var(--ease-enter), left .45s var(--ease-enter), top .45s var(--ease-enter); }
.tabs { display: flex; gap: 6px; margin-left: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; white-space: nowrap; font: 500 var(--text-body)/1 var(--font-mono); color: var(--os-ink-dim); }
.tab:hover { color: var(--os-ink); }
.tab[aria-selected="true"] { color: var(--os-ink); background: var(--os-wash); box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent); }
.tab__x { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; border-radius: 50%; font-size: 11px; opacity: .55; }
.tab__x:hover { opacity: 1; background: var(--os-wash); }
.folio__count { margin-left: auto; flex: none; font: 400 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--os-ink-dim); }

.folio__intro { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 26px 4px; }
.folio__intro h3 { margin: 0; font: var(--weight-display) var(--text-title)/1 var(--font-display); }
.folio__intro span { font: 400 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--os-ink-dim); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 18px 26px 28px; }
.card { perspective: 700px; cursor: pointer; text-align: left; display: block; width: 100%; }
.card__in { position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--os-sky-stop-1); box-shadow: inset 0 0 0 1px var(--glass-edge); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.card.is-tilt .card__in { transition: transform .06s linear, box-shadow .3s; box-shadow: inset 0 0 0 1px var(--glass-edge), 0 10px 22px -14px color-mix(in srgb, var(--shade) 53%, transparent); }
.card img, .case img { display: block; width: 100%; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.card img { object-fit: cover; }
.card img { aspect-ratio: 16 / 10; }
.card__foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: calc(var(--h, 0) * .3); transition: opacity .4s;
  background: repeating-linear-gradient(115deg, var(--opal-silver) 0%, var(--os-accent-2) 5%, var(--os-accent) 10%, var(--os-accent-3) 15%, var(--opal-warm) 20%, var(--opal-silver) 25%);
  background-size: 400% 400%; background-position: var(--px, 50%) var(--py, 50%); }
.card__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #ffffff5c, transparent 50%); mix-blend-mode: overlay; opacity: var(--h, 0); transition: opacity .4s; }
.card__meta { display: block; padding: 12px 4px 0; }
.card__top { display: flex; align-items: baseline; gap: 10px; }
.card__top b { font: 500 var(--text-caption)/1 var(--font-mono); color: var(--os-accent); }
.card__top strong { font: var(--weight-display) var(--text-subhead)/1.1 var(--font-display); }
.card__tags { display: block; margin-top: 7px; font: 400 var(--text-caption)/1.4 var(--font-mono); letter-spacing: .04em; color: var(--os-ink-dim); }
.card__metric { display: block; margin-top: 5px; font-size: var(--text-body); color: var(--os-ink); }

/* a project tab: the case study itself is styled in case.css */
.case__stats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.case__stats li { padding: 12px 14px; border-radius: 14px; background: var(--os-wash); box-shadow: inset 0 0 0 1px var(--os-border); font-size: var(--text-body); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .win[data-open], .win[data-closing] { animation: none; }
}

/* ---- touch screens (tablets): fingers, not a cursor ---- */
@media (pointer: coarse) {
  .win__bar { touch-action: none; }                       /* a finger drags the window, it doesn't scroll the page */
  .light::before { content: ""; position: absolute; inset: -9px -5px; }   /* a fingertip-sized target round each light */
  .win__grip { width: 30px; height: 30px; touch-action: none; }
}