/* ============================================================
   Credit Card Manager — "Financial Almanac" design system
   Warm paper surfaces · editorial serif numerals (Fraunces)
   · Hanken Grotesk UI · emerald buffer accent. No build step.
   ============================================================ */

:root {
    /* Warm paper palette (light) */
    --paper:      #f6f2ea;
    --paper-2:    #efe9dd;
    --surface:    #fffdf8;
    --ink:        #211d17;
    --ink-soft:   #6f675a;
    --ink-faint:  #9a9183;
    --line:       #e6dfd1;
    --line-soft:  #efe9dd;

    /* Brand — emerald = "interest-free / good" */
    --brand:      #0e7a55;
    --brand-deep: #0a5b40;
    --brand-tint: #e4efe7;
    --gold:       #b78b3e;

    /* Timeline semantics */
    --c-today: #2f6fed;   /* current day   */
    --c-stmt:  #d98324;   /* statement     */
    --c-due:   #d4503b;   /* payment due   */
    --c-best:  var(--brand);

    --radius:   16px;
    --radius-sm:10px;
    --shadow:   0 1px 2px rgba(33,29,23,.05), 0 8px 28px -12px rgba(33,29,23,.18);
    --shadow-lg:0 2px 6px rgba(33,29,23,.06), 0 22px 50px -18px rgba(33,29,23,.32);

    --font-ui:      'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:     #14110c;
        --paper-2:   #181410;
        --surface:   #1f1a13;
        --ink:       #f3ecdd;
        --ink-soft:  #b3a890;
        --ink-faint: #7c7362;
        --line:      #2c261c;
        --line-soft: #241f17;
        --brand:     #1f9c6e;
        --brand-deep:#157955;
        --brand-tint:#142a22;
        --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6);
        --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 24px 56px -18px rgba(0,0,0,.7);
    }
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-ui);
    color: var(--ink);
    background-color: var(--paper);
    /* Faint grain for paper texture (tiny inline SVG, no extra request). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
    line-height: 1.5;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--brand-deep); text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { a { color: var(--brand); } }

/* ---- Layout shell ---------------------------------------------------- */
.shell { width: 100%; max-width: 880px; margin-inline: auto; padding: 0 18px; }

.appbar {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    position: sticky; top: 0; z-index: 30;
}
.appbar-inner { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.brand {
    font-family: var(--font-display);
    font-weight: 600; font-size: 1.28rem; letter-spacing: -0.02em;
    color: var(--ink); text-decoration: none;
    display: inline-flex; align-items: center; gap: 9px;
}
.brand .mark {
    width: 26px; height: 26px; border-radius: 8px;
    background: linear-gradient(145deg, var(--brand), var(--brand-deep));
    display: inline-grid; place-items: center;
    color: #fff; font-family: var(--font-display); font-size: .95rem; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.appbar .spacer { margin-left: auto; }
.appbar nav { display: flex; align-items: center; gap: 4px; font-size: .9rem; }

.navlink {
    color: var(--ink-soft); text-decoration: none;
    padding: 7px 11px; border-radius: 9px;
    transition: background .15s, color .15s;
}
.navlink:hover { background: var(--paper-2); color: var(--ink); }
.navlink.danger:hover { color: var(--c-due); }
.lang-sep { color: var(--ink-faint); }
.lang-active { color: var(--ink); font-weight: 600; }

main { padding: 26px 0 64px; }

/* Staggered entrance on first paint. */
.reveal { opacity: 0; transform: translateY(10px); animation: rise .55s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal:nth-child(1) { animation-delay: .02s; }
.reveal:nth-child(2) { animation-delay: .10s; }
.reveal:nth-child(3) { animation-delay: .18s; }
.reveal:nth-child(4) { animation-delay: .26s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } }

/* ---- Panels ---------------------------------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-pad { padding: 20px 22px; }
.section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); font-weight: 700; margin: 0 0 12px; }

/* ---- Recommendation hero -------------------------------------------- */
.reco {
    position: relative; overflow: hidden;
    border-radius: 22px; padding: 26px 26px 24px;
    color: #f6fbf8;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.16), transparent 45%),
        radial-gradient(90% 120% at 100% 100%, rgba(0,0,0,.22), transparent 55%),
        linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 78%);
    box-shadow: var(--shadow-lg);
}
.reco::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.reco > * { position: relative; }
.reco-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; font-weight: 700; opacity: .82; margin: 0; }
.reco-card-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1.05; letter-spacing: -0.02em; margin: 8px 0 14px; }
.reco-figure { display: flex; align-items: baseline; gap: 10px; }
.reco-days { font-family: var(--font-display); font-variation-settings: "opsz" 120; font-weight: 600; font-size: clamp(3.4rem, 16vw, 5rem); line-height: .9; letter-spacing: -0.03em; font-feature-settings: "tnum" 1; }
.reco-days-label { font-size: .98rem; opacity: .9; max-width: 8ch; }
.reco-meta { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .86rem; opacity: .9; }
.reco-meta b { font-weight: 600; }

/* ---- Cards list ------------------------------------------------------ */
.cards-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cards-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0; letter-spacing: -0.01em; }
.count-pill { font-size: .76rem; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; }

.tile-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tile {
    position: relative; display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px 18px;
    box-shadow: var(--shadow);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tile.is-best { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.tile.is-best::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.tile-name { font-weight: 600; font-size: 1.05rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.ribbon {
    font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand-deep); background: var(--brand-tint);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    padding: 2px 7px; border-radius: 6px;
}
@media (prefers-color-scheme: dark) { .ribbon { color: #7fe3bd; } }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line-soft); padding: 4px 10px; border-radius: 999px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--stmt { background: var(--c-stmt); }
.dot--due  { background: var(--c-due); }

.tile-buffer { text-align: right; display: grid; justify-items: end; gap: 2px; }
.tile-buffer .num { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1; font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }
.tile.is-best .tile-buffer .num { color: var(--brand-deep); }
@media (prefers-color-scheme: dark) { .tile.is-best .tile-buffer .num { color: #4fd3a3; } }
.tile-buffer .cap { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }

.tile-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.tile-actions a.icon-btn { text-decoration: none; }
.tile-actions a.icon-btn:hover { color: var(--brand-deep); background: var(--brand-tint); }
.icon-btn { border: none; background: transparent; color: var(--ink-faint); font-size: .82rem; cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.icon-btn:hover { color: var(--c-due); background: color-mix(in srgb, var(--c-due) 10%, transparent); }

/* ---- Forms ----------------------------------------------------------- */
.field { display: grid; gap: 6px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.input, .select {
    width: 100%; font: inherit; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 11px 13px;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.input::placeholder { color: var(--ink-faint); }
.form-grid { display: grid; gap: 14px; }
.add-card-grid { display: grid; gap: 14px; }
@media (min-width: 620px) { .add-card-grid { grid-template-columns: 1fr 6.5rem 6.5rem auto; align-items: end; } }
.hint { font-size: .75rem; color: var(--ink-faint); }

.btn {
    --bg: var(--ink); --fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-weight: 600; cursor: pointer;
    background: var(--bg); color: var(--fg);
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: 11px 18px; text-decoration: none;
    transition: transform .12s, filter .15s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-primary { --bg: linear-gradient(150deg, var(--brand), var(--brand-deep)); --fg:#fff; box-shadow: 0 8px 20px -10px var(--brand-deep); }
.btn-block { width: 100%; }
.btn-ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper-2); filter: none; }
.btn-danger { --bg: var(--c-due); --fg: #fff; }

/* ---- Flash & alerts -------------------------------------------------- */
.flash { border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; border: 1px solid transparent; display: flex; gap: 10px; align-items: flex-start; }
.flash--success { background: var(--brand-tint); color: var(--brand-deep); border-color: color-mix(in srgb, var(--brand) 28%, transparent); }
.flash--error   { background: color-mix(in srgb, var(--c-due) 12%, var(--surface)); color: var(--c-due); border-color: color-mix(in srgb, var(--c-due) 32%, transparent); }
@media (prefers-color-scheme: dark) { .flash--success { color: #7fe3bd; } }

/* ---- Empty state ----------------------------------------------------- */
.empty { text-align: center; padding: 40px 22px; border: 1.5px dashed var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.empty .emoji { font-size: 2rem; }
.empty h3 { font-family: var(--font-display); font-weight: 600; margin: 10px 0 6px; }
.empty p { color: var(--ink-soft); margin: 0 auto 18px; max-width: 38ch; }

/* ---- Auth pages ------------------------------------------------------ */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 412px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head .brand { font-size: 1.5rem; }
.auth-head p { color: var(--ink-soft); margin: 8px 0 0; font-size: .95rem; }
.auth-foot { text-align: center; margin-top: 18px; font-size: .9rem; color: var(--ink-soft); }

/* ---- Footer ---------------------------------------------------------- */
.foot { text-align: center; color: var(--ink-faint); font-size: .8rem; padding: 28px 0; }

.stack { display: grid; gap: 22px; }

/* ============================================================
   Monthly timeline (mobile-first, horizontally scrollable)
   ============================================================ */
:root { --tl-col-min: 42px; }

.timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.timeline-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0; letter-spacing: -0.01em; }
.timeline-hint { font-size: .78rem; color: var(--ink-faint); margin: 0; }

.timeline-scroll {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    padding-bottom: 6px; scroll-snap-type: x proximity;
}
.timeline-scroll:focus-visible { outline: 2px solid var(--c-today); outline-offset: 3px; border-radius: 8px; }

.timeline { display: grid; gap: .5rem 0; min-width: calc(var(--days) * var(--tl-col-min)); }
.tl-row { display: grid; grid-template-columns: repeat(var(--days), minmax(var(--tl-col-min), 1fr)); align-items: center; position: relative; }

.tl-ruler { border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.tl-day { grid-column: var(--day); text-align: center; font-size: .7rem; color: var(--ink-faint); font-feature-settings: "tnum" 1; }
.tl-day.is-today { color: var(--c-today); font-weight: 700; }

.tl-track { min-height: 40px; }
.tl-track-label {
    position: sticky; left: 0; grid-column: 1 / -1; z-index: 2;
    width: max-content; padding: 0 .5rem 0 0;
    font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-faint);
    background: linear-gradient(90deg, var(--surface) 72%, transparent);
    pointer-events: none;
}

.tl-marker {
    grid-column: var(--day); grid-row: 1; justify-self: center;
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    font-size: .76rem; font-weight: 700; color: #fff;
    font-feature-settings: "tnum" 1;
    box-shadow: 0 2px 6px -1px rgba(33,29,23,.35);
    animation: pop .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tl-marker { animation: none; } }

.tl-marker--today { background: var(--c-today); }
.tl-marker--stmt  { background: var(--c-stmt); }
.tl-marker--due   { background: var(--c-due); }
.tl-marker.is-best { outline: 3px solid var(--c-best); outline-offset: 2px; }

@media (min-width: 768px) { :root { --tl-col-min: 48px; } .tl-marker { width: 32px; height: 32px; } }