/*
 * NADIR Recipe Card - design "Cocina".
 *
 * Colours and fonts come from the theme (Kadence's --global-palette* and
 * font variables), with the site's current values as fallbacks, so the card
 * follows the palette when it changes. Layout reacts to the card's own
 * width (container queries), not the window, because the card sits in a
 * content column next to a sidebar.
 *
 * The theme styles bare button, h2, ul and a elements inside post content;
 * every rule here that touches one of those sets the properties the theme
 * sets, including on :hover and :focus, so the card looks the same in any
 * theme.
 */

.nrc-card {
    --nrc-accent: var(--global-palette2, #2b6cb0);
    --nrc-ink: var(--global-palette3, #1a202c);
    --nrc-text: var(--global-palette4, #2d3748);
    --nrc-muted: var(--global-palette5, #4a5568);
    --nrc-faint: var(--global-palette6, #718096);
    --nrc-soft: var(--global-palette8, #f7fafc);
    --nrc-soft-2: var(--global-palette7, #edf2f7);
    --nrc-bg: var(--global-palette9, #ffffff);
    --nrc-line: #e2e8f0;
    --nrc-line: color-mix(in srgb, var(--nrc-ink) 11%, var(--nrc-bg));
    --nrc-line-strong: var(--global-gray-400, #cbd5e0);
    --nrc-tint: #ebf4ff;
    --nrc-tint: color-mix(in srgb, var(--nrc-accent) 10%, var(--nrc-bg));
    --nrc-tint-ink: #1a365d;
    --nrc-tint-ink: color-mix(in srgb, var(--nrc-accent) 55%, #000000);
    --nrc-on-dark-link: #90cdf4;
    --nrc-on-dark-link: color-mix(in srgb, var(--nrc-accent) 40%, #ffffff);
    --nrc-star: #c27c0e;
    --nrc-star-light: #f6ad55;
    --nrc-star-off: #cbd5e0;
    --nrc-head-font: var(--global-heading-font-family, Georgia, "Times New Roman", serif);
    --nrc-body-font: var(--global-body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

    container: nrc / inline-size;
    box-sizing: border-box;
    margin: 2.5em 0;
    border: 1px solid var(--nrc-line);
    border-radius: 24px;
    background: var(--nrc-bg);
    color: var(--nrc-ink);
    font-family: var(--nrc-body-font);
    font-size: 17px;
    line-height: 1.6;
    overflow: hidden;
    scroll-margin-top: 90px;
}

.nrc-card *,
.nrc-card *::before,
.nrc-card *::after {
    box-sizing: border-box;
}

.nrc-card [hidden] {
    display: none !important;
}

.nrc-card .nrc-i {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nrc-card.nrc-card p,
.nrc-card.nrc-card ul,
.nrc-card.nrc-card ol,
.nrc-card.nrc-card h2,
.nrc-card.nrc-card h3,
.nrc-card.nrc-card h4 {
    margin: 0;
    padding: 0;
}

.nrc-card.nrc-card ul,
.nrc-card.nrc-card ol {
    list-style: none;
}

.nrc-card.nrc-card li {
    margin: 0;
}

/* Every button in the card starts from nothing, whatever the theme does to buttons. */
.nrc-card button,
.nrc-card button:hover,
.nrc-card button:focus {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    min-height: 0;
    padding: 0;
    cursor: pointer;
    transform: none;
}

.nrc-card a {
    text-decoration: none;
    box-shadow: none;
}

.nrc-card :focus-visible {
    outline: 2px solid var(--nrc-accent);
    outline-offset: 2px;
}

/* ---- Header ---- */

.nrc-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 16px 4px;
}

.nrc-photo {
    flex-shrink: 0;
}

.nrc-card .nrc-photo-img {
    display: block;
    width: 100%;
    height: 220px;
    max-width: none;
    margin: 0;
    border-radius: 22px;
    object-fit: cover;
}

.nrc-head-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.nrc-card ul.nrc-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--nrc-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
}

.nrc-tags li + li::before {
    content: "•";
    margin: 0 8px;
    color: var(--nrc-line-strong);
}

.nrc-card h2.nrc-title {
    margin: 0;
    color: var(--nrc-ink);
    font-family: var(--nrc-head-font);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0;
    text-transform: none;
}

.nrc-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.nrc-avg {
    font-weight: 800;
}

.nrc-card .nrc-count {
    color: var(--nrc-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nrc-card p.nrc-summary {
    color: var(--nrc-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* Five stars filled to the average: one gradient seen through a star mask. */
.nrc-stars {
    --nrc-pct: 0%;
    display: inline-block;
    flex-shrink: 0;
    width: 90px;
    height: 18px;
    vertical-align: -3px;
    background: linear-gradient(90deg, #c27c0e var(--nrc-pct), #cbd5e0 var(--nrc-pct));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") 0 0 / 18px 18px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") 0 0 / 18px 18px repeat-x;
}

/* ---- Times ---- */

.nrc-card ul.nrc-times {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px 0;
}

.nrc-card .nrc-times li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--nrc-line);
    border-radius: 12px;
    background: var(--nrc-soft);
    font-size: 14px;
    line-height: 1.3;
}

.nrc-times .nrc-i {
    color: var(--nrc-muted);
}

.nrc-times-label {
    color: var(--nrc-muted);
    font-weight: 700;
}

.nrc-times strong {
    font-weight: 800;
}

/* ---- Control bar ---- */

.nrc-dock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 16px 0;
    padding: 12px;
    border-radius: 18px;
    background: var(--nrc-ink);
    color: #ffffff;
}

.nrc-servings,
.nrc-units {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
}

.nrc-serv-out {
    min-width: 96px;
    padding: 0 6px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    line-height: 40px;
}

.nrc-card .nrc-dock-btn,
.nrc-card .nrc-dock-btn:hover,
.nrc-card .nrc-dock-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
}

.nrc-card .nrc-dock-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.nrc-card .nrc-unit-btn,
.nrc-card .nrc-unit-btn:hover,
.nrc-card .nrc-unit-btn:focus {
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: transparent;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 800;
}

.nrc-card .nrc-unit-btn[aria-pressed="true"] {
    background: #ffffff;
    color: var(--nrc-ink);
}

.nrc-card .nrc-cook,
.nrc-card .nrc-cook:hover,
.nrc-card .nrc-cook:focus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.nrc-card .nrc-cook[aria-pressed="true"] {
    background: var(--nrc-accent);
}

.nrc-dock-gap {
    flex-grow: 1;
}

.nrc-share {
    display: inline-flex;
    gap: 6px;
}

.nrc-card .nrc-icon-btn,
.nrc-card .nrc-icon-btn:hover,
.nrc-card .nrc-icon-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nrc-card .nrc-icon-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.nrc-card p.nrc-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 16px 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--nrc-tint);
    color: var(--nrc-tint-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

/* Section links, phones only. */
.nrc-jump {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 4px;
    margin: 16px 16px 0;
    padding: 4px;
    border-radius: 14px;
    background: var(--nrc-soft-2);
}

.nrc-card .nrc-jump a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 10px;
    background: var(--nrc-bg);
    color: var(--nrc-ink);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

/* ---- Body ---- */

.nrc-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 22px 16px 8px;
}

.nrc-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 10px;
}

.nrc-card h3.nrc-h3 {
    margin: 0;
    color: var(--nrc-ink);
    font-family: var(--nrc-head-font);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

.nrc-counter {
    color: var(--nrc-muted);
    font-size: 13px;
    font-weight: 800;
}

.nrc-card h4.nrc-h4 {
    margin: 18px 0 8px;
    color: var(--nrc-muted);
    font-family: var(--nrc-body-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.nrc-mults {
    display: inline-flex;
    gap: 4px;
    align-self: center;
}

.nrc-card .nrc-mult,
.nrc-card .nrc-mult:hover,
.nrc-card .nrc-mult:focus {
    height: 32px;
    padding: 0 10px;
    border: 1.5px solid var(--nrc-line-strong);
    border-radius: 8px;
    background: var(--nrc-bg);
    color: var(--nrc-ink);
    font-size: 13px;
    font-weight: 800;
}

.nrc-card .nrc-mult[aria-pressed="true"] {
    border-color: var(--nrc-ink);
    background: var(--nrc-ink);
    color: #ffffff;
}

/* Ingredients: native checkboxes, drawn as tiles. */
.nrc-card ul.nrc-ing-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nrc-ing-label {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.nrc-card .nrc-cb {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.nrc-ing-body {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 14px;
    border: 1.5px solid var(--nrc-line);
    border-radius: 14px;
    background: var(--nrc-soft);
    font-size: 16px;
    line-height: 1.4;
    transition: background-color 0.15s, border-color 0.15s;
}

.nrc-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--nrc-line-strong);
    border-radius: 7px;
    background: var(--nrc-bg);
    color: #ffffff;
}

.nrc-box .nrc-i {
    stroke-width: 3.4;
    visibility: hidden;
}

.nrc-ing-name {
    flex-grow: 1;
    min-width: 0;
    color: var(--nrc-ink);
}

.nrc-ing-note {
    display: block;
    color: var(--nrc-muted);
    font-size: 13px;
}

.nrc-amt {
    flex-shrink: 0;
    max-width: 45%;
    color: var(--nrc-accent);
    font-size: 15px;
    font-weight: 800;
    text-align: right;
}

.nrc-cb:checked + .nrc-ing-body {
    border-color: var(--nrc-accent);
    background: var(--nrc-tint);
}

.nrc-cb:checked + .nrc-ing-body .nrc-box {
    border-color: var(--nrc-accent);
    background: var(--nrc-accent);
}

.nrc-cb:checked + .nrc-ing-body .nrc-box .nrc-i {
    visibility: visible;
}

.nrc-cb:checked + .nrc-ing-body .nrc-ing-name,
.nrc-cb:checked + .nrc-ing-body .nrc-ing-note,
.nrc-cb:checked + .nrc-ing-body .nrc-amt {
    color: var(--nrc-faint);
    text-decoration: line-through;
}

.nrc-cb:focus-visible + .nrc-ing-body,
.nrc-cb:focus-visible + .nrc-done-btn {
    outline: 2px solid var(--nrc-accent);
    outline-offset: 2px;
}

.nrc-card .nrc-wide-btn,
.nrc-card .nrc-wide-btn:hover,
.nrc-card .nrc-wide-btn:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin-top: 14px;
    border-radius: 14px;
    background: var(--nrc-ink);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.nrc-card ul.nrc-equipment {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nrc-card .nrc-equipment li {
    padding: 6px 12px;
    border: 1px solid var(--nrc-line);
    border-radius: 10px;
    color: var(--nrc-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

/* Steps. */
.nrc-progress {
    height: 8px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--nrc-soft-2);
    overflow: hidden;
}

.nrc-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--nrc-accent);
    transition: width 0.25s;
}

.nrc-timers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.nrc-card .nrc-timer-pill,
.nrc-card .nrc-timer-pill:hover,
.nrc-card .nrc-timer-pill:focus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--nrc-accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.nrc-card ol.nrc-step-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.nrc-step {
    padding: 16px 18px;
    border: 1px solid var(--nrc-line);
    border-radius: 18px;
    background: var(--nrc-bg);
    scroll-margin-top: 90px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.nrc-step.is-current {
    border-color: var(--nrc-accent);
    box-shadow: 0 0 0 1px var(--nrc-accent), 0 14px 30px -20px rgba(26, 32, 44, 0.55);
}

.nrc-step:has(.nrc-cb:checked) {
    background: var(--nrc-soft);
}

.nrc-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.nrc-step-of {
    color: var(--nrc-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.nrc-step.is-current .nrc-step-of {
    color: var(--nrc-accent);
}

.nrc-done {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.nrc-done-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 1.5px solid var(--nrc-line-strong);
    border-radius: 999px;
    background: var(--nrc-bg);
    color: var(--nrc-ink);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.nrc-done-btn .nrc-i {
    stroke-width: 3;
}

.nrc-done-on {
    display: none;
}

.nrc-cb:checked + .nrc-done-btn {
    border-color: var(--nrc-accent);
    background: var(--nrc-accent);
    color: #ffffff;
}

.nrc-cb:checked + .nrc-done-btn .nrc-done-off {
    display: none;
}

.nrc-cb:checked + .nrc-done-btn .nrc-done-on {
    display: inline;
}

.nrc-card p.nrc-step-text {
    margin: 10px 0 0;
    color: var(--nrc-ink);
    font-size: 17px;
    line-height: 1.6;
}

.nrc-step:has(.nrc-cb:checked) .nrc-step-text {
    color: var(--nrc-faint);
}

.nrc-time {
    font-weight: 800;
}

.nrc-card .nrc-timer,
.nrc-card .nrc-timer:hover,
.nrc-card .nrc-timer:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin-top: 12px;
    border-radius: 14px;
    background: var(--nrc-tint);
    color: var(--nrc-accent);
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.nrc-card .nrc-timer.is-running {
    background: var(--nrc-accent);
    color: #ffffff;
}

.nrc-card .nrc-timer.is-finished,
.nrc-card .nrc-timer-pill.is-finished {
    background: var(--nrc-ink);
    color: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
    .nrc-card .is-finished {
        animation: nrc-pulse 1s ease-in-out infinite;
    }
}

@keyframes nrc-pulse {
    50% {
        opacity: 0.7;
    }
}

/* Cook mode: the current step is read from arm's length. */
.nrc-card.is-cooking .nrc-step.is-current .nrc-step-text {
    font-size: 21px;
}

/* ---- Notes and rating ---- */

.nrc-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px 16px 20px;
}

.nrc-notes {
    padding: 20px 22px;
    border: 1px solid var(--nrc-line);
    border-radius: 18px;
    background: var(--nrc-soft);
}

.nrc-card h3.nrc-h3s {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--nrc-ink);
    font-family: var(--nrc-body-font);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.nrc-card .nrc-notes ul {
    padding-left: 20px;
    list-style: disc;
    color: var(--nrc-text);
    font-size: 16px;
    line-height: 1.6;
}

.nrc-card .nrc-notes li {
    margin: 6px 0;
}

.nrc-rate {
    padding: 22px 18px;
    border-radius: 18px;
    background: var(--nrc-ink);
    color: #ffffff;
    text-align: center;
}

.nrc-card h3.nrc-rate-h {
    margin: 0;
    color: #ffffff;
    font-family: var(--nrc-head-font);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

.nrc-card p.nrc-rate-hint {
    margin: 6px 0 8px;
    color: #cbd5e0;
    font-size: 15px;
}

.nrc-rate-stars {
    display: inline-flex;
    gap: 2px;
}

.nrc-card .nrc-rate-star,
.nrc-card .nrc-rate-star:hover,
.nrc-card .nrc-rate-star:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: transparent;
}

.nrc-star-i {
    fill: #4a5568;
    transition: fill 0.1s;
}

.nrc-rate-star.is-on .nrc-star-i,
.nrc-rate-stars:hover .nrc-star-i {
    fill: var(--nrc-star-light);
}

.nrc-rate-stars .nrc-rate-star:hover ~ .nrc-rate-star .nrc-star-i {
    fill: #4a5568;
}

.nrc-rate-stars.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.nrc-card .nrc-rate-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--nrc-on-dark-link);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Nutrition and keywords ---- */

.nrc-extra {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 18px 16px 0;
}

.nrc-nutrition {
    padding: 20px 22px;
    border: 1px solid var(--nrc-line);
    border-radius: 18px;
    background: var(--nrc-bg);
}

.nrc-card .nrc-nutrition h3.nrc-h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
}

.nrc-nutrition h3 .nrc-i {
    color: var(--nrc-accent);
}

.nrc-card p.nrc-nutri-text {
    margin: 10px 0 0;
    color: var(--nrc-text);
    font-size: 16px;
    line-height: 1.65;
}

.nrc-card dl.nrc-nutri-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
}

.nrc-nutri-grid div {
    padding: 10px 12px;
    border: 1px solid var(--nrc-line);
    border-radius: 12px;
    background: var(--nrc-soft);
}

.nrc-card .nrc-nutri-grid dt {
    margin: 0;
    color: var(--nrc-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.nrc-card .nrc-nutri-grid dd {
    margin: 2px 0 0;
    color: var(--nrc-ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.nrc-card p.nrc-nutri-note {
    margin: 8px 0 0;
    color: var(--nrc-muted);
    font-size: 13px;
}

.nrc-card ul.nrc-kw-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.nrc-card .nrc-kw {
    display: inline-flex;
    padding: 6px 13px;
    border: 1.5px solid var(--nrc-line-strong);
    border-radius: 999px;
    color: var(--nrc-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.nrc-card .nrc-kw.is-main {
    border-color: var(--nrc-accent);
    background: var(--nrc-accent);
    color: #ffffff;
}

.nrc-card .nrc-kw a,
.nrc-card .nrc-kw a:hover {
    color: inherit;
    text-decoration: none;
}

.nrc-card .nrc-kw a:hover {
    text-decoration: underline;
}

/* ---- Wider cards: the desktop layout ---- */

@container nrc (min-width: 640px) {
    .nrc-head {
        flex-direction: row;
        align-items: center;
        gap: 22px;
        padding: 28px 28px 8px;
    }

    .nrc-card .nrc-photo-img {
        width: 170px;
        height: 170px;
    }

    .nrc-card h2.nrc-title {
        font-size: 38px;
    }

    .nrc-card ul.nrc-times {
        padding: 16px 28px 0;
    }

    .nrc-dock,
    .nrc-card p.nrc-status {
        margin-left: 28px;
        margin-right: 28px;
    }

    .nrc-dock {
        margin-top: 18px;
    }

    .nrc-jump {
        display: none;
    }

    .nrc-body {
        padding: 26px 28px 8px;
    }

    .nrc-extra {
        padding: 20px 28px 0;
    }

    .nrc-foot {
        padding: 18px 28px 28px;
    }

    .nrc-foot:has(.nrc-notes):has(.nrc-rate) {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }
}

@container nrc (min-width: 720px) {
    .nrc-body {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
    }
}

/* ---- Under the post title (hero) ---- */

.nrc-hero-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
}

.nrc-snippet {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.nrc-snippet-wrap {
    margin-bottom: 1.5em;
}

.nrc-snippet a.nrc-snippet-btn,
.nrc-snippet a.nrc-snippet-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    border-radius: 3px;
    background: var(--global-palette-btn-bg, #1a202c);
    color: var(--global-palette-btn, #ffffff);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
}

.nrc-snippet a.nrc-snippet-btn:hover,
.nrc-snippet a.nrc-snippet-btn:focus {
    background: var(--global-palette-btn-bg-hover, #2d3748);
    color: var(--global-palette-btn-hover, #ffffff);
}

.nrc-snippet-btn .nrc-i {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    .nrc-snippet a.nrc-snippet-btn {
        font-size: 10.5px;
    }
}

/* ---- Comments: the star field and each reader's stars ---- */

.nrc-comment-rating {
    margin: 0 0 1em;
    padding: 0;
    border: 0;
}

.nrc-comment-rating legend {
    margin-bottom: 4px;
    padding: 0;
    font-weight: 700;
}

.nrc-cr-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.nrc-cr-stars input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.nrc-cr-stars label {
    display: inline-flex;
    padding: 4px;
    margin: 0;
    cursor: pointer;
}

.nrc-cr-stars svg {
    fill: #cbd5e0;
    transition: fill 0.1s;
}

.nrc-cr-stars input:checked ~ label svg {
    fill: #c27c0e;
}

.nrc-cr-stars:hover input ~ label svg {
    fill: #cbd5e0;
}

.nrc-cr-stars input ~ label:hover svg,
.nrc-cr-stars input ~ label:hover ~ label svg {
    fill: #c27c0e;
}

.nrc-cr-stars input:focus-visible + label {
    outline: 2px solid var(--global-palette2, #2b6cb0);
    outline-offset: 1px;
    border-radius: 4px;
}

.nrc-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.nrc-comment-stars {
    margin: 0 0 0.4em;
}

/* ---- Print: the print page and Ctrl+P on the post ---- */

.nrc-print-page {
    max-width: 820px;
    margin: 24px auto;
    padding: 0 16px;
    background: #ffffff;
    color: #1a202c;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.nrc-print-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.nrc-print-bar a {
    color: #2b6cb0;
    font-weight: 700;
}

.nrc-print-now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: #1a202c;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.nrc-print-now .nrc-i {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.nrc-print-source {
    margin-top: 16px;
    color: #4a5568;
    font-size: 13px;
}

.nrc-card--print {
    margin: 0;
}

.nrc-card--print .nrc-ing-body {
    min-height: 0;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    background: none;
}

.nrc-card--print .nrc-step {
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
}

@media print {
    .nrc-print-bar,
    .nrc-dock,
    .nrc-jump,
    .nrc-status,
    .nrc-rate,
    .nrc-mults,
    .nrc-counter,
    .nrc-progress,
    .nrc-timers,
    .nrc-timer,
    .nrc-done,
    .nrc-wide-btn,
    .nrc-rating {
        display: none !important;
    }

    .nrc-card {
        border: 0;
        border-radius: 0;
        font-size: 12pt;
    }

    .nrc-card .nrc-photo-img {
        width: 120px;
        height: 120px;
    }

    .nrc-head {
        flex-direction: row;
        padding: 0 0 8px;
    }

    .nrc-card ul.nrc-times,
    .nrc-body,
    .nrc-extra,
    .nrc-foot {
        padding-left: 0;
        padding-right: 0;
    }

    .nrc-ing-list,
    .nrc-step-list {
        gap: 0;
    }

    .nrc-ing-body,
    .nrc-step {
        break-inside: avoid;
    }

    .nrc-amt {
        color: #1a202c;
    }
}