/* =========================================================================
   LazyBlog — share-quote
   Bôi text trong .post-body → popup → modal canvas → tải PNG.
   Route-scoped: layout.php chỉ nạp sheet này trên /posts/*, nên các
   route khác không trả phí cho rule không dùng.
   Mọi class mang tiền tố `.sq-` để không đụng `.cmdk-*` của palette.js.
   ========================================================================= */

/* ---------- Selection popup ----------
   `position: absolute` với toạ độ tài liệu (không `fixed`), nên popup trôi
   theo đoạn text khi trang cuộn. z-index 1090 nằm ngay dưới thanh
   .read-progress (1100) và dưới command palette (1200) — popup không bao
   giờ che hai thứ đó.
   Chỉ lo vị trí + nền đục. Diện mạo (viền, màu, font mono, letter-spacing,
   hover glow) thừa hưởng từ class dùng chung `.header-btn` trong base.css,
   đúng như nút "[ FAX THIS ]" của plugin fax — nhờ vậy hai nút nổi trên bài
   viết trông giống nhau và cùng đổi da theo theme. */
.sq-popup {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1090;
    transform: translateX(-50%);
    /* Nền đục giữ nút đọc được khi nó đè lên chữ trong bài. */
    background: var(--bg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}
/* `display` above stays at the UA default, but the popup also carries
   `transform` + positioning — restate [hidden] explicitly for the same
   reason .cmdk-overlay does, so a future `display:` addition can't
   silently leave it on screen. */
.sq-popup[hidden] { display: none; }
/* `.header-btn:hover` đổi `background` sang glow trong suốt; ghi đè lại
   bằng nền đục để chữ dưới nút không lộ ra khi rê chuột. */
.sq-popup:hover { background: var(--panel); }
.sq-popup:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Modal ----------
   Khung mượn từ .cmdk-overlay (effects.css) để hai overlay của site hành xử
   giống nhau. Khác: z-index 1150 — trên .read-progress (1100) nhưng dưới
   command palette (1200), nên Ctrl+K vẫn mở palette đè lên modal. */
.sq-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    z-index: 1150;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}
/* `display: flex` above would silently override the UA's [hidden] rule,
   leaving the overlay visible after close — restate it explicitly, same as
   .cmdk-overlay does. */
.sq-overlay[hidden] { display: none; }

.sq-panel {
    width: 100%;
    /* Bề rộng do hàng control ở chân modal quyết định, không phải canvas:
       hai swatch + ba nút tỉ lệ + hai nút hành động phải nằm trọn một dòng
       kể cả khi bài có ảnh nền để chọn. Đo tại 640px còn dư ~30px. */
    max-width: 640px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 14px 16px 16px;
    background: var(--panel);
    border: 1px solid var(--accent);
    border-radius: 3px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 0 24px var(--primary-glow-strong);
    font-family: 'Share Tech Mono', monospace;
}

.sq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.sq-head-label {
    color: var(--primary);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}
.sq-close {
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 8px 4px;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.sq-close:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.sq-canvas-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
/* Canvas backing store là 1080×H (× dpr); CSS co preview cho vừa modal mà
   không đụng tới độ phân giải file xuất ra. */
.sq-canvas {
    display: block;
    max-width: 100%;
    max-height: 52vh;
    object-fit: contain;
    border: 1px solid var(--border);
}

/* Chân modal là một hàng: control trái, hành động phải. `gap` lo khoảng
   cách tối thiểu, `margin-left: auto` trên .sq-actions đẩy phần còn lại
   sang mép phải mà không cần phần tử spacer rỗng. */
.sq-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    --sq-ctl-h: 30px;
}
/* Mọi control trong hàng chia chung một khuôn: cùng chiều cao, cùng font,
   cùng bo góc. Chiều cao đến từ `height` chứ không từ padding dọc — padding
   khác nhau giữa nút ratio và nút hành động chính là thứ làm hàng trông so
   le. Các rule bên dưới chỉ còn lo màu và hình dạng riêng. */
.sq-toolbar button {
    height: var(--sq-ctl-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.sq-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sq-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Vạch phân cách giữa nhóm nền và nhóm tỉ lệ — thay cho nhãn chữ, giữ hai
   nhóm đọc ra là hai nhóm mà gần như không tốn bề ngang. */
.sq-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
}

/* Swatch dùng đúng khuôn chữ nhật của nút ratio — một hàng control mà nửa
   trái tròn nửa phải vuông thì đọc ra như hai hệ thống ghép lại. Chỉ ghi đè
   những gì thực sự riêng: bề ngang cố định (nút này không có nhãn chữ để tự
   giãn) và cách ảnh nền lấp đầy ô. */
.sq-toolbar .sq-swatch {
    width: 46px;
    padding: 0;
    background-color: var(--bg);
    background-size: cover;
    background-position: center;
}
.sq-swatch[hidden] { display: none; }
.sq-swatch:hover { border-color: var(--primary); }
/* Trạng thái chọn: viền + dấu tick, không chỉ màu — cùng thông tin đó cũng
   nằm trong aria-pressed cho screen reader. */
.sq-swatch.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
    position: relative;
}
.sq-swatch.is-active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 0.75rem;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

.sq-ratio { color: var(--text-dim); }
.sq-ratio:hover { border-color: var(--primary); color: var(--primary); }
.sq-ratio.is-active {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
}

/* `margin-left: auto` giữ hai nút bám mép phải bất kể nhóm control bên
   trái rộng bao nhiêu (swatch ảnh có thể vắng mặt). */
.sq-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.sq-actions button {
    color: var(--primary);
}
.sq-actions button:hover { border-color: var(--primary); }
/* Download là hành động chính của modal — nút đặc, hai nút còn lại viền. */
.sq-actions .sq-download {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg);
}

.sq-panel :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .sq-close,
    .sq-swatch,
    .sq-ratio,
    .sq-actions button { transition: none; }
}

/* Trạng thái flash sau khi bấm — nút tự khoá ~1.6s để không bấm chồng. */
.sq-actions button:disabled {
    opacity: 0.65;
    cursor: default;
}