/* Epicycle identity: white background, Arial, ink text; green and yellow for shapes and rules only. */
:root{--green:#039E4B;--yellow:#F4B701;--ink:#111111;--text-green:#027A3A;--rule:#d9d9d9;--muted:#555555;--soft:#f6f6f6}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
.page{max-width:1100px;margin:0 auto;padding:0 32px}
a{color:var(--text-green)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.masthead{display:flex;align-items:center;gap:20px;padding:20px 0 10px;border-bottom:3px solid var(--green)}
.masthead .home{font-weight:bold;color:var(--ink);text-decoration:none;font-size:1.05rem}
.masthead .logo{height:28px;margin-left:auto}
.logout{margin:0}
.who{font-size:.88rem;color:var(--muted)}
.poc-note{font-size:.82rem;color:var(--muted);margin:6px 0 0}
main{padding:8px 0 24px}
h1{font-size:1.7rem;line-height:1.2;margin:18px 0 8px;font-weight:normal}
h2{font-size:1.2rem;margin:28px 0 8px}
h3{font-size:1rem;margin:18px 0 6px}
.crumbs{font-size:.85rem;margin:14px 0 0}
.muted{color:var(--muted)}
.ref{display:inline-block;min-width:3.2em;font-weight:bold;color:var(--muted)}
.lab{display:block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.tag{display:inline-block;font-size:.75rem;border:1px solid var(--rule);border-left:3px solid var(--yellow);padding:0 6px}
.tag.overdue{border-left-color:var(--ink);font-weight:bold}
.table-wrap{overflow-x:auto;margin:10px 0}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th{text-align:left;border-bottom:2px solid var(--green);padding:8px 12px 8px 0;vertical-align:bottom}
td{border-bottom:1px solid var(--rule);padding:8px 12px 8px 0;vertical-align:top}
.num{text-align:right;font-variant-numeric:tabular-nums}
.provisional{border-left:3px solid var(--yellow);padding:4px 0 4px 16px;margin:16px 0;font-size:.88rem}
.provisional h2{font-size:.95rem;margin:0 0 4px}
.provisional ul{margin:0;padding-left:1.1em}
.control{border-top:1px solid var(--rule);padding:6px 0 10px}
.control h2,.gap h2{font-size:1.02rem;font-weight:bold;line-height:1.35}
.risk{font-size:.88rem;color:var(--muted);border-left:3px solid var(--rule);padding-left:10px}
fieldset.objective{border:0;border-left:3px solid var(--green);margin:12px 0;padding:4px 0 4px 14px}
fieldset.objective legend{padding:0;font-size:.95rem}
.note{font-size:.82rem;color:var(--muted);margin:4px 0}
.row{display:flex;gap:10px;align-items:center;margin:8px 0}
label{font-size:.85rem}
select,input,textarea{font:inherit;font-size:.92rem;border:1px solid #8a8a8a;padding:6px 8px;background:#FFFFFF;color:var(--ink)}
textarea{width:100%;max-width:46rem;display:block}
button,.button{font:inherit;font-size:.92rem;background:var(--ink);color:#FFFFFF;border:0;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-block}
.button.secondary{background:#FFFFFF;color:var(--ink);border:1px solid var(--ink)}
button.small{padding:4px 10px;font-size:.85rem}
button.link{background:none;color:var(--text-green);padding:0;text-decoration:underline}
.actions-row{display:flex;flex-wrap:wrap;gap:8px}
.stack{display:flex;flex-direction:column;gap:6px;max-width:46rem}
.stack.narrow{max-width:22rem}
.inline{display:flex;gap:6px;align-items:center;margin:0}
details{margin:8px 0}
summary{cursor:pointer;font-size:.9rem}
.options ul{font-size:.9rem}
.sticky-save{position:sticky;bottom:0;background:#FFFFFF;border-top:1px solid var(--rule);padding:10px 0;margin:0}
.toc ol{columns:2;font-size:.9rem}
.messages{list-style:none;padding:0;margin:12px 0}
.msg{border-left:3px solid var(--green);padding:6px 12px;background:var(--soft)}
.msg.error,.error{border-left:3px solid var(--ink);padding:6px 12px;background:var(--soft)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer{border-top:1px solid var(--rule);margin-top:40px;padding:14px 0 36px;font-size:.8rem;color:var(--muted)}
@media (max-width:700px){
  .page{padding:0 16px}
  .toc ol{columns:1}
  .masthead{flex-wrap:wrap;gap:10px}
  .row{flex-direction:column;align-items:flex-start}
  select{max-width:100%}
}
/* Guided tour (Driver.js popover in the Epicycle look) */
.driver-popover.epicycle-tour{font-family:Arial,Helvetica,sans-serif;color:var(--ink);border-radius:0;border-top:3px solid var(--green);max-width:360px}
.driver-popover.epicycle-tour .driver-popover-title{font-size:1rem;font-weight:bold}
.driver-popover.epicycle-tour .driver-popover-description{font-size:.9rem;line-height:1.45}
.driver-popover.epicycle-tour .driver-popover-progress-text{color:var(--muted)}
.driver-popover.epicycle-tour .driver-popover-footer button{font:inherit;font-size:.85rem;text-shadow:none;border-radius:0;border:1px solid var(--ink);background:#FFFFFF;color:var(--ink);padding:4px 10px}
.driver-popover.epicycle-tour .driver-popover-footer .driver-popover-next-btn{background:var(--ink);color:#FFFFFF}
.msg{overflow-wrap:anywhere}
/* Breadcrumb trail with progress, and the engagement step bar */
.trail ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;padding:0;margin:14px 0 0;font-size:.85rem}
.trail li+li::before{content:"›";margin:0 .45em;color:var(--muted)}
.trail [aria-current="page"]{font-weight:bold}
.trail .count{color:var(--muted);font-size:.8rem;white-space:nowrap}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0;margin:18px 0}
.step{border-top:4px solid var(--rule);padding:6px 0 0;font-size:.85rem}
.step .name{display:block;font-weight:bold;color:var(--ink)}
.step a.name{color:var(--text-green)}
.step .state{display:block;color:var(--muted);font-size:.8rem}
.step.current{border-top-color:var(--green)}
.step.current a.name{color:var(--ink);text-decoration:none}
.step.not-built{border-top-style:dashed}
.step.not-built .name{color:var(--muted);font-weight:normal}
@media (max-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
/* Comment threads as sticky notes, coloured by type (decision D20): soft paper tints, rounded corners, a soft
   shadow, no dashed edges. Ink text on every paper is at least 16:1 and muted text at least 6.5:1 (WCAG AA); tags
   at least 6.5:1. Every sticky shows its type in words, so colour is never the only signal. Internal threads have
   a solid grey band on the left (at least 3:1 against every paper), a lock icon and the word "Internal". */
:root{--note:#FFF6CC;--note-edge:#EEDD94;--question:#EAF0FB;--question-edge:#C9D6F1;--blocker:#FDECEA;--blocker-edge:#F1C4BE;--resolved:#E8F5EC;--resolved-edge:#BFE0C9;--internal-band:#858585;--internal-band-w:5px;--lock:#6B6B6B;--sticky-radius:10px;--sticky-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.06);--margin-w:280px;--margin-gap:28px}
.margin-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--margin-w);column-gap:var(--margin-gap);align-items:start}
.margin-main{min-width:0}
.margin-notes{font-size:.85rem;min-width:0}
@media (min-width:901px){fieldset.with-margin > legend{max-width:calc(100% - var(--margin-w) - var(--margin-gap))}}
@media (max-width:900px){.margin-grid{grid-template-columns:minmax(0,1fr)}.margin-notes{margin-top:6px}}
.stickies{margin:0 0 10px}
.stickies-count{margin:0 0 6px;font-size:.8rem;color:var(--muted)}
.stickies-on{margin:6px 0 4px;font-size:.78rem;color:var(--muted)}
@media (min-width:901px){.gap .margin-notes{padding-top:28px}} /* level with the gap heading, which has a 28px top margin */
.sticky{--paper:var(--note);--edge:var(--note-edge);background:var(--paper);border:1px solid var(--edge);border-radius:var(--sticky-radius);margin:0 0 10px;padding:0;box-shadow:var(--sticky-shadow);transform:rotate(-.5deg);scroll-margin-top:3rem}  /* room above a sticky opened from a link, incl. an action sticky's "On:" label */
.comment-card{--paper:var(--note);--edge:var(--note-edge);background:var(--paper);border:1px solid var(--edge);border-radius:var(--sticky-radius);box-shadow:var(--sticky-shadow);padding:10px 14px;font-size:.9rem}
.sticky:nth-of-type(even){transform:rotate(.4deg)}
.sticky[open]{transform:none}
.sticky-question{--paper:var(--question);--edge:var(--question-edge)}
.sticky-blocker{--paper:var(--blocker);--edge:var(--blocker-edge)}
.sticky.sticky-resolved{--paper:var(--resolved);--edge:var(--resolved-edge)}
.sticky-internal{border-left:var(--internal-band-w) solid var(--internal-band)}
.sticky > summary{list-style:none;display:block;padding:10px 10px 8px;color:var(--ink);font-size:.85rem}
.sticky > summary::-webkit-details-marker{display:none}
.sticky > summary::after{content:"Show thread ▾";display:block;margin-top:4px;font-size:.75rem;color:var(--muted);text-align:right}
.sticky[open] > summary::after{content:"Hide ▴"}
.sticky[open] > summary .sticky-line,.sticky[open] > summary .sticky-meta{display:none}
.sticky-tags{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 4px}
.sticky-tag{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;font-weight:bold;letter-spacing:.03em;text-transform:uppercase;padding:1px 8px;border-radius:999px;color:#5C4A00;background:#F6E7A6}
.sticky-question .sticky-type{color:#2F3A8F;background:#DAE3F8}
.sticky-blocker .sticky-type{color:#8E1B12;background:#F9D5D0}
.sticky-resolved .sticky-type{background:#FFFFFF;color:var(--ink);border:1px solid #d0d0d0;font-weight:normal}
.sticky-state{color:#0B5A2C;background:#CDEBD6}
.sticky-vis{color:#333333;background:#E6E6E6}
.sticky-lock{width:10px;height:10px;flex:none;color:var(--lock)}
.sticky-line{display:block;overflow-wrap:anywhere}
.sticky-meta{display:block;margin-top:2px;font-size:.75rem;color:var(--muted)}
.sticky-body{padding:0 10px 10px;font-size:.85rem}
.sticky-pin{margin:0 0 6px;font-size:.78rem;color:var(--muted);border-bottom:1px solid rgba(17,17,17,.15);padding-bottom:6px}
.sticky-pin p{margin:0 0 2px}
.sticky-body textarea{max-width:100%;background:#FFFFFF}
.sticky-retype{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 0;padding-top:6px;border-top:1px solid rgba(17,17,17,.15)}
.sticky-retype label{font-size:.78rem}
.sticky-retype select{font-size:.82rem;padding:3px 6px}
.new-sticky{margin:4px 0 0}
.new-sticky > summary{display:inline-block;font-size:.82rem;border:1px solid #d0d0d0;border-radius:999px;padding:2px 12px;color:var(--ink);background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.05);cursor:pointer}
.new-sticky > summary:hover{background:var(--soft)}
.new-sticky[open] > summary{margin-bottom:6px}
.new-sticky .new-thread{background:#FFFFFF;border:1px solid var(--rule);border-radius:var(--sticky-radius);padding:8px 10px;box-shadow:var(--sticky-shadow)}
.type-pick{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
fieldset.objective .type-pick legend,.type-pick legend{font-size:.85rem;padding:0;margin:0 0 2px;float:left;width:100%}
.pick{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;padding:2px 10px 2px 6px;border:1px solid var(--edge);border-radius:999px;background:var(--paper);cursor:pointer}
.pick-note{--paper:var(--note);--edge:var(--note-edge)}
.pick-question{--paper:var(--question);--edge:var(--question-edge)}
.pick-blocker{--paper:var(--blocker);--edge:var(--blocker-edge)}
.pick input{margin:0}
.comment{margin:6px 0}
.comment p{margin:0}
.comment .who{font-size:.78rem;color:var(--muted)}
.reply,.new-thread{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;margin:6px 0}
.reply textarea,.new-thread textarea{flex:1 1 100%}
.new-thread label{margin:0}
.new-thread > label,.new-thread > select{flex:1 1 100%}
button.secondary{background:#FFFFFF;color:var(--ink);border:1px solid var(--ink)}
.action-threads{margin:0}
@media (max-width:900px){.sticky,.sticky:nth-of-type(even){transform:none}}
/* Comments page: every thread in an assessment as a list of soft cards in the sticky colours, with filters */
.quick-filters{font-size:.88rem;margin:6px 0}
.comment-filters{--paper:#FFFFFF;--edge:#d0d0d0}
.comment-filters > div{min-width:0;max-width:100%}
.comment-filters select{max-width:100%}
.comment-filters .facet{border:0;margin:0;padding:0;min-width:0}
.comment-filters .facet legend{font-size:.8rem;color:var(--muted);padding:0;margin:0 0 2px}
.comment-filters label.pick{display:inline-flex;margin:0 2px 4px 0;font-size:.85rem;color:var(--ink)}
.comment-filters .pick:has(input:checked){border-color:var(--ink);font-weight:bold}
.comment-cards{list-style:none;padding:0;margin:8px 0;display:grid;gap:10px}
.comment-card.sticky-resolved{--paper:var(--resolved);--edge:var(--resolved-edge)}
.comment-card p{margin:0}
.comment-card .sticky-tags{margin:0 0 4px}
.sticky-open{color:var(--ink);background:#FFFFFF;border:1px solid #d0d0d0}
.card-item{font-size:.85rem;overflow-wrap:anywhere}
.card-where{font-weight:bold;color:var(--muted)}
.comment-card .card-line{margin:4px 0 0;overflow-wrap:anywhere}
.comment-card .card-meta{margin:4px 0 0;font-size:.78rem;color:var(--muted)}
.comment-empty{color:var(--muted)}
.comments-link{font-size:.88rem;margin:4px 0 8px}
/* Main tabs, client filters, stage chips, external links */
.tabs{display:flex;gap:24px;margin:10px 0 0;border-bottom:1px solid var(--rule)}
.tabs a{padding:6px 0;color:var(--muted);text-decoration:none;font-weight:bold;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--green)}
.tabs a:hover{color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:10px 0 6px}
.filters label{display:block;font-size:.8rem;color:var(--muted);margin:0 0 2px}
.filters input[type=search]{min-width:220px}
.filter-buttons{display:flex;gap:12px;align-items:center}
.small-link{font-size:.88rem}
.count-line{font-size:.85rem;margin:4px 0}
.assessment-line{margin:0 0 6px}
.stage{display:inline-block;font-size:.75rem;border:1px solid var(--rule);border-left:3px solid var(--rule);padding:0 6px;margin:0 4px}
.stage-in_progress{border-left-color:var(--yellow)}
.stage-assessed{border-left-color:var(--green)}
.overdue-count{color:var(--ink)}
a.external{white-space:nowrap}
@media (max-width:700px){.filters > div{flex:1 1 45%}.filters input[type=search]{min-width:0;width:100%}}
@media (max-width:700px){.wide-only{display:none}}
.overdue-count,.clients td:last-child{white-space:nowrap}
/* Tailoring: a consultancy's version, and an assessment's scope */
.publish-box{border-left:3px solid var(--green);padding:6px 0 6px 14px;margin:14px 0}
.tailor-section{border-top:1px solid var(--rule);padding:8px 0}
.tailor-section > summary{cursor:pointer}
.tailor-control{margin:12px 0 12px 8px;padding-left:12px;border-left:3px solid var(--green)}
.tailor-control.left-out{border-left-color:var(--rule);color:var(--muted)}
.tailor-control .keep,.scope-section .keep{display:block;font-weight:bold;margin:4px 0}
.tailor-parts{list-style:none;padding-left:22px;margin:6px 0;font-size:.9rem}
.tailor-parts li{margin:3px 0}
.tailor-parts li.option{color:var(--muted)}
.tailor-added{list-style:none;padding-left:22px;font-size:.9rem}
.tailor-added li{margin:4px 0}
.tag.firm{border-left-color:var(--green);font-weight:bold}
.tailor-add{margin:6px 0 0 22px;font-size:.88rem}
.tailor-add textarea{width:100%;max-width:640px;display:block;margin:4px 0}
.scope-section{border:0;border-top:1px solid var(--rule);padding:8px 0;margin:0}
.scope-section .keep{font-weight:normal}
.filters select{max-width:100%}
@media (max-width:700px){.filters select{width:100%}}
/* Landscape: the sunburst of a client and its frameworks (static/js/landscape.js) */
.landscape{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:flex-start;margin:12px 0}
.landscape-chart{flex:1 1 560px;min-width:0;max-width:640px}
.landscape-svg svg{display:block;width:100%;height:auto;font-family:Arial,Helvetica,sans-serif}
.landscape-panel{flex:1 1 300px;min-width:0;border-left:3px solid var(--green);padding:2px 0 2px 16px;font-size:.9rem}
.landscape-panel h2{margin:0 0 6px;font-size:1.05rem}
.landscape-panel .panel-title{margin:0 0 6px;overflow-wrap:anywhere}
.landscape-panel .panel-sub{margin:0 0 8px;font-size:.85rem}
.panel-trail{font-size:.82rem;margin:4px 0 8px}
.panel-status{font-weight:bold}
.panel-facts{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0}
.panel-facts dt{color:var(--muted)}
.panel-facts dd{margin:0;font-variant-numeric:tabular-nums}
.panel-table{font-size:.85rem;margin:8px 0}
.panel-table th,.panel-table td{padding:4px 8px 4px 0}
.panel-links{padding-left:1.1em;margin:8px 0}
.panel-links a.external{white-space:normal}
.swatch{display:inline-block;width:.9em;height:.9em;margin-right:6px;vertical-align:-1px;border:1px solid rgba(0,0,0,.25)}
.swatch.out{border:1px dashed #777}
.seg{stroke:#FFFFFF;stroke-width:.6px;cursor:pointer}
.seg.out{stroke:#8a8a8a;stroke-dasharray:2 2}
.seg.plain{stroke:#c9d3cc}
.seg:hover{stroke:var(--ink);stroke-width:1.2px}
.seg.selected{stroke:var(--ink);stroke-width:2px}
.seg:focus{outline:none}
.seg:focus-visible{stroke:var(--yellow);stroke-width:3px}
.seg-labels{font-size:11px;user-select:none}
.centre circle{fill:#FFFFFF;stroke:var(--green);stroke-width:2px}
.centre circle.can-zoom-out{cursor:pointer}
.centre circle:focus{outline:none}
.centre circle:focus-visible{stroke:var(--yellow);stroke-width:4px}
.centre text{font-size:14px;font-weight:bold;fill:var(--ink)}
.centre tspan.hint{font-weight:normal;font-size:12px;fill:var(--text-green)}
.cross-link{fill:none;stroke:var(--ink);stroke-opacity:.55;stroke-width:1.5px}
.landscape-tip{position:fixed;z-index:20;max-width:300px;background:#FFFFFF;border:1px solid var(--ink);border-top:3px solid var(--green);padding:6px 10px;font-size:.82rem;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.landscape-tip span{display:block}
.landscape-tip .tip-sub{color:var(--muted)}
.landscape-tip .tip-sum{margin-top:4px}
.landscape-legend{margin:8px 0}
.landscape-legend h2{font-size:1rem;margin:12px 0 4px}
.landscape-legend h3{font-size:.85rem;margin:8px 0 2px;color:var(--muted);font-weight:normal}
.landscape-legend ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.85rem}
.legend-other{margin-top:8px!important}
.landscape-list{font-size:.88rem}
.landscape-list ul{padding-left:1.2em;margin:2px 0}
.landscape-list li{margin:2px 0;overflow-wrap:anywhere}
.landscape-list .list-link{margin:2px 0 2px 1.2em}
@media (max-width:700px){.landscape-chart{flex-basis:100%}.landscape-panel{flex-basis:100%;border-left:0;border-top:3px solid var(--green);padding:10px 0 0}}
/* Crosswalk editor (decision D19): two framework columns, links drawn as SVG curves in the gutter */
.cw-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.82rem;margin:10px 0}
.cw-key{display:inline-flex;align-items:center;gap:6px}
.cw-status{min-height:1.5em;font-size:.88rem;margin:6px 0}
.cw-editor{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);border-top:2px solid var(--green)}
.cw-col{min-width:0}
.cw-colhead{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule)}
.cw-colhead h2{margin:0;width:100%;font-size:1rem}
.cw-colhead input[type=search]{flex:1 1 10rem;min-width:0}
.cw-scroll{height:70vh;min-height:320px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.cw-col[data-side=target] .cw-scroll{padding-right:0;padding-left:2px}
.cw-section{margin:0;border-bottom:1px solid var(--rule)}
.cw-section > summary{padding:6px 4px;background:var(--soft);font-size:.86rem}
.cw-control-wrap{border-top:1px solid var(--rule)}
.cw-item{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:6px;padding:6px 18px 6px 4px;font-size:.84rem;line-height:1.35;cursor:pointer}
.cw-col[data-side=target] .cw-item{padding:6px 4px 6px 18px}
.cw-item .ref{min-width:2.6em}
.cw-item .cw-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cw-item .cw-count{grid-column:2;font-size:.72rem;color:var(--text-green)}
.cw-item:hover,.cw-item:focus-visible{background:#eef7f1}
.cw-item.selected{background:#fff4cf;outline:2px solid var(--yellow)}
.cw-item.drop{background:#fff4cf;outline:2px dashed var(--ink)}
.cw-item.hl-other{background:#eef7f1;box-shadow:inset 3px 0 0 var(--green)}
.cw-item.cw-miss{display:none}
.cw-objective{padding-left:22px;font-size:.8rem;color:#222}
.cw-col[data-side=target] .cw-objective{padding-left:30px}
.cw-handle{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:2px solid var(--green);background:#FFFFFF;cursor:crosshair;touch-action:none}
.cw-col[data-side=source] .cw-handle{right:2px}
.cw-col[data-side=target] .cw-handle{left:2px}
.cw-item.linked .cw-handle{background:var(--green)}
.cw-more{font-size:.75rem;margin:0 0 4px 3.2em}
.cw-lines{position:absolute;inset:0;pointer-events:none;overflow:visible}
.cw-link{pointer-events:auto;cursor:pointer}
.cw-hit{fill:none;stroke:transparent;pointer-events:stroke}
.cw-line{fill:none;stroke:var(--ink);stroke-width:2;pointer-events:none}
.cw-line.rel-equivalent-to{stroke:var(--green);stroke-width:3}
.cw-line.rel-equal-to{stroke:var(--green);stroke-width:5}
.cw-line.rel-superset-of{stroke:var(--green);stroke-width:3;stroke-dasharray:10 4}
.cw-line.rel-subset-of{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 4}
.cw-line.rel-intersects-with{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:1 5;stroke-linecap:round}
.cw-line.rel-no-relationship{stroke:#8a8a8a;stroke-width:1.5;stroke-dasharray:2 3 8 3}
.cw-line.suggested{stroke:#b07f00;stroke-width:2;stroke-dasharray:4 4;opacity:.75}
.cw-link.off .cw-line{opacity:.3}
.cw-link.folded .cw-line{opacity:.55}
.cw-link:hover .cw-line,.cw-link.hl .cw-line{stroke-width:5;opacity:1}
.cw-editor.focusing .cw-link:not(.hl) .cw-line{opacity:.12}
.cw-line.cw-drag{stroke:var(--yellow);stroke-width:3;stroke-dasharray:none}
.cw-editor.dragging{cursor:crosshair;user-select:none}
.cw-sugg-list{list-style:none;padding:0;margin:0;max-height:28rem;overflow-y:auto}
.cw-sugg{border-left:3px solid var(--yellow);padding:4px 0 4px 12px;margin:10px 0;font-size:.88rem}
.cw-sugg p{margin:4px 0}
.cw-add-form{border-left:3px solid var(--green);padding:4px 0 4px 14px;display:flex;flex-direction:column;gap:6px;max-width:46rem}
.cw-add-form h3{margin:0}
.cw-add-form select{max-width:100%}
.cw-table td{font-size:.85rem}
.cw-from{display:block}
.cw-dialog{border:0;border-top:3px solid var(--green);padding:16px 20px;max-width:min(760px,calc(100vw - 32px));width:100%;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.cw-dialog::backdrop{background:rgba(0,0,0,.35)}
.cw-dialog h2{margin-top:0}
.cw-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:.85rem;max-height:30vh;overflow-y:auto}
.cw-pair p{margin:0;white-space:pre-line}
.cw-rels{border:0;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:4px}
.cw-rels legend{font-weight:bold;font-size:.92rem;margin-bottom:4px}
.cw-rel{display:block;font-size:.86rem}
@media (max-width:700px){
  .cw-editor{grid-template-columns:minmax(0,1fr)}
  .cw-gutter,.cw-lines,.cw-handle{display:none}
  .cw-scroll{height:auto;max-height:55vh}
  .cw-col[data-side=target]{margin-top:14px}
  .cw-item,.cw-col[data-side=target] .cw-item{padding:8px 4px}
  .cw-pair{grid-template-columns:1fr}
}
#cw-app [hidden]{display:none!important}

/* Crosswalk chord diagram (decision D19; static/js/chord.js) */
.chord-controls{display:flex;flex-wrap:wrap;gap:10px 20px;margin:12px 0 4px}
.chord-controls label{display:block;font-size:.8rem;color:var(--muted);margin:0 0 2px}
.chord-controls select{max-width:100%}
.chord-controls > div{min-width:0;max-width:100%}
.chord-shown{font-size:.9rem;margin:6px 0;font-weight:bold}
.chord-body{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:flex-start;margin:8px 0}
.chord-chart{flex:1 1 560px;min-width:0;max-width:760px}
.chord-svg svg{display:block;width:100%;height:auto;font-family:Arial,Helvetica,sans-serif}
.chord-panel{flex:1 1 300px;min-width:0;border-left:3px solid var(--green);padding:2px 0 2px 16px;font-size:.9rem;overflow-wrap:anywhere}
.chord-panel h2{margin:0 0 6px;font-size:1.05rem}
.chord-panel h3{margin:12px 0 4px;font-size:.92rem}
.chord-panel .panel-sub{margin:0 0 8px;font-size:.85rem}
.chord-back{font-size:.85rem;margin:0 0 6px}
.chord-ribbon-list,.chord-unlinked{padding-left:0;list-style:none;margin:4px 0}
.chord-ribbon-list li,.chord-unlinked li{margin:3px 0}
.chord-unlinked li{border-left:3px solid var(--rule);padding-left:8px;font-size:.85rem}
.chord-links{padding-left:1.2em;margin:8px 0}
.chord-link{margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.chord-link p{margin:3px 0}
.chord-item .lab{margin:0}
.chord-rel{font-size:.86rem}
.chord-note{font-size:.86rem;border-left:3px solid var(--green);padding-left:8px}
.chord-status{display:block;font-size:.8rem;border-left:3px solid #E3E3E3;padding-left:6px;margin-top:2px}
.chord-status.tone-gap{border-left-color:#8C2D04}
.chord-status.tone-met{border-left-color:#039E4B}
.chord-status.tone-out_of_scope{border-left-style:dashed;border-left-color:#8a8a8a}
.chord-indicative{border-left:3px solid var(--yellow);padding-left:8px}
.chord-open{font-size:.88rem}
.chord-diagram .fw-title{font-size:17px;font-weight:bold}
.chord-diagram .fw-title.fw-source{fill:#3D4A5C}
.chord-diagram .fw-title.fw-target{fill:var(--text-green)}
.chord-diagram .fw-sub{font-size:12px;fill:var(--muted)}
.chord-diagram .fw-divider{stroke:var(--rule);stroke-width:1.5px;stroke-dasharray:4 4}
.chord-diagram .section-label{font-size:12.5px;fill:var(--ink)}
.chord-diagram .section.empty .section-label{fill:var(--muted)}
.chord-diagram.narrow .section-label{font-size:16px}
.chord-diagram.narrow .fw-title{font-size:26px}
.chord-diagram.narrow .fw-sub{font-size:19px}
.chord-diagram .section-arc{cursor:pointer;stroke:#FFFFFF;stroke-width:.5px}
.chord-diagram .section.empty .section-arc{stroke:#8a8a8a;stroke-dasharray:2 2}
.chord-diagram .section.picked .section-arc{stroke:var(--ink);stroke-width:2px;stroke-dasharray:none}
.chord-diagram .section.picked .section-label{font-weight:bold}
.chord-diagram .section-arc:focus-visible,.chord-diagram .ribbon:focus-visible{outline:none;stroke:var(--yellow);stroke-width:3px}
.chord-diagram .ribbon{cursor:pointer;stroke-width:.5px;fill-opacity:.72;stroke-opacity:.6}
.chord-diagram .ribbon.rel-no-relationship{stroke:#555555;stroke-dasharray:3 2;stroke-width:1px}
.chord-diagram .ribbon.picked{stroke-opacity:1}
.chord-diagram .ribbon.chosen{stroke:var(--ink);stroke-width:2px;stroke-opacity:1}
.chord-diagram .client-end{stroke:#8a8a8a;stroke-width:.4px;pointer-events:none}
.chord-diagram .client-end.tone-out_of_scope{stroke-dasharray:2 1}
.chord-legend{margin:8px 0}
.chord-legend h2{font-size:1rem;margin:12px 0 4px}
.chord-legend h3{font-size:.85rem;margin:8px 0 2px;color:var(--muted);font-weight:normal}
.chord-legend ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.85rem}
.chord-table{font-size:.88rem}
.chord-matrix td.num{text-align:right;font-variant-numeric:tabular-nums}
.chord-matrix caption{text-align:left;font-weight:bold;margin:0 0 4px}
@media (max-width:700px){.chord-chart{flex-basis:100%}.chord-panel{flex-basis:100%;border-left:0;border-top:3px solid var(--green);padding:10px 0 0}}