/* ═══════════════════════════════════════════════════════════════════
   ASC Intake

   The board is a desk, not a dashboard. The stickies carry the visual
   weight; everything else recedes. Two things animate — pulling a sheet
   off the pad, and the zoom into the expanded view — and both are
   spatial, because the sticky and the detail view are the same object.

   BRAND TOKENS live in the first block below and nowhere else. When
   ASC's palette and typefaces arrive, this is the only place to edit.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Desk */
  --desk:        #c9c0ad;
  --desk-deep:   #b6ac96;
  --desk-edge:   #a89d86;

  /* Ink. Warm near-black — pencil on paper, not #000 on #fff. */
  --ink:         #33302a;
  --ink-soft:    #6d6659;
  --ink-faint:   #857c6a;

  /* Ballpoint blue: every deliberate action on the desk. */
  --pen:         #29486e;
  --pen-bright:  #35608f;
  /* Red pen: only ever failure. Never decoration. */
  --red-pen:     #9c3a2b;

  /* Paper. Muted, in rotation, so consecutive notes are distinguishable. */
  --paper-butter: #e7dfae;
  --paper-sage:   #d4ddc4;
  --paper-clay:   #e8d6c6;
  --paper-slate:  #d3dce4;
  --paper-rose:   #e6d2d7;

  /* Form surfaces inside the expanded view: paler than the paper, so the
     system's fields read as laid on top of her note rather than part of it. */
  --form:        #fbfaf6;
  --form-line:   #cfc8b8;

  /* Type. Her words in a hand; the system's fields in a utility face.
     The contrast is the label — there isn't one written anywhere. */
  --hand:  "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
  --util:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  --lift: 0 1px 1px rgba(60, 52, 38, .16), 0 6px 14px -6px rgba(60, 52, 38, .34);
  --lift-high: 0 2px 3px rgba(60, 52, 38, .2), 0 22px 40px -14px rgba(60, 52, 38, .45);
}

* { box-sizing: border-box; }

/* .stage and .sheet__links both set display, which outranks the UA's
   [hidden] rule. Without this they never actually hide. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--util);
  color: var(--ink);
  background: var(--desk);
  overflow: hidden;
}

:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── The desk surface ─────────────────────────────────────────── */

.board {
  position: fixed;
  inset: 0;
  overflow: auto;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.16), transparent 62%),
    radial-gradient(140% 120% at 50% 110%, rgba(70,60,42,.22), transparent 60%),
    linear-gradient(var(--desk), var(--desk-deep));
}

/* Fibre. Not a grid — grids read as software. */
.board::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.board__cards {
  position: relative;
  width: 4000px;
  height: 3000px;
}

.board__empty {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 24ch;
  text-align: center;
  font-family: var(--hand);
  font-size: 21px;
  line-height: 1.4;
  color: rgba(51, 48, 42, .42);
  pointer-events: none;
}

/* ── Header rail ──────────────────────────────────────────────── */

.rail {
  position: fixed;
  top: 0; left: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  pointer-events: none;
}

.rail > * { pointer-events: auto; }

.rail__mark {
  width: 13px; height: 13px;
  background: var(--pen);
  border-radius: 1px;
  transform: rotate(-6deg);
}

.rail__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(51, 48, 42, .68);
}

.rail__count {
  margin: 0;
  font-size: 12.5px;
  color: rgba(51, 48, 42, .48);
  font-variant-numeric: tabular-nums;
}

.rail__help {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: rgba(51, 48, 42, .48);
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(51, 48, 42, .25);
}

.rail__help:hover { color: var(--pen); }

.help {
  position: absolute;
  top: 46px; left: 20px;
  background: var(--form);
  border: 1px solid var(--form-line);
  box-shadow: var(--lift);
  padding: 12px 14px;
  border-radius: 3px;
}

.help dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  margin: 0;
  font-size: 12.5px;
}

.help dt { font-weight: 600; color: var(--pen); }
.help dd { margin: 0; color: var(--ink-soft); }

/* ── The pad ──────────────────────────────────────────────────── */

.pad {
  position: fixed;
  top: 26px; right: 30px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pad__stack {
  position: relative;
  width: 104px; height: 104px;
  border: 0;
  background: none;
  padding: 0;
  cursor: grab;
}

.pad__stack:active { cursor: grabbing; }

.pad__sheet {
  position: absolute;
  inset: 0;
  background: var(--paper-butter);
  box-shadow: var(--lift);
}

.pad__sheet--3 { transform: rotate(-4.5deg) translate(-3px, 3px); filter: brightness(.9); }
.pad__sheet--2 { transform: rotate(2.6deg) translate(3px, 1px);  filter: brightness(.95); }
.pad__sheet--1 { transform: rotate(-.6deg); }

.pad__stack:hover .pad__sheet--1,
.pad__stack:focus-visible .pad__sheet--1 {
  transform: rotate(-.6deg) translateY(-3px);
  box-shadow: var(--lift-high);
}

.pad__sheet--1 { transition: transform .16s ease, box-shadow .16s ease; }

.pad__label {
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(51, 48, 42, .5);
}

/* ── The sticky ───────────────────────────────────────────────── */

.sticky {
  --paper: var(--paper-butter);
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 12px;              /* the inset — also the drag surface */
  background: var(--paper);
  box-shadow: var(--lift);
  transform: rotate(var(--rot, 0deg));
  transition: box-shadow .16s ease;
}

.sticky[data-paper="butter"] { --paper: var(--paper-butter); }
.sticky[data-paper="sage"]   { --paper: var(--paper-sage); }
.sticky[data-paper="clay"]   { --paper: var(--paper-clay); }
.sticky[data-paper="slate"]  { --paper: var(--paper-slate); }
.sticky[data-paper="rose"]   { --paper: var(--paper-rose); }

/* Paper fibre, and a faint gradient so the sheet isn't flat colour. */
.sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain), linear-gradient(160deg, rgba(255,255,255,.42), transparent 46%);
  opacity: .5;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.sticky:hover { box-shadow: var(--lift-high); }

.sticky--dragging {
  box-shadow: var(--lift-high);
  z-index: 20;
  cursor: grabbing;
}

.sticky__text {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  padding: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 16.5px;
  line-height: 1.42;
  overflow-y: auto;
}

.sticky__text::placeholder { color: rgba(51, 48, 42, .3); }
.sticky__text:focus { outline: none; }
.sticky:focus-within { box-shadow: var(--lift-high), 0 0 0 2px rgba(41, 72, 110, .5); }

.sticky__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid rgba(51, 48, 42, .13);
}

.sticky__state {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(51, 48, 42, .5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky__action {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 2px 3px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--pen);
  cursor: pointer;
  white-space: nowrap;
}

.sticky__action:hover { color: var(--pen-bright); text-decoration: underline; }
.sticky__action[disabled] { color: var(--ink-faint); cursor: default; text-decoration: none; }

.sticky__grip {
  position: absolute;
  right: 0; bottom: 0;
  width: 18px; height: 18px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 52%, rgba(51,48,42,.22) 52% 58%, transparent 58%,
                    transparent 66%, rgba(51,48,42,.22) 66% 72%, transparent 72%);
}

/* State, spoken by the sheet itself rather than by a badge bolted on. */

/* researching — the sheet looks busy: a pencil rule travelling its edge */
.sticky[data-state="researching"] { cursor: default; }
.sticky[data-state="researching"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg, var(--pen) 0 9px, transparent 9px 18px);
  opacity: .65;
  animation: crawl 1.1s linear infinite;
}

@keyframes crawl { to { background-position: 18px 0; } }

/* ready — a turned-up corner, the way you fold a page you've dealt with */
.sticky[data-state="ready"]::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  border-width: 0 0 17px 17px;
  border-style: solid;
  border-color: transparent transparent rgba(41, 72, 110, .3) transparent;
}

/* published — settled, receded, done */
.sticky[data-state="published"] {
  filter: saturate(.55);
  box-shadow: 0 1px 1px rgba(60, 52, 38, .1);
}
.sticky[data-state="published"] .sticky__text { color: var(--ink-soft); }
.sticky[data-state="published"]::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  border-width: 0 0 22px 22px;
  border-style: solid;
  border-color: transparent transparent rgba(51, 48, 42, .18) transparent;
}

/* failed — red pen down the edge */
.sticky[data-state="failed"] {
  box-shadow: inset 4px 0 0 var(--red-pen), var(--lift);
}
.sticky[data-state="failed"] .sticky__state { color: var(--red-pen); }

.sticky--hidden { visibility: hidden; }

/* ── The zoom stage ───────────────────────────────────────────── */

.stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.stage__scrim {
  position: absolute;
  inset: 0;
  background: rgba(58, 50, 36, .46);
  backdrop-filter: blur(2px);
}

.sheet {
  --paper: var(--paper-butter);
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  /* Definite parent height + min-height:0 on the body is what keeps the
     footer on screen. Without both, the body grows and Publish is below
     the fold. */
  max-height: 100%;
  min-height: 0;
  background: var(--paper);
  box-shadow: var(--lift-high);
  transform-origin: top left;
}

.sheet[data-paper="butter"] { --paper: var(--paper-butter); }
.sheet[data-paper="sage"]   { --paper: var(--paper-sage); }
.sheet[data-paper="clay"]   { --paper: var(--paper-clay); }
.sheet[data-paper="slate"]  { --paper: var(--paper-slate); }
.sheet[data-paper="rose"]   { --paper: var(--paper-rose); }

.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .35;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.sheet__head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px 14px;
  border-bottom: 1px solid rgba(51, 48, 42, .14);
}

.sheet__title {
  margin: 0;
  font-family: var(--hand);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.1;
}

.sheet__state {
  margin: 5px 0 0;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sheet__head-actions { display: flex; gap: 6px; flex-shrink: 0; }

.sheet__banner {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 26px;
  font-size: 13px;
  line-height: 1.5;
  background: rgba(156, 58, 43, .1);
  border-bottom: 1px solid rgba(156, 58, 43, .25);
  color: var(--red-pen);
}

.sheet__banner[data-tone="info"] {
  background: rgba(41, 72, 110, .09);
  border-bottom-color: rgba(41, 72, 110, .22);
  color: var(--pen);
}

.sheet__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 26px 24px;
}

.sheet__foot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border-top: 1px solid rgba(51, 48, 42, .14);
  background: rgba(255, 255, 255, .28);
}

.sheet__missing {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.sheet__links {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
}

.sheet__links a { color: var(--pen); }

.sheet__foot .btn--publish { margin-left: auto; }

/* ── Blocks and fields ────────────────────────────────────────── */

.block {
  position: relative;
  padding: 20px 0 4px;
  border-bottom: 1px solid rgba(51, 48, 42, .1);
}

.block:last-child { border-bottom: 0; }

.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.block__title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.block__note,
.block__empty {
  margin: -4px 0 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* Her words keep the hand and the paper. Everything else sits on a pale
   card, so the two never get confused for each other. */
.notes-field {
  width: 100%;
  border: 0;
  border-left: 2px solid rgba(41, 72, 110, .3);
  padding: 2px 0 2px 12px;
  background: transparent;
  font-family: var(--hand);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
}

.notes-field:focus { outline: none; border-left-color: var(--pen); }

.notes-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.notes-tools__meta {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field--wide { width: 100%; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field label,
.contact__primary-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea,
.contact input[type="text"],
.contact input[type="email"],
#f-task-note {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--form);
  border: 1px solid var(--form-line);
  border-radius: 2px;
  padding: 8px 10px;
}

.field textarea, #f-task-note { resize: vertical; line-height: 1.5; }

#f-task-note {
  font-family: var(--util);
  display: block;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.contact input:focus,
#f-task-note:focus {
  outline: 2px solid var(--pen);
  outline-offset: 0;
  border-color: var(--pen);
}

.field input[readonly], .field select[disabled], .field textarea[readonly] {
  background: rgba(255, 255, 255, .35);
  color: var(--ink-soft);
}

.field__hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.field__hint em { font-style: normal; color: var(--ink); font-weight: 500; }

/* Marks a value that arrived from HubSpot, so she can tell what she's
   changing rather than what she's filling in. */
.field--from-hubspot input,
.field--from-hubspot textarea,
.field--from-hubspot select {
  border-left: 3px solid var(--pen);
  background: rgba(41, 72, 110, .05);
}

.match { margin: -4px 0 14px; font-size: 12.5px; color: var(--ink-soft); }
.match a { color: var(--pen); }
.match[data-tone="match"] { color: var(--pen); }

/* ── Contacts ─────────────────────────────────────────────────── */

.contacts { display: flex; flex-direction: column; gap: 10px; }

.contact {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  background: rgba(255, 255, 255, .3);
  border: 1px solid rgba(51, 48, 42, .12);
  border-radius: 2px;
}

.contact--primary { border-color: var(--pen); background: rgba(41, 72, 110, .06); }

.contact__primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding-top: 4px;
}

.contact__fields .field { margin-bottom: 8px; }
.contact__fields .field:last-of-type { margin-bottom: 0; }

.contact__remove {
  border: 0;
  background: none;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 4px;
}

.contact__remove:hover { color: var(--red-pen); text-decoration: underline; }

.confidence {
  margin: 6px 0 0;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.confidence[data-level="valid"]     { color: #3f6b40; }
.confidence[data-level="catch-all"] { color: #8a6a24; }
.confidence[data-level="guessed"]   { color: var(--red-pen); }
.confidence[data-level="manual"]    { color: var(--ink-soft); }

/* ── Buttons ──────────────────────────────────────────────────── */

.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  color: var(--ink);
}

.btn--small { font-size: 12px; padding: 5px 10px; }

.btn--quiet {
  border-color: rgba(51, 48, 42, .22);
  color: var(--ink-soft);
}

.btn--quiet:hover { border-color: var(--ink-soft); color: var(--ink); }

.btn--accent {
  background: var(--pen);
  color: #f6f3ea;
}

.btn--accent:hover { background: var(--pen-bright); }

.btn--publish {
  background: var(--pen);
  color: #f6f3ea;
  padding: 10px 24px;
  font-size: 14px;
}

.btn--publish:hover:not([disabled]) { background: var(--pen-bright); }

.btn[disabled] {
  background: rgba(51, 48, 42, .12);
  color: var(--ink-faint);
  border-color: transparent;
  cursor: default;
}

/* ── Toasts ───────────────────────────────────────────────────── */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  background: var(--ink);
  color: #f4f1e8;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 16px;
  border-radius: 2px;
  box-shadow: var(--lift-high);
  max-width: 62ch;
  pointer-events: auto;
}

.toast[data-tone="bad"] { background: var(--red-pen); }

/* ── Reduced motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* The researching sheet still has to look busy without moving. */
  .sticky[data-state="researching"]::after {
    animation: none;
    opacity: .8;
  }
}

/* Desktop only, per the brief — but don't leave a narrow window unusable. */
@media (max-width: 720px) {
  .field-row { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .pad { transform: scale(.8); transform-origin: top right; }
}