/* The service directory is deliberately isolated from the workspaces. */
#service-screen{
  isolation:isolate;color:#253e64;background:#fbfcfe;
}
#service-screen::before{
  content:none;background:none;
}
#service-screen::after{
  content:"";position:absolute;inset:0 0 auto;z-index:0;height:80px;
  border:0;background:#fff;pointer-events:none;
}
#service-screen .service-header{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  width:min(1080px,calc(100% - 64px));height:80px;min-height:80px;
  margin:0 auto;padding:0;border:0;background:#fff;box-shadow:none;
}
#service-screen .service-brand{display:inline-flex;align-items:center;text-decoration:none}
#service-screen .service-header .service-brand img{display:block;width:58px;height:40px;max-width:none;object-fit:contain;object-position:center}
#service-screen .service-back{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-left:auto;
  padding:9px 20px;border:0;border-radius:999px;
  background:#f3f3f3;color:#28323f;box-shadow:none;
  font-size:13px;font-weight:400;line-height:1.5;
  transition:background .18s ease,color .18s ease;
}
#service-screen .service-back:hover{transform:none;background:#eaeaea;color:#171e2b;box-shadow:none}
#service-screen .service-main{
  position:relative;z-index:1;width:min(1080px,calc(100% - 64px));
  margin:0 auto;padding:48px 0 56px;
}
#service-screen .service-intro{display:none}
/* The client homepage bezel surrounds the existing directory without
   shrinking its columns. The fade stays inside the empty bottom padding. */
#service-screen .service-monitor-bezel{
  position:relative;isolation:isolate;width:calc(100% + 22px);margin:0 -11px;
  padding:10px 10px 0;border:1px solid #292929;border-bottom:0;
  border-radius:9px 9px 0 0;background:#111;box-shadow:none;
}
#service-screen .service-monitor-bezel::after{
  content:"";position:absolute;z-index:1;inset:auto -1px 0;height:18px;
  background:linear-gradient(180deg,transparent,#fbfcfe);pointer-events:none;
}
#service-screen .services-directory{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:stretch;margin:0;padding:6px;
  overflow:hidden;border:0;border-radius:1px;outline:0;
  background:#f5f5f5;
  box-shadow:none;
}
#service-screen .service-group{
  display:flex;flex-direction:column;min-width:0;padding:24px;
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
#service-screen .service-group--publishing{--service-heading-position:0%}
#service-screen .service-group--research{--service-heading-position:50%}
#service-screen .service-group--other{--service-heading-position:100%}
/* One quiet, cool-color panorama flows through the three title cards. */
#service-screen .service-group-head{
  display:flex;align-items:center;justify-content:center;gap:0;min-height:0;aspect-ratio:467 / 165;margin:0 0 18px;padding:12px 14px;
  border:0;border-radius:10px;background-color:#7e90b5;
  background-image:
    radial-gradient(ellipse 24% 140% at 0% 50%,rgb(117 137 182 / .92),transparent 78%),
    radial-gradient(ellipse 26% 150% at 27% 0%,rgb(143 132 185 / .88),transparent 78%),
    radial-gradient(ellipse 29% 145% at 53% 100%,rgb(115 153 167 / .9),transparent 78%),
    radial-gradient(ellipse 27% 150% at 77% 0%,rgb(130 146 191 / .88),transparent 80%),
    radial-gradient(ellipse 25% 135% at 100% 90%,rgb(156 139 179 / .86),transparent 80%),
    linear-gradient(110deg,#7d91bd 0%,#8992b1 38%,#7397a7 68%,#9186ae 100%);
  background-size:300% 100%;background-position:var(--service-heading-position,0%) 50%;background-repeat:no-repeat;
  box-shadow:0 5px 13px rgb(52 73 108 / .045),inset 0 1px 0 #fff;
  text-align:center;
}
#service-screen .service-group-head h2{
  margin:0;color:#fff;font-family:"Microsoft YaHei UI","Microsoft YaHei","Segoe UI",sans-serif;
  font-size:23px;font-weight:600;line-height:1.4;letter-spacing:-.025em;
}
#service-screen .service-group-icon{
  display:grid;place-items:center;flex:none;width:52px;height:52px;
  border:1px solid rgb(255 255 255 / .8);border-radius:14px;
  background:var(--service-icon-surface,#e5edfc);color:var(--service-icon-color,#6485bd);
  box-shadow:2px 3px 0 var(--service-icon-edge,#d9e3f5),inset 0 1px 0 #fff;
  font-size:23px;font-weight:700;line-height:1;
}
#service-screen .service-group-icon--blue{--service-icon-surface:#e4edfc;--service-icon-color:#4267bf;--service-icon-edge:#d3dff4}
#service-screen .service-group-icon--green{--service-icon-surface:#e3f1e9;--service-icon-color:#398873;--service-icon-edge:#d0e6d9}
#service-screen .service-group-icon--gold{--service-icon-surface:#fbefd7;--service-icon-color:#af831c;--service-icon-edge:#eddfc0}
#service-screen .service-group-icon svg{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#service-screen .service-group-links{display:grid;gap:12px;margin:0;padding:0}
#service-screen .service-entry{
  display:flex;align-items:center;gap:12px;width:100%;min-width:0;min-height:76px;
  margin:0;padding:13px 14px;border:1px solid rgb(255 255 255 / .94);border-radius:10px;
  background:#fff;color:#294164;text-align:left;text-decoration:none;
  box-shadow:0 5px 13px rgb(52 73 108 / .045),inset 0 1px 0 #fff;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
#service-screen .service-entry:not(:disabled):not([aria-disabled="true"]):hover{
  transform:translateY(-2px);border-color:#d9e3f1;background:#fff;
  box-shadow:0 8px 18px rgb(52 73 108 / .08),inset 0 1px 0 #fff;
}
#service-screen .service-entry-icon{
  display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:11px;
  border:1px solid rgb(255 255 255 / .9);background:var(--service-entry-icon-surface,#edf3ff);
  color:var(--service-entry-icon-color,#6b8bc2);box-shadow:inset 0 1px 0 #fff;
  font-family:"Segoe UI","Microsoft YaHei",sans-serif;font-size:17px;font-weight:750;line-height:1;letter-spacing:-.04em;
}
#service-screen .service-entry-icon--blue{--service-entry-icon-surface:#edf3ff;--service-entry-icon-color:#5075c8}
#service-screen .service-entry-icon--green{--service-entry-icon-surface:#eaf6ef;--service-entry-icon-color:#438d78}
#service-screen .service-entry-icon--purple{--service-entry-icon-surface:#f4eefb;--service-entry-icon-color:#9a70c2}
#service-screen .service-entry-icon--gold{--service-entry-icon-surface:#fff5e2;--service-entry-icon-color:#b58b32}
#service-screen .service-entry-icon svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#service-screen .service-entry-name{flex:1;min-width:0;color:inherit;font-size:17px;font-weight:750;line-height:1.5;letter-spacing:-.025em}
#service-screen .service-entry-meta{flex:none;padding:4px 6px;border-radius:6px;background:#f4effa;color:#a28bb7;font-size:9px;font-weight:550;line-height:1.5;white-space:nowrap}
#service-screen .service-entry-chevron{display:block;flex:none;width:14px;height:14px;margin-left:auto;color:#8193b5;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#service-screen .service-entry-chevron svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#service-screen .service-entry:is(:disabled,[aria-disabled="true"]){opacity:1;cursor:not-allowed;transform:none;background:rgb(255 255 255 / .77);border-color:rgb(255 255 255 / .84);box-shadow:0 4px 10px rgb(52 73 108 / .025);color:#8790a1}
#service-screen .service-entry:is(:disabled,[aria-disabled="true"]) .service-entry-chevron{color:#cec7d7}
#service-screen :is(.service-entry,.service-back,.service-brand):focus-visible{outline:3px solid #9eb8e4;outline-offset:4px}
@media(max-width:1050px){
  #service-screen .service-group{padding:20px}
  #service-screen .service-group-head{gap:0}
  #service-screen .service-group-head h2{font-size:23px}
  #service-screen .service-group-icon{width:48px;height:48px;border-radius:13px}
  #service-screen .service-entry{gap:10px;padding-inline:12px}
  #service-screen .service-entry-icon{width:36px;height:36px;border-radius:10px}
  #service-screen .service-entry-name{font-size:16px}
}
@media(max-width:900px){
  #service-screen .service-monitor-bezel::after{height:14px}
  #service-screen .service-header,#service-screen .service-main{width:calc(100% - 48px)}
  #service-screen .service-group{padding:16px}
  #service-screen .service-group-head{gap:0;min-height:0;margin-bottom:18px;padding:11px}
  #service-screen .service-group-head h2{font-size:23px}
  #service-screen .service-group-icon{width:43px;height:43px;border-radius:12px}
  #service-screen .service-group-icon svg{width:21px;height:21px}
  #service-screen .service-entry{gap:9px;padding-inline:11px}
  #service-screen .service-entry-icon{width:34px;height:34px;border-radius:9px}
  #service-screen .service-entry-icon svg{width:18px;height:18px}
  #service-screen .service-entry-name{font-size:15px}
  #service-screen .service-entry-chevron,#service-screen .service-entry-chevron svg{width:12px}
  #service-screen .service-entry:has(.service-entry-meta){display:grid;grid-template-columns:34px minmax(0,1fr) 12px;grid-template-rows:auto auto;align-content:center;column-gap:9px;row-gap:3px}
  #service-screen .service-entry:has(.service-entry-meta) .service-entry-icon{grid-column:1;grid-row:1/3}
  #service-screen .service-entry:has(.service-entry-meta) .service-entry-name{grid-column:2;grid-row:1;align-self:end}
  #service-screen .service-entry:has(.service-entry-meta) .service-entry-meta{grid-column:2;grid-row:2;justify-self:start;align-self:start;padding:2px 5px;font-size:8px}
  #service-screen .service-entry:has(.service-entry-meta) .service-entry-chevron{grid-column:3;grid-row:1/3;margin:0}
}
@media(max-width:760px){
  #service-screen::after{height:70px}
  #service-screen .service-header{width:calc(100% - 36px);height:70px;min-height:70px}
  #service-screen .service-header .service-brand img{width:49px;height:34px}
  #service-screen .service-back{min-height:36px;padding:7px 18px;font-size:13px}
  #service-screen .service-main{width:min(470px,calc(100% - 36px));padding:30px 0 42px}
  #service-screen .services-directory{grid-template-columns:minmax(0,1fr);background:#f5f5f5}
  #service-screen .service-group{padding:20px}
  #service-screen .service-group-head{gap:0;min-height:0;margin-bottom:18px;padding:12px 14px}
  #service-screen .service-group-head h2{font-size:23px}
  #service-screen .service-group-icon{width:50px;height:50px;border-radius:14px}
  #service-screen .service-group-icon svg{width:24px;height:24px}
  #service-screen .service-group-links{gap:10px}
  #service-screen .service-entry{gap:12px;min-height:72px;padding:12px 14px}
  #service-screen .service-entry-icon{width:38px;height:38px;border-radius:10px}
  #service-screen .service-entry-icon svg{width:20px;height:20px}
  #service-screen .service-entry-name{font-size:17px}
  #service-screen .service-entry:has(.service-entry-meta){display:flex}
  #service-screen .service-entry:has(.service-entry-meta) .service-entry-meta{padding:4px 6px;font-size:9px}
  #service-screen .service-entry:has(.service-entry-meta) .service-entry-chevron{margin-left:auto}
}
@media(max-width:600px){
  #service-screen .service-monitor-bezel{width:calc(100% + 16px);margin-inline:-8px;padding:7px 7px 0;border-radius:7px 7px 0 0}
  #service-screen .service-group-head h2{font-size:21px}
}
@media(max-width:360px){
  #service-screen .service-group{padding:17px}
  #service-screen .service-entry{gap:9px;padding-inline:11px}
  #service-screen .service-entry-name{font-size:16px}
  #service-screen .service-entry-icon{width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){
  #service-screen .service-entry,#service-screen .service-back{transition:none}
  #service-screen .service-entry:not(:disabled):not([aria-disabled="true"]):hover{transform:none}
}
@media(forced-colors:active){
  #service-screen .service-monitor-bezel{border-color:CanvasText;background:CanvasText}
  #service-screen .services-directory{background:Canvas}
  #service-screen .service-monitor-bezel::after{content:none}
}