/* Behaviour tab (BAB-0053). Builds on ../style.css (cards, buttons, header), ../face/face.css (steps bar, bezel, selects) and ../../shared/ui/alive.css (the green hue,
   neon hovers). Only what this page adds is here. Green is the hue: html[data-hue="behave"]. */
:root { --ok: #17703C; --ok-bg: #E4F4EA; --bad-bg: #FBE6E6; --bad-line: #E7B3B3; --g: var(--hue, #18E36B); --gi: var(--hue-ink, #0D7A3C); }
.ico { color: var(--accent); }
.btn .ico { flex: none; }
.btn.main .ico { color: #fff; }
a.btn, .step a { text-decoration: none; }
.chip.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); font-weight: 600; }
.chip.good { background: var(--ok-bg); border-color: #A9D9B8; color: var(--ok); font-weight: 600; }
.help.bad, .bad { color: var(--bad); font-weight: 600; }
.help.center { text-align: center; }
.soft { color: var(--ink2); font-weight: 400; }
.card h2 small { font-size: 14px; font-weight: 400; color: var(--ink2); }
.ftabs { flex-wrap: wrap; }
.ftabs .step { min-height: 44px; }
.step a { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 -14px; padding: 0 14px; color: inherit; border-radius: var(--r-btn); }

/* this page scrolls like a document; the other tabs lock to one screen */
body.behavepage { height: auto; overflow: visible; }
.bgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; min-height: 0; }
.bgrid > * { min-width: 0; }
#p-people { grid-column: 1 / -1; }
.bleft, .bright { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) and (min-height: 760px) { .bright { align-self: stretch; } .bright > .bstage { position: sticky; top: 8px; z-index: 5; } .bview { height: clamp(200px, 31vh, 360px); } }

/* the personalities */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.person { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; min-height: 0; padding: 12px 14px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; cursor: pointer; font-weight: 400; overflow: hidden; }
.person::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--g), transparent 80%); opacity: 0.5; transition: opacity .2s, height .2s; }
.person:hover::after, .person[aria-pressed="true"]::after { opacity: 1; height: 5px; }
.pname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.pname em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--gi); background: rgba(var(--hue-rgb), 0.16); border-radius: 8px; padding: 0 8px; }
.pabout { font-size: 14px; line-height: 1.35; color: var(--ink2); max-height: 4.05em; overflow: hidden; }
@media (max-width: 1500px) { .pabout { max-height: 2.7em; } }
.pmeta { font-size: 14px; color: var(--ink); font-weight: 600; text-transform: none; }
.pbars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pbars i { position: relative; display: block; height: 22px; border-radius: 6px; background: #E3E8EE; overflow: hidden; font-style: normal; }
.pbars i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: linear-gradient(90deg, rgba(var(--hue-rgb), 0.55), var(--g)); box-shadow: 0 0 10px rgba(var(--hue-rgb), 0.7); transition: width .4s var(--ease); }
.pbars b { position: relative; display: block; font-size: 14px; line-height: 22px; padding-left: 7px; color: var(--night); }

/* the character card */
.dialhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dialhead h2 { margin: 0; }
.tlact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.metarow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.metarow input[type="text"], .inputs input[type="text"], .inputs input[type="number"], .addrow select { width: 100%; min-height: 44px; padding: 0 10px; border: 2px solid var(--line); border-radius: var(--r-btn); background: var(--card); font-size: 14px; }
.dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 16px; margin-top: 8px; }
.dial label { display: block; font-size: 14px; line-height: 1.3; }
.dial label b { font-size: 16px; }
.dialrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar val" "ends ends"; align-items: center; gap: 0 10px; }
.dialrow input { grid-area: bar; width: 100%; min-height: 44px; }
.dialrow output { grid-area: val; min-width: 4ch; text-align: right; font-weight: 800; color: var(--gi); }
.dialrow .ends { grid-area: ends; display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--ink2); }
.problems { margin: 10px 0 0; }
.problems p { margin: 0 0 4px; }

/* rows */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: none; }
.row { position: relative; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--g); border-radius: 12px; padding: 8px 10px 8px 8px; transition: box-shadow .25s var(--ease), border-color .25s, background-color .4s; }
.row:hover { border-color: rgba(var(--hue-rgb), 0.6); box-shadow: 0 10px 22px -16px rgba(var(--hue-rgb), 0.9); }
.row.fired { background: rgba(var(--hue-rgb), 0.14); box-shadow: 0 0 0 2px var(--g), 0 0 26px -4px rgba(var(--hue-rgb), 0.9); }
.row.greyed { border-left-color: #B9C0CA; border-style: dashed; border-left-style: solid; background: #F5F7F9; }
.row.greyed .sent { color: #4E5866; }
.row.partial { border-left-color: #E6B24A; }
.row.isoff { opacity: 0.7; }
.row.over { box-shadow: 0 -4px 0 0 var(--g); }
.row.dragging { opacity: 0.45; }
.rowhead { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: start; gap: 6px 8px; }
.grip { width: 44px; min-height: 44px; display: grid; place-items: center; background: none; border: 0; color: #7A8492; cursor: grab; border-radius: 8px; padding: 0; }
.grip:hover { color: var(--gi); background: rgba(var(--hue-rgb), 0.12); }
.grip svg { width: 16px; height: 24px; }
.rn { align-self: start; margin-top: 8px; min-width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--night); color: var(--g); font-weight: 800; font-size: 14px; }
.sent { margin: 0; padding-top: 8px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.sent b { color: var(--night); font-weight: 700; background: linear-gradient(transparent 62%, rgba(var(--hue-rgb), 0.35) 62%); padding: 0 2px; }
.sent .pause { color: var(--ink2); font-style: italic; }
.sent .sep { margin-right: 3px; }
.rowtools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rowtools .btn { padding: 4px 10px; }
.btn.sq { min-width: 44px; padding: 4px; }
.rowmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 2px 0 2px 44px; font-size: 14px; }
.tag { display: inline-block; padding: 1px 9px; border-radius: 8px; background: #EDF0F4; color: var(--ink); font-size: 14px; }
.tag.p1, .tag.p2, .tag.p3 { background: #E8EEF3; }
.tag.p4, .tag.p5 { background: rgba(var(--hue-rgb), 0.18); }
.tag.p6, .tag.p7 { background: rgba(255, 106, 0, 0.18); }
.tag.p8, .tag.p9 { background: rgba(255, 45, 146, 0.18); }
.tag.warn { background: var(--need-bg); color: var(--need); font-weight: 700; }
.rid { font-size: 14px; color: var(--ink2); }
.why { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 8px; font-size: 14px; font-weight: 600; max-width: 100%; }
.why .ico { width: 18px; height: 18px; }
.why.grey { background: #E9ECF0; color: #3C4654; }
.why.part { background: var(--need-bg); color: var(--need); }
.roweditor { margin: 8px 0 2px 4px; padding: 10px 12px; background: #F6F9F7; border: 1px solid #D5E7DC; border-radius: 10px; display: grid; gap: 10px; }
.ed { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.lbl { font-weight: 800; font-size: 14px; padding-top: 12px; color: var(--gi); text-transform: uppercase; letter-spacing: 0.04em; }
.stack { display: grid; gap: 6px; min-width: 0; }
.line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.line > .inputs { flex: 1; }
.inputs { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; min-width: 0; }
.inputs select { width: auto; max-width: 100%; min-width: 120px; }
.inputs input[type="text"] { min-width: 180px; }
.inputs input[type="number"] { width: 100px; }
.inputs input[type="color"] { width: 56px; height: 44px; padding: 2px; border: 2px solid var(--line); border-radius: var(--r-btn); background: #fff; }
.inl { display: flex; flex-direction: column; font-size: 14px; color: var(--ink2); gap: 2px; }
.inl span { font-weight: 600; }
.stepn { align-self: center; min-width: 24px; text-align: center; font-weight: 800; color: var(--gi); }
.mini { display: flex; gap: 4px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; }
.check input { width: 22px; height: 22px; }
.check small { font-size: 14px; font-weight: 400; color: var(--ink2); }
.check.small { min-height: 44px; font-weight: 400; }
.addrow { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.addrow .row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* the live pane */
.bstage { padding: 14px 16px; gap: 10px; overflow: visible; }
.bstage h2 { margin-bottom: 0; }
.bview { flex: none; position: relative; height: clamp(280px, 46vh, 460px); min-height: 0; border-radius: 12px; overflow: hidden; }
.hud { position: absolute; left: 10px; top: 10px; right: 10px; z-index: 3; pointer-events: none; }
.now { display: inline-block; max-width: 100%; margin: 0; padding: 5px 12px; background: rgba(20, 26, 33, 0.82); color: #fff; border-radius: 10px; font-size: 14px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(var(--hue-rgb), 0.55), 0 8px 20px -10px rgba(var(--hue-rgb), 0.9); }
.now b { color: var(--g); }
.lamp { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; box-shadow: 0 0 10px currentColor; border: 1px solid #fff; }
.pip { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: block; padding: 0; border-radius: 16px; border: 0; cursor: pointer; background: linear-gradient(145deg, #3A444F, #11161B); box-shadow: 0 0 0 1px #000, 0 12px 26px -12px rgba(0, 0, 0, 0.85), 0 0 0 4px var(--lamp, transparent), 0 0 24px -4px rgba(var(--hue-rgb), 0.6); min-width: 44px; min-height: 44px; }
.pip:hover { transform: translateY(-2px); }
.pip.lit { animation: lampbeat 1.2s ease-in-out infinite; }
@keyframes lampbeat { 50% { filter: brightness(1.5); } }
.bezelmini { display: block; line-height: 0; }
.bezelmini canvas { position: static; inset: auto; width: clamp(104px, 13vw, 156px); height: auto; aspect-ratio: 4 / 3; background: #000; border-radius: 6px; display: block; }
.pipcap { font-size: 14px; color: #D8E2EC; font-weight: 600; line-height: 1.1; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; background: rgba(237, 240, 244, 0.9); font-weight: 600; z-index: 6; }
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.transport .btn.main { flex: 1 1 220px; }
.seg3 { display: inline-flex; gap: 4px; }
.aloneview { display: grid; gap: 4px; }
.aloneview .bar { height: 10px; border-radius: 6px; background: #E3E8EE; overflow: hidden; }
.aloneview .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(var(--hue-rgb), 0.5), var(--g)); box-shadow: 0 0 12px var(--g); transition: width .12s linear; }
.aloneview p { margin: 0; font-size: 14px; font-weight: 600; }
#status { margin: 0; }

/* the trigger buttons */
.fire { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 6px; }
.fb { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px; text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 600; }
.fb .fi { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--hue-rgb), 0.16); }
.fb .ft { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.25; }
.fb small { font-size: 14px; font-weight: 400; color: var(--ink2); }
.fb small.lack { color: var(--need); font-weight: 600; }
.fb.lacks { background: #F7F8FA; border-style: dashed; }
.fb.lacks .fi { background: #E9ECF0; }

/* the timeline */
.summary { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); border: 1px solid #A9D9B8; font-size: 14px; }
.summary h3 { margin: 0 0 4px; }
.summary p { margin: 0 0 6px; }
.lanes { display: grid; gap: 4px; }
.lane { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 14px; }
.lane > div { position: relative; height: 22px; border-radius: 6px; background: #fff; border: 1px solid #C9DDD0; }
.lane i { position: absolute; top: 3px; bottom: 3px; width: 6px; margin-left: -3px; border-radius: 3px; background: var(--g); box-shadow: 0 0 8px var(--g); }
.tline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-height: 420px; overflow: auto; }
.tline li { display: grid; grid-template-columns: 52px 78px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 8px; border-radius: 10px; background: #F6F8FA; font-size: 14px; line-height: 1.35; border-left: 4px solid #C3CAD3; }
.tline time { font-variant-numeric: tabular-nums; color: var(--ink2); font-weight: 600; }
.tline .kd { font-weight: 800; }
.tline small { display: block; color: var(--ink2); font-size: 14px; }
.tline code { font-weight: 700; }
.tline .k-fired { background: var(--ok-bg); border-left-color: var(--g); }
.tline .k-interrupt { background: #FFF1E3; border-left-color: #FF6A00; }
.tline .k-blocked, .tline .k-skipped { background: var(--need-bg); border-left-color: #E6B24A; }
.tline .k-event { background: #fff; border-left-color: #6C7686; }
.tline .k-busy, .tline .k-cooldown, .tline .k-condition { opacity: 0.8; }

.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 10px; }
.vol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.scrub { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; font-size: 14px; font-weight: 600; }
.scrub input { flex: 1; min-width: 80px; }
.tplrow .btn { flex: 1 1 100px; }

/* medium: one column, the live pane first */
@media (max-width: 1100px) { .ed { grid-template-columns: minmax(0, 1fr); } .lbl { padding-top: 0; } }
@media (max-width: 900px) {
  body.behavepage { display: flex; flex-direction: column; }
  .bgrid { display: flex; flex-direction: column; gap: 10px; }
  #p-people { order: 2; } .bright { order: 1; } .bleft { order: 3; }
  .bright > .bstage { position: relative; }
  .ftabs { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); order: 3; }
  .ftabs .step { flex-wrap: wrap; gap: 0 6px; padding: 2px 8px; justify-content: center; }
  .ftabs .step em { flex-basis: 100%; text-align: center; border: 0; padding: 0; line-height: 1.1; }
  .behavepage > .top nav { order: 3; flex: 1 1 100%; }
  .bview { height: clamp(260px, 44vh, 420px); }
}
@media (max-width: 600px) {
  .rowhead { grid-template-columns: auto minmax(0, 1fr); }
  .rowhead .grip { grid-row: 1 / span 2; }
  .rn { display: none; }
  .rowtools { grid-column: 2; justify-content: flex-start; }
  .rowmeta { padding-left: 0; }
  .tline li { grid-template-columns: 48px minmax(0, 1fr); }
  .tline .kd { display: none; }
  .people { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .person { min-height: 0; }
  .fire { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .inputs > select { min-width: 0; flex: 1 1 130px; }
  .inputs > input[type="text"] { min-width: 0; flex: 1 1 150px; }
}
@media (prefers-reduced-motion: reduce) { .pip.lit { animation: none; } }
.pipin { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 8px 6px; }
.inputs input[type="number"], .inputs input[type="text"], .metarow input[type="text"] { color: var(--ink); }
.bright > .bstage { background: #fff; }
@media (max-width: 1500px) { .rowhead { grid-template-columns: auto auto minmax(0, 1fr); } .rowtools { grid-column: 3; justify-content: flex-start; } .rowmeta { padding-left: 56px; } }
@media (max-width: 600px) { .rowhead { grid-template-columns: auto minmax(0, 1fr); } .rowtools { grid-column: 2; } .rowmeta { padding-left: 0; } }
@media (min-width: 901px) and (max-width: 1100px) { .behavepage .brand span { display: none; } }
/* phone: one flow, in the order a person uses it: the bot, what to press, the personalities, the dials, the rows, what it did, the files */
@media (max-width: 900px) {
  .bleft, .bright { display: contents; }
  .bstage { order: 1; } #p-fire { order: 2; } #p-people { order: 3; } #p-dials { order: 4; } #p-rows { order: 5; } #p-time { order: 6; } #p-files { order: 7; }
  .fire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb { min-height: 60px; padding: 6px 8px; gap: 8px; }
}
@media (max-width: 600px) { .behavepage .ftabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .behavepage .ftabs .step { padding: 2px 4px; } }
@media (max-width: 600px) {
  .roweditor { padding: 8px; margin-left: 0; }
  .line { flex-wrap: wrap; }
  .line > .inputs { flex: 1 1 100%; }
  .mini { margin-left: auto; }
  .stepn { align-self: flex-start; padding-top: 10px; }
  .line:has(.stepn) { display: grid; grid-template-columns: 24px minmax(0, 1fr); }
  .line:has(.stepn) .mini { grid-column: 2; justify-content: flex-end; }
  .inputs > select, .inputs > .inl { flex: 1 1 140px; min-width: 0; }
  .inputs input[type="number"] { width: 100%; }
}