/* The innovation pipeline's look (alaw-pipeline/app/globals.css): ALAW tokens sampled from
   the 2026 firm overview deck, a navy sidebar, a washed page, white cards, Montserrat labels. */
.alaw-playbooks {
  --navy: #1A2B4A; --navy-deep: #16243F; --navy-lift: #21385A;
  --accent: #386F94; --accent-ink: #2C5876; --steel: #5E89A6;
  --wash: #F7F9FA; --white: #fff;
  --ink: #2E343D; --muted: #6B7785; --hair: #D8DEE5;
  --ok-bg: #EDF6F0; --ok-tx: #1E6B45;
  --warn: #9b2c2c;
  --sidebar: 240px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--wash); color: var(--ink); font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
h1, h2, h3, h4 { font-family: Nunito, "Nunito Sans", sans-serif; font-weight: 700; color: var(--navy); }
a { color: var(--accent-ink); }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 14px; color: var(--ink); padding: 9px 11px; border: 1px solid var(--hair); border-radius: 4px; background: var(--white); line-height: 1.55; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56,111,148,.16); }
textarea { resize: vertical; width: 100%; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.plabel { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 10px; color: var(--accent-ink); letter-spacing: .12em; text-transform: uppercase; }
.slabel { font-family: Montserrat, "Nunito Sans", sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }

.btn { padding: 9px 18px; border-radius: 4px; font-size: 13px; font-weight: 500; letter-spacing: .03em; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--navy-lift); }
.btn.sec { background: transparent; border: 1px solid var(--steel); color: var(--navy); }
.btn.sec:hover { background: rgba(94,137,166,.14); }
.btn.ghost { background: transparent; border: 1px solid var(--hair); color: var(--muted); }
.btn.ghost:hover { border-color: var(--steel); color: var(--navy); }
.btn.ghost.danger:hover:not(:disabled) { border-color: var(--warn); color: var(--warn); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.wide { width: 100%; }
.btn.light { background: #fff; color: var(--navy); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.linkbtn { font-size: 12px; color: rgba(255,255,255,.55); text-decoration: underline; }

.tag { display: inline-block; padding: 4px 10px; border-radius: 2px; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
.tag.empty { background: var(--wash); color: var(--muted); border: 1px solid var(--hair); }
.tag.draft { background: rgba(56,111,148,.09); color: var(--accent-ink); }
.tag.in_review { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; letter-spacing: .06em; color: var(--accent-ink); border: 1px solid var(--accent); }
.tag.approved { background: var(--ok-bg); color: var(--ok-tx); }
.tag.agent { background: rgba(56,111,148,.09); color: var(--accent-ink); padding: 1px 6px; font-size: 10px; }
.card { background: var(--white); border: 1px solid var(--hair); border-radius: 4px; padding: 20px 24px; }

/* ---- sidebar ---- */
.rail { background: var(--navy); color: #fff; display: flex; flex-direction: column; padding: 24px 0; min-height: 0; overflow-y: auto; height: 100vh; position: sticky; top: 0; }
.brand { padding: 0 20px 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand img { width: 132px; height: auto; display: block; }
.brand .sub { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 12px; }
.navlabel { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38); padding: 22px 20px 8px; }
.wslist { display: flex; flex-direction: column; }
.wslist a, .navitem { display: block; width: 100%; text-align: left; padding: 9px 20px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55); border-left: 2px solid transparent; text-decoration: none; }
.wslist a:hover, .navitem:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.wslist a.on { background: rgba(94,137,166,.22); border-left-color: #8FB6CE; color: #fff; }
.wslist .n { font-weight: 600; }
.wslist .s { font-size: 11px; color: rgba(255,255,255,.4); }
.wslist a.on .s { color: #8FB6CE; }
.wslist p { color: rgba(255,255,255,.4); padding: 0 20px; }
.newws { margin-top: 4px; }
.createws { display: grid; gap: 10px; margin: 8px 16px; padding: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; }
.createws label { display: grid; gap: 4px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); }
.createws label { min-width: 0; }
.createws input { font-size: 13px; padding: 7px 9px; width: 100%; min-width: 0; max-width: 100%; }
.whoami { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid rgba(255,255,255,.1); }
.whoami .who { display: flex; align-items: center; gap: 10px; }
.whoami .av { width: 32px; height: 32px; border-radius: 50%; background: var(--steel); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: 0 0 32px; }
.whoami .who > div:last-child { min-width: 0; flex: 1; }
.whoami .rl { font-size: 11px; color: rgba(255,255,255,.4); }
.whoami input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); border-radius: 0; color: #fff; padding: 2px 0; font-size: 12px; font-weight: 500; }
.whoami input::placeholder { color: rgba(255,255,255,.35); }
.whoami input:focus { box-shadow: none; border-bottom-color: #8FB6CE; }

/* ---- home ---- */
.home { display: grid; place-items: center; padding: 48px; }
.intro { max-width: 480px; }
.intro h2 { font-size: 22px; margin: 6px 0 8px; }

/* ---- workspace ---- */
.ws { display: flex; flex-direction: column; min-height: 0; height: 100vh; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px 32px 16px; border-bottom: 1px solid var(--hair); background: var(--wash); }
.pagehead h1 { font-size: 26px; line-height: 1.2; margin-top: 4px; }
.pagehead .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.wsbody { flex: 1; display: grid; grid-template-columns: minmax(360px, 40%) minmax(0, 1fr); min-height: 0; }

/* chat: the pipeline's interview, a conversation that is part of the work of the page */
.chatcol { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--hair); background: var(--white); }
.chatlist { border-bottom: 1px solid var(--hair); padding: 14px 20px 10px; max-height: 30%; overflow-y: auto; }
.chatlisthead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#chats a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 13px; border-left: 2px solid transparent; }
#chats a:hover { background: var(--wash); }
#chats a.on { background: rgba(56,111,148,.06); border-left-color: var(--accent); color: var(--navy); font-weight: 600; }
#chats a .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chats a .d { color: var(--muted); font-size: 11px; white-space: nowrap; font-weight: 400; }
.log { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; background: rgba(56,111,148,.03); }
.log > p { font-size: 13px; }
.msg { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; }
.msg::before { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .06em; color: var(--steel); flex: 0 0 40px; padding-top: 4px; text-align: right; }
.msg.agent::before { content: "AGENT"; }
.msg.user::before { content: "YOU"; color: var(--accent-ink); }
.msg .body { min-width: 0; max-width: 74ch; overflow-wrap: anywhere; }
.msg.agent .body { color: var(--navy); }
.msg.user .body { background: var(--white); border: 1px solid var(--hair); border-radius: 4px; padding: 8px 12px; }
.msg .body p { margin: 0 0 8px; }
.msg .body p:last-child { margin-bottom: 0; }
.msg .body ul, .msg .body ol { margin: 0 0 8px 20px; }
.msg .body h1, .msg .body h2, .msg .body h3 { font-size: 14px; margin: 10px 0 4px; }
.msg .body blockquote { border-left: 3px solid var(--accent); padding: 4px 12px; margin: 6px 0; background: rgba(56,111,148,.06); }
.msg .body code { font-size: 12px; background: var(--wash); padding: 1px 4px; border-radius: 2px; }
.say { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--hair); align-items: flex-end; background: var(--white); }
.say.flat { border-top: 0; padding: 0 0 14px; background: transparent; }
.say.flat input { flex: 1; }
.compose { flex: 1; display: grid; gap: 6px; min-width: 0; }
.compose textarea { font-size: 13.5px; }
.sendcol { display: grid; gap: 6px; }
.attach { cursor: pointer; }
.pending { display: flex; flex-wrap: wrap; gap: 6px; }
.pending:empty { display: none; }
.file { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; border: 1px solid var(--hair); border-radius: 2px; padding: 3px 8px; background: var(--white); color: var(--accent-ink); text-decoration: none; }
.file.up { opacity: .6; }
.file.bad { border-color: #f0d5d5; background: #fdf2f2; color: var(--warn); }
.file button { color: var(--muted); font-size: 13px; line-height: 1; }
.msg .files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chatcol.drop { outline: 2px dashed var(--accent); outline-offset: -6px; }

/* the workspace's contents */
.side { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tabs, .subtabs { display: flex; gap: 2px; padding: 0 24px; border-bottom: 1px solid var(--hair); overflow-x: auto; background: var(--wash); }
.tabs button { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 14px 12px 12px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: var(--navy); }
.tabs button.on { color: var(--navy); border-bottom-color: var(--accent); }
.subtabs { border-bottom: 0; padding-top: 12px; background: transparent; gap: 6px; flex-wrap: wrap; }
.subtabs button { font-size: 12px; padding: 4px 10px; border: 1px solid var(--hair); border-radius: 2px; color: var(--muted); background: var(--white); white-space: nowrap; }
.subtabs button.on { border-color: var(--accent); color: var(--accent-ink); background: rgba(56,111,148,.05); }
.count { display: inline-block; background: var(--warn); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 10px; letter-spacing: 0; margin-left: 4px; }
.count.soft { background: var(--hair); color: var(--muted); }
.count:empty { display: none; }
.tab { flex: 1; overflow: auto; padding: 20px 24px 40px; }
.diagram { display: grid; place-items: center; min-height: 260px; background: var(--white); border: 1px solid var(--hair); border-radius: 4px; padding: 20px; margin-top: 12px; }
.diagram svg { max-width: min(100%, 720px); height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--muted); padding-top: 12px; justify-content: center; }
.k { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
/* Who does a step: the same colours render.py gives the map. */
.k.r-attorney { background: #1A2B4A; }
.k.r-ops { background: #386F94; }
.k.r-title { background: #2F7D6D; }
.k.r-court { background: #6B4E8A; }
.k.r-client { background: #D9C9A8; border: 1px solid #A8906A; }
.k.r-vendor { background: #EEF1F4; border: 1px solid var(--muted); }
.k.r-other { background: #ffffff; border: 1px solid var(--muted); }
.k.stepk { border: 1px solid var(--muted); border-radius: 4px; width: 16px; }
.k.endk { border: 2px solid var(--navy); border-radius: 6px; width: 18px; }
.legend { flex-direction: column; align-items: center; gap: 6px; }
.legend .lrow span { white-space: nowrap; }
.legend .lrow { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.legend .lrow b { color: var(--navy); font-weight: 700; }
.k.conflictk { border: 2px dashed #B3261E; }
.k.branch { border: 1px solid var(--muted); transform: rotate(45deg) scale(.8); }

.doc { max-width: 760px; line-height: 1.65; background: var(--white); border: 1px solid var(--hair); border-radius: 4px; padding: 24px 28px; }
.doc h1 { font-size: 22px; margin-bottom: 8px; }
.doc h2 { font-size: 16px; margin: 24px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.doc h3 { font-size: 14px; margin: 16px 0 4px; }
.doc p, .doc ul { margin-bottom: 8px; }
.doc ul { padding-left: 20px; }
.doc blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--steel); background: var(--wash); }
.doc a { color: var(--accent-ink); }
.tab > p.muted, .tab > div > p.muted { font-size: 13px; }

.blocker { padding: 10px 14px; background: var(--white); border: 1px solid var(--hair); border-left: 3px solid var(--warn); border-radius: 4px; margin-bottom: 8px; font-size: 13px; }
.ready { padding: 12px 14px; background: var(--ok-bg); color: var(--ok-tx); border-radius: 4px; margin-bottom: 12px; font-size: 13px; }
.approve { display: grid; gap: 10px; max-width: 440px; margin-top: 12px; }

.libgroup { margin-bottom: 22px; }
.libgroup h4 { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 8px; }
table.grid { border-collapse: collapse; width: 100%; font-size: 13px; background: var(--white); }
table.grid th, table.grid td { border: 1px solid var(--hair); padding: 8px 10px; text-align: left; vertical-align: top; }
table.grid th { background: var(--wash); color: var(--navy); font-weight: 600; font-size: 12px; }
table.grid.small { font-size: 12px; }
td.err { color: var(--warn); }

.split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
.notelist nav { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.notelist a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 13px; border-left: 2px solid transparent; }
.notelist a:hover { background: var(--white); }
.notelist a.on { background: var(--white); border-left-color: var(--accent); color: var(--navy); font-weight: 600; }
.notelist .by { font-size: 11px; color: var(--muted); font-weight: 400; }
.noteform { display: grid; gap: 10px; }

.memory { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--white); border: 1px solid var(--hair); border-radius: 4px; margin-bottom: 8px; font-size: 13px; }
.answer { background: var(--white); border: 1px solid var(--hair); border-radius: 4px; padding: 12px 16px; margin: 12px 0; font-size: 13px; }
.answer .q { font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.answer.escalate { border-left: 3px solid var(--accent); }
.chip { display: inline-block; font-size: 11px; border: 1px solid var(--hair); border-radius: 2px; padding: 2px 8px; margin: 6px 6px 0 0; color: var(--accent-ink); }

dialog { border: 1px solid var(--hair); border-radius: 4px; width: min(760px, 94vw); max-height: 82vh; padding: 24px; margin: auto; }
dialog::backdrop { background: rgba(26, 43, 74, .4); }
dialog h3 { margin-bottom: 4px; }
dialog pre { white-space: pre-wrap; font-family: "Nunito Sans", sans-serif; font-size: 13px; line-height: 1.6; background: var(--wash); padding: 14px; border-radius: 4px; margin-top: 12px; }
.close { float: right; padding: 2px 10px; }

.busy { position: fixed; right: 20px; bottom: 20px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 4px; display: flex; gap: 10px; align-items: center; font-size: 13px; box-shadow: 0 2px 8px rgba(26,43,74,.2); }
.spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .rail { height: auto; position: static; padding: 16px 0; }
  .whoami { margin-top: 12px; }
  .ws { height: auto; }
  .pagehead { padding: 18px 16px 12px; }
  .wsbody { grid-template-columns: minmax(0, 1fr); }
  .chatcol { border-right: 0; border-bottom: 1px solid var(--hair); height: 75vh; }
  .tabs { padding: 0 12px; }
  .tab { padding: 16px; }
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* sources: one card per statute, case, form or research item */
.lead { margin-bottom: 12px; }
.src { background: var(--white); border: 1px solid var(--hair); border-radius: 4px; padding: 12px 16px; margin-bottom: 10px; }
.src:hover { border-color: var(--steel); }
.src .st { font-weight: 600; color: var(--navy); font-size: 13.5px; line-height: 1.4; }
.src .sid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--steel); margin-right: 6px; }
.src .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.src .meta a { color: var(--accent-ink); }
.src .by { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; align-items: center; font-size: 11px; color: var(--muted); }
.src .by .chip { margin: 0; }
.src .auto { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ok-tx); background: var(--ok-bg); border-radius: 2px; padding: 1px 6px; }
.src .unused { color: var(--muted); font-style: italic; }
.src details { margin-top: 8px; }
.src summary { cursor: pointer; font-size: 12px; color: var(--accent-ink); }
.src .full { margin-top: 8px; max-height: 420px; overflow-y: auto; border-top: 1px solid var(--hair); padding-top: 8px; }
.src .full .p { font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 10px; }
.src .full .pid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--steel); display: block; }
.srcgroup { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin: 18px 0 8px; }
.srcgroup:first-child { margin-top: 0; }

.gap { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: 4px; padding: 8px 12px; margin-bottom: 6px; font-size: 13px; }
.gap .sid, .src .sid, .ch .sid, .stale .sid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--steel); margin-right: 6px; }
.linkish { font-size: 11px; color: var(--accent-ink); text-decoration: underline; margin-left: 8px; }
.doc ul:has(input[type=checkbox]) { list-style: none; padding-left: 4px; }
.doc input[type=checkbox] { margin-right: 8px; accent-color: var(--accent); }

/* versioning */
.history { grid-template-columns: 280px minmax(0, 1fr); }
#revlist { display: flex; flex-direction: column; gap: 2px; }
#revlist a { display: block; padding: 8px 10px; border-radius: 4px; text-decoration: none; color: var(--ink); border-left: 2px solid transparent; font-size: 12.5px; }
#revlist a:hover { background: var(--white); }
#revlist a.on { background: var(--white); border-left-color: var(--accent); }
#revlist .rn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--steel); margin-right: 6px; }
#revlist .rw { color: var(--navy); font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#revlist .rm { font-size: 11px; color: var(--muted); }
.vtag { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .08em; color: var(--ok-tx); background: var(--ok-bg); border-radius: 2px; padding: 1px 6px; margin-left: 6px; }
.changes { background: var(--white); border: 1px solid var(--hair); border-radius: 4px; padding: 14px 18px; margin: 10px 0 14px; }
.changes h5 { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin: 12px 0 6px; }
.changes h5:first-child { margin-top: 0; }
.ch { font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--wash); }
.ch .op { display: inline-block; min-width: 64px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.op.added, .op.new { color: var(--ok-tx); } .op.removed { color: var(--warn); } .op.changed, .op.edited, .op.text { color: var(--accent-ink); }
.ch .fld { margin: 4px 0 2px 64px; font-size: 12px; color: var(--muted); }
.ch .fld del { color: var(--warn); background: #fdf2f2; text-decoration: line-through; }
.ch .fld ins { color: var(--ok-tx); background: var(--ok-bg); text-decoration: none; }
.revhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.revhead h3 { font-size: 16px; }
.stale { background: var(--white); border: 1px solid var(--hair); border-left: 3px solid #B3261E; border-radius: 4px; padding: 10px 14px; margin-bottom: 8px; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.lawchg { color: #B3261E; font-size: 11px; }

/* templates */
.tstage { margin-bottom: 18px; }
.tstep { background: var(--white); border: 1px solid var(--hair); border-radius: 4px; padding: 10px 14px; margin-bottom: 8px; }
.tstep > .row { justify-content: space-between; }
.tstep .stt { font-weight: 600; color: var(--navy); font-size: 13px; }
.tpl { border-top: 1px solid var(--wash); margin-top: 10px; padding-top: 10px; }
.tpl .tn { font-weight: 600; color: var(--navy); font-size: 13px; }
.tpl .inuse { font-size: 11.5px; color: var(--ok-tx); }
.tpl .none { font-size: 11.5px; color: var(--muted); }
.tpl table.grid { margin-top: 8px; font-size: 12px; }
.tpl table.grid td { padding: 5px 8px; }
.vstat { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; padding: 1px 6px; }
.vstat.approved { color: var(--ok-tx); background: var(--ok-bg); }
.vstat.draft { color: var(--accent-ink); background: rgba(56,111,148,.09); }
.vstat.superseded { color: var(--muted); background: var(--wash); }
.tform { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; padding: 10px; background: var(--wash); border-radius: 4px; }
.tform input[type=file] { grid-column: 1 / -1; font-size: 12px; }
.tform .row { grid-column: 1 / -1; }
.tdiff { margin-top: 8px; font-size: 12px; background: var(--wash); border-radius: 4px; padding: 8px 10px; }
.tdiff .added { color: var(--ok-tx); } .tdiff .removed { color: var(--warn); text-decoration: line-through; }
.k.unverified { border: 2px dashed #C98A1B; }
.memhead { margin-top: 28px; }
.tform-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.fchip { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; border: 1px solid var(--hair); border-left: 3px solid var(--steel); border-radius: 2px; padding: 3px 8px; background: var(--wash); }
.fchip .fk { font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }

/* live activity */
.live { display: inline-flex; align-items: center; gap: 6px; font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ok-tx); margin-right: 6px; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-tx); animation: pulse 1.6s ease-in-out infinite; }
.live.off { color: var(--muted); } .live.off::before { background: var(--muted); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
#activity tr.fresh td { animation: fresh 2.4s ease-out; }
@keyframes fresh { from { background: rgba(56,111,148,.14); } to { background: transparent; } }
.msg .changed { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--hair); font-size: 11.5px; color: var(--muted); }
.msg .changed a { color: var(--accent-ink); }

/* direct editing */
.maphead { justify-content: space-between; margin-bottom: 4px; }
.viewtoggle { padding: 0 !important; }
.diagram g.node, .diagram g.node * { cursor: pointer; }
.diagram g.node:hover rect, .diagram g.node:hover polygon, .diagram g.node:hover path { filter: brightness(1.08); stroke-width: 3px; }
.editor { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--white); border-left: 1px solid var(--hair); box-shadow: -8px 0 24px rgba(26,43,74,.12); z-index: 60; display: flex; flex-direction: column; }
.editor header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--hair); }
.editor header h3 { font-size: 16px; }
.editor .body { flex: 1; overflow-y: auto; padding: 16px 20px; display: grid; gap: 12px; align-content: start; }
.editor label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--navy); }
.editor label .hint { font-weight: 400; color: var(--muted); }
.editor input, .editor select, .editor textarea { font-size: 13px; padding: 7px 9px; }
.editor footer { display: flex; gap: 8px; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--hair); }
.editor .err { color: var(--warn); background: #fdf2f2; border: 1px solid #f0d5d5; border-radius: 4px; padding: 8px 10px; font-size: 12px; }
.editor .warn { color: #8a5a00; background: #fdf6e8; border: 1px solid #f0dfb8; border-radius: 4px; padding: 8px 10px; font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chips .c { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; background: var(--wash); border: 1px solid var(--hair); border-radius: 2px; padding: 2px 6px; }
.chips .c button { color: var(--muted); }
.chips input, .chips select { flex: 1; min-width: 120px; }
.req { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 8px; background: var(--wash); border-radius: 4px; }
.req textarea { grid-column: 1 / 2; min-height: 36px; }
.req .cites { grid-column: 1 / 2; }
.req > button { grid-row: 1; grid-column: 2; align-self: start; }
/* board */
.board { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px 16px; align-items: flex-start; }
.bcol { flex: 0 0 240px; background: var(--white); border: 1px solid var(--hair); border-radius: 4px; display: flex; flex-direction: column; max-height: calc(100vh - 260px); }
.bcol.over { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56,111,148,.16); }
.bcol .bh { padding: 10px 12px; border-bottom: 2px solid var(--hair); cursor: grab; font-family: Montserrat, "Nunito Sans", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); display: flex; justify-content: space-between; gap: 6px; }
.bcol .cards2 { padding: 8px; display: grid; gap: 8px; overflow-y: auto; min-height: 60px; }
.bcard { background: var(--wash); border: 1px solid var(--hair); border-left: 3px solid var(--steel); border-radius: 4px; padding: 8px 10px; cursor: grab; font-size: 12.5px; }
.bcard.law { border-left-color: var(--navy); } .bcard.unv { border-left-color: #C98A1B; }
.bcard .bt { font-weight: 600; color: var(--navy); }
.bcard .bm { font-size: 11px; color: var(--muted); margin-top: 4px; }
.bcard.dragging, .bcol.dragging { opacity: .45; }
.dropmark { height: 3px; background: var(--accent); border-radius: 2px; }
.qa { display: grid; grid-template-columns: 1fr auto; gap: 6px; background: var(--white); border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: 4px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.qa .qt { grid-column: 1 / -1; }
.qa input { font-size: 13px; }

/* canvas editor (Drawflow) */
.canvaswrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.palette { background: var(--white); border: 1px solid var(--hair); border-radius: 4px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.pitem { border: 1px solid var(--hair); border-radius: 4px; padding: 10px; font-size: 13px; font-weight: 600; color: var(--navy); background: var(--wash); cursor: grab; text-align: center; }
.pitem.step { border-left: 3px solid var(--navy); }
.pitem.branch { border-left: 3px solid var(--muted); border-style: dashed; }
.pitem.end { border: 2px solid var(--navy); border-radius: 18px; }
.canvas { position: relative; height: calc(100vh - 290px); min-height: 420px; background: var(--white); border: 1px solid var(--hair); border-radius: 4px;
  background-image: radial-gradient(var(--hair) 1px, transparent 1px); background-size: 18px 18px; overflow: hidden; }
.drawflow .drawflow-node { width: 210px; padding: 0; border-radius: 4px; border: 1px solid var(--hair); background: var(--white); box-shadow: 0 1px 2px rgba(26,43,74,.08); }
.drawflow .drawflow-node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56,111,148,.25); background: var(--white); }
.drawflow .drawflow-node .drawflow_content_node { padding: 0; }
.drawflow .drawflow-node .nd { padding: 9px 12px; border-left: 4px solid var(--steel); border-radius: 4px; }
.drawflow .drawflow-node.r-attorney .nd { border-left-color: #1A2B4A; }
.drawflow .drawflow-node.r-ops .nd { border-left-color: #386F94; }
.drawflow .drawflow-node.r-title .nd { border-left-color: #2F7D6D; }
.drawflow .drawflow-node.r-court .nd { border-left-color: #6B4E8A; }
.drawflow .drawflow-node.r-client .nd { border-left-color: #A8906A; }
.drawflow .drawflow-node.r-vendor .nd, .drawflow .drawflow-node.r-other .nd { border-left-color: var(--muted); }
.drawflow .drawflow-node.endnode { width: 170px; border: 3px solid var(--navy); border-radius: 22px; }
.drawflow .drawflow-node.endnode .nd { border-left: 0; text-align: center; }
.drawflow .drawflow-node.unv { border: 2px dashed #C98A1B; }
.drawflow .drawflow-node.unv .nd { background: #fffaf0; }
.drawflow .drawflow-node.conflict { border: 2px dashed #B3261E; }
.drawflow .drawflow-node.branchnode { width: 170px; border-style: dashed; background: var(--wash); }
.drawflow .drawflow-node.branchnode .nd { border-left-color: var(--muted); }
.drawflow .drawflow-node .nt { font-weight: 600; color: var(--navy); font-size: 12.5px; line-height: 1.35; }
.drawflow .drawflow-node .nm { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { width: 14px; height: 14px; border: 2px solid var(--steel); background: var(--white); }
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { background: var(--accent); }
.drawflow .connection .main-path { stroke: var(--steel); stroke-width: 2.5px; }
.drawflow .connection .main-path:hover, .drawflow .connection .main-path.selected { stroke: var(--accent); }
.drawflow-delete { background: var(--warn); border: 2px solid #fff; }
.canvas .zoom { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; z-index: 5; }

/* map: a clean diagram to read, an expanded canvas to edit */
.maphead { justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; gap: 12px; }
.maphead #stagetabs { flex: 1; }
.maphead #mapedit { flex: 0 0 auto; margin-top: 8px; }
.alaw-playbooks.mapediting .wsbody { grid-template-columns: minmax(0, 1fr); }
.alaw-playbooks.mapediting .chatcol { display: none; }
.alaw-playbooks.mapediting .pagehead { padding-top: 10px; padding-bottom: 8px; }
.alaw-playbooks.mapediting .pagehead h1 { font-size: 18px; }
.alaw-playbooks.mapediting .tabs { display: none; }
.alaw-playbooks.mapediting .canvas { height: calc(100vh - 190px); }
.alaw-playbooks.mapediting .legend { display: none; }
.alaw-playbooks.mapediting #mapedit { background: var(--navy); color: #fff; border-color: var(--navy); }

/* decisions */
.pitem.decision { border-left: 3px solid var(--accent); background: #EAF1F7; }
.k.decisionk { background: #EAF1F7; border: 2px solid var(--accent); transform: rotate(45deg) scale(.8); }
.drawflow .drawflow-node.decisionnode { width: 200px; background: #EAF1F7; border: 2px solid var(--accent); }
.drawflow .drawflow-node.decisionnode .nd { border-left: 0; padding: 8px 12px 8px 10px; }
.drawflow .drawflow-node.decisionnode .nq { font-weight: 700; color: var(--navy); font-size: 12.5px; }
.drawflow .drawflow-node.decisionnode .oc { display: flex; justify-content: flex-end; align-items: center; height: 26px; font-size: 11.5px; color: var(--accent-ink); font-weight: 600; }
.drawflow .drawflow-node.decisionnode .oc.unset { color: #8a5a00; }
.drawflow .drawflow-node.decisionnode .outputs { justify-content: flex-end; padding-bottom: 7px; gap: 12px; display: flex; flex-direction: column; }
.outrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }

/* sign-in */
.whoami .signed { font-size: 12.5px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoami #signedemail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoami .linkbtn { margin-top: 2px; }
.navitem.on { background: rgba(94,137,166,.22); border-left-color: #8FB6CE; color: #fff; }
a.navitem { cursor: pointer; }

/* the template library */
.grow { flex: 1; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.tplstate { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tplhead { gap: 8px 10px; }
.tpl .tn { font-weight: 600; color: var(--navy); font-size: 13px; text-align: left; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.tpl .tn:hover { text-decoration-color: var(--accent); }
.tpl .tn.plain { text-decoration: none; }
.tagrow { margin-top: 6px; }
.steppick { font-size: 12px; padding: 3px 6px; max-width: 220px; }
.ttag { display: inline-block; font-size: 11px; background: rgba(56,111,148,.07); color: var(--accent-ink); border: 1px solid var(--hair); border-radius: 2px; padding: 1px 7px; }
.ttag.add { background: var(--ok-bg); color: var(--ok-tx); }
.ttag.del { background: #fdf2f2; color: var(--warn); text-decoration: line-through; }
.vstat.stale, .vstat.triage { color: #8a5a00; background: #fdf6e8; }
.vstat.review { color: var(--accent-ink); background: rgba(56,111,148,.09); }
.vstat.unversioned, .vstat.external { color: var(--muted); background: var(--wash); }
.vtok { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--wash); border: 1px solid var(--hair); border-radius: 2px; padding: 0 4px; }
.steptpl { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--wash); }
.toast { position: fixed; left: calc(var(--sidebar) + 20px); bottom: 20px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 4px; font-size: 13px; z-index: 80; box-shadow: 0 2px 8px rgba(26,43,74,.2); max-width: 520px; }

/* the template panel: the edit drawer, wider */
.editor.wide { width: min(780px, 100vw); }
.editor header > div { min-width: 0; }
.paneltabs { padding: 10px 20px 0; border-bottom: 1px solid var(--hair); }
.paneltabs button { margin-bottom: 10px; }
.editor .body p { margin: 0; }
.editor .info { color: var(--accent-ink); background: rgba(56,111,148,.07); border: 1px solid rgba(56,111,148,.25); border-radius: 4px; padding: 8px 10px; font-size: 12px; }
.editor label.inline { display: flex; gap: 8px; align-items: center; }
.brow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--wash); font-size: 13px; }
.crcard { border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: 4px; padding: 12px 14px; display: grid; gap: 10px; }
.crcard > div[id^="cr-"] { display: grid; gap: 10px; }
.dcard { border: 1px solid var(--hair); border-radius: 4px; padding: 10px 12px; display: grid; gap: 6px; background: var(--white); }
.dhead { gap: 8px; }
.para { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 6px 8px; border-left: 3px solid transparent; font-size: 13px; }
.para.insert { background: var(--ok-bg); border-left-color: var(--ok-tx); }
.para.delete { background: #fdf2f2; border-left-color: var(--warn); }
.para.replace { background: var(--wash); border-left-color: var(--accent); }
.para .pop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 2px; }
.para .ph { font-weight: 700; color: var(--navy); }
.was { color: var(--muted); text-decoration: line-through; }
.wins { background: #cfe9d9; border-radius: 2px; }
.wdel { background: #f6d3d3; text-decoration: line-through; border-radius: 2px; }
.conflict { border-top: 1px solid var(--hair); padding-top: 8px; display: grid; gap: 6px; }
.sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.side { border: 1px solid var(--hair); border-radius: 4px; padding: 8px 10px; display: grid; gap: 8px; align-content: start; font-size: 13px; }
.side.chosen { border-color: var(--accent); background: rgba(56,111,148,.06); }
.side .btn { justify-self: start; }
.nline { padding: 4px 0; font-size: 13px; }
.ngroup { padding: 6px 0; border-bottom: 1px solid var(--wash); font-size: 13px; }
.decide { display: grid; gap: 8px; border-top: 1px solid var(--hair); padding-top: 10px; }
.vrow { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-left: 3px solid transparent; border-radius: 4px; }
.vrow.picked { background: var(--wash); border-left-color: var(--accent); }
.vmain { flex: 1; text-align: left; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.vnum { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--navy); }
.vnote { flex-basis: 100%; font-size: 12.5px; }

/* the variable catalog */
.catalogview { display: flex; flex-direction: column; min-height: 0; height: 100vh; overflow-y: auto; }
.catbody { padding: 20px 32px 40px; display: grid; gap: 18px; max-width: 1200px; align-content: start; }
.catcard { display: grid; gap: 10px; }
.catcard h3 { font-size: 15px; }
.kreq { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.catform { display: grid; gap: 10px; padding: 12px 14px; background: var(--wash); border: 1px solid var(--hair); border-radius: 4px; }
.catform label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--navy); }
.catform label .hint { font-weight: 400; color: var(--muted); }
.catform input, .catform select, .catform textarea { font-size: 13px; padding: 6px 8px; }
.catfields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.catform .chips .c button { color: var(--muted); }
.scroller { overflow-x: auto; max-width: 100%; }
td.num { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#catsearch { width: 100%; }
@media (max-width: 900px) { .catalogview { height: auto; } .catbody { padding: 16px; } .toast { left: 16px; } }
.tstep .sid, .steptpl .sid, .brow .sid, .crcard .sid, .kreq .sid, .editor .row .sid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--steel); margin-right: 6px; }
.nlabel { font-size: 11px; font-weight: 600; color: var(--muted); }
.editor textarea { min-height: 60px; }

/* the firm-wide Variables page sits under the workspaces, as part of the same app */
.firmitem { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }
.firmitem .small { display: block; font-size: 11px; font-weight: 400; color: rgba(255,255,255,.4); }


/* ---- room to work: a collapsible sidebar and a chat column that folds away ---- */
.railtoggle { align-self: flex-end; margin: -14px 10px 4px 0; width: 26px; height: 26px; border-radius: 4px;
  color: rgba(255,255,255,.6); font-size: 16px; line-height: 1; }
.railtoggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.alaw-playbooks.railcollapsed { --sidebar: 56px; }
.alaw-playbooks.railcollapsed .rail { padding-top: 18px; }
.alaw-playbooks.railcollapsed .railtoggle { align-self: center; margin: 0 0 8px; }
.alaw-playbooks.railcollapsed .brand, .alaw-playbooks.railcollapsed .navlabel, .alaw-playbooks.railcollapsed .whoami,
.alaw-playbooks.railcollapsed .createws, .alaw-playbooks.railcollapsed .wslist a > *, .alaw-playbooks.railcollapsed .firmitem > * { display: none; }
.alaw-playbooks.railcollapsed .wslist a, .alaw-playbooks.railcollapsed .navitem { padding: 9px 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.alaw-playbooks.railcollapsed .wslist a::before, .alaw-playbooks.railcollapsed .firmitem::before { content: attr(data-short); }
.alaw-playbooks.railcollapsed .newws { font-size: 0; }
.alaw-playbooks.railcollapsed .newws::before { content: "+"; font-size: 18px; }
.alaw-playbooks.chatfolded .wsbody { grid-template-columns: minmax(0, 1fr); }
.alaw-playbooks.chatfolded .chatcol { display: none; }
.alaw-playbooks.sidefolded .wsbody { grid-template-columns: minmax(0, 1fr); }
.alaw-playbooks.sidefolded .side { display: none; }
.alaw-playbooks.sidefolded .chatcol { border-right: 0; }
/* in the panel's top right corner, outside the tabs' scrolling, which stop short of it */
.side { position: relative; }
.side > .tabs { padding-right: 48px; }
.tabs .sideclose { position: absolute; top: 0; right: 0; height: 43px; width: 44px; background: var(--wash); border: 0;
  border-left: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: var(--muted); font-size: 18px;
  letter-spacing: 0; text-transform: none; line-height: 1; padding: 0; margin: 0; cursor: pointer; z-index: 2; }
.tabs .sideclose:hover { color: var(--navy); }

/* ---- inside SharePoint: SharePoint already shows the firm, the site and who is signed in ---- */
.alaw-playbooks.hosted { --sidebar: 210px; }
.alaw-playbooks.hosted.railcollapsed { --sidebar: 56px; }
.alaw-playbooks.hosted .brand, .alaw-playbooks.hosted .whoami { display: none; }
.alaw-playbooks.hosted .rail { padding-top: 18px; }
.alaw-playbooks.hosted .pagehead { padding-top: 12px; padding-bottom: 10px; }
.alaw-playbooks.hosted .pagehead h1 { font-size: 20px; }
.alaw-playbooks.hosted .toast { position: absolute; }
/* A narrow window in SharePoint: the frame does not scroll, so nothing stacks below its edge.
   The sidebar stays beside the page (collapsed by app.js) and one column shows at a time. */
@media (max-width: 900px) {
  .alaw-playbooks.hosted { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .alaw-playbooks.hosted .rail { height: 100vh; position: sticky; padding: 18px 0; }
  .alaw-playbooks.hosted .ws { height: 100vh; }
  .alaw-playbooks.hosted .chatcol { height: auto; border-bottom: 0; }
  .alaw-playbooks.hosted .pagehead { flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; }
}


/* ---- a turn in progress belongs to its chat ---- */
.pendingturn .body { display: flex; gap: 10px; align-items: flex-start; }
.pendingturn .spinner.small { width: 14px; height: 14px; border: 2px solid rgba(56,111,148,.25); border-top-color: var(--accent); flex: 0 0 14px; margin-top: 4px; }
.wslist a.working .n::after, .alaw-playbooks.railcollapsed .wslist a.working::after { content: ""; display: inline-block; width: 7px; height: 7px;
  margin-left: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle; animation: pulse 1.6s ease-in-out infinite; }
#chats a.working .d { color: var(--accent-ink); font-weight: 600; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* adding an outside form */
.editor .dropzone { display: flex; align-items: center; justify-content: center; min-height: 110px; margin: 10px 0;
  border: 1.5px dashed var(--steel); border-radius: 6px; color: var(--muted); font-size: 13px; cursor: pointer; text-align: center; padding: 12px; }
.editor .dropzone:hover, .editor .dropzone.over { background: rgba(94,137,166,.08); color: var(--navy); }
.editor #intakeform { display: grid; gap: 8px; margin: 10px 0; }
.editor .preview { border: 1px solid var(--hair); border-radius: 4px; padding: 6px 10px; max-height: 180px; overflow: auto; }
.editor .preview p { margin: 4px 0; }

/* drafting: a question and a detail, one per row */
.qrow { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--wash); }
.qrow .row { gap: 12px; }
.fieldrow { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.fieldrow .hint { display: block; }

/* A card opened from the map: the playbook's own text for a stage, step or end. */
.editor .body.card { font-size: 13px; }
.editor .body.card ul { padding-left: 18px; }

/* The playbook's tables: at a glance, forms, sources. */
.doc table { border-collapse: collapse; width: 100%; margin: 6px 0 18px; font-size: 13px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--hair); }
.doc th { color: var(--navy); font-weight: 700; border-bottom: 2px solid var(--navy); white-space: nowrap; }
.doc td:first-child, .doc th:first-child { padding-left: 0; }

/* ---- people: who works on a workspace, and the admins ---- */
.person { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.person select { width: auto; font-size: 12.5px; padding: 4px 8px; }
.people .srcgroup { margin-top: 14px; }
.people .handon { margin: 6px 0 4px; }
.people .handon summary { cursor: pointer; font-size: 12.5px; }
.people .handon[open] { display: grid; gap: 8px; }
.picker { position: relative; }
.picker input { width: 100%; }
.picks { display: grid; margin-top: 4px; border-radius: 4px; overflow: hidden; }
.picks:empty { display: none; }
.picks .pick { text-align: left; padding: 7px 10px; background: var(--white); border: 1px solid var(--hair); border-top: 0; font-size: 12.5px; color: var(--ink); }
.picks .pick:first-child { border-top: 1px solid var(--hair); }
.picks .pick:hover { background: var(--wash); }
.createws .plabelsm { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); }
.createws .picks .pick { color: var(--ink); }
.adminlist { max-width: 640px; display: grid; gap: 8px; }
/* a viewer reads; nothing that changes the workspace is offered */
.readonlynote { display: none; margin: 0; padding: 14px 20px; border-top: 1px solid var(--hair); background: var(--wash); font-size: 13px; color: var(--muted); }
.alaw-playbooks.readonly .readonlynote { display: block; }
.alaw-playbooks.readonly #say, .alaw-playbooks.readonly #newchat, .alaw-playbooks.readonly #mapedit,
.alaw-playbooks.readonly [data-newstage], .alaw-playbooks.readonly [data-newstep], .alaw-playbooks.readonly [data-editstage],
.alaw-playbooks.readonly [data-cardedit], .alaw-playbooks.readonly a[href^="#edit:"], .alaw-playbooks.readonly [data-bg],
.alaw-playbooks.readonly [data-reviewed], .alaw-playbooks.readonly [data-restore], .alaw-playbooks.readonly #newnote,
.alaw-playbooks.readonly #memform, .alaw-playbooks.readonly #approve, .alaw-playbooks.readonly [data-edsave],
.alaw-playbooks.readonly [data-eddelete], .alaw-playbooks.readonly [data-edbdelete], .alaw-playbooks.readonly [data-eddeldec],
.alaw-playbooks.readonly [data-edaddbranch], .alaw-playbooks.readonly [data-eddelend],
.alaw-playbooks.readonly [data-checklaw], .alaw-playbooks.readonly [data-answer], .alaw-playbooks.readonly [data-answerfor],
.alaw-playbooks.readonly .steppick, .alaw-playbooks.readonly [data-countiesopen], .alaw-playbooks.readonly [data-intakeopen],
.alaw-playbooks.readonly [data-tunlink] { display: none !important; }
.srchead { font-size: 15px; margin: 4px 0 6px; }
#tab-cases, #tab-research { margin-top: 0; }

/* ---- needs attention and the admin views ---- */
.catbody.wide { max-width: 1280px; width: 100%; }
.admintabs { padding: 0 32px; border-bottom: 1px solid var(--hair); background: var(--wash); }
.admintabs { display: flex; padding-bottom: 12px; }
.admintabs a { text-decoration: none; font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--hair); border-radius: 2px; color: var(--muted); background: var(--white); }
.admintabs a.on { border-color: var(--accent); color: var(--accent-ink); background: rgba(56,111,148,.05); font-weight: 600; }
.admintabs.hidden { display: none; }
table.heatgrid { width: auto; }
.qcount { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #C98A1B; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }
.qcount:empty { display: none; }
.attentionnav { margin-top: 4px; }
.alaw-playbooks.railcollapsed .attentionnav .qcount { display: none; }
.qtable { padding: 0; display: grid; }
.qrow { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; }
.qrow:last-child { border-bottom: 0; }
.qrow.urgent { border-left: 3px solid #B3261E; }
a.qrow:hover { background: var(--wash); }
.qmain { min-width: 0; }
.qkind { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.qtitle { font-weight: 600; color: var(--navy); margin: 2px 0; }
.qact { display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0; }
.qassign:not(:empty) { margin-top: 8px; display: grid; gap: 6px; max-width: 420px; }
.lapsing { color: #8a5a00; font-weight: 600; }
.tag.urgent { background: #B3261E; color: #fff; border-color: #B3261E; }
.chipk { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; margin: 1px 0; }
.chipk.pb { background: #EAF1F7; color: var(--navy); }
.chipk.fm { background: #F6EEDC; color: #6b4d12; }
table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--hair); }
table.list td { padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.heatgrid { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
table.heatgrid th { font-weight: 600; color: var(--navy); padding: 4px 8px; text-align: center; white-space: nowrap; }
table.heatgrid td { width: 64px; height: 30px; text-align: center; border-radius: 4px; font-weight: 700; }
table.heatgrid td a { display: block; color: inherit; text-decoration: none; line-height: 30px; }
table.heatgrid td.none { color: var(--hair); font-weight: 400; }
table.heatgrid td.h0 { background: #E3F0E6; color: #2F6B3A; }
table.heatgrid td.h1 { background: #F6EEDC; color: #6b4d12; }
table.heatgrid td.h2 { background: #F7DEDC; color: #8f1d17; }
table.heatgrid td.lib { outline: 1px dashed var(--muted); outline-offset: -3px; }
.filters { gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.filters input, .filters select, input.filter { font-size: 13px; padding: 6px 9px; }
input.filter { width: 100%; max-width: 360px; margin-bottom: 10px; }

/* the page's head and tabs keep their height in SharePoint's fixed frame; the list scrolls */
.catalogview > .pagehead, .catalogview > .admintabs { flex-shrink: 0; }
.intro-wide h3 { margin-bottom: 6px; }
.intro-wide p { max-width: 760px; }
.blocker .row { justify-content: space-between; gap: 8px; }
.blocker ul { margin: 4px 0 0 18px; font-size: 13px; }
.bstep { font-weight: 600; color: var(--navy); text-decoration: none; }
.qa.flash, .blocker.flash { box-shadow: 0 0 0 3px rgba(201,138,27,.45); transition: box-shadow .3s; }
.warnline { color: #8a5a00; }
.chipk.bad { background: #F7DEDC; color: #8f1d17; }
.qanswer { display: flex; gap: 6px; margin-top: 8px; max-width: 640px; }
.qanswer input { flex: 1; font-size: 13px; padding: 6px 9px; }
.approvebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 32px;
  background: #EAF1F7; border-bottom: 1px solid var(--hair); font-size: 13.5px; color: var(--navy); flex-shrink: 0; }
.approvebar.hidden { display: none; }
#stale.flash, #gaps.flash, #approve.flash { box-shadow: 0 0 0 3px rgba(201,138,27,.45); }
.approvebar.reader { background: var(--wash); color: var(--muted); }
.alaw-playbooks.readonly .readonlynote { display: none; }

/* Password sign-in and change of password: a card over the page */
.signin { position: fixed; inset: 0; z-index: 1000; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 16px; overflow-y: auto; }
.signin-logo { height: 40px; }
.signin .card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.signin h2 { margin: 0; font-size: 20px; }
.signin label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.signin .err { color: var(--warn); background: #fdf2f2; border: 1px solid #f0d5d5; border-radius: 4px; padding: 8px 10px; font-size: 13px; }
.signin-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Admin: accounts */
.acctform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.acctform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.acctactions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pwnote { border-color: var(--accent); }
.pwnote .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pwnote code.pw { font-size: 15px; padding: 6px 10px; background: var(--wash); border: 1px solid var(--hair); border-radius: 4px; user-select: all; }
@media (max-width: 760px) { .acctform { grid-template-columns: 1fr; } }