/* Se il JS non parte, niente resta nascosto: le regole che azzerano opacità o
   larghezza valgono solo sotto `.js`, aggiunta da uno script in testa. */
/* ============================================================================
   THE ASSISTANT, AS A CHARACTER
   ----------------------------------------------------------------------------
   A cream blob with a tuft, a heavy dark outline and very large eyes. It lives
   in the top bar and it is the only ornament in the whole direction.

   ONE DRAWING, EIGHT FACES. Every expression is a group inside the same SVG;
   `data-mood` on the button shows one and hides the rest. No sprite sheet, no
   second request, and the body never redraws — only the face changes, which is
   what makes it read as the same creature in a different state.

   THE MOODS ARE STATES, NOT DECORATION. Each one is tied to something true:

     idle       nothing is pending
     surprised  something is genuinely waiting on the client  (+ the hop)
     thinking   an answer is being composed
     happy      the answer just landed
     wink       you are hovering it
     sleepy     you have read everything; it dozes off
     cool       zero open questions on the whole page
     love       you confirmed an interview

   NO COUNTER. A number stuck on its head dirties the drawing and duplicates
   what the amber badges in the page already say. The creature signals with
   posture: it is surprised and it hops, or it is not.

   THE EYES FOLLOW THE POINTER, and that is the only joke it is allowed.
   ============================================================================ */

.buddy-wrap { position: relative; flex: none; }

.buddy-btn {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 14px;
  transition: background .2s var(--ease);
  --skin:  oklch(0.985 0.010 92);
  --line-b:oklch(0.255 0.045 250);
  --mouth: oklch(0.700 0.150 42);
  --blush: oklch(0.800 0.090 22);
  --heart: oklch(0.660 0.190 25);
}
.buddy-btn:hover { background: oklch(1 0 0 / .55); }

/* Sulla porta d'ingresso la creatura non è un comando: non c'è ancora niente
   da aprire. Fa da ritratto accanto al nome di chi ti segue — stessa faccia,
   stessi occhi che seguono il puntatore, nessun clic promesso. */
.buddy-btn.as-figure { width: 58px; height: 58px; cursor: default; background: transparent; }
.buddy-btn.as-figure:hover { background: transparent; }
.buddy-btn.as-figure .buddy { width: 52px; height: 52px; }

.buddy { display: block; width: 40px; height: 40px; overflow: visible;
         transition: transform .22s var(--ease-back); }
.buddy-btn:active .buddy { transform: scale(.93); }

.buddy .skin   { fill: var(--skin); stroke: var(--line-b); stroke-width: 3.4; stroke-linejoin: round; }
.buddy .seam   { fill: none; stroke: var(--line-b); stroke-width: 1.5; opacity: .55; }
.buddy .ink    { fill: var(--line-b); }
.buddy .stroke { fill: none; stroke: var(--line-b); stroke-width: 4.2; stroke-linecap: round; }
.buddy .mouth  { fill: var(--mouth); stroke: var(--line-b); stroke-width: 2.6; stroke-linejoin: round; }
.buddy .blush  { fill: var(--blush); opacity: .75; }
.buddy .heart  { fill: var(--heart); }
.buddy .shine  { fill: oklch(1 0 0); opacity: .9; }

/* ---- Mood switching ------------------------------------------------------ */
.buddy .mood { display: none; }
.buddy-btn[data-mood="idle"]      .m-idle,
.buddy-btn[data-mood="happy"]     .m-happy,
.buddy-btn[data-mood="wink"]      .m-wink,
.buddy-btn[data-mood="surprised"] .m-surprised,
.buddy-btn[data-mood="thinking"]  .m-thinking,
.buddy-btn[data-mood="sleepy"]    .m-sleepy,
.buddy-btn[data-mood="cool"]      .m-cool,
.buddy-btn[data-mood="love"]      .m-love { display: block; }
.buddy-btn:not([data-mood]) .m-idle { display: block; }

/* Hovering swaps the face to a wink unless the creature is busy saying
   something more important — a mood set by the page always wins. */
.buddy-btn:hover:not([data-mood="thinking"]):not([data-mood="surprised"]):not([data-mood="love"]) .mood { display: none; }
.buddy-btn:hover:not([data-mood="thinking"]):not([data-mood="surprised"]):not([data-mood="love"]) .m-wink { display: block; }

/* ---- Life ---------------------------------------------------------------- */
.buddy-float { display: block; animation: float 3.6s var(--ease) infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2.5px) rotate(-2.5deg); } }

/* Blink: two frames out of a long loop. The eyelid is the body colour dropped
   over the eyes, so it works for every mood that has round eyes. */
.buddy .lids { animation: blink 6.8s infinite; }
@keyframes blink { 0%, 93.5%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
.buddy .lids rect { fill: var(--skin); }
.buddy .lids { transform-box: fill-box; transform-origin: 50% 0%; }

/* Something is waiting: three hops, then a long silence. It does not escalate
   and it never repeats once the panel has been opened. */
.buddy-btn.pending .buddy-float { animation: nudge 4.6s var(--ease) infinite; }
@keyframes nudge {
  0%, 60%, 100% { transform: translateY(0) rotate(0deg); }
  64% { transform: translateY(-8px) rotate(-8deg) scale(1.04); }
  70% { transform: translateY(0) rotate(0deg) scale(.98); }
  75% { transform: translateY(-5px) rotate(6deg); }
  81% { transform: translateY(0) rotate(0deg); }
  85% { transform: translateY(-2px) rotate(-2deg); }
}

/* The little marks that ride beside the head: sparkle, question mark. */
.buddy .mark { animation: markPop 2.4s var(--ease) infinite; transform-origin: 76px 20px; }
@keyframes markPop { 0%, 100% { transform: scale(1) translateY(0); opacity: 1; } 50% { transform: scale(1.15) translateY(-2px); opacity: .75; } }

.buddy-btn[aria-expanded="true"] { background: var(--accent-soft); }
.buddy-btn[aria-expanded="true"] .buddy-float { animation: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .buddy-float, .buddy .lids, .buddy .mark, .buddy-btn.pending .buddy-float { animation: none !important; }
  .buddy .lids { transform: scaleY(0); }
}

/* ============================================================================
   Platform — "Harbor" direction, PP (partner portal)
   ----------------------------------------------------------------------------
   Halfway between Loom and Petrol, on purpose and in both senses.

   COLOUR: Loom's room was warm stone; Petrol's was deep teal. Harbor keeps
   Loom's structure — a light room with paper laid on it — and swaps the
   temperature to Petrol's family: cold slate at 90% lightness, petrol ink,
   and Petrol's aqua kept as the live signal. One warm note survives (amber),
   and it is spent on exactly one thing: what is waiting on the client. So the
   page reads as the same product as the dark internal instrument, seen in
   daylight, rather than as a different brand.

   DENSITY: Loom was airy and its candidate page carried a conversation and
   little else. Harbor is full. The spacing scale is tighter, the grid is 12
   columns, and the candidate screen shows everything we actually hold on a
   person — skills against the brief, the full career, education, languages,
   certifications, references we called, interview notes, documents, the stage
   of the search and the slots on offer.

   THE ASSISTANT STAYS. Marta is no longer a voice the page is written in —
   at this density that would fight the data — she is a panel that travels
   with you and answers about the person on screen. That is also the shape
   this needs to be if the panel is later wired to a real model: a bounded
   assistant with a visible scope, not a tone of voice sprayed over the UI.

   Behaviour in assets/harbor.js. No build step, no CDN.
   ============================================================================ */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fraunces-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/fraunces-italic-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }

:root {
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The room: cold slate, light. Paper sits above it, as in Loom. */
  --room:   oklch(0.902 0.014 218);
  --room-2: oklch(0.874 0.016 216);
  --card:   oklch(0.962 0.008 216);
  --card-2: oklch(0.936 0.010 214);

  --ink:    oklch(0.265 0.042 222);
  --muted:  oklch(0.432 0.032 222);
  --faint:  oklch(0.498 0.026 220);
  --line:   oklch(0.836 0.016 216);
  --line-2: oklch(0.770 0.022 214);

  /* Petrol, from the internal instrument. Clears 6:1 on card as text. */
  --accent:      oklch(0.475 0.098 210);
  --accent-deep: oklch(0.372 0.085 212);
  --accent-soft: oklch(0.906 0.030 208);
  --accent-line: oklch(0.820 0.048 208);

  /* Aqua: the live signal, same role it had on the dark canvas. Fills only. */
  --aqua:      oklch(0.700 0.110 200);
  --aqua-ink:  oklch(0.470 0.098 202);
  --aqua-soft: oklch(0.910 0.040 200);

  /* Amber: the one warm note, and only ever "your move". */
  --amber:      oklch(0.755 0.115 62);
  --amber-ink:  oklch(0.492 0.110 58);
  --amber-soft: oklch(0.920 0.045 62);

  --ok:      oklch(0.470 0.090 160);
  --ok-soft: oklch(0.912 0.036 160);
  --no:      oklch(0.510 0.140 28);
  --no-soft: oklch(0.925 0.038 28);

  /* Tighter than Loom — this direction has to carry a full profile. */
  --s1: 6px; --s2: 10px; --s3: 16px; --s4: 22px; --s5: 32px; --s6: 48px; --s7: 68px;

  --r-sm:   10px;
  --r:      16px;
  --r-lg:   22px;
  --r-pill: 999px;
  --r-said: 16px 16px 16px 5px;
  --r-mine: 16px 16px 5px 16px;

  --shadow-1: 0 1px 2px oklch(0.265 0.042 222 / .06), 0 3px 12px oklch(0.265 0.042 222 / .06);
  --shadow-2: 0 2px 6px oklch(0.265 0.042 222 / .08), 0 16px 36px oklch(0.265 0.042 222 / .14);
  --ease:      cubic-bezier(.2, .7, .2, 1);
  --ease-back: cubic-bezier(.34, 1.42, .64, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--room); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-image:
    linear-gradient(oklch(0.265 0.042 222 / .026) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.265 0.042 222 / .026) 1px, transparent 1px);
  background-size: 30px 30px;
}
a { color: inherit; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
::selection { background: var(--aqua-soft); color: var(--ink); }

/* ---- Top bar ------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--s4);
  padding: 10px clamp(16px, 3vw, 34px);
  background: oklch(0.902 0.014 218 / .88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding .28s var(--ease), box-shadow .28s var(--ease);
}
.top.tight { padding-top: 6px; padding-bottom: 6px; box-shadow: 0 5px 18px oklch(0.265 0.042 222 / .10); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; letter-spacing: -.012em; flex: none; }
.brand .sub { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400;
              color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }
.mark {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px;
  font-weight: 800; font-size: 13px; color: var(--card);
  background: linear-gradient(145deg, var(--aqua), var(--accent-deep));
  box-shadow: 0 3px 12px oklch(0.475 0.098 210 / .32);
}
.nav { display: flex; gap: 2px; flex: 1; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px;
  text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500;
  border-radius: var(--r-pill); transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--ink); background: oklch(1 0 0 / .5); }
.nav a.on { color: var(--accent-deep); background: var(--card); font-weight: 650; box-shadow: var(--shadow-1); }
.nav a .n {
  margin-left: 7px; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; color: var(--card); background: var(--amber-ink);
}
.top .right { display: flex; align-items: center; gap: var(--s2); flex: none; }
.who { text-align: right; line-height: 1.22; }
.who .n { font-size: 13px; font-weight: 600; }
.who .o { font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .04em; }
.me { width: 36px; height: 36px; flex: none; display: grid; place-items: center; cursor: pointer;
      border-radius: 12px; font-size: 12px; font-weight: 700; color: var(--card);
      background: linear-gradient(145deg, var(--amber), var(--amber-ink)); }
@media (max-width: 900px) { .nav, .who { display: none; } }

/* ---- Frame --------------------------------------------------------------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: var(--s5) clamp(16px, 3vw, 34px) var(--s7); }
.wrap.mid { max-width: 1080px; }

.tag { display: inline-flex; align-items: center; gap: 6px;
       font-family: var(--font-mono); font-size: 10px; font-weight: 500;
       letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); flex: none; }
.tag.live .dot { animation: breathe 2.4s var(--ease) infinite; }

h1.display { font-family: var(--font-serif); font-weight: 600;
             font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -.028em; margin: 0 0 var(--s3); }
h1.display em { font-style: italic; color: var(--accent-deep); }
.lede { font-size: 16px; line-height: 1.68; color: var(--muted); max-width: 60ch; margin: 0; }

.h-sec { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s3);
         font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
         letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.h-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.h-sec .n { color: var(--accent-deep); font-weight: 700; }
.h-sec.warm .n { color: var(--amber-ink); }

/* ---- Grid ---------------------------------------------------------------- */
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3); align-items: start; }
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
@media (max-width: 1100px) { .c3,.c4{grid-column:span 6} .c5,.c7,.c8,.c9{grid-column:span 12} }
@media (max-width: 700px)  { .g12 > * { grid-column: span 12 !important; } }

.card { background: var(--card); border: 1px solid oklch(1 0 0 / .65); border-radius: var(--r-lg);
        box-shadow: var(--shadow-1); transition: box-shadow .28s var(--ease), transform .28s var(--ease); }
.card.pad { padding: var(--s4); }
.card.tight { padding: var(--s3); }
.card.quiet { background: var(--card-2); box-shadow: none; border-color: var(--line); }
.card.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card.ink { background: linear-gradient(165deg, oklch(0.300 0.048 220), oklch(0.245 0.040 222));
            border-color: transparent; color: oklch(0.96 0.01 216); }
.card.ink .h-sec { color: oklch(0.96 0.01 216 / .5); }
.card.ink .h-sec::after { background: oklch(1 0 0 / .14); }

/* ---- Buttons, chips, badges ---------------------------------------------- */
.btn { position: relative; overflow: hidden;
       display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       min-height: 44px; padding: 10px 20px; cursor: pointer;
       font-size: 14.5px; font-weight: 600; border: 1px solid transparent; border-radius: var(--r-pill);
       transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.btn:active { transform: scale(.975); }
.btn-primary { color: var(--card); background: var(--accent); box-shadow: 0 5px 16px oklch(0.475 0.098 210 / .28); }
.btn-primary:hover { background: var(--accent-deep); box-shadow: 0 9px 24px oklch(0.475 0.098 210 / .36); }
.btn-warm { color: var(--card); background: var(--amber-ink); box-shadow: 0 5px 16px oklch(0.492 0.110 58 / .28); }
.btn-warm:hover { box-shadow: 0 9px 24px oklch(0.492 0.110 58 / .38); }
.btn-soft { color: var(--ink); background: var(--card); border-color: var(--line-2); box-shadow: var(--shadow-1); }
.btn-soft:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-plain { color: var(--muted); background: transparent; }
.btn-plain:hover { color: var(--no); background: var(--no-soft); }
.btn-sm { min-height: 38px; padding: 8px 15px; font-size: 13.5px; }
.btn-xs { min-height: 32px; padding: 6px 12px; font-size: 12.5px; border-radius: var(--r-pill); }
@media (pointer: coarse) { .btn-sm, .btn-xs { min-height: 44px; } }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor;
          opacity: .22; transform: scale(0); animation: ripple .6s var(--ease) forwards; }

.link { color: var(--accent-deep); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--accent-line); }
.link:hover { border-bottom-color: var(--accent-deep); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
         font-size: 12px; font-weight: 600; white-space: nowrap; border-radius: var(--r-pill);
         border: 1px solid var(--line-2); color: var(--muted); background: var(--card); }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.you  { color: var(--amber-ink); background: var(--amber-soft); border-color: oklch(0.755 0.115 62 / .45); }
.badge.live { color: var(--aqua-ink);  background: var(--aqua-soft);  border-color: oklch(0.700 0.110 200 / .42); }
.badge.ok   { color: var(--ok); background: var(--ok-soft); border-color: oklch(0.470 0.090 160 / .35); }
.badge.on-ink { color: oklch(0.96 0.01 216); background: oklch(1 0 0 / .12); border-color: oklch(1 0 0 / .2); }

.chip { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; cursor: pointer;
        font-size: 13.5px; font-weight: 500; color: var(--muted);
        background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
        transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-1px); }
.chip.on { color: var(--card); background: var(--accent); border-color: var(--accent); font-weight: 600; }
@media (pointer: coarse) { .chip { min-height: 44px; } }

.code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: var(--faint); }

/* ---- Dense data atoms ----------------------------------------------------
   The point of this direction is fitting a whole person on one screen, so the
   small pieces are engineered to sit close together without turning into soup:
   every one of them pairs a mono label with a plain-language value. */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px var(--s3); margin: 0; font-size: 14px; }
.kv dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
         color: var(--faint); align-self: center; white-space: nowrap; }
.kv dd { margin: 0; text-align: right; font-weight: 550; }
.kv dd.warn { color: var(--amber-ink); }

/* Skills carry a strength bar, and the ones named in the brief are lit. This
   is the one place a measurement is allowed on the client's side of the table
   — it is about a tool, not about a person's worth. */
.skills { display: grid; gap: 8px; }
.skill { display: grid; grid-template-columns: 1fr 78px auto; align-items: center; gap: 11px; font-size: 13.5px; }
.skill .nm { font-weight: 550; }
.skill .bar { height: 5px; border-radius: 3px; background: oklch(0.265 0.042 222 / .12); overflow: hidden; }
.skill .bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--line-2);
                transition: width 1s var(--ease); }
.in .skill .bar i, .skills.in .skill .bar i { width: var(--lv, 50%); }
.skill.req .nm { color: var(--accent-deep); font-weight: 650; }
.skill.req .bar i { background: linear-gradient(90deg, var(--accent), var(--aqua)); }
.skill .yr { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); white-space: nowrap; }

/* Career, education, references — one list shape, three uses. */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; padding: 0 0 var(--s3) var(--s4); }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 9px; height: 9px;
                 border-radius: 50%; background: var(--card); border: 2px solid var(--line-2); }
.tl li.hi::before { background: var(--accent); border-color: var(--accent); }
.tl li::after { content: ""; position: absolute; left: 7px; top: 17px; bottom: 2px; width: 1px; background: var(--line); }
.tl li:last-child::after { display: none; }
.tl .role { font-size: 14.5px; font-weight: 650; }
.tl .co { font-size: 13.5px; color: var(--muted); }
.tl .when { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); letter-spacing: .04em; margin-top: 2px; }
.tl .did { font-size: 13.5px; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.tl .stack { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tl .stack span { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-deep);
                  background: var(--accent-soft); border: 1px solid var(--accent-line);
                  border-radius: 5px; padding: 2px 7px; }

.rows { display: flex; flex-direction: column; gap: var(--s2); }
.rowcard { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto;
           align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
           text-decoration: none; color: inherit; background: var(--card);
           border: 1px solid oklch(1 0 0 / .65); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
           transition: transform .26s var(--ease), box-shadow .26s var(--ease); }
.rowcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
                   background: var(--accent); transform: scaleY(0); transition: transform .26s var(--ease-back); }
.rowcard.yours::before { background: var(--amber); }
.rowcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.rowcard:hover::before, .rowcard:focus-visible::before { transform: scaleY(1); }
.rowcard h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.016em; margin: 0 0 4px; }
.rowcard .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.rowcard .meta .sep { color: var(--line-2); }
.rowcard .aside { display: flex; align-items: center; gap: var(--s3); justify-self: end; }
.rowcard .note { font-size: 13px; color: var(--muted); max-width: 28ch; text-align: right; }
.rowcard .note b { color: var(--ink); font-weight: 600; }
.rowcard .shift { transition: transform .34s var(--ease-back); }
.rowcard:hover .shift { transform: translateX(5px); }
@media (max-width: 860px) { .rowcard { grid-template-columns: 1fr; } .rowcard .aside { justify-self: start; flex-wrap: wrap; } .rowcard .note { text-align: left; max-width: none; } }

.steps { display: flex; align-items: center; gap: 4px; }
.steps i { width: 18px; height: 5px; border-radius: 3px; background: var(--line-2);
           transform: scaleX(.3); transform-origin: 0 50%; opacity: .5;
           transition: transform .45s var(--ease-back), opacity .35s var(--ease), background .35s var(--ease); }
.in .steps i, .steps.in i { transform: scaleX(1); opacity: 1; }
.in .steps i.done, .steps.in i.done { background: var(--accent); }
.in .steps i.here, .steps.in i.here { background: var(--aqua); animation: hereGlow 2.6s var(--ease) infinite; }
.steps i:nth-child(1){transition-delay:.04s}.steps i:nth-child(2){transition-delay:.09s}
.steps i:nth-child(3){transition-delay:.14s}.steps i:nth-child(4){transition-delay:.19s}
.steps i:nth-child(5){transition-delay:.24s}.steps i:nth-child(6){transition-delay:.29s}

.stat .n { font-family: var(--font-serif); font-size: clamp(30px, 3.6vw, 42px); font-weight: 600;
           line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat .n.warm { color: var(--amber-ink); }
.stat .n.live { color: var(--aqua-ink); }
.stat .k { font-size: 13px; color: var(--muted); margin-top: 7px; }

.quote { margin: 0 0 var(--s3); padding-left: var(--s3); border-left: 3px solid var(--accent-line);
         font-size: 14px; line-height: 1.65; color: var(--muted); }
.quote:last-child { margin-bottom: 0; }
.quote .by { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 10px;
             letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* Interview slots on offer — a decision the client can make in one press. */
.slots { display: grid; gap: 7px; }
.slot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
        padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
        background: var(--card-2); border: 1px solid var(--line);
        transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); }
.slot:hover { border-color: var(--accent); background: var(--card); transform: translateX(3px); }
.slot .d { font-size: 13.5px; font-weight: 600; }
.slot .h { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

.doc { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc:last-child { border-bottom: 0; padding-bottom: 0; }
.doc .ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px;
           color: var(--accent-deep); background: var(--accent-soft); }
.doc .t { flex: 1; min-width: 0; }
.doc .t b { display: block; font-size: 13.5px; font-weight: 600; }
.doc .t span { font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .04em; }

/* ---- The assistant panel -------------------------------------------------
   Marta as a bounded surface rather than a tone of voice: a header that names
   who is answering, a scrollable thread, canned questions, and a composer.
   The scope line under the header is not decoration — if this is later wired
   to a model, the client has to be able to see what it can and cannot see. */
.assist { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.assist-head { display: flex; align-items: center; gap: 11px; padding: var(--s3) var(--s3) var(--s2);
               border-bottom: 1px solid var(--line); }
.assist-head .face { width: 38px; height: 38px; flex: none; display: grid; place-items: center;
                     border-radius: 12px; font-size: 12px; font-weight: 700; color: var(--card);
                     background: linear-gradient(145deg, var(--aqua), var(--accent-deep)); }
.assist-head .who-t { flex: 1; min-width: 0; }
.assist-head .who-t b { display: block; font-size: 14px; font-weight: 650; }
.assist-head .who-t span { font-size: 11.5px; color: var(--faint); }
.assist-scope { padding: 9px var(--s3); font-size: 11.5px; color: var(--muted);
                background: var(--aqua-soft); border-bottom: 1px solid var(--line); }
.assist-thread { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3);
                 max-height: 380px; overflow-y: auto; }
.assist-thread .said { display: flex; gap: 9px; align-items: flex-start; }
.assist-thread .said .f { width: 26px; height: 26px; flex: none; display: grid; place-items: center;
                          border-radius: 9px; font-size: 9.5px; font-weight: 700; color: var(--card);
                          background: linear-gradient(145deg, var(--aqua), var(--accent-deep)); }
.assist-thread .bubble { padding: 10px 13px; border-radius: var(--r-said); background: var(--card-2);
                         font-size: 13.5px; line-height: 1.6; }
.assist-thread .bubble b { font-weight: 650; }
.assist-thread .mine { display: flex; justify-content: flex-end; }
.assist-thread .mine .bubble { background: var(--accent-soft); border: 1px solid var(--accent-line);
                               border-radius: var(--r-mine); color: var(--accent-deep); font-weight: 500; }
.typing { display: inline-flex; align-items: center; gap: 4px; padding: 11px 14px;
          background: var(--card-2); border-radius: var(--r-said); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); opacity: .4;
            animation: typing 1.25s var(--ease) infinite; }
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
.said[data-typing] > .bubble { display: none; }
.said[data-typing].spoken > .bubble { display: block; animation: pop .45s var(--ease-back) both; }
.said[data-typing].spoken > .typing { display: none; }

.assist-asks { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--s3) var(--s3); }
.ask-chip { font-size: 12.5px; padding: 7px 12px; min-height: 36px; cursor: pointer;
            color: var(--accent-deep); background: var(--card); border: 1px solid var(--accent-line);
            border-radius: var(--r-pill); transition: background .18s var(--ease), transform .18s var(--ease); }
.ask-chip:hover { background: var(--accent-soft); transform: translateY(-1px); }
@media (pointer: coarse) { .ask-chip { min-height: 44px; } }
.assist-composer { display: flex; gap: 8px; padding: var(--s3); border-top: 1px solid var(--line); background: var(--card-2); }
.assist-composer input { flex: 1; min-width: 0; min-height: 42px; padding: 10px 14px; font-size: 14px;
                         color: var(--ink); background: var(--card); border: 1px solid var(--line-2);
                         border-radius: var(--r-pill); outline: none;
                         transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.assist-composer input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.assist-composer button { width: 42px; height: 42px; flex: none; display: grid; place-items: center;
                          border: 0; border-radius: 50%; cursor: pointer; color: var(--card); background: var(--accent); }
.sticky { position: sticky; top: 74px; }

/* ---- Fields -------------------------------------------------------------- */
.field { margin-bottom: var(--s3); }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field input { width: 100%; min-height: 48px; padding: 12px 15px; font-size: 15px; color: var(--ink);
               background: var(--card-2); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); outline: none;
               transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.field input::placeholder { color: var(--faint); }
.field input:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 4px var(--accent-soft); }
.hint { font-size: 12.5px; color: var(--faint); margin: -4px 0 var(--s3); }

/* ---- Motion -------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .26s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .4s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }
.top { view-transition-name: topbar; }

@keyframes rise    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop     { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes typing  { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes ripple  { to { transform: scale(2.8); opacity: 0; } }
@keyframes hereGlow{ 0%,100% { box-shadow: 0 0 0 0 oklch(0.700 0.110 200 / .45); } 55% { box-shadow: 0 0 0 5px transparent; } }

.rise { animation: rise .65s var(--ease) both; }
.d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.19s}.d4{animation-delay:.26s}
.d5{animation-delay:.33s}.d6{animation-delay:.40s}

.js .wipe { clip-path: inset(0 100% 0 0); transition: clip-path .95s var(--ease); }
.js .wipe.in { clip-path: inset(0 0 0 0); }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .42s var(--ease), transform .46s var(--ease-back); }
.js .stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1){transition-delay:.00s}.stagger.in > *:nth-child(2){transition-delay:.07s}
.stagger.in > *:nth-child(3){transition-delay:.14s}.stagger.in > *:nth-child(4){transition-delay:.21s}
.stagger.in > *:nth-child(5){transition-delay:.28s}.stagger.in > *:nth-child(6){transition-delay:.35s}

.glow { position: relative; overflow: hidden; }
.glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
               background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), oklch(0.700 0.110 200 / .14), transparent 66%);
               opacity: 0; transition: opacity .4s var(--ease); }
.glow:hover::after { opacity: 1; }

.thread-bar { position: fixed; inset: 0 0 auto; height: 3px; z-index: 90; transform-origin: 0 50%;
              transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--accent), var(--aqua), var(--amber)); }

/* ---- Switcher ------------------------------------------------------------ */
.style-switch { position: fixed; bottom: 16px; right: 16px; z-index: 80;
                display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 12px;
                background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-pill);
                font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
                color: var(--faint); box-shadow: var(--shadow-2); }
.style-switch a { min-width: 30px; text-align: center; padding: 6px 10px; border-radius: var(--r-pill);
                  text-decoration: none; color: var(--muted); font-family: var(--font-sans);
                  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
                  transition: background .18s var(--ease), color .18s var(--ease); }
.style-switch a:hover { background: var(--card-2); color: var(--ink); }
.style-switch a.on { background: var(--accent); color: var(--card); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; }
  .reveal, .stagger > * { opacity: 1; transform: none; }
  .js .wipe { clip-path: none !important; }
  .steps i { transform: scaleX(1); opacity: 1; }
  .skill .bar i { width: var(--lv, 50%); }
  .typing { display: none !important; }
  .said[data-typing] > .bubble { display: block !important; }
  .thread-bar { display: none; }
}

/* ---- The bubble, grown -----------------------------------------------------
   Same corner, same tail: the panel scales out of the mascot rather than
   appearing beside it, which is what makes the two read as one object. */
.assist-drop {
  position: absolute; top: calc(100% + 12px); right: -4px; z-index: 70;
  width: min(408px, calc(100vw - 28px));
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  transform-origin: calc(100% - 20px) -12px;
  overflow: hidden;
}
.assist-drop[hidden] { display: none; }
.assist-drop::before {
  content: ""; position: absolute; top: -7px; right: 16px; width: 14px; height: 14px;
  background: var(--card); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg); border-radius: 3px 0 0 0;
}
.assist-drop.opening { animation: dropIn .42s var(--ease-back) both; }
.assist-drop.closing { animation: dropOut .18s var(--ease) both; }
@keyframes dropIn  { from { opacity: 0; transform: translateY(-10px) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes dropOut { to { opacity: 0; transform: translateY(-8px) scale(.9); } }

@media (max-width: 560px) {
  .assist-drop { position: fixed; top: 62px; right: 12px; left: 12px; width: auto;
                 transform-origin: calc(100% - 30px) -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .buddy-float, .buddy .eyes, .buddy-btn.pending .buddy-float, .buddy-btn.pending .buddy-badge { animation: none !important; }
  .assist-drop.opening, .assist-drop.closing { animation: none !important; }
  .buddy .pupil { transition: none; }
}