/* Endless PL/I manuals: web edition.
   Follows the Zen manual: IBM Plex, cool paper tones, a sticky contents
   pane, light and dark themes.  Class names are those the DocBook XSL
   stylesheets generate. */

/* ---- tokens: light is the base set, both dark paths only redefine ---- */
:root{
  --paper:#FFFFFF; --panel:#FFFFFF; --sunk:#ECEFF2; --code-bg:#EEF2F5;
  --ink:#1A1E24; --ink-2:#4A535E; --ink-3:#6E7883;
  --rule:#D7DDE3; --rule-soft:#E6EBEF;
  /* edges of code panels and inline code, and of syntax panels */
  --code-edge:#E6EBEF; --syntax-edge:#D7DDE3;
  --signal:#8E3E2A; --signal-bg:#F8E9E4; --signal-edge:#E7C6BB;
  /* the company colours (es.solutions): navy for headings and links; the
     bright blue for rules and bars only (too light for text) */
  --accent:#1E3F81; --heading:#1E3F81; --brand:#2FA4E7;
  /* syntax highlighting in program listings (also in xsl/fo.xsl) */
  --hl-keyword:#1E3F81; --hl-type:#0B6B6B; --hl-builtin:#6E3C99; --hl-string:#3D6B12;
  --hl-comment:#6E7883; --hl-number:#9A4A00; --hl-preproc:#A0306A; --hl-variable:#8A5A00;
  --hl-label:#4A535E;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14181D; --panel:#1B2028; --sunk:#10141A; --code-bg:#151A21;
    --ink:#E4E9ED; --ink-2:#A7B1BC; --ink-3:#79838E;
    --rule:#2B333D; --rule-soft:#222932;
    --code-edge:#3A4552; --syntax-edge:#46525F;
    --signal:#D98A70; --signal-bg:#2B1C17; --signal-edge:#4A2E25;
    --accent:#6CC0F0; --heading:#A9C6F5; --brand:#2FA4E7;
    --hl-keyword:#8DB8F2; --hl-type:#6CCFC6; --hl-builtin:#C7A3EE; --hl-string:#A5D47F;
    --hl-comment:#8A949F; --hl-number:#EDB07A; --hl-preproc:#EE93C2; --hl-variable:#E4C56C;
    --hl-label:#C4CCD5;
  }
}
:root[data-theme="dark"]{
  --paper:#14181D; --panel:#1B2028; --sunk:#10141A; --code-bg:#151A21;
  --ink:#E4E9ED; --ink-2:#A7B1BC; --ink-3:#79838E;
  --rule:#2B333D; --rule-soft:#222932;
  --code-edge:#3A4552; --syntax-edge:#46525F;
  --signal:#D98A70; --signal-bg:#2B1C17; --signal-edge:#4A2E25;
  --accent:#6CC0F0; --heading:#A9C6F5; --brand:#2FA4E7;
  --hl-keyword:#8DB8F2; --hl-type:#6CCFC6; --hl-builtin:#C7A3EE; --hl-string:#A5D47F;
  --hl-comment:#8A949F; --hl-number:#EDB07A; --hl-preproc:#EE93C2; --hl-variable:#E4C56C;
  --hl-label:#C4CCD5;
}

*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  text-wrap:balance; line-height:1.22; font-weight:600; margin:0; color:var(--heading)}
code,pre,kbd,.mono,.literal,.code,.option,.replaceable,.keycap{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
a{color:var(--accent)}

/* ---- shell ---- */
.wrap{max-width:1180px; margin:0 auto; padding:0 28px 64px}
.topbar{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline;
  border-bottom:1px solid var(--rule); padding:18px 0 14px; margin-bottom:38px}
.topbar .book{font-family:"IBM Plex Serif",serif; font-weight:600; font-size:17px;
  color:var(--heading); text-decoration:none}
.topbar .edition{font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

.cols{display:grid; grid-template-columns:230px minmax(0,1fr); gap:54px; align-items:start}

/* ---- the contents pane ---- */
nav.toc{position:sticky; top:22px; max-height:calc(100vh - 44px); overflow-y:auto;
  font-size:13.5px; padding-right:6px}
nav.toc > p{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}
nav.toc a{display:flex; gap:8px; padding:4px 0 4px 12px; color:var(--ink-2);
  text-decoration:none; border-left:2px solid var(--rule-soft); line-height:1.4}
nav.toc a .num{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3);
  min-width:1.6em; font-variant-numeric:tabular-nums}
nav.toc a:hover{color:var(--accent); border-left-color:var(--brand)}
nav.toc a.current{color:var(--heading); border-left-color:var(--brand); font-weight:600}
nav.toc a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
nav.toc .sections{margin:2px 0 8px}
nav.toc .sections a{padding-left:30px; font-size:12.8px; border-left-color:var(--rule-soft)}
/* Narrow screens: one column, the contents above the page and scrolling
   away with it.  After the rules above, so that it overrides them. */
@media (max-width:940px){
  .cols{grid-template-columns:minmax(0,1fr); gap:0}
  nav.toc{position:static; max-height:none; margin-bottom:32px;
    border-bottom:1px solid var(--rule); padding-bottom:16px}
  nav.toc .sections{display:none}
}

main{min-width:0; max-width:76ch}

/* ---- front page masthead ---- */
.masthead{border-bottom:1px solid var(--rule); padding:10px 0 30px; margin-bottom:38px}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}
.masthead h1{font-size:clamp(34px,5.5vw,52px); letter-spacing:-.02em}
.standfirst{max-width:62ch; color:var(--ink-2); font-size:18px; margin:16px 0 0}
.spec{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-2); margin:0 0 4px}
.standfirst + .spec{margin-top:22px}
dl.spec{margin:22px 0 0; padding-top:12px; border-top:1px solid var(--rule)}
dl.spec dt{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:10px 0 2px}
dl.spec dt:first-child{margin-top:0}
dl.spec dd{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-2); margin:0 0 0 18px}
details.legal{margin-top:22px; font-size:13.5px; color:var(--ink-2)}
details.legal summary{cursor:pointer; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
details.legal p{max-width:70ch}

/* book table of contents on the front page */
.book > .toc > p, .toc > p b{font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.book > .toc dl{margin:0}
.book > .toc dt{margin:14px 0 2px; font-family:"IBM Plex Serif",serif; font-weight:600; font-size:17px}
.book > .toc dd{margin:0 0 0 22px}
.book > .toc dd dt{font-family:"IBM Plex Sans",sans-serif; font-weight:400; font-size:15px; margin:3px 0}
.book > .toc a{text-decoration:none}
.book > .toc a:hover{text-decoration:underline}

/* ---- chapter and section headings ---- */
.titlepage{margin:0}
.chapter > .titlepage, .appendix > .titlepage, .preface > .titlepage,
.index > .titlepage{border-bottom:2px solid var(--brand); padding-bottom:18px; margin-bottom:28px}
h1.title{font-size:clamp(30px,4.5vw,40px); letter-spacing:-.015em}
h2.title{font-size:27px; letter-spacing:-.012em; margin:56px 0 12px}
h3.title{font-size:20px; margin:38px 0 10px}
h4.title{font-size:17px; margin:28px 0 8px}
h5.title, .simplesect h3.title, .simplesect h4.title, .simplesect h5.title,
h4.bridgehead, h5.bridgehead, h6.bridgehead{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:26px 0 8px}
p{margin:0 0 15px}
ul,ol{margin:0 0 15px; padding-left:22px}
li{margin:0 0 6px}
li > p{margin-bottom:6px}

/* ---- inline semantics ---- */
.replaceable{font-style:italic}
code, .literal, .code, .option{background:var(--code-bg); border:1px solid var(--code-edge);
  border-radius:3px; padding:1px 5px; font-size:.86em}
pre .replaceable, pre code{background:none; border:0; padding:0; font-size:inherit}
.keycap{display:inline-block; font-size:.78em; padding:0 6px; border:1px solid var(--rule);
  border-bottom-width:2px; border-radius:3px; background:var(--panel); line-height:1.5}

/* ---- code, syntax, callouts ---- */
pre{background:var(--code-bg); border:1px solid var(--code-edge); border-radius:3px;
  padding:14px 17px; overflow-x:auto; font-size:13.2px; line-height:1.6; margin:0 0 16px}
pre.synopsis{background:var(--panel); border-color:var(--syntax-edge); border-left:3px solid var(--brand)}
pre .co{color:var(--signal); font-family:"IBM Plex Sans","DejaVu Sans",sans-serif}
pre .hl-keyword{color:var(--hl-keyword); font-weight:600}
pre .hl-type{color:var(--hl-type)}
pre .hl-builtin{color:var(--hl-builtin)}
pre .hl-string{color:var(--hl-string)}
pre .hl-comment{color:var(--hl-comment); font-style:italic}
pre .hl-number{color:var(--hl-number)}
pre .hl-preproc{color:var(--hl-preproc)}
pre .hl-variable{color:var(--hl-variable)}
pre .hl-label{color:var(--hl-label); font-weight:600}
.calloutlist{margin:0 0 18px}
.calloutlist dl, dl.calloutlist{display:grid; grid-template-columns:2em minmax(0,1fr); gap:4px 6px; margin:0}
.calloutlist dt{color:var(--signal); margin:0}
.calloutlist dt a{color:inherit; text-decoration:none}
.calloutlist dd{margin:0}
.calloutlist dd p{margin:0 0 6px}
.calloutlist img, .calloutlist table{border:0}

/* captions in the Zen manner: small caps label with a rule */
.example-title, .figure-title, .table-title, .example > .title,
.figure > .title, .table > .title, p.title{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin:22px 0 8px; display:flex;
  gap:10px; align-items:center; font-weight:500}
.example-title::after, .figure-title::after, .table-title::after,
p.title::after{content:""; flex:1; height:1px; background:var(--rule-soft)}
p.title b{font-weight:600}

/* ---- parameter lists ---- */
.variablelist dl{margin:0 0 16px}
.variablelist dt{font-family:"IBM Plex Mono",monospace; font-size:14px; margin:14px 0 4px}
.variablelist dd{margin:0 0 0 22px}

/* ---- tables ---- */
.table-contents, .informaltable{overflow-x:auto; margin:0 0 18px;
  border:1px solid var(--rule); border-radius:3px}
.informaltable[style], .informaltable table[style*="none"]{border:0}
table{border-collapse:collapse; width:100%; font-size:14px; background:var(--panel)}
th,td{text-align:left; padding:8px 13px; border:0; border-bottom:1px solid var(--rule-soft);
  vertical-align:top}
th{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; background:var(--sunk)}
tr:last-child td{border-bottom:0}
td p, th p{margin:0 0 6px}
td p:last-child{margin:0}

/* ---- notes ---- */
div.note, div.important, div.caution, div.warning, div.tip{
  border:1px solid var(--rule); border-left:3px solid var(--ink-3);
  background:var(--panel); border-radius:3px; padding:12px 16px; margin:0 0 18px; font-size:14.6px}
div.important, div.caution, div.warning{border-left-color:var(--signal);
  background:var(--signal-bg); border-color:var(--signal-edge)}
div.note h3, div.important h3, div.caution h3, div.warning h3, div.tip h3{
  font-family:"IBM Plex Sans",sans-serif; font-size:13px; letter-spacing:.02em; margin:0 0 4px}
div.note p:last-child, div.important p:last-child{margin-bottom:0}

/* ---- figures ---- */
.figure, .informalfigure{margin:0 0 22px}
.mediaobject img, .inlinemediaobject img{max-width:100%; height:auto}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mediaobject img{background:#fff; padding:6px; border-radius:3px}
}

:root[data-theme="dark"] .mediaobject img{background:#fff; padding:6px; border-radius:3px}

/* redrawn figures (inline SVG): sized to the column, themed */
.svg-figure svg{display:block; width:100%; max-width:560px; height:auto; margin:4px 0 6px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) main .pli-fig .box,
  :root:not([data-theme="light"]) main .pli-fig .unused{fill:var(--sunk); stroke:var(--ink-2)}
  :root:not([data-theme="light"]) main .pli-fig .cell{fill:var(--panel); stroke:var(--ink-2)}
  :root:not([data-theme="light"]) main .pli-fig .ln{stroke:var(--ink)}
  :root:not([data-theme="light"]) main .pli-fig .brace{stroke:var(--ink-2)}
  :root:not([data-theme="light"]) main .pli-fig .acc{stroke:var(--accent)}
  :root:not([data-theme="light"]) main .pli-fig .head{fill:var(--ink)}
  :root:not([data-theme="light"]) main .pli-fig .head-acc{fill:var(--accent)}
  :root:not([data-theme="light"]) main .pli-fig text{fill:var(--ink)}
  :root:not([data-theme="light"]) main .pli-fig .note{fill:var(--ink-2)}
  :root:not([data-theme="light"]) main .pli-fig .note-acc{fill:var(--accent)}
  :root:not([data-theme="light"]) main .pli-fig .num{fill:var(--ink-2)}
  :root:not([data-theme="light"]) main .pli-fig .dash{stroke:var(--ink-2)}
  /* callouts: a light disc with a dark digit, as in the text */
  :root:not([data-theme="light"]) main .pli-fig .co{fill:var(--ink)}
  :root:not([data-theme="light"]) main .pli-fig text.co-n{fill:var(--paper)}
}

:root[data-theme="dark"] main .pli-fig .box,
:root[data-theme="dark"] main .pli-fig .unused{fill:var(--sunk); stroke:var(--ink-2)}
:root[data-theme="dark"] main .pli-fig .cell{fill:var(--panel); stroke:var(--ink-2)}
:root[data-theme="dark"] main .pli-fig .ln{stroke:var(--ink)}
:root[data-theme="dark"] main .pli-fig .brace{stroke:var(--ink-2)}
:root[data-theme="dark"] main .pli-fig .acc{stroke:var(--accent)}
:root[data-theme="dark"] main .pli-fig .head{fill:var(--ink)}
:root[data-theme="dark"] main .pli-fig .head-acc{fill:var(--accent)}
:root[data-theme="dark"] main .pli-fig text{fill:var(--ink)}
:root[data-theme="dark"] main .pli-fig .note{fill:var(--ink-2)}
:root[data-theme="dark"] main .pli-fig .note-acc{fill:var(--accent)}
:root[data-theme="dark"] main .pli-fig .num{fill:var(--ink-2)}
:root[data-theme="dark"] main .pli-fig .dash{stroke:var(--ink-2)}
/* callouts: a light disc with a dark digit, as in the text */
:root[data-theme="dark"] main .pli-fig .co{fill:var(--ink)}
:root[data-theme="dark"] main .pli-fig text.co-n{fill:var(--paper)}

/* converted figures (OpenVMS PostScript art, import/vms/ps2svg.py): shown at
   their print size, black on white, so on a light panel in the dark theme */
.svg-figure svg.pli-art{width:auto; max-width:100%}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .svg-figure svg.pli-art{background:#fff; padding:8px; border-radius:3px}
}
:root[data-theme="dark"] .svg-figure svg.pli-art{background:#fff; padding:8px; border-radius:3px}

/* ---- footnotes ---- */
.footnotes{border-top:1px solid var(--rule); margin-top:40px; padding-top:12px; font-size:13.5px;
  color:var(--ink-2)}
.footnotes hr{display:none}
sup .footnote, a.footnote{text-decoration:none}

/* ---- index ---- */
.index dl{margin:0}
.index dt{margin:2px 0}
.index dd{margin:0 0 0 22px}
.index .indexdiv h3{font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.14em; color:var(--ink-3); margin:22px 0 6px;
  border-bottom:1px solid var(--rule-soft); padding-bottom:4px}

/* ---- pager and footer ---- */
.pager{display:flex; justify-content:space-between; gap:18px; border-top:1px solid var(--rule);
  margin-top:56px; padding-top:18px}
.pager a{display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  font-family:"IBM Plex Serif",serif; font-weight:600; max-width:48%}
.pager a.next{margin-left:auto; text-align:right}
.pager a span{font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
.pager a:hover{color:var(--accent)}
.foot{border-top:1px solid var(--rule); margin-top:48px; padding-top:18px;
  color:var(--ink-3); font-size:13px}
.foot p{margin:0}

@media (max-width:600px){
  .wrap{padding:0 16px 48px}
  pre{font-size:12.4px; padding:12px 13px}
}

/* "Table of Contents" on the front page */
.toc-title{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 4px}

/* lists numbered with callout digits (orderedlist role="callout") */
@counter-style pli-callout {
  system: fixed;
  symbols: "\2776" "\2777" "\2778" "\2779" "\277A" "\277B" "\277C" "\277D" "\277E" "\277F";
  suffix: "  ";
}
.callout ol, ol.callout { list-style: pli-callout; }
.callout ol li::marker, ol.callout li::marker { color: var(--signal); }

/* message lists: the identifier is code, the message text is not */
.messages .variablelist dt{font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:15px; font-weight:500}

/* ---- theme switch ---- */
.theme-toggle{margin-left:auto; align-self:center; font:500 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); background:var(--panel);
  border:1px solid var(--rule); border-radius:999px; padding:6px 12px; cursor:pointer}
.theme-toggle:hover{color:var(--ink); border-color:var(--ink-3)}
.theme-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---- website (make site): home link, downloads, the catalogue ---- */
.topbar .home{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); text-decoration:none}
.topbar .home::after{content:" /"; color:var(--ink-3)}
.downloads{margin:18px 0 0}
.downloads a{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; border:1px solid var(--rule);
  border-radius:999px; padding:6px 12px; background:var(--panel)}
.downloads a:hover{border-color:var(--brand)}
main.catalog{max-width:none}
.catalog .product{margin:0 0 40px}
.catalog .product h2{font-size:26px; margin:0 0 4px}
.catalog .product-about{color:var(--ink-2); margin:0 0 16px}
.catalog .manuals{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:16px}
.catalog .manuals li{background:var(--panel); border:1px solid var(--rule); border-radius:4px;
  padding:16px 18px; display:flex; flex-direction:column}
.catalog .manual-head{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; margin:0 0 8px}
.catalog .manual-head h3{font-size:18px; margin:0}
.catalog .order{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--ink-3)}
.catalog .manuals p{margin:0 0 12px; color:var(--ink-2); font-size:15px}
.catalog .manuals p.links{margin-top:auto; margin-bottom:0; font-size:14px; color:var(--ink)}
.catalog .size{font-size:12px; color:var(--ink-3)}
.catalog .sep{color:var(--ink-3)}