/* Arborwise Tree Check.
   Everything is scoped to #tc. This file loads AFTER styles.css, so any
   variable declared at :root here would override the site's brand colours
   on this page. It declares none. */

#tc{
  --forest:#17402B;
  --leaf:#5FB871;
  --leafdim:#3E7F52;
  --tcamber:#F59F0A;
  --tcorange:#E4590C;
  --cream:#F4F1E8;
  --alert:#96301F;
  --tcpaper:#E2DED1;
  --tcink:#17251C;
  --tcmuted:#5D6B62;
  --tcline:rgba(255,255,255,.14);
}

/* page background only. no variables, no layout. */
body{background:#08190F}

#tc{max-width:640px;margin:0 auto;padding:26px 18px 60px;color:#fff;
  font-family:Barlow,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
#tc *{box-sizing:border-box}

#tc .masthead{padding:4px 2px 18px;text-align:center}
#tc .eyebrow{
  display:block;
  font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(1.5rem,6.6vw,2rem);color:#fff;
  line-height:1.05;margin:0;
}
#tc .eyebrow::before{display:none}
#tc .eyebrow .wm{color:var(--tcamber)}
#tc .eyebrow .tm{
  font-size:.34em;
  position:relative;
  top:-1.32em;
  vertical-align:baseline;
  letter-spacing:.02em;font-weight:800;
  margin-left:.1em;margin-right:-.06em;
}
#tc .masthead p{color:#AFC2B4;font-size:1.02rem;line-height:1.5;margin:10px auto 0;max-width:46ch}

/* ---------- card. styles.css has its own .card rule, so every property
   it sets is neutralised here on purpose. ---------- */
#tc .card{
  background:none;
  padding:0;
  border:none;
  border-top:3px solid var(--leaf);
  border-radius:3px;
  overflow:hidden;
  display:block;
  box-shadow:0 20px 44px rgba(0,0,0,.5);
  transform:none;
  transition:none;
  text-align:left;
}
#tc .card:hover{transform:none;box-shadow:0 20px 44px rgba(0,0,0,.5)}
#tc .card p{color:inherit;font-size:inherit;flex:none}
#tc .card-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:#0D2A1B;border-bottom:1px solid var(--tcline);padding:11px 16px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:.72rem;color:#8FA697;
}
#tc .card-head b{color:var(--leaf)}

/* recorded notes, dark band */
#tc .log{margin:0;padding:0;list-style:none;background:var(--forest)}
#tc .log li{
  display:flex;gap:12px;align-items:flex-start;padding:11px 16px;
  border-bottom:1px solid var(--tcline);font-size:.94rem;line-height:1.35;color:#fff;
  animation:tc-stamp .26s ease-out both;
}
#tc .log li .tick{
  flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;
  background:var(--leaf);display:grid;place-items:center;
}
#tc .log li .tick::after{
  content:"";width:5px;height:8px;margin-top:-2px;
  border:solid #08190F;border-width:0 2px 2px 0;transform:rotate(42deg);
}
@keyframes tc-stamp{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* question, dark band */
#tc .ask{padding:20px 16px 18px;background:var(--forest)}
#tc .ask h2{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.3rem;line-height:1.12;color:#fff;margin:0 0 15px;letter-spacing:0;
}
#tc .opts{display:flex;flex-direction:column;gap:9px}
#tc .opt{
  appearance:none;-webkit-appearance:none;font:inherit;font-size:1rem;font-weight:600;
  text-align:left;background:#fff;color:var(--forest);
  border:1px solid rgba(0,0,0,.10);border-radius:2px;
  padding:14px 15px;min-height:52px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.16);
  transition:box-shadow .12s,background .12s;touch-action:manipulation;
}
#tc .opt::after{
  content:"";flex:none;width:7px;height:7px;
  border:solid var(--leafdim);border-width:0 2px 2px 0;transform:rotate(-45deg);
}
#tc .opt:hover{box-shadow:0 0 0 2px var(--leaf)}
#tc .opt:active{background:var(--tcpaper)}
#tc .opt:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}

/* ---------- verdict: the LIGHT band, this is the answer ---------- */
#tc .verdict{
  padding:24px 16px 22px;background:var(--cream);color:var(--tcink);
  animation:tc-rise .34s ease-out both;
}
@keyframes tc-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
#tc .level{
  display:inline-block;font-family:"Barlow Condensed",sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.11em;font-size:.76rem;
  padding:6px 11px;border-radius:2px;margin-bottom:14px;
}
#tc .lv-a{background:var(--tcorange);color:#fff}
#tc .lv-b{background:var(--forest);color:#fff}
#tc .lv-c{background:transparent;color:var(--forest);border:1px solid var(--forest)}
#tc .lv-d{background:var(--leaf);color:#08190F}
#tc .verdict h2{
  font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.34rem,5.3vw,1.58rem);line-height:1.08;color:var(--forest);
  margin:0 0 12px;letter-spacing:0;
}
#tc .verdict p{font-size:1rem;line-height:1.55;margin:0 0 13px;color:var(--tcink)}
#tc .next{
  border-left:3px solid var(--leaf);padding:2px 0 2px 13px;margin:16px 0 0;
  color:var(--tcmuted);font-size:.95rem;line-height:1.5;
}
#tc .next b{
  display:block;color:var(--leafdim);font-family:"Barlow Condensed",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;margin-bottom:5px;
}
#tc .safety{
  display:flex;gap:11px;align-items:flex-start;
  margin:17px 0 0;padding:13px 15px;
  background:rgba(150,48,31,.08);
  border-left:3px solid var(--alert);
  border-radius:2px;
  color:var(--alert);
  font-size:1rem;line-height:1.5;font-weight:500;
}
#tc .safety-first{
  margin:2px 0 18px;
  padding:15px 16px;
  border-left-width:5px;
  font-weight:600;
  font-size:1.04rem;
}
#tc .safety i{
  flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--alert);color:var(--cream);
  display:grid;place-items:center;margin-top:2px;
  font-style:normal;font-weight:800;font-size:.86rem;
  font-family:"Barlow Condensed",sans-serif;
}

/* ---------- callback, dark again ---------- */
#tc .callback{
  margin:22px -16px -22px;padding:22px 16px 24px;
  background:var(--forest);color:#fff;border-top:3px solid var(--leaf);
}
#tc .callback h3{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.18rem;line-height:1.15;margin:0 0 6px;color:#fff;
}
#tc .callback p{color:#AFC2B4;font-size:.95rem;line-height:1.5;margin:0 0 15px}
#tc .f{display:flex;flex-direction:column;gap:10px}
#tc .f label{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;font-size:.72rem;color:var(--leaf);
  display:block;margin:0 0 -5px;
}
#tc .f input{
  font:inherit;font-size:1rem;padding:13px;min-height:50px;width:100%;
  border:1px solid rgba(255,255,255,.26);border-radius:2px;
  background:rgba(0,0,0,.22);color:#fff;margin:0;
}
#tc .f input::placeholder{color:rgba(255,255,255,.38)}
#tc .f input:focus{outline:none}
#tc .f input:focus-visible{outline:3px solid var(--leaf);outline-offset:1px}
#tc .go{
  appearance:none;-webkit-appearance:none;font:inherit;
  font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.06rem;background:var(--tcamber);color:#17251C;
  border:none;border-radius:2px;padding:15px;min-height:54px;cursor:pointer;
  margin-top:4px;touch-action:manipulation;width:100%;
}
#tc .go:active{filter:brightness(.94)}
#tc .go:focus-visible{outline:3px solid #fff;outline-offset:2px}
#tc .orcall{margin:13px 0 0;font-size:.92rem;color:#AFC2B4}
#tc .orcall a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* actions on the calmer verdicts, sit on cream */
#tc .source{margin:13px 0 0;color:var(--tcmuted);font-size:.9rem;line-height:1.5}
#tc .source a{
  color:var(--leafdim);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  white-space:normal;
}
#tc .srcicon{width:.86em;height:.86em;vertical-align:-.08em;margin-right:.34em;flex:none;display:inline}
#tc .closer{
  margin:20px 0 0;padding:14px 0 0;
  border-top:1px solid rgba(23,64,43,.16);
  color:var(--leafdim);font-size:.97rem;line-height:1.5;font-weight:500;
}
#tc .acts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
#tc .acts a{
  font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;font-size:.86rem;line-height:1;padding:0 8px;min-height:44px;
  border-radius:6px;display:flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;white-space:nowrap;
}
#tc .acts a::before{
  content:"";flex:none;width:17px;height:17px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
#tc .a-amber{background:var(--tcamber);color:#17402B;box-shadow:inset 0 -2px 0 rgba(23,64,43,.22)}
#tc .a-ghost{background:transparent;color:var(--forest);border:1px solid var(--forest)}
/* same two marks the bottom bar uses, so an icon means one thing site wide */
#tc .a-amber::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317402B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.9 9.9 0 0 1-3.8-.8L3 21l1.9-4.6A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/%3E%3C/svg%3E");
}
#tc .a-ghost::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2317402B'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}
@media (max-width:379px){
  #tc .acts a{font-size:.76rem;gap:5px;padding:0 4px}
  #tc .acts a::before{width:15px;height:15px}
}

#tc .restart{
  width:100%;appearance:none;-webkit-appearance:none;font:inherit;
  background:#0D2A1B;border:none;border-top:1px solid var(--tcline);
  color:#8FA697;padding:15px;min-height:50px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:.74rem;touch-action:manipulation;
}
#tc .restart:active{background:#081F13}
#tc .restart:focus-visible{outline:3px solid var(--leaf);outline-offset:-3px}

#tc .foot{margin-top:22px;color:#6F8577;font-size:.85rem;line-height:1.5;text-align:center}
#tc .foot b{color:#AFC2B4;font-weight:600}

@media (prefers-reduced-motion:reduce){
  #tc *{animation:none!important;transition:none!important}
}