/* Shared collapsible sections, matching the Occasion Planner steps.
   Markup:
     <section class="tcj-step" id="x">              (add .collapsed to close)
       <h2 class="tcj-step-h"><button type="button" class="tcj-step-head" aria-expanded="true" aria-controls="x-body">
         <span class="tcj-step-num">1</span><span class="tcj-step-name">Title</span>
         <span class="tcj-step-sum">Summary</span><span class="tcj-step-chev" aria-hidden="true"></span>
       </button></h2>
       <div class="tcj-step-body" id="x-body" role="region">…</div>
     </section>
   Theme colours only. */
.tcj-step { background: var(--text-ghost); border: 1px solid var(--border); border-radius: 14px; margin: 0 0 14px; overflow: visible; scroll-margin-top: 124px; }
.tcj-step-h { margin: 0; font: inherit; }
.tcj-step-head {
  display: grid; grid-template-columns: 28px auto minmax(0, 1fr) 18px; align-items: center; gap: 12px;
  width: 100%; padding: 13px 16px; border: 0; border-radius: 14px; background: none; text-align: left;
  color: var(--text-high); cursor: pointer; font: inherit;
}
.tcj-step-head:hover { background: var(--hover-wash, rgb(from var(--text-high) r g b / 0.04)); }
.tcj-step-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tcj-step-num {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  border: 1px solid var(--border); color: var(--text-mid); background: var(--bg);
}
.tcj-step:not(.collapsed) .tcj-step-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #15120c); }
.tcj-step.is-done .tcj-step-num { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.tcj-step.is-done:not(.collapsed) .tcj-step-num { color: var(--on-accent, #15120c); }
.tcj-step.has-error .tcj-step-num { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.tcj-step-name { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; white-space: nowrap; }
.tcj-step-sum { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tcj-step-chev { width: 10px; height: 10px; border-right: 2px solid var(--text-mid); border-bottom: 2px solid var(--text-mid); transform: rotate(45deg); justify-self: center; margin-top: -4px; transition: transform .15s; }
.tcj-step:not(.collapsed) > .tcj-step-h .tcj-step-chev { transform: rotate(-135deg); margin-top: 4px; }
.tcj-step:not(.collapsed) > .tcj-step-h .tcj-step-head { border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--border); background: var(--bg); }
.tcj-step-body { padding: 18px 20px 20px 56px; background: var(--bg); border-radius: 0 0 14px 14px; }
.tcj-step.collapsed > .tcj-step-body { display: none !important; }
@media (max-width: 640px) {
  .tcj-step-head { grid-template-columns: 26px minmax(0, 1fr) 16px; }
  .tcj-step-sum { grid-column: 2 / 3; grid-row: 2; }
  .tcj-step-chev { grid-row: 1 / span 2; grid-column: 3; }
  .tcj-step-body { padding: 14px 12px 16px; }
}
@media print {
  .tcj-step.collapsed > .tcj-step-body { display: block !important; }
  .tcj-step-chev { display: none; }
}

/* Info icon with its explanation on hover, keyboard focus or tap. */
.tcj-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.tcj-info-btn {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg);
  color: var(--text-mid); font: italic 600 11px/1 Georgia, 'Times New Roman', serif; cursor: help; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; text-transform: none; letter-spacing: 0;
}
.tcj-info-btn:hover, .tcj-info-btn:focus-visible, .tcj-info.open .tcj-info-btn { border-color: var(--accent); color: var(--accent); outline: none; }
.tcj-info-tip {
  display: none; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 60;
  width: max-content; max-width: min(320px, 80vw); padding: 10px 12px; border-radius: 10px;
  background: var(--bg); color: var(--text-high); border: 1px solid rgb(from var(--accent) r g b / 0.45);
  box-shadow: 0 10px 26px rgba(0,0,0,0.16);
  font: 400 12px/1.55 'DM Sans', sans-serif; text-transform: none; letter-spacing: 0; text-align: left; white-space: normal;
}
.tcj-info-tip .sr-i { display: none; }
.tcj-info-tip a { color: var(--accent); }
.tcj-info:hover .tcj-info-tip, .tcj-info:focus-within .tcj-info-tip, .tcj-info.open .tcj-info-tip { display: block; }
/* A help bubble never blocks the buttons under it: clicks go straight through (13 Nov 2026).
   Bubbles that hold a link stay clickable; clicking anywhere else closes them. */
.tcj-info-tip { pointer-events: none; }
.tcj-info-tip:has(a) { pointer-events: auto; }
.tcj-info.tcj-shut .tcj-info-tip { display: none !important; }
.tcj-info.tip-left .tcj-info-tip { left: 0; transform: none; }
.tcj-info.tip-right .tcj-info-tip { left: auto; right: 0; transform: none; }

/* Plain folds (reference lists, admin feeds): a native <details class="tcj-fold">
   with a <summary>. Same card, header and chevron as .tcj-step, no step number.
   <summary> is a real button for keyboards and screen readers, and keeps the
   element's own open/close events. */
details.tcj-fold { background: var(--text-ghost); border: 1px solid var(--border); border-radius: 14px; margin: 0 0 12px; padding: 0; }
details.tcj-fold > summary {
  list-style: none; display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 13px 16px; border-radius: 14px; cursor: pointer;
  font: 700 15px/1.3 'DM Sans', sans-serif; color: var(--text-high); text-transform: none; letter-spacing: 0;
}
details.tcj-fold > summary::-webkit-details-marker { display: none; }
details.tcj-fold > summary::before { content: none !important; }
details.tcj-fold > summary::after {
  content: ''; flex: 0 0 auto; margin-left: auto; width: 10px; height: 10px; margin-top: -4px;
  border-right: 2px solid var(--text-mid); border-bottom: 2px solid var(--text-mid); transform: rotate(45deg); transition: transform .15s;
}
details.tcj-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.tcj-fold > summary:hover { background: var(--hover-wash, rgb(from var(--text-high) r g b / 0.04)); }
details.tcj-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
details.tcj-fold[open] { background: var(--bg); }
details.tcj-fold[open] > summary { border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--border); }
details.tcj-fold > summary + * { padding: 16px 20px 18px; }
details.tcj-fold .tcj-fold-sum { font-size: 12px; font-weight: 400; color: var(--text-mid); }
/* Admin feeds used "Show / Hide" text; the chevron says it now. */
.im-fold.tcj-fold > summary.im-fold-sum { padding: 13px 16px; font-size: 14px; }
/* Library directory folds keep their own heading layout. */
details.tcj-fold.lib-fold { border-bottom: 1px solid var(--border); }
details.tcj-fold.lib-fold > summary { padding: 12px 16px; }
details.tcj-fold.lib-fold .lib-fold-chev { display: none; }
@media print { details.tcj-fold > summary::after { display: none; } }