/* Permission screenshots and video help. Other pages retain existing styles. */
.help-page { overflow-wrap: anywhere; }
.help-page main, .help-page .header-controls, .help-page .summary-text { min-width: 0; }
.help-page .top nav { flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.help-page .top nav a { padding-block: 5px; }
.help-heading { padding-block: 36px 20px; }
.help-heading h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; letter-spacing: -.025em; }
.help-heading .lead { max-width: 800px; font-size: 1.1rem; }
.help-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 32px; align-items: start; }
.setup-copy { max-width: 800px; margin-top: 24px; white-space: pre-line; font-size: 1.1rem; line-height: 1.75; }
.video-guide { min-width: 0; margin-block: 36px 24px; padding: 16px; border: 1px solid #294462; border-radius: 16px; background: var(--panel); }
.video-guide h2 { margin: 0 0 14px; font-size: 1.15rem; line-height: 1.4; }
.video-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10px; background: #030811; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fallback { display: inline-block; margin-top: 14px; color: #97c2ff; text-underline-offset: 3px; }
.phone-list > .lead { margin-block: 8px 20px; }
.phone-list { padding-bottom: 40px; }
.help-accordion { margin-block: 14px; border: 1px solid #294462; border-radius: 16px; background: var(--panel); }
.help-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 18px 22px; border-radius: 15px; cursor: pointer; list-style: none; }
.help-accordion > summary::-webkit-details-marker { display: none; }
.help-accordion > summary:hover { background: #10213a; }
.help-accordion[open] > summary { border-bottom: 1px solid var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: #0e2038; }
.summary-text { display: grid; gap: 3px; }
.summary-text strong { font-size: 1.2rem; }
.summary-text small { color: var(--muted); font-size: .9rem; }
.summary-plus { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border: 1px solid #31547b; border-radius: 50%; color: var(--green); font-size: 1.4rem; line-height: 1; }
.summary-plus::before { content: "+"; }
.help-accordion[open] > summary .summary-plus::before { content: "−"; }
.accordion-body { padding: 22px; }
.screenshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 30px 24px; }
.screenshot-grid figure { min-width: 0; margin: 0; }
.screenshot-grid figcaption { max-width: 400px; margin: 0 0 12px; font-weight: 600; line-height: 1.5; }
.screenshot-link { display: block; width: min(100%, 360px); max-width: 100%; border: 1px solid #3b5578; border-radius: 10px; background: #030811; }
.screenshot-link:hover { border-color: var(--green); }
.screenshot-link img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 9px; }
/* Display the two original Samsung montage panels separately; the source file
   remains unchanged and a click always opens the complete original image. */
.screenshot-crop { position: relative; width: min(100%, 300px); aspect-ratio: 1 / 2; overflow: hidden; }
.screenshot-crop img { position: absolute; inset: 0 auto auto 0; width: 240%; max-width: none; height: auto; border-radius: 0; }
.crop-right img { transform: translateX(-58.333333%); }
.screenshot-source { grid-column: 1 / -1; margin: 0; font-size: .9rem; color: var(--muted); }
.screenshot-source a { color: #97c2ff; text-underline-offset: 3px; }
@media(max-width: 760px) {
  .help-intro { grid-template-columns: 1fr; gap: 0; }
  .video-guide { width: min(100%, 360px); margin-top: 0; }
  .help-heading { padding-block: 24px 12px; }
  .screenshot-grid { grid-template-columns: 1fr; gap: 28px; }
  .help-accordion > summary, .accordion-body { padding: 17px; }
}
@media(max-width: 380px) { .accordion-body { padding-inline: 12px; } }