/* CouponLlama page CSS. The kit (assets/) is the system; this file holds only what sits inside the
   product's own UI (code lists, the store window, the copy control), the recipes' page CSS, and the
   frame of the inner pages (store, category, search), which are working pages rather than screens. */

/* ------------------------------------------------------------ the store's logo on its white tile */
.logo-tile { --logo: 48px; flex: none; display: grid; place-items: center; width: var(--logo); height: var(--logo);
  border-radius: calc(var(--logo) * .22); background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .09), 0 1px 2px rgb(0 0 0 / .08); overflow: hidden; }
.logo-tile > img { width: 84%; height: 84%; object-fit: contain; }
.logo-tile__initial { font: 500 calc(var(--logo) * .44)/1 var(--font-display); color: #0b0c0e; }

/* ------------------------------------------------------------ the code and its copy button */
.copy { display: flex; align-items: center; gap: 8px; flex: none; }
.copy__code { display: inline-flex; align-items: center; height: 40px; padding: 0 2px;
  color: var(--u-ink, var(--ink)); font-size: 17px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; user-select: all;
  text-decoration: underline dashed color-mix(in oklab, var(--u-ink, var(--ink)) 40%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.copy__btn.ui-btn { height: 40px; padding: 0 16px; font-size: 14px; min-width: 104px; background: var(--ink); color: var(--bg); }
.copy__btn.ui-btn:hover { background: color-mix(in oklab, var(--ink) 84%, var(--bg)); }
.copy__btn.ui-btn--accent:hover { background: color-mix(in oklab, var(--u-accent) 86%, var(--u-ink)); }
.copy__btn.ui-btn:active { transform: translateY(1px) scale(.985); }
@media (max-width: 639px) {
  .copy { width: 100%; }
  .copy__code { flex: 1 1 auto; min-width: 0; height: 44px; }
  .copy__btn.ui-btn { height: 44px; }
}

/* ------------------------------------------------------------ a code in a list */
.crows { display: block; }
.crow { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--u-line); }
.crow:last-child { border-bottom: 0; }
.crow__store { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; color: var(--u-ink); }
.crow__text { display: grid; gap: 2px; min-width: 0; }
.crow__name { font-size: 15px; font-weight: 500; line-height: 1.35; }
.crow__offer { font-size: 14px; line-height: 1.4; color: var(--u-muted); }
.crow__store:hover .crow__name { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) {
  .crow { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .crow__store { width: 100%; }
}

/* ------------------------------------------------------------ the search form */
.find { display: grid; gap: 8px; width: min(100%, 640px); margin-top: var(--s-3); text-align: left; }
.find__label { font-size: var(--t-small); font-weight: 500; }
.find__row { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 6px 0 4px; border-radius: var(--r-md);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgb(0 0 0 / .06); }
.find__row:focus-within { box-shadow: inset 0 0 0 2px var(--action), 0 0 0 4px color-mix(in oklab, var(--action) 18%, transparent); }
.find__input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; border: 0; background: none; color: var(--ink);
  font: 400 17px/1 var(--font-text); -webkit-appearance: none; appearance: none; }
.find__input::placeholder { color: var(--muted); }
.find__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.find__row .btn { flex: none; }
@media (max-width: 639px) {
  .find { width: 100%; }
  .find__row { display: grid; height: auto; padding: 0; background: none; box-shadow: none; gap: 8px; }
  .find__row:focus-within { box-shadow: none; }
  .find__input { height: 52px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 17px; }
  .find__input:focus { box-shadow: inset 0 0 0 2px var(--action); }
  .find__row .btn { width: 100%; }
}

/* ------------------------------------------------------------ results (the hero's window, /search) */
.results { overflow: hidden; }
.results .ui-title { font-size: 14px; }
.results__empty { padding: 16px; display: grid; gap: 8px; font-size: 15px; color: var(--u-ink); }
.results__empty a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.hero--centred .hero__window > .ly-piece { pointer-events: auto; }

/* ------------------------------------------------------------ app-frame (sections-library.md, app-frame) */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); overflow: hidden; }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
.app .ui-head { flex: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
/* the list pane ends on a whole row (2px border + 44px head + whole 52px rows): no store name is ever half cut */
#codes .app.ui { height: calc(46px + clamp(312px, round(down, 100svh - 400px, 52px), 572px)); }
#codes .app > .app__pane--list::after { display: none; }
@media (min-width: 640px) and (max-width: 1023px) { #codes .app.ui { height: calc(46px + clamp(468px, round(down, 100svh - 530px, 52px), 624px)); } #codes .app > .app__pane--list { height: 252px; max-height: none; } }
@media (max-width: 639px) {
  #codes .app.ui { display: flex; flex-direction: column; height: auto; }
  #codes .app > .app__pane--list { height: 200px; max-height: none; flex: none; }
  #codes .app > .app__pane--open { height: auto; flex: none; }
  #codes .app > .app__pane--open::after { display: none; }
  #codes .ocodes { padding-bottom: 8px; }
  #codes .ocode:last-child, #codes .ocode:first-child { border-bottom: 0; }
  /* one code on a phone, so the window keeps one height whichever store is open; the store page has the rest */
  #codes .ocode:nth-child(n + 2) { display: none; }
  #codes .open__link { display: inline; }
  #codes .open__head .ui-chip { display: none; }
  #codes .wrap > .grid p { display: none; }
}
.srows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 48px; }
.srow { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--u-line); color: var(--u-ink); }
.srow:hover { background: var(--u-fill); }
.srow[aria-current] { background: var(--u-fill-2); box-shadow: inset 3px 0 0 var(--u-accent); }
.srow__name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; }
.srow__best { flex: none; font-size: 13px; color: var(--u-text-2); }
.open__head { gap: 10px; }
.open__link { font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ocodes { padding: 0 24px 48px; }
.ocode { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 4px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--u-line); }
.ocode > .copy { grid-column: 2; grid-row: 1 / span 3; }
.ocode__label { font: 500 32px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--u-ink); }
.ocode__summary { font-size: 16px; color: var(--u-ink); }
.ocode__votes { font-size: 14px; color: var(--u-muted); }
@media (max-width: 639px) {
  .open__link { display: none; }
  .ocodes { padding: 0 16px 48px; }
  .ocode { grid-template-columns: minmax(0, 1fr); padding: 16px 0; }
  .ocode > .copy { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .ocode__label { font-size: 26px; }
}

/* ------------------------------------------------------------ categories: one panel of the product's own UI */
.cats { overflow: hidden; }
.cat-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.cat-rows > li:nth-child(odd) { border-right: 1px solid var(--u-line); }
.cat-row { display: flex; align-items: center; gap: 20px; height: 96px; padding: 0 24px; border-bottom: 1px solid var(--u-line); color: var(--u-ink); }
.cat-rows > li:nth-last-child(-n + 2) > .cat-row { border-bottom: 0; }
.cat-row:hover { background: var(--u-fill); }
.cat-row__text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cat-row__name { font: 500 20px/1.25 var(--font-display); letter-spacing: -0.01em; }
.cat-row__count { color: var(--u-text-2); font-size: 14px; }
.cat-row__logos { display: flex; gap: 8px; flex: none; }
.cat-row:hover .cat-row__name { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 639px) {
  .cat-rows { grid-template-columns: minmax(0, 1fr); }
  .cat-rows > li:nth-child(odd) { border-right: 0; }
  .cat-rows > li:nth-child(n + 7) { display: none; }
  .cat-rows > li:nth-child(6) > .cat-row { border-bottom: 0; }
  .cat-row { height: 76px; padding: 0 16px; gap: 12px; }
  .cat-row .logo-tile { --logo: 36px !important; }
}
/* the category cards on /category */
.cat-card .panel { --p-h: 136px; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: var(--r-lg); }

/* ------------------------------------------------------------ the three steps (drawn UI in the panels) */
#how .panel { --p-h: 300px; }
@media (min-width: 640px) and (max-width: 1023px) {
  #how .grid > .card { grid-column: span 4; }
  #how .panel { --p-h: 200px; }
  #how .stage > .fit { --ax: 12px !important; }
  #faq .faq__mock, #faq .span-5 > p { display: none; }
}
@media (max-width: 639px) { #how .panel { --p-h: 144px; } }
/* the steps in two groups (g2m on a phone: step 1 under the heading, steps 2 and 3 on the second screen);
   from 640 the three cards sit in one row as one grid */
@media (min-width: 640px) {
  #how > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; }
  #how > .wrap > .how-first, #how > .wrap > .how-first > .grid, #how > .wrap > .how-rest { display: contents; }
  #how > .wrap > .how-first > .section-head { grid-column: 1 / -1; }
  #how .card { grid-column: span 4; grid-row: 2; }
}
.faq__mock { margin-top: var(--s-7); max-width: 360px; }
.mini { padding: 16px; display: grid; gap: 12px; }
.mini__field { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--u-accent); font-size: 15px; color: var(--u-ink); }
.mini__field > i { display: inline-block; width: 1.5px; height: 18px; margin-left: 2px; background: var(--u-ink); }
.mini__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--u-line); font-size: 14px; font-weight: 500; color: var(--u-ink); }
.mini__row > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.mini__store { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--u-ink); }
.mini__offer { font: 500 26px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--u-ink); }
.mini .copy { width: auto; }
.mini__ask { font-size: 15px; font-weight: 500; color: var(--u-ink); }
.mini__votes { display: flex; gap: 8px; }
.mini__votes .ui-btn { height: 36px; min-width: 0; padding: 0 14px; font-size: 14px; }
.mini__tally { font-size: 14px; color: var(--u-muted); }

/* ------------------------------------------------------------ inner pages: working pages, natural height */
.page { padding: calc(var(--nav) + var(--s-6)) 0 var(--s-10); }
.page .block { margin-top: var(--s-10); }
.page h1 { font-size: clamp(34px, 2.3vw + 20px, 56px); line-height: 1.05; letter-spacing: var(--display-tracking); }
.page .lede { margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.55; max-width: 64ch; }
.page .block > h2, .page .block-head h2 { font-size: clamp(26px, 1.15vw + 21px, 36px); }
.block-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-6); }
.block-head p { color: var(--muted); max-width: 60ch; margin-top: var(--s-2); }
body:has(main > .page) footer.closing { height: auto; min-height: 0; padding-top: var(--s-9); }
body:has(main > .page) footer.closing > .wrap { height: auto; }
body:has(main > .page) .close__word { margin-top: var(--s-7); }

.crumbs { margin-bottom: var(--s-6); font-size: var(--t-small); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); }

/* the store page */
.store__head { display: flex; align-items: center; gap: var(--s-5); }
.store__answer { margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.55; max-width: 62ch; }
.store__answer .mono { font-weight: 500; padding: 1px 6px; border-radius: 6px; background: color-mix(in oklab, var(--ink) 7%, var(--bg)); }
.ccards { margin-top: var(--s-6); }
.ccard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 28px 28px; border-bottom: 1px solid var(--u-line); }
.ccard:last-child { border-bottom: 0; }
.ccard__main { display: grid; gap: 6px; min-width: 0; }
.ccard__label { font: 500 32px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--u-ink); }
.ccard--best .ccard__label { font-size: 40px; }
.ccard__summary { font-size: 16px; color: var(--u-ink); }
.ccard__facts { font-size: 14px; color: var(--u-muted); }
.ccard__after { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 16px 20px; border-radius: 10px; background: var(--u-fill); }
.ccard__shop { font-size: 15px; font-weight: 500; color: var(--u-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.ccard__shop::after { content: " \2197"; }
.ccard__vote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; color: var(--u-ink); }
.ccard__vote .ui-btn { height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 639px) {
  .ccard { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
  .ccard__label, .ccard--best .ccard__label { font-size: 28px; }
  .ccard__vote .ui-btn { height: 44px; }
}
.store__aside { display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); }
.store__aside .btn { width: 100%; }
.facts { display: grid; gap: 0; }
.facts > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; text-align: right; }
.steps-list { counter-reset: step; display: grid; gap: var(--s-5); list-style: none; padding: 0; margin: 0; max-width: 64ch; }
.steps-list li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: baseline; }
.steps-list li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); font-weight: 500; font-size: 14px; }
.expired { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.expired li { color: var(--muted); }
.expired .mono { text-decoration: line-through; }

/* store tiles (stores, categories, related stores) */
.store-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); }
.store-card .t-card { font-size: 17px; font-weight: 500; line-height: 1.3; }
.store-card p { font-size: 14px; color: var(--muted); }
.store-card:hover .t-card { text-decoration: underline; text-underline-offset: 3px; }
.letters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.letters a { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface); font-weight: 500; }
.letters a:hover { background: color-mix(in oklab, var(--ink) 10%, var(--surface)); }
.az { display: grid; gap: var(--s-6); }
.az section { scroll-margin-top: calc(var(--nav) + 16px); }
.az h3 { font-size: 22px; margin-bottom: var(--s-3); }
.az ul { columns: 3 240px; column-gap: var(--gutter); list-style: none; padding: 0; margin: 0; }
.az li { break-inside: avoid; }
.az li a { display: flex; align-items: center; min-height: 44px; gap: var(--s-2); }
.az li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.az .muted { font-size: 14px; }

/* the search page */
.finder--page { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.finder--page .find { margin-top: 0; }

/* long text: about, legal pages, blog posts */
.prose { max-width: 68ch; font-size: 17px; line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(24px, 1vw + 20px, 32px); margin-top: 1.8em; }
.prose h3 { font-size: 22px; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.prose a:hover { text-decoration-color: currentColor; }
.prose img { border-radius: var(--r-md); }
.prose blockquote { padding-left: 1em; border-left: 2px solid var(--line-strong); color: var(--muted); }

/* the contact form */
.contact-grid { align-items: start; }
.contact-form textarea { min-height: 160px; }

/* blog */
.post-card { display: grid; gap: var(--s-4); }
.post-card .tile__media { --tile-ratio: 16 / 9; }
.post-card h2 { font-size: 22px; line-height: 1.25; }
.post-card p { color: var(--muted); }
.link-plain { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.link-plain:hover { text-decoration-color: currentColor; }

/* the letters-assemble statement: its scattered letters stay inside their own section */
.statement { overflow: clip; }

/* body text in the ink (7:1): the hero's sub-line and the statement's line */
.hero--centred .hero__lead, .statement .mo-la__sub { color: var(--ink); }
.hero--centred .find { width: min(100%, 620px); }
.hero--centred .find__label { text-align: center; }
@media (max-width: 1023px) { .hero--centred .hero__c { max-width: none; } .hero--centred .find { width: 100%; } }

/* the footer's link columns end on the right line at the tablet; the legal links keep one gap */
@media (min-width: 640px) and (max-width: 1023px) { .closing__links .grid > .footer__col { grid-column: span 4; } }
.footer__legal > span:first-child { display: inline-flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
@media (max-width: 639px) { .hero--centred .pill { display: none; } }
@media (max-width: 1023px) { .hero--centred .hero__c { width: 100%; } }

/* the wordmark's "p" hangs below the 24px the nav gives a logo: the image is taller so the letters keep the
   nav's size, and the negative margin keeps the cap height centred in the bar */
.nav__logo img.nav__wordmark { height: 31.4px; margin-bottom: -7.4px; }

/* close-word: the name set to run from line to line (Manrope 500 sets it about 6 em wide); its tall
   ascenders show above the line box instead of being clipped, and the padding keeps the "p" descender
   clear of the links below */
.close__word { font-size: min(calc((100vw - 2 * var(--gut)) / 6.05), 230px, 22svh); overflow: visible; flex: none;
  padding-bottom: .2em; }
/* the footer is at least one screen and grows when a short window cannot hold it, so the name never
   squeezes down onto the link columns (system.css fixes it at exactly 100svh from 1280px up) */
footer.closing { height: auto; min-height: 100vh; min-height: 100svh; }
footer.closing > .wrap { height: auto; min-height: calc(100svh - var(--padt) - var(--padb) - var(--bar)); }
.closing__cta { flex: 1 0 auto; }

/* the FAQ in two groups (g2m on a phone); on a desktop the second group simply continues the column */
#faq .faq-rest .faq > :first-child { padding-top: var(--s-5); }
@media (min-width: 640px) {
  #faq > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; grid-template-rows: auto 1fr; }
  #faq > .wrap > .grid { display: contents; }
  #faq > .wrap > .grid > .span-5 { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  #faq > .wrap > .grid > .faq { grid-column: 7 / span 6; align-self: start; }
  #faq > .wrap > .faq-rest > .faq { grid-row: 2; }
}
@media (max-width: 639px) { #faq .faq-rest .faq > :first-child { padding-top: 0; } }