/* ============================================================================
   Chronos.Web - visual parity with Chronos.Desktop (Avalonia + Material).
   Same palette, same FOMO mechanics, same intentional dark-UX flourishes.
   ============================================================================ */

:root {
    --chronos-violet:        #7C3AED;
    --chronos-lavender:      #A855F7;
    --chronos-pink:          #EC4899;
    --chronos-violet-light:  #E9D5FF;
    --chronos-red:           #EF4444;
    --chronos-bg:            #FAFAFA;
    --chronos-card-bg:       #FFFFFF;
    --chronos-fg-primary:    #1F2937;
    --chronos-fg-secondary:  #4B5563;
    --chronos-fg-muted:      #6B7280;
    --chronos-outline:       #E5E7EB;
    --chronos-chip-bg:       #F4F4F5;
    --chronos-hover-bg:      #F1F5F9;
    /* v0.5.6: recessed surface for cards nested INSIDE a card (task rows on the
       white board panel) - one step toward the canvas so they read as objects. */
    --chronos-card-inset:    #F7F8FA;
    --chronos-day-selected:  #111827;
    --chronos-day-muted:     #CBD5E1;
    --shadow-card:           0 1px 2px rgba(0,0,0,0.04);
    --radius-pill:           999px;
    --radius-card:           10px;

    /* v0.4.47.1: aliases for tokens referenced under short names elsewhere. These were
       used (.horizon-tab, .bar-pct, .milestone-body, color swatches...) but never defined,
       so those rules silently fell back to inherited near-black. */
    --chronos-muted:         var(--chronos-fg-muted);
    --chronos-text:          var(--chronos-fg-primary);

    /* Typography tokens - every font-family in the app resolves through these
       so a future theme can restyle type by overriding three variables (no
       per-rule edits). Body text inherits --chronos-font-sans; numeric/mono
       surfaces use --chronos-font-mono; headings use --chronos-font-display. */
    /* 'Noto Color Emoji' sits right after the primary face in every stack: text glyphs
       resolve to Inter/JetBrains, while emoji codepoints (which those faces lack) fall to
       the loaded color-emoji font BEFORE any OS font - so item emotes render the same on
       every system, including ones with no emoji font. If the font fails to load it simply
       degrades to the OS emoji, i.e. today's behavior - never worse. */
    --chronos-font-sans:     'Inter', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --chronos-font-display:  'Inter', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --chronos-font-mono:     'JetBrains Mono', 'Noto Color Emoji', Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--chronos-bg);
    color: var(--chronos-fg-primary);
    font-family: var(--chronos-font-sans);
    font-size: 14px;
    height: 100%;
}

.chronos-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Small muted build-version line. margin-top:auto pushes it to the bottom of the
   .chronos-shell flex column, so it sits at the page bottom on sparse + full pages alike. */
.app-version {
    margin-top: auto;
    padding: 6px 12px 8px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--chronos-fg-muted);
    opacity: 0.55;
}

.chronos-root {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    /* All rows are content-height: topbar / horizon-tabs / main-area / bottombar. No
       row absorbs leftover viewport height, so a sparse board (a few tasks) never
       opens a dead vertical gap - the compose bar sits directly under the content and
       .chronos-shell (min-height:100vh) carries the page background below it. An
       earlier 1fr made one row swallow all slack, which read as a huge empty band. */
    grid-template-rows: auto auto auto auto;
    gap: 16px;
}

.muted { color: var(--chronos-fg-muted); font-size: 12px; }

.card {
    background: var(--chronos-card-bg);
    border: 1px solid var(--chronos-outline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

button { font-family: inherit; cursor: pointer; }

input.text {
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--chronos-fg-primary);
    width: 100%;
}

@media (max-width: 480px) {
    .chronos-root {
        padding: 10px;
    }
}

@media (max-width: 340px) {
    .chronos-root {
        padding: 6px;
    }
}

/* Large desktop monitors (27"+): use more of the width instead of capping at 1400px. */
@media (min-width: 1700px) {
    .chronos-root { max-width: 1640px; }
}
@media (min-width: 2300px) {
    .chronos-root { max-width: 2000px; }
}