/* ============================================================
   TN ENGINEERS & SURVEYORS — APPLICATION PORTAL
   To Apply dashboard + four application subpages.
   Builds on the tokens defined in sections.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. DASHBOARD
   ------------------------------------------------------------ */
.ap-dash{
  padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,64px);
  background:
    radial-gradient(900px 380px at 88% -10%, rgba(30,125,78,.07), transparent 62%),
    linear-gradient(180deg,#F7FBF8 0%, #FFFFFF 62%);
}

.ap-cards{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(1, minmax(0,1fr));
  align-items:stretch;
}
@media (min-width:640px){
  .ap-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1180px){
  .ap-cards{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

.ap-card{
  position:relative; display:flex; flex-direction:column; gap:.75rem;
  background:#fff; border:1px solid var(--tn-line); border-radius:18px;
  padding:clamp(20px,2.2vw,28px); box-shadow:var(--tn-shadow-sm);
  overflow:hidden; height:100%;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.ap-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--tn-gold-400),var(--tn-gold-600));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.ap-card:hover, .ap-card:focus-within{
  transform:translateY(-5px); border-color:#CFE3D7; box-shadow:var(--tn-shadow-lg);
}
.ap-card:hover::before, .ap-card:focus-within::before{ transform:scaleX(1); }

.ap-card__top{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.ap-card__icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--tn-green-600),var(--tn-green-700));
  box-shadow:0 10px 20px -12px rgba(10,92,54,.9); flex-shrink:0;
}
.ap-card__icon svg{ width:26px; height:26px; }
.ap-card__num{
  font-size:.72rem; font-weight:800; letter-spacing:.14em; color:#B9C7C0;
  font-variant-numeric:tabular-nums;
}
.ap-card__title{
  font-size:1.06rem; line-height:1.3; font-weight:700; color:var(--tn-green-950);
  margin:.15rem 0 0; letter-spacing:-.01em;
}
.ap-card__desc{
  font-size:.88rem; line-height:1.65; color:var(--tn-slate); margin:0; flex:1 1 auto;
}
.ap-card__btn{ margin-top:.35rem; width:100%; }
.ap-card__btn .tn-btn{ width:100%; font-size:.86rem; padding:.75rem 1rem; min-height:46px; line-height:1.25; align-items:center; justify-content:center; text-align:center; }
.ap-card__btn{ display:flex; }
.ap-card__btn .tn-btn{ min-height:62px; }   /* two-line labels keep every card button the same height */

/* dashboard footnote strip */
.ap-assure{
  display:grid; gap:14px; grid-template-columns:repeat(1,minmax(0,1fr));
  margin-top:clamp(28px,3.4vw,44px);
  background:#fff; border:1px solid var(--tn-line); border-radius:16px;
  padding:clamp(18px,2.2vw,24px); box-shadow:var(--tn-shadow-sm);
}
@media (min-width:768px){ .ap-assure{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ap-assure__item{ display:flex; gap:.7rem; align-items:flex-start; }
.ap-assure__item svg{ width:18px; height:18px; color:var(--tn-green-600); flex-shrink:0; margin-top:2px; }
.ap-assure__item strong{ display:block; font-size:.86rem; color:var(--tn-ink); }
.ap-assure__item span{ font-size:.8rem; color:var(--tn-slate); line-height:1.55; }

/* ------------------------------------------------------------
   2. APPLICATION PAGE SHELL
   ------------------------------------------------------------ */
.ap-page{ background:linear-gradient(180deg,#F6FAF8 0%, #FFFFFF 40%); }

.ap-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.75rem; padding:16px 0 0;
}
.ap-back{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.84rem; font-weight:600;
  color:var(--tn-green-700); text-decoration:none; background:#fff;
  border:1px solid var(--tn-line); border-radius:999px; padding:.5rem .95rem;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.ap-back svg{ width:15px; height:15px; }
.ap-back:hover{ background:#EAF4EE; border-color:#CFE3D7; transform:translateX(-2px); }
.ap-bar__badge{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tn-green-700);
  background:#EAF4EE; border:1px solid #D3E7DB; border-radius:999px; padding:.4rem .85rem;
}

.ap-layout{
  display:grid; gap:clamp(20px,2.6vw,34px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  padding:clamp(20px,2.6vw,32px) 0 clamp(48px,6vw,80px);
}
@media (min-width:1024px){
  .ap-layout{ grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); }
}

/* ------------------------------------------------------------
   3. FORM CARD
   ------------------------------------------------------------ */
.ap-form-card{
  background:#fff; border:1px solid var(--tn-line); border-radius:20px;
  box-shadow:var(--tn-shadow-md); overflow:hidden;
}
.ap-form-head{
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px) clamp(14px,1.8vw,18px);
  border-bottom:1px solid var(--tn-line); background:linear-gradient(180deg,#FBFEFC,#FFFFFF);
}
.ap-form-head h1{
  font-size:clamp(1.35rem,2.2vw,1.8rem); line-height:1.22; font-weight:800;
  letter-spacing:-.02em; color:var(--tn-green-950); margin:0 0 .4rem;
}
.ap-form-head p{ font-size:.9rem; line-height:1.6; color:var(--tn-slate); margin:0; }
.ap-form-head .ap-rule{ width:64px; height:4px; border-radius:4px; margin:.7rem 0 .8rem;
  background:linear-gradient(90deg,var(--tn-gold-400),var(--tn-gold-600)); }

.ap-form-body{ padding:clamp(20px,2.6vw,34px); }

/* sections */
.ap-section{ border:0; padding:0; margin:0 0 clamp(22px,2.6vw,30px); min-width:0; }
.ap-section:last-of-type{ margin-bottom:0; }
.ap-section__legend{
  display:flex; align-items:center; gap:.6rem; width:100%;
  font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tn-green-700); padding:0 0 .55rem; margin-bottom:1rem;
  border-bottom:1px dashed #DCEAE2;
}
.ap-section__legend::before{
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--tn-gold-400),var(--tn-gold-600));
}
.ap-section__hint{
  display:block; font-size:.78rem; font-weight:500; letter-spacing:0; text-transform:none;
  color:#869790; margin-left:auto;
}

.ap-grid{ display:grid; gap:clamp(14px,1.6vw,18px); grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){
  .ap-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* North / South / East / West — 2-up on phones, 4-up on wide screens */
.ap-grid--dims{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:900px){
  .ap-grid--dims{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width:359px){
  .ap-grid--dims{ grid-template-columns:minmax(0,1fr); }
}
.ap-full{ grid-column:1 / -1; }

/* fields */
.ap-field{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.ap-label{
  font-size:.82rem; font-weight:600; color:#33453C; display:flex; align-items:baseline;
  gap:.3rem; flex-wrap:wrap;
}
.ap-req{ color:#B91C1C; font-weight:700; }
.ap-optional{ font-size:.72rem; color:#869790; font-weight:500; }
.ap-input, .ap-select, .ap-textarea{
  width:100%; padding:.78rem .9rem; border:1px solid #D6E2DB; border-radius:11px;
  font:inherit; font-size:.92rem; color:var(--tn-ink); background:#fff; min-height:46px;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ap-textarea{ min-height:96px; resize:vertical; line-height:1.6; }
.ap-select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.4rem;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'%3e%3c/path%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px;
}
.ap-input::placeholder, .ap-textarea::placeholder{ color:#9AA9A2; }
.ap-input:focus, .ap-select:focus, .ap-textarea:focus{
  outline:none; border-color:var(--tn-green-600); box-shadow:0 0 0 3px rgba(30,125,78,.16);
}
.ap-field.is-invalid .ap-input,
.ap-field.is-invalid .ap-select,
.ap-field.is-invalid .ap-textarea{
  border-color:#DC2626; background:#FFF7F7;
}
.ap-field.is-invalid .ap-input:focus,
.ap-field.is-invalid .ap-select:focus,
.ap-field.is-invalid .ap-textarea:focus{
  box-shadow:0 0 0 3px rgba(220,38,38,.14);
}
.ap-error{
  font-size:.76rem; color:#B91C1C; line-height:1.45; margin:0; min-height:0;
  display:none;
}
.ap-field.is-invalid .ap-error{ display:block; }
.ap-hint{ font-size:.74rem; color:#869790; margin:0; line-height:1.45; }

/* ------------------------------------------------------------
   4. PHOTO UPLOAD
   ------------------------------------------------------------ */
.ap-upload{ display:grid; gap:.75rem; }
.ap-drop{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; text-align:center; padding:clamp(20px,3vw,30px);
  border:2px dashed #CBE0D4; border-radius:14px; background:#F7FBF8;
  cursor:pointer; transition:border-color .2s ease, background-color .2s ease;
}
.ap-drop:hover, .ap-drop:focus-within{ border-color:var(--tn-green-600); background:#EFF8F2; }
.ap-drop.is-dragover{ border-color:var(--tn-gold-500); background:#FFFCEB; }
.ap-drop.is-invalid{ border-color:#DC2626; background:#FFF7F7; }
.ap-drop svg{ width:30px; height:30px; color:var(--tn-green-600); }
.ap-drop strong{ font-size:.92rem; color:var(--tn-green-950); font-weight:700; }
.ap-drop span{ font-size:.78rem; color:var(--tn-slate); line-height:1.5; }
.ap-drop input[type="file"]{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}

.ap-photo{
  display:none; gap:.9rem; align-items:center; padding:.85rem;
  border:1px solid var(--tn-line); border-radius:14px; background:#fff;
}
.ap-photo.is-on{ display:flex; }
.ap-photo__thumb{
  width:74px; height:74px; border-radius:10px; object-fit:cover; flex-shrink:0;
  border:1px solid var(--tn-line); background:#EEF5F1;
}
.ap-photo__meta{ min-width:0; flex:1 1 auto; }
.ap-photo__name{
  font-size:.84rem; font-weight:600; color:var(--tn-ink); margin:0 0 .15rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ap-photo__size{ font-size:.75rem; color:var(--tn-slate); margin:0; }
.ap-photo__actions{ display:flex; gap:.4rem; flex-shrink:0; }
.ap-iconbtn{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--tn-line); background:#fff; color:var(--tn-green-700); cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ap-iconbtn svg{ width:17px; height:17px; }
.ap-iconbtn:hover{ background:#EAF4EE; border-color:#CFE3D7; }
.ap-iconbtn--danger{ color:#B91C1C; }
.ap-iconbtn--danger:hover{ background:#FEF2F2; border-color:#FECACA; }
.ap-upload__status{ font-size:.78rem; margin:0; display:none; }
.ap-upload__status.is-on{ display:block; }
.ap-upload__status.is-ok{ color:#15803D; }
.ap-upload__status.is-warn{ color:#B45309; }
.ap-upload__status.is-err{ color:#B91C1C; }

/* ------------------------------------------------------------
   5. FORM ACTIONS
   ------------------------------------------------------------ */
.ap-actions{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
  margin-top:clamp(22px,2.6vw,30px); padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--tn-line);
}
.ap-actions .tn-btn{ flex:1 1 auto; min-width:0; }
@media (min-width:640px){
  .ap-actions .tn-btn{ flex:0 0 auto; }
}
.ap-actions .tn-btn--submit{ min-width:220px; }
.ap-actions .ap-back{ border-radius:12px; min-height:48px; padding:.8rem 1.1rem; }
.ap-spinner{
  width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff; display:none; animation:apSpin .7s linear infinite;
}
.tn-btn.is-loading .ap-spinner{ display:inline-block; }
.tn-btn.is-loading{ pointer-events:none; opacity:.9; }
@keyframes apSpin{ to{ transform:rotate(360deg); } }

/* ------------------------------------------------------------
   6. STATES (error / success)
   ------------------------------------------------------------ */
.ap-alert{
  display:none; gap:.65rem; align-items:flex-start; padding:.9rem 1rem;
  border-radius:12px; font-size:.86rem; line-height:1.55; margin-bottom:1.2rem;
}
.ap-alert.is-on{ display:flex; }
.ap-alert svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.ap-alert--error{ background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; }
.ap-alert--success{ background:#ECFDF3; border:1px solid #BBF7D0; color:#14532D; }
.ap-alert strong{ font-weight:700; }

.ap-success{ display:none; }
.ap-success.is-on{ display:block; animation:apFade .35s ease; }
@keyframes apFade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.ap-success__head{ display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1.1rem; }
.ap-success__badge{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(135deg,#22C55E,#15803D); color:#fff; box-shadow:0 10px 20px -12px rgba(21,128,61,.9);
}
.ap-success__badge svg{ width:24px; height:24px; }
.ap-success h2{ font-size:1.25rem; font-weight:800; color:var(--tn-green-950); margin:0 0 .3rem; }
.ap-success p{ font-size:.88rem; color:var(--tn-slate); margin:0; line-height:1.6; }
.ap-summary{
  background:#F7FBF8; border:1px solid var(--tn-line); border-radius:12px;
  padding:14px 16px; margin:0 0 1.1rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem; line-height:1.7; color:#33453C; white-space:pre-wrap;
  overflow-wrap:anywhere; max-height:260px; overflow:auto;
}

/* ------------------------------------------------------------
   7. ASIDE (what happens next / help)
   ------------------------------------------------------------ */
.ap-aside{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,18px); }
.ap-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; position:relative; z-index:1; }
.ap-steps li{ display:flex; gap:.7rem; align-items:flex-start; }
.ap-steps__n{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:rgba(250,204,21,.16); color:var(--tn-gold-400); border:1px solid rgba(250,204,21,.4);
  font-size:.74rem; font-weight:800;
}
.ap-steps strong{ display:block; font-size:.86rem; color:#fff; font-weight:700; }
.ap-steps span{ font-size:.79rem; color:rgba(255,255,255,.8); line-height:1.55; }
.ap-checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.ap-checklist li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.84rem; color:var(--tn-slate); line-height:1.55; }
.ap-checklist svg{ width:15px; height:15px; color:var(--tn-green-600); flex-shrink:0; margin-top:3px; }

/* ------------------------------------------------------------
   8. REVIEW DIALOG (show what will be sent)
   ------------------------------------------------------------ */
.ap-review{
  position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center;
  padding:16px; background:rgba(5,46,27,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.ap-review.is-on{ display:flex; animation:apFade .2s ease; }
.ap-review__card{
  background:#fff; border-radius:18px; width:100%; max-width:640px; max-height:92vh;
  overflow:auto; box-shadow:0 40px 80px -40px rgba(5,46,27,.6); padding:clamp(20px,3vw,30px);
}
.ap-review__card h2{ font-size:1.15rem; font-weight:800; color:var(--tn-green-950); margin:0 0 .3rem; }
.ap-review__card > p{ font-size:.86rem; color:var(--tn-slate); margin:0 0 1rem; line-height:1.6; }
.ap-review__note{
  display:flex; gap:.6rem; align-items:flex-start; font-size:.8rem; line-height:1.55;
  border-radius:10px; padding:.75rem .85rem; margin:0 0 1rem;
}
.ap-review__note svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; }
.ap-review__note--warn{ background:#FFFBEB; border:1px solid #FDE68A; color:#78350F; }
.ap-review__note--ok{ background:#ECFDF3; border:1px solid #BBF7D0; color:#14532D; }
.ap-review__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.ap-review__actions .tn-btn{ flex:1 1 180px; }

/* ------------------------------------------------------------
   9. SMALL SCREEN POLISH
   ------------------------------------------------------------ */
@media (max-width:640px){
  .ap-actions{ flex-direction:column; align-items:stretch; }
  .ap-actions .tn-btn, .ap-actions .ap-back{ width:100%; justify-content:center; }
  .ap-photo{ flex-wrap:wrap; }
  .ap-photo__actions{ width:100%; justify-content:flex-end; }
  .ap-form-head h1{ font-size:1.2rem; }
}
@media (max-width:380px){
  .ap-card__btn .tn-btn{ font-size:.8rem; padding:.7rem .7rem; }
}

/* ------------------------------------------------------------
   10. ASIDE PANELS
   ------------------------------------------------------------ */
.ap-panel{
  background:#fff; border:1px solid var(--tn-line); border-radius:16px;
  padding:clamp(18px,2.2vw,24px); box-shadow:var(--tn-shadow-sm);
}
.ap-panel--dark{
  background:linear-gradient(160deg,var(--tn-green-700) 0%, var(--tn-green-950) 100%);
  border-color:transparent; box-shadow:0 24px 48px -30px rgba(5,46,27,.85);
  position:relative; overflow:hidden;
}
.ap-panel--dark::after{
  content:''; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(250,204,21,.16), transparent 68%); pointer-events:none;
}
.ap-panel__title{
  font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tn-gold-400); margin:0 0 1rem; position:relative; z-index:1;
}
.ap-panel__title--dark{ color:var(--tn-green-700); }

/* success panel sits directly in the card, so it needs the body padding */
.ap-success{ padding:clamp(20px,2.6vw,34px); }
.ap-success .ap-summary{ margin-bottom:1rem; }
.ap-success .ap-actions{ margin-top:0; }

/* section legends: let the hint drop below the title on narrow screens */
@media (max-width:560px){
  .ap-section__legend{ flex-wrap:wrap; row-gap:.15rem; }
  .ap-section__hint{ flex:1 1 100%; margin-left:1.1rem; }
}

.ap-review__actions{ margin-bottom:0; }
.ap-review__actions .tn-btn{ flex:1 1 0; min-width:0; white-space:nowrap; font-size:.9rem; padding:.8rem 1rem; }
.ap-review__cancel{
  display:inline-block; margin-top:.85rem; background:none; border:0; padding:.35rem 0;
  font:inherit; font-size:.83rem; font-weight:600; color:#5A6B62; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px;
}
.ap-review__cancel:hover{ color:var(--tn-green-700); }

/* ============================================================
   11. SERVICE APPLICATION POPUP  (.apm)
   One modal, four service-specific forms, opened from any
   "Apply Now" CTA via openApplyModal('Service name').
   ============================================================ */
.apm{
  position:fixed; inset:0; z-index:1150;
  display:none; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,28px);
  background:rgba(5,46,27,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  overflow-y:auto; overscroll-behavior:contain;
}
.apm.is-open{ display:flex; animation:apFade .2s ease; }

.apm__card{
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:720px;
  max-height:min(92dvh, 940px);
  background:#fff; border-radius:20px;
  box-shadow:0 40px 90px -40px rgba(5,46,27,.75), 0 2px 0 rgba(255,255,255,.6) inset;
  overflow:hidden;
  animation:apmIn .28s cubic-bezier(.2,.75,.3,1);
}
@keyframes apmIn{
  from{ opacity:0; transform:translateY(18px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ---------- header ---------- */
.apm__head{
  position:relative; flex:0 0 auto;
  padding:clamp(22px,3vw,30px) clamp(20px,3vw,32px) clamp(16px,2.2vw,20px);
  border-bottom:1px solid var(--tn-line);
  background:linear-gradient(180deg,#FBFEFC,#FFFFFF);
  text-align:center;
}
.apm__eyebrow{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tn-green-700);
  background:#EAF4EE; border:1px solid #D3E7DB; border-radius:999px;
  padding:.3rem .75rem; margin-bottom:.6rem;
}
.apm__head h2{
  font-size:clamp(1.3rem,2.4vw,1.6rem); line-height:1.25; font-weight:800;
  letter-spacing:-.02em; color:var(--tn-green-950); margin:0 0 .35rem;
}
.apm__head p{ font-size:.88rem; line-height:1.6; color:var(--tn-slate); margin:0 auto; max-width:44ch; }
.apm__badge{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.85rem;
  font-size:.78rem; font-weight:700; letter-spacing:.01em;
  color:var(--tn-green-700); background:#F0FDF4;
  border:1px solid #BBF7D0; border-radius:999px; padding:.34rem .85rem;
}
.apm__badge::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg,var(--tn-gold-400),var(--tn-gold-600));
}

.apm__close{
  position:absolute; top:10px; right:10px; z-index:3;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--tn-line); border-radius:50%;
  background:rgba(255,255,255,.92); color:#4B5C53; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.apm__close svg{ width:18px; height:18px; }
.apm__close:hover{ background:#FEF2F2; border-color:#FECACA; color:#B91C1C; transform:rotate(90deg); }

/* ---------- scrollable body ---------- */
.apm__body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(18px,2.6vw,28px) clamp(20px,3vw,32px) 0;
  scrollbar-width:thin;
}
.apm__body::-webkit-scrollbar{ width:10px; }
.apm__body::-webkit-scrollbar-thumb{ background:#CBDDD3; border-radius:10px; border:3px solid #fff; }

.apm__form[hidden],
.apm__review[hidden],
.apm__result[hidden]{ display:none !important; }
.apm__form{ display:block; }

/* the action bar stays reachable while the form scrolls */
.apm__form .ap-actions,
.apm__review .ap-actions,
.apm__result .ap-actions{
  position:sticky; bottom:0; z-index:2;
  margin-top:clamp(18px,2.4vw,26px);
  padding-bottom:calc(clamp(14px,2vw,20px) + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(255,255,255,.97), #fff 30%);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  box-shadow:0 -10px 18px -14px rgba(5,46,27,.45);
}
.apm__form .ap-actions .tn-btn,
.apm__review .ap-actions .tn-btn,
.apm__result .ap-actions .tn-btn{ flex:1 1 auto; }

/* ---------- inline review + result panels ---------- */
.apm__review h3,
.apm__result h3{
  font-size:1.05rem; font-weight:800; color:var(--tn-green-950); margin:0 0 .35rem;
}
.apm__review > p,
.apm__result > p{ font-size:.86rem; line-height:1.6; color:var(--tn-slate); margin:0 0 1rem; }
.apm__review .ap-summary,
.apm__result .ap-summary{ max-height:none; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .apm__card{ max-width:620px; }
}
@media (max-width:640px){
  .apm{ padding:0; align-items:stretch; }
  .apm__card{
    max-width:none; max-height:100dvh; height:100dvh;
    border-radius:0; animation:apmUp .26s ease;
  }
  @keyframes apmUp{ from{ opacity:0; transform:translateY(32px);} to{ opacity:1; transform:none;} }
  .apm__head{ padding-top:calc(18px + env(safe-area-inset-top, 0px)); }
  .apm__body{ padding-left:16px; padding-right:16px; }
  .apm__form .ap-actions{ flex-direction:column; align-items:stretch; }
  .apm__form .ap-actions .tn-btn{ width:100%; }
}
@media (min-width:641px){
  .apm__form .ap-actions .tn-btn--submit{ flex:0 1 240px; }
  .apm__form .ap-actions .tn-btn--outline{ flex:0 0 auto; }
}