/*
 * A Word document with tracked changes and a comment, drawn in HTML: the result of
 * Wunel's "Export as Word with tracked changes". Used by index.html, /workspace and
 * /memory (any page can load it). Each row is a paragraph on the page plus its cell
 * in the markup margin, so a balloon sits beside the paragraph it belongs to; in a
 * narrow box (a phone) the balloons drop under their paragraph.
 */
.word{--w-claude:#1F5FAD; --w-maya:#A4262C; --w-note:#8A6D1F;
  container-type:inline-size; margin:0; max-width:560px; border-radius:8px; overflow:hidden;
  background:#E9E7E4; box-shadow:0 1px 2px rgba(0,0,0,.25), 0 12px 32px rgba(0,0,0,.35);
  font-family:Aptos,Calibri,Carlito,'Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif; color:#242424}
.word-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px;
  background:#F8F7F6; border-bottom:1px solid #DCD8D3; font-size:11px; line-height:1.3; color:#4a4a4a}
.word-file{display:flex; align-items:center; gap:7px; min-width:0; font-weight:600; color:#2b2b2b}
.word-file span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.word-file::before{content:""; flex:none; width:10px; height:13px; border:1.5px solid #6b6b6b; border-radius:1.5px;
  background:linear-gradient(#6b6b6b,#6b6b6b) 2px 4px/5px 1px no-repeat, linear-gradient(#6b6b6b,#6b6b6b) 2px 7px/5px 1px no-repeat}
.word-mode{flex:none; color:#5f5f5f}
.word-doc{display:grid; grid-template-columns:minmax(0,1fr) 150px; margin:14px 0 14px 14px}
.wp{position:relative; background:#fff; padding:0 22px; font-size:13px; line-height:1.55}
.wp:first-child{padding-top:20px; border-radius:2px 2px 0 0}
.wp.last{padding-bottom:20px}
.wp p{margin:0 0 9px}
.wm{padding:0 14px 0 8px}
/* the original's own formatting: a coloured title and a bordered italic line */
.w-title{font-family:Georgia,'Iowan Old Style',Cambria,serif; font-size:21px; line-height:1.2; color:#1F3864; margin:0 0 3px !important}
.w-sub{font-style:italic; font-size:12px; color:#595959; padding-bottom:6px; border-bottom:1px solid #BFBFBF; margin-bottom:12px !important}
/* tracked changes: the author's colour, inserted underlined, deleted struck through, a bar in the margin */
.wp ins{color:var(--c); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.wp del{color:var(--c); text-decoration:line-through}
.wp.chg p{position:relative}
.wp.chg p::before{content:""; position:absolute; left:-13px; top:.2em; bottom:.2em; width:1.5px; background:#3b3b3b}
.by-claude{--c:var(--w-claude)} .by-maya{--c:var(--w-maya)}
.w-anchor{background:#FBEBC0; box-shadow:0 0 0 1px #E8C66A}
/* the markup area: one balloon per change, and the comment */
.w-bal{position:relative; margin:0 0 6px; padding:5px 8px; background:#fff; border:1px solid var(--c); border-radius:4px;
  font-size:10.5px; line-height:1.35; color:#3a3a3a}
.w-bal b{display:block; font-weight:700; color:var(--c)}
.w-bal.w-cmt{--c:#C8C2B8; background:#FFFDF6}
.w-bal.w-cmt b{color:#3a3a3a}
.w-bal.w-cmt b::before{content:""; display:inline-block; width:9px; height:7px; margin-right:5px; vertical-align:0;
  border:1.5px solid var(--w-note); border-radius:2px}
@container (max-width:470px){
  .word-doc{grid-template-columns:minmax(0,1fr); margin:10px}
  .wm{background:#fff; padding:0 22px 0 22px}
  .wm:empty{display:none}
  .wm .w-bal:last-child{margin-bottom:10px}
  .wp.last{padding-bottom:4px}
  .wm:last-child{padding-bottom:10px}
  .word-mode{display:none}
  .wp{padding:0 18px} .wm{padding:0 18px}
}