/* appdemo.css — self-contained styles for the animated ConCal app mock.
   The app mock is ALWAYS light-mode, regardless of page theme, so every
   token it needs is scoped locally here. Extracted from landing.css. */
.appd-scale, .appd {
  --accent:       #2f6bff;
  --accent-deep:  #1d51e6;
  --accent-wash:  rgba(47,107,255,0.07);
  --accent-wash2: rgba(47,107,255,0.12);
  --accent-line:  rgba(47,107,255,0.22);
  --ink:          #0b1220;
  --ink-soft:     #1c2536;
  --body:         #545d72;
  --meta:         #8b93a6;
  --surface:      #f6f8fc;
  --surface2:     #eef2f9;
  --border:       #e6eaf2;
  --border2:      #d8deea;
  --green:        #0f9d8c;
  --green-wash:   rgba(15,157,140,0.10);
  --green-line:   rgba(15,157,140,0.28);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ============================================================
   ConCal app demo — animated UI recreation (hero)
   ============================================================ */
.appd { width: 1360px; height: 552px; background: #fff; display: flex; flex-direction: column; font-family: var(--font); color: var(--ink); position: relative; }
.appd-scale { width: 100%; overflow: hidden; }
.appd-inner { transform-origin: top left; }
.appd-vsep { width: 1px; height: 22px; background: var(--border); flex: 0 0 auto; }

/* top bar */
.appd-top { height: 50px; flex: 0 0 50px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 1px solid var(--border); background: #fff; }
.appd-wm { font-weight: 800; font-size: 16px; letter-spacing: -0.4px; }
.appd-wm .c2 { color: var(--accent); }
.appd-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--border2); border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--ink-soft); background: #fff; white-space: nowrap; }
.appd-chip.soft { color: var(--body); border-color: var(--border); }
.appd-chip svg, .appd-saved svg { width: 13px; height: 13px; flex: 0 0 auto; }
.appd-title { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.appd-saved { font-size: 12px; font-weight: 600; color: var(--green); display: inline-flex; align-items: center; gap: 5px; }
.appd-seg { display: inline-flex; border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; }
.appd-seg b { font-size: 12px; font-weight: 700; padding: 5px 12px; }
.appd-seg .on { background: var(--accent); color: #fff; }
.appd-seg .off { color: var(--body); background: #fff; }
.appd-vol { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border: 1px solid var(--border2); border-radius: 100px; font-size: 12.5px; font-weight: 600; color: var(--body); background: #fff; }
.appd-vol b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.appd-vol .acc { color: var(--ink); }
.appd-chip.blue { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent); }
.appd-chip.blue svg { color: var(--accent); }
.appd-ava { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 5px; border: 1px solid var(--border2); border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.appd-ava i { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.appd-ic { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--body); }
.appd-ic svg { width: 15px; height: 15px; }

/* body */
.appd-body { flex: 1; display: flex; min-height: 0; }
.appd-tools { width: 48px; flex: 0 0 48px; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; background: #fff; }
.appd-tool { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--body); }
.appd-tool svg { width: 17px; height: 17px; }
.appd-tool.sel { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -6px rgba(47,107,255,0.7); }
.appd-tools .sep { width: 22px; height: 1px; background: var(--border); margin: 2px 0; }

.appd-shapes { width: 156px; flex: 0 0 156px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: #fff; }
.appd-shapes .hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--meta); }
.appd-shapes .hd b { width: 20px; height: 20px; border-radius: 6px; background: var(--surface2); color: var(--accent); font-size: 14px; display: flex; align-items: center; justify-content: center; }
.appd-srow { margin: 0 8px; padding: 9px 10px; border-radius: 9px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.appd-srow.sel { background: var(--accent-wash); border: 1px solid var(--accent-line); }
.appd-srow .sw { width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid var(--accent); }
.appd-srow .cbx { width: 14px; height: 14px; border-radius: 3px; border: 1.6px solid var(--border2); flex: 0 0 auto; }
.appd-total { margin-top: auto; border-top: 1px solid var(--border); padding: 12px 14px; display: flex; align-items: baseline; justify-content: space-between; }
.appd-total .l { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--meta); }
.appd-total .v { font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* main column: framed canvas + the chips/hint row below it (matches the
   live app, where Rebar/Joints + the hint sit OUTSIDE the canvas frame) */
.appd-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 8px 10px 0; background: #fff; }
.appd-canvas { flex: 1; position: relative; background: #ffffff; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.appd-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 3px; font-size: 12px; font-weight: 600; color: var(--body); box-shadow: 0 6px 16px -8px rgba(16,28,64,0.25); }
.appd-zoom span { padding: 4px 8px; border-radius: 6px; }
.appd-zoom .pct { color: var(--ink); min-width: 38px; text-align: center; }
.appd-status { height: 44px; flex: 0 0 44px; display: flex; align-items: center; gap: 10px; padding: 0 4px; font-size: 12px; color: var(--meta); background: #fff; }
.appd-status .dd { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border2); border-radius: 7px; padding: 4px 9px; font-weight: 600; color: var(--ink-soft); background: var(--surface); }
.appd-status .rebar { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #f0b48a; background: #fff7f0; color: #c2551d; border-radius: 7px; padding: 4px 9px; font-weight: 700; }
.appd-status .hint { font-weight: 500; }
.appd-status .appd-vsum { font-size: 12px; color: var(--body); font-weight: 600; white-space: nowrap; }
.appd-status .appd-vsum b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* live canvas coordinate badge (drafting-tool readout) */
.appd-coord { position: absolute; top: 10px; left: 10px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: var(--accent); background: rgba(255,255,255,0.94); border: 1px solid var(--accent-line); border-radius: 7px; padding: 4px 9px; box-shadow: 0 4px 12px -6px rgba(16,28,64,0.28); opacity: 0; transform: translateY(-3px); transition: opacity .14s ease, transform .14s ease; pointer-events: none; }
.appd-coord svg { width: 12px; height: 12px; opacity: 0.75; }
.appd-canvas.coord-on .appd-coord { opacity: 1; transform: none; }

/* right panel */
.appd-panel { width: 384px; flex: 0 0 384px; border-left: 1px solid var(--border); background: #fff; display: flex; flex-direction: column; padding: 0 16px; overflow: hidden; }
.appd-tabs { display: flex; gap: 22px; padding: 14px 2px 0; border-bottom: 1px solid var(--border); position: relative; }
.appd-tabs b { font-size: 14px; font-weight: 700; padding-bottom: 12px; color: var(--meta); }
.appd-tabs b.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.appd-shapecard { border: 1px solid var(--accent-line); border-radius: 12px; padding: 13px 14px; margin: 16px 0 0; }
.appd-shapecard .top { display: flex; align-items: center; gap: 10px; }
.appd-shapecard .gsw { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #b6a4ff, var(--accent)); }
.appd-shapecard .nm { font-size: 15px; font-weight: 700; flex: 1; }
.appd-shapecard .del { color: var(--meta); }
.appd-shapecard .stats { display: flex; gap: 14px; margin-top: 12px; font-size: 12.5px; }
.appd-shapecard .stats .n { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.appd-shapecard .stats .u { color: var(--meta); font-weight: 500; }
.appd-msum { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; }
.appd-msum .lab { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--accent); line-height: 1.2; }
.appd-msum .ddl { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border2); border-radius: 7px; padding: 5px 9px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.appd-msum .ovr { display: inline-flex; align-items: center; border: 1px solid #f0c27a; background: #fff7ea; color: #b9791f; border-radius: 100px; padding: 4px 9px; font-size: 11px; font-weight: 700; }
.appd-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.appd-mcard { border: 1px solid var(--border); border-radius: 11px; padding: 12px 13px; background: var(--surface); transition: background .3s, border-color .3s; }
.appd-mcard .k { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--meta); }
.appd-mcard .v { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.appd-mcard .v small { font-size: 13px; font-weight: 700; color: var(--body); }
.appd-mcard .s { font-size: 11px; color: var(--meta); font-weight: 500; margin-top: 3px; }
.appd-mcard.lit { border-color: var(--accent-line); background: var(--accent-wash); }
.appd-mcard.lit .v { color: var(--accent); }
.appd-prow { display: flex; gap: 9px; margin-top: 10px; }
.appd-prow .pb { flex: 1; border: 1px solid var(--border2); border-radius: 8px; padding: 8px 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.appd-log { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--accent); margin-top: 16px; }

/* shapes-panel per-shape CY readout */
.appd-srow .scy { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* topbar Order · Bid pill (center of the real topbar at laptop width) */
.appd-orderpill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border2); border-radius: 100px; font-size: 12.5px; font-weight: 600; color: var(--body); white-space: nowrap; }
.appd-orderpill b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.appd-orderpill .acc { color: var(--accent); }
.appd-pro { display: inline-flex; margin-left: 5px; background: var(--accent); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px; border-radius: 4px; padding: 1.5px 5px; }

/* floating dims popover — boxed W × D × THICK values, like the live app */
.appd-dimspop { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--body); box-shadow: 0 10px 26px -14px rgba(16,28,64,0.35); white-space: nowrap; }
.appd-dimspop b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.appd-dimspop .lb { font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--meta); }
.appd-dimspop .bx { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 3px 8px; border: 1px solid var(--border2); border-radius: 7px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; background: #fff; }
.appd-dimspop .x2 { color: var(--meta); font-size: 10px; }
.appd-dimspop .gap { width: 1px; height: 16px; background: var(--border2); margin: 0 6px; }

/* floating project-rebar chip (bottom-left of the canvas when rebar is on) */
.appd-rebarchip { position: absolute; left: 14px; bottom: 14px; z-index: 5; background: #fff7f0; border: 1px solid #f0b48a; color: #c2551d; border-radius: 8px; padding: 5px 11px; font-size: 11.5px; font-weight: 700; opacity: 0; white-space: nowrap; }

/* cost-breakdown panel (Estimate tab) */
.appd-cbh { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.appd-cbh .lab { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--accent); line-height: 1.2; }
.appd-cbh .ddl { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border2); border-radius: 7px; padding: 5px 9px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.appd-cbh .live { display: inline-flex; align-items: center; border: 1px solid var(--green-line); background: var(--green-wash); color: var(--green); border-radius: 100px; padding: 4px 9px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; }
.appd-cb { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.appd-cbrow { display: flex; align-items: center; gap: 9px; padding: 9.5px 12px; font-size: 12.5px; background: #fff; }
.appd-cbrow + .appd-cbrow { border-top: 1px solid var(--surface2); }
.appd-cbrow .lt { width: 20px; height: 20px; border-radius: 6px; background: var(--surface2); color: var(--body); font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.appd-cbrow .lbl { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.appd-cbrow .lead { flex: 1; border-bottom: 1px dotted var(--border2); margin: 0 2px; height: 1px; align-self: center; }
.appd-cbrow .val { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.appd-cbrow.mk { background: var(--surface); }
.appd-cbrow.mk .lbl, .appd-cbrow.mk .val { color: var(--body); }
.appd-grand { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--accent-line); background: var(--accent-wash); border-radius: 11px; }
.appd-grand .l { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--accent); }
.appd-grand .v { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.appd-propbtn { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 700; border-radius: 10px; padding: 11px 0; box-shadow: 0 10px 22px -10px rgba(47,107,255,0.65); }
.appd-fine { text-align: center; font-size: 11px; color: var(--meta); font-weight: 500; margin-top: 9px; }