/* ============================================================================
   PermitPilot CY — modern design system
   Clean, contemporary SaaS: near-black ink, refined indigo accent, crisp
   neutrals, soft modern depth, generous whitespace. Sans-serif (Inter).
   Sits on top of the Tailwind CDN. Component classes keep views consistent.
   ========================================================================== */

:root {
    --ink:        #0b0f19;   /* near-black */
    --ink-soft:   #344054;
    --muted:      #667085;
    --brand:      #111827;   /* primary button (modern near-black) */
    --brand-700:  #0b0f19;
    --accent:     #4f46e5;   /* indigo accent */
    --accent-2:   #6366f1;
    --accent-700: #4338ca;
    --line:       #ececef;
    --line-soft:  #f2f2f5;
    --bg:         #fafafb;
    --surface:    #ffffff;
}

[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    background-image: radial-gradient(80% 60% at 50% -10%, rgba(79,70,229,0.05), transparent 70%);
    background-attachment: fixed;
    letter-spacing: -0.006em;
}

::selection { background: rgba(79,70,229,0.16); color: var(--ink); }

h1, h2, h3, .font-display {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.025em;
}
h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

.mono, .pp-ref { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.78em; letter-spacing: -0.01em; }

.eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* ---------- Form controls ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], select, textarea {
    width: 100%;
    border-radius: 0.7rem;
    border: 1.5px solid #c4c9d4;
    background: #fff;
    padding: 0.64rem 0.85rem;
    font-size: 0.9rem;
    color: var(--ink);
    transition: border-color .16s, box-shadow .16s;
    box-shadow: inset 0 1px 2px rgba(16,24,40,.05);
}
input:hover, select:hover, textarea:hover { border-color: #aab0bf; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(79,70,229,0.14);
}
input::placeholder, textarea::placeholder { color: #98a2b3; }
label { font-weight: 600; color: var(--ink-soft); font-size: 0.875rem; }

/* ---------- Buttons ---------- */
.pp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    border-radius: 0.7rem; padding: 0.62rem 1.15rem; font-size: 0.875rem; font-weight: 600;
    line-height: 1; cursor: pointer; transition: all .18s cubic-bezier(.2,.7,.3,1); border: 1px solid transparent;
    white-space: nowrap;
}
.pp-btn-primary {
    background: var(--ink); color: #fff;
    box-shadow: 0 1px 2px rgba(11,15,25,.18), 0 1px 0 rgba(255,255,255,.06) inset;
}
.pp-btn-primary:hover { background: #1d2433; transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(11,15,25,.4); }
.pp-btn-primary:active { transform: translateY(0); }
.pp-btn-accent {
    background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff;
    box-shadow: 0 1px 2px rgba(79,70,229,.3), 0 8px 20px -10px rgba(79,70,229,.6);
}
.pp-btn-accent:hover { transform: translateY(-1px); filter: brightness(1.05); }
.pp-btn-dark { background: var(--ink); color: #fff; }
.pp-btn-dark:hover { background: #1d2433; transform: translateY(-1px); }
.pp-btn-ghost { background: #fff; color: var(--ink-soft); border-color: #e2e2e8; box-shadow: 0 1px 2px rgba(11,15,25,.04); }
.pp-btn-ghost:hover { border-color: #cfcfe6; background: #fafafe; color: var(--ink); }
.pp-btn:disabled, .pp-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Cards / surfaces ---------- */
.pp-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 30px -22px rgba(16,24,40,.25);
}
/* Bolder, clearly-boxed variant (e.g. project tiles). */
.pp-card-bold { border-color: #c8cdd9; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 26px -20px rgba(16,24,40,.35); }

.pp-card-hover { transition: border-color .18s, box-shadow .18s, transform .18s; }
.pp-card-hover:hover {
    border-color: #d7d7ee;
    box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 22px 44px -26px rgba(79,70,229,.4);
    transform: translateY(-3px);
}

/* Subtle accent tick on cards (modern, optional identity mark). */
.pp-sheet { position: relative; }
.pp-sheet::before {
    content: ""; position: absolute; left: 1.25rem; top: 0; width: 2.25rem; height: 2px;
    background: var(--accent); border-radius: 0 0 4px 4px;
}

/* ---------- Chips / status pills ---------- */
.pp-chip { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 9999px;
    padding: 0.16rem 0.6rem; font-size: 0.67rem; font-weight: 600; letter-spacing: 0.01em; }
.pp-chip-steel  { background: #eef2ff; color: #4338ca; }
.pp-chip-slate  { background: #f1f3f7; color: #475467; }
.pp-chip-amber  { background: #fef6e7; color: #b45309; }
.pp-chip-green  { background: #e9f7ef; color: #18794e; }
.pp-chip-rose   { background: #fdeced; color: #be123c; }
.pp-chip-violet { background: #f1ecfe; color: #6d28d9; }

/* ---------- Modern dark panel (hero / CTA) ---------- */
.blueprint {
    position: relative; overflow: hidden;
    background-color: #0b0f19;
    background-image:
        radial-gradient(70% 90% at 80% -10%, rgba(99,102,241,0.45), transparent 60%),
        radial-gradient(60% 80% at 0% 110%, rgba(79,70,229,0.30), transparent 55%);
    color: #e7e9f2;
    box-shadow: 0 30px 60px -30px rgba(11,15,25,.6);
}
.blueprint::after { /* faint grid texture */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 34px 34px;
}

/* ---------- AI draft callout (sign-off disclaimer) ---------- */
.pp-stamp {
    position: relative; border: 1px solid #fde7c3; border-radius: 0.85rem;
    color: #92400e; background: linear-gradient(180deg, #fffaf0, #fff6e6);
}
.pp-stamp-seal {
    flex: none; width: 2.4rem; height: 2.4rem; border-radius: 0.7rem;
    background: #fef0d6; display: grid; place-items: center; color: #b45309;
}

/* ---------- Progress ---------- */
.pp-progress { height: 0.55rem; border-radius: 9999px; background: #eceef3; overflow: hidden; }
.pp-progress > span { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s cubic-bezier(.2,.7,.3,1); }
.pp-progress.is-complete > span { background: linear-gradient(90deg, #15803d, #22c55e); }

.pp-rule { height: 1px; background: var(--line); border: 0; }

.prose-draft { white-space: pre-wrap; line-height: 1.7; font-size: 0.92rem; }