/* The pieces every hosted tool page shares (body class "tool-page"): the closed state, the terms box, tick
   boxes, plain messages, the extra button states, and the terms-of-use page. Loaded after site.css and before
   a tool's own stylesheet (autobot.css, or Keystone's bundled styles). The rules are in DESIGN.md. */

.tool-page [hidden] { display: none !important; }

.tool-page button { font-family: var(--sans); }
.tool-page button:not(:disabled) { cursor: pointer; }

/* Buttons the kit needs beyond site.css: a smaller size, a disabled state, and a plain text button. */
.btn--small { height: 44px; padding: 0 18px; gap: 10px; font-size: 14px; }
.btn--secondary { background: none; color: var(--ivory); }
.btn:disabled,
.btn--primary:disabled {
  background: transparent;
  border-color: var(--graphite);
  color: #6F6B63;
  cursor: not-allowed;
}
.btn:disabled .btn__arrow { transform: none; }

.text-btn {
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--graphite-2);
  border-radius: 0;
  font-size: 15px;
  color: var(--ash);
  transition: color 0.25s, border-color 0.25s;
}
.text-btn:not(:disabled):hover { color: var(--ivory); border-color: var(--brass); }
.text-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.inline-link { padding-bottom: 1px; border-bottom: 1px solid var(--brass); color: var(--ivory); }
.inline-link:hover { color: #FFFFFF; }

.page-hero .facts { margin-top: 80px; }

/* ---------- Closed state ---------- */

.tool { margin-top: 110px; }

.tool-closed {
  padding: 48px;
  background: var(--carbon);
  border: 1px solid var(--graphite);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.tool-closed__text { max-width: 640px; font-family: var(--serif); font-size: 30px; line-height: 1.25; }

/* ---------- Messages ---------- */

/* A plain line under an action; the mono label says what kind of message it is. */
.tool-note { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--parchment); }
.tool-note:empty { display: none; }
.tool-note__label {
  margin-right: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- Terms box ---------- */

/* Sign-in and the bot check (tool-guard.js). The form is Clerk's own, themed to match in tool-guard.js. */
.tool-signin { margin-top: 28px; }
.tool-signin__text { max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--parchment); }
.tool-signin__wait { margin-top: 20px; }
.tool-signin__form { margin-top: 20px; }

/* Waiting: the hairline ring with a Brass arc from the Amicus panel. It shows while a tool opens, while a
   sign-in finishes, and while Clerk draws its form: the form's box stays empty until Clerk fills it, so an
   empty box shows the ring and needs no script. */
.tool-loading { display: flex; align-items: center; gap: 14px; }
.tool-loading--start { padding: 48px 0; }
.tool-signin__form:empty, .tool-signin__form > div:empty { display: flex; align-items: center; gap: 14px; min-height: 40px; }
.tool-loading::before, .tool-signin__form:empty::before, .tool-signin__form > div:empty::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--graphite-2);
  border-top-color: var(--brass);
  border-radius: 50%;
  animation: tool-spin 0.9s linear infinite;
}
.tool-signin__form:empty::after, .tool-signin__form > div:empty::after {
  content: "Loading sign-in…";
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}
@keyframes tool-spin { to { transform: rotate(360deg); } }
.tool-signin__privacy { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ash); }
.tool-human { margin-top: 12px; }
.tool-account { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }

.terms-box { padding: 24px 24px 22px; border: 1px solid var(--graphite); }

.terms-box__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

.terms-box__list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ash); }
.terms-box__list li { display: flex; gap: 14px; }
.terms-box__list li::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 1px;
  margin-top: 12px;
  background: var(--brass);
}
.terms-box__list strong { font-weight: 500; color: var(--ivory); }

.terms-box__accept { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--graphite); font-size: 15px; color: var(--ivory); }

/* Checkboxes: a Graphite square that takes a Brass tick. */
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--parchment); cursor: pointer; }
.check input,
.review input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1px solid var(--graphite-2);
  border-radius: var(--radius);
  background: var(--obsidian) center / 12px no-repeat;
  cursor: pointer;
  transition: border-color 0.2s;
}
.check input:hover,
.review input[type="checkbox"]:hover { border-color: var(--ash); }
.check input:checked,
.review input[type="checkbox"]:checked {
  border-color: var(--brass);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23B8985C' stroke-width='1.6'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3'/%3E%3C/svg%3E");
}

/* ---------- Terms of use page ---------- */

.terms-doc { margin-top: 88px; max-width: 980px; }
.terms-doc__draft { padding: 20px 24px; background: var(--carbon); border: 1px solid var(--graphite); display: flex; gap: 20px; align-items: baseline; }
.terms-doc__draft p { font-size: 15px; line-height: 1.6; color: var(--parchment); }

.clause { padding: 32px 0 36px; border-top: 1px solid var(--graphite); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 24px; }
.terms-doc__draft + .clause { margin-top: 40px; }
.clause:last-of-type { border-bottom: 1px solid var(--graphite); }
.clause__num { padding-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--brass); }
.clause__title { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.15; }
.clause__text { grid-column: 2; max-width: 720px; font-size: 16px; line-height: 1.7; color: var(--parchment); }
.clause__text + .clause__text { margin-top: 4px; }
.terms-doc__contact { margin-top: 40px; font-size: 15px; color: var(--ash); }

/* Bulleted clauses (the privacy policy): the brass rule of the terms box, at clause size. */
.clause__list { grid-column: 2; max-width: 720px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.7; color: var(--parchment); }
.clause__text + .clause__list, .clause__list + .clause__text { margin-top: 4px; }
.clause__list li { display: flex; gap: 14px; }
.clause__list li::before { content: ""; flex-shrink: 0; width: 14px; height: 1px; margin-top: 13px; background: var(--brass); }

/* Long legal documents (the terms of use and the privacy policy): an unnumbered preamble, numbered
   sub-clauses with a brass reference, and indented (a) and i. items. */
.terms-doc__preamble { display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px; }
.terms-doc__preamble .clause__text { max-width: 760px; }
.clause__text.clause__sub { margin-top: 20px; }
.clause__title + .clause__text.clause__sub { margin-top: 0; }
.clause__ref { display: inline-block; min-width: 44px; margin-right: 8px; font-family: var(--mono); font-size: 12px; color: var(--brass); }
.clause__mark { display: inline-block; min-width: 32px; color: var(--ash); }
.clause__text strong, .clause__list strong { font-weight: 500; color: var(--ivory); }
.clause__item { padding-left: 52px; }
.clause__item--deep { padding-left: 84px; }
.clause__list.clause__item { padding-left: 52px; }

/* ---------- Phone ---------- */

@media (max-width: 760px) {
  .page-hero .facts { margin-top: 44px; }
  .tool { margin-top: 64px; }
  .tool-closed { padding: 28px; }
  .tool-closed__text { font-size: 24px; }
  .terms-box { padding: 20px 18px 18px; }

  .tool-page .footer__links { flex-wrap: wrap; gap: 12px 24px; }

  .terms-doc { margin-top: 56px; }
  .terms-doc__draft { flex-direction: column; gap: 8px; }
  .clause { grid-template-columns: minmax(0, 1fr); padding: 26px 0 28px; }
  .clause__num { padding-top: 0; }
  .clause__text, .clause__list { grid-column: auto; }
  .clause__ref { min-width: 36px; }
  .clause__item, .clause__list.clause__item { padding-left: 20px; }
  .clause__item--deep { padding-left: 40px; }
  .clause__title { font-size: 26px; }
}