/* BF Designs artist portal — quiet-tool design language.
   Inter UI type at 14px, hairline ring surfaces (no drop shadows), 28px icon
   nav. JetBrains Mono is reserved for code-like artifacts only: login codes,
   style codes, file formats and dimensions.
   QUARANTINE RULE: this stylesheet is the only place these tokens live in this
   repo. Nothing under pages/review, pages/upload, or pages/admin may import
   it, and this surface never imports theirs. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ink: rgb(16,17,18);
  --ink-2: rgba(0,0,0,0.63);
  --ink-3: rgba(0,0,0,0.45);
  --line: rgb(238,239,241);
  --line-2: rgba(0,0,0,0.13);
  --paper: rgb(255,255,255);
  --well: rgb(249,249,250);
  --tint: rgba(0,0,0,0.04);

  --blue: rgb(38,109,240);
  --blue-deep: rgb(29,92,208);
  --blue-wash: rgb(240,245,255);
  --green-ink: rgb(11,128,84);
  --green-wash: rgb(230,247,239);
  --amber-ink: rgb(146,110,0);
  --amber-wash: rgb(255,246,219);
  --violet-ink: rgb(94,70,190);
  --violet-wash: rgb(238,232,253);
  --red-ink: rgb(205,52,49);
  --red-wash: rgb(253,235,235);

  --ring: inset 0 0 0 1px var(--line);
  --ring-hover: inset 0 0 0 1px var(--line-2), 0 12px 30px rgba(0,0,0,0.04);
  --ring-btn: inset 0 0 0 1px rgba(0,0,0,0.09), 0 1px 2px rgba(0,0,0,0.04);
  --focus-ring: 0 0 0 3px rgba(38,109,240,0.18);
  --ease-out: cubic-bezier(0, 0, 0, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
/* No overflow-x:hidden here. Setting it on the body forces overflow-y to
   compute to `auto`, which makes the body its own scroll container — and on
   iOS Safari a scrolling body breaks position:fixed children, so the bottom
   nav scrolled away with the page. It was only ever masking the header nav
   overflowing on phones; that is fixed properly now, so anything that scrolls
   sideways from here is a real bug to fix at its source, not to clip. */
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }
::selection { background: var(--blue-wash); }
@media (max-width: 767px) { input, select, textarea { font-size: 16px !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Frame ---- */

.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  color: var(--ink); white-space: nowrap;
}
.surface-chip {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--ink-2); background: var(--tint);
  padding: 3px 6px; border-radius: 5px;
}
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; color: var(--ink-3); }
.topbar .signout {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink-2); background: none; border: 0; cursor: pointer;
  padding: 5px 9px; border-radius: 7px;
}
.topbar .signout:hover { color: var(--ink); background: var(--tint); }

.topbar .nav { display: flex; gap: 2px; margin-left: 12px; }
.topbar .nav a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px 0 8px; border-radius: 9px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink); position: relative;
}
.topbar .nav a svg { color: var(--ink-3); flex: none; }
.topbar .nav a:hover { background: var(--tint); color: var(--ink); }
.topbar .nav a.active { background: var(--tint); }
.topbar .nav a.active svg { color: var(--ink-2); }

/* Phone padding, the bottom-bar clearance and the nav itself all live in the
   "Small screens" section at the foot of this file. */
.wrap { max-width: 1040px; margin: 0 auto; padding: 32px 24px 72px; }

.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink-3);
  margin: 0 0 4px;
}
h1 {
  font-size: 20px; line-height: 28px; letter-spacing: -0.02em; font-weight: 600;
  margin: 0 0 18px;
}
.sub { font-size: 13.5px; line-height: 19px; color: var(--ink-2); margin: -12px 0 24px; max-width: 62ch; }
h2 {
  font-size: 14px; line-height: 20px; letter-spacing: -0.01em; font-weight: 600;
  margin: 28px 0 10px;
}

/* ---- Cards ---- */

.card {
  background: var(--paper);
  border-radius: 12px;
  box-shadow: var(--ring);
  padding: 20px;
}

.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.job-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: box-shadow 160ms var(--ease-out); }
.job-card:hover { box-shadow: var(--ring-hover); }
.job-card .thumb-row { display: flex; gap: 8px; }
.job-card .thumb {
  width: 76px; height: 76px; border-radius: 8px; object-fit: cover;
  background: var(--well); box-shadow: inset 0 0 0 1px var(--line);
}
.job-card .title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.job-card .meta { font-size: 12.5px; letter-spacing: -0.005em; color: var(--ink-2); }
/* Status and its unread count sit together on the left; the deadline is the
   one thing that belongs on the far right. space-between would strand the
   badge in the middle of the row instead. */
.job-card .foot { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.job-card .foot .pill.due, .job-card .foot .pill.overdue { margin-left: auto; }

/* ---- Pills ---- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: -0.005em;
  padding: 4px 8px; border-radius: 6px;
}
.pill.assigned { color: var(--blue-deep); background: var(--blue-wash); }
.pill.changes  { color: var(--amber-ink); background: var(--amber-wash); }
.pill.submitted { color: var(--violet-ink); background: var(--violet-wash); }
.pill.approved { color: var(--green-ink); background: var(--green-wash); }
.pill.cancelled { color: var(--ink-2); background: var(--tint); }
.pill.due { color: var(--ink-2); background: var(--tint); }
.pill.overdue { color: var(--red-ink); background: var(--red-wash); }

/* ---- Buttons / inputs ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; line-height: 1;
  height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 0; transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-deep); }
.btn.primary:disabled { background: rgb(167,195,247); cursor: default; }
.btn.secondary { background: var(--paper); color: var(--ink); box-shadow: var(--ring-btn); }
.btn.secondary:hover { background: var(--well); }
.btn.quiet { background: none; color: var(--ink-2); padding: 0 10px; }
.btn.quiet:hover { color: var(--ink); background: var(--tint); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.field label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; font-family: var(--font-sans); font-size: 14px; letter-spacing: -0.01em; color: var(--ink);
  background: var(--paper); border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
  padding: 8px 10px; transition: box-shadow 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
.field input.code {
  font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.3em; text-align: center; padding: 10px;
}

/* ---- Profile ---- */

.field select {
  width: 100%; font-family: var(--font-sans); font-size: 14px; letter-spacing: -0.01em; color: var(--ink);
  background-color: var(--paper); border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
  padding: 8px 30px 8px 10px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="%23737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 6.2 4 4 4-4"/></svg>');
  background-repeat: no-repeat; background-position: right 10px center;
  transition: box-shadow 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.field select:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }
.field .note { font-size: 12px; color: var(--ink-3); margin-top: 5px; }

.avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.avatar-slot { position: relative; width: 64px; height: 64px; flex: none; }
.avatar, .avatar-fallback {
  width: 64px; height: 64px; border-radius: 999px; flex: none;
  background: var(--well); box-shadow: inset 0 0 0 1px var(--line);
}
.avatar { object-fit: cover; max-width: none; display: block; }
.avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 500; color: var(--ink-3);
}
.avatar-row .hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* Once a photo exists the upload button steps aside and the controls live on
   the image itself. Hover reveals them on a mouse; .show is toggled by tap so
   touch screens, which never hover, can still reach them. */
.avatar-actions {
  position: absolute; inset: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none;
  transition: opacity 120ms var(--ease-out);
}
.avatar-slot:hover .avatar-actions,
.avatar-actions:focus-within,
.avatar-actions.show { opacity: 1; pointer-events: auto; }
.avatar-actions button {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255,255,255,0.18); color: #fff; cursor: pointer;
}
.avatar-actions button:hover { background: rgba(255,255,255,0.34); }
.avatar-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Repeating link rows (portfolio, capped at three). */
.link-row { display: flex; align-items: center; gap: 8px; }
.link-row + .link-row { margin-top: 8px; }
.link-row input { flex: 1; min-width: 0; }
.link-row .drop {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--ink-3); cursor: pointer;
}
.link-row .drop:hover { background: var(--tint); color: var(--ink); }
.link-add {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--blue); background: none; border: 0; padding: 8px 0 0; cursor: pointer;
}
.link-add:hover { text-decoration: underline; }
.link-add[hidden] { display: none; }

/* Payout fields swap with the chosen platform. */
.field[hidden], .pay-hint[hidden] { display: none; }
.pay-hint { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }
.field textarea { min-height: 76px; resize: vertical; }

/* Written to out-specify `.field label`, which would otherwise force the row
   back to display:block and swallow the gap between box and text. */
.check-row, .field label.check-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 0;
  font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.check-row input { width: 15px; height: 15px; accent-color: var(--blue); margin: 0; flex: none; }

/* ---- Date picker (popover calendar; replaces native date inputs) ---- */

.dp-wrap { position: relative; }
.dp-wrap input[readonly] { cursor: pointer; caret-color: transparent; }
.dp {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: 266px; background: var(--paper); border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px rgba(0,0,0,0.12);
  padding: 12px;
}
.dp-head { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; padding: 0 2px; }
.dp-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 0; border-radius: 7px;
  background: none; color: var(--ink-2); cursor: pointer;
}
.dp-nav:hover { background: var(--tint); color: var(--ink); }
.dp-month { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin-left: 8px; }
.dp-year { margin-left: auto; padding-right: 4px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 34px); justify-content: center; }
.dp-dow {
  height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 500; color: var(--ink-3);
}
.dp-day {
  position: relative; height: 32px; margin: 1px 0; border: 0; border-radius: 8px;
  background: none; font-family: var(--font-sans); font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dp-day:hover:not(:disabled) { background: var(--tint); }
.dp-day.muted { color: var(--ink-3); }
.dp-day.today::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 999px; background: var(--blue);
}
.dp-day.selected { background: var(--blue); color: #fff; }
.dp-day.selected.today::after { background: #fff; }
.dp-day:disabled { color: rgba(0,0,0,0.22); cursor: default; }
.dp-foot { display: flex; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp-foot button {
  border: 0; background: none; border-radius: 7px; padding: 6px 8px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink-2); cursor: pointer;
}
.dp-foot button:hover { background: var(--tint); color: var(--ink); }
.dp-foot .dp-clear { margin-left: auto; }

.save-bar { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.save-bar .saved { font-size: 12.5px; color: var(--ink-3); }

/* ---- Login ---- */

.login-wrap { max-width: 400px; margin: 11vh auto 0; padding: 0 16px; }
.login-wrap .card { padding: 28px; }
.login-wrap h1 { font-size: 20px; line-height: 26px; margin-bottom: 6px; }
.login-wrap .sub { color: var(--ink-2); font-size: 13.5px; margin: 0 0 20px; }
.login-wrap .field { margin-bottom: 14px; }
.form-error { color: var(--red-ink); font-size: 13px; margin: 10px 0 0; min-height: 16px; }
.form-hint { color: var(--ink-2); font-size: 12.5px; margin: 12px 0 0; }

/* ---- Job detail ---- */

/* The job page is a stack of six sections read top to bottom, so the space
   between them is what tells them apart — the headings are body-sized on
   purpose. Scoped to .job-detail so the shorter pages keep their own rhythm. */
.job-detail h2 { margin: 36px 0 12px; }

.detail-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.detail-head .titles { min-width: 0; }
.detail-head h1 { margin: 0 0 6px; }
.detail-head .meta { font-size: 13px; letter-spacing: -0.005em; color: var(--ink-2); }
.detail-head .pills { display: flex; gap: 6px; align-items: center; margin-left: auto; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

.ref-figure { text-align: center; }
.ref-figure img {
  width: 100%; max-height: 380px; object-fit: contain;
  border-radius: 8px; background: var(--well);
}
.ref-figure .cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; font-size: 12.5px; color: var(--ink-2);
}
/* The customer's instruction for the extra image, in their words. */
.ref-figure .ref-note {
  margin-top: 14px; text-align: left; background: var(--amber-wash);
  border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 20px;
}
.ref-figure .ref-note strong {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--amber-ink); margin-bottom: 5px;
}
/* The wardrobe instruction reuses .ref-note's amber, because it is the same
   kind of thing -- something to obey before drawing -- but it carries a drawing
   of the garment as well as its name. */
.ref-figure #wardrobe-line { display: flex; align-items: center; gap: 12px; }
.ref-figure .wardrobe-mark { flex: none; color: var(--amber-ink); }
.ref-figure .wardrobe-mark svg { display: block; width: 42px; height: 42px; }

/* A short wide strip has no business sharing a row with a tall photo: as a
   half-width cell it left a column-sized hole beside it. Full width, under
   the images it applies to. */
.style-card { grid-column: 1 / -1; }
.style-strip { display: flex; align-items: center; gap: 16px; }
.style-strip img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.style-strip .code { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.style-strip .hint { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

.callout {
  border-radius: 10px; padding: 14px 16px; font-size: 13.5px; line-height: 21px;
  margin-top: 12px;
}
.callout .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; display: block; margin-bottom: 5px; }
.callout.brief { background: var(--blue-wash); color: var(--ink); }
.callout.brief .tag { color: var(--blue-deep); }
.callout.note { background: var(--amber-wash); }
.callout.note .tag { color: var(--amber-ink); }
.callout.feedback { background: var(--red-wash); }
.callout.feedback .tag { color: var(--red-ink); }

/* ---- Upload ---- */

.dropzone {
  border: 1px dashed rgba(0,0,0,0.16); border-radius: 10px;
  padding: 28px 20px; text-align: center; color: var(--ink-2); font-size: 13.5px;
  transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out);
  cursor: pointer;
}
.dropzone.drag { border-color: var(--blue); background: var(--blue-wash); color: var(--blue-deep); }
.dropzone strong { color: var(--ink); font-weight: 500; }

.fmt-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 2px; }
.fmt {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0;
  padding: 4px 8px; border-radius: 6px;
  background: var(--tint); color: var(--ink-2);
}
.fmt.have { background: var(--green-wash); color: var(--green-ink); }

/* Thumbnail pinned to the top of the row. The text column carries a
   thumbnail-height floor, so a two-line row still sits level with its preview
   and a row with warnings grows downward from it instead of drifting. */
.file-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.file-row:last-child { border-bottom: 0; }
/* The dropzone sits just under the last row it will add to. With no rows at
   all it needs the full gap from the format chips instead. */
.job-detail .dropzone { margin-top: 4px; }
.job-detail #file-list:empty + .dropzone { margin-top: 16px; }
.file-row img.preview { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.file-row .psd-badge {
  width: 48px; height: 48px; border-radius: 6px; background: var(--tint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--ink-2);
}
.file-row .info {
  min-width: 0; flex: 1;
  display: flex; flex-direction: column; justify-content: center; min-height: 48px;
}
.file-row > .btn { align-self: center; }
.file-row .name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .dims { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--ink-3); margin-top: 4px; }
.file-row .warn { color: var(--amber-ink); font-size: 12.5px; margin-top: 5px; }

.submit-row { display: flex; justify-content: flex-end; margin-top: 20px; }
/* Empty most of the time. Reserving a line for it left a dead band under the
   submit button on every job. */
.job-detail .form-error { min-height: 0; margin: 0; }
.job-detail .form-error:not(:empty) { margin-top: 12px; }

.progress-track { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 14px; display: none; }
.progress-track .bar { height: 100%; width: 0; background: var(--blue); transition: width 240ms var(--ease-out); }

/* ---- Timeline ---- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.timeline li:first-child { padding-top: 0; }
.timeline li:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline .when { font-size: 12px; color: var(--ink-3); white-space: nowrap; padding-top: 1px; }
.timeline .what { color: var(--ink); }
.timeline .what .n { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 5px; white-space: pre-wrap; }

.empty {
  text-align: center; color: var(--ink-2); font-size: 13.5px; padding: 48px 20px;
}
.empty .big { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 4px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-size: 13px; padding: 10px 16px; border-radius: 8px;
  opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-out);
  max-width: min(92vw, 480px); text-align: center;
}
.toast.show { opacity: 1; }

/* ---- Nav badges, threads, milestones, earnings, agreement ---- */

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0;
  color: #fff; background: var(--blue); border-radius: 999px;
  vertical-align: 2px;
}

/* Threads: your messages sit right in a quiet gray bubble; the studio's
   replies read as plain text, assistant-style. Each message carries a small
   avatar — your profile photo (or initials) on your side, the BF mark on the
   studio's. The row owns the alignment; the bubble just fills it. */
.thread { display: flex; flex-direction: column; gap: 20px; padding: 2px 0; }
.msg-row { display: flex; align-items: flex-start; gap: 10px; max-width: 88%; }
.msg-row.you { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.studio { align-self: flex-start; }
.msg-av {
  width: 26px; height: 26px; border-radius: 999px; flex: none; margin-top: 2px;
  background: var(--well); box-shadow: inset 0 0 0 1px var(--line);
}
/* max-width:none so the global img cap can't shrink the avatar in a tight row. */
img.msg-av { object-fit: cover; max-width: none; }
.msg-av.initials, .msg-av.bf {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
}
.msg-av.initials { color: var(--ink-3); }
.msg-av.bf { font-size: 10px; letter-spacing: 0; color: #fff; background: var(--ink); box-shadow: none; }
.msg { min-width: 0; font-size: 14px; line-height: 21px; white-space: pre-wrap; }
.msg.you { background: rgb(244,245,246); color: var(--ink); padding: 10px 14px; border-radius: 14px; }
.msg.studio { color: var(--ink); }
.msg .when { display: block; font-size: 11px; color: var(--ink-3); margin-top: 5px; }
.msg-files { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
a.msg-file {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  background: var(--paper); box-shadow: var(--ring-btn);
  padding: 6px 10px; border-radius: 8px; max-width: 100%;
}
a.msg-file:hover { background: var(--well); color: var(--ink); }
a.msg-file svg { color: var(--ink-3); flex: none; }
a.msg-file .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.msg-file .fs { color: var(--ink-3); font-weight: 400; flex: none; }
.thread-empty { font-size: 13px; color: var(--ink-2); }

/* Composer: one rounded surface, files and send controls in the footer row. */
.composer {
  margin-top: 20px; background: var(--paper);
  border: 1px solid rgba(0,0,0,0.12); border-radius: 14px;
  padding: 4px 8px 8px;
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.composer:focus-within { border-color: rgba(38,109,240,0.55); box-shadow: 0 0 0 3px rgba(38,109,240,0.10); }
.composer textarea {
  display: block; width: 100%; min-height: 46px; max-height: 180px; resize: none;
  border: 0; outline: none; background: transparent; padding: 8px 6px 2px;
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; letter-spacing: -0.01em; color: var(--ink);
}
.composer .c-foot { display: flex; align-items: flex-end; gap: 6px; }
.attach-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; padding: 2px 0 2px 4px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  background: var(--tint); border-radius: 7px; padding: 4px 6px 4px 9px; max-width: 240px;
}
.attach-chip .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip button {
  border: 0; background: none; cursor: pointer; padding: 0 3px;
  font-size: 13px; line-height: 1; color: var(--ink-3); font-family: var(--font-sans);
}
.attach-chip button:hover { color: var(--ink); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px;
  border: 0; background: none; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--tint); color: var(--ink); }
.send-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 999px;
  border: 0; background: var(--blue); color: #fff; cursor: pointer;
  transition: background 120ms var(--ease-out);
}
.send-btn:hover:not(:disabled) { background: var(--blue-deep); }
.send-btn:disabled { background: rgb(230,232,236); color: rgb(158,163,173); cursor: default; }
.send-btn:focus-visible, .icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.milestone-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.milestone-row:first-child { padding-top: 0; }
.milestone-row:last-child { border-bottom: none; padding-bottom: 0; }
.milestone-row .m-title { flex: 1; font-size: 13.5px; font-weight: 500; }
.milestone-row .m-amount { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.earn-table { width: 100%; border-collapse: collapse; }
.earn-table th {
  font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink-2); text-align: left; padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
.earn-table td { font-size: 13.5px; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.earn-table tr:last-child td { border-bottom: 0; }
.earn-table td.num { font-variant-numeric: tabular-nums; }
.earn-table ~ .thread-empty { margin-top: 16px; }
.totals { display: flex; gap: 12px; margin: 0 0 12px; }
.total-card { flex: 1; }
.total-card .lab { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.total-card .val { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---- Agreement: reading and signing ----
   A contract is the longest thing anyone reads on this surface, and most
   artists read it on a phone. Hence the capped measure, the roomier line
   height than the rest of the portal, and a sign action that only wakes up
   once the document has actually been scrolled through. */

.agreement-body {
  font-size: 13.5px; line-height: 1.68; color: var(--ink);
  max-height: 52vh; overflow-y: auto; padding: 20px 22px; box-shadow: var(--ring);
  border-radius: 12px; background: var(--paper); margin: 14px 0 0;
  overscroll-behavior: contain;
}
@media (max-width: 640px) { .agreement-body { max-height: 58vh; padding: 16px; } }

.doc { max-width: 68ch; }
.doc h1 {
  font-size: 15px; line-height: 21px; font-weight: 600; letter-spacing: -0.015em;
  margin: 26px 0 8px;
}
.doc h1:first-child { margin-top: 0; }
.doc h2 { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; margin: 22px 0 6px; }
.doc p { margin: 0 0 9px; }
.doc ul { margin: 0 0 9px; padding-left: 18px; }
.doc li { margin-bottom: 4px; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.doc blockquote {
  margin: 0 0 14px; padding: 11px 13px; border-radius: 9px;
  background: var(--amber-wash); color: var(--amber-ink);
}
.doc code { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; }
.doc-table { overflow-x: auto; margin: 0 0 14px; }
.doc-table table { width: 100%; border-collapse: collapse; min-width: 300px; }
.doc-table th {
  font-size: 11.5px; font-weight: 500; color: var(--ink-2); text-align: left;
  padding: 0 12px 7px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.doc-table td { font-size: 12.5px; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.doc-table tr:last-child td { border-bottom: 0; }

/* Plain-language summary. Deliberately not styled as a callout the eye can
   skip — it is the first thing most artists will actually read. */
.summary-card { background: var(--blue-wash); border-radius: 12px; padding: 16px 18px; margin: 0 0 4px; }
.summary-card .tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--blue-deep); display: block; margin-bottom: 5px;
}
.summary-card p { margin: 0 0 6px; font-size: 13.5px; line-height: 20px; }
.summary-card .disclaim { font-size: 12px; color: var(--ink-2); margin: 0; }

.scroll-nudge { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 0; }
.scroll-nudge.done { color: var(--green-ink); }

.sign-card { margin-top: 18px; }
.sign-card .lede { font-size: 13.5px; color: var(--ink-2); margin: 0 0 14px; max-width: 62ch; }
.sign-name { max-width: 380px; }
.sign-name .expect { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.sign-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* The signed state: quiet confirmation plus the evidence we hold. */
.signed-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--green-wash); color: var(--green-ink);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 19px;
}
.exec-record {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0;
  color: var(--ink-3); word-break: break-all; margin-top: 10px;
}

/* ---- Small screens ----
   Artists check a deadline or answer the studio from a phone as often as from
   a desk, so this is not a courtesy tier. Two structural moves carry most of
   it: the four destinations leave the header for a bar pinned to the bottom
   edge, and every control grows to a real thumb target. The rest is spacing.

   Breakpoints: 900 drops the account email, 700 is where the header nav stops
   fitting and becomes the bottom bar, 640 relaxes the denser components, 560
   is the last stand for anything still trying to hold one line. */

/* First to go, and no loss: the same address is on the Profile page, and it
   costs roughly the width the nav is short. */
@media (max-width: 900px) { .topbar .who { display: none; } }

@media (max-width: 700px) {
  .topbar { padding: 10px 14px; gap: 7px; }

  /* Out of the header entirely. Four fixed destinations at the bottom edge is
     the shape a phone expects, and it puts them under the thumb instead of
     off the right-hand side of the screen. */
  .topbar .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    margin: 0; gap: 0; justify-content: space-around;
    background: var(--paper); border-top: 1px solid var(--line);
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
  }
  .topbar .nav a {
    flex: 1 1 0; min-width: 0; height: auto; min-height: 46px;
    flex-direction: column; justify-content: center; gap: 3px;
    padding: 5px 2px; border-radius: 10px;
    font-size: 11px; letter-spacing: 0; color: var(--ink-3);
  }
  .topbar .nav a svg { width: 20px; height: 20px; }
  .topbar .nav a:hover, .topbar .nav a.active { background: none; }
  .topbar .nav a.active, .topbar .nav a.active svg { color: var(--blue); }
  /* Lifted out of the flow, or the column layout would stack the count as a
     third line under the label. */
  .topbar .nav a .badge { position: absolute; top: 3px; left: 52%; margin: 0; }

  /* Clear the bar rather than let the last card hide behind it. */
  .wrap { padding: 20px 16px calc(86px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(74px + env(safe-area-inset-bottom)); }

  /* 32px is a comfortable mouse target and a poor thumb one. */
  .btn { height: 40px; padding: 0 16px; }
  .btn.quiet { padding: 0 12px; }
  .icon-btn, .send-btn { width: 38px; height: 38px; }
  .link-row .drop { width: 38px; height: 38px; }
  .avatar-actions button { width: 32px; height: 32px; }
  .dp-day { height: 38px; }

  /* Primary actions take the full width. Nothing that commits work should be
     a small target in a corner. */
  .save-bar, .sign-row, .submit-row { flex-direction: column; align-items: stretch; }
  .save-bar .btn, .sign-row .btn, .submit-row .btn { width: 100%; }
  .save-bar .saved, .sign-row .saved { text-align: center; }
}

@media (max-width: 640px) {
  .card { padding: 16px; }
  h1 { font-size: 19px; line-height: 26px; }

  /* The title and its status belong to each other. margin-left:auto flings the
     pills to the far edge the moment the row wraps, which reads as two
     unrelated things. */
  .detail-head { gap: 8px 12px; margin-bottom: 20px; }
  .detail-head .pills { margin-left: 0; flex-wrap: wrap; }

  /* Narrower cards do some of the separating on their own. */
  .job-detail h2 { margin: 30px 0 10px; }
  .two-col { gap: 12px; }

  /* A reference photo is the thing being worked from — give it the screen. */
  .ref-figure img { max-height: 62vh; }
  .style-strip img { width: 60px; height: 60px; }

  .milestone-row { flex-wrap: wrap; row-gap: 4px; }
  .milestone-row .m-title { flex: 1 1 100%; }

  .avatar-row { flex-wrap: wrap; }
  .dropzone { padding: 22px 14px; }
  .msg-row { max-width: 94%; }
}

@media (max-width: 560px) {
  /* Thumbnail, filename and Remove will not share a line at this width. The
     button drops below and lines up with the text column above it. */
  .file-row { flex-wrap: wrap; row-gap: 4px; }
  .file-row .info { flex: 1 1 55%; }
  /* 48px thumbnail + 14px gap: the label starts exactly under the filename. */
  .file-row > .btn { margin-left: 62px; padding-left: 0; align-self: flex-start; }
}