/* Carino Donate — the rules main.css (the Software storefront skin) does not
   have: the four group colours, the policy banner, the Donate chip, the
   standing line and the "Before you give" cards. Same --sc-* tokens, same two
   themes: Colourful in the base rules, Gold in the scoped block at the end. */

/* ── Group colours: c (fill), on (text on fill), t (tonal bg), tt (tonal text) ──
   Borrowed from the Software category family so the two pages read as one. */
.c-picks      { --c: #f9ab00; --on: #1f1f1f; --t: #fef3d0; --tt: #8a4b00; }
.c-platform   { --c: #1a73e8; --on: #fff;    --t: #e3edfd; --tt: #1958b7; }
.c-host       { --c: #188038; --on: #fff;    --t: #e2f3e7; --tt: #0d652d; }
.c-foundation { --c: #8430ce; --on: #fff;    --t: #f1e6fc; --tt: #7024b5; }
.c-company    { --c: #00838f; --on: #fff;    --t: #ddf3f5; --tt: #005f66; }
.c-infra      { --c: #d93025; --on: #fff;    --t: #fce8e6; --tt: #a50e0e; }
.c-medical    { --c: #c2185b; --on: #fff;    --t: #fce4ee; --tt: #a3134b; }
@media (prefers-color-scheme: dark) {
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-picks      { --c: #fdd663; --on: #1f1f1f; --t: rgba(253,214,99,.14); --tt: #fdd663; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-platform   { --c: #8ab4f8; --on: #0b1f45; --t: rgba(138,180,248,.15); --tt: #a8c7fa; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-host       { --c: #81c995; --on: #072711; --t: rgba(129,201,149,.15); --tt: #a8dab5; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-foundation { --c: #c58af9; --on: #2a0a4a; --t: rgba(197,138,249,.15); --tt: #d7aefb; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-company    { --c: #78d9ec; --on: #00363d; --t: rgba(120,217,236,.14); --tt: #a1e4f2; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-infra      { --c: #f28b82; --on: #3b0907; --t: rgba(242,139,130,.15); --tt: #f6aea9; }
    :root[data-carino-theme="color"]:not([data-theme="light"]) .c-medical    { --c: #ff8bcb; --on: #3e0021; --t: rgba(255,139,203,.14); --tt: #ffb0db; }
}

/* the head's stats line wraps onto two short lines, as on Software */
.sc-stats { white-space: nowrap; }

/* ── The policy banner: Software's featured slide, standing still ── */
.sf-hero.dn-policy .sf-slide { opacity: 1; visibility: visible; cursor: default; min-height: 0; padding: 30px 44px 28px; }
.dn-policy .sf-name { margin-bottom: 14px; }
.dn-policy .sf-name .gold { color: var(--sc-primary); }
.dn-points { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; max-width: 64ch; }
.dn-points li { position: relative; padding-left: 26px; font-size: .92rem; line-height: 1.5; color: var(--sc-text-2); }
.dn-points li > i { position: absolute; left: 0; top: .3em; font-size: .85rem; color: var(--sc-primary); }
.dn-points li strong { color: var(--sc-text); font-weight: 600; }
.dn-points a { color: var(--sc-primary); text-decoration: underline; text-underline-offset: 2px; }
.dn-policy .sf-art i { transform: rotate(-6deg); }

/* ── Cards: the standing sits in the source line, Donate leads the row ── */
.card.entry.sw .src-line .dn-std { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sc-text-3); }
.os-icon.p-give {
    background: var(--sc-primary-tonal); color: var(--sc-on-tonal);
    font-family: var(--sans); font-size: .78rem; font-weight: 700; text-decoration: none; padding: 0 12px 0 10px;
}
.os-icon.p-give:hover { color: var(--sc-on-tonal); }
.os-icon.p-give:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
.dn-mo {
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border-radius: 8px;
    border: 1px dashed var(--sc-line-2); color: var(--sc-text-3); font-size: .72rem; font-weight: 600;
}
.dn-mo i { font-size: .7rem; }

/* ── Before you give: five short cards under the shelves ── */
.dn-tips { margin: 6px 0 10px; }
.dn-tips .sf-h { margin-bottom: 12px; }
.dn-tip-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.dn-tip {
    margin: 0; padding: 14px 16px 15px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius);
    background: var(--sc-surface); color: var(--sc-text-2); font-size: .86rem; line-height: 1.5;
}
.dn-tip strong { display: block; margin-bottom: 4px; color: var(--sc-text); font-family: var(--sans); font-size: .92rem; font-weight: 700; }
.dn-tip-n {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 8px;
    border-radius: 8px; background: var(--sc-primary-tonal); color: var(--sc-on-tonal); font-family: var(--mono); font-size: .78rem; font-weight: 700;
}
.dn-tip em { font-style: italic; }

@media (max-width: 640px) {
    .sf-hero.dn-policy .sf-slide { padding: 18px 16px 16px; }
    .dn-points li { font-size: .86rem; }
    .dn-policy .sf-actions { margin-top: 2px; }
}

/* ════ Gold & Black ════ */
:root:not([data-carino-theme="color"]) .c-picks      { --c: #eab308; }
:root:not([data-carino-theme="color"]) .c-platform   { --c: color-mix(in oklab, #8ab4f8 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .c-host       { --c: color-mix(in oklab, #81c995 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .c-foundation { --c: color-mix(in oklab, #c58af9 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .c-company    { --c: color-mix(in oklab, #78d9ec 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .c-infra      { --c: color-mix(in oklab, #f28b82 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .c-medical    { --c: color-mix(in oklab, #ff8bcb 42%, #d9b45a); }
:root:not([data-carino-theme="color"]) .dn-policy .sf-name .gold {
    background: var(--sc-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
:root:not([data-carino-theme="color"]) .os-icon.p-give { box-shadow: inset 0 0 0 1px rgba(234, 179, 8, .4); }
:root:not([data-carino-theme="color"]) .os-icon.p-give i { color: var(--sc-primary); }
:root:not([data-carino-theme="color"]) .os-icon.p-give:hover { box-shadow: inset 0 0 0 1px rgba(234, 179, 8, .75); color: #fff; }
:root:not([data-carino-theme="color"]) .dn-mo { border-color: #3a352a; }
:root:not([data-carino-theme="color"]) .dn-tip { background: linear-gradient(180deg, #0d0d0d 0%, #090909 100%); border-color: #1d1b17; }
:root:not([data-carino-theme="color"]) .dn-tip-n { box-shadow: inset 0 0 0 1px rgba(234, 179, 8, .28); }

/* a group's one-line intro, under its heading when that group is picked */
.dn-intro { margin: -4px 0 14px; max-width: 860px; color: var(--sc-text-2); font-size: .88rem; line-height: 1.5; }

/* the banner's CTA is a <button> here (it scrolls), Software's is a link */
button.sf-cta { border: 0; cursor: pointer; }

/* phone: the points take the banner's full width; the art sits in the corner */
@media (max-width: 640px) {
    .sf-hero.dn-policy .sf-slide { grid-template-columns: minmax(0, 1fr); }
    .dn-policy .sf-art { position: absolute; top: 16px; right: 16px; }
    .dn-policy .sf-name { padding-right: 64px; }
}

/* no tabs and no filter row under the search: the head keeps Software's
   breathing room, and the banner starts a step below it */
.sc-head-in { padding-bottom: 12px; }
#results { padding-top: 6px; }
/* on a shelf the intro sits between the heading and the cards */
.sf-shelf .dn-intro { margin: -6px 0 12px; }

/* the donate address in plain text: selectable, one line, the full URL on hover */
.card.entry.sw .dn-url {
    margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--mono); font-size: .72rem; color: var(--sc-text-3);
    user-select: all; -webkit-user-select: all; cursor: text;
}
/* phone list cards: the address gets its own row in Software's grid */
@media (max-width: 640px) {
    .sub-grid .card.entry.sw { grid-template-areas: "art title" "art src" "art badge" "art desc" "art url" "row row"; }
    .sub-grid .card.entry.sw .dn-url { grid-area: url; margin-top: 4px; }
}