/* ==========================================================================
   TOOL BLOCK START - aspect-ratio
   Aspect Ratio Calculator - UnitConverterTool.com
   Silo: Image Tools   Accent: #4a90ff   Hover: #3a7fee
   Self-contained. Built to tool-build.md sections 1 and 3.

   This tool takes no file, so the upload area, the trust strip, the cloud
   split button, the cloud URL modal, the progress bar and the file row are
   all deliberately absent. Nothing here is unused.

   The 10 SEO widget styles get appended after the END banner.
   ========================================================================== */

/* ---- 3a. ROOT AND HEADING ---- */
.uct-tool {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: 'DM Sans', sans-serif;
    color: #e5e7eb;
}
.uct-tool_heading { text-align: center; margin-bottom: 28px; }
.uct-tool_heading h1 { font-size: 32px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.uct-tool_description { font-size: 15px; color: #9ca3af; margin: 0; line-height: 1.6; }

/* ---- 3b. LAYOUT ---- */
.uct-tool-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1024px) {
    .uct-tool-layout { grid-template-columns: 1fr; }
}

/* ---- 3e. OPTIONS PANEL, TABS, INPUTS, PRESETS ---- */
.uct-options-panel {
    background: #1a1f2e; border: 1px solid #3a4258; border-radius: 12px;
    overflow: hidden;
}
.uct-options-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; min-height: 44px; cursor: pointer; user-select: none;
}
.uct-options-toggle:focus-visible { outline: 2px solid #4a90ff; outline-offset: -2px; }
.uct-options-toggle-left {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: #e5e7eb;
    flex-wrap: wrap;
}
.uct-options-toggle-arrow { color: #9ca3af; transition: transform .2s ease; }
.uct-options-panel.collapsed .uct-options-toggle-arrow { transform: rotate(-90deg); }

/* Live state badge. Shows the current answer while the panel is closed. */
.uct-options-summary { font-size: 12px; font-weight: 400; color: #9ca3af; }

/* visibility, not just height. Without it the collapsed panel keeps all of its
   controls focusable and in the accessibility tree at zero height, and
   collapsed is the DEFAULT state on mobile. The delay on the collapsed rule
   lets the slide finish before the content is removed; the base rule's 0s
   delay brings it straight back on expand. */
.uct-options-body {
    max-height: 2000px; overflow: hidden;
    padding: 0 18px 18px;
    visibility: visible;
    transition: max-height .25s ease, padding .25s ease, visibility 0s linear 0s;
}
.uct-options-panel.collapsed .uct-options-body {
    max-height: 0; padding-top: 0; padding-bottom: 0;
    visibility: hidden;
    transition: max-height .25s ease, padding .25s ease, visibility 0s linear .25s;
}

.uct-options-section { padding-top: 16px; }
.uct-options-section + .uct-options-section {
    margin-top: 16px; border-top: 1px solid #2a3348;
}
.uct-options-section-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}

/* TABS */
.uct-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.uct-tab {
    flex: 1; min-width: 70px; min-height: 44px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #252d3f; border: 1px solid #3a4258; border-radius: 8px;
    padding: 10px 12px; font-family: inherit; font-size: 13px; font-weight: 600;
    color: #9ca3af; cursor: pointer; transition: all .15s ease;
    text-align: center; white-space: normal;
}
.uct-tab:hover { border-color: #4a90ff; color: #e5e7eb; }
.uct-tab.active { background: #4a90ff; border-color: #4a90ff; color: #fff; }
.uct-tab:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }

/* SUB-PANELS - one per mode tab */
.uct-subpanel { display: none; margin-top: 14px; }
.uct-subpanel.active { display: block; }
.uct-subpanel-title { font-size: 13px; font-weight: 600; color: #e5e7eb; margin-bottom: 10px; }
/* The second title in a panel needs to clear the input row above it. */
.uct-input-row + .uct-subpanel-title { margin-top: 16px; }
/* The Fit to box mode tabs sit under their own input rows. */
.uct-subpanel .uct-tabs { margin-top: 14px; }

/* NUMBER INPUT PAIR */
.uct-input-row { display: flex; align-items: flex-end; gap: 10px; }
.uct-input-row + .uct-input-row { margin-top: 10px; }
.uct-input-group { flex: 1; min-width: 0; }
.uct-input-group label {
    display: block; font-size: 12px; color: #9ca3af; margin-bottom: 5px;
}
.uct-input-group input,
.uct-input-field {
    width: 100%; box-sizing: border-box;
    background: #1e2538; border: 1px solid #3a4258; border-radius: 6px;
    padding: 10px 12px; min-height: 44px;
    font-family: inherit; font-size: 14px; color: #e5e7eb;
}
.uct-input-group input:focus,
.uct-input-field:focus { outline: none; border-color: #4a90ff; }

/* ASPECT LOCK */
.uct-aspect-lock {
    background: #252d3f; border: 1px solid #3a4258; border-radius: 6px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #9ca3af; flex-shrink: 0;
}
.uct-aspect-lock.locked { border-color: #4a90ff; color: #4a90ff; }
.uct-aspect-lock:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }
.uct-aspect-lock .lock-icon { display: none; }
.uct-aspect-lock .unlock-icon { display: block; }
.uct-aspect-lock.locked .lock-icon { display: block; }
.uct-aspect-lock.locked .unlock-icon { display: none; }

/* PRESET CARDS */
#preset-wrap-aspect-ratio { margin-top: 20px; }
.uct-preset-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
}
.uct-preset-card {
    background: #252d3f; border: 1px solid #3a4258; border-radius: 8px;
    padding: 10px; text-align: center; cursor: pointer; transition: all .15s ease;
    min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.uct-preset-card:hover { border-color: #4a90ff; }
.uct-preset-card.selected { background: #1e2538; border-color: #4a90ff; }
.uct-preset-card:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }
.uct-preset-name { font-size: 13px; font-weight: 600; color: #e5e7eb; }
/* The dims line names what each ratio is for, so it is text a user must read.
   tool-build.md 1a: #6b7280 is decoration only and fails WCAG AA on #0A0F1C. */
.uct-preset-dims { font-size: 11px; color: #9ca3af; margin-top: 2px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   3e-ratio. RATIO PREVIEW  (four new classes, reported in the handoff)
   A live rectangle drawn at the current aspect ratio. The JS measures the
   stage with getBoundingClientRect and sets --uct-rw / --uct-rh in PIXELS.
   Do NOT use the CSS aspect-ratio property here: with max-width clamping it
   silently breaks the ratio on extreme values (21:9 on a 375px phone).
   Deterministic pixel values from JS are the only reliable way.
   -------------------------------------------------------------------------- */
.uct-ratio-preview {
    display: flex; align-items: center; justify-content: center;
    background: #1a1f2e; border: 1px solid #3a4258; border-radius: 12px;
    padding: 18px; margin-top: 16px; min-height: 240px; overflow: hidden;
}
.uct-ratio-box {
    position: relative;
    width: var(--uct-rw, 320px); height: var(--uct-rh, 180px);
    background: rgba(74, 144, 255, .10);
    border: 2px solid #4a90ff; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: width .18s ease, height .18s ease;
}
/* The target box in Fit mode, or the crop region in Fill mode.
   top / left / transform centre it deterministically: the static position of
   an absolutely positioned flex child is not centred by every engine. */
.uct-ratio-box-inner {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: var(--uct-riw, 0px); height: var(--uct-rih, 0px);
    border: 2px dashed #9ca3af; border-radius: 4px;
    background: rgba(0, 0, 0, .28);
    pointer-events: none;
}
/* position and z-index keep the label above the absolutely positioned inner
   box. Without them the inner box paints over the text. */
.uct-ratio-box-label {
    position: relative; z-index: 1;
    font-size: 13px; font-weight: 600; color: #e5e7eb;
    text-align: center; line-height: 1.5; padding: 0 8px;
}

/* ---- 3f. ACTIONS ---- */
.uct-action-btn-primary {
    width: 100%; margin-top: 14px; min-height: 52px;
    background: #1a2542; color: #fff;
    border: 1px solid #4a90ff; border-radius: 10px;
    font-family: inherit; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: background .15s ease;
}
.uct-action-btn-primary:hover:not(:disabled) { background: #222f52; }
.uct-action-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.uct-controls-area {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0;
}
.uct-secondary-btn {
    background: transparent; color: #9ca3af;
    border: 1px solid #3a4258; border-radius: 8px;
    padding: 12px 22px; min-height: 44px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.uct-secondary-btn:hover { border-color: #4a90ff; color: #e5e7eb; }
.uct-secondary-btn:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }

/* The two lower buttons pair an SVG with a text label. Scoped to this one
   toolbar so the shared button component is unchanged. */
#controls-area-aspect-ratio .uct-secondary-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
#controls-area-aspect-ratio .uct-secondary-btn svg { flex-shrink: 0; }

/* STICKY PRIMARY ACTION ON MOBILE.
   Only sticky once the user has edited a field, so a pristine page load does
   not float a button over nothing. The JS adds .uct-has-input to the root. */
@media (max-width: 768px) {
    .uct-tool.uct-has-input .uct-action-btn-primary {
        position: fixed; left: 16px; right: 16px; bottom: 16px;
        width: auto; z-index: 40; box-shadow: 0 6px 20px rgba(0,0,0,.5);
    }
    .uct-tool.uct-has-input .uct-results,
    .uct-tool.uct-has-input .uct-privacy-note { padding-bottom: 80px; }
}

/* ---- 3g. RESULTS ---- */
.uct-result-card {
    background: rgba(74, 144, 255, .10);
    border-left: 3px solid #4a90ff; border-radius: 10px;
    padding: 22px; margin-bottom: 16px;
}
.uct-result-label { font-size: 13px; color: #9ca3af; margin-bottom: 6px; }
.uct-result-value { font-size: 34px; font-weight: 700; color: #fff; line-height: 1.2; word-break: break-word; }
.uct-result-sub { font-size: 13px; color: #9ca3af; margin-top: 8px; line-height: 1.6; }

.uct-result-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.uct-result-tile {
    background: #1a1f2e; border: 1px solid #3a4258; border-radius: 10px; padding: 16px;
}
.uct-result-tile-label { font-size: 12px; color: #9ca3af; }
.uct-result-tile-value { font-size: 20px; font-weight: 700; color: #e5e7eb; margin-top: 4px; word-break: break-word; }

/* Honest size line under the result card in Resize by ratio mode. */
.uct-size-compare { font-size: 12px; margin-top: 4px; margin-bottom: 16px; line-height: 1.6; }
.uct-size-decreased { color: #4ade80; }
.uct-size-increased { color: #fbbf24; }
.uct-size-same { color: #9ca3af; }

/* CODE OUTPUT */
.uct-output-block {
    position: relative;
    background: #1e2538; border: 1px solid #3a4258; border-radius: 10px;
    padding: 16px; padding-right: 100px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 13px; line-height: 1.65; color: #e5e7eb;
    white-space: pre-wrap; word-break: break-word;
    margin-top: 16px;
}
.uct-copy-btn {
    position: absolute; top: 12px; right: 12px;
    background: #4a90ff; color: #fff; border: none; border-radius: 6px;
    padding: 8px 14px; min-height: 36px;
    font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.uct-copy-btn:hover:not(:disabled) { background: #3a7fee; }
.uct-copy-btn:disabled { opacity: .5; cursor: not-allowed; }
.uct-copy-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* DATA TABLE. Not used by the tool itself. Widget 05 on this page is a ratio
   reference table rather than a comparison slider, and there is no shared
   stylesheet, so the table component ships here or it renders unstyled. */
.uct-table-wrap { overflow-x: auto; }
.uct-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.uct-table th {
    text-align: left; padding: 10px 12px;
    background: #252d3f; color: #9ca3af;
    font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em;
}
.uct-table td { padding: 10px 12px; border-top: 1px solid #2a3348; color: #e5e7eb; }
.uct-table tr:hover td { background: #1e2538; }

/* ---- 3h. MESSAGES, NOTES, UTILITY ---- */
.uct-error-msg {
    background: rgba(192,57,43,.12); border: 1px solid #c0392b; border-radius: 8px;
    padding: 12px 16px; margin-bottom: 10px; font-size: 13px; color: #e5e7eb;
}

.uct-helper-text { font-size: 13px; color: #9ca3af; margin: 10px 0 0; line-height: 1.6; }

.uct-output-note, .uct-privacy-note {
    font-size: 12px; color: #9ca3af; text-align: center;
    line-height: 1.6; margin: 14px 0 0;
}
.uct-hidden { display: none !important; }

.uct-tool a:not(.uct-download-link):not(.uct-action-btn) { color: #4a90ff; }

/* ---- 3i. MOBILE ---- */
@media (max-width: 768px) {
    .uct-tool { padding: 0 16px; overflow-x: hidden; }
    .uct-tool_heading h1 { font-size: 24px; }
    .uct-result-value { font-size: 28px; }
    .uct-preset-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    #controls-area-aspect-ratio .uct-secondary-btn { padding: 12px 14px; font-size: 13px; }
}
@media (max-width: 480px) {
    .uct-tool_heading h1 { font-size: 21px; }
    .uct-tabs { flex-direction: column; }
    .uct-tab { width: 100%; }
    .uct-input-row { flex-wrap: wrap; }
    .uct-ratio-preview { min-height: 200px; padding: 14px; }
    .uct-ratio-box-label { font-size: 12px; }
    .uct-result-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .uct-output-block { padding-right: 16px; padding-top: 52px; }
    .uct-copy-btn { top: 10px; right: 10px; }
}

/* ==========================================================================
   TOOL BLOCK END - aspect-ratio
   ========================================================================== */