/* Embedwise proposal J, the four hero-panel variants (A+C, A, B, C).
   Rules: the panel box never changes height; only transform and opacity animate;
   every text slot is sized for its longest value; real buttons only where things are pressable. */

.panel{background:var(--navy);color:var(--text);padding:clamp(16px,2vw,26px);position:relative;display:flex;flex-direction:column;height:640px}
.panel h2{font-family:var(--head);font-weight:700;font-size:clamp(16px,1.4vw,19px);letter-spacing:-.015em;color:#fff;margin:0 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.panel .ctl{background:none;border:0;padding:0;color:var(--mut);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;cursor:pointer;font-family:var(--sans)}
.panel .ctl:hover{color:#fff}
.panel .ctl.is-off{visibility:hidden}
.panel .fine{color:var(--mut);margin-top:auto;padding-top:12px;border-top:1px solid var(--line);max-width:none;font-size:13px}
.panel :focus-visible{outline-color:var(--gold)}
@media (max-width:1079px){.panel{height:auto;min-height:560px}}

/* ---------- job picker (variant A+C, and C) ---------- */
.picker{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.pick{font:600 13px/1 var(--sans);color:var(--text);background:none;border:1.5px solid var(--line);padding:9px 12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pick:hover{border-color:var(--mut)}
.pick.is-on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.pick.is-done{border-color:var(--gold);color:var(--gold)}
.pick.is-done.is-on{color:var(--gold-ink)}

/* ---------- stations (A) ---------- */
.stations{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:2px 0 14px}
.stations::before{content:"";position:absolute;left:8px;right:8px;top:17px;height:1px;background:var(--line)}
.station{position:relative;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding-top:36px;transition:color .3s}
.station::before{content:"";position:absolute;left:8px;top:12px;width:11px;height:11px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s;transform-origin:center}
.station.is-done{color:var(--text)}.station.is-done::before{background:var(--gold)}
.station.is-live{color:#fff}.station.is-live::before{background:var(--gold);transform:scale(1.2);box-shadow:0 0 0 2.5px var(--navy),0 0 0 4px var(--gold)}

/* the desk: three fixed layers in one box, only one visible */
.desk3{position:relative;height:398px}
.layer{position:absolute;inset:0;overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.layer.is-on{opacity:1;transform:none;pointer-events:auto}

/* request card */
.req{background:var(--panel);height:100%;padding:18px 20px;display:flex;flex-direction:column}
.req .from{font-family:var(--mono);font-size:11px;color:var(--mut);letter-spacing:.06em}
.req .subj{font-family:var(--head);font-weight:700;font-size:19px;color:#fff;margin:8px 0 10px;letter-spacing:-.015em}
.req .body{color:var(--text);font-size:15px;line-height:1.5;max-width:52ch}
.req .meta{margin-top:auto;font-size:12.5px;color:var(--mut)}

/* draft document */
.doc{background:#FDFDFB;color:var(--ink);height:100%;padding:18px 22px;display:flex;flex-direction:column;position:relative}
.doc .kind{display:flex;justify-content:space-between;gap:8px;white-space:nowrap;font-family:var(--mono);font-size:10.5px;color:var(--calm);letter-spacing:.06em;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.doc h3{font-family:var(--head);font-weight:800;font-size:19px;letter-spacing:-.02em;margin:12px 0 8px;color:var(--ink)}
.doc .rows{display:grid;gap:0}
.doc .r{display:grid;grid-template-columns:1fr auto;gap:10px;padding:5px 0;border-bottom:1px solid var(--hair-2);font-size:13.5px;color:var(--ink-2);opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.doc .r b{color:var(--ink);font-weight:600}
.doc .r .n{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;white-space:nowrap}
.doc .r.new{background:var(--gold-soft);margin:0 -8px;padding-left:8px;padding-right:8px}
.doc.is-filled .r{opacity:1;transform:none}
.doc .r:nth-child(1){transition-delay:.05s}.doc .r:nth-child(2){transition-delay:.25s}.doc .r:nth-child(3){transition-delay:.45s}.doc .r:nth-child(4){transition-delay:.65s}.doc .r:nth-child(5){transition-delay:.85s}
.doc .total{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:10px;border-top:2px solid var(--ink);font-family:var(--head);font-weight:800;font-size:17px;color:var(--ink)}
.doc .total span{font-variant-numeric:tabular-nums}
.doc .stamp{position:absolute;right:22px;top:46%;font:800 12px/1 var(--mono);letter-spacing:.14em;color:var(--good);border:2.5px solid var(--good);padding:8px 10px;transform:rotate(-8deg) scale(1.4);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.3),opacity .2s}
.doc .stamp.is-on{opacity:1;transform:rotate(-8deg) scale(1)}
.doc .stamp.back{color:var(--bad);border-color:var(--bad)}

/* review pane sits beside the doc on desktop: a second column inside the layer */
.review{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 212px;gap:12px}
.review .doc{height:auto;min-height:0;overflow:hidden}
.rv{background:var(--panel);border-left:4px solid var(--gold);padding:16px 16px 14px;display:flex;flex-direction:column}
.rv .turn{font-family:var(--head);font-weight:800;font-size:16px;color:var(--gold)}
.rv .note{font-size:14px;line-height:1.45;color:var(--text);margin:8px 0 14px;min-height:6.6em}
.rv .acts{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.rv.is-done{border-left-color:var(--good)}
.rv .big{font-family:var(--head);font-weight:800;font-size:clamp(22px,2vw,26px);letter-spacing:-.025em;color:#fff;line-height:1.1;margin:8px 0 6px}
.rv .who{font-size:14px;color:var(--text)}
.rv .who b{color:var(--gold)}
.rv .rcpt{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--line);font-size:13px;color:var(--mut);display:grid;gap:5px}
.rv .rcpt li::before{content:"";display:inline-block;width:6px;height:6px;background:var(--good);margin:0 8px 1px 0}
.rv .next{margin-top:auto;padding-top:10px;font-size:13px;color:var(--mut)}
.rv .btn{width:100%}
.rv .hint{font-size:12px;color:var(--mut);margin-top:8px;text-align:center}
.rv{position:relative}
.rv .ptr{position:absolute;left:0;top:0;width:22px;height:26px;opacity:0;pointer-events:none;transform:translate(40%,20%);transition:transform .65s cubic-bezier(.3,.7,.3,1),opacity .25s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M3 2l14 11-6 1 4 8-3 1.4-4-8-5 4z' fill='%23fff' stroke='%23141A2E' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;z-index:3}
.rv .ptr.is-on{opacity:1}
.rv .btn.is-pressed,.rv .btn-line.is-pressed{transform:scale(.96);filter:brightness(.92)}
.rv .btn,.rv .btn-line{transition:transform .15s,filter .15s}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(224,161,28,0)}50%{box-shadow:0 0 0 5px rgba(224,161,28,.35)}}
.layer.is-on .rv .btn{animation:nudge 1.6s ease-in-out 1.2s 2}
.rv .btn-line{width:100%;text-align:center}
.done{background:var(--panel);height:100%;padding:18px 20px;display:flex;flex-direction:column}
.done .big{font-family:var(--head);font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.025em;color:#fff;line-height:1.1;margin:6px 0 10px}
.done .who{font-size:15px;color:var(--text)}
.done .who b{color:var(--gold)}
.done .next{margin-top:auto;font-size:13.5px;color:var(--mut)}

/* ---------- work log (B) ---------- */
.logwrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;height:454px}
.log{position:relative;height:100%;overflow:hidden}
.log ol{list-style:none;margin:0;padding:0;position:absolute;inset:0;transition:transform .5s var(--ease)}
.log li{height:76px;box-sizing:border-box;background:var(--panel);margin-bottom:8px;padding:11px 14px;display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start;transition:opacity .4s}
.log li.is-live{outline:1.5px solid var(--gold);outline-offset:-1.5px}
.log li.is-out{opacity:0}
.log .t{font-family:var(--mono);font-size:12px;color:var(--mut);padding-top:3px}
.log .j{font-size:14.5px;line-height:1.35;color:var(--text)}
.log .v{display:block;font-size:12.5px;margin-top:3px;font-weight:700;color:var(--gold)}
.log .v.back{color:var(--mut)}
.log .v.wait{color:var(--mut);font-weight:500}
.log .j .typing{display:inline-block;width:2px;height:14px;background:var(--gold);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.rec{background:#0B0F1C;display:flex;flex-direction:column;padding:12px}
.rec video{width:100%;height:auto;aspect-ratio:1/1;background:#0B0F1C;display:block}
.rec .cap{font-size:12.5px;color:var(--mut);margin-top:10px;line-height:1.4}
.rec .cap b{color:#fff;display:block;font-family:var(--head);font-size:14px}

/* ---------- pick a job (C) ---------- */
.cwrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;height:420px}
.cwrap .doc{height:100%}
.prov{background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:12px}
.prov h4{font-family:var(--head);font-weight:800;font-size:14px;color:#fff;margin:0 0 4px}
.prov p{font-size:13.5px;line-height:1.45;color:var(--mut);margin:0;min-height:4.4em}
.prov .btn{margin-top:auto;width:100%}
.prov .after{font-size:13px;line-height:1.45;color:var(--gold);font-weight:700;min-height:1.45em}

/* ---------- phone ---------- */
@media (max-width:760px){
  .stations{margin-bottom:10px}
  .station{font-size:9.5px;letter-spacing:.08em}
  .desk3{height:540px}
  .review{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px}
  .review .doc{padding:14px 16px}
  .doc h3{font-size:17px;margin:8px 0 6px}
  .doc .r{font-size:13px;padding:5px 0}
  .rv{padding:12px 14px 12px;border-left-width:3px}
  .rv .note{min-height:0;margin:6px 0 10px;font-size:13.5px}
  .rv .acts{flex-direction:row}
  .rv .rcpt{margin-top:8px}
  .rv .next{padding-top:8px}
  .rv .acts .btn,.rv .acts .btn-line{width:auto;flex:1}
  .logwrap{grid-template-columns:1fr;height:auto}
  .log{height:344px}
  .log li{height:78px}
  .rec{margin-top:10px}
  .cwrap{grid-template-columns:1fr;height:auto}
  .cwrap .doc{height:320px}
  .prov{min-height:0}
  .prov .after{min-height:3.2em}
  .prov p{min-height:0}
}