/*
 * Card centering tool (/tools/centering).
 *
 * --guide-* are deliberately fixed rather than themed: they sit on the user's
 * own photo, not on the page surface, so they have to stay legible in both
 * themes and against any card art.
 *
 * --gap-* are the opposite case — despite living in the same block they are
 * never drawn on the photo, only used as ink for the readout text on the
 * results panel. They therefore DO have to follow the theme: the bright pair
 * below is right on the dark panel (10.84:1 / 6.91:1) and unreadable on the
 * white light-theme one (1.77:1 / 2.78:1). Light theme overrides them.
 */
.ctr-page {
    --guide-outer: #3ddcff;
    --guide-inner: #ffc84d;
    --gap-wide: #ff6b6b;
    --gap-narrow: #3ddc97;
    --gap-even: #ffffff;
}

html[data-theme="light"] .ctr-page {
    --gap-wide: #c62828;   /* 5.62:1 on the panel, 4.70:1 on --bg-muted */
    --gap-narrow: #0e8055; /* 4.96:1 on the panel */
}

.ctr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-8);
    align-items: start;
}

/* —— Drop zone —— */
.ctr-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    background: var(--bg-surface);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg);
    transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.ctr-drop.is-over {
    border-color: var(--accent-bright);
    background: rgba(124, 106, 255, 0.08);
}
.ctr-drop__icon { font-size: 2.4rem; color: var(--text-muted); }
.ctr-drop__title { font-size: var(--step-2); font-weight: 700; margin: 0; }
.ctr-drop__hint { color: var(--text-secondary); max-width: 42ch; margin: 0; }
.ctr-drop__btn { margin-top: var(--space-2); cursor: pointer; }
.ctr-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ctr-drop__privacy {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: var(--space-2) 0 0;
    font-size: var(--step--1);
    color: var(--text-muted);
}

/* —— Stage —— */
.ctr-stage-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

.ctr-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.ctr-stage.is-dragging { cursor: grabbing; }
.ctr-stage__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 72vh;
}

/* —— Border gap bands —— */
.ctr-gaps { position: absolute; inset: 0; pointer-events: none; }
.ctr-gap {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.ctr-gap.is-wide   { background: rgba(255, 107, 107, 0.34); }
.ctr-gap.is-narrow { background: rgba(61, 220, 151, 0.28); }
.ctr-gap.is-even   { background: rgba(255, 255, 255, 0.18); }
.ctr-gap__val {
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

/* —— Guide frames —— */
.ctr-frame {
    position: absolute;
    box-sizing: border-box;
    cursor: move;
}
.ctr-frame--outer { border: 2px solid var(--guide-outer); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }
.ctr-frame--inner { border: 2px dashed var(--guide-inner); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }

.ctr-frame__tag {
    position: absolute;
    top: -1.55rem;
    left: -2px;
    padding: .1rem .4rem;
    border-radius: 5px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #06080d;
    white-space: nowrap;
    pointer-events: none;
}
.ctr-frame--outer .ctr-frame__tag { background: var(--guide-outer); }
.ctr-frame--inner .ctr-frame__tag { top: auto; bottom: -1.55rem; background: var(--guide-inner); }

/* —— Handles —— */
.ctr-h {
    position: absolute;
    padding: 0;
    border: 2px solid #06080d;
    border-radius: 3px;
    background: var(--guide-outer);
    touch-action: none;
    cursor: pointer;
}
.ctr-frame--inner .ctr-h { background: var(--guide-inner); border-radius: 50%; }
.ctr-h:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Corners: 14px squares centred on the corner. */
.ctr-h--nw, .ctr-h--ne, .ctr-h--se, .ctr-h--sw { width: 14px; height: 14px; }
.ctr-h--nw { top: -8px; left: -8px;  cursor: nwse-resize; }
.ctr-h--ne { top: -8px; right: -8px; cursor: nesw-resize; }
.ctr-h--se { bottom: -8px; right: -8px; cursor: nwse-resize; }
.ctr-h--sw { bottom: -8px; left: -8px;  cursor: nesw-resize; }

/* Edges: pills centred on the middle of each side. */
.ctr-h--n, .ctr-h--s { width: 30px; height: 10px; left: 50%; margin-left: -15px; cursor: ns-resize; }
.ctr-h--e, .ctr-h--w { width: 10px; height: 30px; top: 50%; margin-top: -15px;  cursor: ew-resize; }
.ctr-h--n { top: -6px; }
.ctr-h--s { bottom: -6px; }
.ctr-h--w { left: -6px; }
.ctr-h--e { right: -6px; }

/* —— Stage toolbar —— */
.ctr-stage-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.ctr-stage-bar__file { cursor: pointer; }
.ctr-stage-bar__hint {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
    font-size: var(--step--1);
    color: var(--text-muted);
}

/* —— Results panel —— */
.ctr-panel {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.ctr-face {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 3px;
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.ctr-face__btn {
    padding: .45rem .5rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.ctr-face__btn.is-active { background: var(--accent); color: #fff; }

.ctr-readout { display: flex; flex-direction: column; gap: var(--space-4); }
.ctr-axis__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .35rem; }
.ctr-axis__title { font-size: var(--step--1); color: var(--text-secondary); font-weight: 600; }
.ctr-axis__ratio {
    font-size: var(--step-2);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--gap-narrow);
}
.ctr-axis.is-off .ctr-axis__ratio { color: var(--gap-wide); }

.ctr-bar {
    position: relative;
    display: flex;
    height: 30px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-muted);
}
.ctr-bar__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 700;
    color: #06080d;
    overflow: hidden;
    white-space: nowrap;
    transition: flex-basis .12s linear;
}
.ctr-bar__seg--a { background: linear-gradient(135deg, var(--accent-bright), var(--accent)); color: #fff; }
.ctr-bar__seg--b { background: linear-gradient(135deg, var(--guide-outer), #2ba8c4); }
.ctr-bar__mid {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.ctr-worst {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--step--1);
    color: var(--text-secondary);
}
.ctr-worst strong {
    font-size: var(--step-1);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.ctr-worst__note { display: block; color: var(--text-muted); margin-top: .15rem; }

/* —— Grade ceilings —— */
.ctr-grades { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
.ctr-grades__title { margin: 0; font-size: var(--step-1); }
.ctr-grades__sub { margin: .15rem 0 var(--space-3); font-size: var(--step--1); color: var(--text-muted); }
.ctr-grades__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ctr-grade {
    display: grid;
    grid-template-columns: 3.2rem auto 1fr;
    align-items: baseline;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    border: 1px solid transparent;
}
.ctr-grade.is-top { border-color: var(--border-accent); background: rgba(124, 106, 255, 0.12); }
/* De-emphasis is carried by the smaller value and the --gap-wide ink; a
   blanket opacity on top of already-muted tokens only cost legibility. */
.ctr-grade__co { font-weight: 700; font-size: var(--step--1); color: var(--text-secondary); }
.ctr-grade__val { font-weight: 800; font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.ctr-grade.is-out .ctr-grade__val { font-size: var(--step--1); color: var(--gap-wide); }
.ctr-grade__tol { font-size: .72rem; color: var(--text-muted); text-align: right; }
.ctr-grades__note { margin: var(--space-3) 0 0; font-size: .72rem; line-height: 1.5; color: var(--text-muted); }

/* —— How to —— */
.ctr-how {
    margin-top: var(--space-10);
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}
.ctr-how h2 { margin: 0 0 var(--space-3); font-size: var(--step-2); }
.ctr-how ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .6rem; color: var(--text-secondary); }
.ctr-how strong { color: var(--text-primary); }

/* —— Light theme —— */
html[data-theme="light"] .ctr-gap__val { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
html[data-theme="light"] .ctr-bar__seg--b { color: #06202a; }
html[data-theme="light"] .ctr-face__btn.is-active { color: #fff; }
html[data-theme="light"] .ctr-grade.is-top { background: rgba(124, 106, 255, 0.1); }

/* —— Narrow —— */
@media (max-width: 1023.98px) {
    .ctr-layout { grid-template-columns: minmax(0, 1fr); }
    .ctr-panel { position: static; }
}
@media (max-width: 700.98px) {
    .ctr-stage__img { max-height: 58vh; }
    .ctr-frame__tag { display: none; }
    .ctr-h--n, .ctr-h--s { width: 38px; margin-left: -19px; }
    .ctr-h--e, .ctr-h--w { height: 38px; margin-top: -19px; }
}

/* ============================================================
   Magnifier, straighten slider, zoom picker
   ============================================================ */

/* A band thinner than its own label just spills text over the card art. */
.ctr-gap.is-tight .ctr-gap__val { display: none; }

.ctr-loupe {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    width: 146px;
}
.ctr-loupe[data-corner="nw"] { top: 10px;    left: 10px; }
.ctr-loupe[data-corner="ne"] { top: 10px;    right: 10px; }
.ctr-loupe[data-corner="sw"] { bottom: 10px; left: 10px; }
.ctr-loupe[data-corner="se"] { bottom: 10px; right: 10px; }

.ctr-loupe__view {
    position: relative;
    width: 146px;
    height: 146px;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
    background: #05070b;
}
.ctr-loupe__img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: 0 0;
}
.ctr-loupe__frame {
    position: absolute;
    box-sizing: border-box;
}
.ctr-loupe__frame--outer { border: 1px solid var(--guide-outer); }
.ctr-loupe__frame--inner { border: 1px dashed var(--guide-inner); }

/*
 * Reticle, not a full crosshair. The guide line you are aligning runs straight
 * through the centre of the lens, so lines drawn across the whole lens would
 * compete with the very thing they mark. Short ticks with a clear gap leave the
 * centre — and the guide in it — completely unobscured.
 */
.ctr-loupe__cross { position: absolute; inset: 0; }
.ctr-loupe__cross::before,
.ctr-loupe__cross::after {
    content: '';
    position: absolute;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65);
}
.ctr-loupe__cross::before {
    left: 50%;
    top: 50%;
    width: 1px;
    height: 34px;
    margin: -17px 0 0 -.5px;
    /* punch a 12px hole through the middle */
    -webkit-mask-image: linear-gradient(#000 0 34%, transparent 34% 66%, #000 66% 100%);
    mask-image: linear-gradient(#000 0 34%, transparent 34% 66%, #000 66% 100%);
}
.ctr-loupe__cross::after {
    top: 50%;
    left: 50%;
    height: 1px;
    width: 34px;
    margin: -.5px 0 0 -17px;
    -webkit-mask-image: linear-gradient(90deg, #000 0 34%, transparent 34% 66%, #000 66% 100%);
    mask-image: linear-gradient(90deg, #000 0 34%, transparent 34% 66%, #000 66% 100%);
}

.ctr-loupe__tag {
    display: block;
    margin-top: 5px;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* —— Controls row —— */
.ctr-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) var(--space-6);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.ctr-control { display: flex; align-items: center; gap: var(--space-3); }
.ctr-control--straighten { flex: 1 1 260px; min-width: 0; }
.ctr-control__label {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.ctr-control__val {
    min-width: 3.4rem;
    font-size: var(--step--1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-primary);
}
.ctr-control__reset {
    padding: .2rem .5rem;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: .72rem;
    cursor: pointer;
}
.ctr-control__reset:hover { color: var(--text-primary); border-color: var(--border-accent); }

.ctr-slider {
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: ew-resize;
}
.ctr-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--border-default), var(--accent-dim), var(--border-default));
}
.ctr-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--border-default), var(--accent-dim), var(--border-default));
}
.ctr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--accent);
    box-shadow: var(--shadow-sm);
}
.ctr-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--accent);
}
.ctr-slider:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; }

.ctr-zoom {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.ctr-zoom__btn {
    padding: .28rem .55rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.ctr-zoom__btn:hover { color: var(--text-primary); }
.ctr-zoom__btn.is-active { background: var(--accent); color: #fff; }

html[data-theme="light"] .ctr-zoom__btn.is-active { color: #fff; }
html[data-theme="light"] .ctr-loupe__view { border-color: rgba(255, 255, 255, 0.95); }

@media (max-width: 700.98px) {
    .ctr-loupe,
    .ctr-loupe__view { width: 124px; }
    .ctr-loupe__view { height: 124px; }
    .ctr-controls { gap: var(--space-3); }
    .ctr-control--straighten { flex-basis: 100%; }
    .ctr-control--zoom { width: 100%; justify-content: center; }
}