/* portalis os — the company's own desktop look, shared by the developer
   network (portalscript.*) and the IDE (psstudio.*). after the home PCs of
   2000-2002 without being one: windows framed and titled in a horizontal
   gradient (the 2000 title bar) with a glossy top (the 2002 one), but the
   gloss is dithered, not smooth, so it sits on the club's crt; corners
   square, as in 2000, not rounded as in 2002; ink
   teal and the logo's cyan where the originals had blue, the creed's halo
   gold where they had green and orange. chrome in Tahoma, the club's
   vtFont kept for headlines and code. the site's scanlines stay on top. */

/* the tokens: on a whole page (body.os), or on one window set into
   another page (.os-here, as the home page's PortalScript widget is) */
body.os,
.os-here {
  --os-t1: #072f3d;
  --os-t2: #157a90;
  --os-t3: #45f0ff;
  --os-ink: #0b2530;
  --os-face: #e6e8e2;
  --os-sh: #a3aaa4;
  --os-dk: #4d5652;
  --os-line: #7c979c;
  --os-sel: #157a90;
  --os-gold: #f2c14e;
  --os-gold2: #c98a12;
  --os-pane1: #e4f3f4;
  --os-pane2: #a7cfd6;
  --os-ui: Tahoma, Verdana, "Segoe UI", sans-serif;
  /* the dithered gloss: white in bands of falling density, 1px dots kept
     crisp because the svg has no viewBox (its pixels are the element's) */
  --os-gloss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='d' width='2' height='2' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h2v1H0zM0 1h1v1H0z' fill='%23fff'/%3E%3C/pattern%3E%3Cpattern id='a' width='2' height='2' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23fff'/%3E%3C/pattern%3E%3Cpattern id='b' width='2' height='2' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h1v1H0z' fill='%23fff'/%3E%3C/pattern%3E%3Cpattern id='c' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z' fill='%23fff'/%3E%3C/pattern%3E%3C/defs%3E%3Cg opacity='.38'%3E%3Crect width='100%25' height='1' fill='%23fff'/%3E%3Crect y='1' width='100%25' height='18%25' fill='url(%23d)'/%3E%3Crect y='18%25' width='100%25' height='16%25' fill='url(%23a)'/%3E%3Crect y='34%25' width='100%25' height='14%25' fill='url(%23b)'/%3E%3Crect y='48%25' width='100%25' height='14%25' fill='url(%23c)'/%3E%3C/g%3E%3C/svg%3E");
}
/* the desktop: deep teal, lit from the top left, a halo low on the right */
body.os {
  background:
    radial-gradient(circle at 82% 88%, rgba(242, 193, 78, 0.16), transparent 22%),
    radial-gradient(ellipse at 22% -10%, #2c8597, #0f4352 55%, #071f29);
  background-attachment: fixed;
  cursor: default;
  accent-color: var(--os-sel);
  caret-color: var(--os-ink);
}
body.os ::selection { background: var(--os-sel); color: #fff; }
body.os * { scrollbar-color: var(--os-t2) var(--os-face); }
body.os ::-webkit-scrollbar-track { background: var(--os-face); }
body.os ::-webkit-scrollbar-thumb { background: var(--os-t2); border: 2px solid var(--os-face); }
body.os ::-webkit-scrollbar-corner { background: var(--os-face); }

/* a window: frame and title share the gradient; the shadow is the club's
   hard one, on a wrapper so dialogs and pages share it */
.os-shadow { position: relative; z-index: 1; filter: drop-shadow(5px 6px 0 rgba(0, 10, 16, 0.45)); }
.os-win {
  padding: 0 4px 4px;
  background: linear-gradient(90deg, var(--os-t1), var(--os-t2) 70%, #2a96ab);
  font: 13px/1.4 var(--os-ui);
  color: var(--os-ink);
}
.os-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  margin: 0 -4px;
  padding: 0 6px 0 12px;
  background: var(--os-gloss) 0 0 / 100% 100% no-repeat;
  color: #fff;
  font: bold 13px/1 var(--os-ui);
  text-shadow: 1px 1px 0 rgba(0, 20, 30, 0.7);
  white-space: nowrap;
  user-select: none;
}
/* a thin cyan rule under the gloss, the logo's colour */
.os-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(69, 240, 255, 0.55) 30%, rgba(69, 240, 255, 0.1));
}
.os-title__ic { width: 18px; height: 18px; flex: none; filter: drop-shadow(1px 1px 0 rgba(0, 20, 30, 0.6)); }
.os-title__t,
h1.os-title__t,
h2.os-title__t {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-title__t::before,
.os-title__t::after { content: none; }

/* caption buttons, close in halo gold */
.os-caps { display: flex; gap: 2px; flex: none; }
.os-cap {
  position: relative;
  display: block;
  width: 22px;
  height: 21px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(#3fb0c6, #136e83 55%, #0b5163);
  cursor: default;
  color: #fff;
}
.os-cap::before,
.os-cap::after { content: ""; position: absolute; background: #fff; box-shadow: 1px 1px 0 rgba(0, 20, 30, 0.5); }
.os-cap--min::before { left: 5px; bottom: 4px; width: 8px; height: 3px; }
.os-cap--max::before { left: 5px; top: 4px; width: 10px; height: 9px; background: none; border: 1px solid #fff; border-top-width: 3px; box-shadow: none; }
.os-cap[hidden] { display: none; }
.os-cap--x { background: linear-gradient(#ffe08a, #f2b648 50%, #c9781a); border-color: #fff4cc; cursor: pointer; }
.os-cap--x::before,
.os-cap--x::after { left: 4px; top: 8px; width: 12px; height: 3px; transform: rotate(45deg); }
.os-cap--x::after { transform: rotate(-45deg); }
.os-cap--x:hover,
.os-cap--x:focus-visible { background: linear-gradient(#fff0b8, #ffcb5c 50%, #e08a1e); outline: none; }

/* the window's inside */
.os-body { background: var(--os-face); }

/* buttons: the 2000 bevel on the 2002 face; hover and the default button
   glow halo gold inside the bevel */
.os-btn,
a.os-btn,
a.os-btn:visited {
  display: inline-block;
  min-width: 75px;
  padding: 4px 12px;
  font: 12px/1.2 var(--os-ui);
  color: var(--os-ink);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(#fff, #f0f1ec 45%, #dcdfd7);
  border: 1px solid var(--os-t1);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--os-sh);
  cursor: pointer;
}
.os-btn:hover,
.os-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px var(--os-gold), inset -1px -1px 0 4px var(--os-sh); }
/* a link dressed as a button keeps its face against the pages' link hovers */
.os-win a.os-btn:hover,
.os-win a.os-btn:focus-visible { background: linear-gradient(#fff, #f0f1ec 45%, #dcdfd7); color: var(--os-ink); text-decoration: none; }
.os-btn:active { background: linear-gradient(#dcdfd7, #eceee8); box-shadow: inset 1px 1px 0 var(--os-sh); }
.os-btn--go { box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px var(--os-gold2); font-weight: bold; }
.os-btn:disabled,
.os-btn:disabled:hover { color: var(--os-sh); text-shadow: 1px 1px 0 #fff; cursor: not-allowed; border-color: var(--os-sh); box-shadow: inset 1px 1px 0 #fff; background: var(--os-face); }

/* text boxes: flat, a teal hairline */
.os-field {
  font: 13px/1.3 var(--os-ui);
  color: var(--os-ink);
  padding: 3px 5px;
  background: #fff;
  border: 1px solid var(--os-line);
  border-radius: 0;
}
.os-field:focus { outline: 1px solid var(--os-gold); outline-offset: 0; border-color: var(--os-gold2); }

/* toolbar buttons: flat until hovered, then raised */
.os-tb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  font: 12px/1.2 var(--os-ui);
  color: var(--os-ink);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.os-tb svg { width: 18px; height: 18px; flex: none; }
.os-tb:hover,
.os-tb:focus-visible { outline: none; border-color: var(--os-line); background: linear-gradient(#fff, #eef0ea); box-shadow: inset 0 -2px 0 var(--os-gold); }
.os-tb:active { background: #dfe3dc; box-shadow: inset 1px 1px 0 var(--os-sh); }
.os-tb:disabled { opacity: 0.45; cursor: default; border-color: transparent; background: none; box-shadow: none; }

/* the address bar */
.os-addr {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--os-sh);
  box-shadow: 0 1px 0 #fff;
}
.os-addr label { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: #5d6763; font-size: 12px; }
.os-addr .os-field { flex: 1; min-width: 0; font-size: 12px; padding: 2px 5px; }
.os-addr .os-btn { min-width: 0; padding: 2px 9px; }
.os-sep { width: 2px; align-self: stretch; margin: 2px 3px; border-left: 1px solid var(--os-sh); border-right: 1px solid #fff; }

/* the task pane: groups that fold */
.os-tasks {
  padding: 12px 10px;
  background: linear-gradient(var(--os-pane1), var(--os-pane2));
  font-size: 12px;
}
.os-group { margin: 0 0 12px; }
.os-group > summary {
  position: relative;
  display: block;
  padding: 6px 30px 6px 10px;
  background: linear-gradient(90deg, #fff 30%, #c9e6eb);
  color: var(--os-t1);
  font-weight: bold;
  list-style: none;
  cursor: pointer;
}
.os-group > summary::-webkit-details-marker { display: none; }
.os-group > summary:hover,
.os-group > summary:focus-visible { color: var(--os-t2); outline: none; }
/* the chevron: in a diamond, not a circle */
.os-group > summary::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  transform: rotate(45deg);
  border: 1px solid #7fb3bd;
  background:
    linear-gradient(var(--os-t2), var(--os-t2)) 3px 3px / 2px 5px no-repeat,
    linear-gradient(var(--os-t2), var(--os-t2)) 3px 3px / 5px 2px no-repeat,
    #fff;
}
.os-group:not([open]) > summary::after {
  background:
    linear-gradient(var(--os-t2), var(--os-t2)) 4px 4px / 5px 2px no-repeat,
    linear-gradient(var(--os-t2), var(--os-t2)) 7px 1px / 2px 5px no-repeat,
    #fff;
  margin-top: -7px;
}
.os-group__b {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #fff;
  border-top: 0;
}
.os-group__b a,
.os-group__b a:visited {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 2px 0;
  color: var(--os-t1);
  text-decoration: none;
}
/* a small square for an icon, cyan, gold on the page you're on */
.os-group__b a::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #b9fbff, var(--os-t2));
  border: 1px solid var(--os-t1);
}
.os-group__b a:hover,
.os-group__b a:focus-visible { text-decoration: underline; color: var(--os-t2); outline: none; }
.os-group__b a[aria-current] { font-weight: bold; }
.os-group__b a[aria-current]::before { background: linear-gradient(135deg, #fff3c4, var(--os-gold2)); }
.os-group__b p { margin: 0 0 4px; line-height: 1.35; }
.os-group__b b { display: block; color: var(--os-t1); }

/* the status bar: sunken segments, the zone last */
.os-status {
  display: flex;
  gap: 2px;
  padding: 2px 2px 1px;
  border-top: 1px solid var(--os-sh);
  font-size: 11px;
  color: #3a4441;
}
.os-status > span {
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px 6px;
  box-shadow: inset 1px 1px 0 var(--os-sh), inset -1px -1px 0 #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-status > span:first-child { flex: 1 1 auto; }
.os-zone { display: flex; align-items: center; gap: 5px; }
.os-zone img { width: 13px; height: 13px; }

/* dialogs */
.os-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 20, 26, 0.45);
}
.os-modal[hidden] { display: none; }
.os-dlg { width: min(30em, 100%); }
.os-dlg .os-body { padding: 4px 14px 14px; font-size: 13px; }
.os-dlg .os-body p { margin: 10px 0 0; line-height: 1.4; }
.os-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 16px 0 0; }

/* the build text, after an evaluation copy's: at the foot of the desktop,
   in the flow, so it never lands on the page's own small print */
.os-build {
  margin: 0 16px 14px;
  font: 11px/1.35 var(--os-ui);
  color: rgba(255, 255, 255, 0.55);
  text-align: right;
  user-select: none;
}
.os-build b { color: rgba(255, 255, 255, 0.8); }

/* the product key: boxes of four, as on an activation screen */
.os-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.os-key .os-field {
  width: 4.6em;
  font: 15px/1.2 "Lucida Console", Consolas, "Courier New", monospace;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.os-key i { font-style: normal; color: var(--os-dk); }

@media (max-width: 640px) {
  .os-build { display: none; }
  .os-win { font-size: 14px; }
  /* 16px or more, or iOS zooms in on focus */
  .os-field, .os-addr .os-field, .os-key .os-field { font-size: 16px; }
}