/* Row Peg Board - Appily-OneHundredSix track
 Horizontal wooden peg rail | lookup strip | result stub.
 NOT vertical ladder, Sounding Lead rings, Tessera, or telemetry. */

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

.rp-stage { padding-bottom: var(--a106-space-6); }

.rp-mast {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-end;
 justify-content: space-between;
 gap: 16px;
 padding: clamp(28px, 4vw, 48px) 0 20px;
}
.rp-kicker {
 margin: 0 0 8px;
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--a106-clay);
}
.rp-mast h1 {
 margin: 0 0 8px;
 font-family: var(--a106-font-display);
 font-size: clamp(1.9rem, 4vw, 2.8rem);
 font-weight: 700;
 color: var(--a106-ink);
}
.rp-mast-copy p {
 margin: 0;
 max-width: 44ch;
 color: var(--a106-mute);
}
.rp-gauge {
 min-width: 108px;
 padding: 14px 16px;
 text-align: center;
 background: var(--a106-kraft);
 border: 3px solid var(--a106-soil);
 box-shadow: var(--a106-hard);
}
.rp-gauge strong {
 display: block;
 font-family: var(--a106-font-display);
 font-size: 1.8rem;
 color: var(--a106-drip-deep);
 line-height: 1;
}
.rp-gauge span {
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--a106-mute);
}
.rp-gauge.is-found {
 background: var(--a106-sprout);
}
.rp-gauge.is-found strong,
.rp-gauge.is-found span { color: var(--a106-sprout-ink); }
.rp-gauge.is-miss {
 background: var(--a106-bloom);
}
.rp-gauge.is-miss strong,
.rp-gauge.is-miss span { color: var(--a106-on-bloom); }

.rp-body {
 display: grid;
 gap: 22px;
 max-width: 820px;
}

/* Lookup strip */
.rp-strip {
 padding: 20px 18px;
 background:
 linear-gradient(180deg, rgba(232, 212, 168, 0.55), transparent 40%),
 var(--a106-surface);
 border: 3px solid var(--a106-soil);
 border-left: 10px solid var(--a106-drip);
 box-shadow: var(--a106-hard);
}
.rp-strip-stamp {
 margin: 0 0 14px;
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--a106-drip-deep);
}
.rp-fields {
 display: grid;
 gap: 14px;
 grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
 .rp-fields { grid-template-columns: 1fr; }
}
.rp-field {
 display: grid;
 gap: 6px;
 padding: 10px 12px;
 background: var(--a106-field);
 border: 2px solid var(--a106-border);
 transition: border-color 0.2s var(--a106-ease), box-shadow 0.2s var(--a106-ease);
}
.rp-field span {
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--a106-mute);
}
.rp-field input {
 width: 100%;
 border: 0;
 background: transparent;
 padding: 4px 0;
 font-weight: 600;
 color: var(--a106-ink);
}
.rp-field.is-focused {
 border-color: var(--a106-drip);
 box-shadow: 0 0 0 3px rgba(10, 126, 164, 0.2);
}
.rp-field.is-filled {
 border-color: var(--a106-clay);
 background: #fff;
}
.rp-strip-foot { margin-top: 16px; }
.rp-another {
 margin: 12px 0 0;
 font-size: 0.9rem;
}
.rp-another a { font-weight: 700; }

/* Horizontal peg rail */
.rp-rail {
 position: relative;
 padding: 18px 16px 22px;
 background:
 repeating-linear-gradient(
 90deg,
 #c4a574 0,
 #d4b888 8px,
 #b8955e 16px,
 #c9aa78 24px
 );
 border: 3px solid var(--a106-soil);
 box-shadow: var(--a106-hard);
 --rp-step: 0;
}
.rp-rail-head {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 16px;
 padding: 8px 10px;
 background: rgba(42, 33, 24, 0.88);
 color: var(--a106-on-soil);
}
.rp-rail-head h2 {
 margin: 0;
 font-family: var(--a106-font-display);
 font-size: 1.15rem;
 font-weight: 700;
}
.rp-rail-state {
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--a106-sprout);
}
.rp-board {
 position: relative;
 height: 14px;
 margin: 0 8px 8px;
}
.rp-grain {
 display: block;
 height: 100%;
 border-radius: 999px;
 background: rgba(42, 33, 24, 0.55);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.rp-wire {
 position: absolute;
 left: 0;
 top: 50%;
 height: 4px;
 width: var(--rp-fill, 0%);
 max-width: 100%;
 transform: translateY(-50%);
 background: linear-gradient(90deg, var(--a106-clay), var(--a106-drip), var(--a106-sprout));
 border-radius: 999px;
 transition: width 0.7s var(--a106-ease);
}
.rp-rail.is-idle .rp-wire { width: 0; }
.rp-rail.is-miss .rp-wire {
 width: 100%;
 background: var(--a106-bloom);
 opacity: 0.45;
}

.rp-pegs {
 list-style: none;
 margin: 0;
 padding: 8px 4px 0;
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 10px;
}
@media (max-width: 640px) {
 .rp-pegs {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 14px;
 }
 /* Linear wire misleads when pegs wrap 2x2 */
 .rp-board,
 .rp-wire { display: none; }

 .rp-btn--trace,
 .rp-btn--primary {
 width: 100%;
 min-width: 0;
 }
 .rp-strip-foot,
 .rp-stub-actions {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 }
}

.rp-peg {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 8px;
 opacity: 0.55;
 transform: translateY(8px);
 transition: opacity 0.35s var(--a106-ease), transform 0.35s var(--a106-ease);
}
.rp-rail.is-settled .rp-peg {
 opacity: 1;
 transform: none;
}
.rp-rail.is-settled .rp-peg:nth-child(1) { transition-delay: 0.05s; }
.rp-rail.is-settled .rp-peg:nth-child(2) { transition-delay: 0.12s; }
.rp-rail.is-settled .rp-peg:nth-child(3) { transition-delay: 0.19s; }
.rp-rail.is-settled .rp-peg:nth-child(4) { transition-delay: 0.26s; }

.rp-pin {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 44px;
}
.rp-pin-head {
 display: grid;
 place-items: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.04em;
 border: 3px solid var(--a106-soil);
 background: var(--a106-field);
 color: var(--a106-soil);
 box-shadow: 2px 2px 0 var(--a106-soil);
}
.rp-pin-shaft {
 width: 6px;
 height: 22px;
 margin-top: -2px;
 background: linear-gradient(180deg, #8a6a3a, #5c4524);
 border: 1px solid var(--a106-soil);
 border-top: 0;
}

.rp-peg--clay.is-filled .rp-pin-head,
.rp-peg--clay.is-done .rp-pin-head {
 background: var(--a106-clay);
 color: var(--a106-on-clay);
}
.rp-peg--drip.is-filled .rp-pin-head,
.rp-peg--drip.is-done .rp-pin-head {
 background: var(--a106-drip);
 color: var(--a106-on-drip);
}
.rp-peg--sprout.is-filled .rp-pin-head,
.rp-peg--sprout.is-done .rp-pin-head {
 background: var(--a106-sprout);
 color: var(--a106-sprout-ink);
}
.rp-peg--bloom.is-filled .rp-pin-head,
.rp-peg--bloom.is-done .rp-pin-head {
 background: var(--a106-bloom);
 color: var(--a106-on-bloom);
}
.rp-peg.is-live .rp-pin-head {
 animation: rp-pin-pulse 1.4s ease-in-out infinite;
}
.rp-peg.is-muted {
 opacity: 0.4;
 filter: grayscale(0.4);
}
.rp-peg-copy strong {
 display: block;
 font-size: 0.88rem;
 font-weight: 800;
 color: #1A1510;
}
.rp-peg-copy small {
 display: block;
 font-size: 0.72rem;
 color: rgba(26, 21, 16, 0.92);
}

@keyframes rp-pin-pulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
 .rp-peg.is-live .rp-pin-head { animation: none; }
 .rp-wire { transition: none; }
 .rp-peg { transition: none; transform: none; opacity: 1; }
}

/* Result stub */
.rp-stub {
 padding: 0;
 background: var(--a106-kraft);
 border: 3px solid var(--a106-soil);
 box-shadow: var(--a106-hard);
 opacity: 0;
 transform: translateY(10px);
 transition: opacity 0.4s var(--a106-ease), transform 0.4s var(--a106-ease);
}
.rp-stub.is-live {
 opacity: 1;
 transform: none;
}
.rp-stub-head {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 padding: 12px 16px;
 background: var(--a106-drip);
 color: var(--a106-on-drip);
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.rp-stub-status {
 background: var(--a106-sprout);
 color: var(--a106-sprout-ink);
 padding: 2px 8px;
}
.rp-stub-id {
 margin: 16px 16px 8px;
 font-family: var(--a106-font-display);
 font-size: 1.45rem;
 font-weight: 700;
 color: var(--a106-ink);
}
.rp-stub-meta {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
 margin: 0 16px 16px;
 padding: 0;
}
@media (max-width: 520px) {
 .rp-stub-meta { grid-template-columns: 1fr; }
}
.rp-stub-meta div {
 padding: 10px;
 background: rgba(238, 246, 241, 0.7);
 border: 2px solid var(--a106-border);
}
.rp-stub-meta dt {
 margin: 0 0 4px;
 font-size: 0.68rem;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--a106-mute);
}
.rp-stub-meta dd {
 margin: 0;
 font-weight: 800;
 color: var(--a106-ink);
}
.rp-stub-actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 14px;
 padding: 0 16px 18px;
}

.rp-alert {
 padding: 18px;
 border: 3px solid var(--a106-soil);
 background: var(--a106-surface);
 box-shadow: var(--a106-hard-sm);
}
.rp-alert strong {
 display: block;
 font-family: var(--a106-font-display);
 font-size: 1.2rem;
 margin-bottom: 6px;
}
.rp-alert p { margin: 0 0 10px; color: var(--a106-mute); }
.rp-alert.is-miss { border-left: 10px solid var(--a106-bloom); }
.rp-alert.is-idle { border-left: 10px solid var(--a106-drip); }

.rp-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border: 3px solid var(--a106-soil);
 font-weight: 800;
 text-decoration: none;
 box-shadow: var(--a106-hard-sm);
 transition: transform 0.15s var(--a106-ease), box-shadow 0.15s var(--a106-ease);
}
.rp-btn:hover {
 transform: translate(-1px, -1px);
 box-shadow: 4px 4px 0 var(--a106-soil);
}
.rp-btn--trace {
 background: var(--a106-drip);
 color: var(--a106-on-drip);
}
.rp-btn--trace i {
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: var(--a106-sprout);
}
.rp-btn--trace.is-pressing {
 transform: translate(2px, 2px);
 box-shadow: none;
}
.rp-btn--primary {
 background: var(--a106-clay);
 color: var(--a106-on-clay);
}
.rp-text-exit {
 font-weight: 700;
 color: var(--a106-drip-deep);
}

.rp-trail {
 display: flex;
 flex-wrap: wrap;
 gap: 12px 18px;
 padding-top: 4px;
 border-top: 2px dashed var(--a106-border);
}
.rp-trail a {
 font-size: 0.88rem;
 font-weight: 700;
 text-decoration: none;
 color: var(--a106-mute);
}
.rp-trail a:hover { color: var(--a106-clay); }