/* ==========================================================================
   JHomeAutomation blog — engagement layer (Like button + comment thread)
   Loaded after blog.css, which owns every token used below:
   --primary, --primary-dark, --card, --surface, --surface-2, --text,
   --text-muted, --border, --rule, --danger, --success, --ease-out.
   No new palette is introduced here.

   Sizing note: blog.css sets html { font-size: 110% }, so 1rem = 17.6px.
     prose floor  16px  -> 0.91rem  (we mostly run 1rem = 17.6px)
     fine print   14px  -> 0.8rem   = 14.08px, never lower on a prose selector
     uppercase micro-labels are exempt by the house rule but are kept at
     0.8rem here anyway so nothing in this file drops below 14px.

   Every interactive control below is >= 44px tall at 375px.
   Class-based only: the JS sets no inline styles.
   ========================================================================== */

/* ==========================================================================
   Action row — like + comment jump
   ========================================================================== */

.eng-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.eng-like-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    /* 44px floor comes from min-height, not from padding maths. */
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    max-width: 100%;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;            /* 15.8px — uppercase control label */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 50px;
    cursor: pointer;
    transition:
        color 0.25s var(--ease-out),
        border-color 0.25s var(--ease-out),
        background 0.25s var(--ease-out),
        transform 0.25s var(--ease-out);
}

.eng-like-btn:hover {
    color: var(--primary);
    border-color: rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.08);
    transform: translateY(-2px);
}

.eng-like-btn:active { transform: translateY(0); }

.eng-like-btn.liked {
    color: var(--primary);
    border-color: rgba(0, 212, 255, 0.5);
    background: rgba(0, 212, 255, 0.14);
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.18);
}

.eng-like-btn.liked:hover { background: rgba(0, 212, 255, 0.2); }

/* The heart glyph the button carries, whether an <i> or a <span>. */
.eng-like-btn i,
.eng-like-btn .eng-like-icon {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.25s var(--ease-out);
}

.eng-like-btn.liked i,
.eng-like-btn.liked .eng-like-icon { transform: scale(1.12); }

.eng-like-count {
    display: inline-block;
    min-width: 1.4em;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    color: inherit;
}

/* ==========================================================================
   Comment thread
   ========================================================================== */

.eng-comments {
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--rule);
    /* Nothing inside may push the page sideways at 375px. */
    max-width: 100%;
    overflow-wrap: anywhere;
}

.eng-comments h2,
.eng-comments h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 1.1rem;
}

.eng-comment {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--rule);
    max-width: 100%;
}

.eng-comment:last-of-type { border-bottom: 0; }

.eng-comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.7rem;
    margin-bottom: 0.45rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;            /* 14.08px — fine-print floor, not below */
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.eng-comment-body {
    /* Prose: 17.6px at the site's 110% root, well over the 16px floor. */
    font-size: 1rem;
    line-height: 1.65;
    color: #cdd6e2;
    margin: 0;
    max-width: 40rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* --- Awaiting-review state --------------------------------------------- */

.eng-comment.pending {
    padding: 1.1rem;
    margin: 0.75rem 0;
    border: 1px dashed rgba(0, 212, 255, 0.4);
    border-left: 3px solid var(--primary);
    border-radius: 0 12px 12px 0;
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.07), rgba(0, 212, 255, 0.02));
}

.eng-comment.pending .eng-comment-meta { color: var(--primary); }

/* "Awaiting review" reads as a label ahead of the byline. */
.eng-comment.pending .eng-comment-meta::before {
    content: 'Awaiting review';
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;            /* 14.08px */
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: 4px;
    background: rgba(0, 212, 255, 0.12);
    color: var(--primary);
}

.eng-comment.pending .eng-comment-body { color: var(--text); }

/* --- Moderation controls ------------------------------------------------ */

.eng-mod-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.eng-mod-approve,
.eng-mod-reject {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 1.15rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;           /* uppercase control label */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    transition:
        color 0.2s var(--ease-out),
        border-color 0.2s var(--ease-out),
        background 0.2s var(--ease-out);
}

.eng-mod-approve {
    color: var(--success);
    border: 1px solid rgba(0, 255, 136, 0.4);
    background: rgba(0, 255, 136, 0.08);
}

.eng-mod-approve:hover {
    border-color: var(--success);
    background: rgba(0, 255, 136, 0.16);
}

.eng-mod-reject {
    color: var(--danger);
    border: 1px solid rgba(255, 51, 102, 0.45);
    background: rgba(255, 51, 102, 0.08);
}

.eng-mod-reject:hover {
    border-color: var(--danger);
    background: rgba(255, 51, 102, 0.16);
}

/* ==========================================================================
   Composer
   ========================================================================== */

.eng-composer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: clamp(1rem, 2.5vw, 1.4rem);
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--surface);
    max-width: 100%;
}

.eng-composer textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    /* Well past the 44px control floor, and tall enough to write in. */
    min-height: 6.5rem;
    padding: 0.8rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;              /* 17.6px — also stops iOS zoom-on-focus */
    line-height: 1.6;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 10px;
    resize: vertical;
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.eng-composer textarea::placeholder { color: var(--text-muted); opacity: 1; }

.eng-composer textarea:hover { border-color: rgba(0, 212, 255, 0.3); }

.eng-composer textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
}

/* ---------------------------------------------------------------------------
   Buttons. These were previously classless and inherited the browser default
   (grey chrome, Arial, black text) on a dark page, because the stylesheet only
   guaranteed their 44px touch floor and assumed a class that the engine never
   applied. Appearance now lives here, keyed off real classes.
   --------------------------------------------------------------------------- */
.eng-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--text);
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.eng-btn:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); }

.eng-btn-primary {
    border-color: rgba(0, 212, 255, 0.45);
    background: rgba(0, 212, 255, 0.12);
    color: var(--primary);
}
.eng-btn-primary:hover { background: rgba(0, 212, 255, 0.22); color: #fff; }

/* Quiet actions (Close, Forgot, Resend) read as text, not as a second CTA. */
.eng-btn-quiet {
    border-color: transparent;
    background: none;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    padding-inline: 0.5rem;
}
.eng-btn-quiet:hover { background: none; border-color: transparent; color: var(--primary); text-decoration: underline; }

.eng-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) { .eng-btn { transition: none !important; } }

/* Any button inside the composer (post/cancel) keeps the touch floor. */
.eng-composer button {
    min-height: 44px;
    cursor: pointer;
}

/* Prose note under the composer ("Thanks, your comment will appear once
   it's approved"). Prefixed with .eng-composer as well so a bare `.eng-note`
   cannot lose to `.article p` — the same cascade trap blog.css hit on
   .table-note (equal class count, but `.article p` adds a type selector). */
.article .eng-note,
.eng-composer .eng-note,
.eng-note {
    font-size: 0.91rem;           /* 16.0px — prose floor exactly */
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 40rem;
}

.eng-note.success { color: var(--success); }
.eng-note.error { color: var(--danger); }

/* ==========================================================================
   Auth modal — sign in / create account, shown when an action needs a session
   ========================================================================== */

.eng-modal {
    position: fixed;
    inset: 0;
    /* Above the mobile bottom nav (1060) and its drawer (1080) in blog.css. */
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(5, 8, 15, 0.78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: opacity 0.25s var(--ease-out), visibility 0.25s var(--ease-out);
}

.eng-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.eng-modal-panel {
    /* min() keeps the panel inside a 375px viewport with the 1rem padding. */
    width: min(30rem, 100%);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(1.35rem, 4vw, 2rem);
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    transform: translateY(14px) scale(0.985);
    transition: transform 0.28s var(--ease-out);
}

.eng-modal.open .eng-modal-panel { transform: none; }

.eng-modal-panel h2,
.eng-modal-panel h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 1.1rem;
}

/* Close control, if the panel carries one. */
.eng-modal-panel button {
    min-height: 44px;
    cursor: pointer;
}

/* --- Tabs (Sign in / Create account) ------------------------------------ */

.eng-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
}

.eng-tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 0.6rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 10px;
    cursor: pointer;
    transition:
        color 0.2s var(--ease-out),
        border-color 0.2s var(--ease-out),
        background 0.2s var(--ease-out);
}

.eng-tab:hover { color: var(--primary); border-color: rgba(0, 212, 255, 0.35); }

.eng-tab.active {
    color: var(--primary);
    border-color: rgba(0, 212, 255, 0.45);
    background: rgba(0, 212, 255, 0.12);
}

/* --- Fields -------------------------------------------------------------- */

.eng-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
    max-width: 100%;
}

.eng-field label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;            /* 14.08px — uppercase micro-label floor */
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text-muted);
}

.eng-field input,
.eng-field select,
.eng-field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;              /* 17.6px, and no iOS focus zoom */
    line-height: 1.5;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 10px;
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.eng-field input::placeholder,
.eng-field textarea::placeholder { color: var(--text-muted); opacity: 1; }

.eng-field input:focus,
.eng-field select:focus,
.eng-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
}

/* --- Blog-updates consent row -------------------------------------------- */

/* The JS emits the row as
     <label class="eng-note" for="eng-auth-updates">
       <input type="checkbox" id="eng-auth-updates"> <span>…</span>
     </label>
   — an .eng-note, not an .eng-field row, because `.eng-field input` above is
   100%-wide and 44px tall (right for a text box, absurd for a tick box).
   Selector is prefixed with .eng-modal-panel for two reasons: it beats the
   `.article .eng-note` (0,2,0) prose rule earlier in this file on specificity
   rather than on source order, and it keeps every <p class="eng-note"> note
   elsewhere on the page untouched. */
.eng-modal-panel label.eng-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    /* The whole row is the hit area, and it holds the touch floor at 375px
       even when the label happens to fit on one line. */
    min-height: 44px;
    padding: 0.25rem 0;
    margin: 0 0 1rem;
    max-width: 100%;
    /* Consent prose is read before it is agreed to, so it takes the full body
       colour rather than the muted note colour .eng-note sets. */
    color: var(--text);
    cursor: pointer;
}

/* The span carries the wrapping text; min-width:0 lets it shrink inside the
   flex row so long copy wraps under itself, never under the tick box. */
.eng-modal-panel label.eng-note > span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.91rem;           /* 16.0px — prose floor exactly */
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* Second selector is a guard: if a later slice ever moves this row into an
   .eng-field, the 100% width / 44px height above must not reach the tick box.
   Both sit after that rule, so source order backs the specificity up. */
.eng-modal-panel .eng-field input[type="checkbox"],
.eng-modal-panel label.eng-note input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    min-height: 0;
    /* (25.6px first line - 20px box) / 2 — optically centred on line one. */
    margin: 0.16rem 0 0;
    padding: 0;
    /* appearance:none so the UNCHECKED box is ours too. accent-color alone
       only tints the checked state, which left a browser-white box sitting on
       a dark panel. The tick is drawn in :checked::after below. */
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

.eng-modal-panel .eng-field input[type="checkbox"]:hover,
.eng-modal-panel label.eng-note input[type="checkbox"]:hover {
    border-color: var(--primary);
}

.eng-modal-panel .eng-field input[type="checkbox"]:checked,
.eng-modal-panel label.eng-note input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}

/* The tick: a rotated open corner, so it needs no font, glyph or SVG asset. */
.eng-modal-panel .eng-field input[type="checkbox"]:checked::after,
.eng-modal-panel label.eng-note input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--darker);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .eng-modal-panel .eng-field input[type="checkbox"],
    .eng-modal-panel label.eng-note input[type="checkbox"] { transition: none !important; }
}

.eng-modal-panel .eng-field input[type="checkbox"]:focus-visible,
.eng-modal-panel label.eng-note input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Inline status line --------------------------------------------------- */

/* Prose, so it holds the 16px floor. Prefixed like .eng-note above so the
   `.article p` type-selector tiebreak cannot shrink it. */
.article .eng-error,
.eng-modal .eng-error,
.eng-error {
    font-size: 0.91rem;           /* 16.0px — prose floor exactly */
    line-height: 1.6;
    color: var(--danger);
    margin: 0 0 1rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.article .eng-error.success,
.eng-modal .eng-error.success,
.eng-error.success { color: var(--success); }

.eng-error:empty { display: none; }

/* ==========================================================================
   Focus — one visible ring, on every control this file adds
   ========================================================================== */

.eng-like-btn:focus-visible,
.eng-mod-approve:focus-visible,
.eng-mod-reject:focus-visible,
.eng-tab:focus-visible,
.eng-composer textarea:focus-visible,
.eng-composer button:focus-visible,
.eng-modal-panel button:focus-visible,
.eng-modal-panel a:focus-visible,
.eng-field input:focus-visible,
.eng-field select:focus-visible,
.eng-field textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 8px;
}

/* The focus trap parks focus on the panel itself before the first control;
   it must be visible there too. */
.eng-modal-panel:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ==========================================================================
   Mobile — clear the bottom nav, and fit inside 375px
   ========================================================================== */

@media (max-width: 1024px) {
    /* The nav bar in blog.css occupies the bottom 66px plus the safe area.
       The modal is full-viewport, so its padding — not its position — is what
       keeps the panel clear of the bar. */
    .eng-modal {
        align-items: flex-start;
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px) + 1rem);
        padding-top: 1.5rem;
    }

    .eng-modal-panel {
        max-height: calc(100dvh - 66px - env(safe-area-inset-bottom, 0px) - 2.5rem);
    }
}

@media (max-width: 480px) {
    .eng-actions { gap: 0.6rem; }

    /* Full-width so the row can never exceed the column at 375px. */
    .eng-like-btn { flex: 1 1 100%; }

    .eng-mod-actions > .eng-mod-approve,
    .eng-mod-actions > .eng-mod-reject { flex: 1 1 8rem; }

    .eng-comment.pending { padding: 0.9rem; }
}

/* ==========================================================================
   Reduced motion — every transition added above is neutralised
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .eng-like-btn,
    .eng-like-btn i,
    .eng-like-btn .eng-like-icon,
    .eng-mod-approve,
    .eng-mod-reject,
    .eng-composer textarea,
    .eng-modal,
    .eng-modal-panel,
    .eng-tab,
    .eng-field input,
    .eng-field select,
    .eng-field textarea {
        transition: none !important;
    }

    /* No hover/liked movement either — the state still reads from colour. */
    .eng-like-btn:hover { transform: none; }
    .eng-like-btn.liked i,
    .eng-like-btn.liked .eng-like-icon { transform: none; }
    .eng-modal-panel { transform: none; }
}