/* ============================================================
   ACRE Artifact Shell v1
   Reusable chrome for standalone, shareable proof artifacts.
   Utility-first, app-familiar affordances, mobile-first.
   Loaded AFTER the artifact's own content styles so it wins.
   ============================================================ */

:root{
  --a-cream:#f5efe2;
  --a-ink:#352318;
  --a-terra:#A0714F;
  --a-terra-dk:#8a5f41;
  --a-teal:#006981;
  --a-line:#e6d9c4;
  --a-bar-h:60px;
}

/* ---------- top bar: identity + back, minimal ---------- */
.a-topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 18px; height:52px;
  background:rgba(245,239,226,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--a-line);
}
.a-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--a-ink)}
.a-mark{
  display:block;width:26px;height:26px;flex:none;
  background:url("/assets/acre-mark.png") center/contain no-repeat;
  text-indent:-9999px;overflow:hidden;
}
.a-brandname{font:600 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:-.01em}
.a-topnav{display:none;gap:20px}
@media(min-width:760px){ .a-topnav{display:flex} }
.a-topnav a{
  font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:rgba(53,35,24,.7); text-decoration:none;
}
.a-topnav a:hover{color:var(--a-terra)}

/* ---------- sticky action bar: the one thing to do ---------- */
.a-actionbar{
  position:sticky; bottom:0; z-index:70;
  display:flex; gap:10px; align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(43,29,20,.97);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(245,239,226,.14);
}
.a-actionbar .a-abtext{
  flex:1 1 auto; min-width:0;
  font:500 12.5px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:rgba(245,239,226,.72);
}
@media(max-width:560px){ .a-actionbar .a-abtext{display:none} }

/* ---------- buttons: things that look pressable ---------- */
.a-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:8px; border:1px solid transparent;
  font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s, transform .06s;
}
.a-btn:active{transform:translateY(1px)}
.a-btn-primary{background:var(--a-terra);color:#fff}
.a-btn-primary:hover{background:var(--a-terra-dk)}
.a-btn-ghost{background:transparent;color:rgba(245,239,226,.9);border-color:rgba(245,239,226,.28)}
.a-btn-ghost:hover{border-color:rgba(245,239,226,.6);color:#fff}
.a-btn-quiet{background:#fff;color:var(--a-ink);border-color:var(--a-line)}
.a-btn-quiet:hover{border-color:var(--a-terra);color:var(--a-terra)}
.a-btn[data-copied="1"]{background:var(--a-teal);color:#fff;border-color:var(--a-teal)}

/* ---------- reading progress ---------- */
.a-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--a-terra); z-index:80; transition:width .1s linear;
}

/* ---------- onward paths: the next-step cards ---------- */
.a-next{
  border-top:1px solid var(--a-line);
  background:#efe6d4;
  padding:44px 0 52px;
}
.a-next-inner{max-width:1180px;margin:0 auto;padding:0 28px}
.a-next h2{
  margin:0 0 6px;
  font:600 22px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  letter-spacing:-.015em; color:var(--a-ink);
}
.a-next .a-next-sub{
  margin:0 0 24px; max-width:62ch;
  font:400 15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:rgba(53,35,24,.72);
}
.a-cards{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){ .a-cards{grid-template-columns:repeat(3,1fr)} }
.a-card{
  display:flex; flex-direction:column; gap:8px;
  background:#fff; border:1px solid var(--a-line); border-radius:10px;
  padding:20px; text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .1s;
}
.a-card:hover{border-color:var(--a-terra);box-shadow:0 4px 18px rgba(160,113,79,.12);transform:translateY(-1px)}
.a-card .a-ceyebrow{
  font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:var(--a-terra);
}
.a-card h3{
  margin:0;
  font:600 17px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  letter-spacing:-.01em;
}
.a-card p{
  margin:0;
  font:400 14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:rgba(53,35,24,.72);
}
.a-card .a-cgo{
  margin-top:auto; padding-top:8px;
  font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--a-terra);
}

/* ---------- pass-it-on block (champion affordance) ---------- */
.a-pass{
  margin-top:28px; background:#fff; border:1px solid var(--a-line);
  border-radius:10px; padding:22px;
}
.a-pass h3{
  margin:0 0 6px;
  font:600 16px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
.a-pass p{
  margin:0 0 14px;
  font:400 14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:rgba(53,35,24,.72);
}
.a-quote{
  margin:0 0 14px; padding:14px 16px;
  background:#f7f2e7; border-left:3px solid var(--a-terra); border-radius:0 6px 6px 0;
  font:400 14.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:#2c2018;
}
.a-qurl{
  margin-top:10px; padding-top:9px;
  border-top:1px solid rgba(53,35,24,.12);
  font:600 13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--a-terra); word-break:break-all;
}
.a-passrow{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- footer ---------- */
.a-foot{
  background:var(--a-ink); color:rgba(245,239,226,.55);
  padding:26px 0;
}
.a-foot-inner{
  max-width:1180px;margin:0 auto;padding:0 28px;
  display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
  font:600 10px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;
}
@media(min-width:760px){
  .a-foot-inner{flex-direction:row;justify-content:space-between;text-align:left}
}
.a-foot a{color:inherit;text-decoration:none}
.a-foot a:hover{color:var(--a-terra)}
.a-foot .a-footlinks{display:flex;gap:20px}

/* ---------- mobile ergonomics for the artifact body ---------- */
@media(max-width:640px){
  .wrap{padding-left:16px !important;padding-right:16px !important}
  header .wrap{padding-left:16px !important;padding-right:16px !important}
  .seg{flex-wrap:wrap}
  .seg button{min-height:40px}
  .controls{position:sticky;top:52px;z-index:50;background:var(--a-cream);
            padding-top:10px;padding-bottom:10px;margin-bottom:14px}
}