/* Packet-Flap Index - Seed Tape Bench help (Appily-OneHundredSix)
 Perforation scan search | drip-hose topic emitters | hinged packet flaps.
 NOT Grout FAQ, Blotter strips, Tessera tiles, spar sails, or punchcard.
 Layout: hose-line hides ≤900; flap chevron spans mobile rows; scan stretch wrap. */

.page-a106-packetflap { overflow-x: clip; }

.pf-stage {
 padding-bottom: var(--a106-space-6);
 background:
 linear-gradient(180deg, rgba(232, 212, 168, 0.22) 0%, transparent 28%),
 var(--a106-field);
}

.pf-mast {
 padding: clamp(28px, 4vw, 52px) 0 18px;
}
.pf-brand {
 margin: 0 0 6px;
 font-family: var(--a106-font-display);
 font-size: clamp(1.55rem, 3.2vw, 2.15rem);
 font-weight: 700;
 color: var(--a106-bloom);
 letter-spacing: -0.02em;
 line-height: 1.15;
}
.pf-mast h1 {
 margin: 0 0 10px;
 font-family: var(--a106-font-body);
 font-size: clamp(1.05rem, 2vw, 1.25rem);
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--a106-ink);
}
.pf-mast p {
 margin: 0;
 max-width: 46ch;
 color: var(--a106-mute);
}

/* Perforation scan search */
.pf-scan-wrap { margin-bottom: 22px; }
.pf-scan {
 display: flex;
 flex-wrap: wrap;
 align-items: stretch;
 gap: 10px;
 padding: 18px 8px 16px;
 background: var(--a106-kraft);
 border: 3px solid var(--a106-soil);
 box-shadow: var(--a106-hard);
 position: relative;
 transition: box-shadow 220ms var(--a106-ease);
}
.pf-scan.is-scanning {
 box-shadow: 4px 4px 0 var(--a106-drip), var(--a106-hard);
 animation: pf-scan-pulse 1.2s var(--a106-ease) infinite;
}
@keyframes pf-scan-pulse {
 0%, 100% { box-shadow: 4px 4px 0 var(--a106-drip), var(--a106-hard); }
 50% { box-shadow: 6px 6px 0 var(--a106-bloom), var(--a106-hard); }
}
.pf-perf {
 width: 16px;
 align-self: stretch;
 min-height: 56px;
 background:
 radial-gradient(circle at 50% 10px, var(--a106-field) 4px, transparent 4.5px) 0 0 / 100% 20px repeat-y;
 flex-shrink: 0;
}
.pf-scan-label {
 flex: 1;
 min-width: 200px;
 display: grid;
 gap: 6px;
 padding-inline: 6px;
}
.pf-scan-label span {
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--a106-mute);
}
.pf-scan-label input {
 min-height: 48px;
 width: 100%;
 padding: 0 14px;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 background: var(--a106-surface);
 font-family: var(--a106-font-body);
}
.pf-scan-label input:focus {
 outline: none;
 border-color: var(--a106-drip);
 box-shadow: 0 0 0 3px rgba(10, 126, 164, 0.25);
}
.pf-clear {
 margin: 0 6px 0 0;
 min-height: 42px;
 padding: 0 14px;
 align-self: flex-end;
 border: 2px solid var(--a106-soil);
 background: var(--a106-surface);
 font-family: var(--a106-font-body);
 font-weight: 700;
 color: var(--a106-ink);
 border-radius: var(--a106-radius);
 cursor: pointer;
 box-shadow: var(--a106-hard-sm);
 transition: transform 140ms var(--a106-ease), background 160ms ease;
}
.pf-clear:hover {
 background: var(--a106-field);
 transform: translate(-1px, -1px);
}
.pf-clear:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}
.pf-clear:active {
 transform: translate(1px, 1px);
 box-shadow: 1px 1px 0 var(--a106-soil);
}

/* Drip-hose topic emitters (.bf-chip kept for JS) */
.pf-hose {
 position: relative;
 display: flex;
 flex-wrap: wrap;
 gap: 12px 14px;
 align-items: center;
 margin-bottom: 26px;
 padding: 18px 8px 8px;
}
.pf-hose-line {
 position: absolute;
 left: 8px;
 right: 8px;
 top: 28px;
 height: 6px;
 border-radius: 999px;
 background:
 linear-gradient(90deg, var(--a106-drip), var(--a106-clay), var(--a106-bloom), var(--a106-sprout));
 opacity: 0.55;
 pointer-events: none;
 z-index: 0;
}
.bf-chip.pf-emitter {
 position: relative;
 z-index: 1;
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 min-height: 0;
 padding: 0;
 border: 0;
 background: transparent;
 box-shadow: none;
 border-radius: 0;
 color: var(--a106-ink);
 font-family: var(--a106-font-body);
 font-weight: 700;
 cursor: pointer;
 animation: pf-emitter-in 420ms var(--a106-ease) both;
 animation-delay: calc(var(--pf-ti, 0) * 55ms);
}
@keyframes pf-emitter-in {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: none; }
}
.bf-chip.pf-emitter i {
 width: 22px;
 height: 22px;
 border-radius: 50%;
 border: 3px solid var(--a106-soil);
 background: var(--a106-mute);
 box-shadow: 0 0 0 4px var(--a106-field), 0 3px 0 var(--a106-soil);
 transition: transform 180ms var(--a106-ease), box-shadow 180ms ease, background 160ms ease;
}
.bf-chip--soil.pf-emitter i { background: var(--a106-soil); }
.bf-chip--clay.pf-emitter i { background: var(--a106-clay); }
.bf-chip--drip.pf-emitter i { background: var(--a106-drip); }
.bf-chip--bloom.pf-emitter i { background: var(--a106-bloom); }
.bf-chip--sprout.pf-emitter i { background: var(--a106-sprout); }
.bf-chip.pf-emitter strong {
 font-size: 0.82rem;
 font-weight: 800;
 letter-spacing: 0.02em;
 padding: 4px 10px;
 background: var(--a106-surface);
 border: 2px solid var(--a106-soil);
 border-radius: 4px;
 box-shadow: 2px 2px 0 var(--a106-soil);
}
.bf-chip.pf-emitter:hover:not(.is-active) i {
 transform: translateY(3px) scale(1.08);
}
.bf-chip.pf-emitter:focus-visible {
 outline: none;
}
.bf-chip.pf-emitter:focus-visible i {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 3px;
}
.bf-chip.pf-emitter.is-active i {
 transform: translateY(4px) scale(1.12);
 box-shadow: 0 0 0 5px rgba(198, 245, 66, 0.45), 0 4px 0 var(--a106-soil);
}
.bf-chip.pf-emitter.is-active strong {
 background: var(--a106-drip);
 color: var(--a106-on-drip);
 border-color: var(--a106-soil);
}
.bf-chip--clay.pf-emitter.is-active strong { background: var(--a106-clay); color: var(--a106-on-clay); }
.bf-chip--bloom.pf-emitter.is-active strong { background: var(--a106-bloom); color: var(--a106-on-bloom); }
.bf-chip--sprout.pf-emitter.is-active strong { background: var(--a106-sprout); color: var(--a106-sprout-ink); }
.bf-chip--soil.pf-emitter.is-active strong { background: var(--a106-soil); color: var(--a106-on-soil); }

/* Hinged packet flaps */
.pf-index { margin-bottom: 28px; }
.pf-empty {
 padding: 18px;
 background: rgba(232, 212, 168, 0.35);
 border: 2px dashed var(--a106-border);
 color: var(--a106-mute);
 font-weight: 600;
}
.pf-flaps {
 display: grid;
 gap: 14px;
 perspective: 900px;
}
.pf-flap {
 background: var(--a106-kraft);
 border: 2px solid var(--a106-soil);
 box-shadow: 3px 3px 0 var(--a106-soil);
 transform-origin: top center;
 animation: pf-flap-in 480ms var(--a106-ease) both;
 animation-delay: calc(var(--pf-i, 0) * 40ms);
 overflow: hidden;
}
.pf-flap[hidden] { display: none !important; }
@keyframes pf-flap-in {
 from { opacity: 0; transform: rotateX(-12deg) translateY(8px); }
 to { opacity: 1; transform: none; }
}
.pf-flap summary {
 display: grid;
 grid-template-columns: auto auto 1fr auto;
 gap: 10px 12px;
 align-items: center;
 padding: 14px 16px;
 cursor: pointer;
 list-style: none;
 background:
 linear-gradient(90deg, rgba(10, 126, 164, 0.08), transparent 40%),
 var(--a106-kraft);
}
.pf-flap summary::-webkit-details-marker { display: none; }
.pf-flap-hinge {
 width: 14px;
 height: 28px;
 border-radius: 3px 8px 8px 3px;
 background: var(--a106-soil);
 border: 2px solid #1A140F;
 box-shadow: inset -3px 0 0 rgba(255, 255, 255, 0.12);
 transition: background 200ms ease, transform 260ms var(--a106-ease);
}
.pf-flap[open] .pf-flap-hinge {
 background: var(--a106-drip);
 transform: rotate(18deg);
}
.pf-flap-topic {
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--a106-clay-deep);
 padding: 3px 8px;
 background: var(--a106-surface);
 border: 1px solid var(--a106-border);
 border-radius: 3px;
}
.pf-flap-q {
 font-family: var(--a106-font-display);
 font-size: 1.05rem;
 font-weight: 600;
 color: var(--a106-ink);
}
.pf-flap-chev {
 width: 10px;
 height: 10px;
 border-right: 2px solid var(--a106-mute);
 border-bottom: 2px solid var(--a106-mute);
 transform: rotate(45deg);
 transition: transform 240ms var(--a106-ease);
}
.pf-flap[open] .pf-flap-chev {
 transform: rotate(225deg);
 border-color: var(--a106-drip);
}
.pf-flap-body {
 padding: 14px 16px 16px 42px;
 color: var(--a106-mute);
 background: var(--a106-surface);
 border-top: 2px dashed var(--a106-border);
 animation: pf-body-open 280ms var(--a106-ease);
}
@keyframes pf-body-open {
 from { opacity: 0; transform: translateY(-6px); }
 to { opacity: 1; transform: none; }
}
.pf-flap-body a {
 color: var(--a106-drip-deep);
 font-weight: 700;
}

/* Support desk */
.pf-desk-wrap { margin-top: 8px; }
.pf-desk {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 padding: 18px 20px;
 background: var(--a106-soil);
 color: var(--a106-on-soil);
 border: 3px solid var(--a106-soil);
 box-shadow: 4px 4px 0 var(--a106-bloom);
 clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.pf-desk-copy { display: grid; gap: 4px; }
.pf-desk-copy strong {
 font-family: var(--a106-font-display);
 font-size: 1.2rem;
}
.pf-desk-copy span { color: var(--a106-muted-on-dark); font-size: 0.92rem; }
.pf-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 min-width: 9rem;
 padding: 0 var(--a106-space-3);
 font-family: var(--a106-font-body);
 font-weight: 800;
 text-decoration: none;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 background: var(--a106-sprout);
 color: var(--a106-sprout-ink);
 box-shadow: var(--a106-hard-sm);
 transition: transform 140ms var(--a106-ease), box-shadow 140ms ease, background 160ms ease, color 160ms ease;
}
.pf-btn:hover {
 background: #fff;
 color: var(--a106-ink);
 transform: translate(-1px, -1px);
 box-shadow: 4px 4px 0 var(--a106-sprout);
}
.pf-btn:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 3px;
}
.pf-btn:active {
 transform: translate(2px, 2px);
 box-shadow: 1px 1px 0 var(--a106-soil);
}
.pf-exits {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 16px;
 margin: 14px 0 8px;
 font-size: 0.92rem;
}
.pf-exits a { font-weight: 700; }
.pf-exits a:hover { color: var(--a106-bloom); }
.pf-exits a:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}
.pf-pay-note {
 margin: 0;
 font-size: 0.88rem;
 color: var(--a106-mute);
}

@media (max-width: 900px) {
 .pf-hose-line { display: none; }
}

@media (max-width: 640px) {
 .bf-chip.pf-emitter {
 flex-direction: row;
 gap: 8px;
 }
 .bf-chip.pf-emitter i {
 width: 16px;
 height: 16px;
 }
 .pf-flap summary {
 grid-template-columns: auto 1fr auto;
 }
 .pf-flap-topic {
 grid-column: 2;
 justify-self: start;
 }
 .pf-flap-q { grid-column: 2; }
 .pf-flap-chev {
 grid-row: 1 / span 2;
 align-self: center;
 }
 .pf-flap-hinge {
 grid-row: 1 / span 2;
 align-self: center;
 }
 .pf-flap-body { padding-left: 16px; }
 .pf-desk { flex-direction: column; align-items: stretch; }
 .pf-btn { width: 100%; min-width: 0; }
 .pf-clear { width: 100%; margin: 0; align-self: stretch; }
 .pf-scan { flex-direction: column; align-items: stretch; padding: 14px; }
 .pf-perf { width: 100%; height: 14px; min-height: 0; align-self: auto;
 background: radial-gradient(circle at 10px 50%, var(--a106-field) 4px, transparent 4.5px) 0 0 / 20px 100% repeat-x;
 }
}

@media (prefers-reduced-motion: reduce) {
 .bf-chip.pf-emitter,
 .pf-flap,
 .pf-flap-body,
 .pf-scan.is-scanning { animation: none !important; }
 .pf-flap-hinge,
 .pf-flap-chev { transition: none !important; }
}