/* Port of concepts/v2/parts/s2d-ba.html (style block, unchanged). */
/* Shared grammar of the category scenes: الوضع الحالي → بعد المعالجة. One skeleton, one eye path, so the visitor learns it once.
   A scene is <section class="band … pin ba"> and fills these slots: [data-ba="say"] [data-ba="sw"] [data-ba="rows"] [data-ba="line"] [data-ba="end"]. */
.ba .ba-hd{min-width:0}
.ba .ba-say{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:18px 0 0;font-size:clamp(1rem,1.35vw,1.15rem);font-weight:300;line-height:1.7;max-width:60ch;color:#c3c8ea}
.mist.ba .ba-say,.cream.ba .ba-say{color:var(--ink-mute)}
.ba .ba-say q{quotes:"«" "»";min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the two-state switch: the only control every scene shares */
.ba .ba-sw{display:inline-grid;grid-template-columns:auto minmax(48px,120px) auto;align-items:center;gap:12px;margin:0}
.ba .ba-sw button{font:600 .95rem/1.3 var(--f-ar);letter-spacing:0;background:transparent;color:inherit;border:1px solid var(--line-d);border-radius:999px;padding:8px 16px;min-height:40px;cursor:pointer;opacity:.7;transition:opacity .25s,background .25s,color .25s,border-color .25s}
.mist.ba .ba-sw button,.cream.ba .ba-sw button{border-color:var(--line-l)}
.ba .ba-sw button[aria-pressed="true"]{opacity:1}
.ba .ba-sw button[data-ba-to="0"][aria-pressed="true"]{border-color:var(--alert);color:var(--alert)}
.ba .ba-sw button[data-ba-to="1"][aria-pressed="true"]{background:var(--sky);border-color:var(--sky);color:var(--night)}
.mist.ba .ba-sw button[data-ba-to="1"][aria-pressed="true"],.cream.ba .ba-sw button[data-ba-to="1"][aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.ba .ba-sw i{display:block;height:2px;background:var(--line-d);position:relative;overflow:hidden}
.mist.ba .ba-sw i,.cream.ba .ba-sw i{background:var(--line-l)}
.ba .ba-sw i::after{content:"";position:absolute;inset:0;background:var(--sky);transform-origin:right center;transform:scaleX(var(--t,0))}
.mist.ba .ba-sw i::after,.cream.ba .ba-sw i::after{background:var(--indigo)}
/* the visitor's three rows, each with one state that flips */
.ba .ba-rows{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-d)}
.mist.ba .ba-rows,.cream.ba .ba-rows{border-color:var(--line-l)}
.ba .ba-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:12px 0;border-bottom:1px solid var(--line-d);min-width:0}
.mist.ba .ba-rows li,.cream.ba .ba-rows li{border-color:var(--line-l)}
.ba .ba-rl{min-width:0;font-size:1.02rem;font-weight:400;line-height:1.5}
.ba .ba-rs{font-size:.9rem;font-weight:600;line-height:1.4;padding:4px 12px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;transition:color .35s,background .35s}
.ba .ba-rs[data-tone="bad"]{color:var(--alert)}
.ba .ba-rs[data-tone="mid"]{color:#f3c37d}
.mist.ba .ba-rs[data-tone="mid"],.cream.ba .ba-rs[data-tone="mid"]{color:#9a6418}
.ba .ba-rs[data-tone="good"]{color:var(--ok)}
.ba .ba-rs[data-tone="hold"]{color:var(--sky)}
.mist.ba .ba-rs[data-tone="hold"],.cream.ba .ba-rs[data-tone="hold"]{color:var(--indigo)}
.ba .ba-rk{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:var(--fs-tag);opacity:.8}
/* the one line that changes with the state: the pain today, the win after */
.ba .ba-line{margin:0;font-size:clamp(1.1rem,1.9vw,1.55rem);font-weight:300;line-height:1.6;max-width:34ch;color:inherit;text-wrap:balance}
.ba[data-state="after"] .ba-line{color:var(--sky)}
.mist.ba[data-state="after"] .ba-line,.cream.ba[data-state="after"] .ba-line{color:var(--indigo)}
.ba .ba-end{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0}
/* phones: the stage un-pins, the switch drives the state (the engine plays it once when the visual scrolls in) */
@media (max-width:700px){
  .band.ba.pin{height:auto!important}
  .band.ba.pin>.stage{position:relative;height:auto;display:block;overflow:visible;padding-block:88px 72px}
  .band.ba [data-at]{opacity:1;transform:none}
  .ba .ba-sw{grid-template-columns:auto minmax(24px,1fr) auto;width:100%;max-width:340px}
  .ba .ba-rows li{grid-template-columns:minmax(0,1fr)}
  .ba .ba-rs{justify-self:start;white-space:normal}
}