/* Connections in setup: the store and budget-app cards, and the one focused dialog they open
   (connect-dialog.js, setup-stores.js, setup-money.js). Evergreen proceeds, brick is for a problem,
   and official marks sit unaltered on a white plate. */
/* taste-gate: allow T12 because the 13px status and tag lines are text inside a card, not controls; every button and checkbox target here is at least 44px. */

/* ---- Cards ---- */
.shop-lede { display: grid; gap: 10px; max-width: 62ch; }
.shop-lede p { margin: 0; font-size: 17px; line-height: 1.5; }
.shop-groups { display: grid; gap: 22px; }
.shop-group { display: grid; gap: 10px; min-width: 0; }
#app .shop-group-title { margin: 0; font: normal 20px/1.2 Georgia, serif; color: var(--green); }
.shop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; align-items: start; margin: 0; padding: 0; list-style: none; }
.shop-card { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; min-height: 72px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--white); }
.shop-card .store-mark { display: grid; place-items: center; width: 76px; height: 48px; }
.shop-card .store-mark img { max-width: 76px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.shop-card .store-mark-none { display: none; }
.shop-card:has(.store-mark-none) { grid-template-columns: minmax(0, 1fr) auto; }
.shop-card-text { display: grid; gap: 2px; min-width: 0; }
.shop-card-name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.shop-card-status { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 5px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.shop-card-status svg { flex: none; margin-top: 2px; }
.shop-card-status.is-connected { color: var(--green); font-weight: 600; }
.shop-card-status.is-needed { color: var(--red); font-weight: 600; }
.shop-card-main { justify-self: start; padding: 0 6px; border-radius: 4px; background: var(--wheat); font-size: 13px; font-weight: 700; }
.shop-card.is-on { border-color: var(--green); }
.shop-card[data-kind="connected"] { background: var(--sage); border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.shop-card:has(.shop-check input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* An idle card is one big checkbox target: the input covers the card and the drawn box sits where Connect will. */
.shop-check { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; cursor: pointer; }
#app .shop-check input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.shop-box { display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box; border: 1.5px solid var(--muted); border-radius: 6px; background: var(--white); color: #fff; }
.shop-check input:checked + .shop-box { background: var(--green); border-color: var(--green); }
.shop-card:hover:not(.is-on) { border-color: var(--green); }
.shop-card-buttons { position: relative; z-index: 2; display: flex; align-items: center; gap: 2px; }
#app .shop-action { min-height: 44px; padding: 8px 14px; white-space: nowrap; }
#app .shop-remove { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
#app .shop-remove svg { width: 20px; height: 20px; }
#app .shop-remove:hover { background: var(--sage); color: var(--ink); }
#app .shop-remove:focus-visible, #app .shop-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-more { margin: 0; }
#app .shop-more .text-button { min-height: 44px; }
.shop-footnote { margin: 0; max-width: 62ch; color: var(--muted); font: italic 14px/1.5 Georgia, serif; }
.shop-error { margin: 0; color: var(--red); font-weight: 600; }
.shop-error[hidden] { display: none; }
.stores-step .visually-hidden, .connect-dialog .visually-hidden, .money-step .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 420px) {
  .shop-card { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px 10px; }
  .shop-card .store-mark { width: 64px; }
  .shop-card .store-mark img { max-width: 64px; }
}
/* On the narrowest phones a picked card's buttons take their own row, so the store name keeps whole words. */
@media (max-width: 359px) {
  .shop-card.is-on .shop-card-buttons { grid-column: 1 / -1; justify-self: end; }
  .shop-card-name { overflow-wrap: break-word; }
}

/* ---- The dialog ---- */
dialog.connect-dialog { box-sizing: border-box; width: min(540px, calc(100% - 24px)); max-height: min(720px, calc(100dvh - 24px)); padding: 0; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--paper); color: var(--ink); overflow: hidden; }
dialog.connect-dialog[open] { display: flex; flex-direction: column; }
dialog.connect-dialog::backdrop { background: rgb(36 57 48 / .45); }
.connect-head { display: flex; align-items: center; gap: 12px; padding: 14px 10px 12px 18px; border-bottom: 1px solid var(--line); background: var(--white); }
.connect-mark { flex: none; display: grid; place-items: center; height: 44px; }
.connect-mark .store-mark, .connect-mark img { display: block; max-width: 96px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
#app .connect-head h2, .connect-head h2 { flex: 1; min-width: 0; margin: 0; font: normal 24px/1.15 Georgia, serif; color: var(--green); outline: none; text-wrap: balance; }
.connect-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.connect-close svg { width: 20px; height: 20px; }
.connect-close:hover { background: var(--sage); }
.connect-close:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.connect-body { display: grid; gap: 14px; align-content: start; padding: 18px; overflow: auto; overscroll-behavior: contain; font-size: 16px; line-height: 1.5; }
.connect-body > * { margin: 0; min-width: 0; }
.connect-body p { margin: 0; }
.connect-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: connect; }
.connect-steps li { position: relative; padding-left: 40px; counter-increment: connect; }
.connect-steps li::before { content: counter(connect); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: 15px; }
.connect-list { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.connect-fine { color: var(--muted); font-size: 14px; }
.connect-note { color: var(--muted); font-size: 15px; }
.connect-ok { display: flex; align-items: center; gap: 6px; color: var(--green); font-weight: 700; }
.connect-problem { padding: 10px 12px; border-left: 4px solid var(--red); background: var(--white); color: var(--ink); font-weight: 600; outline: none; }
.connect-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.connect-actions > button, .connect-actions > a { min-height: 44px; }
.connect-actions > a.secondary, .connect-actions > a.primary { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 8px 16px; border-radius: var(--button-radius); text-decoration: none; font-weight: 700; }
.connect-actions > a.secondary { border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.connect-actions > a.primary { background: var(--green); color: #fff; }
.connect-actions > a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.connect-find label { display: block; margin: 0 0 6px; font-weight: 700; }
.connect-find-row { display: flex; gap: 8px; }
.connect-find-row input { flex: 1; min-width: 0; max-width: 160px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); color: var(--ink); font: inherit; font-size: 16px; box-sizing: border-box; }
.connect-find .field-error { margin: 6px 0 0; color: var(--red); }
.connect-results { display: grid; gap: 14px; }
.connect-stores { margin: 0; padding: 0; border: 0; min-width: 0; }
.connect-stores legend { padding: 0; margin: 0 0 8px; font-weight: 700; }
.connect-stores { display: grid; gap: 8px; }
.connect-stores label, .connect-choice label { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 44px; box-sizing: border-box; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); cursor: pointer; }
.connect-stores label:has(:checked), .connect-choice label:has(:checked) { background: var(--sage); border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.connect-stores label:has(:focus-visible), .connect-choice label:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.connect-dialog .connect-stores input, .connect-dialog .connect-choice input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--green); }
.connect-stores label span, .connect-choice label span { display: grid; gap: 1px; }
.connect-stores small { color: var(--muted); font-size: 14px; }
.connect-facts { display: grid; gap: 8px; margin: 0; }
.connect-facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.connect-facts dt { color: var(--muted); font-size: 14px; }
.connect-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.connect-celebrate { display: grid; justify-items: center; gap: 8px; padding: 6px 0 4px; text-align: center; }
.connect-celebrate-art { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--wheat); }
.connect-celebrate-art .frank-mascot { width: 104px; height: auto; }
.connect-celebrate-title { font: normal 26px/1.15 Georgia, serif; color: var(--green); }
.connect-celebrate + .connect-actions { justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .connect-celebrate-art .frank-mascot { animation: connect-hop .7s cubic-bezier(.3, 1.5, .5, 1) 1 both; }
  @keyframes connect-hop { 0% { transform: translateY(14px) scale(.9); opacity: 0; } 60% { transform: translateY(-6px) scale(1.03); opacity: 1; } 100% { transform: none; opacity: 1; } }
}
/* A small phone gets the whole screen, with the actions in thumb reach. */
@media (max-width: 560px) {
  dialog.connect-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .connect-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  .connect-body { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .connect-actions > button, .connect-actions > a { flex: 1 1 140px; }
}
@media (hover: hover) and (pointer: fine) {
  #app .shop-remove { width: 36px; height: 36px; min-height: 36px; }
}
@media (forced-colors: active) {
  .shop-card[data-kind="connected"], .shop-card.is-on { border: 2px solid Highlight; }
  .shop-check input:checked + .shop-box { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .connect-steps li::before { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}