/* Caminario app — component styles (theme.css holds tokens & base) */

.app-header .wordmark{display:inline-flex; align-items:center; line-height:0}
.app-header .wordmark img{height:2.1rem; width:auto; display:block}
.app-header .app-nav{display:flex; gap:.25rem}
.header-spacer{flex:1}
.wrap{padding-block:1.5rem 5rem}
.content{max-width:var(--content)}
.tiny{font-size:.82rem}
.req{color:var(--terracotta-deep)}

/* choice grid (connect / fork) */
.choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.choice{display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; text-align:left; cursor:pointer; transition:border-color .15s, background .15s}
.choice:hover{border-color:var(--sage); background:var(--sage-soft)}
.choice strong{font-size:1.05rem}

/* path overview */
.path-row{display:flex; justify-content:space-between; align-items:center; width:100%; gap:1rem;
  background:transparent; border:0; border-top:1px solid var(--line); padding:.7rem .2rem; cursor:pointer; font:inherit; color:var(--ink); text-align:left}
.path-row:first-of-type{border-top:0}
.path-row:hover{color:var(--terracotta-deep)}

/* fields */
.field{margin-bottom:1.1rem}
.field label{font-family:var(--font-ui)}
.hint-list{margin:.2rem 0 1rem; padding-left:1.1rem; color:var(--muted)}
.hint-list li{margin:.2rem 0}

.extras{margin-top:1rem; border-top:1px dashed var(--line); padding-top:.6rem}
.extras summary{cursor:pointer; color:var(--faint); font-weight:600}
.extras[open] summary{margin-bottom:.6rem}

.pack-nav{display:flex; justify-content:space-between; gap:.75rem; margin-top:1.5rem}

/* auth */
.auth-slot{display:flex; align-items:center}
.btn-sm{padding:.45rem .9rem; font-size:.9rem}
.account{display:flex; align-items:center; gap:.6rem}
.account-email{font-size:.85rem; color:var(--muted); max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.auth .field{max-width:26rem}
.auth-error{background:color-mix(in srgb,var(--terracotta) 14%,var(--cream)); color:var(--terracotta-deep); padding:.6rem .8rem; border-radius:var(--radius-sm)}
.checkline{display:flex; gap:.5rem; align-items:flex-start; font-weight:400; color:var(--muted); max-width:26rem}
.checkline input{width:auto; margin-top:.25rem}

.progress{margin:.4rem 0 1rem}

@media (max-width:520px){
  .choice-grid{grid-template-columns:1fr}
  .pack-nav{flex-direction:column-reverse}
  .pack-nav .btn{width:100%}
}

/* master dashboard */
.stats-strip{display:flex;flex-wrap:wrap;gap:.6rem;margin:.5rem 0 1rem}
.stat-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem .9rem;min-width:7rem}
.stat-num{display:block;font-family:var(--font-display);font-size:1.4rem;color:var(--ink)}
.stat-lbl{display:block;font-size:.75rem;color:var(--faint)}
.accounts-box{overflow-x:auto}
table.accounts{width:100%;border-collapse:collapse;font-size:.85rem}
table.accounts th,table.accounts td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
table.accounts th{color:var(--muted);font-weight:600}