/* ═══════════════════════════════════════════════════════════════════
   fish-terminal.css
   Terminal snippets styled as a Fish / Tide prompt.

   Place this file at:  {child-theme}/css/fish-terminal.css
   Font lives at:       {child-theme}/fonts/FiraCodeNerdFont-Regular.woff2

   Shortcode: [terminal dir="~/path" git="main"]$ command[/terminal]
═══════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'FiraCode NF';
    src: url('../fonts/FiraCodeNerdFont-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ── Custom properties (Tokyo Night palette — matches typical Tide) */

.fish-terminal {
    --ft-bg:         #1a1b26;
    --ft-titlebar:   #16161e;
    --ft-text-dim:   #565f89;

    /* Directory segment */
    --ft-dir-bg:     #3d59a1;
    --ft-dir-fg:     #c0caf5;

    /* Git segment */
    --ft-git-bg:     #2d3f76;
    --ft-git-fg:     #73daca;

    /* Prompt chevron ❯ */
    --ft-chevron:    #9ece6a;

    /* Text colours */
    --ft-cmd-fg:     #ffffff;
    --ft-out-fg:     #a9b1d6;

    /* Cursor */
    --ft-cursor:     #c0caf5;

    /* Traffic-light buttons */
    --ft-btn-close:  #f7768e;
    --ft-btn-min:    #e0af68;
    --ft-btn-max:    #9ece6a;
}


/* ── Container ───────────────────────────────────────────────── */

.fish-terminal {
    font-family: 'FiraCode NF', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.9rem;
    line-height: 1;
    background: var(--ft-bg);
    border-radius: 10px;
    overflow: hidden;
    margin: 1.75em 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);

    /* Reset <figure> browser defaults */
    border: none;
    padding: 0;
}


/* ── Title bar ───────────────────────────────────────────────── */

.ft-titlebar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: var(--ft-titlebar);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    user-select: none;
}

.ft-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ft-btn--close { background: var(--ft-btn-close); }
.ft-btn--min   { background: var(--ft-btn-min);   }
.ft-btn--max   { background: var(--ft-btn-max);   }

.ft-title {
    flex: 1;
    text-align: center;
    color: var(--ft-text-dim);
    font-size: 0.78em;
    letter-spacing: 0.06em;
}


/* ── Body ────────────────────────────────────────────────────── */

.ft-body {
    padding: 14px 18px 18px;
    overflow-x: auto;   /* horizontal scroll for long lines */
}


/* ── Lines ───────────────────────────────────────────────────── */
/*
 * Use figure.fish-terminal as a specificity anchor + !important on
 * display/flex props so parent-theme wildcards can't override them.
 *
 * Only command lines need the tall min-height to accommodate the
 * prompt pill segments. Output lines should sit at natural line-height
 * like a real terminal (no extra vertical padding).
 */

figure.fish-terminal .ft-line {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap;
    line-height: 1.0;
}

/* Command lines are as tall as the prompt segments */
figure.fish-terminal .ft-line--cmd,
figure.fish-terminal .ft-line--idle {
    min-height: 1.9em;
    margin-top: 0.35em;
}

/* First command line needs no top gap */
figure.fish-terminal .ft-line--cmd:first-child {
    margin-top: 0;
}

figure.fish-terminal .ft-line--out {
    color: var(--ft-out-fg);
    padding-left: 2px;
    min-height: 0;
    line-height: 1.0;
}

figure.fish-terminal .ft-line--blank {
    min-height: 0.5em;
}


/* ── Prompt segments ─────────────────────────────────────────── */

figure.fish-terminal .ft-seg {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    gap: 0.3em;
    padding: 0 0.6em;
    height: 1.9em;
    white-space: nowrap;
    font-family: inherit;
}

figure.fish-terminal .ft-seg--dir {
    background: var(--ft-dir-bg);
    color: var(--ft-dir-fg);
}

figure.fish-terminal .ft-seg--git {
    background: var(--ft-git-bg);
    color: var(--ft-git-fg);
}

figure.fish-terminal .ft-seg-icon {
    display: inline !important;
    font-family: 'FiraCode NF', monospace;
    font-size: 0.95em;
    line-height: 1;
}

figure.fish-terminal .ft-seg-text {
    display: inline !important;
}


/* ── Powerline arrows ────────────────────────────────────────── */
/*
 * U+E0B0 () — Powerline filled right-pointing arrow.
 *
 * Visual logic:
 *   foreground  = bg colour of the segment to the LEFT  (the "tooth fill")
 *   background  = bg colour of the region to the RIGHT
 */

figure.fish-terminal .ft-arrow {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    /*
     * height is expressed at the PARENT font-size (no font-size set here).
     * If we set font-size: 1.6em here too, then height: 1.9em becomes
     * 1.9 × 1.6 × base = ~3× too tall, creating the visible background box.
     * Instead we scale only the glyph via ::after font-size.
     */
    height: 1.9em;
    line-height: 1;
    padding: 0;
    overflow: hidden;
}

figure.fish-terminal .ft-arrow::after {
    content: '\E0B0';       /* Powerline right solid arrow */
    display: block !important;
    font-family: 'FiraCode NF', monospace;
    font-size: 1.6em;       /* scale the glyph to fill the container height */
    line-height: 1;
}

/* dir → git segment */
figure.fish-terminal .ft-arrow--dir-git {
    color: var(--ft-dir-bg);
    background: var(--ft-git-bg);
}

/* dir → terminal background (no git segment) */
figure.fish-terminal .ft-arrow--dir-bg {
    color: var(--ft-dir-bg);
    background: transparent;
}

/* git → terminal background */
figure.fish-terminal .ft-arrow--git-bg {
    color: var(--ft-git-bg);
    background: transparent;
}


/* ── Chevron (❯) and command text ────────────────────────────── */

figure.fish-terminal .ft-chevron {
    display: inline !important;
    color: var(--ft-chevron);
    font-size: 1em;
    padding: 0 0.25em 0 0.15em;
    line-height: 1;
    flex-shrink: 0;
}

figure.fish-terminal .ft-cmd {
    display: inline !important;
    color: var(--ft-cmd-fg);
}


/* ── Blinking block cursor ───────────────────────────────────── */

figure.fish-terminal .ft-cursor {
    display: inline-block !important;
    width: 0.55em;
    height: 1.15em;
    background: var(--ft-cursor);
    opacity: 0.9;
    vertical-align: text-bottom;
    flex-shrink: 0;
    animation: ft-blink 1.2s step-end infinite;
}

@keyframes ft-blink {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
    figure.fish-terminal .ft-cursor { animation: none; opacity: 0.9; }
}