/* Maths tricks - shared by tricks.html and tricks/*.html. Generated by build_tricks.py:
   the first block is the original inline style of the single-page tricks.html. */
      .trick-card {
        background: #ffffff;
        border: 1px solid #eef0f2;
        border-radius: 14px;
        padding: 22px 26px 20px;
        margin: 0 0 24px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      }
      .trick-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 10px;
      }
      .trick-num {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #f79522;
        color: #fff;
        font-weight: 700;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .trick-head h2 {
        margin: 0;
        font-size: 1.2rem;
        color: #1a1a1a;
        border: none;
        padding: 0;
      }
      .trick-rule {
        background: #fff7ed;
        border-left: 4px solid #f79522;
        padding: 10px 14px;
        border-radius: 6px;
        margin: 0 0 10px;
        color: #3f3f3f;
        line-height: 1.55;
      }
      .trick-why {
        background: #eef4ff;
        border-left: 4px solid #3b82f6;
        padding: 10px 14px;
        border-radius: 6px;
        margin: 0 0 14px;
        color: #374151;
        line-height: 1.55;
        font-size: 0.96rem;
      }
      .trick-examples h4 {
        margin: 0 0 6px;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #9199a3;
        font-weight: 700;
      }
      .trick-examples ul {
        margin: 0;
        padding-left: 20px;
      }
      .trick-examples li {
        margin: 4px 0;
        color: #374151;
        line-height: 1.5;
      }
      .trick-practice {
        background: #f0fdf4;
        border-left: 4px solid #22c55e;
        padding: 14px 16px 16px;
        border-radius: 6px;
        margin: 16px 0 0;
        color: #14532d;
        font-size: 0.95rem;
      }
      .practice-header {
        font-weight: 700;
        margin-bottom: 8px;
      }
      .practice-header i {
        margin-right: 6px;
        color: #22c55e;
      }
      .practice-question {
        margin: 0 0 12px;
        font-weight: 600;
        color: #14532d;
        font-size: 1rem;
      }
      .practice-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
      }
      .practice-btn {
        border: 2px solid #22c55e;
        background: #ffffff;
        color: #15803d;
        font-weight: 700;
        padding: 8px 22px;
        border-radius: 999px;
        cursor: pointer;
        font-size: 0.95rem;
        transition: all 0.15s ease;
      }
      .practice-btn:hover {
        background: #22c55e;
        color: #ffffff;
      }
      .practice-input {
        border: 2px solid #22c55e;
        border-radius: 8px;
        padding: 7px 12px;
        font-size: 0.95rem;
        width: 130px;
        color: #14532d;
        font-family: inherit;
      }
      .practice-submit {
        border: none;
        background: #22c55e;
        color: #fff;
        font-weight: 700;
        padding: 9px 20px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.95rem;
      }
      .practice-submit:hover {
        background: #16a34a;
      }
      .practice-feedback:empty {
        display: none;
      }
      .practice-feedback {
        margin: 10px 0;
        border-radius: 8px;
        overflow: hidden;
      }
      .feedback-correct {
        background: #dcfce7;
        border: 1px solid #86efac;
        color: #14532d;
        padding: 10px 14px;
        border-radius: 8px;
        font-weight: 600;
        margin: 0 0 10px;
      }
      .feedback-incorrect {
        background: #fef2f2;
        border: 1px solid #fca5a5;
        color: #7f1d1d;
        padding: 10px 14px;
        border-radius: 8px;
        font-weight: 600;
        margin: 0 0 10px;
      }
      .working-block {
        background: #ffffff;
        border: 1px solid #d1fae5;
        border-radius: 8px;
        padding: 12px 16px;
        margin: 0 0 10px;
        color: #1f2937;
        font-size: 0.92rem;
      }
      .working-block h5 {
        margin: 0 0 6px;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #16a34a;
        font-weight: 700;
      }
      .working-block ol {
        margin: 0;
        padding-left: 20px;
      }
      .working-block li {
        margin: 3px 0;
        line-height: 1.5;
      }
      .working-block.direct h5 {
        color: #2563eb;
      }
      .working-block.direct .example-card {
        margin: 0 0 10px;
      }
      .working-block.direct .example-card:last-child {
        margin-bottom: 0;
      }
      .example-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 1.25rem;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
      }
      .example-header {
        background: #f3f4f6;
        color: #1f2937;
        padding: .55rem 1.25rem;
        font-weight: 700;
        font-size: .88rem;
        letter-spacing: .03em;
        border-bottom: 1px solid #d1d5db;
      }
      .example-body {
        padding: 1.1rem 1.4rem;
        font-size: .95rem;
        line-height: 1.7;
        color: #1f2937;
      }
      .example-body p {
        margin: 0 0 8px;
      }
      .example-body p:last-child {
        margin-bottom: 0;
      }
      .calc-pre {
        font-family: 'Courier New', Courier, monospace;
        font-size: 1.05rem;
        line-height: 1.5;
        background: #f8f9fa;
        padding: 12px 16px;
        border-radius: 6px;
        margin: 0 0 10px;
        overflow-x: auto;
      }
      .working-final {
        margin: 10px 0 0;
        font-weight: 700;
        color: #14532d;
      }
      .practice-newnum {
        border: none;
        background: none;
        color: #16a34a;
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        padding: 4px 0;
        font-family: inherit;
      }
      .practice-newnum:hover {
        text-decoration: underline;
      }
      .practice-newnum i {
        margin-right: 4px;
      }
      .proof-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: none;
        padding: 4px 0 0;
        margin: 0 0 8px;
        color: #6d28d9;
        font-weight: 600;
        font-size: 0.88rem;
        cursor: pointer;
        font-family: inherit;
      }
      .proof-toggle:hover {
        color: #4c1d95;
        text-decoration: underline;
      }
      .proof-toggle i {
        font-size: 0.75rem;
        transition: transform 0.2s ease;
      }
      .proof-toggle.open i {
        transform: rotate(90deg);
      }
      .proof-box {
        display: none;
        background: #faf5ff;
        border: 1px dashed #c4b5fd;
        border-radius: 8px;
        padding: 12px 16px;
        margin: 0 0 14px;
        color: #4c1d59;
        font-size: 0.92rem;
        line-height: 1.6;
      }
      .proof-box.show {
        display: block;
      }
      .proof-label {
        margin: 0 0 6px;
        font-weight: 700;
        color: #6d28d9;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }
      .proof-label span {
        font-weight: 400;
        text-transform: none;
        color: #8b5cf6;
        letter-spacing: normal;
      }
      .proof-box p:last-child {
        margin: 0;
      }
    

/* ---------- the tricks hub (tricks.html): same tree list as resource.html ---------- */
.section-blurb { color: #6b7280; margin: 0 0 14px; }
.tree {
  max-width: 460px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.tree-node { margin: 0; border-bottom: 1px solid #f0f1f3; }
.tree-node:last-child { border-bottom: none; }
.node-block {
  display: block;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
}
.node-block:hover, .node-block:focus-visible {
  background-color: #f7f2ed;
  border-left: 4px solid #F68A0A;
  padding-left: 16px;
  outline: none;
}
.node-block:hover .node-title, .node-block:focus-visible .node-title { color: #F68A0A; }
.node-title {
  display: flex;
  align-items: center;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 1.02rem;
}
.node-title::before {
  content: "›";
  color: #f79522;
  margin-right: 10px;
  font-size: 1.1rem;
  font-weight: 700;
}
.node-desc {
  margin: 2px 0 0;
  padding: 0 0 0 24px;
  color: #8a8f98;
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ---------- a single trick's page ---------- */
.try-intro { color: #6b7280; margin: 0 0 12px; }
.worked-heading, .related-heading {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9199a3;
  font-weight: 700;
  margin: 18px 0 8px;
}
.worked-example {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  padding: 14px 20px 8px;
  margin: 0 0 12px;
}
.worked-example h3 { margin: 0 0 8px; font-size: 1.02rem; color: #1f2937; }
.worked-example ol { margin: 0 0 8px; padding-left: 22px; }
.worked-example li { margin: 4px 0; line-height: 1.55; color: #374151; }
.qa-list { list-style: none; margin: 0; padding: 0; counter-reset: qa; }
.qa-item {
  counter-increment: qa;
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 12px;
}
.qa-q { margin: 0 0 8px; font-weight: 600; color: #1f2937; line-height: 1.5; }
.qa-q::before { content: counter(qa) ". "; color: #f79522; font-weight: 700; }
.trick-answer summary { cursor: pointer; color: #f68a0a; font-weight: 600; }
.trick-answer .qa-a { margin: 8px 0 0; color: #374151; line-height: 1.6; }
.tips-list { margin: 0; padding-left: 20px; }

/* ---------- the "Try it yourself" buttons: same look as the practice widgets on /resources/ pages ---------- */
.trick-practice .practice-controls { gap: 10px; }
.trick-practice .practice-input {
  width: 160px;
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #111;
}
.trick-practice .practice-submit,
.trick-practice .practice-btn {
  padding: 8px 20px;
  font-size: 1rem;
  font-weight: 400;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.trick-practice .practice-submit:hover,
.trick-practice .practice-btn:hover { background: #0069d9; color: #fff; }
.trick-practice .practice-newnum {
  padding: 8px 20px;
  font-size: 1rem;
  font-weight: 400;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}
.trick-practice .practice-newnum:hover { background: #5a6268; text-decoration: none; }
.trick-practice .practice-controls button:disabled:not(.practice-newnum),
.trick-practice .practice-controls input:disabled { opacity: .6; cursor: default; }
.working-note { margin: 10px 0 0; color: #374151; line-height: 1.6; font-size: .95rem; }
.tips-list li { margin: 8px 0; line-height: 1.6; color: #374151; }