/* -----------------------------------------------------------------
   ClaudeCV global styles — extends Tailwind CDN
------------------------------------------------------------------ */
:root { --accent: #ff5b3a; }

body { background-color: #f7f5f0; }
.font-display { font-family: 'Fraunces', Georgia, serif; }

/* soft grain overlay for hero */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* Builder — split layout */
.builder-shell { display: grid; grid-template-columns: 480px 1fr; height: calc(100vh - 64px); }
@media (max-width: 900px){ .builder-shell { grid-template-columns: 1fr; height:auto; } }
.builder-form  { overflow-y: auto; padding: 24px; background: #ffffff; border-right: 1px solid #e5e7eb; }
.builder-preview { overflow-y: auto; padding: 32px; background: #eef1f4; }

.field label { font-size: 12px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.06em; }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px;
  font-size: 14px; background: #f8fafc; transition: all .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgb(255 91 58 / 0.12);
}
.field { margin-bottom: 12px; }
.section-block {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 14px; margin-bottom: 10px; position: relative;
}
.section-block .drag-handle { cursor: grab; }
.sortable-ghost { opacity: .35; }

.chip { display:inline-flex; align-items:center; padding:4px 10px; border-radius:9999px; font-size:11px; font-weight:600; }

/* Resume preview paper */
.resume-paper{
    width:100%;
    max-width:794px;
    margin:auto;
    background:#fff;
    overflow:visible;
    display:block;
}
.resume-root{
    width:794px;
    max-width:794px;
    min-width:794px;
    margin:0 auto;
    background:#fff;
    box-sizing:border-box;
    overflow:visible;
    display:block;
}

/* Watermark for free tier */
.watermark {
  position: absolute; bottom: 12px; right: 12px; z-index: 10;
  font-size: 10px; color: #94a3b8; letter-spacing: .1em; text-transform: uppercase;
}

/* Template card hover */
.tpl-card { transition: transform .25s, box-shadow .25s; }
.tpl-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15,23,42,.12); }

/* Save indicator */
.save-indicator { font-size: 12px; color: #64748b; display: inline-flex; gap: 6px; align-items: center; }
.save-indicator .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.save-indicator.saving .dot { background: #f59e0b; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.btn { display:inline-flex; align-items:center; gap:6px; padding: 8px 16px; border-radius: 9999px; font-size:14px; font-weight:600; transition: all .15s; cursor:pointer; }
.btn-primary { background:#0b0f14; color:#f7f5f0; }
.btn-primary:hover { background:#ff5b3a; }
.btn-ghost { background:transparent; color:#0b0f14; border:1px solid #e2e8f0; }
.btn-ghost:hover { border-color:#0b0f14; }

/* Prose for blog/content pages */
.prose-content h2 { font-family:'Fraunces',serif; font-weight:800; font-size:1.75rem; margin:2rem 0 .75rem; }
.prose-content h3 { font-weight:700; font-size:1.25rem; margin:1.5rem 0 .5rem; }
.prose-content p  { line-height:1.75; color:#374151; margin-bottom:1rem; }
.prose-content ul { list-style: disc; padding-left:1.5rem; margin-bottom:1rem; color:#374151; }
.prose-content ul li { margin-bottom:.4rem; }