/* ============================================================================
   AArchivesLAne — aala.css
   Production additions on top of the prototype stylesheets (base / components /
   pages). Everything that used to be an inline `style=""` attribute lives
   here as a class, so the strict CSP (style-src 'self') can stay on.
   ========================================================================== */

/* ---------- 1 · decorative placements (was inline style="" ) --------------- */
.d-hero-dots        { width:10rem;   height:10rem;   top:1.5rem;    right:3rem; }
.d-hero-arc         { width:20rem;   height:20rem;   bottom:-7rem;  right:-8rem; }
.d-hero-blob        { width:26rem;   height:19rem;   top:-7rem;     left:-10rem; }
.d-archive-square   { width:3.5rem;  height:3.5rem;  top:3rem;      right:1.5rem; }
.d-collections-dots { width:9rem;    height:9rem;    top:2rem;      right:2.5rem; }
.d-head-dots        { width:9rem;    height:9rem;    top:3rem;      right:2.5rem; }
.d-head-arc         { width:18rem;   height:18rem;   top:-4rem;     right:-7rem; }
.d-collections-blob { width:24rem;   height:17rem;   bottom:-6rem;  left:-10rem; }
.d-about-blob       { width:24rem;   height:17rem;   bottom:-8rem;  right:-9rem; }
.d-footer-dots      { width:8rem;    height:8rem;    bottom:4rem;   left:2rem; }
.d-footer-arc       { width:14rem;   height:14rem;   top:-5rem;     right:-5rem; }

/* ---------- 2 · palette swatches (was inline style="--sw:…") --------------- */
.sw-paper      { --sw:var(--paper); }
.sw-tan        { --sw:var(--tan); }
.sw-umber      { --sw:var(--umber); }
.sw-terracotta { --sw:var(--terracotta); }
.sw-ochre      { --sw:var(--ochre); }
.sw-olive      { --sw:var(--olive); }
.sw-rose       { --sw:var(--rose); }
.sw-stone      { --sw:var(--stone); }

/* ---------- 3 · palette strip (was inline style="background:…") ------------ */
.ps-paper      { background:var(--paper); }
.ps-tan        { background:var(--tan); }
.ps-umber      { background:var(--umber); }
.ps-terracotta { background:var(--terracotta); }
.ps-ochre      { background:var(--ochre); }
.ps-olive      { background:var(--olive); }
.ps-rose       { background:var(--rose); }
.ps-stone      { background:var(--stone); }

/* ---------- 4 · footer dots (was inline style="--c:…") --------------------- */
.fd-terracotta { --c:var(--terracotta); }
.fd-ochre      { --c:var(--ochre); }
.fd-olive      { --c:var(--olive); }
.fd-rose       { --c:var(--rose); }
.fd-stone      { --c:var(--stone); }

/* ---------- 5 · staggered entrances (was inline style="--i:…") ------------- */
/* Cards fade in with a small delay, capped at 12 steps like the prototype. */
.card:nth-child(1)  { --i:0; }  .card:nth-child(2)  { --i:1; }
.card:nth-child(3)  { --i:2; }  .card:nth-child(4)  { --i:3; }
.card:nth-child(5)  { --i:4; }  .card:nth-child(6)  { --i:5; }
.card:nth-child(7)  { --i:6; }  .card:nth-child(8)  { --i:7; }
.card:nth-child(9)  { --i:8; }  .card:nth-child(10) { --i:9; }
.card:nth-child(11) { --i:10; } .card:nth-child(12) { --i:11; }
.card:nth-child(n+13) { --i:12; }

.chip:nth-child(1)  { --i:0; }  .chip:nth-child(2)  { --i:1; }
.chip:nth-child(3)  { --i:2; }  .chip:nth-child(4)  { --i:3; }
.chip:nth-child(5)  { --i:4; }  .chip:nth-child(6)  { --i:5; }
.chip:nth-child(7)  { --i:6; }  .chip:nth-child(8)  { --i:7; }
.chip:nth-child(9)  { --i:8; }  .chip:nth-child(10) { --i:9; }
.chip:nth-child(n+11) { --i:9; }

/* ---------- 6 · production additions --------------------------------------- */
/* Collections are real links now, but should not read as underlined text. */
.collection{ text-decoration:none; }

/* Signed-in header: owner email + sign out (appears only when signed in). */
.signout-form{ display:none; align-items:center; gap:.35rem; margin-left:.4rem; }
@media (min-width:768px){ .signout-form{ display:flex; } }
.signout-email{ font-size:.58rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; max-width:22ch; overflow:hidden; text-overflow:ellipsis; }
.signout-btn{ font-family:var(--sans); }
.mobile-signout{ display:block; position:relative; width:100%; text-align:left; margin-bottom:.2rem;
  padding:.85rem .95rem .85rem 1.55rem; border:0; background:transparent; border-radius:var(--r-sm);
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); cursor:pointer; transition:background .3s ease, color .3s ease; }
.mobile-signout::before{ content:''; position:absolute; left:.85rem; top:50%; width:5px; height:5px;
  margin-top:-2.5px; border-radius:50%; background:var(--ochre); opacity:.45; }
.mobile-signout:hover{ background:var(--tan-tint); color:var(--ink); }

/* Server-side form errors, in the archive's voice. */
.form-error{ display:flex; align-items:center; gap:.7rem; padding:1rem 1.05rem;
  border:1px solid var(--terracotta-soft); border-radius:var(--r-sm);
  background:var(--terracotta-tint); color:var(--terracotta-ink); font-size:.88rem; line-height:1.6; }
.form-error::before{ content:'✦'; font-size:.8rem; flex:none; }

/* Folder rows in Admin: count + optional delete sit together. */
.folder-actions{ display:inline-flex; align-items:center; gap:.65rem; }