/* ============================================================
   The Aya Mission — brand theme for applicant-facing pages
   Uses the real deck assets (/assets/) via the same torn-paper
   border-image + gold-tape SVG technique as theayamission.org.
   Scoped to #loginView, :is(#portalView,#volunteerView), and body.tam-page (intake).
   ============================================================ */
:root{
  --green-deep:#0e1f15; --green:#16301f; --green-mid:#1d3a28;
  --gold:#d9b777; --gold-soft:#e6cd9b; --gold-dark:#7a5f1f;
  --paper:#f7f5ee; --ink:#14140f; --ink-soft:#2e2e26; --on-green:#f2f0e6; --fine:#6f6c5d;
}

/* Green canvas */
#loginView, :is(#portalView,#volunteerView), body.tam-page{
  background:var(--green) url("/assets/bg-green.jpg") center/cover no-repeat !important;
  color:var(--on-green); font-family:'Quicksand',-apple-system,sans-serif; font-weight:500;
}
@media (max-width:900px){
  #loginView, :is(#portalView,#volunteerView), body.tam-page{
    background:var(--green) url("/assets/bg-green-tile.jpg") 0 0/480px 480px repeat !important;
  }
}

/* Crisis strip — first element on public pages */
.tam-crisis{background:var(--gold);color:var(--green-deep);text-align:center;
  padding:11px 18px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:.9rem;line-height:1.45}
.tam-crisis a{color:var(--green-deep);text-decoration:underline;white-space:nowrap}

/* Shared logo image on paper */
.tam-logo{width:150px;max-width:66%;height:auto;margin:0 auto 10px;display:block}

/* Buttons — real tape backgrounds */
.tam-btn,.tam-btn-gold{display:inline-block;text-decoration:none;font-family:'Quicksand',sans-serif;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;font-size:.9rem;padding:15px 32px;border:none;border-radius:3px;
  color:var(--green-deep);background:url("/assets/tape-small.svg") center/100% 100% no-repeat;cursor:pointer;transition:transform .15s}
.tam-btn-gold:hover{transform:translateY(-2px);background-image:url("/assets/tape-small-hover.svg")}

/* ---------------- Sign-in ---------------- */
#loginView .login-card{
  background:none;border:0;border-style:solid;border-width:44px 26px;
  border-image:url("/assets/paper-torn.webp") 160 110 160 70 fill / 44px 30px 44px 22px stretch;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));box-shadow:none;border-radius:0;
  padding:14px 16px;transform:rotate(-.5deg);color:var(--ink-soft);width:380px}
#loginView .login-card .logo{display:none}
#loginView .login-card h1{font-family:'Marcellus',serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);font-size:1.55rem;margin-top:4px}
#loginView .login-card p{color:var(--ink-soft);font-family:'Quicksand',sans-serif}
#loginView .login-card label{font-family:'Quicksand',sans-serif;font-weight:600;color:var(--ink-soft)}
#loginView .login-card input{background:#fffdf7;border:1px solid #d8d3c2;color:var(--ink);font-family:'Quicksand',sans-serif}
#loginView .login-card input:focus{border-color:var(--gold-dark);outline:none}
#loginView .login-card .btn{font-family:'Quicksand',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--green-deep);background:url("/assets/tape-small.svg") center/100% 100% no-repeat}
#loginView .login-card .btn:hover{transform:translateY(-2px);background-image:url("/assets/tape-small-hover.svg")}
#loginView .login-card a{color:var(--gold-dark)!important;font-weight:600}

/* ---------------- Applicant portal ---------------- */
:is(#portalView,#volunteerView) header.app{background:linear-gradient(180deg,rgba(8,18,12,.85),rgba(8,18,12,.5));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(217,183,119,.28)}
:is(#portalView,#volunteerView) header.app .title h1{font-family:'Marcellus',serif;text-transform:uppercase;letter-spacing:.05em;color:var(--paper)}
:is(#portalView,#volunteerView) header.app .title p{color:#cfc9b6}
:is(#portalView,#volunteerView) .logo{background:var(--paper);color:var(--green-deep)}
:is(#portalView,#volunteerView) .rolechip{background:rgba(217,183,119,.22);color:var(--gold)}
:is(#portalView,#volunteerView) .btn.sec{background:transparent;border:2px solid var(--gold);color:var(--gold);
  font-family:'Quicksand',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}
:is(#portalView,#volunteerView) .btn.sec:hover{transform:translateY(-2px)}
:is(#portalView,#volunteerView) .pcard{background:none;border:0;border-style:solid;border-width:40px 24px;
  border-image:url("/assets/paper-torn.webp") 160 110 160 70 fill / 40px 28px 40px 21px stretch;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.42));box-shadow:none;border-radius:0;padding:8px 10px;color:var(--ink-soft)}
:is(#portalView,#volunteerView) .pcard:nth-child(3n){border-image-source:url("/assets/paper-torn-2.webp")}
:is(#portalView,#volunteerView) .pcard:nth-child(3n+1){border-image-source:url("/assets/paper-torn-3.webp")}
:is(#portalView,#volunteerView) .pcard h3{font-family:'Marcellus',serif;letter-spacing:.04em;color:var(--ink)}
:is(#portalView,#volunteerView) .pcard.hero{border-image:none;border:1px solid rgba(217,183,119,.3);border-radius:6px;padding:22px;
  background:linear-gradient(135deg,var(--green-mid),var(--green-deep));color:var(--on-green);filter:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
:is(#portalView,#volunteerView) .pcard.hero .phead{font-family:'Marcellus',serif;text-transform:uppercase;letter-spacing:.05em;color:var(--gold)}
:is(#portalView,#volunteerView) .pcard.hero .pdetail{color:#e7e3d4}
:is(#portalView,#volunteerView) .pcard .muted,:is(#portalView,#volunteerView) .pcard .hint{color:var(--fine)}
:is(#portalView,#volunteerView) .pstep{color:var(--ink-soft);border-bottom:1px solid #e2ddce}
:is(#portalView,#volunteerView) .pstep.done{color:var(--ink)}
:is(#portalView,#volunteerView) .pstep.done .pdot{background:var(--gold-dark);border-color:var(--gold-dark)}
:is(#portalView,#volunteerView) .evstat{background:#efe9da;color:var(--ink-soft)}
:is(#portalView,#volunteerView) .btn.sm:not(.sec){color:var(--green-deep);background:url("/assets/tape-small.svg") center/100% 100% no-repeat;
  font-family:'Quicksand',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
:is(#portalView,#volunteerView) .btn.sm:not(.sec):hover{background-image:url("/assets/tape-small-hover.svg")}
:is(#portalView,#volunteerView) .statusbadge.open{background:#e7f0e5;color:#2b5a37}
:is(#portalView,#volunteerView) .progress>i{background:var(--gold-dark)}

/* ---------------- Intake form (apply.html) ---------------- */
body.tam-page{padding-top:0}
body.tam-page .apply-card{
  background:none;border:0;border-style:solid;border-width:52px 30px;
  border-image:url("/assets/paper-torn.webp") 160 110 160 70 fill / 52px 36px 52px 27px stretch;
  filter:drop-shadow(0 12px 34px rgba(0,0,0,.5));box-shadow:none;border-radius:0;padding:20px 20px;color:var(--ink-soft)}
body.tam-page .apply-card h1,body.tam-page .ok-box h1{font-family:'Marcellus',serif;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
body.tam-page .apply-head .logo{display:none}
body.tam-page .apply-head{justify-content:center;margin-bottom:2px}
body.tam-page .fld label{font-family:'Quicksand',sans-serif;font-weight:600;color:var(--ink-soft)}
body.tam-page input,body.tam-page select,body.tam-page textarea{background:#fffdf7;border:1px solid #d8d3c2;color:var(--ink);font-family:'Quicksand',sans-serif}
body.tam-page input:focus,body.tam-page select:focus,body.tam-page textarea:focus{border-color:var(--gold-dark);outline:none}
body.tam-page h2{font-family:'Marcellus',serif;color:var(--ink);letter-spacing:.03em}
body.tam-page .btn{font-family:'Quicksand',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--green-deep);background:url("/assets/tape-small.svg") center/100% 100% no-repeat;border:none;border-radius:3px}
body.tam-page .btn:hover{transform:translateY(-2px);background-image:url("/assets/tape-small-hover.svg")}
body.tam-page .btn.sec{background:none;border:2px solid var(--gold-dark);color:var(--gold-dark)}
body.tam-page .stepbar>i.on{background:var(--gold-dark)}
body.tam-page .opt.sel{background:var(--gold-dark);border-color:var(--gold-dark);color:var(--paper)}
body.tam-page a{color:var(--gold-dark)}

/* Compliance line */
.tam-compliance{font-family:'Quicksand',sans-serif;font-size:.82rem;color:var(--fine);
  border-top:1px solid #e2ddce;margin-top:16px;padding-top:12px;font-style:italic}

/* ---------------- Portal: clean, high-contrast dashboard ---------------- */
:is(#portalView,#volunteerView){ background:#eef1f4 !important; }
:is(#portalView,#volunteerView) header.app{ background:linear-gradient(135deg,var(--green-mid),var(--green-deep)) !important; }
:is(#portalView,#volunteerView) .pcard:not(.hero){ background:#fff !important; border:1px solid #e3e8ee !important; border-image:none !important; border-radius:14px !important; box-shadow:0 2px 12px rgba(20,30,25,.07) !important; padding:20px 22px !important; color:#1f2733 !important; filter:none !important; }
:is(#portalView,#volunteerView) .pcard:not(.hero) h3{ color:#14140f !important; }
:is(#portalView,#volunteerView) .pcard:not(.hero) .hint,:is(#portalView,#volunteerView) .pcard:not(.hero) .muted{ color:#6b7684 !important; }
:is(#portalView,#volunteerView) .pcard:not(.hero) label{ color:#2e3440 !important; font-weight:600; }
:is(#portalView,#volunteerView) .pcard:not(.hero) input,:is(#portalView,#volunteerView) .pcard:not(.hero) select,:is(#portalView,#volunteerView) .pcard:not(.hero) textarea{ background:#fff !important; border:1px solid #d8dce3 !important; color:#1f2733 !important; }
:is(#portalView,#volunteerView) .pstep{ color:#3a4250 !important; border-bottom:1px solid #e3e8ee !important; }
:is(#portalView,#volunteerView) .pstep.done{ color:#14140f !important; }
:is(#portalView,#volunteerView) .tam-compliance{ color:#5a6675 !important; border-top-color:#e3e8ee !important; }
:is(#portalView,#volunteerView) .ptile{ background:#fff !important; box-shadow:0 2px 12px rgba(20,30,25,.07) !important; }
:is(#portalView,#volunteerView) .ptile h3{ color:#14140f !important; }
:is(#portalView,#volunteerView) .ptile p{ color:#6b7684 !important; }
:is(#portalView,#volunteerView) .btn.ghost{ color:#3a4250 !important; }
:is(#portalView,#volunteerView) .pcard.pdue{ background:#fffdf3 !important; border:1px solid #e6c200 !important; }
:is(#portalView,#volunteerView) .pcard.pdue b{ color:#14140f !important; }
:is(#portalView,#volunteerView) .ptile.alert{ background:#fffdf3 !important; border-color:#e6c200 !important; }

/* knowledge base on green portal/volunteer background */
:is(#portalView,#volunteerView) .kb-cat{color:var(--gold)}
:is(#portalView,#volunteerView) .kb-art .kb-md b{color:#1d2a24}