/* WorkMetric's session instrument. All motion stays inside the bounded study. */
/* The opening film's light: its three hero glows (main.css, "project-cinematic-hero"). */
.wm-cinematic-hero { --project-hero-accent-rgb: 255, 138, 61; --project-hero-accent-2-rgb: 56, 212, 198; --project-hero-accent-3-rgb: 255, 205, 120; }
body.theme-workmetric {
  --experience-accent: rgb(255 157 104);
  --experience-paper: #f4f0e9;
  --wm-paper: #f4f0e9;
  --wm-muted: #a8a49d;
  --wm-line: rgb(244 240 233 / .13);
}
.theme-workmetric .wm-section { padding: clamp(4.5rem, 9vw, 8rem) 0; scroll-margin-top: 130px; }
.theme-workmetric .wm-section h2 { margin: 0; font-family: var(--font-text); font-size: clamp(2.5rem, 5.4vw, 4.8rem); font-weight: var(--heading-weight); line-height: 1.05; letter-spacing: var(--track-display); color: var(--wm-paper); }
.theme-workmetric .wm-section h2 em { font-style: normal; color: var(--wm-muted); }
.theme-workmetric .wm-kicker { margin: 0 0 1.4rem; color: var(--experience-accent); font-size: var(--text-label); font-weight: var(--heading-weight); text-transform: uppercase; letter-spacing: var(--track-label); }
.theme-workmetric .wm-opening { border-bottom: 1px solid var(--wm-line); }
.wm-opening-grid { display: grid; grid-template-columns: .45fr 1fr; gap: 2.5rem; align-items: start; }
.wm-opening-grid > .wm-kicker { padding-top: .65rem; }
.wm-opening-grid > div > p { max-width: 50ch; margin: 1.8rem 0 0; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; color: var(--wm-muted); }
.wm-study-heading { display: grid; grid-template-columns: 1fr .6fr; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.wm-study-heading > p { max-width: 32ch; margin: 0 0 .35rem; color: var(--wm-muted); font-size: 1.05rem; }
/* clip (not hidden) keeps the rounded corners without making the instrument a scroll container, so the phone
   readout inside it can stick to the viewport. Engines without clip keep hidden and the readout simply scrolls. */
.wm-instrument { --wm-tone: 255 157 104; --wm-inset: 2rem; display: grid; grid-template-columns: 1.12fr 1fr; border: 1px solid var(--wm-line); border-radius: 22px; overflow: hidden; overflow: clip; background: #111210; box-shadow: 0 25px 80px rgb(0 0 0 / .14); }
.wm-instrument[data-wm-mode="duration"] { --wm-tone: 125 209 192; }
.wm-instrument[data-wm-mode="distance"] { --wm-tone: 192 184 241; }
.wm-instrument-visual { --wm-spread: 6px; --wm-rotate-x: 58deg; --wm-rotate-z: -28deg; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 590px; overflow: hidden; isolation: isolate; contain: paint; background: radial-gradient(ellipse at 50% 35%, rgb(var(--wm-tone) / .07), transparent 62%), #0b0d0c; }
.wm-instrument-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / .025) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .025) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(#000, transparent 85%); }
.wm-instrument-topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; padding: 1.4rem var(--wm-inset); border-bottom: 1px solid rgb(255 255 255 / .05); color: #a8aaa4; font-size: var(--text-floor); font-weight: var(--heading-weight); letter-spacing: var(--track-label); text-transform: uppercase; }
.wm-instrument-topline > span:last-child { margin-left: auto; text-align: right; color: rgb(var(--wm-tone)); transition: color var(--motion-medium) var(--ease-standard); }
.wm-plate-space { position: relative; height: 330px; flex: 1; min-height: 265px; perspective: 1000px; }
.wm-plate-stack { position: absolute; left: 50%; top: 59%; width: 215px; height: 215px; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(var(--wm-rotate-x)) rotateZ(var(--wm-rotate-z)); }
.wm-plate { position: absolute; inset: 0; border: 1px solid #575b51; border-radius: 17px; background: linear-gradient(135deg, #272b26, #111512); transform: translateZ(calc(var(--wm-i) * var(--wm-spread))); box-shadow: 0 4px 0 #090c09, 0 5px 0 #3b4038, 0 8px 15px rgb(0 0 0 / .18); transition: border-color var(--motion-medium) var(--ease-standard); }
.wm-plate::before { content: ""; position: absolute; inset: 14%; border: 1px solid rgb(207 225 199 / .08); border-radius: 10px; }
.wm-plate::after { content: ""; position: absolute; left: 17%; right: 17%; bottom: -2px; height: 2px; background: #414b3f; }
.wm-plate.is-lit { border-color: rgb(var(--wm-tone) / .6); background: linear-gradient(135deg, rgb(var(--wm-tone) / .3), #1b1f19 65%); }
.wm-plate.is-lit::after { background: rgb(var(--wm-tone)); box-shadow: 0 0 14px rgb(var(--wm-tone) / .32); }
.wm-plate-ground { position: absolute; left: 15%; right: 15%; top: 62%; height: 100px; background: radial-gradient(ellipse, rgb(var(--wm-tone) / .13), transparent 65%); transform: scaleY(.5); }
.wm-plate-axis { position: absolute; bottom: 8px; font-size: var(--text-floor); letter-spacing: var(--track-label); text-transform: uppercase; color: #8b9489; }
.wm-plate-axis--left { left: var(--wm-inset); }
.wm-plate-axis--right { right: var(--wm-inset); }
.wm-reading { position: relative; padding: 1.75rem var(--wm-inset) .6rem; border-top: 1px solid rgb(255 255 255 / .07); }
.wm-reading-label { margin: 0 0 .4rem; color: #b8b7ad; font-size: var(--text-caption); }
.wm-reading-value { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .75rem; margin: 0; color: var(--wm-paper); font-size: clamp(3rem, 5.4vw, 5rem); line-height: 1.1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.wm-reading-unit { font-size: 1rem; letter-spacing: var(--track-heading); color: rgb(var(--wm-tone)); }
.wm-equation { margin: .65rem 0 0; color: #b0b2a9; font-size: .82rem; font-variant-numeric: tabular-nums; }
.wm-scale-note { margin: .5rem var(--wm-inset) 1.2rem; --study-disclosure-ink: #9a9f96; }
.wm-controls { position: relative; padding: var(--wm-inset); background: linear-gradient(145deg, rgb(255 255 255 / .024), transparent 70%); border-left: 1px solid var(--wm-line); }
.wm-live { display: none; }
.wm-measures { border: 0; padding: 0; margin: 0; min-width: 0; }
.wm-measures legend { padding: 0; margin-bottom: .8rem; color: #c5c6bc; font-size: var(--text-caption); }
.wm-mode-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 4px; border: 1px solid rgb(255 255 255 / .07); border-radius: 9px; background: #080a08; margin-bottom: 1.75rem; }
.wm-mode-buttons button {
  min-height: 44px; padding: .55rem .25rem; border: 1px solid transparent; border-radius: 5px; color: #aeb2a7; background: transparent;
  font: inherit; font-size: var(--text-label); line-height: 1.2; cursor: pointer;
  transition: background var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard), color var(--motion-quick) var(--ease-standard), transform var(--motion-instant) var(--ease-standard);
}
.wm-mode-buttons button[aria-pressed="true"] { background: #252922; border-color: #41473b; color: rgb(var(--wm-tone)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05); }
.wm-mode-buttons button:focus-visible { color: #f4f0e9; background: #242820; }
.wm-factor { margin-bottom: 1.15rem; }
.wm-factor[hidden] { display: none; }
.wm-factor label { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; color: #d4d5cb; font-size: .9rem; }
.wm-factor output { font-variant-numeric: tabular-nums; color: var(--wm-paper); }
.wm-factor input[type="range"] { --wm-fill: 30.44%; display: block; width: 100%; height: 44px; padding: 0; margin: .25rem 0 0; border: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: ew-resize; accent-color: rgb(var(--wm-tone)); }
.wm-factor input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, rgb(var(--wm-tone)) var(--wm-fill), #363c32 var(--wm-fill)); }
.wm-factor input[type="range"]::-webkit-slider-thumb { width: 18px; height: 29px; margin-top: -13px; border: 1px solid #9b9f8e; border-radius: 4px; background: linear-gradient(90deg, #aaa996, #eeeadd 42%, #c4c5b4 52%, #757c68); box-shadow: 0 2px 3px #050705; -webkit-appearance: none; transition: box-shadow var(--motion-quick) var(--ease-standard); }
.wm-factor input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 1px 2px #050705, 0 0 0 5px rgb(var(--wm-tone) / .16); }
.wm-factor input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: #363c32; }
.wm-factor input[type="range"]::-moz-range-progress { height: 4px; background: rgb(var(--wm-tone)); }
.wm-factor input[type="range"]::-moz-range-thumb { width: 17px; height: 28px; border: 1px solid #9b9f8e; border-radius: 4px; background: linear-gradient(90deg, #aaa996, #eeeadd 42%, #c4c5b4 52%, #757c68); }
.wm-factor-limits { display: flex; justify-content: space-between; margin-top: -.15rem; color: #969b8f; font-size: var(--text-floor); font-variant-numeric: tabular-nums; }
.wm-measure-note { min-height: 4.7em; margin: 1.5rem 0; color: #b0b4a7; font-size: .78rem; line-height: 1.65; }
.wm-add-set {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; min-height: 48px; padding: .8rem 1rem;
  border: 1px solid rgb(var(--wm-tone) / .5); border-radius: 7px; background: rgb(var(--wm-tone)); color: #1a1b16;
  font: inherit; font-size: .85rem; font-weight: var(--heading-weight); cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25);
  transition: filter var(--motion-quick) var(--ease-standard), transform var(--motion-instant) var(--ease-standard), background var(--motion-medium) var(--ease-standard);
}
.wm-add-set span { font-size: 1.3rem; font-weight: var(--display-weight); line-height: 1; transition: transform var(--motion-medium) var(--ease-standard); }
.wm-add-set:focus-visible { filter: brightness(1.08); }
.wm-add-set:focus-visible span { transform: rotate(90deg); }
/* Press: settle to .985 with a short tone shift (the fill dims a step). */
.wm-mode-buttons button:active, .wm-reset:active:not(:disabled) { transform: scale(.985); background: #1d201b; }
.wm-add-set:active:not(:disabled) { transform: scale(.985); filter: brightness(.92); }
.wm-add-set:disabled { opacity: .45; cursor: default; filter: none; }
.wm-example-note { margin: 1rem 0 0; --study-disclosure-ink: #9ca393; }
.wm-example-log { padding: 2rem 0 0; }
.wm-log-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wm-log-heading .wm-kicker { margin-bottom: .35rem; }
.wm-log-heading h3 { margin: 0; font: var(--display-weight) 1.3rem / 1.2 var(--font-text); letter-spacing: var(--track-heading); }
.wm-reset {
  min-height: 44px; padding: .6rem .9rem; border: 1px solid var(--wm-line); border-radius: 6px; color: #dfdfd4; background: transparent;
  font: inherit; font-size: var(--text-label); cursor: pointer;
  transition: border-color var(--motion-quick) var(--ease-standard), background var(--motion-quick) var(--ease-standard), transform var(--motion-instant) var(--ease-standard);
}
.wm-reset:focus-visible { border-color: rgb(244 240 233 / .35); }
.wm-reset:disabled { opacity: .4; cursor: default; }
.wm-log-empty { padding: 2rem 0 1.5rem; margin: 0; max-width: 48ch; color: var(--wm-muted); font-size: .9rem; }
.wm-log-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1.5rem); align-items: end; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.wm-log-bars:empty { display: none; }
.wm-log-bars li { display: flex; flex-direction: column; justify-content: end; min-width: 0; font-variant-numeric: tabular-nums; }
.wm-log-bar-space { display: flex; align-items: end; height: 130px; border-bottom: 1px solid #aa704e; }
.wm-log-bar { display: block; width: 100%; height: max(4px, calc(var(--wm-bar) * 100%)); border: 1px solid #ffb181; border-bottom: 0; border-radius: 4px 4px 0 0; background: linear-gradient(#bf784d, #2b241c); transform: scaleY(var(--wm-log-reveal, 1)); transform-origin: bottom; transition: height var(--motion-medium) var(--ease-standard); }
.wm-log-bar-label { margin-top: .65rem; font-size: var(--text-floor); color: #9a9e92; }
.wm-log-bar-value { color: #e5e4d9; font-size: .85rem; overflow-wrap: anywhere; }
.wm-log-bar-unit { color: #9fa396; font-size: var(--text-floor); }
.wm-log-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--wm-line); padding: 1.2rem 0; color: var(--wm-muted); font-size: .78rem; }
.wm-log-bottom p { margin: 0; }
.wm-log-bottom > p:last-child { color: var(--wm-paper); }
.wm-log-context { margin: .8rem 0 0; max-width: 70ch; --study-disclosure-ink: #9ca093; }
.wm-editorial-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 3rem; align-items: end; margin-bottom: 2.5rem; }
.wm-editorial-heading > .wm-kicker { grid-column: 1 / -1; margin: 0; }
.wm-editorial-heading > p:last-child { margin: 0 0 .3rem; max-width: 43ch; color: var(--wm-muted); font-size: 1rem; }
.theme-workmetric .wm-editorial-heading h2 { font-size: clamp(2.3rem, 4.7vw, 4rem); }
.wm-history-note { margin: 1.75rem 0 0; --study-disclosure-ink: #aaa99e; }
.wm-pro-preview { max-width: 1000px; margin: 0; }
.wm-pro-preview > img, .wm-pro-preview .project-image-open { width: 100%; height: auto; aspect-ratio: 15 / 8; border-radius: 12px; }
.wm-pro-preview figcaption { margin-top: 1.2rem; color: var(--wm-paper); font-size: .92rem; }
.wm-pro-preview figcaption strong { font-weight: var(--heading-weight); }
.wm-pro-preview figcaption p { margin: .3rem 0 0; color: var(--wm-muted); font-size: .8rem; }
.wm-private { border-top: 1px solid var(--wm-line); }
.wm-private-grid { display: grid; grid-template-columns: 1fr .7fr; gap: 3rem; }
.wm-private-copy > p { margin: 0 0 2rem; max-width: 32ch; color: #c5c4b8; font-size: 1.2rem; }
.wm-private-copy dl { margin: 0 0 2rem; }
.wm-private-copy dl > div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--wm-line); padding: .8rem 0; font-size: .85rem; }
.wm-private-copy dt { color: #959a8d; }
.wm-private-copy dd { margin: 0; color: #e0dfd1; }
.theme-workmetric .wm-legal { padding: 0 0 3rem; }
.theme-workmetric .wm-related { padding: 3rem 0 5rem; border-top: 1px solid var(--wm-line); }
.theme-workmetric .wm-related .project-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (hover: hover) and (pointer: fine) {
  .wm-mode-buttons button:hover { color: #f4f0e9; background: #242820; }
  .wm-add-set:hover:not(:disabled) { filter: brightness(1.08); }
  .wm-add-set:hover:not(:disabled) span { transform: rotate(90deg); }
  .wm-reset:hover:not(:disabled) { border-color: rgb(244 240 233 / .35); }
}

@media (max-width: 800px) {
  .wm-opening-grid, .wm-private-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .wm-study-heading { grid-template-columns: 1fr; gap: 1.4rem; }
  .wm-study-heading > p { max-width: 43ch; }
  .wm-instrument { --wm-inset: 1.6rem; grid-template-columns: 1fr; }
  .wm-instrument-visual { min-height: 470px; }
  .wm-plate-space { height: 255px; min-height: 255px; }
  .wm-plate-stack { width: 205px; height: 205px; top: 63%; }
  .wm-controls { border-left: 0; border-top: 1px solid var(--wm-line); }
  .wm-reading-value { font-size: 4rem; }
  .wm-measure-note { min-height: 0; }
  .wm-editorial-heading { grid-template-columns: 1fr; gap: 1.4rem; }
  .wm-editorial-heading > .wm-kicker { grid-column: auto; }
  .wm-log-bars { gap: .55rem; }
  .wm-log-bar-space { height: 100px; }
  /* The live readout: a zero-height sticky rail at the top of the controls. Its panel rests on the rail, so it sits
     just under the chapter bar once the rail sticks and over the end of the reading before that, never over a control.
     It fades in only while the reading's number has scrolled away (workmetric-experience.js sets data-wm-live). */
  .wm-live { --wm-live-h: 3.5rem; display: block; position: sticky; top: calc(var(--experience-sticky-top, 122px) + 8px + var(--wm-live-h)); z-index: 3; height: 0; margin: 0 -.55rem; }
  .wm-live-readout {
    position: absolute; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: baseline; column-gap: .9rem;
    height: var(--wm-live-h); padding: .35rem .8rem .45rem; border: 1px solid rgb(var(--wm-tone) / .3); border-radius: 10px;
    background: rgb(20 22 19 / .9); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: 0 14px 30px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .05);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); pointer-events: none;
    transition: opacity var(--motion-medium) var(--ease-standard), transform var(--motion-medium) var(--ease-standard), visibility 0s linear var(--motion-medium);
  }
  .wm-live[data-wm-live="on"] .wm-live-readout { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .wm-live-value { margin: 0; color: var(--wm-paper); font-size: 1.45rem; line-height: 1.15; letter-spacing: var(--track-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .wm-live-unit { font-size: var(--text-caption); letter-spacing: normal; color: rgb(var(--wm-tone)); }
  .wm-live-equation { margin: 0; justify-self: end; color: #b8bab0; font-size: var(--text-caption); font-variant-numeric: tabular-nums; text-align: right; }
  .wm-live-meter { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; margin-top: .4rem; }
  .wm-live-meter > i { height: 3px; border-radius: 1px; background: #30352d; transition: background var(--motion-quick) var(--ease-standard), box-shadow var(--motion-quick) var(--ease-standard); }
  .wm-live-meter > i.is-lit { background: rgb(var(--wm-tone)); box-shadow: 0 0 6px rgb(var(--wm-tone) / .35); }
}
@media (max-width: 440px) {
  .theme-workmetric .wm-section { padding: 4rem 0; }
  .theme-workmetric .wm-section h2 { font-size: clamp(2.1rem, 8.8vw, 2.7rem); }
  .wm-instrument { --wm-inset: 1.15rem; border-radius: 14px; }
  .wm-instrument-topline { padding-block: 1rem; }
  .wm-instrument-visual { min-height: 420px; }
  .wm-plate-space { height: 215px; min-height: 215px; }
  .wm-plate-stack { width: 165px; height: 165px; top: 67%; }
  .wm-reading { padding-block: 1.25rem .3rem; }
  .wm-reading-value { font-size: 3.5rem; }
  .wm-scale-note { margin-block: .5rem 1rem; }
  .wm-live { margin: 0 -.4rem; }
  .wm-live-readout { padding-inline: .7rem; column-gap: .6rem; }
  .wm-live-value { font-size: 1.3rem; }
  .wm-mode-buttons { gap: 3px; }
  .wm-log-bars { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
  .wm-log-bar-space { height: 85px; }
  .theme-workmetric .wm-related .project-related-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-log-bar, .wm-mode-buttons button, .wm-plate, .wm-add-set, .wm-add-set span, .wm-reset, .wm-live-readout, .wm-live-meter > i, .wm-instrument-topline > span { transition: none; }
  .wm-study button:active, .wm-add-set span { transform: none !important; }
  .wm-live-readout { transform: none; }
}
@media (forced-colors: active) {
  .wm-plate-space, .wm-scale-note { display: none; }
  .wm-instrument-visual { min-height: 0; justify-content: flex-start; }
  .wm-instrument, .wm-controls, .wm-mode-buttons, .wm-mode-buttons button, .wm-add-set, .wm-reset, .wm-log-bar, .wm-live-readout { border: 1px solid CanvasText; }
  .wm-live-readout { backdrop-filter: none; background: Canvas; }
  .wm-live-meter { display: none; }
  .wm-mode-buttons button[aria-pressed="true"] { outline: 2px solid Highlight; }
  .wm-factor input[type="range"] { appearance: auto; -webkit-appearance: auto; }
  .wm-factor input[type="range"]::-webkit-slider-thumb { appearance: auto; -webkit-appearance: auto; }
  .wm-reading-value, .wm-reading-unit, .wm-measure-note, .wm-example-note, .wm-log-context, .wm-instrument-topline { color: CanvasText; }
}