/* Cirqley's look (cirqley.com): Product Sans; deep plum and night-plum, orchid, a white-to-orchid gradient for
   headlines on dark, raspberry for highlights. Loaded after studio.css and studio-auto.css (whose olive greens were
   recoloured to this plum family), so it has the last word. */
@font-face { font-family: 'Product Sans'; src: local('Product Sans'), url('/brand/ProductSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --cq-plum: #5e0466;
  --cq-plum-deep: #45024c;
  --cq-ink: #1f1027;
  --cq-night: #13061b;
  --cq-orchid: #9e4ea8;
  --cq-lilac: #e6d2ec;
  --cq-mist: #f8f3fa;
  --cq-raspberry: #cc3366;
  --cq-navy: #0b2345;
  --cq-muted: #6f6377;
  --cq-line: #ebe2ef;
  --cq-hero: radial-gradient(120% 160% at 0% 0%, #44124f 0%, #22092b 45%, #13061b 100%);
  --cq-headline: linear-gradient(90deg, #ffffff 0%, #e2c4e8 45%, #b072bb 100%);
  --cq-bar: linear-gradient(90deg, #9e4ea8, #cc3366);
}

.content-studio, .content-studio button, .content-studio input, .content-studio textarea, .content-studio select {
  font-family: 'Product Sans', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.content-studio { --primary: var(--cq-plum); --ring: var(--cq-orchid); --accent: #f6eef8; --foreground: var(--cq-ink); --border: var(--cq-line); color: var(--cq-ink); }
.content-studio.app { background: #fcfafd !important; }
.content-studio h1, .content-studio h2, .content-studio h3 { color: var(--cq-ink); }
.content-studio ::selection { background: #ecd4f0; }

/* ---------- the header: the site's night plum, the logo, the gradient wordmark ---------- */
.content-studio .studio-header { background: var(--cq-hero); border-bottom: 0; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .04); }
.content-studio .studio-wordmark { gap: 12px; }
.content-studio .studio-wordmark img { width: 38px; height: 38px; border-radius: 11px; display: block; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.content-studio .studio-wordmark .cq-name { display: grid; line-height: 1.1; }
.content-studio .studio-wordmark .cq-name b { font-size: 18px; font-weight: 400; letter-spacing: 0; background: var(--cq-headline); -webkit-background-clip: text; background-clip: text; color: transparent; }
.content-studio .studio-wordmark .cq-name small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #c9b3d1; }
.content-studio .studio-header .auto-chip { color: #eadff0; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); }
.content-studio .studio-header .auto-chip::before { background: #f0b45a; }
.content-studio .studio-header .auto-chip.ok::before { background: #74e0a6; }
.content-studio .studio-header .secondary, .content-studio .studio-header .user-chip-btn { background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .16); }
.content-studio .studio-header .secondary:hover, .content-studio .studio-header .user-chip-btn:hover { background: rgba(255, 255, 255, .14); }
.content-studio .studio-header .user-chip-text small { color: #c9b3d1; }
.content-studio .studio-header .mode-chip { color: #f6d58f; border-color: rgba(246, 213, 143, .4); }

/* ---------- buttons, links, focus ---------- */
.content-studio .primary { background: var(--cq-plum); border-color: var(--cq-plum); color: #fff; }
.content-studio .primary:hover:not(:disabled) { background: var(--cq-plum-deep); border-color: var(--cq-plum-deep); }
.content-studio .secondary { border-color: #e2d6e7; color: #3b2a43; background: #fff; }
.content-studio .secondary:hover:not(:disabled) { border-color: #c9a5cf; background: #fbf6fc; }
.content-studio .text-button { color: var(--cq-plum); }
.content-studio .text-button.muted { color: var(--cq-muted); }
.content-studio :focus-visible { outline: 2px solid var(--cq-orchid); outline-offset: 2px; }
.content-studio .crumbs a { color: var(--cq-muted); }
.content-studio .crumbs a:hover { color: var(--cq-plum); }

/* ---------- the project's goal: what we're making, and how far along it is ---------- */
.content-studio .goal-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 28px; background: var(--cq-hero); color: #fff; display: grid; gap: 20px; margin: 4px 0 18px; }
.content-studio .goal-hero::after { content: ''; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(204, 51, 102, .28), transparent 65%); pointer-events: none; }
.content-studio .goal-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; position: relative; z-index: 1; }
.content-studio .goal-hero .eyebrow { color: #cdb3d6; letter-spacing: .16em; font-size: 11px; }
.content-studio .goal-hero h2 { margin: 6px 0 0; font-size: 34px; font-weight: 400; line-height: 1.1; color: transparent; background: var(--cq-headline); -webkit-background-clip: text; background-clip: text; }
.content-studio .goal-hero h2 b { font-weight: 700; }
.content-studio .goal-side { text-align: right; }
.content-studio .goal-side b { font-size: 30px; font-weight: 700; display: block; line-height: 1; }
.content-studio .goal-side small { color: #cdb3d6; font-size: 13px; }
.content-studio .goal-bar { position: relative; z-index: 1; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; display: flex; }
.content-studio .goal-bar span { display: block; height: 100%; }
.content-studio .goal-bar .done { background: var(--cq-bar); }
.content-studio .goal-bar .coming { background: rgba(255, 255, 255, .22); }
.content-studio .goal-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.content-studio .goal-stat { border-radius: 14px; padding: 12px 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); display: grid; gap: 2px; }
.content-studio .goal-stat b { font-size: 26px; font-weight: 700; line-height: 1.1; color: #fff; }
.content-studio .goal-stat span { font-size: 13px; color: #f1e6f4; }
.content-studio .goal-stat small { font-size: 11.5px; color: #bda5c6; }
.content-studio .goal-stat.lead b { color: transparent; background: linear-gradient(90deg, #ffffff, #f19ab8); -webkit-background-clip: text; background-clip: text; }

.content-studio .pillar-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.content-studio .pillar-goal { border: 1px solid var(--cq-line); border-radius: 16px; padding: 16px; background: #fff; display: grid; gap: 10px; align-content: start; }
.content-studio .pillar-goal header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.content-studio .pillar-goal h3 { margin: 0; font-size: 16px; font-weight: 700; }
.content-studio .pillar-goal .need { flex-shrink: 0; font-size: 12px; color: var(--cq-plum); background: #f6eef8; border-radius: 99px; padding: 3px 9px; font-weight: 600; }
.content-studio .pillar-goal p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cq-muted); }
.content-studio .pillar-goal p.pg-empty { font-style: italic; color: #a597ad; }
.content-studio .pillar-goal .pg-bar { height: 6px; border-radius: 99px; background: #f1e9f4; overflow: hidden; display: flex; }
.content-studio .pillar-goal .pg-bar span { height: 100%; }
.content-studio .pillar-goal .pg-bar .done { background: var(--cq-bar); }
.content-studio .pillar-goal .pg-bar .coming { background: #dcc2e2; }
.content-studio .pillar-goal footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--cq-muted); }
.content-studio .pillar-goal footer .text-button { padding: 0; font-size: 12.5px; }

.content-studio .find-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border: 1px dashed #dccbe2; border-radius: 14px; background: #fff; margin-bottom: 22px; }
.content-studio .find-row > span { font-size: 13.5px; color: var(--cq-muted); }
.content-studio .find-row > span b { color: var(--cq-ink); }
.content-studio .find-row .button-row { gap: 8px; }
.content-studio .find-row .secondary, .content-studio .find-row .primary { padding: 8px 12px; font-size: 13px; }

/* the client's page: a project card's goal */
.content-studio .card-goal { display: grid; gap: 6px; margin: 16px 0 6px; }
.content-studio .card-goal .pg-bar { height: 6px; border-radius: 99px; background: #f1e9f4; overflow: hidden; display: flex; }
.content-studio .card-goal .pg-bar span { height: 100%; }
.content-studio .card-goal .pg-bar .done { background: var(--cq-bar); }
.content-studio .card-goal .pg-bar .coming { background: #dcc2e2; }
.content-studio .card-goal small { font-size: 12px; color: var(--cq-muted); }

/* ---------- sign in ---------- */
.content-studio.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--cq-hero); }
.content-studio .login-card { width: min(400px, 100%); background: #fff; border-radius: 20px; padding: 28px 26px; display: grid; gap: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .4); }
.content-studio .login-brand { display: flex; align-items: center; gap: 12px; }
.content-studio .login-brand img { width: 40px; height: 40px; border-radius: 11px; display: block; }
.content-studio .login-brand .cq-name { display: grid; line-height: 1.15; }
.content-studio .login-brand .cq-name b { font-size: 18px; font-weight: 400; color: var(--cq-ink); }
.content-studio .login-brand .cq-name small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cq-muted); }
.content-studio .login-card h1 { margin: 6px 0 0; font-size: 26px; }
.content-studio .login-card .primary { justify-content: center; padding: 11px 14px; font-size: 15px; }
.content-studio .login-error { margin: 0; color: #b4475f; font-size: 13.5px; }
.content-studio .login-note { color: var(--cq-muted); font-size: 12px; text-align: center; }
.content-studio.boot { min-height: 100vh; display: grid; place-items: center; color: var(--cq-plum); }

/* ---------- this week against the goal (header) ---------- */
.content-studio .goal-chip { position: relative; overflow: hidden; display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 99px; font-size: 12px; color: #f1e6f4;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); white-space: nowrap; }
.content-studio .goal-chip i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(158, 78, 168, .6), rgba(204, 51, 102, .6)); }
.content-studio .goal-chip span { position: relative; }
.content-studio .goal-chip b { color: #fff; }
.content-studio .goal-chip.met i { background: linear-gradient(90deg, rgba(63, 155, 107, .7), rgba(116, 224, 166, .6)); }

/* ---------- the team: goals, passwords ---------- */
.content-studio .team-name { flex-wrap: wrap; }
.content-studio .team-name .team-email-label { font-weight: 400; background: none; padding: 0; color: var(--cq-muted); font-size: 12px; }
.content-studio .team-goal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--cq-muted); }
.content-studio .team-goal label { display: grid; gap: 2px; }
.content-studio .team-goal label small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.content-studio .team-goal input { width: 70px; padding: 5px 8px; border: 1px solid #e3d7e5; border-radius: 8px; font: inherit; }
.content-studio .goal-bar-mini { width: 90px; height: 6px; border-radius: 99px; background: #f1e9f4; overflow: hidden; display: inline-block; }
.content-studio .goal-bar-mini i { display: block; height: 100%; background: var(--cq-bar); }
.content-studio .goal-bar-mini.met i { background: #3f9b6b; }
.content-studio .team-row .text-button.small { font-size: 12.5px; padding: 4px 6px; white-space: nowrap; }
.content-studio .new-password { border: 1px solid #e6d2ec; background: #fbf6fc; border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; margin-bottom: 12px; }
.content-studio .new-password p { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.content-studio .new-password code { font-size: 14px; background: #fff; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--cq-line); user-select: all; }
.content-studio .new-password small { color: var(--cq-muted); }
.content-studio .team-row { flex-wrap: wrap; row-gap: 8px; }
.content-studio .team-row .team-name { flex: 1 1 150px; flex-direction: column; align-items: flex-start; gap: 2px; }
.content-studio .team-row .team-goal { order: 10; flex-basis: 100%; padding-left: 48px; }
.content-studio .team-add-row { grid-template-columns: 1fr 1fr; }
.content-studio .team-add-row .pick { width: 100% !important; }
.content-studio .team-add-row .primary { grid-column: 1 / -1; justify-content: center; }

@media (max-width: 760px) {
  .content-studio .goal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-studio .goal-hero h2 { font-size: 26px; }
  .content-studio .goal-side { text-align: left; }
}