/* AMANAH AI — help popovers and "How this works" callouts (js/hints.js). Colours from css/tokens.css. */
/* Text colours are fixed (not page variables): --txt-m / --txt-s mean different shades on different pages (admin.css,
   scoring-wizard.html) and gave pale, low-contrast help text there. */

/* Label + "?" on one line (the button is never inside the <label>). */
.amanah-hint-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; }
.amanah-hint-row > label, .amanah-hint-row > .field-label, .amanah-hint-row > span { flex: 0 1 auto; min-width: 0; }
.amanah-hint-row > .amanah-hint-btn { flex: 0 0 auto; align-self: center; }

.amanah-hint-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 0 0 0 2px; vertical-align: middle;
  border: 1.5px solid var(--teal, #0E7C66); border-radius: 50%;
  background: var(--bg, #fff); color: var(--teal, #0E7C66);
  font: 700 11px/1 var(--font-sans, 'Inter', system-ui, sans-serif); letter-spacing: 0; text-transform: none;
  cursor: pointer; position: relative; transition: background .15s, color .15s;
}
/* A larger tap target than the visible circle (WCAG 2.5.8). */
.amanah-hint-btn::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.amanah-hint-btn:hover, .amanah-hint-btn.is-open { background: var(--teal, #0E7C66); color: #fff; }
.amanah-hint-btn:focus-visible { outline: 2px solid var(--teal, #0E7C66); outline-offset: 2px; }
.amanah-hint-btn--after { margin: 6px 0 0 2px; align-self: flex-start; }
.amanah-hint-btn--beside { margin: 0 0 0 8px; vertical-align: middle; }
/* After a full-width custom checkbox (agreement block): on its own line, left-aligned. */
#awAgreeBlock + .amanah-hint-btn--beside { margin: 6px 0 0 0; }
.amanah-hint-host--corner { position: relative; }
.amanah-hint-btn--corner { position: absolute; top: -9px; right: 14px; z-index: 2; width: 22px; height: 22px; min-width: 22px; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.amanah-hint-pop {
  position: fixed; z-index: 10060; box-sizing: border-box;
  background: var(--bg-s, #fff); color: var(--txt, #1A202C);
  border: 1px solid var(--border, #E2E8F0); border-top: 3px solid var(--teal, #0E7C66); border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.14)); padding: 10px 12px 12px;
  font: 400 13px/1.5 var(--font-sans, 'Inter', system-ui, sans-serif); text-align: left; text-transform: none; letter-spacing: normal;
  overflow-y: auto; overscroll-behavior: contain; white-space: normal; cursor: auto;
}
.amanah-hint-pop:focus { outline: none; }
/* Shown on hover / keyboard focus: a description of the button; it does not take the pointer away from the page edge. */
.amanah-hint-pop.is-transient { box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.12)); }
.amanah-hint-pop:focus-visible { box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.14)), 0 0 0 2px var(--teal, #0E7C66); }
.amanah-hint-pop[data-side="top"] { border-top-width: 1px; border-bottom: 3px solid var(--teal, #0E7C66); }
.amanah-hint-pop__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.amanah-hint-pop__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%; background: var(--teal, #0E7C66); color: #fff;
  font: 700 11px/1 var(--font-sans, 'Inter', system-ui, sans-serif);
}
.amanah-hint-pop__title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--txt, #1A202C); overflow-wrap: anywhere; }
.amanah-hint-pop__close {
  flex-shrink: 0; width: 28px; height: 28px; margin: -4px -6px -4px 0; border: 0; border-radius: 8px;
  background: transparent; color: #718096; font-size: 20px; line-height: 1; cursor: pointer;
}
.amanah-hint-pop__close:hover { background: var(--bg-h, #F0F4F8); color: var(--txt, #1A202C); }
.amanah-hint-pop__close:focus-visible { outline: 2px solid var(--teal, #0E7C66); }
.amanah-hint-pop__line { margin: 0 0 6px; color: #4A5568; overflow-wrap: anywhere; }
.amanah-hint-pop__line:last-child { margin-bottom: 0; }
.amanah-hint-pop__line--ex { padding: 5px 8px; border-radius: 6px; background: var(--bg-alt, #F7F9FC); color: var(--txt, #1A202C); font-size: 12.5px; }
.amanah-hint-pop__line--why { padding-top: 6px; border-top: 1px solid var(--border-l, #EDF2F7); font-size: 12.5px; }
.amanah-hint-pop__line--why strong { color: var(--teal-d, #0A5C4E); }

/* Phones: a bottom sheet across the screen. */
.amanah-hint-pop--sheet {
  border-radius: 14px 14px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(0,0,0,.18); font-size: 14px;
}
.amanah-hint-pop--sheet .amanah-hint-pop__title { font-size: 15px; }
.amanah-hint-pop--sheet .amanah-hint-pop__close { width: 36px; height: 36px; }

/* "How this works" callout */
.amanah-intro-box { margin: 0 0 14px; }
.amanah-intro-box:empty { display: none; }
.amanah-intro {
  border: 1px solid var(--teal-pale, #E8F5F2); border-left: 3px solid var(--teal, #0E7C66); border-radius: 10px;
  background: var(--teal-pale, #E8F5F2); padding: 10px 14px 12px; color: #4A5568; font-size: 13px; line-height: 1.55;
}
.amanah-intro__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.amanah-intro__title { display: block; flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 700; color: var(--txt, #1A202C); }
.amanah-intro__hide, .amanah-intro-show {
  border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--teal-d, #0A5C4E);
  text-decoration: underline; cursor: pointer; flex-shrink: 0;
}
.amanah-intro-show { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.amanah-intro-show:hover { text-decoration: underline; }
.amanah-intro__hide:focus-visible, .amanah-intro-show:focus-visible { outline: 2px solid var(--teal, #0E7C66); outline-offset: 2px; border-radius: 4px; }
.amanah-intro__list { margin: 0; padding-left: 20px; }
.amanah-intro__list li { margin: 2px 0; }

@media (prefers-reduced-motion: no-preference) { .amanah-hint-pop { animation: amanah-hint-in .12s ease-out; } }
@keyframes amanah-hint-in { from { opacity: 0; } to { opacity: 1; } }
.amanah-hint-pop--sheet { animation: none; }

@media print { .amanah-hint-btn, .amanah-hint-pop, .amanah-intro-box { display: none !important; } }