/* Styles for the public pages (home, project, gauge). Reuses the app's
   CSS variables and panel/hero classes; adds only what those pages need. */
.pub-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1.25rem; flex-wrap:wrap; }
.pub-top__brand { display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--text); }
.pub-top__brand:hover { text-decoration:none; }
.pub-top__brand .brand-mark { font-size:1.4rem; color:var(--accent); }
.pub-top__nav a { margin-left:1rem; color:var(--muted); }
.pub-top__nav a.is-active, .pub-top__nav a:hover { color:var(--text); text-decoration:none; }
.pub-lead { color:var(--muted); max-width:66ch; margin:.25rem 0 0; }
.note { color:var(--muted); font-size:.88rem; }
.flow { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.85rem; color:var(--muted);
        background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.9rem 1rem; overflow-x:auto; white-space:pre; }

/* homepage */
.home-hero { margin:1.5rem 0 2rem; text-align:center; }
.home-hero h1 { font-size:2.4rem; margin-bottom:.4rem; }
.home-hero .pub-lead { margin:.25rem auto 0; font-size:1.05rem; }
.pub-contact { color:var(--muted); font-size:.95rem; margin:2rem 0 .5rem; }
.pub-contact a { color:var(--accent-2); }
.project-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1.25rem; }
.project-card { display:flex; flex-direction:column; gap:.6rem; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.35rem; box-shadow:var(--shadow); }
.project-card h2 { margin:0; }
.project-card .tagline { color:var(--accent-2); margin:0; }
.project-card p { margin:0; color:var(--muted); }
.project-card__actions { display:flex; gap:.75rem; margin-top:.5rem; flex-wrap:wrap; }
.gauge-card { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.35rem; color:var(--text); }
.gauge-card:hover { text-decoration:none; border-color:var(--accent); }
.gauge-card__level { font-size:2rem; font-weight:600; }
.gauge-card__level small { font-size:1rem; color:var(--muted); margin-left:.2rem; }
.gauge-card p { margin:0; color:var(--muted); }

/* project page */
.points { margin:.75rem 0 0; padding-left:1.2rem; color:var(--muted); }
.points li { margin:.45rem 0; }
.parts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:1rem; }
.part { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.part__img { background:#fff; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:.75rem; }
.part__img img { max-width:100%; max-height:100%; object-fit:contain; }
.part__body { padding:.85rem .95rem 1rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.part__role { font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); }
.part__name { font-weight:600; }
.part__spec { color:var(--muted); font-size:.88rem; line-height:1.4; flex:1; }
.part__link { font-size:.82rem; }
.repo-link { display:inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.45rem .7rem; }
.repo-link:hover { border-color:var(--accent); text-decoration:none; }

.pub-foot { color:var(--muted); font-size:.82rem; margin:2rem 0 1rem; line-height:1.5; }
.pub-foot a { color:var(--muted); text-decoration:underline; }

/* screenshots (phone-shaped) */
.shots { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:flex-start; }
.shot { margin:0; max-width:260px; }
.shot img { width:100%; height:auto; display:block; border:1px solid var(--border); border-radius:14px; background:#fff; box-shadow:var(--shadow); }
.shot figcaption { color:var(--muted); font-size:.82rem; margin-top:.5rem; line-height:1.4; }

/* product: card on the homepage, page, contact form */
.prod-kicker { display:inline-block; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.product-card { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin:0 0 1.5rem;
  background:linear-gradient(135deg, var(--panel), var(--panel-2, var(--panel))); border:1px solid var(--accent); border-radius:var(--radius); padding:1.35rem 1.5rem; color:var(--text); box-shadow:var(--shadow); }
.product-card:hover { text-decoration:none; border-color:var(--accent-2); }
.product-card__body { flex:1 1 420px; display:flex; flex-direction:column; gap:.4rem; }
.product-card__body h2 { margin:0; }
.product-card__body .tagline { color:var(--accent-2); margin:0; }
.product-card__body p { margin:0; color:var(--muted); }
.product-card__cta { display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; }
.prod-hero { margin:1.25rem 0 1.75rem; }
.prod-hero h1 { font-size:2.2rem; margin:.25rem 0 .35rem; }
.prod-hero .pub-lead { max-width:70ch; font-size:1.05rem; }
.prod-hero__actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.cap-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; margin-top:1rem; }
.cap { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.35rem; }
.cap__k { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); }
.cap h3 { margin:0; font-size:1.02rem; }
.cap p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.5; }
.diagram { margin:1.25rem 0 1rem; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem .8rem; }
.diagram svg { width:100%; height:auto; display:block; font-family:inherit; }
.diagram figcaption { color:var(--muted); font-size:.82rem; margin-top:.6rem; line-height:1.45; }
.spec-wrap { overflow-x:auto; }
.spec { border-collapse:collapse; width:100%; font-size:.9rem; }
.spec th, .spec td { padding:.5rem .6rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.spec th { color:var(--muted); font-weight:500; font-size:.8rem; letter-spacing:.03em; }
.spec td.n, .spec th.n { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.contact { display:flex; flex-direction:column; gap:.85rem; max-width:720px; }
.contact label { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; color:var(--muted); }
.contact input, .contact textarea { width:100%; box-sizing:border-box; padding:.6rem .7rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-2); color:var(--text); font:inherit; }
.contact input:focus, .contact textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.contact__row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (max-width:640px) { .contact__row { grid-template-columns:1fr; } }
.contact__hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact__actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.form-ok { background:var(--bg-2); border-left:3px solid var(--ok, var(--accent)); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:.85rem 1rem; }
.form-err { background:var(--bg-2); border-left:3px solid var(--flood, #ef5a6f); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:.7rem 1rem; margin-bottom:.9rem; color:var(--text); }