/* /Components/AppHeader.razor.rz.scp.css */
.appbar[b-t5vtmy58op] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
    height: 2.75rem;
    padding: 0 0.625rem;
    background: var(--if-chrome);
    border-bottom: 1px solid var(--if-border);
}

.brand[b-t5vtmy58op] {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    flex: none;
}

.brand-mark[b-t5vtmy58op] {
    width: 1.25rem;
    height: 1.25rem;
}

.brand-mark-dim[b-t5vtmy58op] {
    fill: var(--if-faint);
}

.brand-mark-lit[b-t5vtmy58op] {
    fill: var(--if-accent);
}

.brand-name[b-t5vtmy58op] {
    color: var(--if-text);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.brand-name-accent[b-t5vtmy58op] {
    color: var(--if-accent);
}

/* Set off from the wordmark by a rule rather than by distance, since the two are
   read together and the bar is too shallow for vertical separation to do it. */
.appbar-note[b-t5vtmy58op] {
    margin: 0;
    padding-left: 0.75rem;
    border-left: 1px solid var(--if-border);
    color: var(--if-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.appbar-spacer[b-t5vtmy58op] {
    flex: 1;
    min-width: 0.25rem;
}

/* A round glyph button, the shape this family gives to the things that open over the
   workspace rather than change it. */
.appbar-icon[b-t5vtmy58op] {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--if-border);
    border-radius: 999px;
    background: transparent;
    color: var(--if-muted);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.appbar-icon:hover[b-t5vtmy58op] {
    background: var(--if-chrome-hover);
    color: var(--if-text);
}

/* The tagline is the first thing to go: it is reassurance, and the controls beside
   it are the app. */
@media (max-width: 57.59rem) {
    .appbar[b-t5vtmy58op] {
        gap: 0.5rem;
    }

    .appbar-note[b-t5vtmy58op] {
        display: none;
    }
}
/* /Components/ColourPicker.razor.rz.scp.css */
/* ── The property button ─────────────────────────────────────────────────── */

/* The button itself and its caret are .if-prop-btn in app.css, shared with the shape picker;
   this is only what it shows - a chip of the colour. */
.if-colour-chip[b-qyb6rxzv9y] {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.25rem;
    border: 1px solid var(--if-border);
    border-radius: 3px;
    background: var(--if-chip);
}

.if-colour-auto[b-qyb6rxzv9y] {
    color: var(--if-muted);
    font-size: 0.5625rem;
    font-weight: 700;
    mix-blend-mode: difference;
}

/* "No colour": the transparency checker every editor uses, crossed through so it cannot be read
   as a pale grey. Named with its element's class so it outranks that class's own background. */
.if-colour-chip.is-transparent[b-qyb6rxzv9y],
.if-colour-swatch.is-transparent[b-qyb6rxzv9y] {
    background:
        linear-gradient(to top right, transparent calc(50% - 1px), var(--if-danger) calc(50% - 1px), var(--if-danger) calc(50% + 1px), transparent calc(50% + 1px)),
        repeating-conic-gradient(#c8ced6 0 25%, #ffffff 0 50%) 0 0 / 0.5rem 0.5rem;
}

/* ── The picker ──────────────────────────────────────────────────────────── */

/* The popover's chrome and placement are .if-popover in app.css. */
.if-colour-popover[b-qyb6rxzv9y] {
    width: 13.5rem;
    padding: 0.625rem;
}

.if-colour-popover:popover-open[b-qyb6rxzv9y] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.if-colour-presets[b-qyb6rxzv9y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.if-colour-swatch[b-qyb6rxzv9y] {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    border: 1px solid var(--if-border);
    border-radius: 4px;
    background: var(--if-chip, transparent);
    color: var(--if-muted);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: pointer;
}

.if-colour-swatch:hover:not(:disabled)[b-qyb6rxzv9y] {
    border-color: var(--if-muted);
}

.if-colour-swatch.is-on[b-qyb6rxzv9y] {
    border-color: var(--if-accent-bright);
    box-shadow: 0 0 0 2px var(--if-accent-wash);
}

.if-colour-swatch:focus-visible[b-qyb6rxzv9y],
.if-colour-dropper:focus-visible[b-qyb6rxzv9y] {
    outline: 2px solid var(--if-accent);
    outline-offset: 1px;
}

.if-colour-swatch:disabled[b-qyb6rxzv9y] {
    cursor: default;
    opacity: 0.4;
}

/* "Automatic" is shown in the colour it currently works out to, with an A to say it will change
   if the fill does. The A has to be readable on black and on white alike. */
.if-colour-swatch-auto[b-qyb6rxzv9y] {
    color: #808890;
}

.if-colour-add[b-qyb6rxzv9y] {
    background: var(--if-pane-alt);
    font-size: 0.875rem;
    font-weight: 400;
}

.if-colour-dropper[b-qyb6rxzv9y] {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--if-border);
    border-radius: 4px;
    background: var(--if-pane-alt);
    color: var(--if-text);
    cursor: pointer;
}

.if-colour-dropper:hover[b-qyb6rxzv9y] {
    border-color: var(--if-accent-dim);
    background: var(--if-accent-wash);
}

.if-colour-dropper svg[b-qyb6rxzv9y] {
    width: 1rem;
    height: 1rem;
}

/* Saturation across, value up, over the strip's hue. */
.if-colour-area[b-qyb6rxzv9y] {
    position: relative;
    height: 8rem;
    border-radius: 4px;
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, hsl(var(--if-hue) 100% 50%));
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

/* A ring in the colour itself, so the eye does not have to look away from the square to see
   what is being chosen. It takes no pointer events, so a press on it still lands on the square. */
.if-colour-thumb[b-qyb6rxzv9y] {
    position: absolute;
    box-sizing: border-box;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--if-chip);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.if-colour-hue[b-qyb6rxzv9y] {
    width: 100%;
    height: 0.75rem;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(to right, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);
    appearance: none;
    cursor: pointer;
}

.if-colour-hue[b-qyb6rxzv9y]::-webkit-slider-thumb {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
    appearance: none;
}

.if-colour-hue[b-qyb6rxzv9y]::-moz-range-thumb {
    box-sizing: border-box;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.if-colour-fields[b-qyb6rxzv9y] {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
}

.if-colour-mode[b-qyb6rxzv9y] {
    flex: none;
    min-width: 2.75rem;
    justify-content: center;
    border-color: var(--if-border);
    background: var(--if-pane-alt);
    color: var(--if-text);
    font-size: 0.6875rem;
}

.if-colour-hex[b-qyb6rxzv9y],
.if-colour-channel[b-qyb6rxzv9y] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    color: var(--if-muted);
    font-size: 0.625rem;
}

/* The same field .if-input is on the page; scoped styles do not reach across components. */
.if-input[b-qyb6rxzv9y] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0.1875rem 0.3125rem;
    border: 1px solid var(--if-border);
    border-radius: 5px;
    background: var(--if-pane);
    color: var(--if-text);
    font: inherit;
    font-size: 0.75rem;
}

.if-input:focus-visible[b-qyb6rxzv9y] {
    outline: 2px solid var(--if-accent);
    outline-offset: -1px;
}

.if-colour-mine[b-qyb6rxzv9y] {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--if-border-soft);
}

.if-colour-mine-title[b-qyb6rxzv9y] {
    color: var(--if-muted);
    font-size: 0.6875rem;
    font-weight: 600;
}
/* /Components/ShapePicker.razor.rz.scp.css */
/* The same footprint as a colour chip, so the properties line up in a row. */
.if-shape-icon[b-8anl7headk] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 0.125rem;
}

/* The choices in one column under the button, as Snagit lays them out - each just its outline. */
.if-shape-popover:popover-open[b-8anl7headk] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.if-shape-option[b-8anl7headk] {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--if-text);
    cursor: pointer;
}

.if-shape-option:hover[b-8anl7headk] {
    background: var(--if-chrome-hover);
}

.if-shape-option.is-on[b-8anl7headk] {
    border-color: var(--if-accent-dim);
    background: var(--if-accent-wash);
    color: var(--if-accent);
}

.if-shape-option:focus-visible[b-8anl7headk] {
    outline: 2px solid var(--if-accent);
    outline-offset: -2px;
}

.if-shape-option .if-shape-icon[b-8anl7headk] {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
}
/* /Components/ThemeToggle.razor.rz.scp.css */
.theme-btn[b-05qtk9bpcc] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--if-border);
    border-radius: 999px;
    background: transparent;
    color: var(--if-muted);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.theme-btn:hover:not(:disabled)[b-05qtk9bpcc] {
    background: var(--if-chrome-hover);
    color: var(--if-text);
}

.theme-btn:disabled[b-05qtk9bpcc] {
    cursor: default;
    opacity: 0.6;
}

/* The label is the first thing to go when the chrome tightens - the glyph on its
   own still says which way the switch will move. */
@media (max-width: 1228.78px) {
    .theme-btn-label[b-05qtk9bpcc] {
        display: none;
    }
}
/* /Layout/ShellLayout.razor.rz.scp.css */
/* Fixed to the viewport, so the panes divide a known height between them and the
   page itself never scrolls: every pane that can overflow scrolls inside its own
   box, which is what keeps the toolbar, canvas and side panels all on screen at
   once. */
.if-shell[b-gtnwd0jxx8] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--if-bg);
    color: var(--if-text);
    font-family: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
}

/* On a narrow screen the fixed shell is given up. A toolbox, a canvas and a properties
   panel side by side inside one viewport height would leave every one of them too
   cramped to use - so the page scrolls instead, and each pane is as tall as it needs
   to be. */
@media (max-width: 57.59rem) {
    .if-shell[b-gtnwd0jxx8] {
        position: static;
        min-height: 100dvh;
        overflow: visible;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* ── Top toolbar ─────────────────────────────────────────────────────────── */

/* A slim strip of whole-document actions under the app bar - icon-only, since Open, Save,
   Undo and Redo are glyphs every editor has already taught. */
.if-topbar[b-sikxi4wvnp] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
    height: 2.25rem;
    padding: 0 0.5rem;
    background: var(--if-chrome);
    border-bottom: 1px solid var(--if-border);
}

.if-topbar .if-icon-btn[b-sikxi4wvnp] {
    border-color: transparent;
    background: transparent;
}

.if-topbar .if-icon-btn:not(:disabled):hover[b-sikxi4wvnp] {
    background: var(--if-chrome-hover);
}

.if-topbar-divider[b-sikxi4wvnp] {
    width: 1px;
    height: 1.25rem;
    margin: 0 0.25rem;
    background: var(--if-border);
}

.if-topbar .if-icon-btn.is-on[b-sikxi4wvnp] {
    background: var(--if-chrome-hover);
    color: var(--if-accent);
}

.if-zoom-slider[b-sikxi4wvnp] {
    width: 7.5rem;
    accent-color: var(--if-accent);
}

/* Fixed width, so the controls after it do not shuffle sideways as the number changes. */
.if-zoom-readout[b-sikxi4wvnp] {
    min-width: 3.25rem;
    color: var(--if-muted);
    text-align: right;
}

.if-topbar .if-zoom-text-btn[b-sikxi4wvnp] {
    height: 2rem;
    padding: 0 0.5rem;
    border-color: transparent;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
}

.if-topbar .if-zoom-text-btn:not(:disabled):hover[b-sikxi4wvnp] {
    background: var(--if-chrome-hover);
}

/* The rail, its options panel and the canvas take what is left below the toolbars; the
   status bar is a fixed strip under them. */
.if-workspace[b-sikxi4wvnp] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.if-toolbox[b-sikxi4wvnp],
.if-tool-options[b-sikxi4wvnp] {
    flex: none;
}

/* Only as wide as an icon over a one-word label - the rail picks a group, the panel next to
   it is where anything needing room to read actually sits. */
.if-toolbox[b-sikxi4wvnp] {
    width: 4.75rem;
    background: var(--if-chrome);
    border-right: 1px solid var(--if-border);
}

/* One width for every tool, so the canvas does not jump as the rail is used - wide enough for
   EXIF's label and value columns and a row of four edge buttons. */
.if-tool-options[b-sikxi4wvnp] {
    width: 17rem;
    border-right: 1px solid var(--if-border);
}

.if-toolbox-body[b-sikxi4wvnp],
.if-tool-options-body[b-sikxi4wvnp] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
}

.if-placeholder[b-sikxi4wvnp] {
    margin: 0;
    color: var(--if-faint);
    font-size: 0.8125rem;
}

/* ── Toolbox ─────────────────────────────────────────────────────────────── */

.if-toolbox-body[b-sikxi4wvnp] {
    display: flex;
    flex-direction: column;
    padding: 0.375rem 0;
}

.if-toolbox-body .if-placeholder[b-sikxi4wvnp] {
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    text-align: center;
}

.if-tool-rail[b-sikxi4wvnp] {
    display: flex;
    flex-direction: column;
}

/* One tool group: an icon over a small-caps label, the full width of the rail. */
.if-rail-btn[b-sikxi4wvnp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.625rem 0.25rem;
    border: 0;
    background: transparent;
    color: var(--if-muted);
    font: inherit;
    cursor: pointer;
}

.if-rail-btn[b-sikxi4wvnp]  .if-icon {
    width: 1.375rem;
    height: 1.375rem;
}

.if-rail-label[b-sikxi4wvnp] {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.if-rail-btn:not(:disabled):hover[b-sikxi4wvnp] {
    background: var(--if-chrome-hover);
    color: var(--if-text);
}

.if-rail-btn:disabled[b-sikxi4wvnp] {
    cursor: default;
    opacity: 0.5;
}

.if-rail-btn:focus-visible[b-sikxi4wvnp] {
    outline: 2px solid var(--if-accent);
    outline-offset: -2px;
}

/* The selected group takes the options panel's own background and an accent bar down its
   edge, so the button and the options beside it read as one tab rather than two unrelated
   boxes. */
.if-rail-btn.is-on[b-sikxi4wvnp] {
    background: var(--if-pane);
    color: var(--if-accent);
    box-shadow: inset 3px 0 0 var(--if-accent);
}

/* Instant actions inside an options panel: a grid of square icon buttons. */
.if-tool-grid[b-sikxi4wvnp] {
    display: grid;
    grid-template-columns: repeat(5, 2rem);
    gap: 0.25rem;
}

/* A square .btn (or, for "Open image…", a label styled as one) sized to hold one icon and
   nothing else. */
.if-icon-btn[b-sikxi4wvnp] {
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
}

/* ::deep because the <svg> is rendered by the Icon component, outside this file's scope. */
[b-sikxi4wvnp] .if-icon {
    width: 1.0625rem;
    height: 1.0625rem;
}

/* ── Canvas ──────────────────────────────────────────────────────────────── */

.if-canvas[b-sikxi4wvnp] {
    flex: 1;
    min-width: 0;
    background: var(--if-pane-alt);
}

/* The scrolling box the image is zoomed inside. Its children centre by auto margins rather
   than place-items: centre alignment on an item bigger than its container pushes the overflow
   off both edges, and the half past the top and left could never be scrolled to. Auto margins
   collapse to zero instead once there is no room left to share out. */
.if-viewport[b-sikxi4wvnp] {
    display: grid;
    flex: 1;
    min-height: 0;
    padding: 1rem;
    overflow: auto;
}

/* Toggled by canvas.js while a file is dragged over the window - see attachFileDrop. Inset, so
   it is not clipped by the pane, and an outline rather than a border so nothing moves. */
.if-viewport.is-drop-target[b-sikxi4wvnp] {
    outline: 2px dashed var(--if-accent);
    outline-offset: -0.5rem;
    background-color: var(--if-accent-wash);
}

.if-canvas-empty[b-sikxi4wvnp] {
    display: grid;
    place-items: center;
    gap: 0.75rem;
    margin: auto;
    color: var(--if-muted);
    font-size: 0.875rem;
}

/* The transparency grid every image editor draws behind a canvas, so a PNG or WebP's alpha
   reads as "see-through" rather than as an unexplained gap. A neutral grey works in both
   themes without a token of its own - it is meant to read as neither light nor dark. */
.if-checker[b-sikxi4wvnp] {
    background-color: rgba(128, 128, 128, 0.12);
    background-image:
        linear-gradient(45deg, rgba(128, 128, 128, 0.22) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(128, 128, 128, 0.22) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.22) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.22) 75%);
    background-size: var(--checker-size, 1.25rem) var(--checker-size, 1.25rem);
    background-position:
        0 0,
        0 calc(var(--checker-size, 1.25rem) / 2),
        calc(var(--checker-size, 1.25rem) / 2) calc(var(--checker-size, 1.25rem) / -2),
        calc(var(--checker-size, 1.25rem) / -2) 0;
}

/* Sized to the image inside it by ordinary block flow - the crop overlay is positioned
   relative to this, in the same pixel space the pointer events are read against, so the two
   have to be exactly the same box. */
.if-image-wrap[b-sikxi4wvnp] {
    position: relative;
    display: inline-block;
    margin: auto;
    line-height: 0;
    touch-action: none;

    /* There is nothing here to select - a canvas and the crop overlay - and a drag that leaves a
       document selection behind is a drag the next one is dropped into: pressing on a selection
       and moving starts the browser's own drag-and-drop, which cancels the pointer mid-gesture
       and strands the crop rectangle where it was. */
    user-select: none;

    /* A highlight's multiply blends with the image and the annotations under it and nothing
       further back: over a transparent pixel it shows as its own colour, as the export has it,
       not multiplied into the viewport's grey. */
    isolation: isolate;
}

.if-image-wrap.is-cropping[b-sikxi4wvnp] {
    cursor: crosshair;
}

/* Toggled by canvas.js while a drag here would pan - see attachZoom. The wrapper is named as
   well as the viewport so the hand also wins over the crop tool's crosshair while Space is held. */
.if-viewport.can-pan[b-sikxi4wvnp],
.if-viewport.can-pan .if-image-wrap[b-sikxi4wvnp] {
    cursor: grab;
}

.if-viewport.is-panning[b-sikxi4wvnp],
.if-viewport.is-panning .if-image-wrap[b-sikxi4wvnp] {
    cursor: grabbing;
    user-select: none;
}

/* Sized in px from the zoom level by Home.razor - no max-width here, or a zoomed-in image
   would be squeezed straight back down to fit. */
.if-canvas-image[b-sikxi4wvnp] {
    display: block;
    max-width: none;
    box-shadow: var(--if-shadow);
}

.if-canvas-image.is-pixelated[b-sikxi4wvnp] {
    image-rendering: pixelated;
}

/* ── Step markers ────────────────────────────────────────────────────────── */

/* One marker of the annotation layer, over the canvas and positioned in display pixels by
   Home.razor. The other renderer of the same marker is drawStep in js/canvas.js, which draws it
   into the pixels for an export - the two have to agree, so everything but the shapes themselves
   (the label, its size, its colour) is decided in the engine and handed to both. The font is the
   one thing that cannot be: it is named in both places, and has to stay named the same. */
.if-step[b-sikxi4wvnp] {
    position: absolute;

    /* Ignored except while Annotate is up - a marker is part of what the image says at all
       times, but only that tool lets a press land on one. */
    pointer-events: none;
    overflow: visible;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The shape itself takes the press, not the square the <svg> is - so a click in the corners a
   circle or a teardrop leaves empty places a marker there rather than grabbing this one. The
   press still reaches the <svg>'s own handler, which is on its way up. The digits pass it through
   to the shape under them. */
.if-image-wrap.is-placing .if-step-shape[b-sikxi4wvnp] {
    pointer-events: visiblePainted;
    cursor: move;
    touch-action: none;
}

/* A shape, the same way: positioned by Home.razor, and taking no press itself - its hit path does,
   which is its fill (if it has one) and a band along its edge. See the markup. */
.if-shape-annotation[b-sikxi4wvnp] {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

.if-image-wrap.is-placing .if-shape-hit[b-sikxi4wvnp] {
    pointer-events: visiblePainted;
    cursor: move;
    touch-action: none;
}

/* An arrow, the same way: its <svg> lies over the whole image, so it must take no press itself or it
   would take every press on the image - only its hit paths do. drawArrow in js/canvas.js is the
   other renderer. */
.if-arrow-annotation[b-sikxi4wvnp] {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

.if-image-wrap.is-placing .if-arrow-hit[b-sikxi4wvnp] {
    pointer-events: visiblePainted;
    cursor: move;
    touch-action: none;
}

/* A highlight, the same way - multiplyRect in js/pixels.js is the other renderer, and this blend is
   what makes the two agree: white under it takes the colour, dark text stays dark. The whole box
   takes the press. */
.if-highlight-annotation[b-sikxi4wvnp] {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    mix-blend-mode: multiply;
}

.if-image-wrap.is-placing .if-highlight-hit[b-sikxi4wvnp] {
    pointer-events: visiblePainted;
    cursor: move;
    touch-action: none;
}

.if-viewport.can-pan .if-highlight-hit[b-sikxi4wvnp],
.if-viewport.is-panning .if-highlight-hit[b-sikxi4wvnp] {
    cursor: inherit;
}

/* A blur or a pixelation: nothing is drawn here - it is in the canvas itself, worked out from the
   pixels by redactRect in js/pixels.js, as the export works it out. This is only the box that
   takes the press. */
.if-redact-annotation[b-sikxi4wvnp] {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

.if-image-wrap.is-placing .if-redact-hit[b-sikxi4wvnp] {
    pointer-events: visiblePainted;
    cursor: move;
    touch-action: none;
}

.if-viewport.can-pan .if-redact-hit[b-sikxi4wvnp],
.if-viewport.is-panning .if-redact-hit[b-sikxi4wvnp] {
    cursor: inherit;
}

/* A spotlight, the same way: the dimming is in the canvas, worked out by spotlight in js/pixels.js,
   and this is only the lit box that takes the press. */
.if-spotlight-annotation[b-sikxi4wvnp] {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

.if-image-wrap.is-placing .if-spotlight-hit[b-sikxi4wvnp] {
    pointer-events: visiblePainted;
    cursor: move;
    touch-action: none;
}

.if-viewport.can-pan .if-spotlight-hit[b-sikxi4wvnp],
.if-viewport.is-panning .if-spotlight-hit[b-sikxi4wvnp] {
    cursor: inherit;
}

/* A magnifier: the enlargement is in the canvas (magnifyRect in js/pixels.js) and its border is drawn
   here, drawMagnifyFrame in js/canvas.js being the other renderer. Like an arrow's, its <svg> lies over
   the whole image, so it takes no press itself - only its inset does. */
.if-magnify-annotation[b-sikxi4wvnp] {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

.if-image-wrap.is-placing .if-magnify-hit[b-sikxi4wvnp] {
    pointer-events: visiblePainted;
    cursor: move;
    touch-action: none;
}

.if-viewport.can-pan .if-magnify-hit[b-sikxi4wvnp],
.if-viewport.is-panning .if-magnify-hit[b-sikxi4wvnp] {
    cursor: inherit;
}

/* What a magnifier enlarges: a round handle, told apart from the frame's square ones, aimed with a
   crosshair as an arrow's end is. */
.if-magnify-source-handle[b-sikxi4wvnp] {
    border-radius: 50%;
    cursor: crosshair;
    pointer-events: auto;
}

/* A handle on each end rather than a frame's eight - see Home.razor. Placed by its own style, and
   centred on the end by .if-crop-handle's translate. */
.if-arrow-handle[b-sikxi4wvnp] {
    cursor: crosshair;
}

/* Text, the same way again - drawText in js/canvas.js is the other renderer. Spaces are kept as
   typed, since a caption's spacing is the user's and the export keeps it. The font is not named
   here: the engine sets it on each line, so the two renderers cannot name different ones. */
.if-text-annotation[b-sikxi4wvnp] {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

.if-text-annotation text[b-sikxi4wvnp] {
    white-space: pre;
}

.if-image-wrap.is-placing .if-text-hit[b-sikxi4wvnp] {
    pointer-events: visiblePainted;
    cursor: move;
    touch-action: none;
}

/* Typing into a caption: a text box over it with its own letters invisible, so the caption drawn
   under it is what shows, and this lends it only a caret and a selection. Its font, size, line
   height and padding are the caption's, set by Home.razor, so the caret lands on the letters. */
.if-text-editor[b-sikxi4wvnp] {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: transparent;
    overflow: hidden;
    resize: none;
    white-space: pre;
    user-select: text;
    cursor: text;
    touch-action: none;
}

.if-text-editor[b-sikxi4wvnp]::selection {
    background: color-mix(in srgb, var(--if-accent) 35%, transparent);
}

.if-viewport.can-pan .if-text-hit[b-sikxi4wvnp],
.if-viewport.is-panning .if-text-hit[b-sikxi4wvnp] {
    cursor: inherit;
}

/* The accent, not the marker's own colour: this is the app saying which one is selected, and it
   has to be told apart from the circle it is drawn around whatever colour that circle is. */
.if-step-ring[b-sikxi4wvnp] {
    stroke: var(--if-accent-bright);
}

/* The hand tool outranks the marker's cursor, as it does every other tool's. */
.if-viewport.can-pan .if-step-shape[b-sikxi4wvnp],
.if-viewport.can-pan .if-shape-hit[b-sikxi4wvnp],
.if-viewport.can-pan .if-arrow-hit[b-sikxi4wvnp],
.if-viewport.is-panning .if-step-shape[b-sikxi4wvnp],
.if-viewport.is-panning .if-shape-hit[b-sikxi4wvnp],
.if-viewport.is-panning .if-arrow-hit[b-sikxi4wvnp] {
    cursor: inherit;
}

/* Under the crosshair everywhere the markers are not, so it is clear that a press puts one
   down rather than doing nothing. */
.if-image-wrap.is-placing[b-sikxi4wvnp] {
    cursor: crosshair;
}

/* ── Highlight options ───────────────────────────────────────────────────── */

/* The highlighter's quick styles, Snagit's row of swatches: one press is a colour. The colour
   comes in as --swatch from Home.razor, which takes it from the engine. */
.if-quick-styles[b-sikxi4wvnp] {
    display: flex;
    gap: 0.375rem;
}

.if-quick-style[b-sikxi4wvnp] {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--if-border);
    border-radius: 0.25rem;
    background: var(--swatch);
    cursor: pointer;
}

.if-quick-style:hover[b-sikxi4wvnp] {
    border-color: var(--if-accent-dim);
}

.if-quick-style.is-on[b-sikxi4wvnp] {
    outline: 2px solid var(--if-accent);
    outline-offset: 1px;
}

.if-quick-style:focus-visible[b-sikxi4wvnp] {
    outline: 2px solid var(--if-accent);
    outline-offset: 1px;
}

/* ── Step options ────────────────────────────────────────────────────────── */

/* The Annotate panel's own tool strip - square icon buttons, the one in hand shown pressed the
   way the top bar's toggles are. A rule under it keeps it apart from that tool's properties. */
.if-annotate-tools[b-sikxi4wvnp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--if-border-soft);
}

/* Bigger than a top-bar glyph: these are the tools themselves, and the step icon's two small
   numbered circles need the room to read. */
.if-annotate-tools[b-sikxi4wvnp]  .if-icon {
    width: 1.3rem;
    height: 1.3rem;
}

.if-annotate-tools .if-icon-btn.is-on[b-sikxi4wvnp] {
    border-color: var(--if-accent-dim);
    background: var(--if-accent-wash);
    color: var(--if-accent);
}

/* Tool properties side by side, each a label over its control - Fill, Text colour - the way an
   annotation editor lays them out, so the colours read as properties of the marker. */
.if-prop-row[b-sikxi4wvnp] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.if-prop[b-sikxi4wvnp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--if-muted);
    font-size: 0.6875rem;
    white-space: nowrap;
}

/* Wide enough for three digits and no wider - it sits beside the other properties as one of
   them, not as a form field. No spinner: it took half the width, and the arrow keys and the
   wheel over a focused field still step the number. */
.if-input.if-step-number[b-sikxi4wvnp] {
    width: 2.5rem;
    padding-inline: 0.125rem;
    appearance: textfield;
    -moz-appearance: textfield;
}

.if-input.if-step-number[b-sikxi4wvnp]::-webkit-inner-spin-button,
.if-input.if-step-number[b-sikxi4wvnp]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.if-input.if-step-number[b-sikxi4wvnp] {

    /* The colour chips' own height, so the three labels above them sit on one line. */
    height: 2.3rem;
    text-align: center;
}

/* The selected annotation's box, carrying its resize handles (the crop handles' own look and
   classes). It takes no pointer events itself, so the annotation under it can still be taken
   hold of and moved; only the handles answer a press. */
.if-annotation-frame[b-sikxi4wvnp] {
    position: absolute;
    pointer-events: none;
}

/* A shape's frame is its selection ring too: a marker has a ring drawn round its own outline,
   but a box has no outline of its own to ring - it may not have one at all. Accent for the same
   reason the ring is: it has to be told apart from the shape whatever colour that is. */
.if-annotation-frame.is-box[b-sikxi4wvnp] {
    box-sizing: border-box;
    border: 1px dashed var(--if-accent-bright);
}

.if-annotation-frame .if-crop-handle[b-sikxi4wvnp] {
    pointer-events: auto;
}

/* ── Shape options ───────────────────────────────────────────────────────── */

/* A label, a slider and the number it is at, on one line - Snagit's Thickness and Opacity rows. */
.if-slider-field[b-sikxi4wvnp] {
    display: grid;
    grid-template-columns: 4rem 1fr 2.75rem;
    align-items: center;
    gap: 0.375rem;
    color: var(--if-muted);
    font-size: 0.6875rem;
}

.if-slider-field input[type="range"][b-sikxi4wvnp] {
    min-width: 0;
    accent-color: var(--if-accent);
}

.if-input.if-slider-number[b-sikxi4wvnp] {
    padding-inline: 0.125rem;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.if-input.if-slider-number[b-sikxi4wvnp]::-webkit-inner-spin-button,
.if-input.if-slider-number[b-sikxi4wvnp]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

/* ── Text options ────────────────────────────────────────────────────────── */

/* A toggle the size of the colour chips beside it, pressed the way the tool strip's are. */
.if-prop-btn.if-bold-btn[b-sikxi4wvnp] {
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    color: var(--if-text);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
}

.if-prop-btn.if-bold-btn.is-on[b-sikxi4wvnp],
.if-prop-btn.if-toggle-btn.is-on[b-sikxi4wvnp] {
    border-color: var(--if-accent-dim);
    background: var(--if-accent-wash);
    color: var(--if-accent);
}

/* The same toggle carrying an icon - a magnifier's Line. */
.if-prop-btn.if-toggle-btn[b-sikxi4wvnp] {
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    color: var(--if-text);
}

/* ── Edges options ───────────────────────────────────────────────────────── */

/* The four sides' checkboxes on one line, clockwise from the top. */
.if-edge-sides[b-sikxi4wvnp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.if-font-pick[b-sikxi4wvnp] {
    width: 100%;
    padding-block: 0.25rem;
}

.if-hint[b-sikxi4wvnp] {
    margin: 0;
    color: var(--if-muted);
    font-size: 0.6875rem;
}

.if-crop-overlay[b-sikxi4wvnp] {
    position: absolute;
    box-sizing: border-box;
    border: 1px dashed var(--if-accent-bright);
    background: var(--if-accent-wash);
    pointer-events: none;
}

/* A finished selection is the one thing on the canvas that can be taken hold of, so it takes
   pointer events purely for the cursor - the press itself bubbles to the wrapper's handler,
   which is where inside-or-outside is decided. While one is still being swept out there is
   nothing to grab yet, and the crosshair has to stay. */
.if-crop-overlay.is-movable[b-sikxi4wvnp] {
    cursor: move;
    pointer-events: auto;
    touch-action: none;
}

/* The eight resize handles, centred on the selection's edge so half of each sits outside it -
   where the pointer goes looking for them, and clear of the pixels being chosen. Accent fill
   with the accent's own contrasting ink around it, so they stay visible over any image. */
.if-crop-handle[b-sikxi4wvnp] {
    position: absolute;
    box-sizing: border-box;
    width: 0.55rem;
    height: 0.55rem;
    border: 1px solid var(--if-accent-ink);
    background: var(--if-accent-bright);
    transform: translate(-50%, -50%);
    touch-action: none;
}

/* A hit area wider than the square, so the handle can stay small enough not to hide what is
   under it and still be easy to catch - and reachable by touch. */
.if-crop-handle[b-sikxi4wvnp]::before {
    content: "";
    position: absolute;
    inset: -0.3rem;
}

.if-crop-handle-nw[b-sikxi4wvnp],
.if-crop-handle-n[b-sikxi4wvnp],
.if-crop-handle-ne[b-sikxi4wvnp] {
    top: 0;
}

.if-crop-handle-w[b-sikxi4wvnp],
.if-crop-handle-e[b-sikxi4wvnp] {
    top: 50%;
}

.if-crop-handle-sw[b-sikxi4wvnp],
.if-crop-handle-s[b-sikxi4wvnp],
.if-crop-handle-se[b-sikxi4wvnp] {
    top: 100%;
}

.if-crop-handle-nw[b-sikxi4wvnp],
.if-crop-handle-w[b-sikxi4wvnp],
.if-crop-handle-sw[b-sikxi4wvnp] {
    left: 0;
}

.if-crop-handle-n[b-sikxi4wvnp],
.if-crop-handle-s[b-sikxi4wvnp] {
    left: 50%;
}

.if-crop-handle-ne[b-sikxi4wvnp],
.if-crop-handle-e[b-sikxi4wvnp],
.if-crop-handle-se[b-sikxi4wvnp] {
    left: 100%;
}

.if-crop-handle-nw[b-sikxi4wvnp],
.if-crop-handle-se[b-sikxi4wvnp] {
    cursor: nwse-resize;
}

.if-crop-handle-ne[b-sikxi4wvnp],
.if-crop-handle-sw[b-sikxi4wvnp] {
    cursor: nesw-resize;
}

.if-crop-handle-n[b-sikxi4wvnp],
.if-crop-handle-s[b-sikxi4wvnp] {
    cursor: ns-resize;
}

.if-crop-handle-w[b-sikxi4wvnp],
.if-crop-handle-e[b-sikxi4wvnp] {
    cursor: ew-resize;
}

/* The hand tool outranks all of them, the same way it outranks the crosshair. */
.if-viewport.can-pan .if-crop-overlay[b-sikxi4wvnp],
.if-viewport.can-pan .if-crop-handle[b-sikxi4wvnp],
.if-viewport.is-panning .if-crop-overlay[b-sikxi4wvnp],
.if-viewport.is-panning .if-crop-handle[b-sikxi4wvnp] {
    cursor: inherit;
}

/* ── Properties panel ────────────────────────────────────────────────────── */

.if-prop-dims[b-sikxi4wvnp] {
    margin: 0.125rem 0 0;
    color: var(--if-muted);
    font-size: 0.75rem;
}

.if-panel[b-sikxi4wvnp] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* A second section in the same panel - Adjust's Effects under its sliders - set apart by a rule,
   so its heading does not read as part of the buttons above it. */
.if-panel + .if-panel[b-sikxi4wvnp] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--if-border);
}

/* A .btn stretched to the panel's width - .btn on its own is sized to its content, which is
   right for a header-bar button but not for a panel's primary action. */
.if-tool-wide[b-sikxi4wvnp] {
    justify-content: center;
    width: 100%;
    padding: 0.3125rem 0.5rem;
}

.if-panel-heading[b-sikxi4wvnp] {
    margin: 0;
    color: var(--if-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.if-panel-hint[b-sikxi4wvnp] {
    margin: 0;
    color: var(--if-muted);
    font-size: 0.75rem;
}

.if-field-row[b-sikxi4wvnp] {
    display: flex;
    gap: 0.5rem;
}

.if-field[b-sikxi4wvnp] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    color: var(--if-muted);
    font-size: 0.6875rem;
}

.if-input[b-sikxi4wvnp] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0.1875rem 0.375rem;
    border: 1px solid var(--if-border);
    border-radius: 5px;
    background: var(--if-pane);
    color: var(--if-text);
    font: inherit;
    font-size: 0.8125rem;
}

.if-input:disabled[b-sikxi4wvnp] {
    color: var(--if-faint);
    background: var(--if-pane-alt);
}

.if-preset-row[b-sikxi4wvnp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* ── EXIF ─────────────────────────────────────────────────────────────────── */

/* What sharing the image would give away - in the annotate red, the same on either theme, since
   it is the reason to press "Remove all metadata" underneath. */
.if-exif-warning[b-sikxi4wvnp] {
    display: flex;
    align-items: baseline;
    gap: 0.4375rem;
    margin: 0;
    padding: 0.4375rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--if-tool-annotate) 45%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--if-tool-annotate) 12%, transparent);
    color: var(--if-text);
    font-size: 0.75rem;
    line-height: 1.4;
}

.if-exif-dot[b-sikxi4wvnp] {
    display: inline-block;
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    margin-left: 0.125rem;
    border-radius: 50%;
    background: var(--if-tool-annotate);
    vertical-align: 0.0625rem;
}

.if-exif-warning .if-exif-dot[b-sikxi4wvnp] {
    margin-left: 0;
}

.if-exif-group-heading[b-sikxi4wvnp] {
    grid-column: 1 / -1;
    margin: 0.5rem 0 0;
    color: var(--if-faint);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* A label column sized to the longest label, up to 45% of the panel, and the value beside it with
   the rest - a long value wraps in its own column rather than pushing under the label. A label
   wraps only between words, never mid-word. */
.if-exif-list[b-sikxi4wvnp] {
    display: grid;
    grid-template-columns: fit-content(45%) minmax(0, 1fr);
    gap: 0.3125rem 0.75rem;
    margin: 0;
}

.if-exif-list > .if-exif-group-heading:first-child[b-sikxi4wvnp] {
    margin-top: 0;
}

.if-exif-list dt[b-sikxi4wvnp] {
    color: var(--if-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.if-exif-list dd[b-sikxi4wvnp] {
    margin: 0;
    color: var(--if-text);
    font-size: 0.75rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.if-exif-head[b-sikxi4wvnp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.if-exif-mode[b-sikxi4wvnp] {
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
}

.if-exif-mode.is-on[b-sikxi4wvnp] {
    border-color: var(--if-accent);
    color: var(--if-accent);
}

/* In edit mode a group heading carries its own remove, at the far end of the line. */
.if-exif-group-heading:has(.if-exif-link)[b-sikxi4wvnp] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.if-exif-link[b-sikxi4wvnp] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--if-tool-annotate);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.if-exif-link:hover:not(:disabled)[b-sikxi4wvnp],
.if-exif-link:focus-visible[b-sikxi4wvnp] {
    text-decoration: underline;
}

.if-exif-editing[b-sikxi4wvnp] {
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.if-exif-edit-row[b-sikxi4wvnp] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.if-exif-input[b-sikxi4wvnp] {
    flex: 1;
    font-size: 0.75rem;
}

/* A camera setting - shown, not edited, but it can still be removed. */
.if-exif-fixed[b-sikxi4wvnp] {
    flex: 1;
    min-width: 0;
    color: var(--if-muted);
}

/* The remove button: small and quiet until pointed at, then the annotate red. */
.if-exif-remove[b-sikxi4wvnp] {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: var(--if-faint);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
}

.if-exif-remove:hover:not(:disabled)[b-sikxi4wvnp],
.if-exif-remove:focus-visible[b-sikxi4wvnp] {
    border-color: color-mix(in srgb, var(--if-tool-annotate) 45%, transparent);
    color: var(--if-tool-annotate);
}

.if-exif-add[b-sikxi4wvnp] {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--if-border);
}

.if-exif-error[b-sikxi4wvnp] {
    font-size: 0.6875rem;
    white-space: normal;
}

.if-exif-copy[b-sikxi4wvnp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.if-exif-copy-notice[b-sikxi4wvnp] {
    margin-right: auto;
    font-size: 0.75rem;
}

.if-status-error[b-sikxi4wvnp] {
    color: var(--if-danger);
}

/* A completed action - "Copied to clipboard". */
.if-status-success[b-sikxi4wvnp] {
    color: var(--if-tool-success);
}

/* ── Busy indicator ──────────────────────────────────────────────────────── */

/* A dimmed cover over the canvas, whichever state it is in - the one place attention already
   is right after a click, so it is where "this is doing something" needs to show, not just
   the status bar in the corner. */
.if-busy-overlay[b-sikxi4wvnp] {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.12);
}

.if-spinner[b-sikxi4wvnp] {
    display: inline-block;
    flex: none;
    width: 0.8125rem;
    height: 0.8125rem;
    border: 2px solid var(--if-border);
    border-top-color: var(--if-accent);
    border-radius: 50%;
    animation: if-spin-b-sikxi4wvnp 0.7s linear infinite;
}

.if-spinner-lg[b-sikxi4wvnp] {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

@keyframes if-spin-b-sikxi4wvnp {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .if-spinner[b-sikxi4wvnp] {
        animation: none;
    }
}

.if-busy-status[b-sikxi4wvnp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.statusbar[b-sikxi4wvnp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
    height: 1.75rem;
    padding: 0 0.75rem;
    background: var(--if-chrome);
    border-top: 1px solid var(--if-border);
    color: var(--if-muted);
    font-size: 0.6875rem;
}

/* Only while the pointer is over the image - otherwise it would leave an empty gap. */
.if-pointer-pos:empty[b-sikxi4wvnp] {
    display: none;
}

.statusbar-spacer[b-sikxi4wvnp] {
    flex: 1;
}

.statusbar-link[b-sikxi4wvnp] {
    color: inherit;
    text-decoration: none;
}

.statusbar-link:hover[b-sikxi4wvnp] {
    color: var(--if-text);
    text-decoration: underline;
}

/* On a narrow screen the rail turns into a row across the top, the options panel stacks
   under it, and the canvas gets the full width below - a 4.75rem rail plus a 17rem panel
   beside the canvas would leave it almost no room. */
@media (max-width: 57.59rem) {
    .if-workspace[b-sikxi4wvnp] {
        flex-direction: column;
    }

    .if-toolbox[b-sikxi4wvnp],
    .if-tool-options[b-sikxi4wvnp] {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--if-border);
    }

    .if-toolbox-body[b-sikxi4wvnp] {
        padding: 0;
    }

    .if-tool-rail[b-sikxi4wvnp] {
        flex-direction: row;
        overflow-x: auto;
    }

    .if-rail-btn[b-sikxi4wvnp] {
        flex: 1 0 4.75rem;
    }

    .if-rail-btn.is-on[b-sikxi4wvnp] {
        box-shadow: inset 0 -3px 0 var(--if-accent);
    }

    .if-canvas[b-sikxi4wvnp] {
        min-height: 16rem;
    }

    /* Stacked, the canvas pane is only as tall as its content, which would leave "fit" fitting
       the image to itself - so the viewport gets a real height of its own to fit into. */
    .if-viewport[b-sikxi4wvnp] {
        flex: none;
        height: 70vh;
    }

    /* The slider is the one zoom control a narrow bar can spare; the buttons still step. */
    .if-zoom-slider[b-sikxi4wvnp] {
        display: none;
    }
}

/* The discard-changes dialog. Its backdrop names a fallback because ::backdrop only inherits
   custom properties in recent browsers - see --if-scrim in app.css. */
.if-dialog[b-sikxi4wvnp] {
    width: min(26rem, calc(100vw - 2rem));
    box-sizing: border-box;
    padding: 1rem 1.125rem;
    border: 1px solid var(--if-border);
    border-radius: 6px;
    background: var(--if-pane);
    color: var(--if-text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.if-dialog[b-sikxi4wvnp]::backdrop {
    background: var(--if-scrim, rgba(4, 7, 10, 0.62));
}

.if-dialog-title[b-sikxi4wvnp] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.if-dialog-body[b-sikxi4wvnp] {
    margin: 0 0 1rem;
    color: var(--if-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.if-dialog-body strong[b-sikxi4wvnp] {
    color: var(--if-text);
    font-weight: 600;
}

.if-dialog-actions[b-sikxi4wvnp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Pages/NotFound.razor.rz.scp.css */
/* Centred in what is left of the shell below the app bar. */
.missing[b-pfe062949b] {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 2rem;
    text-align: center;
}

.missing h1[b-pfe062949b] {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.missing p[b-pfe062949b] {
    margin: 0 0 1rem;
    color: var(--if-muted);
}

.missing a[b-pfe062949b] {
    color: var(--if-accent);
    font-size: 0.875rem;
}