/* Portfolio engines. They take the brand's colours (--b-*) when set, else Jefi's. */
.wk-brand, .dm { --e-bg: var(--b-bg); --e-ink: var(--b-ink); --e-acc: var(--b-acc); --e-soft: var(--b-soft); --e-on: var(--b-on); --e-d: var(--b-d); --e-t: var(--b-t); }
[data-wq], [data-wi], [data-wc], [data-wp], [data-wd], [data-wk] { --e-bg: var(--b-bg, var(--paper)); --e-ink: var(--b-ink, var(--ink)); --e-acc: var(--b-acc, var(--orange)); --e-soft: var(--b-soft, var(--stone)); --e-on: var(--b-on, #fff); --e-d: var(--b-d, var(--display)); --e-t: var(--b-t, var(--text)); }
.wk-brand { background: var(--b-bg); color: var(--b-ink); border-radius: 24px; padding: clamp(16px, 2.4vw, 28px); font-family: var(--b-t); }

/* quiz */
.wq { font-family: var(--e-t); color: var(--e-ink); }
.wq__step { display: grid; gap: 14px; animation: wkIn .35s ease both; }
.wq__top { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.wq__bar { height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--e-ink) 12%, transparent); overflow: hidden; } .wq__bar i { display: block; height: 100%; background: var(--e-acc); transition: width .4s ease; }
.wq__n { font-size: 13px; opacity: .75; }
.wq__q { margin: 0; font-family: var(--e-d); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; font-weight: 500; }
.wq__opts { display: grid; gap: 8px; }
.wq__opt { font: inherit; font-size: 17px; text-align: left; padding: 15px 18px; border-radius: 14px; border: 0; background: var(--e-soft); color: var(--e-ink); cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s, transform .15s; }
.wq__opt:hover { box-shadow: inset 0 0 0 2px var(--e-ink); transform: translateY(-1px); }
.wq__opt[aria-pressed="true"] { background: var(--e-acc); color: var(--e-on); }
.wq__back { justify-self: start; font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; color: var(--e-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 4px 0; }
.wq__k { margin: 0; font-size: 13px; font-weight: 600; opacity: .75; } .wq__d { margin: 0; font-size: 17px; line-height: 1.45; } .wq__cta { margin: 0; font-weight: 600; color: var(--e-acc); }
.wq__res { padding: 20px; border-radius: 16px; background: var(--e-soft); }

/* inbox */
.wi { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; font-family: var(--e-t); color: var(--e-ink); }
.wi__list { display: grid; gap: 6px; align-content: start; }
.wi__row { font: inherit; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 12px 14px; border-radius: 14px; border: 0; background: var(--e-soft); color: var(--e-ink); cursor: pointer; }
.wi.is-wait .wi__row { opacity: 0; } .wi.is-play .wi__row { animation: wkIn .4s ease both; animation-delay: var(--d); }
.wi__row[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--e-acc); }
.wi__ch { grid-row: span 2; align-self: center; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: var(--e-acc); color: var(--e-on); }
.wi__when { font-size: 12px; opacity: .7; } .wi__s { font-size: 15px; font-weight: 500; line-height: 1.3; }
.wi__view { padding: 20px; border-radius: 16px; background: var(--e-soft); min-height: 220px; }
.wi__meta { margin: 0 0 10px; font-size: 12px; opacity: .7; } .wi__subj { margin: 0; font-family: var(--e-d); font-size: 22px; line-height: 1.2; font-weight: 500; } .wi__from { margin: 4px 0 14px; font-size: 13px; opacity: .7; }
.wi__body { margin: 0; font-size: 16px; line-height: 1.55; }
.wi__bubble { margin: 0; max-width: 34ch; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--e-acc); color: var(--e-on); font-size: 15px; line-height: 1.4; }
.wk-copy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .wk-copy .input { flex: 1 1 220px; }
@media (max-width: 720px) { .wi { grid-template-columns: 1fr; } }

/* chat */
.wc { font-family: var(--e-t); color: var(--e-ink); border-radius: 18px; background: var(--e-soft); overflow: hidden; max-width: 520px; }
.wc__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: var(--e-ink); color: var(--e-bg); font-size: 14px; }
.wc__on { font-size: 12px; opacity: .8; }
.wc__log { display: grid; gap: 8px; padding: 16px; max-height: 300px; min-height: 160px; overflow-y: auto; align-content: start; }
.wc__msg { margin: 0; max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.4; animation: wkIn .3s ease both; }
.wc__msg--bot { background: var(--e-bg); justify-self: start; border-bottom-left-radius: 4px; } .wc__msg--me { background: var(--e-acc); color: var(--e-on); justify-self: end; border-bottom-right-radius: 4px; }
.wc__typing { opacity: .6; font-style: italic; }
.wc__opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.wc__opt { font: inherit; font-size: 14px; padding: 9px 13px; border-radius: 999px; border: 0; background: var(--e-bg); color: var(--e-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--e-ink) 30%, transparent); cursor: pointer; }
.wc__opt:hover { box-shadow: inset 0 0 0 1.5px var(--e-ink); }

/* pipeline */
.wp__cols { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.wp__col { background: var(--tile, var(--stone)); border-radius: 16px; padding: 10px; display: grid; gap: 6px; align-content: start; min-height: 220px; }
.wp__h { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.wp__card { font: inherit; text-align: left; display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 0; background: var(--bg, var(--paper)); color: var(--fg, var(--ink)); cursor: pointer; animation: wkIn .3s ease both; }
.wp__card b { font-size: 15px; font-weight: 600; } .wp__card span { font-size: 13px; } .wp__note { opacity: .7; }
.wp__card:hover { box-shadow: inset 0 0 0 2px var(--orange); }
.wp__hint { margin-top: 10px; }

/* report */
.wd { background: var(--bg, var(--paper)); border-radius: 22px; padding: clamp(16px, 2.4vw, 28px); }
.wd__top { margin: 0 0 14px; font-size: 14px; color: var(--fg-soft); }
.wd__ks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wd__k { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--tile, var(--stone)); }
.wd__k:first-child { background: var(--orange); color: #fff; } .wd__k:first-child .wd__n { color: rgba(255,255,255,.85); }
.wd__v { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; font-variant-numeric: tabular-nums; }
.wd__l { font-size: 14px; font-weight: 500; } .wd__n { font-size: 13px; color: var(--fg-soft); }
.wd__chart { margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--tile, var(--stone)); } .wd__cl { margin: 0 0 6px; font-size: 14px; font-weight: 500; }
.wd svg { width: 100%; height: auto; display: block; }
.wd__bar { fill: color-mix(in srgb, var(--fg, #121212) 22%, transparent); } .wd__bar--on { fill: var(--orange); }
.wd__t { fill: var(--fg, #121212); font: 600 13px var(--text); text-anchor: middle; font-variant-numeric: tabular-nums; } .wd__m { fill: var(--fg-soft, #4a4844); font: 400 12px var(--text); text-anchor: middle; }
@media (max-width: 720px) { .wd__ks { grid-template-columns: 1fr 1fr; } }

/* calculator */
.wk { background: var(--bg, var(--paper)); border-radius: 22px; padding: clamp(18px, 2.6vw, 30px); display: grid; gap: 16px; max-width: 760px; }
.wk__t { margin: 0; font-weight: 600; }
.wk-field { display: grid; gap: 6px; } .wk-field > span:first-child { font-size: 15px; }
.wk-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.wk-row output { font-family: var(--display); font-size: 24px; min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.wk__big { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; }
.wk__how { margin: 0; }

/* teardown */
.ba--work { aspect-ratio: 16 / 9; }
.wb-old { position: absolute; inset: 0; background: #5b5b5b; color: #fff; font-family: Georgia, serif; display: flex; flex-direction: column; font-size: clamp(8px, 1.4cqi, 15px); }
.wb-old__nav { display: flex; gap: 3em; padding: 3% 4%; background: rgba(0,0,0,.35); font-family: Arial, sans-serif; font-size: .8em; letter-spacing: .08em; }
.wb-old__body { flex: 1; display: grid; place-content: center start; gap: .4em; padding: 0 5%; max-width: 40%; }
.wb-old__h { margin: 0; font-size: 2.2em; line-height: 1.1; } .wb-old__btn { justify-self: start; padding: .5em 1.2em; background: #ddd; color: #333; font-family: Arial, sans-serif; font-size: .8em; }
.wb-new { position: absolute; inset: 0; background: var(--b-bg); color: var(--b-ink); font-size: clamp(8px, 1.4cqi, 15px); }
.wb-new img { position: absolute; right: 0; top: 0; width: 55%; height: 100%; object-fit: cover; }
.wb-new__body { position: absolute; left: 47%; top: 50%; transform: translate(-100%, -50%); width: 40%; display: grid; gap: .8em; padding-right: 4%; }
.wb-new__h { margin: 0; font-family: var(--b-d); font-size: 2.4em; line-height: 1.05; font-weight: 500; }
.wb-new__btn { justify-self: start; padding: .7em 1.3em; border-radius: 999px; background: var(--b-acc); color: var(--b-on); font-family: var(--b-t); font-weight: 600; font-size: .9em; }
@media (max-width: 640px) { .ba--work { aspect-ratio: 4 / 3.4; } .wb-new__body { width: 46%; left: 50%; } }

@keyframes wkIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .wq__step, .wi.is-play .wi__row, .wc__msg, .wp__card { animation: none; } .wi.is-wait .wi__row { opacity: 1; } }