/* Tool pages: grocery list generator and macro meal planner.
   The tool sits in a floating "app window" over a dark emerald hero. Soft shadows and 1px lines
   instead of the calculators' chunky borders; brand emerald for actions. Scoped to main.calc-page. */

.calc-page [hidden] { display: none !important; }
.tp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tx-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.calc-page {
    --tx-ink: #0f241d;
    --tx-text: #3d514a;
    --tx-muted: #6b7d76;
    --tx-line: #e3eae6;
    --tx-line-2: #d5dfda;
    --tx-soft: #f5f9f7;
    --tx-green: #059669;
    --tx-green-d: #047857;
    --tx-deep: #064e3b;
    --tx-mint: #d1fae5;
    --tx-mint-2: #ecfdf5;
    --tx-p: #f26b5b;
    --tx-c: #5b8def;
    --tx-f: #f2b636;
    --tx-ring: 0 0 0 4px rgba(16, 185, 129, .18);
}

/* ---------- Hero: dark emerald band the tool floats over ---------- */
.cp-hero.cp-hero--compact {
    position: relative;
    overflow: hidden;
    padding: 26px 16px 110px;
    background:
        radial-gradient(900px 340px at 12% -20%, rgba(52, 211, 153, .38), transparent 60%),
        radial-gradient(700px 320px at 92% -10%, rgba(45, 212, 191, .22), transparent 60%),
        linear-gradient(180deg, #053f31 0%, #065f46 100%);
}
.cp-hero--compact::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 90%); mask-image: linear-gradient(180deg, #000 20%, transparent 90%); pointer-events: none; }
.cp-hero--compact .cp-hero-in { position: relative; }
.cp-hero--compact .cp-crumbs, .cp-hero--compact .cp-crumbs a { margin-bottom: 10px; color: rgba(255, 255, 255, .66); }
.cp-hero--compact .cp-crumbs a:hover { color: #fff; }
.cp-hero--compact .cp-crumbs li[aria-current] { color: #fff; }
.cp-hero--compact .cp-pill { margin-bottom: 12px; padding: 5px 13px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); box-shadow: none; color: #a7f3d0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cp-hero.cp-hero--compact h1 { margin-bottom: 10px; color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); letter-spacing: -.025em; }
.cp-hero--compact .cp-tagline { max-width: 40rem; color: rgba(236, 253, 245, .84); font-size: clamp(1rem, .96rem + .2vw, 1.1rem); }
@media (min-width: 768px) { .cp-hero.cp-hero--compact { padding: 34px 24px 120px; } }
.cp-hero--compact + .cp-tool { position: relative; z-index: 2; margin-top: -88px; padding-top: 0; }
.cp-tool-wrap.tp-wide { max-width: 54rem; }

/* ---------- App window ---------- */
.tx-app {
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(6, 46, 35, .07), 0 30px 70px -30px rgba(4, 47, 36, .55), 0 10px 22px -12px rgba(4, 47, 36, .25);
    scroll-margin-top: 100px;
}
.tx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--tx-line); background: linear-gradient(180deg, #fff, #fafcfb); }
.tx-bar-t { display: flex; align-items: center; gap: 11px; color: var(--tx-ink); font-size: .98rem; font-weight: 800; }
.tx-bar-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #34d399, #047857); box-shadow: 0 8px 16px -8px rgba(4, 120, 87, .8); color: #fff; font-size: .85rem; }
.tx-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid #a7f3d0; border-radius: 999px; background: var(--tx-mint-2); color: var(--tx-green-d); font-size: .76rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 479px) { .tx-bar { padding: 12px 14px; } .tx-bar-t { font-size: .9rem; } .tx-badge { padding: 5px 9px; font-size: .7rem; } }
.tx-body { display: grid; }
.tx-pane { min-width: 0; padding: 20px; }
@media (min-width: 640px) { .tx-pane { padding: 28px; } }
.tx-pane--soft { border-top: 1px solid var(--tx-line); background: var(--tx-soft); }

/* ---------- Type and small pieces ---------- */
.calc-page .tx-h { font-size: 1.15rem !important; }
.calc-page .tx-h--lg { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem) !important; }
.tx-h { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--tx-ink); font-size: 1.12rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.tx-h--lg { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
.tx-h--light { color: #fff; }
.tx-sub { margin: 4px 0 0; color: var(--tx-muted); font-size: .88rem; line-height: 1.5; }
.tx-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.tx-fine { margin: 10px 0 0; color: var(--tx-muted); font-size: .8rem; text-align: center; }
.tx-l { display: block; margin: 0 0 8px; padding: 0; color: var(--tx-ink); font-size: .84rem; font-weight: 800; }
.tx-l small { margin-left: 6px; color: var(--tx-muted); font-size: .76rem; font-weight: 600; }
.tx-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--tx-green); color: #fff; font-size: .78rem; font-weight: 800; }
.tx-link { padding: 4px 0; border: 0; background: none; color: var(--tx-green); font: inherit; font-size: .84rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tx-minis { display: flex; gap: 2px; }
.tx-mini { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--tx-text); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.tx-mini i { color: var(--tx-green); font-size: .78rem; }
.tx-mini:hover { background: var(--tx-soft); color: var(--tx-ink); }
.calc-page :is(.tx-mini, .tx-ibtn, .tx-btn, .tx-go, .tx-link, .tx-x):focus-visible { outline: 3px solid #6ee7b7; outline-offset: 2px; }

/* ---------- Inputs (override the calculators' 2px style inside the app) ---------- */
.calc-page .tx-app input[type="number"], .calc-page .tx-app input[type="text"], .calc-page .tx-app select,
.calc-page .tx-plan input[type="text"] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--tx-line-2) !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
    color: var(--tx-ink);
    font-size: 16px;
    font-weight: 600;
}
.calc-page .tx-app input:focus, .calc-page .tx-app select:focus, .calc-page .tx-plan input[type="text"]:focus { border-color: #10b981 !important; box-shadow: var(--tx-ring) !important; outline: none; }
.tx-in { position: relative; }
.calc-page .tx-in input[type="number"] { padding-right: 52px; }
.tx-in > span { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--tx-muted); font-size: .82rem; font-weight: 700; pointer-events: none; }
.tx-field { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.tx-field--last { margin-bottom: 0; }
.tx-fieldhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.tx-fieldhead .tx-l { margin: 0; }
.tx-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.tx-grid2--tight { gap: 8px; }

/* segmented control */
.tx-seg { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: #eef3f0; }
.tx-seg label { flex: 1; min-width: 0; cursor: pointer; }
.tx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tx-seg span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; border-radius: 10px; color: var(--tx-muted); font-size: .88rem; font-weight: 700; white-space: nowrap; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.tx-seg span i { font-size: .78rem; }
.tx-seg input:checked + span { background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 0 0 1px rgba(16, 24, 40, .03); color: var(--tx-ink); }
.tx-seg input:checked + span i { color: var(--tx-green); }
.tx-seg input:focus-visible + span { outline: 3px solid #6ee7b7; outline-offset: 1px; }
.tx-seg--wide { margin: 14px 0 20px; }
.tx-seg--wide span { padding: 11px 10px; }
.tx-seg--mini { flex-shrink: 0; padding: 3px; border-radius: 10px; }
.tx-seg--mini span { padding: 5px 11px; font-size: .78rem; }

/* option cards (goal) */
.tx-cards { display: grid; gap: 10px; }
.tx-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tx-card { position: relative; display: block; cursor: pointer; }
.tx-card input { position: absolute; opacity: 0; pointer-events: none; }
.tx-card > span { position: relative; display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 13px 12px; border: 1px solid var(--tx-line-2); border-radius: 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.tx-card i { margin-bottom: 5px; color: var(--tx-muted); font-size: 1rem; }
.tx-card b { color: var(--tx-ink); font-size: .9rem; font-weight: 800; line-height: 1.25; }
.tx-card small { color: var(--tx-muted); font-size: .74rem; font-weight: 600; }
.tx-card > span::after { content: ""; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border: 1.5px solid var(--tx-line-2); border-radius: 50%; background: #fff center / 10px no-repeat; }
@media (hover: hover) { .tx-card:hover > span { border-color: #6ee7b7; } }
.tx-card input:checked + span { border-color: #10b981; background: var(--tx-mint-2); box-shadow: 0 0 0 1px #10b981; }
.tx-card input:checked + span i { color: var(--tx-green); }
.tx-card input:checked + span::after { border-color: var(--tx-green); background-color: var(--tx-green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
.tx-card input:focus-visible + span { outline: 3px solid #6ee7b7; outline-offset: 2px; }

/* macro split chooser */
.tx-splits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 419px) { .tx-splits .tx-split:last-child { grid-column: 1 / -1; } }
@media (min-width: 420px) { .tx-splits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .tx-splits { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tx-split { position: relative; display: block; cursor: pointer; }
.tx-split input { position: absolute; opacity: 0; pointer-events: none; }
.tx-split > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; padding: 12px 8px; border: 1px solid var(--tx-line-2); border-radius: 14px; background: #fff; text-align: center; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.tx-split b { color: var(--tx-ink); font-size: .86rem; font-weight: 800; line-height: 1.25; }
.tx-split small { color: var(--tx-muted); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
@media (hover: hover) { .tx-split:hover > span { border-color: #6ee7b7; } }
.tx-split input:checked + span { border-color: #10b981; background: var(--tx-mint-2); box-shadow: 0 0 0 1px #10b981; }
.tx-split input:checked + span small { color: var(--tx-green-d); }
.tx-split input:focus-visible + span { outline: 3px solid #6ee7b7; outline-offset: 2px; }
.tx-p { background: var(--tx-p); } .tx-c { background: var(--tx-c); } .tx-f { background: var(--tx-f); }

/* pills (meals per day, diet, leave out) */
.tx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tx-pill { position: relative; cursor: pointer; }
.tx-pill input { position: absolute; opacity: 0; pointer-events: none; }
.tx-pill span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--tx-line-2); border-radius: 999px; background: #fff; color: var(--tx-text); font-size: .85rem; font-weight: 700; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
@media (hover: hover) { .tx-pill:hover span { border-color: #6ee7b7; } }
.tx-pill input:checked + span { border-color: #10b981; background: var(--tx-mint-2); box-shadow: 0 0 0 1px #10b981; color: var(--tx-green-d); }
.tx-pill--check input:checked + span { border-color: #f1a8a0; background: #fff1ef; box-shadow: 0 0 0 1px #f1a8a0; color: #b42318; }
.tx-pill--check input:checked + span::before { content: "\2715"; font-size: .7rem; }
.tx-pill input:focus-visible + span { outline: 3px solid #6ee7b7; outline-offset: 2px; }

/* known macros */
.tx-known { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tx-known .tx-field { margin: 0; }
.tx-k .tx-l::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; vertical-align: 1px; }
.tx-k--p .tx-l::before { background: var(--tx-p); } .tx-k--c .tx-l::before { background: var(--tx-c); } .tx-k--f .tx-l::before { background: var(--tx-f); }
.calc-page .tx-known .tx-in input[type="number"] { padding-right: 30px; }
.tx-known .tx-in > span { right: 11px; }

/* switch */
.tx-switch { display: inline-flex; align-items: center; gap: 10px; color: var(--tx-text); font-size: .86rem; font-weight: 700; cursor: pointer; }
.tx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.tx-switch > span { position: relative; flex-shrink: 0; width: 40px; height: 23px; border-radius: 999px; background: #cfd9d4; transition: background-color .15s ease; }
.tx-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.tx-switch input:checked + span { background: #10b981; }
.tx-switch input:checked + span::after { transform: translateX(17px); }
.tx-switch input:focus-visible + span { outline: 3px solid #6ee7b7; outline-offset: 2px; }
.tx-switch--sm { font-size: .8rem; }

/* stepper */
.tx-stepper { display: inline-flex; align-items: center; border: 1px solid var(--tx-line-2); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.tx-stepper button { width: 38px; height: 40px; border: 0; background: none; color: var(--tx-green); font: inherit; font-size: 1.15rem; font-weight: 800; cursor: pointer; }
.tx-stepper button:hover { background: var(--tx-soft); }
.calc-page .tx-stepper input[type="number"] { width: 50px; height: 40px; padding: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.tx-stepper input::-webkit-outer-spin-button, .tx-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Buttons ---------- */
.tx-go { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 20px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%); box-shadow: 0 12px 26px -12px rgba(5, 150, 105, .85), inset 0 1px 0 rgba(255, 255, 255, .25); color: #fff; font: inherit; font-size: 1.02rem; font-weight: 800; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease; }
@media (hover: hover) { .tx-go:not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(5, 150, 105, .95), inset 0 1px 0 rgba(255, 255, 255, .25); } }
.tx-go:not([disabled]):active { transform: translateY(1px); }
.tx-go[disabled] { cursor: not-allowed; filter: grayscale(.5); opacity: .55; }
.tx-go.is-busy { cursor: progress; opacity: .85; filter: none; }
.tx-go.is-busy i { animation: tx-spin 1s linear infinite; }
.tx-kbd { display: none; padding: 2px 7px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; background: rgba(255, 255, 255, .12); font: inherit; font-size: .7rem; font-weight: 700; }
@media (hover: hover) and (min-width: 900px) { .tx-kbd { display: inline-block; } }
.tx-go--light { background: #fff; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5); color: var(--tx-green-d); }
.tx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--tx-line-2); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); color: var(--tx-ink); font: inherit; font-size: .88rem; font-weight: 800; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.tx-btn i { color: var(--tx-green); font-size: .82rem; }
.tx-btn:hover { border-color: #6ee7b7; background: var(--tx-mint-2); }
.tx-iconbar { display: flex; gap: 6px; }
.tx-ibtn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--tx-line-2); border-radius: 10px; background: #fff; color: var(--tx-text); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.tx-ibtn i { color: var(--tx-green); font-size: .8rem; }
.tx-ibtn:hover { border-color: #6ee7b7; color: var(--tx-ink); }
@media (max-width: 479px) { .tx-ibtn span { display: none; } .tx-ibtn { width: 36px; justify-content: center; padding: 0; } }
.tx-iconbar--dark .tx-ibtn { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; }
.tx-iconbar--dark .tx-ibtn i { color: #a7f3d0; }
.tx-iconbar--dark .tx-ibtn:hover { background: rgba(255, 255, 255, .16); }

/* notes and errors */
.tx-note { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid #f5d98b; border-radius: 12px; background: #fffaeb; color: #7a5300; font-size: .86rem; font-weight: 600; line-height: 1.5; }
.tx-note--err { border-color: #f6c5be; background: #fef3f2; color: #a3271c; }
.tx-note--info { border-color: #a7f3d0; background: var(--tx-mint-2); color: var(--tx-deep); }
.tx-note .tx-btn { flex-shrink: 0; min-height: 34px; margin-left: auto; padding: 0 12px; font-size: .8rem; }

/* ---------- Grocery: composer ---------- */
.tx-pad {
    display: block;
    width: 100%;
    height: 290px;
    min-height: 220px;
    margin-top: 14px;
    padding: 6px 18px;
    border: 1px solid var(--tx-line-2);
    border-radius: 16px;
    background-color: #fffefb;
    background-image: linear-gradient(transparent 31px, #eef2ee 31px, #eef2ee 32px);
    background-size: 100% 32px;
    background-position: 0 6px;
    background-attachment: local;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
    color: var(--tx-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tx-pad::placeholder { color: #a5b2ac; }
.tx-pad:focus { border-color: #10b981; box-shadow: var(--tx-ring); outline: none; }
.tx-meta { display: flex; justify-content: space-between; gap: 10px; margin: 8px 2px 0; color: var(--tx-muted); font-size: .78rem; font-weight: 600; }
.tx-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 18px 0 20px; }
.tx-opt { display: flex; align-items: center; gap: 10px; }
.tx-opt-l { color: var(--tx-ink); font-size: .86rem; font-weight: 800; }

/* ---------- Grocery: list ---------- */
.tx-out-head { min-height: 38px; margin-bottom: 4px; }
.tx-empty { display: grid; justify-items: center; gap: 10px; padding: 44px 18px 36px; text-align: center; }
.tx-empty-art { position: relative; width: 210px; height: 120px; margin-bottom: 8px; }
.tx-ea { position: absolute; left: 50%; display: flex; align-items: center; gap: 10px; width: 190px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -14px rgba(4, 47, 36, .45), 0 0 0 1px rgba(6, 46, 35, .05); }
.tx-ea i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: .75rem; }
.tx-ea b { flex: 1; height: 8px; border-radius: 4px; background: #e6ece9; }
.tx-ea em { width: 30px; height: 14px; border-radius: 7px; background: var(--tx-mint); }
.tx-ea--1 { top: 0; transform: translateX(-50%) rotate(-4deg) translateX(-14px); }
.tx-ea--1 i { background: #e8f8ee; color: #16a34a; }
.tx-ea--2 { top: 38px; transform: translateX(-50%) rotate(2deg) translateX(10px); }
.tx-ea--2 i { background: #eaf1ff; color: #2563eb; }
.tx-ea--3 { top: 76px; transform: translateX(-50%) rotate(-1deg); }
.tx-ea--3 i { background: #fdecec; color: #dc2626; }
.tx-empty-t { margin: 0; color: var(--tx-ink); font-size: 1.08rem; font-weight: 800; }
.tx-empty-s { max-width: 22rem; margin: 0 0 6px; color: var(--tx-muted); font-size: .9rem; line-height: 1.55; }

.tx-loading { padding: 20px 0 0; }
.tx-steps { display: grid; gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.tx-steps li { display: flex; align-items: center; gap: 12px; color: var(--tx-muted); font-size: .92rem; font-weight: 700; transition: color .2s ease; }
.tx-st { position: relative; flex-shrink: 0; width: 22px; height: 22px; border: 2px solid var(--tx-line-2); border-radius: 50%; }
.tx-steps li.is-on { color: var(--tx-ink); }
.tx-steps li.is-on .tx-st { border-color: #a7f3d0; border-top-color: var(--tx-green); animation: tx-spin .8s linear infinite; }
.tx-steps li.is-done { color: var(--tx-ink); }
.tx-steps li.is-done .tx-st { border-color: var(--tx-green); background: var(--tx-green) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
.tx-skel { display: grid; gap: 10px; }
.tx-skel i { display: block; height: 46px; border-radius: 12px; background: linear-gradient(90deg, #edf2ef 25%, #f8fbf9 50%, #edf2ef 75%); background-size: 200% 100%; animation: tx-shimmer 1.3s ease-in-out infinite; }
.tx-skel i:nth-child(1) { height: 34px; width: 45%; }
.tx-skel--cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tx-skel--cards i { height: 220px; width: auto !important; border-radius: 18px; }
@keyframes tx-spin { to { transform: rotate(360deg); } }
@keyframes tx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.tx-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 14px; color: var(--tx-text); font-size: .86rem; font-weight: 600; }
.tx-src { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #d1fae5, #ccfbf1); color: var(--tx-deep); font-size: .74rem; font-weight: 800; }
.tx-src.is-local { background: #eef1f5; color: #475569; }
.tx-prog { margin: 0 0 16px; }
.tx-prog-bar { height: 8px; overflow: hidden; border-radius: 999px; background: #e3eae6; }
.tx-prog-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34d399, #059669); transition: width .3s ease; }
.tx-prog-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 8px; color: var(--tx-muted); font-size: .8rem; font-weight: 700; }
.tx-prog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }

.tx-aisles { display: grid; gap: 12px; }
.tx-aisle { --a: #64748b; --ab: #f0f2f5; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(6, 46, 35, .06), 0 6px 16px -12px rgba(4, 47, 36, .3); }
.tx-aisle[data-aisle="produce"] { --a: #16a34a; --ab: #e8f8ee; }
.tx-aisle[data-aisle="bakery"] { --a: #d97706; --ab: #fff4e0; }
.tx-aisle[data-aisle="meat"] { --a: #dc2626; --ab: #fdecec; }
.tx-aisle[data-aisle="dairy"] { --a: #2563eb; --ab: #eaf1ff; }
.tx-aisle[data-aisle="pantry"] { --a: #a16207; --ab: #fbf1dc; }
.tx-aisle[data-aisle="canned"] { --a: #475569; --ab: #eef1f5; }
.tx-aisle[data-aisle="sauces"] { --a: #ea580c; --ab: #fff0e6; }
.tx-aisle[data-aisle="spices"] { --a: #be123c; --ab: #ffe9ee; }
.tx-aisle[data-aisle="frozen"] { --a: #0891b2; --ab: #e4f7fb; }
.tx-aisle[data-aisle="drinks"] { --a: #7c3aed; --ab: #f1ebff; }
.tx-aisle-h { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; border-bottom: 1px solid #edf1ef; }
.tx-aisle-ico { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; background: var(--ab); color: var(--a); font-size: .8rem; }
.tx-aisle-name { color: var(--tx-ink); font-size: .9rem; font-weight: 800; }
.tx-aisle-n { margin-left: auto; color: var(--tx-muted); font-size: .78rem; font-weight: 700; }
.tx-items { margin: 0; padding: 4px 0; list-style: none; }
.tx-item { display: flex; align-items: center; gap: 12px; padding: 0 8px 0 14px; transition: background-color .12s ease; }
@media (hover: hover) { .tx-item:hover { background: #f8fbf9; } }
.tx-tick { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 22px; height: 22px; margin: 0; border: 1.5px solid #c3cfc9; border-radius: 50%; background: #fff center / 13px no-repeat; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, transform .12s ease; }
.tx-tick:checked { border-color: var(--tx-green); background-color: var(--tx-green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); transform: scale(1.05); }
.tx-tick:focus-visible { outline: 3px solid #6ee7b7; outline-offset: 2px; }
.tx-item label { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; color: var(--tx-ink); font-size: .96rem; font-weight: 600; line-height: 1.35; cursor: pointer; }
.tx-item-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tx-item-qty { flex-shrink: 0; color: var(--tx-green-d); font-size: .86rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-item.is-done .tx-item-name { color: #9aa8a2; text-decoration: line-through; }
.tx-item.is-done .tx-item-qty { color: #9aa8a2; }
.tx-x { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; color: #a3b0a9; font-size: .78rem; cursor: pointer; opacity: 0; transition: opacity .12s ease, background-color .12s ease, color .12s ease; }
.tx-item:hover .tx-x, .tx-x:focus-visible { opacity: 1; }
@media (hover: none) { .tx-x { opacity: .7; } }
.tx-x:hover { background: #fef3f2; color: #dc2626; }
.tx-hide-done .tx-item.is-done, .tx-hide-done .tx-aisle.is-all-done { display: none; }

/* ---------- Macro planner: dark summary panel ---------- */
.tx-pane--dark { padding: 0 12px 12px; }
@media (min-width: 640px) { .tx-pane--dark { padding: 0 16px 16px; } }
@media (min-width: 640px) { .tx-pane--dark { padding: 16px; } }
.tx-dark { position: relative; overflow: hidden; padding: 22px; border-radius: 22px; background: radial-gradient(520px 260px at 100% 0%, rgba(52, 211, 153, .28), transparent 65%), linear-gradient(160deg, #053f31 0%, #065f46 60%, #047857 100%); color: #fff; }
@media (min-width: 640px) { .tx-dark { padding: 26px; } }
.tx-dark::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; }
.tx-dark > * { position: relative; }
.tx-dempty { display: grid; justify-items: center; gap: 12px; padding: 40px 10px 20px; text-align: center; }
.tx-ghost { width: 140px; height: 140px; }
.tx-dempty-t { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 800; }
.tx-missing { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tx-missing li { padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d1fae5; font-size: .8rem; font-weight: 700; }
.tx-dark .tx-note--err { border-color: rgba(254, 202, 202, .5); background: rgba(254, 226, 226, .14); color: #fee2e2; }
.tx-dark .tx-note { border-color: rgba(253, 230, 138, .45); background: rgba(254, 243, 199, .12); color: #fef3c7; }

.tx-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin: 18px 0 20px; }
.tx-donut { position: relative; flex-shrink: 0; width: 168px; height: 168px; }
.tx-donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.tx-donut circle { transition: stroke-dasharray .4s ease, stroke-dashoffset .4s ease; }
.tx-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tx-donut-k { color: #fff; font-size: 2.1rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tx-donut-u { margin-top: 5px; color: #a7f3d0; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tx-legend { display: grid; flex: 1; gap: 12px; min-width: 170px; margin: 0; padding: 0; list-style: none; }
.tx-legend li { display: flex; align-items: center; gap: 12px; }
.tx-dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 4px; }
.tx-legend b { display: block; color: #fff; font-size: 1.35rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tx-legend b small { color: #a7f3d0; font-size: .58em; font-weight: 800; }
.tx-legend span { color: rgba(236, 253, 245, .72); font-size: .78rem; font-weight: 600; }
.tx-dk { margin: 0 0 10px; color: #a7f3d0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tx-mrows { display: grid; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.tx-mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.tx-mrow-n { color: #fff; font-size: .9rem; font-weight: 800; }
.tx-mrow-n small { margin-left: 6px; color: rgba(236, 253, 245, .6); font-size: .74rem; font-weight: 600; }
.tx-mrow-k { color: #fff; font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-mrow-m { grid-column: 1 / -1; display: flex; gap: 12px; color: rgba(236, 253, 245, .75); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tx-mrow-m i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 2px; }
.tx-warn-dark { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(254, 243, 199, .14); color: #fef3c7; font-size: .82rem; font-weight: 600; line-height: 1.5; }
.tx-dstatus { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 16px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: .9rem; font-weight: 700; text-align: left; cursor: pointer; }
.tx-dstatus span { flex: 1; }
.tx-dstatus.is-busy { cursor: default; }
.tx-dstatus.is-busy .fa-spinner { animation: tx-spin 1s linear infinite; color: #a7f3d0; }
.tx-dstatus.is-done { border-color: #a7f3d0; background: #ecfdf5; color: #064e3b; }
.tx-dstatus.is-done i { color: #059669; }
.tx-dstatus.is-err { border-color: rgba(254, 202, 202, .6); background: rgba(254, 226, 226, .16); color: #fee2e2; }
.tx-dstatus:empty { display: none; }
.tx-more { margin-top: 14px; color: rgba(236, 253, 245, .7); font-size: .8rem; line-height: 1.6; }
.tx-more a { color: #a7f3d0; font-weight: 700; }

/* ---------- Macro planner: AI day plan ---------- */
.tx-optional { margin-top: 22px; padding: 18px; border: 1px solid var(--tx-line); border-radius: 18px; background: var(--tx-soft); }
.tx-optional-h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--tx-ink); font-size: .92rem; font-weight: 800; }
.tx-optional-h i { color: var(--tx-green); }
.tx-optional-h small { color: var(--tx-muted); font-size: .76rem; font-weight: 600; }
.tx-go--top { margin-top: 22px; }
#mp-msg { margin-top: 18px; }
.tx-pane--plan { border-top: 1px solid var(--tx-line); }
.tx-pane--plan .tx-pl-head { margin-top: 0; }
.tx-pane--plan > .tx-note { margin: 0 0 16px; }
.tx-plan { margin-top: 22px; padding: 22px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(6, 46, 35, .07), 0 20px 50px -30px rgba(4, 47, 36, .45); scroll-margin-top: 100px; }
@media (min-width: 640px) { .tx-plan { padding: 30px; } }
.tx-plan-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.tx-plan-ico { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #34d399, #047857); box-shadow: 0 10px 20px -10px rgba(4, 120, 87, .8); color: #fff; font-size: 1.05rem; }
.tx-prefs { display: grid; gap: 0 28px; padding: 20px; border-radius: 20px; background: var(--tx-soft); }
@media (min-width: 900px) { .tx-prefs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tx-prefs-row, .tx-plan-go { grid-column: 1 / -1; } }
.tx-prefs .tx-field { margin-bottom: 18px; }
.tx-prefs-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; margin-bottom: 18px; }
.tx-prefs-row .tx-field { flex: 1 1 260px; margin: 0; }
.tx-prefs-row .tx-switch { min-height: 46px; }
.tx-plan-go { max-width: 30rem; width: 100%; justify-self: center; }

.tx-pl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 26px 0 16px; }
.tx-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.tx-acc span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--tx-soft); box-shadow: inset 0 0 0 1px var(--tx-line); color: var(--tx-text); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tx-acc span b { color: var(--tx-ink); }
.tx-acc span.is-good { background: var(--tx-mint-2); box-shadow: inset 0 0 0 1px #a7f3d0; color: var(--tx-green-d); }
.tx-acc span.is-off { background: #fffaeb; box-shadow: inset 0 0 0 1px #f5d98b; color: #7a5300; }
.tx-meals { display: grid; gap: 16px; }
.tx-meal { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(6, 46, 35, .08), 0 12px 28px -20px rgba(4, 47, 36, .5); }
.tx-meal-top { padding: 18px 18px 14px; background: linear-gradient(180deg, var(--tx-soft), #fff); }
.tx-meal-slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--tx-green-d); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tx-meal-slot span { display: inline-flex; align-items: center; gap: 7px; }
.tx-meal-slot em { color: var(--tx-muted); font-style: normal; font-weight: 700; letter-spacing: 0; text-transform: none; }
.tx-meal-name { margin: 0 0 12px; color: var(--tx-ink); font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.tx-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-mchip { padding: 3px 9px; border-radius: 8px; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-mchip--k { background: var(--tx-ink); color: #fff; }
.tx-mchip--p { background: #fff0ee; color: #c2382a; }
.tx-mchip--c { background: #edf3ff; color: #2f5fc4; }
.tx-mchip--f { background: #fff6dc; color: #946500; }
.tx-ings { margin: 0; padding: 6px 18px 4px; list-style: none; }
.tx-ings li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px dashed #e5ebe8; color: var(--tx-text); font-size: .88rem; line-height: 1.4; }
.tx-ings li:first-child { border-top: 0; }
.tx-ings b { flex-shrink: 0; min-width: 52px; color: var(--tx-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-ings em { margin-left: auto; padding-left: 8px; color: var(--tx-muted); font-size: .78rem; font-style: normal; white-space: nowrap; }
.tx-how { margin: auto 18px 16px; border-top: 1px solid var(--tx-line); }
.tx-how summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 4px; color: var(--tx-green-d); font-size: .84rem; font-weight: 800; list-style: none; cursor: pointer; }
.tx-how summary::-webkit-details-marker { display: none; }
.tx-how summary i { transition: transform .2s ease; }
.tx-how[open] summary i { transform: rotate(180deg); }
.tx-how ol { margin: 8px 0 0; padding-left: 1.2rem; color: var(--tx-text); font-size: .86rem; line-height: 1.6; }
.tx-how li { margin: 3px 0; }
.tx-pl-foot { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 900px) { .tx-pl-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tx-tip { display: flex; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--tx-mint-2); color: var(--tx-deep); font-size: .9rem; line-height: 1.55; }
.tx-tip i { margin-top: 3px; color: var(--tx-green); }
.tx-upsell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, #053f31, #047857); color: #ecfdf5; font-size: .9rem; font-weight: 600; line-height: 1.5; }
.tx-upsell b { display: block; color: #fff; font-size: 1rem; }
.tx-upsell a { flex-shrink: 0; padding: 10px 16px; border-radius: 12px; background: #fff; color: var(--tx-green-d); font-weight: 800; text-decoration: none; }
.tx-disclaim { margin: 14px 0 0; color: var(--tx-muted); font-size: .78rem; line-height: 1.55; text-align: center; }

/* ---------- Mobile summary bar (macro) ---------- */
.tp-sbar { position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 40; display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 18px; background: #053f31; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); color: #fff; }
.tp-sbar-k { font-size: 1.05rem; font-weight: 900; }
.tp-sbar-m { flex: 1; min-width: 0; color: rgba(236, 253, 245, .75); font-size: .76rem; font-weight: 700; }
.tp-sbar button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; color: var(--tx-green-d); font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.tp-sbar.is-on { display: flex; }
@media (min-width: 640px) { .tp-sbar { right: auto; left: 50%; width: min(560px, calc(100% - 24px)); transform: translateX(-50%); } }

/* ---------- Article extras ---------- */
.tp-intro { display: grid; gap: 22px; align-items: center; }
@media (min-width: 768px) { .tp-intro { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; } }
.tp-intro > :first-child > p:last-child { margin-bottom: 0; }
.tp-figure { margin: 0; }
.tp-figure img { display: block; width: 100%; height: auto; border: 2px solid var(--cp-line); border-radius: 22px; background: var(--cp-surface); object-fit: cover; }
.tp-linkgrid { display: grid; gap: 12px; margin: 1.25rem 0 0; }
@media (min-width: 560px) { .tp-linkgrid { grid-template-columns: 1fr 1fr; } }
.tp-linkcard { display: flex; flex-direction: column; gap: 3px; padding: 15px 18px; border: 2px solid var(--cp-line); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--cp-line); color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .1s ease, transform .1s ease; }
.tp-linkcard:hover { border-color: var(--cp-sel-border); box-shadow: 0 4px 0 var(--cp-sel-lip); }
.tp-linkcard:active { transform: translateY(4px); box-shadow: none; }
.tp-linkcard b { color: var(--cp-ink); font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.tp-linkcard span { color: var(--cp-muted); font-size: .88rem; font-weight: 600; line-height: 1.45; }
.cp-prose .tp-linkcard { text-decoration: none; }
@media (min-width: 640px) { .cp-cards--3 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1280px) { .cp-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Print: only the result being printed ---------- */
.tp-print-title { display: none; }
@media print {
    body.tp-printing * { visibility: hidden !important; }
    body.tp-printing .tp-print-area, body.tp-printing .tp-print-area * { visibility: visible !important; }
    body.tp-printing .tp-print-area { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; background: #fff !important; color: #000 !important; }
    body.tp-printing .tp-print-area :is(.tx-iconbar, .tx-x, .tx-prog, .tx-note, .tx-empty, .tx-loading, .tx-how summary, .tx-upsell, .tx-prefs, .tx-plan-head, .tx-dk--cta, .tx-go, .tx-more) { display: none !important; }
    body.tp-printing .tp-print-title { display: block !important; margin: 0 0 8px; color: #000; font-size: 20pt; font-weight: 800; }
    body.tp-printing .tx-aisles { display: block !important; columns: 2; column-gap: 24px; }
    body.tp-printing .tx-aisle { margin-bottom: 12px; break-inside: avoid; box-shadow: 0 0 0 1px #ccc; }
    body.tp-printing .tx-hide-done .tx-item.is-done { display: flex !important; }
    body.tp-printing .tx-dark { background: #fff !important; color: #000 !important; }
    body.tp-printing .tx-dark :is(.tx-h--light, .tx-donut-k, .tx-legend b, .tx-mrow-n, .tx-mrow-k) { color: #000 !important; }
    body.tp-printing .tx-mrow { background: #f3f3f3 !important; }
    body.tp-printing .tx-how ol { display: block !important; }
    body.tp-printing .tx-meal { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { .tx-donut circle, .tx-prog-bar span, .tx-go, .tx-skel i, .tx-steps li.is-on .tx-st { transition: none; animation: none; } }