/* ==========================================================
   HELLO READER

   Site-wide personal author note component.

   Supports:

       ITEMHELLO:
           title-level personal note

       INLINEHELLO:
           personal note placed at a specific point in the text

   The popup uses the active TomBeaverBooks theme accent for
   its border so it automatically follows theme changes.
   ========================================================== */


/* ==========================================================
   ROOT
   ========================================================== */

.helloReader {
    position: relative;

    display: flex;
    justify-content: center;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* ==========================================================
   INLINE HELLO

   INLINEHELLO replaces its authoring paragraph with a
   centered icon occupying a paragraph-like line of its own.
   ========================================================== */

.helloReader--inline {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin:
            1.35em
            0;

    padding: 0;

    text-align: center;
}


/* ==========================================================
   TRIGGER
   ========================================================== */

.helloReader__trigger {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 4.2rem;
    height: 4.2rem;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: rgb(74 69 63);

    cursor: pointer;

    transition:
            color 140ms ease,
            transform 140ms ease,
            background-color 140ms ease;
}


.helloReader__trigger:hover {
    color: rgb(35 32 29);

    background:
            rgb(0 0 0 / 4%);

    transform:
            translateY(-1px);
}


.helloReader__trigger:focus-visible {
    outline:
            2px solid currentColor;

    outline-offset:
            3px;
}


/* ==========================================================
   INLINE TRIGGER
   ========================================================== */

.helloReader__trigger--inline {
    flex:
            0
            0
            auto;
}


/* ==========================================================
   PERSON ICON
   ========================================================== */

.helloReader__person {
    display: block;

    width: 3.2rem;
    height: 3.2rem;

    overflow: visible;
}


.helloReader__person circle {
    fill: none;

    stroke: currentColor;
    stroke-width: 2.7;

    vector-effect:
            non-scaling-stroke;
}


.helloReader__person path {
    fill: none;

    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect:
            non-scaling-stroke;
}


/* ==========================================================
   MODAL SHELL
   ========================================================== */

.helloReader__modal {
    position: fixed;
    inset: 0;

    z-index: 10000;

    pointer-events: none;
}


.helloReader__modal[hidden] {
    display: none !important;
}


/* ==========================================================
   BACKDROP
   ========================================================== */

.helloReader__backdrop {
    display: none;
}


/* ==========================================================
   DIALOG

   The border follows the active theme through
   --tb-accent-dark.

   If that variable is ever unavailable, the original yellow
   remains as a safe fallback.
   ========================================================== */

.helloReader__dialog {
    position: fixed;

    box-sizing: border-box;

    left: 50% !important;
    top: 50% !important;

    width: 600px;
    height: auto;

    min-height: 30px;
    max-height: 800px;

    max-width:
            calc(100vw - 48px);

    margin: 0;

    padding: 4rem;

    overflow: visible;

    border:
            8px solid
            var(
                    --tb-accent-dark,
                    #f1c933
            );

    border-radius:
            2.4rem;

    background:
            #f2f2f0;

    box-shadow:
            0 18px 50px rgb(0 0 0 / 20%);

    color:
            #292724;

    pointer-events: auto;

    opacity: 0;

    transform:
            translate(-50%, -50%)
            scale(0.08);

    transform-origin:
            50% 50%;

    transition:
            transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
            opacity 150ms ease,
            border-color 180ms ease;
}


/* ==========================================================
   OPEN STATE
   ========================================================== */

.helloReader__modal[data-hello-reader-open-state="true"]
.helloReader__dialog {
    opacity: 1;

    transform:
            translate(-50%, -50%)
            scale(1);
}


/* ==========================================================
   CLOSE BUTTON
   ========================================================== */

.helloReader__close {
    appearance: none;

    position: absolute;

    top: 1.25rem;
    right: 1.35rem;

    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color:
            rgb(75 72 67);

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 2.6rem;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    opacity: 0.68;

    transition:
            opacity 120ms ease,
            color 120ms ease,
            transform 120ms ease;
}


.helloReader__close:hover {
    color:
            rgb(20 18 16);

    opacity: 1;

    transform:
            scale(1.06);
}


.helloReader__close:focus-visible {
    outline:
            2px solid currentColor;

    outline-offset:
            2px;
}


/* ==========================================================
   TITLE
   ========================================================== */

.helloReader__title {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}


/* ==========================================================
   PERSONAL NOTE
   ========================================================== */

.helloReader__note {
    margin: 0;
    padding: 0;

    color:
            #292724;

    font-family:
            "Iowan Old Style",
            "Palatino Linotype",
            Palatino,
            Georgia,
            serif;

    font-size: 18.4px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;

    text-align: left;
}


/* ==========================================================
   PERSONAL NOTE PARAGRAPHS
   ========================================================== */

.helloReader__note p {
    margin:
            0
            0
            0.9em;

    padding: 0;

    text-align: left;
    text-align-last: auto;

    text-indent: 0;

    hyphens: none;
    -webkit-hyphens: none;
}


.helloReader__note p + p {
    text-indent:
            1.5em;
}


.helloReader__note p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   SMALL SCREENS
   ========================================================== */

@media (max-width: 700px) {

    .helloReader--inline {
        margin:
                1.15em
                0;
    }


    .helloReader__dialog {
        width:
                calc(100vw - 32px);

        max-width:
                calc(100vw - 32px);

        max-height:
                calc(100vh - 32px);

        padding:
                3.2rem
                2.6rem;

        border-width:
                6px;

        border-radius:
                1.8rem;
    }


    .helloReader__note {
        font-size: 16px;
    }


    .helloReader__close {
        top: 0.8rem;
        right: 0.9rem;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .helloReader__dialog {
        transition:
                opacity 120ms ease,
                border-color 180ms ease;

        transform:
                translate(-50%, -50%);
    }


    .helloReader__modal[data-hello-reader-open-state="true"]
    .helloReader__dialog {
        transform:
                translate(-50%, -50%);
    }

}