/* ==========================================================================
   Koinonia Prayer Department — Workers Portal theme
   Deep indigo + gold design system. Shared by every portal page.
   ========================================================================== */
:root{
  --navy:#20255e;
  --indigo:#2f3aa0;
  --indigo-600:#3a46be;
  --indigo-700:#262e84;
  --gold:#caa23a;
  --gold-ink:#8a6d12;
  --page:#eef1fb;
  --card:#ffffff;
  --border:#e6e8f0;
  --border-strong:#d3d7e6;
  --ink:#1b1f33;
  --muted:#6b7088;
  --ok:#1f8a52; --ok-bg:#e3f5ea; --ok-bd:#bfe6cd;
  --err:#c0392b; --err-bg:#fde7e7; --err-bd:#f3c6c6;
  --warn:#8a6d12; --warn-bg:#fcf2d6; --warn-bd:#efdca0;
  --info:#1b5fa8; --info-bg:#e4eefb; --info-bd:#c2d8f2;
  --radius:10px;
  --card-radius:14px;
  --shadow:0 8px 30px rgba(32,37,94,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--page);
  line-height:1.6;
  min-height:100vh;
}

/* Layout shell ----------------------------------------------------------- */
.wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:32px 18px}
.shell{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center}
.shell--wide{max-width:860px}

/* Brand header ----------------------------------------------------------- */
.brand{text-align:center;margin-bottom:24px}
.brand__logo{width:72px;height:72px;border-radius:50%;object-fit:cover;
  background:var(--navy);border:3px solid var(--gold);padding:3px;margin-bottom:12px}
.brand__title{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.45rem;
  color:var(--navy);line-height:1.25}
.brand__sub{color:var(--muted);font-size:.98rem;margin-top:2px}

/* Surfaces --------------------------------------------------------------- */
.panel{width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:var(--card-radius);box-shadow:var(--shadow);padding:30px 28px}
.panel__title{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.2rem;
  color:var(--navy);margin-bottom:6px;text-align:center}
.panel__lead{color:var(--muted);font-size:.95rem;text-align:center;margin-bottom:22px}

/* Card grid (landing) ---------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;width:100%}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--card-radius);
  box-shadow:var(--shadow);padding:30px 26px;text-align:center;
  transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(32,37,94,.13)}
.card__icon{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 auto 16px;font-size:1.5rem}
.card__icon--indigo{background:#e7e9f8;color:var(--indigo)}
.card__icon--gold{background:#faf0d8;color:var(--gold-ink)}
.card__title{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.15rem;
  color:var(--ink);margin-bottom:8px}
.card__text{color:var(--muted);font-size:.92rem;line-height:1.6;margin-bottom:20px}
.card__alt{margin-top:14px;font-size:.9rem;color:var(--muted)}
.card__alt a{color:var(--gold-ink);text-decoration:none;font-weight:500}
.card__alt a:hover{text-decoration:underline}

/* Forms ------------------------------------------------------------------ */
.field{margin-bottom:18px;text-align:left}
.field label,.field>label{display:block;font-weight:500;font-size:.92rem;
  color:#3c4156;margin-bottom:7px}
.req:after{content:" *";color:var(--err)}
.input,input[type=text],input[type=tel],input[type=email],input[type=date],
input[type=password],select,textarea{
  width:100%;padding:13px 15px;font-size:1rem;font-family:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--border-strong);border-radius:var(--radius);
  transition:border-color .2s,box-shadow .2s}
textarea{min-height:96px;resize:vertical}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;
  border-color:var(--indigo);box-shadow:0 0 0 3px rgba(47,58,160,.15)}
::placeholder{color:#a7abbd}

/* Buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 18px;font-size:1rem;font-weight:500;font-family:inherit;
  border:none;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  transition:background .2s,transform .15s,box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--indigo);color:#fff}
.btn--primary:hover{background:var(--indigo-700);box-shadow:0 6px 18px rgba(47,58,160,.28)}
.btn--outline{background:#fff;color:var(--indigo);border:1.5px solid var(--indigo)}
.btn--outline:hover{background:var(--indigo);color:#fff}
.btn--gold{background:var(--gold);color:#3d2f05}
.btn--gold:hover{background:#b88f24}
.btn--ghost{background:#f3f4fb;color:var(--ink);border:1.5px solid var(--border-strong)}
.btn--ghost:hover{background:#e9ebf6}
.btn-row{display:flex;gap:12px}
.btn-row .btn{width:auto;flex:1}

/* Notices ---------------------------------------------------------------- */
.notice{padding:13px 16px;border-radius:var(--radius);margin-bottom:20px;
  font-size:.93rem;border-left:4px solid;display:flex;gap:10px;align-items:flex-start}
.notice i{margin-top:2px}
.notice--error{background:var(--err-bg);color:var(--err);border-color:var(--err)}
.notice--warn{background:var(--warn-bg);color:var(--warn);border-color:var(--gold)}
.notice--info{background:var(--info-bg);color:var(--info);border-color:var(--info)}
.notice--success{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}

/* Info blocks / lists ---------------------------------------------------- */
.info-box{background:#f6f7fc;border-left:4px solid var(--indigo);border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 18px;margin:18px 0;text-align:left}
.info-box h3{font-family:'Poppins',sans-serif;font-size:1rem;color:var(--navy);margin-bottom:8px;font-weight:600}
.info-box ul{padding-left:20px;margin-top:8px}
.info-box li{margin-bottom:6px;color:#464b60;font-size:.92rem}
.member-card{background:#f6f7fc;border:1px solid var(--border);border-left:4px solid var(--gold);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:20px;text-align:left}
.member-card p{margin-bottom:5px;font-size:.93rem;color:#464b60}
.member-card strong{color:var(--navy)}

/* Radio group ------------------------------------------------------------ */
.radio-group{background:#f6f7fc;border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin:18px 0;text-align:left}
.radio-group>label{display:block;font-weight:600;color:var(--navy);margin-bottom:10px;font-size:.93rem}
.radio-opts{display:flex;flex-direction:column;gap:10px}
.radio-opt{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.95rem}
.radio-opt input{width:18px;height:18px;accent-color:var(--indigo);cursor:pointer}

/* Misc ------------------------------------------------------------------- */
.clock{font-weight:600;color:var(--indigo);background:#f6f7fc;border-radius:var(--radius);
  padding:14px;text-align:center;margin:14px 0;font-size:1.02rem}
.capture-status{display:none;margin-top:12px;font-size:.88rem;color:var(--muted);text-align:center}
.foot{margin-top:26px;color:var(--muted);font-size:.82rem;text-align:center}
.foot a{color:var(--muted)}
.center{text-align:center}
.mt{margin-top:16px}
.back-link{display:inline-block;margin-top:16px;color:var(--indigo);text-decoration:none;font-weight:500;font-size:.92rem}
.back-link:hover{text-decoration:underline}

/* Success splash --------------------------------------------------------- */
.splash{text-align:center}
.splash__icon{font-size:4rem;color:var(--ok);margin-bottom:14px}
.splash__icon--gold{color:var(--gold)}
.progress{height:6px;background:#e9ebf6;border-radius:3px;overflow:hidden;margin:22px 0}
.progress__bar{height:100%;background:var(--indigo);width:100%;animation:shrink 5s linear forwards}
@keyframes shrink{from{width:100%}to{width:0}}

@media (max-width:520px){
  .panel{padding:24px 20px}
  .brand__title{font-size:1.25rem}
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%}
}