/* ==========================================================================
   Tarot (template-tarot.php, template-parts/tarot/*)

   Loaded after nhanso-ngay-tot.css, whose hero, columns, sections and FAQ
   these pages share. Here: the violet night of the hero, the cards (a cream
   face, the numeral, an emblem coloured by the card's element, the name),
   the table to shuffle and pick on, and the reading.
   ========================================================================== */
.nhanso-tr-page {
    --tr-violet: #2a1b4a;
    --tr-violet-2: #120c24;
    --tr-gold: #c9a24a;
    --tr-gold-light: #ecd6a0;
    --tr-cream: #f8f3e6;
    --tr-fire: #b5452b;
    --tr-water: #2c5d8f;
    --tr-air: #9a7410;
    --tr-earth: #3d7a48;
}

.nhanso-tr-hero {
    background:
        radial-gradient(circle at 86% 22%, rgba(236, 214, 160, .2), transparent 30%),
        radial-gradient(1px 1px at 18% 34%, rgba(255, 255, 255, .7), transparent 60%),
        radial-gradient(1px 1px at 64% 72%, rgba(255, 255, 255, .6), transparent 60%),
        radial-gradient(1.5px 1.5px at 38% 82%, rgba(255, 255, 255, .5), transparent 60%),
        linear-gradient(160deg, var(--tr-violet) 0%, var(--tr-violet-2) 100%);
}

.nhanso-tr-wide {
    max-width: 1040px;
}

/* --------------------------------------------------------------- the card */
.nhanso-tr-face {
    --w: 112px;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: var(--w);
    aspect-ratio: 7 / 12;
    padding: calc(var(--w) * .08) calc(var(--w) * .06);
    color: var(--tr-violet);
    background: radial-gradient(circle at 50% 45%, #fffdf7 0, var(--tr-cream) 70%);
    border-radius: calc(var(--w) * .08);
    box-shadow: inset 0 0 0 calc(var(--w) * .035) var(--tr-cream), inset 0 0 0 calc(var(--w) * .05) var(--tr-gold), 0 6px 18px rgba(18, 12, 36, .18);
    transition: transform .25s ease;
}

.nhanso-tr-face.is-fire { --tr-ink: var(--tr-fire); }
.nhanso-tr-face.is-water { --tr-ink: var(--tr-water); }
.nhanso-tr-face.is-air { --tr-ink: var(--tr-air); }
.nhanso-tr-face.is-earth { --tr-ink: var(--tr-earth); }

.nhanso-tr-face.is-reversed {
    transform: rotate(180deg);
}

.nhanso-tr-face svg {
    width: 88%;
    height: auto;
    color: var(--tr-ink, var(--tr-violet));
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nhanso-tr-face__halo {
    fill: currentColor;
    stroke: none;
    opacity: .09;
}

.nhanso-tr-face__num {
    font-family: Georgia, "Times New Roman", serif;
    font-size: calc(var(--w) * .13);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
}

.nhanso-tr-face__name {
    max-width: 100%;
    font-size: calc(var(--w) * .095);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* The 1909 scan, where there is one: the picture is the face. */
.nhanso-tr-face.has-scan {
    padding: 0;
    overflow: hidden;
    background: var(--tr-cream);
    box-shadow: 0 0 0 1px rgba(42, 27, 74, .12), 0 6px 18px rgba(18, 12, 36, .18);
}

.nhanso-tr-face.has-scan img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nhanso-tr-face.is-large {
    --w: 168px;
}

.nhanso-tr-face.is-mini {
    --w: 46px;
    flex: none;
}

.nhanso-tr-face.is-mini .nhanso-tr-face__name {
    display: none;
}

/* --------------------------------------------------------------- the grid */
.nhanso-tr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 18px 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.nhanso-tr-grid a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    color: var(--nt-ink);
    text-decoration: none;
}

.nhanso-tr-grid .nhanso-tr-face {
    --w: 100px;
}

.nhanso-tr-grid a:hover .nhanso-tr-face,
.nhanso-tr-grid a:focus-visible .nhanso-tr-face {
    transform: translateY(-4px);
}

.nhanso-tr-grid small {
    font-size: 12px;
    color: var(--nt-muted);
}

.nhanso-tr-grid.is-small {
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 12px 8px;
}

.nhanso-tr-grid.is-small .nhanso-tr-face {
    --w: 60px;
}

.nhanso-tr-grid .is-current .nhanso-tr-face {
    box-shadow: inset 0 0 0 3px var(--tr-cream), inset 0 0 0 4px var(--tr-gold), 0 0 0 3px var(--tr-gold);
}

/* -------------------------------------------------------- the spread tiles */
.nhanso-tr-spreads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-tr-spreads a {
    display: flex;
    gap: 12px;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    color: var(--nt-ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 10px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.nhanso-tr-spreads a:hover,
.nhanso-tr-spreads a:focus-visible {
    border-color: var(--tr-gold);
    box-shadow: 0 4px 14px rgba(42, 27, 74, .1);
}

.nhanso-tr-spreads i {
    display: grid;
    flex: none;
    width: 42px;
    height: 42px;
    place-items: center;
    font-size: 19px;
    color: var(--tr-gold-light);
    background: var(--tr-violet);
    border-radius: 50%;
}

.nhanso-tr-spreads span {
    display: grid;
    gap: 2px;
}

.nhanso-tr-spreads small {
    font-size: 13px;
    line-height: 1.45;
    color: var(--nt-muted);
}

.nhanso-tr-spreads.is-compact i {
    width: 34px;
    height: 34px;
    font-size: 15px;
}

/* ------------------------------------------------------------- card page */
.nhanso-tr-card {
    display: flex;
    gap: 24px;
    align-items: center;
}

.nhanso-tr-card .nhanso-nt-today__date small {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nt-muted);
}

.nhanso-tr-yn {
    display: inline-block;
    padding: 1px 10px;
    font-style: normal;
    font-weight: 800;
    border-radius: 999px;
}

.nhanso-tr-yn.is-good { color: var(--nt-g3); background: var(--nt-g3-bg); }
.nhanso-tr-yn.is-mid { color: var(--nt-g1); background: var(--nt-g1-bg); }
.nhanso-tr-yn.is-bad { color: var(--nt-bad); background: #fbe4e2; }

.nhanso-tr-keys {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
}

.nhanso-tr-keys p {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.nhanso-tr-keys b {
    min-width: 52px;
    font-size: 13px;
    color: var(--nt-muted);
}

.nhanso-tr-keys span {
    padding: 3px 10px;
    font-size: 13px;
    color: var(--tr-violet);
    background: #efe9f8;
    border-radius: 999px;
}

.nhanso-tr-keys .is-rev span {
    color: #5b4a2a;
    background: #f4ecdc;
}

.nhanso-tr-cta {
    margin: 32px 0 0;
    padding: 20px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 12px;
}

.nhanso-tr-cta p {
    margin: 0 0 12px;
}

.nhanso-tr-cta .nhanso-nt-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
}

.nhanso-tr-cta__alt {
    display: inline-block;
    margin-left: 12px;
    font-weight: 700;
}

.nhanso-tr-pager {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 24px 0 0;
}

.nhanso-tr-pager a {
    display: flex;
    flex: 1 1 0;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    color: var(--nt-ink);
    font-weight: 700;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 10px;
}

.nhanso-tr-pager a.is-next {
    justify-content: flex-end;
    text-align: right;
}

.nhanso-tr-pager small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--nt-muted);
}

.nhanso-tr-more {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    font-weight: 700;
}

/* --------------------------------------------------------------- the table */
.nhanso-tr-table {
    margin: 24px 0 0;
    padding: 20px;
    color: #ece7f6;
    background:
        radial-gradient(circle at 50% 0, rgba(236, 214, 160, .14), transparent 55%),
        linear-gradient(165deg, var(--tr-violet), var(--tr-violet-2));
    border-radius: 14px;
}

.nhanso-tr-q {
    display: grid;
    gap: 6px;
    margin: 0;
    font-weight: 700;
}

.nhanso-tr-q small {
    font-weight: 500;
    color: #bfb4d6;
}

.nhanso-tr-q textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--nt-ink);
    background: #fff;
    border: 0;
    border-radius: 8px;
    resize: vertical;
}

.nhanso-tr-slots,
.nhanso-tr-spread {
    display: grid;
    grid-template-columns: repeat(var(--count, 3), minmax(0, 132px));
    gap: 14px;
    justify-content: center;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.nhanso-tr-slots li,
.nhanso-tr-spread li {
    display: grid;
    gap: 4px;
    justify-items: center;
    align-content: start;
}

.nhanso-tr-slots b {
    font-size: 14px;
    color: #fff;
}

.nhanso-tr-slots small {
    font-size: 12px;
    line-height: 1.35;
    color: #bfb4d6;
}

.nhanso-tr-slot {
    display: grid;
    width: 100%;
    max-width: 92px;
    aspect-ratio: 7 / 12;
    place-items: center;
    color: rgba(236, 214, 160, .6);
    font-weight: 800;
    border: 2px dashed rgba(236, 214, 160, .45);
    border-radius: 9px;
}

.nhanso-tr-slot.is-filled,
.nhanso-tr-back {
    background:
        radial-gradient(circle at 50% 50%, var(--tr-gold) 0 9%, transparent 10%),
        repeating-linear-gradient(45deg, rgba(236, 214, 160, .32) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(-45deg, rgba(236, 214, 160, .32) 0 2px, transparent 2px 9px),
        #3a2766;
    border: 2px solid var(--tr-gold);
}

.nhanso-tr-slot.is-filled span {
    visibility: hidden;
}

.nhanso-tr-slot.is-filled {
    animation: nhanso-tr-land .35s ease;
}

.nhanso-tr-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    justify-content: center;
    margin: 20px 0 0;
}

.nhanso-tr-table .nhanso-nt-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--tr-violet-2);
    background: var(--tr-gold-light);
}

.nhanso-tr-toggle {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    font-size: 14px;
    cursor: pointer;
}

.nhanso-tr-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--tr-gold);
}

.nhanso-tr-step {
    margin: 12px 0 0;
    font-size: 14px;
    text-align: center;
    color: #d8cfea;
}

.nhanso-tr-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--nt-ink);
    background: var(--tr-gold-light);
    border-radius: 8px;
}

.nhanso-tr-fan {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px 0 0;
    padding: 6px 0 0 18px;
}

.nhanso-tr-fan[hidden] {
    display: none;
}

.nhanso-tr-back {
    flex: none;
    width: 54px;
    aspect-ratio: 7 / 12;
    margin: 0 0 10px -18px;
    padding: 0;
    border-radius: 7px;
    box-shadow: -2px 2px 6px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: transform .18s ease, opacity .25s ease;
}

/* The whole deck: narrower cards, deeper overlap, so 78 fit in a few rows. */
.nhanso-tr-fan.is-full {
    padding-left: 30px;
}

.nhanso-tr-fan.is-full .nhanso-tr-back {
    width: 46px;
    margin-left: -30px;
    border-width: 1.5px;
    /* Each back's pattern shifted, and a darker edge, so the cards read one by one. */
    background-position: 0 0, calc(var(--i) * 3px) 0, calc(var(--i) * -3px) 0, 0 0;
    box-shadow: -3px 0 6px rgba(0, 0, 0, .55);
}

.nhanso-tr-fan.is-full.is-dealt .nhanso-tr-back {
    animation-delay: calc(var(--i) * 8ms);
}

.nhanso-tr-fan.is-dealt .nhanso-tr-back {
    animation: nhanso-tr-deal .4s ease both;
    animation-delay: calc(var(--i) * 22ms);
}

.nhanso-tr-back:hover,
.nhanso-tr-back:focus-visible {
    transform: translateY(-10px);
    outline: none;
}

.nhanso-tr-back:focus-visible {
    box-shadow: 0 0 0 3px #fff;
}

.nhanso-tr-back.is-picked {
    opacity: 0;
    transform: translateY(-16px);
    cursor: default;
}

.nhanso-tr-fan.is-done .nhanso-tr-back:not(.is-picked) {
    opacity: .35;
    cursor: default;
}

.nhanso-tr-table .nhanso-tr-reveal {
    display: flex;
    margin: 16px auto 0;
}

.nhanso-tr-table .nhanso-tr-reveal[hidden] {
    display: none;
}

@keyframes nhanso-tr-deal {
    from { opacity: 0; transform: translateY(-24px) rotate(-6deg); }
    to { opacity: 1; transform: none; }
}

@keyframes nhanso-tr-land {
    from { transform: scale(.85); }
    to { transform: none; }
}

/* ------------------------------------------------------------- the reading */
.nhanso-tr-asked {
    margin: 24px 0 0;
    padding: 12px 14px;
    background: #fff;
    border-left: 4px solid var(--tr-gold);
    border-radius: 0 8px 8px 0;
}

.nhanso-tr-spread {
    margin-top: 28px;
}

.nhanso-tr-spread a {
    display: block;
    perspective: 600px;
    animation: nhanso-tr-flip .6s ease both;
    animation-delay: calc(var(--i) * 180ms);
}

.nhanso-tr-spread .nhanso-tr-face {
    --w: 120px;
}

.nhanso-tr-spread b {
    margin-top: 6px;
    color: var(--nt-ink);
}

.nhanso-tr-spread small {
    font-size: 13px;
    color: var(--nt-muted);
}

@keyframes nhanso-tr-flip {
    from { opacity: 0; transform: rotateY(90deg); }
    to { opacity: 1; transform: none; }
}

.nhanso-tr-summary {
    margin: 28px 0 0;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-top: 4px solid var(--tr-gold);
    border-radius: 12px;
}

.nhanso-tr-summary p:last-child {
    margin-bottom: 0;
}

.nhanso-tr-summary__story {
    font-size: 17px;
    font-weight: 700;
    color: var(--tr-violet);
}

.nhanso-tr-quint {
    display: flex;
    gap: 14px;
    align-items: center;
}

.nhanso-tr-quint b {
    display: block;
    margin-bottom: 2px;
}

.nhanso-tr-verdict {
    display: grid;
    gap: 4px;
    justify-items: center;
    margin: 24px 0 0;
    padding: 18px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 12px;
}

.nhanso-tr-verdict b {
    font-size: 40px;
    line-height: 1.1;
}

.nhanso-tr-verdict.is-good b { color: var(--nt-g3); }
.nhanso-tr-verdict.is-mid b { color: var(--nt-g1); }
.nhanso-tr-verdict.is-bad b { color: var(--nt-bad); }

.nhanso-tr-verdict small {
    color: var(--nt-muted);
}

.nhanso-tr-pos__label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a6a1f;
}

.nhanso-tr-pos .nhanso-nt-h2 small {
    font-size: 14px;
    font-weight: 600;
    color: var(--nt-muted);
}

.nhanso-tr-keys__line {
    font-size: 14px;
    font-weight: 700;
    color: var(--tr-violet);
}

/* ------------------------------------------------------------- the guides */
.nhanso-tr-guides {
    display: grid;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: guide;
}

.nhanso-tr-guides a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 12px;
    padding: 14px 16px;
    color: var(--nt-text);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 10px;
    counter-increment: guide;
}

.nhanso-tr-guides a::before {
    content: counter(guide);
    grid-row: span 2;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    font-weight: 800;
    color: var(--tr-gold-light);
    background: var(--tr-violet);
    border-radius: 50%;
}

.nhanso-tr-guides a:hover,
.nhanso-tr-guides a:focus-visible {
    border-color: var(--tr-gold);
}

.nhanso-tr-guides b {
    color: var(--nt-ink);
}

.nhanso-tr-guides span {
    font-size: 14px;
    line-height: 1.55;
    color: var(--nt-muted);
}

.nhanso-tr-toc {
    margin: 24px 0 0;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-left: 4px solid var(--tr-gold);
    border-radius: 0 10px 10px 0;
}

.nhanso-tr-toc p {
    margin: 0 0 6px;
    font-weight: 800;
    color: var(--nt-ink);
}

.nhanso-tr-toc ol {
    margin: 0;
    padding-left: 20px;
}

.nhanso-tr-toc li {
    margin: 3px 0;
}

.nhanso-tr-guide-page .nhanso-nt-section p,
.nhanso-tr-guide-list li {
    font-size: 16.5px;
    line-height: 1.75;
}

.nhanso-tr-guide-list {
    margin: 0 0 14px;
    padding-left: 22px;
}

.nhanso-tr-guide-list li {
    margin: 6px 0;
}

/* -------------------------------------------------- spreads, birth, lists */
.nhanso-tr-spread-card .nhanso-nt-h2 i {
    color: var(--tr-gold);
}

.nhanso-tr-spread-card .nhanso-nt-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
}

.nhanso-tr-positions {
    margin: 0 0 14px;
    padding-left: 22px;
}

.nhanso-tr-positions li {
    margin: 4px 0;
}

.nhanso-tr-birth-form {
    margin: 24px 0 0;
}

.nhanso-tr-birth-form select {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 16px;
    color: var(--nt-ink);
    background: #fff;
    border: 1px solid #cfd6e0;
    border-radius: 8px;
}

.nhanso-tr-families {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-tr-families li {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 10px;
}

.nhanso-tr-families li.is-current {
    border-color: var(--tr-gold);
    box-shadow: 0 0 0 2px var(--tr-gold-light);
}

.nhanso-tr-families p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.nhanso-tr-families__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 4px !important;
    font-weight: 800;
}

@media (max-width: 640px) {
    .nhanso-tr-spreads {
        grid-template-columns: minmax(0, 1fr);
    }

    .nhanso-tr-card {
        flex-direction: column;
        align-items: stretch;
    }

    .nhanso-tr-card > .nhanso-tr-face {
        align-self: center;
    }

    .nhanso-tr-table {
        padding: 16px 14px;
    }

    .nhanso-tr-slots,
    .nhanso-tr-spread {
        gap: 8px;
    }

    .nhanso-tr-spread b {
        font-size: 14px;
        line-height: 1.3;
    }

    .nhanso-tr-spread .nhanso-tr-face {
        --w: min(120px, calc((100vw - 32px - (var(--count) - 1) * 8px) / var(--count)));
    }

    .nhanso-tr-back {
        width: 48px;
        margin-left: -16px;
    }

    .nhanso-tr-fan.is-full .nhanso-tr-back {
        width: 42px;
        margin-left: -28px;
    }

    .nhanso-tr-cta__alt {
        display: block;
        margin: 10px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nhanso-tr-fan.is-dealt .nhanso-tr-back,
    .nhanso-tr-spread a,
    .nhanso-tr-slot.is-filled {
        animation: none;
    }
}

/* --------------------------------------------------------- card of the day */
.nhanso-tr-daily {
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
}

.nhanso-tr-daily__date {
    margin: 0;
    font-weight: 800;
    color: var(--tr-gold-light);
}

.nhanso-tr-daily__card {
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 6px;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
}

.nhanso-tr-daily__card[hidden] {
    display: none;
}

.nhanso-tr-daily__card .nhanso-tr-back {
    display: block;
    width: 132px;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 6px rgba(236, 214, 160, .12);
    transition: transform .3s ease;
    animation: nhanso-tr-breathe 3s ease-in-out infinite;
}

.nhanso-tr-daily__card:hover .nhanso-tr-back,
.nhanso-tr-daily__card:focus-visible .nhanso-tr-back {
    transform: translateY(-6px) rotate(-2deg);
}

.nhanso-tr-daily__card.is-drawn .nhanso-tr-back {
    transform: rotateY(90deg);
    transition-duration: .35s;
}

.nhanso-tr-daily__card b {
    font-size: 15px;
}

.nhanso-tr-daily .nhanso-tr-step a {
    font-weight: 800;
    color: var(--tr-gold-light);
}

@keyframes nhanso-tr-breathe {
    50% { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 12px rgba(236, 214, 160, .08); }
}

.nhanso-tr-journal__note {
    padding: 10px 14px;
    background: #fff;
    border-left: 4px solid var(--tr-gold);
    border-radius: 0 8px 8px 0;
}

.nhanso-tr-journal__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-tr-journal__list li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px dashed var(--nt-line);
}

.nhanso-tr-journal__list span {
    min-width: 40px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nt-muted);
}

.nhanso-tr-journal__clear {
    margin-top: 12px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--nt-muted);
    background: none;
    border: 1px solid var(--nt-line);
    border-radius: 8px;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .nhanso-tr-daily__card .nhanso-tr-back {
        animation: none;
    }
}