/* Team Caro · Client Entry Premium V1
   Presentation-only layer for auth, activation, intake, safety and check-in flows. */

/* ── Login / account entry ─────────────────────────────────────────────── */
#auth.auth-screen,
#reset.auth-screen{
  min-height:100svh;
  padding:clamp(24px,5vw,72px);
  place-items:center end;
  background:#171511;
}
#auth.auth-screen::before,
#reset.auth-screen::before{
  inset:0;
  background:
    linear-gradient(90deg,rgba(19,17,13,.15) 0%,rgba(19,17,13,.35) 46%,rgba(19,17,13,.72) 100%),
    url('/assets/home/home-hero.webp') 48% 36%/cover no-repeat;
  opacity:1;
}
#auth.auth-screen::after,
#reset.auth-screen::after{
  content:'DISCIPLINA  ·  CONSTANCIA  ·  PROGRESO';
  position:absolute;
  left:clamp(30px,6vw,92px);
  bottom:clamp(30px,6vw,72px);
  z-index:1;
  max-width:420px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.24);
  font:500 10px 'IBM Plex Mono',monospace;
  letter-spacing:.22em;
  color:rgba(255,255,255,.72);
}
#auth .auth-card,
#reset .auth-card{
  z-index:2;
  width:min(100%,460px);
  max-width:460px;
  padding:42px 40px 38px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:24px;
  background:rgba(248,246,240,.94);
  color:#241f19;
  box-shadow:0 38px 100px -46px rgba(0,0,0,.72);
  backdrop-filter:blur(20px) saturate(1.05);
}
#auth .brand,
#reset .brand{
  justify-content:flex-start;
  margin-bottom:32px;
  color:#3a332a;
  font-size:11px;
  letter-spacing:.30em;
}
#auth .brand .dot,
#reset .brand .dot{
  width:7px;
  height:7px;
  background:#a37436;
  box-shadow:none;
}
#auth .auth-card h1,
#reset .auth-card h1{
  margin:0 0 8px;
  text-align:left;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(38px,4vw,52px);
  line-height:.98;
  letter-spacing:-.03em;
  text-transform:none;
  color:#211c17;
}
#auth .auth-sub,
#reset .auth-sub{
  margin:0 0 28px;
  text-align:left;
  color:#746b61;
  font-size:14.5px;
}
#auth .tabs{
  gap:0;
  margin-bottom:24px;
  padding:4px;
  border:1px solid rgba(72,60,44,.10);
  border-radius:999px;
  background:#eee9df;
}
#auth .tab{
  padding:10px 12px;
  border-radius:999px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.10em;
  color:#887e72;
}
#auth .tab.on{
  background:#fffdf9;
  color:#2d2720;
  box-shadow:0 5px 16px -13px rgba(35,27,18,.55);
}
#auth .field,
#reset .field{margin-bottom:17px}
#auth .field label,
#reset .field label{
  margin-bottom:7px;
  color:#857b6f;
  font-size:9.5px;
  letter-spacing:.12em;
}
#auth .field input,
#reset .field input{
  min-height:51px;
  padding:13px 15px;
  border:1px solid rgba(72,60,44,.13);
  border-radius:12px;
  background:#f1ede5;
  color:#2d2720;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
#auth .field input:focus,
#reset .field input:focus{
  border-color:#a8793a;
  box-shadow:0 0 0 3px rgba(166,119,57,.10);
}
#auth .btn.wide,
#reset .btn.wide{
  min-height:52px;
  margin-top:5px;
  border-radius:999px;
  background:#9b6c2e;
  border-color:#9b6c2e;
  color:#fffaf1;
  font-size:13px;
}
#auth .linkbtn,
#reset .linkbtn{color:#7f7569}

/* ── Shared top bar in guided flows ───────────────────────────────────── */
#intake>header.bar,
#checkin>header.bar,
#safetycheck>header.bar{
  padding:16px clamp(18px,4vw,48px);
  border-bottom:1px solid rgba(69,57,42,.10);
  background:rgba(242,239,232,.86);
  backdrop-filter:blur(18px);
}
#intake>header.bar .brand,
#checkin>header.bar .brand,
#safetycheck>header.bar .brand{
  color:#393229;
  font-size:10.5px;
  letter-spacing:.26em;
}

/* ── Intake + check-in canvas ──────────────────────────────────────────── */
#intake,
#checkin,
#safetycheck{
  min-height:100svh;
  color:#28231d;
  background:
    radial-gradient(800px 460px at 88% 10%,rgba(171,126,66,.10),transparent 65%),
    radial-gradient(740px 500px at 6% 52%,rgba(95,81,61,.06),transparent 68%),
    linear-gradient(180deg,#efede7 0%,#e8e4db 100%);
}
#intake .intake-wrap,
#checkin .intake-wrap{
  width:min(100% - 32px,900px);
  max-width:900px;
  margin:0 auto;
  padding:52px 0 84px;
}
#intake .intake-head,
#checkin .intake-head{
  position:relative;
  overflow:hidden;
  margin-bottom:28px;
  padding:42px 44px 40px;
  border:1px solid rgba(74,60,43,.11);
  border-radius:24px;
  background:rgba(249,247,241,.91);
  box-shadow:0 30px 78px -60px rgba(49,36,22,.50);
}
#intake .intake-head::after,
#checkin .intake-head::after{
  content:'';
  position:absolute;
  right:-52px;
  top:-62px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(170,124,62,.12),rgba(170,124,62,0) 68%);
  pointer-events:none;
}
#intake .intake-head .eyebrow,
#checkin .intake-head .eyebrow{
  position:relative;
  z-index:1;
  margin-bottom:12px;
  font:500 9.5px 'IBM Plex Mono',monospace;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:#9d6f32;
}
#intake .intake-head h1,
#checkin .intake-head h1{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0 0 17px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(42px,6vw,65px);
  font-weight:400;
  line-height:.97;
  letter-spacing:-.035em;
  text-transform:none;
  color:#272119;
}
#intake .intake-head p,
#checkin .intake-head p{
  position:relative;
  z-index:1;
  max-width:69ch;
  margin:0;
  color:#6a6157;
  font-size:14.5px;
  line-height:1.68;
}
#checkin .intake-head .fnote{
  display:inline-flex;
  margin-top:14px!important;
  padding:7px 11px;
  border:1px solid rgba(75,61,44,.09);
  border-radius:999px;
  background:#f0ebe2;
  color:#82786c;
  font:500 9.5px 'IBM Plex Mono',monospace;
  letter-spacing:.02em;
}

/* Dynamic forms: preserve structure, upgrade every control consistently. */
#intakeForm,
#checkinForm{
  display:block;
  padding:36px 40px 38px;
  border:1px solid rgba(73,60,44,.11);
  border-radius:24px;
  background:rgba(250,248,243,.94);
  box-shadow:0 34px 82px -62px rgba(48,35,22,.46);
}
#intakeForm input:not([type='checkbox']):not([type='radio']),
#intakeForm textarea,
#intakeForm select,
#checkinForm input:not([type='checkbox']):not([type='radio']),
#checkinForm textarea,
#checkinForm select{
  width:100%;
  min-height:50px;
  border:1px solid rgba(73,60,44,.12)!important;
  border-radius:12px!important;
  background:#f1ede5!important;
  color:#2b251f!important;
  font-family:'IBM Plex Sans',system-ui,sans-serif!important;
  font-size:15px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65)!important;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
#intakeForm textarea,
#checkinForm textarea{
  min-height:112px;
  padding:13px 14px!important;
  resize:vertical;
  line-height:1.55;
}
#intakeForm input:not([type='checkbox']):not([type='radio']):focus,
#intakeForm textarea:focus,
#intakeForm select:focus,
#checkinForm input:not([type='checkbox']):not([type='radio']):focus,
#checkinForm textarea:focus,
#checkinForm select:focus{
  border-color:#a77839!important;
  background:#f6f2ea!important;
  box-shadow:0 0 0 3px rgba(166,119,57,.09)!important;
}
#intakeForm label,
#checkinForm label{
  color:#443c33;
}
#intakeFields>*,
#checkinFields>*{
  scroll-margin-top:80px;
}

/* Sections and headings generated by the form renderer. */
#intakeForm h2,#intakeForm h3,#intakeForm h4,
#checkinForm h2,#checkinForm h3,#checkinForm h4{
  font-family:Georgia,'Times New Roman',serif!important;
  font-weight:400!important;
  text-transform:none!important;
  letter-spacing:-.01em!important;
  color:#2e2821!important;
}
#intakeForm h2,#checkinForm h2{font-size:29px!important}
#intakeForm h3,#checkinForm h3{font-size:23px!important}
#intakeForm .k,#checkinForm .k{
  color:#9b6d31;
  font-size:9.5px;
  letter-spacing:.14em;
}
#intakeForm hr,#checkinForm hr{
  border:0;
  border-top:1px solid rgba(73,60,44,.09);
  margin:26px 0;
}

/* Existing objective summary becomes a quiet evidence strip. */
#checkinForm .ci-obj{
  margin:0 0 28px;
  padding:17px 18px;
  border:0;
  border-top:1px solid rgba(73,60,44,.10);
  border-bottom:1px solid rgba(73,60,44,.10);
  border-radius:0;
  background:transparent;
}
#checkinForm .ci-obj-h{
  margin-bottom:11px;
  font-size:9px;
  letter-spacing:.16em;
  color:#9b6d31;
}
#checkinForm .ci-obj-chip{
  border-color:rgba(73,60,44,.09);
  border-radius:999px;
  background:#efeae1;
  color:#51493f;
}
#checkinForm .ci-obj-note{color:#82786c}

/* Consent and submit are deliberately calm and serious. */
#intake .consent-line{
  margin-top:28px!important;
  padding:17px 18px!important;
  border-color:rgba(73,60,44,.10)!important;
  border-radius:14px!important;
  background:#f0ece4!important;
  color:#71675d!important;
  line-height:1.55;
}
#intake .consent-line input{
  accent-color:#9b6d31;
}
#intake .intake-submit,
#checkin .intake-submit{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid rgba(73,60,44,.10);
}
#intake .intake-submit .btn,
#checkin .intake-submit .btn{
  min-height:54px;
  border-radius:999px;
  background:#996a2e;
  border-color:#996a2e;
  color:#fffaf2;
  font-size:13px;
}
#intake .intake-msg,
#checkin .intake-msg{
  font-size:12.5px;
  margin-top:10px;
}

/* Completion screen: make the ritual feel finished, not like a system state. */
#checkin #checkinDone{
  max-width:680px;
  margin:46px auto 0;
  padding:54px 44px 48px!important;
  border:1px solid rgba(73,60,44,.11);
  border-radius:24px;
  background:rgba(249,247,241,.94);
  box-shadow:0 30px 80px -58px rgba(48,35,22,.46);
}
#checkin #checkinDone h1{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:42px;
  letter-spacing:-.025em;
  text-transform:none;
  color:#2b251f;
}
#checkin #checkinDoneBtn{
  min-height:52px;
  border-radius:999px;
}

/* ── Activation / welcome / coach notice ───────────────────────────────── */
.center-screen{
  background:
    radial-gradient(700px 480px at 15% 15%,rgba(166,119,57,.10),transparent 65%),
    linear-gradient(180deg,#efede7,#e6e2d9);
}
.center-screen .center-card{
  padding:38px 36px;
  border:1px solid rgba(73,60,44,.11);
  border-radius:23px;
  background:rgba(250,248,243,.95);
  color:#2b251f;
  box-shadow:0 34px 84px -62px rgba(48,35,22,.48);
}
.center-screen .center-card h1{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:36px;
  letter-spacing:-.025em;
  text-transform:none;
  color:#2b251f;
}
.center-screen .center-card .btn{
  border-radius:999px;
}

/* Safety form gets the same premium surface even though its markup is rendered inline. */
#safetycheck #scForm .center-card{
  margin-top:34px!important;
  padding:38px 34px!important;
}
#safetycheck #scForm input,
#safetycheck #scForm select{
  min-height:50px;
  border:1px solid rgba(73,60,44,.12)!important;
  border-radius:12px!important;
  background:#f1ede5!important;
  color:#2b251f!important;
}

@media(max-width:820px){
  #auth.auth-screen,#reset.auth-screen{
    place-items:end center;
    padding:22px 16px;
  }
  #auth.auth-screen::before,#reset.auth-screen::before{
    background:
      linear-gradient(0deg,rgba(19,17,13,.82) 0%,rgba(19,17,13,.18) 62%),
      url('/assets/home/home-hero-mobile.webp') 50% 20%/cover no-repeat;
  }
  #auth.auth-screen::after,#reset.auth-screen::after{display:none}
  #auth .auth-card,#reset .auth-card{
    width:100%;
    max-width:520px;
    padding:30px 24px 26px;
    border-radius:21px;
  }
  #auth .brand,#reset .brand{margin-bottom:24px}
  #auth .auth-card h1,#reset .auth-card h1{font-size:38px}

  #intake .intake-wrap,#checkin .intake-wrap{
    width:min(100% - 24px,900px);
    padding:24px 0 54px;
  }
  #intake .intake-head,#checkin .intake-head{
    margin-bottom:14px;
    padding:28px 22px 25px;
    border-radius:20px;
  }
  #intake .intake-head h1,#checkin .intake-head h1{font-size:clamp(37px,10vw,50px)}
  #intakeForm,#checkinForm{
    padding:25px 20px 27px;
    border-radius:20px;
  }
  #checkin #checkinDone{
    margin-top:24px;
    padding:38px 24px 34px!important;
    border-radius:20px;
  }
  .center-screen .center-card{padding:32px 24px}
}