/* Cleartrill production additions. Loaded after styles.css (and refinements.css in the app).
   Only states the design prototype did not need: loading, empty, error, disabled, notices. */
.phone-stage      {
  flex-direction:column;
  align-items:center;
  gap:14px
}
.phone-example-label      {
  display:block
}
.site-footer>div>a.footer-link      {
  display:block
}
.state      {
  padding:36px 0;
  border-top:1px solid var(--line)
}
.state h3      {
  font-size:29px;
  margin-bottom:14px
}
.state p      {
  color:var(--muted);
  font-size:18px
}
.state .actions      {
  margin-top:22px
}
.state.error h3      {
  color:var(--ink)
}
.field-error      {
  display:block;
  margin-top:8px;
  font-size:16px;
  color:#8A3B2E
}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]      {
  border-color:#8A3B2E
}
.form-error      {
  border-left:3px solid #8A3B2E;
  padding:12px 16px;
  margin:18px 0;
  font-size:17px
}
.notice      {
  border-block:1px solid var(--line);
  padding:16px 0;
  margin:22px 0;
  font-size:17px;
  color:var(--muted)
}
.notice strong      {
  color:var(--ink);
  display:block;
  margin-bottom:4px
}
.notice.warn      {
  border-left:3px solid var(--copper);
  padding-left:16px
}
.busy      {
  opacity:.6;
  pointer-events:none
}
.skeleton      {
  height:22px;
  margin:12px 0;
  background:linear-gradient(90deg,var(--line) 25%,#EAE4D8 37%,var(--line) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite
}
@keyframes shimmer      {
  0%      {
    background-position:100% 0
  }
  100%      {
    background-position:0 0
  }
}
@media(prefers-reduced-motion:reduce)      {
  .skeleton      {
    animation:none
  }
}
.status-row      {
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  align-items:center;
  font-size:17px;
  padding:14px 0;
  border-block:1px solid var(--line)
}
.status-row .status-dot.off      {
  background:var(--line)
}
.status-row .status-dot.warn      {
  background:var(--copper)
}
.pill      {
  display:inline-block;
  font-size:15px;
  font-weight:600;
  letter-spacing:.04em;
  padding:3px 9px;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--muted)
}
.pill.on      {
  color:var(--green-ink);
  border-color:var(--green-ink)
}
.legal-page      {
  max-width:820px;
  padding-top:40px;
  padding-bottom:100px
}
.legal-page h1      {
  font-size:clamp(44px,6vw,72px);
  margin:26px 0 22px
}
.legal-page h2      {
  font-size:30px;
  margin:44px 0 16px
}
.legal-page p,.legal-page li      {
  font-size:19px;
  line-height:1.6
}
.legal-page ul      {
  padding-left:22px
}
.legal-page li+li      {
  margin-top:10px
}
.legal-page .version      {
  font-size:16px;
  color:var(--muted);
  margin-bottom:34px
}
.legal-page a      {
  color:var(--green-ink)
}
.trial-meter      {
  display:grid;
  gap:8px
}
.trial-meter progress      {
  width:100%;
  height:10px;
  accent-color:var(--signal)
}
.link-row      {
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  margin-top:22px
}
.thread-view      {
  border-top:1px solid var(--line);
  margin-top:20px
}
.thread-view p      {
  padding:14px 0;
  border-bottom:1px solid var(--line)
}
.thread-view p small      {
  display:block;
  font-size:15px;
  color:var(--muted);
  margin-bottom:4px
}
.thread-view p.owner      {
  padding-left:24px;
  border-left:2px solid var(--signal)
}
.app-content .fine a      {
  color:var(--green-ink)
}
.number-list      {
  border-top:1px solid var(--line)
}
.number-list>div      {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--line)
}
.number-list strong      {
  display:block
}
.number-list span      {
  color:var(--muted);
  font-size:16px
}