/*
 * Profile photo — the cropper modal the add-a-photo nudge opens. The nudge
 * itself wears the shared .global-notice strip (components/notice-strip.css).
 *
 * The cropper is a modal body, named for the workers domain because that is
 * whose face it sets. Every value that has a token comes from one — color,
 * type, spacing, radius, shadow, motion — so the feature moves when the
 * platform's scale moves. What is left as a literal is geometry with no scale
 * behind it (the 320px crop stage, the 32px pencil disc, hairline borders),
 * called out where it appears. Raw hex, radius, shadow, and font-weight are
 * additionally gated by ADR-125.
 */

/* The crop stage's cap. No scale token stands behind it — it is a component
   dimension like the 104px hero face, not a step on the spacing ladder — and
   `width: 100%` shrinks the stage under it inside a narrow modal. Declared
   once here and read by both the stage and the zoom row beneath it, so the two
   cannot drift apart and leave the slider wider than the picture. */
.workers-photo-cropper {
    --workers-photo-stage-width: 320px;
}

.workers-photo-cropper__stage {
    position: relative;
    width: 100%;
    max-width: var(--workers-photo-stage-width);
    margin: 0 auto;
}

.workers-photo-cropper__canvas {
    display: block;
    width: 100%;
    height: auto;
    /* Pan and pinch belong to the crop, not to the page scrolling underneath. */
    touch-action: none;
    cursor: grab;
    background-color: var(--color-surface-subtle);
    border-radius: var(--radius-md);
}

.workers-photo-cropper__canvas:active {
    cursor: grabbing;
}

.workers-photo-cropper__zoom {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    max-width: var(--workers-photo-stage-width);
    margin: var(--spacing-smd) auto 0;
    color: var(--color-text-secondary);
}

/* Bootstrap 5.3 bakes #0d6efd straight into the range thumb's pseudo-element
   with no --bs-* hook to aim at, so the stock blue is the only way it ships and
   restating the two vendor selectors is the only way to move it. It follows the
   same action token the checked checkbox and radio already use in main.css. */
.workers-photo-cropper__zoom .form-range::-webkit-slider-thumb {
    background-color: var(--color-action);
}

.workers-photo-cropper__zoom .form-range::-moz-range-thumb {
    background-color: var(--color-action);
}

.workers-photo-cropper__zoom .form-range::-webkit-slider-thumb:active {
    background-color: var(--color-action-hover);
}

.workers-photo-cropper__zoom .form-range::-moz-range-thumb:active {
    background-color: var(--color-action-hover);
}

.workers-photo-cropper__hint {
    margin-top: var(--spacing-sm);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* The way back to the picker. .btn-link inherits the action ink through
   --bs-link-color (main.css aims Bootstrap's link tokens at --color-action),
   so this is no longer un-blueing it — it is muting it. Recolored through the
   button's custom properties rather than a `color:` override so the hover and
   active states move with it: this is a way out of the crop, not a second
   Save, and it should not read as loud as the link beside it. */
.workers-photo-cropper__reset {
    --bs-btn-color: var(--color-text-secondary);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-active-color: var(--color-text);
}

.workers-photo-cropper__error {
    margin-top: var(--spacing-smd);
    text-align: center;
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

/* Only offered where a camera is the obvious source. On a desktop the capture
   attribute is ignored and the button would just be a second file dialog. */
.workers-photo-cropper__camera {
    display: none;
}

@media (pointer: coarse) {
    .workers-photo-cropper__camera {
        display: inline-flex;
        align-items: center;
        /* Flex drops the whitespace text node between the icon and the label,
           so the gap has to be declared or they run together. */
        gap: var(--spacing-xs);
    }
}

/* Hero face on the profile page. The row it sits in (.workers-hero-body) is a
   flex row, so the face and its control have to be one child. */
.workers-photo-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Positioning context for the edit badge. Shrink-wraps the circle, so the
   badge's corner is the CIRCLE's corner and not the column's. */
.workers-photo-hero__frame {
    position: relative;
    display: inline-flex;
}

/* The way back to the cropper once the nudge banner is gone: a pencil disc on
   the face's bottom-right corner, the way every app that lets you change a
   photo puts it there. Resting state is invisible — a profile that is already
   set up should show a face, not a control — and it comes up on hovering the
   FRAME, not the badge, so the whole 104px circle is the hover target rather
   than a 32px dot someone has to find. */
.workers-photo-hero__edit {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-card-bg);
    /* --color-text-secondary (#64748b) is 4.76:1 on the white card; the muted
       grey one step down is 2.57:1 and would fail the glyph's 3:1 floor. */
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    /* Above the status dot that shares this corner, so the revealed
       affordance covers the mark instead of wearing it. */
    z-index: var(--z-raised);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--transition-fast), transform var(--transition-fast),
                color var(--transition-fast), border-color var(--transition-fast);
}

/* :focus-within, not :focus — a keyboard tabbing onto a control it cannot see
   is the classic way a hover-revealed affordance becomes unreachable. */
.workers-photo-hero__frame:hover .workers-photo-hero__edit,
.workers-photo-hero__frame:focus-within .workers-photo-hero__edit {
    opacity: 1;
    transform: none;
}

.workers-photo-hero__edit:hover,
.workers-photo-hero__edit:focus-visible {
    border-color: var(--color-action);
    color: var(--color-action);
}

/* A touch screen has no hover, so the badge would never appear and the profile
   page would lose its only door to the cropper. There it just stays up. */
@media (hover: none) {
    .workers-photo-hero__edit {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workers-photo-hero__edit {
        transition: none;
    }
}

/* No face yet: the whole circle IS the add control. Dashed and unfilled so it
   reads as a slot waiting to be filled rather than a photo that failed to
   load, and sized/clipped by .global-avatar--xl like every other hero face.
   The hover treatment is an ink-tinted RING, not a solid background — a solid
   fill would put ink on ink and vanish the glyph. */
.workers-photo-hero__add {
    padding: 0;
    border: 1.5px dashed var(--color-text-secondary);
    background-color: var(--color-surface-subtle);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.workers-photo-hero__add:hover,
.workers-photo-hero__add:focus-visible {
    border-color: var(--color-action);
    color: var(--color-action);
    box-shadow: var(--shadow-avatar-ring);
}

@media (prefers-reduced-motion: reduce) {
    .workers-photo-hero__add {
        transition: none;
    }
}