/* Buying & money: the card page's "Delivered to you" / "Sell here"
   (templates/buying/_card.html), the shopping planner (/plan) and
   /settings/money. Nothing here animates except the one-shot copy tick. */

/* ------------------------------------------------------ the card panel --- */
.ld {
  margin: 1.2rem 0; padding: 1.05rem 1.1rem 0.9rem; border-radius: 20px; position: relative; isolation: isolate;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 0 0 1px var(--line);
}
.ld-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.ld-top h3 { margin: 0; font-size: 1rem; font-weight: 900; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.45rem; }
.ld-top h3 .ico { width: 1.15rem; height: 1.15rem; }
.ld-top-sell { margin-top: 1rem; }
.ld-est { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; }
.ld-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ld-opt details { border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ld-opt.is-best details {
  background: linear-gradient(120deg, rgba(191, 232, 247, 0.12), rgba(206, 198, 246, 0.1) 60%, rgba(255, 159, 196, 0.08));
  box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.38);
}
:root[data-theme="light"] .ld-opt.is-best details { background: linear-gradient(120deg, rgba(42, 156, 203, 0.09), rgba(122, 104, 216, 0.08)); box-shadow: inset 0 0 0 1px rgba(47, 111, 137, 0.35); }
.ld-opt.is-off { opacity: 0.72; }
.ld-opt summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 1rem; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.8rem; border-radius: 14px;
}
.ld-opt summary::-webkit-details-marker { display: none; }
.ld-opt summary:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.ld-mkt { min-width: 0; display: flex; flex-direction: column; }
.ld-mkt b { font-weight: 800; }
.ld-mkt small, .ld-tot small { font-size: 0.75rem; color: var(--muted); }
.ld-mkt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-tot { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ld-tot b { font-size: 1.08rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ld-badge {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.1rem; padding: 0.08rem 0.45rem; border-radius: 999px;
  font-style: normal; font-size: 0.68rem; font-weight: 800; color: #17130a; background: var(--foil); white-space: nowrap;
}
.ld-badge .ico { width: 0.7rem; height: 0.7rem; }
.ld-chev { color: var(--muted); display: grid; place-items: center; }
.ld-chev .ico { width: 0.9rem; height: 0.9rem; transition: transform 0.2s var(--ease); }
.ld-opt details[open] .ld-chev .ico { transform: rotate(180deg); }
.ld-lines { margin: 0; padding: 0.1rem 0.8rem 0.3rem; display: grid; gap: 0.2rem; font-size: 0.84rem; }
.ld-lines div { display: flex; justify-content: space-between; gap: 1rem; }
.ld-lines dt { color: var(--muted); }
.ld-lines dd { margin: 0; font-variant-numeric: tabular-nums; }
.ld-lines .ld-sum { border-top: 1px dashed var(--line-2); padding-top: 0.25rem; margin-top: 0.1rem; font-weight: 800; }
.ld-lines .ld-sum dt { color: var(--ink); }
.ld-why { margin: 0.1rem 0.8rem 0.65rem; }
.ld-foot { margin: 0.8rem 0 0; }

/* ----------------------------------------------------------- the planner --- */
.pl-hero { grid-template-columns: minmax(0, 1fr) auto; }
.pl-count { margin: 0.45rem 0 0; }
.pl-count b { color: var(--ink); font-weight: 900; }
.pl-save { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-weight: 800; font-size: 0.82rem; color: #17130a; background: var(--foil); }
.pl-save .ico { width: 0.8rem; height: 0.8rem; }
.pl-budget { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; position: relative; z-index: 1; }
.pl-budget .field { min-width: 140px; }
.pl-budget .field input, .pl-budget .field select { min-width: 0; }
.pl-mix { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 1rem 0 0.4rem; background: var(--surface-2); }
.pl-mix i { display: block; height: 100%; }
.pl-mix .m-LOCAL, .pl-dot.m-LOCAL { background: #9fe3f5; }
.pl-mix .m-EU, .pl-dot.m-EU { background: #cec6f6; }
.pl-mix .m-US, .pl-dot.m-US { background: #ffe08a; }
:root[data-theme="light"] .pl-mix .m-LOCAL, :root[data-theme="light"] .pl-dot.m-LOCAL { background: #2a9ccb; }
:root[data-theme="light"] .pl-mix .m-EU, :root[data-theme="light"] .pl-dot.m-EU { background: #7a68d8; }
:root[data-theme="light"] .pl-mix .m-US, :root[data-theme="light"] .pl-dot.m-US { background: #d99a14; }
.pl-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--muted); }
.pl-legend b { color: var(--ink); }
.pl-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 3px; margin-right: 0.3rem; vertical-align: 0.05em; }
.pl-groups { display: grid; gap: 14px; margin-top: 14px; }
.pl-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; }
.pl-group-head h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.45rem; }
.pl-group-head .pl-sub { color: var(--muted); font-size: 0.85rem; }
.pl-group-head .pl-total { margin-left: auto; font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.pl-costs { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.5rem 0 0.8rem; padding: 0; list-style: none; font-size: 0.8rem; color: var(--muted); }
.pl-costs b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 4px 12px; }
.pl-line { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.3rem 0.3rem; border-radius: 10px; color: var(--ink); text-decoration: none; }
.pl-line:hover { background: var(--surface); text-decoration: none; }
.pl-line img, .pl-line .pl-na { width: 32px; height: 44px; border-radius: 4px; object-fit: cover; background: var(--surface-2); display: block; }
.pl-line .pl-nm { min-width: 0; display: flex; flex-direction: column; }
.pl-line .pl-nm b { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.pl-line .pl-nm small, .pl-line .pl-px small { color: var(--muted); font-size: 0.72rem; }
.pl-line .pl-px { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.88rem; }
.pl-more { margin-top: 0.4rem; }
.pl-more summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.pl-export { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pl-export textarea { width: 100%; min-height: 8.5rem; font-family: var(--mono); font-size: 0.78rem; resize: vertical; }
.pl-export .row { gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.pl-copied { display: inline-block; font-size: 0.8rem; color: var(--pos); opacity: 0; transition: opacity 0.2s var(--ease); }
.pl-copied.on { opacity: 1; }
.pl-rest { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pl-rest li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
.pl-rest li span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.pl-how summary { cursor: pointer; font-weight: 700; }
.pl-how ul { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }

/* the picker */
.pk-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
/* one column that never grows past the panel: a long set or goal name
   ends in an ellipsis instead of pushing "Plan it" out of the card */
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pk-list > li { min-width: 0; }
.pk-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-width: 0; padding: 0.5rem 0.6rem; border-radius: 12px; color: var(--ink); text-decoration: none; background: var(--surface); }
.pk-row:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.pk-row small { flex: none; color: var(--muted); white-space: nowrap; }
.pk-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.pk-set { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.pk-set .field { flex: 1 1 220px; }

/* ------------------------------------------------------- money settings --- */
.by-set { margin-bottom: 14px; }
.by-set .panel-head h2 { display: flex; align-items: center; gap: 0.45rem; }
.by-fields { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-bottom: 0.6rem; }
.by-example { margin: 0.5rem 0 0; font-weight: 700; }
.by-fs { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.by-fs legend { font-weight: 800; margin-bottom: 0.5rem; padding: 0; }
.by-grid { display: grid; gap: 0.8rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.by-input { display: flex; align-items: center; gap: 0.35rem; }
.by-input input { flex: 1 1 auto; min-width: 0; }
.by-unit { color: var(--muted); font-weight: 700; }
.by-grid .field.is-changed input { box-shadow: 0 0 0 1px var(--lav) inset; }
.by-sources { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.by-sources .ico { width: 0.75rem; height: 0.75rem; vertical-align: -0.05em; }

@media (max-width: 640px) {
  .pl-hero { grid-template-columns: minmax(0, 1fr); }
  .ld { padding: 0.9rem 0.8rem 0.8rem; }
  .ld-opt summary { padding: 0.6rem 0.65rem; gap: 0.5rem; }
  .ld-mkt small { white-space: normal; }
  .pl-group-head .pl-total { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-chev .ico, .pl-copied { transition: none; }
}