/* ==========================================================================
   /cce — Chief Campus Executive application.
   Builds on css/styles.css (tokens, fonts, .wrap, .eyebrow, .lede, .btn);
   only the form and page frame live here.
   ========================================================================== */

.cce-top { border-bottom: 1px solid var(--hairline); }
.cce-top__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; }
.cce-top__back {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--text-muted); border-bottom: 1px solid var(--hairline);
}
.cce-top__back:hover { color: var(--accent-signal); }

.cce { padding: 56px 0 96px; }
.cce__h {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.05; letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.cce .lede + .lede { margin-top: 14px; }

.cce-form { margin-top: 40px; }
.cce-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 600px) {
  .cce-grid { grid-template-columns: 1fr 1fr; gap: 20px 18px; }
  .cce-field--wide { grid-column: 1 / -1; }
}

.cce-field { display: flex; flex-direction: column; gap: 7px; position: relative; }
.cce-field label {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text);
}
.cce-opt { color: var(--text-muted); margin-left: 6px; }
.cce-field input,
.cce-field textarea {
  width: 100%;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 12px 14px;
}
.cce-field textarea { resize: vertical; min-height: 132px; line-height: 1.5; }
.cce-field input::placeholder, .cce-field textarea::placeholder { color: rgba(169, 166, 156, 0.6); }
.cce-field input:focus-visible, .cce-field textarea:focus-visible {
  outline: 2px solid var(--accent-signal); outline-offset: 2px; border-color: transparent;
}
.cce-field [aria-invalid="true"] { border-color: var(--accent-warm); }
.cce-hint { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.45; }
.cce-count {
  position: absolute; right: 10px; bottom: 8px;
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-muted); pointer-events: none;
}
.cce-field:has(.cce-hint) .cce-count { bottom: calc(8px + 1.45em + 7px); }
.cce-count.is-ok { color: var(--accent-signal); }

/* Off-screen, not display:none: some bots skip fields that are display:none. */
.cce-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.cce-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; cursor: pointer; line-height: 1.5; }
.cce-consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent-warm); flex: none; }
.cce-consent input:focus-visible { outline: 2px solid var(--accent-signal); outline-offset: 2px; }

.cce-actions { margin-top: 28px; }
.cce-actions .btn[disabled] { opacity: 0.6; cursor: progress; }
.cce-privacy { margin-top: 14px; font-size: 0.8125rem; color: var(--text-muted); }
.cce-privacy + .cce-privacy { margin-top: 6px; }
.cce-privacy a { color: var(--text-muted); border-bottom: 1px solid var(--hairline); }
.cce-privacy a:hover { color: var(--text); }

/* under the College field once they've picked (or chosen "not listed") */
.cce-picked { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--accent-warm); line-height: 1.45; }

.cce-form__error {
  margin-bottom: 22px; padding: 14px 16px;
  border: 1px solid rgba(var(--warm-rgb), 0.5); border-left-width: 3px; border-radius: var(--radius);
  background: rgba(var(--warm-rgb), 0.07); color: var(--text); line-height: 1.5;
}
.cce-form__error:focus { outline: none; }

.cce-done { margin-top: 40px; padding: 32px 28px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); }
.cce-done:focus { outline: none; }
.cce-done .h2 { margin-bottom: 12px; overflow-wrap: anywhere; }

/* Success tick. Plays once, on its own, when #done stops being hidden (CSS
   animations start when an element is displayed). The tick draws in orange,
   then a green copy with identical geometry sweeps over it, the disc tint
   follows, and it lands with a small pop and a ripple. About 1.5s in all. */
.cce-tick {
  width: 72px; height: 72px; margin-bottom: 22px;
  animation: cce-tick-in 0.32s var(--ease) both, cce-tick-pop 0.36s var(--ease) 1.12s forwards;
}
.cce-tick svg { display: block; overflow: visible; }
.cce-tick__ring, .cce-tick__mark {
  fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  /* pathLength="100" on each, so 100 is one full stroke. The gap is a touch longer and the
     start offset is 102, so an undrawn stroke shows nothing, not even its round end cap. */
  stroke-dasharray: 100 102; stroke-dashoffset: 102;
}
.cce-tick__ring { transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }   /* draw from 12 o'clock */
.cce-tick--warm   { stroke: var(--accent-warm); }
.cce-tick--signal { stroke: var(--accent-signal); stroke-width: 4.4; }   /* a hair wider, so no orange shows at the edges */

.cce-tick__ring.cce-tick--warm   { animation: cce-draw 0.5s var(--ease) both, cce-fade 0.2s linear 1.15s forwards; }
.cce-tick__mark.cce-tick--warm   { animation: cce-draw 0.34s var(--ease) 0.28s both, cce-fade 0.2s linear 1.15s forwards; }
.cce-tick__ring.cce-tick--signal { animation: cce-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.72s both; }
.cce-tick__mark.cce-tick--signal { animation: cce-draw 0.3s var(--ease) 0.9s both; }

.cce-tick__disc { fill: rgba(var(--warm-rgb), 0.1); animation: cce-disc 0.45s ease-in-out 0.72s both; }
.cce-tick__ripple {
  fill: none; stroke: rgba(var(--signal-rgb), 0.55); stroke-width: 2; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: cce-ripple 0.7s var(--ease) 1.12s forwards;   /* not "both": it must stay invisible while it waits */
}

/* the message rises in behind the tick */
.cce-done > :not(.cce-tick) { animation: cce-rise 0.4s var(--ease) both; }
.cce-done > :nth-child(2) { animation-delay: 0.3s; }
.cce-done > :nth-child(3) { animation-delay: 0.38s; }
.cce-done > :nth-child(4) { animation-delay: 0.46s; }
.cce-done > :nth-child(5) { animation-delay: 0.54s; }

@keyframes cce-draw    { from { stroke-dashoffset: 102; } to { stroke-dashoffset: 0; } }
@keyframes cce-fade    { to { opacity: 0; } }
@keyframes cce-disc    { from { fill: rgba(var(--warm-rgb), 0.1); } to { fill: rgba(var(--signal-rgb), 0.12); } }
@keyframes cce-tick-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes cce-tick-pop { 50% { transform: scale(1.07); } }
@keyframes cce-ripple  { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes cce-rise    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The site-wide reduced-motion rule shortens animations but keeps their
   delays, so this panel opts out completely: the finished green tick and
   the message, straight away. */
@media (prefers-reduced-motion: reduce) {
  .cce-tick, .cce-tick *, .cce-done > * { animation: none !important; }
  .cce-tick--warm, .cce-tick__ripple { display: none; }
  .cce-tick__ring, .cce-tick__mark { stroke-dashoffset: 0; }
  .cce-tick__disc { fill: rgba(var(--signal-rgb), 0.12); }
}

.cce-alt { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline); color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.cce-alt a { color: var(--text); border-bottom: 1px solid var(--hairline); }
.cce-alt a:hover { color: var(--accent-signal); border-bottom-color: var(--accent-signal); }