/* Live demo pages (/demo/<slug>/). Additive to layout.css and components.css. */

/* ---------- Page head with buy block ---------- */
.demo-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  grid-template-areas: "intro buy" "note buy";
  gap: 1.25rem clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.demo-head-intro { grid-area: intro; }
.demo-head-intro .lead { margin-bottom: 0; }
.demo-buy { grid-area: buy; padding: 1.25rem 1.4rem; background: var(--white); border: 1px solid var(--ink); box-shadow: var(--shadow-card); }
.demo-buy-name { margin: 0 0 .6rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.demo-buy .price-line { margin-bottom: 1rem; }
.demo-buy .price { font-size: 2.6rem; }
.demo-buy .aud-estimate { margin: -.4rem 0 1rem; }
.demo-buy .guarantee { margin: .8rem 0 0; font-size: .92rem; }
.demo-buy-link { margin: .4rem 0 0; }
.demo-head-note { grid-area: note; margin: 0; max-width: 44rem; font-size: .92rem; color: var(--ink-soft); }
.demo-head-note .tag { margin-right: .35rem; }

@media (max-width: 900px) {
  .demo-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "buy" "note"; }
  .demo-buy { max-width: 34rem; }
}
/* Phones: price, Buy and guarantee on the first screen at 390 x 844 */
@media (max-width: 600px) {
  .page-demo .page-head { padding-block: 1rem 2rem; }
  .demo-head .breadcrumb ol { margin-bottom: .1rem; }
  .demo-head .breadcrumb li:last-child { display: none; }
  .demo-head .eyebrow { margin-bottom: .6rem; font-size: .86rem; }
  .demo-head h1 { font-size: 2.1rem; margin-bottom: .35em; }
  .demo-head .lead { font-size: 1rem; line-height: 1.5; }
  .demo-buy { padding: .9rem 1rem; }
  .demo-buy-name { font-size: 1.05rem; margin-bottom: .4rem; }
  .demo-buy .price { font-size: 2.1rem; }
  .demo-buy .price-line { margin-bottom: .6rem; }
  .demo-buy .guarantee { margin-top: .6rem; }
}

/* ---------- Editable Work log ---------- */
.worklog-table { width: 100%; min-width: 68rem; border-collapse: collapse; font-size: .86rem; }
.worklog-table th, .worklog-table td { padding: .45rem .35rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.worklog-table thead th { font-size: .76rem; font-weight: 600; line-height: 1.3; color: var(--ink-soft); vertical-align: bottom; border-bottom: 2px solid var(--ink); }
.worklog-table thead th.num { text-align: right; }
.worklog-table input, .worklog-table select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--target);
  padding: .35rem .45rem;
  border: 1px solid var(--cell-input-edge);
  border-radius: 2px;
  background: var(--cell-input);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.worklog-table td.num input { text-align: right; }
.worklog-table [aria-invalid="true"] { border: 2px solid var(--neg); background: var(--neg-bg); }
.worklog-table .check-cell { min-width: 11rem; }
.worklog-table tr.is-review .check-cell { background: var(--neg-bg); }
.check-note { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.4; color: var(--neg); }
.worklog-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.worklog-actions .btn[disabled] { cursor: not-allowed; }
.worklog-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 2rem; margin-top: 1rem; }
.worklog-foot .small { margin: 0; max-width: 40rem; }

/* Under 760px each Work log row becomes a labeled card */
@media (max-width: 760px) {
  .worklog-table { min-width: 0; }
  .worklog-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .worklog-table, .worklog-table tbody { display: block; }
  .worklog-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .75rem; padding: 1rem; border-bottom: 2px solid var(--ink); }
  .worklog-table td { display: block; padding: 0; border: 0; }
  .worklog-table td::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .76rem; font-weight: 600; color: var(--ink-soft); }
  .worklog-table td.num input { text-align: left; }
  .worklog-table .check-cell { grid-column: 1 / -1; min-width: 0; padding: .6rem; background: var(--ok-row); }
}

/* Full Summary: two controls (the rates sit in their own table below) */
.page-demo .demo-panel[data-mode="full"] .demo-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The full Summary has an extra Month column; keep it inside a 390px screen */
@media (max-width: 540px) {
  .page-demo .demo-panel[data-mode="full"] .ledger-table { font-size: .78rem; }
  .page-demo .demo-panel[data-mode="full"] .ledger-table th,
  .page-demo .demo-panel[data-mode="full"] .ledger-table td { padding: .5rem .22rem; }
}

.demo-try { margin-top: 2rem; max-width: 46rem; }
.demo-try .h-sans { margin-bottom: .5rem; }
.demo-try ol { padding-left: 1.3rem; }
.demo-try li { margin-bottom: .45rem; }

/* ---------- Calculation ---------- */
.calc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 0; }
.calc-list > div { padding: .9rem 0; border-top: 1px solid var(--rule); }
.calc-list > div:last-child { grid-column: 1 / -1; }
.calc-list dt { font-weight: 700; }
.calc-list dd { margin: .25rem 0 0; color: var(--ink-soft); }
.calc-example { margin-top: 2rem; max-width: 42rem; }
.calc-example .h-sans { margin-bottom: .4rem; }
.calc-table { border-top: 2px solid var(--ink); }
.calc-table tbody th { white-space: normal; }
@media (max-width: 700px) { .calc-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Limits and closing ---------- */
.demo-limits { max-width: 48rem; }
.demo-next h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.demo-next > p { color: var(--ink-soft); }
.demo-next-links { list-style: none; padding: 0; margin: 1rem 0 0; }