/**
 * Ticket Fairy developer-tool landing pages: the CLI and the MCP server.
 *
 * Both pages are built on the shared landing system (main.css +
 * programmatic.css + seo-landing.css), so the header, container, buttons,
 * cards, FAQ and footer are the ones every other landing page uses. This file
 * adds only what those pages have no equivalent for:
 *
 *   1. Terminal and config blocks. A developer page has to show the command
 *      someone will actually type, and a screenshot cannot be copied. These
 *      are real text in a glass surface, with a copy button beside them.
 *   2. A command reference table dense enough to read as a contract.
 *   3. A safety-mode table, where the MCP page's three postures have to be
 *      comparable at a glance.
 *
 * The palette is the brand one, unchanged: peach carries the command name,
 * violet the flags, and the dim neutral the comments. A terminal is the one
 * place a reader expects colour to mean something, so the accents are used
 * as syntax rather than as decoration.
 */

.devtools-lp {
    /* A single monospace stack, declared once. Every code surface on both
       pages reads from it, so a font change lands everywhere at once. */
    --devtools-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas,
        "Liberation Mono", monospace;
}

/* The header is fixed, so a jump from the nav has to clear it. */
.devtools-lp main section[id] {
    scroll-margin-top: 96px;
}

/* ==========================================================================
   TERMINAL AND CONFIG BLOCKS

   One component with two dresses: `.devtools-terminal` for shell input and
   `.devtools-terminal--file` for a config file, which gets a filename in its
   title bar instead of window dots.
   ========================================================================== */

.devtools-terminal {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}

.devtools-terminal-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-dim);
    font-family: "Inter Tight", Gilroy, sans-serif;
    font-size: 0.78rem;
}

.devtools-terminal-dots {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.devtools-terminal-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-strong);
}

.devtools-terminal-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The block scrolls sideways on its own rather than pushing the page wide.
   A long command is normal here, and a horizontally scrolling page is not. */
.devtools-terminal pre {
    overflow-x: auto;
    margin: 0;
    padding: 18px;
    color: var(--text-primary);
    font-family: var(--devtools-mono);
    font-size: 0.86rem;
    line-height: 1.75;
    tab-size: 2;
}

/* Both scrollers are reachable with a keyboard, so the focus ring has to be
   visible against the terminal's dark surface as well as the page. */
.devtools-terminal pre:focus-visible,
.devtools-table-scroll:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.devtools-terminal code {
    font: inherit;
    color: inherit;
    background: none;
}

/* Syntax as meaning: the prompt and command a reader types, the flags that
   change what it does, the comments that explain why, and the output the
   command prints back. */
.devtools-prompt {
    color: var(--accent-peach);
    user-select: none;
}

.devtools-cmd {
    color: var(--text-primary);
}

.devtools-flag {
    color: var(--accent-violet);
}

.devtools-str {
    color: var(--accent-blue);
}

.devtools-comment {
    color: var(--text-dim);
}

.devtools-out {
    color: var(--text-secondary);
}

/* The copy button sits inside the title bar rather than floating over the
   code, so it never covers a line the reader is trying to read. */
/* Hidden until the script wires it. The button's only behaviour is the
   clipboard write, so a control that renders before (or without) that script
   is one that looks live and does nothing. The commands stay selectable text
   either way. */
.devtools-copy {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 5px 11px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-family: "Inter Tight", Gilroy, sans-serif;
    font-size: 0.76rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.devtools-copy[data-ready="true"] {
    display: inline-flex;
}

.devtools-copy:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.devtools-copy[data-copied="true"] {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* ==========================================================================
   HERO

   The hero carries a terminal beside the copy, so its grid is the shared
   two-column one with the panel allowed to hold a code block.
   ========================================================================== */

.devtools-hero-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.devtools-hero-panel .devtools-terminal {
    background: rgba(11, 10, 21, 0.55);
}

.devtools-hero-note {
    margin: 0;
    color: var(--text-dim);
    font-family: "Inter Tight", Gilroy, sans-serif;
    font-size: 0.82rem;
    line-height: 1.5;
}

/* An honest label for a v0 product. It is a statement of fact, not a
   warning, so it reads as a quiet chip rather than an alert. */
.devtools-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-family: "Inter Tight", Gilroy, sans-serif;
    font-size: 0.8rem;
}

.devtools-status-chip i {
    color: var(--accent-peach);
}

/* Announced, never seen. The copy control carries an `aria-label`, which
   overrides its own visible text, so a screen reader would otherwise never
   learn whether the copy succeeded. The script writes the outcome here. */
.devtools-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   ICONS

   The design system's icon container: a filled rounded square with a dark
   glyph, rather than a dim outline that disappears against the surface. Its
   own copy rather than a shared one, because these pages do not load the
   finance stylesheet that first declared it.
   ========================================================================== */

.devtools-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--gradient-brand);
    color: var(--bg-core);
    font-size: 17px;
}

/* A CTA pair that belongs to the section above it rather than to a column. */
.devtools-center-cta {
    justify-content: center;
    margin-top: 40px;
}

/* ==========================================================================
   COMMAND AND TOOL REFERENCE

   A two-column ruled list: the name on the left in monospace, what it does on
   the right in prose. Dense on purpose: a reader scanning for their own job
   should find it without opening anything.
   ========================================================================== */

.devtools-reference {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.devtools-reference li {
    display: grid;
    grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
    gap: 4px 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.devtools-reference code {
    color: var(--accent-peach);
    font-family: var(--devtools-mono);
    font-size: 0.84rem;
    word-break: break-word;
}

.devtools-reference span {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ==========================================================================
   SAFETY MODES

   Three postures, compared. A table rather than three cards, because the
   reader's question is "which one do I pick?" and that is a comparison.
   ========================================================================== */

.devtools-table-scroll {
    overflow-x: auto;
}

.devtools-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.devtools-table th,
.devtools-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: top;
}

.devtools-table th {
    color: var(--text-primary);
    font-family: "Inter Tight", Gilroy, sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
}

.devtools-table td {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}

.devtools-table td code,
.devtools-table th code {
    color: var(--accent-peach);
    font-family: var(--devtools-mono);
    font-size: 0.84rem;
}

.devtools-table tbody tr:last-child th,
.devtools-table tbody tr:last-child td {
    border-bottom: none;
}

.devtools-recommended {
    display: inline-block;
    margin-top: 6px;
    color: var(--accent-green);
    font-family: "Inter Tight", Gilroy, sans-serif;
    font-size: 0.78rem;
}

/* ==========================================================================
   STEPS

   A numbered path through setup. The number is the accent; the step is text.
   ========================================================================== */

.devtools-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: devtools-step;
}

.devtools-steps li {
    min-width: 0;
}

.devtools-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--gradient-brand);
    color: var(--bg-core);
    font-family: "Inter Tight", Gilroy, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
}

.devtools-steps h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.devtools-steps p {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.6;
}

/* ==========================================================================
   PROSE

   Both pages carry more explanation than the pages the shared system was
   tuned for, so body copy is set to a measure and a little looser.
   ========================================================================== */

.devtools-lp .seo-rich-copy p {
    max-width: 760px;
    line-height: 1.75;
}

.devtools-inline-code {
    padding: 2px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--accent-peach);
    font-family: var(--devtools-mono);
    font-size: 0.86em;
}

/* A note the reader should not skip, without shouting. The rule on the left
   is the whole treatment. */
.devtools-note {
    max-width: 820px;
    margin: 28px auto 0;
    padding: 4px 0 4px 18px;
    border-left: 2px solid var(--border-medium);
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.7;
}

/* The shared accordion collapses every answer until its script opens one.
   These answers are indexable copy and part of what the page is for, so they
   stay readable until the script has actually taken over. */
.devtools-lp .faq-list:not(.faq-enhanced) .faq-item-answer {
    max-height: none;
    padding: 0 24px 22px;
    visibility: visible;
}

/* Before the script runs, the questions are disabled and every answer is
   open, so the control must not advertise a collapse it cannot perform, and
   must not wear the browser's greyed-out disabled styling either. */
.devtools-lp .faq-list:not(.faq-enhanced) .faq-item-question::after {
    content: none;
}

.devtools-lp .faq-list:not(.faq-enhanced) .faq-item-question {
    color: var(--text-primary);
    cursor: default;
    opacity: 1;
}

/* A collapsed answer has to leave the accessibility tree, not just the
   viewport: clipping it with `max-height: 0` alone leaves a screen reader
   announcing text whose own control says it is collapsed. The visibility
   switch is delayed by the height transition on the way closed and immediate
   on the way open, so the animation is unchanged. */
.devtools-lp .faq-list.faq-enhanced .faq-item-answer {
    visibility: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, visibility 0s linear 0.3s;
}

.devtools-lp .faq-list.faq-enhanced .faq-item.open .faq-item-answer {
    visibility: visible;
    transition: max-height 0.3s ease, padding 0.3s ease, visibility 0s;
}

.devtools-lp .faq-item-answer p {
    max-width: 68ch;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .devtools-reference {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .devtools-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 600px) {
    .devtools-reference li {
        grid-template-columns: minmax(0, 1fr);
    }

    .devtools-terminal pre {
        padding: 14px;
        font-size: 0.8rem;
    }
}