/* PPLI Workspace — the fourth layer.
 *
 * Everything before this made the workspace correct and unbroken. This layer is
 * about the half-second before anyone reads a word: whether the thing looks
 * like it was made by people who know what they are doing.
 *
 * Three ideas run through it.
 *
 * The rail gets icons. Twenty-two items is a long list to read as text, and a
 * marque of line drawings turns it into something the eye navigates instead of
 * parses. They are drawn as masks rather than images, so every icon takes the
 * colour of the label beside it and dims and lifts with it — one moving part,
 * not two.
 *
 * Gold is used less, and therefore means more. It marks where you are, what a
 * number is, and where a section begins. It is taken off everything else.
 *
 * And the page is given air at the top and hairlines further down, so the eye
 * lands on the heading, then the numbers, then the detail — in that order,
 * rather than all at once.
 */

/* ==========================================================================
   1. The icon set.

   Sixteen-pixel line drawings on a 24 unit grid, 1.6 stroke, round joins. They
   are declared once as custom properties and applied as masks, which is what
   lets a single rule colour every one of them from the text colour it sits
   next to. A mask ignores the fill entirely — only the shape matters — so the
   black stroke below never appears on screen.
   ========================================================================== */

.wsx{
  --ic-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 11.2 12 4l8.4 7.2'/%3E%3Cpath d='M6 10.2V20h12v-9.8'/%3E%3C/svg%3E");
  --ic-academy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6 2.6 9 12 13.4 21.4 9 12 4.6Z'/%3E%3Cpath d='M6.4 11.2v5.2c0 1.2 2.5 2.6 5.6 2.6s5.6-1.4 5.6-2.6v-5.2'/%3E%3C/svg%3E");
  --ic-reg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.4h7.6L18 7.8V20.6H6Z'/%3E%3Cpath d='M13.4 3.4v4.4H18'/%3E%3Cpath d='M12 11.4v3.4'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E");
  --ic-tools:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.2' y='3.2' width='13.6' height='17.6' rx='1.2'/%3E%3Cpath d='M8.4 7h7.2'/%3E%3Cpath d='M9 11.6h.01M12 11.6h.01M15 11.6h.01M9 15.4h.01M12 15.4h.01M15 15.4h.01'/%3E%3C/svg%3E");
  --ic-screener:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 4.4h16.4l-6.3 7.4v7.2l-3.8 1.6v-8.8L3.8 4.4Z'/%3E%3C/svg%3E");
  --ic-qualify:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.6' cy='7.8' r='3.2'/%3E%3Cpath d='M4.4 19.6c.6-3.4 3.1-5.4 6.2-5.4 1 0 1.9.2 2.7.6'/%3E%3Cpath d='m15 17.6 1.8 1.8 3.6-3.9'/%3E%3C/svg%3E");
  --ic-simulator:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3.8v16.4h16.2'/%3E%3Cpath d='m7 16.2 3.6-4.4 3 2.6 5.6-7'/%3E%3C/svg%3E");
  --ic-funding:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5' width='16.8' height='15.4' rx='1.2'/%3E%3Cpath d='M8 3.2v3.6M16 3.2v3.6M3.6 10h16.8'/%3E%3Ccircle cx='12' cy='15.2' r='2.4'/%3E%3C/svg%3E");
  --ic-charges:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6v16.8'/%3E%3Cpath d='M6 7.6h12'/%3E%3Cpath d='M6 7.6 3 14h6L6 7.6Z'/%3E%3Cpath d='m18 7.6-3 6.4h6l-3-6.4Z'/%3E%3Cpath d='M9 20.4h6'/%3E%3C/svg%3E");
  --ic-premtax:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.8s6.8-6 6.8-10.8a6.8 6.8 0 1 0-13.6 0c0 4.8 6.8 10.8 6.8 10.8Z'/%3E%3Cpath d='m9.8 12.2 4.4-4.4'/%3E%3Cpath d='M9.9 8.4h.01M14.1 11.6h.01'/%3E%3C/svg%3E");
  --ic-jurisdiction:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='M12 3.6c2.3 2.6 3.5 5.4 3.5 8.4S14.3 17.8 12 20.4c-2.3-2.6-3.5-5.4-3.5-8.4S9.7 6.2 12 3.6Z'/%3E%3C/svg%3E");
  --ic-corridor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 19.4 9.4 12l3.8 3 6.8-9.6'/%3E%3Cpath d='M3.6 14 9.4 7.4l3.8 3 6.8-7.2' opacity='.55'/%3E%3C/svg%3E");
  --ic-diversify:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 3.6V12l7.3 4.2'/%3E%3C/svg%3E");
  --ic-excise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.4h7.6L18 7.8V20.6H6Z'/%3E%3Cpath d='M13.4 3.4v4.4H18'/%3E%3Cpath d='m14.6 11.4-5.2 6.2'/%3E%3Ccircle cx='9.9' cy='11.9' r='1'/%3E%3Ccircle cx='14.1' cy='17.1' r='1'/%3E%3C/svg%3E");
  --ic-loan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='6.6' width='18.4' height='10.8' rx='1.2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6.2 12h.01M17.8 12h.01'/%3E%3C/svg%3E");
  --ic-economics:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.4' rx='7' ry='2.8'/%3E%3Cpath d='M5 6.4v5.2c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8V6.4'/%3E%3Cpath d='M5 11.6v5.2c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8v-5.2'/%3E%3C/svg%3E");
  --ic-analyses:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.4h12v17.2l-6-4-6 4Z'/%3E%3Cpath d='m9.2 9.4 2 2 3.6-4'/%3E%3C/svg%3E");
  --ic-opps:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='5' height='16' rx='1'/%3E%3Crect x='9.5' y='4' width='5' height='11' rx='1'/%3E%3Crect x='16' y='4' width='5' height='7' rx='1'/%3E%3C/svg%3E");
  --ic-clients:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.8 20c.6-3.6 3.2-5.6 6.2-5.6s5.6 2 6.2 5.6'/%3E%3Cpath d='M16 5.4a3.2 3.2 0 0 1 0 6.2'/%3E%3Cpath d='M17.6 14.9c1.9.8 3.1 2.6 3.6 5.1'/%3E%3C/svg%3E");
  --ic-meeting:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6.8' width='18' height='13.4' rx='1.2'/%3E%3Cpath d='M9 6.8V5.2c0-.7.6-1.3 1.3-1.3h3.4c.7 0 1.3.6 1.3 1.3v1.6'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E");
  --ic-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5' width='16.8' height='15.4' rx='1.2'/%3E%3Cpath d='M8 3.2v3.6M16 3.2v3.6M3.6 10h16.8'/%3E%3Cpath d='m9.4 14.6 2 2 3.4-4'/%3E%3C/svg%3E");
  --ic-enquiries:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.2' width='18' height='13.6' rx='1.2'/%3E%3Cpath d='M3.4 6.6 12 13l8.6-6.4'/%3E%3C/svg%3E");
  --ic-community:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 14.2a2 2 0 0 1-2 2H9.2L5 19.8v-3.6h-.4a2 2 0 0 1-2-2V6.8a2 2 0 0 1 2-2h13.6a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M8 9.2h8M8 12.4h5'/%3E%3C/svg%3E");
  --ic-network:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.3'/%3E%3Ccircle cx='5' cy='17.4' r='2.3'/%3E%3Ccircle cx='19' cy='17.4' r='2.3'/%3E%3Cpath d='m10.6 7 -4.2 8.2M13.4 7l4.2 8.2M7.3 17.4h9.4'/%3E%3C/svg%3E");
  --ic-referrals:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='12' r='2.4'/%3E%3Ccircle cx='18' cy='6.4' r='2.4'/%3E%3Ccircle cx='18' cy='17.6' r='2.4'/%3E%3Cpath d='m8.2 10.9 7.6-3.4M8.2 13.1l7.6 3.4'/%3E%3C/svg%3E");
  --ic-alerts:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.2 16.4H5.8l1.4-2.4V10a4.8 4.8 0 0 1 9.6 0v4Z'/%3E%3Cpath d='M10.2 19.2a2 2 0 0 0 3.6 0'/%3E%3C/svg%3E");
  --ic-profile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Ccircle cx='12' cy='10' r='2.8'/%3E%3Cpath d='M6.5 18.6c1-2.3 3.1-3.6 5.5-3.6s4.5 1.3 5.5 3.6'/%3E%3C/svg%3E");
  --ic-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");

  /* Gold, in three weights. The base was doing all three jobs at once. */
  --gd-deep:#8F7734;
  --gd-wash:rgba(176,149,72,.09);
  --gd-line:rgba(176,149,72,.34);
}

/* ==========================================================================
   2. The rail.
   ========================================================================== */

.wsx .wsx-app{grid-template-columns:254px 1fr}
.wsx .wsx-rail{padding:24px 0 40px;
  background:linear-gradient(180deg,#0A0F17 0%,#0C121C 62%,#0A0F17 100%);
  border-right:1px solid rgba(255,255,255,.06)}

.wsx .wsx-rail-logo{width:118px;margin:0 20px 4px;opacity:1}
.wsx .wsx-rail-sub{margin:0 20px 18px;font-size:8px;letter-spacing:.3em;color:var(--gd)}

/* The identity block. It was a row of two things; it is now the one place in
   the rail that is allowed a border on all four sides, because it is who you
   are rather than where you are. */
.wsx .wsx-rail-firm{margin:0 14px 6px;padding:11px 10px;border:1px solid rgba(255,255,255,.08);
  border-left:2px solid var(--gd);background:rgba(255,255,255,.02);transition:.2s}
.wsx .wsx-rail-firm:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-left-color:var(--gd)}
.wsx .wsx-rail-firm img{width:34px;height:34px;flex-basis:34px;background:rgba(255,255,255,.07)}
.wsx .wsx-rail-firm .n{font-size:12.5px;letter-spacing:.005em}
.wsx .wsx-rail-firm .r{font-size:9.5px;color:rgba(255,255,255,.44);letter-spacing:.02em}

/* Group headings. A hairline above each one turns a long list into four short
   ones, which is the only thing that makes twenty-two items readable. */
.wsx .wsx-grp{font-size:8px;letter-spacing:.2em;color:rgba(255,255,255,.3);
  padding:20px 20px 9px;margin-top:6px;position:relative}
.wsx .wsx-grp:before{content:"";position:absolute;top:0;left:20px;right:20px;
  height:1px;background:rgba(255,255,255,.07)}
.wsx .wsx-grp:first-child:before,.wsx .wsx-grp:empty:before{display:none}

/* The items. */
.wsx .wsx-nav{gap:11px;padding:8px 20px 8px 18px;font-size:12.5px;line-height:1.45;
  color:rgba(255,255,255,.6);border-left:2px solid transparent;position:relative}
.wsx .wsx-nav:hover{color:rgba(255,255,255,.94);background:rgba(255,255,255,.04)}
.wsx .wsx-nav.on{color:#fff;background:linear-gradient(90deg,rgba(176,149,72,.16),rgba(176,149,72,.03));
  border-left-color:var(--gd);font-weight:600}

/* The icon. One rule paints all twenty-six, because a mask takes its colour
   from the box, and the box inherits the label's colour. */
.wsx .wsx-nav:before{content:"";width:16px;height:16px;flex:0 0 16px;
  background-color:currentColor;opacity:.52;transition:opacity .2s;
  -webkit-mask-image:var(--ic-dot);mask-image:var(--ic-dot);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:16px 16px;mask-size:16px 16px}
.wsx .wsx-nav:hover:before{opacity:.85}
.wsx .wsx-nav.on:before{opacity:1;background-color:var(--gd)}

.wsx .wsx-nav[data-go="dashboard"]:before{-webkit-mask-image:var(--ic-home);mask-image:var(--ic-home)}
.wsx .wsx-nav[data-go="academy"]:before{-webkit-mask-image:var(--ic-academy);mask-image:var(--ic-academy)}
.wsx .wsx-nav[data-go="regulatory"]:before{-webkit-mask-image:var(--ic-reg);mask-image:var(--ic-reg)}
.wsx .wsx-nav[data-go="tools"]:before{-webkit-mask-image:var(--ic-tools);mask-image:var(--ic-tools)}
.wsx .wsx-nav[data-go="tool:screener"]:before{-webkit-mask-image:var(--ic-screener);mask-image:var(--ic-screener)}
.wsx .wsx-nav[data-go="tool:qualify"]:before{-webkit-mask-image:var(--ic-qualify);mask-image:var(--ic-qualify)}
.wsx .wsx-nav[data-go="tool:simulator"]:before{-webkit-mask-image:var(--ic-simulator);mask-image:var(--ic-simulator)}
.wsx .wsx-nav[data-go="tool:funding"]:before{-webkit-mask-image:var(--ic-funding);mask-image:var(--ic-funding)}
.wsx .wsx-nav[data-go="tool:charges"]:before{-webkit-mask-image:var(--ic-charges);mask-image:var(--ic-charges)}
.wsx .wsx-nav[data-go="tool:premtax"]:before{-webkit-mask-image:var(--ic-premtax);mask-image:var(--ic-premtax)}
.wsx .wsx-nav[data-go="tool:jurisdiction"]:before{-webkit-mask-image:var(--ic-jurisdiction);mask-image:var(--ic-jurisdiction)}
.wsx .wsx-nav[data-go="tool:corridor"]:before{-webkit-mask-image:var(--ic-corridor);mask-image:var(--ic-corridor)}
.wsx .wsx-nav[data-go="tool:diversify"]:before{-webkit-mask-image:var(--ic-diversify);mask-image:var(--ic-diversify)}
.wsx .wsx-nav[data-go="tool:excise"]:before{-webkit-mask-image:var(--ic-excise);mask-image:var(--ic-excise)}
.wsx .wsx-nav[data-go="tool:loan"]:before{-webkit-mask-image:var(--ic-loan);mask-image:var(--ic-loan)}
.wsx .wsx-nav[data-go="tool:economics"]:before{-webkit-mask-image:var(--ic-economics);mask-image:var(--ic-economics)}
.wsx .wsx-nav[data-go="analyses"]:before{-webkit-mask-image:var(--ic-analyses);mask-image:var(--ic-analyses)}
.wsx .wsx-nav[data-go="opportunities"]:before{-webkit-mask-image:var(--ic-opps);mask-image:var(--ic-opps)}
.wsx .wsx-nav[data-go="clients"]:before{-webkit-mask-image:var(--ic-clients);mask-image:var(--ic-clients)}
.wsx .wsx-nav[data-go="meeting"]:before{-webkit-mask-image:var(--ic-meeting);mask-image:var(--ic-meeting)}
.wsx .wsx-nav[data-go="calendar"]:before{-webkit-mask-image:var(--ic-calendar);mask-image:var(--ic-calendar)}
.wsx .wsx-nav[data-go="enquiries"]:before{-webkit-mask-image:var(--ic-enquiries);mask-image:var(--ic-enquiries)}
.wsx .wsx-nav[data-go="community"]:before{-webkit-mask-image:var(--ic-community);mask-image:var(--ic-community)}
.wsx .wsx-nav[data-go="network"]:before{-webkit-mask-image:var(--ic-network);mask-image:var(--ic-network)}
.wsx .wsx-nav[data-go="referrals"]:before{-webkit-mask-image:var(--ic-referrals);mask-image:var(--ic-referrals)}
.wsx .wsx-nav[data-go="alerts"]:before{-webkit-mask-image:var(--ic-alerts);mask-image:var(--ic-alerts)}
.wsx .wsx-nav[data-go="profile"]:before{-webkit-mask-image:var(--ic-profile);mask-image:var(--ic-profile)}

/* Counts. A number in a rail is a status, not a decoration, so it is set in
   the same tabular figures the tables use and given room to breathe. */
.wsx .wsx-nav .cnt{font-size:9.5px;font-variant-numeric:tabular-nums;letter-spacing:.04em;
  color:rgba(255,255,255,.34);padding-left:8px}
.wsx .wsx-nav.on .cnt{color:var(--gd)}
.wsx .wsx-nav .cnt.hot{color:var(--nv);background:var(--gd);padding:1px 7px;border-radius:10px;font-weight:700}

.wsx .wsx-rail-out{margin:24px 20px 0;padding-top:15px;border-top:1px solid rgba(255,255,255,.08)}
.wsx .wsx-rail-out a{transition:color .2s}
.wsx .wsx-rail-out a:hover{color:var(--gd)}

/* ==========================================================================
   3. The top of a page.
   ========================================================================== */

/* A short gold rule above the breadcrumb. It costs eleven pixels and it is the
   thing that makes a screen look composed rather than dumped. */
.wsx .wsx-main > .wsx-crumb:first-child{position:relative;padding-top:14px;
  color:var(--gd-deep);letter-spacing:.15em;font-size:9.5px}
.wsx .wsx-main > .wsx-crumb:first-child:before{content:"";position:absolute;top:0;left:0;
  width:34px;height:2px;background:var(--gd)}

.wsx .wsx-head{padding-bottom:17px;margin-bottom:24px;border-bottom:1px solid var(--ln)}
.wsx .wsx-head h1{font-size:31px;letter-spacing:-.008em}
.wsx .wsx-head .sub{font-size:13.5px;line-height:1.78}

/* A section heading with the rule carried out to the right margin, so a screen
   of five sections reads as five bands instead of five paragraphs. */
.wsx .wsx-sec-h{position:relative;padding-bottom:9px;margin-bottom:14px}
.wsx .wsx-sec-h:after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--cr2)}
.wsx .wsx-sec-h h2{font-size:20px;letter-spacing:-.005em}
.wsx .wsx-sec-h > span,.wsx .wsx-sec-h .wsx-note{font-size:11px;color:var(--mu);letter-spacing:.02em}

/* ==========================================================================
   4. The number strip.
   ========================================================================== */

.wsx .wsx-tiles{border-color:var(--ln);box-shadow:0 1px 2px rgba(10,15,23,.03)}
.wsx .wsx-tile{padding:17px 18px 16px;position:relative;transition:background .2s}
.wsx .wsx-tile:hover{background:#FEFEFC}
.wsx .wsx-tile:first-child:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;
  height:2px;background:var(--gd)}
.wsx .wsx-tile .wsx-k{font-size:8px;letter-spacing:.19em;color:var(--mu);font-weight:700;text-transform:uppercase}
.wsx .wsx-tile-v{font-size:clamp(23px,2.2vw,29px);margin:6px 0 5px;letter-spacing:-.015em;
  font-variant-numeric:lining-nums tabular-nums}
.wsx .wsx-tile-s{font-size:10.5px;line-height:1.65;letter-spacing:.015em}

/* ==========================================================================
   5. Tables.

   The one place where a workspace either looks like a professional instrument
   or like a spreadsheet with a serif font on top.
   ========================================================================== */

.wsx .wsx-tbl{border-color:var(--ln)}
.wsx .wsx-tbl thead th{background:var(--cr);color:var(--nv);font-size:8.5px;
  letter-spacing:.16em;font-weight:700;text-transform:uppercase;
  padding:11px 12px;border-bottom:1px solid var(--ln)}
.wsx .wsx-tbl tbody td{padding:11px 12px;border-top:1px solid var(--cr2);vertical-align:top}
.wsx .wsx-tbl tbody tr:first-child td{border-top:none}
.wsx .wsx-tbl td .nm{font-size:13.5px;line-height:1.4;color:var(--nv);font-weight:600}
.wsx .wsx-tbl td .sub{font-size:10.5px;color:var(--mu);letter-spacing:.02em}
.wsx .wsx-tbl tbody tr[data-open],.wsx .wsx-tbl tbody tr[data-client],.wsx .wsx-tbl tbody tr[data-q]{
  cursor:pointer;transition:background .15s}
.wsx .wsx-tbl tbody tr[data-open]:hover td,
.wsx .wsx-tbl tbody tr[data-client]:hover td,
.wsx .wsx-tbl tbody tr[data-q]:hover td{background:var(--gd-wash)}

/* ==========================================================================
   6. Controls.
   ========================================================================== */

.wsx .wsx-btn{font-size:9px;letter-spacing:.15em;padding:11px 19px;
  transition:background .22s,color .22s,border-color .22s,box-shadow .22s}
.wsx .wsx-btn.gd{box-shadow:0 1px 2px rgba(143,119,52,.28)}
.wsx .wsx-btn.gd:hover{box-shadow:0 2px 6px rgba(143,119,52,.32)}
.wsx .wsx-btn.o{border-width:1px;border-color:var(--ln);color:var(--nv)}
.wsx .wsx-btn.o:hover{border-color:var(--gd);color:var(--gd-deep);background:var(--gd-wash)}

.wsx .wsx-tag{letter-spacing:.1em;font-weight:700}
.wsx .wsx-k{letter-spacing:.17em}

/* ==========================================================================
   7. Panels, cards and the drawer.

   One shadow, used once, on hover only. A page where everything floats is a
   page where nothing is in front.
   ========================================================================== */

.wsx .wsx-card,.wsx .wsx-pipes,.wsx .wsx7-item,.wsx .wsx8-build,.wsx .wsx4-jcard{
  box-shadow:0 1px 2px rgba(10,15,23,.03)}
.wsx .wsx-toolcard,.wsx .wsx7-step,.wsx .wsx4-card{transition:border-color .2s,box-shadow .2s,transform .2s}
.wsx .wsx-toolcard:hover,.wsx .wsx7-step:hover,.wsx .wsx4-card:hover{
  box-shadow:0 4px 14px rgba(10,15,23,.08);transform:translateY(-1px)}

.wsx .wsx-callout{border-left-width:3px;border-left-color:var(--gd);background:#fff}

.wsx .wsx-drawer{box-shadow:-14px 0 44px rgba(10,15,23,.16)}
.wsx .wsx-scrim{backdrop-filter:saturate(.9) blur(1px)}

/* ==========================================================================
   8. The calculator masthead.

   It is the first thing on twelve screens, so it is worth the gradient.
   ========================================================================== */

.wsx .wsx-toolhero{background:linear-gradient(135deg,#0A0F17 0%,#141C2A 58%,#0A0F17 100%);
  position:relative;overflow:hidden}
.wsx .wsx-toolhero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 92% -10%,rgba(176,149,72,.17),transparent 58%)}
.wsx .wsx-toolhero > *{position:relative;z-index:1}
/* The mark is absolutely placed in the base sheet, and the rule above is
   specific enough to have knocked it back into flow — where it landed on
   top of the breadcrumb on all twelve calculators. Put it back. */
.wsx .wsx-toolhero > .wsx-toolhero-mark{position:absolute;top:28px;right:34px;width:94px;opacity:.7;z-index:1}
.wsx .wsx-toolhero .wsx-crumb{color:var(--gd)}
.wsx .wsx-toolhero h1{font-size:28px;letter-spacing:-.008em}

/* ==========================================================================
   9. Narrow.
   ========================================================================== */

@media(max-width:1100px){
  .wsx .wsx-app{grid-template-columns:224px 1fr}
  .wsx .wsx-nav{padding-left:16px;padding-right:14px;font-size:12px}
  .wsx .wsx-grp{padding-left:16px;padding-right:16px}
  .wsx .wsx-grp:before{left:16px;right:16px}
}
@media(max-width:760px){
  .wsx .wsx-head h1{font-size:25px}
  .wsx .wsx-main > .wsx-crumb:first-child{padding-top:12px}
}
@media(prefers-reduced-motion:reduce){
  .wsx .wsx-toolcard:hover,.wsx .wsx7-step:hover,.wsx .wsx4-card:hover{transform:none}
}