/* ==========================================================================
   Communications — design specification. Spec-local visual layer, layered on
   prd-doc.css (A4 paper sizing inherited — never restated here). Everything
   styles against prd-doc.css tokens (--ink, --hairline, --accent, --accent-soft).
   ========================================================================== */

/* kicker above the H1 */
.kicker{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 10px;}

/* ---- a numbered spec line (like .req but neutral, for design rules) ------ */
.spec{display:flex; gap:14px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--hairline); break-inside:avoid;}
.spec:last-of-type{border-bottom:0;}
.spec__id{flex:none; white-space:nowrap; font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:10px;
  font-weight:700; letter-spacing:.04em; color:var(--ink); background:#F1F4F7; border:1px solid var(--hairline-strong);
  border-radius:2px; padding:2px 7px; margin-top:1px;}
.spec p{margin:0; font-size:13px;}
.spec p b{font-weight:600;}

/* ---- callouts ----------------------------------------------------------- */
.callout{display:flex; gap:10px; align-items:flex-start; margin:14px 0 6px; padding:11px 13px;
  border:1px solid var(--hairline-strong); border-radius:3px; background:#FBFCFD; font-size:12.5px;
  color:var(--ink-2); break-inside:avoid; text-wrap:pretty;}
.callout b{color:var(--ink); font-weight:600;}
.callout--rule{background:#FDEEEE; border-color:#F4C9CA;}
.callout--rule b{color:#8E3438;}
.callout--note{background:#FAF1D8; border-color:#EBD9A4;}
.callout--note b{color:#6f5613;}
.callout--ok{background:#E7F2E8; border-color:#BFE0C4;}
.callout--ok b{color:#2f6d3a;}
.callout__k{flex:none; font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--hairline-strong);
  border-radius:999px; padding:2px 8px; background:#fff; margin-top:1px;}

/* ---- field dictionary (entity card) ------------------------------------- */
.ent{border:1px solid var(--hairline-strong); border-radius:4px; overflow:hidden; margin:14px 0 6px; break-inside:avoid;}
.ent__head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 13px;
  background:#FDEEEE; border-bottom:1px solid #F4C9CA;}
.ent__head .nm{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:12.5px; font-weight:700; color:#8E3438;}
.ent__head .tag{font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#B0474B;
  background:#fff; border:1px solid #F4C9CA; border-radius:999px; padding:2px 8px;}
.ent table{margin:0;}
.ent table th{padding:7px 12px 7px 13px;}
.ent table td{padding:7px 12px 7px 13px; font-size:12px;}
.ent table tr:last-child td{border-bottom:0;}
.ent .f{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:11.5px; color:var(--ink); white-space:nowrap;}
.ent .key{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:8.5px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border:1px solid #C9DDEE; border-radius:2px; padding:1px 5px; vertical-align:1px;}

/* enum pills inline in prose / cells */
.enum{display:inline-flex; flex-wrap:wrap; gap:4px; vertical-align:middle;}
.enum b{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:10.5px; font-weight:600; color:var(--ink-2);
  background:#F1F4F7; border:1px solid var(--hairline-strong); border-radius:2px; padding:1px 6px;}

/* ---- annotated wireframe figure ----------------------------------------- */
.fig{border:1px solid var(--hairline-strong); border-radius:4px; margin:16px 0 6px; overflow:hidden; break-inside:avoid; background:#fff;}
.fig svg{display:block; width:100%; height:auto;}
.fig figcaption{font-size:11px; color:var(--ink-3); padding:8px 13px; border-top:1px solid var(--hairline); background:#F6F8FA;}
.fignum{display:inline-block; min-width:16px; text-align:center; font-family:var(--rs-font-mono, ui-monospace, monospace);
  font-size:9.5px; font-weight:700; color:#fff; background:var(--accent); border-radius:999px; padding:1px 5px; margin-right:5px;}

/* legend row of swatches/keys */
.keys{display:flex; gap:16px; flex-wrap:wrap; margin:9px 0 0; font-size:11px; color:var(--ink-3); align-items:center;}
.keys span{display:inline-flex; align-items:center; gap:6px;}
.kdot{width:11px; height:11px; border-radius:2px; border:1px solid var(--hairline-strong); flex:none;}

/* ---- component anatomy table (label · spec) ----------------------------- */
table.specsheet th:first-child, table.specsheet td:first-child{white-space:nowrap;}
table.specsheet td:first-child{font-weight:600; color:var(--ink);}
.tok{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:11px; color:var(--accent-2, #2C638F);
  background:var(--accent-soft); border:1px solid #C9DDEE; border-radius:2px; padding:1px 5px;}
.cls{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:11px; color:#8E3438;
  background:#FDEEEE; border:1px solid #F4C9CA; border-radius:2px; padding:1px 5px;}

/* ---- state matrix grid -------------------------------------------------- */
.states{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 6px;}
.state{border:1px solid var(--hairline-strong); border-radius:3px; padding:11px 13px; background:#fff; break-inside:avoid;}
.state__h{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink); margin:0 0 4px;}
.state__h .pin{width:8px; height:8px; border-radius:50%; flex:none; background:var(--accent);}
.state__h .pin--ok{background:#3F8A45;} .state__h .pin--warn{background:#9C7A1E;}
.state__h .pin--danger{background:#B0474B;} .state__h .pin--idle{background:#8C99A6;}
.state p{margin:0; font-size:11.5px; color:var(--ink-3); line-height:1.5;}

/* ---- channel swatch (icon tile) ----------------------------------------- */
.chgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:12px 0 4px;}
.chcard{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--hairline-strong); border-radius:3px;
  padding:10px 12px; background:#fff; break-inside:avoid;}
.chcard__ic{flex:none; width:30px; height:30px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);}
.chcard__ic svg{width:17px; height:17px;}
.chcard__b{font-size:12px;}
.chcard__b .t{font-weight:600; color:var(--ink); display:flex; align-items:center; gap:7px;}
.chcard__b .t .mono{color:var(--ink-3);}
.chcard__b .s{display:block; color:var(--ink-3); font-size:11px; margin-top:2px; line-height:1.45;}

/* ---- sequence (realtime) ------------------------------------------------ */
.seq{border:1px solid var(--hairline-strong); border-radius:4px; overflow:hidden; margin:14px 0 6px;}
.seq__step{display:grid; grid-template-columns:30px 1fr; gap:0; border-bottom:1px solid var(--hairline); break-inside:avoid;}
.seq__step:last-child{border-bottom:0;}
.seq__n{display:flex; align-items:flex-start; justify-content:center; padding:11px 0; background:#F6F8FA;
  border-right:1px solid var(--hairline); font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:11px;
  font-weight:700; color:var(--accent);}
.seq__b{padding:10px 13px; font-size:12.5px; color:var(--ink-2);}
.seq__b b{color:var(--ink); font-weight:600;}
.seq__dir{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:9.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent); margin-right:7px;}
.seq__dir--up{color:#8E3438;}

/* ---- do / don't pair ---------------------------------------------------- */
.dd{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 4px;}
.ddcard{border:1px solid var(--hairline-strong); border-radius:3px; padding:10px 12px; font-size:12px; background:#fff;}
.ddcard__h{font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 5px;}
.ddcard--do{background:#E7F2E8; border-color:#BFE0C4;} .ddcard--do .ddcard__h{color:#2f6d3a;}
.ddcard--no{background:#FDEEEE; border-color:#F4C9CA;} .ddcard--no .ddcard__h{color:#8E3438;}
.ddcard ul{margin:0; padding-left:16px;} .ddcard li{margin:3px 0; color:var(--ink-2);}

/* small key-cap for keyboard table */
.kbd{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:10.5px; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid var(--hairline-strong); border-bottom-width:2px; border-radius:3px; padding:1px 6px;}

/* dimension tag used inside SVG annotations done in HTML overlay */
.dim{font-family:var(--rs-font-mono, ui-monospace, monospace); font-size:10px; color:var(--ink-3);}