/**
 * CKit Guest Menu
 *
 * Pill icon button, dropdown panel, sign-in modal, welcome toast.
 * Responsive down to 320px. No em dashes in any content.
 *
 * SOURCE file: production loads the generated core/guest-menu.min.css and
 * SCRIPT_DEBUG loads core/guest-menu.debug.css (see scripts/css-manifest.js).
 * Edit this file, then `npm run build`; never hand-edit the artifacts.
 */

/* --- Isolation reset (ckit#258) ---
   MUST stay the first rule: later same-specificity rules win by source
   order. The contract (roots + declarations) lives in scripts/css-manifest.js;
   the build arms these selectors and verify-css-build checks them exactly.
   Blend-in module: typography and text color re-inherit from the host theme
   after the revert. Three disjoint subtrees need their own root: the menu,
   the sign-in modal (emitted at wp_footer), and the toast (portaled to body
   by guest-menu.js). The :where() svg exclusion is specificity-neutral and
   keeps the revert off inline SVG internals (fill/stroke would go black). */
.hrck-guest-menu:not(#\9):not(#\9),
.hrck-guest-menu:not(#\9):not(#\9)::before,
.hrck-guest-menu:not(#\9):not(#\9)::after,
.hrck-guest-menu:not(#\9):not(#\9) *:where(:not(svg, svg *)),
.hrck-guest-menu:not(#\9):not(#\9) *:where(:not(svg, svg *))::before,
.hrck-guest-menu:not(#\9):not(#\9) *:where(:not(svg, svg *))::after,
.hrck-guest-modal:not(#\9):not(#\9),
.hrck-guest-modal:not(#\9):not(#\9)::before,
.hrck-guest-modal:not(#\9):not(#\9)::after,
.hrck-guest-modal:not(#\9):not(#\9) *:where(:not(svg, svg *)),
.hrck-guest-modal:not(#\9):not(#\9) *:where(:not(svg, svg *))::before,
.hrck-guest-modal:not(#\9):not(#\9) *:where(:not(svg, svg *))::after,
.hrck-guest-toast:not(#\9):not(#\9),
.hrck-guest-toast:not(#\9):not(#\9)::before,
.hrck-guest-toast:not(#\9):not(#\9)::after,
.hrck-guest-toast:not(#\9):not(#\9) *:where(:not(svg, svg *)),
.hrck-guest-toast:not(#\9):not(#\9) *:where(:not(svg, svg *))::before,
.hrck-guest-toast:not(#\9):not(#\9) *:where(:not(svg, svg *))::after {
    all: revert;
    box-sizing: border-box;
    color: inherit;
    font-family: inherit;
}

/* --- Root container --- */
.hrck-guest-menu:not(#\9):not(#\9) {
    position: relative;
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: #0f172a;
}

/* --- Pill icon button --- */
.hrck-guest-menu-button:not(#\9):not(#\9) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.2s, border-color 0.2s;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: 1;
}
.hrck-guest-menu-button:hover:not(#\9):not(#\9),
.hrck-guest-menu-button:focus-visible:not(#\9):not(#\9) {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
    outline: none;
}

.hrck-guest-menu-hamburger:not(#\9):not(#\9) {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}
.hrck-guest-menu-hamburger:not(#\9):not(#\9) span {
    width: 14px;
    height: 1.5px;
    background: #0f172a;
    border-radius: 1px;
}

.hrck-guest-menu-avatar:not(#\9):not(#\9) {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #64748b;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}
.hrck-guest-menu-avatar--signed-in:not(#\9):not(#\9) {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
}

/* The inline icons' look lives in presentation ATTRIBUTES (fill="none",
   stroke="currentColor", width/height), which lose to any author CSS — a
   theme's `svg { fill: currentColor; width: 1em }` would solid-fill and
   resize them. SVG is excluded from the isolation reset by design, so
   defend the attributes with armored declarations, one rule per icon to
   preserve each one's exact stroke weight and box. */
.hrck-guest-menu-avatar:not(#\9):not(#\9) svg,
.hrck-guest-menu-avatar:not(#\9):not(#\9) svg * {
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hrck-guest-menu-avatar:not(#\9):not(#\9) svg {
    width: 16px;
    height: 16px;
}
.hrck-guest-modal-close:not(#\9):not(#\9) svg,
.hrck-guest-modal-close:not(#\9):not(#\9) svg * {
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hrck-guest-modal-close:not(#\9):not(#\9) svg {
    width: 18px;
    height: 18px;
}
.hrck-guest-modal-success-icon:not(#\9):not(#\9) svg,
.hrck-guest-modal-success-icon:not(#\9):not(#\9) svg * {
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hrck-guest-modal-success-icon:not(#\9):not(#\9) svg {
    width: 28px;
    height: 28px;
}

/* --- Dropdown panel --- */
.hrck-guest-menu-dropdown:not(#\9):not(#\9) {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    padding: 6px;
    z-index: 9999;
}
.hrck-guest-menu-dropdown[hidden]:not(#\9):not(#\9) { display: none; }

.hrck-guest-menu-dropdown:not(#\9):not(#\9)::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

/* --- Signed-in account card --- */
.hrck-guest-menu-account:not(#\9):not(#\9) {
    padding: 12px 14px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hrck-guest-menu-account-avatar:not(#\9):not(#\9) {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hrck-guest-menu-account-meta:not(#\9):not(#\9) {
    min-width: 0;
    line-height: 1.3;
}
.hrck-guest-menu-account-name:not(#\9):not(#\9) {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hrck-guest-menu-account-email:not(#\9):not(#\9) {
    font-size: 11px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hrck-guest-menu-sep:not(#\9):not(#\9) {
    height: 1px;
    background: #e2e8f0;
    margin: 6px 10px;
}

/* --- Menu items --- */
.hrck-guest-menu-item:not(#\9):not(#\9) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #0f172a;
    border-radius: 8px;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.hrck-guest-menu-item:hover:not(#\9):not(#\9),
.hrck-guest-menu-item:focus-visible:not(#\9):not(#\9) {
    background: #f1f5f9;
    outline: none;
    color: #0f172a;
}

.hrck-guest-menu-icon:not(#\9):not(#\9) {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-block;
}

/* --- Sign-in modal --- */
.hrck-guest-modal:not(#\9):not(#\9) {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.hrck-guest-modal[hidden]:not(#\9):not(#\9) { display: none; }

.hrck-guest-modal-backdrop:not(#\9):not(#\9) {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    cursor: pointer;
}

.hrck-guest-modal-dialog:not(#\9):not(#\9) {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    padding: 32px 28px 24px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.hrck-guest-modal-close:not(#\9):not(#\9) {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hrck-guest-modal-close:hover:not(#\9):not(#\9) { background: #e2e8f0; color: #0f172a; }

.hrck-guest-modal-headline:not(#\9):not(#\9) {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.hrck-guest-modal-subtitle:not(#\9):not(#\9) {
    margin: 0 0 20px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.hrck-guest-modal-label:not(#\9):not(#\9) {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #334155;
    margin-bottom: 6px;
}
.hrck-guest-modal-input:not(#\9):not(#\9) {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    color: #0f172a;
    font-family: inherit;
    margin-bottom: 12px;
}
.hrck-guest-modal-input:focus:not(#\9):not(#\9) {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}
.hrck-guest-modal-error:not(#\9):not(#\9) {
    font-size: 12px;
    color: #dc2626;
    margin-bottom: 12px;
    line-height: 1.4;
}
.hrck-guest-modal-error[hidden]:not(#\9):not(#\9) { display: none; }

.hrck-guest-modal-consent:not(#\9):not(#\9) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
}
.hrck-guest-modal-consent:not(#\9):not(#\9) input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.hrck-guest-modal-submit:not(#\9):not(#\9) {
    display: block;
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.hrck-guest-modal-submit:disabled:not(#\9):not(#\9) { opacity: 0.6; cursor: not-allowed; }

.hrck-guest-modal-legal:not(#\9):not(#\9) {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    margin: 14px 0 0;
    line-height: 1.5;
}
.hrck-guest-modal-legal:not(#\9):not(#\9) a { color: #64748b; text-decoration: underline; }

/* --- Modal success state --- */
.hrck-guest-modal-state--success:not(#\9):not(#\9) { text-align: center; padding: 12px 0 4px; }
.hrck-guest-modal-state--success[hidden]:not(#\9):not(#\9) { display: none; }

.hrck-guest-modal-success-icon:not(#\9):not(#\9) {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #10b981);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #fff;
}
.hrck-guest-modal-email:not(#\9):not(#\9) {
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 4px;
}
.hrck-guest-modal-helper:not(#\9):not(#\9) {
    margin-top: 12px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

.hrck-guest-modal-success-actions:not(#\9):not(#\9) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}
.hrck-guest-modal-success-actions:not(#\9):not(#\9) button {
    background: none;
    border: none;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    font-family: inherit;
}
.hrck-guest-modal-resend:not(#\9):not(#\9) {
    color: #0ea5e9 !important;
    font-weight: 600;
}
.hrck-guest-modal-resend:disabled:not(#\9):not(#\9) {
    color: #94a3b8 !important;
    cursor: not-allowed;
}

/* --- Welcome toast --- */
.hrck-guest-toast:not(#\9):not(#\9) {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #0f172a;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 100001;
    pointer-events: none;
}
.hrck-guest-toast--visible:not(#\9):not(#\9) {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Stream 2: contextual label shown when sign-in is triggered by a tool */
.hrck-guest-modal-context-label:not(#\9):not(#\9) {
    font-size: 13px;
    color: #717171;
    margin: -4px 0 12px;
    text-align: center;
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .hrck-guest-menu-dropdown:not(#\9):not(#\9) {
        right: 0;
        left: auto;
        min-width: 240px;
    }
    .hrck-guest-modal-dialog:not(#\9):not(#\9) {
        padding: 24px 20px 20px;
    }
}