/* /portalscript — the PortalScript developer portal, in Portalis OS
   (os.css): one window with an address bar, the task pane on the left and
   a reference library's page on the right, after the developer libraries
   of the time (a pale banner, Tahoma, See also). code stays the club's:
   vtFont, white on black, in a sunken console frame. */

.ps {
  width: min(1000px, calc(100% - 32px));
  margin: 3.4em auto 3em;
}

.ps__frame { display: grid; grid-template-columns: 216px minmax(0, 1fr); }
.ps__doc { background: #fff; border-left: 1px solid var(--os-sh); min-width: 0; display: flex; flex-direction: column; }

/* the library's banner */
.ps__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  background: linear-gradient(90deg, #dff1f3, #f4fafa 55%, #fff);
  border-bottom: 1px solid #c4d9dc;
}
.ps__logo { width: 40px; height: 40px; flex: none; filter: drop-shadow(1px 2px 0 rgba(7, 47, 61, 0.35)); }
.ps__head p { margin: 0; }
.ps__brand { font: 28px/1 vtFont, monospace; color: var(--os-t1); letter-spacing: 0.02em; }
.ps__by { font-size: 11px; color: #5d6b6a; }

/* the os's links, not the club's black hover */
.os-win a,
.os-win a:visited { color: var(--os-t2); }
.os-win a:hover,
.os-win a:focus-visible { background: none; color: var(--os-t1); text-decoration: underline; outline: none; }
.os-win a.os-btn,
.os-win a.os-btn:visited { color: var(--os-ink); text-decoration: none; }

.ps__main { padding: 2px 22px 18px; min-height: 22em; flex: 1; font-size: 14px; line-height: 1.5; }
.ps__main p,
.ps__main ul { margin: 0.5em 0; }
.ps__main ul { padding-left: 1.2em; }

/* the page's own title, the club's face in the os's colour */
.ps__main h1.ps__h {
  margin: 0.1em 0 0.25em;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  font: 36px/1 vtFont, monospace;
  color: var(--os-t1);
  letter-spacing: 0.01em;
  white-space: normal;
}
.ps__main h1.ps__h::before,
.ps__main h1.ps__h::after { content: none; }
/* section heads: bold, ruled, the rule fading out */
.ps__main h2 {
  display: block;
  margin: 1.4em 0 0.5em;
  padding: 0 0 3px;
  background: none;
  color: var(--os-t1);
  font: bold 14px/1.3 var(--os-ui);
  letter-spacing: 0;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--os-t2), rgba(21, 122, 144, 0.25) 60%, transparent) 1;
}
.ps__main h3 { margin: 1.3em 0 0.3em; font: bold 13px/1.3 var(--os-ui); color: var(--os-ink); text-decoration: none; }
.ps__crumb { font-size: 11px; color: #6f7c7b; margin: 10px 0 0 !important; }
.ps__crumb a,
.ps__crumb a:visited { color: inherit; }
.ps__meta { font-size: 12px; color: #5d6b6a; }
.ps__lead { font-size: 15px; }

.ps__main li { padding: 0.1em 0; }
.ps__main li::before { content: none; }
.ps__main ul:not([class]) { list-style: square; }

/* keyword links: dotted, so listings stay readable */
a.kw { text-decoration: underline dotted; }
.ps__main code {
  padding: 0 0.25em;
  background: #eef3f2;
  color: var(--os-t1);
  border: 1px solid #d3dfdf;
  font: 13px/1 "Lucida Console", Consolas, "Courier New", monospace;
}

/* the console: black, sunk into the page */
pre.ps-code {
  margin: 0.6em 0;
  padding: 0.5em 0.8em;
  background: #000;
  color: #fff;
  font: 17px/1.18 vtFont, monospace;
  overflow-x: auto;
  white-space: pre;
  border: 1px solid;
  border-color: var(--os-dk) #fff #fff var(--os-dk);
  box-shadow: inset 1px 1px 0 #000, 0 0 0 1px var(--os-sh);
}
pre a.kw,
pre a.kw:visited { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, 0.6); }
pre a.kw:hover { background: #fff; color: #000; text-decoration: none; }
/* highlighting, on black: keywords white, their connecting words dim,
   types in the Portalis logo's cyan, constants and numbers amber */
pre.ps-code .p { color: #9a9; }
pre.ps-code .t { color: #45f0ff; }
pre.ps-code .u,
pre.ps-code .n { color: #ffc857; }
pre.ps-code .s { color: #7dff7d; }
pre.ps-code .c { opacity: 0.5; }
/* the compiler's output: a pale console */
pre.ps-out { background: #f4f6f2; color: var(--os-ink); box-shadow: 0 0 0 1px var(--os-sh); }
pre.ps-out a.kw,
pre.ps-out a.kw:visited { color: var(--os-t2); border-bottom-color: currentColor; }
pre.ps-out a.kw:hover { background: var(--os-t2); color: #fff; }

/* asides: an info balloon, the "i" in a gold square */
.ps__note {
  position: relative;
  margin: 0.8em 0 !important;
  padding: 8px 12px 8px 40px;
  background: #fffbe8;
  border: 1px solid #d9c27a;
  font-size: 13px;
}
.ps__note::before {
  content: "i";
  position: absolute;
  left: 11px;
  top: 8px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ffe7a0, var(--os-gold2));
  color: #fff;
  font: bold italic 13px/18px Georgia, serif;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.ps__note b { display: block; font-size: 12px; color: #7a5a00; }

/* the enterprise gate: an activation dialog over the blurred steps */
.ps__locked { position: relative; }
.ps__locked > :not(.ps__gate) { filter: blur(3px); user-select: none; pointer-events: none; opacity: 0.6; }
.ps__gate {
  position: absolute;
  top: 2.5em;
  left: 50%;
  transform: translateX(-50%);
  width: min(25em, 92%);
  margin: 0 !important;
  padding: 40px 16px 14px 64px;
  border: 3px solid var(--os-t1);
  border-top: 0;
  background:
    var(--os-gloss) 0 0 / 100% 26px no-repeat,
    linear-gradient(90deg, var(--os-t1), var(--os-t2)) 0 0 / 100% 26px no-repeat,
    var(--os-face);
  box-shadow: 5px 6px 0 rgba(0, 10, 16, 0.35);
  font-size: 13px;
  text-align: left;
}
.ps__gate::before {
  content: "Enterprise Content";
  position: absolute;
  left: 10px;
  top: 6px;
  color: #fff;
  font: bold 12px var(--os-ui);
  text-shadow: 1px 1px 0 rgba(0, 20, 30, 0.7);
}
/* the padlock, gold */
.ps__gate::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 38px;
  width: 30px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1bf'/%3E%3Cstop offset='1' stop-color='%23c98a12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 15V10a7 7 0 0 1 14 0v5' fill='none' stroke='%237d8a88' stroke-width='3.5'/%3E%3Cpath d='M8 15V10a7 7 0 0 1 14 0v5' fill='none' stroke='%23e8ece9' stroke-width='1.2'/%3E%3Cpath d='M3 15h24v14l-4 4H3z' fill='url(%23g)' stroke='%238a5b06'/%3E%3Cpath d='M15 21v5' stroke='%235a3a00' stroke-width='2.5' stroke-linecap='square'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
  filter: drop-shadow(1px 2px 0 rgba(0, 20, 30, 0.25));
}
.ps__gate a,
.ps__gate a:visited { display: inline-block; margin-top: 10px; }

.ps__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 1.2em 0 0; }

/* lists of keywords and tutorials */
.ps__list { margin: 0.3em 0 !important; padding: 0 !important; list-style: none; }
.ps__list li { padding: 5px 0 5px 22px !important; border-bottom: 1px solid #e3eaea; position: relative; }
.ps__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 11px;
  height: 13px;
  background: linear-gradient(135deg, #fff, #cfe9ee);
  border: 1px solid var(--os-line);
  clip-path: polygon(0 0, 65% 0, 100% 30%, 100% 100%, 0 100%);
}
.ps__list small { display: block; font-size: 12px; color: #5d6b6a; line-height: 1.35; }
.ps__list .lv {
  font-size: 10px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: 1px;
  white-space: nowrap;
  color: var(--os-t1);
  background: #e2f2f4;
  border: 1px solid #9fc9d1;
}
.ps__cols { columns: 2 18em; column-gap: 2em; }
.ps__cols h2 { break-after: avoid; }
.ps__cols h2:first-child { margin-top: 0.6em; }
.ps__cols li { break-inside: avoid; }

.ps__syn {
  padding: 6px 10px;
  background: #f4f6f2;
  border: 1px solid var(--os-sh);
  font: 13px/1.4 "Lucida Console", Consolas, "Courier New", monospace;
  overflow-x: auto;
  white-space: nowrap;
}
.ps__pager {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin: 1.6em 0 0 !important;
  padding-top: 6px;
  border-top: 1px solid #e3eaea;
  font-size: 12px;
}

.ps__err { margin: 0.3em 0; }
.ps__err dt { margin-top: 0.7em; font-weight: bold; }
.ps__err dd { margin: 0.1em 0 0 1.4em; font-size: 13px; }

details.ps__full { margin: 0.8em 0; }
details.ps__full summary { cursor: pointer; font-size: 13px; color: var(--os-t2); }

/* membership plans: three task-pane cards, stacking on phones */
.ps__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: 12px; margin: 0.8em 0; }
.ps__plan { display: flex; flex-direction: column; background: linear-gradient(#f4fafa, #e1eff1); border: 1px solid #b7d3d8; }
.ps__plan--hot { border-color: var(--os-gold2); box-shadow: 0 0 0 2px var(--os-gold); }
.ps__main .ps__plan h3 {
  margin: 0;
  padding: 7px 10px;
  background: var(--os-gloss) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, var(--os-t1), var(--os-t2));
  color: #fff;
  font-size: 13px;
  text-shadow: 1px 1px 0 rgba(0, 20, 30, 0.7);
}
.ps__price { margin: 10px 12px 0 !important; font: 30px/1 vtFont, monospace; color: var(--os-t1); }
.ps__price small { display: block; font: 11px/1.3 var(--os-ui); color: #5d6b6a; margin-top: 3px; }
.ps__plan ul { margin: 8px 12px !important; padding: 0 0 0 1.1em !important; font-size: 12px; line-height: 1.35; flex: 1; list-style: square; }
.ps__plan .ps__acts { margin: 4px 12px 12px; }
.ps__plan .os-btn { flex: 1; }
.ps__tag {
  display: inline-block;
  margin-left: 8px;
  padding: 0 5px;
  vertical-align: 1px;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #3b2a00;
  text-shadow: none;
  background: linear-gradient(#ffe7a0, var(--os-gold));
}

/* toolchain: a details-view list */
.ps__dl { width: 100%; margin: 0.6em 0; border-collapse: collapse; font-size: 13px; border: 1px solid var(--os-sh); }
.ps__dl th {
  text-align: left;
  padding: 3px 8px;
  font-weight: normal;
  font-size: 12px;
  background: linear-gradient(#fff, #e9ebe5);
  border-right: 1px solid var(--os-sh);
  border-bottom: 1px solid var(--os-sh);
  box-shadow: inset 0 -2px 0 #d6d9d1;
}
.ps__dl td { text-align: left; padding: 5px 8px; vertical-align: top; border-bottom: 1px solid #edf1f0; }
.ps__dl tr:hover td { background: #eef7f8; }
.ps__dl td:last-child { text-align: right; white-space: nowrap; }
.ps__dl small { display: block; color: #5d6b6a; font-size: 11px; }

/* registering a serial: the product key boxes */
.ps__serial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0.6em 0;
  padding: 12px 14px;
  background: var(--os-face);
  border: 1px solid var(--os-sh);
}
.ps__serial label { width: 100%; font-size: 12px; }
.ps__serial .os-key { flex: 1 1 auto; }

.ps-modal__body .ps__meta { font-size: 12px; }

@media (max-width: 760px) {
  .ps { width: calc(100% - 16px); margin-top: 3em; }
  .ps__frame { grid-template-columns: 1fr; }
  .ps__doc { border-left: 0; border-top: 1px solid var(--os-sh); }
  .ps__tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); align-items: start; gap: 8px; padding: 8px; }
  .ps__tasks .os-group { margin: 0; }
  .ps__main { padding: 2px 14px 16px; }
  .ps__head { padding: 8px 14px; }
  .ps__brand { font-size: 23px; }
  .ps__main h1.ps__h { font-size: 30px; }
  .os-addr .os-tb span { display: none; }
  .ps__dl td:nth-child(2) { white-space: nowrap; }
  .ps__dl .os-btn { min-width: 0; white-space: normal; }
}

@media print {
  body::before, body::after, .top-bar, .os-tasks, .os-addr, .os-status, .os-build, .os-title, .ps-modal { display: none !important; }
  body { background: #fff; }
  .os-shadow { filter: none; }
  .os-win { padding: 0; background: #fff; }
  /* the order form prints on its own, without its buttons */
  body.ps-print > :not(.ps-modal) { display: none !important; }
  body.ps-print .ps-modal { display: block !important; position: static; background: none; }
  body.ps-print .ps-modal .os-title { display: flex !important; }
  body.ps-print .ps-modal .os-acts { display: none; }
}