/* The shared crop editor.

   Its own file rather than more of media.css, because three surfaces mount it -- the add page, the
   Replace action and school logo upload -- and a control used in three places should be findable in
   one. */

.media-editor-stage {
    position: relative;
    line-height: 0;
    /* Black, and not decoration. The canvas leaves the corners of a straightened picture
       transparent, so whatever is behind shows through -- and what a stored JPEG will actually have
       there is black, because JPEG has no alpha. A pale stage would show white in the editor and
       save black, which is the editor lying about its own result. */
    background: #000000;
    border-radius: 8px;
    overflow: hidden;
}

.media-editor-stage {
    /* A FIXED BOX, BECAUSE THE PICTURE NOW MOVES INSIDE IT.
       The stage used to be sized by the canvas: the picture set the height and the crop rectangle
       was drawn over it. Now the frame is fixed and the picture is scaled and offset behind it, so
       the stage needs its own height or it would collapse to nothing and resize on every zoom. */
    display: block;
    width: 100%;
    height: min(58vh, 460px);
    overflow: hidden;
}

.media-editor-stage canvas {
    display: block;
    /* Positioned and sized by the script, in pixels, so the crop lands exactly on the frame. */
    max-width: none;
}

/* The crop rectangle. A ring plus a dimmed surround rather than a filled shape: the point of the
   control is seeing the picture underneath it. */
/* The frame drawn as a circle, matching how a headshot is actually shown on a profile. The dimmed
   surround is a huge box-shadow, which follows the border-radius, so the mask stays honest without
   a second element. Only the preview changes -- the exported file is the square the frame bounds. */
.media-editor-crop-round {
    border-radius: 50%;
}

.media-editor-crop {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    outline: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    cursor: move;
    touch-action: none;
}

/* Focus has to be visible: this element is reached by Tab and driven entirely by the keyboard, and
   a focus ring the browser draws inside a 2px white border is invisible over a photograph. */
.media-editor-crop:focus-visible {
    border-color: var(--blue, #2563eb);
    outline: 2px solid var(--blue, #2563eb);
    outline-offset: 2px;
}

/* A crop the server would refuse. Red is not the only signal -- the refusal below says why, in the
   server's own words -- because a colour alone says nothing to anyone who cannot see it. */
.media-editor-crop-invalid {
    border-color: #dc2626;
    outline-color: #dc2626;
}

/* The corner grips. Big enough to hit on a touch screen -- 20px, against the 44px target guidance
   that assumes a finger rather than a pointer on a precision control -- and drawn half outside the
   box so the visible corner is the corner. */
.media-editor-grip {
    position: absolute;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    /* The dimmed surround is painted by the box's own huge shadow, which would otherwise sit over
       these. */
    box-shadow: none;
}

.media-editor-grip-nw { top: -10px; left: -10px; cursor: nwse-resize; }
.media-editor-grip-ne { top: -10px; right: -10px; cursor: nesw-resize; }
.media-editor-grip-sw { bottom: -10px; left: -10px; cursor: nesw-resize; }
.media-editor-grip-se { bottom: -10px; right: -10px; cursor: nwse-resize; }

.media-editor-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 8px;
}

/* The straighten control. A row rather than a stacked label, because the number beside the slider
   is what makes a half-degree nudge legible. */
/* The padding row, shown only when the chosen area is under the kind's minimum. Laid out like the
   Straighten row above it so the panel keeps one shape whether or not it is offering padding. */
.media-editor-pad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* The "Filler" caption beside the colour select. Deliberately not `.media-editor-pad label`, which
   also matched the checkbox's own wrapping label and forced it inline -- that is what pushed its
   text out of line with the box it belongs to. `.fs-check` is a shared control with its own
   layout, and this row has no business overriding it. */
.media-editor-pad > label:not(.fs-check) {
    display: inline;
    margin: 0;
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
}

/* The checkbox and its words stay on one line together, aligned to their middles. */
.media-editor-pad .fs-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
    font-size: 13px;
}

.media-editor-angle {
    display: flex;
    /* Centre, so a one-word caption sits on the same line as the control it names rather than
       riding along its top edge -- which is what "Frame" did beside its dropdown. */
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.media-editor-angle label {
    /* site.css makes every label a bold block; here it is one word beside a control. */
    display: inline;
    margin: 0;
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
}

.media-editor-angle input[type="range"] {
    /* Undoing the global text-field treatment: a range with padding and a border draws its track
       inside a box, which is the same inheritance that made the radios full-width boxes. */
    width: auto;
    flex: 1 1 200px;
    max-width: 260px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.media-editor-angle output {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    /* Fixed width so the slider does not shuffle sideways as the number changes width. */
    min-width: 3.5em;
    color: var(--text-muted, #666);
}

/* The live region. Always present and never hidden, so a screen reader announces each change rather
   than discovering the region appearing. */
.media-editor-readout {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted, #666);
}

.media-editor-refusal {
    margin: 6px 0 0;
    font-size: 13px;
    color: #b91c1c;
}