/* «الدليل» (Demo `guide`, GUIDE.html .gpic, .gshow, .gring; FR-047 to FR-053): the rows, the sheet's picture and text, and the
   amber ring «أرني في التطبيق» puts round a control. Every value is a token (tokens/); one gap between blocks, none of them
   touching the line or box beside it. */
.guiderow {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap);
  width: 100%;
  padding: var(--spacing-row) var(--spacing-window);
  border: 0;
  background: transparent;
  color: var(--app-ink);
  font: inherit;
  text-align: start;
}

.guiderow[hidden],
.guidesec[hidden],
#guiderows .glist[hidden] {
  display: none;
}

/* the search line's label is for a screen reader only */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.guiderow .mw {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

.guiderow small {
  color: var(--app-muted);
  font-size: var(--font-size-meta);
  line-height: 1.7;
}

.gstep-n {
  flex: none;
  min-width: var(--spacing-lg);
  border-radius: var(--radius-pill);
  background-color: var(--app-badge-bg);
  color: var(--app-badge-ink);
  font-size: var(--font-size-meta);
  font-weight: 800;
  text-align: center;
  line-height: var(--spacing-lg);
}

#guideempty {
  padding: var(--spacing-md) var(--spacing-window);
}

#guiderows .guidesec {
  margin-top: var(--spacing-lg);
  padding-inline: var(--spacing-window);
}

/* the picture: a band at the top of the sheet, drawn inert, in the app's own colours */
.gpic {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  justify-content: center;
  min-height: 120px;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--app-line);
  background-color: var(--app-raise);
  color: var(--app-ink);
  font-size: var(--font-size-meta);
  pointer-events: none;
}

.gpic svg {
  flex: none;
  width: var(--spacing-md);
  height: var(--spacing-md);
}

.gp-row,
.gp-card,
.gp-band,
.gp-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.gp-card {
  padding: var(--spacing-row);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-md);
  background-color: var(--app-surface);
}

.gp-chip,
.gp-opt {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-caption);
}

.gp-th {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  border-radius: var(--radius-sm);
  background-color: var(--app-line-strong);
}

.gp-button {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  background-color: var(--app-btn);
  color: var(--app-btn-ink);
  font-weight: 700;
}

.gp-ok {
  color: var(--color-success);
}

.gp-bad {
  color: var(--app-danger);
}

.gp-warn {
  border-color: var(--app-note-line);
  background-color: var(--app-note-bg);
  color: var(--app-note-ink);
}

.gp-accent {
  color: var(--app-btn);
  font-weight: 700;
}

.glead,
.gtext,
.glinks-h,
.glinks,
.gshow {
  margin-inline: var(--spacing-window);
}

.glead {
  margin-block: var(--spacing-md) 0;
  line-height: 1.8;
}

.gtext {
  margin-block: var(--spacing-gap) 0;
  padding-inline-start: var(--spacing-md);
  line-height: 1.8;
}

.glinks-h {
  margin-block: var(--spacing-lg) var(--spacing-sm);
  color: var(--app-muted);
  font-size: var(--font-size-meta);
  font-weight: 700;
}

.glinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.glinks button {
  padding: var(--spacing-sm) var(--spacing-gap);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--app-surface);
  color: var(--app-ink);
  font: inherit;
  font-size: var(--font-size-meta);
}

.gshow {
  margin-block: var(--spacing-lg) var(--spacing-md);
}

/* never position or z-index: the ring must not move what it marks */
.gring {
  outline: 3px solid var(--app-note-dot) !important;
  outline-offset: 3px;
  border-radius: var(--radius-thumb);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--app-note-dot) 22%, transparent) !important;
}

.hintbtn,
.helpbtn {
  min-width: var(--spacing-lg);
  height: var(--spacing-lg);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--app-surface);
  color: var(--app-btn);
  font: inherit;
  font-weight: 800;
}

/* the (!) inside a field title keeps its distance from the words (rule 13) */
label > .hintbtn {
  margin-inline-start: var(--spacing-md);
}

@media (prefers-reduced-motion: no-preference) {
  .gring {
    animation: gring-pulse 1.1s ease-in-out 3;
  }
}

@keyframes gring-pulse {
  50% {
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--app-note-dot) 8%, transparent);
  }
}