/* -- Per-mode accent — track the logo --------------------------------------
 * Shibuya's ``accent_color`` (set in conf.py) selects a single Radix
 * palette site-wide. To match the v2 logo, we override the primary
 * accent tokens per mode:
 *
 *   - light mode  → grape       (purple from the light logo)
 *   - dark mode   → dodger blue (blue from the dark logo)
 *
 * --accent-9 drives Shibuya's link color (--sy-c-link); --accent-a11
 * drives sphinx-design's primary color (used by buttons + cards). */
html.light {
    --accent-9:   #6432bd;                /* Grape */
    --accent-a9:  #6432bd;
    --accent-a11: #6432bd;
}
html.dark {
    --accent-9:   #4bb3fd;                /* Dodger Blue */
    --accent-a9:  #4bb3fd;
    --accent-a11: #4bb3fd;
}

/* -- Inline code surface --------------------------------------------------
 * Shibuya defaults inline code background to ``var(--accent-a3)`` (a
 * violet tint from the base ``accent_color: "violet"`` palette), while
 * its text color comes from ``--accent-a11`` which we override per mode
 * (grape in light, dodger blue in dark). In dark mode that produces blue
 * text on a violet pill — visually disjoint. Swap the background to a
 * neutral gray tint so the brand-tinted text reads cleanly in both modes. */
:root {
    --yue-c-code-background: var(--gray-a3);
}

/* -- seealso admonition → neutral gray --------------------------------------
 * Shibuya colors seealso with its gold accent. Remap the four admonition color
 * tokens to grays so the box, title bar, border, and white glyph all read
 * neutral. Light mode takes a darker border (gray-11) per request; dark mode
 * keeps the lighter gray-9 the token scale already gives it. */
.admonition.seealso {
    --color-1: var(--gray-a2);   /* body background */
    --color-2: var(--gray-a3);   /* title-bar background */
    --color-3: var(--gray-9);    /* left border + icon strip */
    --color-4: var(--gray-12);   /* title text */
}

html.light .admonition.seealso {
    --color-3: var(--gray-11);
}

/* -- definition admonition (docs/ext/styling/definition.py) -----------------
 * Defines a term inline. Teal is the one hue no built-in Shibuya admonition
 * uses (note=blue, important=violet, hint=cyan, tip=green), so a definition
 * reads as its own thing rather than a recolored note. All four tokens come
 * from the teal scale (theme-aware) so the surface, border, and title harmonize
 * instead of fighting the brand accent. Icon is a bookmark, not the default bell. */
.admonition.definition {
    --icon-url: var(--lucide-bookmark-url);
    --color-1: var(--teal-surface);   /* body background */
    --color-2: var(--teal-a3);        /* title-bar background */
    --color-3: var(--teal-9);         /* left border + icon strip */
    --color-4: var(--teal-a11);       /* title text */
}

/* The `$` prompt in shell blocks, tagged Generic.Prompt by docs/ext/cli_lexer.py.
 * Colored to match Python keywords (from / import / async with) so shell and
 * Python blocks share the same coral accent, and not selectable so a manual copy
 * skips it (copybutton already strips it too). Theme-prefixed to match Shibuya's
 * own Pygments specificity. */
html.light .highlight .gp,
html.dark .highlight .gp {
    -webkit-user-select: none;
    user-select: none;
}
html.light .highlight .gp { color: var(--syntax-light-keyword); }
html.dark .highlight .gp { color: var(--syntax-dark-keyword); }

/* Center the announcement message. */
.announcement-inner {
    text-align: center;
}

/* Override hover when using sd-table directive */
.sd-table tr:hover {
    background-color: unset !important;
}

/* Roomier tab panels. Shibuya overrides sd-tab-content to `padding: 0`, so
 * prose hugs the top divider line. Out-specify it via the `.yue` content
 * wrapper to add vertical breathing room. Horizontal padding stays 0 so text
 * keeps aligning with the tab labels; code blocks carry their own box, so the
 * extra space mostly helps text tabs. */
.yue .sd-tab-content {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Loosen definition list spacing */
dl > dt:not(:first-child) {
    margin-top: 0.75rem;
}

/* Numbered step sequences (docs/ext/styling/steps.py) */
.steps {
    counter-reset: step;
    margin: 1.5rem 0;
}

.steps > .step {
    counter-increment: step;
    position: relative;
    margin-left: 0.85rem;
    padding-left: 2.75rem;
    padding-bottom: 1.5rem;
    border-left: 2px solid var(--gray-a5);
}

/* Last step should drop trailing connector and bottom gap. */
.steps > .step:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.steps > .step::before {
    content: counter(step);
    position: absolute;
    left: -0.9rem;
    top: 0;
    box-sizing: border-box;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-3);
    color: var(--sy-c-text);
    border: 1px solid var(--sy-c-border);
    box-shadow: 0 0 0 4px var(--sy-c-background);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
}

/* step title */
.steps > .step > .step-title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.75rem;
}

.steps > .step > .step-title + * {
    margin-top: 0;
}

.steps > .step > :last-child {
    margin-bottom: 0;
}

/* Unordered marker sequences (docs/ext/styling/markers.py). Steps' sibling: the
 * same vertical spine, but the marker is a real element holding an iconify icon
 * (a CSS ::before can't render one), and there's no numbering. */
.markers {
    margin: 1.5rem 0;
}

.markers > .marker {
    position: relative;
    margin-left: 0.85rem;
    padding-left: 2.75rem;
    padding-bottom: 1.5rem;
    border-left: 2px solid var(--gray-a5);
}

/* Last marker drops the trailing connector and bottom gap. */
.markers > .marker:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.markers > .marker > .marker-bullet {
    position: absolute;
    left: -0.9rem;
    top: 0;
    box-sizing: border-box;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-3);
    color: var(--sy-c-text);
    border: 1px solid var(--sy-c-border);
    box-shadow: 0 0 0 4px var(--sy-c-background);
    font-size: 0.9rem;
    line-height: 1;
}

/* marker title */
.markers > .marker > .marker-title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.75rem;
}

.markers > .marker > .marker-title + * {
    margin-top: 0;
}

.markers > .marker > :last-child {
    margin-bottom: 0;
}

/* -- Prompt styling (docs/ext/styling/prompt.py) ------------------------
 * Chat-input bubble for AI prompt examples. The base block holds only
 * shared layout (positioning, padding, text color); each ``:type:``
 * variant owns its full visual identity (background, border, glyphs)
 * so the two supported looks (claude-desktop, claude-code) stay
 * cleanly separated and don't fight a shared default. */
.ai-prompt-box {
    margin: 1.5rem 0;
}

.ai-prompt-input {
    position: relative;
    display: flex;
    min-height: 2.75rem;
    color: var(--sy-c-text);
    line-height: 1.5;
}

/* -- :type: claude-desktop (default) ------------------------------------
 * Visually mimics the Claude Desktop chat input: rounded rectangle with
 * the prompt text up top, a ``+`` attachment glyph in the bottom-left,
 * and a muted model-name indicator in the bottom-right. No separate send
 * button — matches the idle/empty-state visual where send doesn't show. */
.ai-prompt-claude-desktop .ai-prompt-input {
    background: var(--gray-2);
    border: 1px solid var(--sy-c-border);
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    /* Multi-row: text up top, controls along the bottom edge. */
    padding: 1rem 1.25rem 2.5rem 1.25rem;
    min-height: 4.5rem;
    align-items: flex-start;
}

.ai-prompt-claude-desktop .ai-prompt-input::before {
    content: "+";
    position: absolute;
    left: 0.85rem;
    bottom: 0.6rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--gray-10);
    border-radius: 0.375rem;
}

.ai-prompt-claude-desktop .ai-prompt-input::after {
    content: "Opus 4.8 ▾";
    position: absolute;
    right: 1rem;
    bottom: 0.7rem;
    font-size: 0.8rem;
    color: var(--gray-10);
}

/* -- :type: claude-code -------------------------------------------------
 * Faithful to the real Claude Code REPL: horizontal divider lines top
 * and bottom (no side borders, no rounded corners), accent-colored ``❯``
 * prompt prefix, no send button (CLI executes on Enter), and a status
 * bar below the input mirroring the actual app. */
.ai-prompt-claude-code .ai-prompt-input {
    font-family: var(--sy-c-font-family-monospace, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
    background: transparent;
    border: none;
    border-top: 1px solid var(--gray-6);
    border-bottom: 1px solid var(--gray-6);
    border-radius: 0;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    min-height: 2.5rem;
    align-items: center;
}

.ai-prompt-claude-code .ai-prompt-input::before {
    content: "❯";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-9);
    font-weight: 600;
}

/* Status bar — sits below the input box, mirrors Claude Code's footer. */
.ai-prompt-claude-code::after {
    content: "? for shortcuts  ·  ← for agents";
    display: block;
    padding: 0.5rem 0 0 1rem;
    font-family: var(--sy-c-font-family-monospace, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.8rem;
    color: var(--gray-10);
}

@media (max-width: 768px) {
    .ai-prompt-claude-desktop .ai-prompt-input {
        padding: 0.875rem 1rem 2rem 1rem;
        min-height: 4rem;
    }

    .ai-prompt-claude-code .ai-prompt-input {
        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    }
}

/* -- Highlights card strip (docs/ext/styling/highlights.py) ----------------
 * Horizontal row of borderless, accent-topped cards. Two forms:
 *   - A definition list becomes icon + bold-title + body cards.
 *   - A plain bullet list becomes body-only cards.
 * The directive rewrites deflist pairs into ``.point`` cards; the bullet form
 * stays a ``<ul>``. Both share the card look below.
 */
.highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;
}

/* Bullet form: the list itself becomes the flex track. */
.highlights > ul {
    flex: 1 1 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding-left: 0;
}

/* The card surface, shared by both forms. */
.highlights > ul > li,
.highlights > .point {
    flex: 1 1 220px;
    margin: 0;
    padding: 0.95rem 1.15rem;
    border: none;
    border-top: 2px solid var(--accent-9);
    border-radius: 0.5rem;
    background: var(--gray-a2);
}

.highlights > ul > li > p,
.highlights > .point > p:last-child {
    margin: 0;
}

/* Title row: leading icon aligned with a slightly bolder label. */
.highlights .point-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.35rem 0;
    font-weight: 700;
    color: var(--sy-c-text);
}

/* Body text reads a touch quieter than the title. */
.highlights > .point > p:not(.point-title) {
    margin: 0;
    color: var(--gray-11);
}

@media (max-width: 768px) {
    .highlights,
    .highlights > ul {
        flex-direction: column;
    }
}

/* -- Patcher logo as a tab-item icon (e.g. the PatcherAPIClient tab) --------
 * Put an empty <span class="patcher-tab-icon"></span> in a tab-item title.
 * The favicon mark is a self-colored square that reads on both light and dark,
 * so one image covers both modes. URL is relative to this file in _static/css/.
 */
.patcher-tab-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    margin-right: 0.15em;
    background-image: url("../v2-logo-favicon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* -- Split card footer (docs/guides/usage/index.md) -------------------------
 * Opt in per card via grid-item-card's ``:class-footer: split-footer``. Turns a
 * footer of two markdown links into two equal clickable cells. Putting the link
 * text (and the trailing arrow glyph) inside the anchor is what makes the whole
 * half the clickable area, which a sphinx-design button can't do. overflow +
 * inherited bottom radius keep the hover outline clipped to the card's corners. */
.yue .surface .sd-card-footer.split-footer {
    padding: 0;                /* out-specify Shibuya's 1.5rem footer side padding */
    overflow: hidden;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.sd-card-footer.split-footer > p {
    display: flex;
    margin: 0;
    gap: 0;
}

.sd-card-footer.split-footer > p > a {
    position: relative;
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.4rem 1rem;
    color: var(--sy-c-text);
    text-decoration: none;
    border-bottom: none;       /* kill Shibuya's link underline so no accent bar */
    box-shadow: none;
    transition: box-shadow 0.15s ease;
}

/* Muted vertical divider between the halves, inset top and bottom so it never
 * touches the footer's horizontal separator or the card's bottom edge. */
.sd-card-footer.split-footer > p > a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: var(--gray-a5);
}

/* Leading brand icon (python / bash) sits inline just before the label. */
.sd-card-footer.split-footer > p > a iconify-icon:first-child {
    margin-right: 0.45rem;
    vertical-align: -0.15em;
}

/* Trailing up-right arrow pinned far-right in each cell to signal "button." */
.sd-card-footer.split-footer > p > a iconify-icon:last-child {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-10);
}

/* Hover: outline the hovered cell in the brand accent (inset shadow, no shift). */
.sd-card-footer.split-footer > p > a:hover {
    box-shadow: inset 0 0 0 1px var(--accent-9);
}

.sd-card-footer.split-footer > p > a:hover iconify-icon:last-child {
    color: var(--accent-9);
}