/* IPTV installation guide (/tutorial/ only). Brand tokens from family.css; our own layout code. */
.family-tuto {
	--tu-accent: var(--fam-royal);
	--tu-accent-strong: var(--fam-deep);
	--tu-soft: #EAF2FE;
	--tu-line: #DCE6F2;
	--tu-ink: var(--fam-navy);
	--tu-muted: #5B6B7F;
	--tu-bg: var(--fam-ice);
}

/* Breadcrumb */
.family-crumbs { margin-bottom: 18px; font-size: 14px; color: #5B6B7F; }
.family-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.family-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--fam-mist); }
.family-crumbs a { color: var(--fam-royal); }

/* Device picker */
.family-tuto__pick .family-head { gap: 8px; }
.family-tuto__devices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.family-tuto__device { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 132px; padding: 18px; background: var(--fam-white); border: 1px solid var(--tu-line); border-radius: 20px; color: var(--tu-ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.family-tuto__device:hover { border-color: var(--tu-accent); box-shadow: 0 8px 20px rgba(16, 36, 58, 0.08); }
.family-tuto__device:focus-visible { outline: 3px solid var(--tu-accent); outline-offset: 2px; }
.family-tuto__device.is-active { border: 2px solid var(--tu-accent); padding: 17px; background: var(--tu-soft); }
.family-tuto__device-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 30px; max-width: 100%; margin-bottom: 4px; color: var(--tu-ink); }
.family-tuto__device-mark .family-logo { height: 24px; width: auto; max-width: 110px; }
.family-tuto__device-mark .family-logo--text { height: auto; font: 700 17px/1 var(--fam-head); }
.family-tuto__device-mark .family-logo--mask { width: 100px; height: 16px; max-width: 100px; }
.family-tuto__device-mark .family-icon { color: var(--tu-accent); }
.family-tuto__device-name { font: 700 16px/1.3 var(--fam-head); }
.family-tuto__device-sub { font-size: 13px; line-height: 1.45; color: var(--tu-muted); }

/* Panels: all visible without JavaScript, one at a time with it */
.family-tuto__panels { padding-block: 56px; }
.js .family-tuto__panel:not(.is-active) { display: none; }
.js .family-tuto__panels:not(.has-active) { display: none; }
.family-tuto__panel { position: relative; box-sizing: border-box; scroll-margin-top: 16px; margin: 0 auto 40px; max-width: 920px; padding: 36px; background: var(--fam-white); border: 1px solid var(--tu-line); border-radius: 20px; }
.family-tuto__panel:focus { outline: none; }
.family-tuto__alias { position: absolute; top: 0; scroll-margin-top: 16px; }
.family-tuto__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.family-tuto__title { font-size: clamp(24px, 1.2vw + 18px, 32px); }
.family-tuto__meta, .family-tuto__apps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.family-tuto__meta li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--tu-bg); border: 1px solid var(--tu-line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tu-ink); }
.family-tuto__meta .family-icon { color: var(--tu-accent); }
.family-tuto__apps { margin-bottom: 22px; }
.family-tuto__apps li { padding: 6px 12px; border: 1px solid var(--tu-line); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--tu-muted); }
.family-tuto__apps li.is-main { background: var(--tu-accent); border-color: var(--tu-accent); color: var(--fam-white); }

/* Third-party app gate */
.family-tuto__gate { display: none; }
.js .family-tuto__panel.is-locked .family-tuto__gate { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; background: var(--tu-soft); border: 1px solid var(--tu-line); border-radius: 20px; }
.js .family-tuto__panel.is-locked [data-gated] { display: none; }
.family-tuto__gate p { margin: 0; color: var(--tu-ink); line-height: 1.6; }
.family-tuto__gate-title { display: flex; align-items: center; gap: 8px; font: 700 18px/1.3 var(--fam-head); }
.family-tuto__gate-title .family-icon { color: var(--tu-accent); }
.family-tuto__check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--tu-ink); cursor: pointer; }
.family-tuto__check input { width: 22px; height: 22px; margin: 0; accent-color: var(--tu-accent); }
.family-tuto__gate .family-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Note boxes */
.family-tuto__box { display: flex; gap: 12px; margin: 0 0 18px; padding: 16px 18px; background: var(--tu-bg); border: 1px solid var(--tu-line); border-radius: 16px; }
.family-tuto__box-icon { flex: 0 0 auto; display: flex; padding-top: 2px; color: var(--tu-accent); }
.family-tuto__box-body { min-width: 0; }
.family-tuto__box-body p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tu-ink); }
.family-tuto__box-body p + p { margin-top: 6px; }
.family-tuto__box-title { font-weight: 700; }
.family-tuto__box--info { background: var(--tu-soft); }
.family-tuto__box--warning { background: var(--fam-sand); border-color: #F4D9A6; }
.family-tuto__box--warning .family-tuto__box-icon { color: #8A5300; }
.family-tuto__box--licence { background: var(--fam-white); border-width: 2px; border-color: var(--tu-soft); }
.family-tuto__box--example .family-tuto__box-body p:last-child { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; }
.family-tuto__box a:not(.family-btn) { color: var(--tu-accent); font-weight: 600; }

/* Methods and steps */
.family-tuto__method { margin: 30px 0 10px; }
.family-tuto__method-title { margin: 0 0 14px; font: 700 21px/1.3 var(--fam-head); color: var(--tu-ink); }
.family-tuto__lead { margin: 0 0 12px; color: var(--tu-muted); line-height: 1.6; }
.family-tuto__steps { list-style: none; margin: 0; padding: 0; counter-reset: tu-step; }
.family-tuto__step { counter-increment: tu-step; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 0 16px 50px; border-top: 1px solid var(--tu-line); }
.family-tuto__step:first-child { border-top: 0; }
.family-tuto__step::before { content: counter(tu-step); position: absolute; left: 0; top: 14px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tu-accent); color: var(--fam-white); font: 700 15px/1 var(--fam-head); }
.family-tuto__step-body > p { margin: 5px 0 0; font-size: 17px; line-height: 1.6; color: var(--tu-ink); }
.family-tuto__step-body .family-tuto__box { margin: 12px 0 0; }
.family-tuto__step-help { margin-top: 12px; padding: 14px 16px; background: var(--tu-soft); border-radius: 14px; }
.family-tuto__step-help p { margin: 0; line-height: 1.6; color: var(--tu-ink); }
.family-tuto__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.family-tuto__method > .family-tuto__btns { margin: 0 0 14px; }
.family-tuto__btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.family-tuto__btn .family-icon { flex: 0 0 auto; }
.family-tuto__shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }

/* Screenshot slots: fixed 16:9 so nothing shifts when the real image arrives */
.family-shot { margin: 0; max-width: 480px; }
.family-shot__frame { box-sizing: border-box; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px; background: var(--tu-bg); border: 1px dashed #B9CDE6; border-radius: 14px; text-align: center; }
.family-shot__icon { color: var(--tu-accent); }
.family-shot__caption { font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--tu-ink); }
.family-shot__id { font-size: 12px; color: var(--tu-muted); }
.family-shot--image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--tu-bg); border: 1px solid var(--tu-line); border-radius: 14px; }

/* FAQ inside each panel (items reuse .family-faq__item) */
.family-tuto__faq { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--tu-line); display: flex; flex-direction: column; gap: 12px; }
.family-tuto__faq-title { margin: 0 0 6px; font: 700 21px/1.3 var(--fam-head); color: var(--tu-ink); }

/* Closing call to action */
.family-tuto__end .family-head { gap: 16px; }
.family-tuto__end .family-btns { justify-content: center; }
.family-tuto__end .family-small a { color: var(--fam-royal); font-weight: 600; }

@media (min-width: 900px) {
	.family-tuto__step--shot { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; }
	.family-tuto__step--shot .family-tuto__shots { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
	.family-tuto__devices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.family-tuto__devices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.family-tuto__devices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.family-tuto__device { min-height: 118px; padding: 14px; border-radius: 16px; }
	.family-tuto__device.is-active { padding: 13px; }
	.family-tuto__device-sub { font-size: 12px; }
	.family-tuto__device-mark .family-logo { height: 20px; max-width: 100%; }
	.family-tuto__device-mark .family-logo--text { font-size: 15px; }
	.family-tuto__device-mark .family-logo--mask { width: 86px; height: 14px; }
	.family-tuto__panels { padding-block: 32px; }
	.family-tuto__panel { padding: 22px 16px; border-radius: 16px; }
	.family-tuto__step { padding-left: 44px; }
	.family-tuto__step::before { width: 30px; height: 30px; font-size: 14px; }
	.family-tuto__step-body > p { font-size: 16px; }
	.family-tuto__method-title, .family-tuto__faq-title { font-size: 19px; }
	.family-tuto__box { padding: 14px; }
	.family-tuto__btn { width: 100%; justify-content: center; }
}