/* Evendraft — tenders.css: the free open-tender directory (/tenders and /tenders/<slug>).
   Built on the tokens, grid, fields and buttons of site.css; loaded after it, on directory pages only.
   The listing is worked in, not read once, so nothing on it performs an entrance: motion here is feedback
   (a switch, a press, the filter sheet on phones). The same grid as every inner page: the left zone
   (columns 1-4) carries the counts and the filters, the list hangs from the axis at column 6.
   Without script (html:not(.tx)) the filter controls are left out and the full list shows, closing
   soonest first. */

/* ---------- listing frame ---------- */
.tx-page { padding-block: clamp(1.75rem, 3.2vw, 3rem) clamp(3.5rem, 6vw, 5.5rem); row-gap: 1.25rem; align-items: start; grid-template-rows: auto auto 1fr; } /* the filters' height goes to the list's row, never under the search bar */
.tx-head { grid-column: 6 / -1; grid-row: 1; padding-bottom: clamp(0.5rem, 1.4vw, 1.25rem); }
.tx-head h1 { font-size: clamp(2.25rem, 1.2rem + 2.55vw, 3.5rem); line-height: 0.98; letter-spacing: -0.032em; font-weight: 480; }
.tx-head__lead { margin-top: 0.9rem; font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.375rem); line-height: 1.32; letter-spacing: -0.008em; max-width: 44ch; }
.tx-warn { margin-top: 1rem; padding: 0.7rem 0.9rem; background: var(--act-bg); color: var(--act-ink); font-size: var(--step-small); font-weight: 600; max-width: 60ch; }
.tx-stats { grid-column: 1 / 5; grid-row: 1; align-self: start; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 2rem; padding-top: 0.45rem; }
.tx-stats dt { font-size: var(--step-small); color: var(--muted); }
.tx-stats dd { margin: 0.1rem 0 0; font-size: var(--step-small); font-variant-numeric: tabular-nums lining-nums; }
.tx-stats__n dd { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.2vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; font-weight: 450; }
.tx-stats__unit { font-size: 0.42em; letter-spacing: -0.01em; }
.tx-stats__memo { flex: 1 1 100%; max-width: 34ch; margin-top: 0.6rem; }
.tx-stats__memo dd { font-size: var(--step-small); line-height: 1.45; }
.tx-stats__memo a { font-weight: 600; color: var(--accent); }
.tx-side { grid-column: 1 / 5; grid-row: 2 / span 2; position: sticky; top: 1rem; display: grid; gap: 1.5rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; margin: -2px; }
.tx-bar { grid-column: 6 / -1; grid-row: 2; display: flex; align-items: flex-end; gap: 0.75rem; }
.tx-results { grid-column: 6 / -1; grid-row: 3; min-width: 0; }
html:not(.tx) .tx-js { display: none !important; }
/* components here space their parts with gap, not with the site's paragraph spacing */
.tx-small p, .tc p, .tx-status p, .tx-empty p, .tp-aside p, .tp-title p, .tp-steps p, .tx-source p { margin-top: 0; }

/* ---------- the small-firms switch: the directory's own filter, on green ---------- */
.tx-small { display: grid; gap: 0.35rem; padding: 1.1rem 1.25rem 1.25rem; background: var(--green); color: var(--green-ink); }
.tx-small__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; min-height: 2.75rem; -webkit-tap-highlight-color: transparent; }
.tx-small__name { font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.7rem); line-height: 1.08; letter-spacing: -0.015em; font-weight: 500; }
.tx-small__n { font-size: var(--step-small); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.tx-small__rule { font-size: var(--step-small); line-height: 1.42; color: var(--green-soft); max-width: 46ch; }
.tx-small__row .switch-word { margin-left: auto; margin-right: -0.4rem; font-size: var(--step-small); font-weight: 700; letter-spacing: 0.02em; min-width: 1.75rem; text-align: right; }
.tx-small__row .switch-word::before { content: "Off"; color: var(--green-soft); }
.tx-small__row input:checked ~ .switch-word::before { content: "On"; color: var(--green-ink); }
.tx-small__more { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.35rem; padding-top: 0.6rem; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--green-ink) 22%, transparent); font-size: var(--step-small); font-weight: 600; line-height: 1.35; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* taste-skill-ignore: a hairline rule inside the green block */
.tx-small__more[hidden] { display: none; }
.tx-small__more input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0; accent-color: var(--paper); }
.tx-small__more input:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }

/* switches: a square track and a square knob, like every control on the site */
.switch { flex: none; position: relative; width: 3.5rem; height: 2rem; background: color-mix(in srgb, var(--green-ink) 26%, transparent); transition: background-color var(--t-ui) var(--ease-out); }
.switch::after { content: ""; position: absolute; top: 0.3125rem; left: 0.3125rem; width: 1.375rem; height: 1.375rem; background: var(--green-ink); transition: transform var(--t-ui) var(--ease-out), scale var(--t-press) var(--ease-out), background-color var(--t-ui) var(--ease-out); }
input:checked ~ .switch { background: var(--paper); }
input:checked ~ .switch::after { transform: translateX(1.5rem); background: var(--accent); }
input:focus-visible ~ .switch { outline: 2px solid var(--green-ink); outline-offset: 3px; }
.switch--ink { background: color-mix(in srgb, var(--ink) 20%, transparent); }
.switch--ink::after { background: var(--paper); }
input:checked ~ .switch--ink { background: var(--accent); }
input:checked ~ .switch--ink::after { background: var(--paper); }
input:focus-visible ~ .switch--ink { outline-color: var(--accent); }
.tx-small__row:active .switch::after, .tx-check:active .switch::after { scale: 0.9; }

/* ---------- filters (a column on desktop, a sheet on phones and tablets) ---------- */
.tx-filters { display: grid; gap: 0; }
.tx-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tx-sheet__head h2 { font-family: var(--font-text); font-size: var(--step-small); font-weight: 700; }
.tx-sheet__close, .tx-sheet__foot [data-show] { display: none; }
.tx-sheet__body { display: grid; gap: 1.35rem; padding-top: 0.8rem; }
.tx-field { display: grid; gap: 0.4rem; min-width: 0; }
.tx-field__label { font-size: var(--step-small); font-weight: 600; }
.tx-field__hint { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); font-weight: 400; }
.tx-field select.field { font-size: 1rem; }
.tx-seg { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 0.4rem; }
.tx-seg legend { padding: 0; margin-bottom: 0.4rem; }
.tx-seg__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.tx-seg label { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tx-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tx-seg span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; min-height: 3.25rem; padding: 0.35rem 0.25rem; background: var(--paper); font-size: var(--step-small); font-weight: 600; line-height: 1.15; text-align: center; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.tx-seg small { font-size: 0.8125rem; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; transition: color var(--t-hover) ease; }
.tx-seg input:checked + span { background: var(--ink); color: var(--paper); }
.tx-seg input:checked + span small { color: var(--dark-soft); }
.tx-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .tx-seg input:not(:checked):hover + span { background: var(--accent-tint); } }
.tx-check { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; background: var(--paper); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tx-check__text { display: grid; gap: 0.15rem; }
.tx-field--region { gap: 0.6rem; }
.tx-check--wide { padding: 0.7rem 0.9rem; }
.tx-check--wide[hidden] { display: none; }
.tx-sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; }
.tx-clear { min-height: 2.75rem; font-size: var(--step-small); font-weight: 600; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
@media (hover: hover) and (pointer: fine) { .tx-clear:hover { text-decoration-color: currentColor; } }

/* ---------- the bar over the list: search and sort ---------- */
.tx-search { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.4rem; }
.tx-search .field { padding-left: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%2355524A' stroke-width='2'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5'/%3E%3Cpath d='M11.6 11.6 16 16'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.85rem 50%; background-size: 1.125rem; }
.tx-search .field::placeholder { color: var(--muted); opacity: 1; }
.tx-search .field::-webkit-search-cancel-button { cursor: pointer; }
.tx-sort--bar { flex: 0 0 14rem; }
.tx-sort--sheet { display: none; }
.tx-open { display: none; }

/* ---------- the status line: the count and the active filters ---------- */
.tx-status { display: grid; gap: 0.75rem; padding: 1.1rem 0 1rem; }
.tx-count { font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.9rem); line-height: 1.1; letter-spacing: -0.015em; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.tx-count__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.tx-count__sub { font-size: var(--step-small); color: var(--muted); }
.tx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.tx-chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; padding: 0 0.55rem 0 0.7rem; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 0.875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; max-width: 100%; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); } /* taste-skill-ignore: an outline chip, drawn as an inset line */
.chip span:first-child { overflow: hidden; text-overflow: ellipsis; }
.chip b { font-weight: 400; font-size: 1.2em; line-height: 1; opacity: 0.75; }
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--accent-tint); } }
@media (pointer: coarse) { .chip { position: relative; } .chip::after { content: ""; position: absolute; inset: -6px -2px; } } /* a 44px tap target around a 32px chip */
.tx-error { margin-bottom: 1rem; padding: 0.8rem 1rem; background: var(--act-bg); color: var(--act-ink); font-size: var(--step-small); font-weight: 600; }
.tx-error a { color: inherit; }

/* ---------- the list and its cards ---------- */
.tx-list { display: grid; gap: 0.5rem; margin: 0; }
.tx:not(.tx-on) .tx-list > li:nth-child(n+31) { display: none; } /* the first page, before tenders.js has run (PAGE in the build) */
.tx .tx-pager { display: none; } /* with script the list shows more in place; the page links are for visitors without it */
.tx-wait:not(.tx-on) .tx-list { visibility: hidden; }
.tc { content-visibility: auto; contain-intrinsic-size: auto 11.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 12.5rem); grid-template-rows: auto 1fr; column-gap: clamp(1rem, 2vw, 2rem); align-content: start; padding: 1.15rem 1.3rem 1.2rem; background: var(--paper); }
.tc__main { grid-column: 1; grid-row: 1; display: grid; gap: 0.3rem; align-content: start; min-width: 0; }
.tc__act { grid-column: 1; grid-row: 2; align-self: start; }
.tx-list .tc__t { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1.06rem + 0.42vw, 1.45rem); font-weight: 500; } /* over .body h3 when a list sits in a document section */
.tc__t { font-family: var(--font-display); font-size: clamp(1.2rem, 1.06rem + 0.42vw, 1.45rem); line-height: 1.18; letter-spacing: -0.01em; font-weight: 500; overflow-wrap: break-word; text-wrap: pretty; }
.tc__t a { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .tc__t a:hover { text-decoration-color: currentColor; } }
.tc__by { font-weight: 600; font-size: 1rem; line-height: 1.35; overflow-wrap: break-word; }
.tc__meta { font-size: var(--step-small); color: var(--muted); line-height: 1.4; }
.tc__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.tag { flex: none; display: inline-flex; align-items: center; min-height: 1.625rem; padding: 0.15rem 0.55rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.tag--small { background: var(--ok-bg); color: var(--ok-ink); }
.tag--docs { background: var(--chk-bg); color: var(--chk-ink); }
.tag--note { background: var(--surface); color: var(--ink); white-space: normal; }
.tag--warn { background: var(--act-bg); color: var(--act-ink); white-space: normal; }
.tag--quiet { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); font-weight: 500; white-space: normal; } /* taste-skill-ignore: a neutral outline tag, not a card */
.tc__facts { grid-column: 2; grid-row: 1; margin: 0; text-align: right; display: grid; gap: 0.75rem; align-content: start; } /* dates and values flush to the card's right edge */
.tc__facts > div { min-width: 0; }
.tc__facts dt { font-size: 0.8125rem; color: var(--muted); }
.tc__facts dd { margin: 0.1rem 0 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; }
.tc .tc__late { grid-column: 2; grid-row: 2; align-self: end; margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.3; color: var(--muted); text-align: right; } /* beside the actions, under the deadline */
.tc__late[hidden] { display: none; }
.tc__n { font-family: var(--font-text); font-size: 0.6em; font-weight: 600; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.due { display: block; width: fit-content; margin: 0.3rem 0 0 auto; font-family: var(--font-text); font-size: var(--step-small); font-weight: 600; line-height: 1.35; color: var(--muted); }
.due.is-soon { padding: 0.12rem 0.45rem; background: var(--act-bg); color: var(--act-ink); }
.tc .tc__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 0.75rem; }
.tc__act .button { min-height: 2.75rem; padding: 0 1.3rem; font-size: 1rem; }
.tc__memo { font-size: var(--step-small); font-weight: 600; color: var(--accent); }
.tc--mini { padding-block: 1rem 1.05rem; }
.tx-list--mini .tc, .tx-on .tc { content-visibility: visible; } /* the skip-rendering hint is for the long list without script */
.tx-empty { display: grid; justify-items: start; gap: 0.6rem; padding: 1.5rem 1.4rem; background: var(--paper); }
.tx-empty__h { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.012em; }
.tx-empty .button { margin-top: 0.4rem; }
.tx-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.25rem; }
.tx-more__n { font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.tx-more [hidden] { display: none; }
.tx-noscript { margin-bottom: 1rem; padding: 0.8rem 1rem; background: var(--surface); font-size: var(--step-small); font-weight: 600; max-width: 62ch; }
.tx-pager { margin-top: 1.5rem; display: grid; gap: 0.6rem; }
.tx-pager__where { font-size: var(--step-small); color: var(--muted); }
.tx-pager__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.tx-pager ol { display: flex; flex-wrap: wrap; gap: 3px; margin: 0; padding: 0; list-style: none; }
.tx-pager ol a, .tx-pager__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.5rem; background: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; text-decoration: none; }
.tx-pager__gap { background: transparent; color: var(--muted); min-width: 1.5rem; }
.tx-pager ol a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.tx-pager__step { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: var(--surface); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .tx-pager ol a:not([aria-current]):hover, .tx-pager__step:hover { background: var(--accent-tint); } }
.tx-page--plain .tx-head, .tx-page--plain .tx-results { grid-row: auto; }
.tx-page--plain { grid-template-rows: none; }
.tx-head__back { margin-top: 0.75rem; font-weight: 600; }
.button[hidden] { display: none; }

/* ---------- the source line, on every directory page ---------- */
.tx-source { background: var(--surface); padding-block: 1.6rem 1.8rem; }
.tx-source .g { row-gap: 0.6rem; }
.tx-source p { grid-column: span 6; font-size: var(--step-small); line-height: 1.5; max-width: 62ch; }
.tx-source p + p { margin-top: 0; }

/* ---------- one tender ---------- */
.tp-head { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.25rem); row-gap: 1.5rem; align-items: start; }
.tp-crumb { grid-column: 1 / -1; font-size: var(--step-small); color: var(--muted); }
.tp-crumb a { color: var(--ink); }
.tp-title { grid-column: 6 / -1; grid-row: 2; min-width: 0; }
.tp-title h1 { font-size: clamp(2rem, 1.25rem + 2.3vw, 3.6rem); line-height: 1.02; letter-spacing: -0.026em; font-weight: 480; max-width: 22ch; overflow-wrap: break-word; text-wrap: pretty; }
.tp-title.is-mid h1 { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.9rem); line-height: 1.05; max-width: 28ch; } /* official titles are long: the size follows the length */
.tp-title.is-long h1 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem); line-height: 1.1; letter-spacing: -0.018em; max-width: 36ch; }
.tp-title .tp-buyer { margin-top: 1rem; font-family: var(--font-display); font-size: clamp(1.2rem, 1.02rem + 0.6vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; }
.tp-title .tc__tags { margin-top: 1rem; }
.tp-title .tp-supplier { margin-top: 0.85rem; }
.tp-supplier { margin-top: 0.85rem; font-size: var(--step-small); color: var(--muted); max-width: 52ch; }
.tp-aside { grid-column: 1 / 5; grid-row: 2; padding: 1.25rem 1.35rem 1.4rem; background: var(--paper); }
.tp-due { font-family: var(--font-display); font-size: clamp(2.3rem, 1.7rem + 1.5vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; font-weight: 450; font-variant-numeric: tabular-nums lining-nums; }
.tp-due.is-soon { color: var(--act-ink); }
.tp-aside .tp-due__when { margin-top: 0.55rem; font-size: var(--step-small); color: var(--muted); }
.tp-aside .tp-act { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.35rem; }
.tp-act .link { font-weight: 600; font-size: var(--step-small); overflow-wrap: anywhere; }
.tp-act .button { white-space: normal; text-wrap: balance; text-align: center; height: auto; min-height: 3.25rem; padding-block: 0.65rem; max-width: 100%; }
.tp-strip { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.tp-strip .facts-strip > div { min-width: 0; }
.tp-strip .facts-strip dd { overflow-wrap: anywhere; } /* a portal's web address has no spaces to break at */
.tp-strip .facts-strip dd + dd { margin-top: 0.25rem; }
.tp-steps { margin: 0; padding: 0; list-style: none; box-shadow: inset 0 1px 0 var(--rule); } /* taste-skill-ignore: a hairline ledger rule, like the steps on How we work */
.tp-steps li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--gutter); row-gap: 0.3rem; padding-block: 1.1rem 1.2rem; box-shadow: inset 0 -1px 0 var(--rule); } /* taste-skill-ignore: a hairline ledger rule, not a card */
.tp-steps__when { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.005em; font-variant-numeric: tabular-nums lining-nums; }
.tp-steps__rel { display: block; margin-top: 0.15rem; font-family: var(--font-text); font-size: var(--step-small); color: var(--muted); }
.tp-steps h3 { font-family: var(--font-text); font-size: var(--step-body); font-weight: 700; margin: 0 0 0.25rem; }
.tp-steps p { font-size: 1rem; }
.tp-steps .tp-steps__links { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-weight: 600; font-size: var(--step-small); }
.tp-steps__links a { overflow-wrap: anywhere; }
.tp-summary { margin: 0; padding: 1.25rem 1.4rem 1.35rem; background: var(--paper); }
.tp-summary p { font-family: var(--font-display); font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem); line-height: 1.45; max-width: 60ch; overflow-wrap: break-word; }
.tp-summary.is-empty p { font-family: var(--font-text); font-size: 1rem; color: var(--muted); }
.tp-sib { margin: 0; padding: 0; list-style: none; box-shadow: inset 0 1px 0 var(--rule); } /* taste-skill-ignore: a hairline ledger rule */
.tp-sib li { padding-block: 0.75rem 0.8rem; box-shadow: inset 0 -1px 0 var(--rule); } /* taste-skill-ignore: a hairline ledger rule */
.tp-sib__t { font-weight: 600; }
.tp-sib__here { font-weight: 400; color: var(--muted); }
.tp-sib__m { margin-top: 0.15rem; font-size: var(--step-small); color: var(--muted); overflow-wrap: anywhere; }
.tp-dl { margin: 1.5rem 0 0; box-shadow: inset 0 1px 0 var(--rule); } /* taste-skill-ignore: a hairline ledger rule */
.tp-dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--gutter); padding-block: 0.75rem 0.8rem; box-shadow: inset 0 -1px 0 var(--rule); } /* taste-skill-ignore: a hairline ledger rule, not a card */
.tp-dl dt { font-size: var(--step-small); color: var(--muted); padding-top: 0.12rem; }
.tp-dl dd { margin: 0; font-size: 1rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.tp-dl__note { color: var(--muted); }
.tp-dl__rule { display: block; margin-top: 0.3rem; font-size: var(--step-small); color: var(--muted); }
.tp-dl__by { display: block; font-size: 0.8125rem; color: var(--muted); }
.tp-dl dt { color: var(--ink); }
.body ul.tp-cpv { padding-left: 0; list-style: none; gap: 0.2rem; }
.tp-cpv .nums { font-weight: 600; margin-right: 0.35rem; }
.tp-cpv__more summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; font-size: var(--step-small); font-weight: 600; color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; }
.tp-cpv__more[open] summary { margin-bottom: 0.2rem; }
.body .tp-cpv__more ul.tp-cpv { margin-top: 0; }
.tp-more__all { margin-top: 1.25rem; }
.cta-sec .card { align-self: start; } /* the memo card keeps its own height beside the text */
.tp-more__all .button { white-space: normal; text-align: left; min-height: 3rem; padding-block: 0.6rem; }

/* ---------- tablet and phone ---------- */
@media (max-width: 63.99em) {
  .tx-page { grid-template-rows: none; }
  .tx-head, .tx-stats, .tx-side, .tx-bar, .tx-results { grid-column: 1 / -1; grid-row: auto; }
  .tx-head { padding-bottom: 0; }
  .tx-head h1 { max-width: 18ch; }
  .tx-stats { align-items: baseline; gap: 0.2rem 1.25rem; padding-bottom: 0; }
  .tx-stats > div { display: flex; align-items: baseline; gap: 0.4rem; }
  .tx-stats__n dt { display: none; }
  .tx-stats__n dd { font-family: var(--font-text); font-size: var(--step-small); font-weight: 600; letter-spacing: 0; }
  .tx-stats__unit { font-size: inherit; }
  .tx-stats__memo { display: none !important; }
  .tx-side { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; display: block; }
  .tx-bar { align-items: flex-end; margin-top: 0.25rem; }
  .tx-sort--bar { display: none; }
  .tx-sort--sheet { display: grid; }
  .tx-open { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; min-height: 3.25rem; padding: 0 1.15rem; background: var(--ink); color: var(--paper); font-weight: 600; -webkit-tap-highlight-color: transparent; transition: transform var(--t-press) var(--ease-out); }
  .tx-open:active { transform: scale(0.97); }
  .tx-open__n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.3rem; background: var(--paper); color: var(--ink); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
  /* the sheet */
  .tx-filters { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-width: 40rem; margin-inline: auto; max-height: min(88vh, 46rem); max-height: min(88dvh, 46rem); display: flex; flex-direction: column; background: var(--bg); transform: translateY(102%); visibility: hidden; transition: transform 360ms var(--ease-exit), visibility 0s linear 360ms; }
  .tx-filters.is-open { transform: none; visibility: visible; transition: transform 520ms var(--ease-drawer), visibility 0s; }
  .tx-filters.is-open { box-shadow: 0 -12px 40px rgba(29, 28, 26, 0.18); } /* taste-skill-ignore: the open sheet floats over the page, a real overlay */
  .tx-sheet__head { flex: none; padding: 0.35rem 0.5rem 0.35rem var(--margin); background: var(--paper); }
  .tx-sheet__head h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.012em; }
  .tx-sheet__close { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.9rem; font-weight: 600; font-size: var(--step-small); }
  .tx-sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem var(--margin) 1.5rem; }
  .tx-sheet__foot { flex: none; padding: 0.75rem var(--margin) calc(0.75rem + env(safe-area-inset-bottom, 0px)); background: var(--paper); }
  .tx-sheet__foot [data-show] { display: inline-flex; flex: 1 1 auto; max-width: 18rem; }
  .tx-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(29, 28, 26, 0.42); opacity: 0; transition: opacity 360ms ease; }
  .tx-scrim.is-on { opacity: 1; }
  .tp-title, .tp-aside { grid-column: 1 / -1; grid-row: auto; }
  .tp-title h1 { max-width: 24ch; }
}
@media (min-width: 64em) { .tx-scrim { display: none; } }
@media (max-width: 44.99em) {
  .tx-page { padding-top: 1.5rem; row-gap: 0.9rem; }
  .tx-head h1 { font-size: clamp(2rem, 8.8vw, 2.6rem); }
  .tx-head__lead { margin-top: 0.6rem; font-size: 1.0625rem; }
  .tx-small { gap: 0.2rem; padding: 0.55rem 1rem 0.85rem; }
  .tx-small__name { font-size: 1.3rem; }
  .tx-small__rule { font-size: 0.8125rem; }
  .tx-status { padding: 0.5rem 0 0.75rem; gap: 0.6rem; }
  .tx-count { font-size: 1.3rem; }
  .tc { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 1rem 1rem 1.05rem; }
  .tc__main, .tc__act { grid-column: 1; grid-row: auto; }
  .tc__facts { text-align: left; grid-column: 1; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 1rem; gap: 0 1rem; margin-top: 0.5rem; padding-top: 0.55rem; box-shadow: inset 0 1px 0 var(--rule); } /* taste-skill-ignore: a hairline rule inside the card */
  .tc__facts dd { font-size: 1.05rem; }
  .tc__facts .due { margin-left: 0; }
  .tc .tc__act { margin-top: 0.55rem; gap: 0.4rem 1rem; }
  .tc__act .button { min-height: 2.25rem; padding: 0 0.95rem; font-size: 0.9375rem; }
  .tc__act .button::after { content: ""; position: absolute; inset: -4px 0; } /* keeps a 44px tap target */
  .tc__act .button { position: relative; }
  .tc__main { gap: 0.2rem; }
  .tc .tc__late { grid-column: 1; grid-row: auto; align-self: start; margin-top: 0.4rem; text-align: left; }
  .tc__tags { margin-top: 0.2rem; }
  .tx-more .button { width: 100%; }
  .tx-source p { grid-column: 1 / -1; }
  .tp-head { padding-top: 1.1rem; row-gap: 1.1rem; }
  .tp-title h1 { font-size: clamp(1.6rem, 6.8vw, 2.1rem); line-height: 1.06; }
  .tp-title.is-mid h1 { font-size: clamp(1.4rem, 5.9vw, 1.75rem); line-height: 1.1; }
  .tp-title.is-long h1 { font-size: clamp(1.25rem, 5.1vw, 1.5rem); line-height: 1.15; }
  .tp-act .button { width: 100%; }
  .tp-steps li, .tp-dl > div { grid-template-columns: 1fr; }
  .tp-steps__when { font-size: 1.1rem; }
  .tp-steps__rel { display: inline; margin-left: 0.5rem; }
  .tp-dl dt { padding-top: 0; }
  .tp-strip .facts-strip { grid-template-columns: 1fr 1fr; }
  .tp-strip .facts-strip > div { padding: 0.9rem 1rem 1rem; box-shadow: none; } /* taste-skill-ignore: rules redrawn below for the 2-up grid */
  .tp-strip .facts-strip > div:nth-child(n+3) { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--green-ink) 24%, transparent); } /* taste-skill-ignore: a hairline ledger rule */
  .tp-strip .facts-strip > div:nth-child(even) { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--green-ink) 24%, transparent); } /* taste-skill-ignore: a hairline ledger rule */
  .tp-strip .facts-strip > div:nth-child(n+3):nth-child(even) { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--green-ink) 24%, transparent), inset 0 1px 0 color-mix(in srgb, var(--green-ink) 24%, transparent); } /* taste-skill-ignore: a hairline ledger rule */
  .tp-strip .facts-strip dd { font-size: 1.05rem; }
  .tp-strip .facts-strip dd + dd { font-size: 0.8125rem; }
}

/* ---------- reduced motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  .switch, .switch::after, .tx-seg span, .tx-seg small, .chip, .tx-open, .tx-scrim, .tc__t a { transition-duration: 0.01ms !important; }
  .tx-filters, .tx-filters.is-open { transition: visibility 0s !important; }
  .chip:active, .tx-open:active { transform: none; }
  .tx-small__row:active .switch::after, .tx-check:active .switch::after { scale: none; }
}
@media print {
  .tx-side, .tx-bar, .tx-more, .tc__act, .tx-scrim, .tp-act, .cta-sec { display: none !important; }
  .tc { content-visibility: visible; break-inside: avoid; }
}