/* ============================================================================
   Little Rascal — File Synchroniser  (/demo/sync/)
   Page creation: 20/10/2026 13:40
   Page modified: 20/10/2026 16:25 — info alert, sticky scrollable table head

   Class-scoped (.sync*, .sync-*) so it is safe to load from the global CSS
   manifest. Every colour is a token, so dark default and [data-theme="light"]
   both resolve. 8px grid, 4px radius ceiling, motion for state only.
============================================================================ */

.sync { padding: var(--space-4xl) 0; }
.sync__wrap { max-width: 1040px; }

/* --- Opener ------------------------------------------------------------ */
.sync__opener {
    max-width: 720px;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--surface-border);
}
.sync__eyebrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--space-md);
}
.sync__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-md);
    color: var(--text);
}
.sync__lede {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 64ch;
    margin: 0;
}

/* --- Alert ------------------------------------------------------------- */
.sync__alert {
    margin-bottom: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--surface-border);
    border-left: 2px solid #C0532B;
    border-radius: var(--r-card);
    background: rgba(192, 83, 43, 0.08);
}
.sync__alert--info {
    border-left-color: var(--color-accent);
    background: var(--surface);
}
.sync__alert-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    margin: 0 0 var(--space-2xs);
}
.sync__alert-list {
    margin: 0;
    padding-left: var(--space-lg);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* --- Upload grid ------------------------------------------------------- */
.sync__drops {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
@media (min-width: 620px) {
    .sync__drops { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}

.sync-drop {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sync-drop__zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 148px;
    padding: var(--space-lg);
    text-align: center;
    border: 1px dashed var(--surface-border);
    border-radius: var(--r-card);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.sync-drop__zone:hover,
.sync-drop__input:focus-visible + .sync-drop__zone,   /* not used; focus handled below */
.sync-drop.is-dragover .sync-drop__zone {
    border-color: var(--color-accent);
    background: var(--surface-hover);
}
.sync-drop.is-filled .sync-drop__zone {
    border-style: solid;
    border-color: var(--color-accent);
}
/* Focus ring driven from the hidden input (A11Y keyboard focus). */
.sync-drop__input:focus-visible ~ .sync-drop__zone { outline: none; }
.sync-drop:focus-within .sync-drop__zone {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1.5px var(--color-accent);
}

.sync-drop__badge {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--surface-border);
    border-radius: 3px;
    padding: 1px 5px;
}
.sync-drop__icon {
    width: 28px;
    height: 28px;
    color: var(--color-accent);
}
.sync-drop__prompt {
    font-size: 14px;
    color: var(--text-muted);
}
.sync-drop__strong {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text);
}
.sync-drop__name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--color-accent);
    word-break: break-all;
    max-width: 100%;
}
/* The native input stays in the DOM (progressive enhancement) but is visually
   folded into the label so the whole zone is the click target. */
.sync-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.sync-drop__offset {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.sync-drop__offset label {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Shared field styling --------------------------------------------- */
.sync-field {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-md);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    transition: border-color var(--transition), box-shadow var(--transition);
}
select.sync-field {
    padding-right: var(--space-xl);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 13px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.sync-field:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1.5px var(--color-accent);
}

/* --- Options ----------------------------------------------------------- */
.sync__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin: 0;
    padding: var(--space-lg);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    background: var(--band-tint);
}
@media (min-width: 720px) {
    .sync__options {
        grid-template-columns: repeat(3, 1fr);
        align-items: end;
    }
    .sync__submit { grid-column: 1 / -1; }
}
.sync__options-legend {
    grid-column: 1 / -1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0;
    margin-bottom: var(--space-2xs);
}
.sync__option { display: flex; flex-direction: column; gap: var(--space-2xs); }
.sync__option label {
    font-size: 13px;
    color: var(--text-muted);
}
.sync__option.is-hidden { display: none; }
.sync__submit { display: flex; }

/* --- Result ------------------------------------------------------------ */
.sync__result {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--surface-border);
}
.sync__result-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 var(--space-2xs);
}
.sync__result-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 var(--space-xl);
    font-variant-numeric: tabular-nums;
}

.sync__sources {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
@media (min-width: 620px) {
    .sync__sources { grid-template-columns: 1fr 1fr; }
}
.sync-source {
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    background: var(--surface);
}
.sync-source__name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--color-accent);
    margin: 0 0 var(--space-sm);
    word-break: break-all;
}
.sync-source__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 4px;
    column-gap: var(--space-md);
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}
.sync-source__meta > div { display: contents; }
.sync-source__meta dt {
    color: var(--text-muted);
    margin: 0;
}
.sync-source__meta dd {
    color: var(--text);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.sync__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.sync__actions-note {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- Distance + auto-align options (in the form) ---------------------- */
.sync__option--distance,
.sync__option--auto {
    gap: var(--space-sm);
}
@media (min-width: 720px) {
    .sync__option--distance,
    .sync__option--auto { grid-column: 1 / -1; }
}
.sync__option-legend-inline {
    font-size: 13px;
    color: var(--text-muted);
}
.sync__dist-row,
.sync__dist-unit {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.sync__dist-row label[for] {
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}
.sync__dist-unit-label {
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.sync__preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}
.sync__preview-head .sync__preview-label { margin-bottom: 0; }
.sync__pager-size {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.sync__pager-size label {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}
.sync__pager-size .sync-field { width: auto; min-height: 36px; }

.sync__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin: var(--space-md) 0 var(--space-xl);
}
.sync__pager .btn { min-height: 40px; }
.sync__pager .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.sync__pager-status {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 12ch;
    text-align: center;
}

.sync__preview-label,
.sync__raw-label {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}
.sync__table-scroll {
    overflow: auto;                 /* own scroll region: header stays, rows scroll beneath */
    max-height: 70vh;
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    margin-bottom: var(--space-xl);
}
.sync__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sync__table th,
.sync__table td {
    padding: var(--space-xs) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--surface-border);
}
.sync__table th {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-alt);      /* opaque so data scrolls cleanly beneath */
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: inset 0 -1px 0 var(--surface-border);
}
.sync__table tbody tr:last-child td { border-bottom: 0; }
.sync__table tbody tr:hover td { background: var(--surface-hover); }

.sync__raw {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    padding: var(--space-md);
    resize: vertical;
}

@media (prefers-reduced-motion: reduce) {
    .sync-drop__zone,
    .sync-field { transition: none; }
}