/* Hallmark · genre: playful · macrostructure: Bento Grid · theme: welly (brand-preserved)
 * Shared welly result bento — scoped under .rbento (safe alongside styles.css).
 * Used by result.html (demo), debug.html, and app.js finish() (in-app, all products).
 * Beauty pass 2026-06-02: share-card verdict hero, glowing zone meter, pill bars, gradient OG.
 * pre-emit critique: P5 H5 E5 S5 R5 V5 */

.rbento {
  --r-tile: 22px;
  --sh-tile: 0 1px 2px rgba(40,45,70,.04), 0 12px 30px -18px rgba(40,45,70,.24);
  --sh-tile-h: 0 8px 16px -8px rgba(40,45,70,.12), 0 28px 54px -22px rgba(40,45,70,.32);
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: minmax(96px, auto);
  grid-auto-flow: row dense; gap: 16px; font-family: var(--font); color: var(--ink);
}
.rbento .cell {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-tile);
  padding: var(--s4); min-width: 0; box-shadow: var(--sh-tile);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rbento .cell--lift:hover { transform: translateY(-4px); box-shadow: var(--sh-tile-h); }
.rbento .c-2x2 { grid-column: span 2; grid-row: span 2; }
.rbento .c-2x1 { grid-column: span 2; }
.rbento .c-1x2 { grid-column: span 1; grid-row: span 2; }
.rbento .c-1x1 { grid-column: span 1; }
.rbento .c-full { grid-column: 1 / -1; }
.rbento .cap { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 var(--s3); }
.rbento h1, .rbento h2, .rbento h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }

/* ── verdict (hero — share-card energy) ── */
.rbento .verdict {
  overflow: hidden; display: flex; flex-direction: column; gap: 2px; color: #fff; border: 0; padding: var(--s5);
  background:
    radial-gradient(130% 90% at 88% 4%, color-mix(in srgb, var(--zc) 52%, #fff) 0%, transparent 46%),
    linear-gradient(152deg, var(--zc), color-mix(in srgb, var(--zc) 60%, #171a35) 120%);
  box-shadow: 0 22px 48px -18px color-mix(in srgb, var(--zc) 62%, transparent);
}
.rbento .verdict::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.10); top: -130px; left: -56px; }
.rbento .vchip {
  position: relative; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-weight: 800; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.2); border-radius: var(--r-pill); padding: 6px 13px; backdrop-filter: blur(5px);
}
.rbento .vchip .d { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.rbento .vname {
  position: relative; font-family: var(--font-display); font-size: clamp(2.1rem, 4.6vw, 3rem);
  line-height: 1.0; letter-spacing: -.02em; margin: var(--s4) 0 8px; color: #fff; max-width: 12ch;
}
.rbento .vtag { position: relative; font-size: 1.06rem; font-style: italic; font-weight: 600; color: rgba(255,255,255,.92); margin: 0; }
.rbento .vidl { position: relative; font-size: .96rem; line-height: 1.5; color: rgba(255,255,255,.86); margin: var(--s4) 0 0; max-width: 30ch; }
.rbento .vtier { position: relative; align-self: flex-start; margin-top: auto; padding-top: var(--s4); font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.8); }
.rbento .vart { position: absolute; right: -6px; bottom: -6px; width: 156px; height: 156px; pointer-events: none; }
.rbento .vart img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(0,0,0,.3)); }
.rbento .vart .ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 54px; color: rgba(255,255,255,.6); }
/* neutral hero (mind / validated) — gentle mascot, kept clear of the copy */
.rbento .verdict--soft .vidl { max-width: 24ch; }
.rbento .verdict--soft .vtier { max-width: 18ch; }
.rbento .vart--soft { width: 138px; height: 138px; right: -2px; bottom: -2px; }
.rbento .vart--soft img { filter: drop-shadow(0 12px 22px rgba(0,0,0,.22)); }

/* ── finding ── */
.rbento .finding {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--zc) 10%, #fff), #fff 82%);
  border-color: color-mix(in srgb, var(--zc) 22%, var(--line));
}
.rbento .finding .root { font-size: 1.34rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.rbento .finding .root b { color: color-mix(in srgb, var(--zc) 70%, #000); }
.rbento .finding .means { font-size: .96rem; color: var(--ink-soft); line-height: 1.5; }
.rbento .finding .sub2 { font-size: .82rem; color: var(--ink-dim); }

/* ── zone meter ── */
.rbento .meter { display: flex; flex-direction: column; justify-content: center; }
.rbento .meter__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.rbento .meter__zone { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--zc); }
.rbento .meter__grad { font-size: .8rem; color: var(--ink-dim); font-weight: 600; }
.rbento .seg { display: flex; gap: 6px; }
.rbento .seg span { height: 12px; flex: 1; border-radius: var(--r-pill); background: var(--bg-alt); }
.rbento .seg .on-green  { background: var(--zone-green);  box-shadow: 0 5px 13px -4px color-mix(in srgb, var(--zone-green) 65%, transparent); }
.rbento .seg .on-yellow { background: var(--zone-yellow); box-shadow: 0 5px 13px -4px color-mix(in srgb, var(--zone-yellow) 65%, transparent); }
.rbento .seg .on-red    { background: var(--zone-red);    box-shadow: 0 5px 13px -4px color-mix(in srgb, var(--zone-red) 65%, transparent); }
.rbento .meter__scale { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ink-dim); margin-top: 8px; }

/* ── first step ── */
.rbento .first {
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--zc) 17%, #fff), color-mix(in srgb, var(--zc) 6%, #fff));
  border-color: color-mix(in srgb, var(--zc) 26%, var(--line));
}
.rbento .first .cap { color: color-mix(in srgb, var(--zc) 55%, var(--ink-dim)); }
.rbento .first p { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.34; color: var(--ink); }
.rbento .first .num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--zc); color: #fff; font-size: .82rem; font-weight: 800; margin-right: 9px; vertical-align: -3px;
  box-shadow: 0 7px 15px -4px color-mix(in srgb, var(--zc) 70%, transparent);
}

/* ── breakdown bars ── */
.rbento .sub { margin: 0 0 13px; }
.rbento .sub:last-child { margin-bottom: 0; }
.rbento .sub__top { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; margin-bottom: 6px; color: var(--ink); }
.rbento .sub__top b { font-weight: 700; }
.rbento .sub__z { font-weight: 800; font-size: .8rem; }
.rbento .sub__track { height: 10px; background: var(--bg-alt); border-radius: var(--r-pill); overflow: hidden; }
.rbento .sub__fill { display: block; height: 100%; border-radius: var(--r-pill); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.rbento .sub.is-root { padding: 11px 13px; margin: 0 -13px 13px; border-radius: 14px; background: color-mix(in srgb, var(--zc) 9%, transparent); }
.rbento .sub.is-root .sub__top b::after { content: " · корень"; color: var(--zc); font-weight: 800; font-size: .76rem; }
.rbento .ok-line { font-size: .86rem; color: var(--ink-soft); margin: 6px 0 0; }
.rbento .ok-line b { color: var(--zone-green); font-weight: 700; }

/* ── lists ── */
.rbento .rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.rbento .rlist li { display: flex; gap: 11px; font-size: .96rem; line-height: 1.4; color: var(--ink); }
.rbento .rlist .ic { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; margin-top: 1px; }
.rbento .good .ic { background: color-mix(in srgb, var(--zone-green) 16%, #fff); color: var(--zone-green); }
.rbento .todo .ic { background: color-mix(in srgb, var(--zc) 18%, #fff); color: color-mix(in srgb, var(--zc) 72%, #000); }

/* ── red flag (calm, never alarm) ── */
.rbento .rflag { display: flex; gap: 13px; align-items: flex-start; background: linear-gradient(150deg, #fdeeeb, #fff 92%); border-color: #f1c7c0; }
.rbento .rflag__i { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #f6d4cd; color: #c0392b; }
.rbento .rflag b { display: block; font-size: 1.02rem; color: #b23a2e; margin-bottom: 3px; }
.rbento .rflag p { margin: 0; font-size: .92rem; color: #7d4a43; line-height: 1.5; }

/* ── mind neutral subscale bars ── */
.rbento .mind__bar { margin: 0 0 15px; }
.rbento .mind__bar:last-child { margin-bottom: 0; }
.rbento .mind__top { display: flex; justify-content: space-between; font-size: .95rem; margin-bottom: 6px; color: var(--ink); }
.rbento .mind__top b { font-weight: 700; }
.rbento .mind__lvl { font-weight: 800; font-size: .84rem; }
.rbento .mind__track { height: 10px; background: var(--bg-alt); border-radius: var(--r-pill); overflow: hidden; }
.rbento .mind__fill { display: block; height: 100%; border-radius: var(--r-pill); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.rbento .mind__desc { font-size: .84rem; color: var(--ink-soft); margin: 6px 0 0; }

/* ── cross / next / share ── */
.rbento .cross p { margin: 0; font-size: .94rem; color: var(--ink-soft); line-height: 1.55; }
.rbento .nextrow { display: flex; gap: 11px; flex-wrap: wrap; }
.rbento .nmini { flex: 1 1 0; min-width: 96px; text-align: center; border: 1px solid var(--line); border-radius: 16px; padding: 13px 8px; text-decoration: none; color: var(--ink); background: var(--card); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.rbento .nmini:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); box-shadow: var(--sh-tile-h); }
.rbento .nmini:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rbento .nmini__d { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 8px; display: grid; place-items: center; }
.rbento .nmini__d img { width: 32px; height: 32px; object-fit: contain; }
.rbento .nmini strong { display: block; font-size: .92rem; }
.rbento .nmini span { font-size: .74rem; color: var(--ink-dim); }

.rbento .share { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: stretch; justify-content: space-between; }
.rbento .og {
  flex: 1 1 340px; min-width: 0; position: relative; overflow: hidden; border-radius: 18px; padding: var(--s5);
  min-height: 152px; display: flex; flex-direction: column; justify-content: center; color: #fff;
  background:
    radial-gradient(130% 100% at 86% 0%, color-mix(in srgb, var(--zc) 52%, #fff) 0%, transparent 50%),
    linear-gradient(140deg, var(--zc), color-mix(in srgb, var(--zc) 58%, #171a35) 122%);
}
.rbento .og::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.1); top: -86px; right: -42px; }
.rbento .og__brand { position: relative; font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.82); }
.rbento .og__name { position: relative; font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; letter-spacing: -.025em; margin: 5px 0 6px; color: #fff; }
.rbento .og__code { position: relative; font-size: .95rem; color: rgba(255,255,255,.9); font-weight: 700; letter-spacing: .12em; }
.rbento .og__art { position: absolute; right: 10px; bottom: -6px; width: 122px; height: 122px; }
.rbento .og__art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.26)); }
.rbento .og .ph { position: absolute; right: 18px; bottom: 14px; width: 74px; height: 74px; display: grid; place-items: center; font-size: 38px; color: rgba(255,255,255,.6); }
.rbento .share__cta { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; justify-content: center; }
.rbento .rbtn { font-family: inherit; font-weight: 700; font-size: .96rem; border-radius: var(--r-pill); padding: 13px 24px; cursor: pointer; border: 1px solid transparent; text-decoration: none; text-align: center; white-space: nowrap; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.rbento .rbtn--primary { background: var(--zc); color: #fff; box-shadow: 0 11px 24px -8px color-mix(in srgb, var(--zc) 70%, transparent); }
.rbento .rbtn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--zc) 76%, transparent); }
.rbento .rbtn--ghost { background: var(--paper); border-color: var(--line); color: var(--ink); }
.rbento .rbtn--ghost:hover { border-color: var(--ink-dim); }
.rbento .rbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rbento .rmuted { font-size: .72rem; color: var(--ink-dim); margin: var(--s3) 0 0; flex-basis: 100%; }

/* ── responsive ── */
@media (max-width: 760px) {
  .rbento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 13px; }
  .rbento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .rbento .vart { width: 132px; height: 132px; right: -4px; bottom: -4px; }
  .rbento .share { flex-direction: column; align-items: stretch; }
  .rbento .share__cta { flex-direction: row; }
  .rbento .share__cta .rbtn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .rbento * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }