/* Kit v3 Charter reader. The reading surface fills the screen; the contents rail, the clause inspector and the version
   strip float over it. Tokens from v3.css only. Logical properties, so the page works right to left. Red marks only the
   section being read and the one action (the authoritative text). */
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The reading surface */
.ch-stage { overflow: auto; scrollbar-width: thin; padding: 88px 436px 140px 436px; padding-inline: 436px 436px; background: transparent; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent 0, #000 84px, #000 calc(100% - 118px), transparent calc(100% - 100px)); mask-image: linear-gradient(transparent 0, #000 84px, #000 calc(100% - 118px), transparent calc(100% - 100px)); }
/* the reading column floats over the clause graph as a sheet */
.ch-doc { max-width: 660px; min-width: 0; margin-inline: auto; position: relative; pointer-events: auto; padding: 6px 24px 24px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--sh); }
.ch-doc > * { min-width: 0; }
.ch-auth > div { min-width: 0; }
.ch-auth .btn { max-width: 100%; height: auto; min-height: 30px; padding-block: 5px; white-space: normal; overflow-wrap: anywhere; text-align: start; }
.ch-meta span { min-width: 0; overflow-wrap: anywhere; }

/* The ground: the clause graph (charter.js graph()), full bleed under the panels */
.ch-graph { width: 100%; height: 100%; display: block; background: radial-gradient(120% 70% at 50% 40%, var(--bg-1), var(--bg) 72%); }
.ch-graph .cg-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.ch-graph .cg-ring--in { stroke-dasharray: 2 5; }
.ch-graph .cg-e { fill: none; stroke: var(--line-2); stroke-width: 1; }
.ch-graph .cg-e.is-on { stroke: var(--ink-2); stroke-width: 1.3; }
.ch-graph .cg-n { cursor: pointer; }
.ch-graph .cg-n circle, .ch-graph .cg-n rect { fill: var(--bg); stroke: var(--ink-3); stroke-width: 1.3; }
.ch-graph .cg-n--s.has-ref circle { fill: var(--ink-3); }
.ch-graph .cg-n.is-lit circle, .ch-graph .cg-n.is-lit rect { stroke: var(--ink); fill: var(--ink); }
.ch-graph .cg-n.is-on circle { fill: var(--red); stroke: var(--red); }
.ch-graph .cg-n text { font: 500 11px/1 var(--f); fill: var(--ink-3); }
.ch-graph .cg-n--d text { font-family: var(--m); }
.ch-graph .cg-n.is-lit text, .ch-graph .cg-n.is-on text { fill: var(--ink); }
.ch-graph .cg-n:hover text { fill: var(--ink); }

.ch-head { padding-block: 18px 8px; }
.ch-head h2 { margin: 8px 0 18px; font: 600 38px/1.08 var(--f); letter-spacing: -.025em; }
.ch-auth { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg-1); position: relative; overflow: hidden; }
.ch-auth::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px; background: var(--pastel); }
.ch-auth svg { color: var(--ink-2); margin-block-start: 1px; }
.ch-auth b { display: block; font-weight: 600; font-size: 14px; }
.ch-auth span { display: block; color: var(--ink-2); margin-block: 4px 10px; }
.ch-auth .btn { height: 30px; font-size: 12.5px; }
.ch-meta { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin-block-start: 14px; background: var(--line); border-radius: var(--r); overflow: hidden; }
.ch-meta span { background: var(--bg); padding: 10px 12px; font: 600 18px/1.1 var(--f); font-variant-numeric: tabular-nums; }
.ch-meta em { display: block; font: 400 11px/1.3 var(--f); color: var(--ink-3); margin-block-end: 5px; font-style: normal; }

.ch-sec { padding-block: 26px 6px; border-block-start: 1px solid var(--line); margin-block-start: 26px; scroll-margin-top: 84px; transition: opacity .2s var(--ease); }
.ch-sec.is-dim { opacity: .32; }
.ch-sec__hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; position: relative; }
.ch-anchor { flex: none; min-width: 30px; font: 500 12px/1 var(--m); color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.ch-anchor:hover { color: var(--ink); }
.ch-sec__hd h3 { margin: 0; font: 600 22px/1.2 var(--f); letter-spacing: -.015em; flex: 1 1 auto; }
.ch-ref { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding-inline: 8px; border-radius: var(--r); border: 1px solid var(--line-2); font: 500 11.5px/1 var(--m); color: var(--ink); white-space: nowrap; }
.ch-ref em { font: 400 10.5px/1 var(--f); color: var(--ink-3); font-style: normal; }
.ch-ref--none { border-style: dashed; color: var(--ink-3); font-family: var(--f); }
.ch-body { margin-block-start: 12px; }
.ch-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.62; color: var(--ink); max-width: 64ch; }
.ch-body p b { display: block; font-weight: 600; margin-block-end: 2px; }
mark { background: var(--red-soft); color: var(--ink); border-radius: var(--r); padding-inline: 1px; box-shadow: 0 -1.5px 0 var(--red) inset; }
.ch-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-block-start: 12px; }
.ch-impl { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-impl a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-1); color: var(--ink); text-decoration: none; font-size: 12.5px; font-weight: 500; }
.ch-impl a:hover { border-color: var(--ink-3); }
.ch-srcs { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ch-srcs span { font: 400 10.5px/1.4 var(--m); color: var(--ink-3); }
.ch-decs { margin-block-start: 12px; display: grid; gap: 6px; }
.ch-dec { display: grid; grid-template-columns: 40px 64px 1fr; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-1); }
.ch-dec p { margin: 0; font-size: 13px; color: var(--ink-2); }
.ch-dec__id { font: 600 12px/1 var(--m); }
.ch-dec__st { font-size: 11px; color: var(--ink-3); text-transform: capitalize; }
.ch-dec__st--decided { color: var(--ink); }
.ch-dec--sm { grid-template-columns: 34px 1fr; padding: 8px 10px; }
.ch-dec--sm p { grid-column: 1 / -1; font-size: 12.5px; }
.ch-dseg { margin-block-start: 12px; max-width: 300px; }
.ch-dseg em { font-style: normal; color: var(--ink-3); }
.ch-terms { margin: 12px 0 0; width: 100%; border-collapse: collapse; font-size: 13px; }
.ch-terms th, .ch-terms td { text-align: start; vertical-align: top; padding: 9px 12px 9px 0; padding-inline: 0 12px; border-block-start: 1px solid var(--line); }
.ch-terms thead th { font: 500 11px/1 var(--f); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; border: 0; padding-block: 0 8px; }
.ch-terms tbody th { font-weight: 600; white-space: nowrap; width: 1%; }
.ch-terms td { color: var(--ink-2); }

/* Contents rail */
.ch-toc { inset-block: 76px 120px; inset-inline-start: 76px; width: 340px; }
.ch-hdrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chip--sm { height: 20px; padding-inline: 7px; font-size: 11px; }
.ch-toc .title { font-size: 22px; }
.ch-q { display: flex; align-items: center; gap: 8px; height: 34px; margin-block-start: 12px; padding-inline: 10px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-3); }
.ch-q:focus-within { border-color: var(--ink-3); }
.ch-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; }
.ch-q em { font-style: normal; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-toc__l { list-style: none; margin: 0; padding: 8px; }
.ch-toc__l a { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: var(--r); color: inherit; text-decoration: none; position: relative; }
.ch-toc__l a:hover { background: var(--bg-2); }
.ch-toc__l a[aria-current] { background: var(--bg-2); }
.ch-toc__l a[aria-current]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 8px; width: 2px; border-radius: var(--r); background: var(--red); }
.ch-toc__l a.is-dim { opacity: .38; }
.ch-toc__n { font: 500 11px/1 var(--m); color: var(--ink-3); }
.ch-toc__t b { display: block; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ch-toc__t small { display: block; color: var(--ink-3); font-size: 11.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ch-toc__l i { font-style: normal; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-toc__l em { font-style: normal; font-size: 11px; color: var(--red); background: var(--red-soft); border-radius: var(--r); padding: 2px 6px; font-variant-numeric: tabular-nums; }

/* Inspector */
.ch-insp { width: 340px; max-height: calc(100% - 196px); }
.ch-insp .title { font-size: 20px; }
.ch-is { padding: 12px 16px 2px; }
.ch-is + .ch-is { border-block-start: 1px solid var(--line); margin-block-start: 10px; }
.ch-is > .eyebrow { display: block; margin-block-end: 8px; }
.ch-clause { padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg-1); }
.ch-clause b { display: block; font: 600 14px/1.2 var(--m); }
.ch-clause small { display: block; color: var(--ink-3); font-size: 11.5px; margin-block-start: 4px; }
.ch-clause--none { border-style: dashed; }
.ch-clause--none b { font-family: var(--f); color: var(--ink-2); }
.ch-link { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 10px; margin-block-end: 6px; border-radius: var(--r); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.ch-link:hover { border-color: var(--ink-3); }
.ch-link span { font-weight: 500; }
.ch-link small { grid-row: 2; color: var(--ink-3); font: 400 11px/1.2 var(--m); }
.ch-link svg { grid-row: 1 / span 2; grid-column: 2; color: var(--ink-3); }
.ch-bars { display: grid; gap: 4px; margin-block-end: 6px; }
.ch-bars span { height: 2px; border-radius: 1px; background: var(--line-2); overflow: hidden; }
.ch-bars i { display: block; height: 100%; width: var(--w); background: var(--pastel); border-radius: inherit; }
.ch-note { display: block; margin: 0 0 6px; color: var(--ink-3); font-size: 12px; }
.ch-src { font: 400 11px/1.45 var(--m); color: var(--ink-2); padding: 4px 0; }
.ch-kv { display: flex; justify-content: space-between; padding: 7px 0; border-block-start: 1px solid var(--line); }
.ch-kv b { font-variant-numeric: tabular-nums; }

/* Version strip */
.ch-strip { inset-inline: 76px 76px; grid-template-columns: 220px minmax(0,1fr) 260px; }
.ch-vline { display: grid; grid-template-rows: auto auto auto; align-content: center; gap: 8px; padding-inline: 18px; min-width: 0; }
.ch-vers { display: flex; align-items: center; gap: 12px; }
.ch-vnode { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--m); }
.ch-vnode i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.ch-vnone { color: var(--ink-3); font-size: 11.5px; }
.ch-read { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 3px; }
.ch-read button { height: 16px; padding: 0; border: 0; background: transparent; display: grid; align-items: center; }
.ch-read button i { display: block; height: 2px; border-radius: 1px; background: var(--line-2); }
.ch-read button.has-ref i { background: color-mix(in srgb, var(--ink-3) 70%, transparent); }
.ch-read button.is-past i { background: var(--pastel); background-size: 900% 100%; }
.ch-read button.is-on i { background: var(--red); height: 2px; }
.ch-read button:hover i { background: var(--ink-2); }
.ch-read__k { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.ch-read__k span:first-child { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.ch-key { display: inline-block; width: 14px; height: 4px; border-radius: var(--r); background: color-mix(in srgb, var(--ink-3) 70%, transparent); margin-inline-end: 6px; vertical-align: 2px; }
.ch-strip__r { gap: 6px; justify-content: center; }
.ch-strip__r .btn { justify-content: center; }
.ch-strip__r small { color: var(--ink-3); font-size: 11.5px; }
.toast { position: absolute; inset-block-end: 130px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 40; padding: 10px 14px; }
[dir="rtl"] .toast { transform: translateX(50%); }
.ch-phonebtn { display: none; }
.ch-pal__n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 1180px) and (min-width: 761px) {
  .ch-stage { padding-inline: 436px 40px; }
  .ch-insp { display: none; }
}
@media (max-width: 760px) {
  .ch-stage { padding: 128px 8px 90px; }
  .ch-doc { padding: 4px 14px 18px; background: var(--glass-2); }
  .ch-graph .cg-n text { display: none; }
  .ch-sec__hd h3 { min-width: 0; overflow-wrap: anywhere; }
  .ch-body p, .ch-dec p { overflow-wrap: anywhere; }
  .ch-terms { table-layout: fixed; }
  .ch-terms td, .ch-terms th { overflow-wrap: anywhere; }
  .ch-doc::before { display: none; }
  .ch-stage { -webkit-mask-image: linear-gradient(transparent 0, transparent 112px, #000 150px); mask-image: linear-gradient(transparent 0, transparent 112px, #000 150px); }
  .ch-head h2 { font-size: 28px; }
  .ch-meta { grid-template-columns: 1fr 1fr; }
  .ch-terms tbody th { white-space: normal; width: 34%; }
  .ch-body p { font-size: 14.5px; }
  .ch-dec { grid-template-columns: 34px 1fr; }
  .ch-dec p { grid-column: 1 / -1; }
  .ch-toc { display: none; max-height: 70vh !important; }
  .ch-toc-on .ch-toc { display: flex; z-index: 30; }
  .ch-insp { display: none; }
  .ch-phonebtn { display: inline-flex; position: fixed; z-index: 31; inset-block-end: 14px; inset-inline-end: 14px; background: var(--glass-2); backdrop-filter: blur(16px); box-shadow: var(--sh); }
  .ch-toc-on .ch-phonebtn { inset-block-end: calc(70vh + 18px); }
}