/* =========================================================================
   SourcePhoenix studio look: matches eyessinstudio.com.
   Loaded last, so it wins over app.css and platform.css.
     Headings  Space Grotesk, cream
     Body      IBM Plex Sans
     Labels    IBM Plex Mono, small and muted
     Orange    main buttons, step numbers
     Mint      live, new, done, progress
   To change a color, edit the variables right below.
   ========================================================================= */

:root,
[data-theme] {
  --bg:          #0E1015;
  --paper:       #12161D;   /* pop-ups and drawers */
  --card:        #161B23;   /* panels */
  --card-2:      #1B212B;   /* raised bars */
  --surface:     rgba(255, 255, 255, .03);
  --surface-2:   rgba(255, 255, 255, .06);
  --line:        #262D38;
  --ink:         #F3F0E8;   /* cream text */
  --muted:       #8A93A3;
  --accent:      #EC7349;   /* orange */
  --accent-ink:  #14110F;
  --accent-soft: rgba(236, 115, 73, .12);
  --signal:      #6FCF9C;   /* mint green */
  --good:        #6FCF9C;
  --warn:        #E8C26A;
  --bad:         #EF7A6A;
  --scrim:       rgba(5, 6, 9, .72);
  --lift:        0 24px 60px rgba(0, 0, 0, .5);
  --neon:        #6FCF9C;
  --glow:        none;
  --glow-hover:  none;
  --halo:        #262D38;
  --halo-soft:   transparent;
  --halo-deep:   rgba(0, 0, 0, .45);
  --today:       #1B2119;
  --topbar-bg:   rgba(14, 16, 21, .88);
  --live-bg:     #1B1F17;   /* olive tint of the "Live now" card */
  --neon-green:  #39F58A;   /* main buttons */
  --neon-green-hi: #6BFFA8; /* main buttons on hover */
  --mono:        'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --head:        'Space Grotesk', 'IBM Plex Sans', sans-serif;
  color-scheme: dark;
}

/* ------------------------------- type ------------------------------- */

body { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.display, h1, h2, h3,
.brand-text b, .auth-brand b, .how-n, .product-name, .v-count,
.q-totals b, .cl-count b, .stat b {
  font-family: var(--head);
  letter-spacing: -0.02em;
}
h1, h2, h3, .modal-head h2, .d-head h2, .section-head h2, .hero h1 { font-weight: 600; color: var(--ink); }
.hero h1 { letter-spacing: -0.035em; }

/* the small grey labels on the site are monospace */
.eyebrow, .brand-text small, .pulled, .sol, .label, .step-role,
.field label, .block > h4, .sub-h, .spec-table th, .opp thead th, .ai,
.d-pos, .section-note, .log-row .when, .save-state, .q-field, .q-totals span,
.stat span, .modal-foot, .foot, .day-date {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: .01em;
}
.eyebrow { color: var(--muted); }
.how-n { font-family: var(--mono); font-weight: 400; color: var(--accent); }

a { color: var(--signal); }

/* ------------------------- no glow, no aura ------------------------- */

.aura { display: none !important; }
.table-wrap, .modal-card, .drawer, .auto-note, .day, .pill, .ws-item,
.auth-card, .setup-note, .stat.signal b { box-shadow: none !important; text-shadow: none !important; }
.drawer { border-color: var(--line); }

/* ------------------------------ buttons ----------------------------- */
/* Orange solid with dark bold text, or a dark outline with mono text. */

.btn { border-radius: 10px; font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
.btn-solid,
a.btn-solid {
  background: var(--neon-green); color: #04140B; border: 1px solid var(--neon-green);
  box-shadow: 0 0 0 1px rgba(57, 245, 138, .25), 0 0 18px rgba(57, 245, 138, .35); filter: none;
}
.btn-solid:hover {
  background: var(--neon-green-hi); border-color: var(--neon-green-hi); filter: none;
  box-shadow: 0 0 0 1px rgba(107, 255, 168, .35), 0 0 26px rgba(57, 245, 138, .55);
}
.btn-line,
a.btn-line {
  background: transparent; color: var(--ink); border: 1px solid #333B47;
  font-family: var(--mono); font-weight: 400;
}
.btn-line:hover { border-color: var(--muted); background: var(--surface); }

/* ------------------- selected / done markers in mint ------------------- */

.pill.on,
.d-tab.on,
.view-switch button[aria-selected="true"] {
  background: var(--card-2); color: var(--ink); border-color: var(--line);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.badge,
.step-n.done,
.vendor.top .vendor-rank,
.run-steps li.done .run-mark {
  background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--good); border-color: transparent; box-shadow: none;
}

/* the green "Live" dot, like "● New match" */
.live {
  background: transparent; padding: 0; font-family: var(--mono); font-weight: 400; color: var(--good);
}
.live-dot { width: 8px; height: 8px; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 15%, transparent); }

.tag.accent, .chip { color: var(--good); }
.tag.accent { background: color-mix(in srgb, var(--good) 12%, transparent); }
.due-when.soon { color: var(--accent); }
.type.review, .type.disagree, .owner, .stat.signal b { color: var(--signal); }

/* progress bars like the "92%" match bars */
.prog-dots i { background: var(--surface-2); }
.prog-dots i.on { background: var(--good); }
.cl-bar { background: var(--surface-2); }
.cl-bar span { background: var(--good); box-shadow: none; }
.bullets li::before { background: var(--accent); }

/* ------------------------------- cards ------------------------------ */

.table-wrap, .step, .vendor, .email, .q-party, .modal-card, .auth-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
}
.vendor.top { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.opp tbody tr:hover { background: var(--surface); }
.contact, .result, .email-head { background: var(--card-2); }
.note, .vendor-mail, .run-steps li.active { background: var(--accent-soft); }

/* section rules like "How SourcePhoenix works" */
.how-steps li { border-top: 1px solid var(--line); }

/* the week strip: today gets the olive "Live now" tint */
.day, .day:not(.today) { background: var(--card); border-color: var(--line); }
.day:hover { border-color: #39414E; }
.day.today {
  background: var(--live-bg); color: var(--ink);
  border-color: color-mix(in srgb, var(--good) 35%, var(--line)); box-shadow: none;
}
.day.today .day-name { color: var(--good); font-family: var(--mono); font-weight: 400; }
.day.picked { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent) !important; }

/* inputs */
#search, #vSearch, .q-in, .to-input, .notes-box, .v-email-input, #vCatSel, .d-actions select {
  background: var(--bg); border-color: var(--line); border-radius: 10px;
}
#search:focus, #vSearch:focus, .q-in:focus, .to-input:focus, .notes-box:focus,
.v-email-input:focus, #vCatSel:focus, .d-actions select:focus {
  border-color: var(--muted); box-shadow: none;
}
:focus-visible { outline-color: var(--accent); }

/* top bar */
.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--line); }
.who { border-left-color: var(--line); }

.toast { border-radius: 10px; }

/* typed text stays in the normal font, even inside a mono label */
input, select, textarea { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: normal; }

/* category and product chips: mint on a mint tint, not on orange */
.chip { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); }
.chip.muted { background: var(--surface-2); color: var(--muted); }

/* Opportunities / Vendors / Settings: a green glow on the one you're in */
.view-switch { border-color: rgba(57, 245, 138, .28); background: rgba(57, 245, 138, .04); }
.view-switch button { color: var(--muted); transition: color .15s, background .15s; }
.view-switch button:hover { color: var(--neon-green); background: rgba(57, 245, 138, .08); }
.view-switch button[aria-selected="true"] {
  background: rgba(57, 245, 138, .16); color: var(--neon-green); border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(57, 245, 138, .45), 0 0 16px rgba(57, 245, 138, .25);
}

/* Overview / Read and spec / Vendors / Outreach / Quote tabs in the contract drawer:
   the same green as the main switch */
.d-tab { color: var(--muted); transition: color .15s, background .15s; }
.d-tab:hover { color: var(--neon-green); background: rgba(57, 245, 138, .08); }
.d-tab.on {
  background: rgba(57, 245, 138, .16); color: var(--neon-green);
  box-shadow: inset 0 0 0 1px rgba(57, 245, 138, .45), 0 0 16px rgba(57, 245, 138, .25);
}

/* the old white "paper" cards (synopsis, Claude results, vendor shortlist, emails)
   become dark cards like the rest of the site */
.light-card, [data-theme] .light-card {
  --ink: #F3F0E8; --muted: #8A93A3; --paper: #161B23; --card: #161B23; --card-2: #1B212B;
  --surface: rgba(255, 255, 255, .03); --surface-2: rgba(255, 255, 255, .06);
  --line: #262D38; --signal: #6FCF9C; --accent-soft: rgba(236, 115, 73, .12);
  --good: #6FCF9C; --warn: #E8C26A; --bad: #EF7A6A;
  background: var(--card); color: var(--ink); color-scheme: dark;
}
.d-body .block.light-card { border: 1px solid var(--line); }
.d-body .block.synopsis > h4, .q-profile.light-card summary { color: var(--muted); }

/* ------------------------- loading screen phoenix ------------------------- */
/* Each part is its own layer moved only with transform and opacity, so the
   graphics chip animates it and it keeps flying while the page is busy loading. */
.phoenix { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.px-bird, .px-layer, .px-glow { position: absolute; inset: 0; }
.px-layer { width: 100%; height: 100%; overflow: visible; display: block; }
.px-bird, .px-layer, .px-glow, .px-ember { will-change: transform, opacity; backface-visibility: hidden; }
.px-glow {
  inset: -18%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(245, 154, 60, .38), rgba(226, 69, 42, .14) 45%, transparent 70%);
  animation: px-glow 1.2s ease-in-out infinite alternate;
}
.px-bird   { animation: px-bob 1.2s ease-in-out infinite; }
.px-wing-l { transform-origin: 47.5% 46.7%; animation: px-flap-l .6s ease-in-out infinite alternate; }
.px-wing-r { transform-origin: 52.5% 46.7%; animation: px-flap-r .6s ease-in-out infinite alternate; }
.px-flame  { transform-origin: 50% 58.3%; animation: px-flicker .35s ease-in-out infinite alternate; }
.px-flame.f2 { animation-duration: .42s; animation-delay: -.1s; }
.px-flame.f3 { animation-duration: .38s; animation-delay: -.2s; }
.px-crest  { transform-origin: 50.8% 27.5%; animation: px-flicker .3s ease-in-out infinite alternate; }
.px-ember {
  position: absolute; border-radius: 50%; display: block;
  width: 3px; height: 3px; background: #FFC861; box-shadow: 0 0 4px #F59A3C;
  animation: px-rise 1.6s ease-out infinite;
}
.px-ember.e1 { left: 42%; top: 80%; }
.px-ember.e2 { left: 55%; top: 83%; width: 2.5px; height: 2.5px; background: #F59A3C; animation-delay: .55s; }
.px-ember.e3 { left: 49%; top: 86%; width: 2px; height: 2px; background: #FFE08A; animation-delay: 1.1s; }
@keyframes px-bob     { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } }
@keyframes px-flap-l  { from { transform: rotate(-16deg); } to { transform: rotate(12deg); } }
@keyframes px-flap-r  { from { transform: rotate(16deg); } to { transform: rotate(-12deg); } }
@keyframes px-flicker { from { transform: scale(.9, .82); opacity: .8; } to { transform: scale(1.06, 1.08); opacity: 1; } }
@keyframes px-rise    { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate3d(0, -44px, 0); opacity: 0; } }
@keyframes px-glow    { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .px-bird, .px-wing-l, .px-wing-r, .px-flame, .px-crest, .px-ember, .px-glow { animation-duration: 3s; }
}

/* show / hide password */
.pw-wrap { position: relative; display: block; }
.pw-wrap .q-in { width: 100%; padding-right: 52px; }
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--muted); border-radius: 8px; background: transparent;
}
.pw-eye:hover { color: var(--neon-green); background: rgba(57, 245, 138, .08); }
.pw-eye[aria-pressed="true"] { color: var(--neon-green); }

/* password peek: the real box draws nothing (its dots are transparent); .pw-mask draws
   the dots, the newest letter and the cursor on top, in a monospace font so they line up */
.pw-wrap .q-in[type="password"] { color: transparent; caret-color: transparent; font-family: var(--mono); letter-spacing: 0; }
.pw-wrap .q-in[type="password"]::selection { background: rgba(57, 245, 138, .25); }
.pw-wrap .q-in:-webkit-autofill { animation-name: pw-autofill; animation-duration: 1ms; }
@keyframes pw-autofill { from { opacity: 1; } to { opacity: 1; } }
.pw-mask {
  position: absolute; left: 1px; right: 52px; top: 0; bottom: 0;
  display: flex; align-items: center; overflow: hidden; white-space: pre;
  font-family: var(--mono); color: var(--ink); pointer-events: none; letter-spacing: 0;
}
.pw-mask b { font-weight: 400; display: inline-block; width: 1ch; text-align: center; }
.pw-mask b.pw-peek { color: var(--neon-green); }
.pw-caret { display: inline-block; width: 0; height: 1.15em; border-left: 1.5px solid var(--ink); margin-right: -1.5px; animation: pw-blink 1s steps(1) infinite; }
@keyframes pw-blink { 50% { opacity: 0; } }
.pw-wrap .q-in[type="text"] ~ .pw-mask { display: none; }

/* Account menu (with Sign out) on tablets and phones. app.css used to hide it under 1100px,
   which left phones with no way to sign out. Now it stays: initials only on small screens,
   pinned to the top right of the bar. */
@media (max-width: 1100px) {
  .who { display: block; }
}
@media (max-width: 820px) {
  .who { position: absolute; top: 10px; right: 12px; padding-left: 0; border-left: none; }
  .who .acct-text { display: none; }
  .who .acct-btn { padding: 0; min-width: 44px; min-height: 44px; justify-content: center; border-radius: 50%; }
  .who .acct-btn .owner { width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center; padding: 0; font-size: 13px;
    border: 1px solid rgba(57, 245, 138, .45); background: rgba(57, 245, 138, .1); color: var(--neon-green); }
  .who .acct-menu { right: 0; min-width: 240px; }
  .who .acct-menu button { min-height: 44px; }
  .who .acct-menu button[data-acct="out"] { color: var(--bad); }
  .topbar .brand { padding-right: 56px; }
}

/* Live dots (home page tagline, the board's "Live", Phoenix): a ring keeps pinging out of the
   dot like a live feed. Only transform and opacity move, so it costs almost nothing. */
.live-dot, .pf-live-dot {
  position: relative; display: inline-block; flex-shrink: 0; border-radius: 50%;
  background: var(--neon-green); box-shadow: 0 0 8px rgba(57, 245, 138, .65);
  animation: live-beat 1.6s ease-in-out infinite;
}
.live-dot::after, .pf-live-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--neon-green);
  animation: live-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; will-change: transform, opacity;
}
@keyframes live-ping { 0% { transform: scale(1); opacity: .75; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes live-beat { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  .live-dot, .live-dot::after, .pf-live-dot, .pf-live-dot::after { animation-duration: 4s; }
}

/* Settings: monthly automation allowance */
.s-allow-line { margin: 4px 0 10px; font-size: 14px; color: var(--ink); }
.s-allow { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 6px; }
.s-allow span { display: block; height: 100%; border-radius: 999px; background: var(--good); }

/* iPhone / Chrome autofill: keep the app's dark box instead of the yellow one, and keep
   the password drawn by our own dots (the box's own text stays invisible) */
.q-in:-webkit-autofill, .q-in:-webkit-autofill:hover, .q-in:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important; box-shadow: 0 0 0 1000px var(--bg) inset !important;
  -webkit-text-fill-color: var(--ink) !important; caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}
.pw-wrap .q-in[type="password"]:-webkit-autofill,
.pw-wrap .q-in[type="password"]:-webkit-autofill:focus { -webkit-text-fill-color: transparent !important; }
.pw-wrap .q-in[type="password"] { -webkit-text-fill-color: transparent; }
.pw-wrap .q-in[type="text"] { -webkit-text-fill-color: var(--ink); }

/* Settings → You: delete my account */
.s-danger { margin-top: 18px; border: 1px solid rgba(239, 122, 106, .35); border-radius: 14px; background: rgba(239, 122, 106, .04); }
.s-danger > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; user-select: none; }
.s-danger > summary::-webkit-details-marker { display: none; }
.s-danger-t { font-family: var(--head); font-weight: 600; font-size: 15px; color: var(--bad); }
.s-danger-s { font-size: 13px; color: var(--muted); }
.s-danger-chev { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--bad); border-bottom: 2px solid var(--bad); transform: rotate(45deg); transition: transform .2s; margin-top: -4px; }
.s-danger[open] .s-danger-chev { transform: rotate(-135deg); margin-top: 4px; }
.s-danger > summary:hover { background: rgba(239, 122, 106, .06); border-radius: 14px; }
.s-danger-body { padding: 0 16px 16px; }
.s-danger-p { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.s-del-open { color: var(--bad); border-color: rgba(239, 122, 106, .4); }
.s-del-open:hover { border-color: var(--bad); background: rgba(239, 122, 106, .08); }
.s-del-box { margin-top: 12px; padding: 16px; border: 1px solid rgba(239, 122, 106, .45); border-radius: 14px; background: rgba(239, 122, 106, .06); }
.s-del-box h4 { font-family: var(--head); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.s-del-list { margin: 0 0 12px 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.s-del-box .q-in { max-width: 260px; }
.s-del-go { background: var(--bad); color: #1A0805; border: 1px solid var(--bad); font-weight: 600; }
.s-del-go:hover:not([disabled]) { filter: brightness(1.08); }
.s-del-go[disabled] { opacity: .45; }

/* sign-in: the back arrow beside the logo */
.auth-back {
  width: 40px; height: 40px; margin-left: -8px; display: grid; place-items: center; flex-shrink: 0;
  border-radius: 10px; color: var(--muted);
}
.auth-back:hover { color: var(--neon-green); background: rgba(57, 245, 138, .08); text-decoration: none; }
.s-danger-wrap { margin: 28px 0 8px; }

.s-table .s-title-in { min-width: 180px; padding: 7px 10px; font-size: 14px; }
.s-owner { font-weight: 600; color: var(--ink); }

/* the "Phoenix" half of the name, in orange */
.bird-word { color: var(--accent); }