/* procmd visibility controls — toggleable categories.
 *
 * Defaults: edge labels HIDDEN; rationale + step ID suffix VISIBLE.
 * Override classes are applied to <html> by the visibility.js bundle (and
 * by an inline <script> in the page <head> for FOUC prevention).
 */

/* ---- Defaults ---------------------------------------------------------- */

.procmd-rationale  { display: inline; }
.procmd-step-id-suffix { display: inline; }

/* Inline tag references — monospace identifier with subtle background.
 * Rendered as <a href="#tag-ID"> so click jumps to the appendix entry. */
.procmd-tag {
  display: inline;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 0 0.25em;
  border-radius: 0.2em;
  background: rgba(127, 127, 127, 0.10);
  color: var(--md-typeset-a-color, #4051b5);
  white-space: nowrap;
  text-decoration: none;
}
.procmd-tag:hover {
  background: rgba(127, 127, 127, 0.20);
  text-decoration: none;
}

/* Flash the targeted appendix entry briefly when jumped to. */
.procmd-tag-appendix li:target,
.procmd-tag-appendix li:has(.procmd-tag-target:target) {
  animation: procmd-tag-flash 1.6s ease-out;
}
@keyframes procmd-tag-flash {
  0%   { background: rgba(64, 81, 181, 0.35); }
  100% { background: rgba(127, 127, 127, 0.05); }
}

/* Tag appendix — subtle visual separation from the procedure body. */
.procmd-tag-appendix {
  display: block;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
  font-size: 0.88em;
  color: var(--md-default-fg-color--light, #555);
}
.procmd-tag-appendix h2 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  color: var(--md-default-fg-color--light, #555);
  font-weight: 600;
}
.procmd-tag-appendix ul {
  list-style: none;
  padding-left: 0;
}
.procmd-tag-appendix li {
  margin: 0.6rem 0;
  padding: 0.4rem 0.6rem;
  background: rgba(127, 127, 127, 0.05);
  border-left: 2px solid rgba(127, 127, 127, 0.3);
  border-radius: 0 0.2em 0.2em 0;
  line-height: 1.5;
}
/* The first line of each entry is `id: <TAG>`. python-markdown wraps the
 * whole list-item content in implicit <br>-separated text; the id line
 * carries the tag name. Bold-style the id for visual hierarchy. */
.procmd-tag-appendix li::first-line {
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Override classes (set on <html>) ---------------------------------- */

html.hide-rationale        .procmd-rationale     { display: none; }
html.hide-step-id-suffix   .procmd-step-id-suffix { display: none; }
html.hide-tag              .procmd-tag,
html.hide-tag              .procmd-tag-group     { display: none; }
html.hide-tag-appendix     .procmd-tag-appendix  { display: none; }

/* When rationale is hidden, also hide the trailing <br/> that markdown's
 * hard-break emits after the line — otherwise the line break remains and
 * leaves an empty line where the rationale was. */
html.hide-rationale .procmd-rationale + br { display: none; }

/* Inert source block — hidden, used only by the source-modal JS */
.procmd-source-raw { display: none; }

/* ---- Source-view icon (hover-revealed, top-right of article) ---------- */

.procmd-source-icon {
  position: absolute;
  /* Sit immediately to the left of Material's edit-pencil (.md-content__button),
     which is floated top-right at ~0.4rem from the edge with ~1.8rem footprint.
     Stacking them side-by-side avoids the click overlap. */
  top: 0.4rem;
  right: 2.4rem;
  background: transparent;
  border: 0;
  padding: 0.3rem;
  cursor: pointer;
  color: var(--md-default-fg-color, #444);
  opacity: 0.25;
  transition: opacity 0.15s;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  border-radius: 0.2rem;
}
.procmd-source-icon:hover,
.procmd-source-icon:focus { opacity: 1; }
.md-content__inner:hover .procmd-source-icon { opacity: 0.7; }
.procmd-source-icon svg { width: 1.1rem; height: 1.1rem; }

/* ---- Source modal ----------------------------------------------------- */

.procmd-source-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.procmd-source-modal {
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color, #111);
  border-radius: 0.4rem;
  width: min(900px, 90vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  overflow: hidden;
}
.procmd-source-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  font-size: 0.85rem;
}
.procmd-source-modal-head .procmd-source-modal-title {
  font-weight: 600;
}
.procmd-source-modal-head .procmd-source-modal-actions {
  display: flex;
  gap: 0.4rem;
}
.procmd-source-modal-head button {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.2);
  padding: 0.2rem 0.6rem;
  border-radius: 0.2rem;
  cursor: pointer;
  font-size: 0.78rem;
  color: inherit;
}
.procmd-source-modal-head button:hover { background: rgba(0,0,0,0.05); }
.procmd-source-modal pre {
  margin: 0;
  padding: 0.8rem 1rem;
  overflow: auto;
  flex: 1 1 auto;
  background: var(--md-code-bg-color, #f5f5f5);
  font-size: 0.78rem;
  line-height: 1.45;
}
.procmd-source-modal code {
  background: transparent;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Eye icon button --------------------------------------------------- */

.procmd-vis-button {
  background: transparent;
  border: 0;
  padding: 0.4rem;
  margin-left: 0.2rem;
  color: var(--md-primary-bg-color, currentColor);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 0.2rem;
}
.procmd-vis-button:hover { background: rgba(255,255,255,0.1); }
.procmd-vis-button svg { width: 1.1rem; height: 1.1rem; }

@media (max-width: 600px) {
  /* Floating button fallback when Material header collapses */
  .procmd-vis-button.procmd-vis-floating {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: var(--md-primary-fg-color, #444);
    color: var(--md-primary-bg-color, #fff);
    padding: 0.6rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 100;
  }
}

/* ---- Popover ----------------------------------------------------------- */

.procmd-vis-popover {
  position: fixed;
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color, #111);
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 0.3rem;
  padding: 0.6rem;
  min-width: 18rem;
  z-index: 200;
  font-size: 0.85rem;
}
.procmd-vis-popover h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  font-weight: 600;
}
.procmd-vis-popover .procmd-vis-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  cursor: pointer;
}
.procmd-vis-popover .procmd-vis-row:hover { background: rgba(0,0,0,0.04); }
.procmd-vis-popover .procmd-vis-row input[type=checkbox] { margin: 0; }
.procmd-vis-popover .procmd-vis-row .procmd-vis-desc {
  display: block;
  color: var(--md-default-fg-color--light, #555);
  font-size: 0.75rem;
  margin-top: 0.1rem;
}
.procmd-vis-popover .procmd-vis-reset {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  text-align: right;
}
.procmd-vis-popover .procmd-vis-reset button {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.2);
  padding: 0.25rem 0.6rem;
  border-radius: 0.2rem;
  cursor: pointer;
  font-size: 0.75rem;
}
.procmd-vis-popover .procmd-vis-reset button:hover {
  background: rgba(0,0,0,0.05);
}

/* ---- Tag hover tooltips ---------------------------------------------- */
/* Hover-revealed details for «TAG» refs in procedure body. Mirrors the
   appendix entry; click on the tag still jumps to that entry. */
.procmd-tag-tooltip {
  position: absolute;
  z-index: 1000;
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color, #333);
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 0.85em;
  max-width: 360px;
  pointer-events: none;
  animation: procmd-tag-tooltip-fade-in 0.12s ease-out;
}
@keyframes procmd-tag-tooltip-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.procmd-tag-tooltip-id {
  font-weight: 700;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.95em;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--md-default-fg-color--lightest, #eee);
  color: var(--md-primary-fg-color, #3f51b5);
}
.procmd-tag-tooltip-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
  margin: 2px 0;
  line-height: 1.35;
}
.procmd-tag-tooltip-key {
  font-weight: 600;
  color: var(--md-default-fg-color--light, #555);
  font-size: 0.85em;
  text-transform: lowercase;
}
.procmd-tag-tooltip-val {
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.9em;
  word-break: break-word;
}
