/* CadCraft — product pages: /apps, /apps/{slug}, /download, /roadmap, /pricing.
 * Loaded per page through header.inc's $extra_head. Tokens only; no theme-specific colours.
 * Sizes are rem (the root scales above 1920px); px only for hairlines and breakpoints.
 */

/* ---------- Concept drawings (app-sheet.inc + sheets/*.svg.inc) ---------- */
.cc-dwg { display: block; width: 100%; height: auto; color: var(--layer, var(--ink)); overflow: visible; }
.cc-dwg * { vector-effect: non-scaling-stroke; }
.cc-dwg .k, .cc-dwg .m, .cc-dwg .t, .cc-dwg .cl, .cc-dwg .hd, .cc-dwg .ph, .cc-dwg .dm { fill: none; stroke: currentColor; stroke-linejoin: miter; stroke-linecap: butt; }
.cc-dwg .k  { stroke-width: 2; }
.cc-dwg .m  { stroke-width: 1.4; }
.cc-dwg .t, .cc-dwg .dm { stroke-width: .8; }
.cc-dwg .cl { stroke-width: .8; stroke-dasharray: 16 3 3 3; }
.cc-dwg .hd { stroke-width: .9; stroke-dasharray: 5 3; }
.cc-dwg .ph { stroke-width: .8; stroke-dasharray: 18 3 3 3 3 3; }
.cc-dwg .tk { stroke: currentColor; stroke-width: 1.8; fill: none; }
.cc-dwg .fl { fill: currentColor; fill-opacity: .12; stroke: none; }
.cc-dwg .fl2 { fill: currentColor; fill-opacity: .24; stroke: none; }
.cc-dwg .po { fill: currentColor; fill-opacity: .85; stroke: currentColor; stroke-width: 1.4; }
.cc-dwg .dot { fill: currentColor; stroke: none; }
.cc-dwg .bg { fill: var(--sheet-2); }
/* Faces for hidden-line axonometric views (painter's order hides what is behind). */
.cc-dwg .fc  { fill: var(--sheet-2); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.cc-dwg .fc2 { fill: color-mix(in srgb, currentColor 16%, var(--sheet-2)); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.cc-dwg .fc3 { fill: color-mix(in srgb, currentColor 32%, var(--sheet-2)); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.cc-dwg text, .cc-dwg .tx {
  fill: currentColor; stroke: none; font-family: var(--font); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; font-stretch: 100%;
}
.cc-dwg .tx-s { font-size: 11.5px; font-weight: 600; }
.cc-dwg .tx-l { font-size: 16px; font-weight: 700; font-stretch: 112%; }
.cc-dwg .mid { text-anchor: middle; }
.cc-dwg .end { text-anchor: end; }
.cc-dwg.is-thumb .an { display: none; }
.cc-dwg.is-thumb .k { stroke-width: 1.6; }
.cc-dwg.is-thumb .m { stroke-width: 1.1; }

.app-sheet { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.app-sheet .sheet-frame {
  background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0; padding: clamp(.75rem, .5rem + 1vw, 1.5rem);
  flex: 1 1 auto; display: flex; align-items: center;
}
.app-sheet .sheet-missing { margin: 0; color: var(--ink-2); padding: 3rem 0; width: 100%; text-align: center; }
.app-sheet figcaption { border: var(--pen-2) solid var(--ink); border-radius: 0 0 var(--radius) var(--radius); background: var(--sheet-2); }
.sheet-tb { display: grid; grid-template-columns: auto 1fr; border-bottom: 1px solid var(--ink); }
.sheet-tb-cell { padding: .4rem .7rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); min-width: 0; }
.sheet-tb-cell:nth-child(2n) { border-right: 0; }
.sheet-tb-cell:nth-last-child(-n+2) { border-bottom: 0; }
.sheet-tb-cell .k { display: block; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; line-height: 1.3; }
.sheet-tb-cell .v { display: block; margin: 0; font-size: var(--fs-base); font-weight: 700; font-stretch: 105%; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.sheet-tb-title .v { color: var(--layer); }
.app-sheet .sheet-cap { margin: 0; padding: .7rem .8rem .85rem; color: var(--ink-2); }
@media (min-width: 640px) {
  .sheet-tb { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .sheet-tb-cell { border-bottom: 0; border-right: 1px solid var(--ink) !important; }
  .sheet-tb-cell:last-child { border-right: 0 !important; }
}

.sheet-note { color: var(--ink-2); margin-bottom: 1.5rem; }
.sheet-set { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .sheet-set { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sheet-set .is-lead { grid-column: 1 / -1; }
  .sheet-set .is-lead .sheet-frame { padding: 1.5rem 3rem; justify-content: center; }
  .sheet-set .is-lead .cc-dwg { max-height: 32rem; }
}

/* ---------- App page hero ---------- */
.app-hero { border-bottom: var(--pen-2) solid var(--ink); }
.app-hero-grid { display: grid; gap: 2rem; }
@media (min-width: 992px) { .app-hero-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 3rem; align-items: start; } }
.app-hero h1 { color: var(--ink); font-size: var(--fs-3xl); margin-bottom: .25em; }
.app-hero h1::after { content: ""; display: block; width: 4.5rem; height: .25rem; background: var(--layer); margin-top: .75rem; }
.app-tagline { font-size: var(--fs-lg); font-stretch: 112%; font-weight: 700; line-height: 1.3; margin-bottom: .75rem; letter-spacing: -0.01em; }
.app-hero .lede { margin-bottom: 1rem; }
.app-familiar-line { color: var(--ink-2); border-left: 3px solid var(--layer); padding-left: .8rem; margin-bottom: 1.5rem; }

.props { background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); }
.props-title { margin: 0; padding: .55rem .9rem; font-weight: 700; font-stretch: 112%; border-bottom: var(--pen-2) solid var(--ink); display: flex; align-items: center; gap: .5rem; }
.props dl { margin: 0; }
.props dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); border-bottom: 1px solid var(--grid); }
.props dl > div:last-child { border-bottom: 0; }
.props dt { padding: .5rem .9rem; color: var(--ink-2); font-weight: 600; border-right: 1px solid var(--grid); font-size: var(--fs-sm); line-height: 1.5; }
.props dd { margin: 0; padding: .45rem .9rem; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Highlights ---------- */
.highlights .highlight h3 { display: flex; gap: .6rem; align-items: baseline; }
.highlights .highlight h3::before { content: ""; flex: 0 0 auto; width: .6rem; height: .6rem; border: var(--pen-2) solid var(--layer); background: var(--layer); transform: translateY(-.1rem); }

/* ---------- Formats table ---------- */
.fmt-table { width: 100%; border-collapse: collapse; border-top: var(--pen-2) solid var(--ink); }
.fmt-table th, .fmt-table td { text-align: left; padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.fmt-table thead th { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.fmt-table tbody th { font-weight: 700; font-stretch: 112%; white-space: nowrap; padding-right: 2rem; }
.fmt-table td { color: var(--ink-2); }

/* ---------- Get <App>: platform tabs (stacked panels without JS) ---------- */
.get-tabs { margin-top: 1.5rem; }
.tab-list { display: flex; flex-wrap: wrap; gap: 0; border-bottom: var(--pen-2) solid var(--ink); }
.tab-list[hidden] { display: none; }
.tab-btn {
  appearance: none; font: inherit; font-weight: 700; font-size: var(--fs-base); color: var(--ink);
  background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  padding: .7rem 1.1rem; min-height: 3rem; cursor: pointer; margin-bottom: -1.5px;
}
.tab-btn:hover { text-decoration: underline; text-underline-offset: .25em; }
.tab-btn[aria-selected="true"] { position: relative; background: var(--sheet-2); border-color: var(--ink); border-width: var(--pen-2) var(--pen-2) 0; border-bottom: 0; }
.tab-btn[aria-selected="true"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .2rem; background: var(--layer, var(--action)); }
.tab-btn:focus-visible { outline-offset: -4px; }
.tab-panel { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.tab-panel:focus-visible { outline-offset: 2px; }
.get-tabs.is-tabbed .tab-panel { background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-top: 0; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: 0 0 var(--radius) var(--radius); }
.get-tabs.is-tabbed .tab-panel .rule-box { background: var(--sheet); }
.tab-panel-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .tab-panel-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
.tab-panel h3 { margin-bottom: .6rem; }
.no-build { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; margin-bottom: .75rem; padding: .35rem .75rem; border: var(--pen-2) dashed var(--ink); border-radius: var(--radius); }
.no-build-mark { width: .8rem; height: .8rem; border: var(--pen-2) solid var(--ink); position: relative; flex: 0 0 auto; }
.no-build-mark::after { content: ""; position: absolute; left: 50%; top: -.2rem; bottom: -.2rem; border-left: var(--pen-2) solid var(--ink); transform: rotate(45deg); }
.req-mini-title { font-weight: 700; margin: 1.25rem 0 .4rem; }
.req-mini-title a { font-weight: 500; }
.req-mini { margin: 0; border-top: 1px solid var(--ink); }
.req-mini > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--grid); }
.req-mini dt { color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); line-height: 1.6; }
.req-mini dd { margin: 0; }
.form-intro { font-weight: 700; margin-bottom: .75rem; }

/* ---------- Lineup + family grids ---------- */
.lineup-grid, .family-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.lineup-grid > li, .family-grid > li { min-width: 0; }
@media (min-width: 700px) { .lineup-grid, .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .family-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lineup-grid .app-card { padding: 1.5rem; }
.lineup-grid .app-card .app-thumb { padding: .75rem 1rem; }
.family-grid .app-card .app-name { font-size: var(--fs-md); }
.family-grid .app-card .app-short { font-size: var(--fs-sm); color: var(--ink-2); }
.app-card .app-thumb { padding: .5rem .75rem; }
.lineup-foot { margin-top: 1.5rem; color: var(--ink-2); }
.status-tally { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.status-tally li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; color: var(--ink-2); font-weight: 600; }

/* ---------- Download ---------- */
.build-table, .req-table { width: 100%; border-collapse: collapse; border-top: var(--pen-2) solid var(--ink); }
.build-table th, .build-table td, .req-table th, .req-table td { text-align: left; vertical-align: top; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--line); }
.build-table thead th, .req-table thead th { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.build-table .app-cell a { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-stretch: 112%; color: var(--ink); text-decoration: none; }
.build-table .app-cell a:hover { text-decoration: underline; }
.build-table .app-cell .role { display: block; color: var(--ink-2); font-weight: 500; font-size: var(--fs-sm); margin-top: .1rem; padding-left: 1.7rem; }
.build-table td.none { color: var(--ink-2); }
.req-table tbody th { font-weight: 700; white-space: nowrap; }
.req-label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; border: var(--pen-2) dashed var(--ink); border-radius: var(--radius); padding: .25rem .65rem; margin-bottom: 1rem; }
@media (max-width: 767px) {
  .build-table thead, .req-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .build-table tr, .req-table tr { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .build-table th, .build-table td, .req-table th, .req-table td { display: block; border: 0; padding: .15rem 0; }
  .build-table td[data-label]::before, .req-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
  .req-table td[data-label] { padding: .3rem 0; }
}
.quick-start { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: qs; border-top: var(--pen-2) solid var(--ink); }
.quick-start > li { counter-increment: qs; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.quick-start > li::before {
  content: counter(qs); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: var(--pen-2) solid var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--sheet-2);
}
.quick-start h3 { margin-bottom: .3rem; }
.quick-start p { color: var(--ink-2); margin-bottom: .75rem; }
.quick-start p:last-child { margin-bottom: 0; }

/* ---------- Roadmap ---------- */
.rm-list { list-style: none; margin: 0; padding: 0; position: relative; }
.rm-list::before { content: ""; position: absolute; left: 1.5rem; top: 1.5rem; bottom: 1.5rem; border-left: var(--pen-2) solid var(--ink); }
.rm-item { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem 1.25rem; padding: 1rem 0; }
.rm-bubble {
  position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: var(--pen-2) solid var(--ink); background: var(--sheet-2); font-weight: 700; font-stretch: 112%; font-variant-numeric: tabular-nums;
}
.rm-item.is-done .rm-bubble, .rm-item.is-now .rm-bubble { background: var(--ink); color: var(--sheet); }
.rm-item.is-next .rm-bubble, .rm-item.is-later .rm-bubble { border-style: dashed; }
.rm-body { background: var(--sheet-2); border: 1px solid var(--ink); border-radius: var(--radius); padding: 1rem 1.25rem; }
.rm-item.is-now .rm-body { border-width: var(--pen-3); }
.rm-item.is-later .rm-body { border-style: dashed; }
.rm-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: .4rem; }
.rm-head h2 { font-size: var(--fs-md); font-stretch: 112%; margin: 0; letter-spacing: -0.01em; }
.rm-date { color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rm-body p { margin: 0; color: var(--ink-2); }
.rm-apps { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.rm-apps a { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }
.rm-legend { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; color: var(--ink-2); font-size: var(--fs-sm); }
.rm-legend li { display: flex; align-items: center; gap: .5rem; }

/* ---------- Pricing ---------- */
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tier { display: flex; flex-direction: column; gap: .75rem; height: 100%; background: var(--sheet-2); border: 1px solid var(--ink); border-radius: var(--radius); padding: 1.5rem; }
.tier.is-community { border-width: var(--pen-3); }
.tier h2 { font-size: var(--fs-lg); margin: 0; }
.tier .price { font-size: var(--fs-md); font-weight: 700; font-stretch: 112%; margin: 0; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.tier .summary { margin: 0; color: var(--ink-2); }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.tier li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .55rem; }
/* Check sits in a box one text-line tall, so it centres on the first line of a wrapped item. */
.tier li > .bi { line-height: inherit; color: var(--ink); }
.tier li > .bi::before { vertical-align: top; line-height: inherit; }
.tier .btn-row { margin-top: auto; padding-top: .75rem; }
.tier .btn-row a { width: 100%; }
/* Card lists wrap without a lone last word; phones get a little more line length. */
.tier li, .tier .summary { text-wrap: pretty; }
@media (max-width: 480px) {
  .tier { padding: 1.25rem 1rem; }
  .tier li { gap: .45rem; }
}
.founding { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: var(--pen-2) dashed var(--ink); border-radius: var(--radius); background: var(--sheet-2); }
.founding p { margin: 0; font-weight: 700; font-size: var(--fs-md); }
.footnote { color: var(--ink-2); margin-top: 1rem; }
.price-table { margin-top: 1rem; }
.price-table td { white-space: nowrap; }
.faq-mini { margin: 0; border-top: var(--pen-2) solid var(--ink); }
.faq-mini > div { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.faq-mini dt { font-weight: 700; font-stretch: 112%; font-size: var(--fs-md); margin-bottom: .3rem; }
.faq-mini dd { margin: 0; color: var(--ink-2); }

/* ---------- Saving: desktop free, browser saving paid, export free ---------- */
.save-split { margin-top: 2rem; }
.save-split > h2 { margin-bottom: .75rem; }
.save-split h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.save-tag { display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: 700; font-stretch: 100%; letter-spacing: 0; line-height: 1; padding: .3rem .55rem; border: var(--pen-2) solid var(--ink); border-radius: 2rem; background: var(--sheet-2); }
.save-split .is-paid .save-tag { border-style: dashed; }
.web-save-note { font-weight: 600; border-left: 3px solid var(--layer, var(--action)); padding-left: .75rem; }