/* see CLAUDE_notes.md */

/* ── 1. The icon itself ──────────────────────────────────────────────────── */

:root {
    --toolIcon-size: 1.25em;
}

.toolIcon {
    /* Sized in em, so an icon in a 13px toolbar and one in a 16px header need
       no separate rule — each tracks the font-size it sits in. */
    width: var(--toolIcon-size);
    height: var(--toolIcon-size);
    flex: 0 0 auto;

    fill: currentColor;
    stroke: none;

    /* Optical baseline match with adjacent text — the same nudge Font Awesome
       applies to its own glyphs, so a mixed row (icon + FA fallback) lines up. */
    vertical-align: -.125em;

    /* Never let a <use> intercept the click: the button owns the event, and a
       click landing on the icon used to miss delegated handlers that test
       e.target.matches('button'). */
    pointer-events: none;

    transition: opacity .14s ease, transform .14s ease;
}

/* Unknown key / undrawn icon. Deliberately visible — a missing icon should
   look wrong in review rather than silently collapse the button's width. */
.toolIcon--empty {
    fill: none;
    opacity: .35;
}

/* Size modifiers. Still em — these shift an icon relative to its text, they do
   not opt out of the reader's font scale. Set --toolIcon-size on a container
   instead when a whole region needs a different size (a canvas tool rail). */
.toolIcon--sm { --toolIcon-size: 1em;    }
.toolIcon--lg { --toolIcon-size: 1.6em;  }
.toolIcon--xl { --toolIcon-size: 2.1em;  }

/* An icon that carries a label beside it needs a gap; an icon-only button must
   not have one, so the gap lives on the icon, not on the button. */
.toolIcon + span,
.toolIcon + .toolBtn-label { margin-left: .45em; }


/* ── 2. .toolBtn — the icon-only button ──────────────────────────────────── */
/* Used where the wording was removed: the comparison toolbar, popup headers,
   canvas rails. A square hit target with the icon centred, inheriting the
   surrounding text colour so the icon does too. */

.toolBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;

    width: 2em;
    height: 2em;
    padding: 0;

    font: inherit;
    line-height: 1;
    color: var(--text-muted);
    background: var(--icon-bg);
    border: 0;
    border-radius: 6px;
    cursor: pointer;

    transition: background .14s ease, color .14s ease;
}

/* With a label it stops being square and becomes a normal pill. */
.toolBtn--labelled {
    width: auto;
    height: auto;
    padding: .38em .7em;
}

/* Grey -> --primary-color, tint one step up the ramp. The colour move is the
   important half: it is the only cue that survives a high-contrast or forced
   -colours mode, where the translucent tint is thrown away. */
.toolBtn:hover {
    color: var(--primary-color);
    background: var(--icon-bg-hover);
}

.toolBtn:active {
    background: var(--icon-bg-active);
    transform: translateY(1px);
}

.toolBtn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Pressed / active — a toggle that is currently ON (pinned, full page, the
   selected view in a segmented group). Top of the ramp, so ON is heavier than
   hover and the two never read as the same state. */
.toolBtn[aria-pressed="true"],
.toolBtn.is-active {
    color: var(--primary-color);
    background: var(--icon-bg-active);
}

.toolBtn[disabled],
.toolBtn.is-disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

.toolBtn--danger:hover {
    color: var(--danger-color, #dc2626);
    background: var(--danger-bg, rgba(220, 38, 38, .08));
}


/* ── 3. .toolIcons — a row of them ───────────────────────────────────────── */

.toolIcons {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.toolIcons--seg {
    gap: 2px;
    padding: 2px;
    background: var(--icon-bg-seg);
    border: 0;
    border-radius: 8px;
}

.toolIcons--seg .toolBtn {
    background: transparent;
    border-radius: 6px;
}

.toolIcons--seg .toolBtn:hover { background: var(--icon-bg-hover); }

.toolIcons--seg .toolBtn[aria-pressed="true"],
.toolIcons--seg .toolBtn.is-active {
    color: var(--primary-color);
    background: var(--bg-card);
    box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}


/* ── 4. Theme toggle ─────────────────────────────────────────────────────── */

.theme-toggle .toolIcon--yinyang {
    /* A touch larger than the default: this one sits alone in the header with
       no label to be measured against, and the yin-yang's swirl needs the extra
       size to stay readable at header weight. */
    --toolIcon-size: 1.4em;
    color: currentColor;
}

/* No opacity fade on hover: .theme-toggle (fa.css) takes the icon
   grey -> --primary-color like every other icon button, and fading a
   colour change reads as a half-applied state rather than a hover. */


/* ── 5. Pins ─────────────────────────────────────────────────────────────── */

.toolBtn[aria-pressed="true"] .toolIcon--pin-to-left-on,
.toolBtn[aria-pressed="true"] .toolIcon--pin-to-right-on { color: var(--primary-color); }


/* ── 6. Disclosure triangles ─────────────────────────────────────────────── */
/* One drawing, rotated by state. Unlike the pins, these genuinely are the same
   arrow pointing two ways, and a transform keeps both states in sync for free. */

.toolIcon--exp-col { transition: transform .16s ease; }

[aria-expanded="true"] > .toolIcon--exp-col,
.is-open > .toolIcon--exp-col,
.is-expanded > .toolIcon--exp-col { transform: rotate(90deg); }


/* ── 7. Print ────────────────────────────────────────────────────────────── */
/* Tool icons are controls. On paper there is nothing to control. */

@media print {
    .toolBtn,
    .toolIcons { display: none !important; }
}