/* ==========================================================================
   Fey — foundations
   Tokens, reset, typography and layout. Component styles live in fey-ui.css.

   The palette is inherited from Diana 6 deliberately: same lavender, same
   ink, same soft paper. What changes is the typographic voice — an editorial
   serif for the things you read once (titles, figures) against a geometric
   sans for the things you read constantly (labels, controls). An infra tool
   that reads like a well-set page rather than a dashboard is the whole idea
   behind "fino y delicado".
   ========================================================================== */

:root {
    /* ── Brand ── */
    --fey-primary:        #8B7EC8;
    --fey-primary-deep:   #6B5CA5;
    --fey-primary-soft:   rgba(139, 126, 200, 0.07);
    --fey-primary-tint:   rgba(139, 126, 200, 0.14);
    --fey-accent:         #C490D1;

    /* ── Surfaces ── */
    --fey-paper:          #F8F7FC;
    --fey-surface:        #FFFFFF;
    --fey-surface-sunken: #FBFAFE;
    --fey-veil:           rgba(45, 42, 62, 0.32);

    /* ── Ink ── */
    --fey-ink:            #2D2A3E;
    --fey-ink-soft:       #6E6982;
    --fey-ink-faint:      #A5A0B5;

    /* ── Lines ──
       Two weights only. The hairline is what most surfaces use; the second is
       for a border that has to be noticed (focus, selection, hover). */
    --fey-line:           rgba(139, 126, 200, 0.13);
    --fey-line-strong:    rgba(139, 126, 200, 0.30);

    /* ── Signal ── */
    --fey-green:          #4FB98A;
    --fey-green-soft:     rgba(79, 185, 138, 0.10);
    --fey-amber:          #D99248;
    --fey-amber-soft:     rgba(217, 146, 72, 0.10);
    --fey-red:            #D45F5F;
    --fey-red-soft:       rgba(212, 95, 95, 0.10);
    --fey-blue:           #5B93DD;
    --fey-blue-soft:      rgba(91, 147, 221, 0.10);

    /* ── Type ── */
    --fey-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --fey-sans:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fey-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ── Rhythm ──
       A 4px base. Every gap and pad in the app resolves to one of these, which
       is most of what keeps a dense screen from looking accidental. */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    --fey-radius:    12px;
    --fey-radius-sm: 8px;
    --fey-radius-lg: 18px;

    /* ── Depth ──
       Shadows stay in the brand hue rather than neutral grey. A lavender
       shadow on lavender-tinted paper reads as depth; a grey one reads as dirt. */
    --fey-lift:   0 1px 2px rgba(93, 82, 138, 0.04), 0 4px 16px rgba(93, 82, 138, 0.05);
    --fey-lift-lg: 0 2px 6px rgba(93, 82, 138, 0.06), 0 18px 48px rgba(93, 82, 138, 0.10);
    --fey-ring:   0 0 0 3px var(--fey-primary-tint);

    --fey-ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --fey-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ── */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol { list-style: none; }

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    font-family: var(--fey-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--fey-ink);
    background: var(--fey-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}

/* The atmosphere: two very soft pools of brand light, plus a grain that keeps
   large flat areas from banding on wide-gamut displays. Fixed and inert, so it
   costs nothing but the paint. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 12% -5%,  rgba(139, 126, 200, 0.10), transparent 60%),
        radial-gradient(ellipse 70% 50% at 95% 105%, rgba(196, 144, 209, 0.08), transparent 60%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* Everything the app renders sits above the atmosphere. */
#app, .fey-shell, .fey-auth { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}

a { color: var(--fey-primary-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* One focus treatment everywhere. A soft ring in the brand hue reads as part of
   the design rather than as the browser's default apology. */
:focus-visible {
    outline: none;
    box-shadow: var(--fey-ring);
    border-radius: var(--fey-radius-sm);
}

::selection { background: var(--fey-primary-tint); color: var(--fey-ink); }

/* ── Typography ── */

.fey-display {
    font-family: var(--fey-display);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--fey-ink);
}

h1.fey-display { font-size: 34px; }
h2.fey-display { font-size: 26px; }
h3.fey-display { font-size: 20px; }

/* A label is the smallest thing on screen, so it gets the most help: uppercase,
   wide tracking, and enough weight to survive at 10px. */
.fey-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fey-ink-faint);
}

.fey-mono { font-family: var(--fey-mono); font-size: 12px; letter-spacing: -0.01em; }

.fey-muted { color: var(--fey-ink-soft); }
.fey-faint { color: var(--fey-ink-faint); }

/* Figures that carry the point of a panel — a price, a capacity, a count. The
   serif at a large size is what makes a number feel considered. */
.fey-figure {
    font-family: var(--fey-display);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.fey-figure-sm { font-size: 21px; }

/* ── App shell ── */

.fey-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    min-height: 100vh;
}

.fey-rail {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
    padding: var(--s5) var(--s4);
    border-right: 1px solid var(--fey-line);

    /* Translucent rather than solid, so the atmosphere behind it shows through
       and the rail reads as part of the paper instead of a panel on top of it. */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px) saturate(140%);

    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* The wordmark.

   It stopped competing with the project's name not by shrinking, but because the project's
   name left the rail: it is already in the bar at the top of every screen inside a project,
   and having it in both places was two answers to one question. */
.fey-brand {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    padding: var(--s1) var(--s2) 0;
}

.fey-brand-mark {
    font-family: var(--fey-display);
    font-size: 25px;
    letter-spacing: -0.02em;
    color: var(--fey-ink);
}

/* The one flourish in the wordmark: a small accent dot, the only place the
   accent hue appears at full strength. */
.fey-brand-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fey-accent);
    transform: translateY(-9px);
}

/* The way out, at the foot.

   It used to sit at the top, above the project's name — which put "leave" directly above
   "where you are", the two things on the rail that mean the opposite of each other. Down here
   it shares its place with the language: one is only ever offered when the other is not, so
   the rail has the same shape at every level.

   Whose project this is belongs to the bar at the top of the screen, where it already was. */
.fey-rail-leave {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--s2) var(--s2) var(--s3);
    font-size: 11.5px;
    color: var(--fey-ink-faint);
    text-decoration: none;
    transition: color 0.15s var(--fey-ease-soft);
}

.fey-rail-leave:hover { color: var(--fey-ink); text-decoration: none; }

.fey-rail-context {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s3) var(--s2) var(--s4);
    border-bottom: 1px solid var(--fey-line);
}

.fey-rail-back {
    font-size: 11.5px;
    color: var(--fey-ink-faint);
    text-decoration: none;
    margin-bottom: var(--s2);
    transition: color 0.15s var(--fey-ease-soft);
}

.fey-rail-back:hover { color: var(--fey-primary-deep); text-decoration: none; }

.fey-rail-context-name {
    font-family: var(--fey-display);
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--fey-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fey-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.fey-nav-group + .fey-nav-group { margin-top: var(--s4); }
.fey-nav-group > .fey-label { padding: 0 var(--s2) var(--s2); }

.fey-nav-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 8px var(--s3);
    border-radius: var(--fey-radius-sm);
    color: var(--fey-ink-soft);
    font-size: 13.5px;
    font-weight: 450;
    text-decoration: none;
    transition: background 0.16s var(--fey-ease-soft), color 0.16s var(--fey-ease-soft);
    position: relative;
}

.fey-nav-item:hover { background: var(--fey-primary-soft); color: var(--fey-ink); text-decoration: none; }

.fey-nav-item.active {
    background: var(--fey-primary-soft);
    color: var(--fey-primary-deep);
    font-weight: 500;
}

/* The active marker is a short bar in the gutter rather than a filled block:
   it says "you are here" without repainting the whole row. */
.fey-nav-item.active::before {
    content: '';
    position: absolute;
    left: -var(--s4);
    left: calc(var(--s4) * -1);
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 15px;
    border-radius: 0 2px 2px 0;
    background: var(--fey-primary);
}

.fey-nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; }
.fey-nav-item.active .fey-nav-icon { opacity: 1; }

/* ── Language ──
   Four short codes rather than a dropdown: with only four options a menu costs a
   click to show what a row already shows. */
/* One control for something somebody sets once. Four buttons meant three were always the
   wrong answer, sitting in the rail forever. */
.fey-lang-pick {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--s2) var(--s2) var(--s3);
    color: var(--fey-ink-faint);
}

.fey-lang-pick svg { width: 13px; height: 13px; flex-shrink: 0; }

.fey-lang-select {
    flex: 1;
    min-width: 0;
    padding: 2px 4px;
    border: none;
    background: none;
    font: inherit;
    font-size: 11.5px;
    color: var(--fey-ink-soft);
    cursor: pointer;
}

.fey-lang-select:hover { color: var(--fey-ink); }
.fey-lang-select:focus-visible { outline: 2px solid var(--fey-primary); border-radius: 4px; }

/* ── Administration ──
   The door to the other half of the app. It sits above the account, apart from the
   navigation, because it does not take you to another page of what you were doing —
   it takes you somewhere else entirely.

   A line, not a box. It was the only bordered thing in a column of plain rows, which made it
   the loudest item on the rail — for a door most people never open. The arrow is what says it
   leaves here; the border was saying it twice. */
.fey-rail-admin {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 7px var(--s3);
    margin-bottom: var(--s2);
    border: none;
    border-radius: var(--fey-radius-sm);
    color: var(--fey-ink-soft);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.16s var(--fey-ease-soft), border-color 0.16s var(--fey-ease-soft);
}

.fey-rail-admin:hover {
    background: var(--fey-primary-soft);
    color: var(--fey-primary-deep);
    text-decoration: none;
}

.fey-rail-admin .fey-nav-icon { opacity: 0.85; }
.fey-rail-admin-go { margin-left: auto; opacity: 0.5; font-size: 13px; }

.fey-rail-foot {
    border-top: 1px solid var(--fey-line);
    padding-top: var(--s3);
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.fey-avatar {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.fey-main { min-width: 0; display: flex; flex-direction: column; }

.fey-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s5);
    padding: var(--s6) var(--s7) var(--s5);
}

.fey-topbar-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fey-topbar-sub { font-size: 13px; color: var(--fey-ink-soft); }
.fey-topbar-actions { display: flex; gap: var(--s2); flex-shrink: 0; }

.fey-page { padding: 0 var(--s7) var(--s8); min-width: 0; }

@media (max-width: 900px) {
    .fey-shell { grid-template-columns: 1fr; }
    .fey-rail { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
    .fey-nav { flex-direction: row; }
    .fey-nav-group + .fey-nav-group { margin-top: 0; }
    .fey-nav-group > .fey-label, .fey-rail-foot { display: none; }
    .fey-topbar, .fey-page { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ── Entrance ──
   One orchestrated reveal on load, staggered down the page. Cheaper and calmer
   than animating every element on every interaction. */
@keyframes fey-rise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}

.fey-rise { animation: fey-rise 0.5s var(--fey-ease) both; }
.fey-rise-1 { animation-delay: 0.04s; }
.fey-rise-2 { animation-delay: 0.09s; }
.fey-rise-3 { animation-delay: 0.15s; }
.fey-rise-4 { animation-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Grid helpers ── */

.fey-stack   { display: flex; flex-direction: column; gap: var(--s4); }
.fey-stack-sm { display: flex; flex-direction: column; gap: var(--s2); }
.fey-row     { display: flex; align-items: center; gap: var(--s3); }
.fey-row-tight { display: flex; align-items: center; gap: var(--s2); }
.fey-spread  { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.fey-grid    { display: grid; gap: var(--s4); }
.fey-grid-2  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.fey-grid-3  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fey-wrap    { flex-wrap: wrap; }
.fey-grow    { flex: 1; min-width: 0; }