/* ==========================================================================
   CookieCut — design system
   Warm, friendly, consumer-facing. Deliberately NOT a CAD look: cream page,
   big rounded cards, soft shadows, coral primary, generous whitespace.
   ========================================================================== */

:root {
    /* Surfaces */
    --cc-bg: #faf7f2;           /* warm off-white page */
    --cc-surface: #ffffff;      /* cards */
    --cc-surface-2: #f4f0e9;    /* inset areas, wells */
    --cc-border: #ece5da;       /* very subtle border */
    --cc-border-strong: #ddd3c4;

    /* Text */
    --cc-text: #3b2f2a;         /* dark brown / charcoal */
    --cc-text-muted: #8b8078;   /* muted warm gray */
    --cc-text-soft: #a99f96;

    /* Accents */
    --cc-coral: #ff6b6b;        /* primary action */
    --cc-coral-dark: #f25555;
    --cc-coral-soft: #ffe8e8;
    --cc-green: #4caf7d;        /* success */
    --cc-green-soft: #e6f6ee;
    --cc-blue: #2f6bff;         /* contour + editor accent */
    --cc-blue-soft: #eaf0ff;

    /* Shape */
    --cc-radius-lg: 20px;
    --cc-radius: 14px;
    --cc-radius-sm: 10px;
    --cc-radius-pill: 999px;

    /* Soft, warm shadows — never harsh */
    --cc-shadow: 0 2px 4px rgba(59, 47, 42, .04), 0 8px 24px rgba(59, 47, 42, .06);
    --cc-shadow-sm: 0 1px 2px rgba(59, 47, 42, .05);
    --cc-shadow-lift: 0 4px 8px rgba(59, 47, 42, .06), 0 16px 40px rgba(59, 47, 42, .10);
}

/* ---- Base ---- */
body {
    background: var(--cc-bg);
    color: var(--cc-text);
    font-family: "Nunito", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .cc-brand-name {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cc-text);
}

/* ---- Header ---- */
.cc-header {
    padding: 1.125rem 0;
}

.cc-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cc-brand-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    background: var(--cc-coral-soft);
    border-radius: var(--cc-radius);
    font-size: 24px;
    line-height: 1;
}

.cc-brand-name {
    font-size: 1.375rem;
    line-height: 1.1;
}

.cc-tagline {
    color: var(--cc-text-muted);
    font-size: 0.8125rem;
    margin-top: 1px;
}

h1.cc-tagline {
    font-weight: 400;
    line-height: 1.3;
}

.cc-header-phrase {
    color: var(--cc-text-soft);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---- Wizard progress ---- */
.cc-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 0 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.cc-steps::-webkit-scrollbar { display: none; }

.cc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 112px;
    flex: 0 0 auto;
    position: relative;
}

/* The connecting line sits behind the circles, joining their centres. */
.cc-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(50% + 26px);
    right: calc(-50% + 26px);
    height: 2px;
    background: var(--cc-border-strong);
    border-radius: 2px;
    z-index: 0;
}

.cc-step-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.9375rem;
    background: var(--cc-surface);
    border: 2px solid var(--cc-border-strong);
    color: var(--cc-text-soft);
    position: relative;
    z-index: 1;
    transition: all 0.2s ease;
}

.cc-step-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cc-text-soft);
    text-align: center;
    transition: color 0.2s ease;
}

/* Current step */
.cc-step.is-active .cc-step-circle {
    background: var(--cc-coral);
    border-color: var(--cc-coral);
    color: #fff;
    box-shadow: 0 0 0 5px var(--cc-coral-soft);
}
.cc-step.is-active .cc-step-title { color: var(--cc-text); }

/* Completed step: green with a checkmark */
.cc-step.is-done .cc-step-circle {
    background: var(--cc-green);
    border-color: var(--cc-green);
    color: #fff;
}
.cc-step.is-done .cc-step-circle .cc-step-num { display: none; }
.cc-step.is-done .cc-step-circle::after {
    content: "✓";
    font-size: 1rem;
}
.cc-step.is-done .cc-step-title { color: var(--cc-text-muted); }

/* A completed step links to the next one with a green line. */
.cc-step.is-done:not(:last-child)::after { background: var(--cc-green); }

/* ---- Cards ---- */
.cc-card {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-lg);
    box-shadow: var(--cc-shadow);
}

.cc-card-pad { padding: 1.5rem; }

/* ---- Workspace: image area ---- */
.cc-workspace {
    position: relative;
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cc-workspace.has-image {
    padding: 0;
    background: #fff;
}

.cc-workspace:not(.has-image) > .cc-status-badge,
.cc-workspace:not(.has-image) > .cc-canvas-tools {
    display: none;
}

.cc-canvas-wrap {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    line-height: 0;
}

.cc-canvas-wrap img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 78vh;
    border-radius: 0;
    cursor: crosshair;
    user-select: none;
    -webkit-user-drag: none;
}

.cc-contour-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.cc-contour-halo,
.cc-contour-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.cc-contour-halo {
    stroke: rgba(255, 255, 255, .96);
    stroke-width: 5px;
}

.cc-contour-path {
    stroke: #2f6bff;
    stroke-width: 2.4px;
}

/* ---- Upload state ---- */
.cc-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 460px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    border: 2px dashed var(--cc-border-strong);
    border-radius: var(--cc-radius);
    background: var(--cc-surface);
    transition: all 0.2s ease;
}
.cc-dropzone:hover,
.cc-dropzone.is-over {
    border-color: var(--cc-coral);
    background: #fffdfc;
}
.cc-dropzone-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: var(--cc-radius);
    background: var(--cc-coral-soft);
    color: var(--cc-coral);
    font-size: 30px;
    margin-bottom: 0.5rem;
}
.cc-dropzone-title { font-size: 1.0625rem; font-weight: 800; }
.cc-dropzone-hint { color: var(--cc-text-muted); font-size: 0.875rem; }
.cc-dropzone-formats {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

/* ---- Status badge ---- */
.cc-status-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.6875rem;
    border-radius: var(--cc-radius-pill);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--cc-shadow-sm);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--cc-text);
    z-index: 5;
}
.cc-status-badge .cc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cc-green);
}
.cc-status-badge.is-busy .cc-dot {
    background: var(--cc-coral);
    animation: cc-pulse 1s ease-in-out infinite;
}
.cc-status-badge.is-error .cc-dot { background: #e05252; }

.cc-build-progress {
    position: relative;
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 99px;
    background: var(--cc-surface-2);
}

.cc-build-progress-fill {
    width: 35%;
    height: 100%;
    border-radius: inherit;
    background: var(--cc-coral);
    transform: translateX(-110%);
}

.cc-build-progress.is-building .cc-build-progress-fill {
    animation: cc-build-progress 1.2s ease-in-out infinite;
}

.cc-build-progress.is-complete .cc-build-progress-fill {
    width: 100%;
    transform: translateX(0);
    transition: width .2s ease;
}

@keyframes cc-build-progress {
    0% { transform: translateX(-110%); }
    55% { transform: translateX(190%); }
    100% { transform: translateX(310%); }
}

@keyframes cc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* ---- Canvas controls: workspace corners ---- */
.cc-canvas-tools {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    z-index: 6;
}

/* ---- Icon buttons ---- */
.cc-icon-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--cc-radius-sm);
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--cc-border);
    color: var(--cc-text);
    box-shadow: var(--cc-shadow-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}
.cc-icon-btn:hover:not(:disabled) {
    background: #fff;
    border-color: var(--cc-border-strong);
    transform: translateY(-1px);
}
.cc-icon-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
    box-shadow: none;
}
.cc-icon-btn:focus-visible {
    outline: 3px solid var(--cc-blue-soft);
    outline-offset: 2px;
}
.cc-icon-btn svg { width: 20px; height: 20px; }

/* The actual-size button shows the current zoom percentage rather than an icon,
   so the user can always read the scale they are looking at. */
.cc-icon-btn-text {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cc-text);
}

/* ---- Trace toolbar ---- */
.cc-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.cc-tool {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--cc-radius-sm);
    background: var(--cc-surface);
    border: 1.5px solid var(--cc-border-strong);
    color: var(--cc-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}
.cc-tool:hover:not(:disabled) {
    border-color: var(--cc-text-soft);
    color: var(--cc-text);
}
.cc-tool svg { width: 21px; height: 21px; }
.cc-tool:disabled { opacity: .35; cursor: not-allowed; }
.cc-tool:focus-visible {
    outline: 3px solid var(--cc-blue-soft);
    outline-offset: 2px;
}

/* Active tool: unmistakable tint + border + icon colour */
.cc-tool.is-active {
    background: var(--cc-blue-soft);
    border-color: var(--cc-blue);
    color: var(--cc-blue);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
}

.cc-tool-sep {
    width: 1px;
    height: 28px;
    background: var(--cc-border);
    margin: 0 0.25rem;
}

/* Brush size slider in the toolbar */
.cc-brush {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.5rem;
    color: var(--cc-text-muted);
    font-size: 0.8125rem;
    font-weight: 700;
}
.cc-brush input[type=range] {
    width: 110px;
    accent-color: var(--cc-blue);
}
.cc-brush-preview {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 50%;
    background: var(--cc-surface-2);
}
#brush-preview-dot {
    width: 12px;
    height: 12px;
    border: 1px solid var(--cc-blue);
    border-radius: 50%;
    background: rgba(47, 107, 255, .45);
    transition: width .1s ease, height .1s ease;
}

/* ---- Info panel ---- */
.cc-help-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}
.cc-help-text {
    color: var(--cc-text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.cc-tip {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--cc-surface-2);
    border-radius: var(--cc-radius);
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: var(--cc-text);
    line-height: 1.5;
}
.cc-tip-icon {
    flex: 0 0 auto;
    color: var(--cc-coral);
    font-size: 18px;
    line-height: 1.3;
}

.cc-pill {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: var(--cc-radius-pill);
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-border);
    color: var(--cc-text-muted);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.cc-mascot-note {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--cc-border);
    text-align: center;
    color: var(--cc-text-soft);
    font-size: 0.875rem;
    font-weight: 700;
}
.cc-mascot-note .cc-mascot { font-size: 34px; display: block; margin-bottom: 0.375rem; }

/* ---- Primary (Next) button ---- */
.cc-btn-primary {
    background: var(--cc-coral);
    border: none;
    color: #fff;
    font-weight: 800;
    border-radius: var(--cc-radius);
    padding: 0.75rem 1.5rem;
    box-shadow: var(--cc-shadow-sm);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.cc-btn-primary:hover:not(:disabled) {
    background: var(--cc-coral-dark);
    transform: translateY(-1px);
    box-shadow: var(--cc-shadow);
    color: #fff;
}
.cc-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.cc-btn-next-round {
    padding: 0.75rem 1.75rem;
}

/* ---- Fixed wizard footer ----
   One footer for every step, pinned to the bottom of the viewport, so Back and
   Next never move as the user advances. Each step previously had its own
   footer inside its panel, which made the buttons jump when panels of
   different heights were swapped in. */
.cc-navbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 76px;
    margin-top: 1.5rem;
    padding: 0 0.25rem;
    background: linear-gradient(to bottom, rgba(250, 247, 242, 0), var(--cc-bg) 38%);
}

/* Reserve the footer's height at the end of the page so the sticky bar never
   covers the last row of content. */
.cc-main {
    padding-bottom: 1rem;
}

.cc-navbar .cc-nav-left,
.cc-navbar .cc-nav-right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 52px;
}

.cc-nav-hint {
    color: var(--cc-text-soft);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* The Back button carries a left arrow in its markup, so Next gets a matching
   right arrow. Drawn here rather than in the label so the JS can set the text
   without having to remember the arrow. */
#nav-next::after {
    content: " →";
    font-weight: 800;
}

.cc-btn-ghost {
    background: transparent;
    border: 1.5px solid var(--cc-border-strong);
    color: var(--cc-text-muted);
    font-weight: 700;
    border-radius: var(--cc-radius);
    padding: 0.75rem 1.25rem;
    transition: all 0.15s ease;
}
.cc-btn-ghost:hover:not(:disabled) {
    border-color: var(--cc-text-soft);
    color: var(--cc-text);
    background: var(--cc-surface);
}

/* ---- Form controls, restyled warm ---- */
.cc-label {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--cc-text);
    margin-bottom: 0.375rem;
}
.form-control, .form-select {
    background: var(--cc-surface);
    border: 1.5px solid var(--cc-border-strong);
    border-radius: var(--cc-radius-sm);
    color: var(--cc-text);
    padding: 0.625rem 0.875rem;
    font-weight: 600;
}
.form-control:focus, .form-select:focus {
    background: var(--cc-surface);
    color: var(--cc-text);
    border-color: var(--cc-blue);
    box-shadow: 0 0 0 3px var(--cc-blue-soft);
}
.form-control::placeholder { color: var(--cc-text-soft); font-weight: 500; }

.cc-field-hint {
    color: var(--cc-text-soft);
    font-size: 0.75rem;
    margin-top: 0.375rem;
}

input[type=range] { accent-color: var(--cc-coral); }

/* ---- Metrics chips ---- */
.cc-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: var(--cc-surface-2);
    border-radius: var(--cc-radius-pill);
    font-size: 0.8125rem;
    color: var(--cc-text-muted);
    font-weight: 700;
}
.cc-metric strong { color: var(--cc-text); font-weight: 800; }

/* ---- Step 2: the outline on its own, with no photograph behind it ---- */
.cc-size-preview {
    position: relative;
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.cc-size-preview img {
    display: block;
    max-width: 100%;
    max-height: 340px;
    border-radius: var(--cc-radius-sm);
    object-fit: contain;
}

.cc-size-vector {
    display: block;
    width: 100%;
    height: 340px;
    max-height: 55vh;
}

.cc-size-vector path {
    fill: var(--cc-blue-soft);
    stroke: var(--cc-blue);
    stroke-width: 1.4px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* ---- Step 3: model stage ---- */
.cc-model-stage {
    position: relative;
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    margin-top: 1rem;
    height: min(62vh, 520px);
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cc-model-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.cc-model-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.cc-model-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cc-model-controls .is-active {
    color: var(--cc-blue);
    border-color: var(--cc-blue);
    background: var(--cc-blue-soft);
}

.cc-model-stage img {
    display: block;
    width: 100%;
    max-height: 440px;
    object-fit: contain;
    border-radius: var(--cc-radius-sm);
}

.cc-model-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--cc-text-muted);
}

.cc-model-empty-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 0.5rem;
    opacity: 0.65;
}

/* ---- Warnings / errors ---- */
.cc-warning {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: #fff6e6;
    border: 1px solid #ffe0ad;
    border-radius: var(--cc-radius-sm);
    color: #8a5a00;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    line-height: 1.45;
}

.cc-error {
    padding: 1.25rem;
    background: #fff0f0;
    border: 1px solid #ffd4d4;
    border-radius: var(--cc-radius);
    color: #a33;
    text-align: center;
}
.cc-error-title { font-weight: 800; margin-bottom: 0.25rem; }

/* ---- Downloads ---- */
.cc-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .cc-workspace, .cc-dropzone { min-height: 380px; }
    .cc-canvas-wrap img { max-height: 460px; }
    .cc-help-title { margin-top: 1.25rem; }
}

@media (max-width: 575.98px) {
    .cc-workspace, .cc-dropzone { min-height: 300px; }
    .cc-canvas-wrap img { max-height: 340px; }
    .cc-step { min-width: 92px; }
    .cc-step-circle { width: 32px; height: 32px; font-size: 0.8125rem; }
    .cc-step:not(:last-child)::after { top: 16px; left: calc(50% + 22px); right: calc(-50% + 22px); }
    .cc-step-title { font-size: 0.6875rem; }
    .cc-tool { width: 42px; height: 42px; }
}

/* ---- Site menu (guides) ---- */
.cc-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--cc-border, #e6ddd2);
    border-radius: 10px;
    background: #fff;
    color: var(--cc-text-soft, #6b5f55);
}
.cc-menu-btn:hover, .cc-menu-btn[aria-expanded="true"] { color: var(--cc-text, #3a2f27); }

/* The wizard is one page, so the menu sits in the steps row's left corner. */
.cc-steps-wrap { position: relative; }
.cc-menu-corner { position: absolute; left: 0; top: 1.5rem; z-index: 5; }
@media (max-width: 767.98px) {
    .cc-menu-corner { position: static; padding-top: 0.75rem; }
}

.cc-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0;
}
.cc-footer-links a + a::before {
    content: "·";
    margin: 0 0.6rem;
    color: var(--cc-text-muted, #9a8f85);
    text-decoration: none;
    display: inline-block;
}