/* Product components shown on the landing page.
   Rules are copied from the app (lawtology_mvp apps/web/src/styles/demo.css) and the
   approved intake mockup, scoped under .pw so they don't collide with site styles.
   Keep in step with the app when its look changes. */

.pw {
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pwarn: #9a5b13;
  --pwarnbg: #fdf6ec;
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(23,24,28,.08);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}
.pw button { font: inherit; color: inherit; background: none; border: 0; cursor: default; }

/* app bar */
.pw .appbar { display: flex; align-items: center; gap: 18px; height: 48px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.pw .appbar .brand { font-size: 11.5px; font-weight: 700; letter-spacing: .24em; }
.pw .appbar .r { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--sub); }
.pw .appbar .newcase { background: var(--acc); color: #fff; border-radius: 7px; padding: 5px 12px; font-size: 13px; }

/* case header */
.pw .hd { padding: 22px 30px 0; border-bottom: 1px solid var(--line); }
.pw .back { font-size: 13.5px; font-weight: 600; }
.pw .trow { display: flex; align-items: flex-end; gap: 16px; margin-top: 8px; }
.pw .trow h3 { font-size: 23px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.pw .trow .meta { color: var(--sub); font-size: 13.5px; margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pw .dday { text-align: right; margin-left: auto; flex: none; }
.pw .dday b { display: block; font-family: var(--mono); font-size: 28px; color: var(--acc); line-height: 1; letter-spacing: -.02em; }
.pw .dday span { font-size: 12.5px; color: var(--sub); }
.pw .tabrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 18px; }
.pw .tabs { display: flex; gap: 4px; overflow: hidden; }
.pw .tab { padding: 10px 14px; font-size: 14.5px; color: var(--sub); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pw .tab .n { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: 6px; border: 1px solid var(--line2); border-radius: 5px; padding: 1px 5px; vertical-align: middle; }
.pw .tab.on { color: var(--ink); border-bottom-color: var(--acc); font-weight: 700; }
.pw .add { margin-bottom: 10px; background: var(--acc); color: #fff; border-radius: 8px; padding: 7px 14px; font-size: 13.5px; white-space: nowrap; flex: none; }
.pw .bd { padding: 20px 30px 26px; background: #fff; }

/* shared */
.pw .card { background: #fff; border: 1px solid var(--line2); border-radius: 10px; padding: 0; }
.pw h3 { margin: 0; }
.pw .chead { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pw .chead .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pw .cbody { padding: 12px 16px 16px; }
.pw .label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--sub); }
.pw .hint { font-size: 12.5px; color: var(--faint); }
.pw .fcode { font-family: var(--mono); font-size: 12px; color: var(--sub); }
.chip { display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .04em; border: 1px solid var(--line2); border-radius: 5px; padding: 2px 8px; color: var(--sub); white-space: nowrap; vertical-align: middle; background: #fff; }
.chip.ink { border-color: var(--ink); color: var(--ink); }
.chip.solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.dim { border-style: dashed; color: var(--faint); }
.chip.tint { border-color: var(--acc); color: var(--acc); background: var(--tint); }
.chip.mneed { border-color: #e8c48f; color: #9a5b13; background: #fdf6ec; }
.achip { display: inline-flex; align-items: center; gap: 4px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 10.5px; color: var(--acc); background: var(--tint); border: 1px solid var(--acc); border-radius: 4px; padding: 0 7px; white-space: nowrap; }
.mst { display: inline-block; font-size: 12.5px; border-radius: 6px; padding: 1px 9px; border: 1px solid; white-space: nowrap; vertical-align: middle; }
.mst.ok { background: var(--ink); border-color: var(--ink); color: #fff; }
.mst.wait { border-style: dashed; border-color: var(--line2); color: var(--sub); }
.mst.gap { border-color: #e7b3b3; color: #b91c1c; background: #fef2f2; }

/* issue card — requirement blocks */
.pw .mrow { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; margin-top: 7px; font-size: 14px; }
.pw .mside { font-family: var(--mono); font-size: 9.5px; border: 1px solid var(--line2); border-radius: 4px; padding: 1px 6px; flex: none; margin-top: 3px; color: var(--sub); white-space: nowrap; }
.pw .mbody { flex: 1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; line-height: 1.7; min-width: 0; }
.pw .mel { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-top: 10px; }
.pw .mel-h { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 14.5px; flex-wrap: wrap; }
.pw .mlk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; padding: 6px 8px; border-radius: 6px; }
.pw .mlk.opp { background: #fffaf3; }
.pw .mlk .sp { flex: 1; }
.pw .mrole { font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--line2); border-radius: 4px; padding: 0 6px; color: var(--sub); min-width: 44px; text-align: center; flex: none; }
.pw .mrole.ink { border-color: var(--ink); color: var(--ink); }
.pw .mrole.dot { border-style: dotted; }
.pw .elhint { font-size: 12.5px; color: var(--faint); margin: 6px 0 0 4px; }

/* review card — from the approved intake mockup */
.pw .rvh { display: flex; align-items: baseline; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.pw .rvh b { font-size: 15px; }
.pw .rvh .pg { margin-left: auto; color: var(--faint); font-size: 13.5px; }
.pw .sec { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.pw .sec:last-child { border-bottom: 0; }
.pw .sec > * { min-width: 0; }
.pw .lb { font-size: 13.5px; font-weight: 700; color: var(--sub); padding-top: 2px; }
.pw .edit { border: 1px solid var(--line2); border-radius: 9px; padding: 10px 14px; font-size: 15.5px; line-height: 1.65; }
.pw .help { font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.pw .quote { font-size: 14.5px; line-height: 1.75; border-left: 3px solid #e2c66b; padding: 2px 0 2px 14px; }
.pw .quote mark { background: #fff1bf; padding: 0 2px; }
.pw .srcline { font-size: 12.5px; color: var(--sub); margin-top: 6px; }
.pw .srcline .lnk { color: var(--acc); }
.pw .warnbox { background: var(--pwarnbg); color: var(--pwarn); font-size: 13.5px; border-radius: 8px; padding: 8px 12px; margin-top: 10px; }
.pw .opt { display: flex; gap: 12px; border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; font-size: 14.5px; }
.pw .opt.on { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.pw .rd { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line2); margin-top: 4px; flex: none; }
.pw .opt.on .rd { border: 5px solid var(--acc); }
.pw .ctx { display: grid; grid-template-columns: 62px 1fr; row-gap: 4px; column-gap: 10px; margin-top: 8px; font-size: 13.5px; }
.pw .ctx dt { color: var(--faint); font-size: 12.5px; padding-top: 1px; }
.pw .rbadge { display: inline-block; white-space: nowrap; font-size: 12px; border-radius: 6px; padding: 1px 8px; background: #f1f2f4; color: var(--sub); }
.pw .roles { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--sub); }
.pw .pbtn { border: 1px solid var(--line2) !important; background: #fff !important; border-radius: 8px; padding: 7px 14px; font-size: 14px; display: inline-flex; }
.pw .pbtn.sm { padding: 3px 11px; font-size: 13px; }
.pw .pbtn.on { border-color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink); }
.pw .pbtn.pri { background: var(--acc) !important; border-color: var(--acc) !important; color: #fff; }
.pw .qq { font-size: 15.5px; font-weight: 700; }
.pw .btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pw .after { font-size: 12.5px; color: var(--sub); margin-top: 12px; }
.pw .muted { color: var(--faint); }

/* home — case board */
.pw .pghd { padding: 22px 26px 16px; border-bottom: 2px solid var(--ink); }
.pw .pghd h3 { font-size: 22px; font-weight: 700; }
.pw .pghd p { font-size: 13px; color: var(--sub); }
.pw .flt { display: flex; gap: 6px; padding: 14px 20px 6px; flex-wrap: wrap; }
.pw .pill { font-size: 13px; border: 1px solid var(--line2); border-radius: 999px; padding: 3px 12px; color: var(--ink); }
.pw .pill.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pw .pill i { font-style: normal; color: var(--faint); margin-left: 4px; }
.pw .pill.on i { color: #c9ccd3; }
.pw .board { width: 100%; border-collapse: collapse; }
.pw .board th { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); font-weight: 500; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pw .board td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.pw .board tbody tr:last-child td { border-bottom: 0; }
.pw .board .cname { font-weight: 600; }
.pw .board .cmeta { display: block; font-size: 11.5px; color: var(--faint); font-family: var(--mono); margin-top: 2px; font-weight: 400; }
.pw .board .num { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; color: var(--sub); }
.pw .board .num b { color: var(--acc); font-weight: 600; margin-right: 6px; }
.pw .board .warnc { font-size: 12.5px; color: var(--sub); }

@media (max-width: 900px) {
  .pw .hd { padding: 18px 18px 0; }
  .pw .bd { padding: 16px 14px 18px; }
  .pw .trow h3 { font-size: 19px; }
  .pw .dday b { font-size: 22px; }
  .pw .tab:nth-child(n+4) { display: none; }
  .pw .add { display: none; }
  .pw .appbar .r span:not(.newcase) { display: none; }
  .pw .board .hide-sm { display: none; }
  .pw .sec { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
}
@media (max-width: 480px) {
  .pw .mlk .sp { display: none; }
  .pw .m-hide { display: none; }
  .pw .board th:nth-child(3), .pw .board td:nth-child(3) { display: none; }
}
.pw .ctitle { font-size: 15px; }

/* procedure table (case header) */
.pw .procs { margin: 18px 0 0; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; }
.pw .procs-h { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--sub); }
.pw .procs-h .r { margin-left: auto; }
.pw .proc { display: grid; grid-template-columns: 150px 1fr auto 230px 70px; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pw .proc:last-child { border-bottom: 0; }
.pw .proc b { font-size: 15px; }
.pw .proc .court { font-family: var(--mono); font-size: 12.5px; color: var(--sub); }
.pw .proc .when { font-size: 13.5px; white-space: nowrap; }
.pw .proc .when i { font-style: normal; font-family: var(--mono); color: var(--acc); margin-left: 6px; }
.pw .proc .when.none { color: var(--faint); }
.pw .proc .docs { font-family: var(--mono); font-size: 12px; color: var(--sub); text-align: right; white-space: nowrap; }
.pw .pbox { border: 1px solid var(--line2); border-radius: 6px; padding: 1px 10px; font-size: 12px; color: var(--sub); white-space: nowrap; }
.pw .pbtn.mini { padding: 3px 10px; font-size: 12.5px; }

/* home widgets */
.pw .wstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 20px 4px; }
.pw .widget { border: 1px solid var(--line2); border-radius: 10px; padding: 12px 16px; min-width: 0; }
.pw .wtop { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pw .wtop .cnt { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.pw .wrow { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.pw .wrow:last-child { border-bottom: 0; }
.pw .wname { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw .wval { font-family: var(--mono); font-size: 12.5px; flex: none; color: var(--acc); }
.pw .wsub { font-size: 12px; color: var(--faint); flex: none; }
.pw .board-wrap { padding: 12px 20px 18px; }
.pw .board-wrap .card { overflow: hidden; }

/* evidence table */
.pw.ex .board td { font-size: 13.5px; }
.pw.ex .fname { font-weight: 600; display: block; }
.pw.ex .fmeta { font-size: 12px; color: var(--faint); font-family: var(--mono); }
.pw .exno { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--ink); border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.pw .exno.off { border-style: dashed; border-color: var(--line2); color: var(--faint); }
.pw .other { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.pw .other .k { font-size: 12.5px; color: var(--sub); }

/* drafting: steps + sentences */
.pw .jhd { padding: 20px 26px 0; }
.pw .jtitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pw .jtitle h3 { font-size: 22px; font-weight: 700; }
.pw .jsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.pw .jstep { border: 1px solid var(--line2); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.pw .jstep i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--faint); font-weight: 400; }
.pw .jstep.done { color: var(--sub); }
.pw .jstep.on { border-color: var(--acc); box-shadow: inset 0 -2px 0 var(--acc); }
.pw .jbd { padding: 16px 26px 22px; }
.pw .sent { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; align-items: start; }
.pw .sent.chosen { border-color: var(--ink); background: var(--bg); }
.pw .sent.lock { opacity: .55; }
.pw .sent .no { font-family: var(--mono); color: var(--faint); font-size: 11px; padding-top: 3px; }
.pw .stext { font-size: 14px; line-height: 1.8; }
.pw .srow { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.pw .pick { font-size: 12.5px; border-radius: 6px; padding: 3px 10px; white-space: nowrap; border: 1px solid var(--line2); color: var(--sub); }
.pw .pick.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pw .jfoot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pw .jfoot .sp { flex: 1; }

@media (max-width: 900px) {
  .pw .proc { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .pw .proc .court { grid-column: 1 / -1; order: 3; }
  .pw .proc .docs { display: none; }
  .pw .proc .when { order: 4; grid-column: 1 / -1; }
  .pw .wstrip { grid-template-columns: 1fr; }
  .pw .wstrip .widget:nth-child(n+2) { display: none; }
  .pw .jsteps { grid-template-columns: 1fr 1fr; }
  .pw .jhd { padding: 16px 16px 0; }
  .pw .jbd { padding: 14px 14px 18px; }
  .pw.ex .board th:nth-child(n+4), .pw.ex .board td:nth-child(n+4), .pw.ex .board th:nth-child(2), .pw.ex .board td:nth-child(2) { display: none; }
  .pw.ex .card { overflow: hidden; }
  .pw .other { grid-template-columns: 1fr; gap: 4px; }
  .pw .board-wrap { padding: 10px 12px 14px; }
}
@media (max-width: 480px) {
  .pw .sent { grid-template-columns: 1fr; gap: 6px; }
  .pw .sent .no { display: none; }
}

/* intake — drop zone and file rows (approved intake mockup) */
.pw .drop { margin: 18px 20px 0; border: 1.5px dashed var(--line2); border-radius: 12px; padding: 22px; text-align: center; background: var(--bg); }
.pw .drop b { font-size: 15px; }
.pw .drop p { color: var(--sub); font-size: 13px; margin-top: 2px; }
.pw .files { padding: 8px 20px 16px; }
.pw .frow { display: grid; grid-template-columns: 54px 1fr 210px 120px; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.pw .frow:first-child { border-top: 0; }
.pw .ftype { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; border: 1px solid var(--line2); border-radius: 5px; padding: 2px 0; text-align: center; color: var(--sub); }
.pw .frow .nm b { font-size: 14px; font-weight: 600; }
.pw .frow .nm div { font-size: 12.5px; color: var(--sub); }
.pw .bar { height: 6px; background: #eceef1; border-radius: 3px; overflow: hidden; }
.pw .bar i { display: block; height: 100%; background: var(--acc); }
.pw .bar i.w100 { width: 100%; } .pw .bar i.w70 { width: 70%; } .pw .bar i.w35 { width: 35%; }
.pw .frow .st { font-size: 13px; text-align: right; white-space: nowrap; }
.pw .frow .st.ok { color: var(--acc); }
.pw .frow .st.run { color: var(--sub); }

/* source viewers — the exact spot each fact came from */
.srcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.srcgrid > .pw { margin: 0; display: flex; flex-direction: column; }
.pw .vh { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pw .vh b { font-size: 14px; display: block; }
.pw .vh .loc { font-family: var(--mono); font-size: 11px; color: var(--acc); }
.pw .vb { padding: 12px 14px; flex: 1; font-size: 13px; }
.pw .vf { border-top: 1px solid var(--line); padding: 12px 16px; background: var(--bg); font-size: 13.5px; line-height: 1.6; }
.pw .vf .k { display: block; font-size: 11.5px; color: var(--sub); margin-bottom: 3px; }
/* chat */
.pw .msgn { font-family: var(--mono); font-size: 10px; color: var(--faint); margin: 6px 0 2px; }
.pw .bub { display: inline-block; max-width: 92%; border: 1px solid var(--line2); border-radius: 10px; padding: 7px 11px; font-size: 13px; line-height: 1.5; background: #fff; }
.pw .bub small { display: block; font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 2px; }
.pw .bub.hit { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.pw .me { text-align: right; }
/* audio */
.pw .wave { display: block; width: 100%; height: 56px; border: 1px solid var(--line); border-radius: 8px; }
.pw .wave rect { fill: #d4d6db; }
.pw .wave rect.on { fill: var(--acc); }
.pw .wt { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--faint); margin: 3px 2px 8px; }
.pw .line { display: grid; grid-template-columns: 40px 30px 1fr; gap: 6px; padding: 5px 6px; border-radius: 6px; font-size: 12.5px; }
.pw .line .t { font-family: var(--mono); font-size: 10.5px; color: var(--faint); padding-top: 2px; }
.pw .line .who { font-size: 11px; color: var(--sub); padding-top: 1px; }
.pw .line.hit { border: 1px solid var(--acc); background: var(--tint); }
/* bank rows */
.pw .bank { width: 100%; border-collapse: collapse; font-size: 12px; }
.pw .bank th { font-weight: 500; color: var(--faint); text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--line); font-size: 11px; }
.pw .bank th:first-child, .pw .bank td:first-child { text-align: left; }
.pw .bank td { padding: 6px; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.pw .bank td.memo { font-family: var(--sans); }
.pw .bank tr.hit td { background: var(--tint); color: var(--ink); font-weight: 600; }

/* left-over spots (coverage) */
.pw .lefth { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pw .lefth b { font-size: 15px; white-space: nowrap; }
.pw .left { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pw .left:last-child { border-bottom: 0; }
.pw .left .q mark { background: #fff1bf; padding: 0 2px; }
.pw .left .from { display: block; font-size: 12px; color: var(--sub); margin-top: 2px; }
.pw .left .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* filed brief with a changed basis */
.pw .filed { padding: 16px 20px; }
.pw .filed-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pw .filed-h b { font-size: 16px; }
.pw .alertbar { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; border: 1px solid #e7b3b3; background: #fef2f2; color: #8f1d1d; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; }
.pw .alertbar b { color: #b91c1c; }
.pw .alertbar .sp { flex: 1; }
.pw .struck { text-decoration: line-through; color: var(--faint); }

/* timeline */
.pw .tl { padding: 8px 20px 16px; }
.pw .tli { display: grid; grid-template-columns: 92px 130px 1fr auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pw .tli:last-child { border-bottom: 0; }
.pw .tli .d { font-family: var(--mono); font-size: 12px; color: var(--sub); }

@media (max-width: 900px) {
  .srcgrid { grid-template-columns: 1fr; }
  .pw .frow { grid-template-columns: 48px 1fr auto; }
  .pw .frow .bar { display: none; }
  .pw .left { grid-template-columns: 1fr; }
  .pw .left .acts { justify-content: flex-start; }
  .pw .tli { grid-template-columns: 80px 1fr; }
  .pw .tli .p, .pw .tli > :last-child { display: none; }
}

/* knowledge-graph precedent matching */
.pw .kgbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pw .kgbar b { font-size: 15px; }
.pw .kgq { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2); border-radius: 8px; padding: 6px 12px; font-size: 13px; color: var(--sub); background: #fff; }
.pw .kgq .chip { font-size: 10.5px; }
.pw .kgbody { display: grid; grid-template-columns: 1.25fr 1fr; }
.pw .kgviz { padding: 16px 16px 10px; border-right: 1px solid var(--line); background: var(--bg); }
.pw .kgviz svg { display: block; width: 100%; height: auto; }
.pw .kgviz .legend { display: flex; gap: 16px; font-size: 12px; color: var(--sub); margin-top: 6px; }
.pw .kgviz .legend i { display: inline-block; width: 18px; height: 2px; vertical-align: middle; margin-right: 6px; background: var(--acc); }
.pw .kgviz .legend i.g { background: #c9ccd3; }
.kg .edge { fill: none; stroke: #c9ccd3; stroke-width: 1.4; }
.kg .edge.hit { stroke: var(--acc); stroke-width: 2; }
.kg .node rect { fill: #fff; stroke: var(--line2); stroke-width: 1; }
.kg .node.concept rect { fill: #f4f5f7; stroke-dasharray: 3 3; }
.kg .node.prec rect { stroke: var(--ink); }
.kg .node.prec.top rect { fill: var(--tint); stroke: var(--acc); stroke-width: 2; }
.kg text { font-family: var(--sans); }
.kg .k { font-size: 10px; fill: var(--sub); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.kg .prec.top .k { fill: var(--acc); font-weight: 600; }
.kg .t { font-size: 12.5px; fill: var(--ink); font-weight: 600; }
.kg .col { font-size: 11px; fill: var(--faint); letter-spacing: .12em; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.pw .kglist { padding: 6px 0; }
.pw .kglist .h { font-size: 12px; color: var(--sub); padding: 10px 18px 4px; font-family: var(--mono); letter-spacing: .08em; }
.pw .prc { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.pw .prc:last-child { border-bottom: 0; }
.pw .prc.top { background: var(--tint); box-shadow: inset 3px 0 0 var(--acc); }
.pw .prc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw .prc-h b { font-family: var(--mono); font-size: 13px; }
.pw .prc-h .sp { flex: 1; }
.pw .gist { font-size: 14px; margin: 4px 0 6px; }
.pw .match { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--sub); }
.pw .mbar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: #e3e5e9; overflow: hidden; vertical-align: middle; }
.pw .mbar i { display: block; height: 100%; background: var(--acc); }
.pw .mbar i.f4 { width: 100%; } .pw .mbar i.f2 { width: 50%; } .pw .mbar i.f1 { width: 25%; }
.pw .prc .acts { display: flex; gap: 6px; margin-top: 8px; }

/* embedded HWP editor */
.pw .edwrap { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px 26px 4px; }
.pw .edside { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pw .edside .lb2 { grid-column: 1 / -1; font-size: 12px; color: var(--sub); }
.pw .edside .sent { margin: 0; }
.pw .edside .sent { grid-template-columns: 1fr; gap: 4px; padding: 10px; }
.pw .edside .sent .stext { font-size: 13px; line-height: 1.7; }
.pw .edside .sent .no { display: none; }
.pw .edside .maps { font-size: 12px; color: var(--acc); margin-top: 4px; }
.pw .hwpwin { border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 28px rgba(23,24,28,.10); background: #fff; }
.pw .hwpwin-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pw .hwpwin-h b { font-weight: 600; }
.pw .hwpwin-h .r { margin-left: auto; display: flex; gap: 6px; }
.pw .hwpwin img { display: block; width: 100%; height: auto; }
.pw .jbd.ed { padding-top: 12px; }

@media (max-width: 900px) {
  .pw .kgbody { grid-template-columns: 1fr; }
  .pw .kgviz { border-right: 0; border-bottom: 1px solid var(--line); }
  .pw .kgq { margin-left: 0; }
  .pw .edwrap { grid-template-columns: 1fr; padding: 14px 14px 4px; }
  .pw .edside { grid-template-columns: 1fr; }
}

/* issue graph + KG precedents (argument graph from the app, with KG matches) */
.pw .agbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.pw .agbar .label { margin-right: 4px; }
.pw .agbar .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pw .agbody { display: grid; grid-template-columns: 1fr 300px; }
.pw .agviz { padding: 8px; border-right: 1px solid var(--line); min-width: 0; }
.pw .agviz svg { display: block; width: 100%; height: auto; }
.pw .aglegend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 12px 10px; font-size: 12px; color: var(--sub); }
.pw .aglegend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--ink); vertical-align: middle; margin-right: 6px; }
.pw .aglegend i.d { border-top-style: dashed; border-color: var(--sub); }
.pw .aglegend i.o { border-top-style: dotted; border-color: var(--sub); }
.pw .aglegend i.k { border-top: 2px dashed var(--acc); }
.ag .dotp { fill: #e3e5e9; }
.ag .kgzone { fill: #f5f8ff; stroke: #c9d8fb; stroke-dasharray: 4 4; }
.ag .colh { font-size: 10.5px; fill: var(--acc); letter-spacing: .1em; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.ag .e { fill: none; stroke: #c3c6cd; stroke-width: 1.3; }
.ag .e.cand { stroke-dasharray: 5 4; }
.ag .e.opp, .ag .e.ref { stroke-dasharray: 2 3; }
.ag .e.kg { stroke: var(--acc); stroke-width: 1.8; stroke-dasharray: 6 4; }
.ag .e.kg2 { stroke: #9db8f5; stroke-width: 1.3; stroke-dasharray: 6 4; }
.ag .el { font-size: 10px; fill: var(--faint); font-family: var(--sans); }
.ag .el.kgl { fill: var(--acc); font-weight: 600; }
.ag .nd rect { fill: #fff; stroke: #c3c6cd; stroke-width: 1.2; }
.ag .nd.issue rect { stroke: var(--ink); stroke-width: 1.6; }
.ag .nd.ours rect, .ag .nd.fact.ok rect { stroke: var(--ink); stroke-width: 2; fill: #f6f7f9; }
.ag .nd.cand rect { stroke-dasharray: 5 4; stroke: #9a9da6; }
.ag .nd.opp rect { stroke-dasharray: 2 3; stroke: #8a8d96; }
.ag .nd.prec rect { stroke: var(--ink); }
.ag .nd.kg rect { fill: #fff; stroke: #9db8f5; stroke-width: 1.4; }
.ag .nd.kg.top rect { fill: var(--tint); stroke: var(--acc); stroke-width: 2.4; }
.ag .nd.m rect { stroke: var(--acc); stroke-width: 2.2; }
.ag text { font-family: var(--sans); }
.ag .tag { font-size: 9.5px; fill: var(--sub); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .04em; }
.ag .nd.kg .tag { fill: var(--acc); font-weight: 600; }
.ag .l1 { font-size: 13px; font-weight: 700; fill: var(--ink); }
.ag .l2 { font-size: 10.5px; fill: var(--sub); }
.pw .insp { padding: 14px 16px; font-size: 13.5px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.pw .insp .label { font-size: 10.5px; }
.pw .insp h4 { font-family: var(--mono); font-size: 14px; margin: 0; }
.pw .insp .gist { font-size: 13.5px; margin: 0; }
.pw .mrows { display: grid; gap: 6px; }
.pw .mr { display: grid; grid-template-columns: 1fr 14px 1fr; gap: 6px; align-items: center; font-size: 12px; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
.pw .mr .a b, .pw .mr .b b { display: block; font-size: 10px; font-family: var(--mono); color: var(--sub); font-weight: 400; }
.pw .mr .b b { color: var(--acc); }
.pw .mr .eq { color: var(--acc); text-align: center; font-weight: 700; }
.pw .insp .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pw .insp .more { border-top: 1px solid var(--line); padding-top: 10px; font-size: 12.5px; color: var(--sub); }
.pw .insp .more b { font-family: var(--mono); color: var(--ink); font-size: 12px; }

/* sources used in a draft (no per-sentence approval) */
.pw .edsrc { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pw .edsrc .lb2 { padding: 9px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.pw .srcrow { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pw .srcrow:last-child { border-bottom: 0; }
.pw .srcrow .para { font-family: var(--mono); font-size: 12px; color: var(--sub); }
.pw .srcrow .refs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
  .pw .agbody { grid-template-columns: 1fr; }
  .pw .agviz { border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .pw .agviz svg { min-width: 640px; }
  .pw .srcrow { grid-template-columns: 44px 1fr; }
  .pw .srcrow > :last-child { grid-column: 2; }
}
.ag .badge circle { fill: var(--acc); stroke: #fff; stroke-width: 2; }
.ag .badge text { fill: #fff; font-size: 11px; font-weight: 700; font-family: var(--sans); }
.pw .mr { grid-template-columns: 18px 1fr 14px 1fr; }
.pw .mr .no { width: 18px; height: 18px; border-radius: 50%; background: var(--acc); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pw .agbar .r { flex-wrap: wrap; }
@media (max-width: 900px) { .pw .agbar .r { margin-left: 0; } }