/*
 * "More details" on app cards (js/app-detail.js): the app's detail pop-up,
 * the same layout the dashboard shows (option B, approved 8 Oct 2026).
 * Built on this site's tokens (css/site.css), so both themes follow.
 */

.ad-card-wrap { position: relative; display: flex; flex-direction: column; }
.ad-card-wrap > .card { flex: 1; padding-bottom: calc(clamp(24px, 3vw, 34px) + 40px); }
.ad-more {
  position: absolute; left: clamp(24px, 3vw, 34px); bottom: clamp(20px, 2.6vw, 28px);
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--pill); padding: 7px 14px; cursor: pointer;
}
.ad-more:hover { border-color: var(--ink-faint); }
.ad-more:focus-visible, .ad-layer :focus-visible { outline: 2px solid var(--pulp); outline-offset: 2px; }

html.ad-open { overflow: hidden; }
.ad-layer { position: fixed; inset: 0; z-index: 200; color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.ad-layer ul { list-style: none; margin: 0; padding: 0; }
.ad-layer h2, .ad-layer h3, .ad-layer p, .ad-layer dl, .ad-layer dd { margin: 0; }
.ad-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.ad-modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1000px, calc(100% - 48px)); height: calc(100% - 48px); max-height: 920px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.ad-ic { display: inline-block; position: relative; flex-shrink: 0; border-radius: 22%; overflow: hidden; }
.ad-ic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ad-ic .ad-ic-d { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ad-ic .ad-ic-l { display: none; }
  :root:not([data-theme="light"]) .ad-ic .ad-ic-d { display: block; }
}
:root[data-theme="dark"] .ad-ic .ad-ic-l { display: none; }
:root[data-theme="dark"] .ad-ic .ad-ic-d { display: block; }

.ad-h2 { font-size: 20px; font-weight: 750; letter-spacing: -.015em; line-height: 1.25; }
.ad-h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.ad-soft { color: var(--ink-soft); }
.ad-faint { color: var(--ink-faint); }
.ad-small { font-size: 12.5px; }
.ad-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ad-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 3px 9px; border-radius: var(--pill); border: 1px solid currentColor; white-space: nowrap; line-height: 1.3; }
.ad-chip-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.ad-chip-mute { color: var(--ink-soft); background: var(--surface-2); border-color: var(--line); }

.ad-mh { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px 0; }
.ad-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ad-x { border: 0; background: var(--surface-2); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); flex-shrink: 0; cursor: pointer; }
.ad-x svg { width: 18px; height: 18px; }
.ad-tabs { display: flex; gap: 4px; padding: 12px 22px 0; border-bottom: 1px solid var(--line-soft); }
.ad-tabs button { font: inherit; border: 0; background: none; padding: 9px 12px 11px; font-weight: 700; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.ad-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--squeeze); }
.ad-n { font-size: 11px; color: var(--ink-faint); margin-left: 4px; }
.ad-mbody { flex: 1; overflow: auto; padding: 20px 22px; }
.ad-mbody [hidden] { display: none !important; }
.ad-m2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ad-stack > * + * { margin-top: 22px; }
.ad-mblurb { display: none; }

.ad-sec { display: flex; flex-direction: column; gap: 10px; }
.ad-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ad-feat, .ad-inc { display: grid; gap: 7px 16px; }
.ad-feat { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ad-inc { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ad-feat li, .ad-inc li { display: flex; gap: 9px; align-items: flex-start; }
.ad-feat svg, .ad-inc svg, .ad-needs svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--ok); }
.ad-freebox { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ad-fh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ad-needs { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 12.5px; }
.ad-wrow { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--surface); }
.ad-wt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ad-price { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ad-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 12.5px; }
.ad-dl dt { color: var(--ink-faint); font-weight: 700; }
.ad-dl dd { font-weight: 600; }

.ad-tog { display: inline-flex; border-radius: 99px; background: var(--surface-2); padding: 4px; gap: 2px; }
.ad-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 700; line-height: 1; padding: 10px 16px; border-radius: var(--pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.ad-btn-sm { padding: 7px 12px; font-size: 13px; }
.ad-btn-primary { background: var(--squeeze); color: #123529; }
.ad-btn-primary:hover { filter: brightness(.94); }
.ad-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.ad-btn-ghost { background: transparent; color: var(--ink-soft); }
.ad-tblw { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.ad-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ad-table th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ad-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ad-table tr:last-child td { border-bottom: 0; }
.ad-table tr.ad-picked td { background: color-mix(in srgb, var(--ice) 55%, var(--surface)); }
.ad-table label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ad-table input[type="radio"] { margin-top: 4px; accent-color: var(--squeeze); }
.ad-pw b { font-weight: 800; }
.ad-ps { display: block; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.ad-table .ad-pr, .ad-table th.ad-pr { text-align: right; white-space: nowrap; font-weight: 800; }
.ad-pline { border-radius: var(--r-sm); background: var(--surface-2); padding: 10px 12px; font-size: 12.5px; }

.ad-rv { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--surface); }
.ad-rs { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; }
.ad-stars { display: flex; gap: 3px; color: var(--line); }
.ad-stars svg { width: 20px; height: 20px; }

.ad-gal { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.ad-gw { display: grid; gap: 12px; }
.ad-gw > div:first-child { display: flex; flex-direction: column; gap: 8px; }
@container (min-width: 640px) { .ad-gw { grid-template-columns: minmax(0, 1fr) 170px; } .ad-gw .ad-thumbs { grid-template-columns: 1fr; gap: 8px; } }
.ad-shot { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.ad-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ad-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ad-thumb { font: inherit; border: 0; padding: 0; background: none; text-align: left; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-soft); font-weight: 700; cursor: pointer; }
.ad-thumb .ad-shot { border-width: 2px; border-color: transparent; outline: 1px solid var(--line); }
.ad-thumb[aria-current="true"] .ad-shot { border-color: var(--squeeze); outline-color: transparent; }
.ad-gcap { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-soft); }
.ad-gcap b { color: var(--ink); }

.ad-mf { border-top: 1px solid var(--line-soft); padding: 12px 22px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface); }
.ad-pl { flex: 1; min-width: 180px; font-size: 12.5px; color: var(--ink-soft); }
.ad-pl b { color: var(--ink); }

@media (max-width: 640px) {
  .ad-modal { left: 0; top: 0; transform: none; width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .ad-mh { padding: 12px 16px 0; align-items: center; }
  .ad-mh .ad-ic { width: 44px !important; height: 44px !important; }
  .ad-blurb-wide { display: none; }
  .ad-mblurb { display: block; margin-bottom: 12px; }
  .ad-tabs { padding: 8px 12px 0; overflow-x: auto; }
  .ad-mbody { padding: 16px 16px 20px; }
  .ad-m2 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ad-mf { padding: 12px 16px 16px; flex-direction: column; align-items: stretch; gap: 8px; }
  .ad-mf .ad-sec-btn { display: none; }
}

/* This site's own table rules (css/site.css) are for its comparison tables; the plan table sets its own. */
.ad-table { min-width: 0; table-layout: auto; }
.ad-table th, .ad-table td { white-space: normal; width: auto; }
.ad-table .ad-pr, .ad-table th.ad-pr { white-space: nowrap; width: 1%; }